@coveord/plasma-mantine 47.9.3 → 48.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "47.9.3",
+  "version": "48.1.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -21,7 +21,7 @@
   "module": "dist/esm/index.js",
   "types": "./dist/definitions/index.d.ts",
   "dependencies": {
-    "@coveord/plasma-react-icons": "47.3.7",
+    "@coveord/plasma-react-icons": "48.0.0",
     "@coveord/plasma-tokens": "47.3.7",
     "@monaco-editor/react": "4.4.5",
     "@swc/helpers": "0.4.11",
@@ -30,7 +30,7 @@
     "dayjs": "1.11.3",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.34.0",
-    "react-beautiful-dnd": "13.1.0"
+    "react-beautiful-dnd": "13.1.1"
   },
   "devDependencies": {
     "@emotion/react": "11.10.0",
@@ -42,31 +42,30 @@
     "@mantine/modals": "5.6.2",
     "@swc/cli": "0.1.57",
     "@swc/core": "1.3.3",
-    "@swc/jest": "0.2.22",
-    "@testing-library/dom": "8.13.0",
+    "@swc/jest": "0.2.23",
+    "@testing-library/dom": "8.18.1",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "11.2.7",
-    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "12.8.3",
-    "@types/jest": "27.5.2",
+    "@types/jest": "29.1.2",
     "@types/lodash.defaultsdeep": "4.6.7",
-    "@types/react": "17.0.44",
+    "@types/react": "18.0.21",
     "@types/react-beautiful-dnd": "13.1.2",
-    "@types/react-dom": "17.0.15",
+    "@types/react-dom": "18.0.6",
     "@types/testing-library__jest-dom": "5.14.5",
     "embla-carousel-react": "7.0.4",
-    "eslint-plugin-jest": "26.1.5",
-    "eslint-plugin-testing-library": "5.5.1",
+    "eslint-plugin-jest": "27.1.1",
+    "eslint-plugin-testing-library": "5.7.2",
     "identity-obj-proxy": "3.0.0",
-    "jest": "28.1.2",
-    "jest-environment-jsdom": "28.1.2",
+    "jest": "29.2.1",
+    "jest-environment-jsdom": "29.1.2",
     "jest-junit": "13.2.0",
     "npm-run-all": "4.1.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "rimraf": "3.0.2",
-    "tslib": "2.3.1",
-    "typescript": "4.6.4"
+    "tslib": "2.4.0",
+    "typescript": "4.7.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.0",
@@ -77,8 +76,8 @@
     "@mantine/hooks": "^5.6.2",
     "@mantine/modals": "^5.6.2",
     "embla-carousel-react": "7.0.4",
-    "react": ">= 17.0.2",
-    "react-dom": ">= 17.0.2"
+    "react": ">= 18.0.0",
+    "react-dom": ">= 18.0.0"
   },
   "scripts": {
     "build": "node ../../scripts/build",

package/src/__tests__/Utils.tsx

@@ -1,11 +1,11 @@
 import {render, RenderOptions, RenderResult} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {FunctionComponent, ReactElement} from 'react';
+import {FunctionComponent, PropsWithChildren, ReactElement} from 'react';
 
 import {Plasmantine} from '../theme';
 
 const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>): RenderResult => {
-    const TestWrapper: FunctionComponent = ({children}) => <Plasmantine>{children}</Plasmantine>;
+    const TestWrapper: FunctionComponent<PropsWithChildren> = ({children}) => <Plasmantine>{children}</Plasmantine>;
 
     return render(ui, {wrapper: TestWrapper, ...options});
 };

package/src/components/blank-slate/BlankSlate.tsx

@@ -1,5 +1,5 @@
 import {Paper, Stack} from '@mantine/core';
-import {FunctionComponent} from 'react';
+import {FunctionComponent, PropsWithChildren} from 'react';
 
 interface BlankSlateProps {
     /**
@@ -10,7 +10,7 @@ interface BlankSlateProps {
     withBorder?: boolean;
 }
 
-export const BlankSlate: FunctionComponent<BlankSlateProps> = ({children, withBorder = true}) => (
+export const BlankSlate: FunctionComponent<PropsWithChildren<BlankSlateProps>> = ({children, withBorder = true}) => (
     <Paper shadow={withBorder && 'xs'} p="xl" withBorder={withBorder}>
         <Stack align="center">{children}</Stack>
     </Paper>

package/src/components/collection/Collection.tsx

@@ -25,6 +25,7 @@ interface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {
     value?: T[];
     onFocus?: () => void;
     onChange?: (value: T[]) => void;
+    onRemoveItem?: (itemIndex: number) => void;
     draggable?: boolean;
     disabled?: boolean;
     allowAdd?: (values: T[]) => boolean;
@@ -48,6 +49,7 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
         value,
         defaultValue,
         onChange,
+        onRemoveItem,
         disabled,
         draggable,
         children,
@@ -71,13 +73,18 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
 
     const [values, {append, remove, reorder}] = useControlledList({value, onChange, defaultValue});
     const hasOnlyOneItem = values.length === 1;
+    const removeItem = (index: number) => () => {
+        remove(index);
+        onRemoveItem?.(index);
+    };
+
     const items = values.map((item, index) => (
         <CollectionItem
             key={index}
             disabled={disabled}
             draggable={draggable}
             index={index}
-            onRemove={() => remove(index)}
+            onRemove={removeItem(index)}
             styles={styles}
             removable={!(required && hasOnlyOneItem)}
         >

package/src/components/collection/CollectionItem.tsx

@@ -1,6 +1,6 @@
 import {DragAndDropSize16Px, RemoveSize16Px} from '@coveord/plasma-react-icons';
 import {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';
-import {FunctionComponent} from 'react';
+import {FunctionComponent, PropsWithChildren} from 'react';
 import {Draggable} from 'react-beautiful-dnd';
 
 import useStyles from './Colllection.styles';
@@ -26,7 +26,7 @@ const RemoveButton: FunctionComponent<{
 
 const RemoveButtonPlaceholder = () => <div style={{width: 28}} />;
 
-const StaticCollectionItem: FunctionComponent<CollectionItemSharedProps> = ({
+const StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({
     onRemove,
     removable = true,
     styles,
@@ -43,12 +43,12 @@ const StaticCollectionItem: FunctionComponent<CollectionItemSharedProps> = ({
     );
 };
 
-const DisabledCollectionItem: FunctionComponent<CollectionItemSharedProps> = ({children}) => {
+const DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({children}) => {
     const {classes, cx} = useStyles();
     return <Group className={cx(classes.item)}>{children}</Group>;
 };
 
-const DraggableCollectionItem: FunctionComponent<CollectionItemSharedProps> = ({
+const DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({
     index,
     onRemove,
     removable = true,
@@ -77,7 +77,11 @@ const DraggableCollectionItem: FunctionComponent<CollectionItemSharedProps> = ({
     );
 };
 
-export const CollectionItem: FunctionComponent<CollectionItemProps> = ({draggable, disabled, ...otherProps}) => {
+export const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({
+    draggable,
+    disabled,
+    ...otherProps
+}) => {
     if (disabled) {
         return <DisabledCollectionItem {...otherProps} />;
     }

package/src/components/collection/__tests__/Collection.spec.tsx

@@ -51,6 +51,33 @@ describe('Collection', () => {
         expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["orange"]}');
     });
 
+    it('calls the onRemoveItem function when clicking on a remove button', async () => {
+        const onRemoveItemSpy = jest.fn();
+        const Fixture = () => {
+            const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
+            return (
+                <Collection newItem="" {...form.getInputProps('fruits')} onRemoveItem={onRemoveItemSpy}>
+                    {(name) => <span data-testid="item">{name}</span>}
+                </Collection>
+            );
+        };
+
+        render(<Fixture />);
+        let items = screen.getAllByTestId('item');
+        expect(items).toHaveLength(2);
+        /* eslint-disable-next-line testing-library/no-node-access */
+        const removeOrange = await within(items[1].parentElement).findByRole('button', {name: /remove/i});
+        userEvent.click(removeOrange);
+
+        expect(onRemoveItemSpy).toHaveBeenCalledWith(1);
+
+        items = screen.getAllByTestId('item');
+        const removeBanana = await within(items[0].parentElement).findByRole('button', {name: /remove/i});
+        userEvent.click(removeBanana);
+
+        expect(onRemoveItemSpy).toHaveBeenCalledWith(0);
+    });
+
     it('does not render the remove button when disabled', async () => {
         const Fixture = () => {
             const [disabled, setDisabled] = useState(false);

package/src/components/header/Header.tsx

@@ -1,6 +1,6 @@
 import {QuestionSize24Px} from '@coveord/plasma-react-icons';
 import {Anchor, Breadcrumbs, DefaultProps, Divider, Group, Stack, Text, Title, Tooltip} from '@mantine/core';
-import {FunctionComponent, ReactNode} from 'react';
+import {FunctionComponent, PropsWithChildren, ReactNode} from 'react';
 
 interface HeaderProps extends DefaultProps {
     description?: ReactNode;
@@ -10,7 +10,7 @@ interface HeaderProps extends DefaultProps {
     docLinkTooltipLabel?: string;
 }
 
-export const Header: FunctionComponent<HeaderProps> = ({
+export const Header: FunctionComponent<PropsWithChildren<HeaderProps>> = ({
     description,
     actions,
     borderBottom,

package/src/components/inline-confirm/InlineConfirm.tsx

@@ -1,10 +1,10 @@
-import {Children, FunctionComponent, ReactElement, useState} from 'react';
+import {Children, FunctionComponent, PropsWithChildren, ReactElement, useState} from 'react';
 
 import {InlineConfirmButton} from './InlineConfirmButton';
 import {InlineConfirmContext} from './InlineConfirmContext';
 import {InlineConfirmPrompt} from './InlineConfirmPrompt';
 
-type InlineConfirmType = FunctionComponent & {
+type InlineConfirmType = FunctionComponent<PropsWithChildren> & {
     Prompt: typeof InlineConfirmPrompt;
     Button: typeof InlineConfirmButton;
 };

package/src/components/modal-wizard/ModalWizardStep.tsx

@@ -1,4 +1,4 @@
-import {FunctionComponent, ReactElement} from 'react';
+import {FunctionComponent, PropsWithChildren, ReactElement} from 'react';
 
 type DependsOnStep<T> = (currentStep: number, numberOfSteps: number) => T;
 
@@ -43,7 +43,9 @@ export interface ModalWizardStepProps {
     countsAsProgress?: boolean;
 }
 
-const ModalWizardStep: FunctionComponent<ModalWizardStepProps> = ({children}) => <div>{children}</div>;
+const ModalWizardStep: FunctionComponent<PropsWithChildren<ModalWizardStepProps>> = ({children}) => (
+    <div>{children}</div>
+);
 
 ModalWizardStep.defaultProps = {
     showProgressBar: true,

package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx

@@ -255,7 +255,7 @@ describe('ModalWizard', () => {
         });
 
         userEvent.click(finishButton);
-        expect(onFinish).toBeCalledTimes(1);
+        expect(onFinish).toHaveBeenCalledTimes(1);
     });
 
     it('handle dirty state if user confirms close', () => {

package/src/components/prompt/PromptFooter.tsx

@@ -1,8 +1,8 @@
-import {FunctionComponent} from 'react';
+import {FunctionComponent, PropsWithChildren} from 'react';
 import {StickyFooter, StickyFooterProps} from '../sticky-footer';
 
 export interface PromptFooterProps extends StickyFooterProps {}
 
-export const PromptFooter: FunctionComponent<PromptFooterProps> = ({children, ...otherProps}) => (
+export const PromptFooter: FunctionComponent<PropsWithChildren<PromptFooterProps>> = ({children, ...otherProps}) => (
     <StickyFooter {...otherProps}>{children}</StickyFooter>
 );

package/src/components/sticky-footer/StickyFooter.tsx

@@ -1,5 +1,5 @@
 import {createStyles, DefaultProps, Divider, Group, Paper} from '@mantine/core';
-import {FunctionComponent} from 'react';
+import {FunctionComponent, PropsWithChildren} from 'react';
 
 export interface StickyFooterProps extends DefaultProps {
     /**
@@ -17,7 +17,11 @@ const useStyles = createStyles(() => ({
     },
 }));
 
-export const StickyFooter: FunctionComponent<StickyFooterProps> = ({borderTop, children, ...others}) => {
+export const StickyFooter: FunctionComponent<PropsWithChildren<StickyFooterProps>> = ({
+    borderTop,
+    children,
+    ...others
+}) => {
     const {classes} = useStyles();
 
     return (

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>