@mui/x-data-grid 5.16.0 → 5.17.2

package/node/components/GridRow.js

@@ -47,9 +47,11 @@ var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 
 var _densitySelector = require("../hooks/features/density/densitySelector");
 
+var _utils = require("../utils/utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
 
 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); }
 
@@ -95,6 +97,7 @@ function GridRow(props) {
     row,
     index,
     style: styleProp,
+    position,
     rowHeight,
     className,
     visibleColumns,
@@ -140,9 +143,9 @@ function GridRow(props) {
   React.useLayoutEffect(() => {
     if (rowHeight === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight, position);
     }
-  }, [apiRef, rowHeight, rowId]);
+  }, [apiRef, rowHeight, rowId, position]);
   React.useLayoutEffect(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the
@@ -167,11 +170,11 @@ function GridRow(props) {
     const resizeObserver = new ResizeObserver(entries => {
       const [entry] = entries;
       const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height, position);
     });
     resizeObserver.observe(rootElement);
     return () => resizeObserver.disconnect();
-  }, [apiRef, currentPage.range, index, rowHeight, rowId]);
+  }, [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
@@ -227,43 +230,9 @@ function GridRow(props) {
 
     publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
-  const style = (0, _extends2.default)({}, styleProp, {
-    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
-    // max-height doesn't support "auto"
-    minHeight: rowHeight
-  });
-  const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
-
-  if (sizes != null && sizes.spacingTop) {
-    const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
-    style[property] = sizes.spacingTop;
-  }
-
-  if (sizes != null && sizes.spacingBottom) {
-    const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
-    style[property] = sizes.spacingBottom;
-  }
-
-  let rowClassName = null;
-
-  if (typeof rootProps.getRowClassName === 'function') {
-    const indexRelativeToCurrentPage = index - currentPage.range.firstRowIndex;
-    const rowParams = (0, _extends2.default)({}, apiRef.current.getRowParams(rowId), {
-      isFirstVisible: indexRelativeToCurrentPage === 0,
-      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-      indexRelativeToCurrentPage
-    });
-    rowClassName = rootProps.getRowClassName(rowParams);
-  }
+  const getCell = React.useCallback((column, cellProps) => {
+    var _rootProps$components;
 
-  const cells = [];
-
-  for (let i = 0; i < renderedColumns.length; i += 1) {
-    const column = renderedColumns[i];
-    const indexRelativeToAllColumns = firstColumnToRender + i;
-    const isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
-    const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
-    const showRightBorder = !isLastColumn ? rootProps.showCellRightBorder : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
     const cellParams = apiRef.current.getCellParams(rowId, column.field);
     const classNames = [];
     const disableDragEvents = rootProps.disableColumnReorder && column.disableReorder || !rootProps.rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
@@ -312,53 +281,139 @@ function GridRow(props) {
 
     const hasFocus = cellFocus !== null && cellFocus.id === rowId && cellFocus.field === column.field;
     const tabIndex = cellTabIndex !== null && cellTabIndex.id === rowId && cellTabIndex.field === column.field && cellParams.cellMode === 'view' ? 0 : -1;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.Cell, (0, _extends2.default)({
+      value: cellParams.value,
+      field: column.field,
+      width: cellProps.width,
+      rowId: rowId,
+      height: rowHeight,
+      showRightBorder: cellProps.showRightBorder,
+      formattedValue: cellParams.formattedValue,
+      align: column.align || 'left',
+      cellMode: cellParams.cellMode,
+      colIndex: cellProps.indexRelativeToAllColumns,
+      isEditable: cellParams.isEditable,
+      hasFocus: hasFocus,
+      tabIndex: tabIndex,
+      className: (0, _clsx.default)(classNames),
+      colSpan: cellProps.colSpan,
+      disableDragEvents: disableDragEvents
+    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
+      children: content
+    }), column.field);
+  }, [apiRef, cellTabIndex, editRowsState, cellFocus, rootProps, row, rowHeight, rowId, treeDepth, sortModel.length]);
+  const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+  let minHeight = rowHeight;
+
+  if (minHeight === 'auto' && sizes) {
+    let numberOfBaseSizes = 0;
+    const maximumSize = Object.entries(sizes).reduce((acc, [key, size]) => {
+      const isBaseHeight = /^base[A-Z]/.test(key);
+
+      if (!isBaseHeight) {
+        return acc;
+      }
+
+      numberOfBaseSizes += 1;
+
+      if (size > acc) {
+        return size;
+      }
+
+      return acc;
+    }, 0);
+
+    if (maximumSize > 0 && numberOfBaseSizes > 1) {
+      minHeight = maximumSize;
+    }
+  }
+
+  const style = (0, _extends2.default)({}, styleProp, {
+    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
+    // max-height doesn't support "auto"
+    minHeight
+  });
+
+  if (sizes != null && sizes.spacingTop) {
+    const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+    style[property] = sizes.spacingTop;
+  }
+
+  if (sizes != null && sizes.spacingBottom) {
+    const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
+    style[property] = sizes.spacingBottom;
+  }
+
+  const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
+
+  if (typeof rootProps.getRowClassName === 'function') {
+    var _currentPage$range;
+
+    const indexRelativeToCurrentPage = index - (((_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0);
+    const rowParams = (0, _extends2.default)({}, apiRef.current.getRowParams(rowId), {
+      isFirstVisible: indexRelativeToCurrentPage === 0,
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+      indexRelativeToCurrentPage
+    });
+    rowClassNames.push(rootProps.getRowClassName(rowParams));
+  }
+
+  const randomNumber = (0, _utils.randomNumberBetween)(10000, 20, 80);
+  const cells = [];
+
+  for (let i = 0; i < renderedColumns.length; i += 1) {
+    const column = renderedColumns[i];
+    const indexRelativeToAllColumns = firstColumnToRender + i;
+    const isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
+    const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
+    const showRightBorder = !isLastColumn ? rootProps.showCellRightBorder : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
 
     if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
-      var _rootProps$components;
-
-      const {
-        colSpan,
-        width
-      } = cellColSpanInfo.cellProps;
-      cells.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.Cell, (0, _extends2.default)({
-        value: cellParams.value,
-        field: column.field,
-        width: width,
-        rowId: rowId,
-        height: rowHeight,
-        showRightBorder: showRightBorder,
-        formattedValue: cellParams.formattedValue,
-        align: column.align || 'left',
-        cellMode: cellParams.cellMode,
-        colIndex: indexRelativeToAllColumns,
-        isEditable: cellParams.isEditable,
-        hasFocus: hasFocus,
-        tabIndex: tabIndex,
-        className: (0, _clsx.default)(classNames),
-        colSpan: colSpan,
-        disableDragEvents: disableDragEvents
-      }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
-        children: content
-      }), column.field));
+      if (row) {
+        const {
+          colSpan,
+          width
+        } = cellColSpanInfo.cellProps;
+        const cellProps = {
+          width,
+          colSpan,
+          showRightBorder,
+          indexRelativeToAllColumns
+        };
+        cells.push(getCell(column, cellProps));
+      } else {
+        const {
+          width
+        } = cellColSpanInfo.cellProps;
+        const contentWidth = Math.round(randomNumber());
+        cells.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.SkeletonCell, {
+          width: width,
+          contentWidth: contentWidth,
+          field: column.field,
+          align: column.align
+        }, column.field));
+      }
     }
   }
 
   const emptyCellWidth = containerWidth - columnsTotalWidth;
+  const eventHandlers = row ? {
+    onClick: publishClick,
+    onDoubleClick: publish('rowDoubleClick', onDoubleClick),
+    onMouseEnter: publish('rowMouseEnter', onMouseEnter),
+    onMouseLeave: publish('rowMouseLeave', onMouseLeave)
+  } : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     ref: ref,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
-    className: (0, _clsx.default)(rowClassName, classes.root, className),
+    className: (0, _clsx.default)(...rowClassNames, classes.root, className),
     "aria-rowindex": ariaRowIndex,
     "aria-selected": selected,
-    style: style,
-    onClick: publishClick,
-    onDoubleClick: publish('rowDoubleClick', onDoubleClick),
-    onMouseEnter: publish('rowMouseEnter', onMouseEnter),
-    onMouseLeave: publish('rowMouseLeave', onMouseLeave)
-  }, other, {
+    style: style
+  }, eventHandlers, other, {
     children: [cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
       width: emptyCellWidth
     })]
@@ -383,8 +438,9 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   index: _propTypes.default.number.isRequired,
   isLastVisible: _propTypes.default.bool,
   lastColumnToRender: _propTypes.default.number.isRequired,
+  position: _propTypes.default.oneOf(['center', 'left', 'right']).isRequired,
   renderedColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.object,
   rowHeight: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   selected: _propTypes.default.bool.isRequired,

package/node/components/cell/GridBooleanCell.js

@@ -144,7 +144,8 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
   tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: _propTypes.default.any
 } : void 0;

package/node/components/cell/GridCell.js

@@ -122,6 +122,14 @@ function GridCell(props) {
       onMouseUp(event);
     }
   }, [apiRef, field, onMouseUp, rowId]);
+  const publishMouseDown = React.useCallback(eventName => event => {
+    const params = apiRef.current.getCellParams(rowId, field || '');
+    apiRef.current.publishEvent(eventName, params, event);
+
+    if (onMouseDown) {
+      onMouseDown(event);
+    }
+  }, [apiRef, field, onMouseDown, rowId]);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
     if (!event.currentTarget.contains(event.target)) {
@@ -226,7 +234,7 @@ function GridCell(props) {
     tabIndex: (cellMode === 'view' || !isEditable) && !managesOwnFocus ? tabIndex : -1,
     onClick: publish('cellClick', onClick),
     onDoubleClick: publish('cellDoubleClick', onDoubleClick),
-    onMouseDown: publish('cellMouseDown', onMouseDown),
+    onMouseDown: publishMouseDown('cellMouseDown'),
     onMouseUp: publishMouseUp('cellMouseUp'),
     onKeyDown: publish('cellKeyDown', onKeyDown)
   }, draggableEventHandlers, other, {

package/node/components/cell/GridEditBooleanCell.js

@@ -185,7 +185,8 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
   tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: _propTypes.default.any
 } : void 0;

package/node/components/cell/GridEditDateCell.js

@@ -241,7 +241,8 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
   tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: _propTypes.default.any
 } : void 0;

package/node/components/cell/GridEditInputCell.js

@@ -204,7 +204,8 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   tabIndex: _propTypes.default.oneOf([-1, 0]),
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: _propTypes.default.any
 } : void 0;

package/node/components/cell/GridEditSingleSelectCell.js

@@ -288,7 +288,8 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: _propTypes.default.any
 } : void 0;

package/node/components/cell/GridSkeletonCell.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridSkeletonCell = GridSkeletonCell;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
+
+var _utils = require("@mui/material/utils");
+
+var _material = require("@mui/material");
+
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+
+var _gridClasses = require("../../constants/gridClasses");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["field", "align", "width", "contentWidth"];
+
+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 useUtilityClasses = ownerState => {
+  const {
+    align,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['cell', 'cellSkeleton', `cell--text${(0, _utils.capitalize)(align)}`]
+  };
+  return (0, _material.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+
+function GridSkeletonCell(props) {
+  const {
+    align,
+    width,
+    contentWidth
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = {
+    classes: rootProps.classes,
+    align
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
+    className: classes.root,
+    style: {
+      width
+    }
+  }, other, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+      width: `${contentWidth}%`
+    })
+  }));
+}
+
+process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  align: _propTypes.default.string.isRequired,
+  contentWidth: _propTypes.default.number.isRequired,
+  field: _propTypes.default.string.isRequired,
+  width: _propTypes.default.number.isRequired
+} : void 0;

package/node/components/cell/index.js

@@ -106,4 +106,17 @@ Object.keys(_GridActionsCellItem).forEach(function (key) {
       return _GridActionsCellItem[key];
     }
   });
+});
+
+var _GridSkeletonCell = require("./GridSkeletonCell");
+
+Object.keys(_GridSkeletonCell).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridSkeletonCell[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridSkeletonCell[key];
+    }
+  });
 });

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -211,7 +211,8 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: _propTypes.default.any
 } : void 0;

package/node/components/containers/GridRootStyles.js

@@ -47,6 +47,8 @@ const GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.cellContent}`]: styles.cellContent
   }, {
     [`& .${_gridClasses.gridClasses.cellCheckbox}`]: styles.cellCheckbox
+  }, {
+    [`& .${_gridClasses.gridClasses.cellSkeleton}`]: styles.cellSkeleton
   }, {
     [`& .${_gridClasses.gridClasses.checkboxInput}`]: styles.checkboxInput
   }, {

package/node/components/panel/GridColumnsPanel.js

@@ -9,8 +9,12 @@ exports.GridColumnsPanel = GridColumnsPanel;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var React = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _material = require("@mui/material");
 
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
@@ -45,6 +49,8 @@ var _gridClasses = require("../../constants/gridClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+const _excluded = ["sort"];
+
 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; }
@@ -84,6 +90,7 @@ const GridColumnsPanelRowRoot = (0, _styles.styled)('div', {
 const GridIconButtonRoot = (0, _styles.styled)(_IconButton.default)({
   justifyContent: 'flex-end'
 });
+const collator = new Intl.Collator();
 
 function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
@@ -98,6 +105,22 @@ function GridColumnsPanel(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
+  const {
+    sort
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const sortedColumns = React.useMemo(() => {
+    switch (sort) {
+      case 'asc':
+        return [...columns].sort((a, b) => collator.compare(a.headerName || a.field, b.headerName || b.field));
+
+      case 'desc':
+        return [...columns].sort((a, b) => -collator.compare(a.headerName || a.field, b.headerName || b.field));
+
+      default:
+        return columns;
+    }
+  }, [columns, sort]);
 
   const toggleColumn = event => {
     const {
@@ -132,16 +155,16 @@ function GridColumnsPanel(props) {
   }, []);
   const currentColumns = React.useMemo(() => {
     if (!searchValue) {
-      return columns;
+      return sortedColumns;
     }
 
     const searchValueToCheck = searchValue.toLowerCase();
-    return columns.filter(column => (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1);
-  }, [columns, searchValue]);
+    return sortedColumns.filter(column => (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1);
+  }, [sortedColumns, searchValue]);
   React.useEffect(() => {
     searchInputRef.current.focus();
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelHeader.GridPanelHeader, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseTextField, (0, _extends2.default)({
         label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
@@ -192,4 +215,12 @@ function GridColumnsPanel(props) {
       }))]
     })]
   }));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sort: _propTypes.default.oneOf(['asc', 'desc'])
+} : void 0;

package/node/constants/defaultGridSlotsComponents.js

@@ -74,6 +74,7 @@ const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = (0, _extends2.default)({}, DEFAULT_GR
   BaseTooltip: _Tooltip.default,
   BasePopper: _Popper.default,
   Cell: _components.GridCell,
+  SkeletonCell: _components.GridSkeletonCell,
   ColumnHeaderFilterIconButton: _components.GridColumnHeaderFilterIconButton,
   ColumnMenu: _components.GridColumnMenu,
   ErrorOverlay: _ErrorOverlay.ErrorOverlay,

package/node/constants/gridClasses.js

@@ -12,5 +12,5 @@ function getDataGridUtilityClass(slot) {
   return (0, _material.generateUtilityClass)('MuiDataGrid', slot);
 }
 
-const gridClasses = (0, _material.generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+const gridClasses = (0, _material.generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
 exports.gridClasses = gridClasses;

package/node/hooks/features/editRows/useGridCellEditing.new.js

@@ -29,6 +29,8 @@ var _warning = require("../../../utils/warning");
 
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 
+var _utils = require("../../../utils/utils");
+
 var _gridEditCellParams = require("../../../models/params/gridEditCellParams");
 
 const _excluded = ["id", "field"],
@@ -339,7 +341,11 @@ const useGridCellEditing = (apiRef, props) => {
     if (error || isProcessingProps) {
       // Attempt to change cell mode to "view" was not successful
       // Update previous mode to allow another attempt
-      prevCellModesModel.current[id][field].mode = _gridEditRowModel.GridCellModes.Edit;
+      prevCellModesModel.current[id][field].mode = _gridEditRowModel.GridCellModes.Edit; // Revert the mode in the cellModesModel prop back to "edit"
+
+      updateFieldInCellModesModel(id, field, {
+        mode: _gridEditRowModel.GridCellModes.Edit
+      });
       return;
     }
 
@@ -456,7 +462,8 @@ const useGridCellEditing = (apiRef, props) => {
     const idToIdLookup = (0, _gridRowsSelector.gridRowsIdToIdLookupSelector)(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
 
     const copyOfPrevCellModes = prevCellModesModel.current;
-    prevCellModesModel.current = cellModesModel;
+    prevCellModesModel.current = (0, _utils.deepClone)(cellModesModel); // Do a deep-clone because the attributes might be changed later
+
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
         var _copyOfPrevCellModes$, _copyOfPrevCellModes$2, _idToIdLookup$id;