npm - @coveord/plasma-mantine - Versions diffs - 52.9.0 → 52.10.0 - Mend

@coveord/plasma-mantine 52.9.0 → 52.10.0

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

Files changed (96) hide show

package/dist/esm/components/table/layouts/RowLayout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"sourcesContent":["import {ListSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, Collapse, createStyles} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment} from 'react';\nimport {TableLayout, TableLayoutProps} from '../Table.types';\nimport {TableCollapsibleColumn} from '../TableCollapsibleColumn';\nimport {useTable} from '../TableContext';\nimport {TableLoading} from '../TableLoading';\nimport {Th} from '../Th';\n\ninterface TableStylesParams {\n multiRowSelectionEnabled: boolean;\n disableRowSelection: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0];\n return {\n headerColumns: {\n '& th:first-of-type > *': {\n paddingLeft: theme.spacing.xl,\n },\n\n '& input[type=checkbox]': {\n backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,\n borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,\n pointerEvents: disableRowSelection ? 'none' : 'auto',\n cursor: disableRowSelection ? 'not-allowed' : 'default',\n\n '& + svg': {\n color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',\n },\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowUnselectable: {\n '& input[type=checkbox]': {\n backgroundColor: `${theme.colors.gray[2]}`,\n borderColor: `${theme.colors.gray[3]}`,\n pointerEvents: 'none',\n cursor: 'not-allowed',\n\n '&:checked + svg': {\n color: `${theme.colors.gray[5]}`,\n },\n },\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\nconst RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {\n const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n const headers = table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id} className={classes.headerColumns}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ));\n return <>{headers}</>;\n};\n\nconst RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading}: TableLayoutProps<T>) => {\n const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n const {classes, cx} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n\n const 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={() => (disableRowSelection ? undefined : row.toggleSelected())}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {\n [classes.rowSelected]: isSelected,\n [classes.rowUnselectable]: disableRowSelection,\n })}\n aria-selected={isSelected}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx({\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n >\n <TableLoading visible={loading}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableLoading>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={table.getAllColumns().length}\n style={{\n padding: 0,\n 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 <>{rows}</>;\n};\n\nexport const RowLayout: TableLayout = {\n name: 'Rows',\n icon: ListSize16Px,\n Header: RowLayoutHeader,\n Body: RowLayoutBody,\n};\n"],"names":["ListSize16Px","Box","Collapse","createStyles","flexRender","defaultColumnSizing","Fragment","TableCollapsibleColumn","useTable","TableLoading","Th","useStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","headerColumns","paddingLeft","spacing","xl","backgroundColor","gray","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","RowLayoutHeader","table","classes","headers","getHeaderGroups","map","headerGroup","tr","className","columnHeader","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","cx","rows","getRowModel","rowChildren","original","isSelected","getIsSelected","onClick","toggleSelected","onDoubleClick","aria-selected","getVisibleCells","cell","size","column","getSize","width","td","style","visible","columnDef","getContext","colSpan","getAllColumns","length","borderTop","getIsExpanded","borderBottom","in","px","py","RowLayout","name","icon","Header","Body"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"sourcesContent":["import {ListSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, Collapse, createStyles, rem} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment, type MouseEvent} from 'react';\nimport {TableLayout, TableLayoutProps} from '../Table.types';\nimport {TableCollapsibleColumn} from '../TableCollapsibleColumn';\nimport {useTable} from '../TableContext';\nimport {TableLoading} from '../TableLoading';\nimport {TableSelectableColumn} from '../TableSelectableColumn';\nimport {Th} from '../Th';\n\ninterface TableStylesParams {\n multiRowSelectionEnabled: boolean;\n disableRowSelection: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];\n const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;\n return {\n headerColumns: {\n '& th:first-of-type > *': {\n paddingLeft: '40px',\n },\n\n '& input[type=checkbox]': {\n backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,\n borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,\n pointerEvents: disableRowSelection ? 'none' : 'auto',\n cursor: disableRowSelection ? 'not-allowed' : 'default',\n\n '& + svg': {\n color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',\n },\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowUnselectable: {\n '& input[type=checkbox]': {\n backgroundColor: `${theme.colors.gray[2]}`,\n borderColor: `${theme.colors.gray[3]}`,\n pointerEvents: 'none',\n cursor: 'not-allowed',\n\n '&:checked + svg': {\n color: `${theme.colors.gray[5]}`,\n },\n },\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n },\n\n row: {\n '& td:first-of-type': {\n paddingLeft: '40px',\n },\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n\n cell: {\n verticalAlign: 'middle',\n // We must use height instead of minHeight here, otherwise it doesn't apply\n height: '56px',\n padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n borderBottom: border,\n },\n\n collapsible: {\n backgroundColor: rowBackgroundColor,\n borderBottom: border,\n },\n };\n});\n\nconst RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {\n const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n const headers = table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id} className={classes.headerColumns}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ));\n return <>{headers}</>;\n};\n\nconst RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading}: TableLayoutProps<T>) => {\n const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n const {classes, cx} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n\n const toggleCollapsible = (el: HTMLTableRowElement) => {\n const cell = el.children[el.children.length - 1] as HTMLTableCellElement;\n cell.querySelector('button').click();\n };\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n const isSelected = !!row.getIsSelected();\n const onClick = (event: MouseEvent<HTMLTableRowElement>) => {\n if (rowChildren) {\n toggleCollapsible(event.currentTarget);\n }\n if (!disableRowSelection && !multiRowSelectionEnabled) {\n row.toggleSelected();\n }\n };\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={onClick}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {\n [classes.rowSelected]: isSelected,\n [classes.rowUnselectable]: disableRowSelection,\n })}\n aria-selected={isSelected}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n const onCollapsibleCellClick = (event: MouseEvent<HTMLTableCellElement>) => {\n if (cell.column.id === TableSelectableColumn.id && !disableRowSelection) {\n event.stopPropagation();\n row.getToggleSelectedHandler();\n }\n };\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx(classes.cell, {\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n onClick={onCollapsibleCellClick}\n >\n <TableLoading visible={loading}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableLoading>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={table.getAllColumns().length}\n style={{\n padding: 0,\n }}\n >\n <Collapse in={row.getIsExpanded()}>\n <Box className={classes.collapsible} px=\"sm\" py=\"xs\">\n {rowChildren}\n </Box>\n </Collapse>\n </td>\n </tr>\n ) : null}\n </Fragment>\n );\n });\n\n return <>{rows}</>;\n};\n\nexport const RowLayout: TableLayout = {\n name: 'Rows',\n icon: ListSize16Px,\n Header: RowLayoutHeader,\n Body: RowLayoutBody,\n};\n"],"names":["ListSize16Px","Box","Collapse","createStyles","rem","flexRender","defaultColumnSizing","Fragment","TableCollapsibleColumn","useTable","TableLoading","TableSelectableColumn","Th","useStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","dark","headerColumns","paddingLeft","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","cell","verticalAlign","height","borderBottom","collapsible","RowLayoutHeader","table","classes","headers","getHeaderGroups","map","headerGroup","tr","className","columnHeader","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","cx","toggleCollapsible","el","children","length","querySelector","click","rows","getRowModel","rowChildren","original","isSelected","getIsSelected","onClick","event","currentTarget","toggleSelected","onDoubleClick","aria-selected","getVisibleCells","size","column","getSize","width","onCollapsibleCellClick","stopPropagation","getToggleSelectedHandler","td","style","visible","columnDef","getContext","colSpan","getAllColumns","in","getIsExpanded","px","py","RowLayout","name","icon","Header","Body"],"mappings":"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"}

package/dist/esm/components/table/useRowSelection.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { Table } from '@tanstack/table-core';
 import { TableProps } from './Table.types';
-export declare const useRowSelection: <T>(table: Table<T>, { onRowSelectionChange, multiRowSelectionEnabled, }: Pick<TableProps<T>, "multiRowSelectionEnabled" | "onRowSelectionChange">) => {
+export declare const useRowSelection: <T>(table: Table<T>, { onRowSelectionChange, multiRowSelectionEnabled, additionalRootNodes, }: Pick<TableProps<T>, "multiRowSelectionEnabled" | "onRowSelectionChange" | "additionalRootNodes">) => {
     clearSelection: () => void;
     getSelectedRow: () => T;
     getSelectedRows: () => T[];
-    outsideClickRef: import("react").MutableRefObject<any>;
+    outsideClickRef: import("react").MutableRefObject<HTMLDivElement>;
 };
 //# sourceMappingURL=useRowSelection.d.ts.map

package/dist/esm/components/table/useRowSelection.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useRowSelection.d.ts","sourceRoot":"","sources":["../../../../src/components/table/useRowSelection.ts"],"names":[],"mappings":";AACA,OAAO,EAAsC,KAAK,EAAC,MAAM,sBAAsB,CAAC;~~AAGhF~~,OAAO,EAAuB,UAAU,EAAa,MAAM,eAAe,CAAC;AAE3E,eAAO,MAAM,eAAe;;;;;~~CA0D3B~~,CAAC"}
1	+ {"version":3,"file":"useRowSelection.d.ts","sourceRoot":"","sources":["../../../../src/components/table/useRowSelection.ts"],"names":[],"mappings":";AACA,OAAO,EAAsC,KAAK,EAAC,MAAM,sBAAsB,CAAC;AAIhF,OAAO,EAAuB,UAAU,EAAa,MAAM,eAAe,CAAC;AAE3E,eAAO,MAAM,eAAe;;;;;CAgE3B,CAAC"}

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

@@ -1,15 +1,20 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import { useClickOutside } from "@mantine/hooks";
 import { functionalUpdate } from "@tanstack/table-core";
 import isEqual from "fast-deep-equal";
+import { useRef } from "react";
 export var useRowSelection = function(table, param) {
-    var onRowSelectionChange = param.onRowSelectionChange, multiRowSelectionEnabled = param.multiRowSelectionEnabled;
-    var outsideClickRef = useClickOutside(function() {
+    var onRowSelectionChange = param.onRowSelectionChange, multiRowSelectionEnabled = param.multiRowSelectionEnabled, _param_additionalRootNodes = param.additionalRootNodes, additionalRootNodes = _param_additionalRootNodes === void 0 ? [] : _param_additionalRootNodes;
+    var outsideClickRef = useRef();
+    useClickOutside(function() {
         if (!multiRowSelectionEnabled) {
             clearSelection();
         }
-    });
+    }, null, [
+        outsideClickRef.current
+    ].concat(_to_consumable_array(additionalRootNodes)));
     table.setOptions(function(prev) {
         return _object_spread_props(_object_spread({}, prev), {
             onRowSelectionChange: function(rowSelectionUpdater) {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/table/useRowSelection.ts"],"sourcesContent":["import {useClickOutside} from '@mantine/hooks';\nimport {functionalUpdate, RowSelectionState, Table} from '@tanstack/table-core';\nimport isEqual from 'fast-deep-equal';\n\nimport {RowSelectionWithData, TableProps, TableState} from './Table.types';\n\nexport const useRowSelection = <T>(\n table: Table<T>,\n {\n onRowSelectionChange,\n multiRowSelectionEnabled,\n }: Pick<TableProps<T>, 'onRowSelectionChange' \| 'multiRowSelectionEnabled'>\n) => {\n const outsideClickRef = useClickOutside(() => {\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n });\n\n table.setOptions((prev) => ({\n ...prev,\n onRowSelectionChange: (rowSelectionUpdater) => {\n table.setState((old) => {\n const newRowSelection = functionalUpdate(\n rowSelectionUpdater,\n old['rowSelection']\n ) as RowSelectionWithData<T>;\n\n if (isEqual(old['rowSelection'], newRowSelection)) {\n return old;\n }\n\n const rows = table.getRowModel().rowsById;\n\n Object.keys(newRowSelection).forEach((rowId) => {\n if (newRowSelection[rowId] === true) {\n if (!rows[rowId]) {\n console.error(\n 'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.'\n );\n }\n newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);\n }\n });\n\n onRowSelectionChange?.(Object.values(newRowSelection));\n\n return {\n ...old,\n rowSelection: newRowSelection as RowSelectionState,\n };\n });\n },\n }));\n\n const clearSelection = () => {\n table.resetRowSelection(true);\n };\n\n const getSelectedRows = () => Object.values((table.getState() as TableState<T>).rowSelection);\n\n const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n return {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef};\n};\n"],"names":["useClickOutside","functionalUpdate","isEqual","useRowSelection","table","onRowSelectionChange","multiRowSelectionEnabled","outsideClickRef","clearSelection","setOptions","prev","rowSelectionUpdater","setState","old","newRowSelection","rows","getRowModel","rowsById","Object","keys","forEach","rowId","console","error","original","values","rowSelection","resetRowSelection","getSelectedRows","getState","getSelectedRow"],"mappings":";;AAAA,SAAQA,eAAe,QAAO,iBAAiB;AAC/C,SAAQC,gBAAgB,QAAiC,uBAAuB;AAChF,OAAOC,aAAa,kBAAkB;~~AAItC~~,OAAO,IAAMC,kBAAkB,SAC3BC;QAEIC,6BAAAA,sBACAC,iCAAAA;~~IAGJ~~,IAAMC,~~kBAAkBP~~,~~gBAAgB~~;~~QACpC~~,IAAI,~~CAACM~~,0BAA0B;~~YAC3BE~~;QACJ;IACJ;~~IAEAJ~~,~~MAAMK~~,UAAU,CAAC,SAACC;eAAU,wCACrBA;~~YACHL~~,sBAAsB,~~SAACM~~;~~gBACnBP~~,~~MAAMQ~~,QAAQ,CAAC,SAACC;~~wBAuBZR~~;oBAtBA,~~IAAMS~~,~~kBAAkBb~~,~~iBACpBU~~,qBACAE,GAAG,CAAC,eAAe;oBAGvB,~~IAAIX~~,~~QAAQW~~,GAAG,CAAC,eAAe,EAAEC,kBAAkB;wBAC/C,OAAOD;oBACX;oBAEA,IAAME,~~OAAOX~~,~~MAAMY~~,WAAW,GAAGC,QAAQ;oBAEzCC,OAAOC,IAAI,CAACL,iBAAiBM,OAAO,CAAC,SAACC;wBAClC,IAAIP,eAAe,CAACO,MAAM,KAAK,MAAM;gCAMRN;4BALzB,IAAI,CAACA,IAAI,CAACM,MAAM,EAAE;gCACdC,QAAQC,KAAK,CACT;4BAER;gCACyBR;4BAAzBD,eAAe,CAACO,MAAM,GAAGN,CAAAA,wBAAAA,cAAAA,IAAI,CAACM,MAAM,cAAXN,kCAAAA,YAAaS,QAAQ,cAArBT,kCAAAA,uBAA0B;wBACvD;oBACJ;~~qBAEAV~~,wBAAAA,kCAAAA,4CAAAA,~~sBAAuBa~~,OAAOO,MAAM,CAACX;oBAErC,OAAO,wCACAD;wBACHa,cAAcZ;;gBAEtB;YACJ;;;IAGJ,~~IAAMN~~,iBAAiB;~~QACnBJ~~,~~MAAMuB~~,iBAAiB,CAAC;IAC5B;IAEA,IAAMC,kBAAkB;eAAMV,OAAOO,MAAM,CAAC,~~AAACrB~~,~~MAAMyB~~,QAAQ,GAAqBH,YAAY;;QAE/DE;IAA7B,IAAME,iBAAiB;eAAMF,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB;;IAErD,OAAO;~~QAACpB~~,gBAAAA;~~QAAgBsB~~,gBAAAA;QAAgBF,iBAAAA;~~QAAiBrB~~,iBAAAA;IAAe;AAC5E,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/table/useRowSelection.ts"],"sourcesContent":["import {useClickOutside} from '@mantine/hooks';\nimport {functionalUpdate, RowSelectionState, Table} from '@tanstack/table-core';\nimport isEqual from 'fast-deep-equal';\n\nimport {useRef} from 'react';\nimport {RowSelectionWithData, TableProps, TableState} from './Table.types';\n\nexport const useRowSelection = <T>(\n table: Table<T>,\n {\n onRowSelectionChange,\n multiRowSelectionEnabled,\n additionalRootNodes = [],\n }: Pick<TableProps<T>, 'onRowSelectionChange' \| 'multiRowSelectionEnabled' \| 'additionalRootNodes'>\n) => {\n const outsideClickRef = useRef<HTMLDivElement>();\n useClickOutside(\n () => {\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n },\n null,\n [outsideClickRef.current, ...additionalRootNodes]\n );\n\n table.setOptions((prev) => ({\n ...prev,\n onRowSelectionChange: (rowSelectionUpdater) => {\n table.setState((old) => {\n const newRowSelection = functionalUpdate(\n rowSelectionUpdater,\n old['rowSelection']\n ) as RowSelectionWithData<T>;\n\n if (isEqual(old['rowSelection'], newRowSelection)) {\n return old;\n }\n\n const rows = table.getRowModel().rowsById;\n\n Object.keys(newRowSelection).forEach((rowId) => {\n if (newRowSelection[rowId] === true) {\n if (!rows[rowId]) {\n console.error(\n 'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.'\n );\n }\n newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);\n }\n });\n\n onRowSelectionChange?.(Object.values(newRowSelection));\n\n return {\n ...old,\n rowSelection: newRowSelection as RowSelectionState,\n };\n });\n },\n }));\n\n const clearSelection = () => {\n table.resetRowSelection(true);\n };\n\n const getSelectedRows = () => Object.values((table.getState() as TableState<T>).rowSelection);\n\n const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n return {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef};\n};\n"],"names":["useClickOutside","functionalUpdate","isEqual","useRef","useRowSelection","table","onRowSelectionChange","multiRowSelectionEnabled","additionalRootNodes","outsideClickRef","clearSelection","current","setOptions","prev","rowSelectionUpdater","setState","old","newRowSelection","rows","getRowModel","rowsById","Object","keys","forEach","rowId","console","error","original","values","rowSelection","resetRowSelection","getSelectedRows","getState","getSelectedRow"],"mappings":";;;AAAA,SAAQA,eAAe,QAAO,iBAAiB;AAC/C,SAAQC,gBAAgB,QAAiC,uBAAuB;AAChF,OAAOC,aAAa,kBAAkB;AAEtC,SAAQC,MAAM,QAAO,QAAQ;AAG7B,OAAO,IAAMC,kBAAkB,SAC3BC;QAEIC,6BAAAA,sBACAC,iCAAAA,6DACAC,qBAAAA,8DAAsB,EAAE;IAG5B,IAAMC,kBAAkBN;IACxBH,gBACI;QACI,IAAI,CAACO,0BAA0B;YAC3BG;QACJ;IACJ,GACA,MACA;QAACD,gBAAgBE,OAAO;KAAyB,CAAjD,OAA0B,qBAAGH;IAGjCH,MAAMO,UAAU,CAAC,SAACC;eAAU,wCACrBA;YACHP,sBAAsB,SAACQ;gBACnBT,MAAMU,QAAQ,CAAC,SAACC;wBAuBZV;oBAtBA,IAAMW,kBAAkBhB,iBACpBa,qBACAE,GAAG,CAAC,eAAe;oBAGvB,IAAId,QAAQc,GAAG,CAAC,eAAe,EAAEC,kBAAkB;wBAC/C,OAAOD;oBACX;oBAEA,IAAME,OAAOb,MAAMc,WAAW,GAAGC,QAAQ;oBAEzCC,OAAOC,IAAI,CAACL,iBAAiBM,OAAO,CAAC,SAACC;wBAClC,IAAIP,eAAe,CAACO,MAAM,KAAK,MAAM;gCAMRN;4BALzB,IAAI,CAACA,IAAI,CAACM,MAAM,EAAE;gCACdC,QAAQC,KAAK,CACT;4BAER;gCACyBR;4BAAzBD,eAAe,CAACO,MAAM,GAAGN,CAAAA,wBAAAA,cAAAA,IAAI,CAACM,MAAM,cAAXN,kCAAAA,YAAaS,QAAQ,cAArBT,kCAAAA,uBAA0B;wBACvD;oBACJ;qBAEAZ,wBAAAA,kCAAAA,4CAAAA,sBAAuBe,OAAOO,MAAM,CAACX;oBAErC,OAAO,wCACAD;wBACHa,cAAcZ;;gBAEtB;YACJ;;;IAGJ,IAAMP,iBAAiB;QACnBL,MAAMyB,iBAAiB,CAAC;IAC5B;IAEA,IAAMC,kBAAkB;eAAMV,OAAOO,MAAM,CAAC,AAACvB,MAAM2B,QAAQ,GAAqBH,YAAY;;QAE/DE;IAA7B,IAAME,iBAAiB;eAAMF,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB;;IAErD,OAAO;QAACrB,gBAAAA;QAAgBuB,gBAAAA;QAAgBF,iBAAAA;QAAiBtB,iBAAAA;IAAe;AAC5E,EAAE"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.9.0",
+  "version": "52.10.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -57,7 +57,7 @@
     "@swc/core": "1.3.64",
     "@swc/jest": "0.2.26",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.4.0",
+    "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/jest": "29.5.2",
     "@types/lodash.debounce": "^4.0.7",

package/src/__tests__/VitestSetup.ts CHANGED Viewed

@@ -30,6 +30,18 @@ window.ResizeObserver =
         unobserve: vi.fn(),
     }));
+// Temporarily workaround for bug in @testing-library/react when use user-event with `vi.useFakeTimers()`
+beforeAll(() => {
+    const _jest = (globalThis as any).jest;
+    (globalThis as any).jest = {
+        ...(globalThis as any).jest,
+        advanceTimersByTime: vi.advanceTimersByTime.bind(vi),
+    };
+    return () => void ((globalThis as any).jest = _jest);
+});
 afterEach(() => {
     cleanup();
 });

package/src/components/code-editor/CodeEditor.tsx CHANGED Viewed

@@ -126,8 +126,10 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     };
     const handleSearch = () => {
-        editorRef.current.focus();
-        editorRef.current.trigger('editor', 'actions.find', '');
+        if (editorRef.current) {
+            editorRef.current.focus();
+            editorRef.current.trigger('editor', 'actions.find', '');
+        }
     };
     useEffect(() => {

package/src/components/code-editor/__tests__/CodeEditor.spec.tsx CHANGED Viewed

@@ -65,6 +65,7 @@ describe('CodeEditor', () => {
     it('focus and triggers search on the Monaco editor when handleSearch is called', async () => {
         const user = userEvent.setup();
         render(<CodeEditor />);
+        expect(await screen.findByTestId('monaco-editor')).toBeInTheDocument();
         await user.click(screen.getByRole('button', {name: /search/i}));
         expect(screen.getByTestId('monaco-editor')).toHaveAttribute('focus');
         expect(screen.getByTestId('monaco-editor')).toHaveAttribute('trigger');

package/src/components/date-range-picker/DateRangePickerPresetSelect.tsx CHANGED Viewed

@@ -57,6 +57,7 @@ export const DateRangePickerPresetSelect = <T extends unknown>({
             value={selectedPreset}
             onChange={onChangePreset}
             data={selectData}
+            maxDropdownHeight={240}
         />
     );
 };

package/src/components/date-range-picker/__tests__/DateRangePickerInlineCalendar.spec.tsx CHANGED Viewed

@@ -87,6 +87,7 @@ describe('DateRangePickerInlineCalendar', () => {
     });
     it('calls onApply with the selected dates when typing in the inputs', async () => {
+        vi.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
         const user = userEvent.setup({delay: null});
         const onApply = vi.fn();
         render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={vi.fn()} />);
@@ -109,5 +110,6 @@ describe('DateRangePickerInlineCalendar', () => {
             dayjs(new Date(2022, 0, 8)).startOf('day').toDate(),
             dayjs(new Date(2022, 0, 14)).endOf('day').toDate(),
         ]);
+        vi.useRealTimers();
     });
 });

package/src/components/date-range-picker/__tests__/DateRangePickerPopoverCalendar.spec.tsx CHANGED Viewed

@@ -4,17 +4,6 @@ import {DateRangePickerValue} from '../DateRangePickerInlineCalendar';
 import {DateRangePickerPopoverCalendar} from '../DateRangePickerPopoverCalendar';
-// Since we're mocking the date and the animations are timer based we're mocking useReduceMotion to disable all the animations
-// I tried wrapping the components in <MantineProvider theme={{components: {Transition: {defaultProps: {duration: 0}}}}}>
-// but the animation was still happening. :(
-vi.mock('@mantine/hooks', async () => {
-    const actual = await vi.importActual('@mantine/hooks');
-    return {
-        ...actual,
-        useReduceMotion: () => true,
-    };
-});
 describe('DateRangePickerPopoverCalendar', () => {
     it('does not render the preset searchbox when there is no presets', () => {
         render(<DateRangePickerPopoverCalendar defaultValue={[null, null]} />);
@@ -23,7 +12,7 @@ describe('DateRangePickerPopoverCalendar', () => {
     });
     it('updates with the selected dates when choosing a preset', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         const Fixture = () => {
             const form = useForm<{dates: DateRangePickerValue}>({initialValues: {dates: [null, null]}});
             return (
@@ -40,11 +29,7 @@ describe('DateRangePickerPopoverCalendar', () => {
         };
         render(<Fixture />);
-        await user.click(
-            screen.getByRole('searchbox', {
-                name: 'Date range',
-            })
-        );
+        await user.click(screen.getByRole('searchbox', {name: 'Date range'}));
         await user.click(screen.getByRole('option', {name: 'select me'}));
         expect(screen.getByTestId('json')).toHaveTextContent('["1999-12-31T00:00:00.000Z","2000-01-01T00:00:00.000Z"]');
@@ -79,7 +64,7 @@ describe('DateRangePickerPopoverCalendar', () => {
     });
     it('calls onApply with the selected dates when typing in the inputs', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         const Fixture = () => {
             const form = useForm<{dates: DateRangePickerValue}>({initialValues: {dates: [null, null]}});
             return (
@@ -104,5 +89,5 @@ describe('DateRangePickerPopoverCalendar', () => {
         await user.type(endInput, 'Jan 14, 2022');
         expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T23:59:59.999Z"]');
-    });
+    }, 10000);
 });

package/src/components/date-range-picker/__tests__/EditableDateRangePicker.spec.tsx CHANGED Viewed

@@ -1,8 +1,8 @@
-import {DateRangePickerValue} from '@mantine/dates';
 import {render, screen, userEvent} from '@test-utils';
 import {useState} from 'react';
 import {EditableDateRangePicker} from '../EditableDateRangePicker';
+import {DateRangePickerValue} from '../DateRangePickerInlineCalendar';
 describe('EditableDateRangePicker', () => {
     it('renders an input for the start and an input for the end', () => {
@@ -19,7 +19,7 @@ describe('EditableDateRangePicker', () => {
     });
     it('updates when editing values', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         const Fixture = () => {
             const [value, setValue] = useState<DateRangePickerValue>([null, null]);
             return (
@@ -44,5 +44,5 @@ describe('EditableDateRangePicker', () => {
         await user.type(endInput, 'Jan 14, 2022');
         expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T23:59:59.999Z"]');
-    });
+    }, 10000);
 });

package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx CHANGED Viewed

@@ -8,24 +8,28 @@ describe('ModalWizard', () => {
         const modelSteps = [
             {
+                id: 'step1',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: true}),
                 element: <div> Slide 1</div>,
             },
             {
+                id: 'step2',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: true}),
                 element: <div> Slide 2</div>,
             },
             {
+                id: 'step3',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: false}),
                 element: <div> Slide 3</div>,
             },
             {
+                id: 'step4',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: false}),
@@ -46,13 +50,14 @@ describe('ModalWizard', () => {
                 onNext={onNextSpy}
                 onPrevious={onPreviousSpy}
             >
-                {modelSteps.map((model_item) => (
+                {modelSteps.map((step) => (
                     <ModalWizard.Step
-                        docLink={model_item.docLink}
+                        key={step.id}
+                        docLink={step.docLink}
                         title={(currentStep) => 'Current Step is: ' + currentStep}
-                        validateStep={model_item.validateStep}
+                        validateStep={step.validateStep}
                     >
-                        {model_item.element}
+                        {step.element}
                     </ModalWizard.Step>
                 ))}
             </ModalWizard>
@@ -165,6 +170,7 @@ describe('ModalWizard', () => {
         const modelSteps = [
             {
+                id: 'step1',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: true}),
@@ -179,6 +185,7 @@ describe('ModalWizard', () => {
             <ModalWizard isDirty={isDirty} onClose={onClose} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
+                        key={model_item.id}
                         docLink={model_item.docLink}
                         title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}
@@ -201,6 +208,7 @@ describe('ModalWizard', () => {
         const user = userEvent.setup();
         const modelSteps = [
             {
+                id: 'step1',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: true}),
@@ -215,6 +223,7 @@ describe('ModalWizard', () => {
             <ModalWizard isDirty={isDirty} onClose={onClose} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
+                        key={model_item.id}
                         docLink={model_item.docLink}
                         title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}
@@ -237,6 +246,7 @@ describe('ModalWizard', () => {
         const user = userEvent.setup();
         const modelSteps = [
             {
+                id: 'step1',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: true}),
@@ -252,6 +262,7 @@ describe('ModalWizard', () => {
             <ModalWizard isDirty={isDirty} onClose={onClose} onFinish={onFinish} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
+                        key={model_item.id}
                         docLink={model_item.docLink}
                         title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}
@@ -274,6 +285,7 @@ describe('ModalWizard', () => {
         const user = userEvent.setup();
         const modelSteps = [
             {
+                id: 'step1',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: true}),
@@ -289,6 +301,7 @@ describe('ModalWizard', () => {
             <ModalWizard isDirty={isDirty} onClose={onClose} handleDirtyState={handleDirtyState} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
+                        key={model_item.id}
                         docLink={model_item.docLink}
                         title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}
@@ -313,6 +326,7 @@ describe('ModalWizard', () => {
         const user = userEvent.setup();
         const modelSteps = [
             {
+                id: 'step1',
                 docLink: 'https://google.com',
                 title: (currentStep: string) => 'Current Step is: ' + currentStep,
                 validateStep: () => ({isValid: true}),
@@ -328,6 +342,7 @@ describe('ModalWizard', () => {
             <ModalWizard isDirty={isDirty} onClose={onClose} handleDirtyState={handleDirtyState} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
+                        key={model_item.id}
                         docLink={model_item.docLink}
                         title={(currentStep) => 'Current Step is: ' + currentStep}
                         validateStep={model_item.validateStep}

package/src/components/table/Table.styles.ts CHANGED Viewed

@@ -3,15 +3,6 @@ import {createStyles} from '@mantine/core';
 const useStyles = createStyles<string>((theme) => ({
     table: {
         width: '100%',
-        '& thead tr th': {
-            borderBottom: 'none',
-        },
-        '& td:first-of-type': {
-            paddingLeft: theme.spacing.xl,
-        },
-        '& tbody td': {
-            verticalAlign: 'top',
-        },
     },
     header: {

package/src/components/table/Table.tsx CHANGED Viewed

@@ -1,11 +1,12 @@
-import {Box, Center, Loader, Table as MantineTable} from '@mantine/core';
+import {Box, Center, Loader} from '@mantine/core';
 import {useForm} from '@mantine/form';
 import {useDidUpdate} from '@mantine/hooks';
-import {ColumnDef, Row, TableState as TanstackTableState, getCoreRowModel, useReactTable} from '@tanstack/react-table';
+import {ColumnDef, getCoreRowModel, Row, TableState as TanstackTableState, useReactTable} from '@tanstack/react-table';
 import debounce from 'lodash.debounce';
 import defaultsDeep from 'lodash.defaultsdeep';
-import {Children, Dispatch, ReactElement, useCallback, useEffect, useState} from 'react';
+import {Children, cloneElement, Dispatch, ReactElement, useCallback, useEffect, useState} from 'react';
+import {TableLayouts} from './layouts/TableLayouts';
 import useStyles from './Table.styles';
 import {TableFormType, TableProps, TableState, TableType} from './Table.types';
 import {TableActions} from './TableActions';
@@ -16,13 +17,13 @@ import {TableDateRangePicker} from './TableDateRangePicker';
 import {TableFilter} from './TableFilter';
 import {TableFooter} from './TableFooter';
 import {TableHeader} from './TableHeader';
+import {TableLastUpdated} from './TableLastUpdated';
+import {TableLoading} from './TableLoading';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
 import {TableSelectableColumn} from './TableSelectableColumn';
 import {useRowSelection} from './useRowSelection';
-import {TableLoading} from './TableLoading';
-import {TableLayouts} from './layouts/TableLayouts';
 export const Table: TableType = <T,>({
     data,
@@ -40,12 +41,14 @@ export const Table: TableType = <T,>({
     multiRowSelectionEnabled,
     disableRowSelection,
     onRowSelectionChange,
+    additionalRootNodes,
     options = {},
 }: TableProps<T>) => {
     const convertedChildren = Children.toArray(children) as ReactElement[];
     const header = convertedChildren.find((child) => child.type === TableHeader);
     const footer = convertedChildren.find((child) => child.type === TableFooter);
     const consumer = convertedChildren.find((child) => child.type === TableConsumer);
+    const lastUpdated = convertedChildren.find((child) => child.type === TableLastUpdated);
     const {predicates, dateRange, ...initialStateWithoutForm} = initialState;
     const form = useForm<TableFormType>({
@@ -58,7 +61,10 @@ export const Table: TableType = <T,>({
     const {classes} = useStyles();
     const table = useReactTable({
-        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),
+        initialState: defaultsDeep(initialStateWithoutForm, {
+            pagination: {pageSize: TablePerPage.DEFAULT_SIZE},
+            globalFilter: '',
+        }),
         data,
         columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,
         getCoreRowModel: getCoreRowModel(),
@@ -79,6 +85,7 @@ export const Table: TableType = <T,>({
     const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {
         multiRowSelectionEnabled,
         onRowSelectionChange,
+        additionalRootNodes,
     });
     const isFiltered =
         !!state.globalFilter ||
@@ -149,15 +156,11 @@ export const Table: TableType = <T,>({
                     noDataChildren
                 ) : (
                     <>
-                        <MantineTable className={classes.table} horizontalSpacing="sm" verticalSpacing="xs" pb="sm">
+                        <Box component="table" className={classes.table} pb="sm">
                             <thead className={classes.header}>
                                 {!!header ? (
                                     <tr>
-                                        <th
-                                            // need to use inline style because Mantine define style on `.mantine-{id} thead tr th`
-                                            style={{padding: 0, fontWeight: 'unset'}}
-                                            colSpan={table.getAllColumns().length}
-                                        >
+                                        <th style={{padding: 0}} colSpan={table.getAllColumns().length}>
                                             {header}
                                         </th>
                                     </tr>
@@ -185,8 +188,13 @@ export const Table: TableType = <T,>({
                                     </tr>
                                 )}
                             </tbody>
-                        </MantineTable>
+                        </Box>
                         {footer}
+                        {lastUpdated
+                            ? cloneElement(lastUpdated, {
+                                  dependencies: [data, ...(lastUpdated.props.dependencies ?? [])],
+                              })
+                            : null}
                     </>
                 )}
             </TableContext.Provider>
@@ -198,6 +206,7 @@ Table.Actions = TableActions;
 Table.Filter = TableFilter;
 Table.Footer = TableFooter;
 Table.Header = TableHeader;
+Table.LastUpdated = TableLastUpdated;
 Table.Pagination = TablePagination;
 Table.Predicate = TablePredicate;
 Table.PerPage = TablePerPage;

package/src/components/table/Table.types.ts CHANGED Viewed

@@ -1,16 +1,17 @@
+import {Icon} from '@coveord/plasma-react-icons';
 import {UseFormReturnType} from '@mantine/form';
 import {
     ColumnDef,
     CoreOptions,
+    InitialTableState as TanstackInitialTableState,
     Table,
     TableOptions,
-    InitialTableState as TanstackInitialTableState,
     TableState as TanstackTableState,
 } from '@tanstack/table-core';
 import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
-import {Icon} from '@coveord/plasma-react-icons';
 import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
+import {TableLayouts} from './layouts/TableLayouts';
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
 import {TableConsumer} from './TableConsumer';
@@ -18,11 +19,11 @@ import {TableDateRangePicker} from './TableDateRangePicker';
 import {TableFilter} from './TableFilter';
 import {TableFooter} from './TableFooter';
 import {TableHeader} from './TableHeader';
+import {TableLastUpdated} from './TableLastUpdated';
 import {TableLoading} from './TableLoading';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
-import {TableLayouts} from './layouts/TableLayouts';
 export type RowSelectionWithData<TData> = Record<string, TData>;
 export interface RowSelectionState<TData> {
@@ -245,6 +246,15 @@ export interface TableProps<T> {
      * @default false
      */
     disableRowSelection?: boolean;
+    /**
+     * Nodes that are considered inside the table.
+     *
+     * Rows normally get unselected when clicking outside the table, but sometimes it has difficulties guessing what is inside or outside, for example when using modals.
+     * You can use this prop to force the table to consider some nodes to be inside the table.
+     *
+     * @see https://mantine.dev/hooks/use-click-outside/#multiple-nodes
+     */
+    additionalRootNodes?: HTMLElement[];
     /**
      * Additional options that can be passed to the table
      */
@@ -268,6 +278,7 @@ export interface TableType {
     Filter: typeof TableFilter;
     Footer: typeof TableFooter;
     Header: typeof TableHeader;
+    LastUpdated: typeof TableLastUpdated;
     Pagination: typeof TablePagination;
     PerPage: typeof TablePerPage;
     Predicate: typeof TablePredicate;

package/src/components/table/TableFooter.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ interface TableFooterProps extends DefaultProps {
     children?: ReactNode;
 }
 export const TableFooter: FunctionComponent<TableFooterProps> = ({children, ...others}) => (
-    <Group position="apart" px="md" py="sm" {...others}>
+    <Group position="apart" px="xl" py="md" {...others}>
         {children}
     </Group>
 );

package/src/components/table/TableHeader.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ const useStyles = createStyles((theme) => ({
         borderBottom: `1px solid ${theme.colors.gray[3]}`,
     },
     multiSelectInfo: {
-        justifySelf: 'flex-start',
+        display: 'flex',
     },
 }));