@mui/x-data-grid 7.13.0 → 7.15.0

package/node/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridKeyboardNavigation = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
@@ -32,13 +32,13 @@ const getLeftColumnIndex = ({
   currentColIndex,
   firstColIndex,
   lastColIndex,
-  direction
+  isRtl
 }) => {
-  if (direction === 'rtl') {
+  if (isRtl) {
     if (currentColIndex < lastColIndex) {
       return currentColIndex + 1;
     }
-  } else if (direction === 'ltr') {
+  } else if (!isRtl) {
     if (currentColIndex > firstColIndex) {
       return currentColIndex - 1;
     }
@@ -49,13 +49,13 @@ const getRightColumnIndex = ({
   currentColIndex,
   firstColIndex,
   lastColIndex,
-  direction
+  isRtl
 }) => {
-  if (direction === 'rtl') {
+  if (isRtl) {
     if (currentColIndex > firstColIndex) {
       return currentColIndex - 1;
     }
-  } else if (direction === 'ltr') {
+  } else if (!isRtl) {
     if (currentColIndex < lastColIndex) {
       return currentColIndex + 1;
     }
@@ -75,7 +75,7 @@ const getRightColumnIndex = ({
 const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridKeyboardNavigation');
   const initialCurrentPageRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props).rows;
-  const theme = (0, _styles.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
   const headerFilteringEnabled = props.signature !== 'DataGrid' && props.headerFilters;
 
@@ -169,7 +169,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction: theme.direction
+            isRtl
           });
           if (rightColIndex !== null) {
             goToHeader(rightColIndex, event);
@@ -182,7 +182,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction: theme.direction
+            isRtl
           });
           if (leftColIndex !== null) {
             goToHeader(leftColIndex, event);
@@ -233,7 +233,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, theme.direction, goToHeader, goToGroupHeader]);
+  }, [apiRef, currentPageRows.length, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, isRtl, goToHeader, goToGroupHeader]);
   const handleHeaderFilterKeyDown = React.useCallback((params, event) => {
     const isEditing = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringEditFieldSelector)(apiRef) === params.field;
     const isHeaderMenuOpen = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringMenuSelector)(apiRef) === params.field;
@@ -262,7 +262,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction: theme.direction
+            isRtl
           });
           if (rightColIndex !== null) {
             goToHeaderFilter(rightColIndex, event);
@@ -275,7 +275,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction: theme.direction
+            isRtl
           });
           if (leftColIndex !== null) {
             goToHeaderFilter(leftColIndex, event);
@@ -319,7 +319,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, goToHeaderFilter, theme.direction, goToHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, currentPageRows.length, goToHeaderFilter, isRtl, goToHeader, goToCell, getRowIdFromIndex]);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
     const focusedColumnGroup = (0, _focus.gridFocusColumnGroupHeaderSelector)(apiRef);
     if (focusedColumnGroup === null) {
@@ -427,7 +427,6 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (currentPageRows.length === 0) {
       return;
     }
-    const direction = theme.direction;
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const rowIndexBefore = currentPageRows.findIndex(row => row.id === params.id);
@@ -462,10 +461,10 @@ const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction
+            isRtl
           });
           if (rightColIndex !== null) {
-            goToCell(rightColIndex, getRowIdFromIndex(rowIndexBefore), direction === 'rtl' ? 'left' : 'right');
+            goToCell(rightColIndex, getRowIdFromIndex(rowIndexBefore), isRtl ? 'left' : 'right');
           }
           break;
         }
@@ -475,10 +474,10 @@ const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction
+            isRtl
           });
           if (leftColIndex !== null) {
-            goToCell(leftColIndex, getRowIdFromIndex(rowIndexBefore), direction === 'rtl' ? 'right' : 'left');
+            goToCell(leftColIndex, getRowIdFromIndex(rowIndexBefore), isRtl ? 'right' : 'left');
           }
           break;
         }
@@ -553,7 +552,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, theme.direction, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
+  }, [apiRef, currentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

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/features/scroll/useGridScroll.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridScroll = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridSelector = require("../../utils/useGridSelector");
@@ -50,7 +50,7 @@ function scrollIntoView(dimensions) {
  * @requires useGridColumnSpanning (method)
  */
 const useGridScroll = (apiRef, props) => {
-  const theme = (0, _styles.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
@@ -108,7 +108,7 @@ const useGridScroll = (apiRef, props) => {
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows]);
   const scroll = React.useCallback(params => {
     if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
-      const direction = theme.direction === 'rtl' ? -1 : 1;
+      const direction = isRtl ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
       logger.debug(`Scrolling left: ${params.left}`);
@@ -118,7 +118,7 @@ const useGridScroll = (apiRef, props) => {
       logger.debug(`Scrolling top: ${params.top}`);
     }
     logger.debug(`Scrolling, updating container, and viewport`);
-  }, [virtualScrollerRef, theme.direction, colRef, logger]);
+  }, [virtualScrollerRef, isRtl, colRef, logger]);
   const getScrollPosition = React.useCallback(() => {
     if (!virtualScrollerRef?.current) {
       return {

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -15,7 +15,7 @@ var _utils = require("@mui/utils");
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _useResizeObserver = require("@mui/x-internals/useResizeObserver");
-var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridSelector = require("../../utils/useGridSelector");
@@ -51,9 +51,9 @@ const EMPTY_SCROLL_POSITION = {
   left: 0
 };
 const EMPTY_DETAIL_PANELS = exports.EMPTY_DETAIL_PANELS = Object.freeze(new Map());
-const createScrollCache = (mode, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) => ({
+const createScrollCache = (isRtl, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) => ({
   direction: ScrollDirection.NONE,
-  buffer: bufferForDirection(mode, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
+  buffer: bufferForDirection(isRtl, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
 let isJSDOM = false;
 try {
@@ -75,7 +75,7 @@ const useGridVirtualScroller = () => {
   const pinnedColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector);
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
-  const theme = (0, _styles.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const cellFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusCellSelector);
   const cellTabIndex = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexCellSelector);
   const rowsMeta = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
@@ -112,7 +112,7 @@ const useGridVirtualScroller = () => {
   const renderContext = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridRenderContextSelector);
   const scrollTimeout = (0, _useTimeout.default)();
   const frozenContext = React.useRef(undefined);
-  const scrollCache = (0, _useLazyRef.default)(() => createScrollCache(theme.direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
+  const scrollCache = (0, _useLazyRef.default)(() => createScrollCache(isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
   const focusedCell = {
     rowIndex: React.useMemo(() => cellFocus ? currentPage.rows.findIndex(row => row.id === cellFocus.id) : -1, [cellFocus, currentPage.rows]),
     columnIndex: React.useMemo(() => cellFocus ? visibleColumns.findIndex(column => column.field === cellFocus.field) : -1, [cellFocus, visibleColumns])
@@ -177,7 +177,7 @@ const useGridVirtualScroller = () => {
       }
     }
     scrollCache.direction = direction;
-    scrollCache.buffer = bufferForDirection(theme.direction, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
+    scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
     const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
 
@@ -205,12 +205,12 @@ const useGridVirtualScroller = () => {
     if (scrollTop < 0) {
       return;
     }
-    if (theme.direction === 'ltr') {
+    if (!isRtl) {
       if (scrollLeft < 0) {
         return;
       }
     }
-    if (theme.direction === 'rtl') {
+    if (isRtl) {
       if (scrollLeft > 0) {
         return;
       }
@@ -337,7 +337,7 @@ const useGridVirtualScroller = () => {
       if (!isPinnedSection && frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
         currentRenderContext = frozenContext.current;
       }
-      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, theme.direction, pinnedColumns.left.length);
+      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, isRtl, pinnedColumns.left.length);
       const showBottomBorder = isLastVisibleInSection && params.position === 'top';
       rows.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.row, (0, _extends2.default)({
         row: model,
@@ -658,8 +658,8 @@ function areRenderContextsEqual(context1, context2) {
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
 }
-function computeOffsetLeft(columnPositions, renderContext, direction, pinnedLeftLength) {
-  const factor = direction === 'ltr' ? 1 : -1;
+function computeOffsetLeft(columnPositions, renderContext, isRtl, pinnedLeftLength) {
+  const factor = isRtl ? -1 : 1;
   const left = factor * (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
   return Math.abs(left);
 }
@@ -683,8 +683,8 @@ function directionForDelta(dx, dy) {
   }
   /* eslint-enable */
 }
-function bufferForDirection(mode, direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
-  if (mode === 'rtl') {
+function bufferForDirection(isRtl, direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
+  if (isRtl) {
     switch (direction) {
       case ScrollDirection.LEFT:
         direction = ScrollDirection.RIGHT;

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;

package/node/index.js

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

package/node/internals/index.js

@@ -85,7 +85,10 @@ var _exportNames = {
   getColumnsToExport: true,
   defaultGetRowsToExport: true,
   createSelector: true,
+  createSelectorV8: true,
   createSelectorMemoized: true,
+  createSelectorMemoizedV8: true,
+  useGridSelectorV8: true,
   findParentElementFromClassName: true,
   getActiveElement: true,
   isEventTargetInPortal: true,
@@ -197,6 +200,18 @@ Object.defineProperty(exports, "createSelectorMemoized", {
     return _createSelector.createSelectorMemoized;
   }
 });
+Object.defineProperty(exports, "createSelectorMemoizedV8", {
+  enumerable: true,
+  get: function () {
+    return _createSelector.createSelectorMemoizedV8;
+  }
+});
+Object.defineProperty(exports, "createSelectorV8", {
+  enumerable: true,
+  get: function () {
+    return _createSelector.createSelectorV8;
+  }
+});
 Object.defineProperty(exports, "defaultGetRowsToExport", {
   enumerable: true,
   get: function () {
@@ -605,6 +620,12 @@ Object.defineProperty(exports, "useGridScroll", {
     return _useGridScroll.useGridScroll;
   }
 });
+Object.defineProperty(exports, "useGridSelectorV8", {
+  enumerable: true,
+  get: function () {
+    return _useGridSelector.useGridSelectorV8;
+  }
+});
 Object.defineProperty(exports, "useGridSorting", {
   enumerable: true,
   get: function () {
@@ -748,6 +769,7 @@ Object.keys(_createControllablePromise).forEach(function (key) {
   });
 });
 var _createSelector = require("../utils/createSelector");
+var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _domUtils = require("../utils/domUtils");
 var _keyboardUtils = require("../utils/keyboardUtils");
 var _utils2 = require("../utils/utils");

package/node/locales/csCZ.js

@@ -44,11 +44,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/node/locales/heIL.js

@@ -36,11 +36,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/node/utils/createSelector.js

@@ -3,9 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createSelectorMemoized = exports.createSelector = void 0;
+exports.createSelectorV8 = exports.createSelectorMemoizedV8 = exports.createSelectorMemoized = exports.createSelector = void 0;
 var _reselect = require("reselect");
 var _warning = require("../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;
@@ -13,6 +25,8 @@ function checkIsAPIRef(value) {
 const DEFAULT_INSTANCE_ID = {
   id: 'default'
 };
+
+// TODO v8: Remove this function
 const createSelector = (a, b, c, d, e, f, ...other) => {
   if (other.length > 0) {
     throw new Error('Unsupported number of selectors');
@@ -77,7 +91,76 @@ const createSelector = (a, b, c, d, e, f, ...other) => {
   selector.acceptsApiRef = true;
   return selector;
 };
+
+// TODO v8: Rename this function to `createSelector`
 exports.createSelector = createSelector;
+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
+exports.createSelectorV8 = createSelectorV8;
 const createSelectorMemoized = (...args) => {
   const selector = (stateOrApiRef, instanceId) => {
     const isAPIRef = checkIsAPIRef(stateOrApiRef);
@@ -109,4 +192,38 @@ const createSelectorMemoized = (...args) => {
   selector.acceptsApiRef = true;
   return selector;
 };
-exports.createSelectorMemoized = createSelectorMemoized;
+
+// TODO v8: Rename this function to `createSelectorMemoized`
+exports.createSelectorMemoized = createSelectorMemoized;
+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') {
+        (0, _warning.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 = (0, _reselect.createSelector)(...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;
+  return selector;
+};
+exports.createSelectorMemoizedV8 = createSelectorMemoizedV8;

package/node/utils/keyboardUtils.js

@@ -3,21 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isNavigationKey = exports.isMultipleKey = exports.isKeyboardEvent = exports.isHideMenuKey = exports.isEscapeKey = exports.isCellExitEditModeKeys = exports.isCellEnterEditModeKeys = exports.isCellEditCommitKeys = exports.GRID_MULTIPLE_SELECTION_KEYS = exports.GRID_CELL_EXIT_EDIT_MODE_KEYS = exports.GRID_CELL_EDIT_COMMIT_KEYS = void 0;
+exports.isNavigationKey = exports.isMultipleKey = exports.isKeyboardEvent = exports.isHideMenuKey = exports.isCellExitEditModeKeys = exports.isCellEnterEditModeKeys = exports.isCellEditCommitKeys = exports.GRID_MULTIPLE_SELECTION_KEYS = exports.GRID_CELL_EXIT_EDIT_MODE_KEYS = exports.GRID_CELL_EDIT_COMMIT_KEYS = void 0;
 exports.isPasteShortcut = isPasteShortcut;
 exports.isPrintableKey = isPrintableKey;
-exports.isTabKey = void 0;
-/**
- * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
- */
-const isEscapeKey = key => key === 'Escape';
-
-/**
- * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
- */
-exports.isEscapeKey = isEscapeKey;
-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.
@@ -25,7 +13,6 @@ const isTabKey = key => key === 'Tab';
 // However, we also need to ignore shortcuts, for example: select all:
 // - Windows: Ctrl+A, event.ctrlKey is true
 // - macOS: ⌘ Command+A, event.metaKey is true
-exports.isTabKey = isTabKey;
 function isPrintableKey(event) {
   return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
 }
@@ -44,7 +31,7 @@ const isNavigationKey = key => key.indexOf('Arrow') === 0 || key.indexOf('Page')
 exports.isNavigationKey = isNavigationKey;
 const isKeyboardEvent = event => !!event.key;
 exports.isKeyboardEvent = isKeyboardEvent;
-const isHideMenuKey = key => isTabKey(key) || isEscapeKey(key);
+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.