@mui/x-data-grid-premium 8.0.0-beta.3 → 8.1.0

package/esm/components/pivotPanel/PivotPanelTrigger.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { RenderProp } from '@mui/x-data-grid-pro/internals';
+import { GridSlotProps } from '@mui/x-data-grid-pro';
+export interface PivotPanelState {
+  /**
+   * If `true`, the pivot panel is open.
+   */
+  open: boolean;
+  /**
+   * If `true`, pivot is active.
+   */
+  active: boolean;
+}
+export type PivotPanelTriggerProps = Omit<GridSlotProps['baseButton'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseButton'], PivotPanelState>;
+  /**
+   * A function to customize rendering of the component.
+   */
+  className?: string | ((state: PivotPanelState) => string);
+};
+/**
+ * A button that opens and closes the pivot panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Pivot Panel](https://mui.com/x/react-data-grid/components/pivot-panel/)
+ *
+ * API:
+ *
+ * - [PivotPanelTrigger API](https://mui.com/x/api/data-grid/pivot-panel-trigger/)
+ */
+declare const PivotPanelTrigger: React.ForwardRefExoticComponent<PivotPanelTriggerProps> | React.ForwardRefExoticComponent<Omit<PivotPanelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { PivotPanelTrigger };

package/esm/components/pivotPanel/PivotPanelTrigger.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "className", "onClick", "onPointerUp"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import useId from '@mui/utils/useId';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridComponentRenderer } from '@mui/x-data-grid-pro/internals';
+import { useGridSelector } from '@mui/x-data-grid-pro';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { gridPivotPanelOpenSelector, gridPivotActiveSelector } from "../../hooks/features/pivoting/gridPivotingSelectors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button that opens and closes the pivot panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Pivot Panel](https://mui.com/x/react-data-grid/components/pivot-panel/)
+ *
+ * API:
+ *
+ * - [PivotPanelTrigger API](https://mui.com/x/api/data-grid/pivot-panel-trigger/)
+ */
+const PivotPanelTrigger = forwardRef(function PivotPanelTrigger(props, ref) {
+  const {
+      render,
+      className,
+      onClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const buttonId = useId();
+  const panelId = useId();
+  const apiRef = useGridApiContext();
+  const open = useGridSelector(apiRef, gridPivotPanelOpenSelector);
+  const active = useGridSelector(apiRef, gridPivotActiveSelector);
+  const state = {
+    open,
+    active
+  };
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const handleClick = event => {
+    apiRef.current.setPivotPanelOpen(!open);
+    onClick?.(event);
+  };
+  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
+    id: buttonId,
+    // TODO: Hook up the panel/trigger IDs to the pivot panel
+    'aria-haspopup': 'true',
+    'aria-expanded': open ? 'true' : undefined,
+    'aria-controls': open ? panelId : undefined,
+    onClick: handleClick,
+    className: resolvedClassName
+  }, other, {
+    ref
+  }), state);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? PivotPanelTrigger.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.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  role: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  startIcon: PropTypes.node,
+  style: PropTypes.object,
+  tabIndex: PropTypes.number,
+  title: PropTypes.string,
+  touchRippleRef: PropTypes.any
+} : void 0;
+export { PivotPanelTrigger };

package/esm/components/pivotPanel/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./PivotPanelTrigger.js";
+export * from "./GridPivotPanel.js";

package/esm/components/pivotPanel/index.js

@@ -0,0 +1,2 @@
+export * from "./PivotPanelTrigger.js";
+export * from "./GridPivotPanel.js";

package/esm/components/prompt/GridPrompt.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Prompt } from "../../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
+type GridPromptProps = Prompt & {
+  onRerun: () => void;
+};
+declare function GridPrompt(props: GridPromptProps): React.JSX.Element;
+export { GridPrompt };

package/esm/components/prompt/GridPrompt.js

@@ -0,0 +1,357 @@
+import * as React from 'react';
+import { getDataGridUtilityClass, gridClasses, gridColumnLookupSelector, useGridSelector } from '@mui/x-data-grid-pro';
+import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import { keyframes, styled } from '@mui/system';
+import { getValueOptions, isSingleSelectColDef, vars } from '@mui/x-data-grid-pro/internals';
+import useId from '@mui/utils/useId';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['prompt'],
+    iconContainer: ['promptIconContainer'],
+    icon: ['promptIcon'],
+    text: ['promptText'],
+    content: ['promptContent'],
+    action: ['promptAction'],
+    feedback: ['promptFeedback'],
+    changeList: ['promptChangeList'],
+    changesToggle: ['promptChangesToggle'],
+    changesToggleIcon: ['promptChangesToggleIcon']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const fadeIn = keyframes({
+  from: {
+    opacity: 0
+  },
+  to: {
+    opacity: 1
+  }
+});
+const fadeInUp = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(5px)'
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)'
+  }
+});
+
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
+const PromptItem = styled('li', {
+  name: 'MuiDataGrid',
+  slot: 'Prompt'
+})`
+  display: flex;
+  padding: ${vars.spacing(1, 1.25)};
+  align-items: flex-start;
+  overflow: hidden;
+  .${gridClasses.promptAction} {
+    opacity: 0;
+    transition: ${vars.transition(['opacity'], {
+  duration: vars.transitions.duration.short
+})};
+  }
+  &:hover .${gridClasses.promptAction}, & .${gridClasses.promptAction}:focus-visible {
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${fadeInUp} ${vars.transitions.duration.long} ${vars.transitions.easing.easeInOut};
+  }
+`;
+const PromptContent = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PromptContent'
+})({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  overflow: 'hidden'
+});
+const PromptText = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PromptText'
+})({
+  font: vars.typography.font.body
+});
+const PromptIconContainer = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PromptIconContainer'
+})({
+  flexShrink: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 36,
+  height: 36,
+  marginRight: vars.spacing(1.5)
+});
+
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
+const PromptIcon = styled('svg', {
+  name: 'MuiDataGrid',
+  slot: 'PromptIcon'
+})`
+  color: ${({
+  ownerState
+}) => ownerState.variant === 'error' ? vars.colors.foreground.error : vars.colors.foreground.muted};
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${fadeIn} ${vars.transitions.duration.short} ${vars.transitions.easing.easeInOut};
+  }
+`;
+const PromptFeedback = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PromptFeedback'
+})({
+  font: vars.typography.font.small,
+  color: vars.colors.foreground.muted,
+  variants: [{
+    props: {
+      variant: 'error'
+    },
+    style: {
+      color: vars.colors.foreground.error
+    }
+  }]
+});
+const PromptChangeList = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PromptChangeList'
+})({
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: vars.spacing(0.5),
+  width: '100%',
+  marginTop: vars.spacing(1),
+  overflow: 'hidden'
+});
+const PromptChangesToggle = styled('button', {
+  name: 'MuiDataGrid',
+  slot: 'PromptChangesToggle'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing(0.25),
+  padding: 0,
+  font: vars.typography.font.small,
+  color: vars.colors.foreground.accent,
+  fontWeight: vars.typography.fontWeight.medium,
+  cursor: 'pointer',
+  border: 'none',
+  background: 'none',
+  outline: 'none',
+  '&:hover, &:focus-visible': {
+    textDecoration: 'underline'
+  }
+});
+const PromptChangesToggleIcon = styled('svg', {
+  name: 'MuiDataGrid',
+  slot: 'PromptChangesToggleIcon'
+})({
+  variants: [{
+    props: {
+      showChanges: true
+    },
+    style: {
+      transform: 'rotate(180deg)'
+    }
+  }]
+});
+function GridPrompt(props) {
+  const {
+    value,
+    response,
+    helperText,
+    variant,
+    onRerun
+  } = props;
+  const rootProps = useGridRootProps();
+  const [showChanges, setShowChanges] = React.useState(false);
+  const ownerState = {
+    classes: rootProps.classes,
+    variant,
+    showChanges
+  };
+  const classes = useUtilityClasses(ownerState);
+  const apiRef = useGridApiContext();
+  const columns = useGridSelector(apiRef, gridColumnLookupSelector);
+  const changesListId = useId();
+  const getColumnName = React.useCallback(column => columns[column]?.headerName ?? column, [columns]);
+  const getGroupingChanges = React.useCallback(grouping => {
+    return grouping.map(group => ({
+      label: getColumnName(group.column),
+      description: apiRef.current.getLocaleText('promptChangeGroupDescription')(getColumnName(group.column)),
+      icon: rootProps.slots.promptGroupIcon
+    }));
+  }, [apiRef, getColumnName, rootProps.slots.promptGroupIcon]);
+  const getAggregationChanges = React.useCallback(aggregation => {
+    return Object.keys(aggregation).map(column => ({
+      label: apiRef.current.getLocaleText('promptChangeAggregationLabel')(getColumnName(column), aggregation[column]),
+      description: apiRef.current.getLocaleText('promptChangeAggregationDescription')(getColumnName(column), aggregation[column]),
+      icon: rootProps.slots.promptAggregationIcon
+    }));
+  }, [apiRef, getColumnName, rootProps.slots.promptAggregationIcon]);
+  const getFilterChanges = React.useCallback(filters => {
+    return filters.map(filter => {
+      const filterOperator = apiRef.current.getLocaleText(`filterOperator${capitalize(filter.operator)}`);
+      let filterValue = filter.value;
+      if (isSingleSelectColDef(columns[filter.column])) {
+        const allOptions = getValueOptions(columns[filter.column]) ?? [];
+        const colDef = columns[filter.column];
+        const getOptionLabel = colDef.getOptionLabel ?? (option => typeof option === 'object' ? option.label : String(option));
+        const getOptionValue = colDef.getOptionValue ?? (option => typeof option === 'object' ? option.value : option);
+        if (Array.isArray(filterValue)) {
+          filterValue = filterValue.map(filterVal => {
+            const option = allOptions.find(opt => String(getOptionValue(opt)) === String(filterVal));
+            return option ? getOptionLabel(option) : String(filterVal);
+          }).join(', ');
+        } else {
+          const option = allOptions.find(opt => String(getOptionValue(opt)) === String(filterValue));
+          filterValue = option ? getOptionLabel(option) : String(filterValue);
+        }
+      }
+      return {
+        label: apiRef.current.getLocaleText('promptChangeFilterLabel')(getColumnName(filter.column), filterOperator, filterValue),
+        description: apiRef.current.getLocaleText('promptChangeFilterDescription')(getColumnName(filter.column), filterOperator, filterValue),
+        icon: rootProps.slots.promptFilterIcon
+      };
+    });
+  }, [apiRef, columns, getColumnName, rootProps.slots.promptFilterIcon]);
+  const getSortingChanges = React.useCallback(sorting => {
+    return sorting.map(sort => ({
+      label: getColumnName(sort.column),
+      description: apiRef.current.getLocaleText('promptChangeSortDescription')(getColumnName(sort.column), sort.direction),
+      icon: sort.direction === 'asc' ? rootProps.slots.promptSortAscIcon : rootProps.slots.promptSortDescIcon
+    }));
+  }, [apiRef, getColumnName, rootProps.slots.promptSortAscIcon, rootProps.slots.promptSortDescIcon]);
+  const getPivotingChanges = React.useCallback(pivoting => {
+    // Type guard, neccessary because pivoting can be an empty object
+    if (!('columns' in pivoting)) {
+      return [];
+    }
+    const changes = [{
+      label: apiRef.current.getLocaleText('promptChangePivotEnableLabel'),
+      icon: rootProps.slots.promptPivotIcon,
+      description: apiRef.current.getLocaleText('promptChangePivotEnableDescription')
+    }];
+    if (pivoting.columns.length) {
+      changes.push({
+        label: apiRef.current.getLocaleText('promptChangePivotColumnsLabel')(pivoting.columns.length),
+        icon: rootProps.slots.columnMenuManageColumnsIcon,
+        description: pivoting.columns.map(column => apiRef.current.getLocaleText('promptChangePivotColumnsDescription')(getColumnName(column.column), column.direction)).join(`, `)
+      });
+    }
+    if (pivoting.rows.length) {
+      changes.push({
+        label: apiRef.current.getLocaleText('promptChangePivotRowsLabel')(pivoting.rows.length),
+        icon: rootProps.slots.densityStandardIcon,
+        description: pivoting.rows.map(column => getColumnName(column)).join(`, `)
+      });
+    }
+    if (pivoting.values.length) {
+      changes.push({
+        label: apiRef.current.getLocaleText('promptChangePivotValuesLabel')(pivoting.values.length),
+        icon: rootProps.slots.promptAggregationIcon,
+        description: pivoting.values.map(aggregation => Object.keys(aggregation).map(column => apiRef.current.getLocaleText('promptChangePivotValuesDescription')(getColumnName(column), aggregation[column]))).join(`, `)
+      });
+    }
+    return changes;
+  }, [apiRef, getColumnName, rootProps.slots]);
+  const changeList = React.useMemo(() => {
+    if (!response) {
+      return [];
+    }
+    const changes = [];
+    if (response.grouping.length) {
+      changes.push(...getGroupingChanges(response.grouping));
+    }
+    if (response.aggregation && Object.keys(response.aggregation).length) {
+      changes.push(...getAggregationChanges(response.aggregation));
+    }
+    if (response.filters.length) {
+      changes.push(...getFilterChanges(response.filters));
+    }
+    if (response.sorting.length) {
+      changes.push(...getSortingChanges(response.sorting));
+    }
+    if (response.pivoting && 'columns' in response.pivoting) {
+      changes.push(...getPivotingChanges(response.pivoting));
+    }
+    return changes;
+  }, [response, getGroupingChanges, getAggregationChanges, getFilterChanges, getSortingChanges, getPivotingChanges]);
+  return /*#__PURE__*/_jsxs(PromptItem, {
+    ownerState: ownerState,
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx(PromptIconContainer, {
+      ownerState: ownerState,
+      className: classes.iconContainer,
+      children: !response && variant !== 'error' ? /*#__PURE__*/_jsx(rootProps.slots.baseCircularProgress, {
+        size: 20
+      }) : /*#__PURE__*/_jsx(PromptIcon, {
+        as: rootProps.slots.promptIcon,
+        ownerState: ownerState,
+        className: classes.icon,
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/_jsxs(PromptContent, {
+      ownerState: ownerState,
+      className: classes.content,
+      children: [/*#__PURE__*/_jsx(PromptText, {
+        ownerState: ownerState,
+        className: classes.text,
+        children: value
+      }), /*#__PURE__*/_jsx(PromptFeedback, {
+        ownerState: ownerState,
+        className: classes.feedback,
+        children: helperText
+      }), changeList.length > 0 ? /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsxs(PromptChangesToggle, {
+          ownerState: ownerState,
+          className: classes.changesToggle,
+          "aria-expanded": showChanges,
+          "aria-controls": changesListId,
+          onClick: () => setShowChanges(!showChanges),
+          children: [apiRef.current.getLocaleText('promptAppliedChanges'), /*#__PURE__*/_jsx(PromptChangesToggleIcon, {
+            as: rootProps.slots.promptChangesToggleIcon,
+            ownerState: ownerState,
+            fontSize: "small"
+          })]
+        }), showChanges && /*#__PURE__*/_jsx(PromptChangeList, {
+          id: changesListId,
+          ownerState: ownerState,
+          className: classes.changeList,
+          children: changeList.map(change => /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+            title: change.description,
+            children: /*#__PURE__*/_jsx(rootProps.slots.baseChip, {
+              label: change.label,
+              icon: /*#__PURE__*/_jsx(change.icon, {}),
+              size: "small"
+            })
+          }, change.label))
+        })]
+      }) : null]
+    }), /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+      title: apiRef.current.getLocaleText('promptRerun'),
+      enterDelay: 500,
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, {
+        size: "small",
+        className: classes.action,
+        onClick: onRerun,
+        children: /*#__PURE__*/_jsx(rootProps.slots.promptRerunIcon, {
+          fontSize: "small"
+        })
+      })
+    })]
+  });
+}
+export { GridPrompt };

package/esm/components/prompt/index.d.ts

@@ -0,0 +1 @@
+export { GridPrompt } from "./GridPrompt.js";

package/esm/components/prompt/index.js

@@ -0,0 +1 @@
+export { GridPrompt } from "./GridPrompt.js";

package/esm/components/promptField/GridPromptField.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { PromptFieldProps } from "./PromptField.js";
+declare function GridPromptField(props: PromptFieldProps): React.JSX.Element;
+export { GridPromptField };

package/esm/components/promptField/GridPromptField.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ref"];
+import * as React from 'react';
+import { PromptField } from "./PromptField.js";
+import { PromptFieldControl } from "./PromptFieldControl.js";
+import { PromptFieldRecord } from "./PromptFieldRecord.js";
+import { PromptFieldSend } from "./PromptFieldSend.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { IS_SPEECH_RECOGNITION_SUPPORTED } from "../../utils/speechRecognition.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function GridPromptField(props) {
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  let placeholder = apiRef.current.getLocaleText('promptFieldPlaceholder');
+  if (IS_SPEECH_RECOGNITION_SUPPORTED) {
+    placeholder = apiRef.current.getLocaleText('promptFieldPlaceholderWithRecording');
+  }
+  return /*#__PURE__*/_jsx(PromptField, _extends({}, props, {
+    children: /*#__PURE__*/_jsx(PromptFieldControl, {
+      onKeyDown: event => {
+        if (event.key === 'Enter') {
+          // Prevents the `multiline` TextField from adding a new line
+          event.preventDefault();
+        }
+      },
+      render: (_ref, state) => {
+        let {
+            ref
+          } = _ref,
+          controlProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+        return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, controlProps, {
+          fullWidth: true,
+          inputRef: ref,
+          "aria-label": apiRef.current.getLocaleText('promptFieldLabel'),
+          placeholder: state.recording ? apiRef.current.getLocaleText('promptFieldPlaceholderListening') : placeholder,
+          size: "small",
+          multiline: true,
+          autoFocus: true,
+          slotProps: _extends({
+            input: _extends({
+              startAdornment: IS_SPEECH_RECOGNITION_SUPPORTED ? /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+                title: state.recording ? apiRef.current.getLocaleText('promptFieldStopRecording') : apiRef.current.getLocaleText('promptFieldRecord'),
+                children: /*#__PURE__*/_jsx(PromptFieldRecord, {
+                  size: "small",
+                  edge: "start",
+                  color: state.recording ? 'primary' : 'default',
+                  children: /*#__PURE__*/_jsx(rootProps.slots.promptSpeechRecognitionIcon, {
+                    fontSize: "small"
+                  })
+                })
+              }) : /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+                title: apiRef.current.getLocaleText('promptFieldSpeechRecognitionNotSupported'),
+                children: /*#__PURE__*/_jsx(rootProps.slots.promptSpeechRecognitionOffIcon, {
+                  fontSize: "small"
+                })
+              }),
+              endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+                title: apiRef.current.getLocaleText('promptFieldSend'),
+                children: /*#__PURE__*/_jsx("span", {
+                  children: /*#__PURE__*/_jsx(PromptFieldSend, {
+                    size: "small",
+                    edge: "end",
+                    color: "primary",
+                    children: /*#__PURE__*/_jsx(rootProps.slots.promptSendIcon, {
+                      fontSize: "small"
+                    })
+                  })
+                })
+              })
+            }, controlProps.slotProps?.input)
+          }, controlProps.slotProps)
+        }));
+      }
+    })
+  }));
+}
+export { GridPromptField };

package/esm/components/promptField/PromptField.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { RenderProp } from '@mui/x-data-grid';
+import { PromptFieldState } from "./PromptFieldContext.js";
+export type PromptFieldProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'onSubmit'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<React.ComponentProps<'div'>, PromptFieldState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: PromptFieldState) => string);
+  /**
+   * The BCP 47 language tag to use for the speech recognition.
+   * @default HTML lang attribute value or the user agent's language setting
+   */
+  lang?: string;
+  /**
+   * Called when an speech recognition error occurs.
+   * @param {string} error The error message
+   */
+  onRecordError?: (error: string) => void;
+  /**
+   * Called when the user submits the prompt.
+   * @param {string} prompt The prompt
+   */
+  onSubmit: (prompt: string) => void;
+};
+/**
+ * The top level Prompt Field component that provides context to child components.
+ * It renders a `<div />` element.
+ *
+ * Demos:
+ *
+ * - [Prompt Field](https://mui.com/x/react-data-grid/components/prompt-field/)
+ *
+ * API:
+ *
+ * - [PromptField API](https://mui.com/x/api/data-grid/prompt-field/)
+ */
+declare const PromptField: React.ForwardRefExoticComponent<PromptFieldProps> | React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "onSubmit"> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<React.ComponentProps<"div">, PromptFieldState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: PromptFieldState) => string);
+  /**
+   * The BCP 47 language tag to use for the speech recognition.
+   * @default HTML lang attribute value or the user agent's language setting
+   */
+  lang?: string;
+  /**
+   * Called when an speech recognition error occurs.
+   * @param {string} error The error message
+   */
+  onRecordError?: (error: string) => void;
+  /**
+   * Called when the user submits the prompt.
+   * @param {string} prompt The prompt
+   */
+  onSubmit: (prompt: string) => void;
+} & React.RefAttributes<HTMLDivElement>>;
+export { PromptField };