@mui/x-data-grid 6.2.1 → 6.3.0

package/CHANGELOG.md

@@ -3,6 +3,75 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.3.0
+
+_Apr 28, 2023_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 New [time-picking UI](https://mui.com/x/react-date-pickers/digital-clock/) designed for desktops (#7958) @LukasTy
+
+  <img src="https://user-images.githubusercontent.com/4941090/235072007-de39a397-e4a4-4c98-8e10-5ee4ad440108.gif" width="494" />
+
+- ✨ Picker fields [now always include a leading zero](https://mui.com/x/react-date-pickers/adapters-locale/#respect-leading-zeros-in-fields) on digit sections (#8527) @flaviendelangle
+- 🌍 Improve Chinese (zh-CN), French (fr-FR), and Turkish (tr-TR) locales
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.3.0` / `@mui/x-data-grid-pro@v6.3.0` / `@mui/x-data-grid-premium@v6.3.0`
+
+#### Changes
+
+- [DataGrid] Add overlay classes to `gridClasses` (#8686) @lindapaiste
+- [DataGrid] Avoid passing `api` prop to div (#8679) @someden
+- [DataGrid] Fix 'ResizeObserver loop limit exceeded' error (#8744) @m4theushw
+- [DataGrid] Add Joy UI slots (button and switch) (#8699) @siriwatknp
+- [DataGrid] Fix aggregation label alignment (#8694) @joserodolfofreitas
+- [DataGridPremium] Fix infinite loop when updating grouped rows (#8693) @cherniavskii
+- [DataGridPro] Fix error after updating `columns` and `columnGroupingModel` at once (#8730) @cherniavskii
+- [l10n] Improve Chinese (zh-CN) locale (#8753) @SakumyZ
+- [l10n] Improve French (fr-FR) locale (#8704) @Jul13nT
+- [l10n] Improve Turkish (tr-TR) locale (#8783) @cccaaannn
+
+### `@mui/x-date-pickers@v6.3.0` / `@mui/x-date-pickers-pro@v6.3.0`
+
+#### Changes
+
+- [fields] Always add leading zeroes on digit sections (#8527) @flaviendelangle
+- [fields] Pass the `readOnly` prop to `InputProps` instead of `inputProps` (#8659) @flaviendelangle
+- [pickers] Add missing export for `caES` locale (#8782) @flaviendelangle
+- [pickers] Add new `DigitalClock` desktop time picking experience (#7958) @LukasTy
+- [pickers] Do not use `instanceOf DateTime` in `AdapterLuxon` (#8734) @flaviendelangle
+- [pickers] Fix date calendar `selected` & `disabled` day style (#8773) @LukasTy
+- [pickers] Migrate `AdapterDateFns` to our repository (#8736) @flaviendelangle
+- [pickers] Migrate `AdapterLuxon` to our repository (#8600) @flaviendelangle
+- [pickers] Migrate `AdapterMomentHijri` to our repository (#8776) @flaviendelangle
+- [pickers] Migrate `AdapterMomentJalaali` and `AdapterDateFnsJalali` to our repository (#8741) @flaviendelangle
+- [pickers] Migrate `AdapterMoment` to our repository (#8700) @flaviendelangle
+- [pickers] Refactor the validation files (#8622) @flaviendelangle
+- [pickers] Use `en dash` instead of `em dash` in multi input range fields (#8738) @flaviendelangle
+- [l10n] Improve Chinese (zh-CN) locale (#8753) @SakumyZ
+- [l10n] Improve Turkish (tr-TR) locale (#8783) @cccaaannn
+
+### Docs
+
+- [docs] Add icons for charts menu (#8752) @alexfauquette
+- [docs] Document the supported formats (#8746) @flaviendelangle
+- [docs] Fix Hijri demo (#8698) @alexfauquette
+- [docs] Fix `x-codemod` package version in changelog (#8690) @MBilalShafi
+- [docs] Fix columns special properties code example (#8414) @mikkelhl
+- [docs] Fix error in `minDateTime` `validation` page section (#8777) @LukasTy
+- [docs] Update custom field pickers using theme scoping (#8609) @siriwatknp
+- [docs] Use community version of data grid for column grouping demo (#7346) @ASchwad
+- [docs] Use new `slots` / `slotProps` props in the pickers migration guide (#8341) @flaviendelangle
+
+### Core
+
+- [core] Cleanup picker tests (#8652) @flaviendelangle
+- [core] Use `adapter.lib` instead of `adapterName` in `describeAdapters` (#8779) @flaviendelangle
+- [charts] Adapt line and scatter plot to the "band" scale type (#8701) @alexfauquette
+- [charts] Link the Gantt Charts issue in the docs (#8739) @flaviendelangle
+
 ## 6.2.1
 
 _Apr 20, 2023_
@@ -31,7 +100,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 - [pickers] Do not include the time in date components when going to today (#8657) @flaviendelangle
 - [pickers] Sync internal state with controlled value (#8674) @alexfauquette
 
-### `@mui/x-codemod@v6.0.6`
+### `@mui/x-codemod@v6.2.1`
 
 #### Changes
 

package/components/base/GridBody.js

@@ -45,13 +45,20 @@ function GridBody(props) {
     if (typeof ResizeObserver === 'undefined') {
       return () => {};
     }
+    let animationFrame;
     const observer = new ResizeObserver(() => {
-      apiRef.current.computeSizeAndPublishResizeEvent();
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = window.requestAnimationFrame(() => {
+        apiRef.current.computeSizeAndPublishResizeEvent();
+      });
     });
     if (elementToObserve) {
       observer.observe(elementToObserve);
     }
     return () => {
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
       if (elementToObserve) {
         observer.unobserve(elementToObserve);
       }

package/components/cell/GridActionsCell.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 import { GridRenderCellParams } from '../../models/params/gridCellParams';
 import { GridMenuProps } from '../menu/GridMenu';
-interface GridActionsCellProps extends Omit<GridRenderCellParams, 'value' | 'formattedValue' | 'api'> {
-    value?: GridRenderCellParams['value'];
-    formattedValue?: GridRenderCellParams['formattedValue'];
+interface GridActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
+    api?: GridRenderCellParams['api'];
     position?: GridMenuProps['position'];
 }
 declare function GridActionsCell(props: GridActionsCellProps): JSX.Element;

package/components/cell/GridActionsCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
+const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuList from '@mui/material/MenuList';
@@ -189,6 +189,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  api: PropTypes.object,
   /**
    * The mode of the cell.
    */
@@ -211,6 +212,9 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
       focus: PropTypes.func.isRequired
     })
   })]),
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
   formattedValue: PropTypes.any,
   /**
    * If true, the cell is the active element.
@@ -237,6 +241,10 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    * the tabIndex value.
    */
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
   value: PropTypes.any
 } : void 0;
 export { GridActionsCell };

package/components/containers/GridRootStyles.js

@@ -204,7 +204,9 @@ export const GridRootStyles = styled('div', {
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
-      overflow: 'hidden'
+      overflow: 'hidden',
+      // to anchor the aggregation label
+      position: 'relative'
     },
     [`& .${gridClasses.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',

package/components/panel/GridPanel.d.ts

@@ -16,12 +16,12 @@ export interface GridPanelProps extends Partial<React.ComponentProps<typeof Grid
     open: boolean;
 }
 export declare const gridPanelClasses: Record<keyof GridPanelClasses, string>;
-declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<Omit<import("@mui/base").PopperUnstyledProps<"div", {}>, "direction"> & {
+declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<Omit<import("@mui/base").PopperProps<"div", {}>, "direction"> & {
     components?: {
         Root?: React.ElementType<any> | undefined;
     } | undefined;
     componentsProps?: {
-        root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperUnstyledRootSlotPropsOverrides, import("@mui/base").PopperUnstyledOwnProps> | undefined;
+        root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps> | undefined;
     } | undefined;
     sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
 } & React.RefAttributes<HTMLDivElement>, "hidden" | "color" | "content" | "style" | "open" | "translate" | "container" | "transition" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "components" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots" | "componentsProps" | keyof React.RefAttributes<HTMLDivElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -7,10 +7,7 @@ import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from './gridColumnGroupsUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { gridColumnFieldsSelector,
-// GridColumnsState,
-gridVisibleColumnFieldsSelector } from '../columns';
-import { useGridSelector } from '../../utils/useGridSelector';
+import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from '../columns';
 const createGroupLookup = columnGroupingModel => {
   let groupLookup = {};
   columnGroupingModel.forEach(node => {
@@ -102,19 +99,15 @@ export const useGridColumnGrouping = (apiRef, props) => {
       });
     });
   }, [apiRef, props.columnGroupingModel]);
-  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
-  const columnFields = useGridSelector(apiRef, gridColumnFieldsSelector);
-  const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
-    var _props$experimentalFe2, _props$columnGrouping4, _props$columnGrouping5;
+  const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
+    var _props$experimentalFe2;
     if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.columnGrouping)) {
       return;
     }
-    const groupLookup = createGroupLookup((_props$columnGrouping4 = props.columnGroupingModel) != null ? _props$columnGrouping4 : []);
-    const unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping5 = props.columnGroupingModel) != null ? _props$columnGrouping5 : []);
+    const columnFields = gridColumnFieldsSelector(apiRef);
+    const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
+    const groupLookup = createGroupLookup(columnGroupingModel != null ? columnGroupingModel : []);
+    const unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel != null ? columnGroupingModel : []);
     const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
     const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => {
       var _unwrappedGroupingMod4, _unwrappedGroupingMod5;
@@ -130,5 +123,19 @@ export const useGridColumnGrouping = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, columnFields, visibleColumnFields, props.columnGroupingModel, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
+  }, [apiRef, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
+  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
+  useGridApiEventHandler(apiRef, 'columnsChange', () => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', () => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  }, [updateColumnGroupingState, props.columnGroupingModel]);
 };

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.2.1
+ * @mui/x-data-grid v6.3.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/joy/joySlots.js

@@ -1,13 +1,47 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"];
+const _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
+  _excluded2 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
+  _excluded3 = ["color", "size", "sx"],
+  _excluded4 = ["name", "checkedIcon", "color", "disableRipple", "disableFocusRipple", "disableTouchRipple", "edge", "icon", "inputProps", "inputRef", "size", "sx", "onChange", "onClick"];
 import * as React from 'react';
 import JoyCheckbox from '@mui/joy/Checkbox';
 import JoyInput from '@mui/joy/Input';
 import JoyFormControl from '@mui/joy/FormControl';
 import JoyFormLabel from '@mui/joy/FormLabel';
+import JoyButton from '@mui/joy/Button';
+import JoyIconButton from '@mui/joy/IconButton';
+import JoySwitch from '@mui/joy/Switch';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+function convertColor(color) {
+  if (color === 'secondary') {
+    return 'primary';
+  }
+  if (color === 'error') {
+    return 'danger';
+  }
+  if (color === 'default' || color === 'inherit') {
+    return 'neutral';
+  }
+  return color;
+}
+function convertSize(size) {
+  return size ? {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+  }[size] : size;
+}
+function convertVariant(variant) {
+  return variant ? {
+    outlined: 'outlined',
+    contained: 'solid',
+    text: 'plain',
+    standard: 'plain',
+    filled: 'soft'
+  }[variant] : variant;
+}
 const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       inputProps,
@@ -56,14 +90,88 @@ const TextField = /*#__PURE__*/React.forwardRef(({
     })]
   });
 });
+const Button = /*#__PURE__*/React.forwardRef(function Button(_ref2, ref) {
+  var _convertVariant;
+  let {
+      startIcon,
+      color,
+      endIcon,
+      size,
+      sx,
+      variant
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  return /*#__PURE__*/_jsx(JoyButton, _extends({}, props, {
+    size: convertSize(size),
+    color: convertColor(color),
+    variant: (_convertVariant = convertVariant(variant)) != null ? _convertVariant : 'plain',
+    ref: ref,
+    startDecorator: startIcon,
+    endDecorator: endIcon,
+    sx: sx
+  }));
+});
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref3, ref) {
+  var _convertColor;
+  let {
+      color,
+      size,
+      sx
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  return /*#__PURE__*/_jsx(JoyIconButton, _extends({}, props, {
+    size: convertSize(size),
+    color: (_convertColor = convertColor(color)) != null ? _convertColor : 'neutral',
+    variant: "plain",
+    ref: ref,
+    sx: sx
+  }));
+});
+const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref4, ref) {
+  let {
+      name,
+      color: colorProp,
+      edge,
+      icon,
+      inputProps,
+      inputRef,
+      size,
+      sx,
+      onChange,
+      onClick
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  return /*#__PURE__*/_jsx(JoySwitch, _extends({}, props, {
+    onChange: onChange,
+    size: convertSize(size),
+    color: convertColor(colorProp),
+    ref: ref,
+    slotProps: {
+      input: _extends({}, inputProps, {
+        name,
+        onClick: onClick,
+        ref: inputRef
+      }),
+      thumb: {
+        children: icon
+      }
+    },
+    sx: [_extends({}, edge === 'start' && {
+      ml: '-8px'
+    }, edge === 'end' && {
+      mr: '-8px'
+    }), ...(Array.isArray(sx) ? sx : [sx])]
+  }));
+});
 const joySlots = {
   baseCheckbox: Checkbox,
-  baseTextField: TextField
+  baseTextField: TextField,
+  baseButton: Button,
+  baseIconButton: IconButton,
+  baseSwitch: Switch
   // BaseFormControl: MUIFormControl,
-  // BaseSelect: MUISelect,
-  // BaseSwitch: MUISwitch,
-  // BaseButton: MUIButton,
-  // BaseIconButton: MUIIconButton,
+  // baseSelect: Select,
+  // baseSelectOption: Option,
   // BaseTooltip: MUITooltip,
   // BasePopper: MUIPopper,
 };

package/legacy/components/base/GridBody.js

@@ -47,13 +47,20 @@ function GridBody(props) {
     if (typeof ResizeObserver === 'undefined') {
       return function () {};
     }
+    var animationFrame;
     var observer = new ResizeObserver(function () {
-      apiRef.current.computeSizeAndPublishResizeEvent();
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = window.requestAnimationFrame(function () {
+        apiRef.current.computeSizeAndPublishResizeEvent();
+      });
     });
     if (elementToObserve) {
       observer.observe(elementToObserve);
     }
     return function () {
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
       if (elementToObserve) {
         observer.unobserve(elementToObserve);
       }

package/legacy/components/cell/GridActionsCell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
+var _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuList from '@mui/material/MenuList';
@@ -18,7 +18,8 @@ var hasActions = function hasActions(colDef) {
 };
 function GridActionsCell(props) {
   var _rootProps$slotProps;
-  var colDef = props.colDef,
+  var api = props.api,
+    colDef = props.colDef,
     id = props.id,
     hasFocus = props.hasFocus,
     isEditable = props.isEditable,
@@ -221,6 +222,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  api: PropTypes.object,
   /**
    * The mode of the cell.
    */
@@ -243,6 +245,9 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
       focus: PropTypes.func.isRequired
     })
   })]),
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
   formattedValue: PropTypes.any,
   /**
    * If true, the cell is the active element.
@@ -269,6 +274,10 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
    * the tabIndex value.
    */
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
   value: PropTypes.any
 } : void 0;
 export { GridActionsCell };

package/legacy/components/containers/GridRootStyles.js

@@ -82,7 +82,9 @@ export var GridRootStyles = styled('div', {
     minWidth: 0,
     flex: 1,
     whiteSpace: 'nowrap',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    // to anchor the aggregation label
+    position: 'relative'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderTitleContainerContent), {
     overflow: 'hidden',
     display: 'flex',

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export var gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/legacy/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -9,10 +9,7 @@ import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from './gridColumnGroupsUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { gridColumnFieldsSelector,
-// GridColumnsState,
-gridVisibleColumnFieldsSelector } from '../columns';
-import { useGridSelector } from '../../utils/useGridSelector';
+import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from '../columns';
 var createGroupLookup = function createGroupLookup(columnGroupingModel) {
   var groupLookup = {};
   columnGroupingModel.forEach(function (node) {
@@ -100,19 +97,15 @@ export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props)
       });
     });
   }, [apiRef, props.columnGroupingModel]);
-  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
-  var columnFields = useGridSelector(apiRef, gridColumnFieldsSelector);
-  var visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
-  /**
-   * EFFECTS
-   */
-  React.useEffect(function () {
-    var _props$experimentalFe2, _props$columnGrouping4, _props$columnGrouping5;
+  var updateColumnGroupingState = React.useCallback(function (columnGroupingModel) {
+    var _props$experimentalFe2;
     if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.columnGrouping)) {
       return;
     }
-    var groupLookup = createGroupLookup((_props$columnGrouping4 = props.columnGroupingModel) != null ? _props$columnGrouping4 : []);
-    var unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping5 = props.columnGroupingModel) != null ? _props$columnGrouping5 : []);
+    var columnFields = gridColumnFieldsSelector(apiRef);
+    var visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
+    var groupLookup = createGroupLookup(columnGroupingModel != null ? columnGroupingModel : []);
+    var unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel != null ? columnGroupingModel : []);
     var columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel);
     var maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max.apply(Math, _toConsumableArray(visibleColumnFields.map(function (field) {
       var _unwrappedGroupingMod4, _unwrappedGroupingMod5;
@@ -128,5 +121,19 @@ export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props)
         }
       });
     });
-  }, [apiRef, columnFields, visibleColumnFields, props.columnGroupingModel, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
+  }, [apiRef, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
+  useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
+  useGridApiEventHandler(apiRef, 'columnsChange', function () {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', function () {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(function () {
+    updateColumnGroupingState(props.columnGroupingModel);
+  }, [updateColumnGroupingState, props.columnGroupingModel]);
 };

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v6.2.1
+ * @mui/x-data-grid v6.3.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the