@coveord/plasma-mantine 49.3.4 → 49.3.6

package/dist/cjs/components/collection/CollectionItem.js

@@ -21,6 +21,9 @@ var _collectionStyles = /*#__PURE__*/ _interopRequireDefault(require("./Collecti
 var RemoveButton = function(param) {
     var onClick = param.onClick;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.ActionIcon, {
+        sx: {
+            alignSelf: "center"
+        },
         variant: "subtle",
         onClick: onClick,
         color: "action",
@@ -84,6 +87,9 @@ var DraggableCollectionItem = function(param) {
                 className: cx(classes.item, _defineProperty({}, classes.itemDragging, isDragging)),
                 children: [
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", _objectSpreadProps(_objectSpread({}, provided.dragHandleProps), {
+                        style: {
+                            alignSelf: "center"
+                        },
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.DragAndDropSize16Px, {
                             height: 16
                         })

package/dist/cjs/components/collection/CollectionItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize16Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\nimport {Draggable} from 'react-beautiful-dnd';\n\nimport useStyles from './Collection.styles';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {\n    index: number;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n    <ActionIcon variant=\"subtle\" onClick={onClick} color=\"action\">\n        <RemoveSize16Px height={16} />\n    </ActionIcon>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group className={cx(classes.item)}>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    children,\n    styles,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    return <Group className={cx(classes.item)}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    index,\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n\n    return (\n        <Draggable index={index} draggableId={index.toString()}>\n            {(provided, {isDragging}) => (\n                <Group\n                    ref={provided.innerRef}\n                    {...provided.draggableProps}\n                    className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n                >\n                    <div {...provided.dragHandleProps}>\n                        <DragAndDropSize16Px height={16} />\n                    </div>\n                    {children}\n                    {removeButton}\n                </Group>\n            )}\n        </Draggable>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["CollectionItem","RemoveButton","onClick","ActionIcon","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","useStyles","name","classes","cx","removeButton","Group","className","item","DisabledCollectionItem","DraggableCollectionItem","index","Draggable","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","DragAndDropSize16Px","draggable","disabled","otherProps"],"mappings":";;;;+BAkFaA;;;eAAAA;;;;;;;;;gCAlFqC;oBACO;iCAEjC;qEAEF;AAatB,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,SAAQ;QAASF,SAASA;QAASG,OAAM;kBACjD,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACZ;QAAaC,SAASW;uBAAe,qBAACL,4BAA0B;IAE9G,qBACI,sBAACc,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BR;YACAK;;;AAGb;AAEA,IAAMI,yBAA0F,gBAG1F;QAFFT,iBAAAA,UACAD,eAAAA;IAEA,IAAsBE,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,qBAAO,qBAACE,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;kBAAIR;;AAChD;AAEA,IAAMU,0BAA2F,gBAM3F;QALFC,cAAAA,OACAd,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACZ;QAAaC,SAASW;SAAe,IAAI;IAEvF,qBACI,qBAACe,4BAAS;QAACD,OAAOA;QAAOE,aAAaF,MAAMG,QAAQ;kBAC/C,SAACC;gBAAWC,mBAAAA;iCACT,sBAACV,WAAK;gBACFW,KAAKF,SAASG,QAAQ;eAClBH,SAASI,cAAc;gBAC3BZ,WAAWH,GAAGD,QAAQK,IAAI,EAAG,oBAACL,QAAQiB,YAAY,EAAGJ;;kCAErD,qBAACvB,4CAAQsB,SAASM,eAAe;kCAC7B,cAAA,qBAACC,qCAAmB;4BAAC/B,QAAQ;;;oBAEhCS;oBACAK;;;;;AAKrB;AAEO,IAAMrB,iBAA4E,iBAInF;QAHFuC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACf,0CAA2BgB;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,qBAACb,2CAA4Be;IACxC,CAAC;IACD,qBAAO,qBAAC7B,wCAAyB6B;AACrC"}
+{"version":3,"sources":["../../../../src/components/collection/CollectionItem.tsx"],"sourcesContent":["import {DragAndDropSize16Px, RemoveSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\nimport {Draggable} from 'react-beautiful-dnd';\n\nimport useStyles from './Collection.styles';\n\ninterface CollectionItemProps extends CollectionItemSharedProps {\n    draggable?: boolean;\n    disabled: boolean;\n}\n\ninterface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {\n    index: number;\n    onRemove?: React.MouseEventHandler<HTMLButtonElement>;\n    removable?: boolean;\n}\n\nconst RemoveButton: FunctionComponent<{\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n}> = ({onClick}) => (\n    <ActionIcon sx={{alignSelf: 'center'}} variant=\"subtle\" onClick={onClick} color=\"action\">\n        <RemoveSize16Px height={16} />\n    </ActionIcon>\n);\n\nconst RemoveButtonPlaceholder = () => <div style={{width: 28}} />;\n\nconst StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;\n\n    return (\n        <Group className={cx(classes.item)}>\n            {children}\n            {removeButton}\n        </Group>\n    );\n};\n\nconst DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    children,\n    styles,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    return <Group className={cx(classes.item)}>{children}</Group>;\n};\n\nconst DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({\n    index,\n    onRemove,\n    removable = true,\n    styles,\n    children,\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'Collection', styles});\n    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;\n\n    return (\n        <Draggable index={index} draggableId={index.toString()}>\n            {(provided, {isDragging}) => (\n                <Group\n                    ref={provided.innerRef}\n                    {...provided.draggableProps}\n                    className={cx(classes.item, {[classes.itemDragging]: isDragging})}\n                >\n                    <div {...provided.dragHandleProps} style={{alignSelf: 'center'}}>\n                        <DragAndDropSize16Px height={16} />\n                    </div>\n                    {children}\n                    {removeButton}\n                </Group>\n            )}\n        </Draggable>\n    );\n};\n\nexport const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({\n    draggable,\n    disabled,\n    ...otherProps\n}) => {\n    if (disabled) {\n        return <DisabledCollectionItem {...otherProps} />;\n    }\n    if (draggable) {\n        return <DraggableCollectionItem {...otherProps} />;\n    }\n    return <StaticCollectionItem {...otherProps} />;\n};\n"],"names":["CollectionItem","RemoveButton","onClick","ActionIcon","sx","alignSelf","variant","color","RemoveSize16Px","height","RemoveButtonPlaceholder","div","style","width","StaticCollectionItem","onRemove","removable","styles","children","useStyles","name","classes","cx","removeButton","Group","className","item","DisabledCollectionItem","DraggableCollectionItem","index","Draggable","draggableId","toString","provided","isDragging","ref","innerRef","draggableProps","itemDragging","dragHandleProps","DragAndDropSize16Px","draggable","disabled","otherProps"],"mappings":";;;;+BAkFaA;;;eAAAA;;;;;;;;;gCAlFqC;oBACO;iCAEjC;qEAEF;AAatB,IAAMC,eAED;QAAEC,gBAAAA;yBACH,qBAACC,gBAAU;QAACC,IAAI;YAACC,WAAW;QAAQ;QAAGC,SAAQ;QAASJ,SAASA;QAASK,OAAM;kBAC5E,cAAA,qBAACC,gCAAc;YAACC,QAAQ;;;;AAIhC,IAAMC,0BAA0B;yBAAM,qBAACC;QAAIC,OAAO;YAACC,OAAO;QAAE;;;AAE5D,IAAMC,uBAAwF,gBAKxF;QAJFC,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;uBAAe,qBAACL,4BAA0B;IAE9G,qBACI,sBAACc,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;;YAC5BR;YACAK;;;AAGb;AAEA,IAAMI,yBAA0F,gBAG1F;QAFFT,iBAAAA,UACAD,eAAAA;IAEA,IAAsBE,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,qBAAO,qBAACE,WAAK;QAACC,WAAWH,GAAGD,QAAQK,IAAI;kBAAIR;;AAChD;AAEA,IAAMU,0BAA2F,gBAM3F;QALFC,cAAAA,OACAd,iBAAAA,mCACAC,WAAAA,0CAAY,IAAI,qBAChBC,eAAAA,QACAC,iBAAAA;IAEA,IAAsBC,aAAAA,IAAAA,yBAAS,EAAC,IAAI,EAAE;QAACC,MAAM;QAAcH,QAAAA;IAAM,IAA1DI,UAAeF,WAAfE,SAASC,KAAMH,WAANG;IAChB,IAAMC,eAAeP,aAAaD,yBAAW,qBAACd;QAAaC,SAASa;SAAe,IAAI;IAEvF,qBACI,qBAACe,4BAAS;QAACD,OAAOA;QAAOE,aAAaF,MAAMG,QAAQ;kBAC/C,SAACC;gBAAWC,mBAAAA;iCACT,sBAACV,WAAK;gBACFW,KAAKF,SAASG,QAAQ;eAClBH,SAASI,cAAc;gBAC3BZ,WAAWH,GAAGD,QAAQK,IAAI,EAAG,oBAACL,QAAQiB,YAAY,EAAGJ;;kCAErD,qBAACvB,4CAAQsB,SAASM,eAAe;wBAAE3B,OAAO;4BAACP,WAAW;wBAAQ;kCAC1D,cAAA,qBAACmC,qCAAmB;4BAAC/B,QAAQ;;;oBAEhCS;oBACAK;;;;;AAKrB;AAEO,IAAMvB,iBAA4E,iBAInF;QAHFyC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAIA,UAAU;QACV,qBAAO,qBAACf,0CAA2BgB;IACvC,CAAC;IACD,IAAIF,WAAW;QACX,qBAAO,qBAACb,2CAA4Be;IACxC,CAAC;IACD,qBAAO,qBAAC7B,wCAAyB6B;AACrC"}

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

@@ -22,6 +22,7 @@ var _reactTable = require("@tanstack/react-table");
 var _lodashDebounce = /*#__PURE__*/ _interopRequireDefault(require("lodash.debounce"));
 var _lodashDefaultsdeep = /*#__PURE__*/ _interopRequireDefault(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");
@@ -35,48 +36,6 @@ var _tablePredicate = require("./TablePredicate");
 var _tableSelectableColumn = require("./TableSelectableColumn");
 var _th = require("./Th");
 var _useRowSelection = require("./useRowSelection");
-var useStyles = (0, _core.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, th:first-of-type > *": {
-                paddingLeft: theme.spacing.xl
-            },
-            "& tbody td": {
-                verticalAlign: "top"
-            }
-        },
-        header: {
-            position: "sticky",
-            top: hasHeader ? 69 : 0,
-            backgroundColor: theme.colorScheme === "dark" ? theme.black : theme.white,
-            transition: "box-shadow 150ms ease",
-            zIndex: 12,
-            "&::after": {
-                content: '""',
-                position: "absolute",
-                left: 0,
-                right: 0,
-                bottom: 0,
-                borderBottom: "1px solid ".concat(theme.colors.gray[2])
-            }
-        },
-        rowSelected: {
-            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor
-        },
-        rowCollapsibleButtonCell: {
-            textAlign: "right",
-            padding: "".concat(theme.spacing.xs / 2, "px ").concat(theme.spacing.sm, "px !important")
-        },
-        row: {
-            "&:hover": {
-                backgroundColor: rowBackgroundColor
-            }
-        }
-    };
-});
 var Table = function(param) {
     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, _param_options = param.options, options = _param_options === void 0 ? {} : _param_options;
     var _form_values, _form_values_dateRange, _form_values_dateRange1;
@@ -101,7 +60,7 @@ var Table = function(param) {
             ]
         }
     });
-    var _useStyles = useStyles({
+    var _useStyles = (0, _tableStyles.default)({
         hasHeader: !!header,
         multiRowSelectionEnabled: multiRowSelectionEnabled
     }), cx = _useStyles.cx, classes = _useStyles.classes;
@@ -132,7 +91,9 @@ var Table = function(param) {
             onStateChange: setState
         });
     });
-    var _useRowSelection1 = (0, _useRowSelection.useRowSelection)(table), clearSelection = _useRowSelection1.clearSelection, getSelectedRow = _useRowSelection1.getSelectedRow, getSelectedRows = _useRowSelection1.getSelectedRows;
+    var _useRowSelection1 = (0, _useRowSelection.useRowSelection)(table, {
+        multiRowSelectionEnabled: multiRowSelectionEnabled
+    }), clearSelection = _useRowSelection1.clearSelection, getSelectedRow = _useRowSelection1.getSelectedRow, getSelectedRows = _useRowSelection1.getSelectedRows, outsideClickRef = _useRowSelection1.outsideClickRef;
     var _form_values_predicates;
     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];
@@ -166,11 +127,6 @@ var Table = function(param) {
             });
         });
     }, []);
-    var outsideClickRef = (0, _hooks.useClickOutside)(function() {
-        if (!multiRowSelectionEnabled) {
-            clearSelection();
-        }
-    });
     if (!data) {
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Center, {
             sx: {
@@ -182,6 +138,7 @@ var Table = function(param) {
     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, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
@@ -191,8 +148,8 @@ var Table = function(param) {
                     onDoubleClick: function() {
                         return doubleClickAction === null || doubleClickAction === void 0 ? void 0 : doubleClickAction(row.original);
                     },
-                    className: cx(classes.row, _defineProperty({}, classes.rowSelected, row.getIsSelected())),
-                    "aria-selected": row.getIsSelected(),
+                    className: cx(classes.row, _defineProperty({}, 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;
@@ -213,7 +170,7 @@ var Table = function(param) {
                 }),
                 rowChildren ? /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("td", {
-                        colSpan: columns.length + 1,
+                        colSpan: table.getAllColumns().length,
                         style: {
                             padding: 0,
                             borderTop: row.getIsExpanded() ? undefined : "none",
@@ -273,7 +230,7 @@ var Table = function(param) {
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)("tbody", {
                                 children: rows.length ? rows : /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
                                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("td", {
-                                        colSpan: columns.length,
+                                        colSpan: table.getAllColumns().length,
                                         children: noDataChildren
                                     })
                                 })

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

@@ -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 {CoreOptions, InitialTableState, TableOptions} from '@tanstack/table-core';\nimport debounce from 'lodash.debounce';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, 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            '& 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: 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        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,\n        },\n\n        row: {\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n    };\n});\n\nexport interface 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    options?: Omit<\n        Partial<TableOptions<T>>,\n        | 'initialState'\n        | 'data'\n        | 'columns'\n        | 'manualPagination'\n        | 'enableMultiRowSelection'\n        | 'getRowId'\n        | 'getRowCanExpand'\n        | 'enableRowSelection'\n    >;\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    AccordionColumn: typeof TableAccordionColumn;\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    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\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>(table.initialState);\n    table.setOptions((prev) => ({\n        ...prev,\n        state,\n        onStateChange: setState,\n    }));\n    const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\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    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.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={{\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                {!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={columns.length}>{noDataChildren}</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;\n"],"names":["Table","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","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","options","form","convertedChildren","Children","toArray","find","child","type","TableHeader","footer","TableFooter","predicates","dateRange","initialStateWithoutForm","useForm","initialValues","cx","classes","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","original","enableRowSelection","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","isFiltered","globalFilter","Object","keys","values","some","predicate","triggerChange","debounce","useEffect","cancel","useDidUpdate","sorting","clearFilters","useCallback","setFieldValue","prevState","outsideClickRef","useClickOutside","Center","sx","flexGrow","Loader","rows","getRowModel","map","rowChildren","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","defaultColumnSizing","td","style","id","TableCollapsibleColumn","Skeleton","visible","borderRadius","flexRender","columnDef","getContext","colSpan","length","borderTop","getIsExpanded","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"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, Loader, Skeleton, 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, 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 {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\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    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\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    });\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                                <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={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                {!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}>{noDataChildren}</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;\n"],"names":["Table","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","multiRowSelectionEnabled","options","form","convertedChildren","Children","toArray","header","find","child","type","TableHeader","footer","TableFooter","predicates","dateRange","initialStateWithoutForm","useForm","initialValues","useStyles","hasHeader","cx","classes","table","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","undefined","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","sx","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","style","rowCollapsibleButtonCell","id","TableCollapsibleColumn","Skeleton","visible","borderRadius","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"],"mappings":"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"}

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

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _core = require("@mantine/core");
+var useStyles = (0, _core.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, th:first-of-type > *": {
+                paddingLeft: theme.spacing.xl
+            },
+            "& tbody td": {
+                verticalAlign: "top"
+            }
+        },
+        header: {
+            position: "sticky",
+            top: hasHeader ? 69 : 0,
+            backgroundColor: theme.colorScheme === "dark" ? theme.black : theme.white,
+            transition: "box-shadow 150ms ease",
+            zIndex: 12,
+            "&::after": {
+                content: '""',
+                position: "absolute",
+                left: 0,
+                right: 0,
+                bottom: 0,
+                borderBottom: "1px solid ".concat(theme.colors.gray[2])
+            }
+        },
+        rowSelected: {
+            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor
+        },
+        rowCollapsibleButtonCell: {
+            textAlign: "right",
+            padding: "".concat(theme.spacing.xs / 2, "px ").concat(theme.spacing.sm, "px !important")
+        },
+        row: {
+            "&:hover": {
+                backgroundColor: rowBackgroundColor
+            }
+        }
+    };
+});
+var _default = useStyles;
+
+//# sourceMappingURL=Table.styles.js.map

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

@@ -0,0 +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: 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        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !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,GAA4BjC,OAA1BA,MAAMY,OAAO,CAACsB,EAAE,GAAG,GAAE,OAAsB,OAAjBlC,MAAMY,OAAO,CAACuB,EAAE,EAAC;QAC3D;QAEAC,KAAK;YACD,WAAW;gBACPlB,iBAAiBf;YACrB;QACJ;IACJ;AACJ;IAEA,WAAeL"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=Table.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/table/Table.types.ts"],"names":[],"mappings":""}

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

@@ -10,17 +10,17 @@ Object.defineProperty(exports, "TableActions", {
 });
 var _jsxRuntime = require("react/jsx-runtime");
 var _core = require("@mantine/core");
-var _useTable = require("./useTable");
+var _tableContext = require("./TableContext");
 var TableActions = function(param) {
     var children = param.children;
-    var _useTable1 = (0, _useTable.useTable)(), getSelectedRows = _useTable1.getSelectedRows, multiRowSelectionEnabled = _useTable1.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: children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])
+        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';\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 <Group spacing=\"xs\">{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</Group>;\n};\n"],"names":["TableActions","children","useTable","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","Group","spacing"],"mappings":";;;;+BA2BaA;;;eAAAA;;;;oBA3BO;wBAEG;AAyBhB,IAAMA,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAoDC,aAAAA,IAAAA,kBAAQ,KAArDC,kBAA6CD,WAA7CC,iBAAiBC,2BAA4BF,WAA5BE;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO,IAAI;IACf,CAAC;IAED,qBAAO,qBAACC,WAAK;QAACC,SAAQ;kBAAMP,SAASG,2BAA2BC,eAAeA,YAAY,CAAC,EAAE;;AAClG"}
+{"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"}

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

@@ -2,13 +2,28 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TableContext", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TableContext: function() {
         return TableContext;
+    },
+    useTable: function() {
+        return useTable;
     }
 });
 var _react = require("react");
 var TableContext = /*#__PURE__*/ (0, _react.createContext)(null);
+var useTable = function() {
+    var ctx = (0, _react.useContext)(TableContext);
+    if (ctx === null) {
+        throw new Error("useTable must be used inside of a TableContext.Provider");
+    }
+    return ctx;
+};
 
 //# sourceMappingURL=TableContext.js.map

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

@@ -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     * Whether the table currently as any kind of filter applied.\n     * Useful to determine if the noDataChildren is an empty state or just the result of a filter\n     */\n    isFiltered: boolean;\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    /**\n     * Function that returns the number of pages\n     */\n    getPageCount: () => number;\n};\n\nexport const TableContext = createContext<TableContextType | null>(null);\n"],"names":["TableContext","createContext"],"mappings":";;;;+BA0EaA;;;eAAAA;;;qBAvEoC;AAuE1C,IAAMA,6BAAeC,IAAAA,oBAAa,EAA0B,IAAI"}
+{"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {createContext, useContext} from 'react';\n\nimport {TableContextType} from './Table.types';\n\nexport const TableContext = createContext<TableContextType<any> | null>(null);\n\nexport const useTable = <T,>(): TableContextType<T> => {\n    const ctx = useContext(TableContext);\n    if (ctx === null) {\n        throw new Error('useTable must be used inside of a TableContext.Provider');\n    }\n\n    return ctx;\n};\n"],"names":["TableContext","useTable","createContext","ctx","useContext","Error"],"mappings":";;;;;;;;;;;IAIaA,YAAY;eAAZA;;IAEAC,QAAQ;eAARA;;;qBAN2B;AAIjC,IAAMD,6BAAeE,IAAAA,oBAAa,EAA+B,IAAI;AAErE,IAAMD,WAAW,WAA+B;IACnD,IAAME,MAAMC,IAAAA,iBAAU,EAACJ;IACvB,IAAIG,QAAQ,IAAI,EAAE;QACd,MAAM,IAAIE,MAAM,2DAA2D;IAC/E,CAAC;IAED,OAAOF;AACX"}

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

@@ -17,11 +17,11 @@ var _dayjs = /*#__PURE__*/ _interopRequireDefault(require("dayjs"));
 var _react = require("react");
 var _button = require("../button");
 var _dateRangePicker = require("../date-range-picker");
-var _useTable = require("./useTable");
+var _tableContext = require("./TableContext");
 var TableDateRangePicker = function(param) {
     var _param_presets = param.presets, presets = _param_presets === void 0 ? {} : _param_presets, rangeCalendarProps = param.rangeCalendarProps;
     var _useState = _slicedToArray((0, _react.useState)(false), 2), opened = _useState[0], setOpened = _useState[1];
-    var form = (0, _useTable.useTable)().form;
+    var form = (0, _tableContext.useTable)().form;
     var onApply = function(dates) {
         form.setFieldValue("dateRange", dates);
         setOpened(false);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Popover} from '@mantine/core';\nimport {DateRangePickerValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';\nimport {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';\nimport {useTable} from './useTable';\n\ninterface TableDateRangePickerProps\n    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n    /**\n     * An object containing date presets.\n     * If empty the preset dropdown won't be shown\n     *\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     * @default {}\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n    presets = {},\n    rangeCalendarProps,\n}) => {\n    const [opened, setOpened] = useState(false);\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        form.setFieldValue('dateRange', dates);\n        setOpened(false);\n    };\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n    return (\n        <>\n            {formatedRange}\n            <Popover opened={opened} onChange={setOpened}>\n                <Popover.Target>\n                    <Button variant=\"outline\" color=\"gray\" onClick={() => setOpened(true)} px=\"xs\">\n                        <CalendarSize24Px width={24} height={24} />\n                    </Button>\n                </Popover.Target>\n                <Popover.Dropdown p={0}>\n                    <DateRangePickerInlineCalendar\n                        initialRange={form.values.dateRange}\n                        onApply={onApply}\n                        onCancel={onCancel}\n                        presets={presets}\n                        rangeCalendarProps={rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["TableDateRangePicker","presets","rangeCalendarProps","useState","opened","setOpened","form","useTable","onApply","dates","setFieldValue","onCancel","formatDate","date","dayjs","format","formatedRange","values","dateRange","Popover","onChange","Target","Button","variant","color","onClick","px","CalendarSize24Px","width","height","Dropdown","p","DateRangePickerInlineCalendar","initialRange"],"mappings":";;;;+BA2BaA;;;eAAAA;;;;;;gCA3BkB;oBACT;0DAEJ;qBACwB;sBAErB;+BAC2D;wBAEzD;AAkBhB,IAAMA,uBAAqE,gBAG5E;+BAFFC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA4BC,2BAAAA,IAAAA,eAAQ,EAAC,KAAK,OAAnCC,SAAqBD,cAAbE,YAAaF;IAC5B,IAAM,AAACG,OAAQC,IAAAA,kBAAQ,IAAhBD;IAEP,IAAME,UAAU,SAACC,OAAgC;QAC7CH,KAAKI,aAAa,CAAC,aAAaD;QAChCJ,UAAU,KAAK;IACnB;IACA,IAAMM,WAAW,WAAM;QACnBN,UAAU,KAAK;IACnB;IAEA,IAAMO,aAAa,SAACC;eAAeC,IAAAA,cAAK,EAACD,MAAME,MAAM,CAAC;;IACtD,IAAMC,gBAAgB,AAAC,GAA4CJ,OAA1CA,WAAWN,KAAKW,MAAM,CAACC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCN,WAAWN,KAAKW,MAAM,CAACC,SAAS,CAAC,EAAE;IAEtG,qBACI;;YACKF;0BACD,sBAACG,aAAO;gBAACf,QAAQA;gBAAQgB,UAAUf;;kCAC/B,qBAACc,aAAO,CAACE,MAAM;kCACX,cAAA,qBAACC,cAAM;4BAACC,SAAQ;4BAAUC,OAAM;4BAAOC,SAAS;uCAAMpB,UAAU,IAAI;;4BAAGqB,IAAG;sCACtE,cAAA,qBAACC,kCAAgB;gCAACC,OAAO;gCAAIC,QAAQ;;;;kCAG7C,qBAACV,aAAO,CAACW,QAAQ;wBAACC,GAAG;kCACjB,cAAA,qBAACC,8CAA6B;4BAC1BC,cAAc3B,KAAKW,MAAM,CAACC,SAAS;4BACnCV,SAASA;4BACTG,UAAUA;4BACVV,SAASA;4BACTC,oBAAoBA;;;;;;;AAM5C"}
+{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Popover} from '@mantine/core';\nimport {DateRangePickerValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';\nimport {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';\nimport {useTable} from './TableContext';\n\ninterface TableDateRangePickerProps\n    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n    /**\n     * An object containing date presets.\n     * If empty the preset dropdown won't be shown\n     *\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     * @default {}\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n    presets = {},\n    rangeCalendarProps,\n}) => {\n    const [opened, setOpened] = useState(false);\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        form.setFieldValue('dateRange', dates);\n        setOpened(false);\n    };\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n    return (\n        <>\n            {formatedRange}\n            <Popover opened={opened} onChange={setOpened}>\n                <Popover.Target>\n                    <Button variant=\"outline\" color=\"gray\" onClick={() => setOpened(true)} px=\"xs\">\n                        <CalendarSize24Px width={24} height={24} />\n                    </Button>\n                </Popover.Target>\n                <Popover.Dropdown p={0}>\n                    <DateRangePickerInlineCalendar\n                        initialRange={form.values.dateRange}\n                        onApply={onApply}\n                        onCancel={onCancel}\n                        presets={presets}\n                        rangeCalendarProps={rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["TableDateRangePicker","presets","rangeCalendarProps","useState","opened","setOpened","form","useTable","onApply","dates","setFieldValue","onCancel","formatDate","date","dayjs","format","formatedRange","values","dateRange","Popover","onChange","Target","Button","variant","color","onClick","px","CalendarSize24Px","width","height","Dropdown","p","DateRangePickerInlineCalendar","initialRange"],"mappings":";;;;+BA2BaA;;;eAAAA;;;;;;gCA3BkB;oBACT;0DAEJ;qBACwB;sBAErB;+BAC2D;4BAEzD;AAkBhB,IAAMA,uBAAqE,gBAG5E;+BAFFC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA4BC,2BAAAA,IAAAA,eAAQ,EAAC,KAAK,OAAnCC,SAAqBD,cAAbE,YAAaF;IAC5B,IAAM,AAACG,OAAQC,IAAAA,sBAAQ,IAAhBD;IAEP,IAAME,UAAU,SAACC,OAAgC;QAC7CH,KAAKI,aAAa,CAAC,aAAaD;QAChCJ,UAAU,KAAK;IACnB;IACA,IAAMM,WAAW,WAAM;QACnBN,UAAU,KAAK;IACnB;IAEA,IAAMO,aAAa,SAACC;eAAeC,IAAAA,cAAK,EAACD,MAAME,MAAM,CAAC;;IACtD,IAAMC,gBAAgB,AAAC,GAA4CJ,OAA1CA,WAAWN,KAAKW,MAAM,CAACC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCN,WAAWN,KAAKW,MAAM,CAACC,SAAS,CAAC,EAAE;IAEtG,qBACI;;YACKF;0BACD,sBAACG,aAAO;gBAACf,QAAQA;gBAAQgB,UAAUf;;kCAC/B,qBAACc,aAAO,CAACE,MAAM;kCACX,cAAA,qBAACC,cAAM;4BAACC,SAAQ;4BAAUC,OAAM;4BAAOC,SAAS;uCAAMpB,UAAU,IAAI;;4BAAGqB,IAAG;sCACtE,cAAA,qBAACC,kCAAgB;gCAACC,OAAO;gCAAIC,QAAQ;;;;kCAG7C,qBAACV,aAAO,CAACW,QAAQ;wBAACC,GAAG;kCACjB,cAAA,qBAACC,8CAA6B;4BAC1BC,cAAc3B,KAAKW,MAAM,CAACC,SAAS;4BACnCV,SAASA;4BACTG,UAAUA;4BACVV,SAASA;4BACTC,oBAAoBA;;;;;;;AAM5C"}

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

@@ -14,7 +14,7 @@ var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_propert
 var _jsxRuntime = require("react/jsx-runtime");
 var _plasmaReactIcons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
-var _useTable = require("./useTable");
+var _tableContext = require("./TableContext");
 var useStyles = (0, _core.createStyles)(function(theme) {
     return {
         wrapper: {
@@ -38,7 +38,7 @@ var TableFilter = function(_param) {
         styles: styles,
         unstyled: unstyled
     }).classes;
-    var _useTable1 = (0, _useTable.useTable)(), state = _useTable1.state, setState = _useTable1.setState;
+    var _useTable = (0, _tableContext.useTable)(), state = _useTable.state, setState = _useTable.setState;
     var changeFilterValue = function(value) {
         setState(function(prevState) {
             return _objectSpreadProps(_objectSpread({}, prevState), {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, createStyles, DefaultProps, Selectors, TextInput} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';\n\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} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n\n    const changeFilterValue = (value: string) => {\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    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const {value} = event.currentTarget;\n        changeFilterValue(value);\n    };\n\n    const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n        changeFilterValue('');\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={\n                state.globalFilter ? (\n                    <ActionIcon onClick={handleClear}>\n                        <CrossSize16Px height={16} />\n                    </ActionIcon>\n                ) : (\n                    <SearchSize16Px height={14} className={classes.empty} />\n                )\n            }\n            value={state.globalFilter}\n            onChange={handleChange}\n            {...others}\n        />\n    );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","classes","name","useTable","state","setState","changeFilterValue","value","prevState","pagination","pageIndex","pageSize","globalFilter","handleChange","event","currentTarget","handleClear","TextInput","className","mb","rightSection","ActionIcon","onClick","CrossSize16Px","height","SearchSize16Px","onChange"],"mappings":";;;;+BA0BaA;;;eAAAA;;;;;;;gCA1B+B;oBAC+B;wBAIpD;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMT,cAAmD,iBAM1D;oCALFU,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWd,UAAU,IAAI,EAAE;QAACe,MAAM;QAAeL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0BE,aAAAA,IAAAA,kBAAQ,KAA3BC,QAAmBD,WAAnBC,OAAOC,WAAYF,WAAZE;IAEd,IAAMC,oBAAoB,SAACC,OAAkB;QACzCF,SAAS,SAACG;mBAA2B,qCAC9BA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcL;;;IAEtB;IAEA,IAAMM,eAAqD,SAACC,OAAU;QAClE,IAAM,AAACP,QAASO,MAAMC,aAAa,CAA5BR;QACPD,kBAAkBC;IACtB;IAEA,IAAMS,cAAoD,WAAM;QAC5DV,kBAAkB;IACtB;IAEA,qBACI,qBAACW,eAAS;QACNC,WAAWjB,QAAQX,OAAO;QAC1BM,aAAaA;QACbuB,IAAG;QACHC,cACIhB,MAAMQ,YAAY,iBACd,qBAACS,gBAAU;YAACC,SAASN;sBACjB,cAAA,qBAACO,+BAAa;gBAACC,QAAQ;;2BAG3B,qBAACC,gCAAc;YAACD,QAAQ;YAAIN,WAAWjB,QAAQT,KAAK;UACvD;QAELe,OAAOH,MAAMQ,YAAY;QACzBc,UAAUb;OACNb;AAGhB"}
+{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, createStyles, DefaultProps, Selectors, TextInput} from '@mantine/core';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';\n\nimport {useTable} from './TableContext';\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} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n\n    const changeFilterValue = (value: string) => {\n        setState((prevState) => ({\n            ...prevState,\n            pagination: prevState.pagination\n                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n                : prevState.pagination,\n            globalFilter: value,\n        }));\n    };\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const {value} = event.currentTarget;\n        changeFilterValue(value);\n    };\n\n    const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n        changeFilterValue('');\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={\n                state.globalFilter ? (\n                    <ActionIcon onClick={handleClear}>\n                        <CrossSize16Px height={16} />\n                    </ActionIcon>\n                ) : (\n                    <SearchSize16Px height={14} className={classes.empty} />\n                )\n            }\n            value={state.globalFilter}\n            onChange={handleChange}\n            {...others}\n        />\n    );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","classes","name","useTable","state","setState","changeFilterValue","value","prevState","pagination","pageIndex","pageSize","globalFilter","handleChange","event","currentTarget","handleClear","TextInput","className","mb","rightSection","ActionIcon","onClick","CrossSize16Px","height","SearchSize16Px","onChange"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;gCAzB+B;oBAC+B;4BAGpD;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMT,cAAmD,iBAM1D;oCALFU,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWd,UAAU,IAAI,EAAE;QAACe,MAAM;QAAeL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0BE,YAAAA,IAAAA,sBAAQ,KAA3BC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IAEd,IAAMC,oBAAoB,SAACC,OAAkB;QACzCF,SAAS,SAACG;mBAAe,qCAClBA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcL;;;IAEtB;IAEA,IAAMM,eAAqD,SAACC,OAAU;QAClE,IAAM,AAACP,QAASO,MAAMC,aAAa,CAA5BR;QACPD,kBAAkBC;IACtB;IAEA,IAAMS,cAAoD,WAAM;QAC5DV,kBAAkB;IACtB;IAEA,qBACI,qBAACW,eAAS;QACNC,WAAWjB,QAAQX,OAAO;QAC1BM,aAAaA;QACbuB,IAAG;QACHC,cACIhB,MAAMQ,YAAY,iBACd,qBAACS,gBAAU;YAACC,SAASN;sBACjB,cAAA,qBAACO,+BAAa;gBAACC,QAAQ;;2BAG3B,qBAACC,gCAAc;YAACD,QAAQ;YAAIN,WAAWjB,QAAQT,KAAK;UACvD;QAELe,OAAOH,MAAMQ,YAAY;QACzBc,UAAUb;OACNb;AAGhB"}

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

@@ -15,7 +15,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _plasmaReactIcons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
 var _button = require("../button");
-var _useTable = require("./useTable");
+var _tableContext = require("./TableContext");
 var useStyles = (0, _core.createStyles)(function(theme) {
     return {
         root: {
@@ -34,7 +34,7 @@ var TableHeader = function(_param) {
         "unstyled",
         "children"
     ]);
-    var _useTable1 = (0, _useTable.useTable)(), getSelectedRows = _useTable1.getSelectedRows, multiRowSelectionEnabled = _useTable1.multiRowSelectionEnabled, clearSelection = _useTable1.clearSelection;
+    var _useTable = (0, _tableContext.useTable)(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, clearSelection = _useTable.clearSelection;
     var classes = useStyles(null, {
         name: "TableHeader",
         classNames: classNames,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nimport {Button} from '../button';\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":["TableHeader","useStyles","createStyles","theme","root","position","top","zIndex","backgroundColor","colors","gray","borderBottom","classNames","styles","unstyled","children","others","useTable","getSelectedRows","multiRowSelectionEnabled","clearSelection","classes","name","selectedRows","Group","className","length","Tooltip","label","Button","onClick","ml","variant","leftIcon","CrossSize16Px","height","Space","spacing","px","py"],"mappings":";;;;+BAsBaA;;;eAAAA;;;;;;;gCAtBe;oBAC+C;sBAGtD;wBACE;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;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;;AAOO,IAAMV,cAAmD,iBAM1D;QALFY,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAoEE,aAAAA,IAAAA,kBAAQ,KAArEC,kBAA6DD,WAA7DC,iBAAiBC,2BAA4CF,WAA5CE,0BAA0BC,iBAAkBH,WAAlBG;IAClD,IAAM,AAACC,UAAWpB,UAAU,IAAI,EAAE;QAACqB,MAAM;QAAeV,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EO;IACP,IAAME,eAAeL;IACrB,OAAOC,yCACH,sBAACK,WAAK;QAACnB,UAAS;QAAQoB,WAAWJ,QAAQjB,IAAI;;YAC1CmB,aAAaG,MAAM,GAAG,kBACnB,qBAACC,aAAO;gBAACC,OAAM;0BACX,cAAA,sBAACC,cAAM;oBAACC,SAASV;oBAAgBW,IAAG;oBAAKC,SAAQ;oBAASC,wBAAU,qBAACC,+BAAa;wBAACC,QAAQ;;;wBACtFZ,aAAaG,MAAM;wBAAC;;;+BAI7B,qBAACU,WAAK,KACT;0BACD,qBAACZ,WAAK;gBAACnB,UAAS;gBAAQgC,SAAQ;gBAAKC,IAAG;gBAAKC,IAAG;eAASvB;0BACpDD;;;uBAIT,qBAACS,WAAK;QAACnB,UAAS;QAAQgC,SAAQ;QAAKC,IAAG;QAAKC,IAAG;QAAKd,WAAWJ,QAAQjB,IAAI;OAAMY;kBAC7ED;OAER;AACL"}
+{"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nimport {Button} from '../button';\nimport {useTable} from './TableContext';\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":["TableHeader","useStyles","createStyles","theme","root","position","top","zIndex","backgroundColor","colors","gray","borderBottom","classNames","styles","unstyled","children","others","useTable","getSelectedRows","multiRowSelectionEnabled","clearSelection","classes","name","selectedRows","Group","className","length","Tooltip","label","Button","onClick","ml","variant","leftIcon","CrossSize16Px","height","Space","spacing","px","py"],"mappings":";;;;+BAsBaA;;;eAAAA;;;;;;;gCAtBe;oBAC+C;sBAGtD;4BACE;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;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;;AAOO,IAAMV,cAAmD,iBAM1D;QALFY,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAoEE,YAAAA,IAAAA,sBAAQ,KAArEC,kBAA6DD,UAA7DC,iBAAiBC,2BAA4CF,UAA5CE,0BAA0BC,iBAAkBH,UAAlBG;IAClD,IAAM,AAACC,UAAWpB,UAAU,IAAI,EAAE;QAACqB,MAAM;QAAeV,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EO;IACP,IAAME,eAAeL;IACrB,OAAOC,yCACH,sBAACK,WAAK;QAACnB,UAAS;QAAQoB,WAAWJ,QAAQjB,IAAI;;YAC1CmB,aAAaG,MAAM,GAAG,kBACnB,qBAACC,aAAO;gBAACC,OAAM;0BACX,cAAA,sBAACC,cAAM;oBAACC,SAASV;oBAAgBW,IAAG;oBAAKC,SAAQ;oBAASC,wBAAU,qBAACC,+BAAa;wBAACC,QAAQ;;;wBACtFZ,aAAaG,MAAM;wBAAC;;;+BAI7B,qBAACU,WAAK,KACT;0BACD,qBAACZ,WAAK;gBAACnB,UAAS;gBAAQgC,SAAQ;gBAAKC,IAAG;gBAAKC,IAAG;eAASvB;0BACpDD;;;uBAIT,qBAACS,WAAK;QAACnB,UAAS;QAAQgC,SAAQ;QAAKC,IAAG;QAAKC,IAAG;QAAKd,WAAWJ,QAAQjB,IAAI;OAAMY;kBAC7ED;OAER;AACL"}

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

@@ -12,10 +12,10 @@ 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 _core = require("@mantine/core");
-var _useTable = require("./useTable");
+var _tableContext = require("./TableContext");
 var TablePagination = function(param) {
     var totalPages = param.totalPages;
-    var _useTable1 = (0, _useTable.useTable)(), state = _useTable1.state, setState = _useTable1.setState, containerRef = _useTable1.containerRef, getPageCount = _useTable1.getPageCount;
+    var _useTable = (0, _tableContext.useTable)(), state = _useTable.state, setState = _useTable.setState, containerRef = _useTable.containerRef, getPageCount = _useTable.getPageCount;
     var updatePage = function(newPage) {
         setState(function(prevState) {
             return _objectSpreadProps(_objectSpread({}, prevState), {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\ninterface TablePaginationProps {\n    /**\n     * The total number of page. Use null only if your table is paginated client side\n     */\n    totalPages: number | null;\n}\n\nexport const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages}) => {\n    const {state, setState, containerRef, getPageCount} = useTable();\n    const updatePage = (newPage: number) => {\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: {...prevState.pagination, pageIndex: newPage - 1},\n        }));\n        containerRef.current.scrollIntoView({behavior: 'smooth'});\n    };\n\n    const total = totalPages === null ? getPageCount() : totalPages;\n\n    return (\n        <Pagination\n            page={state.pagination.pageIndex + 1}\n            onChange={updatePage}\n            total={total}\n            boundaries={0}\n            size=\"md\"\n            getItemAriaLabel={(label) => {\n                switch (label) {\n                    case 'prev':\n                        return 'previous page';\n                    case 'next':\n                        return 'next page';\n                    default:\n                        return `${label}`;\n                }\n            }}\n        />\n    );\n};\n"],"names":["TablePagination","totalPages","useTable","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","Pagination","page","onChange","boundaries","size","getItemAriaLabel","label"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;oBAZY;wBAGF;AAShB,IAAMA,kBAA2D,gBAAkB;QAAhBC,mBAAAA;IACtE,IAAsDC,aAAAA,IAAAA,kBAAQ,KAAvDC,QAA+CD,WAA/CC,OAAOC,WAAwCF,WAAxCE,UAAUC,eAA8BH,WAA9BG,cAAcC,eAAgBJ,WAAhBI;IACtC,IAAMC,aAAa,SAACC,SAAoB;QACpCJ,SAAS,SAACK;mBAA2B,qCAC9BA;gBACHC,YAAY,qCAAID,UAAUC,UAAU;oBAAEC,WAAWH,UAAU;;;;QAE/DH,aAAaO,OAAO,CAACC,cAAc,CAAC;YAACC,UAAU;QAAQ;IAC3D;IAEA,IAAMC,QAAQd,eAAe,IAAI,GAAGK,iBAAiBL,UAAU;IAE/D,qBACI,qBAACe,gBAAU;QACPC,MAAMd,MAAMO,UAAU,CAACC,SAAS,GAAG;QACnCO,UAAUX;QACVQ,OAAOA;QACPI,YAAY;QACZC,MAAK;QACLC,kBAAkB,SAACC,OAAU;YACzB,OAAQA;gBACJ,KAAK;oBACD,OAAO;gBACX,KAAK;oBACD,OAAO;gBACX;oBACI,OAAO,AAAC,GAAQ,OAANA;YAClB;QACJ;;AAGZ"}
+{"version":3,"sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './TableContext';\n\ninterface TablePaginationProps {\n    /**\n     * The total number of page. Use null only if your table is paginated client side\n     */\n    totalPages: number | null;\n}\n\nexport const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages}) => {\n    const {state, setState, containerRef, getPageCount} = useTable();\n    const updatePage = (newPage: number) => {\n        setState((prevState) => ({\n            ...prevState,\n            pagination: {...prevState.pagination, pageIndex: newPage - 1},\n        }));\n        containerRef.current.scrollIntoView({behavior: 'smooth'});\n    };\n\n    const total = totalPages === null ? getPageCount() : totalPages;\n\n    return (\n        <Pagination\n            page={state.pagination.pageIndex + 1}\n            onChange={updatePage}\n            total={total}\n            boundaries={0}\n            size=\"md\"\n            getItemAriaLabel={(label) => {\n                switch (label) {\n                    case 'prev':\n                        return 'previous page';\n                    case 'next':\n                        return 'next page';\n                    default:\n                        return `${label}`;\n                }\n            }}\n        />\n    );\n};\n"],"names":["TablePagination","totalPages","useTable","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","Pagination","page","onChange","boundaries","size","getItemAriaLabel","label"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;oBAZY;4BAGF;AAShB,IAAMA,kBAA2D,gBAAkB;QAAhBC,mBAAAA;IACtE,IAAsDC,YAAAA,IAAAA,sBAAQ,KAAvDC,QAA+CD,UAA/CC,OAAOC,WAAwCF,UAAxCE,UAAUC,eAA8BH,UAA9BG,cAAcC,eAAgBJ,UAAhBI;IACtC,IAAMC,aAAa,SAACC,SAAoB;QACpCJ,SAAS,SAACK;mBAAe,qCAClBA;gBACHC,YAAY,qCAAID,UAAUC,UAAU;oBAAEC,WAAWH,UAAU;;;;QAE/DH,aAAaO,OAAO,CAACC,cAAc,CAAC;YAACC,UAAU;QAAQ;IAC3D;IAEA,IAAMC,QAAQd,eAAe,IAAI,GAAGK,iBAAiBL,UAAU;IAE/D,qBACI,qBAACe,gBAAU;QACPC,MAAMd,MAAMO,UAAU,CAACC,SAAS,GAAG;QACnCO,UAAUX;QACVQ,OAAOA;QACPI,YAAY;QACZC,MAAK;QACLC,kBAAkB,SAACC,OAAU;YACzB,OAAQA;gBACJ,KAAK;oBACD,OAAO;gBACX,KAAK;oBACD,OAAO;gBACX;oBACI,OAAO,AAAC,GAAQ,OAANA;YAClB;QACJ;;AAGZ"}