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

package/modern/components/quickFilter/index.js

@@ -1,3 +1,4 @@
 export * from "./QuickFilter.js";
 export * from "./QuickFilterControl.js";
-export * from "./QuickFilterClear.js";
+export * from "./QuickFilterClear.js";
+export * from "./QuickFilterTrigger.js";

package/modern/components/toolbar/GridToolbarColumnsButton.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 interface GridToolbarColumnsButtonProps {
   /**
    * The props used for each slot inside.
    * @default {}
    */
   slotProps?: {
-    button?: Partial<ButtonProps>;
-    tooltip?: Partial<TooltipProps>;
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
   };
 }
 declare const GridToolbarColumnsButton: React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps> | React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/modern/components/toolbar/GridToolbarDensitySelector.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 interface GridToolbarDensitySelectorProps {
   /**
    * The props used for each slot inside.
    * @default {}
    */
   slotProps?: {
-    button?: Partial<ButtonProps>;
-    tooltip?: Partial<TooltipProps>;
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
   };
 }
 declare const GridToolbarDensitySelector: React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps> | React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps & React.RefAttributes<HTMLButtonElement>>;

package/modern/components/toolbar/GridToolbarExport.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 import { GridCsvExportOptions, GridPrintExportOptions } from "../../models/gridExport.js";
 export interface GridExportDisplayOptions {
   /**
@@ -23,8 +22,8 @@ export interface GridToolbarExportProps {
    * @default {}
    */
   slotProps?: {
-    button?: Partial<ButtonProps>;
-    tooltip?: Partial<TooltipProps>;
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
   };
   [x: `data-${string}`]: string;
 }

package/modern/components/toolbar/GridToolbarExportContainer.d.ts

@@ -1,14 +1,13 @@
 import * as React from 'react';
-import { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 interface GridToolbarExportContainerProps {
   /**
    * The props used for each slot inside.
    * @default {}
    */
   slotProps?: {
-    button?: Partial<ButtonProps>;
-    tooltip?: Partial<TooltipProps>;
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
   };
 }
 declare const GridToolbarExportContainer: React.ForwardRefExoticComponent<React.PropsWithChildren<GridToolbarExportContainerProps>> | React.ForwardRefExoticComponent<GridToolbarExportContainerProps & {

package/modern/components/toolbar/GridToolbarFilterButton.d.ts

@@ -1,16 +1,14 @@
 import * as React from 'react';
-import { ButtonProps } from '@mui/material/Button';
-import { TooltipProps } from '@mui/material/Tooltip';
-import { BadgeProps } from "../../models/gridBaseSlots.js";
+import type { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 export interface GridToolbarFilterButtonProps {
   /**
    * The props used for each slot inside.
    * @default {}
    */
   slotProps?: {
-    button?: Partial<ButtonProps>;
-    tooltip?: Partial<TooltipProps>;
-    badge?: Partial<BadgeProps>;
+    button?: Partial<GridSlotProps['baseButton']>;
+    tooltip?: Partial<GridSlotProps['baseTooltip']>;
+    badge?: Partial<GridSlotProps['baseBadge']>;
   };
 }
 declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<GridToolbarFilterButtonProps> | React.ForwardRefExoticComponent<GridToolbarFilterButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
-import { forwardRef } from '@mui/x-internals/forwardRef';
 import useForkRef from '@mui/utils/useForkRef';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { vars } from "../../constants/cssVariables.js";
 import { gridColumnLookupSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
@@ -33,9 +33,6 @@ const GridToolbarFilterListRoot = styled('ul', {
   margin: vars.spacing(1, 1, 0.5),
   padding: vars.spacing(0, 1)
 });
-
-// FIXME(v8:romgrk): override slotProps
-
 const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(props, ref) {
   const {
     slotProps = {}

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -7,38 +7,71 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
 import clsx from 'clsx';
-// import { NotRendered } from '../../utils/assert';
-
 import { getDataGridUtilityClass } from "../../constants/index.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { QuickFilter, QuickFilterClear, QuickFilterControl } from "../quickFilter/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { QuickFilter, QuickFilterClear, QuickFilterControl, QuickFilterTrigger } from "../quickFilter/index.js";
+import { ToolbarButton } from "../toolbarV8/index.js";
+import { vars } from "../../constants/cssVariables.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
   const slots = {
-    root: ['toolbarQuickFilter']
+    root: ['toolbarQuickFilter'],
+    trigger: ['toolbarQuickFilterTrigger'],
+    control: ['toolbarQuickFilterControl']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+const GridQuickFilterRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarQuickFilter'
+})({
+  display: 'grid',
+  alignItems: 'center',
+  marginLeft: 'auto'
+});
+const GridQuickFilterTrigger = styled(ToolbarButton, {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarQuickFilterTrigger'
+})(({
+  ownerState
+}) => ({
+  gridArea: '1 / 1',
+  width: 'min-content',
+  height: 'min-content',
+  zIndex: 1,
+  opacity: ownerState.expanded ? 0 : 1,
+  pointerEvents: ownerState.expanded ? 'none' : 'auto',
+  transition: vars.transition(['opacity'])
+}));
 
 // TODO: Use NotRendered from /utils/assert
 // Currently causes react-docgen to fail
-const GridToolbarQuickFilterRoot = styled(_props => {
+const GridQuickFilterTextField = styled(_props => {
   throw new Error('Failed assertion: should not be rendered');
 }, {
   name: 'MuiDataGrid',
-  slot: 'ToolbarQuickFilter'
-})({
-  width: 260,
-  marginLeft: 'auto'
-});
+  slot: 'ToolbarQuickFilterControl'
+})(({
+  ownerState
+}) => ({
+  gridArea: '1 / 1',
+  overflowX: 'clip',
+  width: ownerState.expanded ? 260 : 'var(--trigger-width)',
+  opacity: ownerState.expanded ? 1 : 0,
+  transition: vars.transition(['width', 'opacity'])
+}));
 function GridToolbarQuickFilter(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const classes = useUtilityClasses(rootProps);
+  const ownerState = {
+    classes: rootProps.classes,
+    expanded: false
+  };
+  const classes = useUtilityClasses(ownerState);
   const {
       quickFilterParser,
       quickFilterFormatter,
@@ -51,40 +84,65 @@ function GridToolbarQuickFilter(props) {
     parser: quickFilterParser,
     formatter: quickFilterFormatter,
     debounceMs: debounceMs,
-    children: /*#__PURE__*/_jsx(QuickFilterControl, {
-      render: _ref => {
-        let {
-            ref,
-            slotProps: controlSlotProps
-          } = _ref,
-          controlProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
-        return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
-          as: rootProps.slots.baseTextField,
-          className: clsx(classes.root, className),
-          inputRef: ref,
-          "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
-          placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
-          size: "small",
-          slotProps: _extends({
-            input: _extends({
-              startAdornment: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
+    render: (quickFilterProps, state) => {
+      const currentOwnerState = _extends({}, ownerState, {
+        expanded: state.expanded
+      });
+      return /*#__PURE__*/_jsxs(GridQuickFilterRoot, _extends({}, quickFilterProps, {
+        className: clsx(classes.root, className),
+        children: [/*#__PURE__*/_jsx(QuickFilterTrigger, {
+          render: triggerProps => /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+            title: apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
+            enterDelay: 0 // Prevents tooltip lagging behind transitioning trigger element
+            ,
+            children: /*#__PURE__*/_jsx(GridQuickFilterTrigger, _extends({
+              className: classes.trigger
+            }, triggerProps, {
+              ownerState: currentOwnerState,
+              color: "default",
+              "aria-disabled": state.expanded,
+              children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
                 fontSize: "small"
-              }),
-              endAdornment: controlProps.value ? /*#__PURE__*/_jsx(QuickFilterClear, {
-                render: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, {
-                  size: "small",
-                  edge: "end",
-                  "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
-                  children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
+              })
+            }))
+          })
+        }), /*#__PURE__*/_jsx(QuickFilterControl, {
+          render: _ref => {
+            let {
+                ref,
+                slotProps: controlSlotProps
+              } = _ref,
+              controlProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
+            return /*#__PURE__*/_jsx(GridQuickFilterTextField, _extends({
+              as: rootProps.slots.baseTextField,
+              className: classes.control,
+              ownerState: currentOwnerState,
+              inputRef: ref,
+              "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
+              placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
+              size: "small",
+              slotProps: _extends({
+                input: _extends({
+                  startAdornment: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
                     fontSize: "small"
-                  })
-                })
-              }) : null
-            }, controlSlotProps?.input)
-          }, controlSlotProps)
-        }, rootProps.slotProps?.baseTextField, controlProps, slotProps?.root, other));
-      }
-    })
+                  }),
+                  endAdornment: controlProps.value ? /*#__PURE__*/_jsx(QuickFilterClear, {
+                    render: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, {
+                      size: "small",
+                      edge: "end",
+                      "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+                      children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
+                        fontSize: "small"
+                      })
+                    })
+                  }) : null
+                }, controlSlotProps?.input)
+              }, controlSlotProps)
+            }, rootProps.slotProps?.baseTextField, controlProps, slotProps?.root, other));
+          }
+        })]
+      }));
+    }
   });
 }
 process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {

package/modern/components/toolbarV8/GridToolbar.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 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 { GridMenu } from "../menu/GridMenu.js";
 import { Toolbar } from "./Toolbar.js";
 import { ToolbarButton } from "./ToolbarButton.js";
 import { FilterPanelTrigger } from "../filterPanel/index.js";
@@ -74,30 +74,33 @@ 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-start",
+        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))]
   });

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';
@@ -31,6 +31,8 @@ const ToolbarRoot = styled('div', {
   alignItems: 'center',
   gap: vars.spacing(0.25),
   padding: vars.spacing(0.75),
+  minHeight: 52,
+  boxSizing: 'border-box',
   borderBottom: `1px solid ${vars.colors.border.base}`
 });
 
@@ -56,44 +58,95 @@ 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',
@@ -104,7 +157,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, {

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/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}`.
    */