@coveord/plasma-mantine 52.13.2 → 52.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.13.2",
+  "version": "52.14.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -31,7 +31,7 @@
     "@dnd-kit/modifiers": "6.0.1",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.1",
-    "@mantine/utils": "6.0.17",
+    "@mantine/utils": "6.0.18",
     "@monaco-editor/react": "4.5.1",
     "@swc/helpers": "0.5.1",
     "@tanstack/react-table": "8.9.3",
@@ -41,33 +41,33 @@
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.41.0",
-    "@coveord/plasma-react-icons": "52.13.2",
-    "@coveord/plasma-tokens": "52.13.2"
+    "@coveord/plasma-react-icons": "52.14.0",
+    "@coveord/plasma-tokens": "52.14.0"
   },
   "devDependencies": {
     "@emotion/react": "11.11.1",
-    "@mantine/carousel": "6.0.17",
-    "@mantine/core": "6.0.17",
-    "@mantine/dates": "6.0.17",
-    "@mantine/form": "6.0.17",
-    "@mantine/hooks": "6.0.17",
-    "@mantine/modals": "6.0.17",
-    "@mantine/notifications": "6.0.17",
+    "@mantine/carousel": "6.0.18",
+    "@mantine/core": "6.0.18",
+    "@mantine/dates": "6.0.18",
+    "@mantine/form": "6.0.18",
+    "@mantine/hooks": "6.0.18",
+    "@mantine/modals": "6.0.18",
+    "@mantine/notifications": "6.0.18",
     "@swc/cli": "0.1.62",
-    "@swc/core": "1.3.74",
-    "@swc/jest": "0.2.27",
+    "@swc/core": "1.3.75",
+    "@swc/jest": "0.2.28",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/jest": "29.5.3",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.defaultsdeep": "4.6.7",
-    "@types/react": "18.2.18",
+    "@types/react": "18.2.19",
     "@types/react-dom": "18.2.7",
     "@types/testing-library__jest-dom": "5.14.9",
     "csstype": "3.1.2",
     "embla-carousel-react": "7.1.0",
-    "eslint-plugin-testing-library": "5.11.0",
+    "eslint-plugin-testing-library": "5.11.1",
     "eslint-plugin-vitest": "0.2.8",
     "eslint-plugin-vitest-globals": "1.4.0",
     "identity-obj-proxy": "3.0.0",
@@ -82,7 +82,7 @@
     "tslib": "2.6.1",
     "typescript": "5.1.6",
     "vitest": "0.34.1",
-    "eslint-config-plasma": "52.13.2"
+    "eslint-config-plasma": "52.14.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.0",

package/src/components/copyToClipboard/CopyToClipboard.tsx

@@ -52,6 +52,7 @@ export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({
             }}
             value={others.value}
             readOnly
+            autoComplete="off"
             rightSection={<CopyToClipboardButton {...others} />}
         />
     ) : (

package/src/components/header/Header.tsx

@@ -44,6 +44,7 @@ export const Header: HeaderType = ({description, borderBottom, children, variant
                 position="apart"
                 p={variant === 'page' ? 'xl' : undefined}
                 pb={variant === 'page' ? 'lg' : undefined}
+                noWrap
                 {...others}
             >
                 <Stack spacing={0}>

package/src/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>
   <div
-    class="mantine-Group-root mantine-ogmezo"
+    class="mantine-Group-root mantine-1arn2xu"
   >
     <div
       class="mantine-Stack-root mantine-1178y6y"

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

@@ -5,7 +5,7 @@ import {InlineConfirmContext} from './InlineConfirmContext';
 import {InlineConfirmMenuItem} from './InlineConfirmMenuItem';
 import {InlineConfirmPrompt} from './InlineConfirmPrompt';
 
-type InlineConfirmType = FunctionComponent<PropsWithChildren> & {
+type InlineConfirmType = FunctionComponent<PropsWithChildren<unknown>> & {
     Prompt: typeof InlineConfirmPrompt;
     Button: typeof InlineConfirmButton;
     MenuItem: typeof InlineConfirmMenuItem;

package/src/components/table/TableFilter.tsx

@@ -1,7 +1,8 @@
 import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';
-import {ActionIcon, createStyles, DefaultProps, Grid, Selectors, TextInput} from '@mantine/core';
-import {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';
+import {ActionIcon, DefaultProps, Grid, Selectors, TextInput, createStyles} from '@mantine/core';
+import {ChangeEventHandler, FunctionComponent, MouseEventHandler, useState} from 'react';
 
+import {useDebouncedValue, useDidUpdate} from '@mantine/hooks';
 import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
 
@@ -34,24 +35,27 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
 }) => {
     const {classes} = useStyles(null, {name: 'TableFilter', classNames, styles, unstyled});
     const {state, setState} = useTable();
+    const [filter, setFilter] = useState(state.globalFilter);
+    const [debounced, cancel] = useDebouncedValue(filter, 300);
 
-    const changeFilterValue = (value: string) => {
+    useDidUpdate(() => {
         setState((prevState) => ({
             ...prevState,
             pagination: prevState.pagination
                 ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}
                 : prevState.pagination,
-            globalFilter: value,
+            globalFilter: debounced,
         }));
-    };
+        return cancel;
+    }, [debounced]);
 
     const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
         const {value} = event.currentTarget;
-        changeFilterValue(value);
+        setFilter(value);
     };
 
     const handleClear: MouseEventHandler<HTMLButtonElement> = () => {
-        changeFilterValue('');
+        setFilter('');
     };
 
     return (
@@ -59,17 +63,18 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
             <TextInput
                 className={classes.wrapper}
                 placeholder={placeholder}
+                autoComplete="off"
                 mb="md"
                 rightSection={
-                    state.globalFilter ? (
+                    filter ? (
                         <ActionIcon onClick={handleClear}>
                             <CrossSize16Px height={16} />
                         </ActionIcon>
                     ) : (
-                        <SearchSize16Px height={14} className={classes.empty} />
+                        <SearchSize16Px height={16} className={classes.empty} />
                     )
                 }
-                value={state.globalFilter}
+                value={filter}
                 onChange={handleChange}
                 {...others}
             />

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

@@ -1,5 +1,5 @@
 import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
-import {render, screen, userEvent, within} from '@test-utils';
+import {act, render, screen, userEvent, within} from '@test-utils';
 
 import {Table} from '../Table';
 
@@ -29,7 +29,7 @@ describe('Table.Filter', () => {
     });
 
     it('calls onChange when typing something in the filter', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
         const onChange = vi.fn();
         render(
             <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
@@ -40,13 +40,21 @@ describe('Table.Filter', () => {
         );
 
         await user.type(screen.getByRole('textbox'), 'vegetable');
-        vi.advanceTimersByTime(500);
+
+        act(() => {
+            // 300 ms debounce on TableFilter input
+            vi.advanceTimersByTime(300);
+        });
+        act(() => {
+            // 500 ms debounce on Table onChange callback
+            vi.advanceTimersByTime(500);
+        });
 
         expect(onChange).toHaveBeenCalledWith(expect.objectContaining({globalFilter: 'vegetable'}));
     });
 
     it('goes back to the first page when changing the filter', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup({advanceTimers: vi.advanceTimersByTime});
         const onChange = vi.fn();
         render(
             <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
@@ -61,7 +69,14 @@ describe('Table.Filter', () => {
         );
 
         await user.type(screen.getByRole('textbox'), 'veg');
-        vi.advanceTimersByTime(500);
+        act(() => {
+            // 300 ms debounce on TableFilter input
+            vi.advanceTimersByTime(300);
+        });
+        act(() => {
+            // 500 ms debounce on Table onChange callback
+            vi.advanceTimersByTime(500);
+        });
 
         expect(onChange).toHaveBeenCalledWith(
             expect.objectContaining({globalFilter: 'veg', pagination: {pageIndex: 0, pageSize: 50}}),

package/src/theme/Plasmantine.tsx

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