@mui/x-data-grid-pro 7.28.3 → 7.29.1

package/node/DataGridPro/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  DATA_GRID_PRO_PROPS_DEFAULT_VALUES: true
+};
+Object.defineProperty(exports, "DATA_GRID_PRO_PROPS_DEFAULT_VALUES", {
+  enumerable: true,
+  get: function () {
+    return _useDataGridProProps.DATA_GRID_PRO_PROPS_DEFAULT_VALUES;
+  }
+});
+var _DataGrid = require("./DataGrid");
+Object.keys(_DataGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DataGrid[key];
+    }
+  });
+});
+var _DataGridPro = require("./DataGridPro");
+Object.keys(_DataGridPro).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DataGridPro[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DataGridPro[key];
+    }
+  });
+});
+var _useDataGridProProps = require("./useDataGridProProps");

package/node/DataGridPro/useDataGridProComponent.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataGridProComponent = void 0;
+var _internals = require("@mui/x-data-grid/internals");
+var _useGridInfiniteLoader = require("../hooks/features/infiniteLoader/useGridInfiniteLoader");
+var _useGridColumnReorder = require("../hooks/features/columnReorder/useGridColumnReorder");
+var _useGridTreeData = require("../hooks/features/treeData/useGridTreeData");
+var _useGridTreeDataPreProcessors = require("../hooks/features/treeData/useGridTreeDataPreProcessors");
+var _useGridDataSourceTreeDataPreProcessors = require("../hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors");
+var _useGridColumnPinning = require("../hooks/features/columnPinning/useGridColumnPinning");
+var _useGridColumnPinningPreProcessors = require("../hooks/features/columnPinning/useGridColumnPinningPreProcessors");
+var _useGridDetailPanel = require("../hooks/features/detailPanel/useGridDetailPanel");
+var _useGridDetailPanelPreProcessors = require("../hooks/features/detailPanel/useGridDetailPanelPreProcessors");
+var _useGridRowReorder = require("../hooks/features/rowReorder/useGridRowReorder");
+var _useGridRowReorderPreProcessors = require("../hooks/features/rowReorder/useGridRowReorderPreProcessors");
+var _useGridLazyLoader = require("../hooks/features/lazyLoader/useGridLazyLoader");
+var _useGridLazyLoaderPreProcessors = require("../hooks/features/lazyLoader/useGridLazyLoaderPreProcessors");
+var _useGridRowPinning = require("../hooks/features/rowPinning/useGridRowPinning");
+var _useGridRowPinningPreProcessors = require("../hooks/features/rowPinning/useGridRowPinningPreProcessors");
+var _useGridDataSource = require("../hooks/features/dataSource/useGridDataSource");
+// Pro-only features
+
+const useDataGridProComponent = (inputApiRef, props) => {
+  const apiRef = (0, _internals.useGridInitialization)(inputApiRef, props);
+
+  /**
+   * Register all pre-processors called during state initialization here.
+   */
+  (0, _internals.useGridRowSelectionPreProcessors)(apiRef, props);
+  (0, _useGridRowReorderPreProcessors.useGridRowReorderPreProcessors)(apiRef, props);
+  (0, _useGridTreeDataPreProcessors.useGridTreeDataPreProcessors)(apiRef, props);
+  (0, _useGridDataSourceTreeDataPreProcessors.useGridDataSourceTreeDataPreProcessors)(apiRef, props);
+  (0, _useGridLazyLoaderPreProcessors.useGridLazyLoaderPreProcessors)(apiRef, props);
+  (0, _useGridRowPinningPreProcessors.useGridRowPinningPreProcessors)(apiRef);
+  (0, _useGridDetailPanelPreProcessors.useGridDetailPanelPreProcessors)(apiRef, props);
+  // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
+  // Because it changes the order of the columns.
+  (0, _useGridColumnPinningPreProcessors.useGridColumnPinningPreProcessors)(apiRef, props);
+  (0, _internals.useGridRowsPreProcessors)(apiRef);
+
+  /**
+   * Register all state initializers here.
+   */
+  (0, _internals.useGridInitializeState)(_internals.propsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.headerFilteringStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.rowSelectionStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_useGridDetailPanel.detailPanelStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_useGridColumnPinning.columnPinningStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_useGridRowPinning.rowPinningStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.rowsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.editingStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.focusStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.sortingStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.preferencePanelStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.filterStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.rowSpanningStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.densityStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_useGridColumnReorder.columnReorderStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.columnResizeStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.columnMenuStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.columnGroupsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.virtualizationStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_useGridDataSource.dataSourceStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.dimensionsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.listViewStateInitializer, apiRef, props);
+  (0, _internals.useGridHeaderFiltering)(apiRef, props);
+  (0, _useGridTreeData.useGridTreeData)(apiRef, props);
+  (0, _internals.useGridKeyboardNavigation)(apiRef, props);
+  (0, _internals.useGridRowSelection)(apiRef, props);
+  (0, _useGridColumnPinning.useGridColumnPinning)(apiRef, props);
+  (0, _useGridRowPinning.useGridRowPinning)(apiRef, props);
+  (0, _internals.useGridColumns)(apiRef, props);
+  (0, _internals.useGridRows)(apiRef, props);
+  (0, _internals.useGridRowSpanning)(apiRef, props);
+  (0, _internals.useGridParamsApi)(apiRef, props);
+  (0, _useGridDetailPanel.useGridDetailPanel)(apiRef, props);
+  (0, _internals.useGridColumnSpanning)(apiRef);
+  (0, _internals.useGridColumnGrouping)(apiRef, props);
+  (0, _internals.useGridEditing)(apiRef, props);
+  (0, _internals.useGridFocus)(apiRef, props);
+  (0, _internals.useGridPreferencesPanel)(apiRef, props);
+  (0, _internals.useGridFilter)(apiRef, props);
+  (0, _internals.useGridSorting)(apiRef, props);
+  (0, _internals.useGridDensity)(apiRef, props);
+  (0, _useGridColumnReorder.useGridColumnReorder)(apiRef, props);
+  (0, _internals.useGridColumnResize)(apiRef, props);
+  (0, _internals.useGridPagination)(apiRef, props);
+  (0, _internals.useGridRowsMeta)(apiRef, props);
+  (0, _useGridRowReorder.useGridRowReorder)(apiRef, props);
+  (0, _internals.useGridScroll)(apiRef, props);
+  (0, _useGridInfiniteLoader.useGridInfiniteLoader)(apiRef, props);
+  (0, _useGridLazyLoader.useGridLazyLoader)(apiRef, props);
+  (0, _internals.useGridColumnMenu)(apiRef);
+  (0, _internals.useGridCsvExport)(apiRef, props);
+  (0, _internals.useGridPrintExport)(apiRef, props);
+  (0, _internals.useGridClipboard)(apiRef, props);
+  (0, _internals.useGridDimensions)(apiRef, props);
+  (0, _internals.useGridEvents)(apiRef, props);
+  (0, _internals.useGridStatePersistence)(apiRef);
+  (0, _internals.useGridVirtualization)(apiRef, props);
+  (0, _useGridDataSource.useGridDataSource)(apiRef, props);
+  (0, _internals.useGridListView)(apiRef, props);
+  return apiRef;
+};
+exports.useDataGridProComponent = useDataGridProComponent;

package/node/DataGridPro/useDataGridProProps.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataGridProProps = exports.DATA_GRID_PRO_PROPS_DEFAULT_VALUES = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _xDataGrid = require("@mui/x-data-grid");
+var _internals = require("@mui/x-data-grid/internals");
+var _dataGridProDefaultSlotsComponents = require("../constants/dataGridProDefaultSlotsComponents");
+const getDataGridProForcedProps = themedProps => (0, _extends2.default)({
+  signature: 'DataGridPro'
+}, themedProps.unstable_dataSource ? {
+  filterMode: 'server',
+  sortingMode: 'server',
+  paginationMode: 'server'
+} : {});
+
+/**
+ * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
+ */
+const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PRO_PROPS_DEFAULT_VALUES = (0, _extends2.default)({}, _xDataGrid.DATA_GRID_PROPS_DEFAULT_VALUES, {
+  autosizeOnMount: false,
+  defaultGroupingExpansionDepth: 0,
+  disableAutosize: false,
+  disableChildrenFiltering: false,
+  disableChildrenSorting: false,
+  disableColumnPinning: false,
+  getDetailPanelHeight: () => 500,
+  headerFilters: false,
+  keepColumnPositionIfDraggedOutside: false,
+  rowSelectionPropagation: _internals.ROW_SELECTION_PROPAGATION_DEFAULT,
+  rowReordering: false,
+  rowsLoadingMode: 'client',
+  scrollEndThreshold: 80,
+  treeData: false,
+  unstable_listView: false
+});
+const defaultSlots = _dataGridProDefaultSlotsComponents.DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;
+const useDataGridProProps = inProps => {
+  const themedProps = (0, _internals.useProps)(
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiDataGrid'
+  }));
+  const localeText = React.useMemo(() => (0, _extends2.default)({}, _xDataGrid.GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
+  const slots = React.useMemo(() => (0, _internals.computeSlots)({
+    defaultSlots,
+    slots: themedProps.slots
+  }), [themedProps.slots]);
+  return React.useMemo(() => (0, _extends2.default)({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, themedProps, {
+    localeText,
+    slots
+  }, getDataGridProForcedProps(themedProps)), [themedProps, localeText, slots]);
+};
+exports.useDataGridProProps = useDataGridProProps;

package/node/components/GridColumnHeaderCollapseIcon.js

@@ -0,0 +1 @@
+"use strict";

package/node/components/GridColumnHeaders.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnHeaders = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _internals = require("@mui/x-data-grid/internals");
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["style", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+const Filler = (0, _styles.styled)('div')({
+  flex: 1,
+  backgroundColor: 'var(--DataGrid-containerBackground)'
+});
+const GridColumnHeaders = exports.GridColumnHeaders = (0, _forwardRef.forwardRef)(function GridColumnHeaders(props, ref) {
+  const {
+      className,
+      visibleColumns,
+      sortColumnLookup,
+      filterColumnLookup,
+      columnHeaderTabIndexState,
+      columnGroupHeaderTabIndexState,
+      columnHeaderFocus,
+      columnGroupHeaderFocus,
+      headerGroupingMaxDepth,
+      columnMenuState,
+      columnVisibility,
+      columnGroupsHeaderStructure,
+      hasOtherElementInTabSequence
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    getInnerProps,
+    getColumnHeadersRow,
+    getColumnFiltersRow,
+    getColumnGroupHeadersRows
+  } = (0, _useGridColumnHeaders.useGridColumnHeaders)({
+    visibleColumns,
+    sortColumnLookup,
+    filterColumnLookup,
+    columnHeaderTabIndexState,
+    hasOtherElementInTabSequence,
+    columnGroupHeaderTabIndexState,
+    columnHeaderFocus,
+    columnGroupHeaderFocus,
+    headerGroupingMaxDepth,
+    columnMenuState,
+    columnVisibility,
+    columnGroupsHeaderStructure
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridBaseColumnHeaders, (0, _extends2.default)({
+    className: className
+  }, other, getInnerProps(), {
+    ref: ref,
+    children: [getColumnGroupHeadersRows(), getColumnHeadersRow(), getColumnFiltersRow(), /*#__PURE__*/(0, _jsxRuntime.jsx)(Filler, {})]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  columnGroupHeaderFocus: _propTypes.default.shape({
+    depth: _propTypes.default.number.isRequired,
+    field: _propTypes.default.string.isRequired
+  }),
+  columnGroupHeaderTabIndexState: _propTypes.default.shape({
+    depth: _propTypes.default.number.isRequired,
+    field: _propTypes.default.string.isRequired
+  }),
+  columnGroupsHeaderStructure: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.shape({
+    columnFields: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+    groupId: _propTypes.default.string
+  }))).isRequired,
+  columnHeaderFocus: _propTypes.default.shape({
+    field: _propTypes.default.string.isRequired
+  }),
+  columnHeaderTabIndexState: _propTypes.default.shape({
+    field: _propTypes.default.string.isRequired
+  }),
+  columnMenuState: _propTypes.default.shape({
+    field: _propTypes.default.string,
+    open: _propTypes.default.bool.isRequired
+  }).isRequired,
+  columnVisibility: _propTypes.default.object.isRequired,
+  filterColumnLookup: _propTypes.default.object.isRequired,
+  hasOtherElementInTabSequence: _propTypes.default.bool.isRequired,
+  headerGroupingMaxDepth: _propTypes.default.number.isRequired,
+  sortColumnLookup: _propTypes.default.object.isRequired,
+  visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
+} : void 0;

package/node/components/GridColumnMenuPinningItem.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnMenuPinningItem = GridColumnMenuPinningItem;
+var React = _interopRequireWildcard(require("react"));
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _xDataGrid = require("@mui/x-data-grid");
+var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+function GridColumnMenuPinningItem(props) {
+  const {
+    colDef,
+    onClick
+  } = props;
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const isRtl = (0, _RtlProvider.useRtl)();
+  const pinColumn = React.useCallback(side => event => {
+    apiRef.current.pinColumn(colDef.field, side);
+    onClick(event);
+  }, [apiRef, colDef.field, onClick]);
+  const unpinColumn = event => {
+    apiRef.current.unpinColumn(colDef.field);
+    onClick(event);
+  };
+  const pinToLeftMenuItem = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+    onClick: pinColumn(_xDataGrid.GridPinnedColumnPosition.LEFT),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuPinLeftIcon, {
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+      children: apiRef.current.getLocaleText('pinToLeft')
+    })]
+  });
+  const pinToRightMenuItem = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+    onClick: pinColumn(_xDataGrid.GridPinnedColumnPosition.RIGHT),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuPinRightIcon, {
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+      children: apiRef.current.getLocaleText('pinToRight')
+    })]
+  });
+  if (!colDef) {
+    return null;
+  }
+  const side = apiRef.current.isColumnPinned(colDef.field);
+  if (side) {
+    const otherSide = side === _xDataGrid.GridPinnedColumnPosition.RIGHT ? _xDataGrid.GridPinnedColumnPosition.LEFT : _xDataGrid.GridPinnedColumnPosition.RIGHT;
+    const label = otherSide === _xDataGrid.GridPinnedColumnPosition.RIGHT ? 'pinToRight' : 'pinToLeft';
+    const Icon = side === _xDataGrid.GridPinnedColumnPosition.RIGHT ? rootProps.slots.columnMenuPinLeftIcon : rootProps.slots.columnMenuPinRightIcon;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+        onClick: pinColumn(otherSide),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+            fontSize: "small"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+          children: apiRef.current.getLocaleText(label)
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MenuItem.default, {
+        onClick: unpinColumn,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+          children: apiRef.current.getLocaleText('unpin')
+        })]
+      })]
+    });
+  }
+  if (isRtl) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [pinToRightMenuItem, pinToLeftMenuItem]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [pinToLeftMenuItem, pinToRightMenuItem]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridColumnMenuPinningItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: _propTypes.default.object.isRequired,
+  onClick: _propTypes.default.func.isRequired
+} : void 0;

package/node/components/GridDataSourceTreeDataGroupingCell.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridDataSourceTreeDataGroupingCell = GridDataSourceTreeDataGroupingCell;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _xDataGrid = require("@mui/x-data-grid");
+var _internals = require("@mui/x-data-grid/internals");
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _gridDataSourceSelector = require("../hooks/features/dataSource/gridDataSourceSelector");
+var _jsxRuntime = require("react/jsx-runtime");
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['treeDataGroupingCell'],
+    toggle: ['treeDataGroupingCellToggle'],
+    loadingContainer: ['treeDataGroupingCellLoadingContainer']
+  };
+  return (0, _composeClasses.default)(slots, _xDataGrid.getDataGridUtilityClass, classes);
+};
+function GridTreeDataGroupingCellIcon(props) {
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  const {
+    rowNode,
+    id,
+    field,
+    descendantCount
+  } = props;
+  const isDataLoading = (0, _internals.useGridSelectorV8)(apiRef, _gridDataSourceSelector.gridDataSourceLoadingIdSelector, id);
+  const error = (0, _internals.useGridSelectorV8)(apiRef, _gridDataSourceSelector.gridDataSourceErrorSelector, id);
+  const handleClick = event => {
+    if (!rowNode.childrenExpanded) {
+      // always fetch/get from cache the children when the node is expanded
+      apiRef.current.unstable_dataSource.fetchRows(id);
+    } else {
+      apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
+    }
+    apiRef.current.setCellFocus(id, field);
+    event.stopPropagation(); // TODO remove event.stopPropagation
+  };
+  const Icon = rowNode.childrenExpanded ? rootProps.slots.treeDataCollapseIcon : rootProps.slots.treeDataExpandIcon;
+  if (isDataLoading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.loadingContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        size: "1rem",
+        color: "inherit"
+      })
+    });
+  }
+  return descendantCount === -1 || descendantCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+    size: "small",
+    onClick: handleClick,
+    tabIndex: -1,
+    "aria-label": rowNode.childrenExpanded ? apiRef.current.getLocaleText('treeDataCollapse') : apiRef.current.getLocaleText('treeDataExpand')
+  }, rootProps?.slotProps?.baseIconButton, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
+      title: error?.message ?? null,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
+        variant: "dot",
+        color: "error",
+        invisible: !error,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+          fontSize: "inherit"
+        })
+      })
+    })
+  })) : null;
+}
+function GridDataSourceTreeDataGroupingCell(props) {
+  const {
+    id,
+    field,
+    formattedValue,
+    rowNode,
+    hideDescendantCount,
+    offsetMultiplier = 2
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const rowSelector = state => state.rows.dataRowIdToModelLookup[id];
+  const row = (0, _xDataGrid.useGridSelector)(apiRef, rowSelector);
+  const classes = useUtilityClasses(rootProps);
+  let descendantCount = 0;
+  if (row) {
+    descendantCount = rootProps.unstable_dataSource?.getChildrenCount?.(row) ?? 0;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    className: classes.root,
+    sx: {
+      ml: rowNode.depth * offsetMultiplier
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes.toggle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridTreeDataGroupingCellIcon, {
+        id: id,
+        field: field,
+        rowNode: rowNode,
+        row: row,
+        descendantCount: descendantCount
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      children: [formattedValue === undefined ? rowNode.groupingKey : formattedValue, !hideDescendantCount && descendantCount > 0 ? ` (${descendantCount})` : '']
+    })]
+  });
+}

package/{esm → node}/components/GridDetailPanel.js

@@ -1,10 +1,18 @@
-import * as React from 'react';
-import { styled } from '@mui/material/styles';
-import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const DetailPanel = styled('div', {
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridDetailPanel = GridDetailPanel;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _useResizeObserver = require("@mui/x-internals/useResizeObserver");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const DetailPanel = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'DetailPanel',
   overridesResolver: (props, styles) => styles.detailPanel
@@ -22,9 +30,9 @@ function GridDetailPanel(props) {
     className,
     children
   } = props;
-  const apiRef = useGridPrivateApiContext();
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const ref = React.useRef(null);
-  const rootProps = useGridRootProps();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ownerState = rootProps;
   const hasAutoHeight = height === 'auto';
   React.useLayoutEffect(() => {
@@ -33,12 +41,12 @@ function GridDetailPanel(props) {
       apiRef.current.storeDetailPanelHeight(rowId, ref.current.clientHeight);
     }
   }, [apiRef, hasAutoHeight, rowId]);
-  useResizeObserver(ref, entries => {
+  (0, _useResizeObserver.useResizeObserver)(ref, entries => {
     const [entry] = entries;
     const observedHeight = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
     apiRef.current.storeDetailPanelHeight(rowId, observedHeight);
   }, hasAutoHeight);
-  return /*#__PURE__*/_jsx(DetailPanel, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DetailPanel, {
     ref: ref,
     ownerState: ownerState,
     role: "presentation",
@@ -48,5 +56,4 @@ function GridDetailPanel(props) {
     className: className,
     children: children
   });
-}
-export { GridDetailPanel };
+}