@mui/x-data-grid 8.7.0 → 8.9.1

package/esm/locales/idID.js

@@ -0,0 +1,261 @@
+import { getGridLocalization } from "../utils/getGridLocalization.js";
+export const idIDGrid = {
+  // Root
+  noRowsLabel: 'Tidak ad abaris',
+  noResultsOverlayLabel: 'Tidak ada hasil yang ditemukan.',
+  noColumnsOverlayLabel: 'Tidak ada kolom',
+  noColumnsOverlayManageColumns: 'Kelola columns',
+  emptyPivotOverlayLabel: 'Tambahkan bidang ke baris, kolom, dan nilai untuk membuat tabel pivot',
+  // Density selector toolbar button text
+  toolbarDensity: 'Kepadatan',
+  toolbarDensityLabel: 'Kepadatan',
+  toolbarDensityCompact: 'Ringkas',
+  toolbarDensityStandard: 'Standar',
+  toolbarDensityComfortable: 'Nyaman',
+  // Columns selector toolbar button text
+  toolbarColumns: 'Kolom',
+  toolbarColumnsLabel: 'Pilih kolom',
+  // Filters toolbar button text
+  toolbarFilters: 'Filter',
+  toolbarFiltersLabel: 'Tampilkan filter',
+  toolbarFiltersTooltipHide: 'Sembunyikan filter',
+  toolbarFiltersTooltipShow: 'Tampilkan filter',
+  toolbarFiltersTooltipActive: count => `${count} filter aktif`,
+  // Quick filter toolbar field
+  toolbarQuickFilterPlaceholder: 'Cari…',
+  toolbarQuickFilterLabel: 'Cari',
+  toolbarQuickFilterDeleteIconLabel: 'Hapus',
+  // Export selector toolbar button text
+  toolbarExport: 'Ekspor',
+  toolbarExportLabel: 'Ekspor',
+  toolbarExportCSV: 'Unduh sebagai CSV',
+  toolbarExportPrint: 'Cetak',
+  toolbarExportExcel: 'Unduh sebagai Excel',
+  // Toolbar pivot button
+  toolbarPivot: 'Pivot',
+  // Toolbar AI Assistant button
+  toolbarAssistant: 'Asisten AI',
+  // Columns management text
+  columnsManagementSearchTitle: 'Cari',
+  columnsManagementNoColumns: 'Tidak ada kolom',
+  columnsManagementShowHideAllText: 'Tampilkan/Sembunyikan Semua',
+  columnsManagementReset: 'Atur ulang',
+  columnsManagementDeleteIconLabel: 'Hapus',
+  // Filter panel text
+  filterPanelAddFilter: 'Tambahkan filter',
+  filterPanelRemoveAll: 'Hapus semua',
+  filterPanelDeleteIconLabel: 'Hapus',
+  filterPanelLogicOperator: 'Operator logika',
+  filterPanelOperator: 'Operator',
+  filterPanelOperatorAnd: 'Dan',
+  filterPanelOperatorOr: 'Atau',
+  filterPanelColumns: 'Kolom',
+  filterPanelInputLabel: 'Nilai',
+  filterPanelInputPlaceholder: 'Nilai filter',
+  // Filter operators text
+  filterOperatorContains: 'berisi',
+  filterOperatorDoesNotContain: 'tidak berisi',
+  filterOperatorEquals: 'sama dengan',
+  filterOperatorDoesNotEqual: 'tidak sama dengan',
+  filterOperatorStartsWith: 'diawali dengan',
+  filterOperatorEndsWith: 'diakhiri dengan',
+  filterOperatorIs: 'adalah',
+  filterOperatorNot: 'bukan',
+  filterOperatorAfter: 'setelah',
+  filterOperatorOnOrAfter: 'pada atau setelah',
+  filterOperatorBefore: 'sebelum',
+  filterOperatorOnOrBefore: 'pada atau sebelum',
+  filterOperatorIsEmpty: 'kosong',
+  filterOperatorIsNotEmpty: 'tidak kosong',
+  filterOperatorIsAnyOf: 'salah satu dari',
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
+  // Header filter operators text
+  headerFilterOperatorContains: 'Mengandung',
+  headerFilterOperatorDoesNotContain: 'Tidak mengandung',
+  headerFilterOperatorEquals: 'Sama dengan',
+  headerFilterOperatorDoesNotEqual: 'Tidak sama dengan',
+  headerFilterOperatorStartsWith: 'Diawali dengan',
+  headerFilterOperatorEndsWith: 'Diakhiri dengan',
+  headerFilterOperatorIs: 'Adalah',
+  headerFilterOperatorNot: 'Bukan',
+  headerFilterOperatorAfter: 'Setelah',
+  headerFilterOperatorOnOrAfter: 'Pada atau setelah',
+  headerFilterOperatorBefore: 'Sebelum',
+  headerFilterOperatorOnOrBefore: 'Pada atau sebelum',
+  headerFilterOperatorIsEmpty: 'Kosong',
+  headerFilterOperatorIsNotEmpty: 'Tidak kosong',
+  headerFilterOperatorIsAnyOf: 'Salah satu dari',
+  'headerFilterOperator=': 'Sama dengan',
+  'headerFilterOperator!=': 'Tidak sama dengan',
+  'headerFilterOperator>': 'Lebih dari',
+  'headerFilterOperator>=': 'Lebih dari atau sama dengan',
+  'headerFilterOperator<': 'Kurang dari',
+  'headerFilterOperator<=': 'Kurang dari atau sama dengan',
+  headerFilterClear: 'Hapus filter',
+  // Filter values text
+  filterValueAny: 'apa saja',
+  filterValueTrue: 'benar',
+  filterValueFalse: 'salah',
+  // Column menu text
+  columnMenuLabel: 'Menu',
+  columnMenuAriaLabel: columnName => `Menu kolom ${columnName}`,
+  columnMenuShowColumns: 'Tampilkan kolom',
+  columnMenuManageColumns: 'Kelola kolom',
+  columnMenuFilter: 'Filter',
+  columnMenuHideColumn: 'Sembunyikan kolom',
+  columnMenuUnsort: 'Batalkan urutan',
+  columnMenuSortAsc: 'Urutkan menaik',
+  columnMenuSortDesc: 'Urutkan menurun',
+  columnMenuManagePivot: 'Kelola pivot',
+  // Column header text
+  columnHeaderFiltersTooltipActive: count => `${count} filter aktif`,
+  columnHeaderFiltersLabel: 'Tampilkan filter',
+  columnHeaderSortIconLabel: 'Urutkan',
+  // Rows selected footer text
+  footerRowSelected: count => `${count.toLocaleString()} baris dipilih`,
+  // Total row amount footer text
+  footerTotalRows: 'Total Baris:',
+  // Total visible row amount footer text
+  footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} dari ${totalCount.toLocaleString()}`,
+  // Checkbox selection text
+  checkboxSelectionHeaderName: 'Pilihan kotak centang',
+  checkboxSelectionSelectAllRows: 'Pilih semua baris',
+  checkboxSelectionUnselectAllRows: 'Batal pilih semua baris',
+  checkboxSelectionSelectRow: 'Pilih baris',
+  checkboxSelectionUnselectRow: 'Batal pilih baris',
+  // Boolean cell text
+  booleanCellTrueLabel: 'ya',
+  booleanCellFalseLabel: 'tidak',
+  // Actions cell more text
+  actionsCellMore: 'lainnya',
+  // Column pinning text
+  pinToLeft: 'Sematkan ke kiri',
+  pinToRight: 'Sematkan ke kanan',
+  unpin: 'Lepas sematan',
+  // Tree Data
+  treeDataGroupingHeaderName: 'Kelompok',
+  treeDataExpand: 'lihat turunan',
+  treeDataCollapse: 'sembunyikan turunan',
+  // Grouping columns
+  groupingColumnHeaderName: 'Kelompok',
+  groupColumn: name => `Kelompokkan berdasarkan ${name}`,
+  unGroupColumn: name => `Hentikan pengelompokan berdasarkan ${name}`,
+  // Master/detail
+  detailPanelToggle: 'Pengalih panel detail',
+  expandDetailPanel: 'Perluas',
+  collapseDetailPanel: 'Ciutkan',
+  // Pagination
+  paginationRowsPerPage: 'Baris per halaman:',
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `${from}–${to} dari ${count !== -1 ? count : `lebih dari ${to}`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `sekitar ${estimated}` : `lebih dari ${to}`;
+    return `${from}–${to} dari ${count !== -1 ? count : estimatedLabel}`;
+  },
+  paginationItemAriaLabel: type => {
+    if (type === 'first') {
+      return 'Pergi ke halaman pertama';
+    }
+    if (type === 'last') {
+      return 'Pergi ke halaman terakhir';
+    }
+    if (type === 'next') {
+      return 'Pergi ke halaman berikutnya';
+    }
+    // if (type === 'previous') {
+    return 'Pergi ke halaman sebelumnya';
+  },
+  // Row reordering text
+  rowReorderingHeaderName: 'Pengurutan ulang baris',
+  // Aggregation
+  aggregationMenuItemHeader: 'Agregasi',
+  aggregationFunctionLabelSum: 'jumlah',
+  aggregationFunctionLabelAvg: 'rata-rata',
+  aggregationFunctionLabelMin: 'min',
+  aggregationFunctionLabelMax: 'maks',
+  aggregationFunctionLabelSize: 'ukuran',
+  // Pivot panel
+  pivotToggleLabel: 'Pivot',
+  pivotRows: 'Baris',
+  pivotColumns: 'Kolom',
+  pivotValues: 'Nilai',
+  pivotCloseButton: 'Tutup pengaturan pivot',
+  pivotSearchButton: 'Cari bidang',
+  pivotSearchControlPlaceholder: 'Cari bidang',
+  pivotSearchControlLabel: 'Cari bidang',
+  pivotSearchControlClear: 'Hapus pencarian',
+  pivotNoFields: 'Tidak ada bidang',
+  pivotMenuMoveUp: 'Pindah ke atas',
+  pivotMenuMoveDown: 'Pindah ke bawah',
+  pivotMenuMoveToTop: 'Pindah ke paling atas',
+  pivotMenuMoveToBottom: 'Pindah ke paling bawah',
+  pivotMenuRows: 'Baris',
+  pivotMenuColumns: 'Kolom',
+  pivotMenuValues: 'Nilai',
+  pivotMenuOptions: 'Opsi bidang',
+  pivotMenuAddToRows: 'Tambahkan ke Baris',
+  pivotMenuAddToColumns: 'Tambahkan ke Kolom',
+  pivotMenuAddToValues: 'Tambahkan ke Nilai',
+  pivotMenuRemove: 'Hapus',
+  pivotDragToRows: 'Seret ke sini untuk membuat baris',
+  pivotDragToColumns: 'Seret ke sini untuk membuat kolom',
+  pivotDragToValues: 'Seret ke sini untuk membuat nilai',
+  pivotYearColumnHeaderName: '(Tahun)',
+  pivotQuarterColumnHeaderName: '(Kuartal)',
+  // AI Assistant panel
+  aiAssistantPanelTitle: 'Asisten AI',
+  aiAssistantPanelClose: 'Tutup Asisten AI',
+  aiAssistantPanelNewConversation: 'Percakapan baru',
+  aiAssistantPanelConversationHistory: 'Riwayat percakapan',
+  aiAssistantPanelEmptyConversation: 'Tidak ada riwayat percakapan',
+  aiAssistantSuggestions: 'Saran',
+  // Prompt field
+  promptFieldLabel: 'Perintah',
+  promptFieldPlaceholder: 'Ketik perintah…',
+  promptFieldPlaceholderWithRecording: 'Ketik atau rekam perintah…',
+  promptFieldPlaceholderListening: 'Mendengarkan perintah',
+  promptFieldSpeechRecognitionNotSupported: 'Pengenalan suara tidak didukung di browser ini',
+  promptFieldSend: 'Kirim',
+  promptFieldRecord: 'Rekam',
+  promptFieldStopRecording: 'Hentikan perekaman',
+  // Prompt
+  promptRerun: 'Jalankan lagi',
+  promptProcessing: 'Memproses…',
+  promptAppliedChanges: 'Perubahan diterapkan',
+  // Prompt changes
+  promptChangeGroupDescription: column => `Kelompokkan berdasarkan ${column}`,
+  promptChangeAggregationLabel: (column, aggregation) => `${column} (${aggregation})`,
+  promptChangeAggregationDescription: (column, aggregation) => `Agregasikan ${column} (${aggregation})`,
+  promptChangeFilterLabel: (column, operator, value) => {
+    if (operator === 'is any of') {
+      return `${column} salah satu dari: ${value}`;
+    }
+    return `${column} ${operator} ${value}`;
+  },
+  promptChangeFilterDescription: (column, operator, value) => {
+    if (operator === 'is any of') {
+      return `Filter di mana ${column} salah satu dari: ${value}`;
+    }
+    return `Filter di mana ${column} ${operator} ${value}`;
+  },
+  promptChangeSortDescription: (column, direction) => `Urutkan berdasarkan ${column} (${direction})`,
+  promptChangePivotEnableLabel: 'Pivot',
+  promptChangePivotEnableDescription: 'Aktifkan pivot',
+  promptChangePivotColumnsLabel: count => `Kolom (${count})`,
+  promptChangePivotColumnsDescription: (column, direction) => `${column}${direction ? ` (${direction})` : ''}`,
+  promptChangePivotRowsLabel: count => `Baris (${count})`,
+  promptChangePivotValuesLabel: count => `Nilai (${count})`,
+  promptChangePivotValuesDescription: (column, aggregation) => `${column} (${aggregation})`
+};
+export const idID = getGridLocalization(idIDGrid);

package/esm/locales/index.d.ts

@@ -35,4 +35,5 @@ export * from "./zhTW.js";
 export * from "./hrHR.js";
 export * from "./ptPT.js";
 export * from "./zhHK.js";
-export * from "./isIS.js";
+export * from "./isIS.js";
+export * from "./idID.js";

package/esm/locales/index.js

@@ -36,4 +36,5 @@ export * from "./zhTW.js";
 export * from "./hrHR.js";
 export * from "./ptPT.js";
 export * from "./zhHK.js";
-export * from "./isIS.js";
+export * from "./isIS.js";
+export * from "./idID.js";

package/esm/models/api/gridRowApi.d.ts

@@ -19,6 +19,11 @@ export interface GridRowGroupChildrenGetterParams {
    * @default false
    */
   applySorting?: boolean;
+  /**
+   * If `true`, the method will only return the direct leaf children of the group
+   * @default false
+   */
+  directChildrenOnly?: boolean;
 }
 /**
  * The Row API interface that is available in the grid `apiRef`.

package/esm/models/events/gridEventLookup.d.ts

@@ -77,11 +77,12 @@ export interface GridRowEventLookup {
   };
   /**
    * Fired when the dragging of a row ends.
+   * It's mapped to the `dragend` DOM event.
    * @ignore - do not document.
    */
   rowDragEnd: {
     params: GridRowParams;
-    event: React.DragEvent<HTMLElement>;
+    event: DragEvent;
   };
 }
 export interface GridColumnHeaderEventLookup {

package/esm/models/gridApiCaches.d.ts

@@ -1,6 +1,12 @@
-import { GridRowsInternalCache } from "../hooks/features/rows/gridRowsInterfaces.js";
-import { GridRowsMetaInternalCache } from "../hooks/features/rows/gridRowsMetaInterfaces.js";
+import type { GridRowsInternalCache } from "../hooks/features/rows/gridRowsInterfaces.js";
+import type { GridRowsMetaInternalCache } from "../hooks/features/rows/gridRowsMetaInterfaces.js";
+import type { GridColumnGroupingInternalCache } from "../hooks/features/columnGrouping/gridColumnGroupsInterfaces.js";
+import type { GridColDef } from "./colDef/index.js";
 export interface GridApiCaches {
+  columns: {
+    lastColumnsProp: readonly GridColDef[];
+  };
+  columnGrouping: GridColumnGroupingInternalCache;
   rows: GridRowsInternalCache;
   rowsMeta: GridRowsMetaInternalCache;
 }

package/esm/models/gridStateCommunity.d.ts

@@ -1,5 +1,5 @@
 import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridColumnsGroupingState, GridColumnPinningState, GridDensityState, GridDimensionsState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState, GridVirtualizationState } from "../hooks/index.js";
-import type { DataGridProps } from "./props/DataGridProps.js";
+import type { DataGridProcessedProps } from "./props/DataGridProps.js";
 import type { GridRowsMetaState } from "../hooks/features/rows/gridRowsMetaState.js";
 import type { GridEditingState } from "./gridEditRowModel.js";
 import { GridHeaderFilteringState } from "./gridHeaderFilteringModel.js";
@@ -12,7 +12,7 @@ import type { GridListViewState } from "../hooks/features/listView/useGridListVi
  * Some props are passed on the state to enable grid selectors to select
  * and react to them.
  */
-type GridStateProps = Pick<DataGridProps, 'getRowId'>;
+type GridStateProps = Pick<DataGridProcessedProps, 'getRowId' | 'listView'>;
 /**
  * The state of Data Grid.
  */

package/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/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -57,7 +57,8 @@ const useGridPipeProcessing = apiRef => {
       cache.current[group] = {
         processors: new Map(),
         processorsAsArray: [],
-        appliers: {}
+        appliers: {},
+        processorsUpdated: false
       };
     }
     const groupCache = cache.current[group];
@@ -65,19 +66,20 @@ 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;
@@ -90,6 +92,18 @@ 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]) {
@@ -105,7 +119,8 @@ const useGridPipeProcessing = apiRef => {
   const preProcessingPrivateApi = {
     registerPipeProcessor,
     registerPipeApplier,
-    requestPipeProcessorsApplication
+    requestPipeProcessorsApplication,
+    runAppliersForPendingProcessors
   };
   const preProcessingPublicApi = {
     unstable_applyPipeProcessors: applyPipeProcessors

package/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/hooks/core/useGridProps.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 const propsStateInitializer = (state, props) => {
   return (0, _extends2.default)({}, state, {
     props: {
+      listView: props.listView,
       getRowId: props.getRowId
     }
   });
@@ -21,9 +22,10 @@ const useGridProps = (apiRef, props) => {
   React.useEffect(() => {
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       props: {
+        listView: props.listView,
         getRowId: props.getRowId
       }
     }));
-  }, [apiRef, props.getRowId]);
+  }, [apiRef, props.listView, props.getRowId]);
 };
 exports.useGridProps = useGridProps;

package/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/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.unwrapGroupingColumnModel = exports.getColumnGroupsHeaderStructure = void 0;
-var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _gridColumnGrouping = require("../../../models/gridColumnGrouping");
 // This is the recurrence function that help writing `unwrapGroupingColumnModel()`
 const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplete) => {
@@ -44,45 +43,49 @@ exports.unwrapGroupingColumnModel = unwrapGroupingColumnModel;
 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) => (0, _isDeepEqual.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/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -18,10 +18,11 @@ var _useGridEvent = require("../../utils/useGridEvent");
 var _columns = require("../columns");
 const _excluded = ["groupId", "children"];
 const createGroupLookup = columnGroupingModel => {
-  let groupLookup = {};
-  columnGroupingModel.forEach(node => {
+  const groupLookup = {};
+  for (let i = 0; i < columnGroupingModel.length; i += 1) {
+    const node = columnGroupingModel[i];
     if ((0, _gridColumnGrouping.isLeaf)(node)) {
-      return;
+      continue;
     }
     const {
         groupId,
@@ -31,10 +32,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 = (0, _extends2.default)({}, other, {
       groupId
@@ -43,13 +42,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 = (0, _extends2.default)({}, groupLookup, subTreeLookup, {
-      [groupId]: groupParam
-    });
-  });
-  return (0, _extends2.default)({}, groupLookup);
+    Object.assign(groupLookup, subTreeLookup);
+    groupLookup[groupId] = groupParam;
+  }
+  return groupLookup;
 };
 const columnGroupsStateInitializer = (state, props, apiRef) => {
+  apiRef.current.caches.columnGrouping = {
+    lastColumnGroupingModel: props.columnGroupingModel
+  };
   if (!props.columnGroupingModel) {
     return state;
   }
@@ -105,6 +106,7 @@ 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 = (0, _columns.gridColumnFieldsSelector)(apiRef);
@@ -136,7 +138,10 @@ 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]);
 };
 exports.useGridColumnGrouping = useGridColumnGrouping;

package/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[];