@mui/x-data-grid-pro 6.0.0-alpha.7 → 6.0.0-alpha.8

package/CHANGELOG.md

@@ -3,6 +3,76 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.8
+
+_Nov 17, 2022_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Support aggregating data from multiple row fields (#6656) @cherniavskii
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.8` / `@mui/x-data-grid-pro@v6.0.0-alpha.8` / `@mui/x-data-grid-premium@v6.0.0-alpha.8`
+
+#### Changes
+
+- [DataGrid] Fix `ErrorOverlay` not receiving defined input props (#6819) @banoth-ravinder
+- [DataGrid] Fix conflict with the latest version of `@types/react` (#6797) @vizv
+- [DataGrid] Make more `apiRef` methods private (#6700) @cherniavskii
+- [DataGrid] Provide a clear error message when upgrading (#6685) @oliviertassinari
+- [DataGridPremium] Allow to customize the indent of group expansion toggle (#6837) @MBilalShafi
+- [DataGridPremium] Support aggregating data from multiple row fields (#6656) @cherniavskii
+- [DataGridPro] Fix detail panel not working with `getRowSpacing` prop (#6707) @cherniavskii
+- [DataGridPro] Opt-out for column jump back on re-order (#6733) @gavbrennan
+- [l10n] Improve Finnish (fi-FI) locale (#6859) @RainoPikkarainen
+
+### `@mui/x-date-pickers@v6.0.0-alpha.8` / `@mui/x-date-pickers-pro@v6.0.0-alpha.8`
+
+#### Breaking changes
+
+- The `ClockPicker` view component has been renamed to `TimeClock` to better fit its usage:
+
+  ```diff
+  -<ClockPicker {...props} />
+  +<TimeClock {...props} />
+  ```
+
+  Component name in the theme has changed as well:
+
+  ```diff
+  -MuiClockPicker: {
+  +MuiTimeClock: {
+  ```
+
+#### Changes
+
+- [pickers] Fix typing and prop drilling on `DateRangeCalendar` and multi input range fields (#6852) @flaviendelangle
+- [pickers] Pass the `ampm` prop from the new pickers to their field (#6868) @flaviendelangle
+- [pickers] Rename `CalendarPickerView`, `ClockPickerView` and `CalendarOrClockPickerView` (#6855) @flaviendelangle
+- [pickers] Rename `ClockPicker` into `TimeClock` (#6851) @flaviendelangle
+
+### Docs
+
+- [docs] Add `dayjs` to the dependencies (#6862) @m4theushw
+- [docs] Clarify how the Row Pinning works with other features of the DataGrid (#6853) @cherniavskii
+- [docs] Fix typo in Export page (#6848) @m4theushw
+- [docs] Group picker pages (#6369) @flaviendelangle
+- [docs] Remove default prop and improve format (#6781) @oliviertassinari
+- [docs] Sync prism-okaidia.css with source (#6820) @oliviertassinari
+
+### Core
+
+- [core] Convert scripts to ESM (#6789) @LukasTy
+- [core] Feedback on branch protection @oliviertassinari
+- [core] Fix `test-types` out of memory error (#6850) @LukasTy
+- [core] Import from `@mui/utils` instead of `@mui/material/utils` (#6816) @cherniavskii
+- [core] Show the whole version to make blame easier @oliviertassinari
+- [core] Small changes on new pickers internals (#6840) @flaviendelangle
+- [core] Remove prettier scripts (#6815) @Janpot
+- [license] Polish error messages (#6881) @oliviertassinari
+- [test] Verify `onError` call on the pickers (#6771) @alexfauquette
+
 ## 6.0.0-alpha.7
 
 _Nov 10, 2022_
@@ -949,6 +1019,62 @@ You can find more information about the new api, including how to set those tran
 - [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
 - [website] Improve security header @oliviertassinari
 
+## 5.17.12
+
+_Nov 17, 2022_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Finnish (fi-FI) locale (#6859) @RainoPikkarainen
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.12` / `@mui/x-data-grid-pro@v5.17.12` / `@mui/x-data-grid-premium@v5.17.12`
+
+#### Changes
+
+- [DataGrid] Fix conflict with the latest version of `@types/react` (#6883) @vizv
+- [DataGridPremium] Support aggregating data from multiple row fields (#6844) @cherniavskii
+- [DataGridPro] Fix detail panel not working with `getRowSpacing` prop (#6858) @cherniavskii
+- [l10n] Improve Finnish (fi-FI) locale (#6859) @RainoPikkarainen
+
+### Docs
+
+- [docs] Clarify DataGrid Row Pinning docs (#6891) @cherniavskii
+
+### Core
+
+- [core] Upgrade monorepo (#6864) @m4theushw
+- [license] Polish error messages (#6881) @oliviertassinari
+
+## 5.17.11
+
+_Nov 10, 2022_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.11` / `@mui/x-data-grid-pro@v5.17.11` / `@mui/x-data-grid-premium@v5.17.11`
+
+#### Changes
+
+- [DataGrid] Fix for cell focus preventing scroll when virtualization enabled (#6622) @yaredtsy
+- [DataGridPro] Opt-out for column jump back on re-order (#6697) @gavbrennan
+
+### `@mui/x-date-pickers@v5.0.8` / `@mui/x-date-pickers-pro@v5.0.8`
+
+#### Changes
+
+- [pickers] Fix pickers toolbar styling (#6793) @LukasTy
+
+### Docs
+
+- [docs] Fix link to localization page (#6766) @alexfauquette
+
+### Core
+
+- [license] Add new license status 'Out of scope' (#6774) @oliviertassinari
+
 ## 5.17.10
 
 _Nov 4, 2022_

package/DataGridPro/DataGrid.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @deprecated Import DataGridPro instead.
+ */
+export declare function DataGrid(): null;

package/DataGridPro/DataGrid.js

@@ -0,0 +1,10 @@
+/**
+ * @deprecated Import DataGridPro instead.
+ */
+export function DataGrid() {
+  if (process.env.NODE_ENV === 'production') {
+    return null;
+  }
+
+  throw new Error(["You try to import `DataGrid` from @mui/x-data-grid-pro but this module doesn't exist.", '', "Instead, you can do `import { DataGridPro } from '@mui/x-data-grid-pro'`."].join('\n'));
+}

package/DataGridPro/DataGridPro.js

@@ -265,7 +265,7 @@ DataGridProRaw.propTypes = {
   error: PropTypes.any,
 
   /**
-   * Features under development.
+   * Unstable features, breaking changes might be introduced.
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
@@ -441,6 +441,13 @@ DataGridProRaw.propTypes = {
    */
   isRowSelectable: PropTypes.func,
 
+  /**
+   * If `true`, moving the mouse pointer outside the grid before releasing the mouse button
+   * in a column re-order action will not cause the column to jump back to its original position.
+   * @default false
+   */
+  keepColumnPositionIfDraggedOutside: PropTypes.bool,
+
   /**
    * If `true`, the selection model will retain selected rows that do not exist.
    * Useful when using server side pagination and row selections need to be retained

package/DataGridPro/index.d.ts

@@ -1,2 +1,3 @@
+export * from './DataGrid';
 export * from './DataGridPro';
 export { DATA_GRID_PRO_PROPS_DEFAULT_VALUES } from './useDataGridProProps';

package/DataGridPro/index.js

@@ -1,2 +1,3 @@
+export * from './DataGrid';
 export * from './DataGridPro';
 export { DATA_GRID_PRO_PROPS_DEFAULT_VALUES } from './useDataGridProProps';

package/DataGridPro/useDataGridProProps.js

@@ -11,6 +11,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   treeData: false,
   defaultGroupingExpansionDepth: 0,
   disableColumnPinning: false,
+  keepColumnPositionIfDraggedOutside: false,
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
   rowReordering: false,

package/components/DataGridProColumnHeaders.js

@@ -2,9 +2,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["style", "className", "innerRef"];
 import * as React from 'react';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { styled, alpha } from '@mui/material/styles';
-import { useEventCallback } from '@mui/material/utils';
 import { getDataGridUtilityClass, gridClasses, useGridSelector, useGridApiEventHandler, gridVisibleColumnFieldsSelector, GridColumnHeaderSeparatorSides } from '@mui/x-data-grid';
 import { GridColumnHeaders, GridColumnHeadersInner, useGridColumnHeaders } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';

package/components/DataGridProVirtualScroller.js

@@ -6,7 +6,7 @@ import { styled, alpha } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler, GridOverlays } from '@mui/x-data-grid';
 import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller, calculatePinnedRowsHeight } from '@mui/x-data-grid/internals';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridPinnedColumnsSelector, GridPinnedPosition } from '../hooks/features/columnPinning';
 import { gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector, gridDetailPanelExpandedRowIdsSelector } from '../hooks/features/detailPanel';
@@ -145,7 +145,7 @@ const VirtualScrollerPinnedRowsRenderZone = styled('div')({
 const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridProVirtualScroller(props, ref) {
   const other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const apiRef = useGridApiContext();
+  const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
   const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
@@ -251,7 +251,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       const exists = rowIndex !== undefined;
 
       if ( /*#__PURE__*/React.isValidElement(content) && exists) {
-        const hasAutoHeight = apiRef.current.unstable_detailPanelHasAutoHeight(id);
+        const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(id);
         const height = hasAutoHeight ? 'auto' : detailPanelsHeights[id];
         const sizes = apiRef.current.unstable_getRowInternalSizes(id);
         const spacingTop = (sizes == null ? void 0 : sizes.spacingTop) || 0;

package/components/GridDetailPanel.js

@@ -4,7 +4,7 @@ const _excluded = ["rowId", "height", "style"];
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DetailPanel = styled(Box, {
   name: 'MuiDataGrid',
@@ -28,12 +28,12 @@ function GridDetailPanel(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const apiRef = useGridApiContext();
+  const apiRef = useGridPrivateApiContext();
   const ref = React.useRef();
   React.useLayoutEffect(() => {
     if (height === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
-      apiRef.current.unstable_storeDetailPanelHeight(rowId, ref.current.clientHeight);
+      apiRef.current.storeDetailPanelHeight(rowId, ref.current.clientHeight);
     }
   }, [apiRef, height, rowId]);
   React.useLayoutEffect(() => {
@@ -46,7 +46,7 @@ function GridDetailPanel(props) {
     const resizeObserver = new ResizeObserver(entries => {
       const [entry] = entries;
       const observedHeight = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
-      apiRef.current.unstable_storeDetailPanelHeight(rowId, observedHeight);
+      apiRef.current.storeDetailPanelHeight(rowId, observedHeight);
     });
     resizeObserver.observe(ref.current);
     return () => resizeObserver.disconnect();

package/components/GridTreeDataGroupingCell.d.ts

@@ -2,6 +2,11 @@
 import { GridRenderCellParams, GridGroupNode } from '@mui/x-data-grid';
 interface GridTreeDataGroupingCellProps extends GridRenderCellParams<any, any, any, GridGroupNode> {
     hideDescendantCount?: boolean;
+    /**
+     * The cell offset multiplier used for calculating cell offset (`rowNode.depth * offsetMultiplier` px).
+     * @default 2
+     */
+    offsetMultiplier?: number;
 }
 declare function GridTreeDataGroupingCell(props: GridTreeDataGroupingCellProps): JSX.Element;
 declare namespace GridTreeDataGroupingCell {

package/components/GridTreeDataGroupingCell.js

@@ -29,7 +29,8 @@ function GridTreeDataGroupingCell(props) {
     field,
     formattedValue,
     rowNode,
-    hideDescendantCount
+    hideDescendantCount,
+    offsetMultiplier = 2
   } = props;
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
@@ -60,7 +61,7 @@ function GridTreeDataGroupingCell(props) {
   return /*#__PURE__*/_jsxs(Box, {
     className: classes.root,
     sx: {
-      ml: rowNode.depth * 2
+      ml: rowNode.depth * offsetMultiplier
     },
     children: [/*#__PURE__*/_jsx("div", {
       className: classes.toggle,
@@ -138,6 +139,12 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
    */
   isEditable: PropTypes.bool,
 
+  /**
+   * The cell offset multiplier used for calculating cell offset (`rowNode.depth * offsetMultiplier` px).
+   * @default 2
+   */
+  offsetMultiplier: PropTypes.number,
+
   /**
    * The row model of the row that the current cell belongs to.
    */

package/hooks/features/columnPinning/useGridColumnPinning.js

@@ -18,7 +18,7 @@ function Divider() {
 export const columnPinningStateInitializer = (state, props, apiRef) => {
   var _props$initialState;
 
-  apiRef.current.unstable_caches.columnPinning = {
+  apiRef.current.caches.columnPinning = {
     orderedFieldsBeforePinningColumns: null
   };
   let model;
@@ -72,10 +72,10 @@ export const useGridColumnPinning = (apiRef, props) => {
     }
 
     const index = event.currentTarget.dataset.rowindex;
-    const rowElements = apiRef.current.windowRef.current.querySelectorAll(`.${gridClasses.row}[data-rowindex="${index}"]`);
+    const rowElements = apiRef.current.virtualScrollerRef.current.querySelectorAll(`.${gridClasses.row}[data-rowindex="${index}"]`);
     rowElements.forEach(row => {
       // Ignore rows from other grid inside the hovered row
-      if (row.closest(`.${gridClasses.virtualScroller}`) === apiRef.current.windowRef.current) {
+      if (row.closest(`.${gridClasses.virtualScroller}`) === apiRef.current.virtualScrollerRef.current) {
         if (event.type === 'mouseenter') {
           row.classList.add('Mui-hovered');
         } else {
@@ -111,8 +111,8 @@ export const useGridColumnPinning = (apiRef, props) => {
     const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
     const columnsTotalWidth = gridColumnsTotalWidthSelector(apiRef);
     const columnPositions = gridColumnPositionsSelector(apiRef);
-    const clientWidth = apiRef.current.windowRef.current.clientWidth;
-    const scrollLeft = apiRef.current.windowRef.current.scrollLeft;
+    const clientWidth = apiRef.current.virtualScrollerRef.current.clientWidth;
+    const scrollLeft = apiRef.current.virtualScrollerRef.current.scrollLeft;
     const offsetWidth = visibleColumns[params.colIndex].computedWidth;
     const offsetLeft = columnPositions[params.colIndex];
     const leftPinnedColumnsWidth = columnPositions[leftPinnedColumns.length];
@@ -267,7 +267,7 @@ export const useGridColumnPinning = (apiRef, props) => {
   };
   useGridApiMethod(apiRef, columnPinningApi, 'public');
   const handleColumnOrderChange = React.useCallback(params => {
-    if (!apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns) {
+    if (!apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns) {
       return;
     }
 
@@ -297,7 +297,7 @@ export const useGridColumnPinning = (apiRef, props) => {
      */
 
     const siblingField = latestColumnFields[targetIndex - delta];
-    const newOrderedFieldsBeforePinningColumns = [...apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns]; // The index to start swapping fields
+    const newOrderedFieldsBeforePinningColumns = [...apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns]; // The index to start swapping fields
 
     let i = newOrderedFieldsBeforePinningColumns.findIndex(column => column === field); // The index of the field to swap with
 
@@ -319,7 +319,7 @@ export const useGridColumnPinning = (apiRef, props) => {
       j = i + delta;
     }
 
-    apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns = newOrderedFieldsBeforePinningColumns;
+    apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns = newOrderedFieldsBeforePinningColumns;
   }, [apiRef]);
   useGridApiEventHandler(apiRef, 'columnOrderChange', handleColumnOrderChange);
   React.useEffect(() => {

package/hooks/features/columnPinning/useGridColumnPinningPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
-import { GridApiPro } from '../../../models/gridApiPro';
-export declare const useGridColumnPinningPreProcessors: (apiRef: React.MutableRefObject<GridApiPro>, props: DataGridProProcessedProps) => void;
+import { GridPrivateApiPro } from '../../../models/gridApiPro';
+export declare const useGridColumnPinningPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;

package/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -34,7 +34,7 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
     const allPinnedColumns = [...leftPinnedColumns, ...rightPinnedColumns];
     const {
       orderedFieldsBeforePinningColumns
-    } = apiRef.current.unstable_caches.columnPinning;
+    } = apiRef.current.caches.columnPinning;
 
     if (orderedFieldsBeforePinningColumns) {
       newOrderedFields = new Array(columnsState.orderedFields.length).fill(null);
@@ -90,10 +90,10 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
         newOrderedFieldsBeforePinningColumns[i] = field;
         newOrderedFields[i] = field;
       });
-      apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns = newOrderedFieldsBeforePinningColumns;
+      apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns = newOrderedFieldsBeforePinningColumns;
     } else {
       newOrderedFields = [...columnsState.orderedFields];
-      apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns = [...columnsState.orderedFields];
+      apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns = [...columnsState.orderedFields];
     }
 
     prevAllPinnedColumns.current = allPinnedColumns;

package/hooks/features/columnReorder/useGridColumnReorder.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { GridStateInitializer } from '@mui/x-data-grid/internals';
-import { GridApiPro } from '../../../models/gridApiPro';
+import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const columnReorderStateInitializer: GridStateInitializer;
 /**
  * @requires useGridColumns (method)
  */
-export declare const useGridColumnReorder: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnReorder' | 'classes'>) => void;
+export declare const useGridColumnReorder: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnReorder' | 'keepColumnPositionIfDraggedOutside' | 'classes'>) => void;

package/hooks/features/columnReorder/useGridColumnReorder.js

@@ -232,19 +232,19 @@ export const useGridColumnReorder = (apiRef, props) => {
     clearTimeout(removeDnDStylesTimeout.current);
     dragColNode.current = null; // Check if the column was dropped outside the grid.
 
-    if (event.dataTransfer.dropEffect === 'none') {
+    if (event.dataTransfer.dropEffect === 'none' && !props.keepColumnPositionIfDraggedOutside) {
       // Accessing params.field may contain the wrong field as header elements are reused
       apiRef.current.setColumnIndex(dragColField, originColumnIndex.current);
-      originColumnIndex.current = null;
     }
 
+    originColumnIndex.current = null;
     apiRef.current.setState(state => _extends({}, state, {
       columnReorder: _extends({}, state.columnReorder, {
         dragCol: ''
       })
     }));
     apiRef.current.forceUpdate();
-  }, [props.disableColumnReorder, logger, apiRef]);
+  }, [props.disableColumnReorder, props.keepColumnPositionIfDraggedOutside, logger, apiRef]);
   useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleDragStart);
   useGridApiEventHandler(apiRef, 'columnHeaderDragEnter', handleDragEnter);
   useGridApiEventHandler(apiRef, 'columnHeaderDragOver', handleDragOver);

package/hooks/features/columnResize/useGridColumnResize.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { GridStateInitializer } from '@mui/x-data-grid/internals';
-import { GridApiPro } from '../../../models/gridApiPro';
+import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const columnResizeStateInitializer: GridStateInitializer;
 /**
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
-export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'onColumnResize' | 'onColumnWidthChange'>) => void;
+export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, 'onColumnResize' | 'onColumnWidthChange'>) => void;

package/hooks/features/columnResize/useGridColumnResize.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { ownerDocument, useEventCallback } from '@mui/material/utils';
+import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { gridClasses, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
 import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
 import { useTheme } from '@mui/material/styles';

package/hooks/features/detailPanel/gridDetailPanelInterface.d.ts

@@ -23,20 +23,20 @@ export interface GridDetailPanelApi {
      * @param {GridRowId[]} ids The ids of the rows to open the detail panel.
      */
     setExpandedDetailPanels: (ids: GridRowId[]) => void;
+}
+export interface GridDetailPanelPrivateApi {
     /**
      * Stores the panel height measurement and triggers the row height pre-processing.
      * @param {GridRowId} id The id of the row.
      * @param {number} height The new height.
-     * @ignore - do not document.
      */
-    unstable_storeDetailPanelHeight: (id: GridRowId, height: number) => void;
+    storeDetailPanelHeight: (id: GridRowId, height: number) => void;
     /**
      * Determines if the height of a detail panel is "auto".
      * @param {GridRowId} id The id of the row.
-     * @return {boolean} `true` if the detail panel height is "auto".
-     * @ignore - do not document.
+     * @returns {boolean} `true` if the detail panel height is "auto".
      */
-    unstable_detailPanelHasAutoHeight: (id: GridRowId) => boolean;
+    detailPanelHasAutoHeight: (id: GridRowId) => boolean;
 }
 export interface GridDetailPanelState {
     expandedRowIds: GridRowId[];

package/hooks/features/detailPanel/useGridDetailPanel.js

@@ -138,20 +138,23 @@ export const useGridDetailPanel = (apiRef, props) => {
         })
       });
     });
-    apiRef.current.unstable_requestPipeProcessorsApplication('rowHeight');
+    apiRef.current.requestPipeProcessorsApplication('rowHeight');
   }, [apiRef]);
   const detailPanelHasAutoHeight = React.useCallback(id => {
     const heightCache = gridDetailPanelRawHeightCacheSelector(apiRef.current.state);
     return heightCache[id] ? heightCache[id].autoHeight : false;
   }, [apiRef]);
-  const detailPanelApi = {
+  const detailPanelPubicApi = {
     toggleDetailPanel,
     getExpandedDetailPanels,
-    setExpandedDetailPanels,
-    unstable_storeDetailPanelHeight: storeDetailPanelHeight,
-    unstable_detailPanelHasAutoHeight: detailPanelHasAutoHeight
+    setExpandedDetailPanels
   };
-  useGridApiMethod(apiRef, detailPanelApi, 'public');
+  const detailPanelPrivateApi = {
+    storeDetailPanelHeight,
+    detailPanelHasAutoHeight
+  };
+  useGridApiMethod(apiRef, detailPanelPubicApi, 'public');
+  useGridApiMethod(apiRef, detailPanelPrivateApi, 'private');
   React.useEffect(() => {
     if (props.detailPanelExpandedRowIds) {
       const currentModel = gridDetailPanelExpandedRowIdsSelector(apiRef.current.state);

package/hooks/features/detailPanel/useGridDetailPanelPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
-import { GridApiPro } from '../../../models/gridApiPro';
-export declare const useGridDetailPanelPreProcessors: (apiRef: React.MutableRefObject<GridApiPro>, props: DataGridProProcessedProps) => void;
+import { GridPrivateApiPro } from '../../../models/gridApiPro';
+export declare const useGridDetailPanelPreProcessors: (privateApiRef: React.MutableRefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;

package/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from './gridDetailPanelToggleColDef';
 import { gridDetailPanelExpandedRowIdsSelector } from './gridDetailPanelSelector';
-export const useGridDetailPanelPreProcessors = (apiRef, props) => {
+export const useGridDetailPanelPreProcessors = (privateApiRef, props) => {
   const addToggleColumn = React.useCallback(columnsState => {
     if (props.getDetailPanelContent == null) {
       // Remove the toggle column, when it exists
@@ -24,23 +24,23 @@ export const useGridDetailPanelPreProcessors = (apiRef, props) => {
 
     columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
     columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = _extends({}, GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
-      headerName: apiRef.current.getLocaleText('detailPanelToggle')
+      headerName: privateApiRef.current.getLocaleText('detailPanelToggle')
     });
     return columnsState;
-  }, [apiRef, props.getDetailPanelContent]);
+  }, [privateApiRef, props.getDetailPanelContent]);
   const addExpandedClassToRow = React.useCallback((classes, id) => {
     if (props.getDetailPanelContent == null) {
       return classes;
     }
 
-    const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(apiRef.current.state);
+    const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(privateApiRef.current.state);
 
     if (!expandedRowIds.includes(id)) {
       return classes;
     }
 
     return [...classes, 'MuiDataGrid-row--detailPanelExpanded'];
-  }, [apiRef, props.getDetailPanelContent]);
-  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addToggleColumn);
-  useGridRegisterPipeProcessor(apiRef, 'rowClassName', addExpandedClassToRow);
+  }, [privateApiRef, props.getDetailPanelContent]);
+  useGridRegisterPipeProcessor(privateApiRef, 'hydrateColumns', addToggleColumn);
+  useGridRegisterPipeProcessor(privateApiRef, 'rowClassName', addExpandedClassToRow);
 };

package/hooks/features/infiniteLoader/useGridInfiniteLoader.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { GridApiPro } from '../../../models/gridApiPro';
+import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 /**
  * @requires useGridColumns (state)
  * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method
  */
-export declare const useGridInfiniteLoader: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'onRowsScrollEnd' | 'scrollEndThreshold' | 'pagination' | 'paginationMode' | 'rowsLoadingMode'>) => void;
+export declare const useGridInfiniteLoader: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, 'onRowsScrollEnd' | 'scrollEndThreshold' | 'pagination' | 'paginationMode' | 'rowsLoadingMode'>) => void;

package/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -21,7 +21,7 @@ export const useGridInfiniteLoader = (apiRef, props) => {
     }
 
     const scrollPositionBottom = scrollPosition.top + dimensions.viewportOuterSize.height;
-    const viewportPageSize = apiRef.current.unstable_getViewportPageSize();
+    const viewportPageSize = apiRef.current.getViewportPageSize();
 
     if (scrollPositionBottom < contentHeight - props.scrollEndThreshold) {
       isInScrollBottomArea.current = false;

package/hooks/features/lazyLoader/useGridLazyLoader.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridApiPro } from '../../../models/gridApiPro';
+import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 /**
  * @requires useGridRows (state)
@@ -7,4 +7,4 @@ import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
  * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method
  */
-export declare const useGridLazyLoader: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'onFetchRows' | 'rowsLoadingMode' | 'pagination' | 'paginationMode' | 'rowBuffer' | 'experimentalFeatures'>) => void;
+export declare const useGridLazyLoader: (privateApiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, 'onFetchRows' | 'rowsLoadingMode' | 'pagination' | 'paginationMode' | 'rowBuffer' | 'experimentalFeatures'>) => void;