@mui/x-data-grid 5.17.7 → 5.17.9

package/CHANGELOG.md

@@ -3,6 +3,73 @@
 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_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 🌍 Improve Turkish (tr-TR) locale on the data grid and pickers (#6573) @ramazansancar
+
+### `@mui/x-data-grid@v5.17.8` / `@mui/x-data-grid-pro@v5.17.8` / `@mui/x-data-grid-premium@v5.17.8`
+
+#### Changes
+
+- [DataGrid] Add `searchPredicate` prop to `GridColumnsPanel` component (#6572) @cherniavskii
+- [DataGrid] Fix grid not updating state on `rowCount` prop change (#6474) @cherniavskii
+- [DataGridPro] Fix row order being reset after updating the row (#6544) @cherniavskii
+- [l10n] Improve Turkish (tr-TR) locale on the data grid and pickers (#6542) (#6573) @ramazansancar
+
+### `@mui/x-date-pickers@v5.0.5` / `@mui/x-date-pickers-pro@v5.0.5`
+
+#### Changes
+
+- [CalendarPicker] Don't move to closest enabled date when `props.date` contains a disabled date (#6537) @flaviendelangle
+- [DateRangePicker] Fix calendar day outside of month layout shifting on hover (pick #6448) (#6538) @alexfauquette
+- [pickers] Fix typescript issues (#6510) @flaviendelangle
+
+### Docs
+
+- [docs] Fix 301 link to the sx prop page @oliviertassinari
+
 ## 5.17.7
 
 _Oct 13, 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,7 +1,10 @@
 /// <reference types="react" />
 import { GridPanelWrapperProps } from './GridPanelWrapper';
+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"];
+const _excluded = ["sort", "searchPredicate", "autoFocusSearchField"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -59,6 +59,10 @@ const GridIconButtonRoot = styled(IconButton)({
 });
 const collator = new Intl.Collator();
 
+const defaultSearchPredicate = (column, searchValue) => {
+  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
+};
+
 function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
@@ -74,7 +78,9 @@ function GridColumnsPanel(props) {
   const classes = useUtilityClasses(ownerState);
 
   const {
-    sort
+    sort,
+    searchPredicate = defaultSearchPredicate,
+    autoFocusSearchField = true
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -128,11 +134,27 @@ function GridColumnsPanel(props) {
     }
 
     const searchValueToCheck = searchValue.toLowerCase();
-    return sortedColumns.filter(column => (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1);
-  }, [sortedColumns, searchValue]);
+    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 +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, {
@@ -191,6 +214,8 @@ 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;
 export { GridColumnsPanel };

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/gridRowsState.d.ts

@@ -31,6 +31,7 @@ export interface GridRowsInternalCache extends Omit<GridRowTreeCreationParams, '
      * The value of the `loading` prop since the last time that the rows state was updated.
      */
     loadingPropBeforePartialUpdates: DataGridProcessedProps['loading'];
+    rowCountPropBeforePartialUpdates: DataGridProcessedProps['rowCount'];
 }
 export interface GridRowsState extends GridRowTreeCreationValue {
     /**

package/hooks/features/rows/gridRowsUtils.d.ts

@@ -11,7 +11,7 @@ import { GridRowsInternalCache, GridRowsState } from './gridRowsState';
  */
 export declare function checkGridRowIdIsValid(id: GridRowId, row: GridRowModel | Partial<GridRowModel>, detailErrorMessage?: string): void;
 export declare const getRowIdFromRowModel: (rowModel: GridRowModel, getRowId?: GridRowIdGetter, detailErrorMessage?: string) => GridRowId;
-export declare const createRowsInternalCache: ({ rows, getRowId, loading, }: Pick<DataGridProcessedProps, 'rows' | 'getRowId' | 'loading'>) => GridRowsInternalCache;
+export declare const createRowsInternalCache: ({ rows, getRowId, loading, rowCount, }: Pick<DataGridProcessedProps, 'rows' | 'getRowId' | 'loading' | 'rowCount'>) => GridRowsInternalCache;
 export declare const getRowsStateFromCache: ({ apiRef, previousTree, rowCountProp, loadingProp, }: {
     apiRef: React.MutableRefObject<GridApiCommunity>;
     previousTree: GridRowTreeConfig | null;

package/hooks/features/rows/gridRowsUtils.js

@@ -22,11 +22,13 @@ export const getRowIdFromRowModel = (rowModel, getRowId, detailErrorMessage) =>
 export const createRowsInternalCache = ({
   rows,
   getRowId,
-  loading
+  loading,
+  rowCount
 }) => {
   const cache = {
     rowsBeforePartialUpdates: rows,
     loadingPropBeforePartialUpdates: loading,
+    rowCountPropBeforePartialUpdates: rowCount,
     idRowsLookup: {},
     idToIdLookup: {},
     ids: []

package/hooks/features/rows/useGridRows.js

@@ -13,7 +13,8 @@ export const rowsStateInitializer = (state, props, apiRef) => {
   apiRef.current.unstable_caches.rows = createRowsInternalCache({
     rows: props.rows,
     getRowId: props.getRowId,
-    loading: props.loading
+    loading: props.loading,
+    rowCount: props.rowCount
   });
   return _extends({}, state, {
     rows: getRowsStateFromCache({
@@ -91,12 +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
-    }), true);
-  }, [logger, props.getRowId, props.loading, throttledRowsChange]);
+      loading: props.loading,
+      rowCount: props.rowCount
+    });
+    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.
@@ -119,6 +124,7 @@ export const useGridRows = (apiRef, props) => {
     const newCache = {
       rowsBeforePartialUpdates: prevCache.rowsBeforePartialUpdates,
       loadingPropBeforePartialUpdates: prevCache.loadingPropBeforePartialUpdates,
+      rowCountPropBeforePartialUpdates: prevCache.rowCountPropBeforePartialUpdates,
       idRowsLookup: _extends({}, prevCache.idRowsLookup),
       idToIdLookup: _extends({}, prevCache.idToIdLookup),
       ids: [...prevCache.ids]
@@ -241,6 +247,7 @@ export const useGridRows = (apiRef, props) => {
         ids: updatedRows
       })
     }));
+    apiRef.current.unstable_caches.rows.ids = updatedRows;
     apiRef.current.publishEvent('rowsSet');
   }, [apiRef, logger]);
   const replaceRows = React.useCallback((firstRowToRender, newRows) => {
@@ -332,12 +339,13 @@ export const useGridRows = (apiRef, props) => {
       cache = createRowsInternalCache({
         rows: props.rows,
         getRowId: props.getRowId,
-        loading: props.loading
+        loading: props.loading,
+        rowCount: props.rowCount
       });
     }
 
     throttledRowsChange(cache, false);
-  }, [logger, apiRef, props.rows, props.getRowId, props.loading, throttledRowsChange]);
+  }, [logger, apiRef, props.rows, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
   const handleStrategyProcessorChange = React.useCallback(methodName => {
     if (methodName === 'rowTreeCreation') {
       groupRows();
@@ -386,7 +394,8 @@ export const useGridRows = (apiRef, props) => {
     }
 
     const areNewRowsAlreadyInState = apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows;
-    const isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
+    const isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading;
+    const isNewRowCountAlreadyInState = apiRef.current.unstable_caches.rows.rowCountPropBeforePartialUpdates === props.rowCount; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
 
     if (areNewRowsAlreadyInState) {
       // If the loading prop has changed, we need to update its value in the state because it won't be done by `throttledRowsChange`
@@ -400,6 +409,17 @@ export const useGridRows = (apiRef, props) => {
         apiRef.current.forceUpdate();
       }
 
+      if (!isNewRowCountAlreadyInState) {
+        apiRef.current.setState(state => _extends({}, state, {
+          rows: _extends({}, state.rows, {
+            totalRowCount: Math.max(props.rowCount || 0, state.rows.totalRowCount),
+            totalTopLevelRowCount: Math.max(props.rowCount || 0, state.rows.totalTopLevelRowCount)
+          })
+        }));
+        apiRef.current.unstable_caches.rows.rowCountPropBeforePartialUpdates = props.rowCount;
+        apiRef.current.forceUpdate();
+      }
+
       return;
     }
 
@@ -407,7 +427,8 @@ export const useGridRows = (apiRef, props) => {
     throttledRowsChange(createRowsInternalCache({
       rows: props.rows,
       getRowId: props.getRowId,
-      loading: props.loading
+      loading: props.loading,
+      rowCount: props.rowCount
     }), false);
   }, [props.rows, props.rowCount, props.getRowId, props.loading, logger, throttledRowsChange, apiRef]);
 };

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.7
+/** @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"];
+var _excluded = ["sort", "searchPredicate", "autoFocusSearchField"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
@@ -66,6 +66,10 @@ var GridIconButtonRoot = styled(IconButton)({
 });
 var collator = new Intl.Collator();
 
+var defaultSearchPredicate = function defaultSearchPredicate(column, searchValue) {
+  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
+};
+
 function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
@@ -86,6 +90,10 @@ function GridColumnsPanel(props) {
   var classes = useUtilityClasses(ownerState);
 
   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 () {
@@ -146,12 +154,28 @@ function GridColumnsPanel(props) {
 
     var searchValueToCheck = searchValue.toLowerCase();
     return sortedColumns.filter(function (column) {
-      return (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1;
+      return searchPredicate(column, searchValueToCheck);
     });
-  }, [sortedColumns, searchValue]);
+  }, [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({
@@ -177,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, {
@@ -214,6 +239,8 @@ 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;
 export { GridColumnsPanel };

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

@@ -25,10 +25,12 @@ export var getRowIdFromRowModel = function getRowIdFromRowModel(rowModel, getRow
 export var createRowsInternalCache = function createRowsInternalCache(_ref) {
   var rows = _ref.rows,
       getRowId = _ref.getRowId,
-      loading = _ref.loading;
+      loading = _ref.loading,
+      rowCount = _ref.rowCount;
   var cache = {
     rowsBeforePartialUpdates: rows,
     loadingPropBeforePartialUpdates: loading,
+    rowCountPropBeforePartialUpdates: rowCount,
     idRowsLookup: {},
     idToIdLookup: {},
     ids: []