@mui/x-data-grid 7.0.0-alpha.5 → 7.0.0-alpha.6

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

@@ -14,7 +14,7 @@ var _utils = require("@mui/utils");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant", "getOptionLabel", "getOptionValue"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const filter = (0, _Autocomplete.createFilterOptions)();
@@ -28,9 +28,7 @@ function GridFilterInputMultipleSingleSelect(props) {
       error,
       helperText,
       size,
-      variant = 'standard',
-      getOptionLabel: getOptionLabelProp,
-      getOptionValue: getOptionValueProp
+      variant = 'standard'
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const TextFieldProps = {
@@ -49,23 +47,12 @@ function GridFilterInputMultipleSingleSelect(props) {
       resolvedColumn = column;
     }
   }
-  const getOptionValue = getOptionValueProp || resolvedColumn?.getOptionValue;
-  const getOptionLabel = getOptionLabelProp || resolvedColumn?.getOptionLabel;
+  const getOptionValue = resolvedColumn?.getOptionValue;
+  const getOptionLabel = resolvedColumn?.getOptionLabel;
   const isOptionEqualToValue = React.useCallback((option, value) => getOptionValue(option) === getOptionValue(value), [getOptionValue]);
   const resolvedValueOptions = React.useMemo(() => {
-    if (!resolvedColumn?.valueOptions) {
-      return [];
-    }
-    if (typeof resolvedColumn.valueOptions === 'function') {
-      return resolvedColumn.valueOptions({
-        field: resolvedColumn.field
-      });
-    }
-    return resolvedColumn.valueOptions;
+    return (0, _filterPanelUtils.getValueOptions)(resolvedColumn) || [];
   }, [resolvedColumn]);
-  const resolvedFormattedValueOptions = React.useMemo(() => {
-    return resolvedValueOptions?.map(getOptionValue);
-  }, [resolvedValueOptions, getOptionValue]);
 
   // The value is computed from the item.value and used directly
   // If it was done by a useEffect/useState, the Autocomplete could receive incoherent value and options
@@ -73,23 +60,8 @@ function GridFilterInputMultipleSingleSelect(props) {
     if (!Array.isArray(item.value)) {
       return [];
     }
-    if (resolvedValueOptions !== undefined) {
-      const itemValueIndexes = item.value.map(element => {
-        // Gets the index matching between values and valueOptions
-        return resolvedFormattedValueOptions?.findIndex(formattedOption => formattedOption === element);
-      });
-      return itemValueIndexes.filter(index => index >= 0).map(index => resolvedValueOptions[index]);
-    }
     return item.value;
-  }, [item.value, resolvedValueOptions, resolvedFormattedValueOptions]);
-  React.useEffect(() => {
-    if (!Array.isArray(item.value) || filteredValues.length !== item.value.length) {
-      // Updates the state if the filter value has been cleaned by the component
-      applyValue((0, _extends2.default)({}, item, {
-        value: filteredValues.map(getOptionValue)
-      }));
-    }
-  }, [item, filteredValues, applyValue, getOptionValue]);
+  }, [item.value]);
   const handleChange = React.useCallback((event, value) => {
     applyValue((0, _extends2.default)({}, item, {
       value: value.map(getOptionValue)
@@ -132,18 +104,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputMultipleSingleSelect.prop
   }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-  /**
-   * Used to determine the label displayed for a given value option.
-   * @param {ValueOptions} value The current value option.
-   * @returns {string} The text to be displayed.
-   */
-  getOptionLabel: _propTypes.default.func,
-  /**
-   * Used to determine the value used for a value option.
-   * @param {ValueOptions} value The current value option.
-   * @returns {string} The value to be used.
-   */
-  getOptionValue: _propTypes.default.func,
   item: _propTypes.default.shape({
     field: _propTypes.default.string.isRequired,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

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

@@ -15,26 +15,24 @@ var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "isFilterActive", "clearButton", "InputLabelProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const renderSingleSelectOptions = ({
-  column: {
-    valueOptions,
-    field
-  },
+  column,
   OptionComponent,
   getOptionLabel,
   getOptionValue,
   isSelectNative,
   baseSelectOptionProps
 }) => {
-  const iterableColumnValues = typeof valueOptions === 'function' ? ['', ...valueOptions({
-    field
-  })] : ['', ...(valueOptions || [])];
+  const iterableColumnValues = ['', ...((0, _filterPanelUtils.getValueOptions)(column) || [])];
   return iterableColumnValues.map(option => {
     const value = getOptionValue(option);
-    const label = getOptionLabel(option);
+    let label = getOptionLabel(option);
+    if (label === '') {
+      label = ' '; // To force the height of the empty option
+    }
     return /*#__PURE__*/(0, _react.createElement)(OptionComponent, (0, _extends2.default)({}, baseSelectOptionProps, {
       native: isSelectNative,
       key: value,
@@ -57,19 +55,17 @@ function GridFilterInputSingleSelect(props) {
       type,
       apiRef,
       focusElementRef,
-      getOptionLabel: getOptionLabelProp,
-      getOptionValue: getOptionValueProp,
       placeholder,
       tabIndex,
       label: labelProp,
       clearButton
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
+  const filterValue = item.value ?? '';
   const id = (0, _utils.unstable_useId)();
   const labelId = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const isSelectNative = rootProps.slotProps?.baseSelect?.native ?? true;
+  const isSelectNative = rootProps.slotProps?.baseSelect?.native ?? false;
   let resolvedColumn = null;
   if (item.field) {
     const column = apiRef.current.getColumn(item.field);
@@ -77,52 +73,27 @@ function GridFilterInputSingleSelect(props) {
       resolvedColumn = column;
     }
   }
-  const getOptionValue = getOptionValueProp || resolvedColumn?.getOptionValue;
-  const getOptionLabel = getOptionLabelProp || resolvedColumn?.getOptionLabel;
+  const getOptionValue = resolvedColumn?.getOptionValue;
+  const getOptionLabel = resolvedColumn?.getOptionLabel;
   const currentValueOptions = React.useMemo(() => {
-    if (!resolvedColumn) {
-      return undefined;
-    }
-    return typeof resolvedColumn.valueOptions === 'function' ? resolvedColumn.valueOptions({
-      field: resolvedColumn.field
-    }) : resolvedColumn.valueOptions;
+    return (0, _filterPanelUtils.getValueOptions)(resolvedColumn);
   }, [resolvedColumn]);
   const onFilterChange = React.useCallback(event => {
     let value = event.target.value;
 
     // NativeSelect casts the value to a string.
     value = (0, _filterPanelUtils.getValueFromValueOptions)(value, currentValueOptions, getOptionValue);
-    setFilterValueState(String(value));
     applyValue((0, _extends2.default)({}, item, {
       value
     }));
   }, [currentValueOptions, getOptionValue, applyValue, item]);
-  React.useEffect(() => {
-    let itemValue;
-    if (currentValueOptions !== undefined) {
-      // sanitize if valueOptions are provided
-      itemValue = (0, _filterPanelUtils.getValueFromValueOptions)(item.value, currentValueOptions, getOptionValue);
-      if (itemValue !== item.value) {
-        applyValue((0, _extends2.default)({}, item, {
-          value: itemValue
-        }));
-        return;
-      }
-    } else {
-      itemValue = item.value;
-    }
-    itemValue = itemValue ?? '';
-    setFilterValueState(String(itemValue));
-  }, [item, currentValueOptions, applyValue, getOptionValue]);
-  if (!(0, _filterPanelUtils.isSingleSelectColDef)(resolvedColumn)) {
-    return null;
-  }
   if (!(0, _filterPanelUtils.isSingleSelectColDef)(resolvedColumn)) {
     return null;
   }
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SingleSelectOperatorContainer, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseFormControl, {
+      fullWidth: true,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         htmlFor: id,
@@ -133,7 +104,7 @@ function GridFilterInputSingleSelect(props) {
         id: id,
         label: label,
         labelId: labelId,
-        value: filterValueState,
+        value: filterValue,
         onChange: onFilterChange,
         variant: "standard",
         type: type || 'text',
@@ -167,18 +138,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
   applyValue: _propTypes.default.func.isRequired,
   clearButton: _propTypes.default.node,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-  /**
-   * Used to determine the label displayed for a given value option.
-   * @param {ValueOptions} value The current value option.
-   * @returns {string} The text to be displayed.
-   */
-  getOptionLabel: _propTypes.default.func,
-  /**
-   * Used to determine the value used for a value option.
-   * @param {ValueOptions} value The current value option.
-   * @returns {string} The value to be used.
-   */
-  getOptionValue: _propTypes.default.func,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (e.g. `isEmpty`)

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

@@ -1,14 +1,24 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLabelFromValueOption = void 0;
 exports.getValueFromValueOptions = getValueFromValueOptions;
+exports.getValueOptions = getValueOptions;
 exports.isSingleSelectColDef = isSingleSelectColDef;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 function isSingleSelectColDef(colDef) {
   return colDef?.type === 'singleSelect';
 }
+function getValueOptions(column, additionalParams) {
+  if (!column) {
+    return undefined;
+  }
+  return typeof column.valueOptions === 'function' ? column.valueOptions((0, _extends2.default)({
+    field: column.field
+  }, additionalParams)) : column.valueOptions;
+}
 function getValueFromValueOptions(value, valueOptions, getOptionValue) {
   if (valueOptions === undefined) {
     return undefined;
@@ -18,9 +28,4 @@ function getValueFromValueOptions(value, valueOptions, getOptionValue) {
     return String(optionValue) === String(value);
   });
   return getOptionValue(result);
-}
-const getLabelFromValueOption = valueOption => {
-  const label = typeof valueOption === 'object' ? valueOption.label : valueOption;
-  return label != null ? String(label) : '';
-};
-exports.getLabelFromValueOption = getLabelFromValueOption;
+}

package/node/hooks/features/rowSelection/useGridRowSelection.js

@@ -22,6 +22,7 @@ var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelToggleField");
 var _gridClasses = require("../../../constants/gridClasses");
 var _domUtils = require("../../../utils/domUtils");
+var _utils = require("./utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
@@ -67,11 +68,10 @@ const useGridRowSelection = (apiRef, props) => {
   });
   const {
     checkboxSelection,
-    disableMultipleRowSelection,
     disableRowSelectionOnClick,
     isRowSelectable: propIsRowSelectable
   } = props;
-  const canHaveMultipleSelection = !disableMultipleRowSelection || checkboxSelection;
+  const canHaveMultipleSelection = (0, _utils.isMultipleRowSelectionEnabled)(props);
   const visibleRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
   const expandMouseRowRangeSelection = React.useCallback(id => {
     let endId = id;
@@ -101,7 +101,7 @@ const useGridRowSelection = (apiRef, props) => {
    * API METHODS
    */
   const setRowSelectionModel = React.useCallback(model => {
-    if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && !props.checkboxSelection && Array.isArray(model) && model.length > 1) {
+    if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && !canHaveMultipleSelection && Array.isArray(model) && model.length > 1) {
       throw new Error(['MUI: `rowSelectionModel` can only contain 1 item in DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock multiple selection.'].join('\n'));
     }
     const currentModel = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
@@ -112,7 +112,7 @@ const useGridRowSelection = (apiRef, props) => {
       }));
       apiRef.current.forceUpdate();
     }
-  }, [apiRef, logger, props.rowSelection, props.signature, props.checkboxSelection]);
+  }, [apiRef, logger, props.rowSelection, props.signature, canHaveMultipleSelection]);
   const isRowSelected = React.useCallback(id => (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state).includes(id), [apiRef]);
   const isRowSelectable = React.useCallback(id => {
     if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
@@ -263,24 +263,24 @@ const useGridRowSelection = (apiRef, props) => {
     if (rowNode.type === 'pinnedRow') {
       return;
     }
-    if (event.shiftKey && (canHaveMultipleSelection || checkboxSelection)) {
+    if (event.shiftKey && canHaveMultipleSelection) {
       expandMouseRowRangeSelection(params.id);
     } else {
       handleSingleRowSelection(params.id, event);
     }
-  }, [disableRowSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandMouseRowRangeSelection, handleSingleRowSelection]);
+  }, [disableRowSelectionOnClick, canHaveMultipleSelection, apiRef, expandMouseRowRangeSelection, handleSingleRowSelection]);
   const preventSelectionOnShift = React.useCallback((params, event) => {
     if (canHaveMultipleSelection && event.shiftKey) {
       window.getSelection()?.removeAllRanges();
     }
   }, [canHaveMultipleSelection]);
   const handleRowSelectionCheckboxChange = React.useCallback((params, event) => {
-    if (event.nativeEvent.shiftKey) {
+    if (canHaveMultipleSelection && event.nativeEvent.shiftKey) {
       expandMouseRowRangeSelection(params.id);
     } else {
-      apiRef.current.selectRow(params.id, params.value);
+      apiRef.current.selectRow(params.id, params.value, !canHaveMultipleSelection);
     }
-  }, [apiRef, expandMouseRowRangeSelection]);
+  }, [apiRef, expandMouseRowRangeSelection, canHaveMultipleSelection]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
     const shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
     const rowsToBeSelected = shouldLimitSelectionToCurrentPage ? (0, _pagination.gridPaginatedVisibleSortedGridRowIdsSelector)(apiRef) : (0, _gridFilterSelector.gridExpandedSortedRowIdsSelector)(apiRef);

package/node/hooks/features/rowSelection/utils.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isMultipleRowSelectionEnabled = isMultipleRowSelectionEnabled;
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+function isMultipleRowSelectionEnabled(props) {
+  if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid) {
+    // DataGrid Community has multiple row selection enabled only if checkbox selection is enabled.
+    return props.checkboxSelection && props.disableMultipleRowSelection !== true;
+  }
+  return !props.disableMultipleRowSelection;
+}

package/node/hooks/utils/useGridAriaAttributes.js

@@ -10,6 +10,7 @@ var _useGridRootProps = require("./useGridRootProps");
 var _gridColumnGroupsSelector = require("../features/columnGrouping/gridColumnGroupsSelector");
 var _gridRowsSelector = require("../features/rows/gridRowsSelector");
 var _useGridPrivateApiContext = require("./useGridPrivateApiContext");
+var _utils = require("../features/rowSelection/utils");
 const useGridAriaAttributes = () => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -25,7 +26,7 @@ const useGridAriaAttributes = () => {
     role,
     'aria-colcount': visibleColumns.length,
     'aria-rowcount': headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
-    'aria-multiselectable': !rootProps.disableMultipleRowSelection
+    'aria-multiselectable': (0, _utils.isMultipleRowSelectionEnabled)(rootProps)
   };
 };
 exports.useGridAriaAttributes = useGridAriaAttributes;

package/node/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.0.0-alpha.5",
+  "version": "7.0.0-alpha.6",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,8 +37,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.5",
-    "@mui/system": "^5.14.20",
-    "@mui/utils": "^5.14.20",
+    "@mui/system": "^5.15.0",
+    "@mui/utils": "^5.15.0",
     "clsx": "^2.0.0",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8"