@coveord/plasma-mantine 52.24.1 → 52.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.24.1",
+  "version": "52.25.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-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>>>;
 }