@mui/material 7.3.8 → 7.3.10

package/esm/Select/SelectInput.d.ts

@@ -23,35 +23,35 @@ export type SelectChangeEvent<Value = string> = Value extends (string & {}) | nu
   };
 });
 export interface SelectInputProps<Value = unknown> {
-  autoFocus?: boolean;
+  autoFocus?: boolean | undefined;
   autoWidth: boolean;
-  defaultOpen?: boolean;
-  disabled?: boolean;
-  error?: boolean;
-  IconComponent?: React.ElementType;
-  inputRef?: (ref: HTMLSelectElement | {
+  defaultOpen?: boolean | undefined;
+  disabled?: boolean | undefined;
+  error?: boolean | undefined;
+  IconComponent?: React.ElementType | undefined;
+  inputRef?: ((ref: HTMLSelectElement | {
     node: HTMLInputElement;
     value: SelectInputProps<Value>['value'];
-  }) => void;
-  MenuProps?: Partial<MenuProps>;
+  }) => void) | undefined;
+  MenuProps?: Partial<MenuProps> | undefined;
   multiple: boolean;
-  name?: string;
+  name?: string | undefined;
   native: boolean;
-  onBlur?: React.FocusEventHandler<any>;
-  onChange?: (event: SelectChangeEvent<Value>, child: React.ReactNode) => void;
-  onClose?: (event: React.SyntheticEvent) => void;
-  onFocus?: React.FocusEventHandler<any>;
-  onKeyDown?: React.KeyboardEventHandler;
-  onMouseDown?: React.MouseEventHandler;
-  onOpen?: (event: React.SyntheticEvent) => void;
-  open?: boolean;
-  readOnly?: boolean;
-  renderValue?: (value: SelectInputProps<Value>['value']) => React.ReactNode;
-  SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement>;
-  sx?: SxProps<Theme>;
-  tabIndex?: number;
-  value?: Value;
-  variant?: 'standard' | 'outlined' | 'filled';
+  onBlur?: React.FocusEventHandler<any> | undefined;
+  onChange?: ((event: SelectChangeEvent<Value>, child: React.ReactNode) => void) | undefined;
+  onClose?: ((event: React.SyntheticEvent) => void) | undefined;
+  onFocus?: React.FocusEventHandler<any> | undefined;
+  onKeyDown?: React.KeyboardEventHandler | undefined;
+  onMouseDown?: React.MouseEventHandler | undefined;
+  onOpen?: ((event: React.SyntheticEvent) => void) | undefined;
+  open?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  renderValue?: ((value: SelectInputProps<Value>['value']) => React.ReactNode) | undefined;
+  SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
+  sx?: SxProps<Theme> | undefined;
+  tabIndex?: number | undefined;
+  value?: Value | undefined;
+  variant?: 'standard' | 'outlined' | 'filled' | undefined;
 }
 declare const SelectInput: React.JSXElementConstructor<SelectInputProps>;
 export default SelectInput;

package/esm/Select/SelectInput.js

@@ -19,6 +19,8 @@ import slotShouldForwardProp from "../styles/slotShouldForwardProp.js";
 import useForkRef from "../utils/useForkRef.js";
 import useControlled from "../utils/useControlled.js";
 import selectClasses, { getSelectUtilityClasses } from "./selectClasses.js";
+import { areEqualValues, isEmpty, getOpenInteractionType } from "./utils/index.js";
+import { SelectFocusSourceProvider } from "./utils/SelectFocusSourceContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SelectSelect = styled(StyledSelectSelect, {
   name: 'MuiSelect',
@@ -74,17 +76,6 @@ const SelectNativeInput = styled('input', {
   width: '100%',
   boxSizing: 'border-box'
 });
-function areEqualValues(a, b) {
-  if (typeof b === 'object' && b !== null) {
-    return a === b;
-  }
-
-  // The value could be a number, the DOM will stringify it anyway.
-  return String(a) === String(b);
-}
-function isEmpty(display) {
-  return display == null || typeof display === 'string' && !display.trim();
-}
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -162,6 +153,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     current: isOpenControlled
   } = React.useRef(openProp != null);
   const [menuMinWidthState, setMenuMinWidthState] = React.useState();
+  const [openInteractionType, setOpenInteractionType] = React.useState(null);
   const handleRef = useForkRef(ref, inputRefProp);
   const handleDisplayRef = React.useCallback(node => {
     displayRef.current = node;
@@ -230,11 +222,15 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   }, [labelId]);
   const update = (openParam, event) => {
     if (openParam) {
+      setOpenInteractionType(getOpenInteractionType(event));
       if (onOpen) {
         onOpen(event);
       }
-    } else if (onClose) {
-      onClose(event);
+    } else {
+      setOpenInteractionType(null);
+      if (onClose) {
+        onClose(event);
+      }
     }
     if (!isOpenControlled) {
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
@@ -510,39 +506,42 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       as: IconComponent,
       className: classes.icon,
       ownerState: ownerState
-    }), /*#__PURE__*/_jsx(Menu, {
-      id: `menu-${name || ''}`,
-      anchorEl: anchorElement,
-      open: open,
-      onClose: handleClose,
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'center'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'center'
-      },
-      ...MenuProps,
-      slotProps: {
-        ...MenuProps.slotProps,
-        list: {
-          'aria-labelledby': labelId,
-          role: 'listbox',
-          'aria-multiselectable': multiple ? 'true' : undefined,
-          disableListWrap: true,
-          id: listboxId,
-          ...listProps
+    }), /*#__PURE__*/_jsx(SelectFocusSourceProvider, {
+      value: openInteractionType,
+      children: /*#__PURE__*/_jsx(Menu, {
+        id: `menu-${name || ''}`,
+        anchorEl: anchorElement,
+        open: open,
+        onClose: handleClose,
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
         },
-        paper: {
-          ...paperProps,
-          style: {
-            minWidth: menuMinWidth,
-            ...(paperProps != null ? paperProps.style : null)
+        ...MenuProps,
+        slotProps: {
+          ...MenuProps.slotProps,
+          list: {
+            'aria-labelledby': labelId,
+            role: 'listbox',
+            'aria-multiselectable': multiple ? 'true' : undefined,
+            disableListWrap: true,
+            id: listboxId,
+            ...listProps
+          },
+          paper: {
+            ...paperProps,
+            style: {
+              minWidth: menuMinWidth,
+              ...(paperProps != null ? paperProps.style : null)
+            }
           }
-        }
-      },
-      children: items
+        },
+        children: items
+      })
     })]
   });
 });

package/esm/Select/index.d.ts

@@ -1,4 +1,5 @@
 export { default } from "./Select.js";
 export * from "./Select.js";
+export * from "./utils/index.js";
 export { default as selectClasses } from "./selectClasses.js";
 export * from "./selectClasses.js";

package/esm/Select/index.js

@@ -1,3 +1,4 @@
 export { default } from "./Select.js";
+export * from "./utils/index.js";
 export { default as selectClasses } from "./selectClasses.js";
 export * from "./selectClasses.js";

package/esm/Select/utils/SelectFocusSourceContext.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare function useSelectFocusSource(): "touch" | "mouse" | "keyboard" | null;
+declare const SelectFocusSourceProvider: React.Provider<"touch" | "mouse" | "keyboard" | null>;
+export { useSelectFocusSource, SelectFocusSourceProvider };

package/esm/Select/utils/SelectFocusSourceContext.js

@@ -0,0 +1,13 @@
+'use client';
+
+import * as React from 'react';
+const SelectFocusSourceContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+  SelectFocusSourceContext.displayName = 'SelectFocusSourceContext';
+}
+function useSelectFocusSource() {
+  const context = React.useContext(SelectFocusSourceContext);
+  return context;
+}
+const SelectFocusSourceProvider = SelectFocusSourceContext.Provider;
+export { useSelectFocusSource, SelectFocusSourceProvider };

package/esm/Select/utils/areEqualValues.d.ts

@@ -0,0 +1 @@
+export default function areEqualValues(a: unknown, b: unknown): boolean;

package/esm/Select/utils/areEqualValues.js

@@ -0,0 +1,8 @@
+export default function areEqualValues(a, b) {
+  if (typeof b === 'object' && b !== null) {
+    return a === b;
+  }
+
+  // The value could be a number, the DOM will stringify it anyway.
+  return String(a) === String(b);
+}

package/esm/Select/utils/getOpenInteractionType.d.ts

@@ -0,0 +1 @@
+export default function getOpenInteractionType(event: MouseEvent | KeyboardEvent | TouchEvent | PointerEvent | null): 'keyboard' | 'pointer' | null;

package/esm/Select/utils/getOpenInteractionType.js

@@ -0,0 +1,12 @@
+export default function getOpenInteractionType(event) {
+  if (!event) {
+    return null;
+  }
+  if (event.type === 'mousedown' || event.type === 'pointerdown' || event.type === 'touchstart') {
+    return 'pointer';
+  }
+  if (event.type === 'keydown' || event.type === 'click' && event.detail === 0) {
+    return 'keyboard';
+  }
+  return null;
+}

package/esm/Select/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { default as getOpenInteractionType } from "./getOpenInteractionType.js";
+export { default as isEmpty } from "./isEmpty.js";
+export { default as areEqualValues } from "./areEqualValues.js";
+export { useSelectFocusSource, SelectFocusSourceProvider } from "./SelectFocusSourceContext.js";

package/esm/Select/utils/index.js

@@ -0,0 +1,4 @@
+export { default as getOpenInteractionType } from "./getOpenInteractionType.js";
+export { default as isEmpty } from "./isEmpty.js";
+export { default as areEqualValues } from "./areEqualValues.js";
+export { useSelectFocusSource, SelectFocusSourceProvider } from "./SelectFocusSourceContext.js";

package/esm/Select/utils/isEmpty.d.ts

@@ -0,0 +1 @@
+export default function isEmpty(display: unknown): boolean;

package/esm/Select/utils/isEmpty.js

@@ -0,0 +1,3 @@
+export default function isEmpty(display) {
+  return display == null || typeof display === 'string' && !display.trim();
+}

package/esm/Skeleton/Skeleton.d.ts

@@ -11,7 +11,7 @@ export interface SkeletonOwnProps {
    * If `false` the animation effect is disabled.
    * @default 'pulse'
    */
-  animation?: 'pulse' | 'wave' | false;
+  animation?: 'pulse' | 'wave' | false | undefined;
   /**
    * Optional children to infer width and height from.
    */
@@ -19,26 +19,26 @@ export interface SkeletonOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<SkeletonClasses>;
+  classes?: Partial<SkeletonClasses> | undefined;
   /**
    * Height of the skeleton.
    * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
    */
-  height?: number | string;
+  height?: number | string | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The type of content that will be rendered.
    * @default 'text'
    */
-  variant?: OverridableStringUnion<'text' | 'rectangular' | 'rounded' | 'circular', SkeletonPropsVariantOverrides>;
+  variant?: OverridableStringUnion<'text' | 'rectangular' | 'rounded' | 'circular', SkeletonPropsVariantOverrides> | undefined;
   /**
    * Width of the skeleton.
    * Useful when the skeleton is inside an inline element with no width of its own.
    */
-  width?: number | string;
+  width?: number | string | undefined;
 }
 export interface SkeletonTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'span'> {
   props: AdditionalProps & SkeletonOwnProps;
@@ -49,14 +49,14 @@ export interface SkeletonTypeMap<AdditionalProps = {}, RootComponent extends Rea
  *
  * Demos:
  *
- * - [Skeleton](https://mui.com/material-ui/react-skeleton/)
+ * - [Skeleton](https://v7.mui.com/material-ui/react-skeleton/)
  *
  * API:
  *
- * - [Skeleton API](https://mui.com/material-ui/api/skeleton/)
+ * - [Skeleton API](https://v7.mui.com/material-ui/api/skeleton/)
  */
 declare const Skeleton: OverridableComponent<SkeletonTypeMap>;
 export type SkeletonProps<RootComponent extends React.ElementType = SkeletonTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<SkeletonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Skeleton;

package/esm/Slide/Slide.d.ts

@@ -6,7 +6,7 @@ export interface SlideProps extends TransitionProps {
    * Set this to `false` to disable this behavior.
    * @default true
    */
-  appear?: boolean;
+  appear?: boolean | undefined;
   /**
    * A single child content element.
    */
@@ -15,12 +15,12 @@ export interface SlideProps extends TransitionProps {
    * An HTML element, or a function that returns one.
    * It's used to set the container the Slide is transitioning from.
    */
-  container?: null | Element | ((element: Element) => Element);
+  container?: null | Element | ((element: Element) => Element) | undefined;
   /**
    * Direction the child node will enter from.
    * @default 'down'
    */
-  direction?: 'left' | 'right' | 'up' | 'down';
+  direction?: 'left' | 'right' | 'up' | 'down' | undefined;
   /**
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.
@@ -29,12 +29,12 @@ export interface SlideProps extends TransitionProps {
    *   exit: theme.transitions.easing.sharp,
    * }
    */
-  easing?: TransitionProps['easing'];
+  easing?: TransitionProps['easing'] | undefined;
   /**
    * If `true`, the component will transition in.
    */
-  in?: TransitionProps['in'];
-  ref?: React.Ref<unknown>;
+  in?: TransitionProps['in'] | undefined;
+  ref?: React.Ref<unknown> | undefined;
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -43,21 +43,21 @@ export interface SlideProps extends TransitionProps {
    *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
-  timeout?: TransitionProps['timeout'];
+  timeout?: TransitionProps['timeout'] | undefined;
 }
 
 /**
- * The Slide transition is used by the [Drawer](https://mui.com/material-ui/react-drawer/) component.
+ * The Slide transition is used by the [Drawer](https://v7.mui.com/material-ui/react-drawer/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *
- * - [Dialog](https://mui.com/material-ui/react-dialog/)
- * - [Transitions](https://mui.com/material-ui/transitions/)
+ * - [Dialog](https://v7.mui.com/material-ui/react-dialog/)
+ * - [Transitions](https://v7.mui.com/material-ui/transitions/)
  *
  * API:
  *
- * - [Slide API](https://mui.com/material-ui/api/slide/)
+ * - [Slide API](https://v7.mui.com/material-ui/api/slide/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
 export default function Slide(props: SlideProps): React.JSX.Element;

package/esm/Slide/Slide.js

@@ -7,26 +7,37 @@ 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 isLayoutSupported from "../utils/isLayoutSupported.js";
 import debounce from "../utils/debounce.js";
 import useForkRef from "../utils/useForkRef.js";
 import { useTheme } from "../zero-styled/index.js";
-import { reflow, getTransitionProps } from "../transitions/utils.js";
+import { normalizedTransitionCallback, reflow, getTransitionProps } from "../transitions/utils.js";
 import { ownerWindow } from "../utils/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const hiddenStyles = {
+  visibility: 'hidden'
+};
 
 // 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`.
-import { jsx as _jsx } from "react/jsx-runtime";
 function getTranslateValue(direction, node, resolvedContainer) {
-  const rect = node.getBoundingClientRect();
   const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
   const containerWindow = ownerWindow(node);
-  let transform;
-  if (node.fakeTransform) {
-    transform = node.fakeTransform;
-  } else {
-    const computedStyle = containerWindow.getComputedStyle(node);
-    transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
-  }
+
+  // Clear the inline transform and transition before reading layout and computed
+  // style so we compute from the element's natural position, not its previous
+  // off-screen translation. The transition must also be cleared, otherwise the
+  // browser may report an animated intermediate value from a still-running
+  // enter transition when reading getComputedStyle during exit.
+  const previousTransform = node.style.transform;
+  const previousTransition = node.style.transition;
+  node.style.transition = '';
+  node.style.transform = '';
+  const rect = node.getBoundingClientRect();
+  const computedStyle = containerWindow.getComputedStyle(node);
+  const transform = computedStyle.getPropertyValue('transform');
+  node.style.transform = previousTransform;
+  node.style.transition = previousTransition;
   let offsetX = 0;
   let offsetY = 0;
   if (transform && transform !== 'none' && typeof transform === 'string') {
@@ -66,7 +77,6 @@ export function setTranslateValue(direction, node, containerProp) {
   const resolvedContainer = resolveContainer(containerProp);
   const transform = getTranslateValue(direction, node, resolvedContainer);
   if (transform) {
-    node.style.webkitTransform = transform;
     node.style.transform = transform;
   }
 }
@@ -101,30 +111,18 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     onExiting,
     style,
     timeout = defaultTimeout,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Transition,
     ...other
   } = props;
   const childrenRef = React.useRef(null);
   const handleRef = useForkRef(getReactElementRef(children), childrenRef, ref);
-  const normalizedTransitionCallback = callback => isAppearing => {
-    if (callback) {
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
-      if (isAppearing === undefined) {
-        callback(childrenRef.current);
-      } else {
-        callback(childrenRef.current, isAppearing);
-      }
-    }
-  };
-  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+  const handleEnter = normalizedTransitionCallback(childrenRef, (node, isAppearing) => {
     setTranslateValue(direction, node, containerProp);
     reflow(node);
     if (onEnter) {
       onEnter(node, isAppearing);
     }
   });
-  const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
+  const handleEntering = normalizedTransitionCallback(childrenRef, (node, isAppearing) => {
     const transitionProps = getTransitionProps({
       timeout,
       style,
@@ -132,21 +130,15 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     }, {
       mode: 'enter'
     });
-    node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
-      ...transitionProps
-    });
-    node.style.transition = theme.transitions.create('transform', {
-      ...transitionProps
-    });
-    node.style.webkitTransform = 'none';
+    node.style.transition = theme.transitions.create('transform', transitionProps);
     node.style.transform = 'none';
     if (onEntering) {
       onEntering(node, isAppearing);
     }
   });
-  const handleEntered = normalizedTransitionCallback(onEntered);
-  const handleExiting = normalizedTransitionCallback(onExiting);
-  const handleExit = normalizedTransitionCallback(node => {
+  const handleEntered = normalizedTransitionCallback(childrenRef, onEntered);
+  const handleExiting = normalizedTransitionCallback(childrenRef, onExiting);
+  const handleExit = normalizedTransitionCallback(childrenRef, node => {
     const transitionProps = getTransitionProps({
       timeout,
       style,
@@ -154,16 +146,14 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.webkitTransition = theme.transitions.create('-webkit-transform', transitionProps);
     node.style.transition = theme.transitions.create('transform', transitionProps);
     setTranslateValue(direction, node, containerProp);
     if (onExit) {
       onExit(node);
     }
   });
-  const handleExited = normalizedTransitionCallback(node => {
+  const handleExited = normalizedTransitionCallback(childrenRef, node => {
     // No need for transitions when the component is hidden
-    node.style.webkitTransition = '';
     node.style.transition = '';
     if (onExited) {
       onExited(node);
@@ -204,7 +194,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       updatePosition();
     }
   }, [inProp, updatePosition]);
-  return /*#__PURE__*/_jsx(TransitionComponent, {
+  return /*#__PURE__*/_jsx(Transition, {
     nodeRef: childrenRef,
     onEnter: handleEnter,
     onEntered: handleEntered,
@@ -221,13 +211,24 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       ownerState,
       ...restChildProps
     }) => {
-      return /*#__PURE__*/React.cloneElement(children, {
-        ref: handleRef,
-        style: {
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+      let childStyle;
+      if (state === 'exited' && !inProp) {
+        childStyle = style || children.props.style ? {
+          visibility: 'hidden',
+          ...style,
+          ...children.props.style
+        } : hiddenStyles;
+      } else if (style && children.props.style) {
+        childStyle = {
           ...style,
           ...children.props.style
-        },
+        };
+      } else {
+        childStyle = style || children.props.style;
+      }
+      return /*#__PURE__*/React.cloneElement(children, {
+        ref: handleRef,
+        style: childStyle,
         ...restChildProps
       });
     }
@@ -263,8 +264,10 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ =
       const resolvedContainer = resolveContainer(props.container);
       if (resolvedContainer && resolvedContainer.nodeType === 1) {
         const box = resolvedContainer.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'production' && !globalThis.MUI_TEST_ENV && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-          return new Error(['MUI: The `container` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
+        if (process.env.NODE_ENV !== 'production') {
+          if (isLayoutSupported() && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+            return new Error(['MUI: The `container` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
+          }
         }
       } else if (!resolvedContainer || typeof resolvedContainer.getBoundingClientRect !== 'function' || resolvedContainer.contextElement != null && resolvedContainer.contextElement.nodeType !== 1) {
         return new Error(['MUI: The `container` prop provided to the component is invalid.', 'It should be an HTML element instance.'].join('\n'));