@mui/x-data-grid 7.0.0-alpha.2 → 7.0.0-alpha.3

package/CHANGELOG.md

@@ -3,6 +3,188 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-alpha.3
+
+_Dec 4, 2023_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Support localized start of the week on pickers' `AdapterLuxon`
+
+  When using Luxon 3.4.4 or higher, the start of the week will be defined by the date locale (e.g.: Sunday for `en-US`, Monday for `fr-FR`).
+
+- 📈 Fix a lot of Charts package issues
+- 🎉 The Data Grid features Cell selection and Clipboard paste are now stable
+- 🌍 Improve Bulgarian (bg-BG) locale on Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### Breaking changes
+
+- The clipboard paste feature is now enabled by default. The flag `clipboardPaste` is no longer needed to be passed to the `experimentalFeatures` prop.
+
+- The clipboard related exports `ignoreValueFormatterDuringExport` and `splitClipboardPastedText` are no longer prefixed with `unstable_`.
+
+- The deprecated constants `SUBMIT_FILTER_STROKE_TIME` and `SUBMIT_FILTER_DATE_STROKE_TIME` have been removed from the `DataGrid` exports. Use the [`filterDebounceMs`](https://next.mui.com/x/api/data-grid/data-grid/#DataGrid-prop-filterDebounceMs) prop to customize filter debounce time.
+
+- The `slots.preferencesPanel` slot and the `slotProps.preferencesPanel` prop were removed. Use `slots.panel` and `slotProps.panel` instead.
+
+- The `GridPreferencesPanel` component is not exported anymore as it wasn't meant to be used outside of the Data Grid.
+
+- The `unstable_` prefix has been removed from the cell selection props listed below.
+
+  | Old name                              | New name                     |
+  | :------------------------------------ | :--------------------------- |
+  | `unstable_cellSelection`              | `cellSelection`              |
+  | `unstable_cellSelectionModel`         | `cellSelectionModel`         |
+  | `unstable_onCellSelectionModelChange` | `onCellSelectionModelChange` |
+
+- The `unstable_` prefix has been removed from the cell selection API methods listed below.
+
+  | Old name                           | New name                  |
+  | :--------------------------------- | :------------------------ |
+  | `unstable_getCellSelectionModel`   | `getCellSelectionModel`   |
+  | `unstable_getSelectedCellsAsArray` | `getSelectedCellsAsArray` |
+  | `unstable_isCellSelected`          | `isCellSelected`          |
+  | `unstable_selectCellRange`         | `selectCellRange`         |
+  | `unstable_setCellSelectionModel`   | `setCellSelectionModel`   |
+
+- The Quick Filter now ignores hidden columns by default.
+  See [including hidden columns](https://next.mui.com/x/react-data-grid/filtering/quick-filter/#including-hidden-columns) section for more details.
+
+#### `@mui/x-data-grid@7.0.0-alpha.3`
+
+- [DataGrid] Fix cell editing adding a leading "v" on paste (#9205) @prasad5795
+- [DataGrid] Exclude hidden columns from quick filtering by default (#11229) @cherniavskii
+- [DataGrid] Fix `onFilterModelChange` being fired with stale field value (#11000) @gitstart
+- [DataGrid] Fix handling of event target in portal (#11174) @cherniavskii
+- [DataGrid] Remove deprecated constants (#11233) @michelengelen
+- [DataGrid] Remove the `preferencesPanel` slot (#11228) @cherniavskii
+- [l10n] Improve Bulgarian (bg-BG) locale (#10856) @Kristiqn95
+
+#### `@mui/x-data-grid-pro@7.0.0-alpha.3` [![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@7.0.0-alpha.3`.
+
+#### `@mui/x-data-grid-premium@7.0.0-alpha.3` [![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@7.0.0-alpha.3`, plus:
+
+- [DataGridPremium] Fix aggregated column ignoring column definition changes (#11129) @cherniavskii
+- [DataGridPremium] Make Cell selection feature stable (#11246) @MBilalShafi
+- [DataGridPremium] Make Clipboard paste feature stable (#11248) @MBilalShafi
+
+### Date Pickers
+
+#### Breaking changes
+
+- The Date and Time Pickers now use the localized week when using `AdapterLuxon` and Luxon v3.4.4 or higher is installed.
+  This new behavior allows `AdapterLuxon` to have the same behavior as the other adapters.
+  If you want to keep the start of the week on Monday even if your locale says otherwise, you can hardcode the week settings as follows:
+  The Firefox browser currently does not support this behavior because the [getWeekInfo](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo) API is not yet implemented.
+
+  ```ts
+  import { Settings } from 'luxon';
+
+  Settings.defaultWeekSettings = {
+    firstDay: 1,
+    minimalDays: Info.getMinimumDaysInFirstWeek(),
+    weekend: [6, 7],
+  };
+  ```
+
+- Add new parameters to the `shortcuts` slot `onChange` callback
+
+  The `onChange` callback fired when selecting a shortcut now requires two new parameters (previously they were optional):
+
+  - The [`changeImportance`](/x/react-date-pickers/shortcuts/#behavior-when-selecting-a-shortcut) of the shortcut.
+  - The `item` containing the entire shortcut object.
+
+  ```diff
+   const CustomShortcuts = (props) => {
+     return (
+       <React.Fragment>
+         {props.items.map(item => {
+           const value = item.getValue({ isValid: props.isValid });
+           return (
+             <button
+  -            onClick={() => onChange(value)}
+  +            onClick={() => onChange(value, props.changeImportance ?? 'accept', item)}
+             >
+               {value}
+             </button>
+           )
+         }}
+       </React.Fragment>
+     )
+   }
+
+   <DatePicker slots={{ shortcuts: CustomShortcuts }} />
+  ```
+
+  - Usage of `AdapterDayjs` with the `customParseFormat` plugin
+    The call to `dayjs.extend(customParseFormatPlugin)` has been moved to the `AdapterDayjs` constructor. This allows users to pass custom options to this plugin before the adapter uses it.
+
+  If you are using this plugin before the rendering of the first `LocalizationProvider` component and did not call `dayjs.extend` in your own codebase, you will need to manually extend `dayjs`:
+
+  ```tsx
+  import dayjs from 'dayjs';
+  import customParseFormatPlugin from 'dayjs/plugin/customParseFormat';
+
+  dayjs.extend(customParseFormatPlugin);
+  ```
+
+  The other plugins are still added before the adapter initialization.
+
+#### `@mui/x-date-pickers@7.0.0-alpha.3`
+
+- [pickers] Expand field placeholder methods flexibility by providing `format` parameter (#11130) @LukasTy
+- [pickers] Make `changeImportance` and `shortcut` mandatory in `PickersShortcuts` (#10941) @flaviendelangle
+- [pickers] Moved extend with `customParseFormat` to constructor (#11151) @michelengelen
+- [pickers] POC: `PickersTextField` styling - outlined variant (#10778) @noraleonte
+- [pickers] Support localized start of the week on `AdapterLuxon` (#10964) @flaviendelangle
+- [pickers] Use adapter methods instead of date library ones whenever possible (#11142) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.0.0-alpha.3` [![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@7.0.0-alpha.3`.
+
+### Charts / `@mui/x-charts@7.0.0-alpha.3`
+
+- [charts] Adjusted `defaultizeValueFormatter` util to accept an optional `series.valueFormatter` value (#11144) @michelengelen
+- [charts] Apply `labelStyle` and `tickLabelStyle` props on `<ChartsYAxis />` (#11180) @akamfoad
+- [charts] Fix TS config (#11259) @alexfauquette
+- [charts] Fix error with empty dataset (#11063) @alexfauquette
+- [charts] Fix export strategy (#11235) @alexfauquette
+- [charts] Remove outdated prop-types (#11045) @alexfauquette
+
+### Docs
+
+- [docs] Add `TextField` styling example to customization playground (#10812) @noraleonte
+- [docs] Add a card grid to the installation page (#11177) @danilo-leal
+- [docs] Add end v6 blogpost to whats new page (#10999) @joserodolfofreitas
+- [docs] Add small formatting improvements to the licensing page (#11178) @danilo-leal
+- [docs] Document charts composition (#10710) (#11239) @alexfauquette
+- [docs] Fix <title> generation (#11182) @oliviertassinari
+- [docs] Fix dead anchor link (#11265) @oliviertassinari
+- [docs] Improve Data Grid togglable columns example (#11238) @MBilalShafi
+- [docs] Improve the prop descriptions of `DayCalendar` (#11158) @flaviendelangle
+- [docs] Move the adapter breaking changes in a collapsable block (#11205) @flaviendelangle
+- [docs] Polish Next.js header description @oliviertassinari
+- [docs] Remove the `newFeature` flag on v6 features (#11168) @flaviendelangle
+- [docs] Simplify a bit chart demo (#11173) @oliviertassinari
+- [docs] Standardize the usage of callouts in the MUI X docs (#7127) @samuelsycamore
+- [docs] Adjust the Data Grid demo page design (#11231) @danilo-leal
+
+### Core
+
+- [core] Make `@mui/system` a direct dependency (#11128) @LukasTy
+- [core] Remove blank lines, coding style @oliviertassinari
+- [core] Remove outdated `ENABLE_AD` env variable (#11181) @oliviertassinari
+- [github] Do not add `plan: Pro` and `plan: Premium` labels on pro / premium issue templates (#10183) @flaviendelangle
+
 ## 7.0.0-alpha.2
 
 _Nov 23, 2023_
@@ -684,6 +866,65 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.18.3
+
+_Dec 4, 2023_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📈 Fix a lot of Charts package issues
+- 🌍 Improve Bulgarian (bg-BG) locale on Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.3`
+
+- [DataGrid] Fix cell editing adding a leading "v" on paste (#11166) @prasad5795
+- [DataGrid] Fix handling of event target in portal (#11209) @cherniavskii
+- [DataGrid] Fix `onFilterModelChange` being fired with stale field value (#11244) @gitstart
+- [l10n] Improve Bulgarian (bg-BG) locale (#10856) (#11206) @Kristiqn95
+
+#### `@mui/x-data-grid-pro@6.18.3` [![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.18.3`.
+
+#### `@mui/x-data-grid-premium@6.18.3` [![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.18.3`, plus:
+
+- [DataGridPremium] Fix aggregated column ignoring column definition changes (#11176) @cherniavskii
+- [DataGridPremium] Fix custom filter operators not working on aggregated column (#11201) @cherniavskii
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.3`
+
+- [pickers] Correctly format `MultiSectionDigitalClock` number sections (#11297) @LukasTy
+- [pickers] Expand field placeholder methods flexibility by providing `format` parameter (#11254) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.18.3` [![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.18.3`.
+
+### Charts / `@mui/x-charts@6.18.3`
+
+- [charts] Adjusted `defaultizeValueFormatter` util to accept an optional `series.valueFormatter` value (#11213) @michelengelen
+- [charts] Apply `labelStyle` and `tickLabelStyle` props on `<ChartsYAxis />` (#11180) @akamfoad
+- [charts] Fix TS config (#11259) @alexfauquette
+- [charts] Fix error with empty dataset (#11063) @alexfauquette
+- [charts] Fix export strategy (#11235) @alexfauquette
+
+### Docs
+
+- [docs] Add LTS section to support page (#11300) @joserodolfofreitas
+- [docs] Add end v6 blogpost to whats new page (#11299) @joserodolfofreitas
+- [docs] Document charts composition (#10710) @alexfauquette
+- [docs] Fix version links (#11167) @LukasTy
+- [docs] Improve Data Grid togglable columns example (#11241) @MBilalShafi
+- [docs] Split charts overview and getting started in distinct pages (#10910) @alexfauquette
+
 ## 6.18.2
 
 _Nov 23, 2023_

package/DataGrid/DataGrid.d.ts

@@ -13,14 +13,4 @@ interface DataGridComponent {
  * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
  */
 export declare const DataGrid: DataGridComponent;
-/**
- * Remove at v7
- * @deprecated
- */
-export declare const SUBMIT_FILTER_STROKE_TIME: number;
-/**
- * Remove at v7
- * @deprecated
- */
-export declare const SUBMIT_FILTER_DATE_STROKE_TIME: number;
 export {};

package/DataGrid/DataGrid.js

@@ -5,7 +5,7 @@ import { chainPropTypes } from '@mui/utils';
 import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../components';
 import { GridContextProvider } from '../context/GridContextProvider';
 import { useDataGridComponent } from './useDataGridComponent';
-import { useDataGridProps, DATA_GRID_PROPS_DEFAULT_VALUES } from './useDataGridProps';
+import { useDataGridProps } from './useDataGridProps';
 import { DataGridVirtualScroller } from '../components/DataGridVirtualScroller';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -35,18 +35,6 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
  * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
  */
 export const DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
-
-/**
- * Remove at v7
- * @deprecated
- */
-export const SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
-
-/**
- * Remove at v7
- * @deprecated
- */
-export const SUBMIT_FILTER_DATE_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
 DataGridRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -274,6 +262,15 @@ DataGridRaw.propTypes = {
    * @default false
    */
   ignoreDiacritics: PropTypes.bool,
+  /**
+   * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
+   * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
+   * @default false
+   */
+  ignoreValueFormatterDuringExport: PropTypes.oneOfType([PropTypes.shape({
+    clipboardExport: PropTypes.bool,
+    csvExport: PropTypes.bool
+  }), PropTypes.bool]),
   /**
    * The initial state of the DataGrid.
    * The data in it will be set in the state on initialization but will not be controlled.
@@ -666,14 +663,5 @@ DataGridRaw.propTypes = {
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
-   * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.
-   * @default false
-   */
-  unstable_ignoreValueFormatterDuringExport: PropTypes.oneOfType([PropTypes.shape({
-    clipboardExport: PropTypes.bool,
-    csvExport: PropTypes.bool
-  }), PropTypes.bool])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 };

package/DataGrid/useDataGridProps.js

@@ -68,7 +68,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableColumnResize: false,
   keepNonExistentRowsSelected: false,
   keepColumnPositionIfDraggedOutside: false,
-  unstable_ignoreValueFormatterDuringExport: false,
+  ignoreValueFormatterDuringExport: false,
   clipboardCopyCellDelimiter: '\t',
   rowPositionsDebounceMs: 166
 };

package/README.md

@@ -16,7 +16,6 @@ This component has the following peer dependencies that you will need to install
 ```json
 "peerDependencies": {
   "@mui/material": "^5.4.1",
-  "@mui/system": "^5.4.1",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
 },

package/components/GridHeader.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { GridPreferencesPanel } from './panel/GridPreferencesPanel';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function GridHeader() {
-  var _rootProps$slotProps, _rootProps$slotProps2;
+  var _rootProps$slotProps;
   const rootProps = useGridRootProps();
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.preferencesPanel, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.preferencesPanel)), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.toolbar))]
+    children: [/*#__PURE__*/_jsx(GridPreferencesPanel, {}), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.toolbar))]
   });
 }

package/components/GridRow.js

@@ -13,7 +13,7 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
 import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
-import { findParentElementFromClassName } from '../utils/domUtils';
+import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
@@ -137,9 +137,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   }, [apiRef, currentPage.range, index, rowHeight, rowId, position]);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
-    // The target is not an element when triggered by a Select inside the cell
-    // See https://github.com/mui/material-ui/issues/10534
-    if (event.target.nodeType === 1 && !event.currentTarget.contains(event.target)) {
+    if (isEventTargetInPortal(event)) {
       return;
     }
 

package/components/cell/GridCell.js

@@ -386,7 +386,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
 } : void 0;
 export { MemoizedCellWrapper as GridCellWrapper, GridCell };
 const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _getActions, _ref, _rootProps$unstable_c, _rootProps$experiment3, _rootProps$experiment4;
+  var _getActions, _ref, _rootProps$cellSelect, _rootProps$experiment3, _rootProps$experiment4;
   const {
       column,
       rowId,
@@ -461,8 +461,8 @@ const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
   const cellRef = React.useRef(null);
   const handleRef = useForkRef(ref, cellRef);
   const focusElementRef = React.useRef(null);
-  // @ts-expect-error To access `unstable_cellSelection` flag as it's a `premium` feature
-  const isSelectionMode = (_rootProps$unstable_c = rootProps.unstable_cellSelection) != null ? _rootProps$unstable_c : false;
+  // @ts-expect-error To access `cellSelection` flag as it's a `premium` feature
+  const isSelectionMode = (_rootProps$cellSelect = rootProps.cellSelection) != null ? _rootProps$cellSelect : false;
   const ownerState = {
     align,
     showRightBorder,

package/components/cell/GridEditDateCell.js

@@ -63,7 +63,6 @@ function GridEditDateCell(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  const hasUpdatedEditValueOnMount = React.useRef(false);
   const parseValueToDate = React.useCallback(value => {
     if (value === '') {
       return null;
@@ -109,26 +108,8 @@ function GridEditDateCell(props) {
       inputRef.current.focus();
     }
   }, [hasFocus]);
-  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
-  const handleInputRef = el => {
-    inputRef.current = el;
-    if (meta != null && meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
-      const inputValue = inputRef.current.value;
-      const parsedDate = parseValueToDate(inputValue);
-      setValueState({
-        parsed: parsedDate,
-        formatted: inputValue
-      });
-      apiRef.current.setEditCellValue({
-        id,
-        field,
-        value: parsedDate
-      });
-      hasUpdatedEditValueOnMount.current = true;
-    }
-  };
   return /*#__PURE__*/_jsx(StyledInputBase, _extends({
-    inputRef: handleInputRef,
+    inputRef: inputRef,
     fullWidth: true,
     className: classes.root,
     type: isDateTime ? 'datetime-local' : 'date',

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -7,6 +7,7 @@ import { gridColumnGroupsLookupSelector } from '../../hooks/features/columnGroup
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
+import { isEventTargetInPortal } from '../../utils/domUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -85,7 +86,7 @@ function GridColumnGroupHeader(props) {
   const publish = React.useCallback(eventName => event => {
     // Ignore portal
     // See https://github.com/mui/mui-x/issues/1721
-    if (!event.currentTarget.contains(event.target)) {
+    if (isEventTargetInPortal(event)) {
       return;
     }
     apiRef.current.publishEvent(eventName, renderParams, event);

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -9,6 +9,7 @@ import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
+import { isEventTargetInPortal } from '../../utils/domUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -68,7 +69,7 @@ function GridColumnHeaderItem(props) {
   const publish = React.useCallback(eventName => event => {
     // Ignore portal
     // See https://github.com/mui/mui-x/issues/1721
-    if (!event.currentTarget.contains(event.target)) {
+    if (isEventTargetInPortal(event)) {
       return;
     }
     apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(colDef.field), event);

package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -29,7 +29,7 @@ function GridColumnMenuSortItem(props) {
   const onSortMenuItemClick = React.useCallback(event => {
     onClick(event);
     const direction = event.currentTarget.getAttribute('data-value') || null;
-    apiRef.current.sortColumn(colDef, direction === sortDirection ? null : direction);
+    apiRef.current.sortColumn(colDef.field, direction === sortDirection ? null : direction);
   }, [apiRef, colDef, onClick, sortDirection]);
   if (!colDef || !colDef.sortable || !sortingOrder.some(item => !!item)) {
     return null;

package/components/panel/filterPanel/GridFilterForm.js

@@ -178,8 +178,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     // try to keep the same operator when column change
     const newOperator = column.filterOperators.find(operator => operator.value === item.operator) || column.filterOperators[0];
 
-    // Erase filter value if the input component is modified
-    const eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== (currentOperator == null ? void 0 : currentOperator.InputComponent);
+    // Erase filter value if the input component or filtered column type is modified
+    const eraseItemValue = !newOperator.InputComponent || newOperator.InputComponent !== (currentOperator == null ? void 0 : currentOperator.InputComponent) || column.type !== currentColumn.type;
     applyFilterChanges(_extends({}, item, {
       field,
       operator: newOperator.value,

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -43,7 +43,7 @@ function GridFilterInputValue(props) {
   }, [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
   React.useEffect(() => {
     const itemPlusTag = item;
-    if (itemPlusTag.fromInput !== id) {
+    if (itemPlusTag.fromInput !== id || item.value === undefined) {
       var _item$value2;
       setFilterValueState(String((_item$value2 = item.value) != null ? _item$value2 : ''));
     }

package/components/panel/index.d.ts

@@ -4,5 +4,4 @@ export * from './GridPanelContent';
 export * from './GridPanelFooter';
 export * from './GridPanelHeader';
 export * from './GridPanelWrapper';
-export * from './GridPreferencesPanel';
 export * from './filterPanel';

package/components/panel/index.js

@@ -4,5 +4,4 @@ export * from './GridPanelContent';
 export * from './GridPanelFooter';
 export * from './GridPanelHeader';
 export * from './GridPanelWrapper';
-export * from './GridPreferencesPanel';
 export * from './filterPanel';

package/constants/defaultGridSlotsComponents.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount } from '../components';
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount } from '../components';
 import { GridCellV7 } from '../components/cell/GridCell';
 import { GridColumnHeaders } from '../components/GridColumnHeaders';
 import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
@@ -17,7 +17,6 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
   footer: GridFooter,
   footerRowCount: GridRowCount,
   toolbar: null,
-  preferencesPanel: GridPreferencesPanel,
   loadingOverlay: GridLoadingOverlay,
   noResultsOverlay: GridNoResultsOverlay,
   noRowsOverlay: GridNoRowsOverlay,

package/hooks/features/clipboard/useGridClipboard.d.ts

@@ -5,4 +5,4 @@ import type { DataGridProcessedProps } from '../../../models/props/DataGridProps
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
  */
-export declare const useGridClipboard: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_ignoreValueFormatterDuringExport' | 'onClipboardCopy' | 'clipboardCopyCellDelimiter'>) => void;
+export declare const useGridClipboard: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'ignoreValueFormatterDuringExport' | 'onClipboardCopy' | 'clipboardCopyCellDelimiter'>) => void;

package/hooks/features/clipboard/useGridClipboard.js

@@ -50,7 +50,7 @@ function hasNativeSelection(element) {
  * @requires useGridSelection (method)
  */
 export const useGridClipboard = (apiRef, props) => {
-  const ignoreValueFormatterProp = props.unstable_ignoreValueFormatterDuringExport;
+  const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   const handleCopy = React.useCallback(event => {

package/hooks/features/editing/useGridCellEditing.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 import * as React from 'react';
-import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -101,7 +101,7 @@ export const useGridCellEditing = (apiRef, props) => {
       if (isPrintableKey(event)) {
         reason = GridCellEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
-        reason = GridCellEditStartReasons.printableKeyDown;
+        reason = GridCellEditStartReasons.pasteKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridCellEditStartReasons.enterKeyDown;
       } else if (event.key === 'Delete' || event.key === 'Backspace') {
@@ -121,24 +121,13 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason,
-      key,
-      colDef
+      reason
     } = params;
     const startCellEditModeParams = {
       id,
       field
     };
-    if (reason === GridCellEditStartReasons.printableKeyDown) {
-      if (React.version.startsWith('17')) {
-        // In React 17, cleaning the input is enough.
-        // The sequence of events makes the key pressed by the end-users update the textbox directly.
-        startCellEditModeParams.deleteValue = true;
-      } else {
-        const initialValue = colDef.valueParser ? colDef.valueParser(key) : key;
-        startCellEditModeParams.initialValue = initialValue;
-      }
-    } else if (reason === GridCellEditStartReasons.deleteKeyDown) {
+    if (reason === GridCellEditStartReasons.printableKeyDown || reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.pasteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
     apiRef.current.startCellEditMode(startCellEditModeParams);
@@ -248,17 +237,13 @@ export const useGridCellEditing = (apiRef, props) => {
       initialValue
     } = params;
     let newValue = apiRef.current.getCellValue(id, field);
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    let unstable_updateValueOnRender = false;
     if (deleteValue || initialValue) {
       newValue = deleteValue ? '' : initialValue;
-      unstable_updateValueOnRender = true;
     }
     const newProps = {
       value: newValue,
       error: false,
-      isProcessingProps: false,
-      unstable_updateValueOnRender
+      isProcessingProps: false
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
@@ -423,7 +408,9 @@ export const useGridCellEditing = (apiRef, props) => {
       updateCellModesModel(cellModesModelProp);
     }
   }, [cellModesModelProp, updateCellModesModel]);
-  React.useEffect(() => {
+
+  // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
+  useEnhancedEffect(() => {
     const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later