@mui/x-data-grid-premium 7.22.3 → 8.0.0-alpha.1

package/esm/components/promptControl/RecordButton.js

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { Timeout } from '@mui/utils/useTimeout';
+import useLazyRef from '@mui/utils/useLazyRef';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const BrowserSpeechRecognition = globalThis.SpeechRecognition || globalThis.webkitSpeechRecognition;
+function RecordButton(props) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const {
+    lang,
+    recording,
+    setRecording,
+    disabled,
+    className,
+    onDone,
+    onUpdate,
+    onError
+  } = props;
+  const buttonRef = React.useRef(null);
+  const recognition = useLazyRef(() => {
+    if (!BrowserSpeechRecognition) {
+      return {
+        start: () => {},
+        abort: () => {}
+      };
+    }
+    const timeout = new Timeout();
+    const instance = new BrowserSpeechRecognition();
+    instance.continuous = true;
+    instance.interimResults = true;
+    instance.lang = lang;
+    let finalResult = '';
+    let interimResult = '';
+    function start(options) {
+      if (recording) {
+        return;
+      }
+      setRecording(true);
+      instance.onresult = event => {
+        finalResult = '';
+        interimResult = '';
+        if (typeof event.results === 'undefined') {
+          instance.stop();
+          return;
+        }
+        for (let i = event.resultIndex; i < event.results.length; i += 1) {
+          if (event.results[i].isFinal) {
+            finalResult += event.results[i][0].transcript;
+          } else {
+            interimResult += event.results[i][0].transcript;
+          }
+        }
+        if (finalResult === '') {
+          options.onUpdate(interimResult);
+        }
+        timeout.start(1000, () => instance.stop());
+      };
+      instance.onsoundend = () => {
+        instance.stop();
+      };
+      instance.onend = () => {
+        options.onDone(finalResult);
+        setRecording(false);
+      };
+      instance.onerror = error => {
+        options.onError(error.message);
+        instance.stop();
+        setRecording(false);
+      };
+      instance.start();
+    }
+    function abort() {
+      instance.abort();
+    }
+    return {
+      start,
+      abort
+    };
+  }).current;
+  const handleClick = () => {
+    if (!recording) {
+      recognition.start({
+        onDone,
+        onUpdate,
+        onError
+      });
+      return;
+    }
+    recognition.abort();
+  };
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+    title: recording ? apiRef.current.getLocaleText('toolbarPromptControlRecordButtonActiveLabel') : apiRef.current.getLocaleText('toolbarPromptControlRecordButtonDefaultLabel'),
+    children: /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, {
+        color: recording ? 'primary' : 'default',
+        className: className,
+        disabled: disabled,
+        onClick: handleClick,
+        ref: buttonRef,
+        size: "small",
+        edge: "start",
+        children: /*#__PURE__*/_jsx(rootProps.slots.toolbarPromptRecordIcon, {
+          fontSize: "small"
+        })
+      })
+    })
+  });
+}
+export { RecordButton };

package/esm/components/promptControl/index.js

@@ -0,0 +1 @@
+export { GridToolbarPromptControl as Unstable_GridToolbarPromptControl } from "./GridToolbarPromptControl.js";

package/esm/hooks/features/cellSelection/useGridCellSelection.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { ownerDocument, useEventCallback } from '@mui/material/utils';
+import ownerDocument from '@mui/utils/ownerDocument';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { getTotalHeaderHeight, getVisibleRows, isNavigationKey, serializeCellValue, useGridRegisterPipeProcessor, useGridVisibleRows } from '@mui/x-data-grid-pro/internals';
 import { useGridApiEventHandler, useGridApiMethod, GRID_ACTIONS_COLUMN_TYPE, GRID_CHECKBOX_SELECTION_COL_DEF, GRID_DETAIL_PANEL_TOGGLE_FIELD, gridRowsDataRowIdToIdLookupSelector, gridClasses, gridFocusCellSelector, GRID_REORDER_COL_DEF, useGridSelector, gridSortedRowIdsSelector, gridDimensionsSelector } from '@mui/x-data-grid-pro';
 import { gridCellSelectionStateSelector } from "./gridCellSelectionSelector.js";

package/esm/hooks/features/index.js

@@ -2,4 +2,5 @@
 export * from "./aggregation/index.js";
 export * from "./rowGrouping/index.js";
 export * from "./export/index.js";
-export * from "./cellSelection/index.js";
+export * from "./cellSelection/index.js";
+export * from "./promptControl/index.js";

package/esm/hooks/features/promptControl/api.js

@@ -0,0 +1,22 @@
+export function gridDefaultPromptResolver(url, context, query) {
+  return fetch(url, {
+    mode: 'cors',
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json'
+    },
+    credentials: 'include',
+    body: JSON.stringify({
+      context,
+      query
+    })
+  }).then(result => result.json()).then(result => {
+    if (result.ok === false) {
+      return Promise.reject(new Error(result.message));
+    }
+    if (result.data.error) {
+      return Promise.reject(new Error(result.data.error));
+    }
+    return result.data;
+  });
+}

package/esm/hooks/features/promptControl/index.js

@@ -0,0 +1 @@
+export { gridDefaultPromptResolver as unstable_gridDefaultPromptResolver } from "./api.js";

package/esm/hooks/features/promptControl/types.js

@@ -0,0 +1 @@
+export {};

package/esm/material/icons.js

@@ -11,4 +11,10 @@ export const GridGroupWorkIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
 }), 'GroupWork');
 export const GridFunctionsIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M18 4H6v2l6.5 6L6 18v2h12v-3h-7l5-5-5-5h7z"
-}), 'Functions');
+}), 'Functions');
+export const GridSendPromptIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
+  d: "M2.01 21 23 12 2.01 3 2 10l15 2-15 2z"
+}), 'SendPrompt');
+export const GridRecordPromptIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
+  d: "M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3m5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72z"
+}), 'RecordPrompt');

package/esm/material/index.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridWorkspacesIcon, GridGroupWorkIcon, GridFunctionsIcon } from "./icons.js";
+import { GridWorkspacesIcon, GridGroupWorkIcon, GridFunctionsIcon, GridSendPromptIcon, GridRecordPromptIcon } from "./icons.js";
 const iconsSlots = {
   columnMenuUngroupIcon: GridWorkspacesIcon,
   columnMenuGroupIcon: GridGroupWorkIcon,
-  columnMenuAggregationIcon: GridFunctionsIcon
+  columnMenuAggregationIcon: GridFunctionsIcon,
+  toolbarPromptSendIcon: GridSendPromptIcon,
+  toolbarPromptRecordIcon: GridRecordPromptIcon
 };
 const materialSlots = _extends({}, iconsSlots);
 export default materialSlots;

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMjE0MzYwMDAwMA==";
+  const releaseInfo = "MTczMjIzMDAwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/hooks/features/aggregation/wrapColumnWithAggregation.d.ts

@@ -65,6 +65,7 @@ export declare const unwrapColumnFromAggregation: ({ column, }: {
     disableReorder?: boolean;
     disableExport?: boolean;
     colSpan?: number | import("@mui/x-data-grid").GridColSpanFn<import("@mui/x-data-grid").GridValidRowModel, any, any> | undefined;
+    unstable_examples?: any[] | undefined;
     renderHeaderFilter?: (params: import("@mui/x-data-grid-pro").GridRenderHeaderFilterProps) => React.ReactNode;
     aggregable?: boolean;
     availableAggregationFunctions?: string[];

package/hooks/features/cellSelection/useGridCellSelection.js

@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridCellSelection = exports.cellSelectionStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/material/utils");
+var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _gridCellSelectionSelector = require("./gridCellSelectionSelector");
@@ -141,7 +142,7 @@ const useGridCellSelection = (apiRef, props) => {
     }
     return params.rowNode.type !== 'pinnedRow';
   }, [apiRef]);
-  const handleMouseUp = (0, _utils.useEventCallback)(() => {
+  const handleMouseUp = (0, _useEventCallback.default)(() => {
     lastMouseDownCell.current = null;
     apiRef.current.rootElementRef?.current?.classList.remove(_xDataGridPro.gridClasses['root--disableUserSelection']);
 
@@ -167,7 +168,7 @@ const useGridCellSelection = (apiRef, props) => {
       field: params.field
     };
     apiRef.current.rootElementRef?.current?.classList.add(_xDataGridPro.gridClasses['root--disableUserSelection']);
-    const document = (0, _utils.ownerDocument)(apiRef.current.rootElementRef?.current);
+    const document = (0, _ownerDocument.default)(apiRef.current.rootElementRef?.current);
     document.addEventListener('mouseup', handleMouseUp, {
       once: true
     });
@@ -280,7 +281,7 @@ const useGridCellSelection = (apiRef, props) => {
       stopAutoScroll();
     }
   }, [apiRef, startAutoScroll, stopAutoScroll, totalHeaderHeight, dimensions]);
-  const handleCellClick = (0, _utils.useEventCallback)((params, event) => {
+  const handleCellClick = (0, _useEventCallback.default)((params, event) => {
     const {
       id,
       field
@@ -317,7 +318,7 @@ const useGridCellSelection = (apiRef, props) => {
       });
     }
   });
-  const handleCellKeyDown = (0, _utils.useEventCallback)((params, event) => {
+  const handleCellKeyDown = (0, _useEventCallback.default)((params, event) => {
     if (!(0, _internals.isNavigationKey)(event.key) || !cellWithVirtualFocus.current) {
       return;
     }
@@ -377,7 +378,7 @@ const useGridCellSelection = (apiRef, props) => {
     const rootRef = apiRef.current.rootElementRef?.current;
     return () => {
       stopAutoScroll();
-      const document = (0, _utils.ownerDocument)(rootRef);
+      const document = (0, _ownerDocument.default)(rootRef);
       document.removeEventListener('mouseup', handleMouseUp);
     };
   }, [apiRef, hasRootReference, handleMouseUp, stopAutoScroll]);

package/hooks/features/index.d.ts

@@ -2,3 +2,4 @@ export * from './aggregation';
 export * from './rowGrouping';
 export * from './export';
 export * from './cellSelection';
+export * from './promptControl';

package/hooks/features/index.js

@@ -46,4 +46,15 @@ Object.keys(_cellSelection).forEach(function (key) {
       return _cellSelection[key];
     }
   });
+});
+var _promptControl = require("./promptControl");
+Object.keys(_promptControl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _promptControl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _promptControl[key];
+    }
+  });
 });

package/hooks/features/promptControl/api.d.ts

@@ -0,0 +1,2 @@
+import { PromptResponse } from './types';
+export declare function gridDefaultPromptResolver(url: string, context: string, query: string): Promise<PromptResponse>;

package/hooks/features/promptControl/api.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridDefaultPromptResolver = gridDefaultPromptResolver;
+function gridDefaultPromptResolver(url, context, query) {
+  return fetch(url, {
+    mode: 'cors',
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json'
+    },
+    credentials: 'include',
+    body: JSON.stringify({
+      context,
+      query
+    })
+  }).then(result => result.json()).then(result => {
+    if (result.ok === false) {
+      return Promise.reject(new Error(result.message));
+    }
+    if (result.data.error) {
+      return Promise.reject(new Error(result.data.error));
+    }
+    return result.data;
+  });
+}

package/hooks/features/promptControl/index.d.ts

@@ -0,0 +1,2 @@
+export { gridDefaultPromptResolver as unstable_gridDefaultPromptResolver } from './api';
+export type { PromptResponse as unstable_PromptResponse } from './types';

package/hooks/features/promptControl/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "unstable_gridDefaultPromptResolver", {
+  enumerable: true,
+  get: function () {
+    return _api.gridDefaultPromptResolver;
+  }
+});
+var _api = require("./api");

package/hooks/features/promptControl/types.d.ts

@@ -0,0 +1,25 @@
+export type Sort = {
+    column: string;
+    direction: 'asc' | 'desc';
+};
+export type Grouping = {
+    column: string;
+};
+export type Filter = {
+    operator: string;
+    value: string | number | boolean | string[] | number[];
+    column: string;
+};
+export type AggregationFunction = 'avg' | 'sum' | 'min' | 'max' | 'size';
+export type Aggregation = {
+    [column: string]: AggregationFunction;
+};
+export type PromptResponse = {
+    select: number;
+    filters: Filter[];
+    filterOperator?: 'and' | 'or';
+    aggregation: Aggregation;
+    sorting: Sort[];
+    grouping: Grouping[];
+    error: string | null;
+};

package/hooks/features/promptControl/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v7.22.3
+ * @mui/x-data-grid-premium v8.0.0-alpha.1
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/material/icons.d.ts

@@ -7,3 +7,9 @@ export declare const GridGroupWorkIcon: import("@mui/material/OverridableCompone
 export declare const GridFunctionsIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
     muiName: string;
 };
+export declare const GridSendPromptIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};
+export declare const GridRecordPromptIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};

package/material/icons.js

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridWorkspacesIcon = exports.GridGroupWorkIcon = exports.GridFunctionsIcon = void 0;
+exports.GridWorkspacesIcon = exports.GridSendPromptIcon = exports.GridRecordPromptIcon = exports.GridGroupWorkIcon = exports.GridFunctionsIcon = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/material/utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -18,4 +18,10 @@ const GridGroupWorkIcon = exports.GridGroupWorkIcon = (0, _utils.createSvgIcon)(
 }), 'GroupWork');
 const GridFunctionsIcon = exports.GridFunctionsIcon = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
   d: "M18 4H6v2l6.5 6L6 18v2h12v-3h-7l5-5-5-5h7z"
-}), 'Functions');
+}), 'Functions');
+const GridSendPromptIcon = exports.GridSendPromptIcon = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+  d: "M2.01 21 23 12 2.01 3 2 10l15 2-15 2z"
+}), 'SendPrompt');
+const GridRecordPromptIcon = exports.GridRecordPromptIcon = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+  d: "M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3m5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72z"
+}), 'RecordPrompt');

package/material/index.d.ts

@@ -2,5 +2,7 @@ declare const materialSlots: {
     columnMenuUngroupIcon: React.JSXElementConstructor<any>;
     columnMenuGroupIcon: React.JSXElementConstructor<any>;
     columnMenuAggregationIcon: React.JSXElementConstructor<any>;
+    toolbarPromptSendIcon: React.JSXElementConstructor<any>;
+    toolbarPromptRecordIcon: React.JSXElementConstructor<any>;
 };
 export default materialSlots;

package/material/index.js

@@ -10,7 +10,9 @@ var _icons = require("./icons");
 const iconsSlots = {
   columnMenuUngroupIcon: _icons.GridWorkspacesIcon,
   columnMenuGroupIcon: _icons.GridGroupWorkIcon,
-  columnMenuAggregationIcon: _icons.GridFunctionsIcon
+  columnMenuAggregationIcon: _icons.GridFunctionsIcon,
+  toolbarPromptSendIcon: _icons.GridSendPromptIcon,
+  toolbarPromptRecordIcon: _icons.GridRecordPromptIcon
 };
 const materialSlots = (0, _extends2.default)({}, iconsSlots);
 var _default = exports.default = materialSlots;

package/models/gridPremiumIconSlotsComponent.d.ts

@@ -15,4 +15,14 @@ export interface GridPremiumIconSlotsComponent {
      * @default GridFunctionsIcon
      */
     columnMenuAggregationIcon: React.JSXElementConstructor<any>;
+    /**
+     * Icon used for the button that sends a prompt
+     * @default GridFunctionsIcon
+     */
+    toolbarPromptSendIcon: React.JSXElementConstructor<any>;
+    /**
+     * Icon used for the button that starts/stops recording the prompt
+     * @default GridFunctionsIcon
+     */
+    toolbarPromptRecordIcon: React.JSXElementConstructor<any>;
 }

package/modern/components/GridColumnMenuAggregationItem.js

@@ -4,13 +4,11 @@ import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridSelector } from '@mui/x-data-grid-pro';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import FormControl from '@mui/material/FormControl';
 import InputLabel from '@mui/material/InputLabel';
 import { unstable_useId as useId } from '@mui/utils';
-import Select from '@mui/material/Select';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { canColumnHaveAggregationFunction, getAggregationFunctionLabel, getAvailableAggregationFunctions } from "../hooks/features/aggregation/gridAggregationUtils.js";
@@ -54,7 +52,7 @@ function GridColumnMenuAggregationItem(props) {
     apiRef.current.hideColumnMenu();
   };
   const label = apiRef.current.getLocaleText('aggregationMenuItemHeader');
-  return /*#__PURE__*/_jsxs(MenuItem, {
+  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
     disableRipple: true,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
       children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuAggregationIcon, {
@@ -70,7 +68,7 @@ function GridColumnMenuAggregationItem(props) {
         children: [/*#__PURE__*/_jsx(InputLabel, {
           id: `${id}-label`,
           children: label
-        }), /*#__PURE__*/_jsxs(Select, {
+        }), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, {
           labelId: `${id}-label`,
           id: `${id}-input`,
           value: selectedAggregationRule,
@@ -79,10 +77,10 @@ function GridColumnMenuAggregationItem(props) {
           onChange: handleAggregationItemChange,
           onBlur: event => event.stopPropagation(),
           fullWidth: true,
-          children: [/*#__PURE__*/_jsx(MenuItem, {
+          children: [/*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
             value: "",
             children: "..."
-          }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_jsx(MenuItem, {
+          }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
             value: aggFunc,
             children: getAggregationFunctionLabel({
               apiRef,

package/modern/components/GridColumnMenuRowGroupItem.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { useGridSelector, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
@@ -24,7 +23,7 @@ export function GridColumnMenuRowGroupItem(props) {
     };
     const groupedColumn = columnsLookup[field];
     const name = groupedColumn.headerName ?? field;
-    return /*#__PURE__*/_jsxs(MenuItem, {
+    return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
       onClick: ungroupColumn,
       disabled: !groupedColumn.groupable,
       children: [/*#__PURE__*/_jsx(ListItemIcon, {

package/modern/components/GridColumnMenuRowUngroupItem.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { gridColumnLookupSelector, useGridSelector } from '@mui/x-data-grid-pro';
@@ -29,7 +28,7 @@ export function GridColumnMenuRowUngroupItem(props) {
   };
   const name = columnsLookup[colDef.field].headerName ?? colDef.field;
   if (rowGroupingModel.includes(colDef.field)) {
-    return /*#__PURE__*/_jsxs(MenuItem, {
+    return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
       onClick: ungroupColumn,
       children: [/*#__PURE__*/_jsx(ListItemIcon, {
         children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
@@ -40,7 +39,7 @@ export function GridColumnMenuRowUngroupItem(props) {
       })]
     });
   }
-  return /*#__PURE__*/_jsxs(MenuItem, {
+  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
     onClick: groupColumn,
     children: [/*#__PURE__*/_jsx(ListItemIcon, {
       children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuGroupIcon, {

package/modern/components/GridExcelExportMenuItem.js

@@ -3,17 +3,18 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["hideMenu", "options"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@mui/material/MenuItem';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridExcelExportMenuItem(props) {
   const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
   const {
       hideMenu,
       options
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx(MenuItem, _extends({
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsExcel(options);
       hideMenu?.();

package/modern/components/index.js

@@ -1,4 +1,5 @@
 export * from "./GridExcelExportMenuItem.js";
 export * from "../material/icons.js";
 export * from "./GridColumnMenuAggregationItem.js";
+export * from "./promptControl/index.js";
 export { GridColumnMenuGroupingItem } from "./GridPremiumColumnMenu.js";