@mui/x-data-grid 6.0.0-alpha.13 → 6.0.0-alpha.14

package/modern/colDef/gridSingleSelectOperators.js

@@ -1,7 +1,8 @@
 import { GridFilterInputSingleSelect } from '../components/panel/filterPanel/GridFilterInputSingleSelect';
 import { GridFilterInputMultipleSingleSelect } from '../components/panel/filterPanel/GridFilterInputMultipleSingleSelect';
+import { isObject } from '../utils/utils';
 const parseObjectValue = value => {
-  if (value == null || typeof value !== 'object') {
+  if (value == null || !isObject(value)) {
     return value;
   }
   return value.value;
@@ -15,7 +16,7 @@ export const getGridSingleSelectQuickFilterFn = (value, column, apiRef) => {
     valueFormatter,
     field
   } = column;
-  const potentialValues = [parseObjectValue(value).toString()];
+  const potentialValues = [parseObjectValue(value)?.toString()];
   const iterableColumnValues = typeof valueOptions === 'function' ? valueOptions({
     field
   }) : valueOptions || [];
@@ -49,7 +50,7 @@ export const getGridSingleSelectQuickFilterFn = (value, column, apiRef) => {
   return ({
     value: columnValue
   }) => {
-    return columnValue != null ? potentialValues.includes(parseObjectValue(columnValue).toString()) : false;
+    return columnValue != null ? potentialValues.includes(parseObjectValue(columnValue)?.toString()) : false;
   };
 };
 export const getGridSingleSelectOperators = () => [{

package/modern/components/panel/filterPanel/GridFilterInputValue.js

@@ -4,40 +4,9 @@ const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
-import MenuItem from '@mui/material/MenuItem';
 import { GridLoadIcon } from '../../icons';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
-import { getValueFromValueOptions } from './filterPanelUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const warnedOnce = {};
-function warnDeprecatedTypeSupport(type) {
-  console.warn([`MUI: Using GridFilterInputValue with a "${type}" column is deprecated.`, 'Use GridFilterInputSingleSelect instead.'].join('\n'));
-  warnedOnce[type] = true;
-}
-const renderSingleSelectOptions = ({
-  valueOptions,
-  valueFormatter,
-  field
-}, api, OptionComponent) => {
-  const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
-    field
-  })] : ['', ...(valueOptions || [])];
-  return iterableColumnValues.map(option => {
-    const isOptionTypeObject = typeof option === 'object';
-    const key = isOptionTypeObject ? option.value : option;
-    const value = isOptionTypeObject ? option.value : option;
-    const formattedValue = valueFormatter && option !== '' ? valueFormatter({
-      value: option,
-      field,
-      api
-    }) : option;
-    const content = isOptionTypeObject ? option.label : formattedValue;
-    return /*#__PURE__*/_jsx(OptionComponent, {
-      value: value,
-      children: content
-    }, key);
-  });
-};
 export const SUBMIT_FILTER_STROKE_TIME = 500;
 function GridFilterInputValue(props) {
   const {
@@ -48,44 +17,25 @@ function GridFilterInputValue(props) {
       focusElementRef
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
-  if (process.env.NODE_ENV !== 'production' && ['date', 'datetime-local', 'singleSelect'].includes(type) && !warnedOnce[type]) {
-    warnDeprecatedTypeSupport(type);
-  }
   const filterTimeout = React.useRef();
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
   const rootProps = useGridRootProps();
-  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
-  const isSelectNative = baseSelectProps.native ?? true;
-  const singleSelectProps = type === 'singleSelect' ? {
-    select: true,
-    SelectProps: _extends({
-      native: isSelectNative
-    }, rootProps.componentsProps?.baseSelect),
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.field), apiRef.current, isSelectNative ? 'option' : MenuItem)
-  } : {};
   const onFilterChange = React.useCallback(event => {
-    let value = event.target.value;
-    // NativeSelect casts the value to a string.
-    if (type === 'singleSelect') {
-      const column = apiRef.current.getColumn(item.field);
-      const columnValueOptions = typeof column.valueOptions === 'function' ? column.valueOptions({
-        field: column.field
-      }) : column.valueOptions;
-      value = getValueFromValueOptions(value, columnValueOptions);
-    }
+    const {
+      value
+    } = event.target;
     clearTimeout(filterTimeout.current);
     setFilterValueState(String(value));
     setIsApplying(true);
-    // TODO singleSelect doesn't debounce
     filterTimeout.current = setTimeout(() => {
       applyValue(_extends({}, item, {
         value
       }));
       setIsApplying(false);
     }, SUBMIT_FILTER_STROKE_TIME);
-  }, [apiRef, applyValue, item, type]);
+  }, [applyValue, item]);
   React.useEffect(() => {
     return () => {
       clearTimeout(filterTimeout.current);
@@ -111,7 +61,7 @@ function GridFilterInputValue(props) {
       shrink: true
     },
     inputRef: focusElementRef
-  }, singleSelectProps, others, rootProps.componentsProps?.baseTextField));
+  }, others, rootProps.componentsProps?.baseTextField));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/hooks/features/clipboard/useGridClipboard.js

@@ -18,6 +18,18 @@ function writeToClipboardPolyfill(data) {
     document.body.removeChild(span);
   }
 }
+function hasNativeSelection(element) {
+  if (window.getSelection()?.toString() !== '') {
+    return true;
+  }
+  if (!element) {
+    return false;
+  }
+  if ((element.selectionEnd || 0) - (element.selectionStart || 0) > 0) {
+    return true;
+  }
+  return false;
+}
 
 /**
  * @requires useGridCsvExport (method)
@@ -50,7 +62,7 @@ export const useGridClipboard = apiRef => {
     }
 
     // Do nothing if there's a native selection
-    if (window.getSelection()?.toString() !== '') {
+    if (hasNativeSelection(event.target)) {
       return;
     }
     apiRef.current.unstable_copySelectedRowsToClipboard(event.altKey);

package/modern/hooks/features/export/useGridPrintExport.js

@@ -90,6 +90,8 @@ export const useGridPrintExport = (apiRef, props) => {
     // Allow to overflow to not hide the border of the last row
     const gridMain = gridClone.querySelector(`.${gridClasses.main}`);
     gridMain.style.overflow = 'visible';
+    // See https://support.google.com/chrome/thread/191619088?hl=en&msgid=193009642
+    gridMain.style.contain = 'size';
     const columnHeaders = gridClone.querySelector(`.${gridClasses.columnHeaders}`);
     const columnHeadersInner = columnHeaders.querySelector(`.${gridClasses.columnHeadersInner}`);
     columnHeadersInner.style.width = '100%';

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["style"];
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -145,7 +145,7 @@ export const useGridVirtualScroller = props => {
       lastColumnIndex
     };
   }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     if (disableVirtualization) {
       renderZoneRef.current.style.transform = `translate3d(0px, 0px, 0px)`;
     } else {
@@ -154,7 +154,7 @@ export const useGridVirtualScroller = props => {
       rootRef.current.scrollTop = 0;
     }
   }, [disableVirtualization]);
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     setContainerDimensions({
       width: rootRef.current.clientWidth,
       height: rootRef.current.clientHeight
@@ -219,7 +219,7 @@ export const useGridVirtualScroller = props => {
     });
     prevRenderContext.current = nextRenderContext;
   }, [apiRef, setRenderContext, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer]);
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     if (containerDimensions.width == null) {
       return;
     }

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.13
+/** @license MUI X v6.0.0-alpha.14
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/models/gridEditRowModel.js

@@ -1,4 +1,3 @@
-// TODO v6: rename to GridEditingState
 var GridEditModes;
 (function (GridEditModes) {
   GridEditModes["Cell"] = "cell";

package/node/DataGrid/DataGrid.js

@@ -164,10 +164,6 @@ DataGridRaw.propTypes = {
    * @default "cell"
    */
   editMode: _propTypes.default.oneOf(['cell', 'row']),
-  /**
-   * Set the edit rows model of the grid.
-   */
-  editRowsModel: _propTypes.default.object,
   /**
    * An error that will turn the grid into its error state and display the error component.
    */
@@ -416,12 +412,6 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnVisibilityModelChange: _propTypes.default.func,
-  /**
-   * Callback fired when the `editRowsModel` changes.
-   * @param {GridEditRowsModel} editRowsModel With all properties from [[GridEditRowsModel]].
-   * @param {GridCallbackDetails} details Additional details for this callback.
-   */
-  onEditRowsModelChange: _propTypes.default.func,
   /**
    * Callback fired when an exception is thrown in the grid.
    * @param {any} args The arguments passed to the `showError` call.

package/node/colDef/gridSingleSelectOperators.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.getGridSingleSelectQuickFilterFn = exports.getGridSingleSelectOperators = void 0;
 var _GridFilterInputSingleSelect = require("../components/panel/filterPanel/GridFilterInputSingleSelect");
 var _GridFilterInputMultipleSingleSelect = require("../components/panel/filterPanel/GridFilterInputMultipleSingleSelect");
+var _utils = require("../utils/utils");
 const parseObjectValue = value => {
-  if (value == null || typeof value !== 'object') {
+  if (value == null || !(0, _utils.isObject)(value)) {
     return value;
   }
   return value.value;
@@ -21,7 +22,7 @@ const getGridSingleSelectQuickFilterFn = (value, column, apiRef) => {
     valueFormatter,
     field
   } = column;
-  const potentialValues = [parseObjectValue(value).toString()];
+  const potentialValues = [parseObjectValue(value)?.toString()];
   const iterableColumnValues = typeof valueOptions === 'function' ? valueOptions({
     field
   }) : valueOptions || [];
@@ -55,7 +56,7 @@ const getGridSingleSelectQuickFilterFn = (value, column, apiRef) => {
   return ({
     value: columnValue
   }) => {
-    return columnValue != null ? potentialValues.includes(parseObjectValue(columnValue).toString()) : false;
+    return columnValue != null ? potentialValues.includes(parseObjectValue(columnValue)?.toString()) : false;
   };
 };
 exports.getGridSingleSelectQuickFilterFn = getGridSingleSelectQuickFilterFn;

package/node/components/panel/filterPanel/GridFilterInputValue.js

@@ -11,43 +11,12 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _icons = require("../../icons");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
-var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const warnedOnce = {};
-function warnDeprecatedTypeSupport(type) {
-  console.warn([`MUI: Using GridFilterInputValue with a "${type}" column is deprecated.`, 'Use GridFilterInputSingleSelect instead.'].join('\n'));
-  warnedOnce[type] = true;
-}
-const renderSingleSelectOptions = ({
-  valueOptions,
-  valueFormatter,
-  field
-}, api, OptionComponent) => {
-  const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
-    field
-  })] : ['', ...(valueOptions || [])];
-  return iterableColumnValues.map(option => {
-    const isOptionTypeObject = typeof option === 'object';
-    const key = isOptionTypeObject ? option.value : option;
-    const value = isOptionTypeObject ? option.value : option;
-    const formattedValue = valueFormatter && option !== '' ? valueFormatter({
-      value: option,
-      field,
-      api
-    }) : option;
-    const content = isOptionTypeObject ? option.label : formattedValue;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionComponent, {
-      value: value,
-      children: content
-    }, key);
-  });
-};
 const SUBMIT_FILTER_STROKE_TIME = 500;
 exports.SUBMIT_FILTER_STROKE_TIME = SUBMIT_FILTER_STROKE_TIME;
 function GridFilterInputValue(props) {
@@ -59,44 +28,25 @@ function GridFilterInputValue(props) {
       focusElementRef
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  if (process.env.NODE_ENV !== 'production' && ['date', 'datetime-local', 'singleSelect'].includes(type) && !warnedOnce[type]) {
-    warnDeprecatedTypeSupport(type);
-  }
   const filterTimeout = React.useRef();
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
   const [applying, setIsApplying] = React.useState(false);
   const id = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const baseSelectProps = rootProps.componentsProps?.baseSelect || {};
-  const isSelectNative = baseSelectProps.native ?? true;
-  const singleSelectProps = type === 'singleSelect' ? {
-    select: true,
-    SelectProps: (0, _extends2.default)({
-      native: isSelectNative
-    }, rootProps.componentsProps?.baseSelect),
-    children: renderSingleSelectOptions(apiRef.current.getColumn(item.field), apiRef.current, isSelectNative ? 'option' : _MenuItem.default)
-  } : {};
   const onFilterChange = React.useCallback(event => {
-    let value = event.target.value;
-    // NativeSelect casts the value to a string.
-    if (type === 'singleSelect') {
-      const column = apiRef.current.getColumn(item.field);
-      const columnValueOptions = typeof column.valueOptions === 'function' ? column.valueOptions({
-        field: column.field
-      }) : column.valueOptions;
-      value = (0, _filterPanelUtils.getValueFromValueOptions)(value, columnValueOptions);
-    }
+    const {
+      value
+    } = event.target;
     clearTimeout(filterTimeout.current);
     setFilterValueState(String(value));
     setIsApplying(true);
-    // TODO singleSelect doesn't debounce
     filterTimeout.current = setTimeout(() => {
       applyValue((0, _extends2.default)({}, item, {
         value
       }));
       setIsApplying(false);
     }, SUBMIT_FILTER_STROKE_TIME);
-  }, [apiRef, applyValue, item, type]);
+  }, [applyValue, item]);
   React.useEffect(() => {
     return () => {
       clearTimeout(filterTimeout.current);
@@ -122,7 +72,7 @@ function GridFilterInputValue(props) {
       shrink: true
     },
     inputRef: focusElementRef
-  }, singleSelectProps, others, rootProps.componentsProps?.baseTextField));
+  }, others, rootProps.componentsProps?.baseTextField));
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/hooks/features/clipboard/useGridClipboard.js

@@ -26,6 +26,18 @@ function writeToClipboardPolyfill(data) {
     document.body.removeChild(span);
   }
 }
+function hasNativeSelection(element) {
+  if (window.getSelection()?.toString() !== '') {
+    return true;
+  }
+  if (!element) {
+    return false;
+  }
+  if ((element.selectionEnd || 0) - (element.selectionStart || 0) > 0) {
+    return true;
+  }
+  return false;
+}
 
 /**
  * @requires useGridCsvExport (method)
@@ -58,7 +70,7 @@ const useGridClipboard = apiRef => {
     }
 
     // Do nothing if there's a native selection
-    if (window.getSelection()?.toString() !== '') {
+    if (hasNativeSelection(event.target)) {
       return;
     }
     apiRef.current.unstable_copySelectedRowsToClipboard(event.altKey);

package/node/hooks/features/export/useGridPrintExport.js

@@ -99,6 +99,8 @@ const useGridPrintExport = (apiRef, props) => {
     // Allow to overflow to not hide the border of the last row
     const gridMain = gridClone.querySelector(`.${_gridClasses.gridClasses.main}`);
     gridMain.style.overflow = 'visible';
+    // See https://support.google.com/chrome/thread/191619088?hl=en&msgid=193009642
+    gridMain.style.contain = 'size';
     const columnHeaders = gridClone.querySelector(`.${_gridClasses.gridClasses.columnHeaders}`);
     const columnHeadersInner = columnHeaders.querySelector(`.${_gridClasses.gridClasses.columnHeadersInner}`);
     columnHeadersInner.style.width = '100%';

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -155,7 +155,7 @@ const useGridVirtualScroller = props => {
       lastColumnIndex
     };
   }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
-  React.useEffect(() => {
+  (0, _utils.unstable_useEnhancedEffect)(() => {
     if (disableVirtualization) {
       renderZoneRef.current.style.transform = `translate3d(0px, 0px, 0px)`;
     } else {
@@ -164,7 +164,7 @@ const useGridVirtualScroller = props => {
       rootRef.current.scrollTop = 0;
     }
   }, [disableVirtualization]);
-  React.useEffect(() => {
+  (0, _utils.unstable_useEnhancedEffect)(() => {
     setContainerDimensions({
       width: rootRef.current.clientWidth,
       height: rootRef.current.clientHeight
@@ -229,7 +229,7 @@ const useGridVirtualScroller = props => {
     });
     prevRenderContext.current = nextRenderContext;
   }, [apiRef, setRenderContext, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer]);
-  React.useEffect(() => {
+  (0, _utils.unstable_useEnhancedEffect)(() => {
     if (containerDimensions.width == null) {
       return;
     }

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.13
+/** @license MUI X v6.0.0-alpha.14
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/models/gridEditRowModel.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridRowModes = exports.GridEditModes = exports.GridCellModes = void 0;
-// TODO v6: rename to GridEditingState
 var GridEditModes;
 exports.GridEditModes = GridEditModes;
 (function (GridEditModes) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "6.0.0-alpha.13",
+  "version": "6.0.0-alpha.14",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -35,8 +35,8 @@
     "directory": "packages/grid/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.6",
-    "@mui/utils": "^5.10.16",
+    "@babel/runtime": "^7.20.7",
+    "@mui/utils": "^5.11.2",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.7"

package/utils/utils.d.ts

@@ -1,6 +1,6 @@
 export declare function isNumber(value: any): value is number;
 export declare function isFunction(value: any): value is Function;
-export declare function isObject(value: any): value is Record<string, any>;
+export declare function isObject<TObject = Record<string, any>>(value: any): value is TObject;
 export declare function localStorageAvailable(): boolean;
 export declare function escapeRegExp(value: string): string;
 /**