@redsift/table-pro 12.6.6 → 13.0.1

package/_internal/StatefulDataGrid2.js

@@ -1,6 +1,6 @@
 import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
 import * as React from 'react';
-import React__default, { useCallback, useEffect, useRef, useMemo, forwardRef, useState } from 'react';
+import React__default, { useCallback, useRef, useEffect, useMemo, forwardRef, useState } from 'react';
 import { createTheme, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
 import classNames from 'classnames';
 import { LicenseInfo } from '@mui/x-license';
@@ -22,7 +22,7 @@ const InputNumberInterval = props => {
     applyValue,
     focusElementRef = null
   } = props;
-  const filterTimeout = React.useRef();
+  const filterTimeout = React.useRef(undefined);
   const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : '');
   const [applying, setIsApplying] = React.useState(false);
   React.useEffect(() => {
@@ -2666,6 +2666,11 @@ function isDeepEqual(a, b) {
   if (aKeys.length !== bKeys.length) return false;
   return aKeys.every(key => isDeepEqual(aObj[key], bObj[key]));
 }
+
+/** The models one change writes to the URL; everything else comes from the current state. */
+
+/** What this hook has written to the URL since the router last reported a new `search`. */
+
 const useStatefulTable = props => {
   var _initialState$columns, _initialState$columns2;
   const {
@@ -2687,6 +2692,19 @@ const useStatefulTable = props => {
     pathname,
     historyReplace
   } = useRouter();
+
+  // What this hook has written to the URL since the router last reported a new `search`. Every write
+  // rebuilds the whole URL, so a second change in the same tick, before the router re-renders the grid
+  // with the first, would otherwise start again from the models parsed at this render and drop the
+  // first: `apiRef.setSortModel(m)` then `setFilterModel(f)` kept the filter and lost the sort.
+  // `written` is the URL of the last write: the router has not reported it yet, so it is what the next write
+  // compares itself with (`updateUrl` skips a write that equals the URL it is given), not the `search` this
+  // render saw. A new `search` means the parse below already reflects those writes: `writeUrl` starts over.
+  const pendingWritesRef = useRef({
+    search,
+    overrides: {},
+    written: null
+  });
   const id = pathname;
 
   // States and setters persisted in the local storage for this table
@@ -2802,6 +2820,42 @@ const useStatefulTable = props => {
   }
   const defaultColumnOrder = (_initialState$columns = initialState === null || initialState === void 0 ? void 0 : (_initialState$columns2 = initialState.columns) === null || _initialState$columns2 === void 0 ? void 0 : _initialState$columns2.orderedFields) !== null && _initialState$columns !== void 0 ? _initialState$columns : propsColumns.map(c => c.field);
 
+  // Helper to build the current DataGridModel for updateUrl calls
+  const buildModel = function () {
+    var _apiRef$current$state, _apiRef$current2;
+    let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return _objectSpread2({
+      filterModel: filterParsed,
+      sortModel: sortModelParsed,
+      paginationModel: paginationModelParsed,
+      columnsModel: (_apiRef$current$state = (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.state.columns.columnVisibilityModel) !== null && _apiRef$current$state !== void 0 ? _apiRef$current$state : {},
+      pinnedColumnsModel: pinnedColumnsModel,
+      density: densityParsed,
+      columnOrderModel: columnOrderParsed,
+      defaultColumnOrder
+    }, overrides);
+  };
+
+  // Writes the URL: the current models, what this hook has written since the last new `search`, then
+  // this change (see pendingWritesRef).
+  const writeUrl = overrides => {
+    var _pending$written;
+    // Decided here, when a change happens, not while rendering: a render React discards must not reset it.
+    if (pendingWritesRef.current.search !== search) {
+      pendingWritesRef.current = {
+        search,
+        overrides: {},
+        written: null
+      };
+    }
+    const pending = pendingWritesRef.current;
+    pending.overrides = _objectSpread2(_objectSpread2({}, pending.overrides), overrides);
+    updateUrl(buildModel(pending.overrides), (_pending$written = pending.written) !== null && _pending$written !== void 0 ? _pending$written : search, localStorageVersion, newSearch => {
+      pending.written = newSearch;
+      historyReplace(newSearch);
+    }, columns);
+  };
+
   // Subscribe to density changes via stateChange event (MUI v6 has no densityChange event)
   useEffect(() => {
     const api = apiRef.current;
@@ -2811,16 +2865,9 @@ const useStatefulTable = props => {
       const currentDensity = api.state.density;
       if (currentDensity !== prevDensity) {
         prevDensity = currentDensity;
-        updateUrl({
-          filterModel: filterParsed,
-          sortModel: sortModelParsed,
-          paginationModel: paginationModelParsed,
-          columnsModel: api.state.columns.columnVisibilityModel,
-          pinnedColumnsModel: pinnedColumnsModel,
-          density: currentDensity,
-          columnOrderModel: columnOrderParsed,
-          defaultColumnOrder
-        }, search, localStorageVersion, historyReplace, columns);
+        writeUrl({
+          density: currentDensity
+        });
       }
     });
     return unsub;
@@ -2833,16 +2880,9 @@ const useStatefulTable = props => {
     const handleColumnOrderChange = () => {
       const orderedFields = api.state.columns.orderedFields;
       if (orderedFields && !isDeepEqual(orderedFields, columnOrderParsed)) {
-        updateUrl({
-          filterModel: filterParsed,
-          sortModel: sortModelParsed,
-          paginationModel: paginationModelParsed,
-          columnsModel: api.state.columns.columnVisibilityModel,
-          pinnedColumnsModel,
-          density: densityParsed,
-          columnOrderModel: orderedFields,
-          defaultColumnOrder
-        }, search, localStorageVersion, historyReplace, columns);
+        writeUrl({
+          columnOrderModel: orderedFields
+        });
       }
     };
     const unsub1 = api.subscribeEvent('columnOrderChange', handleColumnOrderChange);
@@ -2853,22 +2893,6 @@ const useStatefulTable = props => {
     };
   }, [apiRef, columnOrderParsed, defaultColumnOrder, filterParsed, sortModelParsed, paginationModelParsed, pinnedColumnsModel, densityParsed, search, localStorageVersion, historyReplace, columns]);
 
-  // Helper to build the current DataGridModel for updateUrl calls
-  const buildModel = function () {
-    var _apiRef$current$state, _apiRef$current2;
-    let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return _objectSpread2({
-      filterModel: filterParsed,
-      sortModel: sortModelParsed,
-      paginationModel: paginationModelParsed,
-      columnsModel: (_apiRef$current$state = (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.state.columns.columnVisibilityModel) !== null && _apiRef$current$state !== void 0 ? _apiRef$current$state : {},
-      pinnedColumnsModel: pinnedColumnsModel,
-      density: densityParsed,
-      columnOrderModel: columnOrderParsed,
-      defaultColumnOrder
-    }, overrides);
-  };
-
   // Track last emitted values for deep-equal guards to avoid feedback loops.
   // Initialised from the current parsed values; updated only when we actually fire.
   const lastEmittedFilterRef = useRef(filterParsed);
@@ -2895,25 +2919,25 @@ const useStatefulTable = props => {
       // next render's URL re-parse reuses that id and the GridFilterForm key — and thus
       // the value input's focus — survives the write→parse roundtrip (DS-81).
       filterIdSourceRef.current = filterModel;
-      updateUrl(buildModel({
+      writeUrl({
         filterModel
-      }), search, localStorageVersion, historyReplace, columns);
+      });
       propsOnFilterModelChange === null || propsOnFilterModelChange === void 0 ? void 0 : propsOnFilterModelChange(filterModel, details);
     },
     filterModel: filterParsedRef.current,
     onSortModelChange: (model, details) => {
       if (isDeepEqual(model, lastEmittedSortRef.current)) return;
       lastEmittedSortRef.current = model;
-      updateUrl(buildModel({
+      writeUrl({
         sortModel: model
-      }), search, localStorageVersion, historyReplace, columns);
+      });
       propsOnSortModelChange === null || propsOnSortModelChange === void 0 ? void 0 : propsOnSortModelChange(model, details);
     },
     sortModel: sortModelParsedRef.current,
     onPinnedColumnsChange: (pinnedColumns, details) => {
-      updateUrl(buildModel({
+      writeUrl({
         pinnedColumnsModel: pinnedColumns
-      }), search, localStorageVersion, historyReplace, columns);
+      });
       propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
     },
     pinnedColumns: pinnedColumnsModelRef.current,
@@ -2924,16 +2948,16 @@ const useStatefulTable = props => {
       });
       if (isDeepEqual(paginationModel, lastEmittedPaginationRef.current)) return;
       lastEmittedPaginationRef.current = paginationModel;
-      updateUrl(buildModel({
+      writeUrl({
         paginationModel
-      }), search, localStorageVersion, historyReplace, columns);
+      });
       propsOnPaginationModelChange === null || propsOnPaginationModelChange === void 0 ? void 0 : propsOnPaginationModelChange(paginationModel, details);
     },
     columnVisibilityModel: visibilityModelRef.current,
     onColumnVisibilityModelChange: (columnsVisibilityModel, details) => {
-      updateUrl(buildModel({
+      writeUrl({
         columnsModel: columnsVisibilityModel
-      }), search, localStorageVersion, historyReplace, columns);
+      });
       propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
     },
     onColumnWidthChange: (params, event, details) => {
@@ -3002,7 +3026,7 @@ const CLASSNAME = 'redsift-datagrid';
 
 const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   var _ref7;
-  const datagridRef = ref || useRef();
+  const datagridRef = ref || useRef(undefined);
   const {
       apiRef: propsApiRef,
       autoHeight,
@@ -3058,8 +3082,10 @@ const StatefulDataGrid = /*#__PURE__*/forwardRef((props, ref) => {
   // write-only onChange handlers for URL/localStorage persistence.
   const isDataSourceMode = Boolean(dataSource);
   const effectivePaginationMode = isDataSourceMode ? 'server' : paginationMode;
-  const effectiveFilterMode = isDataSourceMode ? 'server' : propsFilterMode;
-  const effectiveSortingMode = isDataSourceMode ? 'server' : propsSortingMode;
+  // Default to 'client' rather than pass `undefined`: an explicit undefined replaces MUI's own default,
+  // and MUI filters rows only when `filterMode === 'client'`, so no client-side filter ever applied.
+  const effectiveFilterMode = isDataSourceMode ? 'server' : propsFilterMode !== null && propsFilterMode !== void 0 ? propsFilterMode : 'client';
+  const effectiveSortingMode = isDataSourceMode ? 'server' : propsSortingMode !== null && propsSortingMode !== void 0 ? propsSortingMode : 'client';
   const {
     onColumnVisibilityModelChange: controlledOnColumnVisibilityModelChange,
     onFilterModelChange: controlledOnFilterModelChange,