@mui/x-data-grid 7.13.0 → 7.14.0

package/modern/components/panel/GridPanel.js

@@ -10,7 +10,6 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const gridPanelClasses = generateUtilityClasses('MuiDataGrid', ['panel', 'paper']);
@@ -51,7 +50,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
     apiRef.current.hidePreferences();
   }, [apiRef]);
   const handleKeyDown = React.useCallback(event => {
-    if (isEscapeKey(event.key)) {
+    if (event.key === 'Escape') {
       apiRef.current.hidePreferences();
     }
   }, [apiRef]);

package/modern/components/panel/filterPanel/GridFilterForm.js

@@ -281,10 +281,15 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
       variant: "standard",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, logicOperatorInputProps, {
-      sx: _extends({
-        display: hasLogicOperatorColumn ? 'flex' : 'none',
-        visibility: showMultiFilterOperators ? 'visible' : 'hidden'
-      }, baseFormControlProps.sx || {}, logicOperatorInputProps.sx || {}),
+      sx: [hasLogicOperatorColumn ? {
+        display: 'flex'
+      } : {
+        display: 'none'
+      }, showMultiFilterOperators ? {
+        visibility: 'visible'
+      } : {
+        visibility: 'hidden'
+      }, baseFormControlProps.sx, logicOperatorInputProps.sx],
       className: clsx(classes.logicOperatorInput, baseFormControlProps.className, logicOperatorInputProps.className),
       ownerState: rootProps,
       children: /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -6,7 +6,7 @@ import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
-import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
+import { isHideMenuKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridMenu } from '../menu/GridMenu';
@@ -62,7 +62,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
     setOpen(false);
   };
   const handleListKeyDown = event => {
-    if (isTabKey(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if (isHideMenuKey(event.key)) {

package/modern/components/toolbar/GridToolbarExportContainer.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
 import MenuList from '@mui/material/MenuList';
-import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
+import { isHideMenuKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridMenu } from '../menu/GridMenu';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -29,7 +29,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
   };
   const handleMenuClose = () => setOpen(false);
   const handleListKeyDown = event => {
-    if (isTabKey(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if (isHideMenuKey(event.key)) {

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -105,9 +105,11 @@ function GridToolbarQuickFilter(props) {
       endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
         size: "small",
-        sx: {
-          visibility: searchValue ? 'visible' : 'hidden'
-        },
+        sx: [searchValue ? {
+          visibility: 'visible'
+        } : {
+          visibility: 'hidden'
+        }],
         onClick: handleSearchReset
       }, rootProps.slotProps?.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {

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

@@ -51,7 +51,8 @@ export function useGridParamsApi(apiRef) {
       tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
       value,
       formattedValue: value,
-      isEditable: false
+      isEditable: false,
+      api: {}
     };
     if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);

package/modern/hooks/utils/useGridSelector.js

@@ -6,12 +6,21 @@ import { warnOnce } from '../../internals/utils/warning';
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }
+// TODO v8: Remove this function
 function applySelector(apiRef, selector) {
   if (isOutputSelector(selector)) {
     return selector(apiRef);
   }
   return selector(apiRef.current.state);
 }
+
+// TODO v8: Rename this function to `applySelector`
+function applySelectorV8(apiRef, selector, args, instanceId) {
+  if (isOutputSelector(selector)) {
+    return selector(apiRef, args);
+  }
+  return selector(apiRef.current.state, instanceId);
+}
 const defaultCompare = Object.is;
 export const objectShallowCompare = fastObjectShallowCompare;
 const createRefs = () => ({
@@ -19,6 +28,8 @@ const createRefs = () => ({
   equals: null,
   selector: null
 });
+
+// TODO v8: Remove this function
 export const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!apiRef.current.state) {
@@ -43,4 +54,31 @@ export const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
     });
   });
   return state;
+};
+
+// TODO v8: Rename this function to `useGridSelector`
+export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultCompare) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!apiRef.current.state) {
+      warnOnce(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
+    }
+  }
+  const refs = useLazyRef(createRefs);
+  const didInit = refs.current.selector !== null;
+  const [state, setState] = React.useState(
+  // We don't use an initialization function to avoid allocations
+  didInit ? null : applySelectorV8(apiRef, selector, args, apiRef.current.instanceId));
+  refs.current.state = state;
+  refs.current.equals = equals;
+  refs.current.selector = selector;
+  useOnMount(() => {
+    return apiRef.current.store.subscribe(() => {
+      const newState = applySelectorV8(apiRef, refs.current.selector, args, apiRef.current.instanceId);
+      if (!refs.current.equals(refs.current.state, newState)) {
+        refs.current.state = newState;
+        setState(newState);
+      }
+    });
+  });
+  return state;
 };

package/modern/index.js

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

package/modern/internals/index.js

@@ -57,7 +57,8 @@ export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibl
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
-export { createSelector, createSelectorMemoized } from '../utils/createSelector';
+export { createSelector, createSelectorV8, createSelectorMemoized, createSelectorMemoizedV8 } from '../utils/createSelector';
+export { useGridSelectorV8 } from '../hooks/utils/useGridSelector';
 export { gridRowGroupsToFetchSelector } from '../hooks/features/rows/gridRowsSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
 export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';

package/modern/locales/csCZ.js

@@ -38,11 +38,10 @@ const csCZGrid = {
   toolbarExportPrint: 'Vytisknout',
   toolbarExportExcel: 'Stáhnout jako Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Hledat sloupce',
+  columnsManagementNoColumns: 'Žádné sloupce',
+  columnsManagementShowHideAllText: 'Zobrazit/skrýt vše',
+  columnsManagementReset: 'Resetovat',
   // Filter panel text
   filterPanelAddFilter: 'Přidat filtr',
   filterPanelRemoveAll: 'Odstranit vše',

package/modern/locales/heIL.js

@@ -30,11 +30,10 @@ const heILGrid = {
   toolbarExportPrint: 'הדפסה',
   toolbarExportExcel: 'ייצוא ל- Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'חיפוש',
+  columnsManagementNoColumns: 'אין עמודות',
+  columnsManagementShowHideAllText: 'הצג/הסתר הכל',
+  columnsManagementReset: 'אתחול',
   // Filter panel text
   filterPanelAddFilter: 'הוסף מסנן',
   filterPanelRemoveAll: 'מחק הכל',

package/modern/utils/createSelector.js

@@ -1,5 +1,18 @@
 import { createSelector as reselectCreateSelector } from 'reselect';
 import { warnOnce } from '../internals/utils/warning';
+
+// TODO v8: Remove this type
+
+// TODO v8: Rename this type to `OutputSelector`
+
+// TODO v8: Remove this type
+
+// TODO v8: Rename this type to `SelectorArgs`
+
+// TODO v8: Remove this type
+
+// TODO v8: Rename this type to `CreateSelectorFunction`
+
 const cache = new WeakMap();
 function checkIsAPIRef(value) {
   return 'current' in value && 'instanceId' in value.current;
@@ -7,6 +20,8 @@ function checkIsAPIRef(value) {
 const DEFAULT_INSTANCE_ID = {
   id: 'default'
 };
+
+// TODO v8: Remove this function
 export const createSelector = (a, b, c, d, e, f, ...other) => {
   if (other.length > 0) {
     throw new Error('Unsupported number of selectors');
@@ -71,6 +86,74 @@ export const createSelector = (a, b, c, d, e, f, ...other) => {
   selector.acceptsApiRef = true;
   return selector;
 };
+
+// TODO v8: Rename this function to `createSelector`
+export const createSelectorV8 = (a, b, c, d, e, f, ...other) => {
+  if (other.length > 0) {
+    throw new Error('Unsupported number of selectors');
+  }
+  let selector;
+  if (a && b && c && d && e && f) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      const vb = b(state, args, instanceId);
+      const vc = c(state, args, instanceId);
+      const vd = d(state, args, instanceId);
+      const ve = e(state, args, instanceId);
+      return f(va, vb, vc, vd, ve, args);
+    };
+  } else if (a && b && c && d && e) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      const vb = b(state, args, instanceId);
+      const vc = c(state, args, instanceId);
+      const vd = d(state, args, instanceId);
+      return e(va, vb, vc, vd, args);
+    };
+  } else if (a && b && c && d) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      const vb = b(state, args, instanceId);
+      const vc = c(state, args, instanceId);
+      return d(va, vb, vc, args);
+    };
+  } else if (a && b && c) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      const vb = b(state, args, instanceId);
+      return c(va, vb, args);
+    };
+  } else if (a && b) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      return b(va, args);
+    };
+  } else {
+    throw new Error('Missing arguments');
+  }
+
+  // We use this property to detect if the selector was created with createSelector
+  // or it's only a simple function the receives the state and returns part of it.
+  selector.acceptsApiRef = true;
+  return selector;
+};
+
+// TODO v8: Remove this function
 export const createSelectorMemoized = (...args) => {
   const selector = (stateOrApiRef, instanceId) => {
     const isAPIRef = checkIsAPIRef(stateOrApiRef);
@@ -97,6 +180,39 @@ export const createSelectorMemoized = (...args) => {
     return fn(state, cacheKey);
   };
 
+  // We use this property to detect if the selector was created with createSelector
+  // or it's only a simple function the receives the state and returns part of it.
+  selector.acceptsApiRef = true;
+  return selector;
+};
+
+// TODO v8: Rename this function to `createSelectorMemoized`
+export const createSelectorMemoizedV8 = (...args) => {
+  const selector = (stateOrApiRef, selectorArgs, instanceId) => {
+    const isAPIRef = checkIsAPIRef(stateOrApiRef);
+    const cacheKey = isAPIRef ? stateOrApiRef.current.instanceId : instanceId ?? DEFAULT_INSTANCE_ID;
+    const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+    if (process.env.NODE_ENV !== 'production') {
+      if (cacheKey.id === 'default') {
+        warnOnce(['MUI X: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, for example `mySelector(apiRef)`, or pass the instance ID explicitly, for example `mySelector(state, apiRef.current.instanceId)`.']);
+      }
+    }
+    const cacheArgsInit = cache.get(cacheKey);
+    const cacheArgs = cacheArgsInit ?? new Map();
+    const cacheFn = cacheArgs?.get(args);
+    if (cacheArgs && cacheFn) {
+      // We pass the cache key because the called selector might have as
+      // dependency another selector created with this `createSelector`.
+      return cacheFn(state, selectorArgs, cacheKey);
+    }
+    const fn = reselectCreateSelector(...args);
+    if (!cacheArgsInit) {
+      cache.set(cacheKey, cacheArgs);
+    }
+    cacheArgs.set(args, fn);
+    return fn(state, selectorArgs, cacheKey);
+  };
+
   // We use this property to detect if the selector was created with createSelector
   // or it's only a simple function the receives the state and returns part of it.
   selector.acceptsApiRef = true;

package/modern/utils/keyboardUtils.js

@@ -1,13 +1,3 @@
-/**
- * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
- */
-export const isEscapeKey = key => key === 'Escape';
-
-/**
- * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
- */
-export const isTabKey = key => key === 'Tab';
-
 // Non printable keys have a name, for example "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
 // So event.key.length === 1 is often enough.
@@ -27,7 +17,7 @@ export const isCellExitEditModeKeys = key => GRID_CELL_EXIT_EDIT_MODE_KEYS.index
 export const isCellEditCommitKeys = key => GRID_CELL_EDIT_COMMIT_KEYS.indexOf(key) > -1;
 export const isNavigationKey = key => key.indexOf('Arrow') === 0 || key.indexOf('Page') === 0 || key === ' ' || key === 'Home' || key === 'End';
 export const isKeyboardEvent = event => !!event.key;
-export const isHideMenuKey = key => isTabKey(key) || isEscapeKey(key);
+export const isHideMenuKey = key => key === 'Tab' || key === 'Escape';
 
 // In theory, on macOS, ctrl + v doesn't trigger a paste, so the function should return false.
 // However, maybe it's overkill to fix, so let's be lazy.

package/node/components/cell/GridCell.js

@@ -116,13 +116,12 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const field = column.field;
-  const cellParamsWithAPI = (0, _useGridSelector.useGridSelector)(apiRef, () => {
+  const cellParams = (0, _useGridSelector.useGridSelector)(apiRef, () => {
     // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
     // associated with `rowId`/`fieldId`, but this selector runs after the state has been
     // updated, while `rowId`/`fieldId` reference an entry in the old state.
     try {
-      const cellParams = apiRef.current.getCellParams(rowId, field);
-      const result = cellParams;
+      const result = apiRef.current.getCellParams(rowId, field);
       result.api = apiRef.current;
       return result;
     } catch (e) {
@@ -141,9 +140,9 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     hasFocus,
     isEditable = false,
     value
-  } = cellParamsWithAPI;
+  } = cellParams;
   const canManageOwnFocus = column.type === 'actions' && column.getActions?.(apiRef.current.getRowParams(rowId)).some(action => !action.props.disabled);
-  const tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParamsWithAPI.tabIndex : -1;
+  const tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParams.tabIndex : -1;
   const {
     classes: rootClasses,
     getCellClassName
@@ -156,15 +155,15 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   }).filter(Boolean).join(' '));
   const classNames = [pipesClassName];
   if (column.cellClassName) {
-    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
+    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParams) : column.cellClassName);
   }
   if (column.display === 'flex') {
     classNames.push(_gridClasses.gridClasses['cell--flex']);
   }
   if (getCellClassName) {
-    classNames.push(getCellClassName(cellParamsWithAPI));
+    classNames.push(getCellClassName(cellParams));
   }
-  const valueToRender = cellParamsWithAPI.formattedValue ?? value;
+  const valueToRender = cellParams.formattedValue ?? value;
   const cellRef = React.useRef(null);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
   const focusElementRef = React.useRef(null);
@@ -247,7 +246,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       }
     }
   }, [hasFocus, cellMode, apiRef]);
-  if (cellParamsWithAPI === EMPTY_CELL_PARAMS) {
+  if (cellParams === EMPTY_CELL_PARAMS) {
     return null;
   }
   let handleFocus = other.onFocus;
@@ -269,15 +268,15 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   let children;
   let title;
   if (editCellState === null && column.renderCell) {
-    children = column.renderCell(cellParamsWithAPI);
+    children = column.renderCell(cellParams);
   }
   if (editCellState !== null && column.renderEditCell) {
     const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const editCellStateRest = (0, _objectWithoutPropertiesLoose2.default)(editCellState, _excluded2);
-    const formattedValue = column.valueFormatter ? column.valueFormatter(editCellState.value, updatedRow, column, apiRef) : cellParamsWithAPI.formattedValue;
-    const params = (0, _extends2.default)({}, cellParamsWithAPI, {
+    const formattedValue = column.valueFormatter ? column.valueFormatter(editCellState.value, updatedRow, column, apiRef) : cellParams.formattedValue;
+    const params = (0, _extends2.default)({}, cellParams, {
       row: updatedRow,
       formattedValue
     }, editCellStateRest);

package/node/components/cell/GridEditSingleSelectCell.js

@@ -13,7 +13,6 @@ var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _gridEditCellParams = require("../../models/params/gridEditCellParams");
-var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridEditRowModel = require("../../models/gridEditRowModel");
 var _filterPanelUtils = require("../panel/filterPanel/filterPanelUtils");
@@ -90,10 +89,10 @@ function GridEditSingleSelectCell(props) {
       setOpen(false);
       return;
     }
-    if (reason === 'backdropClick' || (0, _keyboardUtils.isEscapeKey)(event.key)) {
+    if (reason === 'backdropClick' || event.key === 'Escape') {
       const params = apiRef.current.getCellParams(id, field);
       apiRef.current.publishEvent('cellEditStop', (0, _extends2.default)({}, params, {
-        reason: (0, _keyboardUtils.isEscapeKey)(event.key) ? _gridEditCellParams.GridCellEditStopReasons.escapeKeyDown : _gridEditCellParams.GridCellEditStopReasons.cellFocusOut
+        reason: event.key === 'Escape' ? _gridEditCellParams.GridCellEditStopReasons.escapeKeyDown : _gridEditCellParams.GridCellEditStopReasons.cellFocusOut
       }));
     }
   };

package/node/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -32,7 +32,7 @@ const GridColumnMenuContainer = exports.GridColumnMenuContainer = /*#__PURE__*/R
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const handleListKeyDown = React.useCallback(event => {
-    if ((0, _keyboardUtils.isTabKey)(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if ((0, _keyboardUtils.isHideMenuKey)(event.key)) {

package/node/components/panel/GridPanel.js

@@ -16,7 +16,6 @@ var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAway
 var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
-var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "classes"];
@@ -60,7 +59,7 @@ const GridPanel = exports.GridPanel = /*#__PURE__*/React.forwardRef((props, ref)
     apiRef.current.hidePreferences();
   }, [apiRef]);
   const handleKeyDown = React.useCallback(event => {
-    if ((0, _keyboardUtils.isEscapeKey)(event.key)) {
+    if (event.key === 'Escape') {
       apiRef.current.hidePreferences();
     }
   }, [apiRef]);

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

@@ -290,10 +290,15 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
       variant: "standard",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, logicOperatorInputProps, {
-      sx: (0, _extends2.default)({
-        display: hasLogicOperatorColumn ? 'flex' : 'none',
-        visibility: showMultiFilterOperators ? 'visible' : 'hidden'
-      }, baseFormControlProps.sx || {}, logicOperatorInputProps.sx || {}),
+      sx: [hasLogicOperatorColumn ? {
+        display: 'flex'
+      } : {
+        display: 'none'
+      }, showMultiFilterOperators ? {
+        visibility: 'visible'
+      } : {
+        visibility: 'hidden'
+      }, baseFormControlProps.sx, logicOperatorInputProps.sx],
       className: (0, _clsx.default)(classes.logicOperatorInput, baseFormControlProps.className, logicOperatorInputProps.className),
       ownerState: rootProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -71,7 +71,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
     setOpen(false);
   };
   const handleListKeyDown = event => {
-    if ((0, _keyboardUtils.isTabKey)(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if ((0, _keyboardUtils.isHideMenuKey)(event.key)) {

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -38,7 +38,7 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
   };
   const handleMenuClose = () => setOpen(false);
   const handleListKeyDown = event => {
-    if ((0, _keyboardUtils.isTabKey)(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if ((0, _keyboardUtils.isHideMenuKey)(event.key)) {

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -114,9 +114,11 @@ function GridToolbarQuickFilter(props) {
       endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
         "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
         size: "small",
-        sx: {
-          visibility: searchValue ? 'visible' : 'hidden'
-        },
+        sx: [searchValue ? {
+          visibility: 'visible'
+        } : {
+          visibility: 'hidden'
+        }],
         onClick: handleSearchReset
       }, rootProps.slotProps?.baseIconButton, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {

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

@@ -61,7 +61,8 @@ function useGridParamsApi(apiRef) {
       tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
       value,
       formattedValue: value,
-      isEditable: false
+      isEditable: false,
+      api: {}
     };
     if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);

package/node/hooks/utils/useGridSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridSelector = exports.objectShallowCompare = void 0;
+exports.useGridSelectorV8 = exports.useGridSelector = exports.objectShallowCompare = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _useLazyRef = require("./useLazyRef");
@@ -14,12 +14,21 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }
+// TODO v8: Remove this function
 function applySelector(apiRef, selector) {
   if (isOutputSelector(selector)) {
     return selector(apiRef);
   }
   return selector(apiRef.current.state);
 }
+
+// TODO v8: Rename this function to `applySelector`
+function applySelectorV8(apiRef, selector, args, instanceId) {
+  if (isOutputSelector(selector)) {
+    return selector(apiRef, args);
+  }
+  return selector(apiRef.current.state, instanceId);
+}
 const defaultCompare = Object.is;
 const objectShallowCompare = exports.objectShallowCompare = _fastObjectShallowCompare.fastObjectShallowCompare;
 const createRefs = () => ({
@@ -27,6 +36,8 @@ const createRefs = () => ({
   equals: null,
   selector: null
 });
+
+// TODO v8: Remove this function
 const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!apiRef.current.state) {
@@ -52,4 +63,32 @@ const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
   });
   return state;
 };
-exports.useGridSelector = useGridSelector;
+
+// TODO v8: Rename this function to `useGridSelector`
+exports.useGridSelector = useGridSelector;
+const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultCompare) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!apiRef.current.state) {
+      (0, _warning.warnOnce)(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
+    }
+  }
+  const refs = (0, _useLazyRef.useLazyRef)(createRefs);
+  const didInit = refs.current.selector !== null;
+  const [state, setState] = React.useState(
+  // We don't use an initialization function to avoid allocations
+  didInit ? null : applySelectorV8(apiRef, selector, args, apiRef.current.instanceId));
+  refs.current.state = state;
+  refs.current.equals = equals;
+  refs.current.selector = selector;
+  (0, _useOnMount.useOnMount)(() => {
+    return apiRef.current.store.subscribe(() => {
+      const newState = applySelectorV8(apiRef, refs.current.selector, args, apiRef.current.instanceId);
+      if (!refs.current.equals(refs.current.state, newState)) {
+        refs.current.state = newState;
+        setState(newState);
+      }
+    });
+  });
+  return state;
+};
+exports.useGridSelectorV8 = useGridSelectorV8;