@mui/material 5.16.7 → 5.16.9

package/Slider/Slider.d.ts

@@ -281,7 +281,7 @@ export interface SliderTypeMap<
 }
 
 export interface SliderValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   index: number;
   open: boolean;
   value: number;

package/Slider/SliderValueLabel.types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface SliderValueLabelProps {
-    children?: React.ReactElement;
+    children?: React.ReactElement<any>;
     className?: string;
     style?: React.CSSProperties;
     /**

package/Slider/useSlider.js

@@ -181,7 +181,7 @@ export 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.
@@ -225,7 +225,7 @@ export function useSlider(parameters) {
     ref: focusVisibleRef
   } = useIsFocusVisible();
   const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
-  const sliderRef = React.useRef();
+  const sliderRef = React.useRef(null);
   const handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
   const handleRef = useForkRef(ref, handleFocusRef);
   const createHandleHiddenInputFocus = otherHandlers => event => {
@@ -336,7 +336,7 @@ export 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/Snackbar/Snackbar.d.ts

@@ -127,4 +127,4 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
  *
  * - [Snackbar API](https://mui.com/material-ui/api/snackbar/)
  */
-export default function Snackbar(props: SnackbarProps): JSX.Element;
+export default function Snackbar(props: SnackbarProps): React.JSX.Element;

package/SnackbarContent/SnackbarContent.d.ts

@@ -40,4 +40,4 @@ export interface SnackbarContentProps extends StandardProps<PaperProps, 'childre
  * - [SnackbarContent API](https://mui.com/material-ui/api/snackbar-content/)
  * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
  */
-export default function SnackbarContent(props: SnackbarContentProps): JSX.Element;
+export default function SnackbarContent(props: SnackbarContentProps): React.JSX.Element;

package/SpeedDial/SpeedDial.d.ts

@@ -102,4 +102,4 @@ export interface SpeedDialProps
  *
  * - [SpeedDial API](https://mui.com/material-ui/api/speed-dial/)
  */
-export default function SpeedDial(props: SpeedDialProps): JSX.Element;
+export default function SpeedDial(props: SpeedDialProps): React.JSX.Element;

package/SpeedDialAction/SpeedDialAction.d.ts

@@ -60,4 +60,4 @@ export interface SpeedDialActionProps extends StandardProps<Partial<TooltipProps
  * - [SpeedDialAction API](https://mui.com/material-ui/api/speed-dial-action/)
  * - inherits [Tooltip API](https://mui.com/material-ui/api/tooltip/)
  */
-export default function SpeedDialAction(props: SpeedDialActionProps): JSX.Element;
+export default function SpeedDialAction(props: SpeedDialActionProps): React.JSX.Element;

package/SpeedDialIcon/SpeedDialIcon.d.ts

@@ -39,6 +39,8 @@ export interface SpeedDialIconProps
  *
  * - [SpeedDialIcon API](https://mui.com/material-ui/api/speed-dial-icon/)
  */
-declare const SpeedDialIcon: ((props: SpeedDialIconProps) => JSX.Element) & { muiName: string };
+declare const SpeedDialIcon: ((props: SpeedDialIconProps) => React.JSX.Element) & {
+  muiName: string;
+};
 
 export default SpeedDialIcon;

package/StepConnector/StepConnector.d.ts

@@ -4,7 +4,7 @@ import { InternalStandardProps as StandardProps } from '..';
 import { Theme } from '../styles';
 import { StepConnectorClasses } from './stepConnectorClasses';
 
-export type StepConnectorIcon = React.ReactElement | string | number;
+export type StepConnectorIcon = React.ReactElement<any> | string | number;
 
 export interface StepConnectorProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'children'> {
@@ -30,4 +30,4 @@ export type StepConnectorClasskey = keyof NonNullable<StepConnectorProps['classe
  *
  * - [StepConnector API](https://mui.com/material-ui/api/step-connector/)
  */
-export default function StepConnector(props: StepConnectorProps): JSX.Element;
+export default function StepConnector(props: StepConnectorProps): React.JSX.Element;

package/StepContent/StepContent.d.ts

@@ -53,4 +53,4 @@ export type StepContentClasskey = keyof NonNullable<StepContentProps['classes']>
  *
  * - [StepContent API](https://mui.com/material-ui/api/step-content/)
  */
-export default function StepContent(props: StepContentProps): JSX.Element;
+export default function StepContent(props: StepContentProps): React.JSX.Element;

package/StepIcon/StepIcon.d.ts

@@ -47,4 +47,4 @@ export type StepIconClasskey = keyof NonNullable<StepIconProps['classes']>;
  *
  * - [StepIcon API](https://mui.com/material-ui/api/step-icon/)
  */
-export default function StepIcon(props: StepIconProps): JSX.Element;
+export default function StepIcon(props: StepIconProps): React.JSX.Element;

package/StepLabel/StepLabel.d.ts

@@ -75,6 +75,8 @@ export type StepLabelClasskey = keyof NonNullable<StepLabelProps['classes']>;
  *
  * - [StepLabel API](https://mui.com/material-ui/api/step-label/)
  */
-declare const StepLabel: ((props: StepLabelProps) => JSX.Element) & { muiName: string };
+declare const StepLabel: ((props: StepLabelProps) => React.JSX.Element) & {
+  muiName: string;
+};
 
 export default StepLabel;

package/Switch/Switch.d.ts

@@ -66,4 +66,4 @@ export interface SwitchProps
  * - [Switch API](https://mui.com/material-ui/api/switch/)
  * - inherits [IconButton API](https://mui.com/material-ui/api/icon-button/)
  */
-export default function Switch(props: SwitchProps): JSX.Element;
+export default function Switch(props: SwitchProps): React.JSX.Element;

package/Tab/Tab.d.ts

@@ -28,7 +28,7 @@ export interface TabOwnProps {
   /**
    * The icon to display.
    */
-  icon?: string | React.ReactElement;
+  icon?: string | React.ReactElement<any>;
   /**
    * The position of the icon relative to the label.
    * @default 'top'

package/TabScrollButton/TabScrollButton.d.ts

@@ -75,4 +75,4 @@ export interface TabScrollButtonProps extends ButtonBaseProps {
  *
  * - [TabScrollButton API](https://mui.com/material-ui/api/tab-scroll-button/)
  */
-export default function TabScrollButton(props: TabScrollButtonProps): JSX.Element;
+export default function TabScrollButton(props: TabScrollButtonProps): React.JSX.Element;

package/TableCell/TableCell.d.ts

@@ -83,4 +83,4 @@ export type SortDirection = 'asc' | 'desc' | false;
  *
  * - [TableCell API](https://mui.com/material-ui/api/table-cell/)
  */
-export default function TableCell(props: TableCellProps): JSX.Element;
+export default function TableCell(props: TableCellProps): React.JSX.Element;

package/Tabs/ScrollbarSize.js

@@ -51,9 +51,10 @@ export default function ScrollbarSize(props) {
     onChange(scrollbarHeight.current);
   }, [onChange]);
   return /*#__PURE__*/_jsx("div", _extends({
-    style: styles,
+    style: styles
+  }, other, {
     ref: nodeRef
-  }, other));
+  }));
 }
 process.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = {
   onChange: PropTypes.func.isRequired

package/TextField/TextField.d.ts

@@ -285,4 +285,4 @@ export default function TextField<Variant extends TextFieldVariants>(
      */
     variant?: Variant;
   } & Omit<TextFieldProps, 'variant'>,
-): JSX.Element;
+): React.JSX.Element;

package/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -86,4 +86,4 @@ export interface ToggleButtonGroupProps
  *
  * - [ToggleButtonGroup API](https://mui.com/material-ui/api/toggle-button-group/)
  */
-export default function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element;
+export default function ToggleButtonGroup(props: ToggleButtonGroupProps): React.JSX.Element;

package/Tooltip/Tooltip.d.ts

@@ -225,4 +225,4 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
  *
  * - [Tooltip API](https://mui.com/material-ui/api/tooltip/)
  */
-export default function Tooltip(props: TooltipProps): JSX.Element;
+export default function Tooltip(props: TooltipProps): React.JSX.Element;

package/Tooltip/Tooltip.js

@@ -12,6 +12,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import appendOwnerState from '@mui/utils/appendOwnerState';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import { styled, useTheme } from '../styles';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
@@ -428,7 +429,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [handleClose, open]);
-  const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref);
+  const 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.

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_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/Zoom/Zoom.d.ts

@@ -47,4 +47,4 @@ export interface ZoomProps extends TransitionProps {
  * - [Zoom API](https://mui.com/material-ui/api/zoom/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
-export default function Zoom(props: ZoomProps): JSX.Element;
+export default function Zoom(props: ZoomProps): React.JSX.Element;

package/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/index.js

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

package/legacy/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 getReactElementRef from '@mui/utils/getReactElementRef';
 
 // 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";
@@ -48,9 +49,7 @@ function ClickAwayListener(props) {
       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:
   //

package/legacy/Fade/Fade.js

@@ -6,6 +6,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';
@@ -49,7 +50,7 @@ var Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
   var enableStrictModeCompat = true;
   var nodeRef = React.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) {

package/legacy/Grow/Grow.js

@@ -6,6 +6,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useTimeout from '@mui/utils/useTimeout';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import { Transition } from 'react-transition-group';
 import useTheme from '../styles/useTheme';
 import { getTransitionProps, reflow } from '../transitions/utils';
@@ -59,7 +60,7 @@ var Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   var autoTimeout = React.useRef();
   var theme = useTheme();
   var nodeRef = React.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) {

package/legacy/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_getReactElementRef as getReactElementRef } from '@mui/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 function getContainer(container) {
   return typeof container === 'function' ? container() : container;
@@ -28,8 +28,8 @@ var Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef)
     disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal;
   var _React$useState = React.useState(null),
     mountNode = _React$useState[0],
-    setMountNode = _React$useState[1]; // @ts-expect-error TODO upstream fix
-  var handleRef = useForkRef( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, forwardedRef);
+    setMountNode = _React$useState[1];
+  var handleRef = useForkRef( /*#__PURE__*/React.isValidElement(children) ? getReactElementRef(children) : null, forwardedRef);
   useEnhancedEffect(function () {
     if (!disablePortal) {
       setMountNode(getContainer(container) || document.body);

package/legacy/Select/Select.js

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

package/legacy/Slide/Slide.js

@@ -8,6 +8,7 @@ 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 getReactElementRef from '@mui/utils/getReactElementRef';
 import debounce from '../utils/debounce';
 import useForkRef from '../utils/useForkRef';
 import useTheme from '../styles/useTheme';
@@ -109,7 +110,7 @@ var Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
     other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "container", "direction", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
   var childrenRef = React.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) {

package/legacy/Slider/useSlider.js

@@ -203,7 +203,7 @@ export function useSlider(parameters) {
     shiftStep = _parameters$shiftStep === void 0 ? 10 : _parameters$shiftStep,
     tabIndex = parameters.tabIndex,
     valueProp = parameters.value;
-  var touchId = React.useRef();
+  var 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.
@@ -263,7 +263,7 @@ export function useSlider(parameters) {
   var _React$useState4 = React.useState(-1),
     focusedThumbIndex = _React$useState4[0],
     setFocusedThumbIndex = _React$useState4[1];
-  var sliderRef = React.useRef();
+  var sliderRef = React.useRef(null);
   var handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
   var handleRef = useForkRef(ref, handleFocusRef);
   var createHandleHiddenInputFocus = function createHandleHiddenInputFocus(otherHandlers) {
@@ -382,7 +382,7 @@ export function useSlider(parameters) {
       changeValue(event, event.target.valueAsNumber);
     };
   };
-  var previousIndex = React.useRef();
+  var previousIndex = React.useRef(undefined);
   var axis = orientation;
   if (isRtl && orientation === 'horizontal') {
     axis += '-reverse';

package/legacy/Tabs/ScrollbarSize.js

@@ -48,9 +48,10 @@ export default function ScrollbarSize(props) {
     onChange(scrollbarHeight.current);
   }, [onChange]);
   return /*#__PURE__*/_jsx("div", _extends({
-    style: styles,
+    style: styles
+  }, other, {
     ref: nodeRef
-  }, other));
+  }));
 }
 process.env.NODE_ENV !== "production" ? ScrollbarSize.propTypes = {
   onChange: PropTypes.func.isRequired

package/legacy/Tooltip/Tooltip.js

@@ -13,6 +13,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
 import appendOwnerState from '@mui/utils/appendOwnerState';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import { styled, useTheme } from '../styles';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
@@ -442,7 +443,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       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.

package/legacy/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
@@ -102,8 +102,7 @@ function FocusTrap(props) {
   // It waits for the active element to move into the component to activate.
   var activated = React.useRef(false);
   var rootRef = React.useRef(null);
-  // @ts-expect-error TODO upstream fix
-  var handleRef = useForkRef(children.ref, rootRef);
+  var handleRef = useForkRef(getReactElementRef(children), rootRef);
   var lastKeydown = React.useRef(null);
   React.useEffect(function () {
     // We might render an empty child.

package/legacy/Zoom/Zoom.js

@@ -6,6 +6,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';
@@ -49,7 +50,7 @@ var Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,
     other = _objectWithoutProperties(props, ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"]);
   var nodeRef = React.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) {

package/legacy/index.js

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

package/legacy/useAutocomplete/useAutocomplete.js

@@ -65,6 +65,7 @@ var defaultIsActiveElementInListbox = function defaultIsActiveElementInListbox(l
   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,
@@ -85,7 +86,7 @@ function useAutocomplete(props) {
     _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,

package/legacy/version/index.js

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

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 getReactElementRef from '@mui/utils/getReactElementRef';
 
 // 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(getReactElementRef(children), nodeRef);
 
   // The handler doesn't take event.defaultPrevented into account:
   //

package/modern/Fade/Fade.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 Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const enableStrictModeCompat = true;
   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/Grow/Grow.js

@@ -7,6 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import useTimeout from '@mui/utils/useTimeout';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
+import getReactElementRef from '@mui/utils/getReactElementRef';
 import { Transition } from 'react-transition-group';
 import useTheme from '../styles/useTheme';
 import { getTransitionProps, reflow } from '../transitions/utils';
@@ -60,7 +61,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, children.ref, ref);
+  const handleRef = useForkRef(nodeRef, getReactElementRef(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_getReactElementRef as getReactElementRef } 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( /*#__PURE__*/React.isValidElement(children) ? getReactElementRef(children) : null, forwardedRef);
   useEnhancedEffect(() => {
     if (!disablePortal) {
       setMountNode(getContainer(container) || document.body);

package/modern/Select/Select.js

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