@mui/material 7.3.6 → 7.3.8

package/Slide/Slide.js

@@ -270,7 +270,7 @@ 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 !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+        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'));
         }
       } else if (!resolvedContainer || typeof resolvedContainer.getBoundingClientRect !== 'function' || resolvedContainer.contextElement != null && resolvedContainer.contextElement.nodeType !== 1) {

package/Tabs/Tabs.d.ts

@@ -8,6 +8,7 @@ import { OverridableComponent, OverrideProps } from "../OverridableComponent/ind
 import { TabsClasses } from "./tabsClasses.js";
 import SvgIcon from "../SvgIcon/index.js";
 export interface TabsPropsIndicatorColorOverrides {}
+export interface TabsPropsVariantOverrides {}
 export interface TabsRootSlotPropsOverrides {}
 export interface TabsScrollerSlotPropsOverrides {}
 export interface TabsListSlotPropsOverrides {}
@@ -87,7 +88,7 @@ export type TabsSlotsAndSlotProps = CreateSlotsAndSlotProps<TabsSlots, {
    */
   indicator: SlotProps<'span', TabsIndicatorSlotPropsOverrides, TabsOwnerState>;
   /**
-   * Props forwarded to the scrollButton slot.
+   * Props forwarded to the scrollButtons slot.
    * By default, the available props are based on the [TabScrollButton](https://mui.com/material-ui/api/tab-scroll-button/#props) component.
    */
   scrollButtons: SlotProps<typeof TabScrollButton, TabsScrollButtonsSlotPropsOverrides, TabsOwnerState>;
@@ -234,7 +235,7 @@ export interface TabsOwnProps extends TabsSlotsAndSlotProps {
    *  - `standard` will render the default state.
    * @default 'standard'
    */
-  variant?: 'standard' | 'scrollable' | 'fullWidth';
+  variant?: OverridableStringUnion<'standard' | 'scrollable' | 'fullWidth', TabsPropsVariantOverrides>;
   /**
    * If `true`, the scrollbar is visible. It can be useful when displaying
    * a long vertical list of tabs.

package/Tabs/Tabs.js

@@ -352,7 +352,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     slots,
     slotProps: {
       indicator: TabIndicatorProps,
-      scrollButton: TabScrollButtonProps,
+      scrollButtons: TabScrollButtonProps,
       ...slotProps
     }
   };
@@ -385,7 +385,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         }
         tabMeta = tab ? tab.getBoundingClientRect() : null;
         if (process.env.NODE_ENV !== 'production') {
-          if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
+          if (!globalThis.MUI_TEST_ENV && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
           // if the whole Tabs component is hidden, don't warn
           tabsMeta.clientWidth !== 0) {
             tabsMeta = null;

package/Unstable_TrapFocus/FocusTrap.js

@@ -155,12 +155,12 @@ function FocusTrap(props) {
       return;
     }
     const doc = (0, _ownerDocument.default)(rootRef.current);
-    const activeElement = (0, _getActiveElement.default)(doc);
     const loopFocus = nativeEvent => {
       lastKeydown.current = nativeEvent;
       if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
         return;
       }
+      const activeElement = (0, _getActiveElement.default)(doc);
 
       // Make sure the next tab starts from the right place.
       // activeElement refers to the origin.

package/esm/Accordion/Accordion.d.ts

@@ -75,12 +75,12 @@ export interface AccordionOwnProps {
    */
   disabled?: boolean;
   /**
-   * If `true`, it removes the margin between two expanded accordion items and the increase of height.
+   * If `true`, it removes the margin between two expanded accordion items and prevents the increased height when expanded.
    * @default false
    */
   disableGutters?: boolean;
   /**
-   * If `true`, expands the accordion, otherwise collapse it.
+   * If `true`, expands the accordion, otherwise collapses it.
    * Setting this prop enables control over the accordion.
    */
   expanded?: boolean;

package/esm/Accordion/Accordion.js

@@ -142,7 +142,6 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     disableGutters = false,
     expanded: expandedProp,
     onChange,
-    square = false,
     slots = {},
     slotProps = {},
     TransitionComponent: TransitionComponentProp,
@@ -170,7 +169,6 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
   }), [expanded, disabled, disableGutters, handleChange]);
   const ownerState = {
     ...props,
-    square,
     disabled,
     disableGutters,
     expanded
@@ -197,10 +195,7 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     className: clsx(classes.root, className),
     shouldForwardComponentProp: true,
     ownerState,
-    ref,
-    additionalProps: {
-      square
-    }
+    ref
   });
   const [AccordionHeadingSlot, accordionProps] = useSlot('heading', {
     elementType: AccordionHeading,
@@ -280,12 +275,12 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    */
   disabled: PropTypes.bool,
   /**
-   * If `true`, it removes the margin between two expanded accordion items and the increase of height.
+   * If `true`, it removes the margin between two expanded accordion items and prevents the increased height when expanded.
    * @default false
    */
   disableGutters: PropTypes.bool,
   /**
-   * If `true`, expands the accordion, otherwise collapse it.
+   * If `true`, expands the accordion, otherwise collapses it.
    * Setting this prop enables control over the accordion.
    */
   expanded: PropTypes.bool,
@@ -316,11 +311,6 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
     root: PropTypes.elementType,
     transition: PropTypes.elementType
   }),
-  /**
-   * If `true`, rounded corners are disabled.
-   * @default false
-   */
-  square: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/AppBar/AppBar.js

@@ -26,7 +26,7 @@ const useUtilityClasses = ownerState => {
 
 // var2 is the fallback.
 // Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'
-const joinVars = (var1, var2) => var1 ? `${var1?.replace(')', '')}, ${var2})` : var2;
+const joinVars = (var1, var2) => var1 ? `${var1.replace(')', '')}, ${var2})` : var2;
 const AppBarRoot = styled(Paper, {
   name: 'MuiAppBar',
   slot: 'Root',
@@ -101,7 +101,8 @@ const AppBarRoot = styled(Paper, {
       color: 'inherit'
     },
     style: {
-      '--AppBar-color': 'inherit'
+      '--AppBar-color': 'inherit',
+      color: 'var(--AppBar-color)'
     }
   }, {
     props: {

package/esm/Autocomplete/Autocomplete.d.ts

@@ -283,7 +283,7 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @returns {ReactNode}
    */
   renderOption?: (props: React.HTMLAttributes<HTMLLIElement> & {
-    key: any;
+    key: React.Key;
   }, option: Value, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
   /**
    * Render the selected value when doing multiple selections.

package/esm/Autocomplete/Autocomplete.js

@@ -657,7 +657,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       children: renderInput({
         id,
         disabled,
-        fullWidth: true,
+        fullWidth: props.fullWidth ?? true,
         size: size === 'small' ? 'small' : undefined,
         InputLabelProps: getInputLabelProps(),
         InputProps: {

package/esm/Backdrop/Backdrop.js

@@ -107,7 +107,6 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     children: /*#__PURE__*/_jsx(RootSlot, {
       "aria-hidden": true,
       ...rootProps,
-      classes: classes,
       ref: ref,
       children: children
     })

package/esm/Badge/Badge.js

@@ -93,110 +93,6 @@ const BadgeBadge = styled('span', {
       minWidth: RADIUS_DOT * 2,
       padding: 0
     }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
-    style: {
-      top: 0,
-      right: 0,
-      transform: 'scale(1) translate(50%, -50%)',
-      transformOrigin: '100% 0%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular',
-    style: {
-      bottom: 0,
-      right: 0,
-      transform: 'scale(1) translate(50%, 50%)',
-      transformOrigin: '100% 100%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(50%, 50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
-    style: {
-      top: 0,
-      left: 0,
-      transform: 'scale(1) translate(-50%, -50%)',
-      transformOrigin: '0% 0%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(-50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular',
-    style: {
-      bottom: 0,
-      left: 0,
-      transform: 'scale(1) translate(-50%, 50%)',
-      transformOrigin: '0% 100%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(-50%, 50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
-    style: {
-      top: '14%',
-      right: '14%',
-      transform: 'scale(1) translate(50%, -50%)',
-      transformOrigin: '100% 0%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular',
-    style: {
-      bottom: '14%',
-      right: '14%',
-      transform: 'scale(1) translate(50%, 50%)',
-      transformOrigin: '100% 100%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(50%, 50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
-    style: {
-      top: '14%',
-      left: '14%',
-      transform: 'scale(1) translate(-50%, -50%)',
-      transformOrigin: '0% 0%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(-50%, -50%)'
-      }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular',
-    style: {
-      bottom: '14%',
-      left: '14%',
-      transform: 'scale(1) translate(-50%, 50%)',
-      transformOrigin: '0% 100%',
-      [`&.${badgeClasses.invisible}`]: {
-        transform: 'scale(0) translate(-50%, 50%)'
-      }
-    }
   }, {
     props: {
       invisible: true
@@ -207,6 +103,29 @@ const BadgeBadge = styled('span', {
         duration: theme.transitions.duration.leavingScreen
       })
     }
+  }, {
+    style: ({
+      ownerState
+    }) => {
+      const {
+        vertical,
+        horizontal
+      } = ownerState.anchorOrigin;
+      const offset = ownerState.overlap === 'circular' ? '14%' : 0;
+      return {
+        '--Badge-translateX': horizontal === 'right' ? '50%' : '-50%',
+        '--Badge-translateY': vertical === 'top' ? '-50%' : '50%',
+        top: vertical === 'top' ? offset : 'initial',
+        bottom: vertical === 'bottom' ? offset : 'initial',
+        right: horizontal === 'right' ? offset : 'initial',
+        left: horizontal === 'left' ? offset : 'initial',
+        transform: 'scale(1) translate(var(--Badge-translateX), var(--Badge-translateY))',
+        transformOrigin: `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`,
+        [`&.${badgeClasses.invisible}`]: {
+          transform: 'scale(0) translate(var(--Badge-translateX), var(--Badge-translateY))'
+        }
+      };
+    }
   }]
 })));
 function getAnchorOrigin(anchorOrigin) {

package/esm/ButtonGroup/ButtonGroup.js

@@ -69,7 +69,13 @@ const ButtonGroupRoot = styled('div', {
       variant: 'contained'
     },
     style: {
-      boxShadow: (theme.vars || theme).shadows[2]
+      boxShadow: (theme.vars || theme).shadows[2],
+      [`& .${buttonGroupClasses.grouped}`]: {
+        boxShadow: 'none',
+        '&:hover': {
+          boxShadow: 'none'
+        }
+      }
     }
   }, {
     props: {
@@ -220,16 +226,7 @@ const ButtonGroupRoot = styled('div', {
     }
   }))],
   [`& .${buttonGroupClasses.grouped}`]: {
-    minWidth: 40,
-    boxShadow: 'none',
-    props: {
-      variant: 'contained'
-    },
-    style: {
-      '&:hover': {
-        boxShadow: 'none'
-      }
-    }
+    minWidth: 40
   }
 })));
 const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {

package/esm/CardActionArea/CardActionArea.js

@@ -99,7 +99,6 @@ const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inP
     elementType: CardActionAreaFocusHighlight,
     externalForwardedProps,
     ownerState,
-    ref,
     className: classes.focusHighlight
   });
   return /*#__PURE__*/_jsxs(RootSlot, {

package/esm/Chip/Chip.js

@@ -381,9 +381,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   const handleDeleteIconClick = event => {
     // Stop the event from bubbling up to the `Chip`
     event.stopPropagation();
-    if (onDelete) {
-      onDelete(event);
-    }
+    onDelete(event);
   };
   const handleKeyDown = event => {
     // Ignore events from children of `Chip`.

package/esm/Collapse/Collapse.js

@@ -22,11 +22,11 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
-    root: ['root', `${orientation}`],
+    root: ['root', orientation],
     entered: ['entered'],
     hidden: ['hidden'],
-    wrapper: ['wrapper', `${orientation}`],
-    wrapperInner: ['wrapperInner', `${orientation}`]
+    wrapper: ['wrapper', orientation],
+    wrapperInner: ['wrapperInner', orientation]
   };
   return composeClasses(slots, getCollapseUtilityClass, classes);
 };

package/esm/Dialog/Dialog.js

@@ -19,8 +19,7 @@ import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DialogBackdrop = styled(Backdrop, {
   name: 'MuiDialog',
-  slot: 'Backdrop',
-  overrides: (props, styles) => styles.backdrop
+  slot: 'Backdrop'
 })({
   // Improve scrollable dialog support.
   zIndex: -1
@@ -35,6 +34,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root'],
+    backdrop: ['backdrop'],
     container: ['container', `scroll${capitalize(scroll)}`],
     paper: ['paper', `paperScroll${capitalize(scroll)}`, `paperWidth${capitalize(String(maxWidth))}`, fullWidth && 'paperFullWidth', fullScreen && 'paperFullScreen']
   };
@@ -285,7 +285,8 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     elementType: DialogBackdrop,
     shouldForwardComponentProp: true,
     externalForwardedProps,
-    ownerState
+    ownerState,
+    className: classes.backdrop
   });
   const [PaperSlot, paperSlotProps] = useSlot('paper', {
     elementType: DialogPaper,

package/esm/Dialog/dialogClasses.d.ts

@@ -1,6 +1,8 @@
 export interface DialogClasses {
   /** Styles applied to the root element. */
   root: string;
+  /** Styles applied to the backdrop element. */
+  backdrop: string;
   /** Styles applied to the container element if `scroll="paper"`. */
   scrollPaper: string;
   /** Styles applied to the container element if `scroll="body"`. */

package/esm/Dialog/dialogClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getDialogUtilityClass(slot) {
   return generateUtilityClass('MuiDialog', slot);
 }
-const dialogClasses = generateUtilityClasses('MuiDialog', ['root', 'scrollPaper', 'scrollBody', 'container', 'paper', 'paperScrollPaper', 'paperScrollBody', 'paperWidthFalse', 'paperWidthXs', 'paperWidthSm', 'paperWidthMd', 'paperWidthLg', 'paperWidthXl', 'paperFullWidth', 'paperFullScreen']);
+const dialogClasses = generateUtilityClasses('MuiDialog', ['root', 'backdrop', 'scrollPaper', 'scrollBody', 'container', 'paper', 'paperScrollPaper', 'paperScrollBody', 'paperWidthFalse', 'paperWidthXs', 'paperWidthSm', 'paperWidthMd', 'paperWidthLg', 'paperWidthXl', 'paperFullWidth', 'paperFullScreen']);
 export default dialogClasses;

package/esm/Drawer/Drawer.js

@@ -22,7 +22,7 @@ const overridesResolver = (props, styles) => {
   const {
     ownerState
   } = props;
-  return [styles.root, (ownerState.variant === 'permanent' || ownerState.variant === 'persistent') && styles.docked, styles.modal];
+  return [styles.root, (ownerState.variant === 'permanent' || ownerState.variant === 'persistent') && styles.docked, ownerState.variant === 'temporary' && styles.modal];
 };
 const useUtilityClasses = ownerState => {
   const {

package/esm/GridLegacy/GridLegacy.js

@@ -25,7 +25,7 @@ import gridLegacyClasses, { getGridLegacyUtilityClass } from "./gridLegacyClasse
 import { jsx as _jsx } from "react/jsx-runtime";
 let warnedOnce = false;
 function warnAboutDeprecatedGridLegacy() {
-  if (!warnedOnce && process.env.NODE_ENV === 'development') {
+  if (!warnedOnce && process.env.NODE_ENV !== 'production') {
     warnedOnce = true;
     console.warn('MUI: The GridLegacy component is deprecated. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.\n');
   }

package/esm/Modal/ModalManager.js

@@ -17,7 +17,7 @@ export function ariaHidden(element, hide) {
   }
 }
 function getPaddingRight(element) {
-  return parseInt(ownerWindow(element).getComputedStyle(element).paddingRight, 10) || 0;
+  return parseFloat(ownerWindow(element).getComputedStyle(element).paddingRight) || 0;
 }
 function isAriaHiddenForbiddenOnElement(element) {
   // The forbidden HTML tags are the ones from ARIA specification that

package/esm/Popover/Popover.js

@@ -148,7 +148,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     const anchorRect = anchorElement.getBoundingClientRect();
     if (process.env.NODE_ENV !== 'production') {
       const box = anchorElement.getBoundingClientRect();
-      if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+      if (!globalThis.MUI_TEST_ENV && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
         console.warn(['MUI: The `anchorEl` 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'));
       }
     }
@@ -399,7 +399,7 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
       const resolvedAnchorEl = resolveAnchorEl(props.anchorEl);
       if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
         const box = resolvedAnchorEl.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+        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 `anchorEl` 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 {

package/esm/Popper/BasePopper.js

@@ -105,7 +105,7 @@ const PopperTooltip = /*#__PURE__*/React.forwardRef(function PopperTooltip(props
     if (process.env.NODE_ENV !== 'production') {
       if (resolvedAnchorElement && isHTMLElement(resolvedAnchorElement) && resolvedAnchorElement.nodeType === 1) {
         const box = resolvedAnchorElement.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+        if (!globalThis.MUI_TEST_ENV && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
           console.warn(['MUI: The `anchorEl` 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'));
         }
       }
@@ -267,7 +267,7 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
       const resolvedAnchorEl = resolveAnchorEl(props.anchorEl);
       if (resolvedAnchorEl && isHTMLElement(resolvedAnchorEl) && resolvedAnchorEl.nodeType === 1) {
         const box = resolvedAnchorEl.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+        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 `anchorEl` 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 (!resolvedAnchorEl || typeof resolvedAnchorEl.getBoundingClientRect !== 'function' || isVirtualElement(resolvedAnchorEl) && resolvedAnchorEl.contextElement != null && resolvedAnchorEl.contextElement.nodeType !== 1) {

package/esm/Select/SelectInput.js

@@ -177,6 +177,22 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     node: inputRef.current,
     value
   }), [value]);
+  const open = displayNode !== null && openState;
+  React.useEffect(() => {
+    if (!open || !anchorElement || autoWidth) {
+      return undefined;
+    }
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(() => {
+      setMenuMinWidthState(anchorElement.clientWidth);
+    });
+    observer.observe(anchorElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [open, anchorElement, autoWidth]);
 
   // Resize menu on `defaultOpen` automatic toggle.
   React.useEffect(() => {
@@ -212,8 +228,8 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     return undefined;
   }, [labelId]);
-  const update = (open, event) => {
-    if (open) {
+  const update = (openParam, event) => {
+    if (openParam) {
       if (onOpen) {
         onOpen(event);
       }
@@ -222,7 +238,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
     if (!isOpenControlled) {
       setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
-      setOpenState(open);
+      setOpenState(openParam);
     }
   };
   const handleMouseDown = event => {
@@ -309,7 +325,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onKeyDown?.(event);
     }
   };
-  const open = displayNode !== null && openState;
   const handleBlur = event => {
     // if open event.stopImmediatePropagation
     if (!open && onBlur) {

package/esm/Slide/Slide.js

@@ -263,7 +263,7 @@ 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 !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+        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'));
         }
       } else if (!resolvedContainer || typeof resolvedContainer.getBoundingClientRect !== 'function' || resolvedContainer.contextElement != null && resolvedContainer.contextElement.nodeType !== 1) {

package/esm/Tabs/Tabs.d.ts

@@ -8,6 +8,7 @@ import { OverridableComponent, OverrideProps } from "../OverridableComponent/ind
 import { TabsClasses } from "./tabsClasses.js";
 import SvgIcon from "../SvgIcon/index.js";
 export interface TabsPropsIndicatorColorOverrides {}
+export interface TabsPropsVariantOverrides {}
 export interface TabsRootSlotPropsOverrides {}
 export interface TabsScrollerSlotPropsOverrides {}
 export interface TabsListSlotPropsOverrides {}
@@ -87,7 +88,7 @@ export type TabsSlotsAndSlotProps = CreateSlotsAndSlotProps<TabsSlots, {
    */
   indicator: SlotProps<'span', TabsIndicatorSlotPropsOverrides, TabsOwnerState>;
   /**
-   * Props forwarded to the scrollButton slot.
+   * Props forwarded to the scrollButtons slot.
    * By default, the available props are based on the [TabScrollButton](https://mui.com/material-ui/api/tab-scroll-button/#props) component.
    */
   scrollButtons: SlotProps<typeof TabScrollButton, TabsScrollButtonsSlotPropsOverrides, TabsOwnerState>;
@@ -234,7 +235,7 @@ export interface TabsOwnProps extends TabsSlotsAndSlotProps {
    *  - `standard` will render the default state.
    * @default 'standard'
    */
-  variant?: 'standard' | 'scrollable' | 'fullWidth';
+  variant?: OverridableStringUnion<'standard' | 'scrollable' | 'fullWidth', TabsPropsVariantOverrides>;
   /**
    * If `true`, the scrollbar is visible. It can be useful when displaying
    * a long vertical list of tabs.

package/esm/Tabs/Tabs.js

@@ -345,7 +345,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
     slots,
     slotProps: {
       indicator: TabIndicatorProps,
-      scrollButton: TabScrollButtonProps,
+      scrollButtons: TabScrollButtonProps,
       ...slotProps
     }
   };
@@ -378,7 +378,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         }
         tabMeta = tab ? tab.getBoundingClientRect() : null;
         if (process.env.NODE_ENV !== 'production') {
-          if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
+          if (!globalThis.MUI_TEST_ENV && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
           // if the whole Tabs component is hidden, don't warn
           tabsMeta.clientWidth !== 0) {
             tabsMeta = null;

package/esm/Unstable_TrapFocus/FocusTrap.js

@@ -148,12 +148,12 @@ function FocusTrap(props) {
       return;
     }
     const doc = ownerDocument(rootRef.current);
-    const activeElement = getActiveElement(doc);
     const loopFocus = nativeEvent => {
       lastKeydown.current = nativeEvent;
       if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
         return;
       }
+      const activeElement = getActiveElement(doc);
 
       // Make sure the next tab starts from the right place.
       // activeElement refers to the origin.

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.3.6
+ * @mui/material v7.3.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the