@coveord/plasma-mantine 47.9.3 → 48.0.0

package/src/components/table/Table.tsx

@@ -1,6 +1,6 @@
-import {Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';
+import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';
 import {useForm} from '@mantine/form';
-import {useDidUpdate} from '@mantine/hooks';
+import {useClickOutside, useDidUpdate} from '@mantine/hooks';
 import {
     ColumnDef,
     defaultColumnSizing,
@@ -175,6 +175,10 @@ export const Table: TableType = <T,>({
         onMount?.({...state, ...form.values});
     }, []);
 
+    const outsideClickRef = useClickOutside(() => {
+        table.resetRowSelection(true);
+    });
+
     useDidUpdate(() => {
         triggerChange();
         clearSelection();
@@ -244,40 +248,42 @@ export const Table: TableType = <T,>({
     });
 
     return (
-        <TableContext.Provider
-            value={{
-                onChange: triggerChange,
-                state,
-                setState,
-                clearFilters,
-                getSelectedRow,
-                clearSelection,
-                form,
-            }}
-        >
-            {header}
-            <MantineTable className={classes.table} horizontalSpacing="sm" verticalSpacing="xs" pb="sm">
-                <thead className={classes.header}>
-                    {table.getHeaderGroups().map((headerGroup) => (
-                        <tr key={headerGroup.id}>
-                            {headerGroup.headers.map((columnHeader) => (
-                                <Th key={columnHeader.id} header={columnHeader} />
-                            ))}
-                        </tr>
-                    ))}
-                </thead>
-                <tbody>
-                    {rows.length ? (
-                        rows
-                    ) : (
-                        <tr>
-                            <td colSpan={columns.length}>{noDataChildren}</td>
-                        </tr>
-                    )}
-                </tbody>
-            </MantineTable>
-            {footer}
-        </TableContext.Provider>
+        <Box ref={outsideClickRef}>
+            <TableContext.Provider
+                value={{
+                    onChange: triggerChange,
+                    state,
+                    setState,
+                    clearFilters,
+                    getSelectedRow,
+                    clearSelection,
+                    form,
+                }}
+            >
+                {header}
+                <MantineTable className={classes.table} horizontalSpacing="sm" verticalSpacing="xs" pb="sm">
+                    <thead className={classes.header}>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <tr key={headerGroup.id}>
+                                {headerGroup.headers.map((columnHeader) => (
+                                    <Th key={columnHeader.id} header={columnHeader} />
+                                ))}
+                            </tr>
+                        ))}
+                    </thead>
+                    <tbody>
+                        {rows.length ? (
+                            rows
+                        ) : (
+                            <tr>
+                                <td colSpan={columns.length}>{noDataChildren}</td>
+                            </tr>
+                        )}
+                    </tbody>
+                </MantineTable>
+                {footer}
+            </TableContext.Provider>
+        </Box>
     );
 };
 

package/src/components/table/TableFooter.tsx

@@ -1,7 +1,7 @@
 import {Group} from '@mantine/core';
-import {FunctionComponent} from 'react';
+import {FunctionComponent, PropsWithChildren} from 'react';
 
-export const TableFooter: FunctionComponent = ({children}) => (
+export const TableFooter: FunctionComponent<PropsWithChildren> = ({children}) => (
     <Group position="apart" px="md" py="sm">
         {children}
     </Group>

package/src/components/table/TableHeader.tsx

@@ -1,5 +1,5 @@
 import {createStyles, Group} from '@mantine/core';
-import {FunctionComponent} from 'react';
+import {FunctionComponent, PropsWithChildren} from 'react';
 
 const useStyles = createStyles((theme) => ({
     header: {
@@ -11,7 +11,7 @@ const useStyles = createStyles((theme) => ({
     },
 }));
 
-export const TableHeader: FunctionComponent = ({children}) => {
+export const TableHeader: FunctionComponent<PropsWithChildren> = ({children}) => {
     const {classes} = useStyles();
     return (
         <Group position="right" spacing="lg" className={classes.header} px="md" py="sm">

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

@@ -125,4 +125,31 @@ describe('Table', () => {
         const allRows = screen.getAllByRole('button', {name: 'arrowHeadDown'});
         expect(allRows).toHaveLength(2);
     });
+
+    it('reset row selection when user click outside the table', () => {
+        render(
+            <div>
+                <div>I'm a header</div>
+                <Table
+                    data={[
+                        {firstName: 'first', lastName: 'last'},
+                        {firstName: 'patate', lastName: 'king'},
+                    ]}
+                    columns={columns}
+                />
+            </div>
+        );
+
+        const row = screen.getByRole('row', {name: 'patate king'});
+
+        expect(row).not.toHaveClass('__mantine-ref-rowSelected');
+
+        userEvent.click(row);
+
+        expect(row).toHaveClass('__mantine-ref-rowSelected');
+
+        userEvent.click(screen.getByText(/i'm a header/i));
+
+        expect(row).not.toHaveClass('__mantine-ref-rowSelected');
+    });
 });

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

@@ -45,7 +45,7 @@ describe('Th', () => {
         await screen.findAllByRole('img', {name: 'arrowHeadDown'});
         await screen.findAllByRole('img', {name: 'arrowHeadUp'});
 
-        userEvent.click(screen.getByRole('button', {name: 'name arrowHeadDown'}));
+        userEvent.click(screen.getByRole('button', {name: /name arrowheaddown/i}));
         await waitFor(() => {
             expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: false}]}));
         });
@@ -55,6 +55,7 @@ describe('Th', () => {
             expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: true}]}));
         });
 
+        await waitFor(() => expect(screen.queryByRole('button', {name: 'name arrowHeadUp'})).toBeVisible());
         userEvent.click(screen.getByRole('button', {name: 'name arrowHeadUp'}));
         await waitFor(() => {
             expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: false}]}));

package/src/hooks/__tests__/useControlledList.spec.tsx

@@ -1,4 +1,4 @@
-import {renderHook} from '@testing-library/react-hooks';
+import {renderHook} from '@testing-library/react';
 
 import {useControlledList} from '../useControlledList';
 

package/src/theme/Plasmantine.tsx

@@ -1,9 +1,9 @@
 import {MantineProvider} from '@mantine/core';
-import {FunctionComponent} from 'react';
+import {FunctionComponent, PropsWithChildren} from 'react';
 
 import {plasmaTheme} from './Theme';
 
-export const Plasmantine: FunctionComponent = ({children}) => (
+export const Plasmantine: FunctionComponent<PropsWithChildren> = ({children}) => (
     <MantineProvider withGlobalStyles withNormalizeCSS theme={plasmaTheme}>
         {children}
     </MantineProvider>