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

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -15,6 +15,7 @@ import { unstable_gridFocusColumnGroupHeaderSelector } from '../focus';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector } from '../headerFiltering/gridHeaderFilteringSelectors';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { isEventTargetInPortal } from '../../../utils/domUtils';
 function enrichPageRowsWithPinnedRows(apiRef, rows) {
   const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
   return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
@@ -414,7 +415,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
   }, [apiRef, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
-    if (!event.currentTarget.contains(event.target)) {
+    if (isEventTargetInPortal(event)) {
       return;
     }
 

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -14,6 +14,7 @@ import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 import { gridClasses } from '../../../constants/gridClasses';
+import { isEventTargetInPortal } from '../../../utils/domUtils';
 const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
   if (selectionModelProp == null) {
     return selectionModelProp;
@@ -289,7 +290,7 @@ export const useGridRowSelection = (apiRef, props) => {
 
     // Ignore portal
     // Do not apply shortcuts if the focus is not on the cell root component
-    if (!event.currentTarget.contains(event.target)) {
+    if (isEventTargetInPortal(event)) {
       return;
     }
     if (isNavigationKey(event.key) && event.shiftKey) {

package/hooks/features/sorting/useGridSorting.js

@@ -116,7 +116,8 @@ export const useGridSorting = (apiRef, props) => {
       apiRef.current.applySorting();
     }
   }, [apiRef, logger, props.disableMultipleColumnsSorting]);
-  const sortColumn = React.useCallback((column, direction, allowMultipleSorting) => {
+  const sortColumn = React.useCallback((field, direction, allowMultipleSorting) => {
+    const column = apiRef.current.getColumn(field);
     if (!column.sortable) {
       return;
     }
@@ -199,17 +200,17 @@ export const useGridSorting = (apiRef, props) => {
    * EVENTS
    */
   const handleColumnHeaderClick = React.useCallback(({
-    colDef
+    field
   }, event) => {
     const allowMultipleSorting = event.shiftKey || event.metaKey || event.ctrlKey;
-    sortColumn(colDef, undefined, allowMultipleSorting);
+    sortColumn(field, undefined, allowMultipleSorting);
   }, [sortColumn]);
   const handleColumnHeaderKeyDown = React.useCallback(({
-    colDef
+    field
   }, event) => {
     // Ctrl + Enter opens the column menu
     if (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
-      sortColumn(colDef, undefined, event.shiftKey);
+      sortColumn(field, undefined, event.shiftKey);
     }
   }, [sortColumn]);
   const handleColumnsChange = React.useCallback(() => {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-alpha.1
+ * @mui/x-data-grid v7.0.0-alpha.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -67,7 +67,7 @@ export type { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGr
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache, } from '../utils/createSelector';
-export { findParentElementFromClassName, getActiveElement } from '../utils/domUtils';
+export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal, } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
 export { buildWarning } from '../utils/warning';

package/internals/index.js

@@ -54,7 +54,7 @@ export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized, unstable_resetCreateSelectorCache } from '../utils/createSelector';
-export { findParentElementFromClassName, getActiveElement } from '../utils/domUtils';
+export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
 export { buildWarning } from '../utils/warning';

package/legacy/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 @@ var DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref)
  * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
  */
 export var DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
-
-/**
- * Remove at v7
- * @deprecated
- */
-export var SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
-
-/**
- * Remove at v7
- * @deprecated
- */
-export var SUBMIT_FILTER_DATE_STROKE_TIME = DATA_GRID_PROPS_DEFAULT_VALUES.filterDebounceMs;
 DataGridRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -276,6 +264,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.
@@ -668,14 +665,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/legacy/DataGrid/useDataGridProps.js

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

package/legacy/colDef/gridDefaultColumnTypes.js

@@ -7,14 +7,13 @@ import { GRID_SINGLE_SELECT_COL_DEF } from './gridSingleSelectColDef';
 import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from './gridActionsColDef';
 export var DEFAULT_GRID_COL_TYPE_KEY = '__default__';
 export var getGridDefaultColumnTypes = function getGridDefaultColumnTypes() {
-  var _nativeColumnTypes;
-  var nativeColumnTypes = (_nativeColumnTypes = {
+  var nativeColumnTypes = _defineProperty(_defineProperty({
     string: GRID_STRING_COL_DEF,
     number: GRID_NUMERIC_COL_DEF,
     date: GRID_DATE_COL_DEF,
     dateTime: GRID_DATETIME_COL_DEF,
     boolean: GRID_BOOLEAN_COL_DEF,
     singleSelect: GRID_SINGLE_SELECT_COL_DEF
-  }, _defineProperty(_nativeColumnTypes, GRID_ACTIONS_COLUMN_TYPE, GRID_ACTIONS_COL_DEF), _defineProperty(_nativeColumnTypes, DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF), _nativeColumnTypes);
+  }, GRID_ACTIONS_COLUMN_TYPE, GRID_ACTIONS_COL_DEF), DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF);
   return nativeColumnTypes;
 };

package/legacy/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;
   var 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/legacy/components/GridPagination.js

@@ -10,17 +10,16 @@ import { gridFilteredTopLevelRowCountSelector } from '../hooks/features/filter';
 import { gridPaginationModelSelector } from '../hooks/features/pagination/gridPaginationSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 var GridPaginationRoot = styled(TablePagination)(function (_ref) {
-  var _ref2;
   var theme = _ref.theme;
-  return _ref2 = {}, _defineProperty(_ref2, "& .".concat(tablePaginationClasses.selectLabel), _defineProperty({
+  return _defineProperty(_defineProperty({}, "& .".concat(tablePaginationClasses.selectLabel), _defineProperty({
     display: 'none'
   }, theme.breakpoints.up('sm'), {
     display: 'block'
-  })), _defineProperty(_ref2, "& .".concat(tablePaginationClasses.input), _defineProperty({
+  })), "& .".concat(tablePaginationClasses.input), _defineProperty({
     display: 'none'
   }, theme.breakpoints.up('sm'), {
     display: 'inline-flex'
-  })), _ref2;
+  }));
 });
 export var GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
   var apiRef = useGridApiContext();

package/legacy/components/GridRow.js

@@ -15,7 +15,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';
@@ -141,9 +141,7 @@ var GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var publish = React.useCallback(function (eventName, propHandler) {
     return function (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/legacy/components/cell/GridCell.js

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

package/legacy/components/cell/GridEditDateCell.js

@@ -74,7 +74,6 @@ function GridEditDateCell(props) {
     classes: rootProps.classes
   };
   var classes = useUtilityClasses(ownerState);
-  var hasUpdatedEditValueOnMount = React.useRef(false);
   var parseValueToDate = React.useCallback(function (value) {
     if (value === '') {
       return null;
@@ -148,26 +147,8 @@ function GridEditDateCell(props) {
       inputRef.current.focus();
     }
   }, [hasFocus]);
-  var meta = apiRef.current.unstable_getEditCellMeta(id, field);
-  var handleInputRef = function handleInputRef(el) {
-    inputRef.current = el;
-    if (meta != null && meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
-      var inputValue = inputRef.current.value;
-      var parsedDate = parseValueToDate(inputValue);
-      setValueState({
-        parsed: parsedDate,
-        formatted: inputValue
-      });
-      apiRef.current.setEditCellValue({
-        id: id,
-        field: 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/legacy/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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
@@ -85,7 +86,7 @@ function GridColumnGroupHeader(props) {
     return function (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/legacy/components/columnHeaders/GridColumnHeaderItem.js

@@ -10,6 +10,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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -71,7 +72,7 @@ function GridColumnHeaderItem(props) {
     return function (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/legacy/components/columnHeaders/GridColumnHeadersInner.js

@@ -26,16 +26,15 @@ var GridColumnHeadersInnerRoot = styled('div', {
     return [_defineProperty({}, "&.".concat(gridClasses.columnHeaderDropZone), styles.columnHeaderDropZone), styles.columnHeadersInner];
   }
 })(function () {
-  var _ref2;
-  return _ref2 = {
+  return _defineProperty(_defineProperty({
     display: 'flex',
     alignItems: 'flex-start',
     flexDirection: 'column'
-  }, _defineProperty(_ref2, "&.".concat(gridClasses.columnHeaderDropZone, " .").concat(gridClasses.columnHeaderDraggableContainer), {
+  }, "&.".concat(gridClasses.columnHeaderDropZone, " .").concat(gridClasses.columnHeaderDraggableContainer), {
     cursor: 'move'
-  }), _defineProperty(_ref2, "&.".concat(gridClasses['columnHeadersInner--scrollable'], " .").concat(gridClasses.columnHeader, ":last-child"), {
+  }), "&.".concat(gridClasses['columnHeadersInner--scrollable'], " .").concat(gridClasses.columnHeader, ":last-child"), {
     borderRight: 'none'
-  }), _ref2;
+  });
 });
 export var GridColumnHeadersInner = /*#__PURE__*/React.forwardRef(function GridColumnHeadersInner(props, ref) {
   var _apiRef$current$getRo, _apiRef$current$getRo2;