@atlaskit/modal-dialog 16.2.2 → 16.2.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/modal-dialog
 
+## 16.2.3
+
+### Patch Changes
+
+- [`3da013cc133e5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3da013cc133e5) -
+  Internal refactor for safer feature flag usage.
+- Updated dependencies
+
 ## 16.2.2
 
 ### Patch Changes

package/dist/cjs/internal/components/modal-wrapper.js

@@ -74,9 +74,38 @@ var allowlistElements = function allowlistElements(element, callback) {
   }
   return true;
 };
-var InternalModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+
+// Analytics-wrapped close handler. Extracted so both rendering paths build it
+// identically.
+function useModalCloseHandler(providedOnClose) {
+  return (0, _analyticsNext.usePlatformLeafEventHandler)({
+    fn: providedOnClose || _noop.default,
+    action: 'closed',
+    componentName: 'modalDialog',
+    packageName: "@atlaskit/modal-dialog",
+    packageVersion: "16.2.2"
+  });
+}
+
+/**
+ * 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: onDialogClose only forwards allowed reasons
+ *   (see notes/guides/dialog-close-flow.md).
+ * - 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) {
   var autoFocus = props.autoFocus,
-    focusLockAllowlist = props.focusLockAllowlist,
     _props$shouldCloseOnE = props.shouldCloseOnEscapePress,
     shouldCloseOnEscapePress = _props$shouldCloseOnE === void 0 ? true : _props$shouldCloseOnE,
     _props$shouldCloseOnO = props.shouldCloseOnOverlayClick,
@@ -97,253 +126,244 @@ var InternalModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     onOpenComplete = props.onOpenComplete,
     label = props.label,
     testId = props.testId,
-    isFullScreen = props.isFullScreen,
-    _props$UNSAFE_shouldD = props.UNSAFE_shouldDisableMotionUplift,
-    UNSAFE_shouldDisableMotionUplift = _props$UNSAFE_shouldD === void 0 ? false : _props$UNSAFE_shouldD;
+    isFullScreen = props.isFullScreen;
   var calculatedStackIndex = (0, _useModalStack.default)({
     onStackChange: onStackChange
   });
   var stackIndex = stackIndexOverride || calculatedStackIndex;
-  var isForeground = stackIndex === 0;
-
-  // If no ref is provided, autofocus on first element
-  var autoFocusLock = !((0, _typeof2.default)(autoFocus) === 'object');
-  var onCloseHandler = (0, _analyticsNext.usePlatformLeafEventHandler)({
-    fn: providedOnClose || _noop.default,
-    action: 'closed',
-    componentName: 'modalDialog',
-    packageName: "@atlaskit/modal-dialog",
-    packageVersion: "16.2.1"
-  });
-  var onBlanketClicked = (0, _react.useCallback)(function (e) {
-    if (shouldCloseOnOverlayClick) {
-      onCloseHandler(e);
-    }
-  }, [shouldCloseOnOverlayClick, onCloseHandler]);
-
-  // Stable callback to avoid re-renders when focusLockAllowlist is not provided.
-  var allowListCallback = (0, _react.useCallback)(function (element) {
-    return allowlistElements(element, focusLockAllowlist);
-  }, [focusLockAllowlist]);
-
-  // Called outside the feature-flag branch to keep hook order stable.
-  // Legacy path: FadeIn calls onFinish. Top-layer path: called directly.
+  var onCloseHandler = useModalCloseHandler(providedOnClose);
   var _useExitingPersistenc = (0, _exitingPersistence.useExitingPersistence)(),
     isExiting = _useExitingPersistenc.isExiting,
     onExitFinish = _useExitingPersistenc.onFinish;
 
-  // Prevent background scroll (top-layer path uses DialogScrollLock instead).
-  // Safe conditional hook: feature flags are resolved once at startup.
-  if (!(0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _usePreventProgrammaticScroll.default)();
-  }
-
-  // On the top-layer path, the Dialog primitive registers with the observer
-  // directly, so we skip registration here to avoid double-counting.
-  // Safe conditional hook: feature flags are resolved once at startup.
-  if (!(0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _useNotifyOpenLayerObserver.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.default
-    });
-  }
+  // Native <dialog> always restores focus on close - no opt-out via shouldReturnFocus.
+  var defaultTestId = testId || 'modal-dialog';
+  var id = (0, _useId.useId)();
+  var titleId = "modal-dialog-title-".concat(id);
 
-  /**
-   * Top-layer 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: onDialogClose only forwards allowed reasons
-   *   (see notes/guides/dialog-close-flow.md).
-   * - onClose event param: undefined - consumers should use close reason.
-   * - Focus restoration: native <dialog> behavior replaces react-focus-lock's
-   *   returnFocus (see accessibility-criteria.md).
-   */
-  if ((0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
-    // Native <dialog> always restores focus on close - no opt-out via shouldReturnFocus.
-    var defaultTestId = testId || 'modal-dialog';
+  // Content container ref - used for onOpenComplete/onCloseComplete callbacks.
+  var contentRef = (0, _react.useRef)(null);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var id = (0, _useId.useId)();
-    var titleId = "modal-dialog-title-".concat(id);
+  // Cache last content element for onCloseComplete after children unmount
+  // (with reduced motion, contentRef clears before onExitFinish fires).
+  var lastContentElRef = (0, _react.useRef)(null);
+  if (contentRef.current) {
+    lastContentElRef.current = contentRef.current;
+  }
 
-    // Content container ref - used for onOpenComplete/onCloseComplete callbacks.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var contentRef = (0, _react.useRef)(null);
+  // Native <dialog> ref - needed for ExitingPersistence to call dialog.close().
+  var dialogRef = (0, _react.useRef)(null);
+  var modalDialogContext = (0, _react.useMemo)(function () {
+    return {
+      testId: defaultTestId,
+      titleId: titleId,
+      onClose: onCloseHandler,
+      hasProvidedOnClose: Boolean(providedOnClose),
+      isFullScreen: isFullScreen !== null && isFullScreen !== void 0 ? isFullScreen : false
+    };
+  }, [defaultTestId, titleId, onCloseHandler, providedOnClose, isFullScreen]);
 
-    // Cache last content element for onCloseComplete after children unmount
-    // (with reduced motion, contentRef clears before onExitFinish fires).
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var lastContentElRef = (0, _react.useRef)(null);
-    if (contentRef.current) {
-      lastContentElRef.current = contentRef.current;
+  // Only forward close when the reason is allowed by props.
+  // Passes a synthetic event to satisfy the KeyboardOrMouseEvent contract.
+  var onDialogClose = (0, _react.useCallback)(function (_ref) {
+    var reason = _ref.reason;
+    if (reason === 'escape' && shouldCloseOnEscapePress) {
+      onCloseHandler((0, _dialog.createCloseEvent)({
+        reason: reason
+      }));
+    }
+    if (reason === 'overlay-click' && shouldCloseOnOverlayClick) {
+      onCloseHandler((0, _dialog.createCloseEvent)({
+        reason: reason
+      }));
     }
+  }, [onCloseHandler, shouldCloseOnEscapePress, shouldCloseOnOverlayClick]);
 
-    // Native <dialog> ref - needed for ExitingPersistence to call dialog.close().
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var dialogRef = (0, _react.useRef)(null);
+  // ExitingPersistence: isExiting → isOpen={false} → Dialog exit animation →
+  // onExitFinish → onCloseComplete + unmount.
+  var handleDialogExitFinish = (0, _react.useCallback)(function () {
+    var _contentRef$current;
+    var 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 || onExitFinish();
+  }, [onExitFinish, onCloseComplete]);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var modalDialogContext = (0, _react.useMemo)(function () {
-      return {
-        testId: defaultTestId,
-        titleId: titleId,
-        onClose: onCloseHandler,
-        hasProvidedOnClose: Boolean(providedOnClose),
-        isFullScreen: isFullScreen !== null && isFullScreen !== void 0 ? isFullScreen : false
-      };
-    }, [defaultTestId, titleId, onCloseHandler, providedOnClose, isFullScreen]);
+  // Fire onOpenComplete after mount.
+  (0, _react.useEffect)(function () {
+    if (onOpenComplete && contentRef.current) {
+      onOpenComplete(contentRef.current, true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-    // Only forward close when the reason is allowed by props.
-    // Passes a synthetic event to satisfy the KeyboardOrMouseEvent contract.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var onDialogClose = (0, _react.useCallback)(function (_ref) {
-      var reason = _ref.reason;
-      if (reason === 'escape' && shouldCloseOnEscapePress) {
-        onCloseHandler((0, _dialog.createCloseEvent)({
-          reason: reason
-        }));
-      }
-      if (reason === 'overlay-click' && shouldCloseOnOverlayClick) {
-        onCloseHandler((0, _dialog.createCloseEvent)({
-          reason: reason
-        }));
+  // 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).
+  var shouldReturnFocusRef = (0, _react.useRef)(shouldReturnFocus);
+  shouldReturnFocusRef.current = shouldReturnFocus;
+  (0, _react.useEffect)(function () {
+    return function () {
+      var target = shouldReturnFocusRef.current;
+      if ((0, _typeof2.default)(target) === 'object' && target.current) {
+        target.current.focus();
       }
-    }, [onCloseHandler, shouldCloseOnEscapePress, shouldCloseOnOverlayClick]);
+    };
+  }, []);
 
-    // ExitingPersistence: isExiting → isOpen={false} → Dialog exit animation →
-    // onExitFinish → onCloseComplete + unmount.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var handleDialogExitFinish = (0, _react.useCallback)(function () {
-      var _contentRef$current;
-      var 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 || onExitFinish();
-    }, [onExitFinish, onCloseComplete]);
+  // Focus a ref-targeted element after mount (when autoFocus is a ref).
+  // When true, native <dialog>.showModal() handles focus automatically.
+  (0, _useAutoFocus.default)((0, _typeof2.default)(autoFocus) === 'object' ? autoFocus : undefined, (0, _typeof2.default)(autoFocus) === 'object');
 
-    // Fire onOpenComplete after mount.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _react.useEffect)(function () {
-      if (onOpenComplete && contentRef.current) {
-        onOpenComplete(contentRef.current, true);
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+  // Chrome cross-origin iframe DnD workaround (crbug.com/362301053)
+  (0, _react.useEffect)(function () {
+    return (0, _combine.combine)((0, _element.disableDraggingToCrossOriginIFramesForElement)(), (0, _textSelection.disableDraggingToCrossOriginIFramesForTextSelection)(), (0, _external.disableDraggingToCrossOriginIFramesForExternal)());
+  }, []);
 
-    // 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).
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    var shouldReturnFocusRef = (0, _react.useRef)(shouldReturnFocus);
-    shouldReturnFocusRef.current = shouldReturnFocus;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _react.useEffect)(function () {
-      return function () {
-        var target = shouldReturnFocusRef.current;
-        if ((0, _typeof2.default)(target) === 'object' && target.current) {
-          target.current.focus();
-        }
-      };
-    }, []);
+  // Responsive layout via ID-scoped <style> (same pattern as Dialog's hideBackdrop).
+  // ID selector beats Compiled atomic classes without !important and supports @media.
+  var namedWidth = (0, _dialogWidth.dialogWidth)(width !== null && width !== void 0 ? width : 'medium');
+  var dialogId = "modal-dialog-".concat(id);
+  var escapedDialogId = CSS.escape(dialogId);
 
-    // Focus a ref-targeted element after mount (when autoFocus is a ref).
-    // When true, native <dialog>.showModal() handles focus automatically.
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _useAutoFocus.default)((0, _typeof2.default)(autoFocus) === 'object' ? autoFocus : undefined, (0, _typeof2.default)(autoFocus) === 'object');
+  // 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.
+  var resolvedWidth = namedWidth.endsWith('%') ? "calc(".concat(parseFloat(namedWidth), " * (100vw - 120px) / 100)") : namedWidth;
+  var dialogStyle = isFullScreen ? {
+    width: '100vw',
+    height: '100vh',
+    margin: '0'
+  } : {
+    width: "min(".concat(resolvedWidth, ", 100vw)")
+  };
 
-    // Chrome cross-origin iframe DnD workaround (crbug.com/362301053)
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _react.useEffect)(function () {
-      return (0, _combine.combine)((0, _element.disableDraggingToCrossOriginIFramesForElement)(), (0, _textSelection.disableDraggingToCrossOriginIFramesForTextSelection)(), (0, _external.disableDraggingToCrossOriginIFramesForExternal)());
-    }, []);
+  // Shift stacked background modals down by space.100 (8px) per level.
+  if (stackIndex > 0) {
+    dialogStyle['transform'] = "translateY(calc(".concat(stackIndex, "px * ", "var(--ds-space-100, 8px)", "))");
+  }
 
-    // Responsive layout via ID-scoped <style> (same pattern as Dialog's hideBackdrop).
-    // ID selector beats Compiled atomic classes without !important and supports @media.
-    var namedWidth = (0, _dialogWidth.dialogWidth)(width !== null && width !== void 0 ? width : 'medium');
-    var dialogId = "modal-dialog-".concat(id);
-    var escapedDialogId = CSS.escape(dialogId);
+  // Mobile: viewport fill. Desktop (≥ 30rem): gutter margins, auto height.
+  // Content-div height set via #id > div to beat Compiled's atomic specificity.
+  var desktopMargin = shouldScrollInViewport ? '60px auto' : '60px auto auto';
+  var resolvedHeight = (0, _dialogHeight.dialogHeight)(height);
+  // Body-scroll: specified height or auto. Viewport-scroll: uses min-height.
+  var desktopContentHeight = shouldScrollInViewport ? 'auto' : resolvedHeight;
+  var desktopContentMinHeight = shouldScrollInViewport ? resolvedHeight : 'auto';
+  // Viewport-scroll: the legacy Positioner was a fixed 100vh container that
+  // scrolled internally, so the modal section could fill (100vh - 60px top gutter).
+  // In the top layer the <dialog> sizes to content with height:auto, so we need
+  // an explicit min-height to ensure the dialog stretches to the same visible area.
+  var desktopDialogMinHeight = shouldScrollInViewport ? 'min-height:calc(100vh - 60px);' : '';
+  // Doubled-ID selector (#id#id > div) at specificity (2,0,1) beats
+  // Compiled atomic classes at (0,1,0) (increaseSpecificity is disabled).
+  var dialogPositionStyles = isFullScreen ? '' : // Mobile: edge-to-edge. Desktop (≥ 30rem): 60px gutters, max-width.
+  "#".concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:0;height:100vh}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:100%}@media(min-width:30rem){#").concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:").concat(desktopMargin, ";height:auto;").concat(desktopDialogMinHeight, "max-width:calc(100vw - 120px)}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:").concat(desktopContentHeight, ";min-height:").concat(desktopContentMinHeight, "}}");
+  return /*#__PURE__*/React.createElement(_dialog.Dialog, (0, _extends2.default)({
+    ref: dialogRef,
+    id: dialogId,
+    onClose: onDialogClose,
+    onExitFinish: handleDialogExitFinish,
+    shouldAnimate: !isFullScreen,
+    isOpen: !isExiting,
+    shouldHideBackdrop: stackIndex > 0 || Boolean(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: label
+  } : {
+    labelledBy: titleId
+  }, {
+    testId: defaultTestId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: dialogStyle
+  }), /*#__PURE__*/React.createElement(_dialogScrollLock.DialogScrollLock, {
+    isOpen: true
+  }), dialogPositionStyles &&
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
+  React.createElement("style", null, dialogPositionStyles), /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: (0, _runtime.ax)([topLayerStyles.content, !isFullScreen && topLayerStyles.borderRadius, !isFullScreen && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && topLayerStyles.borderRadiusT26, !isFullScreen && !shouldScrollInViewport && "_bolhzwhf", !isFullScreen && shouldScrollInViewport && "_1tke1kxc _c71lglyw"])
+  }, /*#__PURE__*/React.createElement(_context.ModalContext.Provider, {
+    value: modalDialogContext
+  }, /*#__PURE__*/React.createElement(_scrollContext.ScrollContext.Provider, {
+    value: shouldScrollInViewport
+  }, children))));
+}
 
-    // 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.
-    var resolvedWidth = namedWidth.endsWith('%') ? "calc(".concat(parseFloat(namedWidth), " * (100vw - 120px) / 100)") : namedWidth;
-    var dialogStyle = isFullScreen ? {
-      width: '100vw',
-      height: '100vh',
-      margin: '0'
-    } : {
-      width: "min(".concat(resolvedWidth, ", 100vw)")
-    };
+/**
+ * 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.
+ */
+var ModalWrapperLegacy = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var autoFocus = props.autoFocus,
+    focusLockAllowlist = props.focusLockAllowlist,
+    _props$shouldCloseOnE2 = props.shouldCloseOnEscapePress,
+    shouldCloseOnEscapePress = _props$shouldCloseOnE2 === void 0 ? true : _props$shouldCloseOnE2,
+    _props$shouldCloseOnO2 = props.shouldCloseOnOverlayClick,
+    shouldCloseOnOverlayClick = _props$shouldCloseOnO2 === void 0 ? true : _props$shouldCloseOnO2,
+    _props$shouldScrollIn2 = props.shouldScrollInViewport,
+    shouldScrollInViewport = _props$shouldScrollIn2 === void 0 ? false : _props$shouldScrollIn2,
+    _props$shouldReturnFo2 = props.shouldReturnFocus,
+    shouldReturnFocus = _props$shouldReturnFo2 === void 0 ? true : _props$shouldReturnFo2,
+    stackIndexOverride = props.stackIndex,
+    providedOnClose = props.onClose,
+    _props$onStackChange2 = props.onStackChange,
+    onStackChange = _props$onStackChange2 === void 0 ? _noop.default : _props$onStackChange2,
+    isBlanketHidden = props.isBlanketHidden,
+    children = props.children,
+    height = props.height,
+    width = props.width,
+    onCloseComplete = props.onCloseComplete,
+    onOpenComplete = props.onOpenComplete,
+    label = props.label,
+    testId = props.testId,
+    isFullScreen = props.isFullScreen,
+    _props$UNSAFE_shouldD = props.UNSAFE_shouldDisableMotionUplift,
+    UNSAFE_shouldDisableMotionUplift = _props$UNSAFE_shouldD === void 0 ? false : _props$UNSAFE_shouldD;
+  var calculatedStackIndex = (0, _useModalStack.default)({
+    onStackChange: onStackChange
+  });
+  var stackIndex = stackIndexOverride || calculatedStackIndex;
+  var isForeground = stackIndex === 0;
 
-    // Shift stacked background modals down by space.100 (8px) per level.
-    if (stackIndex > 0) {
-      dialogStyle['transform'] = "translateY(calc(".concat(stackIndex, "px * ", "var(--ds-space-100, 8px)", "))");
+  // If no ref is provided, autofocus on first element
+  var autoFocusLock = !((0, _typeof2.default)(autoFocus) === 'object');
+  var onCloseHandler = useModalCloseHandler(providedOnClose);
+  var onBlanketClicked = (0, _react.useCallback)(function (e) {
+    if (shouldCloseOnOverlayClick) {
+      onCloseHandler(e);
     }
+  }, [shouldCloseOnOverlayClick, onCloseHandler]);
 
-    // Mobile: viewport fill. Desktop (≥ 30rem): gutter margins, auto height.
-    // Content-div height set via #id > div to beat Compiled's atomic specificity.
-    var desktopMargin = shouldScrollInViewport ? '60px auto' : '60px auto auto';
-    var resolvedHeight = (0, _dialogHeight.dialogHeight)(height);
-    // Body-scroll: specified height or auto. Viewport-scroll: uses min-height.
-    var desktopContentHeight = shouldScrollInViewport ? 'auto' : resolvedHeight;
-    var desktopContentMinHeight = shouldScrollInViewport ? resolvedHeight : 'auto';
-    // Viewport-scroll: the legacy Positioner was a fixed 100vh container that
-    // scrolled internally, so the modal section could fill (100vh - 60px top gutter).
-    // In the top layer the <dialog> sizes to content with height:auto, so we need
-    // an explicit min-height to ensure the dialog stretches to the same visible area.
-    var desktopDialogMinHeight = shouldScrollInViewport ? 'min-height:calc(100vh - 60px);' : '';
-    // Doubled-ID selector (#id#id > div) at specificity (2,0,1) beats
-    // Compiled atomic classes at (0,1,0) (increaseSpecificity is disabled).
-    var dialogPositionStyles = isFullScreen ? '' : // Mobile: edge-to-edge. Desktop (≥ 30rem): 60px gutters, max-width.
-    "#".concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:0;height:100vh}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:100%}@media(min-width:30rem){#").concat(escapedDialogId, "#").concat(escapedDialogId, "{margin:").concat(desktopMargin, ";height:auto;").concat(desktopDialogMinHeight, "max-width:calc(100vw - 120px)}#").concat(escapedDialogId, "#").concat(escapedDialogId, ">div{height:").concat(desktopContentHeight, ";min-height:").concat(desktopContentMinHeight, "}}");
-    return /*#__PURE__*/React.createElement(_dialog.Dialog, (0, _extends2.default)({
-      ref: dialogRef,
-      id: dialogId,
-      onClose: onDialogClose,
-      onExitFinish: handleDialogExitFinish,
-      shouldAnimate: !isFullScreen,
-      isOpen: !isExiting,
-      shouldHideBackdrop: stackIndex > 0 || Boolean(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: label
-    } : {
-      labelledBy: titleId
-    }, {
-      testId: defaultTestId
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      ,
-      style: dialogStyle
-    }), /*#__PURE__*/React.createElement(_dialogScrollLock.DialogScrollLock, {
-      isOpen: true
-    }), dialogPositionStyles &&
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
-    React.createElement("style", null, dialogPositionStyles), /*#__PURE__*/React.createElement("div", {
-      ref: contentRef,
-      className: (0, _runtime.ax)([topLayerStyles.content, !isFullScreen && topLayerStyles.borderRadius, !isFullScreen && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && topLayerStyles.borderRadiusT26, !isFullScreen && !shouldScrollInViewport && "_bolhzwhf", !isFullScreen && shouldScrollInViewport && "_1tke1kxc _c71lglyw"])
-    }, /*#__PURE__*/React.createElement(_context.ModalContext.Provider, {
-      value: modalDialogContext
-    }, /*#__PURE__*/React.createElement(_scrollContext.ScrollContext.Provider, {
-      value: shouldScrollInViewport
-    }, children))));
-  }
+  // Stable callback to avoid re-renders when focusLockAllowlist is not provided.
+  var allowListCallback = (0, _react.useCallback)(function (element) {
+    return allowlistElements(element, focusLockAllowlist);
+  }, [focusLockAllowlist]);
+
+  // Prevent background scroll (top-layer path uses DialogScrollLock instead).
+  (0, _usePreventProgrammaticScroll.default)();
+
+  // 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.
+  (0, _useNotifyOpenLayerObserver.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.default
+  });
   var modalDialogWithBlanket = /*#__PURE__*/React.createElement(_blanket.default, {
     isTinted: !isBlanketHidden,
     onBlanketClicked: onBlanketClicked,
@@ -406,5 +426,24 @@ var InternalModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   })));
 });
 
+// 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.
+var InternalModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  if ((0, _platformFeatureFlags.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, (0, _extends2.default)({
+    ref: ref
+  }, props));
+});
+
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = exports.default = InternalModalWrapper;