@mui/x-data-grid 8.7.0 → 8.9.1

package/esm/components/containers/GridRootStyles.js

@@ -241,6 +241,12 @@ export const GridRootStyles = styled('div', {
     [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
   }, {
     [`& .${c.withBorderColor}`]: styles.withBorderColor
+  }, {
+    [`& .${c['row--dropAbove']}`]: styles['row--dropAbove']
+  }, {
+    [`& .${c['row--dropBelow']}`]: styles['row--dropBelow']
+  }, {
+    [`& .${c['row--beingDragged']}`]: styles['row--beingDragged']
   }]
 })(() => {
   const apiRef = useGridPrivateApiContext();
@@ -836,6 +842,8 @@ export const GridRootStyles = styled('div', {
       [`&.${c['scrollbarFiller--pinnedRight']}`]: {
         backgroundColor: vars.cell.background.pinned,
         position: 'sticky',
+        zIndex: 40,
+        // Should be above the column separator
         right: 0
       }
     },
@@ -860,6 +868,39 @@ export const GridRootStyles = styled('div', {
       [`& .${c['scrollbar--vertical']}, & .${c.pinnedRows}, & .${c.virtualScroller} > .${c.filler}`]: {
         display: 'none'
       }
+    },
+    [`& .${c['row--dropAbove']}`]: {
+      position: 'relative',
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '2px',
+        backgroundColor: vars.colors.interactive.selected
+      }
+    },
+    [`& .${c['row--dropBelow']}`]: {
+      position: 'relative',
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        bottom: '-2px',
+        left: 0,
+        width: '100%',
+        height: '2px',
+        backgroundColor: vars.colors.interactive.selected
+      },
+      [`&.${c['row--lastVisible']}`]: {
+        '&::before': {
+          bottom: 'calc(var(--DataGrid-hasScrollY) * 0px + (1 - var(--DataGrid-hasScrollY)) * -2px)'
+        }
+      }
+    },
+    [`& .${c['row--beingDragged']}`]: {
+      backgroundColor: vars.colors.background.overlay,
+      color: vars.colors.foreground.disabled
     }
   };
   return gridStyle;

package/esm/components/virtualization/GridVirtualScroller.js

@@ -97,6 +97,10 @@ function GridVirtualScroller(props) {
       scrollDirection: "left"
     }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
       scrollDirection: "right"
+    }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
+      scrollDirection: "up"
+    }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
+      scrollDirection: "down"
     }, getScrollAreaProps())), /*#__PURE__*/_jsxs(Scroller, _extends({
       className: classes.scroller
     }, getScrollerProps(), {

package/esm/constants/gridClasses.d.ts

@@ -577,6 +577,18 @@ export interface GridClasses {
    * Styles applied to the floating special row reorder cell element when it is dragged.
    */
   'row--dragging': string;
+  /**
+   * Styles applied to the row element when it is a drop target above.
+   */
+  'row--dropAbove': string;
+  /**
+   * Styles applied to the row element when it is a drop target below.
+   */
+  'row--dropBelow': string;
+  /**
+   * Styles applied to the row element when it is being dragged (entire row).
+   */
+  'row--beingDragged': string;
   /**
    * Styles applied to the first visible row element on every page of the grid.
    */
@@ -639,6 +651,14 @@ export interface GridClasses {
    * Styles applied to the right scroll area element.
    */
   'scrollArea--right': string;
+  /**
+   * Styles applied to the top scroll area element.
+   */
+  'scrollArea--up': string;
+  /**
+   * Styles applied to the bottom scroll area element.
+   */
+  'scrollArea--down': string;
   /**
    * Styles applied to the scrollbars.
    */

package/esm/constants/gridClasses.js

@@ -3,4 +3,6 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible',
+// TODO v9: Rename to `cell--dragging`
+'row--dragging', 'row--dropAbove', 'row--dropBelow', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);

package/esm/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -138,5 +138,10 @@ export interface GridPipeProcessingPrivateApi {
    * @param {GridPipeProcessorGroup} group The group to apply.
    */
   requestPipeProcessorsApplication: (group: GridPipeProcessorGroup) => void;
+  /**
+   * Checks of there are any processors that have been updated and runs appliers for them.
+   * It is intended to be called in a useEffect in the top-level data grid hook (`useDataGridComponent`).
+   */
+  runAppliersForPendingProcessors: () => void;
 }
 export {};

package/esm/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -49,7 +49,8 @@ export const useGridPipeProcessing = apiRef => {
       cache.current[group] = {
         processors: new Map(),
         processorsAsArray: [],
-        appliers: {}
+        appliers: {},
+        processorsUpdated: false
       };
     }
     const groupCache = cache.current[group];
@@ -57,19 +58,20 @@ export const useGridPipeProcessing = apiRef => {
     if (oldProcessor !== processor) {
       groupCache.processors.set(id, processor);
       groupCache.processorsAsArray = Array.from(cache.current[group].processors.values()).filter(processorValue => processorValue !== null);
-      runAppliers(groupCache);
+      groupCache.processorsUpdated = true;
     }
     return () => {
       cache.current[group].processors.set(id, null);
       cache.current[group].processorsAsArray = Array.from(cache.current[group].processors.values()).filter(processorValue => processorValue !== null);
     };
-  }, [runAppliers]);
+  }, []);
   const registerPipeApplier = React.useCallback((group, id, applier) => {
     if (!cache.current[group]) {
       cache.current[group] = {
         processors: new Map(),
         processorsAsArray: [],
-        appliers: {}
+        appliers: {},
+        processorsUpdated: false
       };
     }
     cache.current[group].appliers[id] = applier;
@@ -82,6 +84,18 @@ export const useGridPipeProcessing = apiRef => {
   const requestPipeProcessorsApplication = React.useCallback(group => {
     runAppliers(cache.current[group]);
   }, [runAppliers]);
+  const runAppliersForPendingProcessors = React.useCallback(() => {
+    for (const group in cache.current) {
+      if (!Object.prototype.hasOwnProperty.call(cache.current, group)) {
+        continue;
+      }
+      const groupCache = cache.current[group];
+      if (groupCache.processorsUpdated) {
+        groupCache.processorsUpdated = false;
+        runAppliers(groupCache);
+      }
+    }
+  }, [runAppliers]);
   const applyPipeProcessors = React.useCallback((...args) => {
     const [group, value, context] = args;
     if (!cache.current[group]) {
@@ -97,7 +111,8 @@ export const useGridPipeProcessing = apiRef => {
   const preProcessingPrivateApi = {
     registerPipeProcessor,
     registerPipeApplier,
-    requestPipeProcessorsApplication
+    requestPipeProcessorsApplication,
+    runAppliersForPendingProcessors
   };
   const preProcessingPublicApi = {
     unstable_applyPipeProcessors: applyPipeProcessors

package/esm/hooks/core/useGridProps.d.ts

@@ -1,8 +1,8 @@
 import type { RefObject } from '@mui/x-internals/types';
-import type { DataGridProps } from "../../models/props/DataGridProps.js";
+import type { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 import type { GridPrivateApiCommon } from "../../models/api/gridApiCommon.js";
 import type { GridStateInitializer } from "../utils/useGridInitializeState.js";
-type Props = Pick<DataGridProps, 'getRowId'>;
+type Props = Pick<DataGridProcessedProps, 'getRowId' | 'listView'>;
 export declare const propsStateInitializer: GridStateInitializer<Props>;
 export declare const useGridProps: <PrivateApi extends GridPrivateApiCommon>(apiRef: RefObject<PrivateApi>, props: Props) => void;
 export {};

package/esm/hooks/core/useGridProps.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 export const propsStateInitializer = (state, props) => {
   return _extends({}, state, {
     props: {
+      listView: props.listView,
       getRowId: props.getRowId
     }
   });
@@ -13,8 +14,9 @@ export const useGridProps = (apiRef, props) => {
   React.useEffect(() => {
     apiRef.current.setState(state => _extends({}, state, {
       props: {
+        listView: props.listView,
         getRowId: props.getRowId
       }
     }));
-  }, [apiRef, props.getRowId]);
+  }, [apiRef, props.listView, props.getRowId]);
 };

package/esm/hooks/features/columnGrouping/gridColumnGroupsInterfaces.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnGroup } from "../../../models/gridColumnGrouping.js";
+import { GridColumnGroup, GridColumnGroupingModel } from "../../../models/gridColumnGrouping.js";
 export type GridColumnGroupLookup = {
   [groupId: string]: Omit<GridColumnGroup, 'children'>;
 };
@@ -13,4 +13,7 @@ export interface GridColumnsGroupingState {
     [columnField: string]: GridColumnGroup['groupId'][];
   };
   maxDepth: number;
+}
+export interface GridColumnGroupingInternalCache {
+  lastColumnGroupingModel?: GridColumnGroupingModel;
 }

package/esm/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -1,4 +1,3 @@
-import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { isLeaf } from "../../../models/gridColumnGrouping.js";
 // This is the recurrence function that help writing `unwrapGroupingColumnModel()`
 const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplete) => {
@@ -37,45 +36,49 @@ export const unwrapGroupingColumnModel = columnGroupingModel => {
 export const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel, pinnedFields) => {
   const getParents = field => unwrappedGroupingModel[field] ?? [];
   const groupingHeaderStructure = [];
-  const maxDepth = Math.max(...orderedColumns.map(field => getParents(field).length));
-  const haveSameParents = (field1, field2, depth) => isDeepEqual(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
-  const haveDifferentContainers = (field1, field2) => {
-    if (pinnedFields?.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
-      return true;
-    }
-    if (pinnedFields?.right && !pinnedFields.right.includes(field1) && pinnedFields.right.includes(field2)) {
-      return true;
+  const maxDepth = Math.max(0, ...orderedColumns.map(field => getParents(field).length));
+  const haveSameParents = (field1, field2, depth) => {
+    const a = getParents(field1);
+    const b = getParents(field2);
+    for (let i = 0; i <= depth; i += 1) {
+      if (a[i] !== b[i]) {
+        return false;
+      }
     }
-    return false;
+    return true;
+  };
+  const haveDifferentContainers = (field1, field2) => {
+    const left = pinnedFields?.left;
+    const right = pinnedFields?.right;
+    const inLeft1 = !!left?.includes(field1);
+    const inLeft2 = !!left?.includes(field2);
+    const inRight1 = !!right?.includes(field1);
+    const inRight2 = !!right?.includes(field2);
+    return inLeft1 !== inLeft2 || inRight1 !== inRight2;
   };
   for (let depth = 0; depth < maxDepth; depth += 1) {
-    const depthStructure = orderedColumns.reduce((structure, newField) => {
-      const groupId = getParents(newField)[depth] ?? null;
-      if (structure.length === 0) {
-        return [{
-          columnFields: [newField],
+    const depthStructure = [];
+    for (let i = 0; i < orderedColumns.length; i += 1) {
+      const field = orderedColumns[i];
+      const groupId = getParents(field)[depth] ?? null;
+      if (depthStructure.length === 0) {
+        depthStructure.push({
+          columnFields: [field],
           groupId
-        }];
+        });
+        continue;
       }
-      const lastGroup = structure[structure.length - 1];
+      const lastGroup = depthStructure[depthStructure.length - 1];
       const prevField = lastGroup.columnFields[lastGroup.columnFields.length - 1];
-      const prevGroupId = lastGroup.groupId;
-      if (prevGroupId !== groupId || !haveSameParents(prevField, newField, depth) ||
-      // Fix for https://github.com/mui/mui-x/issues/7041
-      haveDifferentContainers(prevField, newField)) {
-        // It's a new group
-        return [...structure, {
-          columnFields: [newField],
+      if (lastGroup.groupId !== groupId || !haveSameParents(prevField, field, depth) || haveDifferentContainers(prevField, field)) {
+        depthStructure.push({
+          columnFields: [field],
           groupId
-        }];
+        });
+      } else {
+        lastGroup.columnFields.push(field);
       }
-
-      // It extends the previous group
-      return [...structure.slice(0, structure.length - 1), {
-        columnFields: [...lastGroup.columnFields, newField],
-        groupId
-      }];
-    }, []);
+    }
     groupingHeaderStructure.push(depthStructure);
   }
   return groupingHeaderStructure;

package/esm/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -11,10 +11,11 @@ import { getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from "./gri
 import { useGridEvent } from "../../utils/useGridEvent.js";
 import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from "../columns/index.js";
 const createGroupLookup = columnGroupingModel => {
-  let groupLookup = {};
-  columnGroupingModel.forEach(node => {
+  const groupLookup = {};
+  for (let i = 0; i < columnGroupingModel.length; i += 1) {
+    const node = columnGroupingModel[i];
     if (isLeaf(node)) {
-      return;
+      continue;
     }
     const {
         groupId,
@@ -24,10 +25,8 @@ const createGroupLookup = columnGroupingModel => {
     if (!groupId) {
       throw new Error('MUI X: An element of the columnGroupingModel does not have either `field` or `groupId`.');
     }
-    if (process.env.NODE_ENV !== 'production') {
-      if (!children) {
-        console.warn(`MUI X: group groupId=${groupId} has no children.`);
-      }
+    if (process.env.NODE_ENV !== 'production' && !children) {
+      console.warn(`MUI X: group groupId=${groupId} has no children.`);
     }
     const groupParam = _extends({}, other, {
       groupId
@@ -36,13 +35,15 @@ const createGroupLookup = columnGroupingModel => {
     if (subTreeLookup[groupId] !== undefined || groupLookup[groupId] !== undefined) {
       throw new Error(`MUI X: The groupId ${groupId} is used multiple times in the columnGroupingModel.`);
     }
-    groupLookup = _extends({}, groupLookup, subTreeLookup, {
-      [groupId]: groupParam
-    });
-  });
-  return _extends({}, groupLookup);
+    Object.assign(groupLookup, subTreeLookup);
+    groupLookup[groupId] = groupParam;
+  }
+  return groupLookup;
 };
 export const columnGroupsStateInitializer = (state, props, apiRef) => {
+  apiRef.current.caches.columnGrouping = {
+    lastColumnGroupingModel: props.columnGroupingModel
+  };
   if (!props.columnGroupingModel) {
     return state;
   }
@@ -97,6 +98,7 @@ export const useGridColumnGrouping = (apiRef, props) => {
     });
   }, [apiRef, props.columnGroupingModel]);
   const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
+    apiRef.current.caches.columnGrouping.lastColumnGroupingModel = columnGroupingModel;
     // @ts-expect-error Move this logic to `Pro` package
     const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};
     const columnFields = gridColumnFieldsSelector(apiRef);
@@ -128,6 +130,9 @@ export const useGridColumnGrouping = (apiRef, props) => {
    * EFFECTS
    */
   React.useEffect(() => {
+    if (props.columnGroupingModel === apiRef.current.caches.columnGrouping.lastColumnGroupingModel) {
+      return;
+    }
     updateColumnGroupingState(props.columnGroupingModel);
-  }, [updateColumnGroupingState, props.columnGroupingModel]);
+  }, [apiRef, updateColumnGroupingState, props.columnGroupingModel]);
 };

package/esm/hooks/features/columns/gridColumnsInterfaces.d.ts

@@ -1,4 +1,4 @@
-import { GridColDef, GridStateColDef } from "../../../models/colDef/gridColDef.js";
+import type { GridColDef, GridStateColDef } from "../../../models/colDef/gridColDef.js";
 import type { GridColumnDimensionProperties } from "./gridColumnsUtils.js";
 export declare enum GridPinnedColumnPosition {
   LEFT = "left",
@@ -21,8 +21,8 @@ export interface GridPinnedColumnFields {
   right?: string[];
 }
 export declare const EMPTY_PINNED_COLUMN_FIELDS: {
-  left: string[];
-  right: string[];
+  left: never[];
+  right: never[];
 };
 export interface GridPinnedColumns {
   left: GridStateColDef[];

package/esm/hooks/features/columns/gridColumnsSelector.js

@@ -1,6 +1,7 @@
 import { createSelector, createSelectorMemoized, createRootSelector } from "../../../utils/createSelector.js";
 import { EMPTY_PINNED_COLUMN_FIELDS } from "./gridColumnsInterfaces.js";
 import { gridIsRtlSelector } from "../../core/gridCoreSelector.js";
+import { gridListColumnSelector, gridListViewSelector } from "../listView/index.js";
 
 /**
  * Get the columns state
@@ -45,7 +46,7 @@ export const gridInitialColumnVisibilityModelSelector = createSelector(gridColum
  * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Visible Columns
  */
-export const gridVisibleColumnDefinitionsSelector = createSelectorMemoized(gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, (columns, columnVisibilityModel) => columns.filter(column => columnVisibilityModel[column.field] !== false));
+export const gridVisibleColumnDefinitionsSelector = createSelectorMemoized(gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, gridListViewSelector, gridListColumnSelector, (columns, columnVisibilityModel, listView, listColumn) => listView && listColumn ? [listColumn] : columns.filter(column => columnVisibilityModel[column.field] !== false));
 
 /**
  * Get the field of each visible column.
@@ -70,7 +71,10 @@ export const gridExistingPinnedColumnSelector = createSelectorMemoized(gridPinne
  * Get the visible pinned columns.
  * @category Visible Columns
  */
-export const gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, gridIsRtlSelector, (columnsState, model, visibleColumnFields, isRtl) => {
+export const gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, gridIsRtlSelector, gridListViewSelector, (columnsState, model, visibleColumnFields, isRtl, listView) => {
+  if (listView) {
+    return EMPTY_PINNED_COLUMN_FIELDS;
+  }
   const visiblePinnedFields = filterMissingColumns(model, visibleColumnFields, isRtl);
   const visiblePinnedColumns = {
     left: visiblePinnedFields.left.map(field => columnsState.lookup[field]),

package/esm/hooks/features/columns/gridColumnsUtils.js

@@ -242,11 +242,13 @@ export const createColumnsState = ({
       initialColumnVisibilityModel: updateInitialVisibilityModel ? columnVisibilityModel : currentState.initialColumnVisibilityModel
     };
   }
-  let columnsToKeep = {};
+  const columnsToKeep = {};
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
-    columnsToKeep = Object.keys(columnsState.lookup).reduce((acc, key) => _extends({}, acc, {
-      [key]: false
-    }), {});
+    for (const key in columnsState.lookup) {
+      if (Object.prototype.hasOwnProperty.call(columnsState.lookup, key)) {
+        columnsToKeep[key] = false;
+      }
+    }
   }
   const columnsToUpsertLookup = {};
   columnsToUpsert.forEach(newColumn => {

package/esm/hooks/features/columns/useGridColumns.js

@@ -14,6 +14,9 @@ import { GridPreferencePanelsValue } from "../preferencesPanel/index.js";
 import { gridPivotActiveSelector } from "../pivoting/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const columnsStateInitializer = (state, props, apiRef) => {
+  apiRef.current.caches.columns = {
+    lastColumnsProp: props.columns
+  };
   const columnsState = createColumnsState({
     apiRef,
     columnsToUpsert: props.columns,
@@ -36,7 +39,6 @@ export const columnsStateInitializer = (state, props, apiRef) => {
  */
 export function useGridColumns(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useGridColumns');
-  const previousColumnsProp = React.useRef(props.columns);
   apiRef.current.registerControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -299,27 +301,23 @@ export function useGridColumns(apiRef, props) {
    */
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridColumns`
   // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
-  const isFirstRender = React.useRef(true);
   React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
+    if (apiRef.current.caches.columns.lastColumnsProp === props.columns) {
       return;
     }
+    apiRef.current.caches.columns.lastColumnsProp = props.columns;
     logger.info(`GridColumns have changed, new length ${props.columns.length}`);
-    if (previousColumnsProp.current === props.columns) {
-      return;
-    }
     const columnsState = createColumnsState({
       apiRef,
       initialState: undefined,
       // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
       columnsToUpsert: props.columns,
       keepOnlyColumnsToUpsert: true,
-      updateInitialVisibilityModel: true
+      updateInitialVisibilityModel: true,
+      columnVisibilityModel: props.columnVisibilityModel
     });
-    previousColumnsProp.current = props.columns;
     setGridColumnsState(columnsState);
-  }, [logger, apiRef, setGridColumnsState, props.columns]);
+  }, [logger, apiRef, setGridColumnsState, props.columns, props.columnVisibilityModel]);
   React.useEffect(() => {
     if (props.columnVisibilityModel !== undefined) {
       apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);

package/esm/hooks/features/dataSource/useGridDataSourceBase.d.ts

@@ -6,7 +6,7 @@ import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommuni
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import type { GridStrategyProcessor } from "../../core/strategyProcessing/index.js";
 import type { GridEventListener } from "../../../models/events/index.js";
-export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "onDataSourceError" | "pageSizeOptions" | "signature">, options?: GridDataSourceBaseOptions) => {
+export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity>(apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, "dataSource" | "dataSourceCache" | "onDataSourceError" | "pageSizeOptions" | "pagination" | "signature">, options?: GridDataSourceBaseOptions) => {
   api: {
     public: GridDataSourceApi;
   };

package/esm/hooks/features/dataSource/useGridDataSourceBase.js

@@ -35,6 +35,9 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
   const lastRequestId = React.useRef(0);
   const onDataSourceErrorProp = props.onDataSourceError;
   const cacheChunkManager = useLazyRef(() => {
+    if (!props.pagination) {
+      return new CacheChunkManager(paginationModel.pageSize);
+    }
     const sortedPageSizeOptions = props.pageSizeOptions.map(option => typeof option === 'number' ? option : option.value).sort((a, b) => a - b);
     const cacheChunkSize = Math.min(paginationModel.pageSize, sortedPageSizeOptions[0]);
     return new CacheChunkManager(cacheChunkSize);

package/esm/hooks/features/dataSource/utils.js

@@ -37,6 +37,9 @@ export class CacheChunkManager {
     };
     this.splitResponse = (key, response) => {
       const cacheKeys = this.getCacheKeys(key);
+      if (cacheKeys.length === 1) {
+        return new Map([[key, response]]);
+      }
       const responses = new Map();
       cacheKeys.forEach(chunkKey => {
         const isLastChunk = chunkKey.end === key.end;

package/esm/hooks/features/export/utils.js

@@ -17,7 +17,7 @@ export const getColumnsToExport = ({
     }, []);
   }
   const validColumns = options.allColumns ? columns : gridVisibleColumnDefinitionsSelector(apiRef);
-  return validColumns.filter(column => !column.disableExport);
+  return validColumns.filter(column => column.disableExport !== true);
 };
 export const defaultGetRowsToExport = ({
   apiRef

package/esm/hooks/features/filter/useGridFilter.js

@@ -342,9 +342,9 @@ export const useGridFilter = (apiRef, props) => {
   useGridEvent(apiRef, 'rowExpansionChange', updateVisibleRowsLookupState);
   useGridEvent(apiRef, 'columnVisibilityModelChange', () => {
     const filterModel = gridFilterModelSelector(apiRef);
-    if (filterModel.quickFilterValues && shouldQuickFilterExcludeHiddenColumns(filterModel)) {
+    if (filterModel.quickFilterValues?.length && shouldQuickFilterExcludeHiddenColumns(filterModel)) {
       // re-apply filters because the quick filter results may have changed
-      apiRef.current.unstable_applyFilters();
+      updateFilteredRows();
     }
   });
 
@@ -352,7 +352,7 @@ export const useGridFilter = (apiRef, props) => {
    * 1ST RENDER
    */
   useFirstRender(() => {
-    apiRef.current.unstable_applyFilters();
+    updateFilteredRows();
   });
 
   /**

package/esm/hooks/features/keyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -10,4 +10,4 @@ import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
  * @requires useGridScroll (method) - can be after
  * @requires useGridColumnSpanning (method) - can be after
  */
-export declare const useGridKeyboardNavigation: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "signature" | "headerFilters" | "listView">) => void;
+export declare const useGridKeyboardNavigation: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "signature" | "headerFilters">) => void;