@mui/x-data-grid 5.6.1 → 5.9.0

package/node/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -13,6 +13,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var React = _interopRequireWildcard(require("react"));
 
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -24,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function GridFilterInputBoolean(props) {
-  var _rootProps$components;
+  var _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   const {
     item,
@@ -35,6 +37,9 @@ function GridFilterInputBoolean(props) {
         others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
+  const OptionComponent = isSelectNative ? 'option' : _MenuItem.default;
   const onFilterChange = React.useCallback(event => {
     const value = event.target.value;
     setFilterValueState(value);
@@ -51,21 +56,22 @@ function GridFilterInputBoolean(props) {
     onChange: onFilterChange,
     variant: "standard",
     select: true,
-    SelectProps: {
-      native: true
-    },
+    SelectProps: (0, _extends2.default)({
+      native: isSelectNative,
+      displayEmpty: true
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect),
     InputLabelProps: {
       shrink: true
     },
     inputRef: focusElementRef
-  }, others, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+  }, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
       value: "",
       children: apiRef.current.getLocaleText('filterValueAny')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
       value: "true",
       children: apiRef.current.getLocaleText('filterValueTrue')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
       value: "false",
       children: apiRef.current.getLocaleText('filterValueFalse')
     })]

package/node/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("@mui/material/utils");
 
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 
 var _filterPanelUtils = require("./filterPanelUtils");
@@ -33,25 +35,29 @@ const renderSingleSelectOptions = ({
   valueOptions,
   valueFormatter,
   field
-}, api) => {
+}, api, OptionComponent) => {
   const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
     field
   })] : ['', ...(valueOptions || [])];
-  return iterableColumnValues.map(option => typeof option === 'object' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-    value: option.value,
-    children: option.label
-  }, option.value) : /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-    value: option,
-    children: valueFormatter && option !== '' ? valueFormatter({
+  return iterableColumnValues.map(option => {
+    const isOptionTypeObject = typeof option === 'object';
+    const key = isOptionTypeObject ? option.value : option;
+    const value = isOptionTypeObject ? option.value : option;
+    const formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
       field,
       api
-    }) : option
-  }, option));
+    }) : option;
+    const content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
+      value: value,
+      children: content
+    }, key);
+  });
 };
 
 function GridFilterInputSingleSelect(props) {
-  var _item$value, _rootProps$components;
+  var _item$value, _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   const {
     item,
@@ -64,6 +70,8 @@ function GridFilterInputSingleSelect(props) {
   const [filterValueState, setFilterValueState] = React.useState((_item$value = item.value) != null ? _item$value : '');
   const id = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   const currentColumn = item.columnField ? apiRef.current.getColumn(item.columnField) : null;
   const currentValueOptions = React.useMemo(() => {
     return typeof currentColumn.valueOptions === 'function' ? currentColumn.valueOptions({
@@ -114,11 +122,11 @@ function GridFilterInputSingleSelect(props) {
     },
     inputRef: focusElementRef,
     select: true,
-    SelectProps: {
-      native: true
-    }
-  }, others, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField, {
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)
+    SelectProps: (0, _extends2.default)({
+      native: isSelectNative
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect)
+  }, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField, {
+    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current, isSelectNative ? 'option' : _MenuItem.default)
   }));
 }
 

package/node/components/panel/filterPanel/GridFilterInputValue.js

@@ -18,6 +18,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("@mui/material/utils");
 
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
 var _icons = require("../../icons");
 
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
@@ -43,28 +45,32 @@ const renderSingleSelectOptions = ({
   valueOptions,
   valueFormatter,
   field
-}, api) => {
+}, api, OptionComponent) => {
   const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
     field
   })] : ['', ...(valueOptions || [])];
-  return iterableColumnValues.map(option => typeof option === 'object' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-    value: option.value,
-    children: option.label
-  }, option.value) : /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-    value: option,
-    children: valueFormatter && option !== '' ? valueFormatter({
+  return iterableColumnValues.map(option => {
+    const isOptionTypeObject = typeof option === 'object';
+    const key = isOptionTypeObject ? option.value : option;
+    const value = isOptionTypeObject ? option.value : option;
+    const formattedValue = valueFormatter && option !== '' ? valueFormatter({
       value: option,
       field,
       api
-    }) : option
-  }, option));
+    }) : option;
+    const content = isOptionTypeObject ? option.label : formattedValue;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
+      value: value,
+      children: content
+    }, key);
+  });
 };
 
 const SUBMIT_FILTER_STROKE_TIME = 500;
 exports.SUBMIT_FILTER_STROKE_TIME = SUBMIT_FILTER_STROKE_TIME;
 
 function GridFilterInputValue(props) {
-  var _item$value, _rootProps$components;
+  var _item$value, _rootProps$components, _baseSelectProps$nati, _rootProps$components2, _rootProps$components3;
 
   const {
     item,
@@ -84,12 +90,14 @@ function GridFilterInputValue(props) {
   const [applying, setIsApplying] = React.useState(false);
   const id = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : true;
   const singleSelectProps = type === 'singleSelect' ? {
     select: true,
-    SelectProps: {
-      native: true
-    },
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current)
+    SelectProps: (0, _extends2.default)({
+      native: isSelectNative
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSelect),
+    children: renderSingleSelectOptions(apiRef.current.getColumn(item.columnField), apiRef.current, isSelectNative ? 'option' : _MenuItem.default)
   } : {};
   const onFilterChange = React.useCallback(event => {
     let value = event.target.value; // NativeSelect casts the value to a string.
@@ -140,7 +148,7 @@ function GridFilterInputValue(props) {
       shrink: true
     },
     inputRef: focusElementRef
-  }, singleSelectProps, others, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseTextField));
+  }, singleSelectProps, others, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseTextField));
 }
 
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -129,7 +129,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
       "aria-expanded": open ? 'true' : undefined,
       "aria-haspopup": "menu",
-      "aria-labelledby": densityMenuId,
+      "aria-controls": densityMenuId,
       id: densityButtonId
     }, other, {
       onClick: handleDensitySelectorOpen

package/node/components/virtualization/GridVirtualScroller.js

@@ -47,6 +47,8 @@ const VirtualScrollerRoot = (0, _styles.styled)('div', {
   overridesResolver: (props, styles) => styles.virtualScroller
 })({
   overflow: 'auto',
+  // See https://github.com/mui/mui-x/issues/4360
+  position: 'relative',
   '@media print': {
     overflow: 'hidden'
   }

package/node/components/virtualization/GridVirtualScrollerContent.js

@@ -46,9 +46,7 @@ const VirtualScrollerContentRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'VirtualScrollerContent',
   overridesResolver: (props, styles) => styles.virtualScrollerContent
-})({
-  position: 'relative'
-});
+})({});
 const GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
   const {
     className,

package/node/constants/defaultGridSlotsComponents.js

@@ -71,6 +71,7 @@ const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, DEFAULT_GR
   BaseTooltip: _Tooltip.default,
   BasePopper: _Popper.default,
   Cell: _components.GridCell,
+  ColumnHeaderFilterIconButton: _components.GridColumnHeaderFilterIconButton,
   ColumnMenu: _components.GridColumnMenu,
   ErrorOverlay: _ErrorOverlay.ErrorOverlay,
   Footer: _components.GridFooter,

package/node/constants/gridDetailPanelToggleField.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = void 0;
+// Can't import from pro package - hence duplication
+const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
+exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = GRID_DETAIL_PANEL_TOGGLE_FIELD;

package/node/hooks/core/pipeProcessing/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _gridPipeProcessingApi = require("./gridPipeProcessingApi");
+
+Object.keys(_gridPipeProcessingApi).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridPipeProcessingApi[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridPipeProcessingApi[key];
+    }
+  });
+});
+
+var _useGridPipeProcessing = require("./useGridPipeProcessing");
+
+Object.keys(_useGridPipeProcessing).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useGridPipeProcessing[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useGridPipeProcessing[key];
+    }
+  });
+});
+
+var _useGridRegisterPipeProcessor = require("./useGridRegisterPipeProcessor");
+
+Object.keys(_useGridRegisterPipeProcessor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useGridRegisterPipeProcessor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useGridRegisterPipeProcessor[key];
+    }
+  });
+});
+
+var _useGridRegisterPipeApplier = require("./useGridRegisterPipeApplier");
+
+Object.keys(_useGridRegisterPipeApplier).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useGridRegisterPipeApplier[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useGridRegisterPipeApplier[key];
+    }
+  });
+});

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

@@ -0,0 +1,124 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridPipeProcessing = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * 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.
+ */
+const useGridPipeProcessing = apiRef => {
+  const processorsCache = React.useRef({});
+  const runAppliers = React.useCallback(groupCache => {
+    if (!groupCache) {
+      return;
+    }
+
+    Object.values(groupCache.appliers).forEach(callback => {
+      callback();
+    });
+  }, []);
+  const registerPipeProcessor = React.useCallback((group, id, processor) => {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
+    }
+
+    const groupCache = processorsCache.current[group];
+    const oldProcessor = groupCache.processors[id];
+
+    if (oldProcessor !== processor) {
+      groupCache.processors[id] = processor;
+      runAppliers(groupCache);
+    }
+
+    return () => {
+      const _processors = processorsCache.current[group].processors,
+            otherProcessors = (0, _objectWithoutPropertiesLoose2.default)(_processors, [id].map(_toPropertyKey2.default));
+      processorsCache.current[group].processors = otherProcessors;
+    };
+  }, [runAppliers]);
+  const registerPipeApplier = React.useCallback((group, id, applier) => {
+    if (!processorsCache.current[group]) {
+      processorsCache.current[group] = {
+        processors: {},
+        appliers: {}
+      };
+    }
+
+    processorsCache.current[group].appliers[id] = applier;
+    return () => {
+      const _appliers = processorsCache.current[group].appliers,
+            otherAppliers = (0, _objectWithoutPropertiesLoose2.default)(_appliers, [id].map(_toPropertyKey2.default));
+      processorsCache.current[group].appliers = otherAppliers;
+    };
+  }, []);
+  const requestPipeProcessorsApplication = React.useCallback(group => {
+    const groupCache = processorsCache.current[group];
+    runAppliers(groupCache);
+  }, [runAppliers]);
+  const applyPipeProcessors = React.useCallback((...args) => {
+    const [group, value, context] = args;
+
+    if (!processorsCache.current[group]) {
+      return value;
+    }
+
+    const preProcessors = Object.values(processorsCache.current[group].processors);
+    return preProcessors.reduce((acc, preProcessor) => {
+      return preProcessor(acc, context);
+    }, value);
+  }, []);
+  const preProcessingApi = {
+    unstable_registerPipeProcessor: registerPipeProcessor,
+    unstable_registerPipeApplier: registerPipeApplier,
+    unstable_requestPipeProcessorsApplication: requestPipeProcessorsApplication,
+    unstable_applyPipeProcessors: applyPipeProcessors
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, preProcessingApi, 'GridPipeProcessingApi');
+};
+
+exports.useGridPipeProcessing = useGridPipeProcessing;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridRegisterPreProcessor = void 0;
+exports.useGridRegisterPipeApplier = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -13,11 +13,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const useGridRegisterPreProcessor = (apiRef, group, callback) => {
+const useGridRegisterPipeApplier = (apiRef, group, callback) => {
   const cleanup = React.useRef();
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
-    cleanup.current = apiRef.current.unstable_registerPreProcessor(group, id.current, callback);
+    cleanup.current = apiRef.current.unstable_registerPipeApplier(group, id.current, callback);
   }, [apiRef, callback, group]);
   (0, _useFirstRender.useFirstRender)(() => {
     registerPreProcessor();
@@ -39,4 +39,4 @@ const useGridRegisterPreProcessor = (apiRef, group, callback) => {
   }, [registerPreProcessor]);
 };
 
-exports.useGridRegisterPreProcessor = useGridRegisterPreProcessor;
+exports.useGridRegisterPipeApplier = useGridRegisterPipeApplier;

package/node/hooks/{features/filter/useGridRegisterFilteringMethod.js → core/pipeProcessing/useGridRegisterPipeProcessor.js}

@@ -3,22 +3,40 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridRegisterFilteringMethod = void 0;
+exports.useGridRegisterPipeProcessor = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _preProcessing = require("../../core/preProcessing");
+var _useFirstRender = require("../../utils/useFirstRender");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const useGridRegisterFilteringMethod = (apiRef, groupingName, filteringMethod) => {
-  const updateRegistration = React.useCallback(filteringMethodCollection => {
-    filteringMethodCollection[groupingName] = filteringMethod;
-    return filteringMethodCollection;
-  }, [groupingName, filteringMethod]);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'filteringMethod', updateRegistration);
+const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
+  const cleanup = React.useRef();
+  const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
+  const registerPreProcessor = React.useCallback(() => {
+    cleanup.current = apiRef.current.unstable_registerPipeProcessor(group, id.current, callback);
+  }, [apiRef, callback, group]);
+  (0, _useFirstRender.useFirstRender)(() => {
+    registerPreProcessor();
+  });
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      registerPreProcessor();
+    }
+
+    return () => {
+      if (cleanup.current) {
+        cleanup.current();
+        cleanup.current = null;
+      }
+    };
+  }, [registerPreProcessor]);
 };
 
-exports.useGridRegisterFilteringMethod = useGridRegisterFilteringMethod;
+exports.useGridRegisterPipeProcessor = useGridRegisterPipeProcessor;

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _gridStrategyProcessingApi = require("./gridStrategyProcessingApi");
+
+Object.keys(_gridStrategyProcessingApi).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridStrategyProcessingApi[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridStrategyProcessingApi[key];
+    }
+  });
+});
+
+var _useGridRegisterStrategyProcessor = require("./useGridRegisterStrategyProcessor");
+
+Object.keys(_useGridRegisterStrategyProcessor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useGridRegisterStrategyProcessor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useGridRegisterStrategyProcessor[key];
+    }
+  });
+});
+
+var _useGridStrategyProcessing = require("./useGridStrategyProcessing");
+
+Object.keys(_useGridStrategyProcessing).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useGridStrategyProcessing[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useGridStrategyProcessing[key];
+    }
+  });
+});

package/node/hooks/{features/sorting/useGridRegisterSortingMethod.js → core/strategyProcessing/useGridRegisterStrategyProcessor.js}

@@ -3,22 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridRegisterSortingMethod = void 0;
+exports.useGridRegisterStrategyProcessor = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _preProcessing = require("../../core/preProcessing");
+var _useFirstRender = require("../../utils/useFirstRender");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const useGridRegisterSortingMethod = (apiRef, groupingName, filteringMethod) => {
-  const updateRegistration = React.useCallback(sortingMethodCollection => {
-    sortingMethodCollection[groupingName] = filteringMethod;
-    return sortingMethodCollection;
-  }, [groupingName, filteringMethod]);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'sortingMethod', updateRegistration);
+const useGridRegisterStrategyProcessor = (apiRef, strategyName, group, processor) => {
+  const registerPreProcessor = React.useCallback(() => {
+    apiRef.current.unstable_registerStrategyProcessor(strategyName, group, processor);
+  }, [apiRef, processor, group, strategyName]);
+  (0, _useFirstRender.useFirstRender)(() => {
+    registerPreProcessor();
+  });
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      registerPreProcessor();
+    }
+  }, [registerPreProcessor]);
 };
 
-exports.useGridRegisterSortingMethod = useGridRegisterSortingMethod;
+exports.useGridRegisterStrategyProcessor = useGridRegisterStrategyProcessor;