material-react-table 3.2.0 → 3.2.1

package/dist/index.esm.js

@@ -1580,9 +1580,10 @@ const useMRT_Effects = (table) => {
         if (!enablePagination || isLoading || showSkeletons)
             return;
         const { pageIndex, pageSize } = pagination;
-        const firstVisibleRowIndex = pageIndex * pageSize;
-        if (firstVisibleRowIndex >= totalRowCount) {
-            table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
+        const totalPages = totalRowCount > 0 ? Math.ceil(totalRowCount / pageSize) : 1;
+        const isOutOfBounds = pageIndex < 0 || pageIndex >= totalPages;
+        if (isOutOfBounds) {
+            table.setPageIndex(totalPages - 1);
         }
     }, [totalRowCount, enablePagination, isLoading, showSkeletons]);
     //turn off sort when global filter is looking for ranked results
@@ -3014,7 +3015,7 @@ const MRT_FilterCheckbox = (_a) => {
 };
 
 const MRT_FilterTextField = (_a) => {
-    var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     var { header, rangeFilterIndex, table } = _a, rest = __rest(_a, ["header", "rangeFilterIndex", "table"]);
     const { options: { enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
@@ -3167,11 +3168,10 @@ const MRT_FilterTextField = (_a) => {
                     lineHeight: '0.8rem',
                     whiteSpace: 'nowrap',
                 } }, (_m = textFieldProps.slotProps) === null || _m === void 0 ? void 0 : _m.formHelperText), input: endAdornment //hack because mui looks for presence of endAdornment key instead of undefined
-                ? { endAdornment, startAdornment }
-                : { startAdornment }, htmlInput: Object.assign({ 'aria-label': filterPlaceholder, autoComplete: 'off', disabled: !!filterChipLabel, sx: {
+                ? Object.assign({ endAdornment, startAdornment }, (_o = textFieldProps.slotProps) === null || _o === void 0 ? void 0 : _o.input) : Object.assign({ startAdornment }, (_p = textFieldProps.slotProps) === null || _p === void 0 ? void 0 : _p.input), htmlInput: Object.assign({ 'aria-label': filterPlaceholder, autoComplete: 'off', disabled: !!filterChipLabel, sx: {
                     textOverflow: 'ellipsis',
                     width: filterChipLabel ? 0 : undefined,
-                }, title: filterPlaceholder }, (_o = textFieldProps.slotProps) === null || _o === void 0 ? void 0 : _o.htmlInput) }), onKeyDown: (e) => {
+                }, title: filterPlaceholder }, (_q = textFieldProps.slotProps) === null || _q === void 0 ? void 0 : _q.htmlInput) }), onKeyDown: (e) => {
             var _a;
             e.stopPropagation();
             (_a = textFieldProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
@@ -3191,32 +3191,32 @@ const MRT_FilterTextField = (_a) => {
         value: filterValue || null,
     };
     return (jsxs(Fragment, { children: [(filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')) ? (jsx(TimePicker, Object.assign({}, commonDatePickerProps, timePickerProps, { slotProps: {
-                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_p = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _p === void 0 ? void 0 : _p.field),
-                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_q = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _q === void 0 ? void 0 : _q.textField),
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_r = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_s = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _s === void 0 ? void 0 : _s.textField),
                 } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('datetime')) ? (jsx(DateTimePicker, Object.assign({}, commonDatePickerProps, dateTimePickerProps, { slotProps: {
-                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_r = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.field),
-                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_s = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _s === void 0 ? void 0 : _s.textField),
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_t = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _t === void 0 ? void 0 : _t.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_u = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _u === void 0 ? void 0 : _u.textField),
                 } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsx(DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
-                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_t = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _t === void 0 ? void 0 : _t.field),
-                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_u = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _u === void 0 ? void 0 : _u.textField),
-                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_v = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _v !== void 0 ? _v : [], inputValue: filterValue, onInputChange: handleAutocompleteInputChange }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_v = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _v === void 0 ? void 0 : _v.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_w = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _w === void 0 ? void 0 : _w.textField),
+                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_x = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _x !== void 0 ? _x : [], inputValue: filterValue, onInputChange: handleAutocompleteInputChange }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
                     var _a, _b, _c, _d, _f;
                     return (jsx(TextField, Object.assign({}, commonTextFieldProps, builtinTextFieldProps, { slotProps: Object.assign(Object.assign(Object.assign({}, builtinTextFieldProps.slotProps), commonTextFieldProps.slotProps), { input: Object.assign(Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), (_a = builtinTextFieldProps.slotProps) === null || _a === void 0 ? void 0 : _a.input), { startAdornment: 
                                 //@ts-expect-error
                                 (_c = (_b = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.slotProps) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.startAdornment }), htmlInput: Object.assign(Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), (_d = builtinTextFieldProps.slotProps) === null || _d === void 0 ? void 0 : _d.htmlInput), (_f = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.slotProps) === null || _f === void 0 ? void 0 : _f.htmlInput) }), onClick: (e) => e.stopPropagation() })));
-                }, value: autocompleteValue }))) : (jsx(TextField, Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { slotProps: Object.assign(Object.assign({}, commonTextFieldProps.slotProps), { inputLabel: Object.assign({ shrink: isSelectFilter || isMultiSelectFilter }, (_w = commonTextFieldProps.slotProps) === null || _w === void 0 ? void 0 : _w.inputLabel), select: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
+                }, value: autocompleteValue }))) : (jsx(TextField, Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { slotProps: Object.assign(Object.assign({}, commonTextFieldProps.slotProps), { inputLabel: Object.assign({ shrink: isSelectFilter || isMultiSelectFilter }, (_y = commonTextFieldProps.slotProps) === null || _y === void 0 ? void 0 : _y.inputLabel), select: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
                             ? (selected) => !Array.isArray(selected) || (selected === null || selected === void 0 ? void 0 : selected.length) === 0 ? (jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected.map((value) => {
                                     const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value === value);
                                     return (jsx(Chip, { label: getValueAndLabel(selectedValue).label }, value));
                                 }) }))
-                            : undefined }, (_x = commonTextFieldProps.slotProps) === null || _x === void 0 ? void 0 : _x.select) }), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation(), value: isMultiSelectFilter
+                            : undefined }, (_z = commonTextFieldProps.slotProps) === null || _z === void 0 ? void 0 : _z.select) }), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation(), value: isMultiSelectFilter
                     ? Array.isArray(filterValue)
                         ? filterValue
                         : []
                     : filterValue, children: (isSelectFilter || isMultiSelectFilter) && [
                     jsx(MenuItem, { disabled: true, divider: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
                     ...[
-                        (_y = textFieldProps.children) !== null && _y !== void 0 ? _y : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
+                        (_0 = textFieldProps.children) !== null && _0 !== void 0 ? _0 : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
                             var _a;
                             const { label, value } = getValueAndLabel(option);
                             return (jsxs(MenuItem, { sx: {
@@ -3382,7 +3382,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
 
 const MRT_TableHeadCellGrabHandle = (_a) => {
     var { column, table, tableHeadCellRef } = _a, rest = __rest(_a, ["column", "table", "tableHeadCellRef"]);
-    const { getState, options: { enableColumnOrdering, muiColumnDragHandleProps }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
+    const { getState, options: { enableColumnOrdering, muiColumnDragHandleProps }, setColumnOrder, setColumnPinning, setDraggingColumn, setHoveredColumn, } = table;
     const { columnDef } = column;
     const { columnOrder, draggingColumn, hoveredColumn } = getState();
     const iconButtonProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table })), parseFromValuesOrFunc(columnDef.muiColumnDragHandleProps, {
@@ -3409,7 +3409,12 @@ const MRT_TableHeadCellGrabHandle = (_a) => {
         else if (enableColumnOrdering &&
             hoveredColumn &&
             (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) !== (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)) {
-            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
+            const reorderedColumns = reorderColumn(column, hoveredColumn, columnOrder);
+            setColumnOrder(reorderedColumns);
+            setColumnPinning(({ left = [], right = [] }) => ({
+                left: reorderedColumns.filter(header => left.includes(header)),
+                right: reorderedColumns.filter(header => right.includes(header)),
+            }));
         }
         setDraggingColumn(null);
         setHoveredColumn(null);
@@ -3694,9 +3699,10 @@ const MRT_ToolbarAlertBanner = (_a) => {
         table,
     });
     const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getCoreRowModel().rows.length;
+    const filteredRowCount = getFilteredSelectedRowModel().rows.length;
     const selectedRowCount = useMemo(() => manualPagination
         ? Object.values(rowSelection).filter(Boolean).length
-        : getFilteredSelectedRowModel().rows.length, [rowSelection, totalRowCount, manualPagination]);
+        : filteredRowCount, [rowSelection, totalRowCount, manualPagination, filteredRowCount]);
     const selectedAlert = selectedRowCount > 0 ? (jsxs(Stack, { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString(localization.language))) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toLocaleString(localization.language)), jsx(Button, { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false, true), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
     const groupedAlert = grouping.length > 0 ? (jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxs(Fragment$1, { children: [index > 0 ? localization.thenBy : '', jsx(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
     return (jsx(Collapse, { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsx(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
@@ -4058,7 +4064,7 @@ const MRT_ColumnPinningButtons = (_a) => {
 const MRT_ShowHideColumnsMenuItems = (_a) => {
     var _b;
     var { allColumns, column, hoveredColumn, isNestedColumns, setHoveredColumn, table } = _a, rest = __rest(_a, ["allColumns", "column", "hoveredColumn", "isNestedColumns", "setHoveredColumn", "table"]);
-    const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor }, }, setColumnOrder, } = table;
+    const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor }, }, setColumnOrder, setColumnPinning, } = table;
     const { columnOrder } = getState();
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -4089,7 +4095,12 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
         setIsDragging(false);
         setHoveredColumn(null);
         if (hoveredColumn) {
-            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
+            const reorderedColumns = reorderColumn(column, hoveredColumn, columnOrder);
+            setColumnOrder(reorderedColumns);
+            setColumnPinning(({ left = [], right = [] }) => ({
+                left: reorderedColumns.filter(header => left.includes(header)),
+                right: reorderedColumns.filter(header => right.includes(header)),
+            }));
         }
     };
     const handleDragEnter = (_e) => {
@@ -4227,7 +4238,7 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
         setShowGlobalFilter(!showGlobalFilter);
         queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
-    return (jsx(Tooltip, { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch, children: jsx(IconButton, Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined, children: showGlobalFilter ? jsx(SearchOffIcon, {}) : jsx(SearchIcon, {}) })) }));
+    return (jsx(Tooltip, { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch, children: jsx(IconButton, Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter && showGlobalFilter, onClick: handleToggleSearch }, rest, { title: undefined, children: showGlobalFilter ? jsx(SearchOffIcon, {}) : jsx(SearchIcon, {}) })) }));
 };
 
 const MRT_ToolbarInternalButtons = (_a) => {