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

package/CHANGELOG.md

@@ -3,6 +3,89 @@
 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_

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/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/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;