@mui/x-data-grid-premium 8.0.0-alpha.9 → 8.0.0-beta.0

package/esm/components/GridAggregationRowOverlay.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import composeClasses from '@mui/utils/composeClasses';
+import { getDataGridUtilityClass, useGridRootProps } from '@mui/x-data-grid-pro';
+import { GridSkeletonLoadingOverlayInner, useGridSelector } from '@mui/x-data-grid-pro/internals';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { gridAggregationModelSelector } from "../hooks/features/aggregation/gridAggregationSelectors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['aggregationRowOverlayWrapper']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridAggregationRowOverlay = forwardRef(function GridAggregationRowOverlay(props, forwardedRef) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses({
+    classes: rootProps.classes
+  });
+  const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector);
+  const visibleColumns = new Set(Object.keys(aggregationModel));
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.root,
+    children: /*#__PURE__*/_jsx(GridSkeletonLoadingOverlayInner, _extends({}, props, {
+      skeletonRowsCount: 1,
+      visibleColumns: visibleColumns,
+      showFirstRowBorder: true,
+      ref: forwardedRef
+    }))
+  });
+});
+export { GridAggregationRowOverlay };

package/esm/components/GridBottomContainer.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type GridBottomContainerProps = React.PropsWithChildren;
+export declare function GridBottomContainer(props: GridBottomContainerProps): React.JSX.Element;

package/esm/components/GridBottomContainer.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import composeClasses from '@mui/utils/composeClasses';
+import { gridClasses, getDataGridUtilityClass, useGridSelector, gridRowsLoadingSelector, gridRowTreeSelector, GRID_ROOT_GROUP_ID } from '@mui/x-data-grid-pro';
+import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
+import { GridAggregationRowOverlay } from "./GridAggregationRowOverlay.js";
+import { useGridRootProps } from "../typeOverloads/reexports.js";
+import { gridAggregationModelSelector } from "../hooks/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['bottomContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, {});
+};
+const Element = styled('div')({
+  position: 'sticky',
+  zIndex: 40,
+  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
+});
+export function GridBottomContainer(props) {
+  const classes = useUtilityClasses();
+  const rootProps = useGridRootProps();
+  const apiRef = useGridPrivateApiContext();
+  const isLoading = useGridSelector(apiRef, gridRowsLoadingSelector);
+  const tree = useGridSelector(apiRef, gridRowTreeSelector);
+  const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector);
+  const aggregationPosition = rootProps.getAggregationPosition(tree[GRID_ROOT_GROUP_ID]);
+  const hasAggregation = React.useMemo(() => Object.keys(aggregationModel).length > 0, [aggregationModel]);
+  const {
+      children
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsx(Element, _extends({}, other, {
+    className: clsx(classes.root, gridClasses['container--bottom']),
+    role: "presentation",
+    children: hasAggregation && isLoading && aggregationPosition === 'footer' ? /*#__PURE__*/_jsx(GridAggregationRowOverlay, {}) : children
+  }));
+}

package/esm/components/GridColumnMenuAggregationItem.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
+declare function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps): React.JSX.Element;
+declare namespace GridColumnMenuAggregationItem {
+  var propTypes: any;
+}
+export { GridColumnMenuAggregationItem };

package/esm/components/GridColumnMenuAggregationItem.js

@@ -5,8 +5,6 @@ const _excluded = ["native"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridSelector } from '@mui/x-data-grid-pro';
-import FormControl from '@mui/material/FormControl';
-import InputLabel from '@mui/material/InputLabel';
 import { unstable_useId as useId } from '@mui/utils';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -26,8 +24,8 @@ function GridColumnMenuAggregationItem(props) {
   const availableAggregationFunctions = React.useMemo(() => getAvailableAggregationFunctions({
     aggregationFunctions: rootProps.aggregationFunctions,
     colDef,
-    isDataSource: !!rootProps.unstable_dataSource
-  }), [colDef, rootProps.aggregationFunctions, rootProps.unstable_dataSource]);
+    isDataSource: !!rootProps.dataSource
+  }), [colDef, rootProps.aggregationFunctions, rootProps.dataSource]);
   const _ref = rootProps.slotProps?.baseSelect || {},
     {
       native: isBaseSelectNative = false
@@ -43,12 +41,12 @@ function GridColumnMenuAggregationItem(props) {
       colDef,
       aggregationFunctionName,
       aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName],
-      isDataSource: !!rootProps.unstable_dataSource
+      isDataSource: !!rootProps.dataSource
     })) {
       return aggregationFunctionName;
     }
     return '';
-  }, [rootProps.aggregationFunctions, rootProps.unstable_dataSource, aggregationModel, colDef]);
+  }, [rootProps.aggregationFunctions, rootProps.dataSource, aggregationModel, colDef]);
   const handleAggregationItemChange = event => {
     const newAggregationItem = event.target?.value || undefined;
     const currentModel = gridAggregationModelSelector(apiRef);
@@ -77,50 +75,42 @@ function GridColumnMenuAggregationItem(props) {
       fontSize: "small"
     }),
     onKeyDown: handleMenuItemKeyDown,
-    children: /*#__PURE__*/_jsxs(FormControl, {
-      size: "small",
+    children: /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
+      labelId: `${id}-label`,
+      id: `${id}-input`,
+      value: selectedAggregationRule,
+      label: label,
+      onChange: handleAggregationItemChange,
+      onKeyDown: handleSelectKeyDown,
+      onBlur: event => event.stopPropagation(),
+      native: isBaseSelectNative,
       fullWidth: true,
-      sx: {
+      size: "small",
+      style: {
         minWidth: 150
       },
-      children: [/*#__PURE__*/_jsx(InputLabel, {
-        id: `${id}-label`,
-        htmlFor: `${id}-input`,
-        children: label
-      }), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, _extends({
-        labelId: `${id}-label`,
-        inputRef: inputRef,
-        id: `${id}-input`,
-        value: selectedAggregationRule,
-        label: label,
-        color: "primary",
-        onChange: handleAggregationItemChange,
-        MenuProps: {
-          PaperProps: {
-            onKeyDown: handleSelectKeyDown
-          }
-        },
-        onBlur: event => event.stopPropagation(),
+      slotProps: {
+        htmlInput: {
+          ref: inputRef
+        }
+      }
+    }, baseSelectProps, {
+      children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
         native: isBaseSelectNative,
-        fullWidth: true
-      }, baseSelectProps, {
-        children: [/*#__PURE__*/_jsx(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-          native: isBaseSelectNative,
-          value: "",
-          children: "..."
-        })), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-          key: aggFunc,
-          value: aggFunc,
-          native: isBaseSelectNative
-        }), getAggregationFunctionLabel({
-          apiRef,
-          aggregationRule: {
-            aggregationFunctionName: aggFunc,
-            aggregationFunction: rootProps.aggregationFunctions[aggFunc]
-          }
-        })))]
-      }))]
-    })
+        value: "",
+        children: "..."
+      })), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
+        key: aggFunc,
+        value: aggFunc,
+        native: isBaseSelectNative
+      }), getAggregationFunctionLabel({
+        apiRef,
+        aggregationRule: {
+          aggregationFunctionName: aggFunc,
+          aggregationFunction: rootProps.aggregationFunctions[aggFunc]
+        }
+      })))]
+    }))
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuAggregationItem.propTypes = {

package/esm/components/GridColumnMenuRowGroupItem.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
+export declare function GridColumnMenuRowGroupItem(props: GridColumnMenuItemProps): React.JSX.Element | null;

package/esm/components/GridColumnMenuRowUngroupItem.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
+export declare function GridColumnMenuRowUngroupItem(props: GridColumnMenuItemProps): React.JSX.Element | null;

package/esm/components/GridDataSourceGroupingCriteriaCell.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { GridRenderCellParams, GridGroupNode } from '@mui/x-data-grid-pro';
+interface GridGroupingCriteriaCellProps extends GridRenderCellParams<any, any, any, GridGroupNode> {
+  hideDescendantCount?: boolean;
+}
+export declare function GridDataSourceGroupingCriteriaCell(props: GridGroupingCriteriaCellProps): React.JSX.Element;
+export {};

package/esm/components/GridDataSourceGroupingCriteriaCell.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import Box from '@mui/material/Box';
-import { useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals';
+import { useGridPrivateApiContext, gridDataSourceErrorSelector, gridDataSourceLoadingIdSelector, gridRowSelector, vars } from '@mui/x-data-grid-pro/internals';
 import { useGridSelector, getDataGridUtilityClass } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -28,14 +27,12 @@ function GridGroupingCriteriaCellIcon(props) {
     field,
     descendantCount
   } = props;
-  const loadingSelector = state => state.dataSource.loading[id] ?? false;
-  const errorSelector = state => state.dataSource.errors[id];
-  const isDataLoading = useGridSelector(apiRef, loadingSelector);
-  const error = useGridSelector(apiRef, errorSelector);
+  const isDataLoading = useGridSelector(apiRef, gridDataSourceLoadingIdSelector, id);
+  const error = useGridSelector(apiRef, gridDataSourceErrorSelector, id);
   const handleClick = event => {
     if (!rowNode.childrenExpanded) {
       // always fetch/get from cache the children when the node is expanded
-      apiRef.current.unstable_dataSource.fetchRows(id);
+      apiRef.current.dataSource.fetchRows(id);
     } else {
       apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
     }
@@ -81,12 +78,11 @@ export function GridDataSourceGroupingCriteriaCell(props) {
   } = props;
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
-  const rowSelector = state => state.rows.dataRowIdToModelLookup[id];
-  const row = useGridSelector(apiRef, rowSelector);
+  const row = useGridSelector(apiRef, gridRowSelector, id);
   const classes = useUtilityClasses(rootProps);
   let descendantCount = 0;
   if (row) {
-    descendantCount = Math.max(rootProps.unstable_dataSource?.getChildrenCount?.(row) ?? 0, 0);
+    descendantCount = Math.max(rootProps.dataSource?.getChildrenCount?.(row) ?? 0, 0);
   }
   let cellContent;
   const colDef = apiRef.current.getColumn(rowNode.groupingField);
@@ -101,10 +97,10 @@ export function GridDataSourceGroupingCriteriaCell(props) {
       children: rowNode.groupingKey
     });
   }
-  return /*#__PURE__*/_jsxs(Box, {
+  return /*#__PURE__*/_jsxs("div", {
     className: classes.root,
-    sx: {
-      ml: rootProps.rowGroupingColumnMode === 'multiple' ? 0 : theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(rowNode.depth)})`
+    style: {
+      marginLeft: rootProps.rowGroupingColumnMode === 'multiple' ? 0 : `calc(var(--DataGrid-cellOffsetMultiplier) * ${vars.spacing(rowNode.depth)})`
     },
     children: [/*#__PURE__*/_jsx("div", {
       className: classes.toggle,

package/esm/components/GridExcelExportMenuItem.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { GridExportMenuItemProps } from '@mui/x-data-grid-pro';
+import { GridExcelExportOptions } from "../hooks/features/export/index.js";
+export type GridExcelExportMenuItemProps = GridExportMenuItemProps<GridExcelExportOptions>;
+declare function GridExcelExportMenuItem(props: GridExcelExportMenuItemProps): React.JSX.Element;
+declare namespace GridExcelExportMenuItem {
+  var propTypes: any;
+}
+export { GridExcelExportMenuItem };

package/esm/components/GridFooterCell.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { GridRenderCellParams } from '@mui/x-data-grid';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+interface GridFooterCellProps extends GridRenderCellParams {
+  sx?: SxProps<Theme>;
+}
+declare function GridFooterCell(props: GridFooterCellProps): React.JSX.Element;
+export { GridFooterCell };

package/esm/components/GridFooterCell.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "id", "value", "rowNode", "field", "focusElementRef", "hasFocus", "tabIndex", "isEditable"];
 import * as React from 'react';
 import { getDataGridUtilityClass } from '@mui/x-data-grid';
+import { vars } from '@mui/x-data-grid/internals';
 import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -11,12 +12,10 @@ const GridFooterCellRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FooterCell',
   overridesResolver: (_, styles) => styles.footerCell
-})(({
-  theme
-}) => ({
-  fontWeight: theme.typography.fontWeightMedium,
-  color: (theme.vars || theme).palette.primary.dark
-}));
+})({
+  fontWeight: vars.typography.fontWeight.medium,
+  color: vars.colors.foreground.accent
+});
 const useUtilityClasses = ownerState => {
   const {
     classes

package/esm/components/GridGroupingColumnFooterCell.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridRenderCellParams } from '@mui/x-data-grid-pro';
+declare function GridGroupingColumnFooterCell(props: GridRenderCellParams): React.JSX.Element;
+export { GridGroupingColumnFooterCell };

package/esm/components/GridGroupingColumnFooterCell.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { vars } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { GridFooterCell } from "./GridFooterCell.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -13,7 +14,7 @@ function GridGroupingColumnFooterCell(props) {
   } else if (rootProps.rowGroupingColumnMode === 'multiple') {
     sx.ml = 2;
   } else {
-    sx.ml = theme => `calc(var(--DataGrid-cellOffsetMultiplier) * ${theme.spacing(props.rowNode.depth)})`;
+    sx.ml = `calc(var(--DataGrid-cellOffsetMultiplier) * ${vars.spacing(props.rowNode.depth)})`;
   }
   return /*#__PURE__*/_jsx(GridFooterCell, _extends({
     sx: sx

package/esm/components/GridGroupingColumnLeafCell.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridRenderCellParams } from '@mui/x-data-grid-pro';
+declare function GridGroupingColumnLeafCell(props: GridRenderCellParams): React.JSX.Element;
+export { GridGroupingColumnLeafCell };

package/esm/components/GridGroupingColumnLeafCell.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import { vars } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridGroupingColumnLeafCell(props) {
@@ -7,14 +7,9 @@ function GridGroupingColumnLeafCell(props) {
     rowNode
   } = props;
   const rootProps = useGridRootProps();
-  return /*#__PURE__*/_jsx(Box, {
-    sx: [rootProps.rowGroupingColumnMode === 'multiple' ? {
-      ml: 1
-    } : theme => ({
-      ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${theme.spacing(1)})`
-    })],
+  return /*#__PURE__*/_jsx("div", {
     style: {
-      '--depth': rowNode.depth
+      marginLeft: rootProps.rowGroupingColumnMode === 'multiple' ? vars.spacing(1) : `calc(var(--DataGrid-cellOffsetMultiplier) * ${vars.spacing(rowNode.depth)})`
     },
     children: props.formattedValue ?? props.value
   });

package/esm/components/GridGroupingCriteriaCell.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { GridRenderCellParams, GridGroupNode } from '@mui/x-data-grid-pro';
+interface GridGroupingCriteriaCellProps extends GridRenderCellParams<any, any, any, GridGroupNode> {
+  hideDescendantCount?: boolean;
+}
+export declare function GridGroupingCriteriaCell(props: GridGroupingCriteriaCellProps): React.JSX.Element;
+export {};

package/esm/components/GridGroupingCriteriaCell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import Box from '@mui/material/Box';
+import { vars } from '@mui/x-data-grid/internals';
 import { useGridSelector, gridFilteredDescendantCountLookupSelector, getDataGridUtilityClass } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -59,15 +59,10 @@ export function GridGroupingCriteriaCell(props) {
       children: rowNode.groupingKey
     });
   }
-  return /*#__PURE__*/_jsxs(Box, {
+  return /*#__PURE__*/_jsxs("div", {
     className: classes.root,
-    sx: [rootProps.rowGroupingColumnMode === 'multiple' ? {
-      ml: 0
-    } : theme => ({
-      ml: `calc(var(--DataGrid-cellOffsetMultiplier) * var(--depth) * ${theme.spacing(1)})`
-    })],
     style: {
-      '--depth': rowNode.depth
+      marginLeft: rootProps.rowGroupingColumnMode === 'multiple' ? 0 : `calc(var(--DataGrid-cellOffsetMultiplier) * ${rowNode.depth} * ${vars.spacing(1)})`
     },
     children: [/*#__PURE__*/_jsx("div", {
       className: classes.toggle,

package/esm/components/GridPremiumColumnMenu.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { GridColumnMenuProps, GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
+import { GridColumnMenuAggregationItem } from "./GridColumnMenuAggregationItem.js";
+export declare function GridColumnMenuGroupingItem(props: GridColumnMenuItemProps): React.JSX.Element;
+export declare const GRID_COLUMN_MENU_SLOTS_PREMIUM: {
+  columnMenuAggregationItem: typeof GridColumnMenuAggregationItem;
+  columnMenuGroupingItem: typeof GridColumnMenuGroupingItem;
+  columnMenuPinningItem: typeof import("@mui/x-data-grid-pro").GridColumnMenuPinningItem;
+  columnMenuSortItem: typeof import("@mui/x-data-grid").GridColumnMenuSortItem;
+  columnMenuFilterItem: typeof import("@mui/x-data-grid").GridColumnMenuFilterItem;
+  columnMenuColumnsItem: typeof import("@mui/x-data-grid").GridColumnMenuColumnsItem;
+};
+export declare const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM: {
+  columnMenuAggregationItem: {
+    displayOrder: number;
+  };
+  columnMenuGroupingItem: {
+    displayOrder: number;
+  };
+  columnMenuPinningItem: {
+    displayOrder: number;
+  };
+  columnMenuSortItem: {
+    displayOrder: number;
+  };
+  columnMenuFilterItem: {
+    displayOrder: number;
+  };
+  columnMenuColumnsItem: {
+    displayOrder: number;
+  };
+};
+export declare const GridPremiumColumnMenu: React.ForwardRefExoticComponent<GridColumnMenuProps> | React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>>;

package/esm/components/GridPremiumToolbar.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { GridToolbarProps } from '@mui/x-data-grid/internals';
+export declare function GridPremiumToolbar(props: GridToolbarProps): React.JSX.Element;

package/esm/components/GridPremiumToolbar.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["excelOptions"];
+import * as React from 'react';
+import { GridToolbar } from '@mui/x-data-grid/internals';
+import { ExportExcel } from "./export/index.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function GridPremiumToolbar(props) {
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const other = _objectWithoutPropertiesLoose(props, _excluded);
+  const additionalExportMenuItems = !props.excelOptions?.disableToolbarButton ? onMenuItemClick => /*#__PURE__*/_jsx(ExportExcel, {
+    render: /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({}, rootProps.slotProps?.baseMenuItem)),
+    options: props.excelOptions,
+    onClick: onMenuItemClick,
+    children: apiRef.current.getLocaleText('toolbarExportExcel')
+  }) : undefined;
+  return /*#__PURE__*/_jsx(GridToolbar, _extends({}, other, {
+    additionalExportMenuItems: additionalExportMenuItems
+  }));
+}

package/esm/components/export/ExportExcel.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { GridSlotProps, RenderProp } from '@mui/x-data-grid';
+import { GridExcelExportOptions } from "../../hooks/features/export/index.js";
+export type ExportExcelProps = GridSlotProps['baseButton'] & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseButton']>;
+  /**
+   * The options to apply on the Excel export.
+   * @demos
+   *   - [Excel export](/x/react-data-grid/export/#excel-export)
+   */
+  options?: GridExcelExportOptions;
+};
+/**
+ * A button that triggers an Excel export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-data-grid/components/export/)
+ *
+ * API:
+ *
+ * - [ExportExcel API](https://mui.com/x/api/data-grid/export-excel/)
+ */
+declare const ExportExcel: React.ForwardRefExoticComponent<ExportExcelProps> | React.ForwardRefExoticComponent<Omit<ExportExcelProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ExportExcel };