@coveord/plasma-mantine 52.1.0 → 52.2.0

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

@@ -8,37 +8,37 @@ Object.defineProperty(exports, "Table", {
         return Table;
     }
 });
-var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
-var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _jsxRuntime = require("react/jsx-runtime");
+var _define_property = require("@swc/helpers/_/_define_property");
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _jsxruntime = require("react/jsx-runtime");
 var _core = require("@mantine/core");
 var _form = require("@mantine/form");
 var _hooks = require("@mantine/hooks");
-var _reactTable = require("@tanstack/react-table");
-var _lodashDebounce = /*#__PURE__*/ _interopRequireDefault(require("lodash.debounce"));
-var _lodashDefaultsdeep = /*#__PURE__*/ _interopRequireDefault(require("lodash.defaultsdeep"));
+var _reacttable = require("@tanstack/react-table");
+var _lodashdebounce = /*#__PURE__*/ _interop_require_default._(require("lodash.debounce"));
+var _lodashdefaultsdeep = /*#__PURE__*/ _interop_require_default._(require("lodash.defaultsdeep"));
 var _react = require("react");
-var _tableStyles = /*#__PURE__*/ _interopRequireDefault(require("./Table.styles"));
-var _tableActions = require("./TableActions");
-var _tableCollapsibleColumn = require("./TableCollapsibleColumn");
-var _tableContext = require("./TableContext");
-var _tableDateRangePicker = require("./TableDateRangePicker");
-var _tableFilter = require("./TableFilter");
-var _tableFooter = require("./TableFooter");
-var _tableHeader = require("./TableHeader");
-var _tablePagination = require("./TablePagination");
-var _tablePerPage = require("./TablePerPage");
-var _tablePredicate = require("./TablePredicate");
-var _tableConsumer = require("./TableConsumer");
-var _tableSelectableColumn = require("./TableSelectableColumn");
-var _th = require("./Th");
+var _Tablestyles = /*#__PURE__*/ _interop_require_default._(require("./Table.styles"));
+var _TableActions = require("./TableActions");
+var _TableCollapsibleColumn = require("./TableCollapsibleColumn");
+var _TableConsumer = require("./TableConsumer");
+var _TableContext = require("./TableContext");
+var _TableDateRangePicker = require("./TableDateRangePicker");
+var _TableFilter = require("./TableFilter");
+var _TableFooter = require("./TableFooter");
+var _TableHeader = require("./TableHeader");
+var _TablePagination = require("./TablePagination");
+var _TablePerPage = require("./TablePerPage");
+var _TablePredicate = require("./TablePredicate");
+var _TableSelectableColumn = require("./TableSelectableColumn");
+var _Th = require("./Th");
 var _useRowSelection = require("./useRowSelection");
 var LoadingSkeleton = function(props) {
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Skeleton, _objectSpreadProps(_objectSpread({
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Skeleton, _object_spread_props._(_object_spread._({
         style: {
             display: "inline-block"
         }
@@ -54,15 +54,15 @@ var Table = function(param) {
     var _form_values, _form_values_dateRange, _form_values_dateRange1;
     var convertedChildren = _react.Children.toArray(children);
     var header = convertedChildren.find(function(child) {
-        return child.type === _tableHeader.TableHeader;
+        return child.type === _TableHeader.TableHeader;
     });
     var footer = convertedChildren.find(function(child) {
-        return child.type === _tableFooter.TableFooter;
+        return child.type === _TableFooter.TableFooter;
     });
     var consumer = convertedChildren.find(function(child) {
-        return child.type === _tableConsumer.TableConsumer;
+        return child.type === _TableConsumer.TableConsumer;
     });
-    var predicates = initialState.predicates, dateRange = initialState.dateRange, initialStateWithoutForm = _objectWithoutProperties(initialState, [
+    var predicates = initialState.predicates, dateRange = initialState.dateRange, initialStateWithoutForm = _object_without_properties._(initialState, [
         "predicates",
         "dateRange"
     ]);
@@ -76,22 +76,21 @@ var Table = function(param) {
             ]
         }
     });
-    var _useStyles = (0, _tableStyles.default)({
-        hasHeader: !!header,
+    var _useStyles = (0, _Tablestyles.default)({
         multiRowSelectionEnabled: multiRowSelectionEnabled
     }), cx = _useStyles.cx, classes = _useStyles.classes;
     var _ref;
-    var table = (0, _reactTable.useReactTable)(_objectSpread({
-        initialState: (0, _lodashDefaultsdeep.default)(initialStateWithoutForm, {
+    var table = (0, _reacttable.useReactTable)(_object_spread._({
+        initialState: (0, _lodashdefaultsdeep.default)(initialStateWithoutForm, {
             pagination: {
-                pageSize: _tablePerPage.TablePerPage.DEFAULT_SIZE
+                pageSize: _TablePerPage.TablePerPage.DEFAULT_SIZE
             }
         }),
         data: data,
         columns: multiRowSelectionEnabled ? [
-            _tableSelectableColumn.TableSelectableColumn
+            _TableSelectableColumn.TableSelectableColumn
         ].concat(columns) : columns,
-        getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+        getCoreRowModel: (0, _reacttable.getCoreRowModel)(),
         manualPagination: (options === null || options === void 0 ? void 0 : options.getPaginationRowModel) === undefined,
         enableMultiRowSelection: !!multiRowSelectionEnabled,
         getRowId: getRowId,
@@ -100,9 +99,9 @@ var Table = function(param) {
         },
         enableRowSelection: !loading
     }, options));
-    var _useState = _slicedToArray((0, _react.useState)(table.initialState), 2), state = _useState[0], setState = _useState[1];
+    var _useState = _sliced_to_array._((0, _react.useState)(table.initialState), 2), state = _useState[0], setState = _useState[1];
     table.setOptions(function(prev) {
-        return _objectSpreadProps(_objectSpread({}, prev), {
+        return _object_spread_props._(_object_spread._({}, prev), {
             state: state,
             onStateChange: setState
         });
@@ -115,11 +114,11 @@ var Table = function(param) {
     var isFiltered = !!state.globalFilter || Object.keys((_form_values_predicates = (_form_values = form.values) === null || _form_values === void 0 ? void 0 : _form_values.predicates) !== null && _form_values_predicates !== void 0 ? _form_values_predicates : {}).some(function(predicate) {
         return !!form.values.predicates[predicate];
     }) || !!((_form_values_dateRange = form.values.dateRange) === null || _form_values_dateRange === void 0 ? void 0 : _form_values_dateRange[0]) || !!((_form_values_dateRange1 = form.values.dateRange) === null || _form_values_dateRange1 === void 0 ? void 0 : _form_values_dateRange1[1]);
-    var triggerChange = (0, _lodashDebounce.default)(function() {
-        return onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread({}, state, form.values));
+    var triggerChange = (0, _lodashdebounce.default)(function() {
+        return onChange === null || onChange === void 0 ? void 0 : onChange(_object_spread._({}, state, form.values));
     }, 500);
     (0, _react.useEffect)(function() {
-        onMount === null || onMount === void 0 ? void 0 : onMount(_objectSpread({}, state, form.values));
+        onMount === null || onMount === void 0 ? void 0 : onMount(_object_spread._({}, state, form.values));
         return function() {
             triggerChange.cancel();
         };
@@ -139,60 +138,60 @@ var Table = function(param) {
         var _initialState_predicates;
         form.setFieldValue("predicates", (_initialState_predicates = initialState.predicates) !== null && _initialState_predicates !== void 0 ? _initialState_predicates : {});
         setState(function(prevState) {
-            return _objectSpreadProps(_objectSpread({}, prevState), {
+            return _object_spread_props._(_object_spread._({}, prevState), {
                 globalFilter: ""
             });
         });
     }, []);
     if (!data) {
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Center, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Center, {
             sx: {
                 flexGrow: 1
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Loader, {})
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Loader, {})
         });
     }
     var rows = table.getRowModel().rows.map(function(row) {
         var _getExpandChildren;
         var rowChildren = (_getExpandChildren = getExpandChildren === null || getExpandChildren === void 0 ? void 0 : getExpandChildren(row.original)) !== null && _getExpandChildren !== void 0 ? _getExpandChildren : null;
         var isSelected = !!row.getIsSelected();
-        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_react.Fragment, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
                     onClick: function() {
                         return row.toggleSelected();
                     },
                     onDoubleClick: function() {
                         return doubleClickAction === null || doubleClickAction === void 0 ? void 0 : doubleClickAction(row.original);
                     },
-                    className: cx(classes.row, _defineProperty({}, classes.rowSelected, isSelected)),
+                    className: cx(classes.row, _define_property._({}, classes.rowSelected, isSelected)),
                     "aria-selected": isSelected,
                     children: row.getVisibleCells().map(function(cell) {
                         var size = cell.column.getSize();
-                        var width = size !== _reactTable.defaultColumnSizing.size ? size : undefined;
-                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("td", {
+                        var width = size !== _reacttable.defaultColumnSizing.size ? size : undefined;
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
                             style: {
                                 width: width
                             },
-                            className: cx(_defineProperty({}, classes.rowCollapsibleButtonCell, cell.column.id === _tableCollapsibleColumn.TableCollapsibleColumn.id)),
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(LoadingSkeleton, {
+                            className: cx(_define_property._({}, classes.rowCollapsibleButtonCell, cell.column.id === _TableCollapsibleColumn.TableCollapsibleColumn.id)),
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(LoadingSkeleton, {
                                 visible: loading,
-                                children: (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                                children: (0, _reacttable.flexRender)(cell.column.columnDef.cell, cell.getContext())
                             })
                         }, cell.id);
                     })
                 }),
-                rowChildren ? /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("td", {
+                rowChildren ? /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
                         colSpan: table.getAllColumns().length,
                         style: {
                             padding: 0,
                             borderTop: row.getIsExpanded() ? undefined : "none",
                             borderBottom: row.getIsExpanded() ? undefined : "none"
                         },
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Collapse, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Collapse, {
                             in: row.getIsExpanded(),
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Box, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
                                 px: "sm",
                                 py: "xs",
                                 children: rowChildren
@@ -203,9 +202,9 @@ var Table = function(param) {
             ]
         }, row.id);
     });
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
         ref: outsideClickRef,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_tableContext.TableContext.Provider, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_TableContext.TableContext.Provider, {
             value: {
                 onChange: triggerChange,
                 state: state,
@@ -222,32 +221,43 @@ var Table = function(param) {
             },
             children: [
                 consumer,
-                !rows.length && !isFiltered && !loading ? noDataChildren : /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                !rows.length && !isFiltered && !loading ? noDataChildren : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                     children: [
-                        header,
-                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Table, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Table, {
                             className: classes.table,
                             horizontalSpacing: "sm",
                             verticalSpacing: "xs",
                             pb: "sm",
                             children: [
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)("thead", {
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)("thead", {
                                     className: classes.header,
-                                    children: table.getHeaderGroups().map(function(headerGroup) {
-                                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
-                                            children: headerGroup.headers.map(function(columnHeader) {
-                                                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_th.Th, {
-                                                    header: columnHeader
-                                                }, columnHeader.id);
+                                    children: [
+                                        !!header ? /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)("th", {
+                                                style: {
+                                                    padding: 0
+                                                },
+                                                colSpan: table.getAllColumns().length,
+                                                children: header
                                             })
-                                        }, headerGroup.id);
-                                    })
+                                        }) : null,
+                                        table.getHeaderGroups().map(function(headerGroup) {
+                                            return /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
+                                                className: classes.headerColumns,
+                                                children: headerGroup.headers.map(function(columnHeader) {
+                                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Th.Th, {
+                                                        header: columnHeader
+                                                    }, columnHeader.id);
+                                                })
+                                            }, headerGroup.id);
+                                        })
+                                    ]
                                 }),
-                                /*#__PURE__*/ (0, _jsxRuntime.jsx)("tbody", {
-                                    children: rows.length ? rows : /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
-                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("td", {
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("tbody", {
+                                    children: rows.length ? rows : /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
                                             colSpan: table.getAllColumns().length,
-                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(LoadingSkeleton, {
+                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(LoadingSkeleton, {
                                                 visible: loading,
                                                 children: noDataChildren
                                             })
@@ -263,17 +273,17 @@ var Table = function(param) {
         })
     });
 };
-Table.Actions = _tableActions.TableActions;
-Table.Filter = _tableFilter.TableFilter;
-Table.Footer = _tableFooter.TableFooter;
-Table.Header = _tableHeader.TableHeader;
-Table.Pagination = _tablePagination.TablePagination;
-Table.Predicate = _tablePredicate.TablePredicate;
-Table.PerPage = _tablePerPage.TablePerPage;
-Table.Predicate = _tablePredicate.TablePredicate;
-Table.CollapsibleColumn = _tableCollapsibleColumn.TableCollapsibleColumn;
-Table.AccordionColumn = _tableCollapsibleColumn.TableAccordionColumn;
-Table.DateRangePicker = _tableDateRangePicker.TableDateRangePicker;
-Table.Consumer = _tableConsumer.TableConsumer;
+Table.Actions = _TableActions.TableActions;
+Table.Filter = _TableFilter.TableFilter;
+Table.Footer = _TableFooter.TableFooter;
+Table.Header = _TableHeader.TableHeader;
+Table.Pagination = _TablePagination.TablePagination;
+Table.Predicate = _TablePredicate.TablePredicate;
+Table.PerPage = _TablePerPage.TablePerPage;
+Table.Predicate = _TablePredicate.TablePredicate;
+Table.CollapsibleColumn = _TableCollapsibleColumn.TableCollapsibleColumn;
+Table.AccordionColumn = _TableCollapsibleColumn.TableAccordionColumn;
+Table.DateRangePicker = _TableDateRangePicker.TableDateRangePicker;
+Table.Consumer = _TableConsumer.TableConsumer;
 
 //# sourceMappingURL=Table.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, Loader, Skeleton, SkeletonProps, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {\n    ColumnDef,\n    defaultColumnSizing,\n    flexRender,\n    getCoreRowModel,\n    Row,\n    TableState as TanstackTableState,\n    useReactTable,\n} from '@tanstack/react-table';\nimport debounce from 'lodash.debounce';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Dispatch, FC, Fragment, ReactElement, useCallback, useEffect, useState} from 'react';\n\nimport useStyles from './Table.styles';\nimport {TableFormType, TableProps, TableState, TableType} from './Table.types';\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {TableContext} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableConsumer} from './TableConsumer';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\nconst LoadingSkeleton: FC<SkeletonProps> = (props) => (\n    <Skeleton style={{display: 'inline-block'}} {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>\n        {props.children}\n    </Skeleton>\n);\n\nexport const Table: TableType = <T,>({\n    data,\n    getRowId,\n    noDataChildren,\n    getExpandChildren,\n    initialState = {},\n    columns,\n    onMount,\n    onChange,\n    children,\n    loading = false,\n    doubleClickAction,\n    multiRowSelectionEnabled,\n    onRowSelectionChange,\n    options = {},\n}: TableProps<T>) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const header = convertedChildren.find((child) => child.type === TableHeader);\n    const footer = convertedChildren.find((child) => child.type === TableFooter);\n    const consumer = convertedChildren.find((child) => child.type === TableConsumer);\n\n    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n    const form = useForm<TableFormType>({\n        initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n    });\n    const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n    const table = useReactTable({\n        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n        data,\n        columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n        getCoreRowModel: getCoreRowModel(),\n        manualPagination: options?.getPaginationRowModel === undefined,\n        enableMultiRowSelection: !!multiRowSelectionEnabled,\n        getRowId,\n        getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n        enableRowSelection: !loading,\n        ...options,\n    });\n    const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);\n    table.setOptions((prev) => ({\n        ...prev,\n        state: state as TanstackTableState,\n        onStateChange: setState as Dispatch<React.SetStateAction<TanstackTableState>>,\n    }));\n    const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {\n        multiRowSelectionEnabled,\n        onRowSelectionChange,\n    });\n    const isFiltered =\n        !!state.globalFilter ||\n        Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||\n        !!form.values.dateRange?.[0] ||\n        !!form.values.dateRange?.[1];\n\n    const triggerChange = debounce(() => onChange?.({...state, ...form.values}), 500);\n\n    useEffect(() => {\n        onMount?.({...state, ...form.values});\n        return () => {\n            triggerChange.cancel();\n        };\n    }, []);\n\n    useDidUpdate(() => {\n        triggerChange();\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    }, [state.globalFilter, state.pagination, state.sorting, form.values]);\n\n    const clearFilters = useCallback(() => {\n        form.setFieldValue('predicates', initialState.predicates ?? {});\n        setState((prevState) => ({...prevState, globalFilter: ''}));\n    }, []);\n\n    if (!data) {\n        return (\n            <Center sx={{flexGrow: 1}}>\n                <Loader />\n            </Center>\n        );\n    }\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n        const isSelected = !!row.getIsSelected();\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={() => row.toggleSelected()}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {[classes.rowSelected]: isSelected})}\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                        return (\n                            <td\n                                key={cell.id}\n                                style={{width}}\n                                className={cx({\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                            >\n                                <LoadingSkeleton visible={loading}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </LoadingSkeleton>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                                borderTop: row.getIsExpanded() ? undefined : 'none',\n                                borderBottom: row.getIsExpanded() ? undefined : 'none',\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return (\n        <Box ref={outsideClickRef}>\n            <TableContext.Provider\n                value={{\n                    onChange: triggerChange,\n                    state,\n                    isFiltered,\n                    setState,\n                    clearFilters,\n                    getSelectedRow,\n                    getSelectedRows,\n                    clearSelection,\n                    form,\n                    containerRef: outsideClickRef,\n                    multiRowSelectionEnabled,\n                    getPageCount: table.getPageCount,\n                }}\n            >\n                {consumer}\n                {!rows.length && !isFiltered && !loading ? (\n                    noDataChildren\n                ) : (\n                    <>\n                        {header}\n                        <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n                            <thead className={classes.header}>\n                                {table.getHeaderGroups().map((headerGroup) => (\n                                    <tr key={headerGroup.id}>\n                                        {headerGroup.headers.map((columnHeader) => (\n                                            <Th key={columnHeader.id} header={columnHeader} />\n                                        ))}\n                                    </tr>\n                                ))}\n                            </thead>\n                            <tbody>\n                                {rows.length ? (\n                                    rows\n                                ) : (\n                                    <tr>\n                                        <td colSpan={table.getAllColumns().length}>\n                                            <LoadingSkeleton visible={loading}>{noDataChildren}</LoadingSkeleton>\n                                        </td>\n                                    </tr>\n                                )}\n                            </tbody>\n                        </MantineTable>\n                        {footer}\n                    </>\n                )}\n            </TableContext.Provider>\n        </Box>\n    );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\nTable.Consumer = TableConsumer;\n"],"names":["Table","LoadingSkeleton","props","Skeleton","style","display","sx","visible","borderRadius","undefined","children","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","loading","doubleClickAction","multiRowSelectionEnabled","onRowSelectionChange","options","form","convertedChildren","Children","toArray","header","find","child","type","TableHeader","footer","TableFooter","consumer","TableConsumer","predicates","dateRange","initialStateWithoutForm","useForm","initialValues","useStyles","hasHeader","cx","classes","table","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","row","original","enableRowSelection","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","outsideClickRef","isFiltered","globalFilter","Object","keys","values","some","predicate","triggerChange","debounce","useEffect","cancel","useDidUpdate","sorting","clearFilters","useCallback","setFieldValue","prevState","Center","flexGrow","Loader","rows","getRowModel","map","rowChildren","isSelected","getIsSelected","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","rowSelected","aria-selected","getVisibleCells","cell","size","column","getSize","width","defaultColumnSizing","td","rowCollapsibleButtonCell","id","TableCollapsibleColumn","flexRender","columnDef","getContext","colSpan","getAllColumns","length","padding","borderTop","getIsExpanded","borderBottom","Collapse","in","Box","px","py","ref","TableContext","Provider","value","containerRef","getPageCount","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","AccordionColumn","TableAccordionColumn","DateRangePicker","TableDateRangePicker","Consumer"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, Loader, Skeleton, SkeletonProps, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {\n    ColumnDef,\n    defaultColumnSizing,\n    flexRender,\n    getCoreRowModel,\n    Row,\n    TableState as TanstackTableState,\n    useReactTable,\n} from '@tanstack/react-table';\nimport debounce from 'lodash.debounce';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Dispatch, FC, Fragment, ReactElement, useCallback, useEffect, useState} from 'react';\n\nimport useStyles from './Table.styles';\nimport {TableFormType, TableProps, TableState, TableType} from './Table.types';\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {TableConsumer} from './TableConsumer';\nimport {TableContext} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\nconst LoadingSkeleton: FC<SkeletonProps> = (props) => (\n    <Skeleton style={{display: 'inline-block'}} {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>\n        {props.children}\n    </Skeleton>\n);\n\nexport const Table: TableType = <T,>({\n    data,\n    getRowId,\n    noDataChildren,\n    getExpandChildren,\n    initialState = {},\n    columns,\n    onMount,\n    onChange,\n    children,\n    loading = false,\n    doubleClickAction,\n    multiRowSelectionEnabled,\n    onRowSelectionChange,\n    options = {},\n}: TableProps<T>) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const header = convertedChildren.find((child) => child.type === TableHeader);\n    const footer = convertedChildren.find((child) => child.type === TableFooter);\n    const consumer = convertedChildren.find((child) => child.type === TableConsumer);\n\n    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n    const form = useForm<TableFormType>({\n        initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n    });\n    const {cx, classes} = useStyles({multiRowSelectionEnabled});\n\n    const table = useReactTable({\n        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n        data,\n        columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n        getCoreRowModel: getCoreRowModel(),\n        manualPagination: options?.getPaginationRowModel === undefined,\n        enableMultiRowSelection: !!multiRowSelectionEnabled,\n        getRowId,\n        getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n        enableRowSelection: !loading,\n        ...options,\n    });\n    const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);\n    table.setOptions((prev) => ({\n        ...prev,\n        state: state as TanstackTableState,\n        onStateChange: setState as Dispatch<React.SetStateAction<TanstackTableState>>,\n    }));\n    const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {\n        multiRowSelectionEnabled,\n        onRowSelectionChange,\n    });\n    const isFiltered =\n        !!state.globalFilter ||\n        Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||\n        !!form.values.dateRange?.[0] ||\n        !!form.values.dateRange?.[1];\n\n    const triggerChange = debounce(() => onChange?.({...state, ...form.values}), 500);\n\n    useEffect(() => {\n        onMount?.({...state, ...form.values});\n        return () => {\n            triggerChange.cancel();\n        };\n    }, []);\n\n    useDidUpdate(() => {\n        triggerChange();\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    }, [state.globalFilter, state.pagination, state.sorting, form.values]);\n\n    const clearFilters = useCallback(() => {\n        form.setFieldValue('predicates', initialState.predicates ?? {});\n        setState((prevState) => ({...prevState, globalFilter: ''}));\n    }, []);\n\n    if (!data) {\n        return (\n            <Center sx={{flexGrow: 1}}>\n                <Loader />\n            </Center>\n        );\n    }\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n        const isSelected = !!row.getIsSelected();\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={() => row.toggleSelected()}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {[classes.rowSelected]: isSelected})}\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                        return (\n                            <td\n                                key={cell.id}\n                                style={{width}}\n                                className={cx({\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                            >\n                                <LoadingSkeleton visible={loading}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </LoadingSkeleton>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                                borderTop: row.getIsExpanded() ? undefined : 'none',\n                                borderBottom: row.getIsExpanded() ? undefined : 'none',\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return (\n        <Box ref={outsideClickRef}>\n            <TableContext.Provider\n                value={{\n                    onChange: triggerChange,\n                    state,\n                    isFiltered,\n                    setState,\n                    clearFilters,\n                    getSelectedRow,\n                    getSelectedRows,\n                    clearSelection,\n                    form,\n                    containerRef: outsideClickRef,\n                    multiRowSelectionEnabled,\n                    getPageCount: table.getPageCount,\n                }}\n            >\n                {consumer}\n                {!rows.length && !isFiltered && !loading ? (\n                    noDataChildren\n                ) : (\n                    <>\n                        <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n                            <thead className={classes.header}>\n                                {!!header ? (\n                                    <tr>\n                                        <th style={{padding: 0}} colSpan={table.getAllColumns().length}>\n                                            {header}\n                                        </th>\n                                    </tr>\n                                ) : null}\n                                {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                            </thead>\n                            <tbody>\n                                {rows.length ? (\n                                    rows\n                                ) : (\n                                    <tr>\n                                        <td colSpan={table.getAllColumns().length}>\n                                            <LoadingSkeleton visible={loading}>{noDataChildren}</LoadingSkeleton>\n                                        </td>\n                                    </tr>\n                                )}\n                            </tbody>\n                        </MantineTable>\n                        {footer}\n                    </>\n                )}\n            </TableContext.Provider>\n        </Box>\n    );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\nTable.Consumer = TableConsumer;\n"],"names":["Table","LoadingSkeleton","props","Skeleton","style","display","sx","visible","borderRadius","undefined","children","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","loading","doubleClickAction","multiRowSelectionEnabled","onRowSelectionChange","options","form","convertedChildren","Children","toArray","header","find","child","type","TableHeader","footer","TableFooter","consumer","TableConsumer","predicates","dateRange","initialStateWithoutForm","useForm","initialValues","useStyles","cx","classes","table","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","row","original","enableRowSelection","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","outsideClickRef","isFiltered","globalFilter","Object","keys","values","some","predicate","triggerChange","debounce","useEffect","cancel","useDidUpdate","sorting","clearFilters","useCallback","setFieldValue","prevState","Center","flexGrow","Loader","rows","getRowModel","map","rowChildren","isSelected","getIsSelected","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","rowSelected","aria-selected","getVisibleCells","cell","size","column","getSize","width","defaultColumnSizing","td","rowCollapsibleButtonCell","id","TableCollapsibleColumn","flexRender","columnDef","getContext","colSpan","getAllColumns","length","padding","borderTop","getIsExpanded","borderBottom","Collapse","in","Box","px","py","ref","TableContext","Provider","value","containerRef","getPageCount","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","th","getHeaderGroups","headerGroup","headerColumns","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","AccordionColumn","TableAccordionColumn","DateRangePicker","TableDateRangePicker","Consumer"],"mappings":"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"}

package/dist/cjs/components/table/Table.styles.js

@@ -2,20 +2,31 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TableComponentsOrder: function() {
+        return TableComponentsOrder;
+    },
+    default: function() {
         return _default;
     }
 });
 var _core = require("@mantine/core");
 var useStyles = (0, _core.createStyles)(function(theme, param) {
-    var hasHeader = param.hasHeader, multiRowSelectionEnabled = param.multiRowSelectionEnabled;
+    var multiRowSelectionEnabled = param.multiRowSelectionEnabled;
     var rowBackgroundColor = theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors[theme.primaryColor][0];
     return {
         table: {
             width: "100%",
-            "& td:first-of-type, th:first-of-type > *": {
+            "& thead tr th": {
+                borderBottom: "none"
+            },
+            "& td:first-of-type": {
                 paddingLeft: theme.spacing.xl
             },
             "& tbody td": {
@@ -24,7 +35,7 @@ var useStyles = (0, _core.createStyles)(function(theme, param) {
         },
         header: {
             position: "sticky",
-            top: hasHeader ? 69 : 0,
+            top: 0,
             backgroundColor: theme.colorScheme === "dark" ? theme.black : theme.white,
             transition: "box-shadow 150ms ease",
             zIndex: 1,
@@ -34,7 +45,12 @@ var useStyles = (0, _core.createStyles)(function(theme, param) {
                 left: 0,
                 right: 0,
                 bottom: 0,
-                borderBottom: "1px solid ".concat(theme.colors.gray[2])
+                borderBottom: "1px solid ".concat(theme.colors.gray[3])
+            }
+        },
+        headerColumns: {
+            "& th:first-of-type > *": {
+                paddingLeft: theme.spacing.xl
             }
         },
         rowSelected: {
@@ -51,6 +67,13 @@ var useStyles = (0, _core.createStyles)(function(theme, param) {
         }
     };
 });
+var TableComponentsOrder = {
+    MultiSelectInfo: 5,
+    Actions: 4,
+    Predicate: 3,
+    Filter: 2,
+    DateRangePicker: 1
+};
 var _default = useStyles;
 
 //# sourceMappingURL=Table.styles.js.map

package/dist/cjs/components/table/Table.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Table.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\ninterface TableStylesParams {\n    hasHeader: boolean;\n    multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n    const rowBackgroundColor =\n        theme.colorScheme === 'dark'\n            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n            : theme.colors[theme.primaryColor][0];\n    return {\n        table: {\n            width: '100%',\n            '& td:first-of-type, th:first-of-type > *': {\n                paddingLeft: theme.spacing.xl,\n            },\n            '& tbody td': {\n                verticalAlign: 'top',\n            },\n        },\n\n        header: {\n            position: 'sticky',\n            top: hasHeader ? 69 : 0,\n            backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n            transition: 'box-shadow 150ms ease',\n            zIndex: 1,\n\n            '&::after': {\n                content: '\"\"',\n                position: 'absolute',\n                left: 0,\n                right: 0,\n                bottom: 0,\n                borderBottom: `1px solid ${theme.colors.gray[2]}`,\n            },\n        },\n\n        rowSelected: {\n            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n        },\n\n        row: {\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n    };\n});\n\nexport default useStyles;\n"],"names":["useStyles","createStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row"],"mappings":";;;;+BAyDA;;;eAAA;;;oBAzD2B;AAO3B,IAAMA,YAAYC,IAAAA,kBAAY,EAA4B,SAACC,cAAiD;QAAzCC,kBAAAA,WAAWC,iCAAAA;IAC1E,IAAMC,qBACFH,MAAMI,WAAW,KAAK,SAChBJ,MAAMK,EAAE,CAACC,IAAI,CAACN,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE,EAAE,OACnDR,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE;IAC7C,OAAO;QACHC,OAAO;YACHC,OAAO;YACP,4CAA4C;gBACxCC,aAAaX,MAAMY,OAAO,CAACC,EAAE;YACjC;YACA,cAAc;gBACVC,eAAe;YACnB;QACJ;QAEAC,QAAQ;YACJC,UAAU;YACVC,KAAKhB,YAAY,KAAK,CAAC;YACvBiB,iBAAiBlB,MAAMI,WAAW,KAAK,SAASJ,MAAMmB,KAAK,GAAGnB,MAAMoB,KAAK;YACzEC,YAAY;YACZC,QAAQ;YAER,YAAY;gBACRC,SAAS;gBACTP,UAAU;gBACVQ,MAAM;gBACNC,OAAO;gBACPC,QAAQ;gBACRC,cAAc,AAAC,aAAiC,OAArB3B,MAAMO,MAAM,CAACqB,IAAI,CAAC,EAAE;YACnD;QACJ;QAEAC,aAAa;YACTX,iBAAiBhB,2BAA2B4B,YAAY3B,kBAAkB;QAC9E;QAEA4B,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BjC,OAAvBA,MAAMY,OAAO,CAACsB,EAAE,EAAC,QAAuB,OAAjBlC,MAAMY,OAAO,CAACuB,EAAE,EAAC;QAC7D;QAEAC,KAAK;YACD,WAAW;gBACPlB,iBAAiBf;YACrB;QACJ;IACJ;AACJ;IAEA,WAAeL"}
+{"version":3,"sources":["../../../../src/components/table/Table.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\ninterface TableStylesParams {\n    multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled}) => {\n    const rowBackgroundColor =\n        theme.colorScheme === 'dark'\n            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n            : theme.colors[theme.primaryColor][0];\n    return {\n        table: {\n            width: '100%',\n            '& thead tr th': {\n                borderBottom: 'none',\n            },\n            '& td:first-of-type': {\n                paddingLeft: theme.spacing.xl,\n            },\n            '& tbody td': {\n                verticalAlign: 'top',\n            },\n        },\n\n        header: {\n            position: 'sticky',\n            top: 0,\n            backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n            transition: 'box-shadow 150ms ease',\n            zIndex: 1,\n\n            '&::after': {\n                content: '\"\"',\n                position: 'absolute',\n                left: 0,\n                right: 0,\n                bottom: 0,\n                borderBottom: `1px solid ${theme.colors.gray[3]}`,\n            },\n        },\n\n        headerColumns: {\n            '& th:first-of-type > *': {\n                paddingLeft: theme.spacing.xl,\n            },\n        },\n\n        rowSelected: {\n            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n        },\n\n        row: {\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n    };\n});\n\nexport const TableComponentsOrder = {\n    MultiSelectInfo: 5,\n    Actions: 4,\n    Predicate: 3,\n    Filter: 2,\n    DateRangePicker: 1,\n};\n\nexport default useStyles;\n"],"names":["TableComponentsOrder","useStyles","createStyles","theme","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","borderBottom","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","gray","headerColumns","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","MultiSelectInfo","Actions","Predicate","Filter","DateRangePicker"],"mappings":";;;;;;;;;;;IAiEaA,oBAAoB;eAApBA;;IAQb,OAAyB;eAAzB;;;oBAzE2B;AAM3B,IAAMC,YAAYC,IAAAA,kBAAY,EAA4B,SAACC,cAAsC;QAA9BC,iCAAAA;IAC/D,IAAMC,qBACFF,MAAMG,WAAW,KAAK,SAChBH,MAAMI,EAAE,CAACC,IAAI,CAACL,MAAMM,MAAM,CAACN,MAAMO,YAAY,CAAC,CAAC,EAAE,EAAE,OACnDP,MAAMM,MAAM,CAACN,MAAMO,YAAY,CAAC,CAAC,EAAE;IAC7C,OAAO;QACHC,OAAO;YACHC,OAAO;YACP,iBAAiB;gBACbC,cAAc;YAClB;YACA,sBAAsB;gBAClBC,aAAaX,MAAMY,OAAO,CAACC,EAAE;YACjC;YACA,cAAc;gBACVC,eAAe;YACnB;QACJ;QAEAC,QAAQ;YACJC,UAAU;YACVC,KAAK;YACLC,iBAAiBlB,MAAMG,WAAW,KAAK,SAASH,MAAMmB,KAAK,GAAGnB,MAAMoB,KAAK;YACzEC,YAAY;YACZC,QAAQ;YAER,YAAY;gBACRC,SAAS;gBACTP,UAAU;gBACVQ,MAAM;gBACNC,OAAO;gBACPC,QAAQ;gBACRhB,cAAc,AAAC,aAAiC,OAArBV,MAAMM,MAAM,CAACqB,IAAI,CAAC,EAAE;YACnD;QACJ;QAEAC,eAAe;YACX,0BAA0B;gBACtBjB,aAAaX,MAAMY,OAAO,CAACC,EAAE;YACjC;QACJ;QAEAgB,aAAa;YACTX,iBAAiBjB,2BAA2B6B,YAAY5B,kBAAkB;QAC9E;QAEA6B,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BjC,OAAvBA,MAAMY,OAAO,CAACsB,EAAE,EAAC,QAAuB,OAAjBlC,MAAMY,OAAO,CAACuB,EAAE,EAAC;QAC7D;QAEAC,KAAK;YACD,WAAW;gBACPlB,iBAAiBhB;YACrB;QACJ;IACJ;AACJ;AAEO,IAAML,uBAAuB;IAChCwC,iBAAiB;IACjBC,SAAS;IACTC,WAAW;IACXC,QAAQ;IACRC,iBAAiB;AACrB;IAEA,WAAe3C"}

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

@@ -8,19 +8,28 @@ Object.defineProperty(exports, "TableActions", {
         return TableActions;
     }
 });
-var _jsxRuntime = require("react/jsx-runtime");
+var _jsxruntime = require("react/jsx-runtime");
 var _core = require("@mantine/core");
-var _tableContext = require("./TableContext");
+var _Tablestyles = require("./Table.styles");
+var _TableContext = require("./TableContext");
 var TableActions = function(param) {
     var children = param.children;
-    var _useTable = (0, _tableContext.useTable)(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled;
+    var _useTable = (0, _TableContext.useTable)(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled;
     var selectedRows = getSelectedRows();
     if (selectedRows.length <= 0) {
         return null;
     }
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Group, {
-        spacing: "xs",
-        children: multiRowSelectionEnabled ? children(selectedRows) : children(selectedRows[0])
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, {
+        span: "content",
+        order: _Tablestyles.TableComponentsOrder.Actions,
+        py: "sm",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, {
+            spacing: "xs",
+            style: {
+                display: "inline-flex"
+            },
+            children: multiRowSelectionEnabled ? children(selectedRows) : children(selectedRows[0])
+        })
     });
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\n\nimport {useTable} from './TableContext';\n\ninterface TableActionsProps<T> {\n    /**\n     * Function that return components for the selected row or selected rows when multi row selection is enabled\n     *\n     * @param datum the data of the selected row(s)\n     * @example\n     * <Table.Actions<MyType>>\n     *     {(datum: MyType) => (\n     *         <Button\n     *             component={Link}\n     *             to={`edit/${datum.id}`}\n     *             leftIcon={<EditSize24Px />}\n     *             variant=\"subtle\"\n     *             color=\"navyBlue.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return (\n        <Group spacing=\"xs\">\n            {multiRowSelectionEnabled\n                ? (children as (data: T[]) => ReactNode)(selectedRows)\n                : (children as (datum: T) => ReactNode)(selectedRows[0])}\n        </Group>\n    );\n};\n"],"names":["TableActions","children","useTable","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","Group","spacing"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;oBA5BO;4BAGG;AAyBhB,IAAMA,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAoDC,YAAAA,IAAAA,sBAAQ,KAArDC,kBAA6CD,UAA7CC,iBAAiBC,2BAA4BF,UAA5BE;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO,IAAI;IACf,CAAC;IAED,qBACI,qBAACC,WAAK;QAACC,SAAQ;kBACVJ,2BACK,AAACH,SAAsCI,gBACvC,AAACJ,SAAqCI,YAAY,CAAC,EAAE,CAAC;;AAGxE"}
+{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {Grid, Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\nimport {TableComponentsOrder} from './Table.styles';\n\nimport {useTable} from './TableContext';\n\ninterface TableActionsProps<T> {\n    /**\n     * Function that return components for the selected row or selected rows when multi row selection is enabled\n     *\n     * @param datum the data of the selected row(s)\n     * @example\n     * <Table.Actions<MyType>>\n     *     {(datum: MyType) => (\n     *         <Button\n     *             component={Link}\n     *             to={`edit/${datum.id}`}\n     *             leftIcon={<EditSize24Px />}\n     *             variant=\"subtle\"\n     *             color=\"navyBlue.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\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\">\n            <Group spacing=\"xs\" style={{display: 'inline-flex'}}>\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":["TableActions","children","useTable","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","Grid","Col","span","order","TableComponentsOrder","Actions","py","Group","spacing","style","display"],"mappings":";;;;+BA6BaA;;;eAAAA;;;;oBA7Ba;2BAES;4BAEZ;AAyBhB,IAAMA,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAoDC,YAAAA,IAAAA,sBAAQ,KAArDC,kBAA6CD,UAA7CC,iBAAiBC,2BAA4BF,UAA5BE;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO,IAAI;IACf,CAAC;IAED,qBACI,qBAACC,UAAI,CAACC,GAAG;QAACC,MAAK;QAAUC,OAAOC,iCAAoB,CAACC,OAAO;QAAEC,IAAG;kBAC7D,cAAA,qBAACC,WAAK;YAACC,SAAQ;YAAKC,OAAO;gBAACC,SAAS;YAAa;sBAC7Cb,2BACK,AAACH,SAAsCI,gBACvC,AAACJ,SAAqCI,YAAY,CAAC,EAAE,CAAC;;;AAI5E"}

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

@@ -16,10 +16,10 @@ _export(exports, {
         return TableAccordionColumn;
     }
 });
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _jsxRuntime = require("react/jsx-runtime");
-var _plasmaReactIcons = require("@coveord/plasma-react-icons");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _jsxruntime = require("react/jsx-runtime");
+var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
 var defaultProps = {
     id: "collapsible",
@@ -27,14 +27,14 @@ var defaultProps = {
     header: "",
     size: 62
 };
-var TableCollapsibleColumn = _objectSpreadProps(_objectSpread({}, defaultProps), {
+var TableCollapsibleColumn = _object_spread_props._(_object_spread._({}, defaultProps), {
     cell: function(info) {
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(CollapsibleIcon, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(CollapsibleIcon, {
             info: info
         });
     }
 });
-var TableAccordionColumn = _objectSpreadProps(_objectSpread({}, defaultProps), {
+var TableAccordionColumn = _object_spread_props._(_object_spread._({}, defaultProps), {
     cell: function(info) {
         var onToggle = function() {
             // close all other rows when the current row not is expanded
@@ -42,7 +42,7 @@ var TableAccordionColumn = _objectSpreadProps(_objectSpread({}, defaultProps), {
                 info.table.toggleAllRowsExpanded(false);
             }
         };
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(CollapsibleIcon, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(CollapsibleIcon, {
             onToggle: onToggle,
             info: info
         });
@@ -56,11 +56,11 @@ var CollapsibleIcon = function(param) {
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(e);
         handler();
     };
-    return info.row.getCanExpand() ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.ActionIcon, {
+    return info.row.getCanExpand() ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
         onClick: onClick,
         variant: "subtle",
         radius: "sm",
-        children: info.row.getIsExpanded() ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.ArrowHeadUpSize24Px, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.ArrowHeadDownSize24Px, {})
+        children: info.row.getIsExpanded() ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.ArrowHeadUpSize24Px, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.ArrowHeadDownSize24Px, {})
     }) : null;
 };