@mui/x-data-grid 8.0.0-beta.1 → 8.0.0-beta.2

package/components/toolbarV8/GridToolbar.js

@@ -9,9 +9,9 @@ exports.GridToolbar = GridToolbar;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _system = require("@mui/system");
+var _GridMenu = require("../menu/GridMenu");
 var _Toolbar = require("./Toolbar");
 var _ToolbarButton = require("./ToolbarButton");
 var _filterPanel = require("../filterPanel");
@@ -82,30 +82,33 @@ function GridToolbar(props) {
           "aria-controls": exportMenuId,
           "aria-haspopup": "true",
           "aria-expanded": exportMenuOpen ? 'true' : undefined,
-          onClick: () => setExportMenuOpen(true),
+          onClick: () => setExportMenuOpen(!exportMenuOpen),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.exportIcon, {
             fontSize: "small"
           })
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Menu.default, {
-        id: exportMenuId,
-        anchorEl: exportMenuTriggerRef.current,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
+        target: exportMenuTriggerRef.current,
         open: exportMenuOpen,
         onClose: closeExportMenu,
-        MenuListProps: {
-          'aria-labelledby': exportMenuTriggerId
-        },
-        children: [!printOptions?.disableToolbarButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_export.ExportPrint, {
-          render: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({}, rootProps.slotProps?.baseMenuItem)),
-          options: printOptions,
-          onClick: closeExportMenu,
-          children: apiRef.current.getLocaleText('toolbarExportPrint')
-        }), !csvOptions?.disableToolbarButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_export.ExportCsv, {
-          render: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({}, rootProps.slotProps?.baseMenuItem)),
-          options: csvOptions,
-          onClick: closeExportMenu,
-          children: apiRef.current.getLocaleText('toolbarExportCSV')
-        }), additionalExportMenuItems?.(closeExportMenu)]
+        position: "bottom-start",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuList, (0, _extends2.default)({
+          id: exportMenuId,
+          "aria-labelledby": exportMenuTriggerId,
+          autoFocusItem: true
+        }, rootProps.slotProps?.baseMenuList, {
+          children: [!printOptions?.disableToolbarButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_export.ExportPrint, {
+            render: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({}, rootProps.slotProps?.baseMenuItem)),
+            options: printOptions,
+            onClick: closeExportMenu,
+            children: apiRef.current.getLocaleText('toolbarExportPrint')
+          }), !csvOptions?.disableToolbarButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_export.ExportCsv, {
+            render: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({}, rootProps.slotProps?.baseMenuItem)),
+            options: csvOptions,
+            onClick: closeExportMenu,
+            children: apiRef.current.getLocaleText('toolbarExportCSV')
+          }), additionalExportMenuItems?.(closeExportMenu)]
+        }))
       })]
     }), showQuickFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarQuickFilter.GridToolbarQuickFilter, (0, _extends2.default)({}, quickFilterProps))]
   });

package/components/toolbarV8/Toolbar.d.ts

@@ -8,7 +8,7 @@ export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 };
 type OwnerState = DataGridProcessedProps;
-declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & {
   ownerState: OwnerState;
 }, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 /**

package/components/toolbarV8/Toolbar.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const ToolbarRoot = (0, _styles.styled)('div', {
+const ToolbarRoot = (0, _system.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Toolbar'
 })({
@@ -39,6 +39,8 @@ const ToolbarRoot = (0, _styles.styled)('div', {
   alignItems: 'center',
   gap: _cssVariables.vars.spacing(0.25),
   padding: _cssVariables.vars.spacing(0.75),
+  minHeight: 52,
+  boxSizing: 'border-box',
   borderBottom: `1px solid ${_cssVariables.vars.colors.border.base}`
 });
 
@@ -64,44 +66,95 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
   const classes = useUtilityClasses(rootProps);
   const [focusableItemId, setFocusableItemId] = React.useState(null);
   const [items, setItems] = React.useState([]);
-  const registerItem = React.useCallback(item => {
-    setItems(prevItems => [...prevItems, item]);
+  const registerItem = React.useCallback((id, itemRef) => {
+    setItems(prevItems => [...prevItems, {
+      id,
+      ref: itemRef
+    }]);
   }, []);
-  const unregisterItem = React.useCallback(item => {
-    setItems(prevItems => prevItems.filter(i => i !== item));
-    if (focusableItemId === item) {
+  const unregisterItem = React.useCallback(id => {
+    setItems(prevItems => prevItems.filter(i => i.id !== id));
+    if (focusableItemId === id) {
       setFocusableItemId(null);
     }
   }, [focusableItemId]);
+  const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
+    let index = startIndex;
+    const itemCount = items.length;
+
+    // Look for enabled items in the specified direction
+    for (let i = 0; i < itemCount; i += 1) {
+      index += step;
+
+      // Handle wrapping around the ends
+      if (index >= itemCount) {
+        if (!wrap) {
+          return -1;
+        }
+        index = 0;
+      } else if (index < 0) {
+        if (!wrap) {
+          return -1;
+        }
+        index = itemCount - 1;
+      }
+
+      // Return if we found an enabled item
+      if (!items[index].ref.current?.disabled && items[index].ref.current?.ariaDisabled !== 'true') {
+        return index;
+      }
+    }
+
+    // If we've checked all items and found none enabled
+    return -1;
+  }, [items]);
   const onItemKeyDown = React.useCallback(event => {
     if (!focusableItemId) {
       return;
     }
+    const currentIndex = items.findIndex(item => item.id === focusableItemId);
+    let newIndex = -1;
     if (event.key === 'ArrowRight') {
       event.preventDefault();
-      const nextIndex = items.indexOf(focusableItemId) + 1;
-      setFocusableItemId(items[nextIndex < items.length ? nextIndex : 0]);
-    }
-    if (event.key === 'ArrowLeft') {
+      newIndex = findEnabledItem(currentIndex, 1);
+    } else if (event.key === 'ArrowLeft') {
       event.preventDefault();
-      const prevIndex = items.indexOf(focusableItemId) - 1;
-      setFocusableItemId(items[prevIndex < 0 ? items.length - 1 : prevIndex]);
-    }
-    if (event.key === 'Home') {
+      newIndex = findEnabledItem(currentIndex, -1);
+    } else if (event.key === 'Home') {
       event.preventDefault();
-      setFocusableItemId(items[0]);
-    }
-    if (event.key === 'End') {
+      newIndex = findEnabledItem(-1, 1, false);
+    } else if (event.key === 'End') {
       event.preventDefault();
-      setFocusableItemId(items[items.length - 1]);
+      newIndex = findEnabledItem(items.length, -1, false);
+    }
+    if (newIndex >= 0 && newIndex < items.length) {
+      const item = items[newIndex];
+      setFocusableItemId(item.id);
+      item.ref.current?.focus();
+    }
+  }, [items, focusableItemId, findEnabledItem]);
+  const onItemFocus = React.useCallback(id => {
+    if (focusableItemId !== id) {
+      setFocusableItemId(id);
+    }
+  }, [focusableItemId]);
+  const onItemDisabled = React.useCallback(id => {
+    const currentIndex = items.findIndex(item => item.id === id);
+    const newIndex = findEnabledItem(currentIndex, 1);
+    if (newIndex >= 0 && newIndex < items.length) {
+      const item = items[newIndex];
+      setFocusableItemId(item.id);
+      item.ref.current?.focus();
     }
-  }, [items, focusableItemId]);
+  }, [items, findEnabledItem]);
   const contextValue = React.useMemo(() => ({
     focusableItemId,
     registerItem,
     unregisterItem,
-    onItemKeyDown
-  }), [registerItem, unregisterItem, focusableItemId, onItemKeyDown]);
+    onItemKeyDown,
+    onItemFocus,
+    onItemDisabled
+  }), [focusableItemId, registerItem, unregisterItem, onItemKeyDown, onItemFocus, onItemDisabled]);
   const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(ToolbarRoot, render, (0, _extends2.default)({
     role: 'toolbar',
     'aria-orientation': 'horizontal',
@@ -112,7 +165,7 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
   }));
   React.useEffect(() => {
     if (items.length > 0) {
-      setFocusableItemId(items[0]);
+      setFocusableItemId(items[0].id);
     }
   }, [items]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarContext.ToolbarContext.Provider, {

package/components/toolbarV8/ToolbarButton.js

@@ -17,7 +17,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _ToolbarContext = require("./ToolbarContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["render"];
+const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"];
 /**
  * A button for performing actions from the toolbar.
  * It renders the `baseIconButton` slot.
@@ -32,7 +32,11 @@ const _excluded = ["render"];
  */
 const ToolbarButton = exports.ToolbarButton = (0, _forwardRef.forwardRef)(function ToolbarButton(props, ref) {
   const {
-      render
+      render,
+      onKeyDown,
+      onFocus,
+      disabled,
+      'aria-disabled': ariaDisabled
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
@@ -43,28 +47,44 @@ const ToolbarButton = exports.ToolbarButton = (0, _forwardRef.forwardRef)(functi
     focusableItemId,
     registerItem,
     unregisterItem,
-    onItemKeyDown
+    onItemKeyDown,
+    onItemFocus,
+    onItemDisabled
   } = (0, _ToolbarContext.useToolbarContext)();
+  const handleKeyDown = event => {
+    onItemKeyDown(event);
+    onKeyDown?.(event);
+  };
+  const handleFocus = event => {
+    onItemFocus(id);
+    onFocus?.(event);
+  };
   React.useEffect(() => {
-    registerItem(id);
+    registerItem(id, buttonRef);
     return () => unregisterItem(id);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const isInitialFocus = React.useRef(true);
+  const previousDisabled = React.useRef(disabled);
   React.useEffect(() => {
-    // Do not focus the item on initial render
-    if (focusableItemId && isInitialFocus.current) {
-      isInitialFocus.current = false;
-      return;
+    if (previousDisabled.current !== disabled && disabled === true) {
+      onItemDisabled(id, disabled);
     }
-    if (focusableItemId === id) {
-      buttonRef.current?.focus();
+    previousDisabled.current = disabled;
+  }, [disabled, id, onItemDisabled]);
+  const previousAriaDisabled = React.useRef(ariaDisabled);
+  React.useEffect(() => {
+    if (previousAriaDisabled.current !== ariaDisabled && ariaDisabled === true) {
+      onItemDisabled(id, true);
     }
-  }, [focusableItemId, id]);
+    previousAriaDisabled.current = ariaDisabled;
+  }, [ariaDisabled, id, onItemDisabled]);
   const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
-    tabIndex: focusableItemId === id ? 0 : -1,
-    onKeyDown: onItemKeyDown
+    tabIndex: focusableItemId === id ? 0 : -1
   }, other, {
+    disabled,
+    'aria-disabled': ariaDisabled,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
     ref: handleRef
   }));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {

package/components/toolbarV8/ToolbarContext.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 export interface ToolbarContextValue {
   focusableItemId: string | null;
-  registerItem: (itemId: string) => void;
-  unregisterItem: (itemId: string) => void;
+  registerItem: (id: string, ref: React.RefObject<HTMLButtonElement | null>) => void;
+  unregisterItem: (id: string) => void;
   onItemKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onItemFocus: (id: string) => void;
+  onItemDisabled: (id: string, disabled: boolean) => void;
 }
 export declare const ToolbarContext: React.Context<ToolbarContextValue | undefined>;
 export declare function useToolbarContext(): ToolbarContextValue;

package/constants/gridClasses.d.ts

@@ -631,6 +631,18 @@ export interface GridClasses {
    * Styles applied to the toolbar prompt control send button element.
    */
   toolbarPromptControlSendButton: string;
+  /**
+   * Styles applied to the toolbar quick filter root element.
+   */
+  toolbarQuickFilter: string;
+  /**
+   * Styles applied to the toolbar quick filter trigger element.
+   */
+  toolbarQuickFilterTrigger: string;
+  /**
+   * Styles applied to the toolbar quick filter control element.
+   */
+  toolbarQuickFilterControl: string;
   /**
    * Styles applied the grid if `showColumnVerticalBorder={true}`.
    */

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', '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']);
+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', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', '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/DataGrid/DataGrid.js

@@ -110,6 +110,7 @@ DataGridRaw.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * The character used to separate cell values when copying to the clipboard.
    * @default '\t'
@@ -769,6 +770,7 @@ DataGridRaw.propTypes = {
     field: PropTypes.string.isRequired,
     sort: PropTypes.oneOf(['asc', 'desc'])
   })),
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/components/GridRow.js

@@ -23,7 +23,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../colDef/gridCheckboxSelection
 import { GRID_ACTIONS_COLUMN_TYPE } from "../colDef/gridActionsColDef.js";
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, PinnedColumnPosition } from "../internals/constants.js";
 import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSelector.js";
-import { gridRowMaximumTreeDepthSelector } from "../hooks/features/rows/gridRowsSelector.js";
+import { gridRowMaximumTreeDepthSelector, gridRowNodeSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { gridEditRowsStateSelector, gridRowIsEditingSelector } from "../hooks/features/editing/gridEditingSelectors.js";
 import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFillerCell.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
@@ -79,7 +79,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
   const rowReordering = rootProps.rowReordering;
   const isRowReorderingEnabled = useGridSelector(apiRef, isRowReorderingEnabledSelector, rowReordering);
   const handleRef = useForkRef(ref, refProp);
-  const rowNode = apiRef.current.getRowNode(rowId);
+  const rowNode = gridRowNodeSelector(apiRef, rowId);
   const editing = useGridSelector(apiRef, gridRowIsEditingSelector, {
     rowId,
     editMode: rootProps.editMode
@@ -192,7 +192,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
-  const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
+  const ariaAttributes = getRowAriaAttributes(rowNode, index);
   if (typeof rootProps.getRowClassName === 'function') {
     const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
     const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
@@ -202,11 +202,6 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-
-  /* Start of rendering */
-  if (!rowNode) {
-    return null;
-  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
@@ -215,7 +210,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
     const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
     const pinnedOffset = getPinnedCellOffset(pinnedPosition, column.computedWidth, indexRelativeToAllColumns, columnPositions, columnsTotalWidth, scrollbarWidth);
-    if (rowNode?.type === 'skeletonRow') {
+    if (rowNode.type === 'skeletonRow') {
       return /*#__PURE__*/_jsx(slots.skeletonCell, {
         type: column.type,
         width: width,

package/esm/components/GridShadowScrollArea.js

@@ -17,48 +17,56 @@ const detectScroll = keyframes({
     '--scrollable': '" "'
   }
 });
+
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
 const ShadowScrollArea = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ShadowScrollArea'
-})({
-  flex: 1,
-  display: 'flex',
-  flexDirection: 'column',
-  animation: detectScroll,
-  animationTimeline: '--scroll-timeline',
-  animationFillMode: 'none',
-  boxSizing: 'border-box',
-  overflow: 'auto',
-  scrollTimeline: '--scroll-timeline block',
-  '&::before, &::after': {
-    content: '""',
-    flexShrink: 0,
-    display: 'block',
-    position: 'sticky',
-    left: 0,
-    width: '100%',
-    height: '4px',
-    animation: `${reveal} linear both`,
-    animationTimeline: '--scroll-timeline',
+})`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  animation: ${detectScroll};
+  animation-timeline: --scroll-timeline;
+  animation-fill-mode: none;
+  box-sizing: border-box;
+  overflow: auto;
+  scroll-timeline: --scroll-timeline block;
+
+  &::before,
+  &::after {
+    content: '';
+    flex-shrink: 0;
+    display: block;
+    position: sticky;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    animation: ${reveal} linear both;
+    animation-timeline: --scroll-timeline;
+
     // Custom property toggle trick:
     // - Detects if the element is scrollable
     // - https://css-tricks.com/the-css-custom-property-toggle-trick/
-    '--visibility-scrollable': 'var(--scrollable) visible',
-    '--visibility-not-scrollable': 'hidden',
-    visibility: 'var(--visibility-scrollable, var(--visibility-not-scrollable))'
-  },
-  '&::before': {
-    top: 0,
-    background: 'linear-gradient(to bottom, rgba(0,0,0,0.05) 0, transparent 100%)',
-    animationRange: '0 4px'
-  },
-  '&::after': {
-    bottom: 0,
-    background: 'linear-gradient(to top, rgba(0,0,0,0.05) 0, transparent 100%)',
-    animationDirection: 'reverse',
-    animationRange: 'calc(100% - 4px) 100%'
+    --visibility-scrollable: var(--scrollable) visible;
+    --visibility-not-scrollable: hidden;
+    visibility: var(--visibility-scrollable, var(--visibility-not-scrollable));
   }
-});
+
+  &::before {
+    top: 0;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0, transparent 100%);
+    animation-range: 0 4px;
+  }
+
+  &::after {
+    bottom: 0;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0, transparent 100%);
+    animation-direction: reverse;
+    animation-range: calc(100% - 4px) 100%;
+  }
+`;
 
 /**
  * Adds scroll shadows above and below content in a scrollable container.

package/esm/components/cell/GridBooleanCell.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { SvgIconProps } from '@mui/material/SvgIcon';
 import type { GridColDef } from '../../models/colDef/gridColDef';
 import type { GridRenderCellParams } from '../../models/params/gridCellParams';
-interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
+interface GridBooleanCellProps extends GridRenderCellParams {
   hideDescendantCount?: boolean;
 }
 declare function GridBooleanCellRaw(props: GridBooleanCellProps): React.JSX.Element | null;

package/esm/components/cell/GridEditSingleSelectCell.d.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 import { GridRenderEditCellParams } from "../../models/params/gridCellParams.js";
-export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams, Omit<SelectProps, 'id' | 'tabIndex' | 'value'> {
+export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams {
   /**
    * Callback called when the value is changed by the user.
-   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {Event<any>} event The event source of the callback.
    * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
    * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
    */
-  onValueChange?: (event: SelectChangeEvent<any>, newValue: any) => Promise<void> | void;
+  onValueChange?: (event: Parameters<NonNullable<GridSlotProps['baseSelect']['onOpen']>>[0], newValue: any) => Promise<void> | void;
   /**
    * If true, the select opens by default.
    */

package/esm/components/cell/GridEditSingleSelectCell.js

@@ -162,7 +162,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   isValidating: PropTypes.bool,
   /**
    * Callback called when the value is changed by the user.
-   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {Event<any>} event The event source of the callback.
    * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
    * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
    */

package/esm/components/containers/GridToolbarContainer.js

@@ -10,6 +10,7 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { vars } from "../../constants/cssVariables.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { Toolbar } from "../toolbarV8/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -20,16 +21,17 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
-const GridToolbarContainerRoot = styled('div', {
+const GridToolbarContainerRoot = styled(Toolbar, {
   name: 'MuiDataGrid',
   slot: 'ToolbarContainer',
-  overridesResolver: (_, styles) => styles.toolbarContainer
+  shouldForwardProp: prop => prop !== 'ownerState'
 })({
   display: 'flex',
   alignItems: 'center',
   flexWrap: 'wrap',
   gap: vars.spacing(1),
-  padding: vars.spacing(0.5, 0.5, 0)
+  padding: vars.spacing(0.5),
+  minHeight: 'auto'
 });
 const GridToolbarContainer = forwardRef(function GridToolbarContainer(props, ref) {
   const {

package/esm/components/quickFilter/QuickFilter.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { QuickFilterState } from "./QuickFilterContext.js";
+import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
 import type { GridFilterModel } from '../../models';
-export type QuickFilterProps = {
-  children: React.ReactNode;
+export type QuickFilterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
   /**
    * Function responsible for parsing text input in an array of independent values for quick filtering.
    * @param {string} input The value entered by the user
@@ -21,10 +22,32 @@ export type QuickFilterProps = {
    * @default 150
    */
   debounceMs?: number;
+  /**
+   * The default expanded state of the quick filter control.
+   * @default false
+   */
+  defaultExpanded?: boolean;
+  /**
+   * The expanded state of the quick filter control.
+   */
+  expanded?: boolean;
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<React.ComponentProps<'div'>, QuickFilterState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: QuickFilterState) => string);
+  /**
+   * Callback function that is called when the quick filter input is expanded or collapsed.
+   * @param {boolean} expanded The new expanded state of the quick filter control
+   */
+  onExpandedChange?: (expanded: boolean) => void;
 };
 /**
  * The top level Quick Filter component that provides context to child components.
- * It does not render any DOM elements.
+ * It renders a `<div />` element.
  *
  * Demos:
  *