@mui/x-data-grid 6.9.1 → 6.9.2

package/CHANGELOG.md

@@ -3,6 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.9.2
+
+_Jul 6, 2023_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Auto-scroll when making range selection (#8661) @m4theushw
+
+- 📚 New page: Components lifecycle (#8372) @flaviendelangle
+
+  Clarify pickers events and value updates in a [single docs page](https://mui.com/x/react-date-pickers/lifecycle/).
+
+- 🥧 Add pie chart component
+
+  They are fresh from the code editor. You can visit [pie charts docs](https://mui.com/x/react-charts/pie/) or their [demo page](https://mui.com/x/react-charts/pie-demo/).
+
+  <img width="380" alt="pie-charts" src="https://github.com/mui/mui-x/assets/13808724/fe908c45-803c-4316-b913-dbd2f9f0551e">
+
+- 🐞 Bugfixes
+
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.9.2` / `@mui/x-data-grid-pro@v6.9.2` / `@mui/x-data-grid-premium@v6.9.2`
+
+#### Changes
+
+- [DataGrid] Fix `RangeError` when using flex columns (#9554) @cherniavskii
+- [DataGrid] Fix React 17 editing bug (#9530) @romgrk
+- [DataGrid] Use `getRowId` in filtering (#9564) @romgrk
+- [DataGrid] Correctly reflect `TablePagination`'s `rowsPerPageOptions` shape to `pageSizeOptions` (#9438) @burakkgunduzz
+- [DataGridPremium] Auto-scroll when making range selection (#8661) @m4theushw
+- [l10n] Improve Spanish (es-ES) locale (#9500) @fufex
+
+### `@mui/x-date-pickers@v6.9.2` / `@mui/x-date-pickers-pro@v6.9.2`
+
+#### Changes
+
+- [pickers] Forward digital clock classes (#9555) @YoonjiJang
+- [pickers] Rename `internal` folder to `internals` on `@mui/x-date-picker-pro` (#9571) @flaviendelangle
+
+### `@mui/x-charts@6.0.0-alpha.2`
+
+#### Changes
+
+- [charts] Add pie chart component (#9395) @alexfauquette
+
+### Docs
+
+- [docs] Add pickers playground (#9164) @LukasTy
+- [docs] Fix API links for pickers (#9573) @alexfauquette
+- [docs] Fix demos with `ToggleButtonGroup` (#9548) @flaviendelangle
+- [docs] Fix typos in pagination documentation page (#9332) @RatherBeLunar
+- [docs] Hide ads on paid content @oliviertassinari
+- [docs] Move the charts in the sidebar (#9437) @flaviendelangle
+- [docs] New page: Components lifecycle (#8372) @flaviendelangle
+- [docs] Remove outdated header tag @oliviertassinari
+
+### Core
+
+- [core] Fix typo in priority support @oliviertassinari
+- [core] Remove mention of Crowdin @oliviertassinari
+
 ## 6.9.1
 
 _Jun 30, 2023_

package/DataGrid/DataGrid.js

@@ -513,7 +513,10 @@ DataGridRaw.propTypes = {
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
    */
-  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  })]).isRequired),
   pagination: props => {
     if (props.pagination === false) {
       return new Error(['MUI: `<DataGrid pagination={false} />` is not a valid prop.', 'Infinite scrolling is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to disable the pagination.'].join('\n'));

package/README.md

@@ -7,7 +7,7 @@ It's part of MUI X, an open core extension of MUI, with advanced components.
 
 Install the package in your project directory with:
 
-```sh
+```bash
 // with npm
 npm install @mui/x-data-grid
 

package/components/GridPagination.js

@@ -25,7 +25,6 @@ const GridPaginationRoot = styled(TablePagination)(({
   }
 }));
 export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
-  var _rootProps$pageSizeOp;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
@@ -42,22 +41,36 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
   const handlePageChange = React.useCallback((_, page) => {
     apiRef.current.setPage(page);
   }, [apiRef]);
+  const isPageSizeIncludedInPageSizeOptions = pageSize => {
+    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;
+  };
   if (process.env.NODE_ENV !== 'production') {
     var _rootProps$pagination, _rootProps$pagination2;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
     const pageSize = (_rootProps$pagination = (_rootProps$pagination2 = rootProps.paginationModel) == null ? void 0 : _rootProps$pagination2.pageSize) != null ? _rootProps$pagination : paginationModel.pageSize;
-    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(pageSize)) {
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !isPageSizeIncludedInPageSizeOptions(pageSize)) {
       console.warn([`MUI: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\``, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }
   }
+  const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
   return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
     ref: ref,
     component: "div",
     count: rowCount,
     page: paginationModel.page <= lastPage ? paginationModel.page : lastPage,
-    rowsPerPageOptions: (_rootProps$pageSizeOp = rootProps.pageSizeOptions) != null && _rootProps$pageSizeOp.includes(paginationModel.pageSize) ? rootProps.pageSizeOptions : [],
+    rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange

package/components/cell/GridEditDateCell.js

@@ -112,7 +112,7 @@ function GridEditDateCell(props) {
   const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   const handleInputRef = el => {
     inputRef.current = el;
-    if (meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
+    if (meta != null && meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
       const inputValue = inputRef.current.value;
       const parsedDate = parseValueToDate(inputValue);
       setValueState({

package/components/cell/GridEditInputCell.js

@@ -68,12 +68,12 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       unstable_skipValueParser: true
     }, event);
   }, [apiRef, debounceMs, field, id, onValueChange]);
-  const meta = apiRef.current.unstable_getEditCellMeta ? apiRef.current.unstable_getEditCellMeta(id, field) : {};
+  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   React.useEffect(() => {
-    if (meta.changeReason !== 'debouncedSetEditCellValue') {
+    if ((meta == null ? void 0 : meta.changeReason) !== 'debouncedSetEditCellValue') {
       setValueState(value);
     }
-  }, [meta.changeReason, value]);
+  }, [meta, value]);
   useEnhancedEffect(() => {
     if (hasFocus) {
       inputRef.current.focus();

package/hooks/features/columns/gridColumnsUtils.js

@@ -15,6 +15,7 @@ export function computeFlexColumnsWidth({
   totalFlexUnits,
   flexColumns
 }) {
+  const uniqueFlexColumns = new Set(flexColumns.map(col => col.field));
   const flexColumnsLookup = {
     all: {},
     frozenFields: [],
@@ -30,7 +31,7 @@ export 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/hooks/features/dimensions/useGridDimensions.js

@@ -73,7 +73,7 @@ export 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)
@@ -85,11 +85,11 @@ export 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/hooks/features/editing/useGridEditing.js

@@ -106,8 +106,9 @@ export const useGridEditing = (apiRef, props) => {
     return props.editMode === GridEditModes.Cell ? apiRef.current.getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
   }, [apiRef, props.editMode]);
   const getEditCellMeta = React.useCallback((id, field) => {
+    var _editingState$id$fiel, _editingState$id;
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return editingState[id][field];
+    return (_editingState$id$fiel = (_editingState$id = editingState[id]) == null ? void 0 : _editingState$id[field]) != null ? _editingState$id$fiel : null;
   }, [apiRef]);
   const editingSharedApi = {
     isCellEditable,

package/hooks/features/filter/useGridFilter.js

@@ -258,6 +258,9 @@ export const useGridFilter = (apiRef, props) => {
   }, [props.slots.filterPanel, (_props$slotProps2 = props.slotProps) == null ? void 0 : _props$slotProps2.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 {
@@ -277,9 +280,10 @@ export 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 = 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];
@@ -290,7 +294,7 @@ export const useGridFilter = (apiRef, props) => {
       filteredRowsLookup,
       filteredDescendantCountLookup: {}
     };
-  }, [apiRef, props.filterMode, rows]);
+  }, [apiRef, rows, props.filterMode, getRowId]);
   useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItem);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);

package/hooks/features/rows/useGridParamsApi.js

@@ -101,8 +101,8 @@ export function useGridParamsApi(apiRef, props) {
     return colDef.valueGetter(getBaseCellParams(id, field));
   }, [apiRef, getBaseCellParams]);
   const getRowValue = React.useCallback((row, colDef) => {
-    var _ref;
-    const id = (_ref = getRowId ? getRowId(row) : row.id) != null ? _ref : row[GRID_ID_AUTOGENERATED];
+    var _getRowId;
+    const id = GRID_ID_AUTOGENERATED in row ? row[GRID_ID_AUTOGENERATED] : (_getRowId = getRowId == null ? void 0 : getRowId(row)) != null ? _getRowId : row.id;
     const field = colDef.field;
     if (!colDef || !colDef.valueGetter) {
       return row[field];
@@ -110,12 +110,12 @@ export function useGridParamsApi(apiRef, props) {
     return colDef.valueGetter(getBaseCellParams(id, field));
   }, [getBaseCellParams, getRowId]);
   const getRowFormattedValue = React.useCallback((row, colDef) => {
-    var _ref2;
+    var _ref;
     const value = getRowValue(row, colDef);
     if (!colDef || !colDef.valueFormatter) {
       return value;
     }
-    const id = (_ref2 = getRowId ? getRowId(row) : row.id) != null ? _ref2 : row[GRID_ID_AUTOGENERATED];
+    const id = (_ref = getRowId ? getRowId(row) : row.id) != null ? _ref : row[GRID_ID_AUTOGENERATED];
     const field = colDef.field;
     return colDef.valueFormatter({
       id,

package/index.js

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

package/joy/joySlots.js

@@ -291,7 +291,6 @@ const getLabelDisplayedRowsTo = ({
   return pageSize === -1 ? rowCount : Math.min(rowCount, (page + 1) * pageSize);
 };
 const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _rootProps$pageSizeOp;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const paginationModel = gridPaginationModelSelector(apiRef);
@@ -306,7 +305,20 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [apiRef]);
   const page = paginationModel.page <= lastPage ? paginationModel.page : lastPage;
   const pageSize = paginationModel.pageSize;
-  const pageSizeOptions = (_rootProps$pageSizeOp = rootProps.pageSizeOptions) != null && _rootProps$pageSizeOp.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);
@@ -330,9 +342,9 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
         value: pageSize,
         children: pageSizeOptions.map(option => {
           return /*#__PURE__*/_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__*/_jsx(JoyTypography, {

package/legacy/DataGrid/DataGrid.js

@@ -515,7 +515,10 @@ DataGridRaw.propTypes = {
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
    */
-  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  })]).isRequired),
   pagination: function pagination(props) {
     if (props.pagination === false) {
       return new Error(['MUI: `<DataGrid pagination={false} />` is not a valid prop.', 'Infinite scrolling is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to disable the pagination.'].join('\n'));

package/legacy/components/GridPagination.js

@@ -23,7 +23,6 @@ var GridPaginationRoot = styled(TablePagination)(function (_ref) {
   })), _ref2;
 });
 export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
-  var _rootProps$pageSizeOp;
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
@@ -42,22 +41,36 @@ export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginatio
   var handlePageChange = React.useCallback(function (_, page) {
     apiRef.current.setPage(page);
   }, [apiRef]);
+  var isPageSizeIncludedInPageSizeOptions = function isPageSizeIncludedInPageSizeOptions(pageSize) {
+    for (var i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
+      var option = rootProps.pageSizeOptions[i];
+      if (typeof option === 'number') {
+        if (option === pageSize) {
+          return true;
+        }
+      } else if (option.value === pageSize) {
+        return true;
+      }
+    }
+    return false;
+  };
   if (process.env.NODE_ENV !== 'production') {
     var _rootProps$pagination, _rootProps$pagination2;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     var warnedOnceMissingInPageSizeOptions = React.useRef(false);
     var pageSize = (_rootProps$pagination = (_rootProps$pagination2 = rootProps.paginationModel) == null ? void 0 : _rootProps$pagination2.pageSize) != null ? _rootProps$pagination : paginationModel.pageSize;
-    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(pageSize)) {
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !isPageSizeIncludedInPageSizeOptions(pageSize)) {
       console.warn(["MUI: The page size `".concat(paginationModel.pageSize, "` is not preset in the `pageSizeOptions`"), "Add it to show the pagination select."].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }
   }
+  var pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
   return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
     ref: ref,
     component: "div",
     count: rowCount,
     page: paginationModel.page <= lastPage ? paginationModel.page : lastPage,
-    rowsPerPageOptions: (_rootProps$pageSizeOp = rootProps.pageSizeOptions) != null && _rootProps$pageSizeOp.includes(paginationModel.pageSize) ? rootProps.pageSizeOptions : [],
+    rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange

package/legacy/components/cell/GridEditDateCell.js

@@ -151,7 +151,7 @@ function GridEditDateCell(props) {
   var meta = apiRef.current.unstable_getEditCellMeta(id, field);
   var handleInputRef = function handleInputRef(el) {
     inputRef.current = el;
-    if (meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
+    if (meta != null && meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
       var inputValue = inputRef.current.value;
       var parsedDate = parseValueToDate(inputValue);
       setValueState({

package/legacy/components/cell/GridEditInputCell.js

@@ -100,12 +100,12 @@ var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return _ref2.apply(this, arguments);
     };
   }(), [apiRef, debounceMs, field, id, onValueChange]);
-  var meta = apiRef.current.unstable_getEditCellMeta ? apiRef.current.unstable_getEditCellMeta(id, field) : {};
+  var meta = apiRef.current.unstable_getEditCellMeta(id, field);
   React.useEffect(function () {
-    if (meta.changeReason !== 'debouncedSetEditCellValue') {
+    if ((meta == null ? void 0 : meta.changeReason) !== 'debouncedSetEditCellValue') {
       setValueState(value);
     }
-  }, [meta.changeReason, value]);
+  }, [meta, value]);
   useEnhancedEffect(function () {
     if (hasFocus) {
       inputRef.current.focus();

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

@@ -17,6 +17,9 @@ export function computeFlexColumnsWidth(_ref) {
   var initialFreeSpace = _ref.initialFreeSpace,
     totalFlexUnits = _ref.totalFlexUnits,
     flexColumns = _ref.flexColumns;
+  var uniqueFlexColumns = new Set(flexColumns.map(function (col) {
+    return col.field;
+  }));
   var flexColumnsLookup = {
     all: {},
     frozenFields: [],
@@ -32,7 +35,7 @@ export function computeFlexColumnsWidth(_ref) {
   // 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;
     }
     var violationsLookup = {

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

@@ -73,7 +73,7 @@ export function useGridDimensions(apiRef, props) {
     var 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)
@@ -85,11 +85,11 @@ export function useGridDimensions(apiRef, props) {
       };
       var 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: scrollBarSize

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

@@ -127,8 +127,9 @@ export var useGridEditing = function useGridEditing(apiRef, props) {
     return props.editMode === GridEditModes.Cell ? apiRef.current.getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
   }, [apiRef, props.editMode]);
   var getEditCellMeta = React.useCallback(function (id, field) {
+    var _editingState$id$fiel, _editingState$id;
     var editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return editingState[id][field];
+    return (_editingState$id$fiel = (_editingState$id = editingState[id]) == null ? void 0 : _editingState$id[field]) != null ? _editingState$id$fiel : null;
   }, [apiRef]);
   var editingSharedApi = {
     isCellEditable: isCellEditable,

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

@@ -271,6 +271,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
   var rows = React.useMemo(function () {
     return Object.values(dataRowIdToIdLookup);
   }, [dataRowIdToIdLookup]);
+  var getRowId = props.getRowId;
   var flatFilteringMethod = React.useCallback(function (params) {
     if (props.filterMode !== 'client' || !params.isRowMatchingFilters) {
       return {
@@ -288,9 +289,10 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
     };
     for (var i = 0; i < rows.length; i += 1) {
       var row = rows[i];
+      var id = getRowId ? getRowId(row) : row.id;
       isRowMatchingFilters(row, undefined, result);
       var isRowPassing = passFilterLogic([result.passingFilterItems], [result.passingQuickFilterValues], params.filterModel, apiRef, filterCache);
-      filteredRowsLookup[row.id] = isRowPassing;
+      filteredRowsLookup[id] = isRowPassing;
     }
     var footerId = 'auto-generated-group-footer-root';
     var footer = dataRowIdToModelLookup[footerId];
@@ -301,7 +303,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
       filteredRowsLookup: filteredRowsLookup,
       filteredDescendantCountLookup: {}
     };
-  }, [apiRef, props.filterMode, rows]);
+  }, [apiRef, rows, props.filterMode, getRowId]);
   useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItem);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);

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

@@ -117,8 +117,8 @@ export function useGridParamsApi(apiRef, props) {
     return colDef.valueGetter(getBaseCellParams(id, field));
   }, [apiRef, getBaseCellParams]);
   var getRowValue = React.useCallback(function (row, colDef) {
-    var _ref;
-    var id = (_ref = getRowId ? getRowId(row) : row.id) != null ? _ref : row[GRID_ID_AUTOGENERATED];
+    var _getRowId;
+    var id = GRID_ID_AUTOGENERATED in row ? row[GRID_ID_AUTOGENERATED] : (_getRowId = getRowId == null ? void 0 : getRowId(row)) != null ? _getRowId : row.id;
     var field = colDef.field;
     if (!colDef || !colDef.valueGetter) {
       return row[field];
@@ -126,12 +126,12 @@ export function useGridParamsApi(apiRef, props) {
     return colDef.valueGetter(getBaseCellParams(id, field));
   }, [getBaseCellParams, getRowId]);
   var getRowFormattedValue = React.useCallback(function (row, colDef) {
-    var _ref2;
+    var _ref;
     var value = getRowValue(row, colDef);
     if (!colDef || !colDef.valueFormatter) {
       return value;
     }
-    var id = (_ref2 = getRowId ? getRowId(row) : row.id) != null ? _ref2 : row[GRID_ID_AUTOGENERATED];
+    var id = (_ref = getRowId ? getRowId(row) : row.id) != null ? _ref : row[GRID_ID_AUTOGENERATED];
     var field = colDef.field;
     return colDef.valueFormatter({
       id: id,

package/legacy/index.js

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

package/legacy/joy/joySlots.js

@@ -293,7 +293,6 @@ var getLabelDisplayedRowsTo = function getLabelDisplayedRowsTo(_ref11) {
   return pageSize === -1 ? rowCount : Math.min(rowCount, (page + 1) * pageSize);
 };
 var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _rootProps$pageSizeOp;
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var paginationModel = gridPaginationModelSelector(apiRef);
@@ -310,7 +309,20 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [apiRef]);
   var page = paginationModel.page <= lastPage ? paginationModel.page : lastPage;
   var pageSize = paginationModel.pageSize;
-  var pageSizeOptions = (_rootProps$pageSizeOp = rootProps.pageSizeOptions) != null && _rootProps$pageSizeOp.includes(pageSize) ? rootProps.pageSizeOptions : [];
+  var isPageSizeIncludedInPageSizeOptions = function isPageSizeIncludedInPageSizeOptions() {
+    for (var i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
+      var option = rootProps.pageSizeOptions[i];
+      if (typeof option === 'number') {
+        if (option === pageSize) {
+          return true;
+        }
+      } else if (option.value === pageSize) {
+        return true;
+      }
+    }
+    return false;
+  };
+  var pageSizeOptions = isPageSizeIncludedInPageSizeOptions() ? rootProps.pageSizeOptions : [];
   var handleChangeRowsPerPage = function handleChangeRowsPerPage(event, newValue) {
     var newPageSize = Number(newValue);
     apiRef.current.setPageSize(newPageSize);
@@ -334,9 +346,9 @@ var Pagination = /*#__PURE__*/React.forwardRef(function (props, ref) {
         value: pageSize,
         children: pageSizeOptions.map(function (option) {
           return /*#__PURE__*/_jsx(Option, {
-            value: option,
-            children: option
-          }, option);
+            value: typeof option !== 'number' && option.value ? option.value : option,
+            children: typeof option !== 'number' && option.label ? option.label : "".concat(option)
+          }, typeof option !== 'number' && option.label ? option.label : "".concat(option));
         })
       })]
     }), /*#__PURE__*/_jsx(JoyTypography, {

package/legacy/locales/esES.js

@@ -8,8 +8,8 @@ var 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',
@@ -39,7 +39,7 @@ var 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/locales/esES.js

@@ -8,8 +8,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',
@@ -37,7 +37,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/models/api/gridEditingApi.d.ts

@@ -52,7 +52,7 @@ export interface GridEditingSharedApi {
      * @param {string} field The field being edited.
      * @ignore - do not document.
      */
-    unstable_getEditCellMeta: (id: GridRowId, field: string) => GridEditCellMeta;
+    unstable_getEditCellMeta: (id: GridRowId, field: string) => GridEditCellMeta | null;
 }
 export interface GridEditingSharedPrivateApi {
     /**

package/models/props/DataGridProps.d.ts

@@ -256,7 +256,10 @@ export interface DataGridPropsWithDefaultValues {
      * Select the pageSize dynamically using the component UI.
      * @default [25, 50, 100]
      */
-    pageSizeOptions: number[];
+    pageSizeOptions: Array<number | {
+        value: number;
+        label: string;
+    }>;
     /**
      * Sets the type of space between rows added by `getRowSpacing`.
      * @default "margin"

package/modern/DataGrid/DataGrid.js

@@ -513,7 +513,10 @@ DataGridRaw.propTypes = {
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
    */
-  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.number.isRequired
+  })]).isRequired),
   pagination: props => {
     if (props.pagination === false) {
       return new Error(['MUI: `<DataGrid pagination={false} />` is not a valid prop.', 'Infinite scrolling is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to disable the pagination.'].join('\n'));

package/modern/components/GridPagination.js

@@ -38,21 +38,35 @@ export const GridPagination = /*#__PURE__*/React.forwardRef(function GridPaginat
   const handlePageChange = React.useCallback((_, page) => {
     apiRef.current.setPage(page);
   }, [apiRef]);
+  const isPageSizeIncludedInPageSizeOptions = pageSize => {
+    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;
+  };
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
     const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
-    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(pageSize)) {
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !isPageSizeIncludedInPageSizeOptions(pageSize)) {
       console.warn([`MUI: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\``, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }
   }
+  const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
   return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
     ref: ref,
     component: "div",
     count: rowCount,
     page: paginationModel.page <= lastPage ? paginationModel.page : lastPage,
-    rowsPerPageOptions: rootProps.pageSizeOptions?.includes(paginationModel.pageSize) ? rootProps.pageSizeOptions : [],
+    rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange

package/modern/components/cell/GridEditDateCell.js

@@ -111,7 +111,7 @@ function GridEditDateCell(props) {
   const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   const handleInputRef = el => {
     inputRef.current = el;
-    if (meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
+    if (meta?.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
       const inputValue = inputRef.current.value;
       const parsedDate = parseValueToDate(inputValue);
       setValueState({

package/modern/components/cell/GridEditInputCell.js

@@ -68,12 +68,12 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       unstable_skipValueParser: true
     }, event);
   }, [apiRef, debounceMs, field, id, onValueChange]);
-  const meta = apiRef.current.unstable_getEditCellMeta ? apiRef.current.unstable_getEditCellMeta(id, field) : {};
+  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   React.useEffect(() => {
-    if (meta.changeReason !== 'debouncedSetEditCellValue') {
+    if (meta?.changeReason !== 'debouncedSetEditCellValue') {
       setValueState(value);
     }
-  }, [meta.changeReason, value]);
+  }, [meta, value]);
   useEnhancedEffect(() => {
     if (hasFocus) {
       inputRef.current.focus();

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

@@ -15,6 +15,7 @@ export function computeFlexColumnsWidth({
   totalFlexUnits,
   flexColumns
 }) {
+  const uniqueFlexColumns = new Set(flexColumns.map(col => col.field));
   const flexColumnsLookup = {
     all: {},
     frozenFields: [],
@@ -30,7 +31,7 @@ export 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/modern/hooks/features/dimensions/useGridDimensions.js

@@ -72,7 +72,7 @@ export 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)
@@ -84,11 +84,11 @@ export 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/modern/hooks/features/editing/useGridEditing.js

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

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

@@ -252,6 +252,9 @@ export 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 {
@@ -271,9 +274,10 @@ export 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 = 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];
@@ -284,7 +288,7 @@ export const useGridFilter = (apiRef, props) => {
       filteredRowsLookup,
       filteredDescendantCountLookup: {}
     };
-  }, [apiRef, props.filterMode, rows]);
+  }, [apiRef, rows, props.filterMode, getRowId]);
   useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItem);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);

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

@@ -101,7 +101,7 @@ export 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[GRID_ID_AUTOGENERATED];
+    const id = GRID_ID_AUTOGENERATED in row ? row[GRID_ID_AUTOGENERATED] : getRowId?.(row) ?? row.id;
     const field = colDef.field;
     if (!colDef || !colDef.valueGetter) {
       return row[field];

package/modern/index.js

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

package/modern/joy/joySlots.js

@@ -299,7 +299,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);
@@ -323,9 +336,9 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
         value: pageSize,
         children: pageSizeOptions.map(option => {
           return /*#__PURE__*/_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__*/_jsx(JoyTypography, {

package/modern/locales/esES.js

@@ -8,8 +8,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',
@@ -37,7 +37,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/DataGrid/DataGrid.js

@@ -522,7 +522,10 @@ DataGridRaw.propTypes = {
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
    */
-  pageSizeOptions: _propTypes.default.arrayOf(_propTypes.default.number),
+  pageSizeOptions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.number.isRequired
+  })]).isRequired),
   pagination: props => {
     if (props.pagination === false) {
       return new Error(['MUI: `<DataGrid pagination={false} />` is not a valid prop.', 'Infinite scrolling is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to disable the pagination.'].join('\n'));

package/node/components/GridPagination.js

@@ -47,21 +47,35 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
   const handlePageChange = React.useCallback((_, page) => {
     apiRef.current.setPage(page);
   }, [apiRef]);
+  const isPageSizeIncludedInPageSizeOptions = pageSize => {
+    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;
+  };
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
     const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
-    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !rootProps.pageSizeOptions.includes(pageSize)) {
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !isPageSizeIncludedInPageSizeOptions(pageSize)) {
       console.warn([`MUI: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\``, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }
   }
+  const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaginationRoot, (0, _extends2.default)({
     ref: ref,
     component: "div",
     count: rowCount,
     page: paginationModel.page <= lastPage ? paginationModel.page : lastPage,
-    rowsPerPageOptions: rootProps.pageSizeOptions?.includes(paginationModel.pageSize) ? rootProps.pageSizeOptions : [],
+    rowsPerPageOptions: pageSizeOptions,
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange

package/node/components/cell/GridEditDateCell.js

@@ -121,7 +121,7 @@ function GridEditDateCell(props) {
   const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   const handleInputRef = el => {
     inputRef.current = el;
-    if (meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
+    if (meta?.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
       const inputValue = inputRef.current.value;
       const parsedDate = parseValueToDate(inputValue);
       setValueState({

package/node/components/cell/GridEditInputCell.js

@@ -77,12 +77,12 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       unstable_skipValueParser: true
     }, event);
   }, [apiRef, debounceMs, field, id, onValueChange]);
-  const meta = apiRef.current.unstable_getEditCellMeta ? apiRef.current.unstable_getEditCellMeta(id, field) : {};
+  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
   React.useEffect(() => {
-    if (meta.changeReason !== 'debouncedSetEditCellValue') {
+    if (meta?.changeReason !== 'debouncedSetEditCellValue') {
       setValueState(value);
     }
-  }, [meta.changeReason, value]);
+  }, [meta, value]);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     if (hasFocus) {
       inputRef.current.focus();

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/filter/useGridFilter.js

@@ -262,6 +262,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 +284,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 +298,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);

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/index.js

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

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/package.json

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