@mui/x-data-grid 8.12.1 → 8.13.0

package/hooks/features/dataSource/useGridDataSourceBase.js

@@ -188,6 +188,12 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
     setCache(prevCache => prevCache !== newCache ? newCache : prevCache);
   }, [props.dataSourceCache, options.cacheOptions]);
   React.useEffect(() => {
+    // Return early if the proper strategy isn't set yet
+    // Context: https://github.com/mui/mui-x/issues/19650
+    const strategy = apiRef.current.getActiveStrategy(_strategyProcessing.GridStrategyGroup.DataSource);
+    if (strategy !== _utils2.DataSourceRowsUpdateStrategy.Default && strategy !== _utils2.DataSourceRowsUpdateStrategy.LazyLoading) {
+      return undefined;
+    }
     if (props.dataSource) {
       apiRef.current.dataSource.cache.clear();
       apiRef.current.dataSource.fetchRows();

package/hooks/features/index.d.ts

@@ -16,4 +16,5 @@ export * from "./dimensions/index.js";
 export * from "./statePersistence/index.js";
 export * from "./headerFiltering/index.js";
 export * from "./virtualization/index.js";
-export * from "./dataSource/index.js";
+export * from "./dataSource/index.js";
+export * from "./overlays/index.js";

package/hooks/features/index.js

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

package/hooks/features/overlays/gridOverlaysInterfaces.d.ts

@@ -0,0 +1,3 @@
+import { GridSlotsComponent } from "../../../models/index.js";
+export type GridOverlayType = keyof Pick<GridSlotsComponent, 'noColumnsOverlay' | 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'> | null;
+export type GridLoadingOverlayVariant = 'circular-progress' | 'linear-progress' | 'skeleton';

package/hooks/features/overlays/gridOverlaysInterfaces.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/hooks/features/overlays/index.d.ts

@@ -0,0 +1 @@
+export type { GridLoadingOverlayVariant } from "./gridOverlaysInterfaces.js";

package/hooks/features/overlays/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/hooks/features/overlays/useGridOverlays.d.ts

@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { GridLoadingOverlayVariant } from "../../../components/GridLoadingOverlay.js";
-import type { GridOverlayType } from "../../../components/base/GridOverlays.js";
+import { GridApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import type { GridOverlayType, GridLoadingOverlayVariant } from "./gridOverlaysInterfaces.js";
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
  */
-export declare const useGridOverlays: () => {
-  getOverlay: () => React.JSX.Element | null;
-  overlaysProps: {
-    overlayType: NonNullable<GridOverlayType>;
-    loadingOverlayVariant: GridLoadingOverlayVariant | null;
-  };
+export declare const useGridOverlays: (apiRef: React.RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, "slotProps">) => {
+  overlayType: NonNullable<GridOverlayType>;
+  loadingOverlayVariant: GridLoadingOverlayVariant | null;
 };

package/hooks/features/overlays/useGridOverlays.js

@@ -1,30 +1,20 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridOverlays = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
 var _utils = require("../../utils");
-var _useGridApiContext = require("../../utils/useGridApiContext");
-var _useGridRootProps = require("../../utils/useGridRootProps");
 var _filter = require("../filter");
 var _rows = require("../rows");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
-var _GridOverlays = require("../../../components/base/GridOverlays");
 var _columns = require("../columns");
 var _pivoting = require("../pivoting");
-var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
  */
-const useGridOverlays = () => {
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+const useGridOverlays = (apiRef, props) => {
   const totalRowCount = (0, _utils.useGridSelector)(apiRef, _rows.gridRowCountSelector);
   const visibleRowCount = (0, _utils.useGridSelector)(apiRef, _filter.gridExpandedRowCountSelector);
   const pinnedRowsCount = (0, _utils.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsCountSelector);
@@ -52,26 +42,11 @@ const useGridOverlays = () => {
   }
   if (loading) {
     overlayType = 'loadingOverlay';
-    loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] ?? (noRows ? 'skeleton' : 'linear-progress');
+    loadingOverlayVariant = props.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] ?? (noRows ? 'skeleton' : 'linear-progress');
   }
-  const overlaysProps = {
+  return {
     overlayType: overlayType,
     loadingOverlayVariant
   };
-  const getOverlay = () => {
-    if (!overlayType) {
-      return null;
-    }
-    const Overlay = rootProps.slots?.[overlayType];
-    const overlayProps = rootProps.slotProps?.[overlayType];
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlayWrapper, (0, _extends2.default)({}, overlaysProps, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, (0, _extends2.default)({}, overlayProps))
-    }));
-  };
-  if (process.env.NODE_ENV !== "production") getOverlay.displayName = "getOverlay";
-  return {
-    getOverlay,
-    overlaysProps
-  };
 };
 exports.useGridOverlays = useGridOverlays;

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

@@ -1,6 +1,7 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import type { GridConfiguration } from "../../../models/configuration/gridConfiguration.js";
 export declare class MissingRowIdError extends Error {}
 /**
  * @requires useGridColumns (method)
@@ -10,4 +11,4 @@ export declare class MissingRowIdError extends Error {}
  * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
-export declare function useGridParamsApi(apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps): void;
+export declare function useGridParamsApi(apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps, configuration: GridConfiguration): void;

package/hooks/features/rows/useGridParamsApi.js

@@ -12,7 +12,6 @@ var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
 var _gridListViewSelectors = require("../listView/gridListViewSelectors");
 var _gridRowsSelector = require("./gridRowsSelector");
-var _gridRowsUtils = require("./gridRowsUtils");
 class MissingRowIdError extends Error {}
 
 /**
@@ -24,7 +23,7 @@ class MissingRowIdError extends Error {}
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
 exports.MissingRowIdError = MissingRowIdError;
-function useGridParamsApi(apiRef, props) {
+function useGridParamsApi(apiRef, props, configuration) {
   const getColumnHeaderParams = React.useCallback(field => ({
     field,
     colDef: apiRef.current.getColumn(field)
@@ -96,25 +95,6 @@ function useGridParamsApi(apiRef, props) {
       cellMode
     });
   }, [apiRef, props.listView, props.listViewColumn?.field]);
-  const getCellValue = React.useCallback((id, field) => {
-    const colDef = apiRef.current.getColumn(field);
-    const row = apiRef.current.getRow(id);
-    if (!row) {
-      throw new MissingRowIdError(`No row with id #${id} found`);
-    }
-    if (!colDef || !colDef.valueGetter) {
-      return row[field];
-    }
-    return colDef.valueGetter(row[colDef.field], row, colDef, apiRef);
-  }, [apiRef]);
-  const getRowValue = React.useCallback((row, colDef) => (0, _gridRowsUtils.getRowValue)(row, colDef, apiRef), [apiRef]);
-  const getRowFormattedValue = React.useCallback((row, colDef) => {
-    const value = getRowValue(row, colDef);
-    if (!colDef || !colDef.valueFormatter) {
-      return value;
-    }
-    return colDef.valueFormatter(value, row, colDef, apiRef);
-  }, [apiRef, getRowValue]);
   const getColumnHeaderElement = React.useCallback(field => {
     if (!apiRef.current.rootElementRef.current) {
       return null;
@@ -136,12 +116,13 @@ function useGridParamsApi(apiRef, props) {
       field
     });
   }, [apiRef]);
+  const overridableParamsMethods = configuration.hooks.useGridParamsOverridableMethods(apiRef);
   const paramsApi = {
-    getCellValue,
+    getCellValue: overridableParamsMethods.getCellValue,
     getCellParams,
     getCellElement,
-    getRowValue,
-    getRowFormattedValue,
+    getRowValue: overridableParamsMethods.getRowValue,
+    getRowFormattedValue: overridableParamsMethods.getRowFormattedValue,
     getRowParams,
     getRowElement,
     getColumnHeaderParams,

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

@@ -0,0 +1,7 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+export declare const useGridParamsOverridableMethods: (apiRef: RefObject<GridPrivateApiCommunity>) => {
+  getCellValue: <V = any>(id: import("@mui/x-data-grid").GridRowId, field: string) => V;
+  getRowValue: <V = any>(row: import("@mui/x-data-grid").GridRowModel, colDef: import("@mui/x-data-grid").GridColDef) => V;
+  getRowFormattedValue: <V = any>(row: import("@mui/x-data-grid").GridRowModel, colDef: import("@mui/x-data-grid").GridColDef) => V;
+};

package/hooks/features/rows/useGridParamsOverridableMethods.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridParamsOverridableMethods = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _gridRowsUtils = require("./gridRowsUtils");
+const useGridParamsOverridableMethods = apiRef => {
+  const getCellValue = React.useCallback((id, field) => {
+    const colDef = apiRef.current.getColumn(field);
+    const row = apiRef.current.getRow(id);
+    if (!row) {
+      throw new Error(`No row with id #${id} found`);
+    }
+    if (!colDef || !colDef.valueGetter) {
+      return row[field];
+    }
+    return colDef.valueGetter(row[colDef.field], row, colDef, apiRef);
+  }, [apiRef]);
+  const getRowValue = React.useCallback((row, colDef) => (0, _gridRowsUtils.getRowValue)(row, colDef, apiRef), [apiRef]);
+  const getRowFormattedValue = React.useCallback((row, colDef) => {
+    const value = getRowValue(row, colDef);
+    if (!colDef || !colDef.valueFormatter) {
+      return value;
+    }
+    return colDef.valueFormatter(value, row, colDef, apiRef);
+  }, [apiRef, getRowValue]);
+  return {
+    getCellValue,
+    getRowValue,
+    getRowFormattedValue
+  };
+};
+exports.useGridParamsOverridableMethods = useGridParamsOverridableMethods;

package/hooks/features/rows/useGridRowSpanning.js

@@ -194,6 +194,9 @@ const useGridRowSpanning = (apiRef, props) => {
       range,
       rows: visibleRows
     } = (0, _useGridVisibleRows.getVisibleRows)(apiRef);
+    if (resetState && store.getSnapshot().rowSpanning !== EMPTY_STATE) {
+      store.set('rowSpanning', EMPTY_STATE);
+    }
     if (range === null || !(0, _gridRowSpanningUtils.isRowContextInitialized)(renderContext)) {
       return;
     }
@@ -220,7 +223,7 @@ const useGridRowSpanning = (apiRef, props) => {
   }, [apiRef, store]);
 
   // Reset events trigger a full re-computation of the row spanning state:
-  // - The `unstable_rowSpanning` prop is updated (feature flag)
+  // - The `rowSpanning` prop is updated (feature flag)
   // - The filtering is applied
   // - The sorting is applied
   // - The `paginationModel` is updated

package/hooks/features/rows/useGridRows.js

@@ -206,6 +206,44 @@ const useGridRows = (apiRef, props, configuration) => {
     });
     apiRef.current.publishEvent('rowExpansionChange', newNode);
   }, [apiRef]);
+  const expandAllRows = React.useCallback(() => {
+    const tree = (0, _extends2.default)({}, (0, _gridRowsSelector.gridRowTreeSelector)(apiRef));
+    const traverse = nodeId => {
+      const node = tree[nodeId];
+      if (node?.type === 'group') {
+        tree[nodeId] = (0, _extends2.default)({}, node, {
+          childrenExpanded: true
+        });
+        node.children.forEach(traverse);
+      }
+    };
+    traverse(_gridRowsUtils.GRID_ROOT_GROUP_ID);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      rows: (0, _extends2.default)({}, state.rows, {
+        tree
+      })
+    }));
+    apiRef.current.publishEvent('rowExpansionChange', tree[_gridRowsUtils.GRID_ROOT_GROUP_ID]);
+  }, [apiRef]);
+  const collapseAllRows = React.useCallback(() => {
+    const tree = (0, _extends2.default)({}, (0, _gridRowsSelector.gridRowTreeSelector)(apiRef));
+    const traverse = nodeId => {
+      const node = tree[nodeId];
+      if (node?.type === 'group') {
+        tree[nodeId] = (0, _extends2.default)({}, node, {
+          childrenExpanded: false
+        });
+        node.children.forEach(traverse);
+      }
+    };
+    traverse(_gridRowsUtils.GRID_ROOT_GROUP_ID);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      rows: (0, _extends2.default)({}, state.rows, {
+        tree
+      })
+    }));
+    apiRef.current.publishEvent('rowExpansionChange', tree[_gridRowsUtils.GRID_ROOT_GROUP_ID]);
+  }, [apiRef]);
   const getRowNode = React.useCallback(id => (0, _gridRowsSelector.gridRowNodeSelector)(apiRef, id) ?? null, [apiRef]);
   const getRowGroupChildren = React.useCallback(({
     skipAutoGeneratedRows = true,
@@ -308,7 +346,9 @@ const useGridRows = (apiRef, props, configuration) => {
   const rowProApi = {
     setRowIndex,
     setRowChildrenExpansion,
-    getRowGroupChildren
+    getRowGroupChildren,
+    expandAllRows,
+    collapseAllRows
   };
   const rowProPrivateApi = {
     updateNestedRows

package/hooks/features/sorting/gridSortingUtils.d.ts

@@ -1,6 +1,5 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridSortingModelApplier } from "./gridSortingState.js";
-import type { GridRowId } from "../../../models/index.js";
 import { GridApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
 import { GridComparatorFn, GridSortDirection, GridSortModel } from "../../../models/gridSortModel.js";
@@ -9,11 +8,10 @@ export declare const mergeStateWithSortModel: (sortModel: GridSortModel, disable
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
- * @param {Function} sortValueGetter A function to get the value to sort by.
  * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
-export declare const buildAggregatedSortingApplier: (sortModel: GridSortModel, sortValueGetter: (id: GridRowId, field: string) => any, apiRef: RefObject<GridApiCommunity>) => GridSortingModelApplier | null;
+export declare const buildAggregatedSortingApplier: (sortModel: GridSortModel, apiRef: RefObject<GridApiCommunity>) => GridSortingModelApplier | null;
 export declare const getNextGridSortDirection: (sortingOrder: readonly GridSortDirection[], current?: GridSortDirection) => GridSortDirection;
 export declare const gridStringOrNumberComparator: GridComparatorFn;
 export declare const gridNumberComparator: GridComparatorFn;

package/hooks/features/sorting/gridSortingUtils.js

@@ -33,11 +33,10 @@ const isDesc = direction => direction === 'desc';
  *
  * Transform an item of the sorting model into a method comparing two rows.
  * @param {GridSortItem} sortItem The sort item we want to apply.
- * @param {Function} sortValueGetter A function to get the value to sort by.
  * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridParsedSortItem | null} The parsed sort item. Returns `null` is the sort item is not valid.
  */
-const parseSortItem = (sortItem, sortValueGetter, apiRef) => {
+const parseSortItem = (sortItem, apiRef) => {
   const column = apiRef.current.getColumn(sortItem.field);
   if (!column || sortItem.sort === null) {
     return null;
@@ -55,7 +54,7 @@ const parseSortItem = (sortItem, sortValueGetter, apiRef) => {
     id,
     field: column.field,
     rowNode: (0, _gridRowsSelector.gridRowNodeSelector)(apiRef, id),
-    value: sortValueGetter(id, column.field),
+    value: apiRef.current.getCellValue(id, column.field),
     api: apiRef.current
   });
   return {
@@ -87,12 +86,11 @@ const compareRows = (parsedSortItems, row1, row2) => {
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
- * @param {Function} sortValueGetter A function to get the value to sort by.
  * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
-const buildAggregatedSortingApplier = (sortModel, sortValueGetter, apiRef) => {
-  const comparatorList = sortModel.map(item => parseSortItem(item, sortValueGetter, apiRef)).filter(comparator => !!comparator);
+const buildAggregatedSortingApplier = (sortModel, apiRef) => {
+  const comparatorList = sortModel.map(item => parseSortItem(item, apiRef)).filter(comparator => !!comparator);
   if (comparatorList.length === 0) {
     return null;
   }

package/hooks/features/sorting/useGridSorting.d.ts

@@ -2,10 +2,9 @@ import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
-import type { GridConfiguration } from "../../../models/configuration/gridConfiguration.js";
 export declare const sortingStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'sortModel' | 'initialState' | 'disableMultipleColumnsSorting'>>;
 /**
  * @requires useGridRows (event)
  * @requires useGridColumns (event)
  */
-export declare const useGridSorting: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState" | "sortModel" | "onSortModelChange" | "sortingOrder" | "sortingMode" | "disableColumnSorting" | "disableMultipleColumnsSorting" | "multipleColumnsSortingMode">, configuration: GridConfiguration) => void;
+export declare const useGridSorting: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState" | "sortModel" | "onSortModelChange" | "sortingOrder" | "sortingMode" | "disableColumnSorting" | "disableMultipleColumnsSorting" | "multipleColumnsSortingMode">) => void;

package/hooks/features/sorting/useGridSorting.js

@@ -35,7 +35,7 @@ const sortingStateInitializer = (state, props) => {
  * @requires useGridColumns (event)
  */
 exports.sortingStateInitializer = sortingStateInitializer;
-const useGridSorting = (apiRef, props, configuration) => {
+const useGridSorting = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridSorting');
   apiRef.current.registerControlState({
     stateId: 'sortModel',
@@ -88,7 +88,6 @@ const useGridSorting = (apiRef, props, configuration) => {
    * API METHODS
    */
   const applySorting = React.useCallback(() => {
-    const sortValueGetter = configuration.hooks.useSortValueGetter(apiRef);
     apiRef.current.setState(state => {
       if (props.sortingMode === 'server') {
         logger.debug('Skipping sorting rows as sortingMode = server');
@@ -99,7 +98,7 @@ const useGridSorting = (apiRef, props, configuration) => {
         });
       }
       const sortModel = (0, _gridSortingSelector.gridSortModelSelector)(apiRef);
-      const sortRowList = (0, _gridSortingUtils.buildAggregatedSortingApplier)(sortModel, sortValueGetter, apiRef);
+      const sortRowList = (0, _gridSortingUtils.buildAggregatedSortingApplier)(sortModel, apiRef);
       const sortedRows = apiRef.current.applyStrategyProcessor('sorting', {
         sortRowList
       });
@@ -110,7 +109,7 @@ const useGridSorting = (apiRef, props, configuration) => {
       });
     });
     apiRef.current.publishEvent('sortedRowsSet');
-  }, [apiRef, logger, configuration, props.sortingMode]);
+  }, [apiRef, logger, props.sortingMode]);
   const setSortModel = React.useCallback(model => {
     const currentModel = (0, _gridSortingSelector.gridSortModelSelector)(apiRef);
     if (currentModel !== model) {

package/index.js

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

package/internals/index.d.ts

@@ -55,6 +55,7 @@ export { useGridRowSpanning, rowSpanningStateInitializer } from "../hooks/featur
 export { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 export { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
 export { useGridRowsOverridableMethods } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
+export { useGridParamsOverridableMethods } from "../hooks/features/rows/useGridParamsOverridableMethods.js";
 export { useGridRowsPreProcessors } from "../hooks/features/rows/useGridRowsPreProcessors.js";
 export type { GridRowTreeCreationParams, GridRowTreeCreationValue, GridHydrateRowsValue, GridRowsPartialUpdates, GridRowsPartialUpdateAction, GridTreeDepths, GridRowTreeUpdatedGroupsManager, GridRowTreeUpdateGroupAction, GridPinnedRowsState } from "../hooks/features/rows/gridRowsInterfaces.js";
 export { getTreeNodeDescendants, buildRootGroup } from "../hooks/features/rows/gridRowsUtils.js";

package/internals/index.js

@@ -65,6 +65,7 @@ var _exportNames = {
   useGridAriaAttributes: true,
   useGridRowAriaAttributes: true,
   useGridRowsOverridableMethods: true,
+  useGridParamsOverridableMethods: true,
   useGridRowsPreProcessors: true,
   getTreeNodeDescendants: true,
   buildRootGroup: true,
@@ -718,6 +719,12 @@ Object.defineProperty(exports, "useGridParamsApi", {
     return _useGridParamsApi.useGridParamsApi;
   }
 });
+Object.defineProperty(exports, "useGridParamsOverridableMethods", {
+  enumerable: true,
+  get: function () {
+    return _useGridParamsOverridableMethods.useGridParamsOverridableMethods;
+  }
+});
 Object.defineProperty(exports, "useGridPreferencesPanel", {
   enumerable: true,
   get: function () {
@@ -927,6 +934,7 @@ var _useGridRowSpanning = require("../hooks/features/rows/useGridRowSpanning");
 var _useGridAriaAttributes = require("../hooks/utils/useGridAriaAttributes");
 var _useGridRowAriaAttributes = require("../hooks/features/rows/useGridRowAriaAttributes");
 var _useGridRowsOverridableMethods = require("../hooks/features/rows/useGridRowsOverridableMethods");
+var _useGridParamsOverridableMethods = require("../hooks/features/rows/useGridParamsOverridableMethods");
 var _useGridRowsPreProcessors = require("../hooks/features/rows/useGridRowsPreProcessors");
 var _gridRowsUtils = require("../hooks/features/rows/gridRowsUtils");
 var _useGridRowsMeta = require("../hooks/features/rows/useGridRowsMeta");

package/material/variables.js

@@ -23,11 +23,11 @@ function useMaterialCSSVariables() {
 function transformTheme(t) {
   const borderColor = getBorderColor(t);
   const dataGridPalette = (t.vars || t).palette.DataGrid;
-  const backgroundBase = dataGridPalette?.bg ?? (t.vars || t).palette.background.default;
+  const backgroundBase = dataGridPalette?.bg ?? (t.palette.mode === 'dark' ? `color-mix(in srgb, ${(t.vars || t).palette.background.paper} 95%, #fff)` : (t.vars || t).palette.background.paper);
   const backgroundHeader = dataGridPalette?.headerBg ?? backgroundBase;
   const backgroundPinned = dataGridPalette?.pinnedBg ?? backgroundBase;
   const backgroundBackdrop = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : (0, _styles.alpha)(t.palette.background.default, t.palette.action.disabledOpacity);
-  const backgroundOverlay = t.palette.mode === 'dark' ? `color-mix(in srgb, ${(t.vars || t).palette.background.paper} 95%, #fff)` : (t.vars || t).palette.background.paper;
+  const backgroundOverlay = t.palette.mode === 'dark' ? `color-mix(in srgb, ${(t.vars || t).palette.background.paper} 90%, #fff)` : (t.vars || t).palette.background.paper;
   const selectedColor = t.vars ? `rgb(${t.vars.palette.primary.mainChannel})` : t.palette.primary.main;
   const radius = getRadius(t);
   const fontBody = t.vars?.font?.body2 ?? formatFont(t.typography.body2);

package/models/api/gridRowApi.d.ts

@@ -109,10 +109,20 @@ export interface GridRowProApi {
   getRowGroupChildren: (params: GridRowGroupChildrenGetterParams) => GridRowId[];
   /**
    * Expand or collapse a row children.
+   * Only works for the client side data or to collapse already fetched server side rows.
+   * For server-side data, use `dataSource.fetchRows(childId)` to fetch and expand the children.
    * @param {GridRowId} id the ID of the row to expand or collapse.
    * @param {boolean} isExpanded A boolean indicating if the row must be expanded or collapsed.
    */
   setRowChildrenExpansion: (id: GridRowId, isExpanded: boolean) => void;
+  /**
+   * Expand all rows. Works for the client side data only.
+   */
+  expandAllRows: () => void;
+  /**
+   * Collapse all rows. Works for the client side data only.
+   */
+  collapseAllRows: () => void;
 }
 export interface GridRowProPrivateApi {
   /**

package/models/configuration/gridAggregationConfiguration.d.ts

@@ -12,14 +12,8 @@ export type GetCellAggregationResultFn = (id: GridRowId, field: string) => {
   value: any;
   formattedValue?: any;
 } | null;
-export type SortValueGetterFn = (id: GridRowId, field: string) => any;
 export type FilterValueGetterFn = (row: GridRowModel, colDef: GridColDef) => any;
 export interface GridAggregationInternalHooks<Api, Props> {
   useCellAggregationResult: GetCellAggregationResultFn;
-  /**
-   * @param {RefObject<Api>} apiRef The API reference
-   * @returns {SortValueGetterFn} The function to get the value to sort by
-   */
-  useSortValueGetter: (apiRef: RefObject<Api>) => SortValueGetterFn;
   useFilterValueGetter: (apiRef: RefObject<Api>, props: Props) => FilterValueGetterFn;
 }

package/models/configuration/gridConfiguration.d.ts

@@ -5,10 +5,11 @@ import type { GridCSSVariablesInterface } from "../../constants/cssVariables.js"
 import { DataGridProcessedProps } from "../props/DataGridProps.js";
 import type { GridPrivateApiCommon } from "../api/gridApiCommon.js";
 import type { GridPrivateApiCommunity } from "../api/gridApiCommunity.js";
+import type { GridParamsOverridableMethodsInternalHook } from "./gridParamsConfiguration.js";
 export interface GridAriaAttributesInternalHook {
   useGridAriaAttributes: () => React.HTMLAttributes<HTMLElement>;
 }
-export interface GridInternalHook<Api, Props> extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook, GridAggregationInternalHooks<Api, Props>, GridRowsOverridableMethodsInternalHook<Api> {
+export interface GridInternalHook<Api, Props> extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook, GridAggregationInternalHooks<Api, Props>, GridRowsOverridableMethodsInternalHook<Api>, GridParamsOverridableMethodsInternalHook<Api> {
   useCSSVariables: () => {
     id: string;
     variables: GridCSSVariablesInterface;

package/models/configuration/gridParamsConfiguration.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridParamsApi } from "../api/gridParamsApi.js";
+/**
+ * Overridable params methods interface, these methods could be overriden in a higher plan package.
+ */
+export interface GridParamsOverridableMethodsInternalHook<Api> {
+  useGridParamsOverridableMethods: (apiRef: RefObject<Api>) => {
+    getCellValue: GridParamsApi['getCellValue'];
+    getRowValue: GridParamsApi['getRowValue'];
+    getRowFormattedValue: GridParamsApi['getRowFormattedValue'];
+  };
+}

package/models/configuration/gridParamsConfiguration.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/models/props/DataGridProps.d.ts

@@ -858,6 +858,16 @@ export interface DataGridProSharedPropsWithDefaultValue {
    * @default "withModifierKey"
    */
   multipleColumnsSortingMode: 'withModifierKey' | 'always';
+  /**
+   * Sets the type of separator between pinned columns and non-pinned columns.
+   * @default 'border-and-shadow'
+   */
+  pinnedColumnsSectionSeparator: 'border' | 'shadow' | 'border-and-shadow';
+  /**
+   * Sets the type of separator between pinned rows and non-pinned rows.
+   * @default 'border-and-shadow'
+   */
+  pinnedRowsSectionSeparator: 'border' | 'border-and-shadow';
 }
 export interface DataGridProSharedPropsWithoutDefaultValue<R extends GridValidRowModel = any> {
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.12.1",
+  "version": "8.13.0",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",
@@ -37,13 +37,13 @@
     "directory": "packages/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.2",
+    "@babel/runtime": "^7.28.4",
     "@mui/utils": "^7.3.2",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "^1.5.0",
     "@mui/x-internals": "8.12.0",
-    "@mui/x-virtualizer": "0.2.0"
+    "@mui/x-virtualizer": "0.2.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/cellBorderUtils.d.ts

@@ -1,3 +1,4 @@
+import type { DataGridProcessedProps } from "../models/props/DataGridProps.js";
 import { PinnedColumnPosition } from "../internals/constants.js";
-export declare const shouldCellShowRightBorder: (pinnedPosition: PinnedColumnPosition | undefined, indexInSection: number, sectionLength: number, showCellVerticalBorderRootProp: boolean, gridHasFiller: boolean) => boolean;
-export declare const shouldCellShowLeftBorder: (pinnedPosition: PinnedColumnPosition | undefined, indexInSection: number) => boolean;
+export declare const shouldCellShowRightBorder: (pinnedPosition: PinnedColumnPosition | undefined, indexInSection: number, sectionLength: number, showCellVerticalBorderRootProp: DataGridProcessedProps["showCellVerticalBorder"], gridHasFiller: boolean, pinnedColumnsSectionSeparatorRootProp: DataGridProcessedProps["pinnedColumnsSectionSeparator"]) => boolean;
+export declare const shouldCellShowLeftBorder: (pinnedPosition: PinnedColumnPosition | undefined, indexInSection: number, showCellVerticalBorderRootProp: DataGridProcessedProps["showCellVerticalBorder"], pinnedColumnsSectionSeparatorRootProp: DataGridProcessedProps["pinnedColumnsSectionSeparator"]) => boolean;