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

package/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/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/components/toolbar/GridToolbarDensitySelector.js

@@ -108,7 +108,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = (0, _for
       open: open,
       target: buttonRef.current,
       onClose: handleDensitySelectorClose,
-      position: "bottom-start",
+      position: "bottom-end",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
         id: densityMenuId,
         className: _gridClasses.gridClasses.menuList,

package/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/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/components/toolbar/GridToolbarExportContainer.js

@@ -69,7 +69,7 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = (0, _for
       open: open,
       target: buttonRef.current,
       onClose: handleMenuClose,
-      position: "bottom-start",
+      position: "bottom-end",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
         id: exportMenuId,
         className: _gridClasses.gridClasses.menuList,

package/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/components/toolbar/GridToolbarFilterButton.js

@@ -11,8 +11,8 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
-var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _cssVariables = require("../../constants/cssVariables");
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
@@ -41,9 +41,6 @@ const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
   margin: _cssVariables.vars.spacing(1, 1, 0.5),
   padding: _cssVariables.vars.spacing(0, 1)
 });
-
-// FIXME(v8:romgrk): override slotProps
-
 const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRef.forwardRef)(function GridToolbarFilterButton(props, ref) {
   const {
     slotProps = {}

package/components/toolbar/GridToolbarQuickFilter.js

@@ -17,34 +17,68 @@ var _constants = require("../../constants");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _quickFilter = require("../quickFilter");
+var _toolbarV = require("../toolbarV8");
+var _cssVariables = require("../../constants/cssVariables");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className", "slotProps"],
-  _excluded2 = ["ref", "slotProps"]; // import { NotRendered } from '../../utils/assert';
+  _excluded2 = ["ref", "slotProps"];
 const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
   const slots = {
-    root: ['toolbarQuickFilter']
+    root: ['toolbarQuickFilter'],
+    trigger: ['toolbarQuickFilterTrigger'],
+    control: ['toolbarQuickFilterControl']
   };
   return (0, _composeClasses.default)(slots, _constants.getDataGridUtilityClass, classes);
 };
+const GridQuickFilterRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarQuickFilter'
+})({
+  display: 'grid',
+  alignItems: 'center'
+});
+const GridQuickFilterTrigger = (0, _system.styled)(_toolbarV.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: _cssVariables.vars.transition(['opacity'])
+}));
 
 // TODO: Use NotRendered from /utils/assert
 // Currently causes react-docgen to fail
-const GridToolbarQuickFilterRoot = (0, _system.styled)(_props => {
+const GridQuickFilterTextField = (0, _system.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: _cssVariables.vars.transition(['width', 'opacity'])
+}));
 function GridToolbarQuickFilter(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const classes = useUtilityClasses(rootProps);
+  const ownerState = {
+    classes: rootProps.classes,
+    expanded: false
+  };
+  const classes = useUtilityClasses(ownerState);
   const {
       quickFilterParser,
       quickFilterFormatter,
@@ -57,40 +91,65 @@ function GridToolbarQuickFilter(props) {
     parser: quickFilterParser,
     formatter: quickFilterFormatter,
     debounceMs: debounceMs,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_quickFilter.QuickFilterControl, {
-      render: _ref => {
-        let {
-            ref,
-            slotProps: controlSlotProps
-          } = _ref,
-          controlProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarQuickFilterRoot, (0, _extends2.default)({
-          as: rootProps.slots.baseTextField,
-          className: (0, _clsx.default)(classes.root, className),
-          inputRef: ref,
-          "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
-          placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
-          size: "small",
-          slotProps: (0, _extends2.default)({
-            input: (0, _extends2.default)({
-              startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
+    render: (quickFilterProps, state) => {
+      const currentOwnerState = (0, _extends2.default)({}, ownerState, {
+        expanded: state.expanded
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridQuickFilterRoot, (0, _extends2.default)({}, quickFilterProps, {
+        className: (0, _clsx.default)(classes.root, className),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_quickFilter.QuickFilterTrigger, {
+          render: triggerProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+            title: apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
+            enterDelay: 0 // Prevents tooltip lagging behind transitioning trigger element
+            ,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridQuickFilterTrigger, (0, _extends2.default)({
+              className: classes.trigger
+            }, triggerProps, {
+              ownerState: currentOwnerState,
+              color: "default",
+              "aria-disabled": state.expanded,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
                 fontSize: "small"
-              }),
-              endAdornment: controlProps.value ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_quickFilter.QuickFilterClear, {
-                render: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, {
-                  size: "small",
-                  edge: "end",
-                  "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
+              })
+            }))
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_quickFilter.QuickFilterControl, {
+          render: _ref => {
+            let {
+                ref,
+                slotProps: controlSlotProps
+              } = _ref,
+              controlProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridQuickFilterTextField, (0, _extends2.default)({
+              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: (0, _extends2.default)({
+                input: (0, _extends2.default)({
+                  startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
                     fontSize: "small"
-                  })
-                })
-              }) : null
-            }, controlSlotProps?.input)
-          }, controlSlotProps)
-        }, rootProps.slotProps?.baseTextField, controlProps, slotProps?.root, other));
-      }
-    })
+                  }),
+                  endAdornment: controlProps.value ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_quickFilter.QuickFilterClear, {
+                    render: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, {
+                      size: "small",
+                      edge: "end",
+                      "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+                      children: /*#__PURE__*/(0, _jsxRuntime.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/components/toolbarV8/GridToolbar.d.ts

@@ -4,8 +4,13 @@ interface GridToolbarInternalProps {
   additionalExportMenuItems?: (onMenuItemClick: () => void) => React.ReactNode;
 }
 export type GridToolbarProps = GridSlotProps['toolbar'] & GridToolbarInternalProps;
+declare function GridToolbarDivider(props: GridSlotProps['baseDivider']): React.JSX.Element;
+declare namespace GridToolbarDivider {
+  var propTypes: any;
+}
+declare function GridToolbarLabel(props: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
 declare function GridToolbar(props: GridToolbarProps): React.JSX.Element;
 declare namespace GridToolbar {
   var propTypes: any;
 }
-export { GridToolbar };
+export { GridToolbar, GridToolbarDivider, GridToolbarLabel };

package/components/toolbarV8/GridToolbar.js

@@ -1,17 +1,21 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridToolbar = GridToolbar;
+exports.GridToolbarDivider = GridToolbarDivider;
+exports.GridToolbarLabel = GridToolbarLabel;
 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 _Menu = _interopRequireDefault(require("@mui/material/Menu"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _system = require("@mui/system");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _GridMenu = require("../menu/GridMenu");
 var _Toolbar = require("./Toolbar");
 var _ToolbarButton = require("./ToolbarButton");
 var _filterPanel = require("../filterPanel");
@@ -22,7 +26,20 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _assert = require("../../utils/assert");
 var _cssVariables = require("../../constants/cssVariables");
+var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className"],
+  _excluded2 = ["className"];
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    divider: ['toolbarDivider'],
+    label: ['toolbarLabel']
+  };
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
 const Divider = (0, _system.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'ToolbarDivider'
@@ -30,6 +47,44 @@ const Divider = (0, _system.styled)(_assert.NotRendered, {
   height: '50%',
   margin: _cssVariables.vars.spacing(0, 0.5)
 });
+const Label = (0, _system.styled)('span', {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarLabel'
+})({
+  flex: 1,
+  font: _cssVariables.vars.typography.font.large,
+  fontWeight: _cssVariables.vars.typography.fontWeight.medium,
+  margin: _cssVariables.vars.spacing(0, 0.5),
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+});
+function GridToolbarDivider(props) {
+  const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, (0, _extends2.default)({
+    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.default.string,
+  orientation: _propTypes.default.oneOf(['horizontal', 'vertical'])
+} : void 0;
+function GridToolbarLabel(props) {
+  const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({
+    className: classes.label
+  }, other));
+}
 function GridToolbar(props) {
   const {
     showQuickFilter = true,
@@ -47,7 +102,9 @@ function GridToolbar(props) {
   const showExportMenu = !csvOptions?.disableToolbarButton || !printOptions?.disableToolbarButton || additionalExportMenuItems;
   const closeExportMenu = () => setExportMenuOpen(false);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Toolbar.Toolbar, {
-    children: [!rootProps.disableColumnSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+    children: [rootProps.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarLabel, {
+      children: rootProps.label
+    }), !rootProps.disableColumnSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
       title: apiRef.current.getLocaleText('toolbarColumns'),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnsPanel.ColumnsPanelTrigger, {
         render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, {}),
@@ -59,7 +116,6 @@ function GridToolbar(props) {
       title: apiRef.current.getLocaleText('toolbarFilters'),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterPanel.FilterPanelTrigger, {
         render: (triggerProps, state) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, (0, _extends2.default)({}, triggerProps, {
-          color: "default",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
             badgeContent: state.filterCount,
             color: "primary",
@@ -70,10 +126,7 @@ function GridToolbar(props) {
           })
         }))
       })
-    }), showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
-      as: rootProps.slots.baseDivider,
-      orientation: "vertical"
-    }), showExportMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    }), showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarExport'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, {
@@ -82,32 +135,37 @@ 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-end",
+        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))]
+    }), showQuickFilter && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarDivider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarQuickFilter.GridToolbarQuickFilter, (0, _extends2.default)({}, quickFilterProps))]
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {

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>>, {}>;
 /**