@mui/x-data-grid 8.3.1 → 8.5.0

package/components/cell/GridEditInputCell.js

@@ -10,7 +10,8 @@ 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 _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _styles = require("@mui/material/styles");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _assert = require("../../utils/assert");
@@ -27,7 +28,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['editInputCell']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridEditInputCellRoot = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
@@ -83,7 +84,7 @@ const GridEditInputCell = exports.GridEditInputCell = (0, _forwardRef.forwardRef
       setValueState(value);
     }
   }, [meta, value]);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (hasFocus) {
       inputRef.current.focus();
     }
@@ -105,6 +106,7 @@ const GridEditInputCell = exports.GridEditInputCell = (0, _forwardRef.forwardRef
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridEditInputCell.displayName = "GridEditInputCell";
 process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -173,4 +175,5 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   value: _propTypes.default.any
 } : void 0;
 const renderEditInputCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditInputCell, (0, _extends2.default)({}, params));
-exports.renderEditInputCell = renderEditInputCell;
+exports.renderEditInputCell = renderEditInputCell;
+if (process.env.NODE_ENV !== "production") renderEditInputCell.displayName = "renderEditInputCell";

package/components/cell/GridEditSingleSelectCell.js

@@ -12,7 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _gridEditCellParams = require("../../models/params/gridEditCellParams");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridEditRowModel = require("../../models/gridEditRowModel");
@@ -44,7 +44,7 @@ function GridEditSingleSelectCell(props) {
   const [open, setOpen] = React.useState(initialOpen);
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? false;
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (hasFocus) {
       inputRef.current?.focus();
     }
@@ -195,4 +195,5 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   value: _propTypes.default.any
 } : void 0;
 const renderEditSingleSelectCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditSingleSelectCell, (0, _extends2.default)({}, params));
-exports.renderEditSingleSelectCell = renderEditSingleSelectCell;
+exports.renderEditSingleSelectCell = renderEditSingleSelectCell;
+if (process.env.NODE_ENV !== "production") renderEditSingleSelectCell.displayName = "renderEditSingleSelectCell";

package/components/cell/GridSkeletonCell.js

@@ -11,9 +11,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
-var _utils2 = require("../../utils/utils");
+var _utils = require("../../utils/utils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -35,11 +36,11 @@ const useUtilityClasses = ownerState => {
     empty
   } = ownerState;
   const slots = {
-    root: ['cell', 'cellSkeleton', `cell--text${align ? (0, _utils.unstable_capitalize)(align) : 'Left'}`, empty && 'cellEmpty']
+    root: ['cell', 'cellSkeleton', `cell--text${align ? (0, _capitalize.default)(align) : 'Left'}`, empty && 'cellEmpty']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const randomNumberGenerator = (0, _utils2.createRandomNumberGenerator)(12345);
+const randomNumberGenerator = (0, _utils.createRandomNumberGenerator)(12345);
 function GridSkeletonCell(props) {
   const {
       field,

package/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -68,4 +68,5 @@ const ColumnHeaderMenuIcon = exports.ColumnHeaderMenuIcon = /*#__PURE__*/React.m
       }))
     }))
   });
-});
+});
+if (process.env.NODE_ENV !== "production") ColumnHeaderMenuIcon.displayName = "ColumnHeaderMenuIcon";

package/components/columnHeaders/GridBaseColumnHeaders.js

@@ -49,4 +49,5 @@ const GridBaseColumnHeaders = exports.GridBaseColumnHeaders = (0, _forwardRef.fo
     role: "presentation",
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridBaseColumnHeaders.displayName = "GridBaseColumnHeaders";

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnGroupHeader = GridColumnGroupHeader;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -18,7 +19,7 @@ var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
 var _domUtils = require("../../utils/domUtils");
 var _constants = require("../../internals/constants");
-var _utils2 = require("../../internals/utils");
+var _utils = require("../../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -37,7 +38,7 @@ const useUtilityClasses = ownerState => {
     titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function GridColumnGroupHeader(props) {
   const {
@@ -87,7 +88,7 @@ function GridColumnGroupHeader(props) {
     isDragging: false
   });
   const label = headerName ?? groupId;
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const elementId = groupId === null ? `empty-group-cell-${id}` : groupId;
   const classes = useUtilityClasses(ownerState);
   React.useLayoutEffect(() => {
@@ -114,7 +115,7 @@ function GridColumnGroupHeader(props) {
     onBlur: publish('columnGroupHeaderBlur')
   }), [publish]);
   const headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
-  const style = React.useMemo(() => (0, _utils2.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
+  const style = React.useMemo(() => (0, _utils.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.GridGenericColumnHeaderItem, (0, _extends2.default)({
     ref: headerCellRef,
     classes: classes,

package/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -9,7 +9,8 @@ exports.GridColumnHeaderFilterIconButton = GridColumnHeaderFilterIconButtonWrapp
 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 _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _hooks = require("../../hooks");
 var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
 var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
@@ -25,7 +26,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     icon: ['filterIcon']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function GridColumnHeaderFilterIconButtonWrapped(props) {
   if (!props.counter) {
@@ -54,9 +55,9 @@ function GridColumnHeaderFilterIconButton(props) {
     classes: rootProps.classes
   });
   const classes = useUtilityClasses(ownerState);
-  const labelId = (0, _utils.unstable_useId)();
+  const labelId = (0, _useId.default)();
   const isOpen = (0, _hooks.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelSelectorWithLabel, labelId);
-  const panelId = (0, _utils.unstable_useId)();
+  const panelId = (0, _useId.default)();
   const toggleFilter = React.useCallback(event => {
     event.preventDefault();
     event.stopPropagation();

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -10,7 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
@@ -21,7 +22,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
 var _domUtils = require("../../utils/domUtils");
 var _constants = require("../../internals/constants");
-var _utils2 = require("../../internals/utils");
+var _utils = require("../../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -49,7 +50,7 @@ const useUtilityClasses = ownerState => {
     titleContainer: ['columnHeaderTitleContainer'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function GridColumnHeaderItem(props) {
   const {
@@ -75,8 +76,8 @@ function GridColumnHeaderItem(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const headerCellRef = React.useRef(null);
-  const columnMenuId = (0, _utils.unstable_useId)();
-  const columnMenuButtonId = (0, _utils.unstable_useId)();
+  const columnMenuId = (0, _useId.default)();
+  const columnMenuButtonId = (0, _useId.default)();
   const iconButtonRef = React.useRef(null);
   const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
   const isDraggable = React.useMemo(() => !rootProps.disableColumnReorder && !disableReorder && !colDef.disableReorder, [rootProps.disableColumnReorder, disableReorder, colDef.disableReorder]);
@@ -118,7 +119,7 @@ function GridColumnHeaderItem(props) {
     onDragStart: publish('columnHeaderDragStart'),
     onDragEnter: publish('columnHeaderDragEnter'),
     onDragOver: publish('columnHeaderDragOver'),
-    onDragEnd: publish('columnHeaderDragEnd')
+    onDragEndCapture: publish('columnHeaderDragEnd')
   } : {}, [isDraggable, publish]);
   const columnHeaderSeparatorProps = React.useMemo(() => ({
     onMouseDown: publish('columnSeparatorMouseDown'),
@@ -179,7 +180,7 @@ function GridColumnHeaderItem(props) {
     colDef
   }) : colDef.headerClassName;
   const label = colDef.headerName ?? colDef.field;
-  const style = React.useMemo(() => (0, _utils2.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
+  const style = React.useMemo(() => (0, _utils.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.GridGenericColumnHeaderItem, (0, _extends2.default)({
     ref: headerCellRef,
     classes: classes,

package/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -10,7 +10,8 @@ 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 _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,10 +29,10 @@ const useUtilityClasses = ownerState => {
     side
   } = ownerState;
   const slots = {
-    root: ['columnSeparator', resizable && 'columnSeparator--resizable', resizing && 'columnSeparator--resizing', side && `columnSeparator--side${(0, _utils.unstable_capitalize)(side)}`],
+    root: ['columnSeparator', resizable && 'columnSeparator--resizable', resizing && 'columnSeparator--resizing', side && `columnSeparator--side${(0, _capitalize.default)(side)}`],
     icon: ['iconSeparator']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 function GridColumnHeaderSeparatorRaw(props) {
   const {
@@ -66,6 +67,7 @@ function GridColumnHeaderSeparatorRaw(props) {
   );
 }
 const GridColumnHeaderSeparator = exports.GridColumnHeaderSeparator = /*#__PURE__*/React.memo(GridColumnHeaderSeparatorRaw);
+if (process.env.NODE_ENV !== "production") GridColumnHeaderSeparator.displayName = "GridColumnHeaderSeparator";
 process.env.NODE_ENV !== "production" ? GridColumnHeaderSeparatorRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -20,6 +20,7 @@ function GridColumnHeaderSortIconRaw(props) {
   });
 }
 const GridColumnHeaderSortIcon = exports.GridColumnHeaderSortIcon = /*#__PURE__*/React.memo(GridColumnHeaderSortIconRaw);
+if (process.env.NODE_ENV !== "production") GridColumnHeaderSortIcon.displayName = "GridColumnHeaderSortIcon";
 process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/columnHeaders/GridColumnHeaderTitle.js

@@ -54,6 +54,7 @@ const ColumnHeaderInnerTitle = (0, _forwardRef.forwardRef)(function ColumnHeader
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") ColumnHeaderInnerTitle.displayName = "ColumnHeaderInnerTitle";
 // No React.memo here as if we display the sort icon, we need to recalculate the isOver
 function GridColumnHeaderTitle(props) {
   const {

package/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _GridColumnHeaderTitle = require("./GridColumnHeaderTitle");
@@ -46,7 +46,7 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _f
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const headerCellRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(headerCellRef, ref);
+  const handleRef = (0, _useForkRef.default)(headerCellRef, ref);
   let ariaSort = 'none';
   if (sortDirection != null) {
     ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
@@ -97,4 +97,5 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _f
       side: separatorSide
     }, columnHeaderSeparatorProps)), columnMenu]
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridGenericColumnHeaderItem.displayName = "GridGenericColumnHeaderItem";

package/components/columnHeaders/GridIconButtonContainer.js

@@ -47,4 +47,5 @@ const GridIconButtonContainer = exports.GridIconButtonContainer = (0, _forwardRe
   }, other, {
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridIconButtonContainer.displayName = "GridIconButtonContainer";

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -10,13 +10,13 @@ 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 _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
-var _utils2 = require("../../hooks/features/rowSelection/utils");
+var _utils = require("../../hooks/features/rowSelection/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["field", "id", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
 const useUtilityClasses = ownerState => {
@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['checkboxInput']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _forwardRef.forwardRef)(function GridCellCheckboxRenderer(props, ref) {
   const {
@@ -68,7 +68,7 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
   const {
     isIndeterminate,
     isChecked
-  } = (0, _useGridSelector.useGridSelector)(apiRef, _utils2.checkboxPropsSelector, {
+  } = (0, _useGridSelector.useGridSelector)(apiRef, _utils.checkboxPropsSelector, {
     groupId: id,
     autoSelectParents: rootProps.rowSelectionPropagation?.parents ?? false
   });
@@ -94,6 +94,7 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _for
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridCellCheckboxForwardRef.displayName = "GridCellCheckboxForwardRef";
 process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/columnSelection/GridHeaderCheckbox.js

@@ -164,6 +164,7 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardR
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridHeaderCheckbox.displayName = "GridHeaderCheckbox";
 process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/columnsManagement/GridColumnsManagement.js

@@ -182,7 +182,7 @@ function GridColumnsManagement(props) {
           className: classes.row,
           disabled: column.hideable === false || pivotActive,
           checked: columnVisibilityModel[column.field] !== false,
-          onClick: toggleColumn,
+          onChange: toggleColumn,
           name: column.field,
           inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined,
           label: column.headerName || column.field,
@@ -200,7 +200,7 @@ function GridColumnsManagement(props) {
         disabled: hideableColumns.length === 0 || pivotActive,
         checked: allHideableColumnsVisible,
         indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
-        onClick: () => toggleAllColumns(!allHideableColumnsVisible),
+        onChange: () => toggleAllColumns(!allHideableColumnsVisible),
         name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
         label: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
         density: "compact"

package/components/columnsPanel/ColumnsPanelTrigger.js

@@ -83,6 +83,7 @@ const ColumnsPanelTrigger = exports.ColumnsPanelTrigger = (0, _forwardRef.forwar
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") ColumnsPanelTrigger.displayName = "ColumnsPanelTrigger";
 process.env.NODE_ENV !== "production" ? ColumnsPanelTrigger.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/containers/GridFooterContainer.js

@@ -51,6 +51,7 @@ const GridFooterContainer = exports.GridFooterContainer = (0, _forwardRef.forwar
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridFooterContainer.displayName = "GridFooterContainer";
 process.env.NODE_ENV !== "production" ? GridFooterContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/containers/GridOverlay.js

@@ -58,6 +58,7 @@ const GridOverlay = exports.GridOverlay = (0, _forwardRef.forwardRef)(function G
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridOverlay.displayName = "GridOverlay";
 process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/containers/GridRoot.js

@@ -11,7 +11,9 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _GridRootStyles = require("./GridRootStyles");
@@ -33,9 +35,9 @@ const useUtilityClasses = (ownerState, density) => {
     showCellVerticalBorder
   } = ownerState;
   const slots = {
-    root: ['root', autoHeight && 'autoHeight', `root--density${(0, _utils.unstable_capitalize)(density)}`, ownerState.slots.toolbar === null && 'root--noToolbar', 'withBorderColor', showCellVerticalBorder && 'withVerticalBorder']
+    root: ['root', autoHeight && 'autoHeight', `root--density${(0, _capitalize.default)(density)}`, ownerState.slots.toolbar === null && 'root--noToolbar', 'withBorderColor', showCellVerticalBorder && 'withVerticalBorder']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -54,7 +56,7 @@ const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
     }
     apiRef.current.publishEvent('rootMount', node);
   }, [apiRef]);
-  const handleRef = (0, _utils.unstable_useForkRef)(rootElementRef, ref, rootMountCallback);
+  const handleRef = (0, _useForkRef.default)(rootElementRef, ref, rootMountCallback);
   const ownerState = rootProps;
   const classes = useUtilityClasses(ownerState, density);
   const cssVariables = (0, _context.useCSSVariablesContext)();
@@ -76,6 +78,7 @@ const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
     }), sidePanel, cssVariables.tag]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridRoot.displayName = "GridRoot";
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/containers/GridRootStyles.js

@@ -663,7 +663,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         borderTop: 'none'
       }
     },
-    [`&.${_gridClasses.gridClasses['root--disableUserSelection']} .${_gridClasses.gridClasses.cell}`]: {
+    [`&.${_gridClasses.gridClasses['root--disableUserSelection']}`]: {
       userSelect: 'none'
     },
     [`& .${_gridClasses.gridClasses['row--dynamicHeight']} > .${_gridClasses.gridClasses.cell}`]: {
@@ -721,7 +721,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       opacity: _cssVariables.vars.colors.interactive.disabledOpacity
     },
     [`& .${_gridClasses.gridClasses['rowReorderCell--draggable']}`]: {
-      cursor: 'move',
+      cursor: 'grab',
       opacity: 1
     },
     [`& .${_gridClasses.gridClasses.rowReorderCellContainer}`]: {

package/components/containers/GridToolbarContainer.js

@@ -64,6 +64,7 @@ const GridToolbarContainer = exports.GridToolbarContainer = (0, _forwardRef.forw
     children: children
   }));
 });
+if (process.env.NODE_ENV !== "production") GridToolbarContainer.displayName = "GridToolbarContainer";
 process.env.NODE_ENV !== "production" ? GridToolbarContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/export/ExportCsv.js

@@ -50,6 +50,7 @@ const ExportCsv = exports.ExportCsv = (0, _forwardRef.forwardRef)(function Expor
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") ExportCsv.displayName = "ExportCsv";
 process.env.NODE_ENV !== "production" ? ExportCsv.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/export/ExportPrint.js

@@ -50,6 +50,7 @@ const ExportPrint = exports.ExportPrint = (0, _forwardRef.forwardRef)(function E
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") ExportPrint.displayName = "ExportPrint";
 process.env.NODE_ENV !== "production" ? ExportPrint.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/filterPanel/FilterPanelTrigger.js

@@ -86,6 +86,7 @@ const FilterPanelTrigger = exports.FilterPanelTrigger = (0, _forwardRef.forwardR
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") FilterPanelTrigger.displayName = "FilterPanelTrigger";
 process.env.NODE_ENV !== "production" ? FilterPanelTrigger.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/menu/GridMenu.js

@@ -11,7 +11,9 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _styles = require("@mui/material/styles");
 var _cssVariables = require("../../constants/cssVariables");
 var _context = require("../../utils/css/context");
@@ -28,7 +30,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['menu']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridMenuRoot = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
@@ -55,7 +57,7 @@ function GridMenu(props) {
   const classes = useUtilityClasses(rootProps);
   const variablesClass = (0, _context.useCSSVariablesClass)();
   const savedFocusRef = React.useRef(null);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (open) {
       savedFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     } else {
@@ -102,5 +104,5 @@ process.env.NODE_ENV !== "production" ? GridMenu.propTypes = {
   onExited: _propTypes.default.func,
   open: _propTypes.default.bool.isRequired,
   position: _propTypes.default.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
-  target: _utils.HTMLElementType
+  target: _HTMLElementType.default
 } : void 0;

package/components/menu/columnMenu/GridColumnMenu.js

@@ -53,6 +53,7 @@ const GridGenericColumnMenu = exports.GridGenericColumnMenu = (0, _forwardRef.fo
     children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, otherProps), index))
   }));
 });
+if (process.env.NODE_ENV !== "production") GridGenericColumnMenu.displayName = "GridGenericColumnMenu";
 process.env.NODE_ENV !== "production" ? GridGenericColumnMenu.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -92,6 +93,7 @@ const GridColumnMenu = exports.GridColumnMenu = (0, _forwardRef.forwardRef)(func
     defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS
   }));
 });
+if (process.env.NODE_ENV !== "production") GridColumnMenu.displayName = "GridColumnMenu";
 process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -53,6 +53,7 @@ const GridColumnMenuContainer = exports.GridColumnMenuContainer = (0, _forwardRe
     children: children
   }));
 });
+if (process.env.NODE_ENV !== "production") GridColumnMenuContainer.displayName = "GridColumnMenuContainer";
 process.env.NODE_ENV !== "production" ? GridColumnMenuContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/panel/GridPanel.js

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
-var _utils = require("@mui/utils");
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _cssVariables = require("../../constants/cssVariables");
@@ -22,7 +22,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _assert = require("../../utils/assert");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "classes", "onClose"];
-const gridPanelClasses = exports.gridPanelClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['panel', 'paper']);
+const gridPanelClasses = exports.gridPanelClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', ['panel', 'paper']);
 const GridPanelRoot = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'panel'
@@ -95,6 +95,7 @@ const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) =
     })
   }));
 });
+if (process.env.NODE_ENV !== "production") GridPanel.displayName = "GridPanel";
 process.env.NODE_ENV !== "production" ? GridPanel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/panel/GridPanelContext.js

@@ -10,6 +10,7 @@ exports.useGridPanelContext = useGridPanelContext;
 var React = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 const GridPanelContext = exports.GridPanelContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") GridPanelContext.displayName = "GridPanelContext";
 function useGridPanelContext() {
   const context = React.useContext(GridPanelContext);
   if (context === undefined) {