@mui/x-data-grid 9.3.0 → 9.5.0

package/components/cell/GridSkeletonCell.js

@@ -18,7 +18,7 @@ var _utils = require("../../utils/utils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["field", "type", "align", "width", "height", "empty", "style", "className"];
+const _excluded = ["field", "type", "align", "width", "height", "empty", "style", "className", "skeletonProps"];
 const CIRCULAR_CONTENT_SIZE = '1.3em';
 const CONTENT_HEIGHT = '1.2em';
 const DEFAULT_CONTENT_WIDTH_RANGE = [40, 80];
@@ -50,7 +50,8 @@ function GridSkeletonCell(props) {
       height,
       empty = false,
       style,
-      className
+      className,
+      skeletonProps: skeletonPropsOverride
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -62,7 +63,7 @@ function GridSkeletonCell(props) {
   const classes = useUtilityClasses(ownerState);
 
   // Memo prevents the non-circular skeleton widths changing to random widths on every render
-  const skeletonProps = React.useMemo(() => {
+  const baseSkeletonProps = React.useMemo(() => {
     const isCircularContent = type === 'boolean' || type === 'actions';
     if (isCircularContent) {
       return {
@@ -81,6 +82,10 @@ function GridSkeletonCell(props) {
       height: CONTENT_HEIGHT
     };
   }, [type]);
+
+  // Merge caller overrides outside the memo so an inline `skeletonProps` object
+  // doesn't bust the memo and re-roll the random width on every render
+  const skeletonProps = skeletonPropsOverride && Object.keys(skeletonPropsOverride).length > 0 ? (0, _extends2.default)({}, baseSkeletonProps, skeletonPropsOverride) : baseSkeletonProps;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
     "data-field": field,
     className: (0, _clsx.default)(classes.root, className),

package/components/cell/GridSkeletonCell.mjs

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["field", "type", "align", "width", "height", "empty", "style", "className"];
+const _excluded = ["field", "type", "align", "width", "height", "empty", "style", "className", "skeletonProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -42,7 +42,8 @@ function GridSkeletonCell(props) {
       height,
       empty = false,
       style,
-      className
+      className,
+      skeletonProps: skeletonPropsOverride
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
@@ -54,7 +55,7 @@ function GridSkeletonCell(props) {
   const classes = useUtilityClasses(ownerState);
 
   // Memo prevents the non-circular skeleton widths changing to random widths on every render
-  const skeletonProps = React.useMemo(() => {
+  const baseSkeletonProps = React.useMemo(() => {
     const isCircularContent = type === 'boolean' || type === 'actions';
     if (isCircularContent) {
       return {
@@ -73,6 +74,10 @@ function GridSkeletonCell(props) {
       height: CONTENT_HEIGHT
     };
   }, [type]);
+
+  // Merge caller overrides outside the memo so an inline `skeletonProps` object
+  // doesn't bust the memo and re-roll the random width on every render
+  const skeletonProps = skeletonPropsOverride && Object.keys(skeletonPropsOverride).length > 0 ? _extends({}, baseSkeletonProps, skeletonPropsOverride) : baseSkeletonProps;
   return /*#__PURE__*/_jsx("div", _extends({
     "data-field": field,
     className: clsx(classes.root, className),

package/components/containers/GridRootStyles.js

@@ -175,6 +175,16 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       [`& .${_gridClasses.gridClasses['columnHeader--filter']}`]: {
         flex: 'none !important',
         width: 'unset !important'
+      },
+      [`& .${_gridClasses.gridClasses.multiSelectCell}`]: {
+        width: 'max-content',
+        overflow: 'visible'
+      },
+      [`& .${_gridClasses.gridClasses['multiSelectCellChip--hidden']}`]: {
+        display: 'inline-flex'
+      },
+      [`& .${_gridClasses.gridClasses.multiSelectCellOverflow}`]: {
+        display: 'none'
       }
     },
     [`&.${_gridClasses.gridClasses.withSidePanel}`]: {
@@ -523,6 +533,25 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       whiteSpace: 'initial',
       lineHeight: 'inherit'
     },
+    [`& .${_gridClasses.gridClasses['row--dynamicHeight']}`]: {
+      [`& .${_gridClasses.gridClasses.multiSelectCell}, .${_gridClasses.gridClasses.editMultiSelectCell}`]: {
+        flexWrap: 'wrap'
+      }
+    },
+    [`& .${_gridClasses.gridClasses.cell}[aria-rowspan]:not([aria-rowspan="1"])`]: {
+      [`& .${_gridClasses.gridClasses.multiSelectCell}`]: {
+        alignItems: 'flex-start',
+        alignContent: 'flex-start',
+        flexWrap: 'wrap',
+        paddingTop: 8
+      },
+      [`& .${_gridClasses.gridClasses['multiSelectCellChip--hidden']}`]: {
+        display: 'inline-flex'
+      },
+      [`& .${_gridClasses.gridClasses.multiSelectCellOverflow}`]: {
+        display: 'none'
+      }
+    },
     [`& .${_gridClasses.gridClasses.cellEmpty}`]: {
       flex: 1,
       padding: 0,

package/components/containers/GridRootStyles.mjs

@@ -169,6 +169,16 @@ export const GridRootStyles = styled('div', {
       [`& .${c['columnHeader--filter']}`]: {
         flex: 'none !important',
         width: 'unset !important'
+      },
+      [`& .${c.multiSelectCell}`]: {
+        width: 'max-content',
+        overflow: 'visible'
+      },
+      [`& .${c['multiSelectCellChip--hidden']}`]: {
+        display: 'inline-flex'
+      },
+      [`& .${c.multiSelectCellOverflow}`]: {
+        display: 'none'
       }
     },
     [`&.${c.withSidePanel}`]: {
@@ -517,6 +527,25 @@ export const GridRootStyles = styled('div', {
       whiteSpace: 'initial',
       lineHeight: 'inherit'
     },
+    [`& .${c['row--dynamicHeight']}`]: {
+      [`& .${c.multiSelectCell}, .${c.editMultiSelectCell}`]: {
+        flexWrap: 'wrap'
+      }
+    },
+    [`& .${c.cell}[aria-rowspan]:not([aria-rowspan="1"])`]: {
+      [`& .${c.multiSelectCell}`]: {
+        alignItems: 'flex-start',
+        alignContent: 'flex-start',
+        flexWrap: 'wrap',
+        paddingTop: 8
+      },
+      [`& .${c['multiSelectCellChip--hidden']}`]: {
+        display: 'inline-flex'
+      },
+      [`& .${c.multiSelectCellOverflow}`]: {
+        display: 'none'
+      }
+    },
     [`& .${c.cellEmpty}`]: {
       flex: 1,
       padding: 0,

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -64,10 +64,8 @@ function GridFilterInputSingleSelect(props) {
     return (0, _filterPanelUtils.getValueOptions)(resolvedColumn);
   }, [resolvedColumn]);
   const onFilterChange = React.useCallback(event => {
-    let value = event.target.value;
-
-    // NativeSelect casts the value to a string.
-    value = (0, _filterPanelUtils.getValueFromValueOptions)(value, currentValueOptions, getOptionValue);
+    // NativeSelect casts the value to a string, convert it back to the original type.
+    const value = (0, _filterPanelUtils.getValueFromValueOptions)(event.target.value, currentValueOptions, getOptionValue);
     applyValue((0, _extends2.default)({}, item, {
       value
     }));

package/components/panel/filterPanel/GridFilterInputSingleSelect.mjs

@@ -56,10 +56,8 @@ function GridFilterInputSingleSelect(props) {
     return getValueOptions(resolvedColumn);
   }, [resolvedColumn]);
   const onFilterChange = React.useCallback(event => {
-    let value = event.target.value;
-
-    // NativeSelect casts the value to a string.
-    value = getValueFromValueOptions(value, currentValueOptions, getOptionValue);
+    // NativeSelect casts the value to a string, convert it back to the original type.
+    const value = getValueFromValueOptions(event.target.value, currentValueOptions, getOptionValue);
     applyValue(_extends({}, item, {
       value
     }));

package/components/panel/filterPanel/filterPanelUtils.d.mts

@@ -1,5 +1,6 @@
-import type { GridColDef, GridSingleSelectColDef } from "../../../models/colDef/gridColDef.mjs";
+import type { GridColDef, GridSingleSelectColDef, GridMultiSelectColDef } from "../../../models/colDef/gridColDef.mjs";
 import type { GridValueOptionsParams } from "../../../models/params/gridValueOptionsParams.mjs";
 export declare function isSingleSelectColDef(colDef: GridColDef | null): colDef is GridSingleSelectColDef;
-export declare function getValueOptions(column: GridSingleSelectColDef, additionalParams?: Omit<GridValueOptionsParams, 'field'>): import("@mui/x-data-grid").ValueOptions[] | undefined;
+export declare function isMultiSelectColDef(colDef: GridColDef | null): colDef is GridMultiSelectColDef;
+export declare function getValueOptions(column: GridSingleSelectColDef | GridMultiSelectColDef, additionalParams?: Omit<GridValueOptionsParams, 'field'>): import("@mui/x-data-grid").ValueOptions[] | undefined;
 export declare function getValueFromValueOptions(value: string, valueOptions: any[] | undefined, getOptionValue: NonNullable<GridSingleSelectColDef['getOptionValue']>): any;

package/components/panel/filterPanel/filterPanelUtils.d.ts

@@ -1,5 +1,6 @@
-import type { GridColDef, GridSingleSelectColDef } from "../../../models/colDef/gridColDef.js";
+import type { GridColDef, GridSingleSelectColDef, GridMultiSelectColDef } from "../../../models/colDef/gridColDef.js";
 import type { GridValueOptionsParams } from "../../../models/params/gridValueOptionsParams.js";
 export declare function isSingleSelectColDef(colDef: GridColDef | null): colDef is GridSingleSelectColDef;
-export declare function getValueOptions(column: GridSingleSelectColDef, additionalParams?: Omit<GridValueOptionsParams, 'field'>): import("@mui/x-data-grid").ValueOptions[] | undefined;
+export declare function isMultiSelectColDef(colDef: GridColDef | null): colDef is GridMultiSelectColDef;
+export declare function getValueOptions(column: GridSingleSelectColDef | GridMultiSelectColDef, additionalParams?: Omit<GridValueOptionsParams, 'field'>): import("@mui/x-data-grid").ValueOptions[] | undefined;
 export declare function getValueFromValueOptions(value: string, valueOptions: any[] | undefined, getOptionValue: NonNullable<GridSingleSelectColDef['getOptionValue']>): any;

package/components/panel/filterPanel/filterPanelUtils.js

@@ -6,11 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getValueFromValueOptions = getValueFromValueOptions;
 exports.getValueOptions = getValueOptions;
+exports.isMultiSelectColDef = isMultiSelectColDef;
 exports.isSingleSelectColDef = isSingleSelectColDef;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 function isSingleSelectColDef(colDef) {
   return colDef?.type === 'singleSelect';
 }
+function isMultiSelectColDef(colDef) {
+  return colDef?.type === 'multiSelect';
+}
 function getValueOptions(column, additionalParams) {
   if (!column) {
     return undefined;

package/components/panel/filterPanel/filterPanelUtils.mjs

@@ -2,6 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 export function isSingleSelectColDef(colDef) {
   return colDef?.type === 'singleSelect';
 }
+export function isMultiSelectColDef(colDef) {
+  return colDef?.type === 'multiSelect';
+}
 export function getValueOptions(column, additionalParams) {
   if (!column) {
     return undefined;

package/constants/cssVariables.d.mts

@@ -75,6 +75,7 @@ declare const keys: {
   readonly zIndex: {
     readonly panel: "--DataGrid-t-z-index-panel";
     readonly menu: "--DataGrid-t-z-index-menu";
+    readonly modal: "--DataGrid-t-z-index-modal";
   };
 };
 export type GridCSSVariablesInterface = { [E in CreateObjectEntries<typeof keys> as E['value']]: string | number };
@@ -168,6 +169,7 @@ export declare const vars: {
   zIndex: {
     readonly panel: "--DataGrid-t-z-index-panel";
     readonly menu: "--DataGrid-t-z-index-menu";
+    readonly modal: "--DataGrid-t-z-index-modal";
   };
   breakpoints: {
     values: {
@@ -258,6 +260,7 @@ export declare const vars: {
     readonly zIndex: {
       readonly panel: "--DataGrid-t-z-index-panel";
       readonly menu: "--DataGrid-t-z-index-menu";
+      readonly modal: "--DataGrid-t-z-index-modal";
     };
   };
 };

package/constants/cssVariables.d.ts

@@ -75,6 +75,7 @@ declare const keys: {
   readonly zIndex: {
     readonly panel: "--DataGrid-t-z-index-panel";
     readonly menu: "--DataGrid-t-z-index-menu";
+    readonly modal: "--DataGrid-t-z-index-modal";
   };
 };
 export type GridCSSVariablesInterface = { [E in CreateObjectEntries<typeof keys> as E['value']]: string | number };
@@ -168,6 +169,7 @@ export declare const vars: {
   zIndex: {
     readonly panel: "--DataGrid-t-z-index-panel";
     readonly menu: "--DataGrid-t-z-index-menu";
+    readonly modal: "--DataGrid-t-z-index-modal";
   };
   breakpoints: {
     values: {
@@ -258,6 +260,7 @@ export declare const vars: {
     readonly zIndex: {
       readonly panel: "--DataGrid-t-z-index-panel";
       readonly menu: "--DataGrid-t-z-index-menu";
+      readonly modal: "--DataGrid-t-z-index-modal";
     };
   };
 };

package/constants/cssVariables.js

@@ -105,7 +105,8 @@ const keys = {
   },
   zIndex: {
     panel: '--DataGrid-t-z-index-panel',
-    menu: '--DataGrid-t-z-index-menu'
+    menu: '--DataGrid-t-z-index-menu',
+    modal: '--DataGrid-t-z-index-modal'
   }
 };
 const values = wrap(keys);

package/constants/cssVariables.mjs

@@ -98,7 +98,8 @@ const keys = {
   },
   zIndex: {
     panel: '--DataGrid-t-z-index-panel',
-    menu: '--DataGrid-t-z-index-menu'
+    menu: '--DataGrid-t-z-index-menu',
+    modal: '--DataGrid-t-z-index-modal'
   }
 };
 const values = wrap(keys);

package/constants/gridClasses.d.mts

@@ -514,6 +514,54 @@ export interface GridClasses {
    * Styles applied to the edit long text cell textarea.
    */
   editLongTextCellTextarea: string;
+  /**
+   * Styles applied to the multi-select cell root element.
+   */
+  multiSelectCell: string;
+  /**
+   * Styles applied to each chip in the multi-select cell.
+   */
+  multiSelectCellChip: string;
+  /**
+   * @ignore - do not document.
+   */
+  'multiSelectCellChip--hidden': string;
+  /**
+   * Styles applied to the overflow "+N" chip in the multi-select cell.
+   */
+  multiSelectCellOverflow: string;
+  /**
+   * Styles applied to the multi-select cell expand popup.
+   */
+  multiSelectCellPopup: string;
+  /**
+   * Styles applied to the multi-select cell popper content.
+   */
+  multiSelectCellPopperContent: string;
+  /**
+   * Styles applied to the edit multi-select cell root element.
+   */
+  editMultiSelectCell: string;
+  /**
+   * Styles applied to each chip in the edit multi-select cell.
+   */
+  editMultiSelectCellChip: string;
+  /**
+   * @ignore - do not document.
+   */
+  'editMultiSelectCellChip--hidden': string;
+  /**
+   * Styles applied to the overflow "+N" chip in the edit multi-select cell.
+   */
+  editMultiSelectCellOverflow: string;
+  /**
+   * Styles applied to the edit multi-select cell popup.
+   */
+  editMultiSelectCellPopup: string;
+  /**
+   * Styles applied to the edit multi-select cell popper content.
+   */
+  editMultiSelectCellPopperContent: string;
   /**
    * Styles applied to the filter icon element.
    */

package/constants/gridClasses.d.ts

@@ -514,6 +514,54 @@ export interface GridClasses {
    * Styles applied to the edit long text cell textarea.
    */
   editLongTextCellTextarea: string;
+  /**
+   * Styles applied to the multi-select cell root element.
+   */
+  multiSelectCell: string;
+  /**
+   * Styles applied to each chip in the multi-select cell.
+   */
+  multiSelectCellChip: string;
+  /**
+   * @ignore - do not document.
+   */
+  'multiSelectCellChip--hidden': string;
+  /**
+   * Styles applied to the overflow "+N" chip in the multi-select cell.
+   */
+  multiSelectCellOverflow: string;
+  /**
+   * Styles applied to the multi-select cell expand popup.
+   */
+  multiSelectCellPopup: string;
+  /**
+   * Styles applied to the multi-select cell popper content.
+   */
+  multiSelectCellPopperContent: string;
+  /**
+   * Styles applied to the edit multi-select cell root element.
+   */
+  editMultiSelectCell: string;
+  /**
+   * Styles applied to each chip in the edit multi-select cell.
+   */
+  editMultiSelectCellChip: string;
+  /**
+   * @ignore - do not document.
+   */
+  'editMultiSelectCellChip--hidden': string;
+  /**
+   * Styles applied to the overflow "+N" chip in the edit multi-select cell.
+   */
+  editMultiSelectCellOverflow: string;
+  /**
+   * Styles applied to the edit multi-select cell popup.
+   */
+  editMultiSelectCellPopup: string;
+  /**
+   * Styles applied to the edit multi-select cell popper content.
+   */
+  editMultiSelectCellPopperContent: string;
   /**
    * Styles applied to the filter icon element.
    */

package/constants/gridClasses.js

@@ -30,4 +30,4 @@ const gridClassesOverrides = exports.gridClassesOverrides = {
   // TODO v9: Rename to `cell--dragging`
   'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
 };
-const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'contentFiller', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filler--horizontal', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'virtualizer--layoutControlled', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', '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', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);
+const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'contentFiller', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'multiSelectCell', 'multiSelectCellChip', 'multiSelectCellChip--hidden', 'multiSelectCellOverflow', 'multiSelectCellPopup', 'multiSelectCellPopperContent', 'editMultiSelectCell', 'editMultiSelectCellChip', 'editMultiSelectCellChip--hidden', 'editMultiSelectCellOverflow', 'editMultiSelectCellPopup', 'editMultiSelectCellPopperContent', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filler--horizontal', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'virtualizer--layoutControlled', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', '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', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);

package/constants/gridClasses.mjs

@@ -22,4 +22,4 @@ export const gridClassesOverrides = {
   // TODO v9: Rename to `cell--dragging`
   'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
 };
-export const gridClasses = generateUtilityClasses('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'contentFiller', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filler--horizontal', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'virtualizer--layoutControlled', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', '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', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'contentFiller', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'multiSelectCell', 'multiSelectCellChip', 'multiSelectCellChip--hidden', 'multiSelectCellOverflow', 'multiSelectCellPopup', 'multiSelectCellPopperContent', 'editMultiSelectCell', 'editMultiSelectCellChip', 'editMultiSelectCellChip--hidden', 'editMultiSelectCellOverflow', 'editMultiSelectCellPopup', 'editMultiSelectCellPopperContent', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filler--horizontal', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'virtualizer--layoutControlled', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', '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', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);

package/hooks/core/strategyProcessing/gridStrategyProcessingApi.d.mts

@@ -2,6 +2,7 @@ import type { GridRowTreeCreationParams, GridRowTreeCreationValue, GridRowsState
 import type { GridFilteringMethodParams, GridFilteringMethodValue, GridFilterState, GridVisibleRowsLookupState } from "../../features/filter/gridFilterState.mjs";
 import type { GridSortingMethodParams, GridSortingMethodValue } from "../../features/sorting/gridSortingState.mjs";
 import type { GridGetRowsParams, GridGetRowsResponse, GridGetRowsOptions } from "../../../models/gridDataSource.mjs";
+import type { GridRowId } from "../../../models/gridRows.mjs";
 export type GridStrategyProcessorName = keyof GridStrategyProcessingLookup;
 export declare enum GridStrategyGroup {
   DataSource = "dataSource",
@@ -9,7 +10,7 @@ export declare enum GridStrategyGroup {
 }
 export type GridStrategyGroupValue = `${GridStrategyGroup}`;
 export interface GridStrategyProcessingLookup {
-  dataSourceRowsUpdate: {
+  dataSourceRootRowsUpdate: {
     group: GridStrategyGroup.DataSource;
     params: {
       response: GridGetRowsResponse;
@@ -22,6 +23,21 @@ export interface GridStrategyProcessingLookup {
     };
     value: void;
   };
+  dataSourceNestedRowsUpdate: {
+    group: GridStrategyGroup.DataSource;
+    params: {
+      parentId: GridRowId;
+      path: string[];
+      response: GridGetRowsResponse;
+      fetchParams: GridGetRowsParams;
+    } | {
+      parentId: GridRowId;
+      path: string[];
+      error: Error;
+      fetchParams: GridGetRowsParams;
+    };
+    value: void;
+  };
   rowTreeCreation: {
     group: GridStrategyGroup.RowTree;
     params: GridRowTreeCreationParams;

package/hooks/core/strategyProcessing/gridStrategyProcessingApi.d.ts

@@ -2,6 +2,7 @@ import type { GridRowTreeCreationParams, GridRowTreeCreationValue, GridRowsState
 import type { GridFilteringMethodParams, GridFilteringMethodValue, GridFilterState, GridVisibleRowsLookupState } from "../../features/filter/gridFilterState.js";
 import type { GridSortingMethodParams, GridSortingMethodValue } from "../../features/sorting/gridSortingState.js";
 import type { GridGetRowsParams, GridGetRowsResponse, GridGetRowsOptions } from "../../../models/gridDataSource.js";
+import type { GridRowId } from "../../../models/gridRows.js";
 export type GridStrategyProcessorName = keyof GridStrategyProcessingLookup;
 export declare enum GridStrategyGroup {
   DataSource = "dataSource",
@@ -9,7 +10,7 @@ export declare enum GridStrategyGroup {
 }
 export type GridStrategyGroupValue = `${GridStrategyGroup}`;
 export interface GridStrategyProcessingLookup {
-  dataSourceRowsUpdate: {
+  dataSourceRootRowsUpdate: {
     group: GridStrategyGroup.DataSource;
     params: {
       response: GridGetRowsResponse;
@@ -22,6 +23,21 @@ export interface GridStrategyProcessingLookup {
     };
     value: void;
   };
+  dataSourceNestedRowsUpdate: {
+    group: GridStrategyGroup.DataSource;
+    params: {
+      parentId: GridRowId;
+      path: string[];
+      response: GridGetRowsResponse;
+      fetchParams: GridGetRowsParams;
+    } | {
+      parentId: GridRowId;
+      path: string[];
+      error: Error;
+      fetchParams: GridGetRowsParams;
+    };
+    value: void;
+  };
   rowTreeCreation: {
     group: GridStrategyGroup.RowTree;
     params: GridRowTreeCreationParams;

package/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -15,7 +15,8 @@ var _gridStrategyProcessingApi = require("./gridStrategyProcessingApi");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 const GRID_DEFAULT_STRATEGY = exports.GRID_DEFAULT_STRATEGY = 'none';
 const GRID_STRATEGIES_PROCESSORS = {
-  dataSourceRowsUpdate: _gridStrategyProcessingApi.GridStrategyGroup.DataSource,
+  dataSourceRootRowsUpdate: _gridStrategyProcessingApi.GridStrategyGroup.DataSource,
+  dataSourceNestedRowsUpdate: _gridStrategyProcessingApi.GridStrategyGroup.DataSource,
   rowTreeCreation: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,
   filtering: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,
   sorting: _gridStrategyProcessingApi.GridStrategyGroup.RowTree,

package/hooks/core/strategyProcessing/useGridStrategyProcessing.mjs

@@ -8,7 +8,8 @@ import { GridStrategyGroup } from "./gridStrategyProcessingApi.mjs";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
 export const GRID_DEFAULT_STRATEGY = 'none';
 const GRID_STRATEGIES_PROCESSORS = {
-  dataSourceRowsUpdate: GridStrategyGroup.DataSource,
+  dataSourceRootRowsUpdate: GridStrategyGroup.DataSource,
+  dataSourceNestedRowsUpdate: GridStrategyGroup.DataSource,
   rowTreeCreation: GridStrategyGroup.RowTree,
   filtering: GridStrategyGroup.RowTree,
   sorting: GridStrategyGroup.RowTree,

package/hooks/core/useGridProps.js

@@ -16,7 +16,8 @@ const propsStateInitializer = (state, props) => {
       getRowId: props.getRowId,
       isCellEditable: props.isCellEditable,
       isRowSelectable: props.isRowSelectable,
-      dataSource: props.dataSource
+      dataSource: props.dataSource,
+      signature: props.signature
     }
   });
 };
@@ -34,9 +35,10 @@ const useGridProps = (apiRef, props) => {
         getRowId: props.getRowId,
         isCellEditable: props.isCellEditable,
         isRowSelectable: props.isRowSelectable,
-        dataSource: props.dataSource
+        dataSource: props.dataSource,
+        signature: props.signature
       }
     }));
-  }, [apiRef, props.listView, props.getRowId, props.isCellEditable, props.isRowSelectable, props.dataSource]);
+  }, [apiRef, props.listView, props.getRowId, props.isCellEditable, props.isRowSelectable, props.dataSource, props.signature]);
 };
 exports.useGridProps = useGridProps;

package/hooks/core/useGridProps.mjs

@@ -9,7 +9,8 @@ export const propsStateInitializer = (state, props) => {
       getRowId: props.getRowId,
       isCellEditable: props.isCellEditable,
       isRowSelectable: props.isRowSelectable,
-      dataSource: props.dataSource
+      dataSource: props.dataSource,
+      signature: props.signature
     }
   });
 };
@@ -26,8 +27,9 @@ export const useGridProps = (apiRef, props) => {
         getRowId: props.getRowId,
         isCellEditable: props.isCellEditable,
         isRowSelectable: props.isRowSelectable,
-        dataSource: props.dataSource
+        dataSource: props.dataSource,
+        signature: props.signature
       }
     }));
-  }, [apiRef, props.listView, props.getRowId, props.isCellEditable, props.isRowSelectable, props.dataSource]);
+  }, [apiRef, props.listView, props.getRowId, props.isCellEditable, props.isRowSelectable, props.dataSource, props.signature]);
 };