material-react-table 1.7.2 → 1.7.4

package/dist/cjs/index.js

@@ -17,7 +17,6 @@ var DensitySmallIcon = require('@mui/icons-material/DensitySmall');
 var DragHandleIcon = require('@mui/icons-material/DragHandle');
 var DynamicFeedIcon = require('@mui/icons-material/DynamicFeed');
 var EditIcon = require('@mui/icons-material/Edit');
-var ExpandLessIcon = require('@mui/icons-material/ExpandLess');
 var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 var FilterAltIcon = require('@mui/icons-material/FilterAlt');
 var FilterListIcon = require('@mui/icons-material/FilterList');
@@ -93,7 +92,6 @@ var DensitySmallIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensitySmallI
 var DragHandleIcon__default = /*#__PURE__*/_interopDefaultLegacy(DragHandleIcon);
 var DynamicFeedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DynamicFeedIcon);
 var EditIcon__default = /*#__PURE__*/_interopDefaultLegacy(EditIcon);
-var ExpandLessIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandLessIcon);
 var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
 var FilterAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltIcon);
 var FilterListIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListIcon);
@@ -312,8 +310,8 @@ const getIsFirstRightPinnedColumn = (column) => {
 const getTotalRight = (table, column) => {
     return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 200);
 };
-const getCommonCellStyles = ({ column, table, tableCellProps, theme, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     return (Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
             ? styles.alpha(styles.lighten(theme.palette.background.default, 0.04), 0.97)
             : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
@@ -321,37 +319,31 @@ const getCommonCellStyles = ({ column, table, tableCellProps, theme, }) => {
             : getIsFirstRightPinnedColumn(column)
                 ? `4px 0 8px -6px ${styles.alpha(theme.palette.common.black, 0.2)} inset`
                 : undefined, display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell', flex: table.options.layoutMode === 'grid'
-            ? `var(--col-${column.id
-                .replaceAll('.', '_')
-                .replaceAll(' ', '_')}-size) 0 auto`
+            ? `var(--col-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) 0 auto`
             : undefined, left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined, ml: table.options.enableColumnVirtualization &&
             column.getIsPinned() === 'left' &&
             column.getPinnedIndex() === 0
-            ? `-${column.getSize() * ((_b = (_a = table.getState().columnPinning.left) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 1)}px`
+            ? `-${column.getSize() * ((_c = (_b = table.getState().columnPinning.left) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 1)}px`
             : undefined, mr: table.options.enableColumnVirtualization &&
             column.getIsPinned() === 'right' &&
             column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
             ? `-${column.getSize() *
-                ((_d = (_c = table.getState().columnPinning.right) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 1) *
+                ((_e = (_d = table.getState().columnPinning.right) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 1) *
                 1.2}px`
-            : undefined, opacity: ((_e = table.getState().draggingColumn) === null || _e === void 0 ? void 0 : _e.id) === column.id ||
-            ((_f = table.getState().hoveredColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id
+            : undefined, opacity: ((_f = table.getState().draggingColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id ||
+            ((_g = table.getState().hoveredColumn) === null || _g === void 0 ? void 0 : _g.id) === column.id
             ? 0.5
             : 1, position: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
             ? 'sticky'
             : undefined, right: column.getIsPinned() === 'right'
             ? `${getTotalRight(table, column)}px`
-            : undefined, transition: table.options.enableColumnVirtualization || column.getIsResizing()
+            : undefined, transition: table.options.enableColumnVirtualization
             ? 'none'
             : `padding 150ms ease-in-out` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
         ? tableCellProps.sx(theme)
-        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { minWidth: `max(calc(var(--col-${column.id
-            .replaceAll('.', '_')
-            .replaceAll(' ', '_')}-size) * 1px), ${(_g = column.columnDef.minSize) !== null && _g !== void 0 ? _g : 30}px)`, width: `calc(var(--col-${column.id
-            .replaceAll('.', '_')
-            .replaceAll(' ', '_')}-size) * 1px)` }));
+        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { minWidth: `max(calc(var(--col-${parseCSSVarId((_h = header === null || header === void 0 ? void 0 : header.id) !== null && _h !== void 0 ? _h : column.id)}-size) * 1px), ${(_j = column.columnDef.minSize) !== null && _j !== void 0 ? _j : 30}px)`, width: `calc(var(--col-${parseCSSVarId((_k = header === null || header === void 0 ? void 0 : header.id) !== null && _k !== void 0 ? _k : column.id)}-size) * 1px)` }));
 };
 const MRT_DefaultColumn = {
     filterVariant: 'text',
@@ -373,6 +365,7 @@ const MRT_DefaultDisplayColumn = {
     enableResizing: false,
     enableSorting: false,
 };
+const parseCSSVarId = (id) => id.replaceAll('.', '_').replaceAll(' ', '_').replaceAll('+', '_');
 
 const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
     const itemRank = matchSorterUtils.rankItem(row.getValue(columnId), filterValue, {
@@ -470,7 +463,6 @@ const MRT_Default_Icons = {
     DragHandleIcon: DragHandleIcon__default["default"],
     DynamicFeedIcon: DynamicFeedIcon__default["default"],
     EditIcon: EditIcon__default["default"],
-    ExpandLessIcon: ExpandLessIcon__default["default"],
     ExpandMoreIcon: ExpandMoreIcon__default["default"],
     FilterAltIcon: FilterAltIcon__default["default"],
     FilterListIcon: FilterListIcon__default["default"],
@@ -505,7 +497,7 @@ const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFil
     Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
 
 const MRT_ExpandAllButton = ({ table }) => {
-    var _a;
+    var _a, _b;
     const { getIsAllRowsExpanded, getIsSomeRowsExpanded, getCanSomeRowsExpand, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
     const { density, isLoading } = getState();
     const iconButtonProps = muiExpandAllButtonProps instanceof Function
@@ -518,15 +510,14 @@ const MRT_ExpandAllButton = ({ table }) => {
         React__default["default"].createElement("span", null,
             React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
-                React__default["default"].createElement(KeyboardDoubleArrowDownIcon, { style: {
-                        transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
-                        transition: 'transform 150ms',
-                    } })))));
+                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }), (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (React__default["default"].createElement(KeyboardDoubleArrowDownIcon, { style: {
+                    transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
+                    transition: 'transform 150ms',
+                } }))))));
 };
 
 const MRT_ExpandButton = ({ row, table }) => {
-    var _a;
+    var _a, _b;
     const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = table;
     const { density } = getState();
     const iconButtonProps = muiExpandButtonProps instanceof Function
@@ -546,11 +537,10 @@ const MRT_ExpandButton = ({ row, table }) => {
         React__default["default"].createElement("span", null,
             React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
-                React__default["default"].createElement(ExpandMoreIcon, { style: {
-                        transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
-                        transition: 'transform 150ms',
-                    } })))));
+                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }), (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (React__default["default"].createElement(ExpandMoreIcon, { style: {
+                    transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
+                    transition: 'transform 150ms',
+                } }))))));
 };
 
 const mrtFilterOptions = (localization) => [
@@ -1547,7 +1537,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
-            React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
+            React__default["default"].createElement(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85) translateX(-4px)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
                         opacity: 1,
                     } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
@@ -1898,10 +1888,8 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
 const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
     var _a;
     const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
-    const { density, showColumnFilters } = getState();
+    const { density } = getState();
     const { column } = header;
-    const { columnDef } = column;
-    const { columnDefType } = columnDef;
     return (React__default["default"].createElement(Box__default["default"], { onDoubleClick: () => {
             setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
             column.resetSize();
@@ -1923,7 +1911,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
         React__default["default"].createElement(Divider__default["default"], { flexItem: true, orientation: "vertical", sx: {
                 borderRadius: '2px',
                 borderWidth: '2px',
-                height: showColumnFilters && columnDefType === 'data' ? '3.5rem' : '1.5rem',
+                height: '24px',
                 touchAction: 'none',
                 transition: column.getIsResizing()
                     ? undefined
@@ -2041,6 +2029,7 @@ const MRT_TableHeadCell = ({ header, table }) => {
                     ? 2
                     : 1 }, getCommonCellStyles({
             column,
+            header,
             table,
             tableCellProps,
             theme,
@@ -2294,7 +2283,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
 };
 
 const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const theme = styles.useTheme();
     const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, density, isLoading, showSkeletons, } = getState();
@@ -2421,12 +2410,12 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
             theme,
             tableCellProps,
         })), draggingBorders)) }),
-        React__default["default"].createElement(React__default["default"].Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React__default["default"].createElement(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
+        React__default["default"].createElement(React__default["default"].Fragment, null, cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : isLoading || showSkeletons ? (React__default["default"].createElement(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
             rowNumberMode === 'static' &&
             column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React__default["default"].createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
             (column.id === 'mrt-row-select' ||
                 column.id === 'mrt-row-expand' ||
-                !row.getIsGrouped()) ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
+                !row.getIsGrouped()) ? ((_c = columnDef.Cell) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
             cell,
             renderedCellValue: cell.renderValue(),
             column,
@@ -2436,8 +2425,8 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
             columnDef.enableClickToCopy !== false ? (React__default["default"].createElement(MRT_CopyButton, { cell: cell, table: table },
             React__default["default"].createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React__default["default"].createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))),
         cell.getIsGrouped() && !columnDef.GroupedCell && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            " (", (_b = row.subRows) === null || _b === void 0 ? void 0 :
-            _b.length,
+            " (", (_d = row.subRows) === null || _d === void 0 ? void 0 :
+            _d.length,
             ")"))));
 };
 const Memo_MRT_TableBodyCell = React.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
@@ -2715,8 +2704,10 @@ const MRT_Table = ({ table }) => {
         const headers = getFlatHeaders();
         const colSizes = {};
         for (let i = 0; i < headers.length; i++) {
-            const h = headers[i];
-            colSizes[`--col-${h.column.id}-size`.replaceAll('.', '_').replaceAll(' ', '_')] = h.getSize();
+            const header = headers[i];
+            const colSize = header.getSize();
+            colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+            colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
         }
         return colSizes;
     }, [columns, columnSizing, columnSizingInfo]);