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

package/components/pivotPanel/GridPivotPanelSearch.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPivotPanelSearch = GridPivotPanelSearch;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _system = require("@mui/system");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _utils = require("@mui/utils");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    container: ['pivotPanelSearchContainer']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const GridPivotPanelSearchContainer = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PivotPanelSearchContainer'
+})({
+  padding: _internals.vars.spacing(0, 1, 1)
+});
+function GridPivotPanelSearch(props) {
+  const {
+    onClear,
+    value,
+    onChange
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const classes = useUtilityClasses(rootProps);
+  const handleKeyDown = event => {
+    if (event.key === 'Escape') {
+      onClear();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelSearchContainer, {
+    ownerState: rootProps,
+    className: classes.container,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
+      size: "small",
+      "aria-label": apiRef.current.getLocaleText('pivotSearchControlLabel'),
+      placeholder: apiRef.current.getLocaleText('pivotSearchControlPlaceholder'),
+      onKeyDown: handleKeyDown,
+      fullWidth: true,
+      slotProps: {
+        input: {
+          startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotSearchIcon, {
+            fontSize: "small"
+          }),
+          endAdornment: value ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, {
+            edge: "end",
+            size: "small",
+            onClick: onClear,
+            "aria-label": apiRef.current.getLocaleText('pivotSearchControlClear'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pivotSearchClearIcon, {
+              fontSize: "small"
+            })
+          }) : null
+        }
+      }
+    }, rootProps.slotProps?.baseTextField, {
+      value: value,
+      onChange: onChange
+    }))
+  });
+}

package/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/components/pivotPanel/PivotPanelTrigger.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PivotPanelTrigger = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridPivotingSelectors = require("../../hooks/features/pivoting/gridPivotingSelectors");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "className", "onClick", "onPointerUp"];
+/**
+ * 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 = exports.PivotPanelTrigger = (0, _forwardRef.forwardRef)(function PivotPanelTrigger(props, ref) {
+  const {
+      render,
+      className,
+      onClick
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const buttonId = (0, _useId.default)();
+  const panelId = (0, _useId.default)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const open = (0, _xDataGridPro.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotPanelOpenSelector);
+  const active = (0, _xDataGridPro.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotActiveSelector);
+  const state = {
+    open,
+    active
+  };
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const handleClick = event => {
+    apiRef.current.setPivotPanelOpen(!open);
+    onClick?.(event);
+  };
+  const element = (0, _internals.useGridComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, 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__*/(0, _jsxRuntime.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.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  disabled: _propTypes.default.bool,
+  id: _propTypes.default.string,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  role: _propTypes.default.string,
+  size: _propTypes.default.oneOf(['large', 'medium', 'small']),
+  startIcon: _propTypes.default.node,
+  style: _propTypes.default.object,
+  tabIndex: _propTypes.default.number,
+  title: _propTypes.default.string,
+  touchRippleRef: _propTypes.default.any
+} : void 0;

package/components/pivotPanel/index.d.ts

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

package/components/pivotPanel/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _PivotPanelTrigger = require("./PivotPanelTrigger");
+Object.keys(_PivotPanelTrigger).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PivotPanelTrigger[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PivotPanelTrigger[key];
+    }
+  });
+});
+var _GridPivotPanel = require("./GridPivotPanel");
+Object.keys(_GridPivotPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridPivotPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridPivotPanel[key];
+    }
+  });
+});

package/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/components/prompt/GridPrompt.js

@@ -0,0 +1,364 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPrompt = GridPrompt;
+var React = _interopRequireWildcard(require("react"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _utils = require("@mui/utils");
+var _system = require("@mui/system");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _jsxRuntime = require("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 (0, _utils.unstable_composeClasses)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
+};
+const fadeIn = (0, _system.keyframes)({
+  from: {
+    opacity: 0
+  },
+  to: {
+    opacity: 1
+  }
+});
+const fadeInUp = (0, _system.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 = (0, _system.styled)('li', {
+  name: 'MuiDataGrid',
+  slot: 'Prompt'
+})`
+  display: flex;
+  padding: ${_internals.vars.spacing(1, 1.25)};
+  align-items: flex-start;
+  overflow: hidden;
+  .${_xDataGridPro.gridClasses.promptAction} {
+    opacity: 0;
+    transition: ${_internals.vars.transition(['opacity'], {
+  duration: _internals.vars.transitions.duration.short
+})};
+  }
+  &:hover .${_xDataGridPro.gridClasses.promptAction}, & .${_xDataGridPro.gridClasses.promptAction}:focus-visible {
+    opacity: 1;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${fadeInUp} ${_internals.vars.transitions.duration.long} ${_internals.vars.transitions.easing.easeInOut};
+  }
+`;
+const PromptContent = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PromptContent'
+})({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  overflow: 'hidden'
+});
+const PromptText = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PromptText'
+})({
+  font: _internals.vars.typography.font.body
+});
+const PromptIconContainer = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PromptIconContainer'
+})({
+  flexShrink: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 36,
+  height: 36,
+  marginRight: _internals.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 = (0, _system.styled)('svg', {
+  name: 'MuiDataGrid',
+  slot: 'PromptIcon'
+})`
+  color: ${({
+  ownerState
+}) => ownerState.variant === 'error' ? _internals.vars.colors.foreground.error : _internals.vars.colors.foreground.muted};
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${fadeIn} ${_internals.vars.transitions.duration.short} ${_internals.vars.transitions.easing.easeInOut};
+  }
+`;
+const PromptFeedback = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PromptFeedback'
+})({
+  font: _internals.vars.typography.font.small,
+  color: _internals.vars.colors.foreground.muted,
+  variants: [{
+    props: {
+      variant: 'error'
+    },
+    style: {
+      color: _internals.vars.colors.foreground.error
+    }
+  }]
+});
+const PromptChangeList = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PromptChangeList'
+})({
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: _internals.vars.spacing(0.5),
+  width: '100%',
+  marginTop: _internals.vars.spacing(1),
+  overflow: 'hidden'
+});
+const PromptChangesToggle = (0, _system.styled)('button', {
+  name: 'MuiDataGrid',
+  slot: 'PromptChangesToggle'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  gap: _internals.vars.spacing(0.25),
+  padding: 0,
+  font: _internals.vars.typography.font.small,
+  color: _internals.vars.colors.foreground.accent,
+  fontWeight: _internals.vars.typography.fontWeight.medium,
+  cursor: 'pointer',
+  border: 'none',
+  background: 'none',
+  outline: 'none',
+  '&:hover, &:focus-visible': {
+    textDecoration: 'underline'
+  }
+});
+const PromptChangesToggleIcon = (0, _system.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 = (0, _useGridRootProps.useGridRootProps)();
+  const [showChanges, setShowChanges] = React.useState(false);
+  const ownerState = {
+    classes: rootProps.classes,
+    variant,
+    showChanges
+  };
+  const classes = useUtilityClasses(ownerState);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const columns = (0, _xDataGridPro.useGridSelector)(apiRef, _xDataGridPro.gridColumnLookupSelector);
+  const changesListId = (0, _useId.default)();
+  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${(0, _utils.unstable_capitalize)(filter.operator)}`);
+      let filterValue = filter.value;
+      if ((0, _internals.isSingleSelectColDef)(columns[filter.column])) {
+        const allOptions = (0, _internals.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__*/(0, _jsxRuntime.jsxs)(PromptItem, {
+    ownerState: ownerState,
+    className: classes.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PromptIconContainer, {
+      ownerState: ownerState,
+      className: classes.iconContainer,
+      children: !response && variant !== 'error' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCircularProgress, {
+        size: 20
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(PromptIcon, {
+        as: rootProps.slots.promptIcon,
+        ownerState: ownerState,
+        className: classes.icon,
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(PromptContent, {
+      ownerState: ownerState,
+      className: classes.content,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PromptText, {
+        ownerState: ownerState,
+        className: classes.text,
+        children: value
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PromptFeedback, {
+        ownerState: ownerState,
+        className: classes.feedback,
+        children: helperText
+      }), changeList.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PromptChangesToggle, {
+          ownerState: ownerState,
+          className: classes.changesToggle,
+          "aria-expanded": showChanges,
+          "aria-controls": changesListId,
+          onClick: () => setShowChanges(!showChanges),
+          children: [apiRef.current.getLocaleText('promptAppliedChanges'), /*#__PURE__*/(0, _jsxRuntime.jsx)(PromptChangesToggleIcon, {
+            as: rootProps.slots.promptChangesToggleIcon,
+            ownerState: ownerState,
+            fontSize: "small"
+          })]
+        }), showChanges && /*#__PURE__*/(0, _jsxRuntime.jsx)(PromptChangeList, {
+          id: changesListId,
+          ownerState: ownerState,
+          className: classes.changeList,
+          children: changeList.map(change => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+            title: change.description,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, {
+              label: change.label,
+              icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(change.icon, {}),
+              size: "small"
+            })
+          }, change.label))
+        })]
+      }) : null]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+      title: apiRef.current.getLocaleText('promptRerun'),
+      enterDelay: 500,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, {
+        size: "small",
+        className: classes.action,
+        onClick: onRerun,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.promptRerunIcon, {
+          fontSize: "small"
+        })
+      })
+    })]
+  });
+}

package/components/prompt/index.d.ts

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

package/components/prompt/index.js

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

package/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 };