Merge branch 'master' of github.com:mantinedev/mantine into dev

docs/src/docs/core/Tabs.mdx

@@ -182,7 +182,7 @@ function Demo() {
 ```
 
 ```tsx
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Tabs } from '@mantine/core';
 
 function Demo() {

docs/src/docs/styles/global-styles.mdx

@@ -33,7 +33,7 @@ function Demo() {
 
         '.your-class': {
           backgroundColor: 'red',
-        }
+        },
 
         '#your-id > [data-active]': {
           backgroundColor: 'pink'

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/Table/Table.story.tsx

@@ -12,16 +12,16 @@ const elements = [
   { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
 ];
 
-export function Usage() {
-  const rows = elements.map((element) => (
-    <tr key={element.name}>
-      <td>{element.position}</td>
-      <td>{element.name}</td>
-      <td>{element.symbol}</td>
-      <td>{element.mass}</td>
-    </tr>
-  ));
+const rows = elements.map((element) => (
+  <tr key={element.name}>
+    <td>{element.position}</td>
+    <td>{element.name}</td>
+    <td>{element.symbol}</td>
+    <td>{element.mass}</td>
+  </tr>
+));
 
+export function Usage() {
   return (
     <MantineProvider inherit theme={{ spacing: { xs: 0, sm: 2, md: 4, lg: 8, xl: 12 } }}>
       <div style={{ padding: 40 }}>
@@ -40,3 +40,39 @@ export function Usage() {
     </MantineProvider>
   );
 }
+
+export function WithBorder() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Table withBorder>
+        <thead>
+          <tr>
+            <th>Element position</th>
+            <th>Element name</th>
+            <th>Symbol</th>
+            <th>Atomic mass</th>
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </Table>
+    </div>
+  );
+}
+
+export function withColumnBorders() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Table withColumnBorders>
+        <thead>
+          <tr>
+            <th>Element position</th>
+            <th>Element name</th>
+            <th>Symbol</th>
+            <th>Atomic mass</th>
+          </tr>
+        </thead>
+        <tbody>{rows}</tbody>
+      </Table>
+    </div>
+  );
+}