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

package/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/constants/cssVariables.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.vars = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/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);
+const vars = exports.vars = (0, _extends2.default)({
+  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/constants/dataGridPropsDefaultValues.js

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

package/constants/defaultGridSlotsComponents.js

@@ -28,7 +28,7 @@ const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = exports.DATA_GRID_DEFAULT_SLOTS_COMPO
   bottomContainer: _GridBottomContainer.GridBottomContainer,
   footer: _components.GridFooter,
   footerRowCount: _components.GridRowCount,
-  toolbar: null,
+  toolbar: _components.GridToolbar,
   pinnedRows: _GridPinnedRows.GridPinnedRows,
   loadingOverlay: _components.GridLoadingOverlay,
   noResultsOverlay: _GridNoResultsOverlay.GridNoResultsOverlay,

package/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/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_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']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_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/context/GridContextProvider.js

@@ -10,6 +10,7 @@ var _GridApiContext = require("../components/GridApiContext");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
 var _GridRootPropsContext = require("./GridRootPropsContext");
 var _GridConfigurationContext = require("../components/GridConfigurationContext");
+var _context = require("../utils/css/context");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridContextProvider({
   privateApiRef,
@@ -26,7 +27,9 @@ function GridContextProvider({
         value: privateApiRef,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridApiContext.GridApiContext.Provider, {
           value: apiRef,
-          children: children
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.GridCSSVariablesContext, {
+            children: children
+          })
         })
       })
     })

package/esm/DataGrid/DataGrid.js

@@ -11,9 +11,11 @@ import { GridContextProvider } from "../context/GridContextProvider.js";
 import { useDataGridComponent } from "./useDataGridComponent.js";
 import { useDataGridProps } from "./useDataGridProps.js";
 import { propValidatorsDataGrid, validateProps } from "../internals/utils/propValidation.js";
+import { useMaterialCSSVariables } from "../material/variables.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
+    useCSSVariables: useMaterialCSSVariables,
     useGridAriaAttributes,
     useGridRowAriaAttributes
   }
@@ -138,6 +140,21 @@ DataGridRaw.propTypes = {
    * If defined, the Data Grid will ignore the `hide` property in [[GridColDef]].
    */
   columnVisibilityModel: PropTypes.object,
+  /**
+   * The data source object.
+   */
+  dataSource: PropTypes.shape({
+    getRows: PropTypes.func.isRequired,
+    updateRow: PropTypes.func
+  }),
+  /**
+   * Data source cache object.
+   */
+  dataSourceCache: PropTypes.shape({
+    clear: PropTypes.func.isRequired,
+    get: PropTypes.func.isRequired,
+    set: PropTypes.func.isRequired
+  }),
   /**
    * Set the density of the Data Grid.
    * @default "standard"
@@ -490,6 +507,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnWidthChange: PropTypes.func,
+  /**
+   * Callback fired when a data source request fails.
+   * @param {GridGetRowsError | GridUpdateRowError} error The data source error object.
+   */
+  onDataSourceError: PropTypes.func,
   /**
    * Callback fired when the density changes.
    * @param {GridDensity} density New density value.
@@ -687,7 +709,10 @@ DataGridRaw.propTypes = {
   /**
    * Sets the row selection model of the Data Grid.
    */
-  rowSelectionModel: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired), PropTypes.number, PropTypes.string]),
+  rowSelectionModel: PropTypes /* @typescript-to-proptypes-ignore */.shape({
+    ids: PropTypes.instanceOf(Set).isRequired,
+    type: PropTypes.oneOf(['exclude', 'include']).isRequired
+  }),
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"
@@ -712,6 +737,11 @@ DataGridRaw.propTypes = {
    * @default false
    */
   showColumnVerticalBorder: PropTypes.bool,
+  /**
+   * If `true`, the toolbar is displayed.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * Overridable components props dynamically passed to the component at rendering.
    */
@@ -743,27 +773,6 @@ DataGridRaw.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The data source object.
-   */
-  unstable_dataSource: PropTypes.shape({
-    getRows: PropTypes.func.isRequired,
-    updateRow: PropTypes.func
-  }),
-  /**
-   * Data source cache object.
-   */
-  unstable_dataSourceCache: PropTypes.shape({
-    clear: PropTypes.func.isRequired,
-    get: PropTypes.func.isRequired,
-    set: PropTypes.func.isRequired
-  }),
-  /**
-   * Callback fired when the data source request fails.
-   * @param {Error} error The error object.
-   * @param {GridGetRowsParams} params With all properties from [[GridGetRowsParams]].
-   */
-  unstable_onDataSourceError: PropTypes.func,
   /**
    * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`.
    * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly.

package/esm/DataGrid/useDataGridProps.js

@@ -17,7 +17,7 @@ const DATA_GRID_FORCED_PROPS = {
   signature: 'DataGrid',
   unstable_listView: false
 };
-const getDataGridForcedProps = themedProps => _extends({}, DATA_GRID_FORCED_PROPS, themedProps.unstable_dataSource ? {
+const getDataGridForcedProps = themedProps => _extends({}, DATA_GRID_FORCED_PROPS, themedProps.dataSource ? {
   filterMode: 'server',
   sortingMode: 'server',
   paginationMode: 'server'