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

package/esm/components/quickFilter/QuickFilterTrigger.js

@@ -58,147 +58,22 @@ process.env.NODE_ENV !== "production" ? QuickFilterTrigger.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,
   /**
    * Override or extend the styles applied to the component.
    */
   className: PropTypes.oneOfType([PropTypes.func, 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).
-   * @default 'primary'
-   */
-  color: PropTypes.oneOf(['error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
-  component: PropTypes.elementType,
-  /**
-   * If `true`, the component is disabled.
-   */
   disabled: PropTypes.bool,
-  /**
-   * If `true`, no elevation is used.
-   * @default false
-   */
-  disableElevation: 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,
-  /**
-   * Element placed after the children.
-   */
-  endIcon: PropTypes.node,
-  /**
-   * 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,
-  /**
-   * If `true`, the button will take up the full width of its container.
-   * @default false
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * The URL to link to when the button is clicked.
-   * If defined, an `a` element will be used as the root node.
-   */
-  href: 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,
-  /**
-   * The loading indicator can be positioned on the start, end, or the center of the button.
-   * @default 'center'
-   */
-  loadingPosition: PropTypes.oneOf(['center', 'end', 'start']),
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onFocusVisible: PropTypes.func,
+  id: PropTypes.string,
   /**
    * 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']),
-  /**
-   * Element placed before the children.
-   */
   startIcon: PropTypes.node,
   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.
-   */
-  touchRippleRef: PropTypes.any,
-  /**
-   * The variant to use.
-   * @default 'text'
-   */
-  variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
+  title: PropTypes.string,
+  touchRippleRef: PropTypes.any
 } : void 0;
 export { QuickFilterTrigger };

package/esm/components/toolbar/GridToolbar.d.ts

@@ -13,5 +13,8 @@ export interface GridToolbarProps extends GridToolbarContainerProps, GridToolbar
    */
   quickFilterProps?: GridToolbarQuickFilterProps;
 }
+/**
+ * @deprecated Use the `showToolbar` prop to show the default toolbar instead. This component will be removed in a future major release.
+ */
 declare const GridToolbar: React.ForwardRefExoticComponent<GridToolbarProps> | React.ForwardRefExoticComponent<GridToolbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridToolbar };

package/esm/components/toolbar/GridToolbar.js

@@ -11,7 +11,11 @@ import { GridToolbarFilterButton } from "./GridToolbarFilterButton.js";
 import { GridToolbarExport } from "./GridToolbarExport.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { GridToolbarQuickFilter } from "./GridToolbarQuickFilter.js";
+import { GridToolbarLabel } from "../toolbarV8/GridToolbar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @deprecated Use the `showToolbar` prop to show the default toolbar instead. This component will be removed in a future major release.
+ */
 const GridToolbar = forwardRef(function GridToolbar(props, ref) {
   // TODO v7: think about where export option should be passed.
   // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate
@@ -30,7 +34,9 @@ const GridToolbar = forwardRef(function GridToolbar(props, ref) {
   }
   return /*#__PURE__*/_jsxs(GridToolbarContainer, _extends({}, other, {
     ref: ref,
-    children: [/*#__PURE__*/_jsx(GridToolbarColumnsButton, {}), /*#__PURE__*/_jsx(GridToolbarFilterButton, {}), /*#__PURE__*/_jsx(GridToolbarDensitySelector, {}), /*#__PURE__*/_jsx(GridToolbarExport, {
+    children: [rootProps.label && /*#__PURE__*/_jsx(GridToolbarLabel, {
+      children: rootProps.label
+    }), /*#__PURE__*/_jsx(GridToolbarColumnsButton, {}), /*#__PURE__*/_jsx(GridToolbarFilterButton, {}), /*#__PURE__*/_jsx(GridToolbarDensitySelector, {}), /*#__PURE__*/_jsx(GridToolbarExport, {
       csvOptions: csvOptions,
       printOptions: printOptions
       // @ts-ignore

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

@@ -10,5 +10,8 @@ interface GridToolbarColumnsButtonProps {
     tooltip?: Partial<GridSlotProps['baseTooltip']>;
   };
 }
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/columns-panel/ Columns Panel Trigger} component instead. This component will be removed in a future major release.
+ */
 declare const GridToolbarColumnsButton: React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps> | React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarColumnsButton };

package/esm/components/toolbar/GridToolbarColumnsButton.js

@@ -9,8 +9,11 @@ import { gridPreferencePanelStateSelector } from "../../hooks/features/preferenc
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridPreferencePanelContext } from "../panel/GridPreferencePanelContext.js";
+import { useGridPanelContext } from "../panel/GridPanelContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/columns-panel/ Columns Panel Trigger} component instead. This component will be removed in a future major release.
+ */
 const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(props, ref) {
   const {
     slotProps = {}
@@ -23,7 +26,7 @@ const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(pr
   const rootProps = useGridRootProps();
   const {
     columnsPanelTriggerRef
-  } = useGridPreferencePanelContext();
+  } = useGridPanelContext();
   const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const handleRef = useForkRef(ref, columnsPanelTriggerRef);
   const showColumns = event => {

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

@@ -10,5 +10,8 @@ interface GridToolbarDensitySelectorProps {
     tooltip?: Partial<GridSlotProps['baseTooltip']>;
   };
 }
+/**
+ * @deprecated See {@link https://mui.com/x/react-data-grid/accessibility/#set-the-density-programmatically Accessibility—Set the density programmatically} for an example of adding a density selector to the toolbar. This component will be removed in a future major release.
+ */
 declare const GridToolbarDensitySelector: React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps> | React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarDensitySelector };

package/esm/components/toolbar/GridToolbarDensitySelector.js

@@ -11,6 +11,9 @@ import { GridMenu } from "../menu/GridMenu.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridClasses } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @deprecated See {@link https://mui.com/x/react-data-grid/accessibility/#set-the-density-programmatically Accessibility—Set the density programmatically} for an example of adding a density selector to the toolbar. This component will be removed in a future major release.
+ */
 const GridToolbarDensitySelector = forwardRef(function GridToolbarDensitySelector(props, ref) {
   const {
     slotProps = {}
@@ -100,7 +103,7 @@ const GridToolbarDensitySelector = forwardRef(function GridToolbarDensitySelecto
       open: open,
       target: buttonRef.current,
       onClose: handleDensitySelectorClose,
-      position: "bottom-start",
+      position: "bottom-end",
       children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
         id: densityMenuId,
         className: gridClasses.menuList,

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

@@ -35,5 +35,8 @@ declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): R
 declare namespace GridPrintExportMenuItem {
   var propTypes: any;
 }
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/export/ Export} components instead. This component will be removed in a future major release.
+ */
 declare const GridToolbarExport: React.ForwardRefExoticComponent<GridToolbarExportProps> | React.ForwardRefExoticComponent<GridToolbarExportProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarExport, GridCsvExportMenuItem, GridPrintExportMenuItem };

package/esm/components/toolbar/GridToolbarExport.js

@@ -84,6 +84,10 @@ process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
     pageStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
   })
 } : void 0;
+
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/export/ Export} components instead. This component will be removed in a future major release.
+ */
 const GridToolbarExport = forwardRef(function GridToolbarExport(props, ref) {
   const _ref = props,
     {

package/esm/components/toolbar/GridToolbarExportContainer.js

@@ -61,7 +61,7 @@ const GridToolbarExportContainer = forwardRef(function GridToolbarExportContaine
       open: open,
       target: buttonRef.current,
       onClose: handleMenuClose,
-      position: "bottom-start",
+      position: "bottom-end",
       children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
         id: exportMenuId,
         className: gridClasses.menuList,

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

@@ -11,5 +11,8 @@ export interface GridToolbarFilterButtonProps {
     badge?: Partial<GridSlotProps['baseBadge']>;
   };
 }
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/filter-panel/ Filter Panel Trigger} component instead. This component will be removed in a future major release.
+ */
 declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<GridToolbarFilterButtonProps> | React.ForwardRefExoticComponent<GridToolbarFilterButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarFilterButton };

package/esm/components/toolbar/GridToolbarFilterButton.js

@@ -14,7 +14,7 @@ import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { useGridPreferencePanelContext } from "../panel/GridPreferencePanelContext.js";
+import { useGridPanelContext } from "../panel/GridPanelContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -33,6 +33,9 @@ const GridToolbarFilterListRoot = styled('ul', {
   margin: vars.spacing(1, 1, 0.5),
   padding: vars.spacing(0, 1)
 });
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/filter-panel/ Filter Panel Trigger} component instead. This component will be removed in a future major release.
+ */
 const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(props, ref) {
   const {
     slotProps = {}
@@ -50,7 +53,7 @@ const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(prop
   const filterPanelId = useId();
   const {
     filterPanelTriggerRef
-  } = useGridPreferencePanelContext();
+  } = useGridPanelContext();
   const handleRef = useForkRef(ref, filterPanelTriggerRef);
   const tooltipContentNode = React.useMemo(() => {
     if (preferencePanel.open) {

package/esm/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -28,6 +28,9 @@ export type GridToolbarQuickFilterProps = {
     root: TextFieldProps;
   };
 };
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/quick-filter/ Quick Filter} component instead. This component will be removed in a future major release.
+ */
 declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): React.JSX.Element;
 declare namespace GridToolbarQuickFilter {
   var propTypes: any;

package/esm/components/toolbar/GridToolbarQuickFilter.js

@@ -30,8 +30,7 @@ const GridQuickFilterRoot = styled('div', {
   slot: 'ToolbarQuickFilter'
 })({
   display: 'grid',
-  alignItems: 'center',
-  marginLeft: 'auto'
+  alignItems: 'center'
 });
 const GridQuickFilterTrigger = styled(ToolbarButton, {
   name: 'MuiDataGrid',
@@ -64,6 +63,10 @@ const GridQuickFilterTextField = styled(_props => {
   opacity: ownerState.expanded ? 1 : 0,
   transition: vars.transition(['width', 'opacity'])
 }));
+
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/quick-filter/ Quick Filter} component instead. This component will be removed in a future major release.
+ */
 function GridToolbarQuickFilter(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();

package/esm/components/toolbarV8/GridToolbar.d.ts

@@ -1,11 +1,17 @@
 import * as React from 'react';
 import { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
 interface GridToolbarInternalProps {
+  additionalItems?: React.ReactNode;
   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/esm/components/toolbarV8/GridToolbar.js

@@ -1,8 +1,12 @@
 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 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";
@@ -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,12 +37,51 @@ 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,
     quickFilterProps,
     csvOptions,
     printOptions,
+    additionalItems,
     additionalExportMenuItems
   } = props;
   const apiRef = useGridApiContext();
@@ -39,7 +93,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 +107,7 @@ function GridToolbar(props) {
       title: apiRef.current.getLocaleText('toolbarFilters'),
       children: /*#__PURE__*/_jsx(FilterPanelTrigger, {
         render: (triggerProps, state) => /*#__PURE__*/_jsx(ToolbarButton, _extends({}, triggerProps, {
-          color: "default",
+          color: state.filterCount > 0 ? 'primary' : 'default',
           children: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
             badgeContent: state.filterCount,
             color: "primary",
@@ -62,10 +118,7 @@ function GridToolbar(props) {
           })
         }))
       })
-    }), showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/_jsx(Divider, {
-      as: rootProps.slots.baseDivider,
-      orientation: "vertical"
-    }), showExportMenu && /*#__PURE__*/_jsxs(React.Fragment, {
+    }), additionalItems, 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, {
@@ -83,7 +136,7 @@ function GridToolbar(props) {
         target: exportMenuTriggerRef.current,
         open: exportMenuOpen,
         onClose: closeExportMenu,
-        position: "bottom-start",
+        position: "bottom-end",
         children: /*#__PURE__*/_jsxs(rootProps.slots.baseMenuList, _extends({
           id: exportMenuId,
           "aria-labelledby": exportMenuTriggerId,
@@ -102,7 +155,9 @@ function GridToolbar(props) {
           }), 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 = {
@@ -111,6 +166,7 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   additionalExportMenuItems: PropTypes.func,
+  additionalItems: PropTypes.node,
   csvOptions: PropTypes.object,
   printOptions: PropTypes.object,
   /**
@@ -135,4 +191,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/esm/components/toolbarV8/Toolbar.d.ts

@@ -1,16 +1,12 @@
 import * as React from 'react';
 import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
-import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
    * A function to customize rendering of the component.
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 };
-type OwnerState = DataGridProcessedProps;
-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>>, {}>;
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * The top level Toolbar component that provides context to child components.
  * It renders a styled `<div />` element.

package/esm/components/toolbarV8/Toolbar.js

@@ -29,6 +29,7 @@ const ToolbarRoot = styled('div', {
   flex: 0,
   display: 'flex',
   alignItems: 'center',
+  justifyContent: 'end',
   gap: vars.spacing(0.25),
   padding: vars.spacing(0.75),
   minHeight: 52,
@@ -150,8 +151,8 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
   const element = useGridComponentRenderer(ToolbarRoot, render, _extends({
     role: 'toolbar',
     'aria-orientation': 'horizontal',
-    className: clsx(classes.root, className),
-    ownerState: rootProps
+    'aria-label': rootProps.label || undefined,
+    className: clsx(classes.root, className)
   }, other, {
     ref
   }));