@mui/x-data-grid 8.0.0-alpha.13 → 8.0.0-alpha.14

package/components/toolbar/GridToolbarQuickFilter.js

@@ -9,21 +9,17 @@ exports.GridToolbarQuickFilter = GridToolbarQuickFilter;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/material/styles");
-var _utils = require("@mui/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _OutlinedInput = require("@mui/material/OutlinedInput");
-var _cssVariables = require("../../constants/cssVariables");
+var _system = require("@mui/system");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _constants = require("../../constants");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridSelector = require("../../hooks/utils/useGridSelector");
-var _filter = require("../../hooks/features/filter");
-var _utils2 = require("../../utils/utils");
+var _quickFilter = require("../quickFilter");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className", "slotProps"];
+const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className", "slotProps"],
+  _excluded2 = ["ref", "slotProps"]; // import { NotRendered } from '../../utils/assert';
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -33,98 +29,69 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _constants.getDataGridUtilityClass, classes);
 };
-const GridToolbarQuickFilterRoot = (0, _styles.styled)('div', {
+
+// TODO: Use NotRendered from /utils/assert
+// Currently causes react-docgen to fail
+const GridToolbarQuickFilterRoot = (0, _system.styled)(_props => {
+  throw new Error('Failed assertion: should not be rendered');
+}, {
   name: 'MuiDataGrid',
-  slot: 'ToolbarQuickFilter',
-  overridesResolver: (props, styles) => styles.toolbarQuickFilter
+  slot: 'ToolbarQuickFilter'
 })({
-  [`.${_OutlinedInput.outlinedInputClasses.root}`]: {
-    fontSize: _cssVariables.vars.typography.body.fontSize
-  },
-  [`& input[type="search"]::-webkit-search-decoration,
-    & input[type="search"]::-webkit-search-cancel-button,
-    & input[type="search"]::-webkit-search-results-button,
-    & input[type="search"]::-webkit-search-results-decoration`]: {
-    /* clears the 'X' icon from Chrome */
-    display: 'none'
-  }
+  width: 260,
+  marginLeft: 'auto'
 });
-const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
-const defaultSearchValueFormatter = values => values.join(' ');
 function GridToolbarQuickFilter(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
-  const quickFilterValues = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridQuickFilterValuesSelector);
   const {
-      quickFilterParser = defaultSearchValueParser,
-      quickFilterFormatter = defaultSearchValueFormatter,
-      debounceMs = rootProps.filterDebounceMs,
+      quickFilterParser,
+      quickFilterFormatter,
+      debounceMs,
       className,
       slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
-  const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
-  React.useEffect(() => {
-    if (!(0, _utils2.isDeepEqual)(prevQuickFilterValuesRef.current, quickFilterValues)) {
-      // The model of quick filter value has been updated
-      prevQuickFilterValuesRef.current = quickFilterValues;
-
-      // Update the input value if needed to match the new model
-      setSearchValue(prevSearchValue => (0, _utils2.isDeepEqual)(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues ?? []));
-    }
-  }, [quickFilterValues, quickFilterFormatter, quickFilterParser]);
-  const updateSearchValue = React.useCallback(newSearchValue => {
-    const newQuickFilterValues = quickFilterParser(newSearchValue);
-    prevQuickFilterValuesRef.current = newQuickFilterValues;
-    apiRef.current.setQuickFilterValues(newQuickFilterValues);
-  }, [apiRef, quickFilterParser]);
-  const debouncedUpdateSearchValue = React.useMemo(() => (0, _utils.unstable_debounce)(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
-  React.useEffect(() => debouncedUpdateSearchValue.clear, [debouncedUpdateSearchValue]);
-  const handleSearchValueChange = React.useCallback(event => {
-    const newSearchValue = event.target.value;
-    setSearchValue(newSearchValue);
-    debouncedUpdateSearchValue(newSearchValue);
-  }, [debouncedUpdateSearchValue]);
-  const handleSearchReset = React.useCallback(() => {
-    setSearchValue('');
-    updateSearchValue('');
-  }, [updateSearchValue]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarQuickFilterRoot, (0, _extends2.default)({
-    as: rootProps.slots.baseTextField,
-    ownerState: rootProps,
-    size: "small",
-    value: searchValue,
-    onChange: handleSearchValueChange,
-    className: (0, _clsx.default)(classes.root, className),
-    placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
-    "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
-    type: "search"
-  }, other, {
-    slotProps: (0, _extends2.default)({}, slotProps?.root.slotProps, {
-      input: (0, _extends2.default)({
-        startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
-          fontSize: "small"
-        }),
-        endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-          "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_quickFilter.QuickFilter, {
+    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",
-          edge: "end",
-          style: searchValue ? {
-            visibility: 'visible'
-          } : {
-            visibility: 'hidden'
-          },
-          onClick: handleSearchReset
-        }, rootProps.slotProps?.baseIconButton, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
-            fontSize: "small"
-          })
-        }))
-      }, slotProps?.root.slotProps?.input)
+          slotProps: (0, _extends2.default)({
+            input: (0, _extends2.default)({
+              startAdornment: /*#__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, {
+                    fontSize: "small"
+                  })
+                })
+              }) : null
+            }, controlSlotProps?.input)
+          }, controlSlotProps)
+        }, rootProps.slotProps?.baseTextField, controlProps, slotProps?.root, other));
+      }
     })
-  }, rootProps.slotProps?.baseTextField));
+  });
 }
 process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/toolbarV8/GridToolbar.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
+interface GridToolbarInternalProps {
+  additionalExportMenuItems?: (onMenuItemClick: () => void) => React.ReactNode;
+}
+export type GridToolbarProps = GridSlotProps['toolbar'] & GridToolbarInternalProps;
+declare function GridToolbar(props: GridToolbarProps): React.JSX.Element;
+declare namespace GridToolbar {
+  var propTypes: any;
+}
+export { GridToolbar };

package/components/toolbarV8/GridToolbar.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridToolbar = GridToolbar;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _system = require("@mui/system");
+var _Toolbar = require("./Toolbar");
+var _ToolbarButton = require("./ToolbarButton");
+var _filterPanel = require("../filterPanel");
+var _columnsPanel = require("../columnsPanel");
+var _export = require("../export");
+var _GridToolbarQuickFilter = require("../toolbar/GridToolbarQuickFilter");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _assert = require("../../utils/assert");
+var _cssVariables = require("../../constants/cssVariables");
+var _jsxRuntime = require("react/jsx-runtime");
+const Divider = (0, _system.styled)(_assert.NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarDivider'
+})({
+  height: '50%',
+  margin: _cssVariables.vars.spacing(0, 0.5)
+});
+function GridToolbar(props) {
+  const {
+    showQuickFilter = true,
+    quickFilterProps,
+    csvOptions,
+    printOptions,
+    additionalExportMenuItems
+  } = props;
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const [exportMenuOpen, setExportMenuOpen] = React.useState(false);
+  const exportMenuTriggerRef = React.useRef(null);
+  const exportMenuId = (0, _useId.default)();
+  const exportMenuTriggerId = (0, _useId.default)();
+  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, {
+      title: apiRef.current.getLocaleText('toolbarColumns'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_columnsPanel.ColumnsPanelTrigger, {
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, {}),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {
+          fontSize: "small"
+        })
+      })
+    }), !rootProps.disableColumnFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+      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",
+            variant: "dot",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.openFilterButtonIcon, {
+              fontSize: "small"
+            })
+          })
+        }))
+      })
+    }), showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
+      as: rootProps.slots.baseDivider,
+      orientation: "vertical"
+    }), 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, {
+          ref: exportMenuTriggerRef,
+          id: exportMenuTriggerId,
+          "aria-controls": exportMenuId,
+          "aria-haspopup": "true",
+          "aria-expanded": exportMenuOpen ? 'true' : undefined,
+          onClick: () => setExportMenuOpen(true),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.exportIcon, {
+            fontSize: "small"
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Menu.default, {
+        id: exportMenuId,
+        anchorEl: 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)]
+      })]
+    }), showQuickFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarQuickFilter.GridToolbarQuickFilter, (0, _extends2.default)({}, quickFilterProps))]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  additionalExportMenuItems: _propTypes.default.func,
+  csvOptions: _propTypes.default.object,
+  printOptions: _propTypes.default.object,
+  /**
+   * Props passed to the quick filter component.
+   */
+  quickFilterProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    debounceMs: _propTypes.default.number,
+    quickFilterFormatter: _propTypes.default.func,
+    quickFilterParser: _propTypes.default.func,
+    slotProps: _propTypes.default.object
+  }),
+  /**
+   * Show the quick filter component.
+   * @default true
+   */
+  showQuickFilter: _propTypes.default.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;

package/components/toolbarV8/Toolbar.d.ts

@@ -0,0 +1,32 @@
+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/material").Theme> & {
+  ownerState: OwnerState;
+}, 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.
+ *
+ * Demos:
+ *
+ * - [Toolbar](https://mui.com/x/react-data-grid/components/toolbar/)
+ *
+ * API:
+ *
+ * - [Toolbar API](https://mui.com/x/api/data-grid/toolbar/)
+ */
+declare const Toolbar: React.ForwardRefExoticComponent<ToolbarProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
+} & React.RefAttributes<HTMLDivElement>>;
+export { Toolbar };

package/components/toolbarV8/Toolbar.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Toolbar = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _cssVariables = require("../../constants/cssVariables");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
+var _ToolbarContext = require("./ToolbarContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "className"];
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['toolbar']
+  };
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const ToolbarRoot = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'Toolbar'
+})({
+  flex: 0,
+  display: 'flex',
+  alignItems: 'center',
+  gap: _cssVariables.vars.spacing(0.25),
+  padding: _cssVariables.vars.spacing(0.75),
+  borderBottom: `1px solid ${_cssVariables.vars.colors.border.base}`
+});
+
+/**
+ * The top level Toolbar component that provides context to child components.
+ * It renders a styled `<div />` element.
+ *
+ * Demos:
+ *
+ * - [Toolbar](https://mui.com/x/react-data-grid/components/toolbar/)
+ *
+ * API:
+ *
+ * - [Toolbar API](https://mui.com/x/api/data-grid/toolbar/)
+ */
+const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(props, ref) {
+  const {
+      render,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  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 unregisterItem = React.useCallback(item => {
+    setItems(prevItems => prevItems.filter(i => i !== item));
+    if (focusableItemId === item) {
+      setFocusableItemId(null);
+    }
+  }, [focusableItemId]);
+  const onItemKeyDown = React.useCallback(event => {
+    if (!focusableItemId) {
+      return;
+    }
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      const nextIndex = items.indexOf(focusableItemId) + 1;
+      setFocusableItemId(items[nextIndex < items.length ? nextIndex : 0]);
+    }
+    if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      const prevIndex = items.indexOf(focusableItemId) - 1;
+      setFocusableItemId(items[prevIndex < 0 ? items.length - 1 : prevIndex]);
+    }
+    if (event.key === 'Home') {
+      event.preventDefault();
+      setFocusableItemId(items[0]);
+    }
+    if (event.key === 'End') {
+      event.preventDefault();
+      setFocusableItemId(items[items.length - 1]);
+    }
+  }, [items, focusableItemId]);
+  const contextValue = React.useMemo(() => ({
+    focusableItemId,
+    registerItem,
+    unregisterItem,
+    onItemKeyDown
+  }), [registerItem, unregisterItem, focusableItemId, onItemKeyDown]);
+  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(ToolbarRoot, render, (0, _extends2.default)({
+    role: 'toolbar',
+    'aria-orientation': 'horizontal',
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: rootProps
+  }, other, {
+    ref
+  }));
+  React.useEffect(() => {
+    if (items.length > 0) {
+      setFocusableItemId(items[0]);
+    }
+  }, [items]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarContext.ToolbarContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? Toolbar.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func])
+} : void 0;

package/components/toolbarV8/ToolbarButton.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import type { GridSlotProps } from '../../models';
+export type ToolbarButtonProps = GridSlotProps['baseIconButton'] & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseIconButton']>;
+};
+/**
+ * A button for performing actions from the toolbar.
+ * It renders the `baseIconButton` slot.
+ *
+ * Demos:
+ *
+ * - [Toolbar](https://mui.com/x/react-data-grid/components/toolbar/)
+ *
+ * API:
+ *
+ * - [ToolbarButton API](https://mui.com/x/api/data-grid/toolbar-button/)
+ */
+declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps> | React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ToolbarButton };