@mui/material 5.14.4 → 5.14.5

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.14.4
+ * @mui/material v5.14.5
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -2531,6 +2531,8 @@
   const ClassNameGenerator = createClassNameGenerator();
   var ClassNameGenerator$1 = ClassNameGenerator;
 
+  // If GlobalStateSlot is changed, GLOBAL_STATE_CLASSES in
+  // \packages\api-docs-builder\utils\parseSlotsAndClasses.ts must be updated accordingly.
   const globalStateClassesMapping = {
     active: 'active',
     checked: 'checked',
@@ -18445,23 +18447,6 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     }
   }
 
-  function getModalUtilityClass(slot) {
-    return generateUtilityClass('MuiModal', slot);
-  }
-  const modalClasses$1 = generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
-
-  const _excluded$1T = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
-  const useUtilityClasses$1A = ownerState => {
-    const {
-      open,
-      exited
-    } = ownerState;
-    const slots = {
-      root: ['root', !open && exited && 'hidden'],
-      backdrop: ['backdrop']
-    };
-    return composeClasses(slots, useClassNamesOverride(getModalUtilityClass));
-  };
   function getContainer(container) {
     return typeof container === 'function' ? container() : container;
   }
@@ -18472,68 +18457,47 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   // A modal manager used to track and manage the state of open Modals.
   // Modals don't open on the server so this won't conflict with concurrent requests.
   const defaultManager = new ModalManager();
-
   /**
-   * Modal is a lower-level construct that is leveraged by the following components:
-   *
-   * *   [Dialog](https://mui.com/material-ui/api/dialog/)
-   * *   [Drawer](https://mui.com/material-ui/api/drawer/)
-   * *   [Menu](https://mui.com/material-ui/api/menu/)
-   * *   [Popover](https://mui.com/material-ui/api/popover/)
-   *
-   * If you are creating a modal dialog, you probably want to use the [Dialog](https://mui.com/material-ui/api/dialog/) component
-   * rather than directly using Modal.
-   *
-   * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
    *
    * Demos:
    *
-   * - [Modal](https://mui.com/base-ui/react-modal/)
+   * - [Modal](https://mui.com/base-ui/react-modal/#hook)
    *
    * API:
    *
-   * - [Modal API](https://mui.com/base-ui/react-modal/components-api/#modal)
+   * - [useModal API](https://mui.com/base-ui/react-modal/hooks-api/#use-modal)
    */
-  const Modal$2 = /*#__PURE__*/React__namespace.forwardRef(function Modal(props, forwardedRef) {
-    var _props$ariaHidden, _slots$root;
+  function useModal(parameters) {
     const {
-        children,
-        closeAfterTransition = false,
-        container,
-        disableAutoFocus = false,
-        disableEnforceFocus = false,
-        disableEscapeKeyDown = false,
-        disablePortal = false,
-        disableRestoreFocus = false,
-        disableScrollLock = false,
-        hideBackdrop = false,
-        keepMounted = false,
-        // private
-        manager: managerProp = defaultManager,
-        onBackdropClick,
-        onClose,
-        onKeyDown,
-        open,
-        onTransitionEnter,
-        onTransitionExited,
-        slotProps = {},
-        slots = {}
-      } = props,
-      other = _objectWithoutPropertiesLoose(props, _excluded$1T);
-    // TODO: `modal`` must change its type in this file to match the type of methods
-    // provided by `ModalManager`
-    const manager = managerProp;
-    const [exited, setExited] = React__namespace.useState(!open);
+      container,
+      disableEscapeKeyDown = false,
+      disableScrollLock = false,
+      // @ts-ignore internal logic - Base UI supports the manager as a prop too
+      manager = defaultManager,
+      closeAfterTransition = false,
+      onTransitionEnter,
+      onTransitionExited,
+      children,
+      onClose,
+      open,
+      rootRef
+    } = parameters;
+
+    // @ts-ignore internal logic
     const modal = React__namespace.useRef({});
     const mountNodeRef = React__namespace.useRef(null);
     const modalRef = React__namespace.useRef(null);
-    const handleRef = useForkRef(modalRef, forwardedRef);
+    const handleRef = useForkRef(modalRef, rootRef);
+    const [exited, setExited] = React__namespace.useState(!open);
     const hasTransition = getHasTransition(children);
-    const ariaHiddenProp = (_props$ariaHidden = props['aria-hidden']) != null ? _props$ariaHidden : true;
+    let ariaHiddenProp = true;
+    if (parameters['aria-hidden'] === 'false' || parameters['aria-hidden'] === false) {
+      ariaHiddenProp = false;
+    }
     const getDoc = () => ownerDocument(mountNodeRef.current);
     const getModal = () => {
       modal.current.modalRef = modalRef.current;
-      modal.current.mountNode = mountNodeRef.current;
+      modal.current.mount = mountNodeRef.current;
       return modal.current;
     };
     const handleMounted = () => {
@@ -18558,18 +18522,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const isTopModal = React__namespace.useCallback(() => manager.isTopModal(getModal()), [manager]);
     const handlePortalRef = useEventCallback(node => {
       mountNodeRef.current = node;
-      if (!node || !modalRef.current) {
+      if (!node) {
         return;
       }
       if (open && isTopModal()) {
         handleMounted();
-      } else {
+      } else if (modalRef.current) {
         ariaHidden(modalRef.current, ariaHiddenProp);
       }
     });
     const handleClose = React__namespace.useCallback(() => {
       manager.remove(getModal(), ariaHiddenProp);
-    }, [manager, ariaHiddenProp]);
+    }, [ariaHiddenProp, manager]);
     React__namespace.useEffect(() => {
       return () => {
         handleClose();
@@ -18582,49 +18546,9 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         handleClose();
       }
     }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
-    const ownerState = _extends({}, props, {
-      closeAfterTransition,
-      disableAutoFocus,
-      disableEnforceFocus,
-      disableEscapeKeyDown,
-      disablePortal,
-      disableRestoreFocus,
-      disableScrollLock,
-      exited,
-      hideBackdrop,
-      keepMounted
-    });
-    const classes = useUtilityClasses$1A(ownerState);
-    const handleEnter = () => {
-      setExited(false);
-      if (onTransitionEnter) {
-        onTransitionEnter();
-      }
-    };
-    const handleExited = () => {
-      setExited(true);
-      if (onTransitionExited) {
-        onTransitionExited();
-      }
-      if (closeAfterTransition) {
-        handleClose();
-      }
-    };
-    const handleBackdropClick = event => {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      if (onBackdropClick) {
-        onBackdropClick(event);
-      }
-      if (onClose) {
-        onClose(event, 'backdropClick');
-      }
-    };
-    const handleKeyDown = event => {
-      if (onKeyDown) {
-        onKeyDown(event);
-      }
+    const createHandleKeyDown = otherHandlers => event => {
+      var _otherHandlers$onKeyD;
+      (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null ? void 0 : _otherHandlers$onKeyD.call(otherHandlers, event);
 
       // The handler doesn't take event.defaultPrevented into account:
       //
@@ -18643,6 +18567,158 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
         }
       }
     };
+    const createHandleBackdropClick = otherHandlers => event => {
+      var _otherHandlers$onClic;
+      (_otherHandlers$onClic = otherHandlers.onClick) == null ? void 0 : _otherHandlers$onClic.call(otherHandlers, event);
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+      if (onClose) {
+        onClose(event, 'backdropClick');
+      }
+    };
+    const getRootProps = (otherHandlers = {}) => {
+      const propsEventHandlers = extractEventHandlers(parameters);
+
+      // The custom event handlers shouldn't be spread on the root element
+      delete propsEventHandlers.onTransitionEnter;
+      delete propsEventHandlers.onTransitionExited;
+      const externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers);
+      return _extends({
+        role: 'presentation'
+      }, externalEventHandlers, {
+        onKeyDown: createHandleKeyDown(externalEventHandlers),
+        ref: handleRef
+      });
+    };
+    const getBackdropProps = (otherHandlers = {}) => {
+      const externalEventHandlers = otherHandlers;
+      return _extends({
+        'aria-hidden': true
+      }, externalEventHandlers, {
+        onClick: createHandleBackdropClick(externalEventHandlers),
+        open
+      });
+    };
+    const getTransitionProps = () => {
+      const handleEnter = () => {
+        setExited(false);
+        if (onTransitionEnter) {
+          onTransitionEnter();
+        }
+      };
+      const handleExited = () => {
+        setExited(true);
+        if (onTransitionExited) {
+          onTransitionExited();
+        }
+        if (closeAfterTransition) {
+          handleClose();
+        }
+      };
+      return {
+        onEnter: createChainedFunction(handleEnter, children.props.onEnter),
+        onExited: createChainedFunction(handleExited, children.props.onExited)
+      };
+    };
+    return {
+      getRootProps,
+      getBackdropProps,
+      getTransitionProps,
+      rootRef: handleRef,
+      portalRef: handlePortalRef,
+      isTopModal,
+      exited,
+      hasTransition
+    };
+  }
+
+  function getModalUtilityClass(slot) {
+    return generateUtilityClass('MuiModal', slot);
+  }
+  const modalClasses$1 = generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
+
+  const _excluded$1T = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
+  const useUtilityClasses$1A = ownerState => {
+    const {
+      open,
+      exited
+    } = ownerState;
+    const slots = {
+      root: ['root', !open && exited && 'hidden'],
+      backdrop: ['backdrop']
+    };
+    return composeClasses(slots, useClassNamesOverride(getModalUtilityClass));
+  };
+
+  /**
+   * Modal is a lower-level construct that is leveraged by the following components:
+   *
+   * *   [Dialog](https://mui.com/material-ui/api/dialog/)
+   * *   [Drawer](https://mui.com/material-ui/api/drawer/)
+   * *   [Menu](https://mui.com/material-ui/api/menu/)
+   * *   [Popover](https://mui.com/material-ui/api/popover/)
+   *
+   * If you are creating a modal dialog, you probably want to use the [Dialog](https://mui.com/material-ui/api/dialog/) component
+   * rather than directly using Modal.
+   *
+   * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
+   *
+   * Demos:
+   *
+   * - [Modal](https://mui.com/base-ui/react-modal/)
+   *
+   * API:
+   *
+   * - [Modal API](https://mui.com/base-ui/react-modal/components-api/#modal)
+   */
+  const Modal$2 = /*#__PURE__*/React__namespace.forwardRef(function Modal(props, forwardedRef) {
+    var _slots$root;
+    const {
+        children,
+        closeAfterTransition = false,
+        container,
+        disableAutoFocus = false,
+        disableEnforceFocus = false,
+        disableEscapeKeyDown = false,
+        disablePortal = false,
+        disableRestoreFocus = false,
+        disableScrollLock = false,
+        hideBackdrop = false,
+        keepMounted = false,
+        onBackdropClick,
+        open,
+        slotProps = {},
+        slots = {}
+      } = props,
+      other = _objectWithoutPropertiesLoose(props, _excluded$1T);
+    const propsWithDefaults = _extends({}, props, {
+      closeAfterTransition,
+      disableAutoFocus,
+      disableEnforceFocus,
+      disableEscapeKeyDown,
+      disablePortal,
+      disableRestoreFocus,
+      disableScrollLock,
+      hideBackdrop,
+      keepMounted
+    });
+    const {
+      getRootProps,
+      getBackdropProps,
+      getTransitionProps,
+      portalRef,
+      isTopModal,
+      exited,
+      hasTransition
+    } = useModal(_extends({}, propsWithDefaults, {
+      rootRef: forwardedRef
+    }));
+    const ownerState = _extends({}, propsWithDefaults, {
+      exited,
+      hasTransition
+    });
+    const classes = useUtilityClasses$1A(ownerState);
     const childProps = {};
     if (children.props.tabIndex === undefined) {
       childProps.tabIndex = '-1';
@@ -18650,19 +18726,19 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
 
     // It's a Transition like component
     if (hasTransition) {
-      childProps.onEnter = createChainedFunction(handleEnter, children.props.onEnter);
-      childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
+      const {
+        onEnter,
+        onExited
+      } = getTransitionProps();
+      childProps.onEnter = onEnter;
+      childProps.onExited = onExited;
     }
     const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
     const rootProps = useSlotProps({
       elementType: Root,
       externalSlotProps: slotProps.root,
       externalForwardedProps: other,
-      additionalProps: {
-        ref: handleRef,
-        role: 'presentation',
-        onKeyDown: handleKeyDown
-      },
+      getSlotProps: getRootProps,
       className: classes.root,
       ownerState
     });
@@ -18670,10 +18746,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     const backdropProps = useSlotProps({
       elementType: BackdropComponent,
       externalSlotProps: slotProps.backdrop,
-      additionalProps: {
-        'aria-hidden': true,
-        onClick: handleBackdropClick,
-        open
+      getSlotProps: otherHandlers => {
+        return getBackdropProps(_extends({}, otherHandlers, {
+          onClick: e => {
+            if (onBackdropClick) {
+              onBackdropClick(e);
+            }
+            if (otherHandlers != null && otherHandlers.onClick) {
+              otherHandlers.onClick(e);
+            }
+          }
+        }));
       },
       className: classes.backdrop,
       ownerState
@@ -18681,10 +18764,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     if (!keepMounted && !open && (!hasTransition || exited)) {
       return null;
     }
-    return /*#__PURE__*/jsxRuntime_1(Portal
-    // @ts-expect-error TODO: include ref to Base UI Portal props
-    , {
-      ref: handlePortalRef,
+    return /*#__PURE__*/jsxRuntime_1(Portal, {
+      ref: portalRef,
       container: container,
       disablePortal: disablePortal,
       children: /*#__PURE__*/jsxRuntime_2(Root, _extends({}, rootProps, {
@@ -49160,6 +49241,14 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
       InputMore['aria-describedby'] = undefined;
     }
+    const handleClick = event => {
+      if (!disabled && onClick) {
+        // The `onClick` is registered both on the root and the input elements.
+        // Without stopping the propagation, the event could be triggered twice.
+        event.stopPropagation();
+        onClick(event);
+      }
+    };
     const id = useId(idOverride);
     const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
     const inputLabelId = label && id ? `${id}-label` : undefined;
@@ -49182,7 +49271,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       onBlur: onBlur,
       onChange: onChange,
       onFocus: onFocus,
-      onClick: onClick,
+      onClick: handleClick,
       placeholder: placeholder,
       inputProps: inputProps
     }, InputMore, InputProps));
@@ -49195,7 +49284,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       required: required,
       color: color,
       variant: variant,
-      ownerState: ownerState
+      ownerState: ownerState,
+      onClick: handleClick
     }, other, {
       children: [label != null && label !== '' && /*#__PURE__*/jsxRuntime_1(InputLabel$1, _extends({
         htmlFor: id,