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

package/constants/cssVariables.js

@@ -39,7 +39,8 @@ const keys = {
       base: '--DataGrid-t-color-foreground-base',
       muted: '--DataGrid-t-color-foreground-muted',
       accent: '--DataGrid-t-color-foreground-accent',
-      disabled: '--DataGrid-t-color-foreground-disabled'
+      disabled: '--DataGrid-t-color-foreground-disabled',
+      error: '--DataGrid-t-color-foreground-error'
     },
     background: {
       base: '--DataGrid-t-color-background-base',

package/constants/gridClasses.d.ts

@@ -1,4 +1,60 @@
 export interface GridClasses {
+  /**
+   * Styles applied to the root element of the AI assistant panel.
+   */
+  aiAssistantPanel: string;
+  /**
+   * Styles applied to the AI assistant panel header.
+   */
+  aiAssistantPanelHeader: string;
+  /**
+   * Styles applied to the AI assistant panel title.
+   */
+  aiAssistantPanelTitle: string;
+  /**
+   * Styles applied to the AI assistant panel title container.
+   */
+  aiAssistantPanelTitleContainer: string;
+  /**
+   * Styles applied to the AI assistant panel body.
+   */
+  aiAssistantPanelBody: string;
+  /**
+   * Styles applied to the AI assistant panel conversation title.
+   */
+  aiAssistantPanelConversationTitle: string;
+  /**
+   * Styles applied to the AI assistant panel empty text.
+   */
+  aiAssistantPanelEmptyText: string;
+  /**
+   * Styles applied to the AI assistant panel footer.
+   */
+  aiAssistantPanelFooter: string;
+  /**
+   * Styles applied to the AI assistant panel conversation.
+   */
+  aiAssistantPanelConversation: string;
+  /**
+   * Styles applied to the AI assistant panel conversation list.
+   */
+  aiAssistantPanelConversationList: string;
+  /**
+   * Styles applied to the AI assistant panel suggestions.
+   */
+  aiAssistantPanelSuggestions: string;
+  /**
+   * Styles applied to the AI assistant panel suggestions list.
+   */
+  aiAssistantPanelSuggestionsList: string;
+  /**
+   * Styles applied to the AI assistant panel suggestions item.
+   */
+  aiAssistantPanelSuggestionsItem: string;
+  /**
+   * Styles applied to the AI assistant panel suggestions label.
+   */
+  aiAssistantPanelSuggestionsLabel: string;
   /**
    * Styles applied to the root element of the cell with type="actions".
    */
@@ -35,6 +91,7 @@ export interface GridClasses {
    * Styles applied to the root element while it is being autosized.
    */
   autosizing: string;
+  withSidePanel: string;
   /**
    * Styles applied to the icon of the boolean cell.
    */
@@ -120,6 +177,22 @@ export interface GridClasses {
    * Styles applied to the column header element.
    */
   columnHeader: string;
+  /**
+   * Styles applied to the collapsible element.
+   */
+  collapsible: string;
+  /**
+   * Styles applied to the collapsible icon element.
+   */
+  collapsibleIcon: string;
+  /**
+   * Styles applied to the collapsible trigger element.
+   */
+  collapsibleTrigger: string;
+  /**
+   * Styles applied to the collapsible panel element.
+   */
+  collapsiblePanel: string;
   /**
    * Styles applied to the column header if `headerAlign="center"`.
    */
@@ -388,6 +461,7 @@ export interface GridClasses {
    * Styles applied to the column header filter row.
    */
   headerFilterRow: string;
+  mainContent: string;
   /**
    * Styles applied to the main container element.
    */
@@ -454,6 +528,18 @@ export interface GridClasses {
    * Styles applied to the virtualization render zone.
    */
   virtualScrollerRenderZone: string;
+  /**
+   * Styles applied to resizable panel handles.
+   */
+  resizablePanelHandle: string;
+  /**
+   * Styles applied to horizontal resizable panel handles.
+   */
+  'resizablePanelHandle--horizontal': string;
+  /**
+   * Styles applied to vertical resizable panel handles.
+   */
+  'resizablePanelHandle--vertical': string;
   /**
    * Styles applied to the root element.
    */
@@ -591,7 +677,11 @@ export interface GridClasses {
    */
   selectedRowCount: string;
   /**
-   * Styles applied to the sort icon element.
+   * Styles applied to the sort button element.
+   */
+  sortButton: string;
+  /**
+   * Styles applied to the sort button icon element.
    */
   sortIcon: string;
   /**
@@ -612,33 +702,21 @@ export interface GridClasses {
    */
   shadowScrollArea: string;
   /**
-   * Styles applied to the toolbar container element.
-   */
-  toolbarContainer: string;
-  /**
-   * Styles applied to the toolbar filter list element.
-   */
-  toolbarFilterList: string;
-  /**
-   * Styles applied to the toolbar prompt control element.
-   */
-  toolbarPromptControl: string;
-  /**
-   * Styles applied to the toolbar prompt control element when recording.
+   * Styles applied to the sidebar element.
    */
-  'toolbarPromptControl--recording': string;
+  sidebar: string;
   /**
-   * Styles applied to the toolbar prompt control recording indicator element.
+   * Styles applied to the sidebar header element.
    */
-  toolbarPromptControlRecordingIndicator: string;
+  sidebarHeader: string;
   /**
-   * Styles applied to the toolbar prompt control record button element.
+   * Styles applied to the toolbar container element.
    */
-  toolbarPromptControlRecordButton: string;
+  toolbarContainer: string;
   /**
-   * Styles applied to the toolbar prompt control send button element.
+   * Styles applied to the toolbar filter list element.
    */
-  toolbarPromptControlSendButton: string;
+  toolbarFilterList: string;
   /**
    * Styles applied to the toolbar quick filter root element.
    */
@@ -711,6 +789,122 @@ export interface GridClasses {
    * Styles applied to the bottom pinned rows container.
    */
   'pinnedRows--bottom': string;
+  /**
+   * Styles applied to the pivot panel available fields.
+   */
+  pivotPanelAvailableFields: string;
+  /**
+   * Styles applied to the pivot panel body.
+   */
+  pivotPanelBody: string;
+  /**
+   * Styles applied to the pivot panel field.
+   */
+  pivotPanelField: string;
+  /**
+   * Styles applied to the pivot panel field action container.
+   */
+  pivotPanelFieldActionContainer: string;
+  /**
+   * Styles applied to the pivot panel field checkbox.
+   */
+  pivotPanelFieldCheckbox: string;
+  /**
+   * Styles applied to the pivot panel field drag icon.
+   */
+  pivotPanelFieldDragIcon: string;
+  /**
+   * Styles applied to the pivot panel field list.
+   */
+  pivotPanelFieldList: string;
+  /**
+   * Styles applied to the pivot panel field name.
+   */
+  pivotPanelFieldName: string;
+  /**
+   * Styles applied to the pivot panel field when sorted.
+   */
+  'pivotPanelField--sorted': string;
+  /**
+   * Styles applied to the pivot panel header.
+   */
+  pivotPanelHeader: string;
+  /**
+   * Styles applied to the pivot panel placeholder.
+   */
+  pivotPanelPlaceholder: string;
+  /**
+   * Styles applied to the pivot panel scroll area.
+   */
+  pivotPanelScrollArea: string;
+  /**
+   * Styles applied to the pivot panel search container.
+   */
+  pivotPanelSearchContainer: string;
+  /**
+   * Styles applied to the pivot panel section.
+   */
+  pivotPanelSection: string;
+  /**
+   * Styles applied to the pivot panel section title.
+   */
+  pivotPanelSectionTitle: string;
+  /**
+   * Styles applied to the pivot panel sections.
+   */
+  pivotPanelSections: string;
+  /**
+   * Styles applied to the pivot panel switch.
+   */
+  pivotPanelSwitch: string;
+  /**
+   * Styles applied to the pivot panel switch label.
+   */
+  pivotPanelSwitchLabel: string;
+  /**
+   * Styles applied to the prompt root element.
+   */
+  prompt: string;
+  /**
+   * Styles applied to the prompt content element.
+   */
+  promptContent: string;
+  /**
+   * Styles applied to the prompt text element.
+   */
+  promptText: string;
+  /**
+   * Styles applied to the prompt feedback element.
+   */
+  promptFeedback: string;
+  /**
+   * Styles applied to the prompt change list element.
+   */
+  promptChangeList: string;
+  /**
+   * Styles applied to the prompt changes toggle element.
+   */
+  promptChangesToggle: string;
+  /**
+   * Styles applied to the prompt changes toggle icon element.
+   */
+  promptChangesToggleIcon: string;
+  /**
+   * Styles applied to the prompt icon element.
+   */
+  promptIconContainer: string;
+  /**
+   * Styles applied to the prompt icon element.
+   */
+  promptIcon: string;
+  /**
+   * Styles applied to the prompt error element.
+   */
+  promptError: string;
+  /**
+   * Styles applied to the prompt action element.
+   */
+  promptAction: string;
 }
 export type GridClassKey = keyof GridClasses;
 export declare function getDataGridUtilityClass(slot: string): string;

package/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'shadowScrollArea', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarPromptControl', 'toolbarPromptControl--recording', 'toolbarPromptControlRecordingIndicator', 'toolbarPromptControlRecordButton', 'toolbarPromptControlSendButton', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);

package/constants/localeTextConstants.js

@@ -10,6 +10,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   noResultsOverlayLabel: 'No results found.',
   noColumnsOverlayLabel: 'No columns',
   noColumnsOverlayManageColumns: 'Manage columns',
+  emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
   // Density selector toolbar button text
   toolbarDensity: 'Density',
   toolbarDensityLabel: 'Density',
@@ -29,22 +30,16 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   toolbarQuickFilterPlaceholder: 'Search…',
   toolbarQuickFilterLabel: 'Search',
   toolbarQuickFilterDeleteIconLabel: 'Clear',
-  // Prompt toolbar field
-  toolbarPromptControlPlaceholder: 'Type a prompt…',
-  toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
-  toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
-  toolbarPromptControlLabel: 'Prompt input',
-  toolbarPromptControlRecordButtonDefaultLabel: 'Record',
-  toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
-  toolbarPromptControlSendActionLabel: 'Send',
-  toolbarPromptControlSendActionAriaLabel: 'Send prompt',
-  toolbarPromptControlErrorMessage: 'An error occurred while processing the request. Please try again with a different prompt.',
   // Export selector toolbar button text
   toolbarExport: 'Export',
   toolbarExportLabel: 'Export',
   toolbarExportCSV: 'Download as CSV',
   toolbarExportPrint: 'Print',
   toolbarExportExcel: 'Download as Excel',
+  // Toolbar pivot button
+  toolbarPivot: 'Pivot',
+  // Toolbar AI Assistant button
+  toolbarAssistant: 'AI Assistant',
   // Columns management text
   columnsManagementSearchTitle: 'Search',
   columnsManagementNoColumns: 'No columns',
@@ -121,6 +116,7 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   columnMenuUnsort: 'Unsort',
   columnMenuSortAsc: 'Sort by ASC',
   columnMenuSortDesc: 'Sort by DESC',
+  columnMenuManagePivot: 'Manage pivot',
   // Column header text
   columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} active filters` : `${count} active filter`,
   columnHeaderFiltersLabel: 'Show filters',
@@ -193,5 +189,77 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   aggregationFunctionLabelAvg: 'avg',
   aggregationFunctionLabelMin: 'min',
   aggregationFunctionLabelMax: 'max',
-  aggregationFunctionLabelSize: 'size'
+  aggregationFunctionLabelSize: 'size',
+  // Pivot panel
+  pivotToggleLabel: 'Pivot',
+  pivotRows: 'Rows',
+  pivotColumns: 'Columns',
+  pivotValues: 'Values',
+  pivotCloseButton: 'Close pivot settings',
+  pivotSearchButton: 'Search fields',
+  pivotSearchControlPlaceholder: 'Search fields',
+  pivotSearchControlLabel: 'Search fields',
+  pivotSearchControlClear: 'Clear search',
+  pivotNoFields: 'No fields',
+  pivotMenuMoveUp: 'Move up',
+  pivotMenuMoveDown: 'Move down',
+  pivotMenuMoveToTop: 'Move to top',
+  pivotMenuMoveToBottom: 'Move to bottom',
+  pivotMenuRows: 'Rows',
+  pivotMenuColumns: 'Columns',
+  pivotMenuValues: 'Values',
+  pivotMenuOptions: 'Field options',
+  pivotMenuAddToRows: 'Add to Rows',
+  pivotMenuAddToColumns: 'Add to Columns',
+  pivotMenuAddToValues: 'Add to Values',
+  pivotMenuRemove: 'Remove',
+  pivotDragToRows: 'Drag here to create rows',
+  pivotDragToColumns: 'Drag here to create columns',
+  pivotDragToValues: 'Drag here to create values',
+  pivotYearColumnHeaderName: '(Year)',
+  pivotQuarterColumnHeaderName: '(Quarter)',
+  // AI Assistant panel
+  aiAssistantPanelTitle: 'AI Assistant',
+  aiAssistantPanelClose: 'Close AI Assistant',
+  aiAssistantPanelNewConversation: 'New conversation',
+  aiAssistantPanelConversationHistory: 'Conversation history',
+  aiAssistantPanelEmptyConversation: 'No prompt history',
+  aiAssistantSuggestions: 'Suggestions',
+  // Prompt field
+  promptFieldLabel: 'Prompt',
+  promptFieldPlaceholder: 'Type a prompt…',
+  promptFieldPlaceholderWithRecording: 'Type or record a prompt…',
+  promptFieldPlaceholderListening: 'Listening for prompt…',
+  promptFieldSpeechRecognitionNotSupported: 'Speech recognition is not supported in this browser',
+  promptFieldSend: 'Send',
+  promptFieldRecord: 'Record',
+  promptFieldStopRecording: 'Stop recording',
+  // Prompt
+  promptRerun: 'Run again',
+  promptProcessing: 'Processing…',
+  promptAppliedChanges: 'Applied changes',
+  // Prompt changes
+  promptChangeGroupDescription: column => `Group by ${column}`,
+  promptChangeAggregationLabel: (column, aggregation) => `${column} (${aggregation})`,
+  promptChangeAggregationDescription: (column, aggregation) => `Aggregate ${column} (${aggregation})`,
+  promptChangeFilterLabel: (column, operator, value) => {
+    if (operator === 'is any of') {
+      return `${column} is any of: ${value}`;
+    }
+    return `${column} ${operator} ${value}`;
+  },
+  promptChangeFilterDescription: (column, operator, value) => {
+    if (operator === 'is any of') {
+      return `Filter where ${column} is any of: ${value}`;
+    }
+    return `Filter where ${column} ${operator} ${value}`;
+  },
+  promptChangeSortDescription: (column, direction) => `Sort by ${column} (${direction})`,
+  promptChangePivotEnableLabel: 'Pivot',
+  promptChangePivotEnableDescription: 'Enable pivot',
+  promptChangePivotColumnsLabel: count => `Columns (${count})`,
+  promptChangePivotColumnsDescription: (column, direction) => `${column}${direction ? ` (${direction})` : ''}`,
+  promptChangePivotRowsLabel: count => `Rows (${count})`,
+  promptChangePivotValuesLabel: count => `Values (${count})`,
+  promptChangePivotValuesDescription: (column, aggregation) => `${column} (${aggregation})`
 };

package/context/GridContextProvider.js

@@ -10,7 +10,7 @@ var _GridApiContext = require("../components/GridApiContext");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
 var _GridRootPropsContext = require("./GridRootPropsContext");
 var _GridConfigurationContext = require("../components/GridConfigurationContext");
-var _GridPreferencePanelContext = require("../components/panel/GridPreferencePanelContext");
+var _GridPanelContext = require("../components/panel/GridPanelContext");
 var _context = require("../utils/css/context");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridContextProvider({
@@ -28,7 +28,7 @@ function GridContextProvider({
         value: privateApiRef,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridApiContext.GridApiContext.Provider, {
           value: apiRef,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPreferencePanelContext.GridPreferencePanelContextProvider, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelContext.GridPanelContextProvider, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.GridCSSVariablesContext, {
               children: children
             })

package/esm/DataGrid/DataGrid.js

@@ -12,17 +12,20 @@ import { useDataGridComponent } from "./useDataGridComponent.js";
 import { useDataGridProps } from "./useDataGridProps.js";
 import { propValidatorsDataGrid, validateProps } from "../internals/utils/propValidation.js";
 import { useMaterialCSSVariables } from "../material/variables.js";
+import { useGridApiInitialization } from "../hooks/core/useGridApiInitialization.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
     useCSSVariables: useMaterialCSSVariables,
     useGridAriaAttributes,
-    useGridRowAriaAttributes
+    useGridRowAriaAttributes,
+    useCellAggregationResult: () => null
   }
 };
 const DataGridRaw = forwardRef(function DataGrid(inProps, ref) {
   const props = useDataGridProps(inProps);
-  const privateApiRef = useDataGridComponent(props.apiRef, props);
+  const privateApiRef = useGridApiInitialization(props.apiRef, props);
+  useDataGridComponent(privateApiRef, props);
   if (process.env.NODE_ENV !== 'production') {
     validateProps(props, propValidatorsDataGrid);
   }

package/esm/DataGrid/index.d.ts

@@ -1 +1,2 @@
+import "../index.css";
 export * from "./DataGrid.js";

package/esm/DataGrid/index.js

@@ -1 +1,2 @@
+import "../index.css";
 export * from "./DataGrid.js";

package/esm/DataGrid/useDataGridComponent.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from "../models/props/DataGridProps.js";
-import { GridApiCommunity, GridPrivateApiCommunity } from "../models/api/gridApiCommunity.js";
-export declare const useDataGridComponent: (inputApiRef: RefObject<GridApiCommunity | null> | undefined, props: DataGridProcessedProps) => import("react").RefObject<GridPrivateApiCommunity>;
+import { GridPrivateApiCommunity } from "../models/api/gridApiCommunity.js";
+export declare const useDataGridComponent: (apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;

package/esm/DataGrid/useDataGridComponent.js

@@ -31,8 +31,8 @@ import { rowSpanningStateInitializer, useGridRowSpanning } from "../hooks/featur
 import { listViewStateInitializer, useGridListView } from "../hooks/features/listView/useGridListView.js";
 import { propsStateInitializer } from "../hooks/core/useGridProps.js";
 import { useGridDataSource } from "../hooks/features/dataSource/useGridDataSource.js";
-export const useDataGridComponent = (inputApiRef, props) => {
-  const apiRef = useGridInitialization(inputApiRef, props);
+export const useDataGridComponent = (apiRef, props) => {
+  useGridInitialization(apiRef, props);
 
   /**
    * Register all pre-processors called during state initialization here.
@@ -90,5 +90,4 @@ export const useDataGridComponent = (inputApiRef, props) => {
   useGridVirtualization(apiRef, props);
   useGridListView(apiRef, props);
   useGridDataSource(apiRef, props);
-  return apiRef;
 };

package/esm/components/GridColumnSortButton.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { GridSlotProps } from "../models/index.js";
+import { GridSortDirection } from "../models/gridSortModel.js";
+export type GridColumnSortButtonProps = GridSlotProps['baseIconButton'] & {
+  field: string;
+  direction: GridSortDirection;
+  index?: number;
+  sortingOrder: readonly GridSortDirection[];
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare function GridColumnSortButton(props: GridColumnSortButtonProps): React.JSX.Element | null;
+declare namespace GridColumnSortButton {
+  var propTypes: any;
+}
+export { GridColumnSortButton };

package/{modern/components/columnHeaders/GridColumnHeaderSortIcon.js → esm/components/GridColumnSortButton.js}

@@ -1,23 +1,37 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["direction", "index", "sortingOrder", "disabled"];
+const _excluded = ["direction", "index", "sortingOrder", "disabled", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
-import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { GridIconButtonContainer } from "./GridIconButtonContainer.js";
+import { styled } from '@mui/system';
+import clsx from 'clsx';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { getDataGridUtilityClass } from "../constants/gridClasses.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { vars } from "../constants/cssVariables.js";
+import { GridColumnUnsortedIcon } from "./GridColumnUnsortedIcon.js";
+import { NotRendered } from "../utils/assert.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
   const slots = {
+    root: ['sortButton'],
     icon: ['sortIcon']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+const GridColumnSortButtonRoot = styled(NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'SortButton'
+})({
+  transition: vars.transition(['opacity'], {
+    duration: vars.transitions.duration.short,
+    easing: vars.transitions.easing.easeInOut
+  })
+});
 function getIcon(icons, direction, className, sortingOrder) {
   let Icon;
   const iconProps = {};
@@ -26,7 +40,7 @@ function getIcon(icons, direction, className, sortingOrder) {
   } else if (direction === 'desc') {
     Icon = icons.columnSortedDescendingIcon;
   } else {
-    Icon = icons.columnUnsortedIcon;
+    Icon = GridColumnUnsortedIcon;
     iconProps.sortingOrder = sortingOrder;
   }
   return Icon ? /*#__PURE__*/_jsx(Icon, _extends({
@@ -34,12 +48,13 @@ function getIcon(icons, direction, className, sortingOrder) {
     className: className
   }, iconProps)) : null;
 }
-function GridColumnHeaderSortIconRaw(props) {
+function GridColumnSortButton(props) {
   const {
       direction,
       index,
       sortingOrder,
-      disabled
+      disabled,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
@@ -52,16 +67,18 @@ function GridColumnHeaderSortIconRaw(props) {
   if (!iconElement) {
     return null;
   }
-  const iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-    tabIndex: -1,
+  const iconButton = /*#__PURE__*/_jsx(GridColumnSortButtonRoot, _extends({
+    as: rootProps.slots.baseIconButton,
+    ownerState: ownerState,
     "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     size: "small",
-    disabled: disabled
+    disabled: disabled,
+    className: clsx(classes.root, className)
   }, rootProps.slotProps?.baseIconButton, other, {
     children: iconElement
   }));
-  return /*#__PURE__*/_jsxs(GridIconButtonContainer, {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [index != null && /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
       badgeContent: index,
       color: "default",
@@ -70,8 +87,7 @@ function GridColumnHeaderSortIconRaw(props) {
     }), index == null && iconButton]
   });
 }
-const GridColumnHeaderSortIcon = /*#__PURE__*/React.memo(GridColumnHeaderSortIconRaw);
-process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes = {
+process.env.NODE_ENV !== "production" ? GridColumnSortButton.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -80,6 +96,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes =
   disabled: PropTypes.bool,
   field: PropTypes.string.isRequired,
   index: PropTypes.number,
+  onClick: PropTypes.func,
   sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])).isRequired
 } : void 0;
-export { GridColumnHeaderSortIcon };
+export { GridColumnSortButton };

package/esm/components/GridColumnUnsortedIcon.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { GridBaseIconProps } from "../models/gridSlotsComponentsProps.js";
+import { GridSortDirection } from "../models/gridSortModel.js";
+interface GridColumnUnsortedIconProps extends GridBaseIconProps {
+  sortingOrder: GridSortDirection[];
+}
+export declare const GridColumnUnsortedIcon: React.NamedExoticComponent<GridColumnUnsortedIconProps>;
+export {};