[@mantine/core] Fix types for components that forward ref

package.json

@@ -103,7 +103,7 @@
     "new-github-release-url": "^1.0.0",
     "next": "^12.2.0",
     "open": "^8.2.0",
-    "prettier": "^2.4.1",
+    "prettier": "^2.7.1",
     "react-beautiful-dnd": "^13.1.0",
     "react-docgen-typescript": "2.1.0",
     "react-dom": "18.1.0",

src/mantine-carousel/src/Carousel.tsx

@@ -344,6 +344,7 @@ _Carousel.Slide = CarouselSlide;
 _Carousel.displayName = '@mantine/carousel/Carousel';
 
 export const Carousel: ForwardRefWithStaticComponents<
+  HTMLDivElement,
   CarouselProps,
   { Slide: typeof CarouselSlide }
 > = _Carousel;

src/mantine-core/src/AppShell/Aside/Aside.tsx

@@ -9,12 +9,16 @@ import { Section } from '../HorizontalSection/Section/Section';
 
 export interface AsideProps
   extends HorizontalSectionSharedProps,
-    React.ComponentPropsWithRef<'nav'> {
+    React.ComponentPropsWithoutRef<'nav'> {
   /** Aside content */
   children: React.ReactNode;
 }
 
-type AsideComponent = ForwardRefWithStaticComponents<AsideProps, { Section: typeof Section }>;
+type AsideComponent = ForwardRefWithStaticComponents<
+  HTMLElement,
+  AsideProps,
+  { Section: typeof Section }
+>;
 
 const defaultProps: Partial<AsideProps> = {
   fixed: false,

src/mantine-core/src/AppShell/HorizontalSection/HorizontalSection.tsx

@@ -39,7 +39,7 @@ export interface HorizontalSectionSharedProps extends DefaultProps {
 
 export interface HorizontalSectionProps
   extends HorizontalSectionSharedProps,
-    Omit<React.ComponentPropsWithRef<'nav'>, 'children'> {
+    Omit<React.ComponentPropsWithoutRef<'nav'>, 'children'> {
   section: 'navbar' | 'aside';
   __staticSelector: string;
 }

src/mantine-core/src/AppShell/Navbar/Navbar.tsx

@@ -9,12 +9,16 @@ import { Section } from '../HorizontalSection/Section/Section';
 
 export interface NavbarProps
   extends HorizontalSectionSharedProps,
-    React.ComponentPropsWithRef<'nav'> {
+    React.ComponentPropsWithoutRef<'nav'> {
   /** Navbar content */
   children: React.ReactNode;
 }
 
-type NavbarComponent = ForwardRefWithStaticComponents<NavbarProps, { Section: typeof Section }>;
+type NavbarComponent = ForwardRefWithStaticComponents<
+  HTMLElement,
+  NavbarProps,
+  { Section: typeof Section }
+>;
 
 const defaultProps: Partial<NavbarProps> = {
   fixed: false,

src/mantine-core/src/Checkbox/Checkbox.tsx

@@ -20,7 +20,7 @@ export type CheckboxStylesNames = Selectors<typeof useStyles>;
 
 export interface CheckboxProps
   extends DefaultProps<CheckboxStylesNames, CheckboxStylesParams>,
-    Omit<React.ComponentPropsWithRef<'input'>, 'type' | 'size'> {
+    Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
   /** Key of theme.colors */
   color?: MantineColor;
 
@@ -56,6 +56,7 @@ const defaultProps: Partial<CheckboxProps> = {
 };
 
 type CheckboxComponent = ForwardRefWithStaticComponents<
+  HTMLInputElement,
   CheckboxProps,
   { Group: typeof CheckboxGroup }
 >;

src/mantine-core/src/Chip/Chip.tsx

@@ -20,7 +20,7 @@ export type ChipStylesNames = Selectors<typeof useStyles>;
 
 export interface ChipProps
   extends DefaultProps<ChipStylesNames, ChipStylesParams>,
-    Omit<React.ComponentPropsWithRef<'input'>, 'size' | 'onChange'> {
+    Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> {
   /** Chip radius from theme or number to set value in px */
   radius?: MantineNumberSize;
 
@@ -62,7 +62,11 @@ const defaultProps: Partial<ChipProps> = {
   variant: 'outline',
 };
 
-type ChipComponent = ForwardRefWithStaticComponents<ChipProps, { Group: typeof ChipGroup }>;
+type ChipComponent = ForwardRefWithStaticComponents<
+  HTMLInputElement,
+  ChipProps,
+  { Group: typeof ChipGroup }
+>;
 
 export const Chip: ChipComponent = forwardRef<HTMLInputElement, ChipProps>((props, ref) => {
   const {

src/mantine-core/src/Grid/Grid.test.tsx

@@ -26,6 +26,15 @@ describe('@mantine/core/Grid', () => {
     expect(Grid.Col).toBe(Col);
   });
 
+  it('supports getting Grid ref', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(
+      <Grid ref={ref}>
+        <Grid.Col />
+      </Grid>
+    );
+    expect(ref.current instanceof HTMLDivElement).toBe(true);
+  });
   it('supports getting Col ref', () => {
     const ref = React.createRef<HTMLDivElement>();
     render(

src/mantine-core/src/Grid/Grid.tsx

@@ -6,7 +6,7 @@ import { Col } from './Col/Col';
 import { GridProvider } from './Grid.context';
 import useStyles from './Grid.styles';
 
-export interface GridProps extends DefaultProps, React.ComponentPropsWithRef<'div'> {
+export interface GridProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
   /** <Col /> components only */
   children: React.ReactNode;
 
@@ -26,7 +26,7 @@ export interface GridProps extends DefaultProps, React.ComponentPropsWithRef<'di
   columns?: number;
 }
 
-type GridComponent = ForwardRefWithStaticComponents<GridProps, { Col: typeof Col }>;
+type GridComponent = ForwardRefWithStaticComponents<HTMLDivElement, GridProps, { Col: typeof Col }>;
 
 const defaultProps: Partial<GridProps> = {
   gutter: 'md',

src/mantine-core/src/List/List.tsx

@@ -42,7 +42,11 @@ export interface ListProps
   listStyleType?: React.CSSProperties['listStyleType'];
 }
 
-type ListComponent = ForwardRefWithStaticComponents<ListProps, { Item: typeof ListItem }>;
+type ListComponent = ForwardRefWithStaticComponents<
+  HTMLUListElement,
+  ListProps,
+  { Item: typeof ListItem }
+>;
 
 const defaultProps: Partial<ListProps> = {
   type: 'unordered',

src/mantine-core/src/Radio/Radio.tsx

@@ -19,7 +19,7 @@ export type RadioStylesNames = Selectors<typeof useStyles>;
 
 export interface RadioProps
   extends DefaultProps<RadioStylesNames, RadioStylesParams>,
-    Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
+    Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> {
   /** Radio label */
   label?: React.ReactNode;
 
@@ -48,7 +48,11 @@ const defaultProps: Partial<RadioProps> = {
   size: 'sm',
 };
 
-type RadioComponent = ForwardRefWithStaticComponents<RadioProps, { Group: typeof RadioGroup }>;
+type RadioComponent = ForwardRefWithStaticComponents<
+  HTMLInputElement,
+  RadioProps,
+  { Group: typeof RadioGroup }
+>;
 
 export const Radio: RadioComponent = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const {

src/mantine-core/src/ScrollArea/ScrollArea.tsx

@@ -164,6 +164,7 @@ _ScrollArea.displayName = '@mantine/core/ScrollArea';
 _ScrollArea.Autosize = ScrollAreaAutosize;
 
 export const ScrollArea: ForwardRefWithStaticComponents<
+  HTMLDivElement,
   ScrollAreaProps,
   {
     Autosize: typeof ScrollAreaAutosize;

src/mantine-core/src/Stepper/Stepper.tsx

@@ -17,7 +17,7 @@ export type StepperStylesNames = Selectors<typeof useStyles> | StepStylesNames;
 
 export interface StepperProps
   extends DefaultProps<StepperStylesNames>,
-    React.ComponentPropsWithRef<'div'> {
+    React.ComponentPropsWithoutRef<'div'> {
   /** <Stepper.Step /> components only */
   children: React.ReactNode;
 
@@ -59,6 +59,7 @@ export interface StepperProps
 }
 
 type StepperComponent = ForwardRefWithStaticComponents<
+  HTMLDivElement,
   StepperProps,
   {
     Step: typeof Step;

src/mantine-core/src/Switch/Switch.tsx

@@ -55,7 +55,11 @@ const defaultProps: Partial<SwitchProps> = {
   radius: 'xl',
 };
 
-type SwitchComponent = ForwardRefWithStaticComponents<SwitchProps, { Group: typeof SwitchGroup }>;
+type SwitchComponent = ForwardRefWithStaticComponents<
+  HTMLInputElement,
+  SwitchProps,
+  { Group: typeof SwitchGroup }
+>;
 
 export const Switch: SwitchComponent = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
   const {

src/mantine-core/src/Tabs/Tabs.tsx

@@ -26,6 +26,7 @@ export interface TabsProps
     Omit<React.ComponentPropsWithoutRef<'div'>, keyof TabsProviderProps> {}
 
 type TabsComponent = ForwardRefWithStaticComponents<
+  HTMLDivElement,
   TabsProps,
   {
     List: typeof TabsList;

src/mantine-core/src/Timeline/Timeline.test.tsx

@@ -39,6 +39,12 @@ describe('@mantine/core/Timeline', () => {
     );
   });
 
+  it('supports getting Timeline ref', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(<Timeline ref={ref} {...defaultProps} />);
+    expect(ref.current instanceof HTMLDivElement).toBe(true);
+  });
+
   it('exposes TimelineItem as Timeline.Item', () => {
     expect(Timeline.Item).toBe(TimelineItem);
   });

src/mantine-core/src/Timeline/Timeline.tsx

@@ -12,7 +12,7 @@ import { TimelineItem, TimelineItemStylesNames } from './TimelineItem/TimelineIt
 
 export interface TimelineProps
   extends DefaultProps<TimelineItemStylesNames>,
-    React.ComponentPropsWithRef<'div'> {
+    React.ComponentPropsWithoutRef<'div'> {
   /** <Timeline.Item /> components only */
   children: React.ReactNode;
 
@@ -39,6 +39,7 @@ export interface TimelineProps
 }
 
 type TimelineComponent = ForwardRefWithStaticComponents<
+  HTMLDivElement,
   TimelineProps,
   { Item: typeof TimelineItem }
 >;

src/mantine-core/src/Tooltip/Tooltip.tsx

@@ -183,6 +183,7 @@ _Tooltip.Floating = TooltipFloating;
 _Tooltip.displayName = '@mantine/core/Tooltip';
 
 export const Tooltip: ForwardRefWithStaticComponents<
+  HTMLElement,
   TooltipProps,
   { Group: typeof TooltipGroup; Floating: typeof TooltipFloating }
 > = _Tooltip;

src/mantine-dropzone/src/Dropzone.tsx

@@ -19,7 +19,7 @@ export type DropzoneStylesNames = Selectors<typeof useStyles>;
 
 export interface DropzoneProps
   extends DefaultProps<DropzoneStylesNames>,
-    Omit<React.ComponentPropsWithRef<'div'>, 'onDrop'> {
+    Omit<React.ComponentPropsWithoutRef<'div'>, 'onDrop'> {
   /** Padding from theme.spacing, or number to set padding in px */
   padding?: MantineNumberSize;
 
@@ -201,6 +201,7 @@ _Dropzone.Reject = DropzoneReject;
 _Dropzone.Idle = DropzoneIdle;
 
 export const Dropzone: ForwardRefWithStaticComponents<
+  HTMLDivElement,
   DropzoneProps,
   {
     Accept: typeof DropzoneAccept;

src/mantine-prism/src/Prism/Prism.tsx

@@ -22,7 +22,7 @@ export type PrismStylesNames = Selectors<typeof useStyles>;
 
 export interface PrismProps
   extends DefaultProps<PrismStylesNames>,
-    Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
+    Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
   /** Code which will be highlighted */
   children: string;
 

src/mantine-prism/src/index.ts

@@ -9,6 +9,7 @@ export type { PrismProps, PrismStylesNames } from './Prism/Prism';
 export type { PrismStylesParams } from './Prism/Prism.styles';
 
 type PrismComponent = ForwardRefWithStaticComponents<
+  HTMLDivElement,
   PrismProps,
   {
     Tabs: typeof PrismTabs;

src/mantine-utils/src/ForwardRefWithStaticComponents.ts

@@ -1,7 +1,7 @@
+import { forwardRef } from 'react';
+
 export type ForwardRefWithStaticComponents<
+  T,
   Props extends Record<string, any>,
   Static extends Record<string, any>
-> = ((props: Props) => React.ReactElement) &
-  Static & {
-    displayName: string;
-  };
+> = ReturnType<typeof forwardRef<T, Props>> & Static;

yarn.lock

@@ -11378,10 +11378,10 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18"
   integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==
 
-prettier@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
-  integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
+prettier@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
+  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
 
 pretty-error@^2.1.1:
   version "2.1.2"