@mui/x-data-grid 5.6.1 → 5.9.0

package/legacy/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -0,0 +1,119 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+
+/**
+ * Implement the Pipeline Pattern
+ *
+ * More information and detailed example in (TODO add link to technical doc when ready)
+ *
+ * Some plugins contains custom logic to enrich data provided by other plugins or components.
+ * For instance, the row grouping plugin needs to add / remove the grouping columns when the grid columns are updated.
+ *
+ * =====================================================================================================================
+ *
+ * The plugin containing the custom logic must use:
+ *
+ * - `useGridRegisterPipeProcessor` to register their processor.
+ *
+ * - `apiRef.current.unstable_requestPipeProcessorsApplication` to imperatively re-apply a group.
+ *   This method should be used in last resort.
+ *   Most of the time, the application should be triggered by an update on the deps of the processor.
+ *
+ * =====================================================================================================================
+ *
+ * The plugin or component that needs to enrich its data must use:
+ *
+ * - `apiRef.current.unstable_applyPipeProcessors` to run in chain all the processors of a given group.
+ *
+ * - `useGridRegisterPipeApplier` to re-apply the whole pipe when requested.
+ *   The applier will be called when:
+ *   * a processor is registered.
+ *   * `apiRef.current.unstable_requestPipeProcessorsApplication` is called for the given group.
+ */
+export var useGridPipeProcessing = function useGridPipeProcessing(apiRef) {
+  var processorsCache = React.useRef({});
+  var runAppliers = React.useCallback(function (groupCache) {
+    if (!groupCache) {
+      return;
+    }
+
+    Object.values(groupCache.appliers).forEach(function (callback) {
+      callback();
+    });
+  }, []);
+  var registerPipeProcessor = React.useCallback(function (group, id, processor) {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
+    }
+
+    var groupCache = processorsCache.current[group];
+    var oldProcessor = groupCache.processors[id];
+
+    if (oldProcessor !== processor) {
+      groupCache.processors[id] = processor;
+      runAppliers(groupCache);
+    }
+
+    return function () {
+      var _processors = processorsCache.current[group].processors,
+          removedGroupProcessor = _processors[id],
+          otherProcessors = _objectWithoutProperties(_processors, [id].map(_toPropertyKey));
+
+      processorsCache.current[group].processors = otherProcessors;
+    };
+  }, [runAppliers]);
+  var registerPipeApplier = React.useCallback(function (group, id, applier) {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
+    }
+
+    processorsCache.current[group].appliers[id] = applier;
+    return function () {
+      var _appliers = processorsCache.current[group].appliers,
+          removedGroupApplier = _appliers[id],
+          otherAppliers = _objectWithoutProperties(_appliers, [id].map(_toPropertyKey));
+
+      processorsCache.current[group].appliers = otherAppliers;
+    };
+  }, []);
+  var requestPipeProcessorsApplication = React.useCallback(function (group) {
+    var groupCache = processorsCache.current[group];
+    runAppliers(groupCache);
+  }, [runAppliers]);
+  var applyPipeProcessors = React.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var _ref = args,
+        _ref2 = _slicedToArray(_ref, 3),
+        group = _ref2[0],
+        value = _ref2[1],
+        context = _ref2[2];
+
+    if (!processorsCache.current[group]) {
+      return value;
+    }
+
+    var preProcessors = Object.values(processorsCache.current[group].processors);
+    return preProcessors.reduce(function (acc, preProcessor) {
+      return preProcessor(acc, context);
+    }, value);
+  }, []);
+  var preProcessingApi = {
+    unstable_registerPipeProcessor: registerPipeProcessor,
+    unstable_registerPipeApplier: registerPipeApplier,
+    unstable_requestPipeProcessorsApplication: requestPipeProcessorsApplication,
+    unstable_applyPipeProcessors: applyPipeProcessors
+  };
+  useGridApiMethod(apiRef, preProcessingApi, 'GridPipeProcessingApi');
+};

package/legacy/hooks/core/{preProcessing/useGridRegisterPreProcessor.js → pipeProcessing/useGridRegisterPipeApplier.js}

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { useFirstRender } from '../../utils/useFirstRender';
-export var useGridRegisterPreProcessor = function useGridRegisterPreProcessor(apiRef, group, callback) {
+export var useGridRegisterPipeApplier = function useGridRegisterPipeApplier(apiRef, group, callback) {
   var cleanup = React.useRef();
   var id = React.useRef("mui-".concat(Math.round(Math.random() * 1e9)));
   var registerPreProcessor = React.useCallback(function () {
-    cleanup.current = apiRef.current.unstable_registerPreProcessor(group, id.current, callback);
+    cleanup.current = apiRef.current.unstable_registerPipeApplier(group, id.current, callback);
   }, [apiRef, callback, group]);
   useFirstRender(function () {
     registerPreProcessor();

package/legacy/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useFirstRender } from '../../utils/useFirstRender';
+export var useGridRegisterPipeProcessor = function useGridRegisterPipeProcessor(apiRef, group, callback) {
+  var cleanup = React.useRef();
+  var id = React.useRef("mui-".concat(Math.round(Math.random() * 1e9)));
+  var registerPreProcessor = React.useCallback(function () {
+    cleanup.current = apiRef.current.unstable_registerPipeProcessor(group, id.current, callback);
+  }, [apiRef, callback, group]);
+  useFirstRender(function () {
+    registerPreProcessor();
+  });
+  var isFirstRender = React.useRef(true);
+  React.useEffect(function () {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      registerPreProcessor();
+    }
+
+    return function () {
+      if (cleanup.current) {
+        cleanup.current();
+        cleanup.current = null;
+      }
+    };
+  }, [registerPreProcessor]);
+};

package/legacy/hooks/core/strategyProcessing/index.js

@@ -0,0 +1,3 @@
+export * from './gridStrategyProcessingApi';
+export * from './useGridRegisterStrategyProcessor';
+export * from './useGridStrategyProcessing';

package/legacy/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useFirstRender } from '../../utils/useFirstRender';
+export var useGridRegisterStrategyProcessor = function useGridRegisterStrategyProcessor(apiRef, strategyName, group, processor) {
+  var registerPreProcessor = React.useCallback(function () {
+    apiRef.current.unstable_registerStrategyProcessor(strategyName, group, processor);
+  }, [apiRef, processor, group, strategyName]);
+  useFirstRender(function () {
+    registerPreProcessor();
+  });
+  var isFirstRender = React.useRef(true);
+  React.useEffect(function () {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      registerPreProcessor();
+    }
+  }, [registerPreProcessor]);
+};

package/legacy/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -0,0 +1,130 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import * as React from 'react';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { GridEvents } from '../../../models/events';
+export var GRID_DEFAULT_STRATEGY = 'none';
+export var GRID_STRATEGIES_PROCESSORS = {
+  rowTreeCreation: 'rowTree',
+  filtering: 'rowTree',
+  sorting: 'rowTree'
+};
+
+/**
+ * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)
+ *
+ * More information and detailed example in (TODO add link to technical doc when ready)
+ *
+ * Some plugins contains custom logic that must only be applied if the right strategy is active.
+ * For instance, the row grouping plugin has a custom filtering algorithm.
+ * This algorithm must be applied by the filtering plugin if the row grouping is the current way of grouping rows,
+ * but not if the tree data is the current way of grouping rows.
+ *
+ * =====================================================================================================================
+ *
+ * The plugin containing the custom logic must use:
+ *
+ * - `useGridRegisterStrategyProcessor` to register their processor.
+ *   When the processor of the active strategy changes, it will fire `GridEvents.activeStrategyProcessorChange` to re-apply the processor.
+ *
+ * - `apiRef.current.unstable_setStrategyAvailability` to tell if their strategy can be used.
+ *
+ * =====================================================================================================================
+ *
+ * The plugin or component that needs to apply the custom logic of the current strategy must use:
+ *
+ * - `apiRef.current.unstable_applyStrategyProcessor` to run the processor of the active strategy for a given processor name.
+ *
+ * - `GridEvents.strategyAvailabilityChange` to update something when the active strategy changes.
+ *    Warning: Be careful not to apply the processor several times.
+ *    For instance `GridEvents.rowsSet` is fired by `useGridRows` whenever the active strategy changes.
+ *    So listening to both would most likely run your logic twice.
+ *
+ * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes.
+ *
+ * =====================================================================================================================
+ *
+ * Each processor name is part of a strategy group which can only have one active strategy at the time.
+ * For now, there is only one strategy group named `rowTree` which customize
+ * - row tree creation algorithm.
+ * - sorting algorithm.
+ * - filtering algorithm.
+ */
+export var useGridStrategyProcessing = function useGridStrategyProcessing(apiRef) {
+  var availableStrategies = React.useRef(new Map());
+  var strategiesCache = React.useRef({});
+  var registerStrategyProcessor = React.useCallback(function (strategyName, processorName, processor) {
+    var cleanup = function cleanup() {
+      var _ref = strategiesCache.current[processorName],
+          removedPreProcessor = _ref[strategyName],
+          otherProcessors = _objectWithoutProperties(_ref, [strategyName].map(_toPropertyKey));
+
+      strategiesCache.current[processorName] = otherProcessors;
+    };
+
+    if (!strategiesCache.current[processorName]) {
+      strategiesCache.current[processorName] = {};
+    }
+
+    var groupPreProcessors = strategiesCache.current[processorName];
+    var previousProcessor = groupPreProcessors[strategyName];
+    groupPreProcessors[strategyName] = processor;
+
+    if (!previousProcessor || previousProcessor === processor) {
+      return cleanup;
+    }
+
+    if (strategyName === apiRef.current.unstable_getActiveStrategy(GRID_STRATEGIES_PROCESSORS[processorName])) {
+      apiRef.current.publishEvent(GridEvents.activeStrategyProcessorChange, processorName);
+    }
+
+    return cleanup;
+  }, [apiRef]);
+  var applyStrategyProcessor = React.useCallback(function (processorName, params) {
+    var activeStrategy = apiRef.current.unstable_getActiveStrategy(GRID_STRATEGIES_PROCESSORS[processorName]);
+
+    if (activeStrategy == null) {
+      throw new Error("Can't apply a strategy processor before defining an active strategy");
+    }
+
+    var groupCache = strategiesCache.current[processorName];
+
+    if (!groupCache || !groupCache[activeStrategy]) {
+      throw new Error("No processor found for processor \"".concat(processorName, "\" on strategy \"").concat(activeStrategy, "\""));
+    }
+
+    var processor = groupCache[activeStrategy];
+    return processor(params);
+  }, [apiRef]);
+  var getActiveStrategy = React.useCallback(function (strategyGroup) {
+    var _availableStrategyEnt;
+
+    var strategyEntries = Array.from(availableStrategies.current.entries());
+    var availableStrategyEntry = strategyEntries.find(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+          strategy = _ref3[1];
+
+      if (strategy.group !== strategyGroup) {
+        return false;
+      }
+
+      return strategy.isAvailable();
+    });
+    return (_availableStrategyEnt = availableStrategyEntry == null ? void 0 : availableStrategyEntry[0]) != null ? _availableStrategyEnt : GRID_DEFAULT_STRATEGY;
+  }, []);
+  var setStrategyAvailability = React.useCallback(function (strategyGroup, strategyName, isAvailable) {
+    availableStrategies.current.set(strategyName, {
+      group: strategyGroup,
+      isAvailable: isAvailable
+    });
+    apiRef.current.publishEvent(GridEvents.strategyAvailabilityChange);
+  }, [apiRef]);
+  var strategyProcessingApi = {
+    unstable_registerStrategyProcessor: registerStrategyProcessor,
+    unstable_applyStrategyProcessor: applyStrategyProcessor,
+    unstable_getActiveStrategy: getActiveStrategy,
+    unstable_setStrategyAvailability: setStrategyAvailability
+  };
+  useGridApiMethod(apiRef, strategyProcessingApi, 'GridStrategyProcessing');
+};

package/legacy/hooks/core/useGridInitialization.js

@@ -2,8 +2,8 @@ import { useGridLoggerFactory } from './useGridLoggerFactory';
 import { useGridApiInitialization } from './useGridApiInitialization';
 import { useGridErrorHandler } from './useGridErrorHandler';
 import { useGridLocaleText } from './useGridLocaleText';
-import { useGridPreProcessing } from './preProcessing';
-import { useGridRowGroupsPreProcessing } from './rowGroupsPreProcessing';
+import { useGridPipeProcessing } from './pipeProcessing';
+import { useGridStrategyProcessing } from './strategyProcessing';
 import { useGridStateInitialization } from './useGridStateInitialization';
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
@@ -14,8 +14,8 @@ export var useGridInitialization = function useGridInitialization(inputApiRef, p
   useGridLoggerFactory(apiRef, props);
   useGridErrorHandler(apiRef, props);
   useGridStateInitialization(apiRef, props);
-  useGridPreProcessing(apiRef);
-  useGridRowGroupsPreProcessing(apiRef);
+  useGridPipeProcessing(apiRef);
+  useGridStrategyProcessing(apiRef);
   useGridLocaleText(apiRef, props);
   return apiRef;
 };

package/legacy/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { useForkRef } from '@mui/material/utils';
+import { defaultMemoize } from 'reselect';
 import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
@@ -14,7 +16,15 @@ import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridEvents } from '../../../models/events';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
+import { getFirstColumnIndexToRender } from '../columns/gridColumnsUtils';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
 import { jsx as _jsx } from "react/jsx-runtime";
+
+function isUIEvent(event) {
+  return !!event.target;
+}
+
 export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var innerRefProp = props.innerRef,
       _props$minColumnIndex = props.minColumnIndex,
@@ -51,15 +61,48 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
 
   var prevRenderContext = React.useRef(renderContext);
   var prevScrollLeft = React.useRef(0);
+  var currentPage = useGridVisibleRows(apiRef, rootProps);
   React.useEffect(function () {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
-  }, [apiRef]);
+  }, [apiRef]); // memoize `getFirstColumnIndexToRender`, since it's called on scroll
+
+  var getFirstColumnIndexToRenderRef = React.useRef(defaultMemoize(getFirstColumnIndexToRender, {
+    equalityCheck: function equalityCheck(a, b) {
+      return ['firstColumnIndex', 'minColumnIndex', 'columnBuffer'].every(function (key) {
+        return a[key] === b[key];
+      });
+    }
+  }));
   var updateInnerPosition = React.useCallback(function (nextRenderContext) {
-    var firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minColumnIndex);
+    var _getRenderableIndexes = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    }),
+        _getRenderableIndexes2 = _slicedToArray(_getRenderableIndexes, 2),
+        firstRowToRender = _getRenderableIndexes2[0],
+        lastRowToRender = _getRenderableIndexes2[1];
+
+    var firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+      firstColumnIndex: nextRenderContext.firstColumnIndex,
+      minColumnIndex: minColumnIndex,
+      columnBuffer: rootProps.columnBuffer,
+      firstRowToRender: firstRowToRender,
+      lastRowToRender: lastRowToRender,
+      apiRef: apiRef,
+      visibleRows: currentPage.rows
+    });
     var offset = firstColumnToRender > 0 ? prevScrollLeft.current - columnPositions[firstColumnToRender] : prevScrollLeft.current;
     innerRef.current.style.transform = "translate3d(".concat(-offset, "px, 0px, 0px)");
-  }, [columnPositions, minColumnIndex, rootProps.columnBuffer]);
-  var handleScroll = React.useCallback(function (_ref) {
+  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer]);
+  React.useLayoutEffect(function () {
+    if (renderContext) {
+      updateInnerPosition(renderContext);
+    }
+  }, [renderContext, updateInnerPosition]);
+  var handleScroll = React.useCallback(function (_ref, event) {
     var _prevRenderContext$cu, _prevRenderContext$cu2;
 
     var left = _ref.left,
@@ -76,15 +119,32 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       return;
     }
 
-    prevScrollLeft.current = left;
+    prevScrollLeft.current = left; // We can only update the position when we guarantee that the render context has been
+    // rendered. This is achieved using ReactDOM.flushSync or when the context doesn't change.
+
+    var canUpdateInnerPosition = false;
 
     if (nextRenderContext !== prevRenderContext.current || !prevRenderContext.current) {
-      setRenderContext(nextRenderContext);
+      // ReactDOM.flushSync cannot be called on `scroll` events fired inside effects
+      if (isUIEvent(event)) {
+        // To prevent flickering, the inner position can only be updated after the new context has
+        // been rendered. ReactDOM.flushSync ensures that the state changes will happen before
+        // updating the position.
+        ReactDOM.flushSync(function () {
+          setRenderContext(nextRenderContext);
+        });
+        canUpdateInnerPosition = true;
+      } else {
+        setRenderContext(nextRenderContext);
+      }
+
       prevRenderContext.current = nextRenderContext;
+    } else {
+      canUpdateInnerPosition = true;
     } // Pass directly the render context to avoid waiting for the next render
 
 
-    if (nextRenderContext) {
+    if (nextRenderContext && canUpdateInnerPosition) {
       updateInnerPosition(nextRenderContext);
     }
   }, [updateInnerPosition]);
@@ -122,7 +182,27 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     }
 
     var columns = [];
-    var firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minFirstColumn);
+
+    var _getRenderableIndexes3 = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    }),
+        _getRenderableIndexes4 = _slicedToArray(_getRenderableIndexes3, 2),
+        firstRowToRender = _getRenderableIndexes4[0],
+        lastRowToRender = _getRenderableIndexes4[1];
+
+    var firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+      firstColumnIndex: nextRenderContext.firstColumnIndex,
+      minColumnIndex: minFirstColumn,
+      columnBuffer: rootProps.columnBuffer,
+      apiRef: apiRef,
+      firstRowToRender: firstRowToRender,
+      lastRowToRender: lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     var lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
     var renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
 
@@ -142,11 +222,11 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
         column: column,
         colIndex: columnIndex,
         isResizing: resizeCol === column.field,
-        isLastColumn: columnIndex === columns.length - 1,
+        isLastColumn: columnIndex === visibleColumns.length - 1,
         extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
         hasFocus: hasFocus,
         tabIndex: tabIndex
-      }, other), i));
+      }, other), column.field));
     }
 
     return columns;
@@ -161,7 +241,6 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     renderContext: renderContext,
     getColumns: getColumns,
     isDragging: !!dragCol,
-    updateInnerPosition: updateInnerPosition,
     getRootProps: function getRootProps() {
       var other = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return _extends({