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

package/esm/components/GridPremiumToolbar.js

@@ -2,15 +2,42 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["excelOptions"];
 import * as React from 'react';
-import { GridToolbar } from '@mui/x-data-grid/internals';
+import { GridToolbar } from '@mui/x-data-grid-pro/internals';
+import { ToolbarButton } from '@mui/x-data-grid-pro';
 import { ExportExcel } from "./export/index.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { PivotPanelTrigger } from "./pivotPanel/PivotPanelTrigger.js";
+import { isPivotingAvailable } from "../hooks/features/pivoting/utils.js";
+import { AiAssistantPanelTrigger } from "./aiAssistantPanel/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function GridPremiumToolbar(props) {
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
   const other = _objectWithoutPropertiesLoose(props, _excluded);
+  const additionalItems = /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [isPivotingAvailable(rootProps) && /*#__PURE__*/_jsx(PivotPanelTrigger, {
+      render: (triggerProps, state) => /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarPivot'),
+        children: /*#__PURE__*/_jsx(ToolbarButton, _extends({}, triggerProps, {
+          color: state.active ? 'primary' : 'default',
+          children: /*#__PURE__*/_jsx(rootProps.slots.pivotIcon, {
+            fontSize: "small"
+          })
+        }))
+      })
+    }), rootProps.aiAssistant && /*#__PURE__*/_jsx(AiAssistantPanelTrigger, {
+      render: triggerProps => /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('toolbarAssistant'),
+        children: /*#__PURE__*/_jsx(ToolbarButton, _extends({}, triggerProps, {
+          color: "default",
+          children: /*#__PURE__*/_jsx(rootProps.slots.aiAssistantIcon, {
+            fontSize: "small"
+          })
+        }))
+      })
+    })]
+  });
   const additionalExportMenuItems = !props.excelOptions?.disableToolbarButton ? onMenuItemClick => /*#__PURE__*/_jsx(ExportExcel, {
     render: /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({}, rootProps.slotProps?.baseMenuItem)),
     options: props.excelOptions,
@@ -18,6 +45,7 @@ export function GridPremiumToolbar(props) {
     children: apiRef.current.getLocaleText('toolbarExportExcel')
   }) : undefined;
   return /*#__PURE__*/_jsx(GridToolbar, _extends({}, other, {
+    additionalItems: additionalItems,
     additionalExportMenuItems: additionalExportMenuItems
   }));
 }

package/esm/components/aiAssistantPanel/AiAssistantPanelTrigger.d.ts

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

package/esm/components/aiAssistantPanel/AiAssistantPanelTrigger.js

@@ -0,0 +1,100 @@
+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, useGridPanelContext } from '@mui/x-data-grid-pro/internals';
+import { gridPreferencePanelStateSelector, GridPreferencePanelsValue, useGridSelector } from '@mui/x-data-grid-pro';
+import { useForkRef } from '@mui/material/utils';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button that opens and closes the assistant panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [AI Assistant Panel](https://mui.com/x/react-data-grid/components/ai-assistant-panel/)
+ *
+ * API:
+ *
+ * - [AiAssistantPanelTrigger API](https://mui.com/x/api/data-grid/ai-assistant-panel-trigger/)
+ */
+const AiAssistantPanelTrigger = forwardRef(function AiAssistantPanelTrigger(props, ref) {
+  const {
+      render,
+      className,
+      onClick,
+      onPointerUp
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const buttonId = useId();
+  const panelId = useId();
+  const apiRef = useGridApiContext();
+  const panelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  const open = panelState.open && panelState.openedPanelValue === GridPreferencePanelsValue.aiAssistant;
+  const state = {
+    open
+  };
+  const resolvedClassName = typeof className === 'function' ? className(state) : className;
+  const {
+    aiAssistantPanelTriggerRef
+  } = useGridPanelContext();
+  const handleRef = useForkRef(ref, aiAssistantPanelTriggerRef);
+  const handleClick = event => {
+    if (open) {
+      apiRef.current.hidePreferences();
+    } else {
+      apiRef.current.showPreferences(GridPreferencePanelsValue.aiAssistant, panelId, buttonId);
+    }
+    onClick?.(event);
+  };
+  const handlePointerUp = event => {
+    if (open) {
+      event.stopPropagation();
+    }
+    onPointerUp?.(event);
+  };
+  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {
+    id: buttonId,
+    'aria-haspopup': 'true',
+    'aria-expanded': open ? 'true' : undefined,
+    'aria-controls': open ? panelId : undefined,
+    className: resolvedClassName
+  }, other, {
+    onClick: handleClick,
+    onPointerUp: handlePointerUp,
+    ref: handleRef
+  }), state);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? AiAssistantPanelTrigger.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 { AiAssistantPanelTrigger };

package/esm/components/aiAssistantPanel/GridAiAssistantPanel.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function GridAiAssistantPanel(): React.JSX.Element;
+export { GridAiAssistantPanel };

package/esm/components/aiAssistantPanel/GridAiAssistantPanel.js

@@ -0,0 +1,188 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridSelector, getDataGridUtilityClass } from '@mui/x-data-grid-pro';
+import { vars } from '@mui/x-data-grid-pro/internals';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { gridAiAssistantActiveConversationSelector, gridAiAssistantConversationsSelector } from "../../hooks/features/aiAssistant/gridAiAssistantSelectors.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { GridAiAssistantPanelConversation } from "./GridAiAssistantPanelConversation.js";
+import { GridPromptField } from "../promptField/GridPromptField.js";
+import { GridAiAssistantPanelSuggestions } from "./GridAiAssistantPanelSuggestions.js";
+import { GridAiAssistantPanelConversationsMenu } from "./GridAiAssistantPanelConversationsMenu.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['aiAssistantPanel'],
+    header: ['aiAssistantPanelHeader'],
+    title: ['aiAssistantPanelTitle'],
+    titleContainer: ['aiAssistantPanelTitleContainer'],
+    conversationTitle: ['aiAssistantPanelConversationTitle'],
+    body: ['aiAssistantPanelBody'],
+    emptyText: ['aiAssistantPanelEmptyText'],
+    footer: ['aiAssistantPanelFooter']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const AiAssistantPanelRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanel'
+})({
+  flexDirection: 'column',
+  width: 380,
+  maxHeight: 'none',
+  overflow: 'hidden'
+});
+const AiAssistantPanelHeader = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelHeader'
+})({
+  flexShrink: 0,
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  boxSizing: 'border-box',
+  borderBottom: `1px solid ${vars.colors.border.base}`,
+  height: 52,
+  padding: vars.spacing(0, 0.75, 0, 2)
+});
+const AiAssistantPanelTitleContainer = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelTitleContainer'
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  overflow: 'hidden'
+});
+const AiAssistantPanelTitle = styled('span', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelTitle'
+})({
+  font: vars.typography.font.body,
+  fontWeight: vars.typography.fontWeight.medium,
+  marginTop: vars.spacing(0.25)
+});
+const AiAssistantPanelConversationTitle = styled('span', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelConversationTitle'
+})({
+  font: vars.typography.font.small,
+  color: vars.colors.foreground.muted,
+  marginTop: vars.spacing(-0.25),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const AiAssistantPanelBody = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelBody'
+})({
+  flexGrow: 0,
+  flexShrink: 0,
+  height: 260,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const AiAssistantPanelEmptyText = styled('span', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelEmptyText'
+})({
+  font: vars.typography.font.body,
+  color: vars.colors.foreground.muted
+});
+const AiAssistantPanelFooter = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelFooter'
+})({
+  flexShrink: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing(1),
+  borderTop: `1px solid ${vars.colors.border.base}`,
+  padding: vars.spacing(1)
+});
+function GridAiAssistantPanel() {
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const classes = useUtilityClasses(rootProps);
+  const activeConversation = useGridSelector(apiRef, gridAiAssistantActiveConversationSelector);
+  const conversations = useGridSelector(apiRef, gridAiAssistantConversationsSelector);
+  const conversationTitle = activeConversation?.title || apiRef.current.getLocaleText('aiAssistantPanelNewConversation');
+  const createConversation = React.useCallback(() => {
+    const newConversation = conversations.findIndex(conversation => !conversation.prompts.length);
+    if (newConversation !== -1) {
+      apiRef.current.aiAssistant.setActiveConversationIndex(newConversation);
+    } else {
+      apiRef.current.aiAssistant.setConversations(newConversations => [...newConversations, {
+        title: apiRef.current.getLocaleText('aiAssistantPanelNewConversation'),
+        prompts: []
+      }]);
+      apiRef.current.aiAssistant.setActiveConversationIndex(conversations.length);
+    }
+  }, [apiRef, conversations]);
+  return /*#__PURE__*/_jsxs(AiAssistantPanelRoot, {
+    className: classes.root,
+    ownerState: rootProps,
+    children: [/*#__PURE__*/_jsxs(AiAssistantPanelHeader, {
+      className: classes.header,
+      ownerState: rootProps,
+      children: [/*#__PURE__*/_jsxs(AiAssistantPanelTitleContainer, {
+        className: classes.titleContainer,
+        ownerState: rootProps,
+        children: [/*#__PURE__*/_jsx(AiAssistantPanelTitle, {
+          className: classes.title,
+          ownerState: rootProps,
+          children: apiRef.current.getLocaleText('aiAssistantPanelTitle')
+        }), /*#__PURE__*/_jsx(AiAssistantPanelConversationTitle, {
+          className: classes.conversationTitle,
+          ownerState: rootProps,
+          title: conversationTitle,
+          children: conversationTitle
+        })]
+      }), /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+        title: apiRef.current.getLocaleText('aiAssistantPanelNewConversation'),
+        enterDelay: 500,
+        children: /*#__PURE__*/_jsx("span", {
+          children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({}, rootProps.slotProps?.baseIconButton, {
+            disabled: !conversations.length || !activeConversation?.prompts.length,
+            onClick: createConversation,
+            children: /*#__PURE__*/_jsx(rootProps.slots.aiAssistantPanelNewConversationIcon, {
+              fontSize: "small"
+            })
+          }))
+        })
+      }), /*#__PURE__*/_jsx(GridAiAssistantPanelConversationsMenu, {}), /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({}, rootProps.slotProps?.baseIconButton, {
+        "aria-label": apiRef.current.getLocaleText('aiAssistantPanelClose'),
+        onClick: apiRef.current.hidePreferences,
+        children: /*#__PURE__*/_jsx(rootProps.slots.aiAssistantPanelCloseIcon, {
+          fontSize: "small"
+        })
+      }))]
+    }), /*#__PURE__*/_jsx(AiAssistantPanelBody, {
+      className: classes.body,
+      ownerState: rootProps,
+      children: activeConversation && activeConversation.prompts.length > 0 ? /*#__PURE__*/_jsx(GridAiAssistantPanelConversation, {
+        conversation: activeConversation
+      }) : /*#__PURE__*/_jsx(AiAssistantPanelEmptyText, {
+        ownerState: rootProps,
+        className: classes.emptyText,
+        children: apiRef.current.getLocaleText('aiAssistantPanelEmptyConversation')
+      })
+    }), /*#__PURE__*/_jsxs(AiAssistantPanelFooter, {
+      className: classes.footer,
+      ownerState: rootProps,
+      children: [/*#__PURE__*/_jsx(GridPromptField, {
+        onSubmit: apiRef.current.aiAssistant.processPrompt
+      }), rootProps.aiAssistantSuggestions && rootProps.aiAssistantSuggestions.length > 0 && /*#__PURE__*/_jsx(GridAiAssistantPanelSuggestions, {
+        suggestions: rootProps.aiAssistantSuggestions
+      })]
+    })]
+  });
+}
+export { GridAiAssistantPanel };

package/esm/components/aiAssistantPanel/GridAiAssistantPanelConversation.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Conversation } from "../../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
+type GridAiAssistantPanelConversationProps = {
+  conversation: Conversation;
+};
+declare function GridAiAssistantPanelConversation(props: GridAiAssistantPanelConversationProps): React.JSX.Element;
+export { GridAiAssistantPanelConversation };

package/esm/components/aiAssistantPanel/GridAiAssistantPanelConversation.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { getDataGridUtilityClass, GridShadowScrollArea } from '@mui/x-data-grid-pro';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { GridPrompt } from "../prompt/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['aiAssistantPanelConversation'],
+    list: ['aiAssistantPanelConversationList']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const AiAssistantPanelConversationRoot = styled(GridShadowScrollArea, {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelConversation'
+})({
+  flexShrink: 0,
+  height: '100%'
+});
+const AiAssistantPanelConversationList = styled('ol', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelConversationList'
+})({
+  flex: 1,
+  padding: 0,
+  margin: 0
+});
+function GridAiAssistantPanelConversation(props) {
+  const {
+    conversation
+  } = props;
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  const ref = React.useRef(null);
+  const apiRef = useGridApiContext();
+
+  // Scroll to the bottom of the conversation when the prompt list changes
+  React.useEffect(() => {
+    ref.current?.scrollTo({
+      top: ref.current?.scrollHeight,
+      behavior: 'smooth'
+    });
+  }, [conversation]);
+  return /*#__PURE__*/_jsx(AiAssistantPanelConversationRoot, {
+    className: classes.root,
+    ownerState: rootProps,
+    ref: ref,
+    children: /*#__PURE__*/_jsx(AiAssistantPanelConversationList, {
+      className: classes.list,
+      ownerState: rootProps,
+      children: conversation.prompts.map(item => /*#__PURE__*/_jsx(GridPrompt, _extends({}, item, {
+        onRerun: () => apiRef.current.aiAssistant.processPrompt(item.value)
+      }), item.createdAt.toISOString()))
+    })
+  });
+}
+export { GridAiAssistantPanelConversation };

package/esm/components/aiAssistantPanel/GridAiAssistantPanelConversationsMenu.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function GridAiAssistantPanelConversationsMenu(): React.JSX.Element;
+export { GridAiAssistantPanelConversationsMenu };

package/esm/components/aiAssistantPanel/GridAiAssistantPanelConversationsMenu.js

@@ -0,0 +1,85 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridMenu, useGridSelector } from '@mui/x-data-grid-pro';
+import useId from '@mui/utils/useId';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { gridAiAssistantActiveConversationIndexSelector, gridAiAssistantConversationsSelector } from "../../hooks/features/aiAssistant/gridAiAssistantSelectors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function GridAiAssistantPanelConversationsMenu() {
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const activeConversationIndex = useGridSelector(apiRef, gridAiAssistantActiveConversationIndexSelector);
+  const conversations = useGridSelector(apiRef, gridAiAssistantConversationsSelector);
+  const [open, setOpen] = React.useState(false);
+  const menuId = useId();
+  const triggerId = useId();
+  const triggerRef = React.useRef(null);
+  const handleOpen = () => {
+    setOpen(!open);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  // Ordered by most recent prompt in conversations
+  const sortedConversations = React.useMemo(() => {
+    return [...conversations].sort((a, b) => {
+      if (!a.prompts.length) {
+        return -1;
+      }
+      // New conversations should be at the top
+      if (!b.prompts.length) {
+        return 1;
+      }
+      return b.prompts[b.prompts.length - 1].createdAt.getTime() - a.prompts[a.prompts.length - 1].createdAt.getTime();
+    });
+  }, [conversations]);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+      title: apiRef.current.getLocaleText('aiAssistantPanelConversationHistory'),
+      enterDelay: 500,
+      children: /*#__PURE__*/_jsx("span", {
+        children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({}, rootProps.slotProps?.baseIconButton, {
+          disabled: conversations.length === 0,
+          id: triggerId,
+          "aria-haspopup": "true",
+          "aria-controls": open ? menuId : undefined,
+          "aria-expanded": open ? 'true' : undefined,
+          "aria-label": apiRef.current.getLocaleText('aiAssistantPanelConversationHistory'),
+          onClick: handleOpen,
+          ref: triggerRef,
+          children: /*#__PURE__*/_jsx(rootProps.slots.aiAssistantPanelHistoryIcon, {
+            fontSize: "small"
+          })
+        }))
+      })
+    }), /*#__PURE__*/_jsx(GridMenu, {
+      target: triggerRef.current,
+      open: open,
+      onClose: handleClose,
+      position: "bottom-end",
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, _extends({
+        id: menuId,
+        "aria-labelledby": triggerId,
+        autoFocusItem: true
+      }, rootProps.slotProps?.baseMenuList, {
+        children: sortedConversations.map((conversation, sortedIndex) => {
+          const conversationIndex = conversations.findIndex(c => c === conversation);
+          return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
+            selected: conversationIndex === activeConversationIndex,
+            material: {
+              dense: true
+            },
+            onClick: () => {
+              apiRef.current.aiAssistant.setActiveConversationIndex(conversationIndex);
+              handleClose();
+            },
+            children: conversation.title
+          }, `${conversation.id}-${sortedIndex}`);
+        })
+      }))
+    })]
+  });
+}
+export { GridAiAssistantPanelConversationsMenu };

package/esm/components/aiAssistantPanel/GridAiAssistantPanelSuggestions.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { PromptSuggestion } from "../../hooks/features/aiAssistant/gridAiAssistantInterfaces.js";
+type GridAiAssistantPanelSuggestionsProps = {
+  suggestions: PromptSuggestion[];
+};
+declare function GridAiAssistantPanelSuggestions(props: GridAiAssistantPanelSuggestionsProps): React.JSX.Element;
+export { GridAiAssistantPanelSuggestions };

package/esm/components/aiAssistantPanel/GridAiAssistantPanelSuggestions.js

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { vars } from '@mui/x-data-grid-pro/internals';
+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: ['aiAssistantPanelSuggestions'],
+    list: ['aiAssistantPanelSuggestionsList'],
+    item: ['aiAssistantPanelSuggestionsItem'],
+    label: ['aiAssistantPanelSuggestionsLabel']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const AiAssistantPanelSuggestionsRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelSuggestions'
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: vars.spacing(0.75)
+});
+const AiAssistantPanelSuggestionsList = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelSuggestionsList'
+})({
+  display: 'flex',
+  gap: vars.spacing(0.75),
+  overflow: 'auto',
+  padding: vars.spacing(1),
+  margin: vars.spacing(-1),
+  scrollbarWidth: 'thin'
+});
+const AiAssistantPanelSuggestionsLabel = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'AiAssistantPanelSuggestionsLabel'
+})({
+  display: 'flex',
+  alignItems: 'center',
+  gap: vars.spacing(1),
+  font: vars.typography.font.body,
+  color: vars.colors.foreground.muted,
+  paddingLeft: vars.spacing(0.5)
+});
+function GridAiAssistantPanelSuggestions(props) {
+  const {
+    suggestions
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsxs(AiAssistantPanelSuggestionsRoot, {
+    className: classes.root,
+    ownerState: ownerState,
+    children: [/*#__PURE__*/_jsx(AiAssistantPanelSuggestionsLabel, {
+      className: classes.label,
+      ownerState: ownerState,
+      children: apiRef.current.getLocaleText('aiAssistantSuggestions')
+    }), /*#__PURE__*/_jsx(AiAssistantPanelSuggestionsList, {
+      className: classes.list,
+      ownerState: ownerState,
+      children: suggestions.map(suggestion => /*#__PURE__*/_jsx(rootProps.slots.baseChip, {
+        label: suggestion.value,
+        className: classes.item,
+        onClick: () => apiRef.current.aiAssistant.processPrompt(suggestion.value),
+        variant: "outlined"
+      }, suggestion.value))
+    })]
+  });
+}
+export { GridAiAssistantPanelSuggestions };

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

@@ -0,0 +1,2 @@
+export * from "./AiAssistantPanelTrigger.js";
+export * from "./GridAiAssistantPanel.js";

package/esm/components/aiAssistantPanel/index.js

@@ -0,0 +1,2 @@
+export * from "./AiAssistantPanelTrigger.js";
+export * from "./GridAiAssistantPanel.js";

package/esm/components/collapsible/Collapsible.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+type CollapsibleProps = React.HTMLAttributes<HTMLDivElement>;
+declare function Collapsible(props: CollapsibleProps): React.JSX.Element;
+export { Collapsible };