@coveord/plasma-mantine 52.10.1 → 52.11.0

package/dist/cjs/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,EAAkC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAuB9E,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;AA0B9E,UAAU,OAAO,CAAC,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B;AAcD,eAAO,MAAM,EAAE,4CAqCd,CAAC"}

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

@@ -12,20 +12,24 @@ var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
 var _reacttable = require("@tanstack/react-table");
-var useStyles = (0, _core.createStyles)(function(theme) {
+var useStyles = (0, _core.createStyles)(function(theme, width) {
     return {
         th: {
             fontWeight: "400 !important",
             padding: "0 !important",
             verticalAlign: "middle",
-            whiteSpace: "nowrap"
+            whiteSpace: "nowrap",
+            textAlign: "left",
+            color: theme.colors.gray[6],
+            backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[8] : theme.colors.gray[0],
+            width: width
         },
         control: {
+            color: "inherit",
+            whiteSpace: "inherit",
+            fontWeight: "inherit",
             width: "100%",
             padding: "".concat(theme.spacing.xs, " ").concat(theme.spacing.sm),
-            whiteSpace: "nowrap",
-            backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[8] : theme.colors.gray[0],
-            color: theme.colors.gray[6],
             "&:hover": {
                 backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[7] : theme.colors.gray[1]
             }
@@ -44,18 +48,15 @@ var SortingLabels = {
 };
 var Th = function(param) {
     var header = param.header;
-    var classes = useStyles().classes;
     var size = header.column.getSize();
     var width = size !== _reacttable.defaultColumnSizing.size ? size : undefined;
+    var classes = useStyles(width).classes;
     if (header.isPlaceholder) {
         return null;
     }
     if (!header.column.getCanSort()) {
         return /*#__PURE__*/ (0, _jsxruntime.jsx)("th", {
             className: classes.th,
-            style: {
-                width: width
-            },
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, {
                 size: "xs",
                 py: "xs",
@@ -70,9 +71,6 @@ var Th = function(param) {
     var Icon = SortingIcons[sortingOrder];
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("th", {
         className: classes.th,
-        style: {
-            width: width
-        },
         "aria-sort": SortingLabels[sortingOrder],
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.UnstyledButton, {
             onClick: onSort,

package/dist/cjs/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, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n    th: {\n        fontWeight: '400 !important' as any,\n        padding: '0 !important',\n        verticalAlign: 'middle',\n        whiteSpace: 'nowrap',\n    },\n\n    control: {\n        width: '100%',\n        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n        whiteSpace: 'nowrap',\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n        color: theme.colors.gray[6],\n\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 {classes} = useStyles();\n    const size = header.column.getSize();\n    const width = size !== defaultColumnSizing.size ? size : undefined;\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th} style={{width}}>\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} style={{width}} 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":["Th","useStyles","createStyles","theme","th","fontWeight","padding","verticalAlign","whiteSpace","control","width","spacing","xs","sm","backgroundColor","colorScheme","colors","gray","color","SortingIcons","asc","ArrowUpSize16Px","desc","ArrowDownSize16Px","none","DoubleArrowHeadVSize16Px","SortingLabels","header","classes","size","column","getSize","defaultColumnSizing","undefined","isPlaceholder","getCanSort","className","style","Text","py","px","fw","flexRender","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","UnstyledButton","onClick","Group","position","noWrap","Center","height"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;gCAzC8D;oBACX;0BACV;AAEtD,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,eAAe;YACfC,YAAY;QAChB;QAEAC,SAAS;YACLC,OAAO;YACPJ,SAAS,AAAC,GAAsBH,OAApBA,MAAMQ,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBT,MAAMQ,OAAO,CAACE,EAAE;YAChDL,YAAY;YACZM,iBAAiBX,MAAMY,WAAW,KAAK,SAASZ,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGd,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3FC,OAAOf,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAE3B,WAAW;gBACPH,iBAAiBX,MAAMY,WAAW,KAAK,SAASZ,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGd,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAME,eAAe;IACjBC,KAAKC,iCAAe;IACpBC,MAAMC,mCAAiB;IACvBC,MAAMC,0CAAwB;AAClC;AAEA,IAAMC,gBAAgB;IAClBN,KAAK;IACLE,MAAM;IACNE,MAAM;AACV;AAEO,IAAMxB,KAAK;QAAM2B,eAAAA;IACpB,IAAM,AAACC,UAAW3B,YAAX2B;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMrB,QAAQmB,SAASG,+BAAmB,CAACH,IAAI,GAAGA,OAAOI;IAEzD,IAAIN,OAAOO,aAAa,EAAE;QACtB,OAAO;IACX;IAEA,IAAI,CAACP,OAAOG,MAAM,CAACK,UAAU,IAAI;QAC7B,qBACI,qBAAC/B;YAAGgC,WAAWR,QAAQxB,EAAE;YAAEiC,OAAO;gBAAC3B,OAAAA;YAAK;sBACpC,cAAA,qBAAC4B,UAAI;gBAACT,MAAK;gBAAKU,IAAG;gBAAKC,IAAG;gBAAKC,IAAI;0BAC/BC,IAAAA,sBAAU,EAACf,OAAOG,MAAM,CAACa,SAAS,CAAChB,MAAM,EAAEA,OAAOiB,UAAU;;;IAI7E;IAEA,IAAMC,SAASlB,OAAOG,MAAM,CAACgB,uBAAuB;IACpD,IAAMC,eAAepB,OAAOG,MAAM,CAACkB,WAAW,MAAM;IACpD,IAAMC,OAAO9B,YAAY,CAAC4B,aAAa;IAEvC,qBACI,qBAAC3C;QAAGgC,WAAWR,QAAQxB,EAAE;QAAEiC,OAAO;YAAC3B,OAAAA;QAAK;QAAGwC,aAAWxB,aAAa,CAACqB,aAAa;kBAC7E,cAAA,qBAACI,oBAAc;YAACC,SAASP;YAAQT,WAAWR,QAAQnB,OAAO;sBACvD,cAAA,sBAAC4C,WAAK;gBAACC,UAAS;gBAAQC,MAAM;;kCAC1B,qBAACjB,UAAI;wBAACT,MAAK;wBAAKY,IAAI;kCACfC,IAAAA,sBAAU,EAACf,OAAOG,MAAM,CAACa,SAAS,CAAChB,MAAM,EAAEA,OAAOiB,UAAU;;kCAEjE,qBAACY,YAAM;kCACH,cAAA,qBAACP;4BAAKQ,QAAQ;;;;;;;AAMtC"}
+{"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":["Th","useStyles","createStyles","theme","width","th","fontWeight","padding","verticalAlign","whiteSpace","textAlign","color","colors","gray","backgroundColor","colorScheme","control","spacing","xs","sm","SortingIcons","asc","ArrowUpSize16Px","desc","ArrowDownSize16Px","none","DoubleArrowHeadVSize16Px","SortingLabels","header","size","column","getSize","defaultColumnSizing","undefined","classes","isPlaceholder","getCanSort","className","Text","py","px","fw","flexRender","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","aria-sort","UnstyledButton","onClick","Group","position","noWrap","Center","height"],"mappings":";;;;+BA4CaA;;;eAAAA;;;;gCA5C8D;oBACX;0BACV;AAEtD,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC,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,KAAKC,iCAAe;IACpBC,MAAMC,mCAAiB;IACvBC,MAAMC,0CAAwB;AAClC;AAEA,IAAMC,gBAAgB;IAClBN,KAAK;IACLE,MAAM;IACNE,MAAM;AACV;AAEO,IAAMzB,KAAK;QAAM4B,eAAAA;IACpB,IAAMC,OAAOD,OAAOE,MAAM,CAACC,OAAO;IAClC,IAAM3B,QAAQyB,SAASG,+BAAmB,CAACH,IAAI,GAAGA,OAAOI;IACzD,IAAM,AAACC,UAAWjC,UAAUG,OAArB8B;IAEP,IAAIN,OAAOO,aAAa,EAAE;QACtB,OAAO;IACX;IAEA,IAAI,CAACP,OAAOE,MAAM,CAACM,UAAU,IAAI;QAC7B,qBACI,qBAAC/B;YAAGgC,WAAWH,QAAQ7B,EAAE;sBACrB,cAAA,qBAACiC,UAAI;gBAACT,MAAK;gBAAKU,IAAG;gBAAKC,IAAG;gBAAKC,IAAI;0BAC/BC,IAAAA,sBAAU,EAACd,OAAOE,MAAM,CAACa,SAAS,CAACf,MAAM,EAAEA,OAAOgB,UAAU;;;IAI7E;IAEA,IAAMC,SAASjB,OAAOE,MAAM,CAACgB,uBAAuB;IACpD,IAAMC,eAAenB,OAAOE,MAAM,CAACkB,WAAW,MAAM;IACpD,IAAMC,OAAO7B,YAAY,CAAC2B,aAAa;IAEvC,qBACI,qBAAC1C;QAAGgC,WAAWH,QAAQ7B,EAAE;QAAE6C,aAAWvB,aAAa,CAACoB,aAAa;kBAC7D,cAAA,qBAACI,oBAAc;YAACC,SAASP;YAAQR,WAAWH,QAAQlB,OAAO;sBACvD,cAAA,sBAACqC,WAAK;gBAACC,UAAS;gBAAQC,MAAM;;kCAC1B,qBAACjB,UAAI;wBAACT,MAAK;wBAAKY,IAAI;kCACfC,IAAAA,sBAAU,EAACd,OAAOE,MAAM,CAACa,SAAS,CAACf,MAAM,EAAEA,OAAOgB,UAAU;;kCAEjE,qBAACY,YAAM;kCACH,cAAA,qBAACP;4BAAKQ,QAAQ;;;;;;;AAMtC"}

package/dist/cjs/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;AA6K7D,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+K7D,eAAO,MAAM,SAAS,EAAE,WAKvB,CAAC"}

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

@@ -134,6 +134,7 @@ var RowLayoutBody = function(param) {
                     },
                     className: cx(classes.row, (_obj = {}, _define_property._(_obj, classes.rowSelected, isSelected), _define_property._(_obj, classes.rowUnselectable, disableRowSelection), _obj)),
                     "aria-selected": isSelected,
+                    "data-testid": row.id,
                     children: row.getVisibleCells().map(function(cell) {
                         var size = cell.column.getSize();
                         var width = size !== _tablecore.defaultColumnSizing.size ? size : undefined;
@@ -144,6 +145,7 @@ var RowLayoutBody = function(param) {
                             }
                         };
                         return /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
+                            "data-testid": cell.id,
                             style: {
                                 width: width
                             },

package/dist/cjs/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                >\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                                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":["RowLayout","useStyles","createStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","rem","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","useTable","classes","headers","getHeaderGroups","map","headerGroup","tr","className","columnHeader","Th","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","cx","toggleCollapsible","el","children","length","querySelector","click","rows","getRowModel","rowChildren","original","isSelected","getIsSelected","onClick","event","currentTarget","toggleSelected","Fragment","onDoubleClick","aria-selected","getVisibleCells","size","column","getSize","width","defaultColumnSizing","onCollapsibleCellClick","TableSelectableColumn","stopPropagation","getToggleSelectedHandler","td","style","TableCollapsibleColumn","TableLoading","visible","flexRender","columnDef","getContext","colSpan","getAllColumns","Collapse","in","getIsExpanded","Box","px","py","name","icon","ListSize16Px","Header","Body"],"mappings":"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"}
+{"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":["RowLayout","useStyles","createStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","rem","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","useTable","classes","headers","getHeaderGroups","map","headerGroup","tr","className","columnHeader","Th","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","cx","toggleCollapsible","el","children","length","querySelector","click","rows","getRowModel","rowChildren","original","isSelected","getIsSelected","onClick","event","currentTarget","toggleSelected","Fragment","onDoubleClick","aria-selected","data-testid","getVisibleCells","size","column","getSize","width","defaultColumnSizing","onCollapsibleCellClick","TableSelectableColumn","stopPropagation","getToggleSelectedHandler","td","style","TableCollapsibleColumn","TableLoading","visible","flexRender","columnDef","getContext","colSpan","getAllColumns","Collapse","in","getIsExpanded","Box","px","py","name","icon","ListSize16Px","Header","Body"],"mappings":"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"}

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,EAAkC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAuB9E,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;AA0B9E,UAAU,OAAO,CAAC,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B;AAcD,eAAO,MAAM,EAAE,4CAqCd,CAAC"}

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

@@ -1,21 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px } from "@coveord/plasma-react-icons";
-import { Center, createStyles, Group, Text, UnstyledButton } from "@mantine/core";
+import { Center, Group, Text, UnstyledButton, createStyles } from "@mantine/core";
 import { defaultColumnSizing, flexRender } from "@tanstack/react-table";
-var useStyles = createStyles(function(theme) {
+var useStyles = createStyles(function(theme, width) {
     return {
         th: {
             fontWeight: "400 !important",
             padding: "0 !important",
             verticalAlign: "middle",
-            whiteSpace: "nowrap"
+            whiteSpace: "nowrap",
+            textAlign: "left",
+            color: theme.colors.gray[6],
+            backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[8] : theme.colors.gray[0],
+            width: width
         },
         control: {
+            color: "inherit",
+            whiteSpace: "inherit",
+            fontWeight: "inherit",
             width: "100%",
             padding: "".concat(theme.spacing.xs, " ").concat(theme.spacing.sm),
-            whiteSpace: "nowrap",
-            backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[8] : theme.colors.gray[0],
-            color: theme.colors.gray[6],
             "&:hover": {
                 backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[7] : theme.colors.gray[1]
             }
@@ -34,18 +38,15 @@ var SortingLabels = {
 };
 export var Th = function(param) {
     var header = param.header;
-    var classes = useStyles().classes;
     var size = header.column.getSize();
     var width = size !== defaultColumnSizing.size ? size : undefined;
+    var classes = useStyles(width).classes;
     if (header.isPlaceholder) {
         return null;
     }
     if (!header.column.getCanSort()) {
         return /*#__PURE__*/ _jsx("th", {
             className: classes.th,
-            style: {
-                width: width
-            },
             children: /*#__PURE__*/ _jsx(Text, {
                 size: "xs",
                 py: "xs",
@@ -60,9 +61,6 @@ export var Th = function(param) {
     var Icon = SortingIcons[sortingOrder];
     return /*#__PURE__*/ _jsx("th", {
         className: classes.th,
-        style: {
-            width: width
-        },
         "aria-sort": SortingLabels[sortingOrder],
         children: /*#__PURE__*/ _jsx(UnstyledButton, {
             onClick: onSort,

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, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n    th: {\n        fontWeight: '400 !important' as any,\n        padding: '0 !important',\n        verticalAlign: 'middle',\n        whiteSpace: 'nowrap',\n    },\n\n    control: {\n        width: '100%',\n        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n        whiteSpace: 'nowrap',\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],\n        color: theme.colors.gray[6],\n\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 {classes} = useStyles();\n    const size = header.column.getSize();\n    const width = size !== defaultColumnSizing.size ? size : undefined;\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th} style={{width}}>\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} style={{width}} 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","createStyles","Group","Text","UnstyledButton","defaultColumnSizing","flexRender","useStyles","theme","th","fontWeight","padding","verticalAlign","whiteSpace","control","width","spacing","xs","sm","backgroundColor","colorScheme","colors","gray","color","SortingIcons","asc","desc","none","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","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,YAAY,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,QAAO,gBAAgB;AAChF,SAAQC,mBAAmB,EAAEC,UAAU,QAAe,wBAAwB;AAE9E,IAAMC,YAAYN,aAAa,SAACO;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,eAAe;YACfC,YAAY;QAChB;QAEAC,SAAS;YACLC,OAAO;YACPJ,SAAS,AAAC,GAAsBH,OAApBA,MAAMQ,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBT,MAAMQ,OAAO,CAACE,EAAE;YAChDL,YAAY;YACZM,iBAAiBX,MAAMY,WAAW,KAAK,SAASZ,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGd,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3FC,OAAOf,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAE3B,WAAW;gBACPH,iBAAiBX,MAAMY,WAAW,KAAK,SAASZ,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGd,MAAMa,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAME,eAAe;IACjBC,KAAK3B;IACL4B,MAAM7B;IACN8B,MAAM5B;AACV;AAEA,IAAM6B,gBAAgB;IAClBH,KAAK;IACLC,MAAM;IACNC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK;QAAMC,eAAAA;IACpB,IAAM,AAACC,UAAWxB,YAAXwB;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMnB,QAAQiB,SAAS3B,oBAAoB2B,IAAI,GAAGA,OAAOG;IAEzD,IAAIL,OAAOM,aAAa,EAAE;QACtB,OAAO;IACX;IAEA,IAAI,CAACN,OAAOG,MAAM,CAACI,UAAU,IAAI;QAC7B,qBACI,KAAC5B;YAAG6B,WAAWP,QAAQtB,EAAE;YAAE8B,OAAO;gBAACxB,OAAAA;YAAK;sBACpC,cAAA,KAACZ;gBAAK6B,MAAK;gBAAKQ,IAAG;gBAAKC,IAAG;gBAAKC,IAAI;0BAC/BpC,WAAWwB,OAAOG,MAAM,CAACU,SAAS,CAACb,MAAM,EAAEA,OAAOc,UAAU;;;IAI7E;IAEA,IAAMC,SAASf,OAAOG,MAAM,CAACa,uBAAuB;IACpD,IAAMC,eAAejB,OAAOG,MAAM,CAACe,WAAW,MAAM;IACpD,IAAMC,OAAOzB,YAAY,CAACuB,aAAa;IAEvC,qBACI,KAACtC;QAAG6B,WAAWP,QAAQtB,EAAE;QAAE8B,OAAO;YAACxB,OAAAA;QAAK;QAAGmC,aAAWtB,aAAa,CAACmB,aAAa;kBAC7E,cAAA,KAAC3C;YAAe+C,SAASN;YAAQP,WAAWP,QAAQjB,OAAO;sBACvD,cAAA,MAACZ;gBAAMkD,UAAS;gBAAQC,MAAM;;kCAC1B,KAAClD;wBAAK6B,MAAK;wBAAKU,IAAI;kCACfpC,WAAWwB,OAAOG,MAAM,CAACU,SAAS,CAACb,MAAM,EAAEA,OAAOc,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, 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"}

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;AA6K7D,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+K7D,eAAO,MAAM,SAAS,EAAE,WAKvB,CAAC"}

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

@@ -124,6 +124,7 @@ var RowLayoutBody = function(param) {
                     },
                     className: cx(classes.row, (_obj = {}, _define_property(_obj, classes.rowSelected, isSelected), _define_property(_obj, classes.rowUnselectable, disableRowSelection), _obj)),
                     "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;
@@ -134,6 +135,7 @@ var RowLayoutBody = function(param) {
                             }
                         };
                         return /*#__PURE__*/ _jsx("td", {
+                            "data-testid": cell.id,
                             style: {
                                 width: width
                             },

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                >\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                                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","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;8BAEdjC,IAAIyC,eAAe,GAAG9B,GAAG,CAAC,SAACV;wBACxB,IAAMyC,OAAOzC,KAAK0C,MAAM,CAACC,OAAO;wBAChC,IAAMC,QAAQH,SAAS9E,oBAAoB8E,IAAI,GAAGA,OAAOvD;wBACzD,IAAM2D,yBAAyB,SAACV;4BAC5B,IAAInC,KAAK0C,MAAM,CAAC1B,EAAE,KAAKhD,sBAAsBgD,EAAE,IAAI,CAAC3C,qBAAqB;gCACrE8D,MAAMW,eAAe;gCACrB/C,IAAIgD,wBAAwB;4BAChC;wBACJ;wBACA,qBACI,KAACC;4BAEGC,OAAO;gCAACL,OAAAA;4BAAK;4BACb/B,WAAWQ,GAAGd,QAAQP,IAAI,EACtB,qBAACO,QAAQd,wBAAwB,EAAGO,KAAK0C,MAAM,CAAC1B,EAAE,KAAKnD,uBAAuBmD,EAAE;4BAEpFkB,SAASW;sCAET,cAAA,KAAC9E;gCAAamF,SAAS9B;0CAClB1D,WAAWsC,KAAK0C,MAAM,CAACS,SAAS,CAACnD,IAAI,EAAEA,KAAKoD,UAAU;;2BARtDpD,KAAKgB,EAAE;oBAYxB;;gBAEHc,4BACG,KAAClB;8BACG,cAAA,KAACoC;wBACGK,SAAS/C,MAAMgD,aAAa,GAAG7B,MAAM;wBACrCwB,OAAO;4BACHtD,SAAS;wBACb;kCAEA,cAAA,KAACpC;4BAASgG,IAAIxD,IAAIyD,aAAa;sCAC3B,cAAA,KAAClG;gCAAIuD,WAAWN,QAAQH,WAAW;gCAAEqD,IAAG;gCAAKC,IAAG;0CAC3C5B;;;;qBAKjB;;WAlDO/B,IAAIiB,EAAE;IAqD7B;IAEA,qBAAO;kBAAGY;;AACd;AAEA,OAAO,IAAM+B,YAAyB;IAClCC,MAAM;IACNC,MAAMxG;IACNyG,QAAQzD;IACR0D,MAAM9C;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,>({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":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.10.1",
+  "version": "52.11.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -34,15 +34,15 @@
     "@mantine/utils": "6.0.14",
     "@monaco-editor/react": "4.5.1",
     "@swc/helpers": "0.5.1",
-    "@tanstack/react-table": "8.9.2",
-    "@tanstack/table-core": "8.9.2",
+    "@tanstack/react-table": "8.9.3",
+    "@tanstack/table-core": "8.9.3",
     "dayjs": "1.11.8",
     "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.10.1",
-    "@coveord/plasma-tokens": "52.10.1"
+    "@coveord/plasma-react-icons": "52.11.0",
+    "@coveord/plasma-tokens": "52.11.0"
   },
   "devDependencies": {
     "@emotion/react": "11.11.1",

package/src/components/table/Th.tsx

@@ -1,22 +1,25 @@
 import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';
-import {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';
-import {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';
+import {Center, Group, Text, UnstyledButton, createStyles} from '@mantine/core';
+import {Header, defaultColumnSizing, flexRender} from '@tanstack/react-table';
 
-const useStyles = createStyles((theme) => ({
+const useStyles = createStyles((theme, width: number) => ({
     th: {
         fontWeight: '400 !important' as any,
         padding: '0 !important',
         verticalAlign: 'middle',
         whiteSpace: 'nowrap',
+        textAlign: 'left',
+        color: theme.colors.gray[6],
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],
+        width,
     },
 
     control: {
+        color: 'inherit',
+        whiteSpace: 'inherit',
+        fontWeight: 'inherit',
         width: '100%',
         padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
-        whiteSpace: 'nowrap',
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],
-        color: theme.colors.gray[6],
-
         '&:hover': {
             backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],
         },
@@ -40,9 +43,9 @@ const SortingLabels = {
 } as const;
 
 export const Th = <T,>({header}: ThProps<T>) => {
-    const {classes} = useStyles();
     const size = header.column.getSize();
     const width = size !== defaultColumnSizing.size ? size : undefined;
+    const {classes} = useStyles(width);
 
     if (header.isPlaceholder) {
         return null;
@@ -50,7 +53,7 @@ export const Th = <T,>({header}: ThProps<T>) => {
 
     if (!header.column.getCanSort()) {
         return (
-            <th className={classes.th} style={{width}}>
+            <th className={classes.th}>
                 <Text size="xs" py="xs" px="sm" fw={500}>
                     {flexRender(header.column.columnDef.header, header.getContext())}
                 </Text>
@@ -63,7 +66,7 @@ export const Th = <T,>({header}: ThProps<T>) => {
     const Icon = SortingIcons[sortingOrder];
 
     return (
-        <th className={classes.th} style={{width}} aria-sort={SortingLabels[sortingOrder]}>
+        <th className={classes.th} aria-sort={SortingLabels[sortingOrder]}>
             <UnstyledButton onClick={onSort} className={classes.control}>
                 <Group position="apart" noWrap>
                     <Text size="xs" fw={500}>

package/src/components/table/layouts/RowLayout.tsx

@@ -127,6 +127,7 @@ const RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading
                         [classes.rowUnselectable]: disableRowSelection,
                     })}
                     aria-selected={isSelected}
+                    data-testid={row.id}
                 >
                     {row.getVisibleCells().map((cell) => {
                         const size = cell.column.getSize();
@@ -140,6 +141,7 @@ const RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading
                         return (
                             <td
                                 key={cell.id}
+                                data-testid={cell.id}
                                 style={{width}}
                                 className={cx(classes.cell, {
                                     [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,

package/src/components/table/layouts/__tests__/RowLayout.spec.tsx

@@ -58,6 +58,31 @@ describe('RowLayout', () => {
         expect(screen.getByRole('cell', {name: 'LAST'})).toBeVisible();
     });
 
+    it('adds testid on the data', () => {
+        const customColumns: Array<ColumnDef<RowData>> = [
+            columnHelper.accessor('firstName', {}),
+            columnHelper.accessor('lastName', {}),
+        ];
+        render(
+            <Table
+                getRowId={({id}) => id}
+                data={[
+                    {id: 'ash', firstName: 'Ash', lastName: 'Ketchum'},
+                    {id: 'gary', firstName: 'Gary', lastName: 'Oak'},
+                ]}
+                columns={customColumns}
+            />
+        );
+
+        expect(screen.getByTestId('ash')).toBeVisible();
+        expect(screen.getByTestId('ash_firstName')).toHaveTextContent('Ash');
+        expect(screen.getByTestId('ash_lastName')).toHaveTextContent('Ketchum');
+
+        expect(screen.getByTestId('gary')).toBeVisible();
+        expect(screen.getByTestId('gary_firstName')).toHaveTextContent('Gary');
+        expect(screen.getByTestId('gary_lastName')).toHaveTextContent('Oak');
+    });
+
     it('opens the collapsible rows when the user click on the toggle', async () => {
         const user = userEvent.setup();
         const Fixture: FunctionComponent<{row: RowData}> = ({row}) => <div>Collapsible content: {row.lastName}</div>;