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

package/modern/DataGridPremium/useDataGridPremiumComponent.js

@@ -1,4 +1,5 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, useGridDataSource, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { useGridDataSourcePremium as useGridDataSource } from "../hooks/features/dataSource/useGridDataSourcePremium.js";
 // Premium-only features
 import { useGridAggregation, aggregationStateInitializer } from "../hooks/features/aggregation/useGridAggregation.js";
 import { useGridAggregationPreProcessors } from "../hooks/features/aggregation/useGridAggregationPreProcessors.js";
@@ -32,7 +33,6 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(headerFilteringStateInitializer, apiRef, props);
   useGridInitializeState(rowGroupingStateInitializer, apiRef, props);
   useGridInitializeState(aggregationStateInitializer, apiRef, props);
@@ -42,6 +42,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowPinningStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -52,17 +53,18 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnReorderStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
-  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
   useGridInitializeState(dataSourceStateInitializer, apiRef, props);
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridRowGrouping(apiRef, props);
   useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef, props);
   useGridAggregation(apiRef, props);
+  useGridDataSource(apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);
   useGridCellSelection(apiRef, props);
@@ -90,6 +92,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
   useGridLazyLoader(apiRef, props);
+  useGridDataSourceLazyLoader(apiRef, props);
   useGridColumnMenu(apiRef);
   useGridCsvExport(apiRef, props);
   useGridPrintExport(apiRef, props);
@@ -98,7 +101,6 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridDimensions(apiRef, props);
   useGridEvents(apiRef, props);
   useGridStatePersistence(apiRef);
-  useGridDataSource(apiRef, props);
   useGridVirtualization(apiRef, props);
   useGridListView(apiRef, props);
   return apiRef;

package/modern/DataGridPremium/useDataGridPremiumProps.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { DATA_GRID_PRO_PROPS_DEFAULT_VALUES, GRID_DEFAULT_LOCALE_TEXT, GridSignature } from '@mui/x-data-grid-pro';
-import { computeSlots, useProps } from '@mui/x-data-grid-pro/internals';
+import { computeSlots } from '@mui/x-data-grid-pro/internals';
 import { GRID_AGGREGATION_FUNCTIONS } from "../hooks/features/aggregation/index.js";
 import { DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS } from "../constants/dataGridPremiumDefaultSlotsComponents.js";
 const getDataGridPremiumForcedProps = themedProps => _extends({
@@ -34,18 +34,20 @@ export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PRO
 });
 const defaultSlots = DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS;
 export const useDataGridPremiumProps = inProps => {
-  const themedProps = useProps(
+  const themedProps =
   // eslint-disable-next-line material-ui/mui-name-matches-component-name
   useThemeProps({
     props: inProps,
     name: 'MuiDataGrid'
-  }));
+  });
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => computeSlots({
     defaultSlots,
     slots: themedProps.slots
   }), [themedProps.slots]);
-  return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
+  return React.useMemo(() => _extends({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps.unstable_dataSource ? {
+    aggregationFunctions: {}
+  } : {}, themedProps, {
     localeText,
     slots
   }, getDataGridPremiumForcedProps(themedProps)), [themedProps, localeText, slots]);

package/modern/components/GridAggregationHeader.js

@@ -12,7 +12,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridAggregationHeaderRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'AggregationColumnHeader',
-  overridesResolver: (_, styles) => styles.aggregationColumnHeader
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.aggregationColumnHeader, ownerState.colDef.headerAlign === 'left' && styles['aggregationColumnHeader--alignLeft'], ownerState.colDef.headerAlign === 'center' && styles['aggregationColumnHeader--alignCenter'], ownerState.colDef.headerAlign === 'right' && styles['aggregationColumnHeader--alignRight']];
+  }
 })({
   display: 'flex',
   flexDirection: 'column',

package/modern/components/GridColumnMenuAggregationItem.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["native"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridSelector } from '@mui/x-data-grid-pro';
-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';
@@ -14,18 +13,27 @@ import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { canColumnHaveAggregationFunction, getAggregationFunctionLabel, getAvailableAggregationFunctions } from "../hooks/features/aggregation/gridAggregationUtils.js";
 import { gridAggregationModelSelector } from "../hooks/features/aggregation/gridAggregationSelectors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 function GridColumnMenuAggregationItem(props) {
   const {
     colDef
   } = props;
   const apiRef = useGridApiContext();
+  const inputRef = React.useRef(null);
   const rootProps = useGridRootProps();
   const id = useId();
   const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector);
   const availableAggregationFunctions = React.useMemo(() => getAvailableAggregationFunctions({
     aggregationFunctions: rootProps.aggregationFunctions,
-    colDef
-  }), [colDef, rootProps.aggregationFunctions]);
+    colDef,
+    isDataSource: !!rootProps.unstable_dataSource
+  }), [colDef, rootProps.aggregationFunctions, rootProps.unstable_dataSource]);
+  const _ref = rootProps.slotProps?.baseSelect || {},
+    {
+      native: isBaseSelectNative = false
+    } = _ref,
+    baseSelectProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const selectedAggregationRule = React.useMemo(() => {
     if (!colDef || !aggregationModel[colDef.field]) {
       return '';
@@ -34,12 +42,13 @@ function GridColumnMenuAggregationItem(props) {
     if (canColumnHaveAggregationFunction({
       colDef,
       aggregationFunctionName,
-      aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName]
+      aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName],
+      isDataSource: !!rootProps.unstable_dataSource
     })) {
       return aggregationFunctionName;
     }
     return '';
-  }, [rootProps.aggregationFunctions, aggregationModel, colDef]);
+  }, [rootProps.aggregationFunctions, rootProps.unstable_dataSource, aggregationModel, colDef]);
   const handleAggregationItemChange = event => {
     const newAggregationItem = event.target?.value || undefined;
     const currentModel = gridAggregationModelSelector(apiRef);
@@ -52,47 +61,66 @@ function GridColumnMenuAggregationItem(props) {
     apiRef.current.hideColumnMenu();
   };
   const label = apiRef.current.getLocaleText('aggregationMenuItemHeader');
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
-    disableRipple: true,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuAggregationIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      children: /*#__PURE__*/_jsxs(FormControl, {
-        size: "small",
-        fullWidth: true,
-        sx: {
-          minWidth: 150
+  const handleMenuItemKeyDown = React.useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      inputRef.current.focus();
+    }
+  }, []);
+  const handleSelectKeyDown = React.useCallback(event => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === ' ') {
+      event.stopPropagation();
+    }
+  }, []);
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
+    inert: true,
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuAggregationIcon, {
+      fontSize: "small"
+    }),
+    onKeyDown: handleMenuItemKeyDown,
+    children: /*#__PURE__*/_jsxs(FormControl, {
+      size: "small",
+      fullWidth: true,
+      sx: {
+        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
+          }
         },
-        children: [/*#__PURE__*/_jsx(InputLabel, {
-          id: `${id}-label`,
-          children: label
-        }), /*#__PURE__*/_jsxs(rootProps.slots.baseSelect, {
-          labelId: `${id}-label`,
-          id: `${id}-input`,
-          value: selectedAggregationRule,
-          label: label,
-          color: "primary",
-          onChange: handleAggregationItemChange,
-          onBlur: event => event.stopPropagation(),
-          fullWidth: true,
-          children: [/*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
-            value: "",
-            children: "..."
-          }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
-            value: aggFunc,
-            children: getAggregationFunctionLabel({
-              apiRef,
-              aggregationRule: {
-                aggregationFunctionName: aggFunc,
-                aggregationFunction: rootProps.aggregationFunctions[aggFunc]
-              }
-            })
-          }, aggFunc))]
-        })]
-      })
-    })]
+        onBlur: event => event.stopPropagation(),
+        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]
+          }
+        })))]
+      }))]
+    })
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuAggregationItem.propTypes = {

package/modern/components/GridColumnMenuRowGroupItem.js

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { useGridSelector, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { gridRowGroupingSanitizedModelSelector } from "../hooks/features/rowGrouping/gridRowGroupingSelector.js";
 import { getRowGroupingCriteriaFromGroupingField, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, isGroupingColumn } from "../hooks/features/rowGrouping/gridRowGroupingUtils.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 export function GridColumnMenuRowGroupItem(props) {
   const {
     colDef,
@@ -23,16 +21,13 @@ export function GridColumnMenuRowGroupItem(props) {
     };
     const groupedColumn = columnsLookup[field];
     const name = groupedColumn.headerName ?? field;
-    return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+    return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
       onClick: ungroupColumn,
       disabled: !groupedColumn.groupable,
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        children: apiRef.current.getLocaleText('unGroupColumn')(name)
-      })]
+      iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
+        fontSize: "small"
+      }),
+      children: apiRef.current.getLocaleText('unGroupColumn')(name)
     }, field);
   };
   if (!colDef || !isGroupingColumn(colDef.field)) {

package/modern/components/GridColumnMenuRowUngroupItem.js

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
 import { gridColumnLookupSelector, useGridSelector } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { gridRowGroupingSanitizedModelSelector } from "../hooks/features/rowGrouping/gridRowGroupingSelector.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 export function GridColumnMenuRowUngroupItem(props) {
   const {
     colDef,
@@ -28,25 +26,19 @@ export function GridColumnMenuRowUngroupItem(props) {
   };
   const name = columnsLookup[colDef.field].headerName ?? colDef.field;
   if (rowGroupingModel.includes(colDef.field)) {
-    return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+    return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
       onClick: ungroupColumn,
-      children: [/*#__PURE__*/_jsx(ListItemIcon, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/_jsx(ListItemText, {
-        children: apiRef.current.getLocaleText('unGroupColumn')(name)
-      })]
+      iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuUngroupIcon, {
+        fontSize: "small"
+      }),
+      children: apiRef.current.getLocaleText('unGroupColumn')(name)
     });
   }
-  return /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: groupColumn,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuGroupIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/_jsx(ListItemText, {
-      children: apiRef.current.getLocaleText('groupColumn')(name)
-    })]
+    iconStart: /*#__PURE__*/_jsx(rootProps.slots.columnMenuGroupIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('groupColumn')(name)
   });
 }

package/modern/components/GridDataSourceGroupingCriteriaCell.js

@@ -2,7 +2,6 @@ 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 CircularProgress from '@mui/material/CircularProgress';
 import { useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals';
 import { useGridSelector, getDataGridUtilityClass } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
@@ -47,7 +46,7 @@ function GridGroupingCriteriaCellIcon(props) {
   if (isDataLoading) {
     return /*#__PURE__*/_jsx("div", {
       className: classes.loadingContainer,
-      children: /*#__PURE__*/_jsx(CircularProgress, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseCircularProgress, {
         size: "1rem",
         color: "inherit"
       })

package/modern/components/GridPremiumColumnMenu.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridGenericColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from '@mui/x-data-grid-pro';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridColumnMenuAggregationItem } from "./GridColumnMenuAggregationItem.js";
 import { isGroupingColumn } from "../hooks/features/rowGrouping/index.js";
 import { GridColumnMenuRowGroupItem } from "./GridColumnMenuRowGroupItem.js";
@@ -27,11 +28,10 @@ export const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = _extends({}, GRID_COLUMN_MENU
     displayOrder: 27
   }
 });
-export const GridPremiumColumnMenu = /*#__PURE__*/React.forwardRef(function GridPremiumColumnMenuSimple(props, ref) {
-  return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({
-    ref: ref
-  }, props, {
+export const GridPremiumColumnMenu = forwardRef(function GridPremiumColumnMenuSimple(props, ref) {
+  return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
     defaultSlots: GRID_COLUMN_MENU_SLOTS_PREMIUM,
-    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM
+    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM,
+    ref: ref
   }));
 });

package/modern/components/promptControl/GridToolbarPromptControl.js

@@ -10,9 +10,10 @@ import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { RecordButton, BrowserSpeechRecognition } from "./RecordButton.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const supportsSpeechRecognition = !!BrowserSpeechRecognition;
-const useUtilityClasses = (ownerState, recording) => {
+const useUtilityClasses = ownerState => {
   const {
-    classes
+    classes,
+    recording
   } = ownerState;
   const slots = {
     root: ['toolbarPromptControl', recording && 'toolbarPromptControl--recording'],
@@ -25,7 +26,12 @@ const useUtilityClasses = (ownerState, recording) => {
 const GridToolbarPromptControlRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'ToolbarPromptControl',
-  overridesResolver: (_, styles) => styles.toolbarPromptControl
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.toolbarPromptControl, ownerState.recording && styles['toolbarPromptControl--recording']];
+  }
 })({
   flex: 1,
   display: 'flex',
@@ -71,7 +77,11 @@ function GridToolbarPromptControl(props) {
   const [error, setError] = React.useState(null);
   const [isRecording, setRecording] = React.useState(false);
   const [query, setQuery] = React.useState('');
-  const classes = useUtilityClasses(rootProps, isRecording);
+  const ownerState = {
+    classes: rootProps.classes,
+    recording: isRecording
+  };
+  const classes = useUtilityClasses(ownerState);
   const examplesFromData = React.useMemo(() => allowDataSampling ? sampleData(apiRef) : undefined, [apiRef, allowDataSampling]);
   const processPrompt = React.useCallback(() => {
     const context = generateContext(apiRef, examplesFromData);
@@ -145,10 +155,9 @@ function GridToolbarPromptControl(props) {
   });
   const placeholder = supportsSpeechRecognition ? apiRef.current.getLocaleText('toolbarPromptControlWithRecordingPlaceholder') : apiRef.current.getLocaleText('toolbarPromptControlPlaceholder');
   return /*#__PURE__*/_jsx(GridToolbarPromptControlRoot, {
-    ownerState: rootProps,
+    ownerState: ownerState,
     className: classes.root,
     children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, {
-      variant: "outlined",
       placeholder: isRecording ? apiRef.current.getLocaleText('toolbarPromptControlRecordingPlaceholder') : placeholder,
       "aria-label": apiRef.current.getLocaleText('toolbarPromptControlLabel'),
       disabled: isLoading,
@@ -161,40 +170,42 @@ function GridToolbarPromptControl(props) {
       onKeyDown: handleKeyDown,
       error: !!error,
       helperText: error,
-      InputProps: {
-        startAdornment: supportsSpeechRecognition && /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-          position: "start",
-          children: /*#__PURE__*/_jsx(RecordButton, {
-            className: classes.recordButton,
-            lang: lang,
-            recording: isRecording,
-            setRecording: setRecording,
-            disabled: isLoading,
-            onUpdate: setQuery,
-            onDone: handleDone,
-            onError: setError
-          })
-        }),
-        endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-          position: "end",
-          children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
-            title: apiRef.current.getLocaleText('toolbarPromptControlSendActionLabel'),
-            children: /*#__PURE__*/_jsx("div", {
-              children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, {
-                className: classes.sendButton,
-                disabled: isLoading || isRecording || query === '',
-                color: "primary",
-                onClick: processPrompt,
-                size: "small",
-                "aria-label": apiRef.current.getLocaleText('toolbarPromptControlSendActionAriaLabel'),
-                edge: "end",
-                children: /*#__PURE__*/_jsx(rootProps.slots.toolbarPromptSendIcon, {
-                  fontSize: "small"
+      slotProps: {
+        input: {
+          startAdornment: supportsSpeechRecognition && /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+            position: "start",
+            children: /*#__PURE__*/_jsx(RecordButton, {
+              className: classes.recordButton,
+              lang: lang,
+              recording: isRecording,
+              setRecording: setRecording,
+              disabled: isLoading,
+              onUpdate: setQuery,
+              onDone: handleDone,
+              onError: setError
+            })
+          }),
+          endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+            position: "end",
+            children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+              title: apiRef.current.getLocaleText('toolbarPromptControlSendActionLabel'),
+              children: /*#__PURE__*/_jsx("div", {
+                children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, {
+                  className: classes.sendButton,
+                  disabled: isLoading || isRecording || query === '',
+                  color: "primary",
+                  onClick: processPrompt,
+                  size: "small",
+                  "aria-label": apiRef.current.getLocaleText('toolbarPromptControlSendActionAriaLabel'),
+                  edge: "end",
+                  children: /*#__PURE__*/_jsx(rootProps.slots.toolbarPromptSendIcon, {
+                    fontSize: "small"
+                  })
                 })
               })
             })
           })
-        })
+        }
       }
     })
   });