@mui/x-data-grid 8.0.0-alpha.3 → 8.0.0-alpha.4

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

@@ -6,6 +6,7 @@ import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSele
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRenderContextSelector } from "../virtualization/gridVirtualizationSelectors.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
+import { gridRowTreeSelector } from "./gridRowsSelector.js";
 import { getUnprocessedRange, isRowRangeUpdated, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
 import { GRID_CHECKBOX_SELECTION_FIELD } from "../../../colDef/gridCheckboxSelectionColDef.js";
 const EMPTY_STATE = {
@@ -35,7 +36,7 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
     if (skippedFields.has(colDef.field)) {
       return;
     }
-    for (let index = rangeToProcess.firstRowIndex; index <= rangeToProcess.lastRowIndex; index += 1) {
+    for (let index = rangeToProcess.firstRowIndex; index < rangeToProcess.lastRowIndex; index += 1) {
       const row = visibleRows[index];
       if (hiddenCells[row.id]?.[colDef.field]) {
         continue;
@@ -129,7 +130,7 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
  * @requires filterStateInitializer (method) - should be initialized before
  */
 export const rowSpanningStateInitializer = (state, props, apiRef) => {
-  if (props.unstable_rowSpanning) {
+  if (props.rowSpanning) {
     const rowIds = state.rows.dataRowIds || [];
     const orderedFields = state.columns.orderedFields || [];
     const dataRowIdToModelLookup = state.rows.dataRowIdToModelLookup;
@@ -142,7 +143,7 @@ export const rowSpanningStateInitializer = (state, props, apiRef) => {
     }
     const rangeToProcess = {
       firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS - 1, Math.max(rowIds.length - 1, 0))
+      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(rowIds.length, 0))
     };
     const rows = rowIds.map(id => ({
       id,
@@ -173,10 +174,11 @@ export const useGridRowSpanning = (apiRef, props) => {
   } = useGridVisibleRows(apiRef, props);
   const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const colDefs = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const tree = useGridSelector(apiRef, gridRowTreeSelector);
   const processedRange = useLazyRef(() => {
     return Object.keys(apiRef.current.state.rowSpanning.spannedCells).length > 0 ? {
       firstRowIndex: 0,
-      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS - 1, Math.max(apiRef.current.state.rows.dataRowIds.length - 1, 0))
+      lastRowIndex: Math.min(DEFAULT_ROWS_TO_PROCESS, Math.max(apiRef.current.state.rows.dataRowIds.length, 0))
     } : EMPTY_RANGE;
   });
   const lastRange = React.useRef(EMPTY_RANGE);
@@ -188,7 +190,7 @@ export const useGridRowSpanning = (apiRef, props) => {
   // - The `paginationModel` is updated
   // - The rows are updated
   (resetState = true) => {
-    if (!props.unstable_rowSpanning) {
+    if (!props.rowSpanning) {
       if (apiRef.current.state.rowSpanning !== EMPTY_STATE) {
         apiRef.current.setState(state => _extends({}, state, {
           rowSpanning: EMPTY_STATE
@@ -204,7 +206,7 @@ export const useGridRowSpanning = (apiRef, props) => {
     }
     const rangeToProcess = getUnprocessedRange({
       firstRowIndex: renderContext.firstRowIndex,
-      lastRowIndex: Math.min(renderContext.lastRowIndex - 1, range.lastRowIndex)
+      lastRowIndex: Math.min(renderContext.lastRowIndex, range.lastRowIndex + 1)
     }, processedRange.current);
     if (rangeToProcess === null) {
       return;
@@ -233,15 +235,21 @@ export const useGridRowSpanning = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, props.unstable_rowSpanning, range, renderContext, visibleRows, colDefs, processedRange]);
+  }, [apiRef, props.rowSpanning, range, renderContext, visibleRows, colDefs, processedRange]);
   const prevRenderContext = React.useRef(renderContext);
   const isFirstRender = React.useRef(true);
   const shouldResetState = React.useRef(false);
+  const previousTree = React.useRef(tree);
   React.useEffect(() => {
     const firstRender = isFirstRender.current;
     if (isFirstRender.current) {
       isFirstRender.current = false;
     }
+    if (tree !== previousTree.current) {
+      previousTree.current = tree;
+      updateRowSpanningState(true);
+      return;
+    }
     if (range && lastRange.current && isRowRangeUpdated(range, lastRange.current)) {
       lastRange.current = range;
       shouldResetState.current = true;
@@ -255,5 +263,5 @@ export const useGridRowSpanning = (apiRef, props) => {
       return;
     }
     updateRowSpanningState();
-  }, [updateRowSpanningState, renderContext, range, lastRange]);
+  }, [updateRowSpanningState, renderContext, range, lastRange, tree]);
 };

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

@@ -239,7 +239,7 @@ export const useGridRows = (apiRef, props) => {
       throw new Error(`MUI X: The row reordering do not support reordering of footer or grouping rows.`);
     }
     apiRef.current.setState(state => {
-      const group = gridRowTreeSelector(state, apiRef.current.instanceId)[GRID_ROOT_GROUP_ID];
+      const group = gridRowTreeSelector(state, undefined, apiRef.current.instanceId)[GRID_ROOT_GROUP_ID];
       const allRows = group.children;
       const oldIndex = allRows.findIndex(row => row === rowId);
       if (oldIndex === -1 || oldIndex === targetIndex) {
@@ -392,10 +392,10 @@ export const useGridRows = (apiRef, props) => {
   const applyHydrateRowsProcessor = React.useCallback(() => {
     apiRef.current.setState(state => {
       const response = apiRef.current.unstable_applyPipeProcessors('hydrateRows', {
-        tree: gridRowTreeSelector(state, apiRef.current.instanceId),
-        treeDepths: gridRowTreeDepthsSelector(state, apiRef.current.instanceId),
-        dataRowIds: gridDataRowIdsSelector(state, apiRef.current.instanceId),
-        dataRowIdToModelLookup: gridRowsLookupSelector(state, apiRef.current.instanceId)
+        tree: gridRowTreeSelector(state, undefined, apiRef.current.instanceId),
+        treeDepths: gridRowTreeDepthsSelector(state, undefined, apiRef.current.instanceId),
+        dataRowIds: gridDataRowIdsSelector(state, undefined, apiRef.current.instanceId),
+        dataRowIdToModelLookup: gridRowsLookupSelector(state, undefined, apiRef.current.instanceId)
       });
       return _extends({}, state, {
         rows: _extends({}, state.rows, response, {

package/modern/hooks/features/sorting/gridSortingSelector.js

@@ -55,4 +55,15 @@ export const gridSortColumnLookupSelector = createSelectorMemoized(gridSortModel
     return res;
   }, {});
   return result;
+});
+
+/**
+ * @category Sorting
+ * @ignore - do not document.
+ */
+export const gridSortedRowIndexLookupSelector = createSelectorMemoized(gridSortedRowIdsSelector, sortedIds => {
+  return sortedIds.reduce((acc, id, index) => {
+    acc[id] = index;
+    return acc;
+  }, Object.create(null));
 });

package/modern/hooks/features/sorting/index.js

@@ -1,2 +1,2 @@
-export * from "./gridSortingSelector.js";
+export { gridSortedRowIdsSelector, gridSortedRowEntriesSelector, gridSortModelSelector, gridSortColumnLookupSelector } from "./gridSortingSelector.js";
 export { gridDateComparator, gridNumberComparator, gridStringOrNumberComparator } from "./gridSortingUtils.js";

package/modern/hooks/features/sorting/useGridSorting.js

@@ -88,7 +88,7 @@ export const useGridSorting = (apiRef, props) => {
           })
         });
       }
-      const sortModel = gridSortModelSelector(state, apiRef.current.instanceId);
+      const sortModel = gridSortModelSelector(state, undefined, apiRef.current.instanceId);
       const sortRowList = buildAggregatedSortingApplier(sortModel, apiRef);
       const sortedRows = apiRef.current.applyStrategyProcessor('sorting', {
         sortRowList

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

@@ -92,10 +92,7 @@ export const useGridVirtualScroller = () => {
       return undefined;
     }
     const initialRect = node.getBoundingClientRect();
-    let lastSize = {
-      width: initialRect.width,
-      height: initialRect.height
-    };
+    let lastSize = roundDimensions(initialRect);
     apiRef.current.publishEvent('resize', lastSize);
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
@@ -105,10 +102,7 @@ export const useGridVirtualScroller = () => {
       if (!entry) {
         return;
       }
-      const newSize = {
-        width: entry.contentRect.width,
-        height: entry.contentRect.height
-      };
+      const newSize = roundDimensions(entry.contentRect);
       if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
         return;
       }
@@ -784,4 +778,13 @@ function bufferForDirection(isRtl, direction, rowBufferPx, columnBufferPx, verti
       // eslint unable to figure out enum exhaustiveness
       throw new Error('unreachable');
   }
+}
+
+// Round to avoid issues with subpixel rendering
+// https://github.com/mui/mui-x/issues/15721
+function roundDimensions(dimensions) {
+  return {
+    width: Math.round(dimensions.width * 10) / 10,
+    height: Math.round(dimensions.height * 10) / 10
+  };
 }

package/modern/hooks/utils/useGridSelector.js

@@ -6,20 +6,11 @@ import { useOnMount } from "./useOnMount.js";
 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) {
+function applySelector(apiRef, selector, args, instanceId) {
   if (isOutputSelector(selector)) {
     return selector(apiRef, args);
   }
-  return selector(apiRef.current.state, instanceId);
+  return selector(apiRef.current.state, args, instanceId);
 }
 const defaultCompare = Object.is;
 export const objectShallowCompare = fastObjectShallowCompare;
@@ -44,36 +35,7 @@ const createRefs = () => ({
   selector: null,
   args: null
 });
-
-// TODO v8: Remove this function
-export const useGridSelector = (apiRef, selector, 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 : applySelector(apiRef, selector));
-  refs.current.state = state;
-  refs.current.equals = equals;
-  refs.current.selector = selector;
-  useOnMount(() => {
-    return apiRef.current.store.subscribe(() => {
-      const newState = applySelector(apiRef, refs.current.selector);
-      if (!refs.current.equals(refs.current.state, newState)) {
-        refs.current.state = newState;
-        setState(newState);
-      }
-    });
-  });
-  return state;
-};
-
-// TODO v8: Rename this function to `useGridSelector`
-export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultCompare) => {
+export const useGridSelector = (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.']);
@@ -83,14 +45,14 @@ export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = d
   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));
+  didInit ? null : applySelector(apiRef, selector, args, apiRef.current.instanceId));
   refs.current.state = state;
   refs.current.equals = equals;
   refs.current.selector = selector;
   const prevArgs = refs.current.args;
   refs.current.args = args;
   if (didInit && !argsEqual(prevArgs, args)) {
-    const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
+    const newState = applySelector(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
     if (!refs.current.equals(refs.current.state, newState)) {
       refs.current.state = newState;
       setState(newState);
@@ -98,7 +60,7 @@ export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = d
   }
   useOnMount(() => {
     return apiRef.current.store.subscribe(() => {
-      const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
+      const newState = applySelector(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-alpha.3
+ * @mui/x-data-grid v8.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/index.js

@@ -47,6 +47,7 @@ export { calculatePinnedRowsHeight } from "../hooks/features/rows/gridRowsUtils.
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
 export { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
 export { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
+export { gridSortedRowIndexLookupSelector } from "../hooks/features/sorting/gridSortingSelector.js";
 export { useGridScroll } from "../hooks/features/scroll/useGridScroll.js";
 export { useGridEvents } from "../hooks/features/events/useGridEvents.js";
 export { dimensionsStateInitializer, useGridDimensions } from "../hooks/features/dimensions/useGridDimensions.js";
@@ -61,8 +62,7 @@ export { useGridVisibleRows, getVisibleRows } from "../hooks/utils/useGridVisibl
 export { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";
 export { getColumnsToExport, defaultGetRowsToExport } from "../hooks/features/export/utils.js";
 export * from "../utils/createControllablePromise.js";
-export { createSelector, createSelectorV8, createSelectorMemoized, createSelectorMemoizedV8 } from "../utils/createSelector.js";
-export { useGridSelectorV8 } from "../hooks/utils/useGridSelector.js";
+export { createSelector, createSelectorMemoized } from "../utils/createSelector.js";
 export { gridRowGroupsToFetchSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from "../utils/domUtils.js";
 export { isNavigationKey, isPasteShortcut, isCopyShortcut } from "../utils/keyboardUtils.js";

package/modern/locales/roRO.js

@@ -24,16 +24,15 @@ const roROGrid = {
   toolbarQuickFilterLabel: 'Căutare',
   toolbarQuickFilterDeleteIconLabel: 'Ștergere',
   // Prompt toolbar field
-  // toolbarPromptControlPlaceholder: 'Type a prompt…',
-  // toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
-  // toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
-  // toolbarPromptControlLabel: 'Prompt input',
-  // toolbarPromptControlRecordButtonDefaultLabel: 'Record',
-  // toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
-  // toolbarPromptControlSendActionLabel: 'Send',
-  // toolbarPromptControlSendActionAriaLabel: 'Send prompt',
-  // toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
-
+  toolbarPromptControlPlaceholder: 'Scrie un prompt…',
+  toolbarPromptControlWithRecordingPlaceholder: 'Scrie sau înregistrează un prompt…',
+  toolbarPromptControlRecordingPlaceholder: 'Ascultare prompt…',
+  toolbarPromptControlLabel: 'Introducere prompt',
+  toolbarPromptControlRecordButtonDefaultLabel: 'Înregistrează',
+  toolbarPromptControlRecordButtonActiveLabel: 'Oprește înregistrare',
+  toolbarPromptControlSendActionLabel: 'Trimite',
+  toolbarPromptControlSendActionAriaLabel: 'Trimite prompt',
+  toolbarPromptControlErrorMessage: 'A apărut o eroare la procesare. Încercați din nou cu un alt prompt.',
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',
@@ -41,12 +40,11 @@ const roROGrid = {
   toolbarExportPrint: 'Printare',
   toolbarExportExcel: 'Download în format Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: 'Caută',
+  columnsManagementNoColumns: 'Nicio coloană',
+  columnsManagementShowHideAllText: 'Arată/Ascunde tot',
+  columnsManagementReset: 'Resetează',
+  columnsManagementDeleteIconLabel: 'Șterge',
   // Filter panel text
   filterPanelAddFilter: 'Adăugare filtru',
   filterPanelRemoveAll: 'Șterge tot',
@@ -60,9 +58,9 @@ const roROGrid = {
   filterPanelInputPlaceholder: 'Filtrare valoare',
   // Filter operators text
   filterOperatorContains: 'conține',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'nu conține',
   filterOperatorEquals: 'este egal cu',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'nu este egal cu',
   filterOperatorStartsWith: 'începe cu',
   filterOperatorEndsWith: 'se termină cu',
   filterOperatorIs: 'este',
@@ -82,9 +80,9 @@ const roROGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Conține',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Nu conține',
   headerFilterOperatorEquals: 'Egal cu',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Nu este egal cu',
   headerFilterOperatorStartsWith: 'Începe cu',
   headerFilterOperatorEndsWith: 'Se termină cu',
   headerFilterOperatorIs: 'Este',

package/modern/utils/createSelector.js

@@ -8,19 +8,6 @@ const reselectCreateSelector = createSelectorCreator({
     equalityCheck: Object.is
   }
 });
-
-// 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;
@@ -28,83 +15,12 @@ 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');
   }
   let selector;
 
-  // eslint-disable-next-line id-denylist
-  if (a && b && c && d && e && f) {
-    selector = (stateOrApiRef, 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, instanceId);
-      const vb = b(state, instanceId);
-      const vc = c(state, instanceId);
-      const vd = d(state, instanceId);
-      const ve = e(state, instanceId);
-      return f(va, vb, vc, vd, ve);
-    };
-    // eslint-disable-next-line id-denylist
-  } else if (a && b && c && d && e) {
-    selector = (stateOrApiRef, 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, instanceId);
-      const vb = b(state, instanceId);
-      const vc = c(state, instanceId);
-      const vd = d(state, instanceId);
-      return e(va, vb, vc, vd);
-    };
-  } else if (a && b && c && d) {
-    selector = (stateOrApiRef, 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, instanceId);
-      const vb = b(state, instanceId);
-      const vc = c(state, instanceId);
-      return d(va, vb, vc);
-    };
-  } else if (a && b && c) {
-    selector = (stateOrApiRef, 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, instanceId);
-      const vb = b(state, instanceId);
-      return c(va, vb);
-    };
-  } else if (a && b) {
-    selector = (stateOrApiRef, 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, instanceId);
-      return b(va);
-    };
-  } 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: 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;
-
   // eslint-disable-next-line id-denylist
   if (a && b && c && d && e && f) {
     selector = (stateOrApiRef, args, instanceIdParam) => {
@@ -166,49 +82,14 @@ export const createSelectorV8 = (a, b, c, d, e, f, ...other) => {
   selector.acceptsApiRef = true;
   return selector;
 };
-
-// TODO v8: Remove this function
 export const createSelectorMemoized = (...args) => {
-  const selector = (stateOrApiRef, 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, cacheKey);
-    }
-    const fn = reselectCreateSelector(...args);
-    if (!cacheArgsInit) {
-      cache.set(cacheKey, cacheArgs);
-    }
-    cacheArgs.set(args, fn);
-    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)`.']);
+        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, args, apiRef.current.instanceId)`.']);
       }
     }
     const cacheArgsInit = cache.get(cacheKey);

package/node/DataGrid/DataGrid.js

@@ -708,6 +708,11 @@ DataGridRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: _propTypes.default.oneOf(['border', 'margin']),
+  /**
+   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
+   * @default false
+   */
+  rowSpanning: _propTypes.default.bool,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */
@@ -753,11 +758,6 @@ DataGridRaw.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  /**
-   * If `true`, the Data Grid will auto span the cells over the rows having the same value.
-   * @default false
-   */
-  unstable_rowSpanning: _propTypes.default.bool,
   /**
    * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
    * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.

package/node/components/GridRow.js

@@ -152,7 +152,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     disableColumnReorder
   } = rootProps;
   const rowReordering = rootProps.rowReordering;
-  const heightEntry = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _extends2.default)({}, apiRef.current.getRowHeightEntry(rowId)), _useGridSelector.objectShallowCompare);
+  const heightEntry = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _extends2.default)({}, apiRef.current.getRowHeightEntry(rowId)), undefined, _useGridSelector.objectShallowCompare);
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {

package/node/components/cell/GridActionsCell.js

@@ -98,6 +98,13 @@ function GridActionsCell(props) {
   const hideMenu = () => {
     setOpen(false);
   };
+  const toggleMenu = () => {
+    if (open) {
+      hideMenu();
+    } else {
+      showMenu();
+    }
+  };
   const handleTouchRippleRef = index => instance => {
     touchRippleRefs.current[index] = instance;
   };
@@ -168,7 +175,7 @@ function GridActionsCell(props) {
       "aria-controls": open ? menuId : undefined,
       role: "menuitem",
       size: "small",
-      onClick: showMenu,
+      onClick: toggleMenu,
       touchRippleRef: handleTouchRippleRef(buttonId),
       tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
     }, rootProps.slotProps?.baseIconButton, {

package/node/components/cell/GridCell.js

@@ -128,7 +128,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     const result = apiRef.current.getCellParams(rowId, field);
     result.api = apiRef.current;
     return result;
-  }, _useGridSelector.objectShallowCompare);
+  }, undefined, _useGridSelector.objectShallowCompare);
   const isSelected = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
     field

package/node/components/panel/GridColumnsPanel.js

@@ -10,13 +10,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _GridPanelWrapper = require("./GridPanelWrapper");
-var _columnsManagement = require("../columnsManagement");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridColumnsPanel(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, props, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnsManagement.GridColumnsManagement, (0, _extends2.default)({}, rootProps.slotProps?.columnsManagement))
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnsManagement, (0, _extends2.default)({}, rootProps.slotProps?.columnsManagement))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {

package/node/components/panel/GridPanelContent.js

@@ -30,13 +30,17 @@ const GridPanelContentRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PanelContent',
   overridesResolver: (props, styles) => styles.panelContent
-})({
+})(({
+  theme
+}) => ({
   display: 'flex',
   flexDirection: 'column',
   overflow: 'auto',
   flex: '1 1',
-  maxHeight: 400
-});
+  maxHeight: 400,
+  padding: theme.spacing(2.5, 1.5, 2, 1),
+  gap: theme.spacing(2.5)
+}));
 function GridPanelContent(props) {
   const {
       className