@mui/x-data-grid 6.7.0 → 6.9.0

package/modern/utils/Store.js

@@ -0,0 +1,24 @@
+export class Store {
+  static create(value) {
+    return new Store(value);
+  }
+  constructor(_value) {
+    this.value = void 0;
+    this.listeners = void 0;
+    this.subscribe = fn => {
+      this.listeners.add(fn);
+      return () => {
+        this.listeners.delete(fn);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.value;
+    };
+    this.update = value => {
+      this.value = value;
+      this.listeners.forEach(l => l(value));
+    };
+    this.value = _value;
+    this.listeners = new Set();
+  }
+}

package/modern/utils/createSelector.js

@@ -4,14 +4,82 @@ const cacheContainer = {
   cache: new WeakMap()
 };
 const missingInstanceIdWarning = buildWarning(['MUI: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, e.g. `mySelector(apiRef)`, or pass the instance ID explicitly, e.g `mySelector(state, apiRef.current.instanceId)`.']);
-export const createSelector = (...args) => {
+function checkIsAPIRef(value) {
+  return 'current' in value && 'instanceId' in value.current;
+}
+const DEFAULT_INSTANCE_ID = {
+  id: 'default'
+};
+export const createSelector = (a, b, c, d, e, f, ...rest) => {
+  if (rest.length > 0) {
+    throw new Error('Unsupported number of selectors');
+  }
+  let selector;
+  if (a && b && c && d && e && f) {
+    selector = (stateOrApiRef, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, instanceId);
+      const vb = b(state, instanceId);
+      const vc = c(state, instanceId);
+      const vd = d(state, instanceId);
+      const ve = e(state, instanceId);
+      return f(va, vb, vc, vd, ve);
+    };
+  } else if (a && b && c && d && e) {
+    selector = (stateOrApiRef, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, instanceId);
+      const vb = b(state, instanceId);
+      const vc = c(state, instanceId);
+      const vd = d(state, instanceId);
+      return e(va, vb, vc, vd);
+    };
+  } else if (a && b && c && d) {
+    selector = (stateOrApiRef, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, instanceId);
+      const vb = b(state, instanceId);
+      const vc = c(state, instanceId);
+      return d(va, vb, vc);
+    };
+  } else if (a && b && c) {
+    selector = (stateOrApiRef, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, instanceId);
+      const vb = b(state, instanceId);
+      return c(va, vb);
+    };
+  } else if (a && b) {
+    selector = (stateOrApiRef, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, instanceId);
+      return b(va);
+    };
+  } else {
+    throw new Error('Missing arguments');
+  }
+
+  // We use this property to detect if the selector was created with createSelector
+  // or it's only a simple function the receives the state and returns part of it.
+  selector.acceptsApiRef = true;
+  return selector;
+};
+export const createSelectorMemoized = (...args) => {
   const selector = (...selectorArgs) => {
     const [stateOrApiRef, instanceId] = selectorArgs;
-    const isApiRef = !!stateOrApiRef.current;
-    const cacheKey = isApiRef ? stateOrApiRef.current.instanceId : instanceId ?? {
-      id: 'default'
-    };
-    const state = isApiRef ? stateOrApiRef.current.state : stateOrApiRef;
+    const isAPIRef = checkIsAPIRef(stateOrApiRef);
+    const cacheKey = isAPIRef ? stateOrApiRef.current.instanceId : instanceId ?? DEFAULT_INSTANCE_ID;
+    const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
     if (process.env.NODE_ENV !== 'production') {
       if (cacheKey.id === 'default') {
         missingInstanceIdWarning();

package/modern/utils/doesSupportPreventScroll.js

@@ -0,0 +1,13 @@
+// Based on https://stackoverflow.com/a/59518678
+let cachedSupportsPreventScroll;
+export function doesSupportPreventScroll() {
+  if (cachedSupportsPreventScroll === undefined) {
+    document.createElement('div').focus({
+      get preventScroll() {
+        cachedSupportsPreventScroll = true;
+        return false;
+      }
+    });
+  }
+  return cachedSupportsPreventScroll;
+}

package/modern/utils/fastMemo.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { fastObjectShallowCompare } from './fastObjectShallowCompare';
+export function fastMemo(component) {
+  return /*#__PURE__*/React.memo(component, fastObjectShallowCompare);
+}

package/modern/utils/fastObjectShallowCompare.js

@@ -0,0 +1,32 @@
+const is = Object.is;
+export function fastObjectShallowCompare(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (!(a instanceof Object) || !(b instanceof Object)) {
+    return false;
+  }
+  let aLength = 0;
+  let bLength = 0;
+
+  /* eslint-disable no-restricted-syntax */
+  /* eslint-disable guard-for-in */
+  for (const key in a) {
+    aLength += 1;
+    if (!is(a[key], b[key])) {
+      return false;
+    }
+    if (!(key in b)) {
+      return false;
+    }
+  }
+
+  /* eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars */
+  for (const _ in b) {
+    bLength += 1;
+  }
+  /* eslint-enable no-restricted-syntax */
+  /* eslint-enable guard-for-in */
+
+  return aLength === bLength;
+}

package/modern/utils/keyboardUtils.js

@@ -10,11 +10,13 @@ export const isDeleteKeys = key => key === 'Delete' || key === 'Backspace';
 
 // Non printable keys have a name, e.g. "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
-// We need to ignore shortcuts, for example: select all:
+// So event.key.length === 1 is often enough.
+//
+// However, we also need to ignore shortcuts, for example: select all:
 // - Windows: Ctrl+A, event.ctrlKey is true
 // - macOS: ⌘ Command+A, event.metaKey is true
 export function isPrintableKey(event) {
-  return event.key.length === 1 && event.ctrlKey === false && event.metaKey === false;
+  return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
 }
 export const GRID_MULTIPLE_SELECTION_KEYS = ['Meta', 'Control', 'Shift'];
 export const GRID_CELL_EXIT_EDIT_MODE_KEYS = ['Enter', 'Escape', 'Tab'];

package/node/components/GridColumnHeaders.js

@@ -9,6 +9,7 @@ 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 _fastMemo = require("../utils/fastMemo");
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
 var _GridBaseColumnHeaders = require("./columnHeaders/GridBaseColumnHeaders");
 var _GridColumnHeadersInner = require("./columnHeaders/GridColumnHeadersInner");
@@ -68,7 +69,6 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
     }))
   }));
 });
-exports.GridColumnHeaders = GridColumnHeaders;
 process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -108,4 +108,6 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
   minColumnIndex: _propTypes.default.number,
   sortColumnLookup: _propTypes.default.object.isRequired,
   visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
-} : void 0;
+} : void 0;
+const MemoizedGridColumnHeaders = (0, _fastMemo.fastMemo)(GridColumnHeaders);
+exports.GridColumnHeaders = MemoizedGridColumnHeaders;

package/node/components/GridRow.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
+var _fastMemo = require("../utils/fastMemo");
 var _gridEditRowModel = require("../models/gridEditRowModel");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
@@ -26,10 +27,10 @@ var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelecto
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridColumnGroupsSelector = require("../hooks/features/columnGrouping/gridColumnGroupsSelector");
 var _utils2 = require("../utils/utils");
+var _GridCell = require("./cell/GridCell");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"],
-  _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "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); }
 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 => {
@@ -75,8 +76,6 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       containerWidth,
       firstColumnToRender,
       isLastVisible = false,
-      focusedCell,
-      tabbableCell,
       onClick,
       onDoubleClick,
       onMouseEnter,
@@ -191,78 +190,27 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
     slots,
     slotProps,
-    classes: rootClasses,
-    disableColumnReorder,
-    getCellClassName
+    disableColumnReorder
   } = rootProps;
+  const CellComponent = slots.cell === _GridCell.GridCellV7 ? _GridCell.GridCellV7 : _GridCell.GridCellWrapper;
   const rowReordering = rootProps.rowReordering;
-  const CellComponent = slots.cell;
-  const getCell = React.useCallback((column, cellProps) => {
-    const cellParams = apiRef.current.getCellParams(rowId, column.field);
-    const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
-      id: rowId,
-      field: column.field
-    });
+  const getCell = (column, cellProps) => {
     const disableDragEvents = disableColumnReorder && column.disableReorder || !rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
-    if (column.cellClassName) {
-      classNames.push((0, _clsx.default)(typeof column.cellClassName === 'function' ? column.cellClassName(cellParams) : column.cellClassName));
-    }
-    const editCellState = editRowsState[rowId] ? editRowsState[rowId][column.field] : null;
-    let content;
-    if (editCellState == null && column.renderCell) {
-      content = column.renderCell((0, _extends2.default)({}, cellParams, {
-        api: apiRef.current
-      }));
-      // TODO move to GridCell
-      classNames.push((0, _clsx.default)(_gridClasses.gridClasses['cell--withRenderer'], rootClasses?.['cell--withRenderer']));
-    }
-    if (editCellState != null && column.renderEditCell) {
-      const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
-
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      const editCellStateRest = (0, _objectWithoutPropertiesLoose2.default)(editCellState, _excluded2);
-      const params = (0, _extends2.default)({}, cellParams, {
-        row: updatedRow
-      }, editCellStateRest, {
-        api: apiRef.current
-      });
-      content = column.renderEditCell(params);
-      // TODO move to GridCell
-      classNames.push((0, _clsx.default)(_gridClasses.gridClasses['cell--editing'], rootClasses?.['cell--editing']));
-    }
-    if (getCellClassName) {
-      // TODO move to GridCell
-      classNames.push(getCellClassName(cellParams));
-    }
-    const hasFocus = focusedCell === column.field;
-    const tabIndex = tabbableCell === column.field ? 0 : -1;
-    const isSelected = apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
-      id: rowId,
-      field: column.field
-    });
+    const editCellState = editRowsState[rowId]?.[column.field] ?? null;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(CellComponent, (0, _extends2.default)({
-      value: cellParams.value,
-      field: column.field,
+      column: column,
       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,
-      isSelected: isSelected,
-      hasFocus: hasFocus,
-      tabIndex: tabIndex,
-      className: (0, _clsx.default)(classNames),
       colSpan: cellProps.colSpan,
-      disableDragEvents: disableDragEvents
-    }, slotProps?.cell, {
-      children: content
-    }), column.field);
-  }, [apiRef, rowId, disableColumnReorder, rowReordering, sortModel.length, treeDepth, editRowsState, getCellClassName, focusedCell, tabbableCell, CellComponent, rowHeight, slotProps?.cell, rootClasses]);
-  const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+      disableDragEvents: disableDragEvents,
+      editCellState: editCellState
+    }, slotProps?.cell), column.field);
+  };
+  const sizes = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _extends2.default)({}, apiRef.current.unstable_getRowInternalSizes(rowId)), _useGridSelector.objectShallowCompare);
   let minHeight = rowHeight;
   if (minHeight === 'auto' && sizes) {
     let numberOfBaseSizes = 0;
@@ -311,7 +259,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
   const randomNumber = (0, _utils2.randomNumberBetween)(10000, 20, 80);
-  const rowType = apiRef.current.getRowNode(rowId).type;
+  const rowNode = apiRef.current.getRowNode(rowId);
+  if (!rowNode) {
+    return null;
+  }
+  const rowType = rowNode.type;
   const cells = [];
   for (let i = 0; i < renderedColumns.length; i += 1) {
     const column = renderedColumns[i];
@@ -335,7 +287,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
           width
         } = cellColSpanInfo.cellProps;
         const contentWidth = Math.round(randomNumber());
-        cells.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.skeletonCell, {
+        cells.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(slots.skeletonCell, {
           width: width,
           contentWidth: contentWidth,
           field: column.field,
@@ -366,14 +318,13 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     })]
   }));
 });
-exports.GridRow = GridRow;
 process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  containerWidth: _propTypes.default.number,
-  firstColumnToRender: _propTypes.default.number,
+  containerWidth: _propTypes.default.number.isRequired,
+  firstColumnToRender: _propTypes.default.number.isRequired,
   /**
    * Determines which cell has focus.
    * If `null`, no cell in this row has focus.
@@ -383,23 +334,25 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
    */
-  index: _propTypes.default.number,
+  index: _propTypes.default.number.isRequired,
   isLastVisible: _propTypes.default.bool,
-  lastColumnToRender: _propTypes.default.number,
+  lastColumnToRender: _propTypes.default.number.isRequired,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
   onMouseEnter: _propTypes.default.func,
   onMouseLeave: _propTypes.default.func,
-  position: _propTypes.default.oneOf(['center', 'left', 'right']),
-  renderedColumns: _propTypes.default.arrayOf(_propTypes.default.object),
+  position: _propTypes.default.oneOf(['center', 'left', 'right']).isRequired,
+  renderedColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   row: _propTypes.default.object,
-  rowHeight: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
-  rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  selected: _propTypes.default.bool,
+  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,
   /**
    * Determines which cell should be tabbable by having tabIndex=0.
    * If `null`, no cell in this row is in the tab sequence.
    */
   tabbableCell: _propTypes.default.string,
-  visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object)
-} : void 0;
+  visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
+} : void 0;
+const MemoizedGridRow = (0, _fastMemo.fastMemo)(GridRow);
+exports.GridRow = MemoizedGridRow;