@mui/x-data-grid 8.12.0 → 8.13.0

package/esm/hooks/features/overlays/useGridOverlays.js

@@ -1,23 +1,14 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import { useGridSelector } from "../../utils/index.js";
-import { useGridApiContext } from "../../utils/useGridApiContext.js";
-import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { gridExpandedRowCountSelector } from "../filter/index.js";
 import { gridRowCountSelector, gridRowsLoadingSelector } from "../rows/index.js";
 import { gridPinnedRowsCountSelector } from "../rows/gridRowsSelector.js";
-import { GridOverlayWrapper } from "../../../components/base/GridOverlays.js";
 import { gridVisibleColumnDefinitionsSelector } from "../columns/index.js";
 import { gridPivotActiveSelector } from "../pivoting/index.js";
-
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const useGridOverlays = () => {
-  const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
+export const useGridOverlays = (apiRef, props) => {
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
   const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
@@ -45,25 +36,10 @@ export 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__*/_jsx(GridOverlayWrapper, _extends({}, overlaysProps, {
-      children: /*#__PURE__*/_jsx(Overlay, _extends({}, overlayProps))
-    }));
-  };
-  if (process.env.NODE_ENV !== "production") getOverlay.displayName = "getOverlay";
-  return {
-    getOverlay,
-    overlaysProps
-  };
 };

package/esm/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/esm/hooks/features/rows/useGridParamsApi.js

@@ -4,7 +4,6 @@ import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridFocusCellSelector, gridTabIndexCellSelector } from "../focus/gridFocusStateSelector.js";
 import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 import { gridRowNodeSelector } from "./gridRowsSelector.js";
-import { getRowValue as getRowValueFn } from "./gridRowsUtils.js";
 export class MissingRowIdError extends Error {}
 
 /**
@@ -15,7 +14,7 @@ export 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 function useGridParamsApi(apiRef, props) {
+export function useGridParamsApi(apiRef, props, configuration) {
   const getColumnHeaderParams = React.useCallback(field => ({
     field,
     colDef: apiRef.current.getColumn(field)
@@ -87,25 +86,6 @@ export 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) => getRowValueFn(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;
@@ -127,12 +107,13 @@ export 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/esm/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/esm/hooks/features/rows/useGridParamsOverridableMethods.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { getRowValue as getRowValueFn } from "./gridRowsUtils.js";
+export 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) => getRowValueFn(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
+  };
+};

package/esm/hooks/features/rows/useGridRowSpanning.js

@@ -186,6 +186,9 @@ export const useGridRowSpanning = (apiRef, props) => {
       range,
       rows: visibleRows
     } = getVisibleRows(apiRef);
+    if (resetState && store.getSnapshot().rowSpanning !== EMPTY_STATE) {
+      store.set('rowSpanning', EMPTY_STATE);
+    }
     if (range === null || !isRowContextInitialized(renderContext)) {
       return;
     }
@@ -212,7 +215,7 @@ export 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/esm/hooks/features/rows/useGridRows.js

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

package/esm/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/esm/hooks/features/sorting/gridSortingUtils.js

@@ -24,11 +24,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;
@@ -46,7 +45,7 @@ const parseSortItem = (sortItem, sortValueGetter, apiRef) => {
     id,
     field: column.field,
     rowNode: gridRowNodeSelector(apiRef, id),
-    value: sortValueGetter(id, column.field),
+    value: apiRef.current.getCellValue(id, column.field),
     api: apiRef.current
   });
   return {
@@ -78,12 +77,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.
  */
-export const buildAggregatedSortingApplier = (sortModel, sortValueGetter, apiRef) => {
-  const comparatorList = sortModel.map(item => parseSortItem(item, sortValueGetter, apiRef)).filter(comparator => !!comparator);
+export const buildAggregatedSortingApplier = (sortModel, apiRef) => {
+  const comparatorList = sortModel.map(item => parseSortItem(item, apiRef)).filter(comparator => !!comparator);
   if (comparatorList.length === 0) {
     return null;
   }

package/esm/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/esm/hooks/features/sorting/useGridSorting.js

@@ -26,7 +26,7 @@ export const sortingStateInitializer = (state, props) => {
  * @requires useGridRows (event)
  * @requires useGridColumns (event)
  */
-export const useGridSorting = (apiRef, props, configuration) => {
+export const useGridSorting = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridSorting');
   apiRef.current.registerControlState({
     stateId: 'sortModel',
@@ -79,7 +79,6 @@ export 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');
@@ -90,7 +89,7 @@ export const useGridSorting = (apiRef, props, configuration) => {
         });
       }
       const sortModel = gridSortModelSelector(apiRef);
-      const sortRowList = buildAggregatedSortingApplier(sortModel, sortValueGetter, apiRef);
+      const sortRowList = buildAggregatedSortingApplier(sortModel, apiRef);
       const sortedRows = apiRef.current.applyStrategyProcessor('sorting', {
         sortRowList
       });
@@ -101,7 +100,7 @@ export 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 = gridSortModelSelector(apiRef);
     if (currentModel !== model) {

package/esm/index.js

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

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

@@ -44,6 +44,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 { getTreeNodeDescendants, buildRootGroup } from "../hooks/features/rows/gridRowsUtils.js";
 export { useGridRowsMeta, rowsMetaStateInitializer } from "../hooks/features/rows/useGridRowsMeta.js";

package/esm/material/variables.js

@@ -17,11 +17,11 @@ export 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})` : 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/esm/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/esm/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/esm/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/esm/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/esm/models/configuration/gridParamsConfiguration.js

@@ -0,0 +1 @@
+export {};

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

package/esm/utils/cellBorderUtils.js

@@ -1,7 +1,7 @@
 import { PinnedColumnPosition } from "../internals/constants.js";
-export const shouldCellShowRightBorder = (pinnedPosition, indexInSection, sectionLength, showCellVerticalBorderRootProp, gridHasFiller) => {
+export const shouldCellShowRightBorder = (pinnedPosition, indexInSection, sectionLength, showCellVerticalBorderRootProp, gridHasFiller, pinnedColumnsSectionSeparatorRootProp) => {
   const isSectionLastCell = indexInSection === sectionLength - 1;
-  if (pinnedPosition === PinnedColumnPosition.LEFT && isSectionLastCell) {
+  if (pinnedColumnsSectionSeparatorRootProp?.startsWith('border') && pinnedPosition === PinnedColumnPosition.LEFT && isSectionLastCell) {
     return true;
   }
   if (showCellVerticalBorderRootProp) {
@@ -16,6 +16,9 @@ export const shouldCellShowRightBorder = (pinnedPosition, indexInSection, sectio
   }
   return false;
 };
-export const shouldCellShowLeftBorder = (pinnedPosition, indexInSection) => {
-  return pinnedPosition === PinnedColumnPosition.RIGHT && indexInSection === 0;
+export const shouldCellShowLeftBorder = (pinnedPosition, indexInSection, showCellVerticalBorderRootProp, pinnedColumnsSectionSeparatorRootProp) => {
+  if (pinnedColumnsSectionSeparatorRootProp?.startsWith('border')) {
+    return pinnedPosition === PinnedColumnPosition.RIGHT && indexInSection === 0;
+  }
+  return showCellVerticalBorderRootProp && pinnedPosition === PinnedColumnPosition.RIGHT && indexInSection === 0;
 };

package/hooks/core/useGridVirtualizer.js

@@ -29,6 +29,7 @@ var _rowSelection = require("../features/rowSelection");
 var _dataGridPropsDefaultValues = require("../../constants/dataGridPropsDefaultValues");
 var _gridRowsUtils = require("../features/rows/gridRowsUtils");
 var _gridColumnsUtils = require("../features/columns/gridColumnsUtils");
+var _useGridOverlays = require("../features/overlays/useGridOverlays");
 var _jsxRuntime = require("react/jsx-runtime");
 function identity(x) {
   return x;
@@ -86,6 +87,7 @@ function useGridVirtualizer(apiRef, rootProps) {
   const headersTotalHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, rootProps);
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
+  const overlayState = (0, _useGridOverlays.useGridOverlays)(apiRef, rootProps);
   const dimensionsParams = {
     rowHeight,
     headerHeight,
@@ -148,6 +150,8 @@ function useGridVirtualizer(apiRef, rootProps) {
     pinnedRows,
     pinnedColumns,
     autoHeight,
+    disableHorizontalScroll: listView,
+    disableVerticalScroll: overlayState.overlayType === 'noColumnsOverlay' || overlayState.loadingOverlayVariant === 'skeleton',
     minimalContentHeight: _gridRowsUtils.minimalContentHeight,
     getRowHeight: React.useMemo(() => {
       if (!getRowHeight) {

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -116,10 +116,7 @@ const useGridColumnHeaders = props => {
         role: "presentation",
         className: (0, _clsx.default)(_gridClasses.gridClasses.filler, borderBottom && _gridClasses.gridClasses['filler--borderBottom'])
       }), hasScrollbarFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
-        header: true,
-        pinnedRight: isPinnedRight,
-        borderBottom: borderBottom,
-        borderTop: false
+        pinnedRight: isPinnedRight
       })]
     });
   };
@@ -141,11 +138,10 @@ const useGridColumnHeaders = props => {
       const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       const siblingWithBorderingSeparator = pinnedPosition === _constants.PinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
       const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
-      const isLastUnpinned = columnIndex + 1 === columnPositions.length - pinnedColumns.right.length;
       const indexInSection = i;
       const sectionLength = renderedColumns.length;
-      const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
-      const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller);
+      const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection, rootProps.showColumnVerticalBorder, rootProps.pinnedColumnsSectionSeparator);
+      const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator);
       columns.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderItem.GridColumnHeaderItem, (0, _extends2.default)({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -159,7 +155,6 @@ const useGridColumnHeaders = props => {
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
         pinnedOffset: pinnedOffset,
-        isLastUnpinned: isLastUnpinned,
         isSiblingFocused: isSiblingFocused,
         showLeftBorder: showLeftBorder,
         showRightBorder: showRightBorder
@@ -265,8 +260,8 @@ const useGridColumnHeaders = props => {
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
         pinnedOffset: pinnedOffset,
-        showLeftBorder: (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection),
-        showRightBorder: (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showColumnVerticalBorder, gridHasFiller)
+        showLeftBorder: (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection, rootProps.showColumnVerticalBorder, rootProps.pinnedColumnsSectionSeparator),
+        showRightBorder: (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showColumnVerticalBorder, gridHasFiller, rootProps.pinnedColumnsSectionSeparator)
       }, index);
     });
     return getFillers(params, children, leftOverflow);

package/hooks/features/columnResize/useGridColumnResize.js

@@ -23,6 +23,7 @@ var _utils2 = require("../../../utils/utils");
 var _useTimeout = require("../../utils/useTimeout");
 var _gridColumnsInterfaces = require("../columns/gridColumnsInterfaces");
 var _columns = require("../columns");
+var _dimensions = require("../dimensions");
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -70,6 +71,18 @@ function getResizeDirection(separator, isRtl) {
   }
   return side;
 }
+function getPinnedWidthProperty(isRtl, pinnedPosition) {
+  if (pinnedPosition === _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT) {
+    return isRtl ? '--DataGrid-rightPinnedWidth' : '--DataGrid-leftPinnedWidth';
+  }
+  return isRtl ? '--DataGrid-leftPinnedWidth' : '--DataGrid-rightPinnedWidth';
+}
+function getPinnedWidth(dimensions, isRtl, pinnedPosition) {
+  if (pinnedPosition === _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT) {
+    return isRtl ? dimensions.rightPinnedWidth : dimensions.leftPinnedWidth;
+  }
+  return isRtl ? dimensions.leftPinnedWidth : dimensions.rightPinnedWidth;
+}
 function preventClick(event) {
   event.preventDefault();
   event.stopImmediatePropagation();
@@ -240,6 +253,7 @@ const useGridColumnResize = (apiRef, props) => {
       }
       div.style.setProperty('--width', finalWidth);
     });
+    const dimensions = (0, _dimensions.gridDimensionsSelector)(apiRef);
     const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
     if (pinnedPosition === _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT) {
       updateProperty(refs.fillerLeft, 'width', widthDiff);
@@ -249,6 +263,7 @@ const useGridColumnResize = (apiRef, props) => {
       refs.leftPinnedHeadersAfter.forEach(header => {
         updateProperty(header, 'left', widthDiff);
       });
+      apiRef.current.rootElementRef?.current?.style.setProperty(getPinnedWidthProperty(isRtl, pinnedPosition), `${getPinnedWidth(dimensions, isRtl, pinnedPosition) + columnWidthDiff}px`);
     }
     if (pinnedPosition === _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT) {
       updateProperty(refs.fillerRight, 'width', widthDiff);
@@ -258,6 +273,7 @@ const useGridColumnResize = (apiRef, props) => {
       refs.rightPinnedHeadersBefore.forEach(header => {
         updateProperty(header, 'right', widthDiff);
       });
+      apiRef.current.rootElementRef?.current?.style.setProperty(getPinnedWidthProperty(isRtl, pinnedPosition), `${getPinnedWidth(dimensions, isRtl, pinnedPosition) + columnWidthDiff}px`);
     }
   };
   const finishResize = nativeEvent => {