@mui/x-data-grid-premium 8.0.0-alpha.12 → 8.0.0-alpha.14

package/modern/components/GridPremiumToolbar.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { GridToolbarProps } from '@mui/x-data-grid/internals';
+export declare function GridPremiumToolbar(props: GridToolbarProps): React.JSX.Element;

package/modern/components/GridPremiumToolbar.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["excelOptions"];
+import * as React from 'react';
+import { GridToolbar } from '@mui/x-data-grid/internals';
+import { ExportExcel } from "./export/index.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function GridPremiumToolbar(props) {
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const other = _objectWithoutPropertiesLoose(props, _excluded);
+  const additionalExportMenuItems = !props.excelOptions?.disableToolbarButton ? onMenuItemClick => /*#__PURE__*/_jsx(ExportExcel, {
+    render: /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({}, rootProps.slotProps?.baseMenuItem)),
+    options: props.excelOptions,
+    onClick: onMenuItemClick,
+    children: apiRef.current.getLocaleText('toolbarExportExcel')
+  }) : undefined;
+  return /*#__PURE__*/_jsx(GridToolbar, _extends({}, other, {
+    additionalExportMenuItems: additionalExportMenuItems
+  }));
+}

package/modern/components/export/ExportExcel.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { GridSlotProps, RenderProp } from '@mui/x-data-grid';
+import { GridExcelExportOptions } from "../../hooks/features/export/index.js";
+export type ExportExcelProps = GridSlotProps['baseButton'] & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseButton']>;
+  /**
+   * The options to apply on the Excel export.
+   * @demos
+   *   - [Excel export](/x/react-data-grid/export/#excel-export)
+   */
+  options?: GridExcelExportOptions;
+};
+/**
+ * A button that triggers an Excel export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-data-grid/components/export/)
+ *
+ * API:
+ *
+ * - [ExportExcel API](https://mui.com/x/api/data-grid/export-excel/)
+ */
+declare const ExportExcel: React.ForwardRefExoticComponent<ExportExcelProps> | React.ForwardRefExoticComponent<Omit<ExportExcelProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ExportExcel };

package/modern/components/export/ExportExcel.js

@@ -0,0 +1,191 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "options", "onClick"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGridComponentRenderer } from '@mui/x-data-grid/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button that triggers an Excel export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-data-grid/components/export/)
+ *
+ * API:
+ *
+ * - [ExportExcel API](https://mui.com/x/api/data-grid/export-excel/)
+ */
+const ExportExcel = forwardRef(function ExportExcel(props, ref) {
+  const {
+      render,
+      options,
+      onClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const handleClick = event => {
+    apiRef.current.exportDataAsExcel(options);
+    onClick?.(event);
+  };
+  const element = useGridComponentRenderer(rootProps.slots.baseButton, render, _extends({
+    onClick: handleClick
+  }, rootProps.slotProps?.baseButton, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+process.env.NODE_ENV !== "production" ? ExportExcel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focusVisible: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: PropTypes.bool,
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes.oneOf(['error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, no elevation is used.
+   * @default false
+   */
+  disableElevation: PropTypes.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: PropTypes.bool,
+  /**
+   * Element placed after the children.
+   */
+  endIcon: PropTypes.node,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: PropTypes.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes.string,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: PropTypes.string,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: PropTypes.elementType,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: PropTypes.func,
+  /**
+   * The options to apply on the Excel export.
+   * @demos
+   *   - [Excel export](/x/react-data-grid/export/#excel-export)
+   */
+  options: PropTypes.shape({
+    allColumns: PropTypes.bool,
+    columnsStyles: PropTypes.object,
+    escapeFormulas: PropTypes.bool,
+    exceljsPostProcess: PropTypes.func,
+    exceljsPreProcess: PropTypes.func,
+    fields: PropTypes.arrayOf(PropTypes.string),
+    fileName: PropTypes.string,
+    getRowsToExport: PropTypes.func,
+    includeColumnGroupsHeaders: PropTypes.bool,
+    includeHeaders: PropTypes.bool,
+    valueOptionsSheetName: PropTypes.string,
+    worker: PropTypes.func
+  }),
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   */
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  /**
+   * Element placed before the children.
+   */
+  startIcon: PropTypes.node,
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  tabIndex: PropTypes.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: PropTypes.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: PropTypes.any,
+  /**
+   * The variant to use.
+   * @default 'text'
+   */
+  variant: PropTypes.oneOf(['contained', 'outlined', 'text'])
+} : void 0;
+export { ExportExcel };

package/modern/components/export/index.d.ts

@@ -0,0 +1 @@
+export * from "./ExportExcel.js";

package/modern/components/export/index.js

@@ -0,0 +1 @@
+export * from "./ExportExcel.js";

package/modern/components/index.d.ts

@@ -2,4 +2,5 @@ export * from "./GridExcelExportMenuItem.js";
 export * from "../material/icons.js";
 export * from "./GridColumnMenuAggregationItem.js";
 export * from "./promptControl/index.js";
-export { GridColumnMenuGroupingItem } from "./GridPremiumColumnMenu.js";
+export { GridColumnMenuGroupingItem } from "./GridPremiumColumnMenu.js";
+export * from "./export/index.js";

package/modern/components/index.js

@@ -2,4 +2,5 @@ export * from "./GridExcelExportMenuItem.js";
 export * from "../material/icons.js";
 export * from "./GridColumnMenuAggregationItem.js";
 export * from "./promptControl/index.js";
-export { GridColumnMenuGroupingItem } from "./GridPremiumColumnMenu.js";
+export { GridColumnMenuGroupingItem } from "./GridPremiumColumnMenu.js";
+export * from "./export/index.js";

package/modern/components/promptControl/GridToolbarPromptControl.js

@@ -119,10 +119,18 @@ function GridToolbarPromptControl(props) {
         sort: s.direction
       })));
       const rows = getVisibleRows(apiRef, rootProps);
-      const selectedRowIds = result.select === -1 ? [] : rows.rows.slice(0, result.select).map(r => {
-        return apiRef.current.getRowId(r);
-      });
-      apiRef.current.setRowSelectionModel(selectedRowIds);
+      const rowSelectionModel = {
+        type: 'include',
+        ids: new Set()
+      };
+      if (result.select !== -1) {
+        for (let i = 0; i < result.select; i += 1) {
+          const row = rows.rows[i];
+          const id = apiRef.current.getRowId(row);
+          rowSelectionModel.ids.add(id);
+        }
+      }
+      apiRef.current.setRowSelectionModel(rowSelectionModel);
       const columns = apiRef.current.getAllColumns();
       const targetIndex = Number(columns.find(c => c.field === GRID_CHECKBOX_SELECTION_FIELD) !== undefined) + Number(result.grouping.length);
       interestColumns.push(...Object.keys(result.aggregation));
@@ -172,35 +180,29 @@ function GridToolbarPromptControl(props) {
       helperText: error,
       slotProps: {
         input: {
-          startAdornment: supportsSpeechRecognition && /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-            position: "start",
-            children: /*#__PURE__*/_jsx(RecordButton, {
-              className: classes.recordButton,
-              lang: lang,
-              recording: isRecording,
-              setRecording: setRecording,
-              disabled: isLoading,
-              onUpdate: setQuery,
-              onDone: handleDone,
-              onError: setError
-            })
+          startAdornment: supportsSpeechRecognition && /*#__PURE__*/_jsx(RecordButton, {
+            className: classes.recordButton,
+            lang: lang,
+            recording: isRecording,
+            setRecording: setRecording,
+            disabled: isLoading,
+            onUpdate: setQuery,
+            onDone: handleDone,
+            onError: setError
           }),
-          endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-            position: "end",
-            children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
-              title: apiRef.current.getLocaleText('toolbarPromptControlSendActionLabel'),
-              children: /*#__PURE__*/_jsx("div", {
-                children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, {
-                  className: classes.sendButton,
-                  disabled: isLoading || isRecording || query === '',
-                  color: "primary",
-                  onClick: processPrompt,
-                  size: "small",
-                  "aria-label": apiRef.current.getLocaleText('toolbarPromptControlSendActionAriaLabel'),
-                  edge: "end",
-                  children: /*#__PURE__*/_jsx(rootProps.slots.toolbarPromptSendIcon, {
-                    fontSize: "small"
-                  })
+          endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
+            title: apiRef.current.getLocaleText('toolbarPromptControlSendActionLabel'),
+            children: /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, {
+                className: classes.sendButton,
+                disabled: isLoading || isRecording || query === '',
+                color: "primary",
+                onClick: processPrompt,
+                size: "small",
+                "aria-label": apiRef.current.getLocaleText('toolbarPromptControlSendActionAriaLabel'),
+                edge: "end",
+                children: /*#__PURE__*/_jsx(rootProps.slots.toolbarPromptSendIcon, {
+                  fontSize: "small"
                 })
               })
             })

package/modern/constants/dataGridPremiumDefaultSlotsComponents.js

@@ -3,7 +3,9 @@ import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid-pro/int
 import { GridPremiumColumnMenu } from "../components/GridPremiumColumnMenu.js";
 import materialSlots from "../material/index.js";
 import { GridBottomContainer } from "../components/GridBottomContainer.js";
+import { GridPremiumToolbar } from "../components/GridPremiumToolbar.js";
 export const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS = _extends({}, DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS, materialSlots, {
   columnMenu: GridPremiumColumnMenu,
-  bottomContainer: GridBottomContainer
+  bottomContainer: GridBottomContainer,
+  toolbar: GridPremiumToolbar
 });

package/modern/hooks/features/aggregation/useGridAggregation.d.ts

@@ -3,4 +3,4 @@ import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
 import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 export declare const aggregationStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'aggregationModel' | 'initialState'>, GridPrivateApiPremium>;
-export declare const useGridAggregation: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "onAggregationModelChange" | "initialState" | "aggregationModel" | "getAggregationPosition" | "aggregationFunctions" | "aggregationRowsScope" | "disableAggregation" | "rowGroupingColumnMode" | "unstable_dataSource">) => void;
+export declare const useGridAggregation: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "onAggregationModelChange" | "initialState" | "aggregationModel" | "getAggregationPosition" | "aggregationFunctions" | "aggregationRowsScope" | "disableAggregation" | "rowGroupingColumnMode" | "dataSource">) => void;

package/modern/hooks/features/aggregation/useGridAggregation.js

@@ -40,14 +40,14 @@ export const useGridAggregation = (apiRef, props) => {
       getAggregationPosition: props.getAggregationPosition,
       aggregationFunctions: props.aggregationFunctions,
       aggregationRowsScope: props.aggregationRowsScope,
-      isDataSource: !!props.unstable_dataSource
+      isDataSource: !!props.dataSource
     });
     apiRef.current.setState(state => _extends({}, state, {
       aggregation: _extends({}, state.aggregation, {
         lookup: aggregationLookup
       })
     }));
-  }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope, props.unstable_dataSource]);
+  }, [apiRef, props.getAggregationPosition, props.aggregationFunctions, props.aggregationRowsScope, props.dataSource]);
   const aggregationApi = {
     setAggregationModel
   };
@@ -71,12 +71,12 @@ export const useGridAggregation = (apiRef, props) => {
       rulesOnLastRowHydration,
       rulesOnLastColumnHydration
     } = apiRef.current.caches.aggregation;
-    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
+    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.dataSource);
 
     // Re-apply the row hydration to add / remove the aggregation footers
     if (!areAggregationRulesEqual(rulesOnLastRowHydration, aggregationRules)) {
-      if (props.unstable_dataSource) {
-        apiRef.current.unstable_dataSource.fetchRows();
+      if (props.dataSource) {
+        apiRef.current.dataSource.fetchRows();
       } else {
         apiRef.current.requestPipeProcessorsApplication('hydrateRows');
         applyAggregation();
@@ -87,7 +87,7 @@ export const useGridAggregation = (apiRef, props) => {
     if (!areAggregationRulesEqual(rulesOnLastColumnHydration, aggregationRules)) {
       apiRef.current.requestPipeProcessorsApplication('hydrateColumns');
     }
-  }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
+  }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation, props.dataSource]);
   useGridApiEventHandler(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
   useGridApiEventHandler(apiRef, 'columnsChange', checkAggregationRulesDiff);
   useGridApiEventHandler(apiRef, 'filteredRowsSet', applyAggregation);

package/modern/hooks/features/aggregation/useGridAggregationPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
-export declare const useGridAggregationPreProcessors: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "aggregationFunctions" | "disableAggregation" | "getAggregationPosition" | "slotProps" | "slots" | "unstable_dataSource">) => void;
+export declare const useGridAggregationPreProcessors: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "aggregationFunctions" | "disableAggregation" | "getAggregationPosition" | "slotProps" | "slots" | "dataSource">) => void;

package/modern/hooks/features/aggregation/useGridAggregationPreProcessors.js

@@ -10,7 +10,7 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
   // that the pre-processor is called it will already have been updated with the current rules.
   const rulesOnLastColumnHydration = React.useRef({});
   const updateAggregatedColumns = React.useCallback(columnsState => {
-    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(columnsState.lookup, gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
+    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(columnsState.lookup, gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.dataSource);
     columnsState.orderedFields.forEach(field => {
       const shouldHaveAggregationValue = !!aggregationRules[field];
       const haveAggregationColumnValue = !!rulesOnLastColumnHydration.current[field];
@@ -32,9 +32,9 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
     rulesOnLastColumnHydration.current = aggregationRules;
     apiRef.current.caches.aggregation.rulesOnLastColumnHydration = aggregationRules;
     return columnsState;
-  }, [apiRef, props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
+  }, [apiRef, props.aggregationFunctions, props.disableAggregation, props.dataSource]);
   const addGroupFooterRows = React.useCallback(value => {
-    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.unstable_dataSource);
+    const aggregationRules = props.disableAggregation ? {} : getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.dataSource);
     const hasAggregationRule = Object.keys(aggregationRules).length > 0;
 
     // If we did not have any aggregation footer before, and we still don't have any,
@@ -49,7 +49,7 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
       getAggregationPosition: props.getAggregationPosition,
       hasAggregationRule
     });
-  }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions, props.unstable_dataSource]);
+  }, [apiRef, props.disableAggregation, props.getAggregationPosition, props.aggregationFunctions, props.dataSource]);
   const addColumnMenuButtons = React.useCallback((columnMenuItems, colDef) => {
     if (props.disableAggregation || !colDef.aggregable) {
       return columnMenuItems;
@@ -57,13 +57,13 @@ export const useGridAggregationPreProcessors = (apiRef, props) => {
     const availableAggregationFunctions = getAvailableAggregationFunctions({
       aggregationFunctions: props.aggregationFunctions,
       colDef,
-      isDataSource: !!props.unstable_dataSource
+      isDataSource: !!props.dataSource
     });
     if (availableAggregationFunctions.length === 0) {
       return columnMenuItems;
     }
     return [...columnMenuItems, 'columnMenuAggregationItem'];
-  }, [props.aggregationFunctions, props.disableAggregation, props.unstable_dataSource]);
+  }, [props.aggregationFunctions, props.disableAggregation, props.dataSource]);
   const stateExportPreProcessing = React.useCallback(prevState => {
     if (props.disableAggregation) {
       return prevState;

package/modern/hooks/features/clipboard/useGridClipboardImport.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GRID_CHECKBOX_SELECTION_FIELD, gridFocusCellSelector, gridVisibleColumnFieldsSelector, useGridApiOptionHandler, useGridApiEventHandler, gridPaginatedVisibleSortedGridRowIdsSelector, gridExpandedSortedRowIdsSelector } from '@mui/x-data-grid';
+import { GRID_CHECKBOX_SELECTION_FIELD, gridFocusCellSelector, gridVisibleColumnFieldsSelector, useGridApiOptionHandler, useGridApiEventHandler, gridPaginatedVisibleSortedGridRowIdsSelector, gridExpandedSortedRowIdsSelector, gridRowSelectionIdsSelector, gridRowSelectionCountSelector } from '@mui/x-data-grid';
 import { getRowIdFromRowModel, getActiveElement, useGridRegisterPipeProcessor, getPublicApiRef, isPasteShortcut, useGridLogger } from '@mui/x-data-grid/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_REORDER_COL_DEF } from '@mui/x-data-grid-pro';
@@ -193,10 +193,10 @@ function defaultPasteResolver({
     }
     return true;
   });
-  const selectedRows = apiRef.current.getSelectedRows();
-  if (selectedRows.size > 0 && !isSingleValuePasted) {
+  if (gridRowSelectionCountSelector(apiRef) > 0 && !isSingleValuePasted) {
     // Multiple values are pasted starting from the first and top-most cell
     const pastedRowsDataCount = pastedData.length;
+    const selectedRows = gridRowSelectionIdsSelector(apiRef);
 
     // There's no guarantee that the selected rows are in the same order as the pasted rows
     selectedRows.forEach((row, rowId) => {

package/modern/hooks/features/dataSource/models.d.ts

@@ -47,7 +47,7 @@ export interface GridDataSourceApiPremium {
   /**
    * The data source API.
    */
-  unstable_dataSource: GridDataSourceApiBasePremium;
+  dataSource: GridDataSourceApiBasePremium;
 }
 export interface GridDataSourcePremiumPrivateApi extends GridDataSourcePrivateApi {
   resolveGroupAggregation: (groupId: GridRowId, field: string) => any;

package/modern/hooks/features/dataSource/useGridDataSourcePremium.js

@@ -38,11 +38,11 @@ export const useGridDataSourcePremium = (apiRef, props) => {
   }, [apiRef]);
   const resolveGroupAggregation = React.useCallback((groupId, field) => {
     if (groupId === GRID_ROOT_GROUP_ID) {
-      return props.unstable_dataSource?.getAggregatedValue?.(aggregateRowRef.current, field);
+      return props.dataSource?.getAggregatedValue?.(aggregateRowRef.current, field);
     }
     const row = apiRef.current.getRow(groupId);
-    return props.unstable_dataSource?.getAggregatedValue?.(row, field);
-  }, [apiRef, props.unstable_dataSource]);
+    return props.dataSource?.getAggregatedValue?.(row, field);
+  }, [apiRef, props.dataSource]);
   const privateApi = _extends({}, api.private, {
     resolveGroupAggregation
   });

package/modern/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { passFilterLogic, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn, GridStrategyGroup } from '@mui/x-data-grid-pro/internals';
+import { passFilterLogic, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn, GridStrategyGroup, getRowValue } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 export { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, getRowGroupingCriteriaFromGroupingField, isGroupingColumn };
 export let RowGroupingStrategy = /*#__PURE__*/function (RowGroupingStrategy) {
@@ -138,7 +138,7 @@ export const getCellGroupingCriteria = ({
   if (groupingRule.groupingValueGetter) {
     key = groupingRule.groupingValueGetter(row[groupingRule.field], row, colDef, apiRef);
   } else {
-    key = row[groupingRule.field];
+    key = getRowValue(row, colDef, apiRef);
   }
   return {
     key,

package/modern/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
 import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
 import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
-export declare const useGridDataSourceRowGroupingPreProcessors: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;
+export declare const useGridDataSourceRowGroupingPreProcessors: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "dataSource">) => void;

package/modern/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.js

@@ -5,11 +5,11 @@ import { getGroupingRules, RowGroupingStrategy } from "./gridRowGroupingUtils.js
 import { gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 export const useGridDataSourceRowGroupingPreProcessors = (apiRef, props) => {
   const createRowTreeForRowGrouping = React.useCallback(params => {
-    const getGroupKey = props.unstable_dataSource?.getGroupKey;
+    const getGroupKey = props.dataSource?.getGroupKey;
     if (!getGroupKey) {
       throw new Error('MUI X: No `getGroupKey` method provided with the dataSource.');
     }
-    const getChildrenCount = props.unstable_dataSource?.getChildrenCount;
+    const getChildrenCount = props.dataSource?.getChildrenCount;
     if (!getChildrenCount) {
       throw new Error('MUI X: No `getChildrenCount` method provided with the dataSource.');
     }
@@ -57,7 +57,7 @@ export const useGridDataSourceRowGroupingPreProcessors = (apiRef, props) => {
       isGroupExpandedByDefault: props.isGroupExpandedByDefault,
       groupingName: RowGroupingStrategy.DataSource
     });
-  }, [apiRef, props.unstable_dataSource, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
+  }, [apiRef, props.dataSource, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
   const filterRows = React.useCallback(() => {
     const rowTree = gridRowTreeSelector(apiRef);
     return skipFiltering(rowTree);

package/modern/hooks/features/rowGrouping/useGridRowGrouping.d.ts

@@ -8,4 +8,4 @@ export declare const rowGroupingStateInitializer: GridStateInitializer<Pick<Data
  * @requires useGridRows (state, method) - can be after, async only
  * @requires useGridParamsApi (method) - can be after, async only
  */
-export declare const useGridRowGrouping: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "groupingColDef" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "unstable_dataSource">) => void;
+export declare const useGridRowGrouping: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "groupingColDef" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "dataSource">) => void;

package/modern/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -140,13 +140,13 @@ export const useGridRowGrouping = (apiRef, props) => {
       if (!isOnGroupingCell) {
         return;
       }
-      if (props.unstable_dataSource && !params.rowNode.childrenExpanded) {
-        apiRef.current.unstable_dataSource.fetchRows(params.id);
+      if (props.dataSource && !params.rowNode.childrenExpanded) {
+        apiRef.current.dataSource.fetchRows(params.id);
         return;
       }
       apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
     }
-  }, [apiRef, props.rowGroupingColumnMode, props.unstable_dataSource]);
+  }, [apiRef, props.rowGroupingColumnMode, props.dataSource]);
   const checkGroupingColumnsModelDiff = React.useCallback(() => {
     const sanitizedRowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
     const rulesOnLastRowTreeCreation = apiRef.current.caches.rowGrouping.rulesOnLastRowTreeCreation || [];
@@ -169,7 +169,7 @@ export const useGridRowGrouping = (apiRef, props) => {
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
   useGridApiEventHandler(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
   useGridApiEventHandler(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);
-  useGridApiEventHandler(apiRef, 'rowGroupingModelChange', () => apiRef.current.unstable_dataSource.fetchRows());
+  useGridApiEventHandler(apiRef, 'rowGroupingModelChange', () => apiRef.current.dataSource.fetchRows());
 
   /*
    * EFFECTS

package/modern/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import { RefObject } from '@mui/x-internals/types';
 import { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
 import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
-export declare const useGridRowGroupingPreProcessors: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;
+export declare const useGridRowGroupingPreProcessors: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "dataSource">) => void;