@mui/x-data-grid 8.0.0-alpha.12 → 8.0.0-alpha.13

package/esm/constants/cssVariables.d.ts

@@ -0,0 +1,294 @@
+declare const keys: {
+  readonly spacingUnit: "--DataGrid-t-spacing-unit";
+  readonly colors: {
+    readonly border: {
+      readonly base: "--DataGrid-t-colors-border-base";
+    };
+    readonly foreground: {
+      readonly base: "--DataGrid-t-colors-foreground-base";
+      readonly muted: "--DataGrid-t-colors-foreground-muted";
+      readonly accent: "--DataGrid-t-colors-foreground-accent";
+      readonly disabled: "--DataGrid-t-colors-foreground-disabled";
+    };
+    readonly background: {
+      readonly base: "--DataGrid-t-colors-background-base";
+      readonly overlay: "--DataGrid-t-colors-background-overlay";
+      readonly backdrop: "--DataGrid-t-colors-background-backdrop";
+    };
+    readonly interactive: {
+      readonly hover: "--DataGrid-t-colors-interactive-hover";
+      readonly hoverOpacity: "--DataGrid-t-colors-interactive-hover-opacity";
+      readonly focus: "--DataGrid-t-colors-interactive-focus";
+      readonly focusOpacity: "--DataGrid-t-colors-interactive-focus-opacity";
+      readonly disabled: "--DataGrid-t-colors-interactive-disabled";
+      readonly disabledOpacity: "--DataGrid-t-colors-interactive-disabled-opacity";
+      readonly selected: "--DataGrid-t-colors-interactive-selected";
+      readonly selectedOpacity: "--DataGrid-t-colors-interactive-selected-opacity";
+    };
+  };
+  readonly header: {
+    readonly background: {
+      readonly base: "--DataGrid-t-header-background-base";
+    };
+  };
+  readonly cell: {
+    readonly background: {
+      readonly pinned: "--DataGrid-t-cell-background-pinned";
+    };
+  };
+  readonly radius: {
+    readonly base: "--DataGrid-t-radius-base";
+  };
+  readonly typography: {
+    readonly fontFamily: {
+      readonly base: "--DataGrid-t-typography-font-family-base";
+    };
+    readonly fontWeight: {
+      readonly light: "--DataGrid-t-typography-font-weight-light";
+      readonly regular: "--DataGrid-t-typography-font-weight-regular";
+      readonly medium: "--DataGrid-t-typography-font-weight-medium";
+      readonly bold: "--DataGrid-t-typography-font-weight-bold";
+    };
+    readonly body: {
+      readonly fontFamily: "--DataGrid-t-typography-body-font-family";
+      readonly fontSize: "--DataGrid-t-typography-body-font-size";
+      readonly fontWeight: "--DataGrid-t-typography-body-font-weight";
+      readonly letterSpacing: "--DataGrid-t-typography-body-letter-spacing";
+      readonly lineHeight: "--DataGrid-t-typography-body-line-height";
+    };
+    readonly small: {
+      readonly fontFamily: "--DataGrid-t-typography-small-font-family";
+      readonly fontSize: "--DataGrid-t-typography-small-font-size";
+      readonly fontWeight: "--DataGrid-t-typography-small-font-weight";
+      readonly letterSpacing: "--DataGrid-t-typography-small-letter-spacing";
+      readonly lineHeight: "--DataGrid-t-typography-small-line-height";
+    };
+  };
+  readonly transitions: {
+    readonly easing: {
+      readonly easeIn: "--DataGrid-t-transitions-easing-ease-in";
+      readonly easeOut: "--DataGrid-t-transitions-easing-ease-out";
+      readonly easeInOut: "--DataGrid-t-transitions-easing-ease-in-out";
+    };
+    readonly duration: {
+      readonly short: "--DataGrid-t-transitions-duration-short";
+      readonly base: "--DataGrid-t-transitions-duration-base";
+      readonly long: "--DataGrid-t-transitions-duration-long";
+    };
+  };
+  readonly shadows: {
+    readonly base: "--DataGrid-t-shadows-base";
+    readonly overlay: "--DataGrid-t-shadows-overlay";
+  };
+  readonly zIndex: {
+    readonly panel: "--DataGrid-t-z-index-panel";
+    readonly menu: "--DataGrid-t-z-index-menu";
+  };
+};
+export type GridCSSVariablesInterface = { [E in CreateObjectEntries<typeof keys> as E['value']]: string | number };
+type Entry = {
+  key: string;
+  value: unknown;
+};
+type EmptyEntry<TValue> = {
+  key: '';
+  value: TValue;
+};
+type CreateObjectEntries<TValue, TValueInitial = TValue> = TValue extends object ? { [TKey in keyof TValue]-?: TKey extends string ? OmitItself<TValue[TKey], TValueInitial> extends infer TNestedValue ? TNestedValue extends Entry ? {
+  key: `${TKey}.${TNestedValue['key']}`;
+  value: TNestedValue['value'];
+} : never : never : never }[keyof TValue] : EmptyEntry<TValue>;
+type OmitItself<TValue, TValueInitial> = TValue extends TValueInitial ? EmptyEntry<TValue> : CreateObjectEntries<TValue, TValueInitial>;
+export declare const vars: {
+  spacingUnit: "--DataGrid-t-spacing-unit";
+  colors: {
+    readonly border: {
+      readonly base: "--DataGrid-t-colors-border-base";
+    };
+    readonly foreground: {
+      readonly base: "--DataGrid-t-colors-foreground-base";
+      readonly muted: "--DataGrid-t-colors-foreground-muted";
+      readonly accent: "--DataGrid-t-colors-foreground-accent";
+      readonly disabled: "--DataGrid-t-colors-foreground-disabled";
+    };
+    readonly background: {
+      readonly base: "--DataGrid-t-colors-background-base";
+      readonly overlay: "--DataGrid-t-colors-background-overlay";
+      readonly backdrop: "--DataGrid-t-colors-background-backdrop";
+    };
+    readonly interactive: {
+      readonly hover: "--DataGrid-t-colors-interactive-hover";
+      readonly hoverOpacity: "--DataGrid-t-colors-interactive-hover-opacity";
+      readonly focus: "--DataGrid-t-colors-interactive-focus";
+      readonly focusOpacity: "--DataGrid-t-colors-interactive-focus-opacity";
+      readonly disabled: "--DataGrid-t-colors-interactive-disabled";
+      readonly disabledOpacity: "--DataGrid-t-colors-interactive-disabled-opacity";
+      readonly selected: "--DataGrid-t-colors-interactive-selected";
+      readonly selectedOpacity: "--DataGrid-t-colors-interactive-selected-opacity";
+    };
+  };
+  header: {
+    readonly background: {
+      readonly base: "--DataGrid-t-header-background-base";
+    };
+  };
+  cell: {
+    readonly background: {
+      readonly pinned: "--DataGrid-t-cell-background-pinned";
+    };
+  };
+  radius: {
+    readonly base: "--DataGrid-t-radius-base";
+  };
+  typography: {
+    readonly fontFamily: {
+      readonly base: "--DataGrid-t-typography-font-family-base";
+    };
+    readonly fontWeight: {
+      readonly light: "--DataGrid-t-typography-font-weight-light";
+      readonly regular: "--DataGrid-t-typography-font-weight-regular";
+      readonly medium: "--DataGrid-t-typography-font-weight-medium";
+      readonly bold: "--DataGrid-t-typography-font-weight-bold";
+    };
+    readonly body: {
+      readonly fontFamily: "--DataGrid-t-typography-body-font-family";
+      readonly fontSize: "--DataGrid-t-typography-body-font-size";
+      readonly fontWeight: "--DataGrid-t-typography-body-font-weight";
+      readonly letterSpacing: "--DataGrid-t-typography-body-letter-spacing";
+      readonly lineHeight: "--DataGrid-t-typography-body-line-height";
+    };
+    readonly small: {
+      readonly fontFamily: "--DataGrid-t-typography-small-font-family";
+      readonly fontSize: "--DataGrid-t-typography-small-font-size";
+      readonly fontWeight: "--DataGrid-t-typography-small-font-weight";
+      readonly letterSpacing: "--DataGrid-t-typography-small-letter-spacing";
+      readonly lineHeight: "--DataGrid-t-typography-small-line-height";
+    };
+  };
+  transitions: {
+    readonly easing: {
+      readonly easeIn: "--DataGrid-t-transitions-easing-ease-in";
+      readonly easeOut: "--DataGrid-t-transitions-easing-ease-out";
+      readonly easeInOut: "--DataGrid-t-transitions-easing-ease-in-out";
+    };
+    readonly duration: {
+      readonly short: "--DataGrid-t-transitions-duration-short";
+      readonly base: "--DataGrid-t-transitions-duration-base";
+      readonly long: "--DataGrid-t-transitions-duration-long";
+    };
+  };
+  shadows: {
+    readonly base: "--DataGrid-t-shadows-base";
+    readonly overlay: "--DataGrid-t-shadows-overlay";
+  };
+  zIndex: {
+    readonly panel: "--DataGrid-t-z-index-panel";
+    readonly menu: "--DataGrid-t-z-index-menu";
+  };
+  breakpoints: {
+    values: {
+      xs: number;
+      sm: number;
+      md: number;
+      lg: number;
+      xl: number;
+    };
+    up: (key: any) => string;
+  };
+  spacing: typeof spacing;
+  transition: typeof transition;
+  keys: {
+    readonly spacingUnit: "--DataGrid-t-spacing-unit";
+    readonly colors: {
+      readonly border: {
+        readonly base: "--DataGrid-t-colors-border-base";
+      };
+      readonly foreground: {
+        readonly base: "--DataGrid-t-colors-foreground-base";
+        readonly muted: "--DataGrid-t-colors-foreground-muted";
+        readonly accent: "--DataGrid-t-colors-foreground-accent";
+        readonly disabled: "--DataGrid-t-colors-foreground-disabled";
+      };
+      readonly background: {
+        readonly base: "--DataGrid-t-colors-background-base";
+        readonly overlay: "--DataGrid-t-colors-background-overlay";
+        readonly backdrop: "--DataGrid-t-colors-background-backdrop";
+      };
+      readonly interactive: {
+        readonly hover: "--DataGrid-t-colors-interactive-hover";
+        readonly hoverOpacity: "--DataGrid-t-colors-interactive-hover-opacity";
+        readonly focus: "--DataGrid-t-colors-interactive-focus";
+        readonly focusOpacity: "--DataGrid-t-colors-interactive-focus-opacity";
+        readonly disabled: "--DataGrid-t-colors-interactive-disabled";
+        readonly disabledOpacity: "--DataGrid-t-colors-interactive-disabled-opacity";
+        readonly selected: "--DataGrid-t-colors-interactive-selected";
+        readonly selectedOpacity: "--DataGrid-t-colors-interactive-selected-opacity";
+      };
+    };
+    readonly header: {
+      readonly background: {
+        readonly base: "--DataGrid-t-header-background-base";
+      };
+    };
+    readonly cell: {
+      readonly background: {
+        readonly pinned: "--DataGrid-t-cell-background-pinned";
+      };
+    };
+    readonly radius: {
+      readonly base: "--DataGrid-t-radius-base";
+    };
+    readonly typography: {
+      readonly fontFamily: {
+        readonly base: "--DataGrid-t-typography-font-family-base";
+      };
+      readonly fontWeight: {
+        readonly light: "--DataGrid-t-typography-font-weight-light";
+        readonly regular: "--DataGrid-t-typography-font-weight-regular";
+        readonly medium: "--DataGrid-t-typography-font-weight-medium";
+        readonly bold: "--DataGrid-t-typography-font-weight-bold";
+      };
+      readonly body: {
+        readonly fontFamily: "--DataGrid-t-typography-body-font-family";
+        readonly fontSize: "--DataGrid-t-typography-body-font-size";
+        readonly fontWeight: "--DataGrid-t-typography-body-font-weight";
+        readonly letterSpacing: "--DataGrid-t-typography-body-letter-spacing";
+        readonly lineHeight: "--DataGrid-t-typography-body-line-height";
+      };
+      readonly small: {
+        readonly fontFamily: "--DataGrid-t-typography-small-font-family";
+        readonly fontSize: "--DataGrid-t-typography-small-font-size";
+        readonly fontWeight: "--DataGrid-t-typography-small-font-weight";
+        readonly letterSpacing: "--DataGrid-t-typography-small-letter-spacing";
+        readonly lineHeight: "--DataGrid-t-typography-small-line-height";
+      };
+    };
+    readonly transitions: {
+      readonly easing: {
+        readonly easeIn: "--DataGrid-t-transitions-easing-ease-in";
+        readonly easeOut: "--DataGrid-t-transitions-easing-ease-out";
+        readonly easeInOut: "--DataGrid-t-transitions-easing-ease-in-out";
+      };
+      readonly duration: {
+        readonly short: "--DataGrid-t-transitions-duration-short";
+        readonly base: "--DataGrid-t-transitions-duration-base";
+        readonly long: "--DataGrid-t-transitions-duration-long";
+      };
+    };
+    readonly shadows: {
+      readonly base: "--DataGrid-t-shadows-base";
+      readonly overlay: "--DataGrid-t-shadows-overlay";
+    };
+    readonly zIndex: {
+      readonly panel: "--DataGrid-t-z-index-panel";
+      readonly menu: "--DataGrid-t-z-index-menu";
+    };
+  };
+};
+declare function spacing(a?: number, b?: number, c?: number, d?: number): string;
+declare function transition(props: string[], options?: {
+  duration?: string;
+  easing?: string;
+  delay?: number;
+}): string;
+export {};

package/esm/constants/cssVariables.js

@@ -0,0 +1,161 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+// NOTE: Breakpoints can't come from the theme because we need access to them at
+// initialization time and media-queries can't use CSS variables. For users with
+// custom breakpoints, we might want to provide a way to configure them globally
+// instead of through the theme.
+const breakpoints = {
+  values: {
+    xs: 0,
+    // phone
+    sm: 600,
+    // tablet
+    md: 900,
+    // small laptop
+    lg: 1200,
+    // desktop
+    xl: 1536 // large screen
+  },
+  up: key => {
+    const values = breakpoints.values;
+    const value = typeof values[key] === 'number' ? values[key] : key;
+    return `@media (min-width:${value}px)`;
+  }
+};
+const keys = {
+  spacingUnit: '--DataGrid-t-spacing-unit',
+  /* Variables */
+  colors: {
+    border: {
+      base: '--DataGrid-t-colors-border-base'
+    },
+    foreground: {
+      base: '--DataGrid-t-colors-foreground-base',
+      muted: '--DataGrid-t-colors-foreground-muted',
+      accent: '--DataGrid-t-colors-foreground-accent',
+      disabled: '--DataGrid-t-colors-foreground-disabled'
+    },
+    background: {
+      base: '--DataGrid-t-colors-background-base',
+      overlay: '--DataGrid-t-colors-background-overlay',
+      backdrop: '--DataGrid-t-colors-background-backdrop'
+    },
+    interactive: {
+      hover: '--DataGrid-t-colors-interactive-hover',
+      hoverOpacity: '--DataGrid-t-colors-interactive-hover-opacity',
+      focus: '--DataGrid-t-colors-interactive-focus',
+      focusOpacity: '--DataGrid-t-colors-interactive-focus-opacity',
+      disabled: '--DataGrid-t-colors-interactive-disabled',
+      disabledOpacity: '--DataGrid-t-colors-interactive-disabled-opacity',
+      selected: '--DataGrid-t-colors-interactive-selected',
+      selectedOpacity: '--DataGrid-t-colors-interactive-selected-opacity'
+    }
+  },
+  header: {
+    background: {
+      base: '--DataGrid-t-header-background-base'
+    }
+  },
+  cell: {
+    background: {
+      pinned: '--DataGrid-t-cell-background-pinned'
+    }
+  },
+  radius: {
+    base: '--DataGrid-t-radius-base'
+  },
+  typography: {
+    fontFamily: {
+      base: '--DataGrid-t-typography-font-family-base'
+    },
+    fontWeight: {
+      light: '--DataGrid-t-typography-font-weight-light',
+      regular: '--DataGrid-t-typography-font-weight-regular',
+      medium: '--DataGrid-t-typography-font-weight-medium',
+      bold: '--DataGrid-t-typography-font-weight-bold'
+    },
+    body: {
+      fontFamily: '--DataGrid-t-typography-body-font-family',
+      fontSize: '--DataGrid-t-typography-body-font-size',
+      fontWeight: '--DataGrid-t-typography-body-font-weight',
+      letterSpacing: '--DataGrid-t-typography-body-letter-spacing',
+      lineHeight: '--DataGrid-t-typography-body-line-height'
+    },
+    small: {
+      fontFamily: '--DataGrid-t-typography-small-font-family',
+      fontSize: '--DataGrid-t-typography-small-font-size',
+      fontWeight: '--DataGrid-t-typography-small-font-weight',
+      letterSpacing: '--DataGrid-t-typography-small-letter-spacing',
+      lineHeight: '--DataGrid-t-typography-small-line-height'
+    }
+  },
+  transitions: {
+    easing: {
+      easeIn: '--DataGrid-t-transitions-easing-ease-in',
+      easeOut: '--DataGrid-t-transitions-easing-ease-out',
+      easeInOut: '--DataGrid-t-transitions-easing-ease-in-out'
+    },
+    duration: {
+      short: '--DataGrid-t-transitions-duration-short',
+      base: '--DataGrid-t-transitions-duration-base',
+      long: '--DataGrid-t-transitions-duration-long'
+    }
+  },
+  shadows: {
+    base: '--DataGrid-t-shadows-base',
+    overlay: '--DataGrid-t-shadows-overlay'
+  },
+  zIndex: {
+    panel: '--DataGrid-t-z-index-panel',
+    menu: '--DataGrid-t-z-index-menu'
+  }
+};
+const values = wrap(keys);
+export const vars = _extends({
+  breakpoints,
+  spacing,
+  transition,
+  keys
+}, values);
+function spacing(a, b, c, d) {
+  /* eslint-disable prefer-template */
+  if (a === undefined) {
+    return spacingString(1);
+  }
+  if (b === undefined) {
+    return spacingString(a);
+  }
+  if (c === undefined) {
+    return spacingString(a) + ' ' + spacingString(b);
+  }
+  if (d === undefined) {
+    return spacingString(a) + ' ' + spacingString(b) + ' ' + spacingString(c);
+  }
+  return spacingString(a) + ' ' + spacingString(b) + ' ' + spacingString(c) + ' ' + spacingString(d);
+  /* eslint-enable prefer-template */
+}
+function spacingString(value) {
+  if (value === 0) {
+    return '0';
+  }
+  return `calc(var(--DataGrid-t-spacing-unit) * ${value})`;
+}
+function transition(props, options) {
+  const {
+    duration = vars.transitions.duration.base,
+    easing = vars.transitions.easing.easeInOut,
+    delay = 0
+  } = options ?? {};
+  return props.map(prop => `${prop} ${duration} ${easing} ${delay}ms`).join(', ');
+}
+function wrap(input) {
+  if (typeof input === 'string') {
+    return `var(${input})`;
+  }
+  const result = {};
+  for (const key in input) {
+    if (Object.hasOwn(input, key)) {
+      result[key] = wrap(input[key]);
+    }
+  }
+  return result;
+}

package/esm/constants/dataGridPropsDefaultValues.js

@@ -51,6 +51,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   rowSpanning: false,
   showCellVerticalBorder: false,
   showColumnVerticalBorder: false,
+  showToolbar: false,
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
   throttleRowsMs: 0,

package/esm/constants/defaultGridSlotsComponents.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement, GridColumnHeaderSortIcon, GridNoColumnsOverlay } from "../components/index.js";
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement, GridColumnHeaderSortIcon, GridNoColumnsOverlay, GridToolbar } from "../components/index.js";
 import { GridCell } from "../components/cell/GridCell.js";
 import { GridColumnHeaders } from "../components/GridColumnHeaders.js";
 import { GridColumnMenu } from "../components/menu/columnMenu/GridColumnMenu.js";
@@ -22,7 +22,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
   bottomContainer: GridBottomContainer,
   footer: GridFooter,
   footerRowCount: GridRowCount,
-  toolbar: null,
+  toolbar: GridToolbar,
   pinnedRows: GridPinnedRows,
   loadingOverlay: GridLoadingOverlay,
   noResultsOverlay: GridNoResultsOverlay,

package/esm/constants/gridClasses.d.ts

@@ -260,6 +260,14 @@ export interface GridClasses {
    * Styles applied to the columns management footer element.
    */
   columnsManagementFooter: string;
+  /**
+   * Styles applied to the columns management scroll area element.
+   */
+  columnsManagementScrollArea: string;
+  /**
+   * Styles applied to the columns management empty text element.
+   */
+  columnsManagementEmptyText: string;
   /**
    * Styles applied to the top container.
    */
@@ -586,6 +594,11 @@ export interface GridClasses {
    * Styles applied to the sort icon element.
    */
   sortIcon: string;
+  /**
+   * Styles applied to the shadow scroll area element.
+   * @ignore - do not document.
+   */
+  shadowScrollArea: string;
   /**
    * Styles applied to the toolbar container element.
    */

package/esm/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'shadowScrollArea', 'toolbarContainer', 'toolbarFilterList', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom']);

package/esm/context/GridContextProvider.js

@@ -3,6 +3,7 @@ import { GridApiContext } from "../components/GridApiContext.js";
 import { GridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
 import { GridRootPropsContext } from "./GridRootPropsContext.js";
 import { GridConfigurationContext } from "../components/GridConfigurationContext.js";
+import { GridCSSVariablesContext } from "../utils/css/context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridContextProvider({
   privateApiRef,
@@ -19,7 +20,9 @@ export function GridContextProvider({
         value: privateApiRef,
         children: /*#__PURE__*/_jsx(GridApiContext.Provider, {
           value: apiRef,
-          children: children
+          children: /*#__PURE__*/_jsx(GridCSSVariablesContext, {
+            children: children
+          })
         })
       })
     })

package/esm/hooks/features/clipboard/useGridClipboard.js

@@ -3,6 +3,7 @@ import { useGridApiOptionHandler, useGridNativeEventListener } from "../../utils
 import { gridFocusCellSelector } from "../focus/gridFocusStateSelector.js";
 import { serializeCellValue } from "../export/serializers/csvSerializer.js";
 import { isCopyShortcut } from "../../../utils/keyboardUtils.js";
+import { gridRowSelectionCountSelector } from "../rowSelection/index.js";
 function writeToClipboardPolyfill(data) {
   const span = document.createElement('span');
   span.style.whiteSpace = 'pre';
@@ -63,8 +64,8 @@ export const useGridClipboard = (apiRef, props) => {
       return;
     }
     let textToCopy = '';
-    const selectedRows = apiRef.current.getSelectedRows();
-    if (selectedRows.size > 0) {
+    const selectedRowsCount = gridRowSelectionCountSelector(apiRef);
+    if (selectedRowsCount > 0) {
       textToCopy = apiRef.current.getDataAsCsv({
         includeHeaders: false,
         delimiter: clipboardCopyCellDelimiter,

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -135,7 +135,7 @@ export const useGridColumnHeaders = props => {
       const indexInSection = i;
       const sectionLength = renderedColumns.length;
       const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
-      const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
+      const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller);
       columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
@@ -255,7 +255,7 @@ export const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         pinnedOffset: pinnedOffset,
         showLeftBorder: shouldCellShowLeftBorder(pinnedPosition, indexInSection),
-        showRightBorder: shouldCellShowRightBorder(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showCellVerticalBorder, gridHasFiller)
+        showRightBorder: shouldCellShowRightBorder(pinnedPosition, indexInSection, visibleColumnGroupHeader.length, rootProps.showColumnVerticalBorder, gridHasFiller)
       }, index);
     });
     return getFillers(params, children, leftOverflow);

package/esm/hooks/features/columnResize/useGridColumnResize.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import useEventCallback from '@mui/utils/useEventCallback';
+import ownerDocument from '@mui/utils/ownerDocument';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { useRtl } from '@mui/system/RtlProvider';
 import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol, escapeOperandAttributeSelector } from "../../../utils/domUtils.js";

package/esm/hooks/features/columns/gridColumnsInterfaces.d.ts

@@ -14,6 +14,7 @@ export interface GridColumnsState {
   orderedFields: string[];
   lookup: GridColumnLookup;
   columnVisibilityModel: GridColumnVisibilityModel;
+  initialColumnVisibilityModel: GridColumnVisibilityModel;
 }
 export interface GridPinnedColumnFields {
   left?: string[];

package/esm/hooks/features/columns/gridColumnsSelector.d.ts

@@ -26,6 +26,13 @@ export declare const gridColumnDefinitionsSelector: import("../../..").OutputSel
  * @category Visible Columns
  */
 export declare const gridColumnVisibilityModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, import("./gridColumnsInterfaces").GridColumnVisibilityModel>;
+/**
+ * Get the "initial" column visibility model, containing the visibility status of each column.
+ * It is updated when the `columns` prop is updated or when `updateColumns` API method is called.
+ * If a column is not registered in the model, it is visible.
+ * @category Visible Columns
+ */
+export declare const gridInitialColumnVisibilityModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, import("./gridColumnsInterfaces").GridColumnVisibilityModel>;
 /**
  * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Visible Columns

package/esm/hooks/features/columns/gridColumnsSelector.js

@@ -33,6 +33,14 @@ export const gridColumnDefinitionsSelector = createSelectorMemoized(gridColumnFi
  */
 export const gridColumnVisibilityModelSelector = createSelector(gridColumnsStateSelector, columnsState => columnsState.columnVisibilityModel);
 
+/**
+ * Get the "initial" column visibility model, containing the visibility status of each column.
+ * It is updated when the `columns` prop is updated or when `updateColumns` API method is called.
+ * If a column is not registered in the model, it is visible.
+ * @category Visible Columns
+ */
+export const gridInitialColumnVisibilityModelSelector = createSelector(gridColumnsStateSelector, columnsState => columnsState.initialColumnVisibilityModel);
+
 /**
  * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Visible Columns

package/esm/hooks/features/columns/gridColumnsUtils.d.ts

@@ -48,12 +48,14 @@ export declare const createColumnsState: ({
   columnsToUpsert,
   initialState,
   columnVisibilityModel,
-  keepOnlyColumnsToUpsert
+  keepOnlyColumnsToUpsert,
+  updateInitialVisibilityModel
 }: {
   columnsToUpsert: readonly GridColDef[];
   initialState: GridColumnsInitialState | undefined;
   columnVisibilityModel?: GridColumnVisibilityModel;
   keepOnlyColumnsToUpsert: boolean;
+  updateInitialVisibilityModel?: boolean;
   apiRef: RefObject<GridApiCommunity>;
 }) => GridColumnsState;
 export declare function getFirstNonSpannedColumnToRender({