material-react-table 2.11.0 → 2.11.2

package/dist/index.js

@@ -422,8 +422,8 @@ const MRT_SortingFns = Object.assign(Object.assign({}, reactTable.sortingFns), {
 const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
     Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
 
-const getMRT_Rows = (table, pinnedRowIds = [], all) => {
-    const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
+const getMRT_Rows = (table, all) => {
+    const { getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
     const { creatingRow, pagination } = getState();
     const isRankingRows = getIsRankingRows(table);
     let rows = [];
@@ -436,19 +436,28 @@ const getMRT_Rows = (table, pinnedRowIds = [], all) => {
                 : getCenterRows();
     }
     else {
+        // fuzzy ranking adjustments
         rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
         if (enablePagination && !manualPagination && !all) {
             const start = pagination.pageIndex * pagination.pageSize;
             rows = rows.slice(start, start + pagination.pageSize);
         }
+        if (enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
+            // "re-center-ize" the rows (no top or bottom pinned rows unless sticky)
+            rows = rows.filter((row) => !row.getIsPinned());
+        }
     }
+    // row pinning adjustments
     if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
+        const centerPinnedRowIds = rows
+            .filter((row) => row.getIsPinned())
+            .map((r) => r.id);
         rows = [
-            ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
+            ...getTopRows().filter((row) => !centerPinnedRowIds.includes(row.id)),
             ...rows,
-            ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
         ];
     }
+    // blank inserted creating row adjustments
     if (positionCreatingRow !== undefined &&
         creatingRow &&
         createDisplayMode === 'row') {
@@ -490,42 +499,67 @@ const getIsRowSelected = ({ row, table, }) => {
             row.getCanSelectSubRows() &&
             row.getIsAllSubRowsSelected()));
 };
-const getMRT_RowSelectionHandler = () => ({ event, row, staticRowIndex = 0, table, }) => {
+const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table, }) => (event, value) => {
     var _a;
-    const { getState, options: { enableBatchRowSelection, enableRowPinning, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
+    const { getState, options: { enableBatchRowSelection, enableMultiRowSelection, enableRowPinning, manualPagination, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
     const { pagination: { pageIndex, pageSize }, } = getState();
-    const isChecked = getIsRowSelected({ row, table });
-    const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
-    // toggle selected of this row
-    row.getToggleSelectedHandler()(event);
+    const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
+    const wasCurrentRowChecked = getIsRowSelected({ row, table });
+    // toggle selection of this row
+    row.toggleSelected(value !== null && value !== void 0 ? value : !wasCurrentRowChecked);
+    const changedRowIds = new Set([row.id]);
     // if shift key is pressed, select all rows between last selected and this one
     if (enableBatchRowSelection &&
+        enableMultiRowSelection &&
         event.nativeEvent.shiftKey &&
         lastSelectedRowId.current !== null) {
-        const rows = getMRT_Rows(table, undefined, true);
+        const rows = getMRT_Rows(table, true);
         const lastIndex = rows.findIndex((r) => r.id === lastSelectedRowId.current);
         if (lastIndex !== -1) {
-            const currentIndex = staticRowIndex + pageSize * pageIndex;
+            const isLastIndexChecked = getIsRowSelected({
+                row: rows === null || rows === void 0 ? void 0 : rows[lastIndex],
+                table,
+            });
+            const currentIndex = staticRowIndex + paginationOffset;
             const [start, end] = lastIndex < currentIndex
                 ? [lastIndex, currentIndex]
                 : [currentIndex, lastIndex];
-            for (let i = start; i <= end; i++) {
-                rows[i].toggleSelected(!isChecked);
+            // toggle selection of all rows between last selected and this one
+            // but only if the last selected row is not the same as the current one
+            if (wasCurrentRowChecked !== isLastIndexChecked) {
+                for (let i = start; i <= end; i++) {
+                    rows[i].toggleSelected(!wasCurrentRowChecked);
+                    changedRowIds.add(rows[i].id);
+                }
             }
         }
     }
+    // record the last selected row id
     lastSelectedRowId.current = row.id;
     // if all sub rows were selected, unselect them
     if (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) {
         (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.forEach((r) => r.toggleSelected(false));
     }
-    if (isStickySelection) {
-        row.pin(!row.getIsPinned() && isChecked
-            ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
-                ? 'bottom'
-                : 'top'
-            : false);
+    if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
+        changedRowIds.forEach((rowId) => {
+            const rowToTogglePin = table.getRow(rowId);
+            rowToTogglePin.pin(!wasCurrentRowChecked //was not previously pinned or selected
+                ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
+                    ? 'bottom'
+                    : 'top'
+                : false);
+        });
+    }
+};
+const getMRT_SelectAllHandler = ({ table }) => (event, value) => {
+    const { options: { enableRowPinning, rowPinningDisplayMode, selectAllMode }, refs: { lastSelectedRowId }, } = table;
+    selectAllMode === 'all'
+        ? table.toggleAllRowsSelected(value !== null && value !== void 0 ? value : event.target.checked)
+        : table.toggleAllPageRowsSelected(value !== null && value !== void 0 ? value : event.target.checked);
+    if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
+        table.setRowPinning({ bottom: [], top: [] });
     }
+    lastSelectedRowId.current = null;
 };
 
 const MRT_AggregationFns = Object.assign({}, reactTable.aggregationFns);
@@ -1071,10 +1105,9 @@ const getMRT_RowPinningColumnDef = (tableOptions) => {
 const MRT_SelectCheckbox = (_a) => {
     var _b;
     var { row, staticRowIndex, table } = _a, rest = __rest(_a, ["row", "staticRowIndex", "table"]);
-    const { getState, options: { enableMultiRowSelection, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, refs: { lastSelectedRowId }, } = table;
+    const { getState, options: { enableMultiRowSelection, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, selectAllMode, }, } = table;
     const { density, isLoading } = getState();
     const selectAll = !row;
-    const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
     const allRowsSelected = selectAll
         ? selectAllMode === 'page'
             ? table.getIsAllPageRowsSelected()
@@ -1089,16 +1122,14 @@ const MRT_SelectCheckbox = (_a) => {
             row,
             table,
         }))), rest);
-    const onSelectionChange = getMRT_RowSelectionHandler();
-    const onSelectAllChange = (event) => {
-        selectAllMode === 'all'
-            ? table.getToggleAllRowsSelectedHandler()(event)
-            : table.getToggleAllPageRowsSelectedHandler()(event);
-        if (isStickySelection) {
-            table.setRowPinning({ bottom: [], top: [] });
-        }
-        lastSelectedRowId.current = null;
-    };
+    const onSelectionChange = row
+        ? getMRT_RowSelectionHandler({
+            row,
+            staticRowIndex,
+            table,
+        })
+        : undefined;
+    const onSelectAllChange = getMRT_SelectAllHandler({ table });
     const commonProps = Object.assign(Object.assign({ 'aria-label': selectAll
             ? localization.toggleSelectAll
             : localization.toggleSelectRow, checked: isChecked, disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
@@ -1107,9 +1138,7 @@ const MRT_SelectCheckbox = (_a) => {
                 : localization.toggleSelectRow,
         }, onChange: (event) => {
             event.stopPropagation();
-            row
-                ? onSelectionChange({ event, row, staticRowIndex, table })
-                : onSelectAllChange(event);
+            row ? onSelectionChange(event) : onSelectAllChange(event);
         }, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
             var _a;
             e.stopPropagation();
@@ -1117,8 +1146,8 @@ const MRT_SelectCheckbox = (_a) => {
         }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.5rem', zIndex: 0 }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))), title: undefined });
     return (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, getCommonTooltipProps(), { title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : (selectAll
             ? localization.toggleSelectAll
-            : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsxRuntime.jsx(Radio__default["default"], Object.assign({}, commonProps))) : (jsxRuntime.jsx(Checkbox__default["default"], Object.assign({ indeterminate: selectAll
-                ? table.getIsSomeRowsSelected() && !allRowsSelected
+            : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsxRuntime.jsx(Radio__default["default"], Object.assign({}, commonProps))) : (jsxRuntime.jsx(Checkbox__default["default"], Object.assign({ indeterminate: !isChecked && selectAll
+                ? table.getIsSomeRowsSelected()
                 : (row === null || row === void 0 ? void 0 : row.getIsSomeSelected()) && row.getCanSelectSubRows() }, commonProps))) })));
 };
 
@@ -1769,10 +1798,10 @@ const useMRT_RowVirtualizer = (table, rows) => {
     return rowVirtualizer;
 };
 
-const useMRT_Rows = (table, pinnedRowIds = []) => {
+const useMRT_Rows = (table) => {
     const { getRowModel, getState, options: { data, enableGlobalFilterRankedResults, positionCreatingRow }, } = table;
     const { creatingRow, expanded, globalFilter, pagination, rowPinning, sorting, } = getState();
-    const rows = react.useMemo(() => getMRT_Rows(table, pinnedRowIds), [
+    const rows = react.useMemo(() => getMRT_Rows(table), [
         creatingRow,
         data,
         enableGlobalFilterRankedResults,
@@ -2300,7 +2329,7 @@ const MRT_TableBody = (_a) => {
             .rows.filter((row) => row.getIsPinned())
             .map((r) => r.id);
     }, [rowPinning, getRowModel().rows]);
-    const rows = useMRT_Rows(table, pinnedRowIds);
+    const rows = useMRT_Rows(table);
     const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
     const { virtualRows } = rowVirtualizer !== null && rowVirtualizer !== void 0 ? rowVirtualizer : {};
     const commonRowProps = {
@@ -3505,7 +3534,7 @@ const MRT_TableHeadRow = (_a) => {
 const MRT_ToolbarAlertBanner = (_a) => {
     var _b, _c, _d;
     var { stackAlertBanner, table } = _a, rest = __rest(_a, ["stackAlertBanner", "table"]);
-    const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { lastSelectedRowId, tablePaperRef }, } = table;
+    const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
     const { density, grouping, rowSelection, showAlertBanner } = getState();
     const alertProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
         table,
@@ -3513,14 +3542,11 @@ const MRT_ToolbarAlertBanner = (_a) => {
     const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
         table,
     });
-    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
+    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().flatRows.length;
     const selectedRowCount = react.useMemo(() => manualPagination
         ? Object.values(rowSelection).filter(Boolean).length
         : getFilteredSelectedRowModel().rows.length, [rowSelection, totalRowCount, manualPagination]);
-    const selectedAlert = selectedRowCount > 0 ? (jsxRuntime.jsxs(Stack__default["default"], { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toString()), jsxRuntime.jsx(Button__default["default"], { onClick: () => {
-                    table.toggleAllRowsSelected(false);
-                    lastSelectedRowId.current = null;
-                }, size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
+    const selectedAlert = selectedRowCount > 0 ? (jsxRuntime.jsxs(Stack__default["default"], { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toString()), jsxRuntime.jsx(Button__default["default"], { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
     const groupedAlert = grouping.length > 0 ? (jsxRuntime.jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxRuntime.jsxs(react.Fragment, { children: [index > 0 ? localization.thenBy : '', jsxRuntime.jsx(Chip__default["default"], Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
     return (jsxRuntime.jsx(Collapse__default["default"], { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsxRuntime.jsx(Alert__default["default"], Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
                 var _a, _b;
@@ -4287,6 +4313,7 @@ exports.getIsRowSelected = getIsRowSelected;
 exports.getLeadingDisplayColumnIds = getLeadingDisplayColumnIds;
 exports.getMRT_RowSelectionHandler = getMRT_RowSelectionHandler;
 exports.getMRT_Rows = getMRT_Rows;
+exports.getMRT_SelectAllHandler = getMRT_SelectAllHandler;
 exports.getTotalRight = getTotalRight;
 exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
 exports.isCellEditable = isCellEditable;