@mui/x-data-grid 8.4.0 → 8.5.0

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]);
@@ -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 {

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

@@ -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/GridPanelWrapper.js

@@ -51,4 +51,5 @@ const GridPanelWrapper = exports.GridPanelWrapper = (0, _forwardRef.forwardRef)(
   }, other, {
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridPanelWrapper.displayName = "GridPanelWrapper";

package/components/panel/filterPanel/GridFilterForm.js

@@ -12,7 +12,9 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _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 _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _styles = require("@mui/material/styles");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _cssVariables = require("../../../constants/cssVariables");
@@ -40,7 +42,7 @@ const useUtilityClasses = ownerState => {
     operatorInput: ['filterFormOperatorInput'],
     valueInput: ['filterFormValueInput']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridFilterFormRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
@@ -120,10 +122,10 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
   const columnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnLookupSelector);
   const filterableColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridFilterableColumnDefinitionsSelector);
   const filterModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterModelSelector);
-  const columnSelectId = (0, _utils.unstable_useId)();
-  const columnSelectLabelId = (0, _utils.unstable_useId)();
-  const operatorSelectId = (0, _utils.unstable_useId)();
-  const operatorSelectLabelId = (0, _utils.unstable_useId)();
+  const columnSelectId = (0, _useId.default)();
+  const columnSelectLabelId = (0, _useId.default)();
+  const operatorSelectId = (0, _useId.default)();
+  const operatorSelectLabelId = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   const valueRef = React.useRef(null);
@@ -348,7 +350,7 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
         native: isBaseSelectNative,
         key: operator.value,
         value: operator.value
-      }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(operator.value)}`)))
+      }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _capitalize.default)(operator.value)}`)))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({}, valueInputPropsOther, {
       className: (0, _clsx.default)(classes.valueInput, valueInputPropsOther.className),
       ownerState: rootProps,
@@ -367,6 +369,7 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
     }))]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridFilterForm.displayName = "GridFilterForm";
 process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -11,7 +11,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 _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "headerFilterMenu", "clearButton", "tabIndex", "slotProps"];
@@ -29,8 +30,8 @@ function GridFilterInputBoolean(props) {
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const labelId = (0, _utils.unstable_useId)();
-  const selectId = (0, _utils.unstable_useId)();
+  const labelId = (0, _useId.default)();
+  const selectId = (0, _useId.default)();
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? false;
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
@@ -99,7 +100,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
   className: _propTypes.default.string,
   clearButton: _propTypes.default.node,
   disabled: _propTypes.default.bool,
-  focusElementRef: _utils.refType,
+  focusElementRef: _refType.default,
   headerFilterMenu: _propTypes.default.node,
   inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
     current: (props, propName) => {

package/components/panel/filterPanel/GridFilterInputDate.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 _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useTimeout = require("../../../hooks/utils/useTimeout");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -53,7 +53,7 @@ function GridFilterInputDate(props) {
   const filterTimeout = (0, _useTimeout.useTimeout)();
   const [filterValueState, setFilterValueState] = React.useState(() => convertFilterItemValueToInputValue(item.value, type));
   const [applying, setIsApplying] = React.useState(false);
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const onFilterChange = React.useCallback(event => {
     filterTimeout.clear();

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.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 _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,7 +25,7 @@ function GridFilterInputMultipleSingleSelect(props) {
       slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   let resolvedColumn = null;
   if (item.field) {

package/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -9,7 +9,7 @@ exports.GridFilterInputMultipleValue = GridFilterInputMultipleValue;
 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 _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridFilterInputMultipleValue(props) {
@@ -21,7 +21,7 @@ function GridFilterInputMultipleValue(props) {
     focusElementRef,
     slotProps
   } = props;
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const [options, setOptions] = React.useState([]);
   const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -52,8 +52,8 @@ function GridFilterInputSingleSelect(props) {
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterValue = item.value ?? '';
-  const id = (0, _utils.unstable_useId)();
-  const labelId = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
+  const labelId = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const isSelectNative = rootProps.slotProps?.baseSelect?.native ?? false;
   let resolvedColumn = null;

package/components/panel/filterPanel/GridFilterInputValue.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 _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useTimeout = require("../../../hooks/utils/useTimeout");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -33,7 +33,7 @@ function GridFilterInputValue(props) {
   const filterTimeout = (0, _useTimeout.useTimeout)();
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const [applying, setIsApplying] = React.useState(false);
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const onFilterChange = React.useCallback(event => {
     const value = sanitizeFilterItemValue(event.target.value);

package/components/panel/filterPanel/GridFilterPanel.js

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

package/components/quickFilter/QuickFilter.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 _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
@@ -107,7 +107,7 @@ function QuickFilter(props) {
       previousExpandedValue.current = expandedValue;
     }
   }, [expandedValue]);
-  const setQuickFilterValueDebounced = React.useMemo(() => (0, _utils.unstable_debounce)(newValue => {
+  const setQuickFilterValueDebounced = React.useMemo(() => (0, _debounce.default)(newValue => {
     const newQuickFilterValues = parser(newValue);
     prevQuickFilterValuesRef.current = newQuickFilterValues;
     apiRef.current.setQuickFilterValues(newQuickFilterValues);

package/components/quickFilter/QuickFilterClear.js

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