@carbon/react 1.103.0-rc.0 → 1.104.0-rc.0

package/lib/components/ComposedModal/ComposedModal.js

@@ -1,470 +1,331 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
+const require_runtime = require('../../_virtual/_rolldown/runtime.js');
+const require_usePrefix = require('../../internal/usePrefix.js');
+const require_keys = require('../../internal/keyboard/keys.js');
+const require_match = require('../../internal/keyboard/match.js');
+const require_useId = require('../../internal/useId.js');
+const require_warning = require('../../internal/warning.js');
+const require_deprecate = require('../../prop-types/deprecate.js');
+const require_index = require('../FeatureFlags/index.js');
+const require_index$1 = require('../AILabel/index.js');
+const require_utils = require('../../internal/utils.js');
+const require_useResizeObserver = require('../../internal/useResizeObserver.js');
+const require_events = require('../../tools/events.js');
+const require_mergeRefs = require('../../tools/mergeRefs.js');
+const require_index$2 = require('../Layer/index.js');
+const require_ModalHeader = require('./ModalHeader.js');
+const require_ModalFooter = require('./ModalFooter.js');
+const require_toggleClass = require('../../tools/toggleClass.js');
+const require_requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
+const require_wrapFocus = require('../../internal/wrapFocus.js');
+const require_Dialog = require('../Dialog/Dialog.js');
+const require_useComposedModalState = require('./useComposedModalState.js');
+const require_ComposedModalPresence = require('./ComposedModalPresence.js');
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let prop_types = require("prop-types");
+prop_types = require_runtime.__toESM(prop_types);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _floating_ui_react = require("@floating-ui/react");
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var useResizeObserver = require('../../internal/useResizeObserver.js');
-var PropTypes = require('prop-types');
-var index = require('../Layer/index.js');
-var ModalHeader = require('./ModalHeader.js');
-var ModalFooter = require('./ModalFooter.js');
-var mergeRefs = require('../../tools/mergeRefs.js');
-var cx = require('classnames');
-var toggleClass = require('../../tools/toggleClass.js');
-var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
-var wrapFocus = require('../../internal/wrapFocus.js');
-var usePrefix = require('../../internal/usePrefix.js');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
-var index$1 = require('../FeatureFlags/index.js');
-var events = require('../../tools/events.js');
-var deprecate = require('../../prop-types/deprecate.js');
-var Dialog = require('../Dialog/Dialog.js');
-var warning = require('../../internal/warning.js');
-var index$2 = require('../AILabel/index.js');
-var utils = require('../../internal/utils.js');
-var react = require('@floating-ui/react');
-var ComposedModalPresence = require('./ComposedModalPresence.js');
-var useId = require('../../internal/useId.js');
-var useComposedModalState = require('./useComposedModalState.js');
-
-const ModalBody = /*#__PURE__*/React.forwardRef(function ModalBody({
-  className: customClassName,
-  children,
-  hasForm,
-  hasScrollingContent,
-  ...rest
-}, ref) {
-  const prefix = usePrefix.usePrefix();
-  const contentRef = React.useRef(null);
-  const {
-    height
-  } = useResizeObserver.useResizeObserver({
-    ref: contentRef
-  });
-
-  /**
-   * isScrollable is implicitly dependent on height, when height gets updated
-   * via `useResizeObserver`, clientHeight and scrollHeight get updated too
-   */
-  const isScrollable = !!contentRef.current && contentRef?.current?.scrollHeight > contentRef?.current?.clientHeight;
-  const contentClass = cx({
-    [`${prefix}--modal-content`]: true,
-    [`${prefix}--modal-content--with-form`]: hasForm,
-    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
-    [`${prefix}--modal-scroll-content--no-fade`]: height <= 300
-  }, customClassName);
-  const hasScrollingContentProps = hasScrollingContent || isScrollable ? {
-    tabIndex: 0,
-    role: 'region'
-  } : {};
-  return /*#__PURE__*/React.createElement(index.Layer, _rollupPluginBabelHelpers.extends({
-    className: contentClass
-  }, hasScrollingContentProps, rest, {
-    ref: mergeRefs.mergeRefs(contentRef, ref)
-  }), children);
+//#region src/components/ComposedModal/ComposedModal.tsx
+/**
+* Copyright IBM Corp. 2023, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const ModalBody = react.default.forwardRef(function ModalBody({ className: customClassName, children, hasForm, hasScrollingContent, ...rest }, ref) {
+	const prefix = require_usePrefix.usePrefix();
+	const contentRef = (0, react.useRef)(null);
+	const { height } = require_useResizeObserver.useResizeObserver({ ref: contentRef });
+	/**
+	* isScrollable is implicitly dependent on height, when height gets updated
+	* via `useResizeObserver`, clientHeight and scrollHeight get updated too
+	*/
+	const isScrollable = !!contentRef.current && contentRef?.current?.scrollHeight > contentRef?.current?.clientHeight;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.Layer, {
+		className: (0, classnames.default)({
+			[`${prefix}--modal-content`]: true,
+			[`${prefix}--modal-content--with-form`]: hasForm,
+			[`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
+			[`${prefix}--modal-scroll-content--no-fade`]: height <= 300
+		}, customClassName),
+		...hasScrollingContent || isScrollable ? {
+			tabIndex: 0,
+			role: "region"
+		} : {},
+		...rest,
+		ref: require_mergeRefs.mergeRefs(contentRef, ref),
+		children
+	});
 });
 ModalBody.propTypes = {
-  /**
-   * Required props for the accessibility label of the header
-   */
-  ['aria-label']: requiredIfGivenPropIsTruthy.requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string),
-  /**
-   * Specify the content to be placed in the ModalBody
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be added to the Modal Body node
-   */
-  className: PropTypes.string,
-  /**
-   * Provide whether the modal content has a form element.
-   * If `true` is used here, non-form child content should have `cds--modal-content__regular-content` class.
-   */
-  hasForm: PropTypes.bool,
-  /**
-   * Specify whether the modal contains scrolling content
-   */
-  hasScrollingContent: PropTypes.bool
+	["aria-label"]: require_requiredIfGivenPropIsTruthy.requiredIfGivenPropIsTruthy("hasScrollingContent", prop_types.default.string),
+	children: prop_types.default.node,
+	className: prop_types.default.string,
+	hasForm: prop_types.default.bool,
+	hasScrollingContent: prop_types.default.bool
 };
-const ComposedModal = /*#__PURE__*/React.forwardRef(function ComposedModal({
-  open,
-  ...props
-}, ref) {
-  const id = useId.useId();
-  const enablePresence = index$1.useFeatureFlag('enable-presence');
-  const hasPresenceContext = Boolean(React.useContext(ComposedModalPresence.ComposedModalPresenceContext));
-  const hasPresenceOptIn = enablePresence || hasPresenceContext;
-  const exclusivePresenceContext = ComposedModalPresence.useExclusiveComposedModalPresenceContext(id);
-
-  // if opt in and not exclusive to a presence context, wrap with presence
-  if (hasPresenceOptIn && !exclusivePresenceContext) {
-    return /*#__PURE__*/React.createElement(ComposedModalPresence.ComposedModalPresence, {
-      open: open ?? false,
-      _presenceId: id
-      // do not auto enable styles for opt-in by feature flag
-      ,
-      _autoEnablePresence: hasPresenceContext
-    }, /*#__PURE__*/React.createElement(ComposedModalDialog, _rollupPluginBabelHelpers.extends({
-      open: true,
-      ref: ref
-    }, props)));
-  }
-  return /*#__PURE__*/React.createElement(ComposedModalDialog, _rollupPluginBabelHelpers.extends({
-    ref: ref,
-    open: open
-  }, props));
+const ComposedModal = react.default.forwardRef(function ComposedModal({ open, ...props }, ref) {
+	const id = require_useId.useId();
+	const enablePresence = require_index.useFeatureFlag("enable-presence");
+	const hasPresenceContext = Boolean((0, react.useContext)(require_ComposedModalPresence.ComposedModalPresenceContext));
+	const hasPresenceOptIn = enablePresence || hasPresenceContext;
+	const exclusivePresenceContext = require_ComposedModalPresence.useExclusiveComposedModalPresenceContext(id);
+	if (hasPresenceOptIn && !exclusivePresenceContext) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComposedModalPresence.ComposedModalPresence, {
+		open: open ?? false,
+		_presenceId: id,
+		_autoEnablePresence: hasPresenceContext,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComposedModalDialog, {
+			open: true,
+			ref,
+			...props
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComposedModalDialog, {
+		ref,
+		open,
+		...props
+	});
 });
-const ComposedModalDialog = /*#__PURE__*/React.forwardRef(function ComposedModalDialog({
-  ['aria-labelledby']: ariaLabelledBy,
-  ['aria-label']: ariaLabel,
-  children,
-  className: customClassName,
-  containerClassName,
-  danger,
-  decorator,
-  isFullWidth,
-  onClose,
-  onKeyDown,
-  open: externalOpen,
-  preventCloseOnClickOutside,
-  selectorPrimaryFocus = '[data-modal-primary-focus]',
-  selectorsFloatingMenus,
-  size,
-  launcherButtonRef,
-  slug,
-  ...rest
-}, ref) {
-  const prefix = usePrefix.usePrefix();
-  const innerModal = React.useRef(null);
-  const button = React.useRef(null);
-  const startSentinel = React.useRef(null);
-  const endSentinel = React.useRef(null);
-  const onMouseDownTarget = React.useRef(null);
-  const presenceContext = React.useContext(ComposedModalPresence.ComposedModalPresenceContext);
-  const mergedRefs = react.useMergeRefs([ref, presenceContext?.presenceRef]);
-  const enablePresence = index$1.useFeatureFlag('enable-presence') || presenceContext?.autoEnablePresence;
-
-  // always mark as open when mounted with presence
-  const open = externalOpen || enablePresence;
-  const modalState = useComposedModalState.useComposedModalState(open);
-  const [isOpen, setIsOpen] = presenceContext?.modalState ?? modalState;
-  const enableDialogElement = index$1.useFeatureFlag('enable-dialog-element');
-  const deprecatedFlag = index$1.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
-  const focusTrapWithoutSentinelsFlag = index$1.useFeatureFlag('enable-focus-wrap-without-sentinels');
-  const focusTrapWithoutSentinels = deprecatedFlag || focusTrapWithoutSentinelsFlag;
-  process.env.NODE_ENV !== "production" ? warning.warning(!(focusTrapWithoutSentinels && enableDialogElement), '`<Modal>` detected both `focusTrapWithoutSentinels` and ' + '`enableDialogElement` feature flags are enabled. The native dialog ' + 'element handles focus, so `enableDialogElement` must be off for ' + '`focusTrapWithoutSentinels` to have any effect.') : void 0;
-
-  // Propagate open/close state to the document.body
-  React.useEffect(() => {
-    if (!enableDialogElement) {
-      toggleClass.toggleClass(document.body, `${prefix}--body--with-modal-open`, !!open);
-    }
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  }, [open, prefix]);
-  // Remove the document.body className on unmount
-  React.useEffect(() => {
-    if (!enableDialogElement) {
-      return () => {
-        toggleClass.toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
-      };
-    }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  function handleKeyDown(event) {
-    if (!enableDialogElement) {
-      if (focusTrapWithoutSentinels && open && match.match(event, keys.Tab) && innerModal.current) {
-        wrapFocus.wrapFocusWithoutSentinels({
-          containerNode: innerModal.current,
-          currentActiveNode: event.target,
-          event: event
-        });
-      }
-    }
-    onKeyDown?.(event);
-  }
-  function handleOnMouseDown(evt) {
-    const target = evt.target;
-    onMouseDownTarget.current = target;
-  }
-  function handleOnClick(evt) {
-    const {
-      target
-    } = evt;
-    const mouseDownTarget = onMouseDownTarget.current;
-    const shouldCloseOnOutsideClick =
-    // Passive modals can close on clicks outside the modal when
-    // preventCloseOnClickOutside is undefined or explicitly set to false.
-    isPassive && !preventCloseOnClickOutside ||
-    // Non-passive modals have to explicitly opt-in for close on outside
-    // behavior by explicitly setting preventCloseOnClickOutside to false,
-    // rather than just leaving it undefined.
-    !isPassive && preventCloseOnClickOutside === false;
-    if (shouldCloseOnOutsideClick && target instanceof Node && !wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus, prefix) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) {
-      closeModal(evt);
-    }
-  }
-  function handleBlur({
-    target: oldActiveNode,
-    relatedTarget: currentActiveNode
-  }) {
-    if (!enableDialogElement && !focusTrapWithoutSentinels && open && currentActiveNode && oldActiveNode && innerModal.current) {
-      const {
-        current: bodyNode
-      } = innerModal;
-      const {
-        current: startSentinelNode
-      } = startSentinel;
-      const {
-        current: endSentinelNode
-      } = endSentinel;
-      wrapFocus.wrapFocus({
-        bodyNode,
-        startTrapNode: startSentinelNode,
-        endTrapNode: endSentinelNode,
-        currentActiveNode,
-        oldActiveNode,
-        selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean),
-        prefix
-      });
-    }
-
-    // Adjust scroll if needed so that element with focus is not obscured by gradient
-    const modalContent = document.querySelector(`.${prefix}--modal-content`);
-    if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) {
-      return;
-    }
-    currentActiveNode.scrollIntoView({
-      block: 'center'
-    });
-  }
-  function closeModal(evt) {
-    if (!onClose || onClose(evt) !== false) {
-      setIsOpen(false);
-    }
-  }
-  const modalClass = cx(`${prefix}--modal`, {
-    'is-visible': enablePresence || isOpen,
-    [`${prefix}--modal--enable-presence`]: presenceContext?.autoEnablePresence,
-    [`${prefix}--modal--danger`]: danger,
-    [`${prefix}--modal--slug`]: slug,
-    [`${prefix}--modal--decorator`]: decorator
-  }, customClassName);
-  const containerClass = cx(`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
-
-  // Generate aria-label based on Modal Header label if one is not provided (L253)
-  let generatedAriaLabel;
-  const childrenWithProps = React.Children.toArray(children).map(child => {
-    if (utils.isComponentElement(child, ModalHeader.ModalHeader)) {
-      generatedAriaLabel = child.props.label;
-      return /*#__PURE__*/React.cloneElement(child, {
-        closeModal
-      });
-    }
-    if (utils.isComponentElement(child, ModalFooter.ModalFooter)) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        closeModal,
-        inputref: button,
-        danger
-      });
-    }
-    return child;
-  });
-
-  // Modals without a footer are considered passive and carry limitations as
-  // outlined in the design spec.
-  const containsModalFooter = React.Children.toArray(childrenWithProps).some(child => utils.isComponentElement(child, ModalFooter.ModalFooter));
-  const isPassive = !containsModalFooter;
-  process.env.NODE_ENV !== "production" ? warning.warning(!(!isPassive && preventCloseOnClickOutside === false), '`<ComposedModal>` prop `preventCloseOnClickOutside` should not be ' + '`false` when `<ModalFooter>` is present. Transactional, non-passive ' + 'Modals should not be dissmissable by clicking outside. ' + 'See: https://carbondesignsystem.com/components/modal/usage/#transactional-modal') : void 0;
-  React.useEffect(() => {
-    if (!open) return;
-    const handleEscapeKey = event => {
-      if (match.match(event, keys.Escape)) {
-        event.preventDefault();
-        event.stopPropagation();
-        closeModal(event);
-      }
-    };
-    document.addEventListener('keydown', handleEscapeKey, true);
-    return () => {
-      document.removeEventListener('keydown', handleEscapeKey, true);
-    };
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  }, [open]);
-  React.useEffect(() => {
-    if (!enableDialogElement && !enablePresence && !open && launcherButtonRef) {
-      setTimeout(() => {
-        launcherButtonRef.current?.focus();
-      });
-    }
-  }, [enableDialogElement, enablePresence, open, launcherButtonRef]);
-  // Focus launcherButtonRef on unmount
-  React.useEffect(() => {
-    const launcherButton = launcherButtonRef?.current;
-    return () => {
-      if (enablePresence && launcherButton) {
-        setTimeout(() => {
-          launcherButton.focus();
-        });
-      }
-    };
-  }, [enablePresence, launcherButtonRef]);
-  React.useEffect(() => {
-    if (!enableDialogElement) {
-      const initialFocus = focusContainerElement => {
-        const containerElement = focusContainerElement || innerModal.current;
-        const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
-        if (primaryFocusElement) {
-          return primaryFocusElement;
-        }
-        return button && button.current;
-      };
-      const focusButton = focusContainerElement => {
-        const target = initialFocus(focusContainerElement);
-        const closeButton = focusContainerElement.querySelector(`.${prefix}--modal-close`);
-        if (target) {
-          target.focus();
-        } else if (!target && closeButton) {
-          closeButton?.focus();
-        }
-      };
-      if (open && isOpen) {
-        focusButton(innerModal.current);
-      }
-    }
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  }, [open, selectorPrimaryFocus, isOpen]);
-
-  // AILabel is always size `sm`
-  const candidate = slug ?? decorator;
-  const candidateIsAILabel = utils.isComponentElement(candidate, index$2.AILabel);
-  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
-    size: 'sm'
-  }) : candidate;
-  const modalBody = enableDialogElement ? /*#__PURE__*/React.createElement(Dialog.Dialog, {
-    open: open,
-    focusAfterCloseRef: launcherButtonRef,
-    modal: true,
-    className: containerClass,
-    "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "data-exiting": presenceContext?.isExiting || undefined
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: innerModal,
-    className: `${prefix}--modal-container-body`
-  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', childrenWithProps)) : /*#__PURE__*/React.createElement("div", {
-    className: containerClass,
-    role: "dialog",
-    "aria-modal": "true",
-    "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
-    "aria-labelledby": ariaLabelledBy
-  }, !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    ref: startSentinel,
-    className: `${prefix}--visually-hidden`
-  }, "Focus sentinel"), /*#__PURE__*/React.createElement("div", {
-    ref: innerModal,
-    className: `${prefix}--modal-container-body`
-  }, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--modal--inner__decorator`
-  }, normalizedDecorator) : '', childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    ref: endSentinel,
-    className: `${prefix}--visually-hidden`
-  }, "Focus sentinel"));
-  return /*#__PURE__*/React.createElement(index.Layer, _rollupPluginBabelHelpers.extends({}, rest, {
-    level: 0,
-    role: "presentation",
-    ref: mergedRefs,
-    "aria-hidden": !open,
-    onBlur: handleBlur,
-    onClick: events.composeEventHandlers([rest?.onClick, handleOnClick]),
-    onMouseDown: events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
-    onKeyDown: handleKeyDown,
-    className: modalClass,
-    "data-exiting": presenceContext?.isExiting || undefined
-  }), modalBody);
+const ComposedModalDialog = react.default.forwardRef(function ComposedModalDialog({ ["aria-labelledby"]: ariaLabelledBy, ["aria-label"]: ariaLabel, children, className: customClassName, containerClassName, danger, decorator, isFullWidth, onClose, onKeyDown, open: externalOpen, preventCloseOnClickOutside, selectorPrimaryFocus = "[data-modal-primary-focus]", selectorsFloatingMenus, size, launcherButtonRef, slug, ...rest }, ref) {
+	const prefix = require_usePrefix.usePrefix();
+	const innerModal = (0, react.useRef)(null);
+	const button = (0, react.useRef)(null);
+	const startSentinel = (0, react.useRef)(null);
+	const endSentinel = (0, react.useRef)(null);
+	const onMouseDownTarget = (0, react.useRef)(null);
+	const presenceContext = (0, react.useContext)(require_ComposedModalPresence.ComposedModalPresenceContext);
+	const mergedRefs = (0, _floating_ui_react.useMergeRefs)([ref, presenceContext?.presenceRef]);
+	const enablePresence = require_index.useFeatureFlag("enable-presence") || presenceContext?.autoEnablePresence;
+	const open = externalOpen || enablePresence;
+	const modalState = require_useComposedModalState.useComposedModalState(open);
+	const [isOpen, setIsOpen] = presenceContext?.modalState ?? modalState;
+	const enableDialogElement = require_index.useFeatureFlag("enable-dialog-element");
+	const deprecatedFlag = require_index.useFeatureFlag("enable-experimental-focus-wrap-without-sentinels");
+	const focusTrapWithoutSentinelsFlag = require_index.useFeatureFlag("enable-focus-wrap-without-sentinels");
+	const focusTrapWithoutSentinels = deprecatedFlag || focusTrapWithoutSentinelsFlag;
+	require_warning.warning(!(focusTrapWithoutSentinels && enableDialogElement), "`<Modal>` detected both `focusTrapWithoutSentinels` and `enableDialogElement` feature flags are enabled. The native dialog element handles focus, so `enableDialogElement` must be off for `focusTrapWithoutSentinels` to have any effect.");
+	(0, react.useEffect)(() => {
+		if (!enableDialogElement) require_toggleClass.toggleClass(document.body, `${prefix}--body--with-modal-open`, !!open);
+	}, [open, prefix]);
+	(0, react.useEffect)(() => {
+		if (!enableDialogElement) return () => {
+			require_toggleClass.toggleClass(document.body, `${prefix}--body--with-modal-open`, false);
+		};
+	}, []);
+	function handleKeyDown(event) {
+		if (!enableDialogElement) {
+			if (focusTrapWithoutSentinels && open && require_match.match(event, require_keys.Tab) && innerModal.current) require_wrapFocus.wrapFocusWithoutSentinels({
+				containerNode: innerModal.current,
+				currentActiveNode: event.target,
+				event
+			});
+		}
+		onKeyDown?.(event);
+	}
+	function handleOnMouseDown(evt) {
+		onMouseDownTarget.current = evt.target;
+	}
+	function handleOnClick(evt) {
+		const { target } = evt;
+		const mouseDownTarget = onMouseDownTarget.current;
+		if ((isPassive && !preventCloseOnClickOutside || !isPassive && preventCloseOnClickOutside === false) && target instanceof Node && !require_wrapFocus.elementOrParentIsFloatingMenu(target, selectorsFloatingMenus, prefix) && innerModal.current && !innerModal.current.contains(target) && !innerModal.current.contains(mouseDownTarget)) closeModal(evt);
+	}
+	function handleBlur({ target: oldActiveNode, relatedTarget: currentActiveNode }) {
+		if (!enableDialogElement && !focusTrapWithoutSentinels && open && currentActiveNode && oldActiveNode && innerModal.current) {
+			const { current: bodyNode } = innerModal;
+			const { current: startSentinelNode } = startSentinel;
+			const { current: endSentinelNode } = endSentinel;
+			require_wrapFocus.wrapFocus({
+				bodyNode,
+				startTrapNode: startSentinelNode,
+				endTrapNode: endSentinelNode,
+				currentActiveNode,
+				oldActiveNode,
+				selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean),
+				prefix
+			});
+		}
+		const modalContent = document.querySelector(`.${prefix}--modal-content`);
+		if (!modalContent || !modalContent.classList.contains(`${prefix}--modal-scroll-content`) || !currentActiveNode || !modalContent.contains(currentActiveNode)) return;
+		currentActiveNode.scrollIntoView({ block: "center" });
+	}
+	function closeModal(evt) {
+		if (!onClose || onClose(evt) !== false) setIsOpen(false);
+	}
+	const modalClass = (0, classnames.default)(`${prefix}--modal`, {
+		"is-visible": enablePresence || isOpen,
+		[`${prefix}--modal--enable-presence`]: presenceContext?.autoEnablePresence,
+		[`${prefix}--modal--danger`]: danger,
+		[`${prefix}--modal--slug`]: slug,
+		[`${prefix}--modal--decorator`]: decorator
+	}, customClassName);
+	const containerClass = (0, classnames.default)(`${prefix}--modal-container`, size && `${prefix}--modal-container--${size}`, isFullWidth && `${prefix}--modal-container--full-width`, containerClassName);
+	let generatedAriaLabel;
+	const childrenWithProps = react.default.Children.toArray(children).map((child) => {
+		if (require_utils.isComponentElement(child, require_ModalHeader.ModalHeader)) {
+			generatedAriaLabel = child.props.label;
+			return (0, react.cloneElement)(child, { closeModal });
+		}
+		if (require_utils.isComponentElement(child, require_ModalFooter.ModalFooter)) return (0, react.cloneElement)(child, {
+			closeModal,
+			inputref: button,
+			danger
+		});
+		return child;
+	});
+	const isPassive = !react.Children.toArray(childrenWithProps).some((child) => require_utils.isComponentElement(child, require_ModalFooter.ModalFooter));
+	require_warning.warning(!(!isPassive && preventCloseOnClickOutside === false), "`<ComposedModal>` prop `preventCloseOnClickOutside` should not be `false` when `<ModalFooter>` is present. Transactional, non-passive Modals should not be dissmissable by clicking outside. See: https://carbondesignsystem.com/components/modal/usage/#transactional-modal");
+	(0, react.useEffect)(() => {
+		if (!open) return;
+		const handleEscapeKey = (event) => {
+			if (require_match.match(event, require_keys.Escape)) {
+				event.preventDefault();
+				event.stopPropagation();
+				closeModal(event);
+			}
+		};
+		document.addEventListener("keydown", handleEscapeKey, true);
+		return () => {
+			document.removeEventListener("keydown", handleEscapeKey, true);
+		};
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!enableDialogElement && !enablePresence && !open && launcherButtonRef) setTimeout(() => {
+			launcherButtonRef.current?.focus();
+		});
+	}, [
+		enableDialogElement,
+		enablePresence,
+		open,
+		launcherButtonRef
+	]);
+	(0, react.useEffect)(() => {
+		const launcherButton = launcherButtonRef?.current;
+		return () => {
+			if (enablePresence && launcherButton) setTimeout(() => {
+				launcherButton.focus();
+			});
+		};
+	}, [enablePresence, launcherButtonRef]);
+	(0, react.useEffect)(() => {
+		if (!enableDialogElement) {
+			const initialFocus = (focusContainerElement) => {
+				const containerElement = focusContainerElement || innerModal.current;
+				const primaryFocusElement = containerElement ? containerElement.querySelector(danger ? `.${prefix}--btn--secondary` : selectorPrimaryFocus) : null;
+				if (primaryFocusElement) return primaryFocusElement;
+				return button && button.current;
+			};
+			const focusButton = (focusContainerElement) => {
+				const target = initialFocus(focusContainerElement);
+				const closeButton = focusContainerElement.querySelector(`.${prefix}--modal-close`);
+				if (target) target.focus();
+				else if (!target && closeButton) closeButton?.focus();
+			};
+			if (open && isOpen) focusButton(innerModal.current);
+		}
+	}, [
+		open,
+		selectorPrimaryFocus,
+		isOpen
+	]);
+	const candidate = slug ?? decorator;
+	const normalizedDecorator = require_utils.isComponentElement(candidate, require_index$1.AILabel) ? (0, react.cloneElement)(candidate, { size: "sm" }) : candidate;
+	const modalBody = enableDialogElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.Dialog, {
+		open,
+		focusAfterCloseRef: launcherButtonRef,
+		modal: true,
+		className: containerClass,
+		"aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"data-exiting": presenceContext?.isExiting || void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: innerModal,
+			className: `${prefix}--modal-container-body`,
+			children: [slug ? normalizedDecorator : decorator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefix}--modal--inner__decorator`,
+				children: normalizedDecorator
+			}) : "", childrenWithProps]
+		})
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: containerClass,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		children: [
+			!focusTrapWithoutSentinels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				ref: startSentinel,
+				className: `${prefix}--visually-hidden`,
+				children: "Focus sentinel"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: innerModal,
+				className: `${prefix}--modal-container-body`,
+				children: [slug ? normalizedDecorator : decorator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: `${prefix}--modal--inner__decorator`,
+					children: normalizedDecorator
+				}) : "", childrenWithProps]
+			}),
+			!focusTrapWithoutSentinels && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				ref: endSentinel,
+				className: `${prefix}--visually-hidden`,
+				children: "Focus sentinel"
+			})
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.Layer, {
+		...rest,
+		level: 0,
+		role: "presentation",
+		ref: mergedRefs,
+		"aria-hidden": !open,
+		onBlur: handleBlur,
+		onClick: require_events.composeEventHandlers([rest?.onClick, handleOnClick]),
+		onMouseDown: require_events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
+		onKeyDown: handleKeyDown,
+		className: modalClass,
+		"data-exiting": presenceContext?.isExiting || void 0,
+		children: modalBody
+	});
 });
 ComposedModal.propTypes = {
-  /**
-   * Specify the aria-label for cds--modal-container
-   */
-  ['aria-label']: PropTypes.string,
-  /**
-   * Specify the aria-labelledby for cds--modal-container
-   */
-  ['aria-labelledby']: PropTypes.string,
-  /**
-   * Specify the content to be placed in the ComposedModal
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the modal root node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify an optional className to be applied to the modal node
-   */
-  containerClassName: PropTypes.string,
-  /**
-   * Specify whether the primary button should be replaced with danger button.
-   * Note that this prop is not applied if you render primary/danger button by yourself
-   */
-  danger: PropTypes.bool,
-  /**
-   * **Experimental**: Provide a `decorator` component to be rendered inside the `ComposedModal` component
-   */
-  decorator: PropTypes.node,
-  /**
-   * Specify whether the Modal content should have any inner padding.
-   */
-  isFullWidth: PropTypes.bool,
-  /**
-   * Provide a ref to return focus to once the modal is closed.
-   */
-  launcherButtonRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
-  /**
-   * Specify an optional handler for closing modal.
-   * Returning `false` here prevents closing modal.
-   */
-  onClose: PropTypes.func,
-  /**
-   * Specify an optional handler for the `onKeyDown` event. Called for all
-   * `onKeyDown` events that do not close the modal
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * Specify whether the Modal is currently open
-   */
-  open: PropTypes.bool,
-  preventCloseOnClickOutside: PropTypes.bool,
-  /**
-   * Specify a CSS selector that matches the DOM element that should be
-   * focused when the Modal opens
-   */
-  selectorPrimaryFocus: PropTypes.string,
-  /**
-   * Specify the CSS selectors that match the floating menus
-   */
-  selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string.isRequired),
-  /**
-   * Specify the size variant.
-   */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  slug: deprecate.deprecate(PropTypes.node, 'The `slug` prop for `ComposedModal` has ' + 'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.')
+	["aria-label"]: prop_types.default.string,
+	["aria-labelledby"]: prop_types.default.string,
+	children: prop_types.default.node,
+	className: prop_types.default.string,
+	containerClassName: prop_types.default.string,
+	danger: prop_types.default.bool,
+	decorator: prop_types.default.node,
+	isFullWidth: prop_types.default.bool,
+	launcherButtonRef: prop_types.default.oneOfType([prop_types.default.func, prop_types.default.shape({ current: prop_types.default.any })]),
+	onClose: prop_types.default.func,
+	onKeyDown: prop_types.default.func,
+	open: prop_types.default.bool,
+	preventCloseOnClickOutside: prop_types.default.bool,
+	selectorPrimaryFocus: prop_types.default.string,
+	selectorsFloatingMenus: prop_types.default.arrayOf(prop_types.default.string.isRequired),
+	size: prop_types.default.oneOf([
+		"xs",
+		"sm",
+		"md",
+		"lg"
+	]),
+	slug: require_deprecate.deprecate(prop_types.default.node, "The `slug` prop for `ComposedModal` has been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.")
 };
 
+//#endregion
 exports.ModalBody = ModalBody;
-exports.default = ComposedModal;
+exports.default = ComposedModal;