@coveord/plasma-mantine 48.21.0 → 48.22.5

package/dist/cjs/components/table/TableFilter.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "TableFilter", {
 var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
 var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
 var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
 var _jsxRuntime = require("react/jsx-runtime");
 var _plasmaReactIcons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
@@ -25,9 +26,19 @@ var useStyles = (0, _core.createStyles)(function(theme) {
         }
     };
 });
-var TableFilter = function(param) {
-    var _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Search by any field" : _param_placeholder;
-    var _useStyles = useStyles(), classes = _useStyles.classes, cx = _useStyles.cx;
+var TableFilter = function(_param) {
+    var _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "Search by any field" : _param_placeholder, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, others = _objectWithoutProperties(_param, [
+        "placeholder",
+        "classNames",
+        "styles",
+        "unstyled"
+    ]);
+    var _useStyles = useStyles(null, {
+        name: "TableHeader",
+        classNames: classNames,
+        styles: styles,
+        unstyled: unstyled
+    }), classes = _useStyles.classes, cx = _useStyles.cx;
     var _useTable1 = (0, _useTable.useTable)(), state = _useTable1.state, setState = _useTable1.setState;
     var handleSearchChange = function(event) {
         var value = event.currentTarget.value;
@@ -37,7 +48,7 @@ var TableFilter = function(param) {
             });
         });
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.TextInput, {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.TextInput, _objectSpread({
         className: classes.wrapper,
         placeholder: placeholder,
         mb: "md",
@@ -47,7 +58,7 @@ var TableFilter = function(param) {
         }),
         value: state.globalFilter,
         onChange: handleSearchChange
-    });
+    }, others));
 };
 
 //# sourceMappingURL=TableFilter.js.map

package/dist/cjs/components/table/TableFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ninterface TableFilterProps {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({placeholder = 'Search by any field'}) => {\n    const {classes, cx} = useStyles();\n    const {state, setState} = useTable();\n\n    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const {value} = event.currentTarget;\n        setState((prevState: TableState) => ({...prevState, globalFilter: value}));\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n            value={state.globalFilter}\n            onChange={handleSearchChange}\n        />\n    );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","wrapper","marginBottom","empty","color","colors","gray","placeholder","classes","cx","useTable","state","setState","handleSearchChange","event","value","currentTarget","prevState","globalFilter","TextInput","className","mb","rightSection","SearchSize16Px","height","onChange"],"mappings":"AAAA;;;;+BAwBaA;;;eAAAA;;;;;;;gCAxBgB;oBACS;wBAGf;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAWO,IAAMT,cAAmD,gBAA2C;mCAAzCU,aAAAA,8CAAc;IAC5E,IAAsBT,aAAAA,aAAfU,UAAeV,WAAfU,SAASC,KAAMX,WAANW;IAChB,IAA0BC,aAAAA,IAAAA,kBAAQ,KAA3BC,QAAmBD,WAAnBC,OAAOC,WAAYF,WAAZE;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,qCAAIA;gBAAWC,cAAcH;;;IACtE;IAEA,qBACI,qBAACI,eAAS;QACNC,WAAWZ,QAAQP,OAAO;QAC1BM,aAAaA;QACbc,IAAG;QACHC,4BAAc,qBAACC,gCAAc;YAACC,QAAQ;YAAIJ,WAAWX,GAAI,oBAACD,QAAQL,KAAK,EAAG,CAACQ,MAAMO,YAAY;;QAC7FH,OAAOJ,MAAMO,YAAY;QACzBO,UAAUZ;;AAGtB"}
+{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n    placeholder = 'Search by any field',\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n\n    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const {value} = event.currentTarget;\n        setState((prevState: TableState) => ({...prevState, globalFilter: value}));\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n            value={state.globalFilter}\n            onChange={handleSearchChange}\n            {...others}\n        />\n    );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","name","classes","cx","useTable","state","setState","handleSearchChange","event","value","currentTarget","prevState","globalFilter","TextInput","className","mb","rightSection","SearchSize16Px","height","onChange"],"mappings":"AAAA;;;;+BAyBaA;;;eAAAA;;;;;;;;gCAzBgB;oBACkC;wBAGxC;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMT,cAAmD,iBAM1D;oCALFU,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAsBZ,aAAAA,UAAU,IAAI,EAAE;QAACc,MAAM;QAAeJ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAjFG,UAAef,WAAfe,SAASC,KAAMhB,WAANgB;IAChB,IAA0BC,aAAAA,IAAAA,kBAAQ,KAA3BC,QAAmBD,WAAnBC,OAAOC,WAAYF,WAAZE;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,qCAAIA;gBAAWC,cAAcH;;;IACtE;IAEA,qBACI,qBAACI,eAAS;QACNC,WAAWZ,QAAQZ,OAAO;QAC1BM,aAAaA;QACbmB,IAAG;QACHC,4BAAc,qBAACC,gCAAc;YAACC,QAAQ;YAAIJ,WAAWX,GAAI,oBAACD,QAAQV,KAAK,EAAG,CAACa,MAAMO,YAAY;;QAC7FH,OAAOJ,MAAMO,YAAY;QACzBO,UAAUZ;OACNP;AAGhB"}

package/dist/cjs/components/table/TablePerPage.js

@@ -23,9 +23,10 @@ var TablePerPage = function(param) {
     var updatePerPage = function(newPerPage) {
         setState(function(prevState) {
             return _objectSpreadProps(_objectSpread({}, prevState), {
-                pagination: _objectSpreadProps(_objectSpread({}, prevState.pagination), {
+                pagination: {
+                    pageIndex: 0,
                     pageSize: parseInt(newPerPage, 10)
-                })
+                }
             });
         });
     };

package/dist/cjs/components/table/TablePerPage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './useTable';\n\ninterface TablePerPageProps {\n    /**\n     * The label displayed before the control\n     *\n     * @default Results per page\n     */\n    label?: string;\n    /**\n     * The per page choices to display\n     *\n     * @default [25, 50, 100]\n     */\n    values?: number[];\n}\n\nexport const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({\n    label = 'Results per page',\n    values = [25, 50, 100],\n}) => {\n    const {state, setState} = useTable();\n\n    const updatePerPage = (newPerPage: string) => {\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: {...prevState.pagination, pageSize: parseInt(newPerPage, 10)},\n        }));\n    };\n\n    return (\n        <Group>\n            <Text>{label}</Text>\n            <SegmentedControl\n                value={state.pagination.pageSize.toString() ?? values?.[1].toString()}\n                onChange={updatePerPage}\n                data={values.map((value) => value.toString())}\n                color=\"action\"\n                size=\"md\"\n            />\n        </Group>\n    );\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["TablePerPage","label","values","useTable","state","setState","updatePerPage","newPerPage","prevState","pagination","pageSize","parseInt","Group","Text","SegmentedControl","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":"AAAA;;;;+BAqBaA;;;eAAAA;;;;;;oBArB+B;wBAIrB;AAiBhB,IAAMA,eAA8E,gBAGrF;6BAFFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;IAEtB,IAA0BC,aAAAA,IAAAA,kBAAQ,KAA3BC,QAAmBD,WAAnBC,OAAOC,WAAYF,WAAZE;IAEd,IAAMC,gBAAgB,SAACC,YAAuB;QAC1CF,SAAS,SAACG;mBAA2B,qCAC9BA;gBACHC,YAAY,qCAAID,UAAUC,UAAU;oBAAEC,UAAUC,SAASJ,YAAY;;;;IAE7E;QAMmBH;IAJnB,qBACI,sBAACQ,WAAK;;0BACF,qBAACC,UAAI;0BAAEZ;;0BACP,qBAACa,sBAAgB;gBACbC,OAAOX,CAAAA,sCAAAA,MAAMK,UAAU,CAACC,QAAQ,CAACM,QAAQ,gBAAlCZ,iDAAAA,sCAAwCF,mBAAAA,oBAAAA,KAAAA,IAAAA,MAAQ,CAAC,EAAE,CAACc,QAAQ,EAAE;gBACrEC,UAAUX;gBACVY,MAAMhB,OAAOiB,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;;AAIrB;AAEArB,aAAasB,YAAY,GAAG"}
+{"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './useTable';\n\ninterface TablePerPageProps {\n    /**\n     * The label displayed before the control\n     *\n     * @default Results per page\n     */\n    label?: string;\n    /**\n     * The per page choices to display\n     *\n     * @default [25, 50, 100]\n     */\n    values?: number[];\n}\n\nexport const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({\n    label = 'Results per page',\n    values = [25, 50, 100],\n}) => {\n    const {state, setState} = useTable();\n\n    const updatePerPage = (newPerPage: string) => {\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},\n        }));\n    };\n\n    return (\n        <Group>\n            <Text>{label}</Text>\n            <SegmentedControl\n                value={state.pagination.pageSize.toString() ?? values?.[1].toString()}\n                onChange={updatePerPage}\n                data={values.map((value) => value.toString())}\n                color=\"action\"\n                size=\"md\"\n            />\n        </Group>\n    );\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["TablePerPage","label","values","useTable","state","setState","updatePerPage","newPerPage","prevState","pagination","pageIndex","pageSize","parseInt","Group","Text","SegmentedControl","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":"AAAA;;;;+BAqBaA;;;eAAAA;;;;;;oBArB+B;wBAIrB;AAiBhB,IAAMA,eAA8E,gBAGrF;6BAFFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;IAEtB,IAA0BC,aAAAA,IAAAA,kBAAQ,KAA3BC,QAAmBD,WAAnBC,OAAOC,WAAYF,WAAZE;IAEd,IAAMC,gBAAgB,SAACC,YAAuB;QAC1CF,SAAS,SAACG;mBAA2B,qCAC9BA;gBACHC,YAAY;oBAACC,WAAW;oBAAGC,UAAUC,SAASL,YAAY;gBAAG;;;IAErE;QAMmBH;IAJnB,qBACI,sBAACS,WAAK;;0BACF,qBAACC,UAAI;0BAAEb;;0BACP,qBAACc,sBAAgB;gBACbC,OAAOZ,CAAAA,sCAAAA,MAAMK,UAAU,CAACE,QAAQ,CAACM,QAAQ,gBAAlCb,iDAAAA,sCAAwCF,mBAAAA,oBAAAA,KAAAA,IAAAA,MAAQ,CAAC,EAAE,CAACe,QAAQ,EAAE;gBACrEC,UAAUZ;gBACVa,MAAMjB,OAAOkB,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;;AAIrB;AAEAtB,aAAauB,YAAY,GAAG"}

package/dist/definitions/components/table/TableFilter.d.ts

@@ -1,5 +1,12 @@
+import { Selectors, DefaultProps } from '@mantine/core';
 import { FunctionComponent } from 'react';
-interface TableFilterProps {
+declare const useStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<"wrapper" | "empty">) => {
+    classes: Record<"wrapper" | "empty", string>;
+    cx: (...args: any) => string;
+    theme: import("@mantine/core").MantineTheme;
+};
+type TableFilterStylesNames = Selectors<typeof useStyles>;
+interface TableFilterProps extends DefaultProps<TableFilterStylesNames> {
     /**
      * The placeholder for the filter input
      *

package/dist/definitions/components/table/TableFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableFilter.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAYrD,UAAU,gBAAgB;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAmB3D,CAAC"}
+{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,SAAS,EAAE,YAAY,EAAC,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAc,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAGrD,QAAA,MAAM,SAAS;;;;CAOZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACnE;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA0B3D,CAAC"}

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

@@ -1,6 +1,7 @@
 import _define_property from "@swc/helpers/src/_define_property.mjs";
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SearchSize16Px } from "@coveord/plasma-react-icons";
 import { createStyles, TextInput } from "@mantine/core";
@@ -15,9 +16,19 @@ var useStyles = createStyles(function(theme) {
         }
     };
 });
-export var TableFilter = function(param) {
-    var _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Search by any field" : _param_placeholder;
-    var _useStyles = useStyles(), classes = _useStyles.classes, cx = _useStyles.cx;
+export var TableFilter = function(_param) {
+    var _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "Search by any field" : _param_placeholder, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, others = _object_without_properties(_param, [
+        "placeholder",
+        "classNames",
+        "styles",
+        "unstyled"
+    ]);
+    var _useStyles = useStyles(null, {
+        name: "TableHeader",
+        classNames: classNames,
+        styles: styles,
+        unstyled: unstyled
+    }), classes = _useStyles.classes, cx = _useStyles.cx;
     var _useTable = useTable(), state = _useTable.state, setState = _useTable.setState;
     var handleSearchChange = function(event) {
         var value = event.currentTarget.value;
@@ -27,7 +38,7 @@ export var TableFilter = function(param) {
             });
         });
     };
-    return /*#__PURE__*/ _jsx(TextInput, {
+    return /*#__PURE__*/ _jsx(TextInput, _object_spread({
         className: classes.wrapper,
         placeholder: placeholder,
         mb: "md",
@@ -37,7 +48,7 @@ export var TableFilter = function(param) {
         }),
         value: state.globalFilter,
         onChange: handleSearchChange
-    });
+    }, others));
 };
 
 //# sourceMappingURL=TableFilter.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ninterface TableFilterProps {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({placeholder = 'Search by any field'}) => {\n    const {classes, cx} = useStyles();\n    const {state, setState} = useTable();\n\n    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const {value} = event.currentTarget;\n        setState((prevState: TableState) => ({...prevState, globalFilter: value}));\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n            value={state.globalFilter}\n            onChange={handleSearchChange}\n        />\n    );\n};\n"],"names":["SearchSize16Px","createStyles","TextInput","useTable","useStyles","theme","wrapper","marginBottom","empty","color","colors","gray","TableFilter","placeholder","classes","cx","state","setState","handleSearchChange","event","value","currentTarget","prevState","globalFilter","className","mb","rightSection","height","onChange"],"mappings":"AAAA;;;;AAAA,SAAQA,cAAc,QAAO,8BAA8B;AAC3D,SAAQC,YAAY,EAAEC,SAAS,QAAO,gBAAgB;AAGtD,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYH,aAAa,SAACI;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAWA,OAAO,IAAMC,cAAmD,gBAA2C;mCAAzCC,aAAAA,8CAAc;IAC5E,IAAsBT,aAAAA,aAAfU,UAAeV,WAAfU,SAASC,KAAMX,WAANW;IAChB,IAA0BZ,YAAAA,YAAnBa,QAAmBb,UAAnBa,OAAOC,WAAYd,UAAZc;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,wCAAIA;gBAAWC,cAAcH;;;IACtE;IAEA,qBACI,KAAClB;QACGsB,WAAWV,QAAQR,OAAO;QAC1BO,aAAaA;QACbY,IAAG;QACHC,4BAAc,KAAC1B;YAAe2B,QAAQ;YAAIH,WAAWT,GAAI,qBAACD,QAAQN,KAAK,EAAG,CAACQ,MAAMO,YAAY;;QAC7FH,OAAOJ,MAAMO,YAAY;QACzBK,UAAUV;;AAGtB,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n    placeholder = 'Search by any field',\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n\n    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const {value} = event.currentTarget;\n        setState((prevState: TableState) => ({...prevState, globalFilter: value}));\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n            value={state.globalFilter}\n            onChange={handleSearchChange}\n            {...others}\n        />\n    );\n};\n"],"names":["SearchSize16Px","createStyles","TextInput","useTable","useStyles","theme","wrapper","marginBottom","empty","color","colors","gray","TableFilter","placeholder","classNames","styles","unstyled","others","name","classes","cx","state","setState","handleSearchChange","event","value","currentTarget","prevState","globalFilter","className","mb","rightSection","height","onChange"],"mappings":"AAAA;;;;;AAAA,SAAQA,cAAc,QAAO,8BAA8B;AAC3D,SAAQC,YAAY,EAAEC,SAAS,QAAgC,gBAAgB;AAG/E,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYH,aAAa,SAACI;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYA,OAAO,IAAMC,cAAmD,iBAM1D;oCALFC,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAsBZ,aAAAA,UAAU,IAAI,EAAE;QAACc,MAAM;QAAeJ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAjFG,UAAef,WAAfe,SAASC,KAAMhB,WAANgB;IAChB,IAA0BjB,YAAAA,YAAnBkB,QAAmBlB,UAAnBkB,OAAOC,WAAYnB,UAAZmB;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,wCAAIA;gBAAWC,cAAcH;;;IACtE;IAEA,qBACI,KAACvB;QACG2B,WAAWV,QAAQb,OAAO;QAC1BO,aAAaA;QACbiB,IAAG;QACHC,4BAAc,KAAC/B;YAAegC,QAAQ;YAAIH,WAAWT,GAAI,qBAACD,QAAQX,KAAK,EAAG,CAACa,MAAMO,YAAY;;QAC7FH,OAAOJ,MAAMO,YAAY;QACzBK,UAAUV;OACNN;AAGhB,EAAE"}

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

@@ -13,9 +13,10 @@ export var TablePerPage = function(param) {
     var updatePerPage = function(newPerPage) {
         setState(function(prevState) {
             return _object_spread_props(_object_spread({}, prevState), {
-                pagination: _object_spread_props(_object_spread({}, prevState.pagination), {
+                pagination: {
+                    pageIndex: 0,
                     pageSize: parseInt(newPerPage, 10)
-                })
+                }
             });
         });
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './useTable';\n\ninterface TablePerPageProps {\n    /**\n     * The label displayed before the control\n     *\n     * @default Results per page\n     */\n    label?: string;\n    /**\n     * The per page choices to display\n     *\n     * @default [25, 50, 100]\n     */\n    values?: number[];\n}\n\nexport const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({\n    label = 'Results per page',\n    values = [25, 50, 100],\n}) => {\n    const {state, setState} = useTable();\n\n    const updatePerPage = (newPerPage: string) => {\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: {...prevState.pagination, pageSize: parseInt(newPerPage, 10)},\n        }));\n    };\n\n    return (\n        <Group>\n            <Text>{label}</Text>\n            <SegmentedControl\n                value={state.pagination.pageSize.toString() ?? values?.[1].toString()}\n                onChange={updatePerPage}\n                data={values.map((value) => value.toString())}\n                color=\"action\"\n                size=\"md\"\n            />\n        </Group>\n    );\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["Group","SegmentedControl","Text","useTable","TablePerPage","label","values","state","setState","updatePerPage","newPerPage","prevState","pagination","pageSize","parseInt","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":"AAAA;;;AAAA,SAAQA,KAAK,EAAEC,gBAAgB,EAAEC,IAAI,QAAO,gBAAgB;AAI5D,SAAQC,QAAQ,QAAO,aAAa;AAiBpC,OAAO,IAAMC,eAA8E,gBAGrF;6BAFFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;IAEtB,IAA0BH,YAAAA,YAAnBI,QAAmBJ,UAAnBI,OAAOC,WAAYL,UAAZK;IAEd,IAAMC,gBAAgB,SAACC,YAAuB;QAC1CF,SAAS,SAACG;mBAA2B,wCAC9BA;gBACHC,YAAY,wCAAID,UAAUC,UAAU;oBAAEC,UAAUC,SAASJ,YAAY;;;;IAE7E;QAMmBH;IAJnB,qBACI,MAACP;;0BACG,KAACE;0BAAMG;;0BACP,KAACJ;gBACGc,OAAOR,CAAAA,sCAAAA,MAAMK,UAAU,CAACC,QAAQ,CAACG,QAAQ,gBAAlCT,iDAAAA,sCAAwCD,mBAAAA,oBAAAA,KAAAA,IAAAA,MAAQ,CAAC,EAAE,CAACU,QAAQ,EAAE;gBACrEC,UAAUR;gBACVS,MAAMZ,OAAOa,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;;AAIrB,EAAE;AAEFjB,aAAakB,YAAY,GAAG"}
+{"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './useTable';\n\ninterface TablePerPageProps {\n    /**\n     * The label displayed before the control\n     *\n     * @default Results per page\n     */\n    label?: string;\n    /**\n     * The per page choices to display\n     *\n     * @default [25, 50, 100]\n     */\n    values?: number[];\n}\n\nexport const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({\n    label = 'Results per page',\n    values = [25, 50, 100],\n}) => {\n    const {state, setState} = useTable();\n\n    const updatePerPage = (newPerPage: string) => {\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},\n        }));\n    };\n\n    return (\n        <Group>\n            <Text>{label}</Text>\n            <SegmentedControl\n                value={state.pagination.pageSize.toString() ?? values?.[1].toString()}\n                onChange={updatePerPage}\n                data={values.map((value) => value.toString())}\n                color=\"action\"\n                size=\"md\"\n            />\n        </Group>\n    );\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["Group","SegmentedControl","Text","useTable","TablePerPage","label","values","state","setState","updatePerPage","newPerPage","prevState","pagination","pageIndex","pageSize","parseInt","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":"AAAA;;;AAAA,SAAQA,KAAK,EAAEC,gBAAgB,EAAEC,IAAI,QAAO,gBAAgB;AAI5D,SAAQC,QAAQ,QAAO,aAAa;AAiBpC,OAAO,IAAMC,eAA8E,gBAGrF;6BAFFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;IAEtB,IAA0BH,YAAAA,YAAnBI,QAAmBJ,UAAnBI,OAAOC,WAAYL,UAAZK;IAEd,IAAMC,gBAAgB,SAACC,YAAuB;QAC1CF,SAAS,SAACG;mBAA2B,wCAC9BA;gBACHC,YAAY;oBAACC,WAAW;oBAAGC,UAAUC,SAASL,YAAY;gBAAG;;;IAErE;QAMmBH;IAJnB,qBACI,MAACP;;0BACG,KAACE;0BAAMG;;0BACP,KAACJ;gBACGe,OAAOT,CAAAA,sCAAAA,MAAMK,UAAU,CAACE,QAAQ,CAACG,QAAQ,gBAAlCV,iDAAAA,sCAAwCD,mBAAAA,oBAAAA,KAAAA,IAAAA,MAAQ,CAAC,EAAE,CAACW,QAAQ,EAAE;gBACrEC,UAAUT;gBACVU,MAAMb,OAAOc,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;;AAIrB,EAAE;AAEFlB,aAAamB,YAAY,GAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "48.21.0",
+  "version": "48.22.5",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",

package/src/components/table/TableFilter.tsx

@@ -1,5 +1,5 @@
 import {SearchSize16Px} from '@coveord/plasma-react-icons';
-import {createStyles, TextInput} from '@mantine/core';
+import {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';
 import {TableState} from '@tanstack/react-table';
 import {ChangeEvent, FunctionComponent} from 'react';
 import {useTable} from './useTable';
@@ -13,7 +13,8 @@ const useStyles = createStyles((theme) => ({
     },
 }));
 
-interface TableFilterProps {
+type TableFilterStylesNames = Selectors<typeof useStyles>;
+interface TableFilterProps extends DefaultProps<TableFilterStylesNames> {
     /**
      * The placeholder for the filter input
      *
@@ -22,8 +23,14 @@ interface TableFilterProps {
     placeholder?: string;
 }
 
-export const TableFilter: FunctionComponent<TableFilterProps> = ({placeholder = 'Search by any field'}) => {
-    const {classes, cx} = useStyles();
+export const TableFilter: FunctionComponent<TableFilterProps> = ({
+    placeholder = 'Search by any field',
+    classNames,
+    styles,
+    unstyled,
+    ...others
+}) => {
+    const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
     const {state, setState} = useTable();
 
     const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -39,6 +46,7 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({placeholder =
             rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}
             value={state.globalFilter}
             onChange={handleSearchChange}
+            {...others}
         />
     );
 };

package/src/components/table/TablePerPage.tsx

@@ -28,7 +28,7 @@ export const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE:
     const updatePerPage = (newPerPage: string) => {
         setState((prevState: TableState) => ({
             ...prevState,
-            pagination: {...prevState.pagination, pageSize: parseInt(newPerPage, 10)},
+            pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},
         }));
     };
 

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

@@ -79,4 +79,28 @@ describe('Table.PerPage', () => {
             expect.objectContaining({pagination: expect.objectContaining({pageSize: 100})})
         );
     });
+
+    it('resets page index when changing the number of items per page', async () => {
+        const user = userEvent.setup({delay: null});
+        const onChange = jest.fn();
+        render(
+            <Table
+                data={[{name: 'fruit'}, {name: 'vegetable'}]}
+                columns={columns}
+                onChange={onChange}
+                initialState={{pagination: {pageIndex: 1, pageSize: 50}}}
+            >
+                <Table.Footer>
+                    <Table.Pagination totalPages={2} />
+                    <Table.PerPage />
+                </Table.Footer>
+            </Table>
+        );
+
+        await user.click(screen.queryByRole('radio', {name: '100'}));
+
+        expect(onChange).toHaveBeenCalledWith(
+            expect.objectContaining({pagination: expect.objectContaining({pageIndex: 0})})
+        );
+    });
 });