@mui/x-data-grid 7.24.0 → 7.25.0

package/modern/utils/roundToDecimalPlaces.js

@@ -0,0 +1,3 @@
+export function roundToDecimalPlaces(value, decimals) {
+  return Math.round(value * 10 ** decimals) / 10 ** decimals;
+}

package/modern/utils/utils.js

@@ -196,4 +196,9 @@ export function deepClone(obj) {
  * of a `eslint-disable-next-line react-hooks/exhaustive-deps` because
  * that hint disables checks on all values instead of just one.
  */
-export function eslintUseValue(_) {}
+export function eslintUseValue(_) {}
+export const runIf = (condition, fn) => params => {
+  if (condition) {
+    fn(params);
+  }
+};

package/node/DataGrid/DataGrid.js

@@ -25,17 +25,11 @@ const configuration = {
     useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes
   }
 };
-let propValidators;
-if (process.env.NODE_ENV !== 'production') {
-  propValidators = [..._propValidation.propValidatorsDataGrid,
-  // Only validate in MIT version
-  props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
-}
 const DataGridRaw = (0, _forwardRef.forwardRef)(function DataGrid(inProps, ref) {
   const props = (0, _useDataGridProps.useDataGridProps)(inProps);
   const privateApiRef = (0, _useDataGridComponent.useDataGridComponent)(props.apiRef, props);
   if (process.env.NODE_ENV !== 'production') {
-    (0, _propValidation.validateProps)(props, propValidators);
+    (0, _propValidation.validateProps)(props, _propValidation.propValidatorsDataGrid);
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridContextProvider.GridContextProvider, {
     privateApiRef: privateApiRef,

package/node/components/GridRow.js

@@ -14,6 +14,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _isObjectEmpty = require("@mui/x-internals/isObjectEmpty");
 var _gridEditRowModel = require("../models/gridEditRowModel");
 var _gridClasses = require("../constants/gridClasses");
 var _composeGridClasses = require("../utils/composeGridClasses");
@@ -33,8 +34,16 @@ var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _createSelector = require("../utils/createSelector");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+const isRowReorderingEnabledSelector = (0, _createSelector.createSelectorV8)(_gridEditingSelectors.gridEditRowsStateSelector, (editRows, rowReordering) => {
+  if (!rowReordering) {
+    return false;
+  }
+  const isEditingRows = !(0, _isObjectEmpty.isObjectEmpty)(editRows);
+  return !isEditingRows;
+});
 const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const {
       selected,
@@ -73,10 +82,11 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
   const treeDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector);
   const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
-  const editRowsState = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridEditRowsStateSelector);
+  const rowReordering = rootProps.rowReordering;
+  const isRowReorderingEnabled = (0, _useGridSelector.useGridSelectorV8)(apiRef, isRowReorderingEnabledSelector, rowReordering);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
-  const editing = apiRef.current.getRowMode(rowId) === _gridEditRowModel.GridRowModes.Edit;
+  const editing = (0, _useGridSelector.useGridSelectorV8)(apiRef, _gridEditingSelectors.gridRowIsEditingSelector, rowId);
   const editable = rootProps.editMode === _gridEditRowModel.GridEditModes.Row;
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < firstColumnIndex;
@@ -153,7 +163,6 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     slotProps,
     disableColumnReorder
   } = rootProps;
-  const rowReordering = rootProps.rowReordering;
   const heightEntry = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _extends2.default)({}, apiRef.current.getRowHeightEntry(rowId)), _useGridSelector.objectShallowCompare);
   const style = React.useMemo(() => {
     if (isNotVisible) {
@@ -196,6 +205,11 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
+
+  /* Start of rendering */
+  if (!rowNode) {
+    return null;
+  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _constants.PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
@@ -213,14 +227,12 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
         align: column.align
       }, column.field);
     }
-    const editCellState = editRowsState[rowId]?.[column.field] ?? null;
 
     // when the cell is a reorder cell we are not allowing to reorder the col
     // fixes https://github.com/mui/mui-x/issues/11126
     const isReorderCell = column.field === '__reorder__';
-    const isEditingRows = Object.keys(editRowsState).length > 0;
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
-    const canReorderRow = rowReordering && !sortModel.length && treeDepth <= 1 && !isEditingRows;
+    const canReorderRow = isRowReorderingEnabled && !sortModel.length && treeDepth <= 1;
     const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
     const cellIsNotVisible = pinnedPosition === _constants.PinnedColumnPosition.VIRTUAL;
     const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
@@ -233,20 +245,15 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
       colIndex: indexRelativeToAllColumns,
       colSpan: colSpan,
       disableDragEvents: disableDragEvents,
-      editCellState: editCellState,
       isNotVisible: cellIsNotVisible,
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
       showLeftBorder: showLeftBorder,
-      showRightBorder: showRightBorder
+      showRightBorder: showRightBorder,
+      row: row,
+      rowNode: rowNode
     }, slotProps?.cell), column.field);
   };
-
-  /* Start of rendering */
-
-  if (!rowNode) {
-    return null;
-  }
   const leftCells = pinnedColumns.left.map((column, i) => {
     const indexRelativeToAllColumns = i;
     return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, _constants.PinnedColumnPosition.LEFT);
@@ -324,7 +331,6 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isNotVisible: _propTypes.default.bool.isRequired,
   lastColumnIndex: _propTypes.default.number.isRequired,
   offsetLeft: _propTypes.default.number.isRequired,
-  offsetTop: _propTypes.default.number,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
   onMouseEnter: _propTypes.default.func,

package/node/components/cell/GridCell.js

@@ -19,15 +19,16 @@ var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
 var _gridClasses = require("../../constants/gridClasses");
 var _models = require("../../models");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
-var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
 var _gridColumnsInterfaces = require("../../hooks/features/columns/gridColumnsInterfaces");
 var _constants = require("../../internals/constants");
 var _gridRowSpanningSelectors = require("../../hooks/features/rows/gridRowSpanningSelectors");
+var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _gridEditingSelectors = require("../../hooks/features/editing/gridEditingSelectors");
 var _utils2 = require("../../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "showRightBorder", "showLeftBorder", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "row", "rowId", "rowNode", "align", "children", "colIndex", "width", "className", "style", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "showRightBorder", "showLeftBorder", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 const gridPinnedColumnPositionLookup = exports.gridPinnedColumnPositionLookup = {
   [_constants.PinnedColumnPosition.LEFT]: _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT,
@@ -35,30 +36,6 @@ const gridPinnedColumnPositionLookup = exports.gridPinnedColumnPositionLookup =
   [_constants.PinnedColumnPosition.NONE]: undefined,
   [_constants.PinnedColumnPosition.VIRTUAL]: undefined
 };
-const EMPTY_CELL_PARAMS = {
-  id: -1,
-  field: '__unset__',
-  row: {},
-  rowNode: {
-    id: -1,
-    depth: 0,
-    type: 'leaf',
-    parent: -1,
-    groupingKey: null
-  },
-  colDef: {
-    type: 'string',
-    field: '__unset__',
-    computedWidth: 0
-  },
-  cellMode: _models.GridCellModes.View,
-  hasFocus: false,
-  tabIndex: -1,
-  value: null,
-  formattedValue: '__unset__',
-  isEditable: false,
-  api: {}
-};
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -82,8 +59,9 @@ let warnedOnce = false;
 const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   const {
       column,
+      row,
       rowId,
-      editCellState,
+      rowNode,
       align,
       colIndex,
       width,
@@ -107,22 +85,29 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
       onDragOver
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const field = column.field;
-  const cellParams = (0, _useGridSelector.useGridSelector)(apiRef, () => {
-    // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
-    // associated with `rowId`/`fieldId`, but this selector runs after the state has been
-    // updated, while `rowId`/`fieldId` reference an entry in the old state.
-    const row = apiRef.current.getRow(rowId);
-    if (!row) {
-      return EMPTY_CELL_PARAMS;
-    }
-    const result = apiRef.current.getCellParams(rowId, field);
-    result.api = apiRef.current;
-    return result;
-  }, _useGridSelector.objectShallowCompare);
+  const editCellState = (0, _useGridSelector.useGridSelectorV8)(apiRef, _gridEditingSelectors.gridEditCellStateSelector, {
+    rowId,
+    field
+  });
+  const cellMode = editCellState ? _models.GridCellModes.Edit : _models.GridCellModes.View;
+  const cellParams = apiRef.current.getCellParamsForRow(rowId, field, row, {
+    colDef: column,
+    cellMode,
+    rowNode: rowNode,
+    tabIndex: (0, _useGridSelector.useGridSelector)(apiRef, () => {
+      const cellTabIndex = (0, _gridFocusStateSelector.gridTabIndexCellSelector)(apiRef);
+      return cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === rowId ? 0 : -1;
+    }),
+    hasFocus: (0, _useGridSelector.useGridSelector)(apiRef, () => {
+      const focus = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
+      return focus?.id === rowId && focus.field === field;
+    })
+  });
+  cellParams.api = apiRef.current;
   const isSelected = (0, _useGridSelector.useGridSelector)(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
     id: rowId,
     field
@@ -130,7 +115,6 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   const hiddenCells = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSpanningSelectors.gridRowSpanningHiddenCellsSelector);
   const spannedCells = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSpanningSelectors.gridRowSpanningSpannedCellsSelector);
   const {
-    cellMode,
     hasFocus,
     isEditable = false,
     value
@@ -252,9 +236,6 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
       }, style)
     });
   }
-  if (cellParams === EMPTY_CELL_PARAMS) {
-    return null;
-  }
   let handleFocus = other.onFocus;
   if (process.env.NODE_ENV === 'test' && rootProps.experimentalFeatures?.warnIfFocusStateIsNotSynced) {
     handleFocus = event => {
@@ -338,16 +319,12 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   colSpan: _propTypes.default.number,
   column: _propTypes.default.object.isRequired,
   disableDragEvents: _propTypes.default.bool,
-  editCellState: _propTypes.default.shape({
-    changeReason: _propTypes.default.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
-    isProcessingProps: _propTypes.default.bool,
-    isValidating: _propTypes.default.bool,
-    value: _propTypes.default.any
-  }),
   isNotVisible: _propTypes.default.bool.isRequired,
   pinnedOffset: _propTypes.default.number,
   pinnedPosition: _propTypes.default.oneOf([0, 1, 2, 3]).isRequired,
+  row: _propTypes.default.object.isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  rowNode: _propTypes.default.object.isRequired,
   showLeftBorder: _propTypes.default.bool.isRequired,
   showRightBorder: _propTypes.default.bool.isRequired,
   width: _propTypes.default.number.isRequired

package/node/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -5,12 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridColumnHeaderFilterIconButton = GridColumnHeaderFilterIconButton;
+exports.GridColumnHeaderFilterIconButton = GridColumnHeaderFilterIconButtonWrapped;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
-var _hooks = require("../../hooks");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
 var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -27,6 +27,21 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
+function GridColumnHeaderFilterIconButtonWrapped(props) {
+  if (!props.counter) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeaderFilterIconButton, (0, _extends2.default)({}, props));
+}
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButtonWrapped.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: _propTypes.default.number,
+  field: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func
+} : void 0;
 function GridColumnHeaderFilterIconButton(props) {
   const {
     counter,
@@ -39,8 +54,8 @@ function GridColumnHeaderFilterIconButton(props) {
     classes: rootProps.classes
   });
   const classes = useUtilityClasses(ownerState);
-  const preferencePanel = (0, _hooks.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
   const labelId = (0, _utils.unstable_useId)();
+  const isOpen = (0, _useGridSelector.useGridSelectorV8)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelSelectorWithLabel, labelId);
   const panelId = (0, _utils.unstable_useId)();
   const toggleFilter = React.useCallback(event => {
     event.preventDefault();
@@ -61,7 +76,6 @@ function GridColumnHeaderFilterIconButton(props) {
   if (!counter) {
     return null;
   }
-  const open = preferencePanel.open && preferencePanel.labelId === labelId;
   const iconButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
     id: labelId,
     onClick: toggleFilter,
@@ -70,8 +84,8 @@ function GridColumnHeaderFilterIconButton(props) {
     size: "small",
     tabIndex: -1,
     "aria-haspopup": "menu",
-    "aria-expanded": open,
-    "aria-controls": open ? panelId : undefined
+    "aria-expanded": isOpen,
+    "aria-controls": isOpen ? panelId : undefined
   }, rootProps.slotProps?.baseIconButton, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnFilteredIcon, {
       className: classes.icon,

package/node/components/containers/GridRootStyles.js

@@ -45,50 +45,76 @@ const ignoreSsrWarning = '/* emotion-disable-server-rendering-unsafe-selector-wa
 const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'Root',
-  overridesResolver: (props, styles) => [{
+  overridesResolver: (props, styles) => [
+  // Root overrides
+  styles.root, {
     [`&.${_gridClasses.gridClasses.autoHeight}`]: styles.autoHeight
   }, {
-    [`&.${_gridClasses.gridClasses.aggregationColumnHeader}`]: styles.aggregationColumnHeader
+    [`&.${_gridClasses.gridClasses.autosizing}`]: styles.autosizing
   }, {
-    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignLeft']}`]: styles['aggregationColumnHeader--alignLeft']
+    [`&.${_gridClasses.gridClasses['root--densityStandard']}`]: styles['root--densityStandard']
   }, {
-    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignCenter']}`]: styles['aggregationColumnHeader--alignCenter']
+    [`&.${_gridClasses.gridClasses['root--densityComfortable']}`]: styles['root--densityComfortable']
   }, {
-    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignRight']}`]: styles['aggregationColumnHeader--alignRight']
+    [`&.${_gridClasses.gridClasses['root--densityCompact']}`]: styles['root--densityCompact']
   }, {
-    [`&.${_gridClasses.gridClasses.aggregationColumnHeaderLabel}`]: styles.aggregationColumnHeaderLabel
+    [`&.${_gridClasses.gridClasses['root--disableUserSelection']}`]: styles['root--disableUserSelection']
   }, {
-    [`&.${_gridClasses.gridClasses['root--disableUserSelection']} .${_gridClasses.gridClasses.cell}`]: styles['root--disableUserSelection']
+    [`&.${_gridClasses.gridClasses['root--noToolbar']}`]: styles['root--noToolbar']
   }, {
-    [`&.${_gridClasses.gridClasses.autosizing}`]: styles.autosizing
+    [`&.${_gridClasses.gridClasses.withVerticalBorder}`]: styles.withVerticalBorder
+  },
+  // Child element overrides
+  // - Only declare overrides here for class names that are not applied to `styled` components.
+  // - For `styled` components, declare overrides in the component itself.
+  {
+    [`& .${_gridClasses.gridClasses.actionsCell}`]: styles.actionsCell
   }, {
-    [`& .${_gridClasses.gridClasses.editBooleanCell}`]: styles.editBooleanCell
+    [`& .${_gridClasses.gridClasses.booleanCell}`]: styles.booleanCell
   }, {
     [`& .${_gridClasses.gridClasses.cell}`]: styles.cell
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--editable']}`]: styles['cell--editable']
   }, {
     [`& .${_gridClasses.gridClasses['cell--editing']}`]: styles['cell--editing']
   }, {
-    [`& .${_gridClasses.gridClasses['cell--textCenter']}`]: styles['cell--textCenter']
+    [`& .${_gridClasses.gridClasses['cell--flex']}`]: styles['cell--flex']
   }, {
-    [`& .${_gridClasses.gridClasses['cell--textLeft']}`]: styles['cell--textLeft']
+    [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}`]: styles['cell--pinnedLeft']
   }, {
-    [`& .${_gridClasses.gridClasses['cell--textRight']}`]: styles['cell--textRight']
-  }, {
-    [`& .${_gridClasses.gridClasses['cell--rangeTop']}`]: styles['cell--rangeTop']
+    [`& .${_gridClasses.gridClasses['cell--pinnedRight']}`]: styles['cell--pinnedRight']
   }, {
     [`& .${_gridClasses.gridClasses['cell--rangeBottom']}`]: styles['cell--rangeBottom']
   }, {
     [`& .${_gridClasses.gridClasses['cell--rangeLeft']}`]: styles['cell--rangeLeft']
   }, {
     [`& .${_gridClasses.gridClasses['cell--rangeRight']}`]: styles['cell--rangeRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--rangeTop']}`]: styles['cell--rangeTop']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--selectionMode']}`]: styles['cell--selectionMode']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--textCenter']}`]: styles['cell--textCenter']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--textLeft']}`]: styles['cell--textLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--textRight']}`]: styles['cell--textRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['cell--withLeftBorder']}`]: styles['cell--withLeftBorder']
   }, {
     [`& .${_gridClasses.gridClasses['cell--withRightBorder']}`]: styles['cell--withRightBorder']
   }, {
     [`& .${_gridClasses.gridClasses.cellCheckbox}`]: styles.cellCheckbox
+  }, {
+    [`& .${_gridClasses.gridClasses.cellEmpty}`]: styles.cellEmpty
+  }, {
+    [`& .${_gridClasses.gridClasses.cellOffsetLeft}`]: styles.cellOffsetLeft
   }, {
     [`& .${_gridClasses.gridClasses.cellSkeleton}`]: styles.cellSkeleton
   }, {
     [`& .${_gridClasses.gridClasses.checkboxInput}`]: styles.checkboxInput
+  }, {
+    [`& .${_gridClasses.gridClasses.columnHeader}`]: styles.columnHeader
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--alignCenter']}`]: styles['columnHeader--alignCenter']
   }, {
@@ -97,75 +123,151 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['columnHeader--alignRight']}`]: styles['columnHeader--alignRight']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--dragging']}`]: styles['columnHeader--dragging']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--emptyGroup']}`]: styles['columnHeader--emptyGroup']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--filledGroup']}`]: styles['columnHeader--filledGroup']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--filtered']}`]: styles['columnHeader--filtered']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--last']}`]: styles['columnHeader--last']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--lastUnpinned']}`]: styles['columnHeader--lastUnpinned']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--moving']}`]: styles['columnHeader--moving']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--numeric']}`]: styles['columnHeader--numeric']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--pinnedLeft']}`]: styles['columnHeader--pinnedLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--pinnedRight']}`]: styles['columnHeader--pinnedRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnHeader--siblingFocused']}`]: styles['columnHeader--siblingFocused']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--sortable']}`]: styles['columnHeader--sortable']
   }, {
     [`& .${_gridClasses.gridClasses['columnHeader--sorted']}`]: styles['columnHeader--sorted']
   }, {
-    [`& .${_gridClasses.gridClasses['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder']
-  }, {
-    [`& .${_gridClasses.gridClasses.columnHeader}`]: styles.columnHeader
+    [`& .${_gridClasses.gridClasses['columnHeader--withLeftBorder']}`]: styles['columnHeader--withLeftBorder']
   }, {
-    [`& .${_gridClasses.gridClasses.headerFilterRow}`]: styles.headerFilterRow
+    [`& .${_gridClasses.gridClasses['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder']
   }, {
     [`& .${_gridClasses.gridClasses.columnHeaderCheckbox}`]: styles.columnHeaderCheckbox
   }, {
     [`& .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: styles.columnHeaderDraggableContainer
   }, {
     [`& .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: styles.columnHeaderTitleContainer
+  }, {
+    [`& .${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`]: styles.columnHeaderTitleContainerContent
+  }, {
+    [`& .${_gridClasses.gridClasses.columnSeparator}`]: styles.columnSeparator
   }, {
     [`& .${_gridClasses.gridClasses['columnSeparator--resizable']}`]: styles['columnSeparator--resizable']
   }, {
     [`& .${_gridClasses.gridClasses['columnSeparator--resizing']}`]: styles['columnSeparator--resizing']
   }, {
-    [`& .${_gridClasses.gridClasses.columnSeparator}`]: styles.columnSeparator
+    [`& .${_gridClasses.gridClasses['columnSeparator--sideLeft']}`]: styles['columnSeparator--sideLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['columnSeparator--sideRight']}`]: styles['columnSeparator--sideRight']
+  }, {
+    [`& .${_gridClasses.gridClasses['container--bottom']}`]: styles['container--bottom']
+  }, {
+    [`& .${_gridClasses.gridClasses['container--top']}`]: styles['container--top']
+  }, {
+    [`& .${_gridClasses.gridClasses.detailPanelToggleCell}`]: styles.detailPanelToggleCell
+  }, {
+    [`& .${_gridClasses.gridClasses['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
+  }, {
+    [`& .${_gridClasses.gridClasses.editBooleanCell}`]: styles.editBooleanCell
   }, {
     [`& .${_gridClasses.gridClasses.filterIcon}`]: styles.filterIcon
+  }, {
+    [`& .${_gridClasses.gridClasses['filler--borderBottom']}`]: styles['filler--borderBottom']
+  }, {
+    [`& .${_gridClasses.gridClasses['filler--pinnedLeft']}`]: styles['filler--pinnedLeft']
+  }, {
+    [`& .${_gridClasses.gridClasses['filler--pinnedRight']}`]: styles['filler--pinnedRight']
+  }, {
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCell}`]: styles.groupingCriteriaCell
+  }, {
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
+  }, {
+    [`& .${_gridClasses.gridClasses.groupingCriteriaCellToggle}`]: styles.groupingCriteriaCellToggle
+  }, {
+    [`& .${_gridClasses.gridClasses.headerFilterRow}`]: styles.headerFilterRow
   }, {
     [`& .${_gridClasses.gridClasses.iconSeparator}`]: styles.iconSeparator
   }, {
     [`& .${_gridClasses.gridClasses.menuIcon}`]: styles.menuIcon
   }, {
     [`& .${_gridClasses.gridClasses.menuIconButton}`]: styles.menuIconButton
+  }, {
+    [`& .${_gridClasses.gridClasses.menuList}`]: styles.menuList
   }, {
     [`& .${_gridClasses.gridClasses.menuOpen}`]: styles.menuOpen
   }, {
-    [`& .${_gridClasses.gridClasses.menuList}`]: styles.menuList
+    [`& .${_gridClasses.gridClasses.overlayWrapperInner}`]: styles.overlayWrapperInner
   }, {
-    [`& .${_gridClasses.gridClasses['row--editable']}`]: styles['row--editable']
+    [`& .${_gridClasses.gridClasses.pinnedRows}`]: styles.pinnedRows
   }, {
-    [`& .${_gridClasses.gridClasses['row--editing']}`]: styles['row--editing']
+    [`& .${_gridClasses.gridClasses['pinnedRows--bottom']}`]: styles['pinnedRows--bottom']
   }, {
-    [`& .${_gridClasses.gridClasses['row--dragging']}`]: styles['row--dragging']
+    [`& .${_gridClasses.gridClasses['pinnedRows--top']}`]: styles['pinnedRows--top']
   }, {
     [`& .${_gridClasses.gridClasses.row}`]: styles.row
   }, {
-    [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
+    [`& .${_gridClasses.gridClasses['row--borderBottom']}`]: styles['row--borderBottom']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--detailPanelExpanded']}`]: styles['row--detailPanelExpanded']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--dragging']}`]: styles['row--dragging']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--dynamicHeight']}`]: styles['row--dynamicHeight']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--editable']}`]: styles['row--editable']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--editing']}`]: styles['row--editing']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--firstVisible']}`]: styles['row--firstVisible']
+  }, {
+    [`& .${_gridClasses.gridClasses['row--lastVisible']}`]: styles['row--lastVisible']
   }, {
     [`& .${_gridClasses.gridClasses.rowReorderCell}`]: styles.rowReorderCell
   }, {
     [`& .${_gridClasses.gridClasses['rowReorderCell--draggable']}`]: styles['rowReorderCell--draggable']
   }, {
-    [`& .${_gridClasses.gridClasses.sortIcon}`]: styles.sortIcon
+    [`& .${_gridClasses.gridClasses.rowReorderCellContainer}`]: styles.rowReorderCellContainer
   }, {
-    [`& .${_gridClasses.gridClasses.withBorderColor}`]: styles.withBorderColor
+    [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
   }, {
-    [`& .${_gridClasses.gridClasses.treeDataGroupingCell}`]: styles.treeDataGroupingCell
+    [`& .${_gridClasses.gridClasses.rowSkeleton}`]: styles.rowSkeleton
   }, {
-    [`& .${_gridClasses.gridClasses.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+    [`& .${_gridClasses.gridClasses.scrollbar}`]: styles.scrollbar
   }, {
-    [`& .${_gridClasses.gridClasses.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+    [`& .${_gridClasses.gridClasses['scrollbar--horizontal']}`]: styles['scrollbar--horizontal']
   }, {
-    [`& .${_gridClasses.gridClasses.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
+    [`& .${_gridClasses.gridClasses['scrollbar--vertical']}`]: styles['scrollbar--vertical']
   }, {
-    [`& .${_gridClasses.gridClasses.detailPanelToggleCell}`]: styles.detailPanelToggleCell
+    [`& .${_gridClasses.gridClasses.scrollbarFiller}`]: styles.scrollbarFiller
   }, {
-    [`& .${_gridClasses.gridClasses['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
-  }, styles.root]
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--borderBottom']}`]: styles['scrollbarFiller--borderBottom']
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--borderTop']}`]: styles['scrollbarFiller--borderTop']
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--header']}`]: styles['scrollbarFiller--header']
+  }, {
+    [`& .${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: styles['scrollbarFiller--pinnedRight']
+  }, {
+    [`& .${_gridClasses.gridClasses.sortIcon}`]: styles.sortIcon
+  }, {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCell}`]: styles.treeDataGroupingCell
+  }, {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+  }, {
+    [`& .${_gridClasses.gridClasses.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+  }, {
+    [`& .${_gridClasses.gridClasses.withBorderColor}`]: styles.withBorderColor
+  }]
 })(({
   theme: t
 }) => {
@@ -262,10 +364,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         overflow: 'visible !important'
       },
       '@media (hover: hover)': {
-        [`& .${_gridClasses.gridClasses.iconButtonContainer}`]: {
-          width: '0 !important',
-          visibility: 'hidden !important'
-        },
         [`& .${_gridClasses.gridClasses.menuIcon}`]: {
           width: '0 !important',
           visibility: 'hidden !important'

package/node/components/panel/GridPanel.js

@@ -99,7 +99,8 @@ const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) =
   }, other, {
     ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
-      mouseEvent: "onMouseUp",
+      mouseEvent: "onPointerUp",
+      touchEvent: false,
       onClickAway: handleClickAway,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaperRoot, {
         className: classes.paper,