Revert "[@mantine/core] Fix missing ref type in components with stati…

…c parts (#2505)"

This reverts commit 3efdd88.

package.json

@@ -103,7 +103,7 @@
     "new-github-release-url": "^1.0.0",
     "next": "^12.2.0",
     "open": "^8.2.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.4.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,7 +344,6 @@ _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,16 +9,12 @@ import { Section } from '../HorizontalSection/Section/Section';
 
 export interface AsideProps
   extends HorizontalSectionSharedProps,
-    React.ComponentPropsWithoutRef<'nav'> {
+    React.ComponentPropsWithRef<'nav'> {
   /** Aside content */
   children: React.ReactNode;
 }
 
-type AsideComponent = ForwardRefWithStaticComponents<
-  HTMLElement,
-  AsideProps,
-  { Section: typeof Section }
->;
+type AsideComponent = ForwardRefWithStaticComponents<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.ComponentPropsWithoutRef<'nav'>, 'children'> {
+    Omit<React.ComponentPropsWithRef<'nav'>, 'children'> {
   section: 'navbar' | 'aside';
   __staticSelector: string;
 }

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

@@ -9,16 +9,12 @@ import { Section } from '../HorizontalSection/Section/Section';
 
 export interface NavbarProps
   extends HorizontalSectionSharedProps,
-    React.ComponentPropsWithoutRef<'nav'> {
+    React.ComponentPropsWithRef<'nav'> {
   /** Navbar content */
   children: React.ReactNode;
 }
 
-type NavbarComponent = ForwardRefWithStaticComponents<
-  HTMLElement,
-  NavbarProps,
-  { Section: typeof Section }
->;
+type NavbarComponent = ForwardRefWithStaticComponents<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.ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
+    Omit<React.ComponentPropsWithRef<'input'>, 'type' | 'size'> {
   /** Key of theme.colors */
   color?: MantineColor;
 
@@ -56,7 +56,6 @@ 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.ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> {
+    Omit<React.ComponentPropsWithRef<'input'>, 'size' | 'onChange'> {
   /** Chip radius from theme or number to set value in px */
   radius?: MantineNumberSize;
 
@@ -62,11 +62,7 @@ const defaultProps: Partial<ChipProps> = {
   variant: 'outline',
 };
 
-type ChipComponent = ForwardRefWithStaticComponents<
-  HTMLInputElement,
-  ChipProps,
-  { Group: typeof ChipGroup }
->;
+type ChipComponent = ForwardRefWithStaticComponents<ChipProps, { Group: typeof ChipGroup }>;
 
 export const Chip: ChipComponent = forwardRef<HTMLInputElement, ChipProps>((props, ref) => {
   const {

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

@@ -26,15 +26,6 @@ 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.ComponentPropsWithoutRef<'div'> {
+export interface GridProps extends DefaultProps, React.ComponentPropsWithRef<'div'> {
   /** <Col /> components only */
   children: React.ReactNode;
 
@@ -26,7 +26,7 @@ export interface GridProps extends DefaultProps, React.ComponentPropsWithoutRef<
   columns?: number;
 }
 
-type GridComponent = ForwardRefWithStaticComponents<HTMLDivElement, GridProps, { Col: typeof Col }>;
+type GridComponent = ForwardRefWithStaticComponents<GridProps, { Col: typeof Col }>;
 
 const defaultProps: Partial<GridProps> = {
   gutter: 'md',

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

@@ -42,11 +42,7 @@ export interface ListProps
   listStyleType?: React.CSSProperties['listStyleType'];
 }
 
-type ListComponent = ForwardRefWithStaticComponents<
-  HTMLUListElement,
-  ListProps,
-  { Item: typeof ListItem }
->;
+type ListComponent = ForwardRefWithStaticComponents<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.ComponentPropsWithoutRef<'input'>, 'size'> {
+    Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
   /** Radio label */
   label?: React.ReactNode;
 
@@ -48,11 +48,7 @@ const defaultProps: Partial<RadioProps> = {
   size: 'sm',
 };
 
-type RadioComponent = ForwardRefWithStaticComponents<
-  HTMLInputElement,
-  RadioProps,
-  { Group: typeof RadioGroup }
->;
+type RadioComponent = ForwardRefWithStaticComponents<RadioProps, { Group: typeof RadioGroup }>;
 
 export const Radio: RadioComponent = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const {

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

@@ -164,7 +164,6 @@ _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.ComponentPropsWithoutRef<'div'> {
+    React.ComponentPropsWithRef<'div'> {
   /** <Stepper.Step /> components only */
   children: React.ReactNode;
 
@@ -59,7 +59,6 @@ export interface StepperProps
 }
 
 type StepperComponent = ForwardRefWithStaticComponents<
-  HTMLDivElement,
   StepperProps,
   {
     Step: typeof Step;

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

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

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

@@ -26,7 +26,6 @@ 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,12 +39,6 @@ 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.ComponentPropsWithoutRef<'div'> {
+    React.ComponentPropsWithRef<'div'> {
   /** <Timeline.Item /> components only */
   children: React.ReactNode;
 
@@ -39,7 +39,6 @@ export interface TimelineProps
 }
 
 type TimelineComponent = ForwardRefWithStaticComponents<
-  HTMLDivElement,
   TimelineProps,
   { Item: typeof TimelineItem }
 >;

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

@@ -188,7 +188,6 @@ _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.ComponentPropsWithoutRef<'div'>, 'onDrop'> {
+    Omit<React.ComponentPropsWithRef<'div'>, 'onDrop'> {
   /** Padding from theme.spacing, or number to set padding in px */
   padding?: MantineNumberSize;
 
@@ -199,7 +199,6 @@ _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.ComponentPropsWithoutRef<'div'>, 'children'> {
+    Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
   /** Code which will be highlighted */
   children: string;
 

src/mantine-prism/src/index.ts

@@ -9,7 +9,6 @@ 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>
-> = ReturnType<typeof forwardRef<T, Props>> & Static;
+> = ((props: Props) => React.ReactElement) &
+  Static & {
+    displayName: string;
+  };

yarn.lock

@@ -11376,10 +11376,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.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==
+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==
 
 pretty-error@^2.1.1:
   version "2.1.2"