@mui/x-data-grid 6.7.0 → 6.8.0

package/CHANGELOG.md

@@ -3,6 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.8.0
+
+_Jun 16, 2023_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Greek (el-GR) locale on Pickers and improve on Data Grid
+- 🚅 Performance improvements
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@6.8.0` / `@mui/x-data-grid-pro@6.8.0` / `@mui/x-data-grid-premium@6.8.0`
+
+#### Changes
+
+- [DataGrid] Add missing styles to `overridesResolver` (#9248) @mrmuhammadali
+- [DataGrid] Keep column header menu icon always visible on touch devices (#9076) @cherniavskii
+- [DataGrid] Correct the type for single digit edited number value (#9282) @MBilalShafi
+- [DataGrid] Correct the type for single digit edited number for row edit (#9348) @MBilalShafi
+- [DataGrid] Filtering performance: cache values (#9284) @romgrk
+- [DataGrid] Fix tabbing between `actions` cells in edit mode (#9321) @md250721
+- [DataGrid] Make autocompletion work for `GridColDef['type']` (#9320) @cherniavskii
+- [DataGrid] Polish shortcut logic (#9220) @oliviertassinari
+- [DataGrid] Row reordering fix for different row heights (#7006) @yaredtsy
+- [DataGrid] Scroll performance improvements (#9037) @romgrk
+- [l10n] Improve Greek (el-GR) locale (#9292) @clytras
+
+### `@mui/x-date-pickers@6.8.0` / `@mui/x-date-pickers-pro@6.8.0`
+
+#### Changes
+
+- [l10n] Add Greek (el-GR) locale (#9293) @clytras
+- [pickers] Add a `referenceDate` prop on `DateCalendar`, `MonthCalendar` and `YearCalendar` (#9260) @flaviendelangle
+- [pickers] Close the calendar when a shortcut is selected (#9080) @flaviendelangle
+- [pickers] Fix disabling for digital clock (#9300) @alexfauquette
+
+### Docs
+
+- [docs] Add header filters to the popular features demo (#9069) @MBilalShafi
+- [docs] Fix `Date Calendar` dynamic data demo (#9290) @benzler
+- [docs] Fix Data Grid header filter link (#9225) @oliviertassinari
+- [docs] Fix missing docs version warning (#9221) @oliviertassinari
+- [docs] Improve Chart overview (#9333) @oliviertassinari
+- [docs] Improve Next.js license installation guide (#8975) @oliviertassinari
+- [docs] Link pagination documentation to the migration guide (#9296) @MBilalShafi
+- [docs] One step toward components -> slots (#9251) @oliviertassinari
+- [docs] Improve and reorganize sections on editing page (#8431) @joserodolfofreitas
+- [docs] Add clipboard paste to popular features demo (#9029) @cherniavskii
+
+### Core
+
+- [core] Polish event name (#9336) @oliviertassinari
+- [core] Re-enable `Argos` CI step (#9301) @LukasTy
+- [core] Upgrade Node.js to v18 on CircleCI, CodeSandbox and Netlify (#9319) @ZeeshanTamboli
+- [core] Upgrade Node.js v18 for l10n GitHub CI (#9355) @ZeeshanTamboli
+- [charts] Add demonstration pages based on Recharts demo (#9175) @alexfauquette
+- [charts] Add legend (#9024) @alexfauquette
+- [charts] Complete the docs to introduce charts (#9153) @alexfauquette
+- [charts] Manage elements highlights (#9242) @alexfauquette
+- [charts] Prefix subcomponents with `Charts` (#9314) @alexfauquette
+- [license] Improve annual license expiration message (#9135) @oliviertassinari
+
 ## 6.7.0
 
 _Jun 9, 2023_
@@ -17,11 +79,11 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
   <TimePicker views={['hours', 'minutes', 'seconds']} ampm />
   // Format before v6.7.0: `hh:mm aa`
   // Format after v6.7.0: `hh:mm:ss aa`
- 
+
   <DatePicker views={['year']} />
   // Format before v6.7.0: `MM/DD/YYYY`
   // Format after v6.7.0: `YYYY`
-  
+
   <DateTimePicker views={['day', 'hours', 'minutes']} ampm />
   // Format before v6.7.0: `MM/DD/YYYY hh:mm aa`
   // Format after v6.7.0: `DD hh:mm aa`
@@ -83,7 +145,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 - 🚀 New date time picking UI on [`DesktopDateTimePicker`](https://mui.com/x/react-date-pickers/date-time-picker/)
 
-  <img src="https://user-images.githubusercontent.com/4941090/242533399-2b106390-8158-4aba-9ca4-b621c6310977.gif" width="628" />
+  <img src="https://github.com/mui/mui-x/assets/3165635/4e1fe9f9-03eb-4f23-99dd-80212b21fb23" width="840" height="506" />
 
 - 🚀 Performance improvements
 - 🐞 Bugfixes
@@ -151,7 +213,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [charts] Manage series stacking (#8888) @alexfauquette
 - [license] List side effects in the license package (#9092) @cherniavskii
 
-## v6.5.0
+## 6.5.0
 
 _May 19, 2023_
 
@@ -159,9 +221,9 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 
 - 💫 Introduce filtering on column headers for `DataGridPro` and `DataGridPremium`:
 
-  https://github.com/mui/mui-x/assets/12609561/c4c2bfec-59cf-4cab-932d-dc1983081de9
+  <img src="https://github.com/mui/mui-x/releases/download/v6.5.0/recording.gif" width="840" height="506" />
 
-  See [the documentation](https://mui.com/x/react-data-grid/filtering/#header-filters) for more information
+  See [the documentation](https://mui.com/x/react-data-grid/filtering/header-filters/) for more information
 
 - 🌍 Improve Hebrew (he-IL) and Czech (cs-CZ) locales
 - 📝 Support for editing on pinned rows
@@ -207,7 +269,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [DataGrid] Memoize root props for better performance (#8942) @romgrk
 - [test] Skip flaky unit tests in JSDOM (#8994) @cherniavskii
 
-## v6.4.0
+## 6.4.0
 
 _May 12, 2023_
 
@@ -4240,7 +4302,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [docs] Revise and split up "Overview" page into "Introduction" (#4692) @samuelsycamore
 - [docs] Use `useKeepGroupedColumnsHiddren` from the grid package on remaining demo (#5382) @flaviendelangle
 
-## v5.12.3
+## 5.12.3
 
 _Jun 23, 2022_
 
@@ -4291,7 +4353,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 - [test] Throw if date adapter is not found (#5289) @cherniavskii
 - [test] Use mock for `ResizeObserver` (#5215) @m4theushw
 
-## v5.12.2
+## 5.12.2
 
 _Jun 16, 2022_
 
@@ -4334,7 +4396,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss
 - [core] Fix `GridColTypeDef` usage in demo (#5197) @cherniavskii
 - [test] Add `waitFor` before asserting height (#5203) @m4theushw
 
-## v5.12.1
+## 5.12.1
 
 _Jun 9, 2022_
 
@@ -4391,7 +4453,7 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
 - [test] Fix dynamic row height test failing on Chrome (#5147) @m4theushw
 - [test] Remove delay on server demo for regression tests (#5131) @alexfauquette
 
-## v5.12.0
+## 5.12.0
 
 _May 31, 2022_
 
@@ -4472,7 +4534,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [test] Skip Safari and Firefox on broken tests (#4994) @alexfauquette
 - [test] Make argos screenshots stable (#5061) @m4theushw
 
-## v5.11.1
+## 5.11.1
 
 _May 20, 2022_
 
@@ -4564,7 +4626,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 - [core] Simplify rows cache management (#4933) @flaviendelangle
 - [core] Use internal icons for quick filter (#4912) @alexfauquette
 
-## v5.11.0
+## 5.11.0
 
 _May 13, 2022_
 
@@ -4708,7 +4770,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [test] Reset cleanup tracking on Karma tests (#4679) @m4theushw
 - [test] Restore `sinon` sandbox after each `karma` test (#4689) @m4theushw
 
-## v5.10.0
+## 5.10.0
 
 _Apr 25, 2022_
 
@@ -4744,7 +4806,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 - [core] Fix the README of the X packages (#4590) @flaviendelangle
 - [test] Fix test to not depend on screen resolution (#4587) @m4theushw
 
-## v5.9.0
+## 5.9.0
 
 _Apr 14, 2022_
 

package/components/GridColumnHeaders.d.ts

@@ -3,5 +3,5 @@ import { UseGridColumnHeadersProps } from '../hooks/features/columnHeaders/useGr
 interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, Omit<UseGridColumnHeadersProps, 'innerRef'> {
     innerRef?: React.Ref<HTMLDivElement>;
 }
-declare const GridColumnHeaders: React.ForwardRefExoticComponent<GridColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
-export { GridColumnHeaders };
+declare const MemoizedGridColumnHeaders: React.ForwardRefExoticComponent<GridColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedGridColumnHeaders as GridColumnHeaders };

package/components/GridColumnHeaders.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { fastMemo } from '../utils/fastMemo';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
 import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
@@ -100,4 +101,5 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
   sortColumnLookup: PropTypes.object.isRequired,
   visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
 } : void 0;
-export { GridColumnHeaders };
+const MemoizedGridColumnHeaders = fastMemo(GridColumnHeaders);
+export { MemoizedGridColumnHeaders as GridColumnHeaders };

package/components/GridRow.d.ts

@@ -34,5 +34,5 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
     onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     [x: string]: any;
 }
-declare const GridRow: React.ForwardRefExoticComponent<Omit<GridRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { GridRow };
+declare const MemoizedGridRow: React.ForwardRefExoticComponent<Omit<GridRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedGridRow as GridRow };

package/components/GridRow.js

@@ -1,17 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"],
-  _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { fastMemo } from '../utils/fastMemo';
 import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
-import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
 import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 import { findParentElementFromClassName } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
@@ -21,6 +21,7 @@ import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSele
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
 import { randomNumberBetween } from '../utils/utils';
+import { GridCellWrapper, GridCellV7 } from './cell/GridCell';
 import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -67,8 +68,6 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       containerWidth,
       firstColumnToRender,
       isLastVisible = false,
-      focusedCell,
-      tabbableCell,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -183,78 +182,28 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
     slots,
     slotProps,
-    classes: rootClasses,
-    disableColumnReorder,
-    getCellClassName
+    disableColumnReorder
   } = rootProps;
+  const CellComponent = slots.cell === GridCellV7 ? GridCellV7 : GridCellWrapper;
   const rowReordering = rootProps.rowReordering;
-  const CellComponent = slots.cell;
-  const getCell = React.useCallback((column, cellProps) => {
-    const cellParams = apiRef.current.getCellParams(rowId, column.field);
-    const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
-      id: rowId,
-      field: column.field
-    });
+  const getCell = (column, cellProps) => {
+    var _editRowsState$rowId$, _editRowsState$rowId;
     const disableDragEvents = disableColumnReorder && column.disableReorder || !rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
-    if (column.cellClassName) {
-      classNames.push(clsx(typeof column.cellClassName === 'function' ? column.cellClassName(cellParams) : column.cellClassName));
-    }
-    const editCellState = editRowsState[rowId] ? editRowsState[rowId][column.field] : null;
-    let content;
-    if (editCellState == null && column.renderCell) {
-      content = column.renderCell(_extends({}, cellParams, {
-        api: apiRef.current
-      }));
-      // TODO move to GridCell
-      classNames.push(clsx(gridClasses['cell--withRenderer'], rootClasses == null ? void 0 : rootClasses['cell--withRenderer']));
-    }
-    if (editCellState != null && column.renderEditCell) {
-      const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
-
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      const editCellStateRest = _objectWithoutPropertiesLoose(editCellState, _excluded2);
-      const params = _extends({}, cellParams, {
-        row: updatedRow
-      }, editCellStateRest, {
-        api: apiRef.current
-      });
-      content = column.renderEditCell(params);
-      // TODO move to GridCell
-      classNames.push(clsx(gridClasses['cell--editing'], rootClasses == null ? void 0 : rootClasses['cell--editing']));
-    }
-    if (getCellClassName) {
-      // TODO move to GridCell
-      classNames.push(getCellClassName(cellParams));
-    }
-    const hasFocus = focusedCell === column.field;
-    const tabIndex = tabbableCell === column.field ? 0 : -1;
-    const isSelected = apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
-      id: rowId,
-      field: column.field
-    });
+    const editCellState = (_editRowsState$rowId$ = (_editRowsState$rowId = editRowsState[rowId]) == null ? void 0 : _editRowsState$rowId[column.field]) != null ? _editRowsState$rowId$ : null;
     return /*#__PURE__*/_jsx(CellComponent, _extends({
-      value: cellParams.value,
-      field: column.field,
+      column: column,
       width: cellProps.width,
       rowId: rowId,
       height: rowHeight,
       showRightBorder: cellProps.showRightBorder,
-      formattedValue: cellParams.formattedValue,
       align: column.align || 'left',
-      cellMode: cellParams.cellMode,
       colIndex: cellProps.indexRelativeToAllColumns,
-      isEditable: cellParams.isEditable,
-      isSelected: isSelected,
-      hasFocus: hasFocus,
-      tabIndex: tabIndex,
-      className: clsx(classNames),
       colSpan: cellProps.colSpan,
-      disableDragEvents: disableDragEvents
-    }, slotProps == null ? void 0 : slotProps.cell, {
-      children: content
-    }), column.field);
-  }, [apiRef, rowId, disableColumnReorder, rowReordering, sortModel.length, treeDepth, editRowsState, getCellClassName, focusedCell, tabbableCell, CellComponent, rowHeight, slotProps == null ? void 0 : slotProps.cell, rootClasses]);
-  const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+      disableDragEvents: disableDragEvents,
+      editCellState: editCellState
+    }, slotProps == null ? void 0 : slotProps.cell), column.field);
+  };
+  const sizes = useGridSelector(apiRef, () => _extends({}, apiRef.current.unstable_getRowInternalSizes(rowId)), objectShallowCompare);
   let minHeight = rowHeight;
   if (minHeight === 'auto' && sizes) {
     let numberOfBaseSizes = 0;
@@ -304,7 +253,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
   const randomNumber = randomNumberBetween(10000, 20, 80);
-  const rowType = apiRef.current.getRowNode(rowId).type;
+  const rowNode = apiRef.current.getRowNode(rowId);
+  if (!rowNode) {
+    return null;
+  }
+  const rowType = rowNode.type;
   const cells = [];
   for (let i = 0; i < renderedColumns.length; i += 1) {
     const column = renderedColumns[i];
@@ -328,7 +281,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
           width
         } = cellColSpanInfo.cellProps;
         const contentWidth = Math.round(randomNumber());
-        cells.push( /*#__PURE__*/_jsx(rootProps.slots.skeletonCell, {
+        cells.push( /*#__PURE__*/_jsx(slots.skeletonCell, {
           width: width,
           contentWidth: contentWidth,
           field: column.field,
@@ -395,4 +348,5 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   tabbableCell: PropTypes.string,
   visibleColumns: PropTypes.arrayOf(PropTypes.object)
 } : void 0;
-export { GridRow };
+const MemoizedGridRow = fastMemo(GridRow);
+export { MemoizedGridRow as GridRow };

package/components/cell/GridCell.d.ts

@@ -1,25 +1,19 @@
 import * as React from 'react';
-import { GridCellMode, GridRowId } from '../../models';
-import { GridAlignment } from '../../models/colDef/gridColDef';
-export interface GridCellProps<V = any, F = V> {
+import { GridRowId, GridCellMode } from '../../models';
+import { GridColDef, GridAlignment } from '../../models/colDef/gridColDef';
+import { GridEditCellProps } from '../../models/gridEditRowModel';
+type GridCellV7Props = {
     align: GridAlignment;
     className?: string;
     colIndex: number;
-    field: string;
+    column: GridColDef;
     rowId: GridRowId;
-    formattedValue?: F;
-    hasFocus?: boolean;
     height: number | 'auto';
-    isEditable?: boolean;
-    isSelected?: boolean;
     showRightBorder?: boolean;
-    value?: V;
     width: number;
-    cellMode?: GridCellMode;
-    children: React.ReactNode;
-    tabIndex: 0 | -1;
     colSpan?: number;
     disableDragEvents?: boolean;
+    editCellState: GridEditCellProps<any> | null;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
@@ -28,6 +22,21 @@ export interface GridCellProps<V = any, F = V> {
     onDragEnter?: React.DragEventHandler<HTMLDivElement>;
     onDragOver?: React.DragEventHandler<HTMLDivElement>;
     [x: string]: any;
-}
-declare const MemoizedCell: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<GridCellProps<any, any>, "ref"> & React.RefAttributes<HTMLDivElement>>>;
-export { MemoizedCell as GridCell };
+};
+type GridCellWrapperProps = GridCellV7Props;
+export type GridCellProps<V = any, F = V> = GridCellWrapperProps & {
+    field: string;
+    formattedValue?: F;
+    hasFocus?: boolean;
+    isEditable?: boolean;
+    isSelected?: boolean;
+    value?: V;
+    cellMode?: GridCellMode;
+    children: React.ReactNode;
+    tabIndex: 0 | -1;
+};
+declare const GridCell: React.ForwardRefExoticComponent<Omit<GridCellProps<any, any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MemoizedCellWrapper: React.ForwardRefExoticComponent<Omit<GridCellV7Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedCellWrapper as GridCellWrapper, GridCell };
+declare const MemoizedGridCellV7: React.ForwardRefExoticComponent<Omit<GridCellV7Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedGridCellV7 as GridCellV7 };