@mui/x-data-grid 8.0.0-alpha.4 → 8.0.0-alpha.6

package/node/components/columnHeaders/GridColumnHeaderTitle.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _domUtils = require("../../utils/domUtils");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -38,7 +39,7 @@ const GridColumnHeaderTitleRoot = (0, _system.styled)('div', {
   fontWeight: 'var(--unstable_DataGrid-headWeight)',
   lineHeight: 'normal'
 });
-const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeaderInnerTitle(props, ref) {
+const ColumnHeaderInnerTitle = (0, _forwardRef.forwardRef)(function ColumnHeaderInnerTitle(props, ref) {
   // Tooltip adds aria-label to the props, which is not needed since the children prop is a string
   // See https://github.com/mui/mui-x/pull/14482
   const {
@@ -48,10 +49,11 @@ const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHead
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeaderTitleRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
 // No React.memo here as if we display the sort icon, we need to recalculate the isOver
 function GridColumnHeaderTitle(props) {

package/node/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -11,13 +11,14 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _GridColumnHeaderTitle = require("./GridColumnHeaderTitle");
 var _GridColumnHeaderSeparator = require("./GridColumnHeaderSeparator");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "style"];
-const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
+const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _forwardRef.forwardRef)(function GridGenericColumnHeaderItem(props, ref) {
   const {
       classes,
       colIndex,
@@ -62,7 +63,6 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__P
     }
   }, [apiRef, hasFocus]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-    ref: handleRef,
     className: (0, _clsx.default)(classes.root, headerClassName),
     style: (0, _extends2.default)({}, style, {
       height,
@@ -73,6 +73,7 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__P
     "aria-colindex": colIndex + 1,
     "aria-sort": ariaSort
   }, other, {
+    ref: handleRef,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
       className: classes.draggableContainer,
       draggable: isDraggable,

package/node/components/columnHeaders/GridIconButtonContainer.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -34,7 +35,7 @@ const GridIconButtonContainerRoot = (0, _system.styled)('div', {
   visibility: 'hidden',
   width: 0
 }));
-const GridIconButtonContainer = exports.GridIconButtonContainer = /*#__PURE__*/React.forwardRef(function GridIconButtonContainer(props, ref) {
+const GridIconButtonContainer = exports.GridIconButtonContainer = (0, _forwardRef.forwardRef)(function GridIconButtonContainer(props, ref) {
   const {
       className
     } = props,
@@ -42,8 +43,9 @@ const GridIconButtonContainer = exports.GridIconButtonContainer = /*#__PURE__*/R
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridIconButtonContainerRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -11,6 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
@@ -27,7 +28,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCellCheckboxRenderer(props, ref) {
+const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _forwardRef.forwardRef)(function GridCellCheckboxRenderer(props, ref) {
   const {
       field,
       id,
@@ -89,7 +90,6 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
   }
   const label = apiRef.current.getLocaleText(isChecked && !isIndeterminate ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
-    ref: handleRef,
     tabIndex: tabIndex,
     checked: isChecked && !isIndeterminate,
     onChange: handleChange,
@@ -101,7 +101,9 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
     indeterminate: isIndeterminate,
     disabled: !isSelectable,
     touchRippleRef: rippleRef /* FIXME: typing error */
-  }, rootProps.slotProps?.baseCheckbox, other));
+  }, rootProps.slotProps?.baseCheckbox, other, {
+    ref: handleRef
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/components/columnSelection/GridHeaderCheckbox.js

@@ -11,6 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _utils = require("../../hooks/features/rowSelection/utils");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
@@ -31,7 +32,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridHeaderCheckbox = exports.GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckbox(props, ref) {
+const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardRef)(function GridHeaderCheckbox(props, ref) {
   const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [, forceUpdate] = React.useState(false);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
@@ -105,7 +106,6 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = /*#__PURE__*/React.forwa
   }, [apiRef, handleSelectionChange]);
   const label = apiRef.current.getLocaleText(isChecked && !isIndeterminate ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
-    ref: ref,
     indeterminate: isIndeterminate,
     checked: isChecked && !isIndeterminate,
     onChange: handleChange,
@@ -116,7 +116,9 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = /*#__PURE__*/React.forwa
     tabIndex: tabIndex,
     onKeyDown: handleKeyDown,
     disabled: !(0, _utils.isMultipleRowSelectionEnabled)(rootProps)
-  }, rootProps.slotProps?.baseCheckbox, other));
+  }, rootProps.slotProps?.baseCheckbox, other, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/components/containers/GridFooterContainer.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -37,7 +38,7 @@ const GridFooterContainerRoot = (0, _system.styled)('div', {
   minHeight: 52,
   borderTop: '1px solid'
 });
-const GridFooterContainer = exports.GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterContainer(props, ref) {
+const GridFooterContainer = exports.GridFooterContainer = (0, _forwardRef.forwardRef)(function GridFooterContainer(props, ref) {
   const {
       className
     } = props,
@@ -45,10 +46,11 @@ const GridFooterContainer = exports.GridFooterContainer = /*#__PURE__*/React.for
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridFooterContainerRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridFooterContainer.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/components/containers/GridOverlay.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -39,7 +40,7 @@ const GridOverlayRoot = (0, _system.styled)('div', {
   justifyContent: 'center',
   backgroundColor: 'var(--unstable_DataGrid-overlayBackground)'
 });
-const GridOverlay = exports.GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
+const GridOverlay = exports.GridOverlay = (0, _forwardRef.forwardRef)(function GridOverlay(props, ref) {
   const {
       className
     } = props,
@@ -47,10 +48,11 @@ const GridOverlay = exports.GridOverlay = /*#__PURE__*/React.forwardRef(function
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/components/containers/GridRoot.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _GridRootStyles = require("./GridRootStyles");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
@@ -31,7 +32,7 @@ const useUtilityClasses = (ownerState, density) => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridRoot = exports.GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
+const GridRoot = exports.GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
       className
@@ -53,10 +54,11 @@ const GridRoot = exports.GridRoot = /*#__PURE__*/React.forwardRef(function GridR
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
-    ref: handleRef,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState
-  }, other));
+  }, other, {
+    ref: handleRef
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/components/containers/GridToolbarContainer.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -39,7 +40,7 @@ const GridToolbarContainerRoot = (0, _system.styled)('div', {
   gap: theme.spacing(1),
   padding: theme.spacing(0.5, 0.5, 0)
 }));
-const GridToolbarContainer = exports.GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarContainer(props, ref) {
+const GridToolbarContainer = exports.GridToolbarContainer = (0, _forwardRef.forwardRef)(function GridToolbarContainer(props, ref) {
   const {
       className,
       children
@@ -51,10 +52,10 @@ const GridToolbarContainer = exports.GridToolbarContainer = /*#__PURE__*/React.f
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarContainerRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other, {
+    ref: ref,
     children: children
   }));
 });

package/node/components/menu/columnMenu/GridColumnMenu.js

@@ -10,6 +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 _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridColumnMenuSlots = require("../../../hooks/features/columnMenu/useGridColumnMenuSlots");
 var _GridColumnMenuContainer = require("./GridColumnMenuContainer");
 var _GridColumnMenuColumnsItem = require("./menuItems/GridColumnMenuColumnsItem");
@@ -33,7 +34,7 @@ const GRID_COLUMN_MENU_SLOT_PROPS = exports.GRID_COLUMN_MENU_SLOT_PROPS = {
     displayOrder: 30
   }
 };
-const GridGenericColumnMenu = exports.GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGenericColumnMenu(props, ref) {
+const GridGenericColumnMenu = exports.GridGenericColumnMenu = (0, _forwardRef.forwardRef)(function GridGenericColumnMenu(props, ref) {
   const {
       defaultSlots,
       defaultSlotProps,
@@ -47,9 +48,8 @@ const GridGenericColumnMenu = exports.GridGenericColumnMenu = /*#__PURE__*/React
     slots,
     slotProps
   }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnMenuContainer.GridColumnMenuContainer, (0, _extends2.default)({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnMenuContainer.GridColumnMenuContainer, (0, _extends2.default)({}, other, {
+    ref: ref,
     children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, otherProps), index))
   }));
 });
@@ -85,7 +85,7 @@ process.env.NODE_ENV !== "production" ? GridGenericColumnMenu.propTypes = {
    */
   slots: _propTypes.default.object
 } : void 0;
-const GridColumnMenu = exports.GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
+const GridColumnMenu = exports.GridColumnMenu = (0, _forwardRef.forwardRef)(function GridColumnMenu(props, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridGenericColumnMenu, (0, _extends2.default)({}, props, {
     ref: ref,
     defaultSlots: GRID_COLUMN_MENU_SLOTS,

package/node/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _styles = require("@mui/material/styles");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
 var _gridClasses = require("../../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -20,7 +21,7 @@ const _excluded = ["hideMenu", "colDef", "id", "labelledby", "className", "child
 const StyledMenuList = (0, _styles.styled)(_MenuList.default)(() => ({
   minWidth: 248
 }));
-const GridColumnMenuContainer = exports.GridColumnMenuContainer = /*#__PURE__*/React.forwardRef(function GridColumnMenuContainer(props, ref) {
+const GridColumnMenuContainer = exports.GridColumnMenuContainer = (0, _forwardRef.forwardRef)(function GridColumnMenuContainer(props, ref) {
   const {
       hideMenu,
       id,
@@ -40,12 +41,12 @@ const GridColumnMenuContainer = exports.GridColumnMenuContainer = /*#__PURE__*/R
   }, [hideMenu]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMenuList, (0, _extends2.default)({
     id: id,
-    ref: ref,
     className: (0, _clsx.default)(_gridClasses.gridClasses.menuList, className),
     "aria-labelledby": labelledby,
     onKeyDown: handleListKeyDown,
     autoFocus: open
   }, other, {
+    ref: ref,
     children: children
   }));
 });

package/node/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuFilterItem = GridColumnMenuFilterItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,15 +25,12 @@ function GridColumnMenuFilterItem(props) {
   if (rootProps.disableColumnFilter || !colDef.filterable) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     onClick: showFilter,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuFilterIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-      children: apiRef.current.getLocaleText('columnMenuFilter')
-    })]
+    iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuFilterIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuFilter')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuFilterItem.propTypes = {

package/node/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuHideItem = GridColumnMenuHideItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../../../hooks/utils/useGridRootProps");
 var _columns = require("../../../../hooks/features/columns");
@@ -43,16 +41,13 @@ function GridColumnMenuHideItem(props) {
   if (colDef.hideable === false) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     onClick: toggleColumn,
     disabled: disabled,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuHideIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-      children: apiRef.current.getLocaleText('columnMenuHideColumn')
-    })]
+    iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuHideIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuHideColumn')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuHideItem.propTypes = {

package/node/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuManageItem = GridColumnMenuManageItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _gridPreferencePanelsValue = require("../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../../../hooks/utils/useGridRootProps");
@@ -27,15 +25,12 @@ function GridColumnMenuManageItem(props) {
   if (rootProps.disableColumnSelector) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     onClick: showColumns,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuManageColumnsIcon, {
-        fontSize: "small"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-      children: apiRef.current.getLocaleText('columnMenuManageColumns')
-    })]
+    iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuManageColumnsIcon, {
+      fontSize: "small"
+    }),
+    children: apiRef.current.getLocaleText('columnMenuManageColumns')
   });
 }
 process.env.NODE_ENV !== "production" ? GridColumnMenuManageItem.propTypes = {

package/node/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuSortItem = GridColumnMenuSortItem;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _useGridSelector = require("../../../../hooks/utils/useGridSelector");
 var _gridSortingSelector = require("../../../../hooks/features/sorting/gridSortingSelector");
 var _useGridApiContext = require("../../../../hooks/utils/useGridApiContext");
@@ -44,31 +42,24 @@ function GridColumnMenuSortItem(props) {
     return typeof label === 'function' ? label(colDef) : label;
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+    children: [sortingOrder.includes('asc') && sortDirection !== 'asc' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "asc",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuSortAscendingIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-        children: getLabel('columnMenuSortAsc')
-      })]
-    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+      iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuSortAscendingIcon, {
+        fontSize: "small"
+      }),
+      children: getLabel('columnMenuSortAsc')
+    }) : null, sortingOrder.includes('desc') && sortDirection !== 'desc' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
       "data-value": "desc",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuSortDescendingIcon, {
-          fontSize: "small"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-        children: getLabel('columnMenuSortDesc')
-      })]
-    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseMenuItem, {
+      iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuSortDescendingIcon, {
+        fontSize: "small"
+      }),
+      children: getLabel('columnMenuSortDesc')
+    }) : null, sortingOrder.includes(null) && sortDirection != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
       onClick: onSortMenuItemClick,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
-        children: apiRef.current.getLocaleText('columnMenuUnsort')
-      })]
+      iconStart: "",
+      children: apiRef.current.getLocaleText('columnMenuUnsort')
     }) : null]
   });
 }

package/node/components/panel/GridPanel.js

@@ -16,6 +16,7 @@ var _utils = require("@mui/utils");
 var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
 var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -44,7 +45,7 @@ const GridPaperRoot = (0, _styles.styled)(_Paper.default, {
   maxWidth: `calc(100vw - ${theme.spacing(0.5)})`,
   overflow: 'auto'
 }));
-const GridPanel = exports.GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) => {
   const {
       children,
       className
@@ -90,13 +91,13 @@ const GridPanel = exports.GridPanel = /*#__PURE__*/React.forwardRef((props, ref)
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelRoot, (0, _extends2.default)({
-    ref: ref,
     placement: "bottom-start",
     className: (0, _clsx.default)(classes.panel, className),
     ownerState: rootProps,
     anchorEl: anchorEl,
     modifiers: modifiers
   }, other, {
+    ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
       mouseEvent: "onMouseUp",
       onClickAway: handleClickAway,

package/node/components/panel/GridPanelWrapper.js

@@ -14,6 +14,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _Unstable_TrapFocus = _interopRequireDefault(require("@mui/material/Unstable_TrapFocus"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -40,7 +41,7 @@ const GridPanelWrapperRoot = (0, _styles.styled)('div', {
   }
 });
 const isEnabled = () => true;
-const GridPanelWrapper = exports.GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
+const GridPanelWrapper = exports.GridPanelWrapper = (0, _forwardRef.forwardRef)(function GridPanelWrapper(props, ref) {
   const {
       className,
       slotProps = {}
@@ -54,11 +55,12 @@ const GridPanelWrapper = exports.GridPanelWrapper = /*#__PURE__*/React.forwardRe
     isEnabled: isEnabled
   }, slotProps.TrapFocus, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelWrapperRoot, (0, _extends2.default)({
-      ref: ref,
       tabIndex: -1,
       className: (0, _clsx.default)(classes.root, className),
       ownerState: rootProps
-    }, other))
+    }, other, {
+      ref: ref
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? GridPanelWrapper.propTypes = {

package/node/components/panel/filterPanel/GridFilterForm.js

@@ -14,6 +14,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsSelector");
 var _gridFilterSelector = require("../../../hooks/features/filter/gridFilterSelector");
 var _useGridSelector = require("../../../hooks/utils/useGridSelector");
@@ -98,7 +99,7 @@ const getLogicOperatorLocaleKey = logicOperator => {
 };
 const getColumnLabel = col => col.headerName || col.field;
 const collator = new Intl.Collator();
-const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
+const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(function GridFilterForm(props, ref) {
   const {
       item,
       hasMultipleFilters,
@@ -258,11 +259,11 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
     }
   }), [currentOperator]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridFilterFormRoot, (0, _extends2.default)({
-    ref: ref,
     className: classes.root,
     "data-id": item.id,
     ownerState: rootProps
   }, other, {
+    ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormDeleteIcon, (0, _extends2.default)({
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, deleteIconProps, {