@mui/x-data-grid-pro 6.13.0 → 6.15.0

package/CHANGELOG.md

@@ -3,6 +3,166 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.15.0
+
+_Sep 22, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Implement columns auto-sizing (#10180) @romgrk
+- 🎁 Add support for `getRowsToExport` option to print export on the data grid (#10084) @zreecespieces
+- 🌍 Improve Finnish (fi-FI) locale
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.15.0`
+
+- [DataGrid] Add support for `getRowsToExport` option to print export (#10084) @zreecespieces
+- [DataGrid] Fix dev warning about `InputLabelProps` (#10413) @romgrk
+- [DataGrid] Refactor `GridMenu` prop `onClickAway` to `onClose` (#10411) @romgrk
+- [DataGrid] Restore focus after `GridMenu` closes (#10412) @romgrk
+- [DataGrid] Fix typing of `GridActionsCellItem` (#10344) @romgrk
+- [DataGrid] Hide `eval` from bundlers (#10329) @romgrk
+- [DataGrid] Add `border: 0` to unmounted focused cell to avoid layout shifts in that row (#10318) @lauri865
+
+#### `@mui/x-data-grid-pro@6.15.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.15.0`, plus:
+
+- [DataGridPro] Implement columns auto-sizing (#10180) @romgrk
+- [DataGridPro] Fix keyboard navigation issue in header filters (#10358) @MBilalShafi
+- [DataGridPro] Add missing row hover styles (#10252) @cherniavskii
+- [DataGridPro] Make default filter items have stable references in header filters (#10338) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@6.15.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.15.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.15.0`
+
+- [pickers] Support tokens without spaces (#10185) @alexfauquette
+- [l10n] Improve Finnish (fi-FI) locale (#10346) @samijouppila
+
+#### `@mui/x-date-pickers-pro@6.15.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.15.0`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.12`
+
+- [charts] Fix sparkline scale and rendering (#10402) @alexfauquette
+- [charts] Remove components from `@mui/material` (#10115) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@6.0.0-alpha.4`
+
+- [TreeView] Split features into plugins to prepare for Pro version (#10123) @flaviendelangle
+
+### Docs
+
+- [docs] Add charts documentation pages to complete pricing table (#10394) @alexfauquette
+- [docs] Add missing MIT packages on the Licensing page (#10348) @flaviendelangle
+- [docs] Clearer component pattern @oliviertassinari
+- [docs] Easier to understand demo (#10370) @oliviertassinari
+- [docs] Fix `301` to Material UI @oliviertassinari
+- [docs] Improve the column visibility section (#10327) @MBilalShafi
+- [docs] Improve the documentation section `rowIdentifier` (#10326) @MBilalShafi
+- [docs] Improve pickers localization documentation (#10202) @flaviendelangle
+- [docs] Polish typescript ref usage (#10359) @oliviertassinari
+- [docs] Improve charts tooltip wording (#10406) @alexfauquette
+
+### Core
+
+- [core] Cleanup GitHub issues template (#10372) @romgrk
+- [core] Fix Circle CI OOM (#10385) @romgrk
+- [core] Improve sleep test helper @oliviertassinari
+- [core] Remove unwanted prefixes @oliviertassinari
+- [core] Remove duplicate label @oliviertassinari
+- [core] Simplify source @oliviertassinari
+- [core] Upgrade monorepo (#10425) @cherniavskii
+- [core] Upgrade monorepo to have the new typescript-to-proptype (#10224) @flaviendelangle
+- [test] Do not use deprecated adapter methods (#10416) @flaviendelangle
+- [test] Name test suites according to sentence case (#10429) @alexfauquette
+
+## 6.14.0
+
+_Sep 14, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Fix `YearCalendar` and `MonthCalendar` accessibility (#10312) @LukasTy
+
+  The `YearCalendar` and `MonthCalendar` items role has been changed from `button` to `radio` in order to improve the component's a11y support.
+  If you were relying on the mentioned components having a `button` role for items, you will need to update your usage to expect a `radio` role instead.
+
+- 🌍 Improve Japanese (ja-JP), Persian (fa-IR), and Vietnamese (vi-VN) locales on the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.14.0`
+
+- [l10n] Improve Japanese (ja-JP) locale (#10299) @makoto14
+- [l10n] Improve Persian (fa-IR) locale (#10277) @aminsaedi
+- [l10n] Improve Vietnamese (vi-VN) locale (#10280) @khangnguyen2100
+
+#### `@mui/x-data-grid-pro@6.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.14.0`.
+
+#### `@mui/x-data-grid-premium@6.14.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.14.0`, plus:
+
+- [DataGridPremium] Fix clipboard import cutting off at 100 rows (#9930) @gitstart
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.14.0`
+
+- [pickers] Fix `YearCalendar` and `MonthCalendar` a11y (#10312) @LukasTy
+- [pickers] Localize `TimeClock` meridiem text (#10324) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.14.0`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.11`
+
+- [charts] Add default `barGapRatio` and increase `categoryGapRatio` (#10317) @LukasTy
+- [charts] Enable `eslint` on the package (#10330) @LukasTy
+
+### Tree View / `@mui/x-tree-view@6.0.0-alpha.3`
+
+- [TreeView] Fix box-sizing dependency (#10255) @oliviertassinari
+
+### Docs
+
+- [docs] Add conditional range picker props example (#10227) @LukasTy
+- [docs] Add toolbar to the multi-filters demo (#10223) @MBilalShafi
+- [docs] Avoid the use of "We" @oliviertassinari
+- [docs] Clarify MUI vs. MUI Core difference @oliviertassinari
+- [docs] Enable `ariaV7` flag for demos using `useDemoData` hook (#10204) @cherniavskii
+- [docs] Fix Tree View link to API references (#10282) @oliviertassinari
+- [docs] Fix image layout shift (#10313) @oliviertassinari
+- [docs] Fix link to MUI X from readme logo @oliviertassinari
+- [docs] Fix redirection to Base UI URLs @oliviertassinari
+- [docs] Improve Tree View demos (#10268) @oliviertassinari
+- [docs] Improve docs for ref type props (#10273) @michelengelen
+- [docs] Improve npm package README (#10269) @oliviertassinari
+- [docs] Improve the clarity of the npm links @oliviertassinari
+- [docs] Keep installation readme simple @oliviertassinari
+- [docs] Make each component feel more standalone @oliviertassinari
+
+### Core
+
+- [core] Add types extension for clarity @oliviertassinari
+- [core] Set logo height to fix layout shift in GitHub @oliviertassinari
+- [core] TrapFocus was renamed to FocusTrap @oliviertassinari
+
 ## 6.13.0
 
 _Sep 8, 2023_
@@ -12,6 +172,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - 🎁 Fix `anchorRef` behavior on range pickers (#10077) @LukasTy
 
   The range picker popup will now be anchored to the first input element and left aligned like other pickers.
+
 - 🌍 Improve Slovak (sk-SK) locale on the data grid
 - 🐞 Bugfixes
 - 📚 Documentation improvements
@@ -1838,7 +1999,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 #### Changes
 
 - [DataGrid] Add interface for `singleSelect` column (#7685) @m4theushw
-- [DataGrid] Allow to pass props to the `TrapFocus` inside the panel wrapper (#7733) @ivek-Prajapatii
+- [DataGrid] Allow to pass props to the `FocusTrap` inside the panel wrapper (#7733) @ivek-Prajapatii
 - [DataGrid] Avoid unnecessary rerenders after `updateRows` (#7857) @cherniavskii
 - [DataGridPro] Change cursor when dragging a column (#7725) @sai6855
 - [DataGridPremium] Fix `leafField` to have correct focus value (#7950) @MBilalShafi

package/DataGridPro/DataGridPro.js

@@ -69,6 +69,21 @@ DataGridProRaw.propTypes = {
    * @default false
    */
   autoPageSize: PropTypes.bool,
+  /**
+   * If `true`, columns are autosized after the datagrid is mounted.
+   * @default false
+   */
+  autosizeOnMount: PropTypes.bool,
+  /**
+   * The options for autosize when user-initiated.
+   */
+  autosizeOptions: PropTypes.shape({
+    columns: PropTypes.arrayOf(PropTypes.string),
+    expand: PropTypes.bool,
+    includeHeaders: PropTypes.bool,
+    includeOutliers: PropTypes.bool,
+    outliersFactor: PropTypes.number
+  }),
   /**
    * Controls the modes of the cells.
    */
@@ -148,6 +163,11 @@ DataGridProRaw.propTypes = {
    * The row ids to show the detail panel.
    */
   detailPanelExpandedRowIds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired),
+  /**
+   * If `true`, column autosizing on header separator double-click is disabled.
+   * @default false
+   */
+  disableAutosize: PropTypes.bool,
   /**
    * If `true`, the filtering will only be applied to the top level rows when grouping rows with the `treeData` prop.
    * @default false

package/DataGridPro/useDataGridProComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
@@ -54,6 +54,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
+  useGridInitializeState(virtualizationStateInitializer, apiRef, props);
   useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef);
   useGridKeyboardNavigation(apiRef, props);
@@ -87,5 +88,6 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridDimensions(apiRef, props);
   useGridEvents(apiRef, props);
   useGridStatePersistence(apiRef);
+  useGridVirtualization(apiRef, props);
   return apiRef;
 };

package/DataGridPro/useDataGridProProps.js

@@ -12,6 +12,8 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   scrollEndThreshold: 80,
   treeData: false,
   defaultGroupingExpansionDepth: 0,
+  autosizeOnMount: false,
+  disableAutosize: false,
   disableColumnPinning: false,
   keepColumnPositionIfDraggedOutside: false,
   disableChildrenFiltering: false,

package/README.md

@@ -1,18 +1,14 @@
-# @mui/x-data-grid-pro
+# MUI X Data Grid Pro
 
 This package is the Pro plan edition of the data grid component.
-It's part of MUI X, an open core extension of MUI, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
 
 ## Installation
 
 Install the package in your project directory with:
 
 ```bash
-// with npm
 npm install @mui/x-data-grid-pro
-
-// with yarn
-yarn add @mui/x-data-grid-pro
 ```
 
 This component has the following peer dependencies that you will need to install as well.
@@ -28,4 +24,4 @@ This component has the following peer dependencies that you will need to install
 
 ## Documentation
 
-[The documentation](https://mui.com/x/react-data-grid/)
+Visit [https://mui.com/x/react-data-grid/](https://mui.com/x/react-data-grid/) to view the full documentation.

package/components/GridColumnHeaders.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["style", "className", "innerRef", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence", "pinnedColumns"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { refType, unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { styled, alpha, useTheme } from '@mui/material/styles';
 import { getDataGridUtilityClass, gridClasses, useGridApiEventHandler, GridColumnHeaderSeparatorSides } from '@mui/x-data-grid';
 import { GridBaseColumnHeaders, GridColumnHeadersInner } from '@mui/x-data-grid/internals';
@@ -271,9 +271,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
   filterColumnLookup: PropTypes.object.isRequired,
   hasOtherElementInTabSequence: PropTypes.bool.isRequired,
   headerGroupingMaxDepth: PropTypes.number.isRequired,
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  innerRef: refType,
   minColumnIndex: PropTypes.number,
   pinnedColumns: PropTypes.shape({
     left: PropTypes.arrayOf(PropTypes.string),

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -130,7 +130,7 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [apiRef, colDef.field]);
   const onMouseDown = React.useCallback(event => {
     if (!hasFocus) {
-      if (inputRef.current) {
+      if (inputRef.current && inputRef.current.contains(event.target)) {
         inputRef.current.focus();
       }
       apiRef.current.setColumnHeaderFilterFocus(colDef.field, event);
@@ -172,7 +172,21 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
         inputRef: inputRef,
         applyValue: applyFilterChanges,
         onFocus: () => apiRef.current.startHeaderFilterEditMode(colDef.field),
-        onBlur: () => apiRef.current.stopHeaderFilterEditMode(),
+        onBlur: event => {
+          var _event$relatedTarget;
+          apiRef.current.stopHeaderFilterEditMode();
+          // Blurring an input element should reset focus state only if `relatedTarget` is not the header filter cell
+          if (!((_event$relatedTarget = event.relatedTarget) != null && _event$relatedTarget.className.includes('columnHeader'))) {
+            apiRef.current.setState(state => _extends({}, state, {
+              focus: {
+                cell: null,
+                columnHeader: null,
+                columnHeaderFilter: null,
+                columnGroupHeader: null
+              }
+            }));
+          }
+        },
         label: capitalize(label),
         placeholder: "",
         isFilterActive: isFilterActive,

package/components/headerFiltering/GridHeaderFilterMenu.js

@@ -35,7 +35,7 @@ function GridHeaderFilterMenu({
     placement: "bottom-end",
     open: open,
     target: target,
-    onClickAway: hideMenu,
+    onClose: hideMenu,
     onExited: hideMenu,
     children: /*#__PURE__*/_jsx(MenuList, {
       "aria-labelledby": labelledBy,

package/components/headerFiltering/GridHeaderFilterMenuContainer.js

@@ -4,7 +4,7 @@ const _excluded = ["operators", "item", "field", "buttonRef", "headerFilterMenuR
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useGridApiContext } from '@mui/x-data-grid';
-import { unstable_useId as useId } from '@mui/utils';
+import { refType, unstable_useId as useId } from '@mui/utils';
 import { unstable_gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -70,9 +70,7 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterMenuContainer.propTypes
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   applyFilterChanges: PropTypes.func.isRequired,
-  buttonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.object
-  })]),
+  buttonRef: refType,
   field: PropTypes.string.isRequired,
   headerFilterMenuRef: PropTypes.shape({
     current: PropTypes.object

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -26,6 +26,7 @@ const GridHeaderFilterRow = styled('div', {
 })(() => ({
   display: 'flex'
 }));
+const filterItemsCache = Object.create(null);
 export const useGridColumnHeaders = props => {
   const apiRef = useGridPrivateApiContext();
   const {
@@ -53,6 +54,22 @@ export const useGridColumnHeaders = props => {
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight) + (disableHeaderFiltering ? 0 : headerHeight);
   const columnHeaderFilterFocus = useGridSelector(apiRef, unstable_gridFocusColumnHeaderFilterSelector);
+  const getFilterItem = React.useCallback(colDef => {
+    const filterModelItem = filterModel == null ? void 0 : filterModel.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf');
+    if (filterModelItem != null) {
+      // there's a valid `filterModelItem` for this column
+      return filterModelItem;
+    }
+    const defaultCachedItem = filterItemsCache[colDef.field];
+    if (defaultCachedItem != null) {
+      // there's a cached `defaultItem` for this column
+      return defaultCachedItem;
+    }
+    // there's no cached `defaultItem` for this column, let's generate one and cache it
+    const defaultItem = getGridFilter(colDef);
+    filterItemsCache[colDef.field] = defaultItem;
+    return defaultItem;
+  }, [filterModel]);
   const getColumnFilters = (params, other = {}) => {
     if (disableHeaderFiltering) {
       return null;
@@ -67,7 +84,7 @@ export const useGridColumnHeaders = props => {
     } = columnsToRender;
     const filters = [];
     for (let i = 0; i < renderedColumns.length; i += 1) {
-      var _colDef$filterOperato, _colDef$filterOperato2, _filterModel$items$fi, _rootProps$slotProps;
+      var _colDef$filterOperato, _colDef$filterOperato2, _rootProps$slotProps;
       const colDef = renderedColumns[i];
       const columnIndex = firstColumnToRender + i;
       const hasFocus = (columnHeaderFilterFocus == null ? void 0 : columnHeaderFilterFocus.field) === colDef.field;
@@ -81,7 +98,7 @@ export const useGridColumnHeaders = props => {
 
       // TODO: Support for `isAnyOf` operator
       const filterOperators = (_colDef$filterOperato = (_colDef$filterOperato2 = colDef.filterOperators) == null ? void 0 : _colDef$filterOperato2.filter(operator => operator.value !== 'isAnyOf')) != null ? _colDef$filterOperato : [];
-      const item = (_filterModel$items$fi = filterModel == null ? void 0 : filterModel.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf')) != null ? _filterModel$items$fi : getGridFilter(colDef);
+      const item = getFilterItem(colDef);
       filters.push( /*#__PURE__*/_jsx(rootProps.slots.headerFilterCell, _extends({
         colIndex: columnIndex,
         height: headerHeight,

package/hooks/features/columnPinning/useGridColumnPinning.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
-import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, gridClasses, useGridApiMethod, useGridApiEventHandler, gridColumnFieldsSelector } from '@mui/x-data-grid';
+import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, useGridApiMethod, useGridApiEventHandler, gridColumnFieldsSelector } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GridPinnedPosition } from './gridColumnPinningInterface';
 import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
@@ -33,49 +33,6 @@ export const useGridColumnPinning = (apiRef, props) => {
   var _props$initialState4;
   const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
   const theme = useTheme();
-  // Each visible row (not to be confused with a filter result) is composed of a central .MuiDataGrid-row element
-  // and up to two additional .MuiDataGrid-row's, one for the columns pinned to the left and another
-  // for those on the right side. When hovering any of these elements, the :hover styles are applied only to
-  // the row element that was actually hovered, not its additional siblings. To make it look like a contiguous row,
-  // this method adds/removes the .Mui-hovered class to all of the row elements inside one visible row.
-  const updateHoveredClassOnSiblingRows = React.useCallback(event => {
-    var _pinnedColumns$left$l, _pinnedColumns$left, _pinnedColumns$right$, _pinnedColumns$right;
-    if (props.disableColumnPinning) {
-      return;
-    }
-    if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
-      return;
-    }
-    const nbLeftPinnedColumns = (_pinnedColumns$left$l = (_pinnedColumns$left = pinnedColumns.left) == null ? void 0 : _pinnedColumns$left.length) != null ? _pinnedColumns$left$l : 0;
-    const nbRightPinnedColumns = (_pinnedColumns$right$ = (_pinnedColumns$right = pinnedColumns.right) == null ? void 0 : _pinnedColumns$right.length) != null ? _pinnedColumns$right$ : 0;
-    if (nbLeftPinnedColumns + nbRightPinnedColumns === 0) {
-      return;
-    }
-    const rowContainer = apiRef.current.virtualScrollerRef.current;
-    if (!rowContainer) {
-      return;
-    }
-    const index = event.currentTarget.dataset.rowindex;
-    const rowElements = rowContainer.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.virtualScrollerRef.current) {
-        if (event.type === 'mouseenter') {
-          row.classList.add('Mui-hovered');
-        } else {
-          row.classList.remove('Mui-hovered');
-        }
-      }
-    });
-  }, [apiRef, pinnedColumns.left, pinnedColumns.right, props.disableColumnPinning]);
-  const handleMouseEnter = React.useCallback((params, event) => {
-    updateHoveredClassOnSiblingRows(event);
-  }, [updateHoveredClassOnSiblingRows]);
-  const handleMouseLeave = React.useCallback((params, event) => {
-    updateHoveredClassOnSiblingRows(event);
-  }, [updateHoveredClassOnSiblingRows]);
-  useGridApiEventHandler(apiRef, 'rowMouseEnter', handleMouseEnter);
-  useGridApiEventHandler(apiRef, 'rowMouseLeave', handleMouseLeave);
 
   /**
    * PRE-PROCESSING

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

@@ -0,0 +1,44 @@
+import { GridColDef } from '@mui/x-data-grid';
+export declare const DEFAULT_GRID_AUTOSIZE_OPTIONS: {
+    includeHeaders: boolean;
+    includeOutliers: boolean;
+    outliersFactor: number;
+    expand: boolean;
+};
+export type GridAutosizeOptions = {
+    /**
+     * The columns to autosize. By default, applies to all columns.
+     */
+    columns?: GridColDef['field'][];
+    /**
+     * If true, include the header widths in the calculation.
+     * @default false
+     */
+    includeHeaders?: boolean;
+    /**
+     * If true, width outliers will be ignored.
+     * @default false
+     */
+    includeOutliers?: boolean;
+    /**
+     * The IQR factor range to detect outliers.
+     * @default 1.5
+     */
+    outliersFactor?: number;
+    /**
+     * If the total width is less than the available width, expand columns to fill it.
+     * @default false
+     */
+    expand?: boolean;
+};
+/**
+ * The Resize API interface that is available in the grid `apiRef`.
+ */
+export interface GridColumnResizeApi {
+    /**
+     * Auto-size the columns of the grid based on the cells' content and the space available.
+     * @param {GridAutosizeOptions} options The autosizing options
+     * @returns {Promise} A promise that resolves when autosizing is completed
+     */
+    autosizeColumns: (options?: GridAutosizeOptions) => Promise<void>;
+}

package/hooks/features/columnResize/gridColumnResizeApi.js

@@ -0,0 +1,10 @@
+export const DEFAULT_GRID_AUTOSIZE_OPTIONS = {
+  includeHeaders: true,
+  includeOutliers: false,
+  outliersFactor: 1.5,
+  expand: false
+};
+
+/**
+ * The Resize API interface that is available in the grid `apiRef`.
+ */

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

@@ -1,2 +1,3 @@
 export * from './columnResizeSelector';
 export * from './columnResizeState';
+export * from './gridColumnResizeApi';

package/hooks/features/columnResize/index.js

@@ -1,2 +1,3 @@
 export * from './columnResizeSelector';
-export * from './columnResizeState';
+export * from './columnResizeState';
+export * from './gridColumnResizeApi';

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

@@ -7,4 +7,4 @@ export declare const columnResizeStateInitializer: GridStateInitializer;
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
-export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, 'onColumnResize' | 'onColumnWidthChange'>) => void;
+export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, 'autosizeOptions' | 'autosizeOnMount' | 'disableAutosize' | 'onColumnResize' | 'onColumnWidthChange'>) => void;