@mui/x-data-grid 6.9.1 → 6.10.0

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -64,18 +64,20 @@ function GridToolbarQuickFilter(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const quickFilterValues = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridQuickFilterValuesSelector);
   const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
-  const [prevQuickFilterValues, setPrevQuickFilterValues] = React.useState(quickFilterValues);
+  const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
   React.useEffect(() => {
-    if (!(0, _utils2.isDeepEqual)(prevQuickFilterValues, quickFilterValues)) {
+    if (!(0, _utils2.isDeepEqual)(prevQuickFilterValuesRef.current, quickFilterValues)) {
       // The model of quick filter value has been updated
-      setPrevQuickFilterValues(quickFilterValues);
+      prevQuickFilterValuesRef.current = quickFilterValues;
 
       // Update the input value if needed to match the new model
       setSearchValue(prevSearchValue => (0, _utils2.isDeepEqual)(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues ?? []));
     }
-  }, [prevQuickFilterValues, quickFilterValues, quickFilterFormatter, quickFilterParser]);
+  }, [quickFilterValues, quickFilterFormatter, quickFilterParser]);
   const updateSearchValue = React.useCallback(newSearchValue => {
-    apiRef.current.setQuickFilterValues(quickFilterParser(newSearchValue));
+    const newQuickFilterValues = quickFilterParser(newSearchValue);
+    prevQuickFilterValuesRef.current = newQuickFilterValues;
+    apiRef.current.setQuickFilterValues(newQuickFilterValues);
   }, [apiRef, quickFilterParser]);
   const debouncedUpdateSearchValue = React.useMemo(() => (0, _utils.unstable_debounce)(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
   const handleSearchValueChange = React.useCallback(event => {
@@ -95,8 +97,9 @@ function GridToolbarQuickFilter(props) {
     onChange: handleSearchValueChange,
     placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
-    type: "search",
-    InputProps: {
+    type: "search"
+  }, other, {
+    InputProps: (0, _extends2.default)({
       startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
         fontSize: "small"
       }),
@@ -112,8 +115,8 @@ function GridToolbarQuickFilter(props) {
           fontSize: "small"
         })
       }))
-    }
-  }, other, rootProps.slotProps?.baseTextField));
+    }, other.InputProps)
+  }, rootProps.slotProps?.baseTextField));
 }
 process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
   // ----------------------------- Warning --------------------------------

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

@@ -42,13 +42,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 const useGridPipeProcessing = apiRef => {
   const processorsCache = React.useRef({});
+  const isRunning = React.useRef(false);
   const runAppliers = React.useCallback(groupCache => {
-    if (!groupCache) {
+    if (isRunning.current || !groupCache) {
       return;
     }
+    isRunning.current = true;
     Object.values(groupCache.appliers).forEach(callback => {
       callback();
     });
+    isRunning.current = false;
   }, []);
   const registerPipeProcessor = React.useCallback((group, id, processor) => {
     if (!processorsCache.current[group]) {

package/node/hooks/core/useGridApiInitialization.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.unwrapPrivateAPI = unwrapPrivateAPI;
 exports.useGridApiInitialization = useGridApiInitialization;
 var React = _interopRequireWildcard(require("react"));
 var _Store = require("../../utils/Store");
@@ -11,58 +12,79 @@ var _useGridApiEventHandler = require("../utils/useGridApiEventHandler");
 var _EventManager = require("../../utils/EventManager");
 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 SYMBOL_API_PRIVATE = Symbol('mui.api_private');
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
 };
+function unwrapPrivateAPI(publicApi) {
+  return publicApi[SYMBOL_API_PRIVATE];
+}
 let globalId = 0;
-const wrapPublicApi = publicApi => {
-  const privateOnlyApi = {};
-  privateOnlyApi.getPublicApi = () => publicApi;
-  privateOnlyApi.register = (visibility, methods) => {
+function createPrivateAPI(publicApiRef) {
+  const existingPrivateApi = publicApiRef.current?.[SYMBOL_API_PRIVATE];
+  if (existingPrivateApi) {
+    return existingPrivateApi;
+  }
+  const state = {};
+  const privateApi = {
+    state,
+    store: _Store.Store.create(state),
+    instanceId: {
+      id: globalId
+    }
+  };
+  globalId += 1;
+  privateApi.getPublicApi = () => publicApiRef.current;
+  privateApi.register = (visibility, methods) => {
     Object.keys(methods).forEach(methodName => {
-      if (visibility === 'public') {
-        publicApi[methodName] = methods[methodName];
+      const method = methods[methodName];
+      const currentPrivateMethod = privateApi[methodName];
+      if (currentPrivateMethod?.spying === true) {
+        currentPrivateMethod.target = method;
       } else {
-        privateOnlyApi[methodName] = methods[methodName];
+        privateApi[methodName] = method;
+      }
+      if (visibility === 'public') {
+        const publicApi = publicApiRef.current;
+        const currentPublicMethod = publicApi[methodName];
+        if (currentPublicMethod?.spying === true) {
+          currentPublicMethod.target = method;
+        } else {
+          publicApi[methodName] = method;
+        }
       }
     });
   };
-  const handler = {
-    get: (obj, prop) => {
-      if (prop in obj) {
-        return obj[prop];
-      }
-      return privateOnlyApi[prop];
+  privateApi.register('private', {
+    caches: {},
+    eventManager: new _EventManager.EventManager()
+  });
+  return privateApi;
+}
+function createPublicAPI(privateApiRef) {
+  const publicApi = {
+    get state() {
+      return privateApiRef.current.state;
     },
-    set: (obj, prop, value) => {
-      obj[prop] = value;
-      return true;
-    }
+    get store() {
+      return privateApiRef.current.store;
+    },
+    get instanceId() {
+      return privateApiRef.current.instanceId;
+    },
+    [SYMBOL_API_PRIVATE]: privateApiRef.current
   };
-  return new Proxy(publicApi, handler);
-};
+  return publicApi;
+}
 function useGridApiInitialization(inputApiRef, props) {
   const publicApiRef = React.useRef();
-  if (!publicApiRef.current) {
-    const state = {};
-    publicApiRef.current = {
-      state,
-      store: _Store.Store.create(state),
-      instanceId: {
-        id: globalId
-      }
-    };
-    globalId += 1;
-  }
   const privateApiRef = React.useRef();
   if (!privateApiRef.current) {
-    privateApiRef.current = wrapPublicApi(publicApiRef.current);
-    privateApiRef.current.register('private', {
-      caches: {},
-      eventManager: new _EventManager.EventManager()
-    });
+    privateApiRef.current = createPrivateAPI(publicApiRef);
+  }
+  if (!publicApiRef.current) {
+    publicApiRef.current = createPublicAPI(privateApiRef);
   }
-  React.useImperativeHandle(inputApiRef, () => publicApiRef.current, [publicApiRef]);
   const publishEvent = React.useCallback((...args) => {
     const [name, params, event = {}] = args;
     event.defaultMuiPrevented = false;
@@ -85,6 +107,7 @@ function useGridApiInitialization(inputApiRef, props) {
     subscribeEvent,
     publishEvent
   }, 'public');
+  React.useImperativeHandle(inputApiRef, () => publicApiRef.current, [publicApiRef]);
   React.useEffect(() => {
     const api = privateApiRef.current;
     return () => {

package/node/hooks/features/columns/gridColumnsUtils.js

@@ -29,6 +29,7 @@ function computeFlexColumnsWidth({
   totalFlexUnits,
   flexColumns
 }) {
+  const uniqueFlexColumns = new Set(flexColumns.map(col => col.field));
   const flexColumnsLookup = {
     all: {},
     frozenFields: [],
@@ -44,7 +45,7 @@ function computeFlexColumnsWidth({
   // Step 5 of https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
   function loopOverFlexItems() {
     // 5a: If all the flex items on the line are frozen, free space has been distributed.
-    if (flexColumnsLookup.frozenFields.length === flexColumns.length) {
+    if (flexColumnsLookup.frozenFields.length === uniqueFlexColumns.size) {
       return;
     }
     const violationsLookup = {

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -80,7 +80,7 @@ function useGridDimensions(apiRef, props) {
     let hasScrollY;
     if (props.autoHeight) {
       hasScrollY = false;
-      hasScrollX = columnsTotalWidth > rootDimensionsRef.current.width;
+      hasScrollX = Math.round(columnsTotalWidth) > Math.round(rootDimensionsRef.current.width);
       viewportOuterSize = {
         width: rootDimensionsRef.current.width,
         height: rowsMeta.currentPageTotalHeight + (hasScrollX ? scrollBarSize : 0)
@@ -92,11 +92,11 @@ function useGridDimensions(apiRef, props) {
       };
       const scrollInformation = hasScroll({
         content: {
-          width: columnsTotalWidth,
+          width: Math.round(columnsTotalWidth),
           height: rowsMeta.currentPageTotalHeight
         },
         container: {
-          width: viewportOuterSize.width,
+          width: Math.round(viewportOuterSize.width),
           height: viewportOuterSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom
         },
         scrollBarSize

package/node/hooks/features/editing/useGridEditing.js

@@ -117,7 +117,7 @@ const useGridEditing = (apiRef, props) => {
   }, [apiRef, props.editMode]);
   const getEditCellMeta = React.useCallback((id, field) => {
     const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
-    return editingState[id][field];
+    return editingState[id]?.[field] ?? null;
   }, [apiRef]);
   const editingSharedApi = {
     isCellEditable,

package/node/hooks/features/export/serializers/csvSerializer.js

@@ -43,43 +43,106 @@ const serializeCellValue = (cellParams, options) => {
 };
 exports.serializeCellValue = serializeCellValue;
 const objectFormattedValueWarning = (0, _warning.buildWarning)(['MUI: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
+class CSVRow {
+  constructor(options) {
+    this.options = void 0;
+    this.rowString = '';
+    this.isEmpty = true;
+    this.options = options;
+  }
+  addValue(value) {
+    if (!this.isEmpty) {
+      this.rowString += this.options.delimiterCharacter;
+    }
+    if (value === null || value === undefined) {
+      this.rowString += '';
+    } else if (typeof this.options.sanitizeCellValue === 'function') {
+      this.rowString += this.options.sanitizeCellValue(value, this.options.delimiterCharacter);
+    } else {
+      this.rowString += value;
+    }
+    this.isEmpty = false;
+  }
+  getRowString() {
+    return this.rowString;
+  }
+}
 const serializeRow = ({
   id,
   columns,
   getCellParams,
   delimiterCharacter,
   ignoreValueFormatter
-}) => columns.map(column => {
-  const cellParams = getCellParams(id, column.field);
-  if (process.env.NODE_ENV !== 'production') {
-    if (String(cellParams.formattedValue) === '[object Object]') {
-      objectFormattedValueWarning();
+}) => {
+  const row = new CSVRow({
+    delimiterCharacter
+  });
+  columns.forEach(column => {
+    const cellParams = getCellParams(id, column.field);
+    if (process.env.NODE_ENV !== 'production') {
+      if (String(cellParams.formattedValue) === '[object Object]') {
+        objectFormattedValueWarning();
+      }
     }
-  }
-  return serializeCellValue(cellParams, {
-    delimiterCharacter,
-    ignoreValueFormatter
+    row.addValue(serializeCellValue(cellParams, {
+      delimiterCharacter,
+      ignoreValueFormatter
+    }));
   });
-});
+  return row.getRowString();
+};
 function buildCSV(options) {
   const {
     columns,
     rowIds,
-    getCellParams,
     delimiterCharacter,
     includeHeaders,
-    ignoreValueFormatter
+    includeColumnGroupsHeaders,
+    ignoreValueFormatter,
+    apiRef
   } = options;
   const CSVBody = rowIds.reduce((acc, id) => `${acc}${serializeRow({
     id,
     columns,
-    getCellParams,
+    getCellParams: apiRef.current.getCellParams,
     delimiterCharacter,
     ignoreValueFormatter
-  }).join(delimiterCharacter)}\r\n`, '').trim();
+  })}\r\n`, '').trim();
   if (!includeHeaders) {
     return CSVBody;
   }
-  const CSVHead = `${columns.filter(column => column.field !== _colDef.GRID_CHECKBOX_SELECTION_COL_DEF.field).map(column => sanitizeCellValue(column.headerName || column.field, delimiterCharacter)).join(delimiterCharacter)}\r\n`;
+  const filteredColumns = columns.filter(column => column.field !== _colDef.GRID_CHECKBOX_SELECTION_COL_DEF.field);
+  const headerRows = [];
+  if (includeColumnGroupsHeaders) {
+    const columnGroupLookup = apiRef.current.unstable_getAllGroupDetails();
+    let maxColumnGroupsDepth = 0;
+    const columnGroupPathsLookup = filteredColumns.reduce((acc, column) => {
+      const columnGroupPath = apiRef.current.unstable_getColumnGroupPath(column.field);
+      acc[column.field] = columnGroupPath;
+      maxColumnGroupsDepth = Math.max(maxColumnGroupsDepth, columnGroupPath.length);
+      return acc;
+    }, {});
+    for (let i = 0; i < maxColumnGroupsDepth; i += 1) {
+      const headerGroupRow = new CSVRow({
+        delimiterCharacter,
+        sanitizeCellValue
+      });
+      headerRows.push(headerGroupRow);
+      filteredColumns.forEach(column => {
+        const columnGroupId = (columnGroupPathsLookup[column.field] || [])[i];
+        const columnGroup = columnGroupLookup[columnGroupId];
+        headerGroupRow.addValue(columnGroup ? columnGroup.headerName || columnGroup.groupId : '');
+      });
+    }
+  }
+  const mainHeaderRow = new CSVRow({
+    delimiterCharacter,
+    sanitizeCellValue
+  });
+  filteredColumns.forEach(column => {
+    mainHeaderRow.addValue(column.headerName || column.field);
+  });
+  headerRows.push(mainHeaderRow);
+  const CSVHead = `${headerRows.map(row => row.getRowString()).join('\r\n')}\r\n`;
   return `${CSVHead}${CSVBody}`.trim();
 }

package/node/hooks/features/export/useGridCsvExport.js

@@ -39,10 +39,11 @@ const useGridCsvExport = (apiRef, props) => {
     return (0, _csvSerializer.buildCSV)({
       columns: exportedColumns,
       rowIds: exportedRowIds,
-      getCellParams: apiRef.current.getCellParams,
       delimiterCharacter: options.delimiter || ',',
       includeHeaders: options.includeHeaders ?? true,
-      ignoreValueFormatter
+      includeColumnGroupsHeaders: options.includeColumnGroupsHeaders ?? true,
+      ignoreValueFormatter,
+      apiRef
     });
   }, [logger, apiRef, ignoreValueFormatter]);
   const exportDataAsCsv = React.useCallback(options => {

package/node/hooks/features/filter/gridFilterUtils.js

@@ -168,7 +168,8 @@ const buildAggregatedQuickFilterApplier = (getRowId, filterModel, apiRef) => {
   if (quickFilterValues.length === 0) {
     return null;
   }
-  const columnFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
+  const quickFilterExcludeHiddenColumns = filterModel.quickFilterExcludeHiddenColumns ?? false;
+  const columnFields = quickFilterExcludeHiddenColumns ? (0, _columns.gridVisibleColumnFieldsSelector)(apiRef) : (0, _columns.gridColumnFieldsSelector)(apiRef);
   const appliersPerField = [];
   columnFields.forEach(field => {
     const column = apiRef.current.getColumn(field);

package/node/hooks/features/filter/useGridFilter.js

@@ -29,6 +29,7 @@ const filterStateInitializer = (state, props, apiRef) => {
   return (0, _extends2.default)({}, state, {
     filter: {
       filterModel: (0, _gridFilterUtils.sanitizeFilterModel)(filterModel, props.disableMultipleColumnsFiltering, apiRef),
+      filteredRowsLookup: {},
       filteredDescendantCountLookup: {}
     },
     visibleRowsLookup: {}
@@ -262,6 +263,9 @@ const useGridFilter = (apiRef, props) => {
   }, [props.slots.filterPanel, props.slotProps?.filterPanel]);
   const dataRowIdToIdLookup = apiRef.current.state.rows.dataRowIdToModelLookup;
   const rows = React.useMemo(() => Object.values(dataRowIdToIdLookup), [dataRowIdToIdLookup]);
+  const {
+    getRowId
+  } = props;
   const flatFilteringMethod = React.useCallback(params => {
     if (props.filterMode !== 'client' || !params.isRowMatchingFilters) {
       return {
@@ -281,9 +285,10 @@ const useGridFilter = (apiRef, props) => {
     };
     for (let i = 0; i < rows.length; i += 1) {
       const row = rows[i];
+      const id = getRowId ? getRowId(row) : row.id;
       isRowMatchingFilters(row, undefined, result);
       const isRowPassing = (0, _gridFilterUtils.passFilterLogic)([result.passingFilterItems], [result.passingQuickFilterValues], params.filterModel, apiRef, filterCache);
-      filteredRowsLookup[row.id] = isRowPassing;
+      filteredRowsLookup[id] = isRowPassing;
     }
     const footerId = 'auto-generated-group-footer-root';
     const footer = dataRowIdToModelLookup[footerId];
@@ -294,7 +299,7 @@ const useGridFilter = (apiRef, props) => {
       filteredRowsLookup,
       filteredDescendantCountLookup: {}
     };
-  }, [apiRef, props.filterMode, rows]);
+  }, [apiRef, rows, props.filterMode, getRowId]);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'columnMenu', addColumnMenuItem);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
@@ -336,6 +341,13 @@ const useGridFilter = (apiRef, props) => {
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnsChange', handleColumnsChange);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowExpansionChange', updateVisibleRowsLookupState);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnVisibilityModelChange', () => {
+    const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
+    if (filterModel.quickFilterValues && filterModel.quickFilterExcludeHiddenColumns) {
+      // re-apply filters because the quick filter results may have changed
+      apiRef.current.unstable_applyFilters();
+    }
+  });
 
   /**
    * 1ST RENDER

package/node/hooks/features/rows/gridRowsUtils.js

@@ -15,7 +15,7 @@ var _gridRowsSelector = require("./gridRowsSelector");
 var _densitySelector = require("../density/densitySelector");
 const GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
 exports.GRID_ROOT_GROUP_ID = GRID_ROOT_GROUP_ID;
-const GRID_ID_AUTOGENERATED = Symbol('mui-autogenerated-id');
+const GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 exports.GRID_ID_AUTOGENERATED = GRID_ID_AUTOGENERATED;
 const buildRootGroup = () => ({
   type: 'group',

package/node/hooks/features/rows/useGridParamsApi.js

@@ -111,7 +111,7 @@ function useGridParamsApi(apiRef, props) {
     return colDef.valueGetter(getBaseCellParams(id, field));
   }, [apiRef, getBaseCellParams]);
   const getRowValue = React.useCallback((row, colDef) => {
-    const id = (getRowId ? getRowId(row) : row.id) ?? row[_gridRowsUtils.GRID_ID_AUTOGENERATED];
+    const id = _gridRowsUtils.GRID_ID_AUTOGENERATED in row ? row[_gridRowsUtils.GRID_ID_AUTOGENERATED] : getRowId?.(row) ?? row.id;
     const field = colDef.field;
     if (!colDef || !colDef.valueGetter) {
       return row[field];

package/node/hooks/utils/useGridApiMethod.js

@@ -8,28 +8,12 @@ var React = _interopRequireWildcard(require("react"));
 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; }
 function useGridApiMethod(privateApiRef, apiMethods, visibility) {
-  const apiMethodsRef = React.useRef(apiMethods);
-  const [apiMethodsNames] = React.useState(Object.keys(apiMethods));
-  const installMethods = React.useCallback(() => {
-    if (!privateApiRef.current) {
-      return;
-    }
-    apiMethodsNames.forEach(methodName => {
-      if (!privateApiRef.current.hasOwnProperty(methodName)) {
-        privateApiRef.current.register(visibility, {
-          [methodName]: (...args) => {
-            const fn = apiMethodsRef.current[methodName];
-            return fn(...args);
-          }
-        });
-      }
-    });
-  }, [apiMethodsNames, privateApiRef, visibility]);
+  const isFirstRender = React.useRef(true);
   React.useEffect(() => {
-    apiMethodsRef.current = apiMethods;
-  }, [apiMethods]);
-  React.useEffect(() => {
-    installMethods();
-  }, [installMethods]);
-  installMethods();
+    isFirstRender.current = false;
+    privateApiRef.current.register(visibility, apiMethods);
+  }, [privateApiRef, visibility, apiMethods]);
+  if (isFirstRender.current) {
+    privateApiRef.current.register(visibility, apiMethods);
+  }
 }

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.9.1
+ * @mui/x-data-grid v6.10.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/index.js

@@ -15,6 +15,7 @@ var _exportNames = {
   useGridRegisterStrategyProcessor: true,
   GRID_DEFAULT_STRATEGY: true,
   useGridInitialization: true,
+  unwrapPrivateAPI: true,
   useGridClipboard: true,
   useGridColumnHeaders: true,
   unstable_gridHeaderFilteringEditFieldSelector: true,
@@ -403,6 +404,12 @@ Object.defineProperty(exports, "unstable_resetCreateSelectorCache", {
     return _createSelector.unstable_resetCreateSelectorCache;
   }
 });
+Object.defineProperty(exports, "unwrapPrivateAPI", {
+  enumerable: true,
+  get: function () {
+    return _useGridApiInitialization.unwrapPrivateAPI;
+  }
+});
 Object.defineProperty(exports, "useGridClipboard", {
   enumerable: true,
   get: function () {
@@ -617,6 +624,7 @@ var _GridFilterPanel = require("../components/panel/filterPanel/GridFilterPanel"
 var _pipeProcessing = require("../hooks/core/pipeProcessing");
 var _strategyProcessing = require("../hooks/core/strategyProcessing");
 var _useGridInitialization = require("../hooks/core/useGridInitialization");
+var _useGridApiInitialization = require("../hooks/core/useGridApiInitialization");
 var _useGridClipboard = require("../hooks/features/clipboard/useGridClipboard");
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
 var _gridHeaderFilteringSelectors = require("../hooks/features/headerFiltering/gridHeaderFilteringSelectors");

package/node/joy/joySlots.js

@@ -307,7 +307,20 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [apiRef]);
   const page = paginationModel.page <= lastPage ? paginationModel.page : lastPage;
   const pageSize = paginationModel.pageSize;
-  const pageSizeOptions = rootProps.pageSizeOptions?.includes(pageSize) ? rootProps.pageSizeOptions : [];
+  const isPageSizeIncludedInPageSizeOptions = () => {
+    for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
+      const option = rootProps.pageSizeOptions[i];
+      if (typeof option === 'number') {
+        if (option === pageSize) {
+          return true;
+        }
+      } else if (option.value === pageSize) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const pageSizeOptions = isPageSizeIncludedInPageSizeOptions() ? rootProps.pageSizeOptions : [];
   const handleChangeRowsPerPage = (event, newValue) => {
     const newPageSize = Number(newValue);
     apiRef.current.setPageSize(newPageSize);
@@ -331,9 +344,9 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
         value: pageSize,
         children: pageSizeOptions.map(option => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
-            value: option,
-            children: option
-          }, option);
+            value: typeof option !== 'number' && option.value ? option.value : option,
+            children: typeof option !== 'number' && option.label ? option.label : `${option}`
+          }, typeof option !== 'number' && option.label ? option.label : `${option}`);
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {

package/node/locales/esES.js

@@ -14,8 +14,8 @@ const esESGrid = {
   toolbarDensity: 'Densidad',
   toolbarDensityLabel: 'Densidad',
   toolbarDensityCompact: 'Compacta',
-  toolbarDensityStandard: 'Standard',
-  toolbarDensityComfortable: 'Comoda',
+  toolbarDensityStandard: 'Estándar',
+  toolbarDensityComfortable: 'Cómoda',
   // Columns selector toolbar button text
   toolbarColumns: 'Columnas',
   toolbarColumnsLabel: 'Seleccionar columnas',
@@ -43,7 +43,7 @@ const esESGrid = {
   columnsPanelHideAllButton: 'Ocultar todo',
   // Filter panel text
   filterPanelAddFilter: 'Agregar filtro',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Remover todos',
   filterPanelDeleteIconLabel: 'Borrar',
   filterPanelLogicOperator: 'Operador lógico',
   filterPanelOperator: 'Operadores',

package/node/locales/plPL.js

@@ -43,7 +43,7 @@ const plPLGrid = {
   columnsPanelHideAllButton: 'Ukryj wszystko',
   // Filter panel text
   filterPanelAddFilter: 'Dodaj filtr',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Usuń wszystkie',
   filterPanelDeleteIconLabel: 'Usuń',
   filterPanelLogicOperator: 'Operator logiczny',
   filterPanelOperator: 'Operator',
@@ -74,12 +74,12 @@ const plPLGrid = {
   // 'filterOperator<=': '<=',
 
   // Header filter operators text
-  // headerFilterOperatorContains: 'Contains',
-  // headerFilterOperatorEquals: 'Equals',
-  // headerFilterOperatorStartsWith: 'Starts with',
-  // headerFilterOperatorEndsWith: 'Ends with',
+  headerFilterOperatorContains: 'Zawiera',
+  headerFilterOperatorEquals: 'Równa się',
+  headerFilterOperatorStartsWith: 'Zaczyna się od',
+  headerFilterOperatorEndsWith: 'Kończy się na',
   // headerFilterOperatorIs: 'Is',
-  // headerFilterOperatorNot: 'Is not',
+  headerFilterOperatorNot: 'Niepuste',
   // headerFilterOperatorAfter: 'Is after',
   // headerFilterOperatorOnOrAfter: 'Is on or after',
   // headerFilterOperatorBefore: 'Is before',
@@ -101,7 +101,7 @@ const plPLGrid = {
   // Column menu text
   columnMenuLabel: 'Menu',
   columnMenuShowColumns: 'Pokaż wszystkie kolumny',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Zarządzaj kolumnami',
   columnMenuFilter: 'Filtr',
   columnMenuHideColumn: 'Ukryj',
   columnMenuUnsort: 'Anuluj sortowanie',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "6.9.1",
+  "version": "6.10.0",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",