@redsift/table 12.6.6-alpha.2 → 13.0.0

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(() => {
@@ -3075,6 +3075,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 {
@@ -3099,6 +3104,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.setPivotModel(m)` then `setPivotActive(true)` left pivot on with an empty model.
+  // `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
@@ -3246,6 +3264,46 @@ 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,
+      rowGroupingModel: rowGroupingParsed,
+      aggregationModel: aggregationParsed,
+      pivotModel: pivotParsed,
+      pivotActive: pivotActiveParsed
+    }, 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;
@@ -3255,20 +3313,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,
-          rowGroupingModel: rowGroupingParsed,
-          aggregationModel: aggregationParsed,
-          pivotModel: pivotParsed,
-          pivotActive: pivotActiveParsed
-        }, search, localStorageVersion, historyReplace, columns);
+        writeUrl({
+          density: currentDensity
+        });
       }
     });
     return unsub;
@@ -3281,20 +3328,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,
-          rowGroupingModel: rowGroupingParsed,
-          aggregationModel: aggregationParsed,
-          pivotModel: pivotParsed,
-          pivotActive: pivotActiveParsed
-        }, search, localStorageVersion, historyReplace, columns);
+        writeUrl({
+          columnOrderModel: orderedFields
+        });
       }
     };
     const unsub1 = api.subscribeEvent('columnOrderChange', handleColumnOrderChange);
@@ -3305,26 +3341,6 @@ const useStatefulTable = props => {
     };
   }, [apiRef, columnOrderParsed, defaultColumnOrder, filterParsed, sortModelParsed, paginationModelParsed, pinnedColumnsModel, densityParsed, rowGroupingParsed, aggregationParsed, pivotParsed, pivotActiveParsed, 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,
-      rowGroupingModel: rowGroupingParsed,
-      aggregationModel: aggregationParsed,
-      pivotModel: pivotParsed,
-      pivotActive: pivotActiveParsed
-    }, overrides);
-  };
-
   // Stable GridPivotModel identity — only recompute when the simplified value changes.
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const pivotModelMui = useMemo(() => toGridPivotModel(pivotParsed), [JSON.stringify(pivotParsed)]);
@@ -3360,18 +3376,18 @@ 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,
@@ -3385,9 +3401,9 @@ const useStatefulTable = props => {
       // callbacks are always forwarded so observers can still react.
       const pivotActiveLive = (_apiRef$current$state2 = (_apiRef$current4 = apiRef.current) === null || _apiRef$current4 === void 0 ? void 0 : (_apiRef$current4$stat = _apiRef$current4.state) === null || _apiRef$current4$stat === void 0 ? void 0 : (_apiRef$current4$stat2 = _apiRef$current4$stat.pivoting) === null || _apiRef$current4$stat2 === void 0 ? void 0 : _apiRef$current4$stat2.active) !== null && _apiRef$current$state2 !== void 0 ? _apiRef$current$state2 : pivotActiveParsed;
       if (!pivotActiveLive) {
-        updateUrl(buildModel({
+        writeUrl({
           pinnedColumnsModel: pinnedColumns
-        }), search, localStorageVersion, historyReplace, columns);
+        });
       }
       propsOnPinnedColumnsChange === null || propsOnPinnedColumnsChange === void 0 ? void 0 : propsOnPinnedColumnsChange(pinnedColumns, details);
     },
@@ -3399,9 +3415,9 @@ 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,
@@ -3416,9 +3432,9 @@ const useStatefulTable = props => {
       // callbacks are always forwarded.
       const pivotActiveLive = (_apiRef$current$state3 = (_apiRef$current5 = apiRef.current) === null || _apiRef$current5 === void 0 ? void 0 : (_apiRef$current5$stat = _apiRef$current5.state) === null || _apiRef$current5$stat === void 0 ? void 0 : (_apiRef$current5$stat2 = _apiRef$current5$stat.pivoting) === null || _apiRef$current5$stat2 === void 0 ? void 0 : _apiRef$current5$stat2.active) !== null && _apiRef$current$state3 !== void 0 ? _apiRef$current$state3 : pivotActiveParsed;
       if (!pivotActiveLive) {
-        updateUrl(buildModel({
+        writeUrl({
           columnsModel: columnsVisibilityModel
-        }), search, localStorageVersion, historyReplace, columns);
+        });
       }
       propsOnColumnVisibilityModelChange === null || propsOnColumnVisibilityModelChange === void 0 ? void 0 : propsOnColumnVisibilityModelChange(columnsVisibilityModel, details);
     },
@@ -3430,31 +3446,31 @@ const useStatefulTable = props => {
       });
     },
     onRowGroupingModelChange: (model, details) => {
-      updateUrl(buildModel({
+      writeUrl({
         rowGroupingModel: model
-      }), search, localStorageVersion, historyReplace, columns);
+      });
       propsOnRowGroupingModelChange === null || propsOnRowGroupingModelChange === void 0 ? void 0 : propsOnRowGroupingModelChange(model, details);
     },
     onAggregationModelChange: (model, details) => {
-      updateUrl(buildModel({
+      writeUrl({
         aggregationModel: model
-      }), search, localStorageVersion, historyReplace, columns);
+      });
       propsOnAggregationModelChange === null || propsOnAggregationModelChange === void 0 ? void 0 : propsOnAggregationModelChange(model, details);
     },
     onPivotModelChange: model => {
       const simplified = fromGridPivotModel(model);
       if (isDeepEqual(simplified, lastEmittedPivotRef.current)) return;
       lastEmittedPivotRef.current = simplified;
-      updateUrl(buildModel({
+      writeUrl({
         pivotModel: simplified
-      }), search, localStorageVersion, historyReplace, columns);
+      });
       propsOnPivotModelChange === null || propsOnPivotModelChange === void 0 ? void 0 : propsOnPivotModelChange(model);
     },
     onPivotActiveChange: active => {
       if (active === pivotActiveParsed) return;
-      updateUrl(buildModel({
+      writeUrl({
         pivotActive: active
-      }), search, localStorageVersion, historyReplace, columns);
+      });
     }
   };
 };
@@ -3515,7 +3531,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,
@@ -3574,8 +3590,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,