@mui/x-data-grid 8.7.0 → 8.9.1

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

@@ -16,7 +16,6 @@ import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector }
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
 import { getLeftColumnIndex, getRightColumnIndex, findNonRowSpannedCell } from "./utils.js";
-import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 import { createSelectorMemoized } from "../../../utils/createSelector.js";
 import { gridVisibleRowsSelector } from "../pagination/index.js";
 import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
@@ -36,7 +35,6 @@ const gridVisibleRowsWithPinnedRowsSelector = createSelectorMemoized(gridVisible
 export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   const isRtl = useRtl();
-  const listView = props.listView;
   const getCurrentPageRows = React.useCallback(() => {
     return gridVisibleRowsWithPinnedRowsSelector(apiRef);
   }, [apiRef]);
@@ -59,7 +57,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
     }
-    const field = listView ? gridListColumnSelector(apiRef).field : gridVisibleColumnFieldsSelector(apiRef)[colIndex];
+    const field = gridVisibleColumnFieldsSelector(apiRef)[colIndex];
     const nonRowSpannedRowId = 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.
@@ -70,7 +68,7 @@ export 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({
@@ -395,14 +393,12 @@ export 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 ? [gridListColumnSelector(apiRef)] : gridVisibleColumnDefinitionsSelector(apiRef);
-    const lastColIndex = visibleColumns.length - 1;
+    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
     let shouldPreventDefault = true;
     switch (event.key) {
       case 'ArrowDown':
@@ -519,7 +515,7 @@ export 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/esm/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/esm/hooks/features/listView/gridListViewSelectors.js

@@ -1,4 +1,11 @@
 import { createRootSelector } from "../../../utils/createSelector.js";
+/**
+ * Get the list view state
+ * @category List View
+ * @ignore - Do not document
+ */
+export const gridListViewSelector = createRootSelector(state => state.props.listView ?? false);
+
 /**
  * Get the list column definition
  * @category List View

package/esm/hooks/features/rowSelection/useGridRowSelection.js

@@ -299,12 +299,13 @@ export const useGridRowSelection = (apiRef, props) => {
     }
     const currentSelection = gridRowSelectionStateSelector(apiRef);
     const rowsLookup = gridRowsLookupSelector(apiRef);
+    const rowTree = gridRowTreeSelector(apiRef);
     const filteredRowsLookup = 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,
@@ -430,15 +431,15 @@ export const useGridRowSelection = (apiRef, props) => {
     const filterModel = gridFilterModelSelector(apiRef);
     const quickFilterModel = 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/esm/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/esm/hooks/features/rows/gridRowsUtils.js

@@ -127,7 +127,7 @@ export const getRowsStateFromCache = ({
 };
 export const isAutogeneratedRow = row => GRID_ID_AUTOGENERATED in row;
 export const isAutogeneratedRowNode = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
-export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
+export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows, directChildrenOnly) => {
   const node = tree[parentId];
   if (node.type !== 'group') {
     return [];
@@ -138,7 +138,10 @@ export 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/esm/hooks/features/rows/useGridRows.js

@@ -198,7 +198,8 @@ export const useGridRows = (apiRef, props) => {
     skipAutoGeneratedRows = true,
     groupId,
     applySorting,
-    applyFiltering
+    applyFiltering,
+    directChildrenOnly = false
   }) => {
     const tree = gridRowTreeSelector(apiRef);
     let children;
@@ -210,14 +211,14 @@ export const useGridRows = (apiRef, props) => {
       const sortedRowIds = 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 || !isAutogeneratedRowNode(tree[id])) {
           children.push(id);
         }
       }
     } else {
-      children = getTreeNodeDescendants(tree, groupId, skipAutoGeneratedRows);
+      children = getTreeNodeDescendants(tree, groupId, skipAutoGeneratedRows, directChildrenOnly);
     }
     if (applyFiltering) {
       const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);

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

@@ -9,7 +9,6 @@ import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridExpandedSortedRowEntriesSelector } from "../filter/gridFilterSelector.js";
 import { gridDimensionsSelector } from "../dimensions/index.js";
-import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 
 // 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
@@ -52,7 +51,7 @@ export const useGridScroll = (apiRef, props) => {
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = gridDimensionsSelector(apiRef);
     const totalRowCount = gridRowCountSelector(apiRef);
-    const visibleColumns = props.listView ? [gridListColumnSelector(apiRef)] : gridVisibleColumnDefinitionsSelector(apiRef);
+    const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
     const scrollToHeader = params.rowIndex == null;
     if (!scrollToHeader && totalRowCount === 0 || visibleColumns.length === 0) {
       return false;
@@ -99,7 +98,7 @@ export 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/esm/hooks/features/virtualization/useGridVirtualScroller.js

@@ -25,9 +25,7 @@ import { getFirstNonSpannedColumnToRender } from "../columns/gridColumnsUtils.js
 import { gridRenderContextSelector, gridVirtualizationRowEnabledSelector, gridVirtualizationColumnEnabledSelector } from "./gridVirtualizationSelectors.js";
 import { EMPTY_RENDER_CONTEXT } from "./useGridVirtualization.js";
 import { gridRowSpanningHiddenCellsOriginMapSelector } from "../rows/gridRowSpanningSelectors.js";
-import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 import { minimalContentHeight } from "../rows/gridRowsUtils.js";
-import { EMPTY_PINNED_COLUMN_FIELDS } from "../columns/index.js";
 import { gridFocusedVirtualCellSelector } from "./gridFocusedVirtualCellSelector.js";
 import { roundToDecimalPlaces } from "../../../utils/roundToDecimalPlaces.js";
 import { isJSDOM } from "../../../utils/isJSDOM.js";
@@ -57,12 +55,11 @@ export const useGridVirtualScroller = () => {
   const {
     listView
   } = rootProps;
-  const visibleColumns = useGridSelector(apiRef, () => listView ? [gridListColumnSelector(apiRef)] : gridVisibleColumnDefinitionsSelector(apiRef));
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const enabledForRows = useGridSelector(apiRef, gridVirtualizationRowEnabledSelector) && !isJSDOM;
   const enabledForColumns = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector) && !isJSDOM;
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
-  const pinnedColumnDefinitions = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
-  const pinnedColumns = listView ? EMPTY_PINNED_COLUMN_FIELDS : pinnedColumnDefinitions;
+  const pinnedColumns = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const isRtl = useRtl();
@@ -552,7 +549,7 @@ function needsHorizontalScrollbarSelector(apiRef) {
 function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
   const dimensions = gridDimensionsSelector(apiRef);
   const currentPage = getVisibleRows(apiRef, rootProps);
-  const visibleColumns = rootProps.listView ? [gridListColumnSelector(apiRef)] : gridVisibleColumnDefinitionsSelector(apiRef);
+  const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
   const hiddenCellsOriginMap = gridRowSpanningHiddenCellsOriginMapSelector(apiRef);
   const lastRowId = apiRef.current.state.rows.dataRowIds.at(-1);
   const lastColumn = visibleColumns.at(-1);

package/esm/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/esm/hooks/utils/index.js

@@ -5,4 +5,5 @@ export { useGridSelector } from "./useGridSelector.js";
 export * from "./useGridNativeEventListener.js";
 export * from "./useFirstRender.js";
 export * from "./useOnMount.js";
-export * from "./useRunOnce.js";
+export * from "./useRunOnce.js";
+export * from "./useRunOncePerLoop.js";

package/esm/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/esm/hooks/utils/useGridInitializeState.js

@@ -1,6 +1,11 @@
 import * as React from 'react';
-export const useGridInitializeState = (initializer, privateApiRef, props) => {
+export 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/esm/hooks/utils/useGridSelector.js

@@ -69,6 +69,10 @@ export function useGridSelector(apiRef, selector, args = undefined, equals = def
   // 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/esm/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/esm/hooks/utils/useRunOncePerLoop.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+export 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/esm/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/esm/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/esm/internals/utils/cache.js

@@ -0,0 +1,19 @@
+import { getKeyDefault } from "../../hooks/features/dataSource/cache.js";
+export class TestCache {
+  constructor() {
+    this.cache = void 0;
+    this.cache = new Map();
+  }
+  set(key, value) {
+    this.cache.set(getKeyDefault(key), value);
+  }
+  get(key) {
+    return this.cache.get(getKeyDefault(key));
+  }
+  size() {
+    return this.cache.size;
+  }
+  clear() {
+    this.cache.clear();
+  }
+}

package/esm/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/esm/internals/utils/index.js

@@ -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/esm/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;