@coveord/plasma-mantine 52.24.1 → 52.26.0

package/dist/esm/components/table/table-header/Th.styles.js

@@ -1,25 +1,28 @@
 import { createStyles } from "@mantine/core";
-var _columnSizing_size;
-export default createStyles(function(theme, columnSizing) {
+export default createStyles(function(theme, param) {
+    var maxSize = param.maxSize, minSize = param.minSize, size = param.size;
     return {
-        th: {
-            fontWeight: "400 !important",
-            padding: "0 !important",
+        root: {
+            padding: "".concat(theme.spacing.xs, " ").concat(theme.spacing.sm),
             verticalAlign: "middle",
             whiteSpace: "nowrap",
             textAlign: "left",
             color: theme.colors.gray[6],
             backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[8] : theme.colors.gray[0],
-            width: (_columnSizing_size = columnSizing.size) !== null && _columnSizing_size !== void 0 ? _columnSizing_size : "auto",
-            minWidth: columnSizing.minSize,
-            maxWidth: columnSizing.maxSize
+            height: theme.spacing.xl,
+            width: size !== null && size !== void 0 ? size : "auto",
+            minWidth: minSize,
+            maxWidth: maxSize,
+            fontWeight: 500,
+            fontSize: theme.fontSizes.xs,
+            "&:first-of-type": {
+                paddingLeft: theme.spacing.xl
+            },
+            "&:last-of-type": {
+                paddingRight: theme.spacing.xl
+            }
         },
         control: {
-            color: "inherit",
-            whiteSpace: "inherit",
-            fontWeight: "inherit",
-            width: "100%",
-            padding: "".concat(theme.spacing.xs, " ").concat(theme.spacing.sm),
             "&:hover": {
                 backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[7] : theme.colors.gray[1]
             }

package/dist/esm/components/table/table-header/Th.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-header/Th.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport default createStyles((theme, columnSizing: {size: number; minSize: number; maxSize: number}) => ({\n    th: {\n        fontWeight: '400 !important' as any,\n        padding: '0 !important',\n        verticalAlign: 'middle',\n        whiteSpace: 'nowrap',\n        textAlign: 'left',\n        color: theme.colors.gray[6],\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n        width: columnSizing.size ?? 'auto',\n        minWidth: columnSizing.minSize,\n        maxWidth: columnSizing.maxSize,\n    },\n\n    control: {\n        color: 'inherit',\n        whiteSpace: 'inherit',\n        fontWeight: 'inherit',\n        width: '100%',\n        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],\n        },\n    },\n}));\n"],"names":["createStyles","columnSizing","theme","th","fontWeight","padding","verticalAlign","whiteSpace","textAlign","color","colors","gray","backgroundColor","colorScheme","width","size","minWidth","minSize","maxWidth","maxSize","control","spacing","xs","sm"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;IAW5BC;AATf,eAAeD,aAAa,SAACE,OAAOD;WAAoE;QACpGE,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,eAAe;YACfC,YAAY;YACZC,WAAW;YACXC,OAAOP,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3BC,iBAAiBV,MAAMW,WAAW,KAAK,SAASX,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGT,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3FG,OAAOb,CAAAA,qBAAAA,aAAac,IAAI,cAAjBd,gCAAAA,qBAAqB;YAC5Be,UAAUf,aAAagB,OAAO;YAC9BC,UAAUjB,aAAakB,OAAO;QAClC;QAEAC,SAAS;YACLX,OAAO;YACPF,YAAY;YACZH,YAAY;YACZU,OAAO;YACPT,SAAS,AAAC,GAAsBH,OAApBA,MAAMmB,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBpB,MAAMmB,OAAO,CAACE,EAAE;YAChD,WAAW;gBACPX,iBAAiBV,MAAMW,WAAW,KAAK,SAASX,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGT,MAAMQ,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;GAAI"}
+{"version":3,"sources":["../../../../../src/components/table/table-header/Th.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface ThStyleParams {\n    size: number;\n    minSize: number;\n    maxSize: number;\n}\n\nexport default createStyles((theme, {maxSize, minSize, size}: ThStyleParams) => ({\n    root: {\n        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n        verticalAlign: 'middle',\n        whiteSpace: 'nowrap',\n        textAlign: 'left',\n        color: theme.colors.gray[6],\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n        height: theme.spacing.xl,\n        width: size ?? 'auto',\n        minWidth: minSize,\n        maxWidth: maxSize,\n        fontWeight: 500,\n        fontSize: theme.fontSizes.xs,\n\n        '&:first-of-type': {\n            paddingLeft: theme.spacing.xl,\n        },\n\n        '&:last-of-type': {\n            paddingRight: theme.spacing.xl,\n        },\n    },\n\n    control: {\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],\n        },\n    },\n}));\n"],"names":["createStyles","theme","maxSize","minSize","size","root","padding","spacing","xs","sm","verticalAlign","whiteSpace","textAlign","color","colors","gray","backgroundColor","colorScheme","height","xl","width","minWidth","maxWidth","fontWeight","fontSize","fontSizes","paddingLeft","paddingRight","control"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAQ3C,eAAeA,aAAa,SAACC;QAAQC,gBAAAA,SAASC,gBAAAA,SAASC,aAAAA;WAA0B;QAC7EC,MAAM;YACFC,SAAS,AAAC,GAAsBL,OAApBA,MAAMM,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBP,MAAMM,OAAO,CAACE,EAAE;YAChDC,eAAe;YACfC,YAAY;YACZC,WAAW;YACXC,OAAOZ,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3BC,iBAAiBf,MAAMgB,WAAW,KAAK,SAAShB,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGd,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3FG,QAAQjB,MAAMM,OAAO,CAACY,EAAE;YACxBC,OAAOhB,iBAAAA,kBAAAA,OAAQ;YACfiB,UAAUlB;YACVmB,UAAUpB;YACVqB,YAAY;YACZC,UAAUvB,MAAMwB,SAAS,CAACjB,EAAE;YAE5B,mBAAmB;gBACfkB,aAAazB,MAAMM,OAAO,CAACY,EAAE;YACjC;YAEA,kBAAkB;gBACdQ,cAAc1B,MAAMM,OAAO,CAACY,EAAE;YAClC;QACJ;QAEAS,SAAS;YACL,WAAW;gBACPZ,iBAAiBf,MAAMgB,WAAW,KAAK,SAAShB,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGd,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;GAAI"}

package/dist/esm/components/table/table-header/Th.types.d.ts

@@ -1,5 +1,10 @@
+import { DefaultProps, Selectors } from '@mantine/core';
 import { Header } from '@tanstack/react-table';
-export interface ThProps<T> {
+import { ComponentType, SVGProps } from 'react';
+import useStyles from './Th.styles';
+export type SortState = 'asc' | 'desc' | 'none';
+export interface ThProps<T = unknown> extends DefaultProps<Selectors<typeof useStyles>> {
     header: Header<T, unknown>;
+    sortingIcons?: Record<SortState, ComponentType<SVGProps<SVGSVGElement>>>;
 }
 //# sourceMappingURL=Th.types.d.ts.map

package/dist/esm/components/table/table-header/Th.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Th.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAE7C,MAAM,WAAW,OAAO,CAAC,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B"}
+{"version":3,"file":"Th.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-header/Th.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,eAAe,CAAC;AACtD,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC9C,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhD,MAAM,WAAW,OAAO,CAAC,CAAC,GAAG,OAAO,CAAE,SAAQ,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IACnF,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;CAC5E"}

package/dist/esm/components/table/table-header/Th.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-header/Th.types.ts"],"sourcesContent":["import {Header} from '@tanstack/react-table';\n\nexport interface ThProps<T> {\n    header: Header<T, unknown>;\n}\n"],"names":[],"mappings":"AAAA,WAIC"}
+{"version":3,"sources":["../../../../../src/components/table/table-header/Th.types.ts"],"sourcesContent":["import {DefaultProps, Selectors} from '@mantine/core';\nimport {Header} from '@tanstack/react-table';\nimport {ComponentType, SVGProps} from 'react';\nimport useStyles from './Th.styles';\n\nexport type SortState = 'asc' | 'desc' | 'none';\n\nexport interface ThProps<T = unknown> extends DefaultProps<Selectors<typeof useStyles>> {\n    header: Header<T, unknown>;\n    sortingIcons?: Record<SortState, ComponentType<SVGProps<SVGSVGElement>>>;\n}\n"],"names":[],"mappings":"AAAA,WAUC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.24.1",
+  "version": "52.26.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -41,8 +41,8 @@
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.41.0",
-    "@coveord/plasma-tokens": "52.23.1",
-    "@coveord/plasma-react-icons": "52.23.1"
+    "@coveord/plasma-react-icons": "52.23.1",
+    "@coveord/plasma-tokens": "52.23.1"
   },
   "devDependencies": {
     "@emotion/react": "11.11.1",

package/src/components/table/__tests__/Th.spec.tsx

@@ -22,9 +22,7 @@ describe('Th', () => {
         ];
         render(<Table data={data} columns={columns} />);
 
-        const headers = screen.getAllByRole('button');
-        expect(headers.length).toBe(2);
-
+        const headers = screen.getAllByRole('columnheader');
         expect(headers[0]).toHaveAccessibleName(/name doubleArrowHead/i);
         expect(headers[1]).toHaveAccessibleName(/type doubleArrowHead/i);
     });
@@ -38,17 +36,17 @@ describe('Th', () => {
         const onChange = vi.fn();
         render(<Table data={data} columns={columns} onChange={onChange} />);
 
-        await user.click(screen.getByRole('button', {name: /name doubleArrowHead/i}));
+        await user.click(screen.getByRole('columnheader', {name: /name doubleArrowHead/i}));
         await waitFor(() => {
             expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: false}]}));
         });
 
-        await user.click(screen.getByRole('button', {name: /name arrowUp/i}));
+        await user.click(screen.getByRole('columnheader', {name: /name arrowUp/i}));
         await waitFor(() => {
             expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: true}]}));
         });
 
-        await user.click(screen.getByRole('button', {name: /name arrowDown/i}));
+        await user.click(screen.getByRole('columnheader', {name: /name arrowDown/i}));
         await waitFor(() => {
             expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: false}]}));
         });

package/src/components/table/layouts/RowLayout.styles.ts

@@ -10,10 +10,6 @@ export default createStyles<string, RowLayoutStylesParams>((theme, {multiRowSele
     const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;
     return {
         headerColumns: {
-            '& th:first-of-type > *': {
-                paddingLeft: '40px',
-            },
-
             '& input[type=checkbox]': {
                 backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,
                 borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,

package/src/components/table/table-filter/TableFilter.tsx

@@ -1,4 +1,4 @@
-import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';
+import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';
 import {ActionIcon, Grid, TextInput} from '@mantine/core';
 import {ChangeEventHandler, FunctionComponent, MouseEventHandler, useEffect, useState} from 'react';
 
@@ -57,7 +57,7 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
                             <CrossSize16Px height={16} />
                         </ActionIcon>
                     ) : (
-                        <SearchSize16Px height={16} className={classes.empty} />
+                        <FilterSize16Px height={16} className={classes.empty} />
                     )
                 }
                 value={filter}

package/src/components/table/table-header/Th.styles.ts

@@ -1,25 +1,36 @@
 import {createStyles} from '@mantine/core';
 
-export default createStyles((theme, columnSizing: {size: number; minSize: number; maxSize: number}) => ({
-    th: {
-        fontWeight: '400 !important' as any,
-        padding: '0 !important',
+export interface ThStyleParams {
+    size: number;
+    minSize: number;
+    maxSize: number;
+}
+
+export default createStyles((theme, {maxSize, minSize, size}: ThStyleParams) => ({
+    root: {
+        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
         verticalAlign: 'middle',
         whiteSpace: 'nowrap',
         textAlign: 'left',
         color: theme.colors.gray[6],
         backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],
-        width: columnSizing.size ?? 'auto',
-        minWidth: columnSizing.minSize,
-        maxWidth: columnSizing.maxSize,
+        height: theme.spacing.xl,
+        width: size ?? 'auto',
+        minWidth: minSize,
+        maxWidth: maxSize,
+        fontWeight: 500,
+        fontSize: theme.fontSizes.xs,
+
+        '&:first-of-type': {
+            paddingLeft: theme.spacing.xl,
+        },
+
+        '&:last-of-type': {
+            paddingRight: theme.spacing.xl,
+        },
     },
 
     control: {
-        color: 'inherit',
-        whiteSpace: 'inherit',
-        fontWeight: 'inherit',
-        width: '100%',
-        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
         '&:hover': {
             backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],
         },

package/src/components/table/table-header/Th.tsx

@@ -1,22 +1,33 @@
 import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';
-import {Center, Group, Text, UnstyledButton} from '@mantine/core';
+import {Group, UnstyledButton, useComponentDefaultProps} from '@mantine/core';
 import {defaultColumnSizing, flexRender} from '@tanstack/react-table';
+import {AriaAttributes} from 'react';
 import useStyles from './Th.styles';
-import {ThProps} from './Th.types';
+import {SortState, ThProps} from './Th.types';
 
-const SortingIcons = {
+const SortingIcons: ThProps['sortingIcons'] = {
     asc: ArrowUpSize16Px,
     desc: ArrowDownSize16Px,
     none: DoubleArrowHeadVSize16Px,
 };
 
-const SortingLabels = {
+const SortingLabels: Record<SortState, AriaAttributes['aria-sort']> = {
     asc: 'ascending',
     desc: 'descending',
     none: 'none',
 } as const;
 
-export const Th = <T,>({header}: ThProps<T>) => {
+const defaultProps: Partial<ThProps> = {
+    sortingIcons: SortingIcons,
+};
+
+export const Th = <T,>(props: ThProps<T>) => {
+    const {header, classNames, styles, unstyled, sortingIcons, ...others} = useComponentDefaultProps(
+        'PlasmaTableColumnHeader',
+        defaultProps as Partial<ThProps<T>>,
+        props,
+    );
+
     const columnSizing = {
         ...defaultColumnSizing,
         size: header.column.columnDef.size,
@@ -24,38 +35,32 @@ export const Th = <T,>({header}: ThProps<T>) => {
         maxSize: header.column.columnDef.maxSize,
     };
 
-    const {classes} = useStyles(columnSizing);
+    const {classes, cx} = useStyles(columnSizing, {name: 'PlasmaTableColumnHeader', classNames, styles, unstyled});
 
     if (header.isPlaceholder) {
         return null;
     }
 
     if (!header.column.getCanSort()) {
-        return (
-            <th className={classes.th}>
-                <Text size="xs" py="xs" px="sm" fw={500}>
-                    {flexRender(header.column.columnDef.header, header.getContext())}
-                </Text>
-            </th>
-        );
+        return <th className={classes.root}>{flexRender(header.column.columnDef.header, header.getContext())}</th>;
     }
 
     const onSort = header.column.getToggleSortingHandler();
     const sortingOrder = header.column.getIsSorted() || 'none';
-    const Icon = SortingIcons[sortingOrder];
+    const Icon = sortingIcons[sortingOrder];
 
     return (
-        <th className={classes.th} aria-sort={SortingLabels[sortingOrder]}>
-            <UnstyledButton onClick={onSort} className={classes.control}>
-                <Group position="apart" noWrap>
-                    <Text size="xs" fw={500}>
-                        {flexRender(header.column.columnDef.header, header.getContext())}
-                    </Text>
-                    <Center>
-                        <Icon height={14} />
-                    </Center>
-                </Group>
-            </UnstyledButton>
-        </th>
+        <UnstyledButton
+            component="th"
+            onClick={onSort}
+            className={cx(classes.root, classes.control)}
+            aria-sort={SortingLabels[sortingOrder]}
+            {...others}
+        >
+            <Group noWrap spacing="xs">
+                {flexRender(header.column.columnDef.header, header.getContext())}
+                <Icon height={16} width={16} />
+            </Group>
+        </UnstyledButton>
     );
 };

package/src/components/table/table-header/Th.types.ts

@@ -1,5 +1,11 @@
+import {DefaultProps, Selectors} from '@mantine/core';
 import {Header} from '@tanstack/react-table';
+import {ComponentType, SVGProps} from 'react';
+import useStyles from './Th.styles';
 
-export interface ThProps<T> {
+export type SortState = 'asc' | 'desc' | 'none';
+
+export interface ThProps<T = unknown> extends DefaultProps<Selectors<typeof useStyles>> {
     header: Header<T, unknown>;
+    sortingIcons?: Record<SortState, ComponentType<SVGProps<SVGSVGElement>>>;
 }