@mui/x-data-grid 8.7.0 → 8.9.1

package/hooks/features/columns/gridColumnsSelector.js

@@ -7,6 +7,7 @@ exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFi
 var _createSelector = require("../../../utils/createSelector");
 var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
 var _gridCoreSelector = require("../../core/gridCoreSelector");
+var _listView = require("../listView");
 /**
  * Get the columns state
  * @category Columns
@@ -50,7 +51,7 @@ const gridInitialColumnVisibilityModelSelector = exports.gridInitialColumnVisibi
  * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Visible Columns
  */
-const gridVisibleColumnDefinitionsSelector = exports.gridVisibleColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, (columns, columnVisibilityModel) => columns.filter(column => columnVisibilityModel[column.field] !== false));
+const gridVisibleColumnDefinitionsSelector = exports.gridVisibleColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, _listView.gridListViewSelector, _listView.gridListColumnSelector, (columns, columnVisibilityModel, listView, listColumn) => listView && listColumn ? [listColumn] : columns.filter(column => columnVisibilityModel[column.field] !== false));
 
 /**
  * Get the field of each visible column.
@@ -75,7 +76,10 @@ const gridExistingPinnedColumnSelector = exports.gridExistingPinnedColumnSelecto
  * Get the visible pinned columns.
  * @category Visible Columns
  */
-const gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisiblePinnedColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, _gridCoreSelector.gridIsRtlSelector, (columnsState, model, visibleColumnFields, isRtl) => {
+const gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisiblePinnedColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, _gridCoreSelector.gridIsRtlSelector, _listView.gridListViewSelector, (columnsState, model, visibleColumnFields, isRtl, listView) => {
+  if (listView) {
+    return _gridColumnsInterfaces.EMPTY_PINNED_COLUMN_FIELDS;
+  }
   const visiblePinnedFields = filterMissingColumns(model, visibleColumnFields, isRtl);
   const visiblePinnedColumns = {
     left: visiblePinnedFields.left.map(field => columnsState.lookup[field]),

package/hooks/features/columns/gridColumnsUtils.js

@@ -257,11 +257,13 @@ const createColumnsState = ({
       initialColumnVisibilityModel: updateInitialVisibilityModel ? columnVisibilityModel : currentState.initialColumnVisibilityModel
     };
   }
-  let columnsToKeep = {};
+  const columnsToKeep = {};
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
-    columnsToKeep = Object.keys(columnsState.lookup).reduce((acc, key) => (0, _extends2.default)({}, 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/hooks/features/columns/useGridColumns.js

@@ -22,6 +22,9 @@ var _preferencesPanel = require("../preferencesPanel");
 var _pivoting = require("../pivoting");
 var _jsxRuntime = require("react/jsx-runtime");
 const columnsStateInitializer = (state, props, apiRef) => {
+  apiRef.current.caches.columns = {
+    lastColumnsProp: props.columns
+  };
   const columnsState = (0, _gridColumnsUtils.createColumnsState)({
     apiRef,
     columnsToUpsert: props.columns,
@@ -45,7 +48,6 @@ const columnsStateInitializer = (state, props, apiRef) => {
 exports.columnsStateInitializer = columnsStateInitializer;
 function useGridColumns(apiRef, props) {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridColumns');
-  const previousColumnsProp = React.useRef(props.columns);
   apiRef.current.registerControlState({
     stateId: 'visibleColumns',
     propModel: props.columnVisibilityModel,
@@ -308,27 +310,23 @@ 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 = (0, _gridColumnsUtils.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/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/hooks/features/dataSource/useGridDataSourceBase.js

@@ -42,6 +42,9 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
   const lastRequestId = React.useRef(0);
   const onDataSourceErrorProp = props.onDataSourceError;
   const cacheChunkManager = (0, _useLazyRef.default)(() => {
+    if (!props.pagination) {
+      return new _utils2.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 _utils2.CacheChunkManager(cacheChunkSize);

package/hooks/features/dataSource/utils.js

@@ -43,6 +43,9 @@ 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/hooks/features/export/utils.js

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

package/hooks/features/filter/useGridFilter.js

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

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

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -23,7 +23,6 @@ var _gridHeaderFilteringSelectors = require("../headerFiltering/gridHeaderFilter
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _domUtils = require("../../../utils/domUtils");
 var _utils = require("./utils");
-var _gridListViewSelectors = require("../listView/gridListViewSelectors");
 var _createSelector = require("../../../utils/createSelector");
 var _pagination = require("../pagination");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
@@ -43,7 +42,6 @@ const gridVisibleRowsWithPinnedRowsSelector = (0, _createSelector.createSelector
 const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridKeyboardNavigation');
   const isRtl = (0, _RtlProvider.useRtl)();
-  const listView = props.listView;
   const getCurrentPageRows = React.useCallback(() => {
     return gridVisibleRowsWithPinnedRowsSelector(apiRef);
   }, [apiRef]);
@@ -66,7 +64,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
     }
-    const field = listView ? (0, _gridListViewSelectors.gridListColumnSelector)(apiRef).field : (0, _gridColumnsSelector.gridVisibleColumnFieldsSelector)(apiRef)[colIndex];
+    const field = (0, _gridColumnsSelector.gridVisibleColumnFieldsSelector)(apiRef)[colIndex];
     const nonRowSpannedRowId = (0, _utils.findNonRowSpannedCell)(apiRef, rowId, field, rowSpanScanDirection);
     // `scrollToIndexes` requires a rowIndex relative to all visible rows.
     // Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
@@ -77,7 +75,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       rowIndex: rowIndexRelativeToAllRows
     });
     apiRef.current.setCellFocus(nonRowSpannedRowId, field);
-  }, [apiRef, logger, listView]);
+  }, [apiRef, logger]);
   const goToHeader = React.useCallback((colIndex, event) => {
     logger.debug(`Navigating to header col ${colIndex}`);
     apiRef.current.scrollToIndexes({
@@ -402,14 +400,12 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       return;
     }
     const viewportPageSize = apiRef.current.getViewportPageSize();
-    const getColumnIndexFn = listView ? () => 0 : apiRef.current.getColumnIndex;
-    const colIndexBefore = params.field ? getColumnIndexFn(params.field) : 0;
+    const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const rowIndexBefore = currentPageRows.findIndex(row => row.id === params.id);
     const firstRowIndexInPage = 0;
     const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
-    const visibleColumns = listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
-    const lastColIndex = visibleColumns.length - 1;
+    const lastColIndex = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).length - 1;
     let shouldPreventDefault = true;
     switch (event.key) {
       case 'ArrowDown':
@@ -526,7 +522,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, getCurrentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader, listView]);
+  }, [apiRef, getCurrentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

package/hooks/features/listView/gridListViewSelectors.d.ts

@@ -1,7 +1,14 @@
 import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+import type { GridStateColDef } from "../../../models/colDef/gridColDef.js";
+/**
+ * Get the list view state
+ * @category List View
+ * @ignore - Do not document
+ */
+export declare const gridListViewSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, boolean>;
 /**
  * Get the list column definition
  * @category List View
  * @ignore - Do not document
  */
-export declare const gridListColumnSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("./useGridListView.js").GridListViewState>;
+export declare const gridListColumnSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, GridStateColDef>;

package/hooks/features/listView/gridListViewSelectors.js

@@ -3,8 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridListColumnSelector = void 0;
+exports.gridListViewSelector = exports.gridListColumnSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
+/**
+ * Get the list view state
+ * @category List View
+ * @ignore - Do not document
+ */
+const gridListViewSelector = exports.gridListViewSelector = (0, _createSelector.createRootSelector)(state => state.props.listView ?? false);
+
 /**
  * Get the list column definition
  * @category List View

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -307,12 +307,13 @@ const useGridRowSelection = (apiRef, props) => {
     }
     const currentSelection = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef);
     const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
+    const rowTree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
     const filteredRowsLookup = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);
     const isNonExistent = id => {
       if (props.filterMode === 'server') {
         return !rowsLookup[id];
       }
-      return !rowsLookup[id] || filteredRowsLookup[id] === false;
+      return !rowTree[id] || filteredRowsLookup[id] === false;
     };
     const newSelectionModel = {
       type: currentSelection.type,
@@ -438,15 +439,15 @@ const useGridRowSelection = (apiRef, props) => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
     const quickFilterModel = (0, _gridFilterSelector.gridQuickFilterValuesSelector)(apiRef);
     const hasFilters = filterModel.items.length > 0 || quickFilterModel?.some(val => val.length);
-    if (!props.isRowSelectable && !props.checkboxSelectionVisibleOnly && applyAutoSelection && !hasFilters) {
+    if (!props.isRowSelectable && !props.checkboxSelectionVisibleOnly && (!isNestedData || props.rowSelectionPropagation?.descendants) && !hasFilters) {
       apiRef.current.setRowSelectionModel({
         type: value ? 'exclude' : 'include',
         ids: new Set()
-      });
+      }, 'multipleRowsSelection');
     } else {
       apiRef.current.selectRows(getRowsToBeSelected(), value);
     }
-  }, [apiRef, applyAutoSelection, getRowsToBeSelected, props.checkboxSelectionVisibleOnly, props.isRowSelectable]);
+  }, [apiRef, getRowsToBeSelected, props.checkboxSelectionVisibleOnly, props.isRowSelectable, props.rowSelectionPropagation?.descendants, isNestedData]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
     toggleAllRows(params.value);
   }, [toggleAllRows]);

package/hooks/features/rows/gridRowsUtils.d.ts

@@ -42,7 +42,7 @@ export declare const getRowsStateFromCache: ({
 }) => GridRowsState;
 export declare const isAutogeneratedRow: (row: GridRowModel) => boolean;
 export declare const isAutogeneratedRowNode: (rowNode: GridTreeNode) => rowNode is GridFooterNode | GridSkeletonRowNode | GridAutoGeneratedGroupNode | GridAutoGeneratedPinnedRowNode;
-export declare const getTreeNodeDescendants: (tree: GridRowTreeConfig, parentId: GridRowId, skipAutoGeneratedRows: boolean) => GridRowId[];
+export declare const getTreeNodeDescendants: (tree: GridRowTreeConfig, parentId: GridRowId, skipAutoGeneratedRows: boolean, directChildrenOnly?: boolean) => GridRowId[];
 export declare const updateCacheWithNewRows: ({
   previousCache,
   getRowId,

package/hooks/features/rows/gridRowsUtils.js

@@ -145,7 +145,7 @@ const isAutogeneratedRow = row => GRID_ID_AUTOGENERATED in row;
 exports.isAutogeneratedRow = isAutogeneratedRow;
 const isAutogeneratedRowNode = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
 exports.isAutogeneratedRowNode = isAutogeneratedRowNode;
-const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
+const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows, directChildrenOnly) => {
   const node = tree[parentId];
   if (node.type !== 'group') {
     return [];
@@ -156,7 +156,10 @@ const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
     if (!skipAutoGeneratedRows || !isAutogeneratedRowNode(tree[child])) {
       validDescendants.push(child);
     }
-    const childDescendants = getTreeNodeDescendants(tree, child, skipAutoGeneratedRows);
+    if (directChildrenOnly) {
+      continue;
+    }
+    const childDescendants = getTreeNodeDescendants(tree, child, skipAutoGeneratedRows, directChildrenOnly);
     for (let j = 0; j < childDescendants.length; j += 1) {
       validDescendants.push(childDescendants[j]);
     }

package/hooks/features/rows/useGridRows.js

@@ -206,7 +206,8 @@ const useGridRows = (apiRef, props) => {
     skipAutoGeneratedRows = true,
     groupId,
     applySorting,
-    applyFiltering
+    applyFiltering,
+    directChildrenOnly = false
   }) => {
     const tree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
     let children;
@@ -218,14 +219,14 @@ const useGridRows = (apiRef, props) => {
       const sortedRowIds = (0, _gridSortingSelector.gridSortedRowIdsSelector)(apiRef);
       children = [];
       const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
-      for (let index = startIndex; index < sortedRowIds.length && tree[sortedRowIds[index]].depth > groupNode.depth; index += 1) {
+      for (let index = startIndex; index < sortedRowIds.length && (directChildrenOnly ? tree[sortedRowIds[index]].depth === groupNode.depth + 1 : tree[sortedRowIds[index]].depth > groupNode.depth); index += 1) {
         const id = sortedRowIds[index];
         if (!skipAutoGeneratedRows || !(0, _gridRowsUtils.isAutogeneratedRowNode)(tree[id])) {
           children.push(id);
         }
       }
     } else {
-      children = (0, _gridRowsUtils.getTreeNodeDescendants)(tree, groupId, skipAutoGeneratedRows);
+      children = (0, _gridRowsUtils.getTreeNodeDescendants)(tree, groupId, skipAutoGeneratedRows, directChildrenOnly);
     }
     if (applyFiltering) {
       const filteredRowsLookup = (0, _gridFilterSelector.gridFilteredRowsLookupSelector)(apiRef);

package/hooks/features/scroll/useGridScroll.d.ts

@@ -9,4 +9,4 @@ import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
  * @requires useGridFilter (state)
  * @requires useGridColumnSpanning (method)
  */
-export declare const useGridScroll: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "listView">) => void;
+export declare const useGridScroll: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination">) => void;

package/hooks/features/scroll/useGridScroll.js

@@ -16,7 +16,6 @@ var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _dimensions = require("../dimensions");
-var _gridListViewSelectors = require("../listView/gridListViewSelectors");
 // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
 // Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
 function scrollIntoView(dimensions) {
@@ -58,7 +57,7 @@ const useGridScroll = (apiRef, props) => {
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = (0, _dimensions.gridDimensionsSelector)(apiRef);
     const totalRowCount = (0, _gridRowsSelector.gridRowCountSelector)(apiRef);
-    const visibleColumns = props.listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
+    const visibleColumns = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
     const scrollToHeader = params.rowIndex == null;
     if (!scrollToHeader && totalRowCount === 0 || visibleColumns.length === 0) {
       return false;
@@ -105,7 +104,7 @@ const useGridScroll = (apiRef, props) => {
       return true;
     }
     return false;
-  }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows, props.listView]);
+  }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows]);
   const scroll = React.useCallback(params => {
     if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -35,9 +35,7 @@ var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _gridVirtualizationSelectors = require("./gridVirtualizationSelectors");
 var _useGridVirtualization = require("./useGridVirtualization");
 var _gridRowSpanningSelectors = require("../rows/gridRowSpanningSelectors");
-var _gridListViewSelectors = require("../listView/gridListViewSelectors");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
-var _columns = require("../columns");
 var _gridFocusedVirtualCellSelector = require("./gridFocusedVirtualCellSelector");
 var _roundToDecimalPlaces = require("../../../utils/roundToDecimalPlaces");
 var _isJSDOM = require("../../../utils/isJSDOM");
@@ -67,12 +65,11 @@ const useGridVirtualScroller = () => {
   const {
     listView
   } = rootProps;
-  const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, () => listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef));
+  const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
   const enabledForRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationRowEnabledSelector) && !_isJSDOM.isJSDOM;
   const enabledForColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationColumnEnabledSelector) && !_isJSDOM.isJSDOM;
   const pinnedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
-  const pinnedColumnDefinitions = (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef);
-  const pinnedColumns = listView ? _columns.EMPTY_PINNED_COLUMN_FIELDS : pinnedColumnDefinitions;
+  const pinnedColumns = (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef);
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const isRtl = (0, _RtlProvider.useRtl)();
@@ -563,7 +560,7 @@ function needsHorizontalScrollbarSelector(apiRef) {
 function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
   const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef);
   const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, rootProps);
-  const visibleColumns = rootProps.listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
+  const visibleColumns = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
   const hiddenCellsOriginMap = (0, _gridRowSpanningSelectors.gridRowSpanningHiddenCellsOriginMapSelector)(apiRef);
   const lastRowId = apiRef.current.state.rows.dataRowIds.at(-1);
   const lastColumn = visibleColumns.at(-1);

package/hooks/utils/index.d.ts

@@ -6,4 +6,5 @@ export * from "./useGridNativeEventListener.js";
 export * from "./useFirstRender.js";
 export * from "./useOnMount.js";
 export * from "./useRunOnce.js";
+export * from "./useRunOncePerLoop.js";
 export type { RenderProp } from '@mui/x-internals/useComponentRenderer';

package/hooks/utils/index.js

@@ -106,4 +106,16 @@ Object.keys(_useRunOnce).forEach(function (key) {
       return _useRunOnce[key];
     }
   });
+});
+var _useRunOncePerLoop = require("./useRunOncePerLoop");
+Object.keys(_useRunOncePerLoop).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useRunOncePerLoop[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useRunOncePerLoop[key];
+    }
+  });
 });

package/hooks/utils/useGridInitializeState.d.ts

@@ -4,5 +4,5 @@ import { GridPrivateApiCommunity } from "../../models/api/gridApiCommunity.js";
 import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 type DeepPartial<T> = { [P in keyof T]?: DeepPartial<T[P]> };
 export type GridStateInitializer<P extends Partial<DataGridProcessedProps> = DataGridProcessedProps, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity> = (state: DeepPartial<PrivateApi['state']>, props: P, privateApiRef: RefObject<PrivateApi>) => DeepPartial<PrivateApi['state']>;
-export declare const useGridInitializeState: <P extends Partial<DataGridProcessedProps>, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity>(initializer: GridStateInitializer<P, PrivateApi>, privateApiRef: RefObject<PrivateApi>, props: P) => void;
+export declare const useGridInitializeState: <P extends Partial<DataGridProcessedProps>, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity>(initializer: GridStateInitializer<P, PrivateApi>, privateApiRef: RefObject<PrivateApi>, props: P, key?: string) => void;
 export {};

package/hooks/utils/useGridInitializeState.js

@@ -6,8 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridInitializeState = void 0;
 var React = _interopRequireWildcard(require("react"));
-const useGridInitializeState = (initializer, privateApiRef, props) => {
+const useGridInitializeState = (initializer, privateApiRef, props, key) => {
+  const previousKey = React.useRef(key);
   const isInitialized = React.useRef(false);
+  if (key !== previousKey.current) {
+    isInitialized.current = false;
+    previousKey.current = key;
+  }
   if (!isInitialized.current) {
     privateApiRef.current.state = initializer(privateApiRef.current.state, props, privateApiRef);
     isInitialized.current = true;

package/hooks/utils/useGridSelector.js

@@ -77,6 +77,10 @@ function useGridSelector(apiRef, selector, args = undefined, equals = defaultCom
   // eslint-disable-next-line react-hooks/exhaustive-deps
   EMPTY);
   const unsubscribe = React.useCallback(() => {
+    // Fixes issue in React Strict Mode, where getSnapshot is not called
+    if (!refs.current.subscription) {
+      subscribe();
+    }
     return () => {
       if (refs.current.subscription) {
         refs.current.subscription();

package/hooks/utils/useRunOncePerLoop.d.ts

@@ -0,0 +1 @@
+export declare function useRunOncePerLoop<T extends (...args: any[]) => void>(callback: T, nextFrame?: boolean): (...args: Parameters<T>) => void;

package/hooks/utils/useRunOncePerLoop.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRunOncePerLoop = useRunOncePerLoop;
+var React = _interopRequireWildcard(require("react"));
+function useRunOncePerLoop(callback, nextFrame = false) {
+  const scheduledRef = React.useRef(false);
+  const schedule = React.useCallback((...args) => {
+    if (scheduledRef.current) {
+      return;
+    }
+    scheduledRef.current = true;
+    const runner = () => {
+      scheduledRef.current = false;
+      callback(...args);
+    };
+    if (nextFrame) {
+      if (typeof requestAnimationFrame === 'function') {
+        requestAnimationFrame(runner);
+      }
+      return;
+    }
+    if (typeof queueMicrotask === 'function') {
+      queueMicrotask(runner);
+    } else {
+      Promise.resolve().then(runner);
+    }
+  }, [callback, nextFrame]);
+  return schedule;
+}

package/index.js

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

package/internals/utils/cache.d.ts

@@ -0,0 +1,9 @@
+import { GridGetRowsParams, GridGetRowsResponse } from "../../models/gridDataSource.js";
+export declare class TestCache {
+  private cache;
+  constructor();
+  set(key: GridGetRowsParams, value: GridGetRowsResponse): void;
+  get(key: GridGetRowsParams): GridGetRowsResponse | undefined;
+  size(): number;
+  clear(): void;
+}

package/internals/utils/cache.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TestCache = void 0;
+var _cache = require("../../hooks/features/dataSource/cache");
+class TestCache {
+  constructor() {
+    this.cache = void 0;
+    this.cache = new Map();
+  }
+  set(key, value) {
+    this.cache.set((0, _cache.getKeyDefault)(key), value);
+  }
+  get(key) {
+    return this.cache.get((0, _cache.getKeyDefault)(key));
+  }
+  size() {
+    return this.cache.size;
+  }
+  clear() {
+    this.cache.clear();
+  }
+}
+exports.TestCache = TestCache;

package/internals/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./computeSlots.js";
 export * from "./propValidation.js";
 export * from "./gridRowGroupingUtils.js";
-export * from "./attachPinnedStyle.js";
+export * from "./attachPinnedStyle.js";
+export * from "./cache.js";

package/internals/utils/index.js

@@ -46,4 +46,15 @@ Object.keys(_attachPinnedStyle).forEach(function (key) {
       return _attachPinnedStyle[key];
     }
   });
+});
+var _cache = require("./cache");
+Object.keys(_cache).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _cache[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _cache[key];
+    }
+  });
 });

package/locales/idID.d.ts

@@ -0,0 +1,4 @@
+import { GridLocaleText } from "../models/api/gridLocaleTextApi.js";
+import { Localization } from "../utils/getGridLocalization.js";
+export declare const idIDGrid: GridLocaleText;
+export declare const idID: Localization;