@mui/material 6.0.0-beta.4 → 6.0.0-beta.4-dev.20240802-144226-85a3b55d22

package/ClickAwayListener/ClickAwayListener.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { elementAcceptingRef, exactProp, unstable_ownerDocument as ownerDocument, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 
 // TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -47,9 +48,7 @@ function ClickAwayListener(props) {
       activatedRef.current = false;
     };
   }, []);
-  const handleRef = useForkRef(
-  // @ts-expect-error TODO upstream fix
-  children.ref, nodeRef);
+  const handleRef = useForkRef(getReactNodeRef(children), nodeRef);
 
   // The handler doesn't take event.defaultPrevented into account:
   //

package/Fade/Fade.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
-import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   entering: {
@@ -48,7 +48,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   } = props;
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
+  const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/Grow/Grow.js

@@ -4,11 +4,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useTimeout from '@mui/utils/useTimeout';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 import { Transition } from 'react-transition-group';
 import { useTheme } from '../zero-styled';
 import { getTransitionProps, reflow } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
-import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
@@ -58,7 +58,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = useTheme();
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
+  const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/Portal/Portal.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import { exactProp, HTMLElementType, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useForkRef as useForkRef, unstable_setRef as setRef } from '@mui/utils';
+import { exactProp, HTMLElementType, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useForkRef as useForkRef, unstable_setRef as setRef, unstable_getReactNodeRef as getReactNodeRef } from '@mui/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 function getContainer(container) {
   return typeof container === 'function' ? container() : container;
@@ -28,8 +28,7 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
     disablePortal = false
   } = props;
   const [mountNode, setMountNode] = React.useState(null);
-  // @ts-expect-error TODO upstream fix
-  const handleRef = useForkRef( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, forwardedRef);
+  const handleRef = useForkRef(getReactNodeRef(children), forwardedRef);
   useEnhancedEffect(() => {
     if (!disablePortal) {
       setMountNode(getContainer(container) || document.body);

package/Select/Select.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import deepmerge from '@mui/utils/deepmerge';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 import SelectInput from './SelectInput';
 import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
@@ -91,7 +92,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       ownerState: ownerState
     })
   }[variant];
-  const inputComponentRef = useForkRef(ref, InputComponent.ref);
+  const inputComponentRef = useForkRef(ref, getReactNodeRef(InputComponent));
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: /*#__PURE__*/React.cloneElement(InputComponent, {
       // Most of the logic is implemented in `SelectInput`.

package/Slide/Slide.js

@@ -6,12 +6,12 @@ import { Transition } from 'react-transition-group';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 import debounce from '../utils/debounce';
 import useForkRef from '../utils/useForkRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { ownerWindow } from '../utils';
-import getChildRef from '../utils/getChildRef';
 
 // Translate the node so it can't be seen on the screen.
 // Later, we're going to translate the node back to its original location with `none`.
@@ -106,7 +106,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     ...other
   } = props;
   const childrenRef = React.useRef(null);
-  const handleRef = useForkRef(getChildRef(children), childrenRef, ref);
+  const handleRef = useForkRef(getReactNodeRef(children), childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {
       // onEnterXxx and onExitXxx callbacks have a different arguments.length value.

package/Tooltip/Tooltip.js

@@ -10,6 +10,7 @@ import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import isFocusVisible from '@mui/utils/isFocusVisible';
 import appendOwnerState from '@mui/utils/appendOwnerState';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 import { styled, useTheme } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
@@ -20,7 +21,6 @@ import useForkRef from '../utils/useForkRef';
 import useId from '../utils/useId';
 import useControlled from '../utils/useControlled';
 import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses';
-import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
@@ -511,7 +511,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = useForkRef(getChildRef(children), setChildNode, ref);
+  const handleRef = useForkRef(getReactNodeRef(children), setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.

package/Unstable_TrapFocus/FocusTrap.js

@@ -3,7 +3,7 @@
 /* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { exactProp, elementAcceptingRef, unstable_useForkRef as useForkRef, unstable_ownerDocument as ownerDocument } from '@mui/utils';
+import { exactProp, elementAcceptingRef, unstable_useForkRef as useForkRef, unstable_ownerDocument as ownerDocument, unstable_getReactNodeRef as getReactNodeRef } from '@mui/utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Inspired by https://github.com/focus-trap/tabbable
 const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
@@ -92,8 +92,7 @@ function FocusTrap(props) {
   // It waits for the active element to move into the component to activate.
   const activated = React.useRef(false);
   const rootRef = React.useRef(null);
-  // @ts-expect-error TODO upstream fix
-  const handleRef = useForkRef(children.ref, rootRef);
+  const handleRef = useForkRef(getReactNodeRef(children), rootRef);
   const lastKeydown = React.useRef(null);
   React.useEffect(() => {
     // We might render an empty child.

package/Zoom/Zoom.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
-import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   entering: {
@@ -48,7 +48,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     ...other
   } = props;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
+  const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-beta.4
+ * @mui/material v6.0.0-beta.4-dev.20240802-144226-85a3b55d22
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/ClickAwayListener/ClickAwayListener.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { elementAcceptingRef, exactProp, unstable_ownerDocument as ownerDocument, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 
 // TODO: return `EventHandlerName extends `on${infer EventName}` ? Lowercase<EventName> : never` once generatePropTypes runs with TS 4.1
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -47,9 +48,7 @@ function ClickAwayListener(props) {
       activatedRef.current = false;
     };
   }, []);
-  const handleRef = useForkRef(
-  // @ts-expect-error TODO upstream fix
-  children.ref, nodeRef);
+  const handleRef = useForkRef(getReactNodeRef(children), nodeRef);
 
   // The handler doesn't take event.defaultPrevented into account:
   //

package/modern/Fade/Fade.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
-import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   entering: {
@@ -48,7 +48,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   } = props;
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
+  const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/modern/Grow/Grow.js

@@ -4,11 +4,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useTimeout from '@mui/utils/useTimeout';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 import { Transition } from 'react-transition-group';
 import { useTheme } from '../zero-styled';
 import { getTransitionProps, reflow } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
-import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 function getScale(value) {
   return `scale(${value}, ${value ** 2})`;
@@ -58,7 +58,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = useTheme();
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
+  const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/modern/Portal/Portal.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import { exactProp, HTMLElementType, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useForkRef as useForkRef, unstable_setRef as setRef } from '@mui/utils';
+import { exactProp, HTMLElementType, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useForkRef as useForkRef, unstable_setRef as setRef, unstable_getReactNodeRef as getReactNodeRef } from '@mui/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 function getContainer(container) {
   return typeof container === 'function' ? container() : container;
@@ -28,8 +28,7 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
     disablePortal = false
   } = props;
   const [mountNode, setMountNode] = React.useState(null);
-  // @ts-expect-error TODO upstream fix
-  const handleRef = useForkRef( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, forwardedRef);
+  const handleRef = useForkRef(getReactNodeRef(children), forwardedRef);
   useEnhancedEffect(() => {
     if (!disablePortal) {
       setMountNode(getContainer(container) || document.body);

package/modern/Select/Select.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import deepmerge from '@mui/utils/deepmerge';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 import SelectInput from './SelectInput';
 import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
@@ -91,7 +92,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       ownerState: ownerState
     })
   }[variant];
-  const inputComponentRef = useForkRef(ref, InputComponent.ref);
+  const inputComponentRef = useForkRef(ref, getReactNodeRef(InputComponent));
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: /*#__PURE__*/React.cloneElement(InputComponent, {
       // Most of the logic is implemented in `SelectInput`.

package/modern/Slide/Slide.js

@@ -6,12 +6,12 @@ import { Transition } from 'react-transition-group';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 import debounce from '../utils/debounce';
 import useForkRef from '../utils/useForkRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import { ownerWindow } from '../utils';
-import getChildRef from '../utils/getChildRef';
 
 // Translate the node so it can't be seen on the screen.
 // Later, we're going to translate the node back to its original location with `none`.
@@ -106,7 +106,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     ...other
   } = props;
   const childrenRef = React.useRef(null);
-  const handleRef = useForkRef(getChildRef(children), childrenRef, ref);
+  const handleRef = useForkRef(getReactNodeRef(children), childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {
       // onEnterXxx and onExitXxx callbacks have a different arguments.length value.

package/modern/Tooltip/Tooltip.js

@@ -10,6 +10,7 @@ import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import isFocusVisible from '@mui/utils/isFocusVisible';
 import appendOwnerState from '@mui/utils/appendOwnerState';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 import { styled, useTheme } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
@@ -20,7 +21,6 @@ import useForkRef from '../utils/useForkRef';
 import useId from '../utils/useId';
 import useControlled from '../utils/useControlled';
 import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses';
-import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function round(value) {
   return Math.round(value * 1e5) / 1e5;
@@ -511,7 +511,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = useForkRef(getChildRef(children), setChildNode, ref);
+  const handleRef = useForkRef(getReactNodeRef(children), setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.

package/modern/Unstable_TrapFocus/FocusTrap.js

@@ -3,7 +3,7 @@
 /* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { exactProp, elementAcceptingRef, unstable_useForkRef as useForkRef, unstable_ownerDocument as ownerDocument } from '@mui/utils';
+import { exactProp, elementAcceptingRef, unstable_useForkRef as useForkRef, unstable_ownerDocument as ownerDocument, unstable_getReactNodeRef as getReactNodeRef } from '@mui/utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Inspired by https://github.com/focus-trap/tabbable
 const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
@@ -92,8 +92,7 @@ function FocusTrap(props) {
   // It waits for the active element to move into the component to activate.
   const activated = React.useRef(false);
   const rootRef = React.useRef(null);
-  // @ts-expect-error TODO upstream fix
-  const handleRef = useForkRef(children.ref, rootRef);
+  const handleRef = useForkRef(getReactNodeRef(children), rootRef);
   const lastKeydown = React.useRef(null);
   React.useEffect(() => {
     // We might render an empty child.

package/modern/Zoom/Zoom.js

@@ -4,10 +4,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getReactNodeRef from '@mui/utils/getReactNodeRef';
 import { useTheme } from '../zero-styled';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
-import getChildRef from '../utils/getChildRef';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   entering: {
@@ -48,7 +48,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     ...other
   } = props;
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, getChildRef(children), ref);
+  const handleRef = useForkRef(nodeRef, getReactNodeRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-beta.4
+ * @mui/material v6.0.0-beta.4-dev.20240802-144226-85a3b55d22
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/ClickAwayListener/ClickAwayListener.js

@@ -9,6 +9,7 @@ exports.ClickAwayListener = ClickAwayListener;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
+var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -54,9 +55,7 @@ function ClickAwayListener(props) {
       activatedRef.current = false;
     };
   }, []);
-  const handleRef = (0, _utils.unstable_useForkRef)(
-  // @ts-expect-error TODO upstream fix
-  children.ref, nodeRef);
+  const handleRef = (0, _utils.unstable_useForkRef)((0, _getReactNodeRef.default)(children), nodeRef);
 
   // The handler doesn't take event.defaultPrevented into account:
   //

package/node/Fade/Fade.js

@@ -10,10 +10,10 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
 var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
-var _getChildRef = _interopRequireDefault(require("../utils/getChildRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -56,7 +56,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   } = props;
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getChildRef.default)(children), ref);
+  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactNodeRef.default)(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/node/Grow/Grow.js

@@ -10,11 +10,11 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
 var _reactTransitionGroup = require("react-transition-group");
 var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
-var _getChildRef = _interopRequireDefault(require("../utils/getChildRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -66,7 +66,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = (0, _zeroStyled.useTheme)();
   const nodeRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getChildRef.default)(children), ref);
+  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactNodeRef.default)(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/node/Portal/Portal.js

@@ -36,8 +36,7 @@ const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef
     disablePortal = false
   } = props;
   const [mountNode, setMountNode] = React.useState(null);
-  // @ts-expect-error TODO upstream fix
-  const handleRef = (0, _utils.unstable_useForkRef)( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, forwardedRef);
+  const handleRef = (0, _utils.unstable_useForkRef)((0, _utils.unstable_getReactNodeRef)(children), forwardedRef);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     if (!disablePortal) {
       setMountNode(getContainer(container) || document.body);

package/node/Select/Select.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
+var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
 var _SelectInput = _interopRequireDefault(require("./SelectInput"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
@@ -99,7 +100,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       ownerState: ownerState
     })
   }[variant];
-  const inputComponentRef = (0, _useForkRef.default)(ref, InputComponent.ref);
+  const inputComponentRef = (0, _useForkRef.default)(ref, (0, _getReactNodeRef.default)(InputComponent));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: /*#__PURE__*/React.cloneElement(InputComponent, {
       // Most of the logic is implemented in `SelectInput`.

package/node/Slide/Slide.js

@@ -13,12 +13,12 @@ var _reactTransitionGroup = require("react-transition-group");
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _utils2 = require("../utils");
-var _getChildRef = _interopRequireDefault(require("../utils/getChildRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -114,7 +114,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     ...other
   } = props;
   const childrenRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)((0, _getChildRef.default)(children), childrenRef, ref);
+  const handleRef = (0, _useForkRef.default)((0, _getReactNodeRef.default)(children), childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {
       // onEnterXxx and onExitXxx callbacks have a different arguments.length value.

package/node/Tooltip/Tooltip.js

@@ -17,6 +17,7 @@ var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _isFocusVisible = _interopRequireDefault(require("@mui/utils/isFocusVisible"));
 var _appendOwnerState = _interopRequireDefault(require("@mui/utils/appendOwnerState"));
+var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -27,7 +28,6 @@ var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useId = _interopRequireDefault(require("../utils/useId"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _tooltipClasses = _interopRequireWildcard(require("./tooltipClasses"));
-var _getChildRef = _interopRequireDefault(require("../utils/getChildRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -521,7 +521,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = (0, _useForkRef.default)((0, _getChildRef.default)(children), setChildNode, ref);
+  const handleRef = (0, _useForkRef.default)((0, _getReactNodeRef.default)(children), setChildNode, ref);
 
   // There is no point in displaying an empty tooltip.
   // So we exclude all falsy values, except 0, which is valid.

package/node/Unstable_TrapFocus/FocusTrap.js

@@ -100,8 +100,7 @@ function FocusTrap(props) {
   // It waits for the active element to move into the component to activate.
   const activated = React.useRef(false);
   const rootRef = React.useRef(null);
-  // @ts-expect-error TODO upstream fix
-  const handleRef = (0, _utils.unstable_useForkRef)(children.ref, rootRef);
+  const handleRef = (0, _utils.unstable_useForkRef)((0, _utils.unstable_getReactNodeRef)(children), rootRef);
   const lastKeydown = React.useRef(null);
   React.useEffect(() => {
     // We might render an empty child.

package/node/Zoom/Zoom.js

@@ -10,10 +10,10 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _getReactNodeRef = _interopRequireDefault(require("@mui/utils/getReactNodeRef"));
 var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
-var _getChildRef = _interopRequireDefault(require("../utils/getChildRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -56,7 +56,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     ...other
   } = props;
   const nodeRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getChildRef.default)(children), ref);
+  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactNodeRef.default)(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-beta.4
+ * @mui/material v6.0.0-beta.4-dev.20240802-144226-85a3b55d22
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.0.0-beta.4",
+  "version": "6.0.0-beta.4-dev.20240802-144226-85a3b55d22",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -36,9 +36,9 @@
     "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
     "@mui/core-downloads-tracker": "^6.0.0-beta.4",
-    "@mui/system": "6.0.0-beta.4",
+    "@mui/system": "6.0.0-beta.4-dev.20240802-144226-85a3b55d22",
     "@mui/types": "^7.2.14",
-    "@mui/utils": "6.0.0-beta.4"
+    "@mui/utils": "6.0.0-beta.4-dev.20240802-144226-85a3b55d22"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -46,7 +46,7 @@
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "@mui/material-pigment-css": "^6.0.0-beta.4"
+    "@mui/material-pigment-css": "^6.0.0-beta.4-dev.20240802-144226-85a3b55d22"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/modern/utils/getChildRef.js

@@ -1,9 +0,0 @@
-import * as React from 'react';
-export default function getChildRef(child) {
-  if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
-    return null;
-  }
-  // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in React 18
-  // below check is to ensure 'ref' is accessible in both cases
-  return child.props.propertyIsEnumerable('ref') ? child.props.ref : child.ref;
-}

package/node/utils/getChildRef.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getChildRef;
-var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function getChildRef(child) {
-  if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
-    return null;
-  }
-  // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in React 18
-  // below check is to ensure 'ref' is accessible in both cases
-  return child.props.propertyIsEnumerable('ref') ? child.props.ref : child.ref;
-}

package/utils/getChildRef.d.ts

@@ -1 +0,0 @@
-export default function getChildRef(child: React.ReactElement): React.Ref<any> | null;

package/utils/getChildRef.js

@@ -1,9 +0,0 @@
-import * as React from 'react';
-export default function getChildRef(child) {
-  if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
-    return null;
-  }
-  // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in React 18
-  // below check is to ensure 'ref' is accessible in both cases
-  return child.props.propertyIsEnumerable('ref') ? child.props.ref : child.ref;
-}