@mui/x-data-grid 7.23.3 → 7.23.4

package/components/cell/GridEditInputCell.js

@@ -2,9 +2,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "isValidating", "debounceMs", "isProcessingProps", "onValueChange"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -31,7 +33,7 @@ const GridEditInputCellRoot = styled(InputBase, {
     height: '100%'
   }
 }));
-const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+const GridEditInputCell = forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   const {
       id,
@@ -79,7 +81,6 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }, [hasFocus]);
   return /*#__PURE__*/_jsx(GridEditInputCellRoot, _extends({
-    ref: ref,
     inputRef: inputRef,
     className: classes.root,
     ownerState: rootProps,
@@ -91,7 +92,75 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       fontSize: "small",
       color: "action"
     }) : undefined
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
+process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  debounceMs: PropTypes.number,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
 export { GridEditInputCell };
 export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));

package/components/columnHeaders/GridBaseColumnHeaders.d.ts

@@ -3,5 +3,5 @@ import { SxProps, Theme } from '@mui/system';
 interface GridBaseColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {
     sx?: SxProps<Theme>;
 }
-export declare const GridBaseColumnHeaders: React.ForwardRefExoticComponent<GridBaseColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
+export declare const GridBaseColumnHeaders: React.ForwardRefExoticComponent<GridBaseColumnHeadersProps> | React.ForwardRefExoticComponent<GridBaseColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/components/columnHeaders/GridBaseColumnHeaders.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -27,7 +28,7 @@ const GridColumnHeadersRoot = styled('div', {
   borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
   borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
 });
-export const GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+export const GridBaseColumnHeaders = forwardRef(function GridColumnHeaders(props, ref) {
   const {
       className
     } = props,
@@ -35,10 +36,10 @@ export const GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function Grid
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridColumnHeadersRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps
   }, other, {
-    role: "presentation"
+    role: "presentation",
+    ref: ref
   }));
 });

package/components/columnHeaders/GridColumnHeaderTitle.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { isOverflown } from "../../utils/domUtils.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -30,7 +31,7 @@ const GridColumnHeaderTitleRoot = styled('div', {
   fontWeight: 'var(--unstable_DataGrid-headWeight)',
   lineHeight: 'normal'
 });
-const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeaderInnerTitle(props, ref) {
+const ColumnHeaderInnerTitle = 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 {
@@ -40,10 +41,11 @@ const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHead
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridColumnHeaderTitleRoot, _extends({
-    ref: ref,
     className: clsx(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/components/columnHeaders/GridGenericColumnHeaderItem.d.ts

@@ -28,5 +28,5 @@ interface GridGenericColumnHeaderItemProps extends Pick<GridStateColDef, 'header
     columnHeaderSeparatorProps?: Partial<GridColumnHeaderSeparatorProps>;
     style?: React.CSSProperties;
 }
-declare const GridGenericColumnHeaderItem: React.ForwardRefExoticComponent<GridGenericColumnHeaderItemProps & React.RefAttributes<unknown>>;
+declare const GridGenericColumnHeaderItem: React.ForwardRefExoticComponent<GridGenericColumnHeaderItemProps> | React.ForwardRefExoticComponent<GridGenericColumnHeaderItemProps & React.RefAttributes<HTMLDivElement>>;
 export { GridGenericColumnHeaderItem };

package/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -4,12 +4,13 @@ const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizin
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { GridColumnHeaderTitle } from "./GridColumnHeaderTitle.js";
 import { GridColumnHeaderSeparator } from "./GridColumnHeaderSeparator.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
+const GridGenericColumnHeaderItem = forwardRef(function GridGenericColumnHeaderItem(props, ref) {
   const {
       classes,
       colIndex,
@@ -54,7 +55,6 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
     }
   }, [apiRef, hasFocus]);
   return /*#__PURE__*/_jsxs("div", _extends({
-    ref: handleRef,
     className: clsx(classes.root, headerClassName),
     style: _extends({}, style, {
       height,
@@ -65,6 +65,7 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
     "aria-colindex": colIndex + 1,
     "aria-sort": ariaSort
   }, other, {
+    ref: handleRef,
     children: [/*#__PURE__*/_jsxs("div", _extends({
       className: classes.draggableContainer,
       draggable: isDraggable,

package/components/columnHeaders/GridIconButtonContainer.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 export type GridIconButtonContainerProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const GridIconButtonContainer: React.ForwardRefExoticComponent<GridIconButtonContainerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const GridIconButtonContainer: React.ForwardRefExoticComponent<GridIconButtonContainerProps> | React.ForwardRefExoticComponent<GridIconButtonContainerProps & React.RefAttributes<HTMLDivElement>>;

package/components/columnHeaders/GridIconButtonContainer.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -26,7 +27,7 @@ const GridIconButtonContainerRoot = styled('div', {
   visibility: 'hidden',
   width: 0
 }));
-export const GridIconButtonContainer = /*#__PURE__*/React.forwardRef(function GridIconButtonContainer(props, ref) {
+export const GridIconButtonContainer = forwardRef(function GridIconButtonContainer(props, ref) {
   const {
       className
     } = props,
@@ -34,8 +35,9 @@ export const GridIconButtonContainer = /*#__PURE__*/React.forwardRef(function Gr
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridIconButtonContainerRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });

package/components/columnSelection/GridCellCheckboxRenderer.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import type { GridRenderCellParams } from '../../models/params/gridCellParams';
-declare const GridCellCheckboxForwardRef: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;
+declare const GridCellCheckboxForwardRef: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender>> | React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;
 export { GridCellCheckboxForwardRef };
-export declare const GridCellCheckboxRenderer: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;
+export declare const GridCellCheckboxRenderer: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender>> | React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;

package/components/columnSelection/GridCellCheckboxRenderer.js

@@ -4,6 +4,7 @@ const _excluded = ["field", "id", "formattedValue", "row", "rowNode", "colDef",
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
@@ -19,7 +20,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
-const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCellCheckboxRenderer(props, ref) {
+const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(props, ref) {
   const {
       field,
       id,
@@ -82,7 +83,6 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
   const checked = rootProps.indeterminateCheckboxAction === 'select' ? isChecked && !isIndeterminate : isChecked;
   const label = apiRef.current.getLocaleText(checked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
   return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-    ref: handleRef,
     tabIndex: tabIndex,
     checked: checked,
     onChange: handleChange,
@@ -94,7 +94,9 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     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/components/columnSelection/GridHeaderCheckbox.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import type { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
-declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams<import("../..").GridValidRowModel, any, any> & React.RefAttributes<HTMLButtonElement>>;
+declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams<import("../..").GridValidRowModel, any, any>> | React.ForwardRefExoticComponent<GridColumnHeaderParams<import("../..").GridValidRowModel, any, any> & React.RefAttributes<HTMLButtonElement>>;
 export { GridHeaderCheckbox };

package/components/columnSelection/GridHeaderCheckbox.js

@@ -4,6 +4,7 @@ const _excluded = ["field", "colDef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { isMultipleRowSelectionEnabled } from "../../hooks/features/rowSelection/utils.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridTabIndexColumnHeaderSelector } from "../../hooks/features/focus/gridFocusStateSelector.js";
@@ -23,7 +24,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
-const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckbox(props, ref) {
+const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
   const other = _objectWithoutPropertiesLoose(props, _excluded);
   const [, forceUpdate] = React.useState(false);
   const apiRef = useGridApiContext();
@@ -95,7 +96,6 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
   const checked = rootProps.indeterminateCheckboxAction === 'select' ? isChecked && !isIndeterminate : isChecked;
   const label = apiRef.current.getLocaleText(checked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
   return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-    ref: ref,
     indeterminate: isIndeterminate,
     checked: checked,
     onChange: handleChange,
@@ -106,7 +106,9 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
     tabIndex: tabIndex,
     onKeyDown: handleKeyDown,
     disabled: !isMultipleRowSelectionEnabled(rootProps)
-  }, rootProps.slotProps?.baseCheckbox, other));
+  }, rootProps.slotProps?.baseCheckbox, other, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/containers/GridFooterContainer.d.ts

@@ -3,7 +3,7 @@ import { SxProps, Theme } from '@mui/system';
 export type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 };
-declare const GridFooterContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+declare const GridFooterContainer: React.ForwardRefExoticComponent<GridFooterContainerProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridFooterContainer };

package/components/containers/GridFooterContainer.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,7 +30,7 @@ const GridFooterContainerRoot = styled('div', {
   minHeight: 52,
   borderTop: '1px solid'
 });
-const GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterContainer(props, ref) {
+const GridFooterContainer = forwardRef(function GridFooterContainer(props, ref) {
   const {
       className
     } = props,
@@ -37,10 +38,11 @@ const GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterCon
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridFooterContainerRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridFooterContainer.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/containers/GridOverlay.d.ts

@@ -3,7 +3,7 @@ import { Theme, SxProps } from '@mui/system';
 export type GridOverlayProps = React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 };
-declare const GridOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+declare const GridOverlay: React.ForwardRefExoticComponent<GridOverlayProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridOverlay };

package/components/containers/GridOverlay.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -31,7 +32,7 @@ const GridOverlayRoot = styled('div', {
   justifyContent: 'center',
   backgroundColor: 'var(--unstable_DataGrid-overlayBackground)'
 });
-const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
+const GridOverlay = forwardRef(function GridOverlay(props, ref) {
   const {
       className
     } = props,
@@ -39,10 +40,11 @@ const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, re
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridOverlayRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/containers/GridRoot.d.ts

@@ -7,5 +7,5 @@ export interface GridRootProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     sx?: SxProps<Theme>;
 }
-declare const GridRoot: React.ForwardRefExoticComponent<GridRootProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridRoot: React.ForwardRefExoticComponent<GridRootProps> | React.ForwardRefExoticComponent<GridRootProps & React.RefAttributes<HTMLDivElement>>;
 export { GridRoot };

package/components/containers/GridRoot.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridRootStyles } from "./GridRootStyles.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
@@ -23,7 +24,7 @@ const useUtilityClasses = (ownerState, density) => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
-const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
+const GridRoot = forwardRef(function GridRoot(props, ref) {
   const rootProps = useGridRootProps();
   const {
       className
@@ -45,10 +46,11 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     return null;
   }
   return /*#__PURE__*/_jsx(GridRootStyles, _extends({
-    ref: handleRef,
     className: clsx(classes.root, className),
     ownerState: ownerState
-  }, other));
+  }, other, {
+    ref: handleRef
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/containers/GridToolbarContainer.d.ts

@@ -3,7 +3,7 @@ import { SxProps, Theme } from '@mui/system';
 export type GridToolbarContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 };
-declare const GridToolbarContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+declare const GridToolbarContainer: React.ForwardRefExoticComponent<GridToolbarContainerProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridToolbarContainer };

package/components/containers/GridToolbarContainer.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -31,7 +32,7 @@ const GridToolbarContainerRoot = styled('div', {
   gap: theme.spacing(1),
   padding: theme.spacing(0.5, 0.5, 0)
 }));
-const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarContainer(props, ref) {
+const GridToolbarContainer = forwardRef(function GridToolbarContainer(props, ref) {
   const {
       className,
       children
@@ -43,10 +44,10 @@ const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarC
     return null;
   }
   return /*#__PURE__*/_jsx(GridToolbarContainerRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps
   }, other, {
+    ref: ref,
     children: children
   }));
 });

package/components/menu/columnMenu/GridColumnMenu.d.ts

@@ -19,6 +19,6 @@ export declare const GRID_COLUMN_MENU_SLOT_PROPS: {
         displayOrder: number;
     };
 };
-declare const GridGenericColumnMenu: React.ForwardRefExoticComponent<GridGenericColumnMenuProps & React.RefAttributes<HTMLUListElement>>;
-declare const GridColumnMenu: React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>>;
+declare const GridGenericColumnMenu: React.ForwardRefExoticComponent<GridGenericColumnMenuProps> | React.ForwardRefExoticComponent<GridGenericColumnMenuProps & React.RefAttributes<HTMLUListElement>>;
+declare const GridColumnMenu: React.ForwardRefExoticComponent<GridColumnMenuProps> | React.ForwardRefExoticComponent<GridColumnMenuProps & React.RefAttributes<HTMLUListElement>>;
 export { GridColumnMenu, GridGenericColumnMenu };

package/components/menu/columnMenu/GridColumnMenu.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["defaultSlots", "defaultSlotProps", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridColumnMenuSlots } from "../../../hooks/features/columnMenu/useGridColumnMenuSlots.js";
 import { GridColumnMenuContainer } from "./GridColumnMenuContainer.js";
 import { GridColumnMenuColumnsItem } from "./menuItems/GridColumnMenuColumnsItem.js";
@@ -25,7 +26,7 @@ export const GRID_COLUMN_MENU_SLOT_PROPS = {
     displayOrder: 30
   }
 };
-const GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGenericColumnMenu(props, ref) {
+const GridGenericColumnMenu = forwardRef(function GridGenericColumnMenu(props, ref) {
   const {
       defaultSlots,
       defaultSlotProps,
@@ -39,9 +40,8 @@ const GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGeneric
     slots,
     slotProps
   }));
-  return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({}, other, {
+    ref: ref,
     children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/_jsx(Component, _extends({}, otherProps), index))
   }));
 });
@@ -77,7 +77,7 @@ process.env.NODE_ENV !== "production" ? GridGenericColumnMenu.propTypes = {
    */
   slots: PropTypes.object
 } : void 0;
-const GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
+const GridColumnMenu = forwardRef(function GridColumnMenu(props, ref) {
   return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
     ref: ref,
     defaultSlots: GRID_COLUMN_MENU_SLOTS,

package/components/menu/columnMenu/GridColumnMenuContainer.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridColumnMenuContainerProps } from './GridColumnMenuProps';
-declare const GridColumnMenuContainer: React.ForwardRefExoticComponent<GridColumnMenuContainerProps & React.RefAttributes<HTMLUListElement>>;
+declare const GridColumnMenuContainer: React.ForwardRefExoticComponent<GridColumnMenuContainerProps> | React.ForwardRefExoticComponent<GridColumnMenuContainerProps & React.RefAttributes<HTMLUListElement>>;
 export { GridColumnMenuContainer };

package/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -6,13 +6,14 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import MenuList from '@mui/material/MenuList';
 import { styled } from '@mui/material/styles';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { isHideMenuKey } from "../../../utils/keyboardUtils.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledMenuList = styled(MenuList)(() => ({
   minWidth: 248
 }));
-const GridColumnMenuContainer = /*#__PURE__*/React.forwardRef(function GridColumnMenuContainer(props, ref) {
+const GridColumnMenuContainer = forwardRef(function GridColumnMenuContainer(props, ref) {
   const {
       hideMenu,
       id,
@@ -32,12 +33,12 @@ const GridColumnMenuContainer = /*#__PURE__*/React.forwardRef(function GridColum
   }, [hideMenu]);
   return /*#__PURE__*/_jsx(StyledMenuList, _extends({
     id: id,
-    ref: ref,
     className: clsx(gridClasses.menuList, className),
     "aria-labelledby": labelledby,
     onKeyDown: handleListKeyDown,
     autoFocus: open
   }, other, {
+    ref: ref,
     children: children
   }));
 });

package/components/panel/GridPanel.d.ts

@@ -19,5 +19,5 @@ export declare const gridPanelClasses: Record<keyof GridPanelClasses, string>;
 declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").PopperProps & React.RefAttributes<HTMLDivElement>, "hidden" | "color" | "content" | "style" | "open" | "translate" | "container" | "transition" | "slot" | "title" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "component" | "sx" | "components" | "componentsProps" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     ownerState: OwnerState;
 }, {}, {}>;
-declare const GridPanel: React.ForwardRefExoticComponent<Omit<GridPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const GridPanel: React.ForwardRefExoticComponent<GridPanelProps> | React.ForwardRefExoticComponent<Omit<GridPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { GridPanel };