@coveord/plasma-mantine 52.13.2 → 52.14.1

package/dist/esm/components/table/TablePredicate.js

@@ -10,7 +10,8 @@ var useStyles = createStyles(function(theme) {
     return {
         root: {},
         wrapper: {},
-        label: {}
+        label: {},
+        select: {}
     };
 });
 export var TablePredicate = function(_param) {
@@ -55,7 +56,8 @@ export var TablePredicate = function(_param) {
                     onChange: onUpdate,
                     data: data,
                     "aria-label": label !== null && label !== void 0 ? label : id,
-                    searchable: data.length > 7
+                    searchable: data.length > 7,
+                    className: classes.select
                 })
             ]
         })

package/dist/esm/components/table/TablePredicate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TablePredicate.tsx"],"sourcesContent":["import {createStyles, DefaultProps, Grid, Group, Select, SelectItem, Selectors, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    wrapper: {},\n    label: {},\n}));\n\ntype TablePredicateStylesNames = Selectors<typeof useStyles>;\n\ninterface TablePredicateProps extends DefaultProps<TablePredicateStylesNames> {\n    /**\n     * Unique identifier for this predicate. Will be used to access the selected value in the table state\n     */\n    id: string;\n    /**\n     * The values to display in the predicate\n     */\n    data: SelectItem[];\n    /**\n     * Input label (not displayed for now)\n     *\n     * @default default to the predicate id\n     */\n    label?: string;\n}\n\nexport const TablePredicate: FunctionComponent<TablePredicateProps> = ({\n    id,\n    data,\n    label,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes} = useStyles(null, {name: 'TablePredicate', classNames, styles, unstyled});\n    const {form} = useTable();\n\n    const onUpdate = (newValue: string) => {\n        form.setFieldValue('predicates', {...form.values.predicates, [id]: newValue});\n    };\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Predicate} py=\"sm\" className={classes.root} {...others}>\n            <Group spacing=\"xs\" className={classes.wrapper}>\n                {label ? <Text className={classes.label}>{label}:</Text> : null}\n                <Select\n                    withinPortal\n                    value={form.values.predicates[id]}\n                    onChange={onUpdate}\n                    data={data}\n                    aria-label={label ?? id}\n                    searchable={data.length > 7}\n                />\n            </Group>\n        </Grid.Col>\n    );\n};\n"],"names":["createStyles","Grid","Group","Select","Text","TableComponentsOrder","useTable","useStyles","theme","root","wrapper","label","TablePredicate","id","data","classNames","styles","unstyled","others","classes","name","form","onUpdate","newValue","setFieldValue","values","predicates","Col","span","order","Predicate","py","className","spacing","withinPortal","value","onChange","aria-label","searchable","length"],"mappings":";;;;;AAAA,SAAQA,YAAY,EAAgBC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAyBC,IAAI,QAAO,gBAAgB;AAG3G,SAAQC,oBAAoB,QAAO,iBAAiB;AACpD,SAAQC,QAAQ,QAAO,iBAAiB;AAExC,IAAMC,YAAYP,aAAa,SAACQ;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS,CAAC;QACVC,OAAO,CAAC;IACZ;;AAqBA,OAAO,IAAMC,iBAAyD;QAClEC,YAAAA,IACAC,cAAAA,MACAH,eAAAA,OACAI,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QANHL;QACAC;QACAH;QACAI;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWZ,UAAU,MAAM;QAACa,MAAM;QAAkBL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAAhFE;IACP,IAAM,AAACE,OAAQf,WAARe;IAEP,IAAMC,WAAW,SAACC;QACdF,KAAKG,aAAa,CAAC,cAAc,wCAAIH,KAAKI,MAAM,CAACC,UAAU,GAAE,qBAACb,IAAKU;IACvE;IAEA,qBACI,KAACtB,KAAK0B,GAAG;QAACC,MAAK;QAAUC,OAAOxB,qBAAqByB,SAAS;QAAEC,IAAG;QAAKC,WAAWb,QAAQV,IAAI;OAAMS;kBACjG,cAAA,MAAChB;YAAM+B,SAAQ;YAAKD,WAAWb,QAAQT,OAAO;;gBACzCC,sBAAQ,MAACP;oBAAK4B,WAAWb,QAAQR,KAAK;;wBAAGA;wBAAM;;qBAAW;8BAC3D,KAACR;oBACG+B,YAAY;oBACZC,OAAOd,KAAKI,MAAM,CAACC,UAAU,CAACb,GAAG;oBACjCuB,UAAUd;oBACVR,MAAMA;oBACNuB,cAAY1B,kBAAAA,mBAAAA,QAASE;oBACrByB,YAAYxB,KAAKyB,MAAM,GAAG;;;;;AAK9C,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TablePredicate.tsx"],"sourcesContent":["import {createStyles, DefaultProps, Grid, Group, Select, SelectItem, Selectors, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    wrapper: {},\n    label: {},\n    select: {}\n}));\n\ntype TablePredicateStylesNames = Selectors<typeof useStyles>;\n\ninterface TablePredicateProps extends DefaultProps<TablePredicateStylesNames> {\n    /**\n     * Unique identifier for this predicate. Will be used to access the selected value in the table state\n     */\n    id: string;\n    /**\n     * The values to display in the predicate\n     */\n    data: SelectItem[];\n    /**\n     * Input label (not displayed for now)\n     *\n     * @default default to the predicate id\n     */\n    label?: string;\n}\n\nexport const TablePredicate: FunctionComponent<TablePredicateProps> = ({\n    id,\n    data,\n    label,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes} = useStyles(null, {name: 'TablePredicate', classNames, styles, unstyled});\n    const {form} = useTable();\n\n    const onUpdate = (newValue: string) => {\n        form.setFieldValue('predicates', {...form.values.predicates, [id]: newValue});\n    };\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Predicate} py=\"sm\" className={classes.root} {...others}>\n            <Group spacing=\"xs\" className={classes.wrapper}>\n                {label ? <Text className={classes.label}>{label}:</Text> : null}\n                <Select\n                    withinPortal\n                    value={form.values.predicates[id]}\n                    onChange={onUpdate}\n                    data={data}\n                    aria-label={label ?? id}\n                    searchable={data.length > 7}\n                    className={classes.select}\n                />\n            </Group>\n        </Grid.Col>\n    );\n};\n"],"names":["createStyles","Grid","Group","Select","Text","TableComponentsOrder","useTable","useStyles","theme","root","wrapper","label","select","TablePredicate","id","data","classNames","styles","unstyled","others","classes","name","form","onUpdate","newValue","setFieldValue","values","predicates","Col","span","order","Predicate","py","className","spacing","withinPortal","value","onChange","aria-label","searchable","length"],"mappings":";;;;;AAAA,SAAQA,YAAY,EAAgBC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAyBC,IAAI,QAAO,gBAAgB;AAG3G,SAAQC,oBAAoB,QAAO,iBAAiB;AACpD,SAAQC,QAAQ,QAAO,iBAAiB;AAExC,IAAMC,YAAYP,aAAa,SAACQ;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS,CAAC;QACVC,OAAO,CAAC;QACRC,QAAQ,CAAC;IACb;;AAqBA,OAAO,IAAMC,iBAAyD;QAClEC,YAAAA,IACAC,cAAAA,MACAJ,eAAAA,OACAK,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QANHL;QACAC;QACAJ;QACAK;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWb,UAAU,MAAM;QAACc,MAAM;QAAkBL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAAhFE;IACP,IAAM,AAACE,OAAQhB,WAARgB;IAEP,IAAMC,WAAW,SAACC;QACdF,KAAKG,aAAa,CAAC,cAAc,wCAAIH,KAAKI,MAAM,CAACC,UAAU,GAAE,qBAACb,IAAKU;IACvE;IAEA,qBACI,KAACvB,KAAK2B,GAAG;QAACC,MAAK;QAAUC,OAAOzB,qBAAqB0B,SAAS;QAAEC,IAAG;QAAKC,WAAWb,QAAQX,IAAI;OAAMU;kBACjG,cAAA,MAACjB;YAAMgC,SAAQ;YAAKD,WAAWb,QAAQV,OAAO;;gBACzCC,sBAAQ,MAACP;oBAAK6B,WAAWb,QAAQT,KAAK;;wBAAGA;wBAAM;;qBAAW;8BAC3D,KAACR;oBACGgC,YAAY;oBACZC,OAAOd,KAAKI,MAAM,CAACC,UAAU,CAACb,GAAG;oBACjCuB,UAAUd;oBACVR,MAAMA;oBACNuB,cAAY3B,kBAAAA,mBAAAA,QAASG;oBACrByB,YAAYxB,KAAKyB,MAAM,GAAG;oBAC1BP,WAAWb,QAAQR,MAAM;;;;;AAK7C,EAAE"}

package/dist/esm/theme/Plasmantine.d.ts

@@ -1,3 +1,3 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
-export declare const Plasmantine: FunctionComponent<PropsWithChildren>;
+export declare const Plasmantine: FunctionComponent<PropsWithChildren<unknown>>;
 //# sourceMappingURL=Plasmantine.d.ts.map

package/dist/esm/theme/Plasmantine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Plasmantine.d.ts","sourceRoot":"","sources":["../../../src/theme/Plasmantine.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAI3D,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,iBAAiB,CAI5D,CAAC"}
+{"version":3,"file":"Plasmantine.d.ts","sourceRoot":"","sources":["../../../src/theme/Plasmantine.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAI3D,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAIrE,CAAC"}

package/dist/esm/theme/Plasmantine.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/Plasmantine.tsx"],"sourcesContent":["import {MantineProvider} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {plasmaTheme} from './Theme';\n\nexport const Plasmantine: FunctionComponent<PropsWithChildren> = ({children}) => (\n    <MantineProvider withGlobalStyles withNormalizeCSS theme={plasmaTheme}>\n        {children}\n    </MantineProvider>\n);\n"],"names":["MantineProvider","plasmaTheme","Plasmantine","children","withGlobalStyles","withNormalizeCSS","theme"],"mappings":";AAAA,SAAQA,eAAe,QAAO,gBAAgB;AAG9C,SAAQC,WAAW,QAAO,UAAU;AAEpC,OAAO,IAAMC,cAAoD;QAAEC,iBAAAA;yBAC/D,KAACH;QAAgBI,gBAAgB;QAACC,gBAAgB;QAACC,OAAOL;kBACrDE;;EAEP"}
+{"version":3,"sources":["../../../src/theme/Plasmantine.tsx"],"sourcesContent":["import {MantineProvider} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {plasmaTheme} from './Theme';\n\nexport const Plasmantine: FunctionComponent<PropsWithChildren<unknown>> = ({children}) => (\n    <MantineProvider withGlobalStyles withNormalizeCSS theme={plasmaTheme}>\n        {children}\n    </MantineProvider>\n);\n"],"names":["MantineProvider","plasmaTheme","Plasmantine","children","withGlobalStyles","withNormalizeCSS","theme"],"mappings":";AAAA,SAAQA,eAAe,QAAO,gBAAgB;AAG9C,SAAQC,WAAW,QAAO,UAAU;AAEpC,OAAO,IAAMC,cAA6D;QAAEC,iBAAAA;yBACxE,KAACH;QAAgBI,gBAAgB;QAACC,gBAAgB;QAACC,OAAOL;kBACrDE;;EAEP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.13.2",
+  "version": "52.14.1",
   "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.19",
     "@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.1",
+    "@coveord/plasma-tokens": "52.14.1"
   },
   "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.19",
+    "@mantine/core": "6.0.19",
+    "@mantine/dates": "6.0.19",
+    "@mantine/form": "6.0.19",
+    "@mantine/hooks": "6.0.19",
+    "@mantine/modals": "6.0.19",
+    "@mantine/notifications": "6.0.19",
     "@swc/cli": "0.1.62",
-    "@swc/core": "1.3.74",
-    "@swc/jest": "0.2.27",
-    "@testing-library/jest-dom": "5.17.0",
+    "@swc/core": "1.3.76",
+    "@swc/jest": "0.2.29",
+    "@testing-library/jest-dom": "6.0.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.20",
     "@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.1"
   },
   "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/TablePredicate.tsx

@@ -8,6 +8,7 @@ const useStyles = createStyles((theme) => ({
     root: {},
     wrapper: {},
     label: {},
+    select: {}
 }));
 
 type TablePredicateStylesNames = Selectors<typeof useStyles>;
@@ -56,6 +57,7 @@ export const TablePredicate: FunctionComponent<TablePredicateProps> = ({
                     data={data}
                     aria-label={label ?? id}
                     searchable={data.length > 7}
+                    className={classes.select}
                 />
             </Group>
         </Grid.Col>

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>