@mui/material 5.16.7 → 5.16.8

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_getReactElementRef as getReactElementRef } from '@mui/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 // Inspired by https://github.com/focus-trap/tabbable
@@ -93,8 +93,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(getReactElementRef(children), rootRef);
   const lastKeydown = React.useRef(null);
   React.useEffect(() => {
     // We might render an empty child.

package/modern/Zoom/Zoom.js

@@ -7,6 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import useTheme from '../styles/useTheme';
 import { reflow, getTransitionProps } from '../transitions/utils';
 import useForkRef from '../utils/useForkRef';
@@ -50,7 +51,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const nodeRef = React.useRef(null);
-  const handleRef = useForkRef(nodeRef, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.16.7
+ * @mui/material v5.16.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/useAutocomplete/useAutocomplete.js

@@ -58,6 +58,7 @@ const defaultFilterOptions = createFilterOptions();
 // Number of options to jump in list box when `Page Up` and `Page Down` keys are used.
 const pageSize = 5;
 const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
+const MULTIPLE_DEFAULT_VALUE = [];
 function useAutocomplete(props) {
   const {
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -71,7 +72,7 @@ function useAutocomplete(props) {
     clearOnBlur = !props.freeSolo,
     clearOnEscape = false,
     componentName = 'useAutocomplete',
-    defaultValue = props.multiple ? [] : null,
+    defaultValue = props.multiple ? MULTIPLE_DEFAULT_VALUE : null,
     disableClearable = false,
     disableCloseOnSelect = false,
     disabled: disabledProp,

package/modern/version/index.js

@@ -1,7 +1,7 @@
-export const version = "5.16.7";
+export const version = "5.16.8";
 export const major = Number("5");
 export const minor = Number("16");
-export const patch = Number("7");
+export const patch = Number("8");
 export const preReleaseLabel = undefined || null;
 export const preReleaseNumber = Number(undefined) || null;
 export default version;

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 _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 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 && Object.prototype.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, _getReactElementRef.default)(children), nodeRef);
 
   // The handler doesn't take event.defaultPrevented into account:
   //

package/node/Fade/Fade.js

@@ -12,6 +12,7 @@ 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 _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -58,7 +59,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(nodeRef, children.ref, ref);
+  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactElementRef.default)(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/node/Grow/Grow.js

@@ -12,6 +12,7 @@ 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 _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _reactTransitionGroup = require("react-transition-group");
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _utils = require("../transitions/utils");
@@ -68,7 +69,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const autoTimeout = React.useRef();
   const theme = (0, _useTheme.default)();
   const nodeRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(nodeRef, children.ref, ref);
+  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactElementRef.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)( /*#__PURE__*/React.isValidElement(children) ? (0, _utils.unstable_getReactElementRef)(children) : null, forwardedRef);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     if (!disablePortal) {
       setMountNode(getContainer(container) || document.body);

package/node/Select/Select.js

@@ -12,6 +12,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 _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _SelectInput = _interopRequireDefault(require("./SelectInput"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
 var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
@@ -98,7 +99,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, _getReactElementRef.default)(InputComponent));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: /*#__PURE__*/React.cloneElement(InputComponent, (0, _extends2.default)({
       // Most of the logic is implemented in `SelectInput`.

package/node/Slide/Slide.js

@@ -15,6 +15,7 @@ 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 _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
@@ -115,7 +116,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const childrenRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(children.ref, childrenRef, ref);
+  const handleRef = (0, _useForkRef.default)((0, _getReactElementRef.default)(children), childrenRef, ref);
   const normalizedTransitionCallback = callback => isAppearing => {
     if (callback) {
       // onEnterXxx and onExitXxx callbacks have a different arguments.length value.

package/node/Slider/useSlider.js

@@ -192,7 +192,7 @@ function useSlider(parameters) {
     tabIndex,
     value: valueProp
   } = parameters;
-  const touchId = React.useRef();
+  const touchId = React.useRef(undefined);
   // We can't use the :active browser pseudo-classes.
   // - The active state isn't triggered when clicking on the rail.
   // - The active state isn't transferred when inversing a range slider.
@@ -236,7 +236,7 @@ function useSlider(parameters) {
     ref: focusVisibleRef
   } = (0, _utils.unstable_useIsFocusVisible)();
   const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
-  const sliderRef = React.useRef();
+  const sliderRef = React.useRef(null);
   const handleFocusRef = (0, _utils.unstable_useForkRef)(focusVisibleRef, sliderRef);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, handleFocusRef);
   const createHandleHiddenInputFocus = otherHandlers => event => {
@@ -347,7 +347,7 @@ function useSlider(parameters) {
     // @ts-ignore
     changeValue(event, event.target.valueAsNumber);
   };
-  const previousIndex = React.useRef();
+  const previousIndex = React.useRef(undefined);
   let axis = orientation;
   if (isRtl && orientation === 'horizontal') {
     axis += '-reverse';

package/node/Tooltip/Tooltip.js

@@ -18,6 +18,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _appendOwnerState = _interopRequireDefault(require("@mui/utils/appendOwnerState"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _styles = require("../styles");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
@@ -436,7 +437,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = (0, _useForkRef.default)(children.ref, focusVisibleRef, setChildNode, ref);
+  const handleRef = (0, _useForkRef.default)((0, _getReactElementRef.default)(children), focusVisibleRef, 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_getReactElementRef)(children), rootRef);
   const lastKeydown = React.useRef(null);
   React.useEffect(() => {
     // We might render an empty child.

package/node/Zoom/Zoom.js

@@ -12,6 +12,7 @@ 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 _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -58,7 +59,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const nodeRef = React.useRef(null);
-  const handleRef = (0, _useForkRef.default)(nodeRef, children.ref, ref);
+  const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactElementRef.default)(children), ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.16.7
+ * @mui/material v5.16.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/useAutocomplete/useAutocomplete.js

@@ -69,6 +69,7 @@ const defaultIsActiveElementInListbox = listboxRef => {
   var _listboxRef$current$p;
   return listboxRef.current !== null && ((_listboxRef$current$p = listboxRef.current.parentElement) == null ? void 0 : _listboxRef$current$p.contains(document.activeElement));
 };
+const MULTIPLE_DEFAULT_VALUE = [];
 function useAutocomplete(props) {
   const {
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -82,7 +83,7 @@ function useAutocomplete(props) {
     clearOnBlur = !props.freeSolo,
     clearOnEscape = false,
     componentName = 'useAutocomplete',
-    defaultValue = props.multiple ? [] : null,
+    defaultValue = props.multiple ? MULTIPLE_DEFAULT_VALUE : null,
     disableClearable = false,
     disableCloseOnSelect = false,
     disabled: disabledProp,

package/node/version/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.preReleaseNumber = exports.preReleaseLabel = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "5.16.7";
+const version = exports.version = "5.16.8";
 const major = exports.major = Number("5");
 const minor = exports.minor = Number("16");
-const patch = exports.patch = Number("7");
+const patch = exports.patch = Number("8");
 const preReleaseLabel = exports.preReleaseLabel = undefined || null;
 const preReleaseNumber = exports.preReleaseNumber = Number(undefined) || null;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.16.7",
+  "version": "5.16.8",
   "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.",
@@ -21,7 +21,7 @@
   "bugs": {
     "url": "https://github.com/mui/material-ui/issues"
   },
-  "homepage": "https://mui.com/material-ui/",
+  "homepage": "https://v5.mui.com/material-ui/",
   "funding": {
     "type": "opencollective",
     "url": "https://opencollective.com/mui-org"
@@ -35,17 +35,17 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "@mui/system": "^5.16.7",
-    "@mui/utils": "^5.16.6",
+    "@mui/system": "^5.16.8",
     "@mui/types": "^7.2.15",
-    "@mui/core-downloads-tracker": "^5.16.7"
+    "@mui/utils": "^5.16.8",
+    "@mui/core-downloads-tracker": "^5.16.8"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/CssVarsProvider.d.ts

@@ -16,7 +16,7 @@ declare const CssVarsProvider: (props: React.PropsWithChildren<Partial<import("@
     storageWindow?: Window | null | undefined;
     disableNestedContext?: boolean | undefined;
     disableStyleSheetGeneration?: boolean | undefined;
-}>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>;
+}>) => React.JSX.Element, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>;
 /**
  * @deprecated Use `InitColorSchemeScript` instead
  * ```diff

package/types/OverridableComponentAugmentation.d.ts

@@ -13,8 +13,8 @@ declare module '@mui/material/OverridableComponent' {
              * Either a string to use a HTML element or a component.
              */
             component: DefaultComponent;
-        } & OverridePropsVer2<TypeMap, DefaultComponent>): JSX.Element;
-        (props: DefaultComponentPropsVer2<TypeMap>): JSX.Element;
+        } & OverridePropsVer2<TypeMap, DefaultComponent>): React.JSX.Element;
+        (props: DefaultComponentPropsVer2<TypeMap>): React.JSX.Element;
     }
     /**
      * Props of the component if `component={Component}` is used.

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.16.7
+ * @mui/material v5.16.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -5068,7 +5068,7 @@
     return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in item) && !(Symbol.iterator in item);
   }
   function deepClone(source) {
-    if (!isPlainObject(source)) {
+    if ( /*#__PURE__*/React__namespace.isValidElement(source) || !isPlainObject(source)) {
       return source;
     }
     var output = {};
@@ -5084,7 +5084,9 @@
     var output = options.clone ? _extends({}, target) : target;
     if (isPlainObject(target) && isPlainObject(source)) {
       Object.keys(source).forEach(function (key) {
-        if (isPlainObject(source[key]) &&
+        if ( /*#__PURE__*/React__namespace.isValidElement(source[key])) {
+          output[key] = source[key];
+        } else if (isPlainObject(source[key]) &&
         // Avoid prototype pollution
         Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
           // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
@@ -8659,6 +8661,24 @@
     return props;
   }
 
+  /**
+   * Returns the ref of a React element handling differences between React 19 and older versions.
+   * It will throw runtime error if the element is not a valid React element.
+   *
+   * @param element React.ReactElement
+   * @returns React.Ref<any> | null
+   */
+  function getReactElementRef(element) {
+    // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
+    if (parseInt(React__namespace.version, 10) >= 19) {
+      var _element$props;
+      return (element == null || (_element$props = element.props) == null ? void 0 : _element$props.ref) || null;
+    }
+    // @ts-expect-error element.ref is not included in the ReactElement type
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189
+    return (element == null ? void 0 : element.ref) || null;
+  }
+
   var ThemeContext = /*#__PURE__*/React__namespace.createContext(null);
   {
     ThemeContext.displayName = 'ThemeContext';
@@ -10233,9 +10253,9 @@
       }, other, {
         children: React__namespace.Children.map(children, function (child) {
           if ( /*#__PURE__*/React__namespace.isValidElement(child) && isMuiElement(child, ['Grid'])) {
-            var _child$props$unstable;
+            var _unstable_level, _child$props;
             return /*#__PURE__*/React__namespace.cloneElement(child, {
-              unstable_level: (_child$props$unstable = child.props.unstable_level) != null ? _child$props$unstable : level + 1
+              unstable_level: (_unstable_level = (_child$props = child.props) == null ? void 0 : _child$props.unstable_level) != null ? _unstable_level : level + 1
             });
           }
           return child;
@@ -16132,6 +16152,7 @@
     var _listboxRef$current$p;
     return listboxRef.current !== null && ((_listboxRef$current$p = listboxRef.current.parentElement) == null ? void 0 : _listboxRef$current$p.contains(document.activeElement));
   };
+  var MULTIPLE_DEFAULT_VALUE = [];
   function useAutocomplete(props) {
     var _props$unstable_isAct = props.unstable_isActiveElementInListbox,
       unstable_isActiveElementInListbox = _props$unstable_isAct === void 0 ? defaultIsActiveElementInListbox : _props$unstable_isAct,
@@ -16152,7 +16173,7 @@
       _props$componentName = props.componentName,
       componentName = _props$componentName === void 0 ? 'useAutocomplete' : _props$componentName,
       _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? props.multiple ? [] : null : _props$defaultValue,
+      defaultValue = _props$defaultValue === void 0 ? props.multiple ? MULTIPLE_DEFAULT_VALUE : null : _props$defaultValue,
       _props$disableClearab = props.disableClearable,
       disableClearable = _props$disableClearab === void 0 ? false : _props$disableClearab,
       _props$disableCloseOn = props.disableCloseOnSelect,
@@ -18958,8 +18979,8 @@
       disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal;
     var _React$useState = React__namespace.useState(null),
       mountNode = _React$useState[0],
-      setMountNode = _React$useState[1]; // @ts-expect-error TODO upstream fix
-    var handleRef = useForkRef( /*#__PURE__*/React__namespace.isValidElement(children) ? children.ref : null, forwardedRef);
+      setMountNode = _React$useState[1];
+    var handleRef = useForkRef( /*#__PURE__*/React__namespace.isValidElement(children) ? getReactElementRef(children) : null, forwardedRef);
     useEnhancedEffect$1(function () {
       if (!disablePortal) {
         setMountNode(getContainer$1(container) || document.body);
@@ -22786,7 +22807,7 @@
       TransitionComponent = _props$TransitionComp === void 0 ? Transition$1 : _props$TransitionComp,
       other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
     var nodeRef = React__namespace.useRef(null);
-    var handleRef = useForkRef(nodeRef, _children.ref, ref);
+    var handleRef = useForkRef(nodeRef, getReactElementRef(_children), ref);
     var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
       return function (maybeIsAppearing) {
         if (callback) {
@@ -26267,9 +26288,7 @@
         activatedRef.current = false;
       };
     }, []);
-    var handleRef = useForkRef(
-    // @ts-expect-error TODO upstream fix
-    children.ref, nodeRef);
+    var handleRef = useForkRef(getReactElementRef(children), nodeRef);
 
     // The handler doesn't take event.defaultPrevented into account:
     //
@@ -26924,8 +26943,7 @@
     // It waits for the active element to move into the component to activate.
     var activated = React__namespace.useRef(false);
     var rootRef = React__namespace.useRef(null);
-    // @ts-expect-error TODO upstream fix
-    var handleRef = useForkRef(children.ref, rootRef);
+    var handleRef = useForkRef(getReactElementRef(children), rootRef);
     var lastKeydown = React__namespace.useRef(null);
     React__namespace.useEffect(function () {
       // We might render an empty child.
@@ -28789,7 +28807,7 @@
       TransitionComponent = _props$TransitionComp === void 0 ? Transition$1 : _props$TransitionComp,
       other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
     var childrenRef = React__namespace.useRef(null);
-    var handleRef = useForkRef(_children.ref, childrenRef, ref);
+    var handleRef = useForkRef(getReactElementRef(_children), childrenRef, ref);
     var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
       return function (isAppearing) {
         if (callback) {
@@ -31608,7 +31626,7 @@
     var autoTimeout = React__namespace.useRef();
     var theme = useTheme();
     var nodeRef = React__namespace.useRef(null);
-    var handleRef = useForkRef(nodeRef, _children.ref, ref);
+    var handleRef = useForkRef(nodeRef, getReactElementRef(_children), ref);
     var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
       return function (maybeIsAppearing) {
         if (callback) {
@@ -40292,7 +40310,7 @@
         ownerState: ownerState
       })
     }[variant];
-    var inputComponentRef = useForkRef(ref, InputComponent.ref);
+    var inputComponentRef = useForkRef(ref, getReactElementRef(InputComponent));
     return /*#__PURE__*/jsxRuntime_1(React__namespace.Fragment, {
       children: /*#__PURE__*/React__namespace.cloneElement(InputComponent, _extends({
         // Most of the logic is implemented in `SelectInput`.
@@ -40846,7 +40864,7 @@
       shiftStep = _parameters$shiftStep === void 0 ? 10 : _parameters$shiftStep,
       tabIndex = parameters.tabIndex,
       valueProp = parameters.value;
-    var touchId = React__namespace.useRef();
+    var touchId = React__namespace.useRef(undefined);
     // We can't use the :active browser pseudo-classes.
     // - The active state isn't triggered when clicking on the rail.
     // - The active state isn't transferred when inversing a range slider.
@@ -40906,7 +40924,7 @@
     var _React$useState4 = React__namespace.useState(-1),
       focusedThumbIndex = _React$useState4[0],
       setFocusedThumbIndex = _React$useState4[1];
-    var sliderRef = React__namespace.useRef();
+    var sliderRef = React__namespace.useRef(null);
     var handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
     var handleRef = useForkRef(ref, handleFocusRef);
     var createHandleHiddenInputFocus = function createHandleHiddenInputFocus(otherHandlers) {
@@ -41025,7 +41043,7 @@
         changeValue(event, event.target.valueAsNumber);
       };
     };
-    var previousIndex = React__namespace.useRef();
+    var previousIndex = React__namespace.useRef(undefined);
     var axis = orientation;
     if (isRtl && orientation === 'horizontal') {
       axis += '-reverse';
@@ -43038,7 +43056,7 @@
       TransitionComponent = _props$TransitionComp === void 0 ? Transition$1 : _props$TransitionComp,
       other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
     var nodeRef = React__namespace.useRef(null);
-    var handleRef = useForkRef(nodeRef, _children.ref, ref);
+    var handleRef = useForkRef(nodeRef, getReactElementRef(_children), ref);
     var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {
       return function (maybeIsAppearing) {
         if (callback) {
@@ -44086,7 +44104,7 @@
         document.removeEventListener('keydown', handleKeyDown);
       };
     }, [handleClose, open]);
-    var handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref);
+    var handleRef = useForkRef(getReactElementRef(children), focusVisibleRef, setChildNode, ref);
 
     // There is no point in displaying an empty tooltip.
     // So we exclude all falsy values, except 0, which is valid.