@coveord/plasma-mantine 52.26.3 → 52.26.4

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

@@ -1,77 +1,56 @@
-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 { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ListSize16Px } from "@coveord/plasma-react-icons";
-import { Box, Collapse } from "@mantine/core";
-import { flexRender } from "@tanstack/react-table";
-import { defaultColumnSizing } from "@tanstack/table-core";
-import { Fragment } from "react";
-import { useTable } from "../TableContext";
-import { TableCollapsibleColumn } from "../table-column/TableCollapsibleColumn";
-import { TableSelectableColumn } from "../table-column/TableSelectableColumn";
-import { Th } from "../table-header/Th";
-import { TableLoading } from "../table-loading/TableLoading";
-import useStyles from "./RowLayout.styles";
-var RowLayoutHeader = function(param) {
-    var table = param.table, classNames = param.classNames, styles = param.styles, unstyled = param.unstyled;
-    var _useTable = useTable(), multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, disableRowSelection = _useTable.disableRowSelection;
-    var classes = useStyles({
-        disableRowSelection: disableRowSelection,
-        multiRowSelectionEnabled: multiRowSelectionEnabled
+import { ListSize16Px } from '@coveord/plasma-react-icons';
+import { Box, Collapse } from '@mantine/core';
+import { flexRender } from '@tanstack/react-table';
+import { defaultColumnSizing } from '@tanstack/table-core';
+import { Fragment } from 'react';
+import { useTable } from '../TableContext';
+import { TableCollapsibleColumn } from '../table-column/TableCollapsibleColumn';
+import { TableSelectableColumn } from '../table-column/TableSelectableColumn';
+import { Th } from '../table-header/Th';
+import { TableLoading } from '../table-loading/TableLoading';
+import useStyles from './RowLayout.styles';
+const RowLayoutHeader = ({ table, classNames, styles, unstyled })=>{
+    const { multiRowSelectionEnabled, disableRowSelection } = useTable();
+    const { classes } = useStyles({
+        disableRowSelection,
+        multiRowSelectionEnabled
     }, {
-        name: "RowLayout",
-        classNames: classNames,
-        styles: styles,
-        unstyled: unstyled
-    }).classes;
-    var headers = table.getHeaderGroups().map(function(headerGroup) {
-        return /*#__PURE__*/ _jsx("tr", {
+        name: 'RowLayout',
+        classNames,
+        styles,
+        unstyled
+    });
+    const headers = table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ _jsx("tr", {
             className: classes.headerColumns,
-            children: headerGroup.headers.map(function(columnHeader) {
-                return /*#__PURE__*/ _jsx(Th, {
+            children: headerGroup.headers.map((columnHeader)=>/*#__PURE__*/ _jsx(Th, {
                     header: columnHeader
-                }, columnHeader.id);
-            })
-        }, headerGroup.id);
-    });
+                }, columnHeader.id))
+        }, headerGroup.id));
     return /*#__PURE__*/ _jsx(_Fragment, {
         children: headers
     });
 };
-var RowLayoutBody = function(_param) {
-    var table = _param.table, doubleClickAction = _param.doubleClickAction, getExpandChildren = _param.getExpandChildren, loading = _param.loading, keepSelection = _param.keepSelection, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, others = _object_without_properties(_param, [
-        "table",
-        "doubleClickAction",
-        "getExpandChildren",
-        "loading",
-        "keepSelection",
-        "classNames",
-        "styles",
-        "unstyled"
-    ]);
-    var _useTable = useTable(), multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, disableRowSelection = _useTable.disableRowSelection;
-    var _useStyles = useStyles({
-        disableRowSelection: disableRowSelection,
-        multiRowSelectionEnabled: multiRowSelectionEnabled
+const RowLayoutBody = ({ table, doubleClickAction, getExpandChildren, loading, keepSelection, classNames, styles, unstyled, ...others })=>{
+    const { multiRowSelectionEnabled, disableRowSelection } = useTable();
+    const { classes, cx } = useStyles({
+        disableRowSelection,
+        multiRowSelectionEnabled
     }, {
-        name: "RowLayout",
-        classNames: classNames,
-        styles: styles,
-        unstyled: unstyled
-    }), classes = _useStyles.classes, cx = _useStyles.cx;
-    var toggleCollapsible = function(el) {
-        var cell = el.children[el.children.length - 1];
-        cell.querySelector("button").click();
+        name: 'RowLayout',
+        classNames,
+        styles,
+        unstyled
+    });
+    const toggleCollapsible = (el)=>{
+        const cell = el.children[el.children.length - 1];
+        cell.querySelector('button').click();
     };
-    var rows = table.getRowModel().rows.map(function(row) {
-        var _getExpandChildren;
-        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) {
+    const rows = table.getRowModel().rows.map((row)=>{
+        const rowChildren = getExpandChildren?.(row.original) ?? null;
+        const isSelected = !!row.getIsSelected();
+        const shouldKeepSelection = keepSelection && isSelected;
+        const onClick = (event)=>{
             if (rowChildren) {
                 toggleCollapsible(event.currentTarget);
             }
@@ -79,39 +58,40 @@ var RowLayoutBody = function(_param) {
                 row.toggleSelected();
             }
         };
-        var _obj;
         return /*#__PURE__*/ _jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ _jsx("tr", {
                     onClick: onClick,
-                    onDoubleClick: function() {
-                        var _doubleClickAction;
-                        return (_doubleClickAction = doubleClickAction) === null || _doubleClickAction === void 0 ? void 0 : _doubleClickAction(row.original);
-                    },
-                    className: cx(classes.row, (_obj = {}, _define_property(_obj, classes.rowSelected, isSelected), _define_property(_obj, classes.rowUnselectable, disableRowSelection), _obj)),
+                    onDoubleClick: ()=>doubleClickAction?.(row.original),
+                    className: cx(classes.row, {
+                        [classes.rowSelected]: isSelected,
+                        [classes.rowUnselectable]: disableRowSelection
+                    }),
                     "aria-selected": isSelected,
                     "data-testid": row.id,
-                    children: row.getVisibleCells().map(function(cell) {
-                        var columnSizing = _object_spread_props(_object_spread({}, defaultColumnSizing), {
+                    children: row.getVisibleCells().map((cell)=>{
+                        const columnSizing = {
+                            ...defaultColumnSizing,
                             size: cell.column.columnDef.size,
                             minSize: cell.column.columnDef.minSize,
                             maxSize: cell.column.columnDef.maxSize
-                        });
-                        var onCollapsibleCellClick = function(event) {
+                        };
+                        const onCollapsibleCellClick = (event)=>{
                             if (cell.column.id === TableSelectableColumn.id && !disableRowSelection) {
                                 event.stopPropagation();
                                 row.getToggleSelectedHandler();
                             }
                         };
-                        var _columnSizing_size;
                         return /*#__PURE__*/ _jsx("td", {
                             "data-testid": cell.id,
                             style: {
-                                width: (_columnSizing_size = columnSizing.size) !== null && _columnSizing_size !== void 0 ? _columnSizing_size : "auto",
+                                width: columnSizing.size ?? 'auto',
                                 minWidth: columnSizing.minSize,
                                 maxWidth: columnSizing.maxSize
                             },
-                            className: cx(classes.cell, _define_property({}, classes.rowCollapsibleButtonCell, cell.column.id === TableCollapsibleColumn.id)),
+                            className: cx(classes.cell, {
+                                [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id
+                            }),
                             onClick: onCollapsibleCellClick,
                             children: /*#__PURE__*/ _jsx(TableLoading, {
                                 visible: loading,
@@ -144,8 +124,8 @@ var RowLayoutBody = function(_param) {
         children: rows
     });
 };
-export var RowLayout = {
-    name: "Rows",
+export const RowLayout = {
+    name: 'Rows',
     icon: ListSize16Px,
     Header: RowLayoutHeader,
     Body: RowLayoutBody

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} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment, type MouseEvent} from 'react';\nimport {TableLayout} from '../Table.types';\nimport {useTable} from '../TableContext';\nimport {TableCollapsibleColumn} from '../table-column/TableCollapsibleColumn';\nimport {TableSelectableColumn} from '../table-column/TableSelectableColumn';\nimport {Th} from '../table-header/Th';\nimport {TableLoading} from '../table-loading/TableLoading';\nimport useStyles from './RowLayout.styles';\nimport {TableLayoutProps} from './RowLayout.types'; // TODO https://coveord.atlassian.net/browse/ADUI-9182\n\nconst RowLayoutHeader = <T,>({table, classNames, styles, unstyled}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes} = useStyles(\n        {disableRowSelection, multiRowSelectionEnabled},\n        {name: 'RowLayout', classNames, styles, unstyled},\n    );\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    classNames,\n    styles,\n    unstyled,\n    ...others\n}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes, cx} = useStyles(\n        {disableRowSelection, multiRowSelectionEnabled},\n        {name: 'RowLayout', classNames, styles, unstyled},\n    );\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 ?? 'auto',\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","flexRender","defaultColumnSizing","Fragment","useTable","TableCollapsibleColumn","TableSelectableColumn","Th","TableLoading","useStyles","RowLayoutHeader","table","classNames","styles","unstyled","multiRowSelectionEnabled","disableRowSelection","classes","name","headers","getHeaderGroups","map","headerGroup","tr","className","headerColumns","columnHeader","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","keepSelection","others","cx","toggleCollapsible","el","cell","children","length","querySelector","click","rows","getRowModel","row","rowChildren","original","isSelected","getIsSelected","shouldKeepSelection","onClick","event","currentTarget","toggleSelected","onDoubleClick","rowSelected","rowUnselectable","aria-selected","data-testid","getVisibleCells","columnSizing","size","column","columnDef","minSize","maxSize","onCollapsibleCellClick","stopPropagation","getToggleSelectedHandler","td","style","width","minWidth","maxWidth","rowCollapsibleButtonCell","visible","getContext","colSpan","getAllColumns","padding","in","getIsExpanded","collapsible","px","py","RowLayout","icon","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} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment, type MouseEvent} from 'react';\nimport {TableLayout} from '../Table.types';\nimport {useTable} from '../TableContext';\nimport {TableCollapsibleColumn} from '../table-column/TableCollapsibleColumn';\nimport {TableSelectableColumn} from '../table-column/TableSelectableColumn';\nimport {Th} from '../table-header/Th';\nimport {TableLoading} from '../table-loading/TableLoading';\nimport useStyles from './RowLayout.styles';\nimport {TableLayoutProps} from './RowLayout.types'; // TODO https://coveord.atlassian.net/browse/ADUI-9182\n\nconst RowLayoutHeader = <T,>({table, classNames, styles, unstyled}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes} = useStyles(\n        {disableRowSelection, multiRowSelectionEnabled},\n        {name: 'RowLayout', classNames, styles, unstyled},\n    );\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    classNames,\n    styles,\n    unstyled,\n    ...others\n}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes, cx} = useStyles(\n        {disableRowSelection, multiRowSelectionEnabled},\n        {name: 'RowLayout', classNames, styles, unstyled},\n    );\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 ?? 'auto',\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","flexRender","defaultColumnSizing","Fragment","useTable","TableCollapsibleColumn","TableSelectableColumn","Th","TableLoading","useStyles","RowLayoutHeader","table","classNames","styles","unstyled","multiRowSelectionEnabled","disableRowSelection","classes","name","headers","getHeaderGroups","map","headerGroup","tr","className","headerColumns","columnHeader","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","keepSelection","others","cx","toggleCollapsible","el","cell","children","length","querySelector","click","rows","getRowModel","row","rowChildren","original","isSelected","getIsSelected","shouldKeepSelection","onClick","event","currentTarget","toggleSelected","onDoubleClick","rowSelected","rowUnselectable","aria-selected","data-testid","getVisibleCells","columnSizing","size","column","columnDef","minSize","maxSize","onCollapsibleCellClick","stopPropagation","getToggleSelectedHandler","td","style","width","minWidth","maxWidth","rowCollapsibleButtonCell","visible","getContext","colSpan","getAllColumns","padding","in","getIsExpanded","collapsible","px","py","RowLayout","icon","Header","Body"],"mappings":"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"}

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

@@ -1,17 +1,16 @@
-import { createStyles, rem } from "@mantine/core";
-export default createStyles(function(theme, param) {
-    var multiRowSelectionEnabled = param.multiRowSelectionEnabled, disableRowSelection = param.disableRowSelection;
-    var rowBackgroundColor = theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];
-    var border = "".concat(rem(1), " solid ").concat(theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]);
+import { createStyles, rem } from '@mantine/core';
+export default createStyles((theme, { multiRowSelectionEnabled, disableRowSelection })=>{
+    const rowBackgroundColor = theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];
+    const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;
     return {
         headerColumns: {
-            "& input[type=checkbox]": {
-                backgroundColor: disableRowSelection ? "".concat(theme.colors.gray[2]) : undefined,
-                borderColor: disableRowSelection ? "".concat(theme.colors.gray[3]) : "".concat(theme.colors.gray[4]),
-                pointerEvents: disableRowSelection ? "none" : "auto",
-                cursor: disableRowSelection ? "not-allowed" : "default",
-                "& + svg": {
-                    color: disableRowSelection ? "".concat(theme.colors.gray[5]) : "inherit"
+            '& input[type=checkbox]': {
+                backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,
+                borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,
+                pointerEvents: disableRowSelection ? 'none' : 'auto',
+                cursor: disableRowSelection ? 'not-allowed' : 'default',
+                '& + svg': {
+                    color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit'
                 }
             }
         },
@@ -19,34 +18,34 @@ export default createStyles(function(theme, param) {
             backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor
         },
         rowUnselectable: {
-            "& input[type=checkbox]": {
-                backgroundColor: "".concat(theme.colors.gray[2]),
-                borderColor: "".concat(theme.colors.gray[3]),
-                pointerEvents: "none",
-                cursor: "not-allowed",
-                "&:checked + svg": {
-                    color: "".concat(theme.colors.gray[5])
+            '& input[type=checkbox]': {
+                backgroundColor: `${theme.colors.gray[2]}`,
+                borderColor: `${theme.colors.gray[3]}`,
+                pointerEvents: 'none',
+                cursor: 'not-allowed',
+                '&:checked + svg': {
+                    color: `${theme.colors.gray[5]}`
                 }
             }
         },
         rowCollapsibleButtonCell: {
-            textAlign: "right",
-            padding: "calc(".concat(theme.spacing.xs, "/2) ").concat(theme.spacing.sm, " !important")
+            textAlign: 'right',
+            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`
         },
         row: {
-            "& td:first-of-type": {
-                paddingLeft: "40px"
+            '& td:first-of-type': {
+                paddingLeft: '40px'
             },
-            "&:hover": {
+            '&:hover': {
                 backgroundColor: rowBackgroundColor
             },
-            overflowWrap: "anywhere"
+            overflowWrap: 'anywhere'
         },
         cell: {
-            verticalAlign: "middle",
+            verticalAlign: 'middle',
             // We must use height instead of minHeight here, otherwise it doesn't apply
-            height: "56px",
-            padding: "".concat(theme.spacing.xs, " ").concat(theme.spacing.sm),
+            height: '56px',
+            padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
             borderBottom: border
         },
         collapsible: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"sourcesContent":["import {createStyles, rem} from '@mantine/core';\nexport interface RowLayoutStylesParams {\n    multiRowSelectionEnabled: boolean;\n    disableRowSelection: boolean;\n}\n\nexport default createStyles<string, RowLayoutStylesParams>((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            '& 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            overflowWrap: 'anywhere',\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"],"names":["createStyles","rem","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","dark","headerColumns","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","paddingLeft","overflowWrap","cell","verticalAlign","height","borderBottom","collapsible"],"mappings":"AAAA,SAAQA,YAAY,EAAEC,GAAG,QAAO,gBAAgB;AAMhD,eAAeD,aAA4C,SAACE;QAAQC,iCAAAA,0BAA0BC,4BAAAA;IAC1F,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,OAAhBD,IAAI,IAAG,WAAoF,OAA3EC,MAAMI,WAAW,KAAK,SAASJ,MAAMO,MAAM,CAACI,IAAI,CAAC,EAAE,GAAGX,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;IAC5G,OAAO;QACHG,eAAe;YACX,0BAA0B;gBACtBC,iBAAiBX,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAKK;gBACnEC,aAAab,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK,AAAC,GAAuB,OAArBT,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACtFO,eAAed,sBAAsB,SAAS;gBAC9Ce,QAAQf,sBAAsB,gBAAgB;gBAE9C,WAAW;oBACPgB,OAAOhB,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,IAAK;gBAC7D;YACJ;QACJ;QAEAU,aAAa;YACTN,iBAAiBZ,2BAA2Ba,YAAYX;QAC5D;QAEAiB,iBAAiB;YACb,0BAA0B;gBACtBP,iBAAiB,AAAC,GAAuB,OAArBb,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACxCM,aAAa,AAAC,GAAuB,OAArBf,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBACpCO,eAAe;gBACfC,QAAQ;gBAER,mBAAmB;oBACfC,OAAO,AAAC,GAAuB,OAArBlB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE;gBAClC;YACJ;QACJ;QAEAY,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BvB,OAAvBA,MAAMwB,OAAO,CAACC,EAAE,EAAC,QAAuB,OAAjBzB,MAAMwB,OAAO,CAACE,EAAE,EAAC;QAC7D;QAEAC,KAAK;YACD,sBAAsB;gBAClBC,aAAa;YACjB;YACA,WAAW;gBACPf,iBAAiBV;YACrB;YACA0B,cAAc;QAClB;QAEAC,MAAM;YACFC,eAAe;YACf,2EAA2E;YAC3EC,QAAQ;YACRT,SAAS,AAAC,GAAsBvB,OAApBA,MAAMwB,OAAO,CAACC,EAAE,EAAC,KAAoB,OAAjBzB,MAAMwB,OAAO,CAACE,EAAE;YAChDO,cAAcvB;QAClB;QAEAwB,aAAa;YACTrB,iBAAiBV;YACjB8B,cAAcvB;QAClB;IACJ;AACJ,GAAG"}
+{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.styles.ts"],"sourcesContent":["import {createStyles, rem} from '@mantine/core';\nexport interface RowLayoutStylesParams {\n    multiRowSelectionEnabled: boolean;\n    disableRowSelection: boolean;\n}\n\nexport default createStyles<string, RowLayoutStylesParams>((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            '& 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            overflowWrap: 'anywhere',\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"],"names":["createStyles","rem","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","dark","headerColumns","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","paddingLeft","overflowWrap","cell","verticalAlign","height","borderBottom","collapsible"],"mappings":"AAAA,SAAQA,YAAY,EAAEC,GAAG,QAAO,gBAAgB;AAMhD,eAAeD,aAA4C,CAACE,OAAO,EAACC,wBAAwB,EAAEC,mBAAmB,EAAC;IAC9G,MAAMC,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,MAAMC,SAAS,CAAC,EAAEX,IAAI,GAAG,OAAO,EAAEC,MAAMI,WAAW,KAAK,SAASJ,MAAMO,MAAM,CAACI,IAAI,CAAC,EAAE,GAAGX,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9G,OAAO;QACHG,eAAe;YACX,0BAA0B;gBACtBC,iBAAiBX,sBAAsB,CAAC,EAAEF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,CAAC,CAAC,GAAGK;gBACnEC,aAAab,sBAAsB,CAAC,EAAEF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,EAAET,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,CAAC,CAAC;gBACxFO,eAAed,sBAAsB,SAAS;gBAC9Ce,QAAQf,sBAAsB,gBAAgB;gBAE9C,WAAW;oBACPgB,OAAOhB,sBAAsB,CAAC,EAAEF,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG;gBAC7D;YACJ;QACJ;QAEAU,aAAa;YACTN,iBAAiBZ,2BAA2Ba,YAAYX;QAC5D;QAEAiB,iBAAiB;YACb,0BAA0B;gBACtBP,iBAAiB,CAAC,EAAEb,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,CAAC,CAAC;gBAC1CM,aAAa,CAAC,EAAEf,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,CAAC,CAAC;gBACtCO,eAAe;gBACfC,QAAQ;gBAER,mBAAmB;oBACfC,OAAO,CAAC,EAAElB,MAAMO,MAAM,CAACE,IAAI,CAAC,EAAE,CAAC,CAAC;gBACpC;YACJ;QACJ;QAEAY,0BAA0B;YACtBC,WAAW;YACXC,SAAS,CAAC,KAAK,EAAEvB,MAAMwB,OAAO,CAACC,EAAE,CAAC,IAAI,EAAEzB,MAAMwB,OAAO,CAACE,EAAE,CAAC,WAAW,CAAC;QACzE;QAEAC,KAAK;YACD,sBAAsB;gBAClBC,aAAa;YACjB;YACA,WAAW;gBACPf,iBAAiBV;YACrB;YACA0B,cAAc;QAClB;QAEAC,MAAM;YACFC,eAAe;YACf,2EAA2E;YAC3EC,QAAQ;YACRT,SAAS,CAAC,EAAEvB,MAAMwB,OAAO,CAACC,EAAE,CAAC,CAAC,EAAEzB,MAAMwB,OAAO,CAACE,EAAE,CAAC,CAAC;YAClDO,cAAcvB;QAClB;QAEAwB,aAAa;YACTrB,iBAAiBV;YACjB8B,cAAcvB;QAClB;IACJ;AACJ,GAAG"}

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

@@ -1,18 +1,15 @@
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Center, Grid, SegmentedControl, Space } from "@mantine/core";
-import { TableComponentsOrder } from "../Table.styles";
-import { useTable } from "../TableContext";
-export var TableLayoutControl = function() {
-    var _useTable = useTable(), form = _useTable.form, layouts = _useTable.layouts;
+import { Box, Center, Grid, SegmentedControl, Space } from '@mantine/core';
+import { TableComponentsOrder } from '../Table.styles';
+import { useTable } from '../TableContext';
+export const TableLayoutControl = ()=>{
+    const { form, layouts } = useTable();
     return layouts.length > 1 ? /*#__PURE__*/ _jsx(Grid.Col, {
         order: TableComponentsOrder.LayoutControl,
         span: "content",
-        children: /*#__PURE__*/ _jsx(SegmentedControl, _object_spread({
+        children: /*#__PURE__*/ _jsx(SegmentedControl, {
             color: "action",
-            data: layouts.map(function(param) {
-                var name = param.name, Icon = param.icon;
-                return {
+            data: layouts.map(({ name, icon: Icon })=>({
                     value: name,
                     label: /*#__PURE__*/ _jsxs(Center, {
                         children: [
@@ -31,9 +28,9 @@ export var TableLayoutControl = function() {
                             })
                         ]
                     })
-                };
-            })
-        }, form.getInputProps("layout")))
+                })),
+            ...form.getInputProps('layout')
+        })
     }) : null;
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/layouts/TableLayoutControl.tsx"],"sourcesContent":["import {Box, Center, Grid, SegmentedControl, Space} from '@mantine/core';\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\n\nexport const TableLayoutControl = () => {\n    const {form, layouts} = useTable();\n    return layouts.length > 1 ? (\n        <Grid.Col order={TableComponentsOrder.LayoutControl} span=\"content\">\n            <SegmentedControl\n                color=\"action\"\n                data={layouts.map(({name, icon: Icon}) => ({\n                    value: name,\n                    label: (\n                        <Center>\n                            {Icon ? (\n                                <>\n                                    <Icon height={16} />\n                                    <Space w=\"xs\" />\n                                </>\n                            ) : null}\n                            <Box>{name}</Box>\n                        </Center>\n                    ),\n                }))}\n                {...form.getInputProps('layout')}\n            />\n        </Grid.Col>\n    ) : null;\n};\n"],"names":["Box","Center","Grid","SegmentedControl","Space","TableComponentsOrder","useTable","TableLayoutControl","form","layouts","length","Col","order","LayoutControl","span","color","data","map","name","icon","Icon","value","label","height","w","getInputProps"],"mappings":";;AAAA,SAAQA,GAAG,EAAEC,MAAM,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,KAAK,QAAO,gBAAgB;AACzE,SAAQC,oBAAoB,QAAO,kBAAkB;AACrD,SAAQC,QAAQ,QAAO,kBAAkB;AAEzC,OAAO,IAAMC,qBAAqB;IAC9B,IAAwBD,YAAAA,YAAjBE,OAAiBF,UAAjBE,MAAMC,UAAWH,UAAXG;IACb,OAAOA,QAAQC,MAAM,GAAG,kBACpB,KAACR,KAAKS,GAAG;QAACC,OAAOP,qBAAqBQ,aAAa;QAAEC,MAAK;kBACtD,cAAA,KAACX;YACGY,OAAM;YACNC,MAAMP,QAAQQ,GAAG,CAAC;oBAAEC,aAAAA,MAAMC,AAAMC,aAAND;uBAAiB;oBACvCE,OAAOH;oBACPI,qBACI,MAACrB;;4BACImB,qBACG;;kDACI,KAACA;wCAAKG,QAAQ;;kDACd,KAACnB;wCAAMoB,GAAE;;;iCAEb;0CACJ,KAACxB;0CAAKkB;;;;gBAGlB;;WACIV,KAAKiB,aAAa,CAAC;SAG/B;AACR,EAAE"}
+{"version":3,"sources":["../../../../../src/components/table/layouts/TableLayoutControl.tsx"],"sourcesContent":["import {Box, Center, Grid, SegmentedControl, Space} from '@mantine/core';\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\n\nexport const TableLayoutControl = () => {\n    const {form, layouts} = useTable();\n    return layouts.length > 1 ? (\n        <Grid.Col order={TableComponentsOrder.LayoutControl} span=\"content\">\n            <SegmentedControl\n                color=\"action\"\n                data={layouts.map(({name, icon: Icon}) => ({\n                    value: name,\n                    label: (\n                        <Center>\n                            {Icon ? (\n                                <>\n                                    <Icon height={16} />\n                                    <Space w=\"xs\" />\n                                </>\n                            ) : null}\n                            <Box>{name}</Box>\n                        </Center>\n                    ),\n                }))}\n                {...form.getInputProps('layout')}\n            />\n        </Grid.Col>\n    ) : null;\n};\n"],"names":["Box","Center","Grid","SegmentedControl","Space","TableComponentsOrder","useTable","TableLayoutControl","form","layouts","length","Col","order","LayoutControl","span","color","data","map","name","icon","Icon","value","label","height","w","getInputProps"],"mappings":";AAAA,SAAQA,GAAG,EAAEC,MAAM,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,KAAK,QAAO,gBAAgB;AACzE,SAAQC,oBAAoB,QAAO,kBAAkB;AACrD,SAAQC,QAAQ,QAAO,kBAAkB;AAEzC,OAAO,MAAMC,qBAAqB;IAC9B,MAAM,EAACC,IAAI,EAAEC,OAAO,EAAC,GAAGH;IACxB,OAAOG,QAAQC,MAAM,GAAG,kBACpB,KAACR,KAAKS,GAAG;QAACC,OAAOP,qBAAqBQ,aAAa;QAAEC,MAAK;kBACtD,cAAA,KAACX;YACGY,OAAM;YACNC,MAAMP,QAAQQ,GAAG,CAAC,CAAC,EAACC,IAAI,EAAEC,MAAMC,IAAI,EAAC,GAAM,CAAA;oBACvCC,OAAOH;oBACPI,qBACI,MAACrB;;4BACImB,qBACG;;kDACI,KAACA;wCAAKG,QAAQ;;kDACd,KAACnB;wCAAMoB,GAAE;;;iCAEb;0CACJ,KAACxB;0CAAKkB;;;;gBAGlB,CAAA;YACC,GAAGV,KAAKiB,aAAa,CAAC,SAAS;;SAGxC;AACR,EAAE"}

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

@@ -1,5 +1,5 @@
-import { RowLayout } from "./RowLayout";
-export var TableLayouts = {
+import { RowLayout } from './RowLayout';
+export const TableLayouts = {
     Rows: RowLayout
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/layouts/TableLayouts.tsx"],"sourcesContent":["import {RowLayout} from './RowLayout';\n\nexport const TableLayouts = {\n    Rows: RowLayout,\n};\n"],"names":["RowLayout","TableLayouts","Rows"],"mappings":"AAAA,SAAQA,SAAS,QAAO,cAAc;AAEtC,OAAO,IAAMC,eAAe;IACxBC,MAAMF;AACV,EAAE"}
+{"version":3,"sources":["../../../../../src/components/table/layouts/TableLayouts.tsx"],"sourcesContent":["import {RowLayout} from './RowLayout';\n\nexport const TableLayouts = {\n    Rows: RowLayout,\n};\n"],"names":["RowLayout","TableLayouts","Rows"],"mappings":"AAAA,SAAQA,SAAS,QAAO,cAAc;AAEtC,OAAO,MAAMC,eAAe;IACxBC,MAAMF;AACV,EAAE"}

package/dist/esm/components/table/table-actions/TableActions.js

@@ -1,41 +1,32 @@
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
-import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Grid, Group } from "@mantine/core";
-import { TableComponentsOrder } from "../Table.styles";
-import { useTable } from "../TableContext";
-import useStyles from "./TableActions.styles";
-export var TableActions = function(_param) {
-    var children = _param.children, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, others = _object_without_properties(_param, [
-        "children",
-        "classNames",
-        "styles",
-        "unstyled"
-    ]);
-    var classes = useStyles(null, {
-        name: "TableActions",
-        classNames: classNames,
-        styles: styles,
-        unstyled: unstyled
-    }).classes;
-    var _useTable = useTable(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled;
-    var selectedRows = getSelectedRows();
+import { Grid, Group } from '@mantine/core';
+import { TableComponentsOrder } from '../Table.styles';
+import { useTable } from '../TableContext';
+import useStyles from './TableActions.styles';
+export const TableActions = ({ children, classNames, styles, unstyled, ...others })=>{
+    const { classes } = useStyles(null, {
+        name: 'TableActions',
+        classNames,
+        styles,
+        unstyled
+    });
+    const { getSelectedRows, multiRowSelectionEnabled } = useTable();
+    const selectedRows = getSelectedRows();
     if (selectedRows.length <= 0) {
         return null;
     }
-    return /*#__PURE__*/ _jsx(Grid.Col, _object_spread_props(_object_spread({
+    return /*#__PURE__*/ _jsx(Grid.Col, {
         span: "content",
         order: TableComponentsOrder.Actions,
         py: "sm",
-        className: classes.root
-    }, others), {
+        className: classes.root,
+        ...others,
         children: /*#__PURE__*/ _jsx(Group, {
             spacing: "xs",
             className: classes.wrapper,
             children: multiRowSelectionEnabled ? children(selectedRows) : children(selectedRows[0])
         })
-    }));
+    });
 };
 
 //# sourceMappingURL=TableActions.js.map

package/dist/esm/components/table/table-actions/TableActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-actions/TableActions.tsx"],"sourcesContent":["import {Grid, Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\n\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableActions.styles';\nimport {TableActionsProps} from './TableActions.types';\n\nexport const TableActions = <T,>({\n    children,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}: TableActionsProps<T>): ReactElement => {\n    const {classes} = useStyles(null, {name: 'TableActions', classNames, styles, unstyled});\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Actions} py=\"sm\" className={classes.root} {...others}>\n            <Group spacing=\"xs\" className={classes.wrapper}>\n                {multiRowSelectionEnabled\n                    ? (children as (data: T[]) => ReactNode)(selectedRows)\n                    : (children as (datum: T) => ReactNode)(selectedRows[0])}\n            </Group>\n        </Grid.Col>\n    );\n};\n"],"names":["Grid","Group","TableComponentsOrder","useTable","useStyles","TableActions","children","classNames","styles","unstyled","others","classes","name","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","Col","span","order","Actions","py","className","root","spacing","wrapper"],"mappings":";;;;AAAA,SAAQA,IAAI,EAAEC,KAAK,QAAO,gBAAgB;AAG1C,SAAQC,oBAAoB,QAAO,kBAAkB;AACrD,SAAQC,QAAQ,QAAO,kBAAkB;AACzC,OAAOC,eAAe,wBAAwB;AAG9C,OAAO,IAAMC,eAAe;QACxBC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWP,UAAU,MAAM;QAACQ,MAAM;QAAgBL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA9EE;IACP,IAAoDR,YAAAA,YAA7CU,kBAA6CV,UAA7CU,iBAAiBC,2BAA4BX,UAA5BW;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO;IACX;IAEA,qBACI,KAAChB,KAAKiB,GAAG;QAACC,MAAK;QAAUC,OAAOjB,qBAAqBkB,OAAO;QAAEC,IAAG;QAAKC,WAAWX,QAAQY,IAAI;OAAMb;kBAC/F,cAAA,KAACT;YAAMuB,SAAQ;YAAKF,WAAWX,QAAQc,OAAO;sBACzCX,2BACK,AAACR,SAAsCS,gBACvC,AAACT,SAAqCS,YAAY,CAAC,EAAE;;;AAI3E,EAAE"}
+{"version":3,"sources":["../../../../../src/components/table/table-actions/TableActions.tsx"],"sourcesContent":["import {Grid, Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\n\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableActions.styles';\nimport {TableActionsProps} from './TableActions.types';\n\nexport const TableActions = <T,>({\n    children,\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}: TableActionsProps<T>): ReactElement => {\n    const {classes} = useStyles(null, {name: 'TableActions', classNames, styles, unstyled});\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Actions} py=\"sm\" className={classes.root} {...others}>\n            <Group spacing=\"xs\" className={classes.wrapper}>\n                {multiRowSelectionEnabled\n                    ? (children as (data: T[]) => ReactNode)(selectedRows)\n                    : (children as (datum: T) => ReactNode)(selectedRows[0])}\n            </Group>\n        </Grid.Col>\n    );\n};\n"],"names":["Grid","Group","TableComponentsOrder","useTable","useStyles","TableActions","children","classNames","styles","unstyled","others","classes","name","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","Col","span","order","Actions","py","className","root","spacing","wrapper"],"mappings":";AAAA,SAAQA,IAAI,EAAEC,KAAK,QAAO,gBAAgB;AAG1C,SAAQC,oBAAoB,QAAO,kBAAkB;AACrD,SAAQC,QAAQ,QAAO,kBAAkB;AACzC,OAAOC,eAAe,wBAAwB;AAG9C,OAAO,MAAMC,eAAe,CAAK,EAC7BC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACR,GAAGC,QACgB;IACnB,MAAM,EAACC,OAAO,EAAC,GAAGP,UAAU,MAAM;QAACQ,MAAM;QAAgBL;QAAYC;QAAQC;IAAQ;IACrF,MAAM,EAACI,eAAe,EAAEC,wBAAwB,EAAC,GAAGX;IACpD,MAAMY,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO;IACX;IAEA,qBACI,KAAChB,KAAKiB,GAAG;QAACC,MAAK;QAAUC,OAAOjB,qBAAqBkB,OAAO;QAAEC,IAAG;QAAKC,WAAWX,QAAQY,IAAI;QAAG,GAAGb,MAAM;kBACrG,cAAA,KAACT;YAAMuB,SAAQ;YAAKF,WAAWX,QAAQc,OAAO;sBACzCX,2BACK,AAACR,SAAsCS,gBACvC,AAACT,SAAqCS,YAAY,CAAC,EAAE;;;AAI3E,EAAE"}

package/dist/esm/components/table/table-actions/TableActions.styles.js

@@ -1,13 +1,11 @@
-import { createStyles } from "@mantine/core";
-export default createStyles(function(theme) {
-    return {
+import { createStyles } from '@mantine/core';
+export default createStyles((theme)=>({
         root: {
-            maxWidth: "100%"
+            maxWidth: '100%'
         },
         wrapper: {
-            display: "inline-flex"
+            display: 'inline-flex'
         }
-    };
-});
+    }));
 
 //# sourceMappingURL=TableActions.styles.js.map

package/dist/esm/components/table/table-actions/TableActions.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-actions/TableActions.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport default createStyles((theme) => ({\n    root: {maxWidth: '100%'},\n    wrapper: {\n        display: 'inline-flex',\n    },\n}));\n"],"names":["createStyles","theme","root","maxWidth","wrapper","display"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAE3C,eAAeA,aAAa,SAACC;WAAW;QACpCC,MAAM;YAACC,UAAU;QAAM;QACvBC,SAAS;YACLC,SAAS;QACb;IACJ;GAAI"}
+{"version":3,"sources":["../../../../../src/components/table/table-actions/TableActions.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport default createStyles((theme) => ({\n    root: {maxWidth: '100%'},\n    wrapper: {\n        display: 'inline-flex',\n    },\n}));\n"],"names":["createStyles","theme","root","maxWidth","wrapper","display"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAE3C,eAAeA,aAAa,CAACC,QAAW,CAAA;QACpCC,MAAM;YAACC,UAAU;QAAM;QACvBC,SAAS;YACLC,SAAS;QACb;IACJ,CAAA,GAAI"}

package/dist/esm/components/table/table-column/TableCollapsibleColumn.js

@@ -1,28 +1,26 @@
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ArrowHeadDownSize24Px, ArrowHeadUpSize24Px } from "@coveord/plasma-react-icons";
-import { ActionIcon } from "@mantine/core";
-var defaultProps = {
-    id: "collapsible",
+import { ArrowHeadDownSize24Px, ArrowHeadUpSize24Px } from '@coveord/plasma-react-icons';
+import { ActionIcon } from '@mantine/core';
+const defaultProps = {
+    id: 'collapsible',
     enableSorting: false,
-    header: "",
+    header: '',
     size: 62
 };
 /**
  * Generic column to use when your table needs collapsible rows
- */ export var TableCollapsibleColumn = _object_spread_props(_object_spread({}, defaultProps), {
-    cell: function(info) {
-        return /*#__PURE__*/ _jsx(CollapsibleIcon, {
+ */ export const TableCollapsibleColumn = {
+    ...defaultProps,
+    cell: (info)=>/*#__PURE__*/ _jsx(CollapsibleIcon, {
             info: info
-        });
-    }
-});
+        })
+};
 /**
  * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)
- */ export var TableAccordionColumn = _object_spread_props(_object_spread({}, defaultProps), {
-    cell: function(info) {
-        var onToggle = function() {
+ */ export const TableAccordionColumn = {
+    ...defaultProps,
+    cell: (info)=>{
+        const onToggle = ()=>{
             // close all other rows when the current row not is expanded
             if (!info.row.getIsExpanded()) {
                 info.table.toggleAllRowsExpanded(false);
@@ -33,14 +31,12 @@ var defaultProps = {
             info: info
         });
     }
-});
-var CollapsibleIcon = function(param) {
-    var info = param.info, onToggle = param.onToggle;
-    var handler = info.row.getToggleExpandedHandler();
-    var onClick = function(e) {
-        var _onToggle;
+};
+const CollapsibleIcon = ({ info, onToggle })=>{
+    const handler = info.row.getToggleExpandedHandler();
+    const onClick = (e)=>{
         e.stopPropagation();
-        (_onToggle = onToggle) === null || _onToggle === void 0 ? void 0 : _onToggle(e);
+        onToggle?.(e);
         handler();
     };
     return info.row.getCanExpand() ? /*#__PURE__*/ _jsx(ActionIcon, {

package/dist/esm/components/table/table-column/TableCollapsibleColumn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/table-column/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {FunctionComponent, MouseEvent as ReactMouseEvent} from 'react';\n\nconst defaultProps: ColumnDef<unknown> = {\n    id: 'collapsible',\n    enableSorting: false,\n    header: '',\n    size: 62,\n};\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    ...defaultProps,\n    cell: (info) => <CollapsibleIcon info={info} />,\n};\n\n/**\n * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)\n */\nexport const TableAccordionColumn: ColumnDef<unknown> = {\n    ...defaultProps,\n    cell: (info) => {\n        const onToggle = () => {\n            // close all other rows when the current row not is expanded\n            if (!info.row.getIsExpanded()) {\n                info.table.toggleAllRowsExpanded(false);\n            }\n        };\n\n        return <CollapsibleIcon onToggle={onToggle} info={info} />;\n    },\n};\n\nconst CollapsibleIcon: FunctionComponent<{\n    info: CellContext<unknown, unknown>;\n    onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;\n}> = ({info, onToggle}) => {\n    const handler = info.row.getToggleExpandedHandler();\n    const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        onToggle?.(e);\n        handler();\n    };\n    return info.row.getCanExpand() ? (\n        <ActionIcon onClick={onClick} variant=\"subtle\" radius=\"sm\">\n            {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n        </ActionIcon>\n    ) : null;\n};\n"],"names":["ArrowHeadDownSize24Px","ArrowHeadUpSize24Px","ActionIcon","defaultProps","id","enableSorting","header","size","TableCollapsibleColumn","cell","info","CollapsibleIcon","TableAccordionColumn","onToggle","row","getIsExpanded","table","toggleAllRowsExpanded","handler","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","variant","radius"],"mappings":";;;AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,UAAU,QAAO,gBAAgB;AAIzC,IAAMC,eAAmC;IACrCC,IAAI;IACJC,eAAe;IACfC,QAAQ;IACRC,MAAM;AACV;AAEA;;CAEC,GACD,OAAO,IAAMC,yBAA6C,wCACnDL;IACHM,MAAM,SAACC;6BAAS,KAACC;YAAgBD,MAAMA;;;GACzC;AAEF;;CAEC,GACD,OAAO,IAAME,uBAA2C,wCACjDT;IACHM,MAAM,SAACC;QACH,IAAMG,WAAW;YACb,4DAA4D;YAC5D,IAAI,CAACH,KAAKI,GAAG,CAACC,aAAa,IAAI;gBAC3BL,KAAKM,KAAK,CAACC,qBAAqB,CAAC;YACrC;QACJ;QAEA,qBAAO,KAACN;YAAgBE,UAAUA;YAAUH,MAAMA;;IACtD;GACF;AAEF,IAAMC,kBAGD;QAAED,aAAAA,MAAMG,iBAAAA;IACT,IAAMK,UAAUR,KAAKI,GAAG,CAACK,wBAAwB;IACjD,IAAMC,UAAU,SAACC;YAEbR;QADAQ,EAAEC,eAAe;SACjBT,YAAAA,sBAAAA,gCAAAA,UAAWQ;QACXH;IACJ;IACA,OAAOR,KAAKI,GAAG,CAACS,YAAY,mBACxB,KAACrB;QAAWkB,SAASA;QAASI,SAAQ;QAASC,QAAO;kBACjDf,KAAKI,GAAG,CAACC,aAAa,mBAAK,KAACd,yCAAyB,KAACD;SAE3D;AACR"}
+{"version":3,"sources":["../../../../../src/components/table/table-column/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {FunctionComponent, MouseEvent as ReactMouseEvent} from 'react';\n\nconst defaultProps: ColumnDef<unknown> = {\n    id: 'collapsible',\n    enableSorting: false,\n    header: '',\n    size: 62,\n};\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    ...defaultProps,\n    cell: (info) => <CollapsibleIcon info={info} />,\n};\n\n/**\n * Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)\n */\nexport const TableAccordionColumn: ColumnDef<unknown> = {\n    ...defaultProps,\n    cell: (info) => {\n        const onToggle = () => {\n            // close all other rows when the current row not is expanded\n            if (!info.row.getIsExpanded()) {\n                info.table.toggleAllRowsExpanded(false);\n            }\n        };\n\n        return <CollapsibleIcon onToggle={onToggle} info={info} />;\n    },\n};\n\nconst CollapsibleIcon: FunctionComponent<{\n    info: CellContext<unknown, unknown>;\n    onToggle?: (e: ReactMouseEvent<HTMLButtonElement>) => void;\n}> = ({info, onToggle}) => {\n    const handler = info.row.getToggleExpandedHandler();\n    const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n        e.stopPropagation();\n        onToggle?.(e);\n        handler();\n    };\n    return info.row.getCanExpand() ? (\n        <ActionIcon onClick={onClick} variant=\"subtle\" radius=\"sm\">\n            {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n        </ActionIcon>\n    ) : null;\n};\n"],"names":["ArrowHeadDownSize24Px","ArrowHeadUpSize24Px","ActionIcon","defaultProps","id","enableSorting","header","size","TableCollapsibleColumn","cell","info","CollapsibleIcon","TableAccordionColumn","onToggle","row","getIsExpanded","table","toggleAllRowsExpanded","handler","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","variant","radius"],"mappings":";AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,UAAU,QAAO,gBAAgB;AAIzC,MAAMC,eAAmC;IACrCC,IAAI;IACJC,eAAe;IACfC,QAAQ;IACRC,MAAM;AACV;AAEA;;CAEC,GACD,OAAO,MAAMC,yBAA6C;IACtD,GAAGL,YAAY;IACfM,MAAM,CAACC,qBAAS,KAACC;YAAgBD,MAAMA;;AAC3C,EAAE;AAEF;;CAEC,GACD,OAAO,MAAME,uBAA2C;IACpD,GAAGT,YAAY;IACfM,MAAM,CAACC;QACH,MAAMG,WAAW;YACb,4DAA4D;YAC5D,IAAI,CAACH,KAAKI,GAAG,CAACC,aAAa,IAAI;gBAC3BL,KAAKM,KAAK,CAACC,qBAAqB,CAAC;YACrC;QACJ;QAEA,qBAAO,KAACN;YAAgBE,UAAUA;YAAUH,MAAMA;;IACtD;AACJ,EAAE;AAEF,MAAMC,kBAGD,CAAC,EAACD,IAAI,EAAEG,QAAQ,EAAC;IAClB,MAAMK,UAAUR,KAAKI,GAAG,CAACK,wBAAwB;IACjD,MAAMC,UAAU,CAACC;QACbA,EAAEC,eAAe;QACjBT,WAAWQ;QACXH;IACJ;IACA,OAAOR,KAAKI,GAAG,CAACS,YAAY,mBACxB,KAACrB;QAAWkB,SAASA;QAASI,SAAQ;QAASC,QAAO;kBACjDf,KAAKI,GAAG,CAACC,aAAa,mBAAK,KAACd,yCAAyB,KAACD;SAE3D;AACR"}