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

package/modern/components/toolbarV8/GridToolbar.js

@@ -1,9 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"],
+  _excluded2 = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Menu from '@mui/material/Menu';
 import useId from '@mui/utils/useId';
 import { styled } from '@mui/system';
+import composeClasses from '@mui/utils/composeClasses';
+import { GridMenu } from "../menu/GridMenu.js";
 import { Toolbar } from "./Toolbar.js";
 import { ToolbarButton } from "./ToolbarButton.js";
 import { FilterPanelTrigger } from "../filterPanel/index.js";
@@ -14,7 +18,18 @@ import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { NotRendered } from "../../utils/assert.js";
 import { vars } from "../../constants/cssVariables.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    divider: ['toolbarDivider'],
+    label: ['toolbarLabel']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
 const Divider = styled(NotRendered, {
   name: 'MuiDataGrid',
   slot: 'ToolbarDivider'
@@ -22,6 +37,44 @@ const Divider = styled(NotRendered, {
   height: '50%',
   margin: vars.spacing(0, 0.5)
 });
+const Label = styled('span', {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarLabel'
+})({
+  flex: 1,
+  font: vars.typography.font.large,
+  fontWeight: vars.typography.fontWeight.medium,
+  margin: vars.spacing(0, 0.5),
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+});
+function GridToolbarDivider(props) {
+  const other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(Divider, _extends({
+    as: rootProps.slots.baseDivider,
+    orientation: "vertical",
+    className: classes.divider
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? GridToolbarDivider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: PropTypes.string,
+  orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+} : void 0;
+function GridToolbarLabel(props) {
+  const other = _objectWithoutPropertiesLoose(props, _excluded2);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(Label, _extends({
+    className: classes.label
+  }, other));
+}
 function GridToolbar(props) {
   const {
     showQuickFilter = true,
@@ -39,7 +92,9 @@ function GridToolbar(props) {
   const showExportMenu = !csvOptions?.disableToolbarButton || !printOptions?.disableToolbarButton || additionalExportMenuItems;
   const closeExportMenu = () => setExportMenuOpen(false);
   return /*#__PURE__*/_jsxs(Toolbar, {
-    children: [!rootProps.disableColumnSelector && /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+    children: [rootProps.label && /*#__PURE__*/_jsx(GridToolbarLabel, {
+      children: rootProps.label
+    }), !rootProps.disableColumnSelector && /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
       title: apiRef.current.getLocaleText('toolbarColumns'),
       children: /*#__PURE__*/_jsx(ColumnsPanelTrigger, {
         render: /*#__PURE__*/_jsx(ToolbarButton, {}),
@@ -51,7 +106,6 @@ function GridToolbar(props) {
       title: apiRef.current.getLocaleText('toolbarFilters'),
       children: /*#__PURE__*/_jsx(FilterPanelTrigger, {
         render: (triggerProps, state) => /*#__PURE__*/_jsx(ToolbarButton, _extends({}, triggerProps, {
-          color: "default",
           children: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
             badgeContent: state.filterCount,
             color: "primary",
@@ -62,10 +116,7 @@ function GridToolbar(props) {
           })
         }))
       })
-    }), showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/_jsx(Divider, {
-      as: rootProps.slots.baseDivider,
-      orientation: "vertical"
-    }), showExportMenu && /*#__PURE__*/_jsxs(React.Fragment, {
+    }), showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/_jsx(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarExport'),
         children: /*#__PURE__*/_jsx(ToolbarButton, {
@@ -74,32 +125,37 @@ function GridToolbar(props) {
           "aria-controls": exportMenuId,
           "aria-haspopup": "true",
           "aria-expanded": exportMenuOpen ? 'true' : undefined,
-          onClick: () => setExportMenuOpen(true),
+          onClick: () => setExportMenuOpen(!exportMenuOpen),
           children: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {
             fontSize: "small"
           })
         })
-      }), /*#__PURE__*/_jsxs(Menu, {
-        id: exportMenuId,
-        anchorEl: exportMenuTriggerRef.current,
+      }), /*#__PURE__*/_jsx(GridMenu, {
+        target: exportMenuTriggerRef.current,
         open: exportMenuOpen,
         onClose: closeExportMenu,
-        MenuListProps: {
-          'aria-labelledby': exportMenuTriggerId
-        },
-        children: [!printOptions?.disableToolbarButton && /*#__PURE__*/_jsx(ExportPrint, {
-          render: /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({}, rootProps.slotProps?.baseMenuItem)),
-          options: printOptions,
-          onClick: closeExportMenu,
-          children: apiRef.current.getLocaleText('toolbarExportPrint')
-        }), !csvOptions?.disableToolbarButton && /*#__PURE__*/_jsx(ExportCsv, {
-          render: /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({}, rootProps.slotProps?.baseMenuItem)),
-          options: csvOptions,
-          onClick: closeExportMenu,
-          children: apiRef.current.getLocaleText('toolbarExportCSV')
-        }), additionalExportMenuItems?.(closeExportMenu)]
+        position: "bottom-end",
+        children: /*#__PURE__*/_jsxs(rootProps.slots.baseMenuList, _extends({
+          id: exportMenuId,
+          "aria-labelledby": exportMenuTriggerId,
+          autoFocusItem: true
+        }, rootProps.slotProps?.baseMenuList, {
+          children: [!printOptions?.disableToolbarButton && /*#__PURE__*/_jsx(ExportPrint, {
+            render: /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({}, rootProps.slotProps?.baseMenuItem)),
+            options: printOptions,
+            onClick: closeExportMenu,
+            children: apiRef.current.getLocaleText('toolbarExportPrint')
+          }), !csvOptions?.disableToolbarButton && /*#__PURE__*/_jsx(ExportCsv, {
+            render: /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({}, rootProps.slotProps?.baseMenuItem)),
+            options: csvOptions,
+            onClick: closeExportMenu,
+            children: apiRef.current.getLocaleText('toolbarExportCSV')
+          }), additionalExportMenuItems?.(closeExportMenu)]
+        }))
       })]
-    }), showQuickFilter && /*#__PURE__*/_jsx(GridToolbarQuickFilter, _extends({}, quickFilterProps))]
+    }), showQuickFilter && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(GridToolbarDivider, {}), /*#__PURE__*/_jsx(GridToolbarQuickFilter, _extends({}, quickFilterProps))]
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
@@ -132,4 +188,4 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   slotProps: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-export { GridToolbar };
+export { GridToolbar, GridToolbarDivider, GridToolbarLabel };

package/modern/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/modern/components/toolbarV8/Toolbar.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["render", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import { forwardRef } from '@mui/x-internals/forwardRef';
@@ -29,8 +29,11 @@ const ToolbarRoot = styled('div', {
   flex: 0,
   display: 'flex',
   alignItems: 'center',
+  justifyContent: 'end',
   gap: vars.spacing(0.25),
   padding: vars.spacing(0.75),
+  minHeight: 52,
+  boxSizing: 'border-box',
   borderBottom: `1px solid ${vars.colors.border.base}`
 });
 
@@ -56,47 +59,99 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
   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 = useGridComponentRenderer(ToolbarRoot, render, _extends({
     role: 'toolbar',
     'aria-orientation': 'horizontal',
+    'aria-label': rootProps.label || undefined,
     className: clsx(classes.root, className),
     ownerState: rootProps
   }, other, {
@@ -104,7 +159,7 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
   }));
   React.useEffect(() => {
     if (items.length > 0) {
-      setFocusableItemId(items[0]);
+      setFocusableItemId(items[0].id);
     }
   }, [items]);
   return /*#__PURE__*/_jsx(ToolbarContext.Provider, {

package/modern/components/toolbarV8/ToolbarButton.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render"];
+const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
@@ -24,7 +24,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 const ToolbarButton = forwardRef(function ToolbarButton(props, ref) {
   const {
-      render
+      render,
+      onKeyDown,
+      onFocus,
+      disabled,
+      'aria-disabled': ariaDisabled
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -35,28 +39,44 @@ const ToolbarButton = forwardRef(function ToolbarButton(props, ref) {
     focusableItemId,
     registerItem,
     unregisterItem,
-    onItemKeyDown
+    onItemKeyDown,
+    onItemFocus,
+    onItemDisabled
   } = 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 = useGridComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, 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__*/_jsx(React.Fragment, {
@@ -68,118 +88,21 @@ process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * A ref for imperative actions.
-   * It currently only supports `focusVisible()` action.
-   */
-  action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focusVisible: PropTypes.func.isRequired
-    })
-  })]),
-  /**
-   * If `true`, the ripples are centered.
-   * They won't start at the cursor interaction position.
-   * @default false
-   */
-  centerRipple: PropTypes.bool,
   className: PropTypes.string,
-  /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
-   */
   color: PropTypes.oneOf(['default', 'inherit', 'primary']),
-  component: PropTypes.elementType,
-  /**
-   * If `true`, the component is disabled.
-   */
   disabled: PropTypes.bool,
-  /**
-   * If `true`, the  keyboard focus ripple is disabled.
-   * @default false
-   */
-  disableFocusRipple: PropTypes.bool,
-  /**
-   * If `true`, the ripple effect is disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
-   */
-  disableRipple: PropTypes.bool,
-  /**
-   * If `true`, the touch ripple effect is disabled.
-   * @default false
-   */
-  disableTouchRipple: PropTypes.bool,
-  /**
-   * If given, uses a negative margin to counteract the padding on one
-   * side (this is often helpful for aligning the left or right
-   * side of the icon with content above or below, without ruining the border
-   * size and shape).
-   */
   edge: PropTypes.oneOf(['end', 'start', false]),
-  /**
-   * If `true`, the base button will have a keyboard focus ripple.
-   * @default false
-   */
-  focusRipple: PropTypes.bool,
-  /**
-   * This prop can help identify which element has keyboard focus.
-   * The class name will be applied when the element gains the focus through keyboard interaction.
-   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
-   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
-   * if needed.
-   */
-  focusVisibleClassName: PropTypes.string,
+  id: PropTypes.string,
   label: PropTypes.string,
-  /**
-   * The component used to render a link when the `href` prop is provided.
-   * @default 'a'
-   */
-  LinkComponent: PropTypes.elementType,
-  /**
-   * If `true`, the loading indicator is visible and the button is disabled.
-   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
-   * @default null
-   */
-  loading: PropTypes.bool,
-  /**
-   * Element placed before the children if the button is in loading state.
-   * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default, it renders a `CircularProgress` that is labeled by the button itself.
-   * @default <CircularProgress color="inherit" size={16} />
-   */
-  loadingIndicator: PropTypes.node,
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onFocusVisible: PropTypes.func,
   /**
    * A function to customize rendering of the component.
    */
   render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-  /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   */
+  role: PropTypes.string,
   size: PropTypes.oneOf(['large', 'medium', 'small']),
   style: PropTypes.object,
-  /**
-   * 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]),
   tabIndex: PropTypes.number,
-  /**
-   * Props applied to the `TouchRipple` element.
-   */
-  TouchRippleProps: PropTypes.object,
-  /**
-   * A ref that points to the `TouchRipple` element.
-   */
+  title: PropTypes.string,
   touchRippleRef: PropTypes.any
 } : void 0;
 export { ToolbarButton };

package/modern/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/modern/components/virtualization/GridVirtualScrollbar.js

@@ -127,7 +127,7 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
   return /*#__PURE__*/_jsx(Container, {
     ref: useForkRef(ref, scrollbarRef),
     className: classes.root,
-    style: props.position === 'vertical' && rootProps.unstable_listView ? {
+    style: props.position === 'vertical' && rootProps.listView ? {
       height: '100%',
       top: 0
     } : undefined,

package/modern/components/virtualization/GridVirtualScroller.js

@@ -102,7 +102,7 @@ function GridVirtualScroller(props) {
     }, getScrollerProps(), {
       ownerState: ownerState,
       children: [/*#__PURE__*/_jsxs(TopContainer, {
-        children: [!rootProps.unstable_listView && /*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
+        children: [!rootProps.listView && /*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
           position: "top",
           virtualScroller: virtualScroller
         })]
@@ -120,7 +120,7 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })
       })]
-    })), hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
+    })), hasScrollX && !rootProps.listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "horizontal"
     }, getScrollbarHorizontalProps())), hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "vertical"

package/modern/constants/cssVariables.d.ts

@@ -43,6 +43,7 @@ declare const keys: {
     readonly font: {
       readonly body: "--DataGrid-t-typography-font-body";
       readonly small: "--DataGrid-t-typography-font-small";
+      readonly large: "--DataGrid-t-typography-font-large";
     };
     readonly fontFamily: {
       readonly base: "--DataGrid-t-typography-font-family-base";
@@ -134,6 +135,7 @@ export declare const vars: {
     readonly font: {
       readonly body: "--DataGrid-t-typography-font-body";
       readonly small: "--DataGrid-t-typography-font-small";
+      readonly large: "--DataGrid-t-typography-font-large";
     };
     readonly fontFamily: {
       readonly base: "--DataGrid-t-typography-font-family-base";
@@ -222,6 +224,7 @@ export declare const vars: {
       readonly font: {
         readonly body: "--DataGrid-t-typography-font-body";
         readonly small: "--DataGrid-t-typography-font-small";
+        readonly large: "--DataGrid-t-typography-font-large";
       };
       readonly fontFamily: {
         readonly base: "--DataGrid-t-typography-font-family-base";

package/modern/constants/cssVariables.js

@@ -66,7 +66,8 @@ const keys = {
   typography: {
     font: {
       body: '--DataGrid-t-typography-font-body',
-      small: '--DataGrid-t-typography-font-small'
+      small: '--DataGrid-t-typography-font-small',
+      large: '--DataGrid-t-typography-font-large'
     },
     fontFamily: {
       base: '--DataGrid-t-typography-font-family-base'

package/modern/constants/gridClasses.d.ts

@@ -598,6 +598,14 @@ export interface GridClasses {
    * Styles applied to the toolbar root element.
    */
   toolbar: string;
+  /**
+   * Styles applied to the toolbar label element.
+   */
+  toolbarLabel: string;
+  /**
+   * Styles applied to the toolbar divider element.
+   */
+  toolbarDivider: string;
   /**
    * Styles applied to the shadow scroll area element.
    * @ignore - do not document.
@@ -631,6 +639,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}`.
    */