npm - @coveord/plasma-mantine - Versions diffs - 48.22.5 → 48.23.1 - Mend

@coveord/plasma-mantine 48.22.5 → 48.23.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/dist/esm/components/modal-wizard/ModalWizard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, Button, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useMemo, useState} from 'react';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep} from './ModalWizardStep';\nimport {Header} from '../header';\n\nconst useStyles = createStyles(() => ({\n modal: {\n display: 'flex',\n flexDirection: 'column',\n },\n body: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\ninterface ModalWizardProps\n extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' \| 'styles'>,\n Omit<ModalProps, 'centered' \| 'title'> {\n /*\n The label of the cancel button\n \n @default \"Cancel\"\n /\n cancelButtonLabel?: string;\n\n /\n The label of the next button\n \n @default \"Next\"\n /\n nextButtonLabel?: string;\n\n /\n The label of the previous button\n \n @default \"Previous\"\n /\n previousButtonLabel?: string;\n\n /\n The label of the finish button\n \n @default \"Finish\"\n /\n finishButtonLabel?: string;\n\n /\n A callback function that is executed when the user clicks on the next button\n /\n onNext?: () => unknown;\n\n /\n A callback function that is executed when the user clicks on the previous button\n /\n onPrevious?: () => unknown;\n\n /\n A function that is executed when user completes all the steps.\n \n @param close A function that closes the modal when called.\n /\n onFinish?: () => unknown;\n\n /\n Determine if user interacted with any steps in the modal wizard\n /\n isDirty?: () => boolean;\n\n /\n A function to confirm close if the state is dirty before closing\n /\n handleDirtyState?: () => boolean;\n\n /\n Children to display in modal wizard\n * /\n children?: Array<ReturnType<typeof ModalWizardStep>>;\n}\n\ninterface ModalWizardType {\n (props: ModalWizardProps): ReactElement;\n\n Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n cancelButtonLabel = 'Cancel',\n nextButtonLabel = 'Next',\n previousButtonLabel = 'Previous',\n finishButtonLabel = 'Finish',\n opened,\n onNext,\n onPrevious,\n onClose,\n onFinish,\n isDirty,\n handleDirtyState,\n classNames,\n className,\n styles,\n unstyled,\n children,\n ...modalProps\n}) => {\n const {\n classes: {modal, body},\n cx,\n } = useStyles(null, {\n name: 'ModalWizard',\n classNames,\n styles,\n unstyled,\n });\n\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n const numberOfSteps = modalSteps.length;\n const numberOfStepsCountAsProgress = modalSteps.filter((step) => step.props.countsAsProgress).length;\n const isFirstStep = currentStepIndex === 0;\n const isLastStep = currentStepIndex === numberOfSteps - 1;\n const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n const isModalDirty = isDirty && isDirty();\n\n const closeModalWizard = () => {\n if (isModalDirty && handleDirtyState) {\n handleDirtyState() && onClose?.();\n } else {\n onClose?.();\n }\n };\n\n const getProgress = (currStepIndex: number) => {\n const validSteps = modalSteps.filter(\n (step, index) => step.props.countsAsProgress && index <= currStepIndex\n ).length;\n return (validSteps / numberOfStepsCountAsProgress) 100;\n };\n\n const getProgressMemo = useMemo(() => getProgress(currentStepIndex), [currentStepIndex]);\n return (\n <Modal\n opened={opened}\n classNames={{modal: cx(modal, classNames?.modal), body: cx(body, classNames?.body)}}\n centered\n title={\n <Header\n docLink={currentStep.props.docLink}\n description={\n typeof currentStep.props.description === 'function'\n ? currentStep.props.description(currentStepIndex + 1, numberOfSteps)\n : currentStep.props.description\n }\n py={0}\n px={0}\n >\n {typeof currentStep.props.title === 'function'\n ? currentStep.props.title(currentStepIndex + 1, numberOfSteps)\n : currentStep.props.title}\n </Header>\n }\n onClose={closeModalWizard}\n {...modalProps}\n >\n {currentStep.props.showProgressBar && <Progress color=\"teal\" size=\"lg\" value={getProgressMemo} />}\n {currentStep}\n <Box\n sx={(theme) => ({\n marginTop: 'auto',\n })}\n >\n <StickyFooter px={0} pt=\"sm\" pb={0} borderTop>\n <Button\n name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n variant=\"outline\"\n onClick={() => {\n if (isFirstStep) {\n closeModalWizard();\n } else {\n onPrevious?.();\n setCurrentStepIndex(currentStepIndex - 1);\n }\n }}\n >\n {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n </Button>\n\n <Button\n disabled={!isValid}\n onClick={() => {\n if (isLastStep) {\n onFinish ? onFinish() : onClose();\n } else {\n onNext?.();\n setCurrentStepIndex(currentStepIndex + 1);\n }\n }}\n >\n {isLastStep ? finishButtonLabel : nextButtonLabel}\n </Button>\n </StickyFooter>\n </Box>\n </Modal>\n );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["Box","Button","createStyles","Modal","Progress","Children","useMemo","useState","StickyFooter","ModalWizardStep","Header","useStyles","modal","display","flexDirection","body","flex","ModalWizard","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","className","styles","unstyled","children","modalProps","currentStep","name","classes","cx","currentStepIndex","setCurrentStepIndex","modalSteps","toArray","filter","child","type","numberOfSteps","length","numberOfStepsCountAsProgress","step","props","countsAsProgress","isFirstStep","isLastStep","index","isValid","validateStep","isModalDirty","closeModalWizard","getProgress","currStepIndex","validSteps","getProgressMemo","centered","title","docLink","description","py","px","showProgressBar","color","size","value","sx","theme","marginTop","pt","pb","borderTop","variant","onClick","disabled","Step"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, Button, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useMemo, useState} from 'react';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep} from './ModalWizardStep';\nimport {Header} from '../header';\n\nconst useStyles = createStyles(() => ({\n modal: {\n display: 'flex',\n flexDirection: 'column',\n },\n body: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\ninterface ModalWizardProps\n extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' \| 'styles'>,\n Omit<ModalProps, 'centered' \| 'title'> {\n /*\n The label of the cancel button\n \n @default \"Cancel\"\n /\n cancelButtonLabel?: string;\n\n /\n The label of the next button\n \n @default \"Next\"\n /\n nextButtonLabel?: string;\n\n /\n The label of the previous button\n \n @default \"Previous\"\n /\n previousButtonLabel?: string;\n\n /\n The label of the finish button\n \n @default \"Finish\"\n /\n finishButtonLabel?: string;\n\n /\n A callback function that is executed when the user clicks on the next button\n /\n onNext?: () => unknown;\n\n /\n A callback function that is executed when the user clicks on the previous button\n /\n onPrevious?: () => unknown;\n\n /\n A function that is executed when user completes all the steps.\n \n @param close A function that closes the modal when called.\n /\n onFinish?: () => unknown;\n\n /\n Determine if user interacted with any steps in the modal wizard\n /\n isDirty?: () => boolean;\n\n /\n A function to confirm close if the state is dirty before closing\n /\n handleDirtyState?: () => boolean;\n\n /\n Children to display in modal wizard\n * /\n children?: Array<ReturnType<typeof ModalWizardStep>>;\n}\n\ninterface ModalWizardType {\n (props: ModalWizardProps): ReactElement;\n\n Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n cancelButtonLabel = 'Cancel',\n nextButtonLabel = 'Next',\n previousButtonLabel = 'Previous',\n finishButtonLabel = 'Finish',\n opened,\n onNext,\n onPrevious,\n onClose,\n onFinish,\n isDirty,\n handleDirtyState,\n classNames,\n className,\n styles,\n unstyled,\n children,\n ...modalProps\n}) => {\n const {\n classes: {modal, body},\n cx,\n } = useStyles(null, {\n name: 'ModalWizard',\n classNames,\n styles,\n unstyled,\n });\n\n const [currentStepIndex, setCurrentStepIndex] = useState(0);\n const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n const numberOfSteps = modalSteps.length;\n const numberOfStepsCountAsProgress = modalSteps.filter((step) => step.props.countsAsProgress).length;\n const isFirstStep = currentStepIndex === 0;\n const isLastStep = currentStepIndex === numberOfSteps - 1;\n const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n const isModalDirty = isDirty && isDirty();\n\n const closeModalWizard = () => {\n if (isModalDirty && handleDirtyState) {\n handleDirtyState() && onClose?.();\n } else {\n onClose?.();\n }\n };\n\n const getProgress = (currStepIndex: number) => {\n const validSteps = modalSteps.filter(\n (step, index) => step.props.countsAsProgress && index <= currStepIndex\n ).length;\n return (validSteps / numberOfStepsCountAsProgress) 100;\n };\n\n const getProgressMemo = useMemo(() => getProgress(currentStepIndex), [currentStepIndex]);\n return (\n <Modal\n opened={opened}\n classNames={{modal: cx(modal, classNames?.modal), body: cx(body, classNames?.body)}}\n centered\n title={\n <Header\n docLink={currentStep.props.docLink}\n description={\n typeof currentStep.props.description === 'function'\n ? currentStep.props.description(currentStepIndex + 1, numberOfSteps)\n : currentStep.props.description\n }\n py={0}\n px={0}\n >\n {typeof currentStep.props.title === 'function'\n ? currentStep.props.title(currentStepIndex + 1, numberOfSteps)\n : currentStep.props.title}\n </Header>\n }\n onClose={closeModalWizard}\n {...modalProps}\n >\n {currentStep.props.showProgressBar && <Progress color=\"teal\" size=\"lg\" value={getProgressMemo} />}\n {currentStep}\n <Box\n sx={(theme) => ({\n marginTop: 'auto',\n })}\n >\n <StickyFooter px={0} pt=\"sm\" pb={0} borderTop>\n <Button\n name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n variant=\"outline\"\n onClick={() => {\n if (isFirstStep) {\n closeModalWizard();\n } else {\n onPrevious?.();\n setCurrentStepIndex(currentStepIndex - 1);\n }\n }}\n >\n {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n </Button>\n\n <Button\n disabled={!isValid}\n onClick={() => {\n if (isLastStep) {\n onFinish ? onFinish() : onClose();\n } else {\n onNext?.();\n setCurrentStepIndex(currentStepIndex + 1);\n }\n }}\n >\n {isLastStep ? finishButtonLabel : nextButtonLabel}\n </Button>\n </StickyFooter>\n </Box>\n </Modal>\n );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["Box","Button","createStyles","Modal","Progress","Children","useMemo","useState","StickyFooter","ModalWizardStep","Header","useStyles","modal","display","flexDirection","body","flex","ModalWizard","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","className","styles","unstyled","children","modalProps","currentStep","name","classes","cx","currentStepIndex","setCurrentStepIndex","modalSteps","toArray","filter","child","type","numberOfSteps","length","numberOfStepsCountAsProgress","step","props","countsAsProgress","isFirstStep","isLastStep","index","isValid","validateStep","isModalDirty","closeModalWizard","getProgress","currStepIndex","validSteps","getProgressMemo","centered","title","docLink","description","py","px","showProgressBar","color","size","value","sx","theme","marginTop","pt","pb","borderTop","variant","onClick","disabled","Step"],"mappings":"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"}

package/dist/esm/components/table/Table.js CHANGED Viewed

@@ -20,13 +20,16 @@ import { TableHeader } from "./TableHeader";
 import { TablePagination } from "./TablePagination";
 import { TablePerPage } from "./TablePerPage";
 import { TablePredicate } from "./TablePredicate";
+import { TableSelectableColumn } from "./TableSelectableColumn";
 import { Th } from "./Th";
-var useStyles = createStyles(function(theme, param, getRef) {
-    var hasHeader = param.hasHeader;
+import { useRowSelection } from "./useRowSelection";
+var useStyles = createStyles(function(theme, param) {
+    var hasHeader = param.hasHeader, 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": {
+            "& td:first-of-type, th:first-of-type > *": {
                 paddingLeft: theme.spacing.xl
             }
         },
@@ -36,12 +39,6 @@ var useStyles = createStyles(function(theme, param, getRef) {
             backgroundColor: theme.colorScheme === "dark" ? theme.black : theme.white,
             transition: "box-shadow 150ms ease",
             zIndex: 12,
-            "& tr th:first-of-type button": {
-                paddingLeft: theme.spacing.xl
-            },
-            "& tr th:first-of-type div": {
-                paddingLeft: theme.spacing.xl
-            },
             "&::after": {
                 content: '""',
                 position: "absolute",
@@ -52,15 +49,23 @@ var useStyles = createStyles(function(theme, param, getRef) {
             }
         },
         rowSelected: {
-            ref: getRef("rowSelected")
+            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor
         },
-        row: _define_property({}, "&:hover, &.".concat(getRef("rowSelected")), {
-            backgroundColor: theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors[theme.primaryColor][0]
-        })
+        rowSelectionCheckboxCell: {
+            verticalAlign: "middle"
+        },
+        rowCollapsibleButtonCell: {
+            textAlign: "right"
+        },
+        row: {
+            "&:hover": {
+                backgroundColor: rowBackgroundColor
+            }
+        }
     };
 });
 export var Table = function(param) {
-    var data = param.data, noDataChildren = param.noDataChildren, getExpandChildren = param.getExpandChildren, _param_initialState = param.initialState, initialState = _param_initialState === void 0 ? {} : _param_initialState, columns = param.columns, onMount = param.onMount, onChange = param.onChange, children = param.children, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, doubleClickAction = param.doubleClickAction;
+    var data = param.data, getRowId = param.getRowId, noDataChildren = param.noDataChildren, getExpandChildren = param.getExpandChildren, _param_initialState = param.initialState, initialState = _param_initialState === void 0 ? {} : _param_initialState, columns = param.columns, onMount = param.onMount, onChange = param.onChange, children = param.children, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, doubleClickAction = param.doubleClickAction, multiRowSelectionEnabled = param.multiRowSelectionEnabled;
     var convertedChildren = Children.toArray(children);
     var header = convertedChildren.find(function(child) {
         return child.type === TableHeader;
@@ -72,20 +77,21 @@ export var Table = function(param) {
         "predicates",
         "dateRange"
     ]);
-    var _ref, _ref1;
+    var _initialState_predicates, _initialState_dateRange;
     var form = useForm({
         initialValues: {
-            predicates: (_ref = initialState === null || initialState === void 0 ? void 0 : initialState.predicates) !== null && _ref !== void 0 ? _ref : {},
-            dateRange: (_ref1 = initialState === null || initialState === void 0 ? void 0 : initialState.dateRange) !== null && _ref1 !== void 0 ? _ref1 : [
+            predicates: (_initialState_predicates = initialState === null || initialState === void 0 ? void 0 : initialState.predicates) !== null && _initialState_predicates !== void 0 ? _initialState_predicates : {},
+            dateRange: (_initialState_dateRange = initialState === null || initialState === void 0 ? void 0 : initialState.dateRange) !== null && _initialState_dateRange !== void 0 ? _initialState_dateRange : [
                 null,
                 null
             ]
         }
     });
     var _useStyles = useStyles({
-        hasHeader: !!header
+        hasHeader: !!header,
+        multiRowSelectionEnabled: multiRowSelectionEnabled
     }), cx = _useStyles.cx, classes = _useStyles.classes;
-    var _ref2;
+    var _ref;
     var table = useReactTable({
         initialState: defaultsDeep(initialStateWithoutForm, {
             pagination: {
@@ -93,11 +99,15 @@ export var Table = function(param) {
             }
         }),
         data: data,
-        columns: columns,
+        columns: multiRowSelectionEnabled ? [
+            TableSelectableColumn
+        ].concat(columns) : columns,
         getCoreRowModel: getCoreRowModel(),
         manualPagination: true,
+        enableMultiRowSelection: !!multiRowSelectionEnabled,
+        getRowId: getRowId,
         getRowCanExpand: function(row) {
-            return (_ref2 = !!(getExpandChildren === null || getExpandChildren === void 0 ? void 0 : getExpandChildren(row.original))) !== null && _ref2 !== void 0 ? _ref2 : false;
+            return (_ref = !!(getExpandChildren === null || getExpandChildren === void 0 ? void 0 : getExpandChildren(row.original))) !== null && _ref !== void 0 ? _ref : false;
         }
     });
     var _useState = _sliced_to_array(useState(table.initialState), 2), state = _useState[0], setState = _useState[1];
@@ -107,18 +117,18 @@ export var Table = function(param) {
             onStateChange: setState
         });
     });
+    var _useRowSelection = useRowSelection(table), clearSelection = _useRowSelection.clearSelection, getSelectedRow = _useRowSelection.getSelectedRow, getSelectedRows = _useRowSelection.getSelectedRows;
     var triggerChange = function() {
         return onChange === null || onChange === void 0 ? void 0 : onChange(_object_spread({}, state, form.values));
     };
     useEffect(function() {
         onMount === null || onMount === void 0 ? void 0 : onMount(_object_spread({}, state, form.values));
     }, []);
-    var outsideClickRef = useClickOutside(function() {
-        table.resetRowSelection(true);
-    });
     useDidUpdate(function() {
         triggerChange();
-        clearSelection();
+        if (!multiRowSelectionEnabled) {
+            clearSelection();
+        }
     }, [
         state.globalFilter,
         state.sorting,
@@ -133,20 +143,11 @@ export var Table = function(param) {
             });
         });
     }, []);
-    var clearSelection = function() {
-        setState(function(prevState) {
-            return _object_spread_props(_object_spread({}, prevState), {
-                rowSelection: {}
-            });
-        });
-    };
-    var _ref3;
-    var getSelectedRow = useCallback(function() {
-        var _table_getSelectedRowModel_flatRows, _table_getSelectedRowModel_flatRows_;
-        return (_ref3 = (_table_getSelectedRowModel_flatRows = table.getSelectedRowModel().flatRows) === null || _table_getSelectedRowModel_flatRows === void 0 ? void 0 : (_table_getSelectedRowModel_flatRows_ = _table_getSelectedRowModel_flatRows[0]) === null || _table_getSelectedRowModel_flatRows_ === void 0 ? void 0 : _table_getSelectedRowModel_flatRows_.original) !== null && _ref3 !== void 0 ? _ref3 : null;
-    }, [
-        state.rowSelection
-    ]);
+    var outsideClickRef = useClickOutside(function() {
+        if (!multiRowSelectionEnabled) {
+            clearSelection();
+        }
+    });
     if (!data) {
         return /*#__PURE__*/ _jsx(Center, {
             sx: {
@@ -155,31 +156,29 @@ export var Table = function(param) {
             children: /*#__PURE__*/ _jsx(Loader, {})
         });
     }
-    var toggleRowSelection = function(row) {
-        table.setRowSelection(function() {
-            return _define_property({}, row.id, !row.getIsSelected());
-        });
-    };
     var rows = table.getRowModel().rows.map(function(row) {
-        var _ref;
-        var rowChildren = (_ref = getExpandChildren === null || getExpandChildren === void 0 ? void 0 : getExpandChildren(row.original)) !== null && _ref !== void 0 ? _ref : null;
+        var _getExpandChildren;
+        var rowChildren = (_getExpandChildren = getExpandChildren === null || getExpandChildren === void 0 ? void 0 : getExpandChildren(row.original)) !== null && _getExpandChildren !== void 0 ? _getExpandChildren : null;
         return /*#__PURE__*/ _jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ _jsx("tr", {
                     onClick: function() {
-                        return toggleRowSelection(row);
+                        return row.toggleSelected();
                     },
                     onDoubleClick: function() {
                         return doubleClickAction === null || doubleClickAction === void 0 ? void 0 : doubleClickAction(row.original);
                     },
                     className: cx(classes.row, _define_property({}, classes.rowSelected, row.getIsSelected())),
+                    "aria-selected": row.getIsSelected(),
                     children: row.getVisibleCells().map(function(cell) {
                         var size = cell.column.getSize();
                         var width = size !== defaultColumnSizing.size ? size : undefined;
+                        var _obj;
                         return /*#__PURE__*/ _jsx("td", {
                             style: {
                                 width: width
                             },
+                            className: cx((_obj = {}, _define_property(_obj, classes.rowSelectionCheckboxCell, cell.column.id === TableSelectableColumn.id), _define_property(_obj, classes.rowCollapsibleButtonCell, cell.column.id === TableCollapsibleColumn.id), _obj)),
                             children: /*#__PURE__*/ _jsx(Skeleton, {
                                 visible: loading,
                                 sx: !loading ? {
@@ -195,13 +194,15 @@ export var Table = function(param) {
                         colSpan: columns.length + 1,
                         style: {
                             padding: 0,
-                            borderBottomColor: row.getIsExpanded() ? undefined : "transparent"
+                            borderTop: row.getIsExpanded() ? undefined : "none"
                         },
                         children: /*#__PURE__*/ _jsx(Collapse, {
                             in: row.getIsExpanded(),
-                            px: "sm",
-                            py: "xs",
-                            children: rowChildren
+                            children: /*#__PURE__*/ _jsx(Box, {
+                                px: "sm",
+                                py: "xs",
+                                children: rowChildren
+                            })
                         })
                     })
                 }) : null
@@ -217,9 +218,11 @@ export var Table = function(param) {
                 setState: setState,
                 clearFilters: clearFilters,
                 getSelectedRow: getSelectedRow,
+                getSelectedRows: getSelectedRows,
                 clearSelection: clearSelection,
                 form: form,
-                containerRef: outsideClickRef
+                containerRef: outsideClickRef,
+                multiRowSelectionEnabled: multiRowSelectionEnabled
             },
             children: [
                 header,

package/dist/esm/components/table/Table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n ColumnDef,\n defaultColumnSizing,\n flexRender,\n getCoreRowModel,\n Row,\n TableState,\n useReactTable,\n} from '@tanstack/react-table';\nimport {InitialTableState} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} 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 {Th} from './Th';\n\nconst useStyles = createStyles<string, {hasHeader: boolean}>((theme, {hasHeader}, getRef) => ({\n table: {\n width: '100%',\n '& td:first-of-type': {\n paddingLeft: theme.spacing.xl,\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: 12, // skeleton is 11\n '& tr th:first-of-type button': {\n paddingLeft: theme.spacing.xl,\n },\n '& tr th:first-of-type div': {\n paddingLeft: theme.spacing.xl,\n },\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 ref: getRef('rowSelected'),\n },\n\n row: {\n [`&:hover, &.${getRef('rowSelected')}`]: {\n backgroundColor:\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0],\n },\n },\n}));\n\ninterface TableProps<T> {\n /*\n Data to display in the table\n /\n data: T[];\n /\n Columns to display in the table.\n \n @see https://tanstack.com/table/v8/docs/guide/column-defs\n /\n columns: Array<ColumnDef<T>>;\n /\n Function called when the table mounts\n \n @param state the state of the table\n /\n onMount?: onTableChangeEvent;\n /\n Function called when the table should update\n \n @param state the state of the table\n /\n onChange?: onTableChangeEvent;\n /\n Function that generates the expandable content of a row\n * Return null for rows that don't need to be expandable\n \n @param datum the row for which the children should be generated.\n /\n getExpandChildren?: (datum: T) => ReactNode;\n /\n React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n /\n noDataChildren?: ReactNode;\n /\n Whether the table is loading or not\n \n @default false\n /\n loading?: boolean;\n /\n Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n \n @example\n * <Table ...>\n * <Table.Header>\n * <div>Hello</div>\n * </Table.Header>\n * </Table>\n /\n children?: ReactNode;\n\n /\n Initial state of the table\n /\n initialState?: InitialTableState & Partial<TableFormType>;\n /\n Action passed when user double clicks on a row\n */\n doubleClickAction?: (datum: T) => void;\n}\n\ninterface TableType {\n <T>(props: TableProps<T>): ReactElement;\n Actions: typeof TableActions;\n Filter: typeof TableFilter;\n Footer: typeof TableFooter;\n Header: typeof TableHeader;\n Pagination: typeof TablePagination;\n PerPage: typeof TablePerPage;\n Predicate: typeof TablePredicate;\n CollapsibleColumn: typeof TableCollapsibleColumn;\n DateRangePicker: typeof TableDateRangePicker;\n}\n\nexport const Table: TableType = <T,>({\n data,\n noDataChildren,\n getExpandChildren,\n initialState = {},\n columns,\n onMount,\n onChange,\n children,\n loading = false,\n doubleClickAction,\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\n const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n const form = useForm<TableFormType>({\n initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n });\n\n const {cx, classes} = useStyles({hasHeader: !!header});\n\n const table = useReactTable({\n initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n data,\n columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: true,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n });\n const [state, setState] = useState<TableState>(table.initialState);\n table.setOptions((prev) => ({\n ...prev,\n state,\n onStateChange: setState,\n }));\n\n const triggerChange = () => onChange?.({...state, ...form.values});\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n }, []);\n\n const outsideClickRef = useClickOutside(() => {\n table.resetRowSelection(true);\n });\n\n useDidUpdate(() => {\n triggerChange();\n clearSelection();\n }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('predicates', {});\n setState((prevState) => ({...prevState, globalFilter: ''}));\n }, []);\n\n const clearSelection = () => {\n setState((prevState) => ({...prevState, rowSelection: {}}));\n };\n\n const getSelectedRow = useCallback(\n () => table.getSelectedRowModel().flatRows?.[0]?.original ?? null,\n [state.rowSelection]\n );\n\n if (!data) {\n return (\n <Center sx={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const toggleRowSelection = (row: Row<T>) => {\n table.setRowSelection(() => ({[row.id]: !row.getIsSelected()}));\n };\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={() => toggleRowSelection(row)}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n return (\n <td key={cell.id} style={{width}}>\n <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Skeleton>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={columns.length + 1}\n style={{padding: 0, borderBottomColor: row.getIsExpanded() ? undefined : 'transparent'}}\n >\n <Collapse in={row.getIsExpanded()} px=\"sm\" py=\"xs\">\n {rowChildren}\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 setState,\n clearFilters,\n getSelectedRow,\n clearSelection,\n form,\n containerRef: outsideClickRef,\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={columns.length}>{noDataChildren}</td>\n </tr>\n )}\n </tbody>\n </MantineTable>\n {footer}\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.DateRangePicker = TableDateRangePicker;\n"],"names":["Box","Center","Collapse","createStyles","Loader","Skeleton","Table","MantineTable","useForm","useClickOutside","useDidUpdate","defaultColumnSizing","flexRender","getCoreRowModel","useReactTable","defaultsDeep","Children","Fragment","useCallback","useEffect","useState","TableActions","TableCollapsibleColumn","TableContext","TableDateRangePicker","TableFilter","TableFooter","TableHeader","TablePagination","TablePerPage","TablePredicate","Th","useStyles","theme","getRef","hasHeader","table","width","paddingLeft","spacing","xl","header","position","top","backgroundColor","colorScheme","black","white","transition","zIndex","content","left","right","bottom","borderBottom","colors","gray","rowSelected","ref","row","fn","rgba","primaryColor","data","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","convertedChildren","toArray","find","child","type","footer","predicates","dateRange","initialStateWithoutForm","form","initialValues","cx","classes","pagination","pageSize","DEFAULT_SIZE","manualPagination","getRowCanExpand","original","state","setState","setOptions","prev","onStateChange","triggerChange","values","outsideClickRef","resetRowSelection","clearSelection","globalFilter","sorting","clearFilters","setFieldValue","prevState","rowSelection","getSelectedRow","getSelectedRowModel","flatRows","sx","flexGrow","toggleRowSelection","setRowSelection","id","getIsSelected","rows","getRowModel","map","rowChildren","tr","onClick","onDoubleClick","className","getVisibleCells","cell","size","column","getSize","undefined","td","style","visible","borderRadius","columnDef","getContext","colSpan","length","padding","borderBottomColor","getIsExpanded","in","px","py","Provider","value","containerRef","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","tbody","Actions","Filter","Footer","Header","Pagination","Predicate","PerPage","CollapsibleColumn","DateRangePicker"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n ColumnDef,\n defaultColumnSizing,\n flexRender,\n getCoreRowModel,\n Row,\n TableState,\n useReactTable,\n} from '@tanstack/react-table';\nimport {CoreOptions, InitialTableState} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} 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\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 },\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: 12, // skeleton is 11\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 rowSelectionCheckboxCell: {\n verticalAlign: 'middle',\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\ninterface TableProps<T> {\n /\n Data to display in the table\n /\n data: T[];\n /\n Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n /\n getRowId?: CoreOptions<T>['getRowId'];\n /\n Columns to display in the table.\n \n @see https://tanstack.com/table/v8/docs/guide/column-defs\n /\n columns: Array<ColumnDef<T>>;\n /\n Function called when the table mounts\n \n @param state the state of the table\n /\n onMount?: onTableChangeEvent;\n /\n Function called when the table should update\n \n @param state the state of the table\n /\n onChange?: onTableChangeEvent;\n /\n Function that generates the expandable content of a row\n * Return null for rows that don't need to be expandable\n \n @param datum the row for which the children should be generated.\n /\n getExpandChildren?: (datum: T) => ReactNode;\n /\n React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n /\n noDataChildren?: ReactNode;\n /\n Whether the table is loading or not\n \n @default false\n /\n loading?: boolean;\n /\n Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n \n @example\n * <Table ...>\n * <Table.Header>\n * <div>Hello</div>\n * </Table.Header>\n * </Table>\n /\n children?: ReactNode;\n\n /\n Initial state of the table\n /\n initialState?: InitialTableState & Partial<TableFormType>;\n /\n Action passed when user double clicks on a row\n /\n doubleClickAction?: (datum: T) => void;\n /\n Whether the user can select multiple rows in order to perform actions in bulk\n \n @default false\n */\n multiRowSelectionEnabled?: boolean;\n}\n\ninterface TableType {\n <T>(props: TableProps<T>): ReactElement;\n Actions: typeof TableActions;\n Filter: typeof TableFilter;\n Footer: typeof TableFooter;\n Header: typeof TableHeader;\n Pagination: typeof TablePagination;\n PerPage: typeof TablePerPage;\n Predicate: typeof TablePredicate;\n DateRangePicker: typeof TableDateRangePicker;\n CollapsibleColumn: typeof TableCollapsibleColumn;\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}: 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\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: true,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n });\n const [state, setState] = useState<TableState>(table.initialState);\n table.setOptions((prev) => ({\n ...prev,\n state,\n onStateChange: setState,\n }));\n const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\n\n const triggerChange = () => onChange?.({...state, ...form.values});\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('predicates', {});\n setState((prevState) => ({...prevState, globalFilter: ''}));\n }, []);\n\n const outsideClickRef = useClickOutside(() => {\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\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\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]: row.getIsSelected()})}\n aria-selected={row.getIsSelected()}\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.rowSelectionCheckboxCell]: cell.column.id === TableSelectableColumn.id,\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n >\n <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Skeleton>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={columns.length + 1}\n style={{padding: 0, borderTop: row.getIsExpanded() ? undefined : 'none'}}\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 setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\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={columns.length}>{noDataChildren}</td>\n </tr>\n )}\n </tbody>\n </MantineTable>\n {footer}\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.DateRangePicker = TableDateRangePicker;\n"],"names":["Box","Center","Collapse","createStyles","Loader","Skeleton","Table","MantineTable","useForm","useClickOutside","useDidUpdate","defaultColumnSizing","flexRender","getCoreRowModel","useReactTable","defaultsDeep","Children","Fragment","useCallback","useEffect","useState","TableActions","TableCollapsibleColumn","TableContext","TableDateRangePicker","TableFilter","TableFooter","TableHeader","TablePagination","TablePerPage","TablePredicate","TableSelectableColumn","Th","useRowSelection","useStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowSelectionCheckboxCell","verticalAlign","rowCollapsibleButtonCell","textAlign","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","convertedChildren","toArray","find","child","type","footer","predicates","dateRange","initialStateWithoutForm","form","initialValues","cx","classes","pagination","pageSize","DEFAULT_SIZE","concat","manualPagination","enableMultiRowSelection","getRowCanExpand","original","state","setState","setOptions","prev","onStateChange","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","globalFilter","sorting","clearFilters","setFieldValue","prevState","outsideClickRef","sx","flexGrow","rows","getRowModel","map","rowChildren","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","td","style","id","visible","borderRadius","columnDef","getContext","colSpan","length","padding","borderTop","getIsExpanded","in","px","py","ref","Provider","value","containerRef","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","tbody","Actions","Filter","Footer","Header","Pagination","Predicate","PerPage","CollapsibleColumn","DateRangePicker"],"mappings":"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"}

package/dist/esm/components/table/TableActions.js CHANGED Viewed

@@ -2,13 +2,13 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useTable } from "./useTable";
 export var TableActions = function(param) {
     var children = param.children;
-    var getSelectedRow = useTable().getSelectedRow;
-    var selectedRow = getSelectedRow();
-    if (!selectedRow) {
+    var _useTable = useTable(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled;
+    var selectedRows = getSelectedRows();
+    if (selectedRows.length <= 0) {
         return null;
     }
     return /*#__PURE__*/ _jsx(_Fragment, {
-        children: children(selectedRow)
+        children: children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])
     });
 };

package/dist/esm/components/table/TableActions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {ReactElement, ReactNode} from 'react';\nimport {useTable} from './useTable';\n\ninterface TableActionsProps<T> {\n /*\n Function that return components for the selected row\n \n @param datum the data of the selected row\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;\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\n const {~~getSelectedRow~~} = useTable();\n const ~~selectedRow~~ = ~~getSelectedRow~~();\n\n if (~~!selectedRow~~) {\n return null;\n }\n\n return <>{children(~~selectedRow~~)}</>;\n};\n"],"names":["useTable","TableActions","children","~~getSelectedRow~~","~~selectedRow~~"],"mappings":"AAAA;AACA,SAAQA,QAAQ,QAAO,aAAa;AAyBpC,OAAO,IAAMC,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,~~IAAM~~,~~AAACC~~,~~iBAAkBH~~,~~WAAlBG~~;~~IACP~~,IAAMC,~~cAAcD~~;~~IAEpB~~,IAAI,~~CAACC,aAAa~~;~~QACd~~,OAAO,IAAI;IACf,CAAC;IAED,qBAAO;~~kBAAGF~~,SAASE;;~~AACvB~~,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {ReactElement, ReactNode} from 'react';\nimport {useTable} from './useTable';\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();\n const selectedRows = getSelectedRows();\n\n if (selectedRows.length <= 0) {\n return null;\n }\n\n return <>{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</>;\n};\n"],"names":["useTable","TableActions","children","getSelectedRows","multiRowSelectionEnabled","selectedRows","length"],"mappings":"AAAA;AACA,SAAQA,QAAQ,QAAO,aAAa;AAyBpC,OAAO,IAAMC,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAoDF,YAAAA,YAA7CG,kBAA6CH,UAA7CG,iBAAiBC,2BAA4BJ,UAA5BI;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO,IAAI;IACf,CAAC;IAED,qBAAO;kBAAGJ,SAASE,2BAA2BC,eAAeA,YAAY,CAAC,EAAE;;AAChF,EAAE"}

package/dist/esm/components/table/TableCollapsibleColumn.js CHANGED Viewed

@@ -2,11 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ArrowHeadDownSize24Px, ArrowHeadUpSize24Px } from "@coveord/plasma-react-icons";
 import { Button } from "@mantine/core";
 /**
- * Generic column to use when your table need collapsible rows
+ * Generic column to use when your table needs collapsible rows
  */ export var TableCollapsibleColumn = {
     id: "collapsible",
-    header: "",
     enableSorting: false,
+    header: "",
     cell: function(info) {
         var handler = info.row.getToggleExpandedHandler();
         var onClick = function(e) {

package/dist/esm/components/table/TableCollapsibleColumn.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {Button} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\nimport {MouseEvent as ReactMouseEvent} from 'react';\n\n/*\n Generic column to use when your table ~~need~~ collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n id: 'collapsible',\n ~~header~~: '',\n ~~enableSorting~~: ~~false~~,\n cell: (info) => {\n const handler = info.row.getToggleExpandedHandler();\n const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n handler();\n };\n\n return info.row.getCanExpand() ? (\n <Button onClick={onClick} variant=\"subtle\" size=\"xs\">\n {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n </Button>\n ) : null;\n },\n};\n"],"names":["ArrowHeadDownSize24Px","ArrowHeadUpSize24Px","Button","TableCollapsibleColumn","id","~~header~~","~~enableSorting~~","cell","info","handler","row","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","variant","size","getIsExpanded"],"mappings":"AAAA;AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,MAAM,QAAO,gBAAgB;AAIrC;;CAEC,GACD,OAAO,IAAMC,yBAA6C;IACtDC,IAAI;IACJC,~~QAAQ;IACRC,~~eAAe,KAAK;IACpBC,MAAM,SAACC,MAAS;QACZ,IAAMC,UAAUD,KAAKE,GAAG,CAACC,wBAAwB;QACjD,IAAMC,UAAU,SAACC,GAA0C;YACvDA,EAAEC,eAAe;YACjBL;QACJ;QAEA,OAAOD,KAAKE,GAAG,CAACK,YAAY,mBACxB,KAACb;YAAOU,SAASA;YAASI,SAAQ;YAASC,MAAK;sBAC3CT,KAAKE,GAAG,CAACQ,aAAa,mBAAK,KAACjB,yCAAyB,KAACD,0BAAwB;aAEnF,IAAI;IACZ;AACJ,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {Button} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\nimport {MouseEvent as ReactMouseEvent} from 'react';\n\n/*\n Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n id: 'collapsible',\n enableSorting: false,\n header: '',\n cell: (info) => {\n const handler = info.row.getToggleExpandedHandler();\n const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n handler();\n };\n\n return info.row.getCanExpand() ? (\n <Button onClick={onClick} variant=\"subtle\" size=\"xs\">\n {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n </Button>\n ) : null;\n },\n};\n"],"names":["ArrowHeadDownSize24Px","ArrowHeadUpSize24Px","Button","TableCollapsibleColumn","id","enableSorting","header","cell","info","handler","row","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","variant","size","getIsExpanded"],"mappings":"AAAA;AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,MAAM,QAAO,gBAAgB;AAIrC;;CAEC,GACD,OAAO,IAAMC,yBAA6C;IACtDC,IAAI;IACJC,eAAe,KAAK;IACpBC,QAAQ;IACRC,MAAM,SAACC,MAAS;QACZ,IAAMC,UAAUD,KAAKE,GAAG,CAACC,wBAAwB;QACjD,IAAMC,UAAU,SAACC,GAA0C;YACvDA,EAAEC,eAAe;YACjBL;QACJ;QAEA,OAAOD,KAAKE,GAAG,CAACK,YAAY,mBACxB,KAACb;YAAOU,SAASA;YAASI,SAAQ;YAASC,MAAK;sBAC3CT,KAAKE,GAAG,CAACQ,aAAa,mBAAK,KAACjB,yCAAyB,KAACD,0BAAwB;aAEnF,IAAI;IACZ;AACJ,EAAE"}

package/dist/esm/components/table/TableContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {DateRangePickerValue} from '@mantine/dates';\nimport {UseFormReturnType} from '@mantine/form';\nimport {TableState} from '@tanstack/react-table';\nimport {createContext, Dispatch, RefObject} from 'react';\n\nexport type onTableChangeEvent = (params: TableState & TableFormType) => void;\n\nexport type TableFormType = {\n /*\n Object containing the table predicates and their selected values\n \n @example {type: \"LONG\", origin: \"system\"}\n /\n predicates: Record<string, string>;\n /\n Selected date range in the table\n \n @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]\n /\n dateRange: DateRangePickerValue;\n};\n\ntype TableContextType = {\n /\n Function to call when the table needs an update\n /\n onChange: () => void;\n /\n Internal state of the table\n \n @see https://tanstack.com/table/v8/docs/api/core/table#state\n /\n state: TableState;\n /\n Function to update the table state\n /\n setState: Dispatch<(prevState: TableState) => TableState>;\n /\n Function that clears the filter and predicates\n /\n clearFilters: () => void;\n /\n Function that returns the selected row if any\n /\n getSelectedRow: () => any \| null;\n /\n Function that clear the selected row\n /\n clearSelection: () => void;\n /\n Form used to handle predicates and dateRange\n /\n form: UseFormReturnType<TableFormType>;\n /\n Table container ref\n */\n containerRef: RefObject<HTMLDivElement>;\n};\n\nexport const TableContext = createContext<TableContextType \| null>(null);\n"],"names":["createContext","TableContext"],"mappings":"AAGA,SAAQA,aAAa,QAA4B,QAAQ;~~AAwDzD~~,OAAO,IAAMC,6BAAeD,cAAuC,IAAI,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {DateRangePickerValue} from '@mantine/dates';\nimport {UseFormReturnType} from '@mantine/form';\nimport {TableState} from '@tanstack/react-table';\nimport {createContext, Dispatch, RefObject} from 'react';\n\nexport type onTableChangeEvent = (params: TableState & TableFormType) => void;\n\nexport type TableFormType = {\n /*\n Object containing the table predicates and their selected values\n \n @example {type: \"LONG\", origin: \"system\"}\n /\n predicates: Record<string, string>;\n /\n Selected date range in the table\n \n @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]\n /\n dateRange: DateRangePickerValue;\n};\n\ntype TableContextType = {\n /\n Function to call when the table needs an update\n /\n onChange: () => void;\n /\n Internal state of the table\n \n @see https://tanstack.com/table/v8/docs/api/core/table#state\n /\n state: TableState;\n /\n Function to update the table state\n /\n setState: Dispatch<(prevState: TableState) => TableState>;\n /\n Function that clears the filter and predicates\n /\n clearFilters: () => void;\n /\n Function that returns the selected row if any.\n /\n getSelectedRow: () => any \| null;\n /\n Function that returns an array of the selected rows. Most useful when multi row selection is enabled.\n /\n getSelectedRows: () => any[];\n /\n Function that clear the selected row\n /\n clearSelection: () => void;\n /\n Form used to handle predicates and dateRange\n /\n form: UseFormReturnType<TableFormType>;\n /\n Table container ref\n */\n containerRef: RefObject<HTMLDivElement>;\n multiRowSelectionEnabled: boolean;\n};\n\nexport const TableContext = createContext<TableContextType \| null>(null);\n"],"names":["createContext","TableContext"],"mappings":"AAGA,SAAQA,aAAa,QAA4B,QAAQ;AA6DzD,OAAO,IAAMC,6BAAeD,cAAuC,IAAI,EAAE"}

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

@@ -34,6 +34,10 @@ export var TableFilter = function(_param) {
         var value = event.currentTarget.value;
         setState(function(prevState) {
             return _object_spread_props(_object_spread({}, prevState), {
+                pagination: prevState.pagination ? {
+                    pageIndex: 0,
+                    pageSize: prevState.pagination.pageSize
+                } : prevState.pagination,
                 globalFilter: value
             });
         });

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

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

package/dist/esm/components/table/TableHeader.js CHANGED Viewed

@@ -1,8 +1,10 @@
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createStyles, Group } from "@mantine/core";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CrossSize16Px } from "@coveord/plasma-react-icons";
+import { Button, createStyles, Group, Space, Tooltip } from "@mantine/core";
+import { useTable } from "./useTable";
 var useStyles = createStyles(function(theme) {
     return {
         root: {
@@ -10,7 +12,7 @@ var useStyles = createStyles(function(theme) {
             top: 0,
             zIndex: 13,
             backgroundColor: theme.colors.gray[1],
-            borderBottom: "1px solid ".concat(theme.colors.gray[4])
+            borderBottom: "1px solid ".concat(theme.colors.gray[3])
         }
     };
 });
@@ -21,18 +23,48 @@ export var TableHeader = function(_param) {
         "unstyled",
         "children"
     ]);
+    var _useTable = useTable(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, clearSelection = _useTable.clearSelection;
     var classes = useStyles(null, {
         name: "TableHeader",
         classNames: classNames,
         styles: styles,
         unstyled: unstyled
     }).classes;
-    return /*#__PURE__*/ _jsx(Group, _object_spread_props(_object_spread({
+    var selectedRows = getSelectedRows();
+    return multiRowSelectionEnabled ? /*#__PURE__*/ _jsxs(Group, {
+        position: "apart",
+        className: classes.root,
+        children: [
+            selectedRows.length > 0 ? /*#__PURE__*/ _jsx(Tooltip, {
+                label: "Unselect all",
+                children: /*#__PURE__*/ _jsxs(Button, {
+                    onClick: clearSelection,
+                    ml: "lg",
+                    variant: "subtle",
+                    leftIcon: /*#__PURE__*/ _jsx(CrossSize16Px, {
+                        height: 16
+                    }),
+                    children: [
+                        selectedRows.length,
+                        " selected"
+                    ]
+                })
+            }) : /*#__PURE__*/ _jsx(Space, {}),
+            /*#__PURE__*/ _jsx(Group, _object_spread_props(_object_spread({
+                position: "right",
+                spacing: "lg",
+                px: "md",
+                py: "sm"
+            }, others), {
+                children: children
+            }))
+        ]
+    }) : /*#__PURE__*/ _jsx(Group, _object_spread_props(_object_spread({
         position: "right",
         spacing: "lg",
-        className: classes.root,
         px: "md",
-        py: "sm"
+        py: "sm",
+        className: classes.root
     }, others), {
         children: children
     }));

package/dist/esm/components/table/TableHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {createStyles, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nconst useStyles = createStyles((theme) => ({\n root: {\n position: 'sticky',\n top: 0,\n zIndex: 13, // skeleton is 11\n backgroundColor: theme.colors.gray[1],\n borderBottom: `1px solid ${theme.colors.gray[4]}`,\n },\n}));\n\ntype TableHeaderStylesNames = Selectors<typeof useStyles>;\ninterface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {\n /* Children of header (ie: actions, datepicker, etc.) */\n children?: ReactNode;\n}\nexport const TableHeader: FunctionComponent<TableHeaderProps> = ({\n classNames,\n styles,\n unstyled,\n children,\n ...others\n}) => {\n const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n return (\n <Group position=\"~~right~~\" ~~spacing~~=\"lg\" ~~className~~={~~classes~~.~~root~~} px=\"md\" py=\"sm\" {...others}>\n {children}\n </Group>\n );\n};\n"],"names":["createStyles","Group","useStyles","theme","root","position","top","zIndex","backgroundColor","colors","gray","borderBottom","TableHeader","classNames","styles","unstyled","children","others","classes","name","~~spacing~~","className","px","py"],"mappings":"AAAA;;;;AAAA,SAAQA,YAAY,EAAgBC,KAAK,~~QAAkB~~,gBAAgB;~~AAG3E~~,IAAMC,~~YAAYF~~,aAAa,~~SAACG~~;WAAW;QACvCC,MAAM;YACFC,UAAU;YACVC,KAAK;YACLC,QAAQ;YACRC,iBAAiBL,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;YACrCC,cAAc,AAAC,aAAiC,OAArBR,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;QACnD;IACJ;;AAOA,OAAO,IAAME,cAAmD,iBAM1D;QALFC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,~~AAACE~~,~~UAAWhB~~,UAAU,IAAI,EAAE;~~QAACiB~~,MAAM;~~QAAeN~~,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,~~GAA7EG~~;IACP,~~qBACI~~,~~KAACjB~~;~~QAAMI~~,~~UAAS~~;~~QAAQe~~,~~SAAQ~~;~~QAAKC~~,WAAWH,~~QAAQd~~,IAAI;~~QAAEkB~~,IAAG;QAAKC,IAAG;~~OAASN~~;kBAC7ED~~;;AAGb~~,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {Button, createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n root: {\n position: 'sticky',\n top: 0,\n zIndex: 13, // skeleton is 11\n backgroundColor: theme.colors.gray[1],\n borderBottom: `1px solid ${theme.colors.gray[3]}`,\n },\n}));\n\ntype TableHeaderStylesNames = Selectors<typeof useStyles>;\ninterface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {\n /* Children of header (ie: actions, datepicker, etc.) */\n children?: ReactNode;\n}\nexport const TableHeader: FunctionComponent<TableHeaderProps> = ({\n classNames,\n styles,\n unstyled,\n children,\n ...others\n}) => {\n const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();\n const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n const selectedRows = getSelectedRows();\n return multiRowSelectionEnabled ? (\n <Group position=\"apart\" className={classes.root}>\n {selectedRows.length > 0 ? (\n <Tooltip label=\"Unselect all\">\n <Button onClick={clearSelection} ml=\"lg\" variant=\"subtle\" leftIcon={<CrossSize16Px height={16} />}>\n {selectedRows.length} selected\n </Button>\n </Tooltip>\n ) : (\n <Space />\n )}\n <Group position=\"right\" spacing=\"lg\" px=\"md\" py=\"sm\" {...others}>\n {children}\n </Group>\n </Group>\n ) : (\n <Group position=\"right\" spacing=\"lg\" px=\"md\" py=\"sm\" className={classes.root} {...others}>\n {children}\n </Group>\n );\n};\n"],"names":["CrossSize16Px","Button","createStyles","Group","Space","Tooltip","useTable","useStyles","theme","root","position","top","zIndex","backgroundColor","colors","gray","borderBottom","TableHeader","classNames","styles","unstyled","children","others","getSelectedRows","multiRowSelectionEnabled","clearSelection","classes","name","selectedRows","className","length","label","onClick","ml","variant","leftIcon","height","spacing","px","py"],"mappings":"AAAA;;;;AAAA,SAAQA,aAAa,QAAO,8BAA8B;AAC1D,SAAQC,MAAM,EAAEC,YAAY,EAAgBC,KAAK,EAAaC,KAAK,EAAEC,OAAO,QAAO,gBAAgB;AAGnG,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYL,aAAa,SAACM;WAAW;QACvCC,MAAM;YACFC,UAAU;YACVC,KAAK;YACLC,QAAQ;YACRC,iBAAiBL,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;YACrCC,cAAc,AAAC,aAAiC,OAArBR,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;QACnD;IACJ;;AAOA,OAAO,IAAME,cAAmD,iBAM1D;QALFC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAoEf,YAAAA,YAA7DiB,kBAA6DjB,UAA7DiB,iBAAiBC,2BAA4ClB,UAA5CkB,0BAA0BC,iBAAkBnB,UAAlBmB;IAClD,IAAM,AAACC,UAAWnB,UAAU,IAAI,EAAE;QAACoB,MAAM;QAAeT,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EM;IACP,IAAME,eAAeL;IACrB,OAAOC,yCACH,MAACrB;QAAMO,UAAS;QAAQmB,WAAWH,QAAQjB,IAAI;;YAC1CmB,aAAaE,MAAM,GAAG,kBACnB,KAACzB;gBAAQ0B,OAAM;0BACX,cAAA,MAAC9B;oBAAO+B,SAASP;oBAAgBQ,IAAG;oBAAKC,SAAQ;oBAASC,wBAAU,KAACnC;wBAAcoC,QAAQ;;;wBACtFR,aAAaE,MAAM;wBAAC;;;+BAI7B,KAAC1B,UACJ;0BACD,KAACD;gBAAMO,UAAS;gBAAQ2B,SAAQ;gBAAKC,IAAG;gBAAKC,IAAG;eAASjB;0BACpDD;;;uBAIT,KAAClB;QAAMO,UAAS;QAAQ2B,SAAQ;QAAKC,IAAG;QAAKC,IAAG;QAAKV,WAAWH,QAAQjB,IAAI;OAAMa;kBAC7ED;OAER;AACL,EAAE"}