@atlaskit/modal-dialog/dist/es2019/internal/components/modal-wrapper.js

A modal dialog displays content that requires user interaction, in a layer above the page.

/* modal-wrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import "./modal-wrapper.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
import { bind } from 'bind-event-listener';
import FocusLock from 'react-focus-lock';
import ScrollLock, { TouchScrollable } from 'react-scrolllock';
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
import Blanket from '@atlaskit/blanket/blanket';
import noop from '@atlaskit/ds-lib/noop';
import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
import { useId } from '@atlaskit/ds-lib/use-id';
import { Layering } from '@atlaskit/layering/layering';
import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
import Motion from '@atlaskit/motion/entering/motion';
import { useExitingPersistence } from '@atlaskit/motion/exiting-persistence/use-exiting-persistence';
import FadeIn from '@atlaskit/motion/fade-in';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import Portal from '@atlaskit/portal/portal';
import { combine } from '@atlaskit/pragmatic-drag-and-drop/utils/combine';
import { layers } from '@atlaskit/theme/constants';
import { createCloseEvent } from '@atlaskit/top-layer/create-close-event';
import { Dialog } from '@atlaskit/top-layer/dialog-content';
import { DialogScrollLock } from '@atlaskit/top-layer/dialog-scroll-lock';
import { ModalContext } from '../context';
import useModalStack from '../hooks/use-modal-stack';
import usePreventProgrammaticScroll from '../hooks/use-prevent-programmatic-scroll';
import { disableDraggingToCrossOriginIFramesForElement } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element';
import { disableDraggingToCrossOriginIFramesForExternal } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external';
import { disableDraggingToCrossOriginIFramesForTextSelection } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection';
import { ScrollContext } from '../scroll-context';
import { width } from '../width';
import { default as ModalDialog } from './modal-dialog';
const fillScreenStyles = null;

/**
 * Styles applied to the <dialog> wrapper, NOT the visual modal surface.
 */
const dialogStyles = {
  'body-scroll': "_1reoewfl _18m9ewfl _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1sg41wqb _maxs1wug _1jvh1wqb _1uca1wug",
  'viewport-scroll': "_ln19p27b _1bsbauwl _4t3i1kxc",
  'full-screen': ""
};

// Visual styles for modal content inside native <dialog>.
// Uses cssMap (not css) to avoid triggering no-nested-styles lint rule.

const LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';

/**
 * Styles applied to the visual modal surface.
 */
const surfaceStyles = {
  root: "_1e0c1txw _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _zg7p130s",
  borderRadius: "_2rkoidpf _epkxpb1k"
};
const topLayerScrollModeStyles = {
  'full-screen': "_1bsbauwl _4t3i1kxc _kqsw1n9t _152tze3t _1e02ze3t _18m91wug _8am5i4x0",
  'viewport-scroll': "_4t3i1kxc _1sg41wqb _maxs1wug _1jvh1wqb _1uca1wug _1mpv184x _1jyk17ks _g7116m9r _we1i18uh",
  'body-scroll': "_1bsbauwl _4t3i1kxc _1jyk17ks _g7116m9r _we1i18uh"
};
const topLayerAutoHeightStyles = null;
const allowlistElements = (element, callback) => {
  // Allow focus outside modal when AUI dialog is visible
  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- legacy FocusLock allowlist
  if (document.querySelector('.aui-blanket:not([hidden])')) {
    return false;
  }
  // Optional callback to let consumers exclude elements from focus lock
  if (typeof callback === 'function') {
    return callback(element);
  }
  return true;
};

// Analytics-wrapped close handler. Extracted so both rendering paths build it
// identically.
function useModalCloseHandler(providedOnClose) {
  return usePlatformLeafEventHandler({
    fn: providedOnClose || noop,
    action: 'closed',
    componentName: 'modalDialog',
    packageName: "@atlaskit/modal-dialog",
    packageVersion: "16.6.4"
  });
}
function getScrollMode({
  shouldScrollInViewport,
  isFullScreen
}) {
  if (isFullScreen) {
    return 'full-screen';
  }
  if (shouldScrollInViewport) {
    return 'viewport-scroll';
  }
  return 'body-scroll';
}
function isWidthName(value) {
  return width.values.includes(value);
}
function getTopLayerSurfaceWidth(input) {
  if (!input) {
    return 'auto';
  }
  if (typeof input === 'number') {
    return `${input}px`;
  }
  if (isWidthName(input)) {
    return `${width.widths[input]}px`;
  }
  if (input.endsWith('%')) {
    // Percentage widths need special handling in the top layer.
    // In legacy, the percentage resolved against the Positioner's max-width
    // (100vw - 120px). In the top layer, the <dialog>'s containing block is the
    // viewport (100vw), so a raw percentage would produce a wider modal.
    // Transform e.g. '42%' → 'calc(42 * (100vw - 120px) / 100)' to match legacy.
    return `calc(${parseFloat(input)} * (100vw - 120px) / 100)`;
  }
  return input;
}
function getTopLayerSurfaceHeight(input) {
  if (!input) {
    // Although this value would ordinarily fill the viewport height,
    // there is also a `max-height: max-content` applied to keep it constrained.
    // But we need to provide the modal with a fixed height (non-keyword, non-percentage)
    // in order for child elements with 100% height to work correctly.
    return 'calc(100vh - 120px)';
  }
  if (typeof input === 'number') {
    return `${input}px`;
  }
  if (input.endsWith('%')) {
    // Percentage heights need special handling in the top layer.
    // In legacy, the percentage resolved against the Positioner's max-height
    // (100vh - 120px). In the top layer, the <dialog>'s containing block is the
    // viewport (100vh), so a raw percentage would produce a taller modal.
    // Transform e.g. '42%' → 'calc(42 * (100vh - 120px) / 100)' to match legacy.
    return `calc(${parseFloat(input)} * (100vh - 120px) / 100)`;
  }
  return input;
}
function getDialogDismissedBy({
  shouldCloseOnEscapePress,
  shouldCloseOnOverlayClick
}) {
  if (shouldCloseOnEscapePress && shouldCloseOnOverlayClick) {
    return 'escape-and-outside-click';
  }
  if (shouldCloseOnEscapePress) {
    return 'escape';
  }
  return 'none';
}

/**
 * Top-layer rendering path (platform-dst-top-layer).
 *
 * Replaces Portal, FocusLock, ScrollLock, Blanket, Positioner, and z-index
 * management with native <dialog> via @atlaskit/top-layer/dialog.
 *
 * Key decisions:
 * - Animation: CSS transitions via @starting-style / allow-discrete.
 * - Close gating: Dialog only forwards allowed reasons.
 * - onClose event param: undefined - consumers should use close reason.
 * - Focus restoration: native <dialog> behavior replaces react-focus-lock's
 *   returnFocus (see accessibility-criteria.md).
 *
 * Every hook here runs unconditionally: this component only mounts on the
 * top-layer path, so it never shares a hook sequence with the legacy path.
 */
function ModalWrapperTopLayer(props) {
  const {
    autoFocus,
    shouldCloseOnEscapePress = true,
    shouldCloseOnOverlayClick = true,
    shouldScrollInViewport = false,
    shouldReturnFocus = true,
    onClose: providedOnClose,
    onStackChange = noop,
    isBlanketHidden,
    children,
    height,
    width = 'medium',
    onCloseComplete,
    onOpenComplete,
    label,
    testId,
    isFullScreen = false
  } = props;
  useModalStack({
    onStackChange
  });
  const onCloseHandler = useModalCloseHandler(providedOnClose);
  const {
    isExiting,
    onFinish: onExitFinish
  } = useExitingPersistence();

  // Native <dialog> always restores focus on close - no opt-out via shouldReturnFocus.
  const defaultTestId = testId || 'modal-dialog';
  const id = useId();
  const titleId = `modal-dialog-title-${id}`;

  // Content container ref - used for onOpenComplete/onCloseComplete callbacks.
  const contentRef = useRef(null);

  // Cache last content element for onCloseComplete after children unmount
  // (with reduced motion, contentRef clears before onExitFinish fires).
  const lastContentElRef = useRef(null);
  if (contentRef.current) {
    lastContentElRef.current = contentRef.current;
  }

  // Native <dialog> ref - needed for ExitingPersistence to call dialog.close().
  const dialogRef = useRef(null);
  const modalDialogContext = useMemo(() => ({
    testId: defaultTestId,
    titleId,
    onClose: onCloseHandler,
    hasProvidedOnClose: Boolean(providedOnClose),
    isFullScreen: isFullScreen !== null && isFullScreen !== void 0 ? isFullScreen : false
  }), [defaultTestId, titleId, onCloseHandler, providedOnClose, isFullScreen]);

  // Dialog has already applied the close behavior configured by `dismissedBy`.
  // Pass a synthetic event to satisfy the KeyboardOrMouseEvent contract.
  const onDialogClose = useCallback(({
    reason
  }) => {
    onCloseHandler(createCloseEvent({
      reason
    }));
  }, [onCloseHandler]);
  const dismissedBy = getDialogDismissedBy({
    shouldCloseOnEscapePress,
    shouldCloseOnOverlayClick
  });
  const shouldShimCloseOnOverlayClick = shouldCloseOnOverlayClick && !shouldCloseOnEscapePress;

  // Required until we fully remove `shouldCloseOnEscapePress`.
  // Dialog's `dismissedBy` options do not support outside click without Escape (because it is a bad pattern)
  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog || !shouldShimCloseOnOverlayClick) {
      return;
    }
    return bind(dialog, {
      type: 'click',
      listener(event) {
        if (event.target === event.currentTarget) {
          onDialogClose({
            reason: 'overlay-click'
          });
        }
      }
    });
  }, [onDialogClose, shouldShimCloseOnOverlayClick]);

  // ExitingPersistence: isExiting → isOpen={false} → Dialog exit animation →
  // onExitFinish → onCloseComplete + unmount.
  const handleDialogExitFinish = useCallback(() => {
    var _contentRef$current;
    const el = (_contentRef$current = contentRef.current) !== null && _contentRef$current !== void 0 ? _contentRef$current : lastContentElRef.current;
    if (onCloseComplete && el) {
      onCloseComplete(el);
    }
    lastContentElRef.current = null;
    onExitFinish === null || onExitFinish === void 0 ? void 0 : onExitFinish();
  }, [onExitFinish, onCloseComplete]);
  const handleDialogEnterFinish = useCallback(() => {
    if (onOpenComplete && contentRef.current) {
      onOpenComplete(contentRef.current, true);
    }
  }, [onOpenComplete]);

  // Honor `shouldReturnFocus={ref}` on unmount.
  // Native <dialog>.close() restores focus to the trigger that opened it,
  // but the consumer asked for focus to go to a specific element instead.
  // Run this in an unmount cleanup so it fires after dialog.close()
  // (which fires in the Dialog's effect cleanup).
  const shouldReturnFocusRef = useRef(shouldReturnFocus);
  shouldReturnFocusRef.current = shouldReturnFocus;
  useEffect(() => {
    return () => {
      const target = shouldReturnFocusRef.current;
      if (typeof target === 'object' && target.current) {
        target.current.focus();
      }
    };
  }, []);

  // Focus a ref-targeted element after mount (when autoFocus is a ref).
  // When true, native <dialog>.showModal() handles focus automatically.
  useAutoFocus(typeof autoFocus === 'object' ? autoFocus : undefined, typeof autoFocus === 'object');

  // Chrome cross-origin iframe DnD workaround (crbug.com/362301053)
  useEffect(() => {
    return combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal());
  }, []);
  const scrollMode = getScrollMode({
    isFullScreen,
    shouldScrollInViewport
  });
  return /*#__PURE__*/React.createElement(Dialog, _extends({
    ref: dialogRef,
    onClose: onDialogClose,
    dismissedBy: dismissedBy,
    onExitFinish: handleDialogExitFinish,
    shouldAnimate: !isFullScreen,
    isOpen: !isExiting,
    onEnterFinish: handleDialogEnterFinish,
    shouldHideBackdrop: isBlanketHidden
    // Dialog requires at least one of `label` or `labelledBy` (string, not undefined).
    // Prefer the consumer-provided `label`; otherwise reference the internal `titleId`.
  }, label ? {
    label
  } : {
    labelledBy: titleId
  }, {
    testId: defaultTestId,
    xcss: dialogStyles[scrollMode]
  }), /*#__PURE__*/React.createElement(DialogScrollLock, {
    isOpen: true
  }), /*#__PURE__*/React.createElement("div", {
    ref: contentRef,
    style: {
      '--modal-dialog-height': getTopLayerSurfaceHeight(height),
      '--modal-dialog-width': getTopLayerSurfaceWidth(width)
    },
    className: ax([surfaceStyles.root, !isFullScreen && surfaceStyles.borderRadius, topLayerScrollModeStyles[scrollMode], !height && !isFullScreen && "_e8uo1ris"])
  }, /*#__PURE__*/React.createElement(ModalContext.Provider, {
    value: modalDialogContext
  }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
    value: shouldScrollInViewport
  }, children))));
}

/**
 * Legacy rendering path (Portal + FocusLock + ScrollLock + Blanket).
 *
 * Every hook here runs unconditionally: this component only mounts on the
 * legacy path, so it never shares a hook sequence with the top-layer path.
 */
const ModalWrapperLegacy = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    autoFocus,
    focusLockAllowlist,
    shouldCloseOnEscapePress = true,
    shouldCloseOnOverlayClick = true,
    shouldScrollInViewport = false,
    shouldReturnFocus = true,
    stackIndex: stackIndexOverride,
    onClose: providedOnClose,
    onStackChange = noop,
    isBlanketHidden,
    children,
    height,
    width,
    onCloseComplete,
    onOpenComplete,
    label,
    testId,
    isFullScreen,
    UNSAFE_shouldDisableMotionUplift = false
  } = props;
  const calculatedStackIndex = useModalStack({
    onStackChange
  });
  const stackIndex = stackIndexOverride || calculatedStackIndex;
  const isForeground = stackIndex === 0;

  // If no ref is provided, autofocus on first element
  const autoFocusLock = !(typeof autoFocus === 'object');
  const onCloseHandler = useModalCloseHandler(providedOnClose);
  const onBlanketClicked = useCallback(e => {
    if (shouldCloseOnOverlayClick) {
      onCloseHandler(e);
    }
  }, [shouldCloseOnOverlayClick, onCloseHandler]);

  // Stable callback to avoid re-renders when focusLockAllowlist is not provided.
  const allowListCallback = useCallback(element => allowlistElements(element, focusLockAllowlist), [focusLockAllowlist]);

  // Prevent background scroll (top-layer path uses DialogScrollLock instead).
  usePreventProgrammaticScroll();

  // Register with the open layer observer. On the top-layer path the Dialog
  // primitive does this itself, which is why it lives in this legacy-only
  // component rather than the shared dispatcher.
  useNotifyOpenLayerObserver({
    type: 'modal',
    // Always open — modal is conditionally rendered when visible.
    isOpen: true,
    // No-op: no current use case for programmatic close via OpenLayerObserver.
    onClose: noop
  });
  const modalDialogWithBlanket = /*#__PURE__*/React.createElement(Blanket, {
    isTinted: !isBlanketHidden,
    onBlanketClicked: onBlanketClicked,
    testId: testId && `${testId}--blanket`
  }, /*#__PURE__*/React.createElement(ModalDialog, {
    testId: testId,
    label: label,
    autoFocus: autoFocus,
    stackIndex: stackIndex,
    onClose: onCloseHandler,
    shouldCloseOnEscapePress: shouldCloseOnEscapePress && isForeground,
    shouldScrollInViewport: shouldScrollInViewport,
    height: height,
    width: width,
    onCloseComplete: onCloseComplete,
    onOpenComplete: onOpenComplete,
    hasProvidedOnClose: Boolean(providedOnClose),
    isFullScreen: isFullScreen,
    UNSAFE_shouldDisableMotionUplift: UNSAFE_shouldDisableMotionUplift,
    ref: ref
  }, children));
  let returnFocus = true;
  let onDeactivation = noop;
  if ('boolean' === typeof shouldReturnFocus) {
    returnFocus = shouldReturnFocus;
  } else {
    onDeactivation = () => {
      window.setTimeout(() => {
        var _shouldReturnFocus$cu;
        (_shouldReturnFocus$cu = shouldReturnFocus.current) === null || _shouldReturnFocus$cu === void 0 ? void 0 : _shouldReturnFocus$cu.focus();
      }, 0);
    };
  }
  return /*#__PURE__*/React.createElement(Layering, {
    isDisabled: false
  }, /*#__PURE__*/React.createElement(Portal, {
    zIndex: layers.modal()
  }, !UNSAFE_shouldDisableMotionUplift && fg('platform-dst-motion-uplift-modal') ? /*#__PURE__*/React.createElement(Motion, {
    enteringAnimation: "var(--ds-blanket-enter, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100)",
    exitingAnimation: "var(--ds-blanket-exit, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
  }, /*#__PURE__*/React.createElement("div", {
    "aria-hidden": !isForeground,
    className: ax(["_1bsbauwl _4t3i1kxc _kqsw1n9t _152tze3t _1e02ze3t _18m91wug _8am5i4x0"])
  }, /*#__PURE__*/React.createElement(FocusLock, {
    autoFocus: autoFocusLock,
    returnFocus: returnFocus,
    onDeactivation: onDeactivation,
    whiteList: allowListCallback
  }, /*#__PURE__*/React.createElement(ScrollLock, null), shouldScrollInViewport ? /*#__PURE__*/React.createElement(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket))) : /*#__PURE__*/React.createElement(FadeIn, null, fadeInProps => /*#__PURE__*/React.createElement("div", _extends({}, fadeInProps, {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
    className: ax(["_1bsbauwl _4t3i1kxc _kqsw1n9t _152tze3t _1e02ze3t _18m91wug _8am5i4x0", fadeInProps.className]),
    "aria-hidden": !isForeground
  }), /*#__PURE__*/React.createElement(FocusLock, {
    autoFocus: autoFocusLock,
    returnFocus: returnFocus,
    onDeactivation: onDeactivation,
    whiteList: allowListCallback
  }, /*#__PURE__*/React.createElement(ScrollLock, null), shouldScrollInViewport ? /*#__PURE__*/React.createElement(TouchScrollable, null, modalDialogWithBlanket) : modalDialogWithBlanket)))));
});

// Choose the rendering implementation at the component boundary rather than
// gating hooks inside a single component. Each implementation owns its own
// hooks unconditionally, so a runtime feature-flag change swaps component types
// (a clean remount) instead of changing the hook order of a mounted component.
const InternalModalWrapper = /*#__PURE__*/forwardRef((props, ref) => {
  if (fg('platform-dst-top-layer')) {
    // TODO: the top-layer path does not forward the external `ref` (parity
    // with the pre-refactor behavior, where the top-layer branch never
    // consumed it). The public type still advertises `RefAttributes`, so a
    // consumer ref silently no-ops here. Follow up by forwarding `ref` to a
    // sensible element (for example the content `div`) once ref parity is
    // intentionally desired.
    return /*#__PURE__*/React.createElement(ModalWrapperTopLayer, props);
  }
  return /*#__PURE__*/React.createElement(ModalWrapperLegacy, _extends({
    ref: ref
  }, props));
});

// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default InternalModalWrapper;