@mui/x-data-grid 5.17.8 → 5.17.9

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.9
+
+_Oct 28, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ Fix memory leak during unmount of the DataGrid (#6579) @cherniavskii
+- 🎁 Allow to disable the autofocus of the search field when opening the column visibility panel (#6630) @e-cloud
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.9` / `@mui/x-data-grid-pro@v5.17.9` / `@mui/x-data-grid-premium@v5.17.9`
+
+#### Changes
+
+- [DataGrid] Allow to disable autofocusing the search field in the columns panel (#6630) @e-cloud
+- [DataGrid] Fix `setRows` method not persisting new rows data after `loading` prop change (#6637) @cherniavskii
+- [DataGrid] Fix memory leak on grid unmount (#6579) @cherniavskii
+- [l10n] Improve Bulgarian (bg-BG) locale (#6635) @AtanasVA
+
+### `@mui/x-date-pickers@v5.0.6` / `@mui/x-date-pickers-pro@v5.0.6`
+
+#### Changes
+
+- [pickers] Ignore milliseconds in mask logic (#6618) @alexfauquette
+- [pickers] Update input when `inputFormat` is modified (#6617) @alexfauquette
+
+### Docs
+
+- [docs] Add token to redirect feedbacks on slack (#6592) @alexfauquette
+- [docs] Disable translations (#6639) @cherniavskii
+- [docs] Fix code edit for when v6 will be stable (#6600) @oliviertassinari
+- [docs] Fix typo in DataGrid demo page (#6632) (#6634) @LukasTy
+
+### Core
+
+- [core] Upgrade monorepo (#6570) @cherniavskii
+
 ## 5.17.8
 
 _Oct 20, 2022_

package/DataGrid/DataGrid.js

@@ -721,7 +721,7 @@ DataGridRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: PropTypes.array.isRequired,
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
 
   /**
    * Sets the type of space between rows added by `getRowSpacing`.

package/components/cell/GridActionsCell.js

@@ -261,7 +261,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/components/cell/GridBooleanCell.js

@@ -110,7 +110,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/components/cell/GridEditBooleanCell.js

@@ -149,7 +149,7 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/components/cell/GridEditDateCell.js

@@ -203,7 +203,7 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/components/cell/GridEditInputCell.js

@@ -179,7 +179,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object,
+  row: PropTypes.any,
 
   /**
    * The node of the row that the current cell belongs to.

package/components/cell/GridEditSingleSelectCell.js

@@ -252,7 +252,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -174,7 +174,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/components/panel/GridColumnsPanel.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import { GridPanelWrapperProps } from './GridPanelWrapper';
-import { GridStateColDef } from '../../models/colDef/gridColDef';
+import type { GridStateColDef } from '../../models/colDef/gridColDef';
 export interface GridColumnsPanelProps extends GridPanelWrapperProps {
     sort?: 'asc' | 'desc';
     searchPredicate?: (column: GridStateColDef, searchValue: string) => boolean;
+    autoFocusSearchField?: boolean;
 }
 declare function GridColumnsPanel(props: GridColumnsPanelProps): JSX.Element;
 declare namespace GridColumnsPanel {

package/components/panel/GridColumnsPanel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["sort", "searchPredicate"];
+const _excluded = ["sort", "searchPredicate", "autoFocusSearchField"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -79,7 +79,8 @@ function GridColumnsPanel(props) {
 
   const {
     sort,
-    searchPredicate = defaultSearchPredicate
+    searchPredicate = defaultSearchPredicate,
+    autoFocusSearchField = true
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -135,9 +136,25 @@ function GridColumnsPanel(props) {
     const searchValueToCheck = searchValue.toLowerCase();
     return sortedColumns.filter(column => searchPredicate(column, searchValueToCheck));
   }, [sortedColumns, searchValue, searchPredicate]);
+  const firstSwitchRef = React.useRef(null);
   React.useEffect(() => {
-    searchInputRef.current.focus();
-  }, []);
+    if (autoFocusSearchField) {
+      searchInputRef.current.focus();
+    } else if (firstSwitchRef.current && typeof firstSwitchRef.current.focus === 'function') {
+      firstSwitchRef.current.focus();
+    }
+  }, [autoFocusSearchField]);
+  let firstHideableColumnFound = false;
+
+  const isFirstHideableColumn = column => {
+    if (firstHideableColumnFound === false && column.hideable !== false) {
+      firstHideableColumnFound = true;
+      return true;
+    }
+
+    return false;
+  };
+
   return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
     children: [/*#__PURE__*/_jsx(GridPanelHeader, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
@@ -163,7 +180,8 @@ function GridColumnsPanel(props) {
                 checked: columnVisibilityModel[column.field] !== false,
                 onClick: toggleColumn,
                 name: column.field,
-                size: "small"
+                size: "small",
+                inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
               }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSwitch)),
               label: column.headerName || column.field
             }), !rootProps.disableColumnReorder && GRID_EXPERIMENTAL_ENABLED && /*#__PURE__*/_jsx(GridIconButtonRoot, {
@@ -196,6 +214,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  autoFocusSearchField: PropTypes.bool,
   searchPredicate: PropTypes.func,
   sort: PropTypes.oneOf(['asc', 'desc'])
 } : void 0;

package/hooks/core/useGridApiInitialization.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { GridSignature } from '../utils/useGridApiEventHandler';
 import { EventManager } from '../../utils/EventManager';
+import { unstable_resetCreateSelectorCache } from '../../utils/createSelector';
 
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
@@ -53,6 +54,7 @@ export function useGridApiInitialization(inputApiRef, props) {
   React.useEffect(() => {
     const api = apiRef.current;
     return () => {
+      unstable_resetCreateSelectorCache(api.instanceId);
       api.publishEvent('unmount');
     };
   }, [apiRef]);

package/hooks/features/rows/useGridRows.js

@@ -92,13 +92,16 @@ export const useGridRows = (apiRef, props) => {
 
   const setRows = React.useCallback(rows => {
     logger.debug(`Updating all rows, new length ${rows.length}`);
-    throttledRowsChange(createRowsInternalCache({
+    const cache = createRowsInternalCache({
       rows,
       getRowId: props.getRowId,
       loading: props.loading,
       rowCount: props.rowCount
-    }), true);
-  }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
+    });
+    const prevCache = apiRef.current.unstable_caches.rows;
+    cache.rowsBeforePartialUpdates = prevCache.rowsBeforePartialUpdates;
+    throttledRowsChange(cache, true);
+  }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange, apiRef]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.8
+/** @license MUI v5.17.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/DataGrid/DataGrid.js

@@ -723,7 +723,7 @@ DataGridRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: PropTypes.array.isRequired,
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
 
   /**
    * Sets the type of space between rows added by `getRowSpacing`.

package/legacy/components/cell/GridActionsCell.js

@@ -297,7 +297,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/cell/GridBooleanCell.js

@@ -120,7 +120,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/cell/GridEditBooleanCell.js

@@ -189,7 +189,7 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/cell/GridEditDateCell.js

@@ -240,7 +240,7 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/cell/GridEditInputCell.js

@@ -219,7 +219,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object,
+  row: PropTypes.any,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -309,7 +309,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -177,7 +177,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/legacy/components/panel/GridColumnsPanel.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["sort", "searchPredicate"];
+var _excluded = ["sort", "searchPredicate", "autoFocusSearchField"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -92,6 +92,8 @@ function GridColumnsPanel(props) {
   var sort = props.sort,
       _props$searchPredicat = props.searchPredicate,
       searchPredicate = _props$searchPredicat === void 0 ? defaultSearchPredicate : _props$searchPredicat,
+      _props$autoFocusSearc = props.autoFocusSearchField,
+      autoFocusSearchField = _props$autoFocusSearc === void 0 ? true : _props$autoFocusSearc,
       other = _objectWithoutProperties(props, _excluded);
 
   var sortedColumns = React.useMemo(function () {
@@ -155,9 +157,25 @@ function GridColumnsPanel(props) {
       return searchPredicate(column, searchValueToCheck);
     });
   }, [sortedColumns, searchValue, searchPredicate]);
+  var firstSwitchRef = React.useRef(null);
   React.useEffect(function () {
-    searchInputRef.current.focus();
-  }, []);
+    if (autoFocusSearchField) {
+      searchInputRef.current.focus();
+    } else if (firstSwitchRef.current && typeof firstSwitchRef.current.focus === 'function') {
+      firstSwitchRef.current.focus();
+    }
+  }, [autoFocusSearchField]);
+  var firstHideableColumnFound = false;
+
+  var isFirstHideableColumn = function isFirstHideableColumn(column) {
+    if (firstHideableColumnFound === false && column.hideable !== false) {
+      firstHideableColumnFound = true;
+      return true;
+    }
+
+    return false;
+  };
+
   return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
     children: [/*#__PURE__*/_jsx(GridPanelHeader, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
@@ -183,7 +201,8 @@ function GridColumnsPanel(props) {
                 checked: columnVisibilityModel[column.field] !== false,
                 onClick: toggleColumn,
                 name: column.field,
-                size: "small"
+                size: "small",
+                inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
               }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSwitch)),
               label: column.headerName || column.field
             }), !rootProps.disableColumnReorder && GRID_EXPERIMENTAL_ENABLED && /*#__PURE__*/_jsx(GridIconButtonRoot, {
@@ -220,6 +239,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  autoFocusSearchField: PropTypes.bool,
   searchPredicate: PropTypes.func,
   sort: PropTypes.oneOf(['asc', 'desc'])
 } : void 0;

package/legacy/hooks/core/useGridApiInitialization.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { GridSignature } from '../utils/useGridApiEventHandler';
 import { EventManager } from '../../utils/EventManager';
+import { unstable_resetCreateSelectorCache } from '../../utils/createSelector';
 
 var isSyntheticEvent = function isSyntheticEvent(event) {
   return event.isPropagationStopped !== undefined;
@@ -62,6 +63,7 @@ export function useGridApiInitialization(inputApiRef, props) {
   React.useEffect(function () {
     var api = apiRef.current;
     return function () {
+      unstable_resetCreateSelectorCache(api.instanceId);
       api.publishEvent('unmount');
     };
   }, [apiRef]);

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

@@ -98,13 +98,16 @@ export var useGridRows = function useGridRows(apiRef, props) {
 
   var setRows = React.useCallback(function (rows) {
     logger.debug("Updating all rows, new length ".concat(rows.length));
-    throttledRowsChange(createRowsInternalCache({
+    var cache = createRowsInternalCache({
       rows: rows,
       getRowId: props.getRowId,
       loading: props.loading,
       rowCount: props.rowCount
-    }), true);
-  }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
+    });
+    var prevCache = apiRef.current.unstable_caches.rows;
+    cache.rowsBeforePartialUpdates = prevCache.rowsBeforePartialUpdates;
+    throttledRowsChange(cache, true);
+  }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange, apiRef]);
   var updateRows = React.useCallback(function (updates) {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.8
+/** @license MUI v5.17.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/locales/bgBG.js

@@ -86,7 +86,7 @@ var bgBGGrid = {
     return count !== 1 ? "".concat(count.toLocaleString(), " \u0438\u0437\u0431\u0440\u0430\u043D\u0438 \u0440\u0435\u0434\u043E\u0432\u0435") : "".concat(count.toLocaleString(), " \u0438\u0437\u0431\u0440\u0430\u043D \u0440\u0435\u0434");
   },
   // Total row amount footer text
-  footerTotalRows: 'Общо Rедове:',
+  footerTotalRows: 'Общо Редове:',
   // Total visible row amount footer text
   footerTotalVisibleRows: function footerTotalVisibleRows(visibleCount, totalCount) {
     return "".concat(visibleCount.toLocaleString(), " \u043E\u0442 ").concat(totalCount.toLocaleString());

package/legacy/utils/createSelector.js

@@ -58,6 +58,12 @@ export var createSelector = function createSelector() {
   return selector;
 }; // eslint-disable-next-line @typescript-eslint/naming-convention
 
-export var unstable_resetCreateSelectorCache = function unstable_resetCreateSelectorCache() {
-  cacheContainer.cache = null;
+export var unstable_resetCreateSelectorCache = function unstable_resetCreateSelectorCache(cacheKey) {
+  if (typeof cacheKey !== 'undefined') {
+    if (cacheContainer.cache && cacheContainer.cache[cacheKey]) {
+      delete cacheContainer.cache[cacheKey];
+    }
+  } else {
+    cacheContainer.cache = null;
+  }
 };

package/locales/bgBG.js

@@ -80,7 +80,7 @@ const bgBGGrid = {
   // Rows selected footer text
   footerRowSelected: count => count !== 1 ? `${count.toLocaleString()} избрани редове` : `${count.toLocaleString()} избран ред`,
   // Total row amount footer text
-  footerTotalRows: 'Общо Rедове:',
+  footerTotalRows: 'Общо Редове:',
   // Total visible row amount footer text
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} от ${totalCount.toLocaleString()}`,
   // Checkbox selection text

package/modern/DataGrid/DataGrid.js

@@ -721,7 +721,7 @@ DataGridRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: PropTypes.array.isRequired,
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
 
   /**
    * Sets the type of space between rows added by `getRowSpacing`.

package/modern/components/cell/GridActionsCell.js

@@ -261,7 +261,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/modern/components/cell/GridBooleanCell.js

@@ -110,7 +110,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/modern/components/cell/GridEditBooleanCell.js

@@ -147,7 +147,7 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/modern/components/cell/GridEditDateCell.js

@@ -201,7 +201,7 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/modern/components/cell/GridEditInputCell.js

@@ -175,7 +175,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object,
+  row: PropTypes.any,
 
   /**
    * The node of the row that the current cell belongs to.

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -246,7 +246,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -170,7 +170,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/modern/components/panel/GridColumnsPanel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["sort", "searchPredicate"];
+const _excluded = ["sort", "searchPredicate", "autoFocusSearchField"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -77,7 +77,8 @@ function GridColumnsPanel(props) {
 
   const {
     sort,
-    searchPredicate = defaultSearchPredicate
+    searchPredicate = defaultSearchPredicate,
+    autoFocusSearchField = true
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -133,9 +134,25 @@ function GridColumnsPanel(props) {
     const searchValueToCheck = searchValue.toLowerCase();
     return sortedColumns.filter(column => searchPredicate(column, searchValueToCheck));
   }, [sortedColumns, searchValue, searchPredicate]);
+  const firstSwitchRef = React.useRef(null);
   React.useEffect(() => {
-    searchInputRef.current.focus();
-  }, []);
+    if (autoFocusSearchField) {
+      searchInputRef.current.focus();
+    } else if (firstSwitchRef.current && typeof firstSwitchRef.current.focus === 'function') {
+      firstSwitchRef.current.focus();
+    }
+  }, [autoFocusSearchField]);
+  let firstHideableColumnFound = false;
+
+  const isFirstHideableColumn = column => {
+    if (firstHideableColumnFound === false && column.hideable !== false) {
+      firstHideableColumnFound = true;
+      return true;
+    }
+
+    return false;
+  };
+
   return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
     children: [/*#__PURE__*/_jsx(GridPanelHeader, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
@@ -158,7 +175,8 @@ function GridColumnsPanel(props) {
               checked: columnVisibilityModel[column.field] !== false,
               onClick: toggleColumn,
               name: column.field,
-              size: "small"
+              size: "small",
+              inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
             }, rootProps.componentsProps?.baseSwitch)),
             label: column.headerName || column.field
           }), !rootProps.disableColumnReorder && GRID_EXPERIMENTAL_ENABLED && /*#__PURE__*/_jsx(GridIconButtonRoot, {
@@ -190,6 +208,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  autoFocusSearchField: PropTypes.bool,
   searchPredicate: PropTypes.func,
   sort: PropTypes.oneOf(['asc', 'desc'])
 } : void 0;

package/modern/hooks/core/useGridApiInitialization.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { GridSignature } from '../utils/useGridApiEventHandler';
 import { EventManager } from '../../utils/EventManager';
+import { unstable_resetCreateSelectorCache } from '../../utils/createSelector';
 
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
@@ -53,6 +54,7 @@ export function useGridApiInitialization(inputApiRef, props) {
   React.useEffect(() => {
     const api = apiRef.current;
     return () => {
+      unstable_resetCreateSelectorCache(api.instanceId);
       api.publishEvent('unmount');
     };
   }, [apiRef]);

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

@@ -88,13 +88,16 @@ export const useGridRows = (apiRef, props) => {
 
   const setRows = React.useCallback(rows => {
     logger.debug(`Updating all rows, new length ${rows.length}`);
-    throttledRowsChange(createRowsInternalCache({
+    const cache = createRowsInternalCache({
       rows,
       getRowId: props.getRowId,
       loading: props.loading,
       rowCount: props.rowCount
-    }), true);
-  }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
+    });
+    const prevCache = apiRef.current.unstable_caches.rows;
+    cache.rowsBeforePartialUpdates = prevCache.rowsBeforePartialUpdates;
+    throttledRowsChange(cache, true);
+  }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange, apiRef]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.8
+/** @license MUI v5.17.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/locales/bgBG.js

@@ -80,7 +80,7 @@ const bgBGGrid = {
   // Rows selected footer text
   footerRowSelected: count => count !== 1 ? `${count.toLocaleString()} избрани редове` : `${count.toLocaleString()} избран ред`,
   // Total row amount footer text
-  footerTotalRows: 'Общо Rедове:',
+  footerTotalRows: 'Общо Редове:',
   // Total visible row amount footer text
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} от ${totalCount.toLocaleString()}`,
   // Checkbox selection text

package/modern/utils/createSelector.js

@@ -51,6 +51,12 @@ export const createSelector = (...args) => {
   return selector;
 }; // eslint-disable-next-line @typescript-eslint/naming-convention
 
-export const unstable_resetCreateSelectorCache = () => {
-  cacheContainer.cache = null;
+export const unstable_resetCreateSelectorCache = cacheKey => {
+  if (typeof cacheKey !== 'undefined') {
+    if (cacheContainer.cache && cacheContainer.cache[cacheKey]) {
+      delete cacheContainer.cache[cacheKey];
+    }
+  } else {
+    cacheContainer.cache = null;
+  }
 };

package/node/DataGrid/DataGrid.js

@@ -744,7 +744,7 @@ DataGridRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: _propTypes.default.array.isRequired,
+  rows: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
 
   /**
    * Sets the type of space between rows added by `getRowSpacing`.

package/node/components/cell/GridActionsCell.js

@@ -285,7 +285,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/cell/GridBooleanCell.js

@@ -131,7 +131,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/cell/GridEditBooleanCell.js

@@ -173,7 +173,7 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/cell/GridEditDateCell.js

@@ -229,7 +229,7 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/cell/GridEditInputCell.js

@@ -205,7 +205,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object,
+  row: _propTypes.default.any,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/cell/GridEditSingleSelectCell.js

@@ -276,7 +276,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -198,7 +198,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/panel/GridColumnsPanel.js

@@ -49,7 +49,7 @@ var _gridClasses = require("../../constants/gridClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["sort", "searchPredicate"];
+const _excluded = ["sort", "searchPredicate", "autoFocusSearchField"];
 
 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); }
 
@@ -111,7 +111,8 @@ function GridColumnsPanel(props) {
   const classes = useUtilityClasses(ownerState);
   const {
     sort,
-    searchPredicate = defaultSearchPredicate
+    searchPredicate = defaultSearchPredicate,
+    autoFocusSearchField = true
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const sortedColumns = React.useMemo(() => {
@@ -166,9 +167,25 @@ function GridColumnsPanel(props) {
     const searchValueToCheck = searchValue.toLowerCase();
     return sortedColumns.filter(column => searchPredicate(column, searchValueToCheck));
   }, [sortedColumns, searchValue, searchPredicate]);
+  const firstSwitchRef = React.useRef(null);
   React.useEffect(() => {
-    searchInputRef.current.focus();
-  }, []);
+    if (autoFocusSearchField) {
+      searchInputRef.current.focus();
+    } else if (firstSwitchRef.current && typeof firstSwitchRef.current.focus === 'function') {
+      firstSwitchRef.current.focus();
+    }
+  }, [autoFocusSearchField]);
+  let firstHideableColumnFound = false;
+
+  const isFirstHideableColumn = column => {
+    if (firstHideableColumnFound === false && column.hideable !== false) {
+      firstHideableColumnFound = true;
+      return true;
+    }
+
+    return false;
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelHeader.GridPanelHeader, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseTextField, (0, _extends2.default)({
@@ -194,7 +211,8 @@ function GridColumnsPanel(props) {
                 checked: columnVisibilityModel[column.field] !== false,
                 onClick: toggleColumn,
                 name: column.field,
-                size: "small"
+                size: "small",
+                inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
               }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSwitch)),
               label: column.headerName || column.field
             }), !rootProps.disableColumnReorder && _envConstants.GRID_EXPERIMENTAL_ENABLED && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridIconButtonRoot, {
@@ -227,6 +245,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  autoFocusSearchField: _propTypes.default.bool,
   searchPredicate: _propTypes.default.func,
   sort: _propTypes.default.oneOf(['asc', 'desc'])
 } : void 0;

package/node/hooks/core/useGridApiInitialization.js

@@ -13,6 +13,8 @@ var _useGridApiEventHandler = require("../utils/useGridApiEventHandler");
 
 var _EventManager = require("../../utils/EventManager");
 
+var _createSelector = require("../../utils/createSelector");
+
 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; }
@@ -68,6 +70,7 @@ function useGridApiInitialization(inputApiRef, props) {
   React.useEffect(() => {
     const api = apiRef.current;
     return () => {
+      (0, _createSelector.unstable_resetCreateSelectorCache)(api.instanceId);
       api.publishEvent('unmount');
     };
   }, [apiRef]);

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

@@ -119,13 +119,16 @@ const useGridRows = (apiRef, props) => {
 
   const setRows = React.useCallback(rows => {
     logger.debug(`Updating all rows, new length ${rows.length}`);
-    throttledRowsChange((0, _gridRowsUtils.createRowsInternalCache)({
+    const cache = (0, _gridRowsUtils.createRowsInternalCache)({
       rows,
       getRowId: props.getRowId,
       loading: props.loading,
       rowCount: props.rowCount
-    }), true);
-  }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
+    });
+    const prevCache = apiRef.current.unstable_caches.rows;
+    cache.rowsBeforePartialUpdates = prevCache.rowsBeforePartialUpdates;
+    throttledRowsChange(cache, true);
+  }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange, apiRef]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.8
+/** @license MUI v5.17.9
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/locales/bgBG.js

@@ -89,7 +89,7 @@ const bgBGGrid = {
   // Rows selected footer text
   footerRowSelected: count => count !== 1 ? `${count.toLocaleString()} избрани редове` : `${count.toLocaleString()} избран ред`,
   // Total row amount footer text
-  footerTotalRows: 'Общо Rедове:',
+  footerTotalRows: 'Общо Редове:',
   // Total visible row amount footer text
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} от ${totalCount.toLocaleString()}`,
   // Checkbox selection text

package/node/utils/createSelector.js

@@ -64,8 +64,14 @@ const createSelector = (...args) => {
 
 exports.createSelector = createSelector;
 
-const unstable_resetCreateSelectorCache = () => {
-  cacheContainer.cache = null;
+const unstable_resetCreateSelectorCache = cacheKey => {
+  if (typeof cacheKey !== 'undefined') {
+    if (cacheContainer.cache && cacheContainer.cache[cacheKey]) {
+      delete cacheContainer.cache[cacheKey];
+    }
+  } else {
+    cacheContainer.cache = null;
+  }
 };
 
 exports.unstable_resetCreateSelectorCache = unstable_resetCreateSelectorCache;

package/package.json

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

package/utils/createSelector.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Selector, SelectorResultArray } from 'reselect';
+declare type CacheKey = number | string;
 export interface OutputSelector<State, Result> {
     (apiRef: React.MutableRefObject<{
         state: State;
@@ -18,5 +19,5 @@ declare type StateFromSelectorList<Selectors extends readonly any[]> = Selectors
 declare type SelectorArgs<Selectors extends ReadonlyArray<Selector<any>>, Result> = [selectors: [...Selectors], combiner: (...args: SelectorResultArray<Selectors>) => Result] | [...Selectors, (...args: SelectorResultArray<Selectors>) => Result];
 declare type CreateSelectorFunction = <Selectors extends ReadonlyArray<Selector<any>>, Result>(...items: SelectorArgs<Selectors, Result>) => OutputSelector<StateFromSelectorList<Selectors>, Result>;
 export declare const createSelector: CreateSelectorFunction;
-export declare const unstable_resetCreateSelectorCache: () => void;
+export declare const unstable_resetCreateSelectorCache: (cacheKey?: CacheKey) => void;
 export {};

package/utils/createSelector.js

@@ -51,6 +51,12 @@ export const createSelector = (...args) => {
   return selector;
 }; // eslint-disable-next-line @typescript-eslint/naming-convention
 
-export const unstable_resetCreateSelectorCache = () => {
-  cacheContainer.cache = null;
+export const unstable_resetCreateSelectorCache = cacheKey => {
+  if (typeof cacheKey !== 'undefined') {
+    if (cacheContainer.cache && cacheContainer.cache[cacheKey]) {
+      delete cacheContainer.cache[cacheKey];
+    }
+  } else {
+    cacheContainer.cache = null;
+  }
 };