@coveord/plasma-mantine 52.11.1 → 52.12.0

package/dist/esm/components/table/TablePerPage.d.ts

@@ -12,6 +12,12 @@ interface TablePerPageProps {
      * @default [25, 50, 100]
      */
     values?: number[];
+    /**
+     * The callback if the entries per page is changed.
+     *
+     * @param perPage the new number of entries per page
+     */
+    onPerPageChange?: (perPage: number) => void;
 }
 export declare const TablePerPage: FunctionComponent<TablePerPageProps> & {
     DEFAULT_SIZE: number;

package/dist/esm/components/table/TablePerPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TablePerPage.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TablePerPage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAIxC,UAAU,iBAAiB;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG;IAAC,YAAY,EAAE,MAAM,CAAA;CAyBtF,CAAC"}
+{"version":3,"file":"TablePerPage.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TablePerPage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAIxC,UAAU,iBAAiB;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,GAAG;IAAC,YAAY,EAAE,MAAM,CAAA;CA2BtF,CAAC"}

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

@@ -8,10 +8,12 @@ export var TablePerPage = function(param) {
         25,
         50,
         100
-    ] : _param_values;
+    ] : _param_values, onPerPageChange = param.onPerPageChange;
     var _values;
-    var _useTable = useTable(), state = _useTable.state, setState = _useTable.setState;
+    var _useTable = useTable(), state = _useTable.state, setState = _useTable.setState, getPageCount = _useTable.getPageCount;
     var updatePerPage = function(newPerPage) {
+        var _onPerPageChange;
+        (_onPerPageChange = onPerPageChange) === null || _onPerPageChange === void 0 ? void 0 : _onPerPageChange(Number(newPerPage));
         setState(function(prevState) {
             return _object_spread_props(_object_spread({}, prevState), {
                 pagination: {
@@ -22,7 +24,7 @@ export var TablePerPage = function(param) {
         });
     };
     var _state_pagination_pageSize_toString;
-    return /*#__PURE__*/ _jsxs(Group, {
+    return getPageCount() > 0 ? /*#__PURE__*/ _jsxs(Group, {
         spacing: "sm",
         children: [
             /*#__PURE__*/ _jsx(Text, {
@@ -39,7 +41,7 @@ export var TablePerPage = function(param) {
                 size: "sm"
             })
         ]
-    });
+    }) : null;
 };
 TablePerPage.DEFAULT_SIZE = 50;
 

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 {FunctionComponent} from 'react';\n\nimport {useTable} from './TableContext';\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) => ({\n            ...prevState,\n            pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},\n        }));\n    };\n\n    return (\n        <Group spacing=\"sm\">\n            <Text fw={500}>{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=\"sm\"\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","spacing","fw","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":";;;AAAA,SAAQA,KAAK,EAAEC,gBAAgB,EAAEC,IAAI,QAAO,gBAAgB;AAG5D,SAAQC,QAAQ,QAAO,iBAAiB;AAiBxC,OAAO,IAAMC,eAA8E;6BACvFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;QAeqCA;IAb3D,IAA0BH,YAAAA,YAAnBI,QAAmBJ,UAAnBI,OAAOC,WAAYL,UAAZK;IAEd,IAAMC,gBAAgB,SAACC;QACnBF,SAAS,SAACG;mBAAe,wCAClBA;gBACHC,YAAY;oBAACC,WAAW;oBAAGC,UAAUC,SAASL,YAAY;gBAAG;;;IAErE;QAMmBH;IAJnB,qBACI,MAACP;QAAMgB,SAAQ;;0BACX,KAACd;gBAAKe,IAAI;0BAAMZ;;0BAChB,KAACJ;gBACGiB,OAAOX,CAAAA,sCAAAA,MAAMK,UAAU,CAACE,QAAQ,CAACK,QAAQ,gBAAlCZ,iDAAAA,uCAAwCD,UAAAA,oBAAAA,8BAAAA,OAAQ,CAAC,EAAE,CAACa,QAAQ;gBACnEC,UAAUX;gBACVY,MAAMf,OAAOgB,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;;AAIrB,EAAE;AAEFpB,aAAaqB,YAAY,GAAG"}
+{"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './TableContext';\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     * The callback if the entries per page is changed.\n     *\n     * @param perPage the new number of entries per page\n     */\n    onPerPageChange?: (perPage: number) => void;\n}\n\nexport const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({\n    label = 'Results per page',\n    values = [25, 50, 100],\n    onPerPageChange,\n}) => {\n    const {state, setState, getPageCount} = useTable();\n\n    const updatePerPage = (newPerPage: string) => {\n        onPerPageChange?.(Number(newPerPage));\n        setState((prevState) => ({\n            ...prevState,\n            pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},\n        }));\n    };\n\n    return getPageCount() > 0 ? (\n        <Group spacing=\"sm\">\n            <Text fw={500}>{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=\"sm\"\n            />\n        </Group>\n    ) : null;\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["Group","SegmentedControl","Text","useTable","TablePerPage","label","values","onPerPageChange","state","setState","getPageCount","updatePerPage","newPerPage","Number","prevState","pagination","pageIndex","pageSize","parseInt","spacing","fw","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":";;;AAAA,SAAQA,KAAK,EAAEC,gBAAgB,EAAEC,IAAI,QAAO,gBAAgB;AAG5D,SAAQC,QAAQ,QAAO,iBAAiB;AAuBxC,OAAO,IAAMC,eAA8E;6BACvFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI,kBACtBC,wBAAAA;QAgB2DD;IAd3D,IAAwCH,YAAAA,YAAjCK,QAAiCL,UAAjCK,OAAOC,WAA0BN,UAA1BM,UAAUC,eAAgBP,UAAhBO;IAExB,IAAMC,gBAAgB,SAACC;YACnBL;SAAAA,mBAAAA,6BAAAA,uCAAAA,iBAAkBM,OAAOD;QACzBH,SAAS,SAACK;mBAAe,wCAClBA;gBACHC,YAAY;oBAACC,WAAW;oBAAGC,UAAUC,SAASN,YAAY;gBAAG;;;IAErE;QAMmBJ;IAJnB,OAAOE,iBAAiB,kBACpB,MAACV;QAAMmB,SAAQ;;0BACX,KAACjB;gBAAKkB,IAAI;0BAAMf;;0BAChB,KAACJ;gBACGoB,OAAOb,CAAAA,sCAAAA,MAAMO,UAAU,CAACE,QAAQ,CAACK,QAAQ,gBAAlCd,iDAAAA,uCAAwCF,UAAAA,oBAAAA,8BAAAA,OAAQ,CAAC,EAAE,CAACgB,QAAQ;gBACnEC,UAAUZ;gBACVa,MAAMlB,OAAOmB,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;SAGb;AACR,EAAE;AAEFvB,aAAawB,YAAY,GAAG"}

package/dist/esm/components/table/Th.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Th.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,MAAM,EAAkC,MAAM,uBAAuB,CAAC;AA0B9E,UAAU,OAAO,CAAC,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B;AAcD,eAAO,MAAM,EAAE,4CAqCd,CAAC"}
+{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Th.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,MAAM,EAAkC,MAAM,uBAAuB,CAAC;AA4B9E,UAAU,OAAO,CAAC,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B;AAcD,eAAO,MAAM,EAAE,4CA0Cd,CAAC"}

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

@@ -1,8 +1,10 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px } from "@coveord/plasma-react-icons";
 import { Center, Group, Text, UnstyledButton, createStyles } from "@mantine/core";
 import { defaultColumnSizing, flexRender } from "@tanstack/react-table";
-var useStyles = createStyles(function(theme, width) {
+var useStyles = createStyles(function(theme, columnSizing) {
     return {
         th: {
             fontWeight: "400 !important",
@@ -12,7 +14,9 @@ var useStyles = createStyles(function(theme, width) {
             textAlign: "left",
             color: theme.colors.gray[6],
             backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[8] : theme.colors.gray[0],
-            width: width
+            width: columnSizing.size,
+            minWidth: columnSizing.minSize,
+            maxWidth: columnSizing.maxSize
         },
         control: {
             color: "inherit",
@@ -38,9 +42,12 @@ var SortingLabels = {
 };
 export var Th = function(param) {
     var header = param.header;
-    var size = header.column.getSize();
-    var width = size !== defaultColumnSizing.size ? size : undefined;
-    var classes = useStyles(width).classes;
+    var columnSizing = _object_spread_props(_object_spread({}, defaultColumnSizing), {
+        size: header.column.columnDef.size,
+        minSize: header.column.columnDef.minSize,
+        maxSize: header.column.columnDef.maxSize
+    });
+    var classes = useStyles(columnSizing).classes;
     if (header.isPlaceholder) {
         return null;
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, Group, Text, UnstyledButton, createStyles} from '@mantine/core';\nimport {Header, defaultColumnSizing, flexRender} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme, width: number) => ({\n    th: {\n        fontWeight: '400 !important' as any,\n        padding: '0 !important',\n        verticalAlign: 'middle',\n        whiteSpace: 'nowrap',\n        textAlign: 'left',\n        color: theme.colors.gray[6],\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n        width,\n    },\n\n    control: {\n        color: 'inherit',\n        whiteSpace: 'inherit',\n        fontWeight: 'inherit',\n        width: '100%',\n        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],\n        },\n    },\n}));\n\ninterface ThProps<T> {\n    header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n    asc: ArrowUpSize16Px,\n    desc: ArrowDownSize16Px,\n    none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels = {\n    asc: 'ascending',\n    desc: 'descending',\n    none: 'none',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n    const size = header.column.getSize();\n    const width = size !== defaultColumnSizing.size ? size : undefined;\n    const {classes} = useStyles(width);\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th}>\n                <Text size=\"xs\" py=\"xs\" px=\"sm\" fw={500}>\n                    {flexRender(header.column.columnDef.header, header.getContext())}\n                </Text>\n            </th>\n        );\n    }\n\n    const onSort = header.column.getToggleSortingHandler();\n    const sortingOrder = header.column.getIsSorted() || 'none';\n    const Icon = SortingIcons[sortingOrder];\n\n    return (\n        <th className={classes.th} aria-sort={SortingLabels[sortingOrder]}>\n            <UnstyledButton onClick={onSort} className={classes.control}>\n                <Group position=\"apart\" noWrap>\n                    <Text size=\"xs\" fw={500}>\n                        {flexRender(header.column.columnDef.header, header.getContext())}\n                    </Text>\n                    <Center>\n                        <Icon height={14} />\n                    </Center>\n                </Group>\n            </UnstyledButton>\n        </th>\n    );\n};\n"],"names":["ArrowDownSize16Px","ArrowUpSize16Px","DoubleArrowHeadVSize16Px","Center","Group","Text","UnstyledButton","createStyles","defaultColumnSizing","flexRender","useStyles","theme","width","th","fontWeight","padding","verticalAlign","whiteSpace","textAlign","color","colors","gray","backgroundColor","colorScheme","control","spacing","xs","sm","SortingIcons","asc","desc","none","SortingLabels","Th","header","size","column","getSize","undefined","classes","isPlaceholder","getCanSort","className","py","px","fw","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","onClick","position","noWrap","height"],"mappings":";AAAA,SAAQA,iBAAiB,EAAEC,eAAe,EAAEC,wBAAwB,QAAO,8BAA8B;AACzG,SAAQC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,EAAEC,YAAY,QAAO,gBAAgB;AAChF,SAAgBC,mBAAmB,EAAEC,UAAU,QAAO,wBAAwB;AAE9E,IAAMC,YAAYH,aAAa,SAACI,OAAOC;WAAmB;QACtDC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,eAAe;YACfC,YAAY;YACZC,WAAW;YACXC,OAAOR,MAAMS,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3BC,iBAAiBX,MAAMY,WAAW,KAAK,SAASZ,MAAMS,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGV,MAAMS,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3FT,OAAAA;QACJ;QAEAY,SAAS;YACLL,OAAO;YACPF,YAAY;YACZH,YAAY;YACZF,OAAO;YACPG,SAAS,AAAC,GAAsBJ,OAApBA,MAAMc,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBf,MAAMc,OAAO,CAACE,EAAE;YAChD,WAAW;gBACPL,iBAAiBX,MAAMY,WAAW,KAAK,SAASZ,MAAMS,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGV,MAAMS,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAMO,eAAe;IACjBC,KAAK5B;IACL6B,MAAM9B;IACN+B,MAAM7B;AACV;AAEA,IAAM8B,gBAAgB;IAClBH,KAAK;IACLC,MAAM;IACNC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK;QAAMC,eAAAA;IACpB,IAAMC,OAAOD,OAAOE,MAAM,CAACC,OAAO;IAClC,IAAMzB,QAAQuB,SAAS3B,oBAAoB2B,IAAI,GAAGA,OAAOG;IACzD,IAAM,AAACC,UAAW7B,UAAUE,OAArB2B;IAEP,IAAIL,OAAOM,aAAa,EAAE;QACtB,OAAO;IACX;IAEA,IAAI,CAACN,OAAOE,MAAM,CAACK,UAAU,IAAI;QAC7B,qBACI,KAAC5B;YAAG6B,WAAWH,QAAQ1B,EAAE;sBACrB,cAAA,KAACR;gBAAK8B,MAAK;gBAAKQ,IAAG;gBAAKC,IAAG;gBAAKC,IAAI;0BAC/BpC,WAAWyB,OAAOE,MAAM,CAACU,SAAS,CAACZ,MAAM,EAAEA,OAAOa,UAAU;;;IAI7E;IAEA,IAAMC,SAASd,OAAOE,MAAM,CAACa,uBAAuB;IACpD,IAAMC,eAAehB,OAAOE,MAAM,CAACe,WAAW,MAAM;IACpD,IAAMC,OAAOxB,YAAY,CAACsB,aAAa;IAEvC,qBACI,KAACrC;QAAG6B,WAAWH,QAAQ1B,EAAE;QAAEwC,aAAWrB,aAAa,CAACkB,aAAa;kBAC7D,cAAA,KAAC5C;YAAegD,SAASN;YAAQN,WAAWH,QAAQf,OAAO;sBACvD,cAAA,MAACpB;gBAAMmD,UAAS;gBAAQC,MAAM;;kCAC1B,KAACnD;wBAAK8B,MAAK;wBAAKU,IAAI;kCACfpC,WAAWyB,OAAOE,MAAM,CAACU,SAAS,CAACZ,MAAM,EAAEA,OAAOa,UAAU;;kCAEjE,KAAC5C;kCACG,cAAA,KAACiD;4BAAKK,QAAQ;;;;;;;AAMtC,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, Group, Text, UnstyledButton, createStyles} from '@mantine/core';\nimport {Header, defaultColumnSizing, flexRender} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme, columnSizing: {size: number; minSize: number; maxSize: number}) => ({\n    th: {\n        fontWeight: '400 !important' as any,\n        padding: '0 !important',\n        verticalAlign: 'middle',\n        whiteSpace: 'nowrap',\n        textAlign: 'left',\n        color: theme.colors.gray[6],\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n        width: columnSizing.size,\n        minWidth: columnSizing.minSize,\n        maxWidth: columnSizing.maxSize,\n    },\n\n    control: {\n        color: 'inherit',\n        whiteSpace: 'inherit',\n        fontWeight: 'inherit',\n        width: '100%',\n        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],\n        },\n    },\n}));\n\ninterface ThProps<T> {\n    header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n    asc: ArrowUpSize16Px,\n    desc: ArrowDownSize16Px,\n    none: DoubleArrowHeadVSize16Px,\n};\n\nconst SortingLabels = {\n    asc: 'ascending',\n    desc: 'descending',\n    none: 'none',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n    const columnSizing = {\n        ...defaultColumnSizing,\n        size: header.column.columnDef.size,\n        minSize: header.column.columnDef.minSize,\n        maxSize: header.column.columnDef.maxSize,\n    };\n\n    const {classes} = useStyles(columnSizing);\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th}>\n                <Text size=\"xs\" py=\"xs\" px=\"sm\" fw={500}>\n                    {flexRender(header.column.columnDef.header, header.getContext())}\n                </Text>\n            </th>\n        );\n    }\n\n    const onSort = header.column.getToggleSortingHandler();\n    const sortingOrder = header.column.getIsSorted() || 'none';\n    const Icon = SortingIcons[sortingOrder];\n\n    return (\n        <th className={classes.th} aria-sort={SortingLabels[sortingOrder]}>\n            <UnstyledButton onClick={onSort} className={classes.control}>\n                <Group position=\"apart\" noWrap>\n                    <Text size=\"xs\" fw={500}>\n                        {flexRender(header.column.columnDef.header, header.getContext())}\n                    </Text>\n                    <Center>\n                        <Icon height={14} />\n                    </Center>\n                </Group>\n            </UnstyledButton>\n        </th>\n    );\n};\n"],"names":["ArrowDownSize16Px","ArrowUpSize16Px","DoubleArrowHeadVSize16Px","Center","Group","Text","UnstyledButton","createStyles","defaultColumnSizing","flexRender","useStyles","theme","columnSizing","th","fontWeight","padding","verticalAlign","whiteSpace","textAlign","color","colors","gray","backgroundColor","colorScheme","width","size","minWidth","minSize","maxWidth","maxSize","control","spacing","xs","sm","SortingIcons","asc","desc","none","SortingLabels","Th","header","column","columnDef","classes","isPlaceholder","getCanSort","className","py","px","fw","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","onClick","position","noWrap","height"],"mappings":";;;AAAA,SAAQA,iBAAiB,EAAEC,eAAe,EAAEC,wBAAwB,QAAO,8BAA8B;AACzG,SAAQC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,EAAEC,YAAY,QAAO,gBAAgB;AAChF,SAAgBC,mBAAmB,EAAEC,UAAU,QAAO,wBAAwB;AAE9E,IAAMC,YAAYH,aAAa,SAACI,OAAOC;WAAoE;QACvGC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,eAAe;YACfC,YAAY;YACZC,WAAW;YACXC,OAAOR,MAAMS,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3BC,iBAAiBX,MAAMY,WAAW,KAAK,SAASZ,MAAMS,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGV,MAAMS,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3FG,OAAOZ,aAAaa,IAAI;YACxBC,UAAUd,aAAae,OAAO;YAC9BC,UAAUhB,aAAaiB,OAAO;QAClC;QAEAC,SAAS;YACLX,OAAO;YACPF,YAAY;YACZH,YAAY;YACZU,OAAO;YACPT,SAAS,AAAC,GAAsBJ,OAApBA,MAAMoB,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBrB,MAAMoB,OAAO,CAACE,EAAE;YAChD,WAAW;gBACPX,iBAAiBX,MAAMY,WAAW,KAAK,SAASZ,MAAMS,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGV,MAAMS,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAMa,eAAe;IACjBC,KAAKlC;IACLmC,MAAMpC;IACNqC,MAAMnC;AACV;AAEA,IAAMoC,gBAAgB;IAClBH,KAAK;IACLC,MAAM;IACNC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK;QAAMC,eAAAA;IACpB,IAAM5B,eAAe,wCACdJ;QACHiB,MAAMe,OAAOC,MAAM,CAACC,SAAS,CAACjB,IAAI;QAClCE,SAASa,OAAOC,MAAM,CAACC,SAAS,CAACf,OAAO;QACxCE,SAASW,OAAOC,MAAM,CAACC,SAAS,CAACb,OAAO;;IAG5C,IAAM,AAACc,UAAWjC,UAAUE,cAArB+B;IAEP,IAAIH,OAAOI,aAAa,EAAE;QACtB,OAAO;IACX;IAEA,IAAI,CAACJ,OAAOC,MAAM,CAACI,UAAU,IAAI;QAC7B,qBACI,KAAChC;YAAGiC,WAAWH,QAAQ9B,EAAE;sBACrB,cAAA,KAACR;gBAAKoB,MAAK;gBAAKsB,IAAG;gBAAKC,IAAG;gBAAKC,IAAI;0BAC/BxC,WAAW+B,OAAOC,MAAM,CAACC,SAAS,CAACF,MAAM,EAAEA,OAAOU,UAAU;;;IAI7E;IAEA,IAAMC,SAASX,OAAOC,MAAM,CAACW,uBAAuB;IACpD,IAAMC,eAAeb,OAAOC,MAAM,CAACa,WAAW,MAAM;IACpD,IAAMC,OAAOrB,YAAY,CAACmB,aAAa;IAEvC,qBACI,KAACxC;QAAGiC,WAAWH,QAAQ9B,EAAE;QAAE2C,aAAWlB,aAAa,CAACe,aAAa;kBAC7D,cAAA,KAAC/C;YAAemD,SAASN;YAAQL,WAAWH,QAAQb,OAAO;sBACvD,cAAA,MAAC1B;gBAAMsD,UAAS;gBAAQC,MAAM;;kCAC1B,KAACtD;wBAAKoB,MAAK;wBAAKwB,IAAI;kCACfxC,WAAW+B,OAAOC,MAAM,CAACC,SAAS,CAACF,MAAM,EAAEA,OAAOU,UAAU;;kCAEjE,KAAC/C;kCACG,cAAA,KAACoD;4BAAKK,QAAQ;;;;;;;AAMtC,EAAE"}

package/dist/esm/components/table/layouts/RowLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RowLayout.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,WAAW,EAAmB,MAAM,gBAAgB,CAAC;AA+K7D,eAAO,MAAM,SAAS,EAAE,WAKvB,CAAC"}
+{"version":3,"file":"RowLayout.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,WAAW,EAAmB,MAAM,gBAAgB,CAAC;AA+L7D,eAAO,MAAM,SAAS,EAAE,WAKvB,CAAC"}

package/dist/esm/components/table/layouts/RowLayout.js

@@ -1,4 +1,6 @@
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ListSize16Px } from "@coveord/plasma-react-icons";
 import { Box, Collapse, createStyles, rem } from "@mantine/core";
@@ -90,7 +92,7 @@ var RowLayoutHeader = function(param) {
     });
 };
 var RowLayoutBody = function(param) {
-    var table = param.table, doubleClickAction = param.doubleClickAction, getExpandChildren = param.getExpandChildren, loading = param.loading;
+    var table = param.table, doubleClickAction = param.doubleClickAction, getExpandChildren = param.getExpandChildren, loading = param.loading, keepSelection = param.keepSelection;
     var _useTable = useTable(), multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, disableRowSelection = _useTable.disableRowSelection;
     var _useStyles = useStyles({
         disableRowSelection: disableRowSelection,
@@ -105,11 +107,12 @@ var RowLayoutBody = function(param) {
         var _getExpandChildren1;
         var rowChildren = (_getExpandChildren1 = (_getExpandChildren = getExpandChildren) === null || _getExpandChildren === void 0 ? void 0 : _getExpandChildren(row.original)) !== null && _getExpandChildren1 !== void 0 ? _getExpandChildren1 : null;
         var isSelected = !!row.getIsSelected();
+        var shouldKeepSelection = keepSelection && isSelected;
         var onClick = function(event) {
             if (rowChildren) {
                 toggleCollapsible(event.currentTarget);
             }
-            if (!disableRowSelection && !multiRowSelectionEnabled) {
+            if (!disableRowSelection && !multiRowSelectionEnabled && !shouldKeepSelection) {
                 row.toggleSelected();
             }
         };
@@ -126,8 +129,11 @@ var RowLayoutBody = function(param) {
                     "aria-selected": isSelected,
                     "data-testid": row.id,
                     children: row.getVisibleCells().map(function(cell) {
-                        var size = cell.column.getSize();
-                        var width = size !== defaultColumnSizing.size ? size : undefined;
+                        var columnSizing = _object_spread_props(_object_spread({}, defaultColumnSizing), {
+                            size: cell.column.columnDef.size,
+                            minSize: cell.column.columnDef.minSize,
+                            maxSize: cell.column.columnDef.maxSize
+                        });
                         var onCollapsibleCellClick = function(event) {
                             if (cell.column.id === TableSelectableColumn.id && !disableRowSelection) {
                                 event.stopPropagation();
@@ -137,7 +143,9 @@ var RowLayoutBody = function(param) {
                         return /*#__PURE__*/ _jsx("td", {
                             "data-testid": cell.id,
                             style: {
-                                width: width
+                                width: columnSizing.size,
+                                minWidth: columnSizing.minSize,
+                                maxWidth: columnSizing.maxSize
                             },
                             className: cx(classes.cell, _define_property({}, classes.rowCollapsibleButtonCell, cell.column.id === TableCollapsibleColumn.id)),
                             onClick: onCollapsibleCellClick,

package/dist/esm/components/table/layouts/RowLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"sourcesContent":["import {ListSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, Collapse, createStyles, rem} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment, type MouseEvent} from 'react';\nimport {TableLayout, TableLayoutProps} from '../Table.types';\nimport {TableCollapsibleColumn} from '../TableCollapsibleColumn';\nimport {useTable} from '../TableContext';\nimport {TableLoading} from '../TableLoading';\nimport {TableSelectableColumn} from '../TableSelectableColumn';\nimport {Th} from '../Th';\n\ninterface TableStylesParams {\n    multiRowSelectionEnabled: boolean;\n    disableRowSelection: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n    const rowBackgroundColor =\n        theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];\n    const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;\n    return {\n        headerColumns: {\n            '& th:first-of-type > *': {\n                paddingLeft: '40px',\n            },\n\n            '& input[type=checkbox]': {\n                backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,\n                borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,\n                pointerEvents: disableRowSelection ? 'none' : 'auto',\n                cursor: disableRowSelection ? 'not-allowed' : 'default',\n\n                '& + svg': {\n                    color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',\n                },\n            },\n        },\n\n        rowSelected: {\n            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n        },\n\n        rowUnselectable: {\n            '& input[type=checkbox]': {\n                backgroundColor: `${theme.colors.gray[2]}`,\n                borderColor: `${theme.colors.gray[3]}`,\n                pointerEvents: 'none',\n                cursor: 'not-allowed',\n\n                '&:checked + svg': {\n                    color: `${theme.colors.gray[5]}`,\n                },\n            },\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n        },\n\n        row: {\n            '& td:first-of-type': {\n                paddingLeft: '40px',\n            },\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n\n        cell: {\n            verticalAlign: 'middle',\n            // We must use height instead of minHeight here, otherwise it doesn't apply\n            height: '56px',\n            padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n            borderBottom: border,\n        },\n\n        collapsible: {\n            backgroundColor: rowBackgroundColor,\n            borderBottom: border,\n        },\n    };\n});\n\nconst RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n    const headers = table.getHeaderGroups().map((headerGroup) => (\n        <tr key={headerGroup.id} className={classes.headerColumns}>\n            {headerGroup.headers.map((columnHeader) => (\n                <Th key={columnHeader.id} header={columnHeader} />\n            ))}\n        </tr>\n    ));\n    return <>{headers}</>;\n};\n\nconst RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes, cx} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n\n    const toggleCollapsible = (el: HTMLTableRowElement) => {\n        const cell = el.children[el.children.length - 1] as HTMLTableCellElement;\n        cell.querySelector('button').click();\n    };\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n        const isSelected = !!row.getIsSelected();\n        const onClick = (event: MouseEvent<HTMLTableRowElement>) => {\n            if (rowChildren) {\n                toggleCollapsible(event.currentTarget);\n            }\n            if (!disableRowSelection && !multiRowSelectionEnabled) {\n                row.toggleSelected();\n            }\n        };\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={onClick}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {\n                        [classes.rowSelected]: isSelected,\n                        [classes.rowUnselectable]: disableRowSelection,\n                    })}\n                    aria-selected={isSelected}\n                    data-testid={row.id}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const size = cell.column.getSize();\n                        const width = size !== defaultColumnSizing.size ? size : undefined;\n                        const onCollapsibleCellClick = (event: MouseEvent<HTMLTableCellElement>) => {\n                            if (cell.column.id === TableSelectableColumn.id && !disableRowSelection) {\n                                event.stopPropagation();\n                                row.getToggleSelectedHandler();\n                            }\n                        };\n                        return (\n                            <td\n                                key={cell.id}\n                                data-testid={cell.id}\n                                style={{width}}\n                                className={cx(classes.cell, {\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                                onClick={onCollapsibleCellClick}\n                            >\n                                <TableLoading visible={loading}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </TableLoading>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box className={classes.collapsible} px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return <>{rows}</>;\n};\n\nexport const RowLayout: TableLayout = {\n    name: 'Rows',\n    icon: ListSize16Px,\n    Header: RowLayoutHeader,\n    Body: RowLayoutBody,\n};\n"],"names":["ListSize16Px","Box","Collapse","createStyles","rem","flexRender","defaultColumnSizing","Fragment","TableCollapsibleColumn","useTable","TableLoading","TableSelectableColumn","Th","useStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","dark","headerColumns","paddingLeft","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","cell","verticalAlign","height","borderBottom","collapsible","RowLayoutHeader","table","classes","headers","getHeaderGroups","map","headerGroup","tr","className","columnHeader","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","cx","toggleCollapsible","el","children","length","querySelector","click","rows","getRowModel","rowChildren","original","isSelected","getIsSelected","onClick","event","currentTarget","toggleSelected","onDoubleClick","aria-selected","data-testid","getVisibleCells","size","column","getSize","width","onCollapsibleCellClick","stopPropagation","getToggleSelectedHandler","td","style","visible","columnDef","getContext","colSpan","getAllColumns","in","getIsExpanded","px","py","RowLayout","name","icon","Header","Body"],"mappings":";;AAAA,SAAQA,YAAY,QAAO,8BAA8B;AACzD,SAAQC,GAAG,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,GAAG,QAAO,gBAAgB;AAC/D,SAAQC,UAAU,QAAO,wBAAwB;AACjD,SAAQC,mBAAmB,QAAO,uBAAuB;AACzD,SAAQC,QAAQ,QAAwB,QAAQ;AAEhD,SAAQC,sBAAsB,QAAO,4BAA4B;AACjE,SAAQC,QAAQ,QAAO,kBAAkB;AACzC,SAAQC,YAAY,QAAO,kBAAkB;AAC7C,SAAQC,qBAAqB,QAAO,2BAA2B;AAC/D,SAAQC,EAAE,QAAO,QAAQ;AAOzB,IAAMC,YAAYV,aAAwC,SAACW;QAAQC,iCAAAA,0BAA0BC,4BAAAA;IACzF,IAAMC,qBACFH,MAAMI,WAAW,KAAK,SAASJ,MAAMK,EAAE,CAACC,IAAI,CAACN,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE,EAAE,OAAOR,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IACjH,IAAMC,SAAS,AAAC,GAAkBV,OAAhBV,IAAI,IAAG,WAAoF,OAA3EU,MAAMI,WAAW,KAAK,SAASJ,MAAMO,MAAM,CAACI,IAAI,CAAC,EAAE,GAAGX,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IAC5G,OAAO;QACHG,eAAe;YACX,0BAA0B;gBACtBC,aAAa;YACjB;YAEA,0BAA0B;gBACtBC,iBAAiBZ,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAKM;gBACnEC,aAAad,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK,AAAC,GAAuB,OAArBT,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACtFQ,eAAef,sBAAsB,SAAS;gBAC9CgB,QAAQhB,sBAAsB,gBAAgB;gBAE9C,WAAW;oBACPiB,OAAOjB,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK;gBAC7D;YACJ;QACJ;QAEAW,aAAa;YACTN,iBAAiBb,2BAA2Bc,YAAYZ;QAC5D;QAEAkB,iBAAiB;YACb,0BAA0B;gBACtBP,iBAAiB,AAAC,GAAuB,OAArBd,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACxCO,aAAa,AAAC,GAAuB,OAArBhB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACpCQ,eAAe;gBACfC,QAAQ;gBAER,mBAAmB;oBACfC,OAAO,AAAC,GAAuB,OAArBnB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBAClC;YACJ;QACJ;QAEAa,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BxB,OAAvBA,MAAMyB,OAAO,CAACC,EAAE,EAAC,QAAuB,OAAjB1B,MAAMyB,OAAO,CAACE,EAAE,EAAC;QAC7D;QAEAC,KAAK;YACD,sBAAsB;gBAClBf,aAAa;YACjB;YACA,WAAW;gBACPC,iBAAiBX;YACrB;QACJ;QAEA0B,MAAM;YACFC,eAAe;YACf,2EAA2E;YAC3EC,QAAQ;YACRP,SAAS,AAAC,GAAsBxB,OAApBA,MAAMyB,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjB1B,MAAMyB,OAAO,CAACE,EAAE;YAChDK,cAActB;QAClB;QAEAuB,aAAa;YACTnB,iBAAiBX;YACjB6B,cAActB;QAClB;IACJ;AACJ;AAEA,IAAMwB,kBAAkB;QAAMC,cAAAA;IAC1B,IAAwDxC,YAAAA,YAAjDM,2BAAiDN,UAAjDM,0BAA0BC,sBAAuBP,UAAvBO;IACjC,IAAM,AAACkC,UAAWrC,UAAU;QAACG,qBAAAA;QAAqBD,0BAAAA;IAAwB,GAAnEmC;IACP,IAAMC,UAAUF,MAAMG,eAAe,GAAGC,GAAG,CAAC,SAACC;6BACzC,KAACC;YAAwBC,WAAWN,QAAQxB,aAAa;sBACpD4B,YAAYH,OAAO,CAACE,GAAG,CAAC,SAACI;qCACtB,KAAC7C;oBAAyB8C,QAAQD;mBAAzBA,aAAaE,EAAE;;WAFvBL,YAAYK,EAAE;;IAM3B,qBAAO;kBAAGR;;AACd;AAEA,IAAMS,gBAAgB;QAAMX,cAAAA,OAAOY,0BAAAA,mBAAmBC,0BAAAA,mBAAmBC,gBAAAA;IACrE,IAAwDtD,YAAAA,YAAjDM,2BAAiDN,UAAjDM,0BAA0BC,sBAAuBP,UAAvBO;IACjC,IAAsBH,aAAAA,UAAU;QAACG,qBAAAA;QAAqBD,0BAAAA;IAAwB,IAAvEmC,UAAerC,WAAfqC,SAASc,KAAMnD,WAANmD;IAEhB,IAAMC,oBAAoB,SAACC;QACvB,IAAMvB,OAAOuB,GAAGC,QAAQ,CAACD,GAAGC,QAAQ,CAACC,MAAM,GAAG,EAAE;QAChDzB,KAAK0B,aAAa,CAAC,UAAUC,KAAK;IACtC;IAEA,IAAMC,OAAOtB,MAAMuB,WAAW,GAAGD,IAAI,CAAClB,GAAG,CAAC,SAACX;YACnBoB;YAAAA;QAApB,IAAMW,cAAcX,CAAAA,uBAAAA,qBAAAA,+BAAAA,yCAAAA,mBAAoBpB,IAAIgC,QAAQ,eAAhCZ,iCAAAA,sBAAqC;QACzD,IAAMa,aAAa,CAAC,CAACjC,IAAIkC,aAAa;QACtC,IAAMC,UAAU,SAACC;YACb,IAAIL,aAAa;gBACbR,kBAAkBa,MAAMC,aAAa;YACzC;YACA,IAAI,CAAC/D,uBAAuB,CAACD,0BAA0B;gBACnD2B,IAAIsC,cAAc;YACtB;QACJ;YAOuC;QALvC,qBACI,MAACzE;;8BACG,KAACgD;oBACGsB,SAASA;oBACTI,eAAe;4BAAMpB;gCAAAA,qBAAAA,+BAAAA,yCAAAA,mBAAoBnB,IAAIgC,QAAQ;;oBACrDlB,WAAWQ,GAAGd,QAAQR,GAAG,GAAE,WACvB,iBADuB,MACtBQ,QAAQhB,WAAW,EAAGyC,aACvB,iBAFuB,MAEtBzB,QAAQf,eAAe,EAAGnB,sBAFJ;oBAI3BkE,iBAAeP;oBACfQ,eAAazC,IAAIiB,EAAE;8BAElBjB,IAAI0C,eAAe,GAAG/B,GAAG,CAAC,SAACV;wBACxB,IAAM0C,OAAO1C,KAAK2C,MAAM,CAACC,OAAO;wBAChC,IAAMC,QAAQH,SAAS/E,oBAAoB+E,IAAI,GAAGA,OAAOxD;wBACzD,IAAM4D,yBAAyB,SAACX;4BAC5B,IAAInC,KAAK2C,MAAM,CAAC3B,EAAE,KAAKhD,sBAAsBgD,EAAE,IAAI,CAAC3C,qBAAqB;gCACrE8D,MAAMY,eAAe;gCACrBhD,IAAIiD,wBAAwB;4BAChC;wBACJ;wBACA,qBACI,KAACC;4BAEGT,eAAaxC,KAAKgB,EAAE;4BACpBkC,OAAO;gCAACL,OAAAA;4BAAK;4BACbhC,WAAWQ,GAAGd,QAAQP,IAAI,EACtB,qBAACO,QAAQd,wBAAwB,EAAGO,KAAK2C,MAAM,CAAC3B,EAAE,KAAKnD,uBAAuBmD,EAAE;4BAEpFkB,SAASY;sCAET,cAAA,KAAC/E;gCAAaoF,SAAS/B;0CAClB1D,WAAWsC,KAAK2C,MAAM,CAACS,SAAS,CAACpD,IAAI,EAAEA,KAAKqD,UAAU;;2BATtDrD,KAAKgB,EAAE;oBAaxB;;gBAEHc,4BACG,KAAClB;8BACG,cAAA,KAACqC;wBACGK,SAAShD,MAAMiD,aAAa,GAAG9B,MAAM;wBACrCyB,OAAO;4BACHvD,SAAS;wBACb;kCAEA,cAAA,KAACpC;4BAASiG,IAAIzD,IAAI0D,aAAa;sCAC3B,cAAA,KAACnG;gCAAIuD,WAAWN,QAAQH,WAAW;gCAAEsD,IAAG;gCAAKC,IAAG;0CAC3C7B;;;;qBAKjB;;WApDO/B,IAAIiB,EAAE;IAuD7B;IAEA,qBAAO;kBAAGY;;AACd;AAEA,OAAO,IAAMgC,YAAyB;IAClCC,MAAM;IACNC,MAAMzG;IACN0G,QAAQ1D;IACR2D,MAAM/C;AACV,EAAE"}
+{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"sourcesContent":["import {ListSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, Collapse, createStyles, rem} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment, type MouseEvent} from 'react';\nimport {TableLayout, TableLayoutProps} from '../Table.types';\nimport {TableCollapsibleColumn} from '../TableCollapsibleColumn';\nimport {useTable} from '../TableContext';\nimport {TableLoading} from '../TableLoading';\nimport {TableSelectableColumn} from '../TableSelectableColumn';\nimport {Th} from '../Th';\n\ninterface TableStylesParams {\n    multiRowSelectionEnabled: boolean;\n    disableRowSelection: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n    const rowBackgroundColor =\n        theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];\n    const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;\n    return {\n        headerColumns: {\n            '& th:first-of-type > *': {\n                paddingLeft: '40px',\n            },\n\n            '& input[type=checkbox]': {\n                backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,\n                borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,\n                pointerEvents: disableRowSelection ? 'none' : 'auto',\n                cursor: disableRowSelection ? 'not-allowed' : 'default',\n\n                '& + svg': {\n                    color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',\n                },\n            },\n        },\n\n        rowSelected: {\n            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n        },\n\n        rowUnselectable: {\n            '& input[type=checkbox]': {\n                backgroundColor: `${theme.colors.gray[2]}`,\n                borderColor: `${theme.colors.gray[3]}`,\n                pointerEvents: 'none',\n                cursor: 'not-allowed',\n\n                '&:checked + svg': {\n                    color: `${theme.colors.gray[5]}`,\n                },\n            },\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n        },\n\n        row: {\n            '& td:first-of-type': {\n                paddingLeft: '40px',\n            },\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n\n        cell: {\n            verticalAlign: 'middle',\n            // We must use height instead of minHeight here, otherwise it doesn't apply\n            height: '56px',\n            padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n            borderBottom: border,\n        },\n\n        collapsible: {\n            backgroundColor: rowBackgroundColor,\n            borderBottom: border,\n        },\n    };\n});\n\nconst RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n    const headers = table.getHeaderGroups().map((headerGroup) => (\n        <tr key={headerGroup.id} className={classes.headerColumns}>\n            {headerGroup.headers.map((columnHeader) => (\n                <Th key={columnHeader.id} header={columnHeader} />\n            ))}\n        </tr>\n    ));\n    return <>{headers}</>;\n};\n\nconst RowLayoutBody = <T,>({\n    table,\n    doubleClickAction,\n    getExpandChildren,\n    loading,\n    keepSelection,\n}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes, cx} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n\n    const toggleCollapsible = (el: HTMLTableRowElement) => {\n        const cell = el.children[el.children.length - 1] as HTMLTableCellElement;\n        cell.querySelector('button').click();\n    };\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n        const isSelected = !!row.getIsSelected();\n        const shouldKeepSelection = keepSelection && isSelected;\n        const onClick = (event: MouseEvent<HTMLTableRowElement>) => {\n            if (rowChildren) {\n                toggleCollapsible(event.currentTarget);\n            }\n            if (!disableRowSelection && !multiRowSelectionEnabled && !shouldKeepSelection) {\n                row.toggleSelected();\n            }\n        };\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={onClick}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {\n                        [classes.rowSelected]: isSelected,\n                        [classes.rowUnselectable]: disableRowSelection,\n                    })}\n                    aria-selected={isSelected}\n                    data-testid={row.id}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const columnSizing = {\n                            ...defaultColumnSizing,\n                            size: cell.column.columnDef.size,\n                            minSize: cell.column.columnDef.minSize,\n                            maxSize: cell.column.columnDef.maxSize,\n                        };\n\n                        const onCollapsibleCellClick = (event: MouseEvent<HTMLTableCellElement>) => {\n                            if (cell.column.id === TableSelectableColumn.id && !disableRowSelection) {\n                                event.stopPropagation();\n                                row.getToggleSelectedHandler();\n                            }\n                        };\n                        return (\n                            <td\n                                key={cell.id}\n                                data-testid={cell.id}\n                                style={{\n                                    width: columnSizing.size,\n                                    minWidth: columnSizing.minSize,\n                                    maxWidth: columnSizing.maxSize,\n                                }}\n                                className={cx(classes.cell, {\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                                onClick={onCollapsibleCellClick}\n                            >\n                                <TableLoading visible={loading}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </TableLoading>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box className={classes.collapsible} px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return <>{rows}</>;\n};\n\nexport const RowLayout: TableLayout = {\n    name: 'Rows',\n    icon: ListSize16Px,\n    Header: RowLayoutHeader,\n    Body: RowLayoutBody,\n};\n"],"names":["ListSize16Px","Box","Collapse","createStyles","rem","flexRender","defaultColumnSizing","Fragment","TableCollapsibleColumn","useTable","TableLoading","TableSelectableColumn","Th","useStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","dark","headerColumns","paddingLeft","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","cell","verticalAlign","height","borderBottom","collapsible","RowLayoutHeader","table","classes","headers","getHeaderGroups","map","headerGroup","tr","className","columnHeader","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","keepSelection","cx","toggleCollapsible","el","children","length","querySelector","click","rows","getRowModel","rowChildren","original","isSelected","getIsSelected","shouldKeepSelection","onClick","event","currentTarget","toggleSelected","onDoubleClick","aria-selected","data-testid","getVisibleCells","columnSizing","size","column","columnDef","minSize","maxSize","onCollapsibleCellClick","stopPropagation","getToggleSelectedHandler","td","style","width","minWidth","maxWidth","visible","getContext","colSpan","getAllColumns","in","getIsExpanded","px","py","RowLayout","name","icon","Header","Body"],"mappings":"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"}

package/dist/esm/components/table/useRowSelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRowSelection.d.ts","sourceRoot":"","sources":["../../../../src/components/table/useRowSelection.ts"],"names":[],"mappings":";AACA,OAAO,EAAsC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAIhF,OAAO,EAAuB,UAAU,EAAa,MAAM,eAAe,CAAC;AAE3E,eAAO,MAAM,eAAe;;;;;CAgE3B,CAAC"}
+{"version":3,"file":"useRowSelection.d.ts","sourceRoot":"","sources":["../../../../src/components/table/useRowSelection.ts"],"names":[],"mappings":";AACA,OAAO,EAAsC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAIhF,OAAO,EAAuB,UAAU,EAAa,MAAM,eAAe,CAAC;AAE3E,eAAO,MAAM,eAAe;;;;;CAoE3B,CAAC"}

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

@@ -1,7 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
-import { useClickOutside } from "@mantine/hooks";
+import { useClickOutside, useDidUpdate } from "@mantine/hooks";
 import { functionalUpdate } from "@tanstack/table-core";
 import isEqual from "fast-deep-equal";
 import { useRef } from "react";
@@ -15,11 +15,18 @@ export var useRowSelection = function(table, param) {
     }, null, [
         outsideClickRef.current
     ].concat(_to_consumable_array(additionalRootNodes)));
+    // Need to call this outside of the onRowSelectionChange of the table to avoid rendering conflicts if the callback queues an update in a parent component.
+    // See this warning introduced in React v.16.13.0: https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render
+    useDidUpdate(function() {
+        var _onRowSelectionChange;
+        (_onRowSelectionChange = onRowSelectionChange) === null || _onRowSelectionChange === void 0 ? void 0 : _onRowSelectionChange(getSelectedRows());
+    }, [
+        table.getState().rowSelection
+    ]);
     table.setOptions(function(prev) {
         return _object_spread_props(_object_spread({}, prev), {
             onRowSelectionChange: function(rowSelectionUpdater) {
                 table.setState(function(old) {
-                    var _onRowSelectionChange;
                     var newRowSelection = functionalUpdate(rowSelectionUpdater, old["rowSelection"]);
                     if (isEqual(old["rowSelection"], newRowSelection)) {
                         return old;
@@ -35,7 +42,6 @@ export var useRowSelection = function(table, param) {
                             newRowSelection[rowId] = (_rows_rowId_original = (_rows_rowId = rows[rowId]) === null || _rows_rowId === void 0 ? void 0 : _rows_rowId.original) !== null && _rows_rowId_original !== void 0 ? _rows_rowId_original : true;
                         }
                     });
-                    (_onRowSelectionChange = onRowSelectionChange) === null || _onRowSelectionChange === void 0 ? void 0 : _onRowSelectionChange(Object.values(newRowSelection));
                     return _object_spread_props(_object_spread({}, old), {
                         rowSelection: newRowSelection
                     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/useRowSelection.ts"],"sourcesContent":["import {useClickOutside} from '@mantine/hooks';\nimport {functionalUpdate, RowSelectionState, Table} from '@tanstack/table-core';\nimport isEqual from 'fast-deep-equal';\n\nimport {useRef} from 'react';\nimport {RowSelectionWithData, TableProps, TableState} from './Table.types';\n\nexport const useRowSelection = <T>(\n    table: Table<T>,\n    {\n        onRowSelectionChange,\n        multiRowSelectionEnabled,\n        additionalRootNodes = [],\n    }: Pick<TableProps<T>, 'onRowSelectionChange' | 'multiRowSelectionEnabled' | 'additionalRootNodes'>\n) => {\n    const outsideClickRef = useRef<HTMLDivElement>();\n    useClickOutside(\n        () => {\n            if (!multiRowSelectionEnabled) {\n                clearSelection();\n            }\n        },\n        null,\n        [outsideClickRef.current, ...additionalRootNodes]\n    );\n\n    table.setOptions((prev) => ({\n        ...prev,\n        onRowSelectionChange: (rowSelectionUpdater) => {\n            table.setState((old) => {\n                const newRowSelection = functionalUpdate(\n                    rowSelectionUpdater,\n                    old['rowSelection']\n                ) as RowSelectionWithData<T>;\n\n                if (isEqual(old['rowSelection'], newRowSelection)) {\n                    return old;\n                }\n\n                const rows = table.getRowModel().rowsById;\n\n                Object.keys(newRowSelection).forEach((rowId) => {\n                    if (newRowSelection[rowId] === true) {\n                        if (!rows[rowId]) {\n                            console.error(\n                                'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.'\n                            );\n                        }\n                        newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);\n                    }\n                });\n\n                onRowSelectionChange?.(Object.values(newRowSelection));\n\n                return {\n                    ...old,\n                    rowSelection: newRowSelection as RowSelectionState,\n                };\n            });\n        },\n    }));\n\n    const clearSelection = () => {\n        table.resetRowSelection(true);\n    };\n\n    const getSelectedRows = () => Object.values((table.getState() as TableState<T>).rowSelection);\n\n    const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n    return {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef};\n};\n"],"names":["useClickOutside","functionalUpdate","isEqual","useRef","useRowSelection","table","onRowSelectionChange","multiRowSelectionEnabled","additionalRootNodes","outsideClickRef","clearSelection","current","setOptions","prev","rowSelectionUpdater","setState","old","newRowSelection","rows","getRowModel","rowsById","Object","keys","forEach","rowId","console","error","original","values","rowSelection","resetRowSelection","getSelectedRows","getState","getSelectedRow"],"mappings":";;;AAAA,SAAQA,eAAe,QAAO,iBAAiB;AAC/C,SAAQC,gBAAgB,QAAiC,uBAAuB;AAChF,OAAOC,aAAa,kBAAkB;AAEtC,SAAQC,MAAM,QAAO,QAAQ;AAG7B,OAAO,IAAMC,kBAAkB,SAC3BC;QAEIC,6BAAAA,sBACAC,iCAAAA,6DACAC,qBAAAA,8DAAsB,EAAE;IAG5B,IAAMC,kBAAkBN;IACxBH,gBACI;QACI,IAAI,CAACO,0BAA0B;YAC3BG;QACJ;IACJ,GACA,MACA;QAACD,gBAAgBE,OAAO;KAAyB,CAAjD,OAA0B,qBAAGH;IAGjCH,MAAMO,UAAU,CAAC,SAACC;eAAU,wCACrBA;YACHP,sBAAsB,SAACQ;gBACnBT,MAAMU,QAAQ,CAAC,SAACC;wBAuBZV;oBAtBA,IAAMW,kBAAkBhB,iBACpBa,qBACAE,GAAG,CAAC,eAAe;oBAGvB,IAAId,QAAQc,GAAG,CAAC,eAAe,EAAEC,kBAAkB;wBAC/C,OAAOD;oBACX;oBAEA,IAAME,OAAOb,MAAMc,WAAW,GAAGC,QAAQ;oBAEzCC,OAAOC,IAAI,CAACL,iBAAiBM,OAAO,CAAC,SAACC;wBAClC,IAAIP,eAAe,CAACO,MAAM,KAAK,MAAM;gCAMRN;4BALzB,IAAI,CAACA,IAAI,CAACM,MAAM,EAAE;gCACdC,QAAQC,KAAK,CACT;4BAER;gCACyBR;4BAAzBD,eAAe,CAACO,MAAM,GAAGN,CAAAA,wBAAAA,cAAAA,IAAI,CAACM,MAAM,cAAXN,kCAAAA,YAAaS,QAAQ,cAArBT,kCAAAA,uBAA0B;wBACvD;oBACJ;qBAEAZ,wBAAAA,kCAAAA,4CAAAA,sBAAuBe,OAAOO,MAAM,CAACX;oBAErC,OAAO,wCACAD;wBACHa,cAAcZ;;gBAEtB;YACJ;;;IAGJ,IAAMP,iBAAiB;QACnBL,MAAMyB,iBAAiB,CAAC;IAC5B;IAEA,IAAMC,kBAAkB;eAAMV,OAAOO,MAAM,CAAC,AAACvB,MAAM2B,QAAQ,GAAqBH,YAAY;;QAE/DE;IAA7B,IAAME,iBAAiB;eAAMF,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB;;IAErD,OAAO;QAACrB,gBAAAA;QAAgBuB,gBAAAA;QAAgBF,iBAAAA;QAAiBtB,iBAAAA;IAAe;AAC5E,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/useRowSelection.ts"],"sourcesContent":["import {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {functionalUpdate, RowSelectionState, Table} from '@tanstack/table-core';\nimport isEqual from 'fast-deep-equal';\n\nimport {useRef} from 'react';\nimport {RowSelectionWithData, TableProps, TableState} from './Table.types';\n\nexport const useRowSelection = <T>(\n    table: Table<T>,\n    {\n        onRowSelectionChange,\n        multiRowSelectionEnabled,\n        additionalRootNodes = [],\n    }: Pick<TableProps<T>, 'onRowSelectionChange' | 'multiRowSelectionEnabled' | 'additionalRootNodes'>\n) => {\n    const outsideClickRef = useRef<HTMLDivElement>();\n    useClickOutside(\n        () => {\n            if (!multiRowSelectionEnabled) {\n                clearSelection();\n            }\n        },\n        null,\n        [outsideClickRef.current, ...additionalRootNodes]\n    );\n\n    // Need to call this outside of the onRowSelectionChange of the table to avoid rendering conflicts if the callback queues an update in a parent component.\n    // See this warning introduced in React v.16.13.0: https://legacy.reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render\n    useDidUpdate(() => {\n        onRowSelectionChange?.(getSelectedRows());\n    }, [table.getState().rowSelection]);\n\n    table.setOptions((prev) => ({\n        ...prev,\n        onRowSelectionChange: (rowSelectionUpdater) => {\n            table.setState((old) => {\n                const newRowSelection = functionalUpdate(\n                    rowSelectionUpdater,\n                    old['rowSelection']\n                ) as RowSelectionWithData<T>;\n\n                if (isEqual(old['rowSelection'], newRowSelection)) {\n                    return old;\n                }\n\n                const rows = table.getRowModel().rowsById;\n\n                Object.keys(newRowSelection).forEach((rowId) => {\n                    if (newRowSelection[rowId] === true) {\n                        if (!rows[rowId]) {\n                            console.error(\n                                'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.'\n                            );\n                        }\n                        newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);\n                    }\n                });\n\n                return {\n                    ...old,\n                    rowSelection: newRowSelection as RowSelectionState,\n                };\n            });\n        },\n    }));\n\n    const clearSelection = () => {\n        table.resetRowSelection(true);\n    };\n\n    const getSelectedRows = () => Object.values((table.getState() as TableState<T>).rowSelection);\n\n    const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n    return {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef};\n};\n"],"names":["useClickOutside","useDidUpdate","functionalUpdate","isEqual","useRef","useRowSelection","table","onRowSelectionChange","multiRowSelectionEnabled","additionalRootNodes","outsideClickRef","clearSelection","current","getSelectedRows","getState","rowSelection","setOptions","prev","rowSelectionUpdater","setState","old","newRowSelection","rows","getRowModel","rowsById","Object","keys","forEach","rowId","console","error","original","resetRowSelection","values","getSelectedRow"],"mappings":";;;AAAA,SAAQA,eAAe,EAAEC,YAAY,QAAO,iBAAiB;AAC7D,SAAQC,gBAAgB,QAAiC,uBAAuB;AAChF,OAAOC,aAAa,kBAAkB;AAEtC,SAAQC,MAAM,QAAO,QAAQ;AAG7B,OAAO,IAAMC,kBAAkB,SAC3BC;QAEIC,6BAAAA,sBACAC,iCAAAA,6DACAC,qBAAAA,8DAAsB,EAAE;IAG5B,IAAMC,kBAAkBN;IACxBJ,gBACI;QACI,IAAI,CAACQ,0BAA0B;YAC3BG;QACJ;IACJ,GACA,MACA;QAACD,gBAAgBE,OAAO;KAAyB,CAAjD,OAA0B,qBAAGH;IAGjC,0JAA0J;IAC1J,yJAAyJ;IACzJR,aAAa;YACTM;SAAAA,wBAAAA,kCAAAA,4CAAAA,sBAAuBM;IAC3B,GAAG;QAACP,MAAMQ,QAAQ,GAAGC,YAAY;KAAC;IAElCT,MAAMU,UAAU,CAAC,SAACC;eAAU,wCACrBA;YACHV,sBAAsB,SAACW;gBACnBZ,MAAMa,QAAQ,CAAC,SAACC;oBACZ,IAAMC,kBAAkBnB,iBACpBgB,qBACAE,GAAG,CAAC,eAAe;oBAGvB,IAAIjB,QAAQiB,GAAG,CAAC,eAAe,EAAEC,kBAAkB;wBAC/C,OAAOD;oBACX;oBAEA,IAAME,OAAOhB,MAAMiB,WAAW,GAAGC,QAAQ;oBAEzCC,OAAOC,IAAI,CAACL,iBAAiBM,OAAO,CAAC,SAACC;wBAClC,IAAIP,eAAe,CAACO,MAAM,KAAK,MAAM;gCAMRN;4BALzB,IAAI,CAACA,IAAI,CAACM,MAAM,EAAE;gCACdC,QAAQC,KAAK,CACT;4BAER;gCACyBR;4BAAzBD,eAAe,CAACO,MAAM,GAAGN,CAAAA,wBAAAA,cAAAA,IAAI,CAACM,MAAM,cAAXN,kCAAAA,YAAaS,QAAQ,cAArBT,kCAAAA,uBAA0B;wBACvD;oBACJ;oBAEA,OAAO,wCACAF;wBACHL,cAAcM;;gBAEtB;YACJ;;;IAGJ,IAAMV,iBAAiB;QACnBL,MAAM0B,iBAAiB,CAAC;IAC5B;IAEA,IAAMnB,kBAAkB;eAAMY,OAAOQ,MAAM,CAAC,AAAC3B,MAAMQ,QAAQ,GAAqBC,YAAY;;QAE/DF;IAA7B,IAAMqB,iBAAiB;eAAMrB,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB;;IAErD,OAAO;QAACF,gBAAAA;QAAgBuB,gBAAAA;QAAgBrB,iBAAAA;QAAiBH,iBAAAA;IAAe;AAC5E,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.11.1",
+  "version": "52.12.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -31,57 +31,57 @@
     "@dnd-kit/modifiers": "6.0.1",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.1",
-    "@mantine/utils": "6.0.14",
+    "@mantine/utils": "6.0.17",
     "@monaco-editor/react": "4.5.1",
     "@swc/helpers": "0.5.1",
     "@tanstack/react-table": "8.9.3",
     "@tanstack/table-core": "8.9.3",
-    "dayjs": "1.11.8",
+    "dayjs": "1.11.9",
     "fast-deep-equal": "3.1.3",
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
-    "monaco-editor": "0.39.0",
-    "@coveord/plasma-react-icons": "52.11.1",
-    "@coveord/plasma-tokens": "52.11.1"
+    "monaco-editor": "0.40.0",
+    "@coveord/plasma-react-icons": "52.12.0",
+    "@coveord/plasma-tokens": "52.12.0"
   },
   "devDependencies": {
     "@emotion/react": "11.11.1",
-    "@mantine/carousel": "6.0.14",
-    "@mantine/core": "6.0.14",
-    "@mantine/dates": "6.0.14",
-    "@mantine/form": "6.0.14",
-    "@mantine/hooks": "6.0.14",
-    "@mantine/modals": "6.0.14",
-    "@mantine/notifications": "6.0.14",
+    "@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",
     "@swc/cli": "0.1.62",
-    "@swc/core": "1.3.66",
-    "@swc/jest": "0.2.26",
-    "@testing-library/jest-dom": "5.16.5",
+    "@swc/core": "1.3.70",
+    "@swc/jest": "0.2.27",
+    "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/jest": "29.5.2",
+    "@types/jest": "29.5.3",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.defaultsdeep": "4.6.7",
-    "@types/react": "18.2.13",
-    "@types/react-dom": "18.2.6",
-    "@types/testing-library__jest-dom": "5.14.6",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
+    "@types/testing-library__jest-dom": "5.14.8",
     "csstype": "3.1.2",
     "embla-carousel-react": "7.1.0",
     "eslint-plugin-testing-library": "5.11.0",
     "eslint-plugin-vitest": "0.2.6",
-    "eslint-plugin-vitest-globals": "1.3.1",
+    "eslint-plugin-vitest-globals": "1.4.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.5.0",
-    "jest-environment-jsdom": "29.5.0",
+    "jest": "29.6.1",
+    "jest-environment-jsdom": "29.6.1",
     "jest-junit": "13.2.0",
     "npm-run-all": "4.1.5",
-    "publint": "0.1.12",
+    "publint": "0.1.16",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "3.0.2",
-    "tslib": "2.5.3",
-    "typescript": "5.1.3",
-    "vitest": "0.31.1"
+    "tslib": "2.6.0",
+    "typescript": "5.1.6",
+    "vitest": "0.33.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.0",

package/src/components/table/Table.types.ts

@@ -76,6 +76,10 @@ export interface TableLayoutProps<T = unknown> {
      * @param datum the row for which the children should be generated.
      */
     getExpandChildren?: (datum: T) => ReactNode;
+    /**
+     * Whether clicking on a selected row will deselect the row or not.
+     */
+    keepSelection?: boolean;
 }
 
 export type TableFormType = {

package/src/components/table/TablePagination.tsx

@@ -8,11 +8,18 @@ interface TablePaginationProps {
      * The total number of page. Use null only if your table is paginated client side
      */
     totalPages: number | null;
+    /**
+     * The callback if the current page is changed.
+     *
+     * @param pageIndex The index of the updated page.
+     */
+    onPageChange?: (pageIndex: number) => void;
 }
 
-export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages}) => {
+export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages, onPageChange}) => {
     const {state, setState, containerRef, getPageCount} = useTable();
     const updatePage = (newPage: number) => {
+        onPageChange?.(newPage - 1);
         setState((prevState) => ({
             ...prevState,
             pagination: {...prevState.pagination, pageIndex: newPage - 1},

package/src/components/table/TablePerPage.tsx

@@ -16,22 +16,30 @@ interface TablePerPageProps {
      * @default [25, 50, 100]
      */
     values?: number[];
+    /**
+     * The callback if the entries per page is changed.
+     *
+     * @param perPage the new number of entries per page
+     */
+    onPerPageChange?: (perPage: number) => void;
 }
 
 export const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({
     label = 'Results per page',
     values = [25, 50, 100],
+    onPerPageChange,
 }) => {
-    const {state, setState} = useTable();
+    const {state, setState, getPageCount} = useTable();
 
     const updatePerPage = (newPerPage: string) => {
+        onPerPageChange?.(Number(newPerPage));
         setState((prevState) => ({
             ...prevState,
             pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},
         }));
     };
 
-    return (
+    return getPageCount() > 0 ? (
         <Group spacing="sm">
             <Text fw={500}>{label}</Text>
             <SegmentedControl
@@ -42,7 +50,7 @@ export const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE:
                 size="sm"
             />
         </Group>
-    );
+    ) : null;
 };
 
 TablePerPage.DEFAULT_SIZE = 50;

package/src/components/table/Th.tsx

@@ -2,7 +2,7 @@ import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@cov
 import {Center, Group, Text, UnstyledButton, createStyles} from '@mantine/core';
 import {Header, defaultColumnSizing, flexRender} from '@tanstack/react-table';
 
-const useStyles = createStyles((theme, width: number) => ({
+const useStyles = createStyles((theme, columnSizing: {size: number; minSize: number; maxSize: number}) => ({
     th: {
         fontWeight: '400 !important' as any,
         padding: '0 !important',
@@ -11,7 +11,9 @@ const useStyles = createStyles((theme, width: number) => ({
         textAlign: 'left',
         color: theme.colors.gray[6],
         backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],
-        width,
+        width: columnSizing.size,
+        minWidth: columnSizing.minSize,
+        maxWidth: columnSizing.maxSize,
     },
 
     control: {
@@ -43,9 +45,14 @@ const SortingLabels = {
 } as const;
 
 export const Th = <T,>({header}: ThProps<T>) => {
-    const size = header.column.getSize();
-    const width = size !== defaultColumnSizing.size ? size : undefined;
-    const {classes} = useStyles(width);
+    const columnSizing = {
+        ...defaultColumnSizing,
+        size: header.column.columnDef.size,
+        minSize: header.column.columnDef.minSize,
+        maxSize: header.column.columnDef.maxSize,
+    };
+
+    const {classes} = useStyles(columnSizing);
 
     if (header.isPlaceholder) {
         return null;

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

@@ -101,4 +101,37 @@ describe('Table.Pagination', () => {
         expect(screen.getByText('protein foods')).toBeVisible();
         expect(screen.getByText('dairy')).toBeVisible();
     });
+
+    it('triggers the onChangePage Callback with the right parameters', async () => {
+        const user = userEvent.setup();
+        const onChangePage = vi.fn();
+        render(
+            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
+                <Table.Footer>
+                    <Table.PerPage />
+                    <Table.Pagination totalPages={5} onPageChange={onChangePage} />
+                </Table.Footer>
+            </Table>
+        );
+
+        onChangePage.mockReset();
+
+        await user.click(screen.getByRole('radio', {name: /100/i}));
+        await user.click(screen.queryByRole('button', {name: '2'}));
+
+        await waitFor(() => {
+            expect(onChangePage).toHaveBeenCalledWith(1);
+        });
+    });
+
+    it('renders nothing when there are no pages to show', () => {
+        render(
+            <Table data={[]} columns={columns} initialState={{globalFilter: 'filter'}}>
+                <Table.Footer data-testid="table-footer">
+                    <Table.Pagination totalPages={0} />
+                </Table.Footer>
+            </Table>
+        );
+        expect(screen.getByTestId('table-footer')).toBeEmptyDOMElement();
+    });
 });