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

package/CHANGELOG.md

@@ -3,6 +3,217 @@
 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.14
+
+_Jan 5, 2023_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 📆 Add `SingleInputTimeRangeField` and `SingleInputDateTimeRangeField` components (#7186) @alexfauquette
+- 🚀 Use grid for modifying pickers layout (#6900) @alexfauquette
+- ✨ Improve field components editing experience (#7272) @flaviendelangle
+- 💻 Multiple codemods
+- 📚 Many documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.14` / `@mui/x-data-grid-pro@v6.0.0-alpha.14` / `@mui/x-data-grid-premium@v6.0.0-alpha.14`
+
+#### Breaking changes
+
+- [DataGrid] Set default `GridCellParams['value']` type to `unknown` (#6959) @cherniavskii
+
+  The default type of `GridCellParams['value']` was changed from `any` to `unknown`.
+
+#### Changes
+
+- [DataGrid] Fix flickering on mount (#7205) @cherniavskii
+- [DataGrid] Fix selected text in cell input not being copied in Firefox (#6593) @cherniavskii
+- [DataGrid] Invert generic parameters order (#6874) @DanailH
+- [DataGrid] Remove legacy logic for `singleSelect` inside `GridFilterInputValue` (#7386) @m4theushw
+- [DataGrid] Remove remaining props from legacy editing API (#7381) @m4theushw
+- [DataGrid] Set default `GridCellParams['value']` type to `unknown` (#6959) @cherniavskii
+
+### `@mui/x-date-pickers@v6.0.0-alpha.14` / `@mui/x-date-pickers-pro@v6.0.0-alpha.14`
+
+#### Breaking changes
+
+- [fields] Rename the `input` slot of the fields to `textField` to avoid confusion (#7369) @flaviendelangle
+
+#### Changes
+
+- [fields] Add `SingleInputTimeRangeField` and `SingleInputDateTimeRangeField` components (#7186) @alexfauquette
+- [fields] Improve editing (automatic section switch, allow letter editing in digit section, allow numeric editing in letter section) (#7272) @flaviendelangle
+- [fields] Rename the `input` slot of the fields to `textField` to avoid confusion (#7369) @flaviendelangle
+- [fields] Prevent date change on `TimeField` arrow edition (#7383) @flaviendelangle
+- [pickers] Clean some JSDoc descriptions (#7384) @flaviendelangle
+- [pickers] Remove redundant `variants` in theme augmentation (#7356) @LukasTy
+- [pickers] Remove the `PaperContent` slot from the new pickers (#7342) @flaviendelangle
+- [pickers] Use grid for modifying the layout (#6900) @alexfauquette
+
+### `@mui/x-codemod@v6.0.0-alpha.14`
+
+#### Changes
+
+- [codemod] Add new codemod for adapter import (#7348) @flaviendelangle
+- [codemod] Add new codemod for the value prop renaming on the view components (#7338) @flaviendelangle
+- [codemod] Reorganize codemods and add rename column menu components codemod (#7368) @MBilalShafi
+
+### Docs
+
+- [docs] Add example to add back the mobile keyboard view (#7347) @flaviendelangle
+- [docs] Cleanup the doc pages of the community pickers (#7339) @flaviendelangle
+- [docs] Drop security fixes support for v4 (#7322) @oliviertassinari
+- [docs] Fix `disablePast` and `disableFuture` definition swap (#7324) @alexfauquette
+- [docs] Hide ad for paid docs pages (#7321) @oliviertassinari
+- [docs] New page for `TimeClock` (#7280) @flaviendelangle
+- [docs] Note the pickers breaking changes supported by the codemod (#7337) @flaviendelangle
+- [docs] Redirect translated pages (#7341) @cherniavskii
+- [docs] Reorganize v6 pickers migration guide (#7257) @flaviendelangle
+
+### Core
+
+- [core] Apply eslint rule for React component @oliviertassinari
+- [core] Apply title capitalization convention @oliviertassinari
+- [core] Fix the product license reference name (#7367) @oliviertassinari
+- [core] Order the slots alphabetically in the JSON files (#7349) @flaviendelangle
+- [core] Remove blanklines in `_redirects` @oliviertassinari
+- [core] Remove dead prettier config @oliviertassinari
+- [core] Sync back with the mono repo (#7351) @oliviertassinari
+- [core] Sync monorepo, fix layout scrollbar @oliviertassinari
+- [core] Upgrade monorepo (#7307) @LukasTy
+
+## 6.0.0-alpha.13
+
+_Dec 24, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 New column menu design and API
+- 🌍 Improve Russian (ru-RU) and Korean (ko-KR) locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@6.0.0-alpha.13` / `@mui/x-data-grid-pro@6.0.0-alpha.13` / `@mui/x-data-grid-premium@6.0.0-alpha.13`
+
+#### Breaking changes
+
+- New column menu design and API (#6619) MBilalShafi
+
+  The `currentColumn` prop passed to `components.ColumnMenu` was renamed to `colDef`.
+  The `column` prop passed to the items of the column menu was renamed to `colDef`.
+  The `DATA_GRID_DEFAULT_SLOTS_COMPONENTS` export has been removed.
+  The following components and interfaces were been renamed for consistency:
+
+  **Community Package:**
+
+  ```diff
+  -<GridFilterMenuItem />
+  +<GridColumnMenuFilterItem />
+  ```
+
+  ```diff
+  -<HideGridColMenuItem />
+  +<GridColumnMenuHideItem />
+  ```
+
+  ```diff
+  -<GridColumnsMenuItem />
+  +<GridColumnMenuColumnsItem />
+  ```
+
+  ```diff
+  -<SortGridMenuItems />
+  +<GridColumnMenuSortItem />
+  ```
+
+  ```diff
+  -interface GridFilterItemProps
+  +interface GridColumnMenuItemProps
+  ```
+
+  **Pro package:**
+
+  ```diff
+  -<GridColumnPinningMenuItems />
+  +<GridColumnMenuPinningItem />
+  ```
+
+  **Premium package:**
+
+  ```diff
+  -<GridAggregationColumnMenuItem />
+  +<GridColumnMenuAggregationItem />
+  ```
+
+  ```diff
+  -<GridRowGroupingColumnMenuItems />
+  -<GridRowGroupableColumnMenuItems />
+  +<GridColumnMenuGroupingItem />
+  ```
+
+- Improve column definition typing (#7224) @cherniavskii
+
+  The `GridColumns` type was removed. Use `GridColDef[]` instead.
+  The `GridActionsColDef` interface was removed. Use `GridColDef` instead.
+  The `GridEnrichedColDef` type was removed. Use `GridColDef` instead.
+  The `GridStateColDef` type was removed.
+
+    If you use it to type `searchPredicate`, use `GridColumnsPanelProps['searchPredicate']` instead.
+    If you use it to type `getApplyFilterFn`, `GridFilterOperator['getApplyFilterFn']` can be used as replacement.
+
+- Remove GridDensityType enum (#7304) @cherniavskii
+
+  The `GridDensityTypes` enum was removed. Use `GridDensity` type instead.
+
+#### Changes
+
+- [DataGrid] Allow disabling of buttons in column panel (#6947) @MBilalShafi
+- [DataGrid] Improve column definition typing (#7224) @cherniavskii
+- [DataGrid] Improve column menu design and API (#6619) @MBilalShafi
+- [DataGrid] Remove `GridDensityType` enum (#7304) @cherniavskii
+- [DataGrid] Remove `rowHeight` and `headerHeight` from state (#7199) @DanailH
+- [DataGrid] Remove column separator to match table styles (#7067) @MBilalShafi
+- [DataGrid] Update Russian (ru-RU) locale (#7220) @VeceluXa
+- [DataGridPro] Use row ID as `key` of the detail panels (#7302) @m4theushw
+- [DataGridPremium] Fix `exceljs` import with parcel (#7284) @alexfauquette
+
+### `@mui/x-date-pickers@6.0.0-alpha.13` / `@mui/x-date-pickers-pro@6.0.0-alpha.13`
+
+#### Breaking changes
+
+- Require Luxon 3.0.2 or higher (#7249) @flaviendelangle
+
+  `AdapterLuxon` now requires `luxon` in version `3.0.2` or higher in order to work.
+
+  Take a look at the [Upgrading Luxon](https://moment.github.io/luxon/#/upgrading) guide if you are using an older version.
+
+#### Changes
+
+- [DateRangePicker] Fix to propagate `disabled` and `readOnly` on multi input picker (#7135) @LukasTy
+- [fields] Fix multi input fields root element props order and types (#7225) @LukasTy
+- [fields] Support escaped characters (#7184) @flaviendelangle
+- [pickers] Allow to define custom view renderers on the pickers (#7176) @flaviendelangle
+- [pickers] Avoid running validation methods several times in `DateCalendar` (#7247) @flaviendelangle
+- [pickers] Improve Korean (ko-KR) locale (#7266) @hanbin9775
+- [pickers] Require Luxon 3.0.2 or higher (#7249) @flaviendelangle
+- [pickers] Rework view internals (#7097) @flaviendelangle
+
+### `@mui/x-codemod@6.0.0-alpha.13`
+
+#### Changes
+
+- [codemod] New codemod for view component renaming (#7264) @flaviendelangle
+
+### Docs
+
+- [docs] Fix some selectors not being documented (#7218) @cherniavskii
+- [docs] New page for `DateCalendar` (#7053) @flaviendelangle
+- [docs] Split selection docs (#7213) @m4theushw
+
+### Core
+
+- [core] Fix API demos callout spacing @oliviertassinari
+
 ## 6.0.0-alpha.12
 
 _Dec 16, 2022_
@@ -1375,6 +1586,61 @@ 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.18
+
+_Jan 5, 2023_
+
+We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.18` / `@mui/x-data-grid-pro@v5.17.18` / `@mui/x-data-grid-premium@v5.17.18`
+
+#### Changes
+
+- [DataGrid] Fix rows not rendering properly after height change (#7376) @cherniavskii
+- [DataGrid] Fix selected text in cell input not being copied in Firefox (#7330) @cherniavskii
+- [DataGridPremium] Export row grouping column menu components (#7308) @cherniavskii
+
+### `@mui/x-date-pickers@v5.0.13` / `@mui/x-date-pickers-pro@v5.0.13`
+
+#### Changes
+
+- [pickers] Fix the product license reference name (#7367)
+
+### Docs
+
+- [docs] Redirect translated pages (#7370) @cherniavskii
+
+### Core
+
+- [core] Fix release date (#7314) @DanailH
+- [core] Fix the product license reference name (#7367) @oliviertassinari
+- [core] Upgrade monorepo (#7344) @cherniavskii
+
+## 5.17.17
+
+_Dec 24, 2022_
+
+We'd like to offer a big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Russian (ru-RU) and Korean (ko-KR) locales
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.17` / `@mui/x-data-grid-pro@v5.17.17` / `@mui/x-data-grid-premium@v5.17.17`
+
+#### Changes
+
+- [DataGrid] Update Russian (ru-RU) locale (#7291) @VeceluXa
+- [DataGridPro] Use row ID as `key` of the detail panels (#7311) @m4theushw
+- [DataGridPremium] Fix `exceljs` import with parcel (#7285) @alexfauquette
+
+### `@mui/x-date-pickers@v5.0.12` / `@mui/x-date-pickers-pro@v5.0.12`
+
+#### Changes
+
+- [pickers] Improve Korean (ko-KR) locale (#7283) @hanbin9775
+
 ## 5.17.16
 
 _Dec 16, 2022_

package/DataGridPremium/DataGridPremium.js

@@ -112,7 +112,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   columnBuffer: PropTypes.number,
   columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
   /**
-   * Set of columns of type [[GridColumns]].
+   * Set of columns of type [[GridColDef[]]].
    */
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
@@ -242,10 +242,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default "cell"
    */
   editMode: PropTypes.oneOf(['cell', 'row']),
-  /**
-   * Set the edit rows model of the grid.
-   */
-  editRowsModel: PropTypes.object,
   /**
    * An error that will turn the grid into its error state and display the error component.
    */
@@ -578,12 +574,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onDetailPanelExpandedRowIdsChange: PropTypes.func,
-  /**
-   * Callback fired when the `editRowsModel` changes.
-   * @param {GridEditRowsModel} editRowsModel With all properties from [[GridEditRowsModel]].
-   * @param {GridCallbackDetails} details Additional details for this callback.
-   */
-  onEditRowsModelChange: PropTypes.func,
   /**
    * Callback fired when an exception is thrown in the grid.
    * @param {any} args The arguments passed to the `showError` call.

package/DataGridPremium/useDataGridPremiumProps.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { DATA_GRID_PRO_PROPS_DEFAULT_VALUES, DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT } from '@mui/x-data-grid-pro';
+import { DATA_GRID_PRO_PROPS_DEFAULT_VALUES, GRID_DEFAULT_LOCALE_TEXT } from '@mui/x-data-grid-pro';
 import { GRID_AGGREGATION_FUNCTIONS } from '../hooks/features/aggregation';
+import { DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS } from '../constants/dataGridPremiumDefaultSlotsComponents';
 
 /**
  * The default values of `DataGridPremiumPropsWithDefaultValue` to inject in the props of DataGridPremium.
@@ -25,10 +26,10 @@ export const useDataGridPremiumProps = inProps => {
   const components = React.useMemo(() => {
     const overrides = themedProps.components;
     if (!overrides) {
-      return _extends({}, DATA_GRID_DEFAULT_SLOTS_COMPONENTS);
+      return _extends({}, DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS);
     }
     const mergedComponents = {};
-    Object.entries(DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => {
+    Object.entries(DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => {
       mergedComponents[key] = overrides[key] === undefined ? defaultComponent : overrides[key];
     });
     return mergedComponents;

package/components/GridAggregationHeader.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { getDataGridUtilityClass, gridClasses, GridColumnHeaderTitle, gridDensityHeaderHeightSelector, useGridSelector } from '@mui/x-data-grid';
+import { getDataGridUtilityClass, gridClasses, GridColumnHeaderTitle } from '@mui/x-data-grid';
 import { getAggregationFunctionLabel } from '../hooks/features/aggregation/gridAggregationUtils';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -57,10 +57,8 @@ function GridAggregationHeader(props) {
   } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
   const ownerState = {
     classes: rootProps.classes,
-    headerHeight,
     colDef
   };
   const classes = useUtilityClasses(ownerState);

package/components/GridColumnMenuAggregationItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
+declare function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps): JSX.Element;
+declare namespace GridColumnMenuAggregationItem {
+    var propTypes: any;
+}
+export { GridColumnMenuAggregationItem };

package/components/GridColumnMenuAggregationItem.js

@@ -0,0 +1,110 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGridSelector } from '@mui/x-data-grid-pro';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import { unstable_useId as useId } from '@mui/utils';
+import Select from '@mui/material/Select';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { canColumnHaveAggregationFunction, getAggregationFunctionLabel, getAvailableAggregationFunctions } from '../hooks/features/aggregation/gridAggregationUtils';
+import { gridAggregationModelSelector } from '../hooks/features/aggregation/gridAggregationSelectors';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function GridColumnMenuAggregationItem(props) {
+  const {
+    colDef
+  } = props;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const id = useId();
+  const aggregationModel = useGridSelector(apiRef, gridAggregationModelSelector);
+  const availableAggregationFunctions = React.useMemo(() => getAvailableAggregationFunctions({
+    aggregationFunctions: rootProps.aggregationFunctions,
+    colDef
+  }), [colDef, rootProps.aggregationFunctions]);
+  const selectedAggregationRule = React.useMemo(() => {
+    if (!colDef || !aggregationModel[colDef.field]) {
+      return '';
+    }
+    const aggregationFunctionName = aggregationModel[colDef.field];
+    if (canColumnHaveAggregationFunction({
+      colDef,
+      aggregationFunctionName,
+      aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName]
+    })) {
+      return aggregationFunctionName;
+    }
+    return '';
+  }, [rootProps.aggregationFunctions, aggregationModel, colDef]);
+  const handleAggregationItemChange = event => {
+    var _event$target;
+    const newAggregationItem = ((_event$target = event.target) == null ? void 0 : _event$target.value) || undefined;
+    const currentModel = gridAggregationModelSelector(apiRef);
+    const _colDef$field = colDef.field,
+      otherColumnItems = _objectWithoutPropertiesLoose(currentModel, [_colDef$field].map(_toPropertyKey));
+    const newModel = newAggregationItem == null ? otherColumnItems : _extends({}, otherColumnItems, {
+      [colDef == null ? void 0 : colDef.field]: newAggregationItem
+    });
+    apiRef.current.setAggregationModel(newModel);
+    apiRef.current.hideColumnMenu();
+  };
+  const label = apiRef.current.getLocaleText('aggregationMenuItemHeader');
+  return /*#__PURE__*/_jsxs(MenuItem, {
+    disableRipple: true,
+    children: [/*#__PURE__*/_jsx(ListItemIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuAggregationIcon, {
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/_jsx(ListItemText, {
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        size: "small",
+        fullWidth: true,
+        sx: {
+          minWidth: 150
+        },
+        children: [/*#__PURE__*/_jsx(InputLabel, {
+          id: `${id}-label`,
+          children: label
+        }), /*#__PURE__*/_jsxs(Select, {
+          labelId: `${id}-label`,
+          id: `${id}-input`,
+          value: selectedAggregationRule,
+          label: label,
+          color: "primary",
+          onChange: handleAggregationItemChange,
+          onBlur: e => e.stopPropagation(),
+          fullWidth: true,
+          children: [/*#__PURE__*/_jsx(MenuItem, {
+            value: "",
+            children: "..."
+          }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/_jsx(MenuItem, {
+            value: aggFunc,
+            children: getAggregationFunctionLabel({
+              apiRef,
+              aggregationRule: {
+                aggregationFunctionName: aggFunc,
+                aggregationFunction: rootProps.aggregationFunctions[aggFunc]
+              }
+            })
+          }, aggFunc))]
+        })]
+      })
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridColumnMenuAggregationItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: PropTypes.object.isRequired,
+  onClick: PropTypes.func.isRequired
+} : void 0;
+export { GridColumnMenuAggregationItem };

package/components/GridColumnMenuRowGroupItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
+declare function GridColumnMenuRowGroupItem(props: GridColumnMenuItemProps): JSX.Element | null;
+declare namespace GridColumnMenuRowGroupItem {
+    var propTypes: any;
+}
+export { GridColumnMenuRowGroupItem };

package/components/{GridRowGroupingColumnMenuItems.js → GridColumnMenuRowGroupItem.js}

@@ -1,49 +1,58 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
 import { useGridSelector, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector';
 import { getRowGroupingCriteriaFromGroupingField, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, isGroupingColumn } from '../hooks/features/rowGrouping/gridRowGroupingUtils';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
-function GridRowGroupingColumnMenuItems(props) {
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function GridColumnMenuRowGroupItem(props) {
   const {
-    column,
+    colDef,
     onClick
   } = props;
   const apiRef = useGridApiContext();
   const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
   const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
+  const rootProps = useGridRootProps();
   const renderUnGroupingMenuItem = field => {
     var _columnsLookup$field$;
     const ungroupColumn = event => {
       apiRef.current.removeRowGroupingCriteria(field);
-      if (onClick) {
-        onClick(event);
-      }
+      onClick(event);
     };
     const name = (_columnsLookup$field$ = columnsLookup[field].headerName) != null ? _columnsLookup$field$ : field;
-    return /*#__PURE__*/_jsx(MenuItem, {
+    return /*#__PURE__*/_jsxs(MenuItem, {
       onClick: ungroupColumn,
-      children: apiRef.current.getLocaleText('unGroupColumn')(name)
+      children: [/*#__PURE__*/_jsx(ListItemIcon, {
+        children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuUngroupIcon, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/_jsx(ListItemText, {
+        children: apiRef.current.getLocaleText('unGroupColumn')(name)
+      })]
     }, field);
   };
-  if (!column || !isGroupingColumn(column.field)) {
+  if (!colDef || !isGroupingColumn(colDef.field)) {
     return null;
   }
-  if (column.field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD) {
+  if (colDef.field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD) {
     return /*#__PURE__*/_jsx(React.Fragment, {
       children: rowGroupingModel.map(renderUnGroupingMenuItem)
     });
   }
-  return renderUnGroupingMenuItem(getRowGroupingCriteriaFromGroupingField(column.field));
+  return renderUnGroupingMenuItem(getRowGroupingCriteriaFromGroupingField(colDef.field));
 }
-process.env.NODE_ENV !== "production" ? GridRowGroupingColumnMenuItems.propTypes = {
+process.env.NODE_ENV !== "production" ? GridColumnMenuRowGroupItem.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  column: PropTypes.object,
-  onClick: PropTypes.func
+  colDef: PropTypes.object.isRequired,
+  onClick: PropTypes.func.isRequired
 } : void 0;
-export { GridRowGroupingColumnMenuItems };
+export { GridColumnMenuRowGroupItem };

package/components/GridColumnMenuRowUngroupItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
+declare function GridColumnMenuRowUngroupItem(props: GridColumnMenuItemProps): JSX.Element | null;
+declare namespace GridColumnMenuRowUngroupItem {
+    var propTypes: any;
+}
+export { GridColumnMenuRowUngroupItem };

package/components/GridColumnMenuRowUngroupItem.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { gridColumnLookupSelector, useGridSelector } from '@mui/x-data-grid-pro';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { gridRowGroupingSanitizedModelSelector } from '../hooks/features/rowGrouping/gridRowGroupingSelector';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function GridColumnMenuRowUngroupItem(props) {
+  var _columnsLookup$colDef;
+  const {
+    colDef,
+    onClick
+  } = props;
+  const apiRef = useGridApiContext();
+  const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
+  const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
+  const rootProps = useGridRootProps();
+  if (!colDef.groupable) {
+    return null;
+  }
+  const ungroupColumn = event => {
+    apiRef.current.removeRowGroupingCriteria(colDef.field);
+    onClick(event);
+  };
+  const groupColumn = event => {
+    apiRef.current.addRowGroupingCriteria(colDef.field);
+    onClick(event);
+  };
+  const name = (_columnsLookup$colDef = columnsLookup[colDef.field].headerName) != null ? _columnsLookup$colDef : colDef.field;
+  if (rowGroupingModel.includes(colDef.field)) {
+    return /*#__PURE__*/_jsxs(MenuItem, {
+      onClick: ungroupColumn,
+      children: [/*#__PURE__*/_jsx(ListItemIcon, {
+        children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuUngroupIcon, {
+          fontSize: "small"
+        })
+      }), /*#__PURE__*/_jsx(ListItemText, {
+        children: apiRef.current.getLocaleText('unGroupColumn')(name)
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(MenuItem, {
+    onClick: groupColumn,
+    children: [/*#__PURE__*/_jsx(ListItemIcon, {
+      children: /*#__PURE__*/_jsx(rootProps.components.ColumnMenuGroupIcon, {
+        fontSize: "small"
+      })
+    }), /*#__PURE__*/_jsx(ListItemText, {
+      children: apiRef.current.getLocaleText('groupColumn')(name)
+    })]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridColumnMenuRowUngroupItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: PropTypes.object.isRequired,
+  onClick: PropTypes.func.isRequired
+} : void 0;
+export { GridColumnMenuRowUngroupItem };

package/components/GridPremiumColumnMenu.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { GridColumnMenuProps, GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
+import { GridColumnMenuAggregationItem } from './GridColumnMenuAggregationItem';
+export declare function GridColumnMenuGroupingItem(props: GridColumnMenuItemProps): JSX.Element | null;
+export declare const GRID_COLUMN_MENU_COMPONENTS_PREMIUM: {
+    ColumnMenuAggregationItem: typeof GridColumnMenuAggregationItem;
+    ColumnMenuGroupingItem: typeof GridColumnMenuGroupingItem;
+    ColumnMenuPinningItem: typeof import("@mui/x-data-grid-pro/components/GridColumnMenuPinningItem").GridColumnMenuPinningItem;
+    ColumnMenuSortItem: typeof import("@mui/x-data-grid/components/menu/columnMenu/menuItems/GridColumnMenuSortItem").GridColumnMenuSortItem;
+    ColumnMenuFilterItem: typeof import("@mui/x-data-grid/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem").GridColumnMenuFilterItem;
+    ColumnMenuColumnsItem: typeof import("@mui/x-data-grid/components/menu/columnMenu/menuItems/GridColumnMenuColumnsItem").GridColumnMenuColumnsItem;
+};
+export declare const GRID_COLUMN_MENU_COMPONENTS_PROPS_PREMIUM: {
+    columnMenuAggregationItem: {
+        displayOrder: number;
+    };
+    columnMenuGroupingItem: {
+        displayOrder: number;
+    };
+    columnMenuPinningItem: {
+        displayOrder: number;
+    };
+    columnMenuSortItem: {
+        displayOrder: number;
+    };
+    columnMenuFilterItem: {
+        displayOrder: number;
+    };
+    columnMenuColumnsItem: {
+        displayOrder: number;
+    };
+};
+declare const GridPremiumColumnMenu: React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>>;
+export { GridPremiumColumnMenu };