@atlaskit/popup 5.2.1 → 5.2.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/popup
 
+## 5.2.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.2.2
+
+### Patch Changes
+
+- [`3da013cc133e5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3da013cc133e5) -
+  Internal refactor for safer feature flag usage.
+
 ## 5.2.1
 
 ### Patch Changes

package/dist/cjs/compositional/popup-content-top-layer.js

@@ -1,4 +1,4 @@
-/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/compositional/popup-content.js

@@ -5,7 +5,8 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopupContent = void 0;
+exports.PopupContent = PopupContent;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _layering = require("@atlaskit/layering/layering");
 var _useNotifyOpenLayerObserver = require("@atlaskit/layering/use-notify-open-layer-observer");
@@ -27,13 +28,13 @@ var shouldDisableGpuAccelerationModifiers = [{
   }
 }];
 /**
- * __Popup content__
- *
- * Popup content is the component that renders the content of the popup.
+ * Legacy (Popper + Portal) implementation of the compositional PopupContent.
  *
- * It must be a child of the Popup component.
+ * Renders when the `platform-dst-top-layer` flag is off. This component owns
+ * the open layer observer registration, which on the top-layer path is handled
+ * by the `Popover` primitive inside `PopupContentTopLayer` instead.
  */
-var PopupContent = exports.PopupContent = function PopupContent(_ref) {
+function PopupContentLegacy(_ref) {
   var xcss = _ref.xcss,
     _ref$appearance = _ref.appearance,
     inAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
@@ -66,11 +67,9 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref) {
     _ref$shouldDisableGpu = _ref.shouldDisableGpuAcceleration,
     shouldDisableGpuAcceleration = _ref$shouldDisableGpu === void 0 ? false : _ref$shouldDisableGpu,
     role = _ref.role,
-    label = _ref.label,
-    titleId = _ref.titleId;
-  (0, _useEnsureIsInsidePopup.useEnsureIsInsidePopup)();
-  var isOpen = (0, _react.useContext)(_isOpenContext.IsOpenContext);
-  var id = (0, _react.useContext)(_idContext.IdContext);
+    titleId = _ref.titleId,
+    isOpen = _ref.isOpen,
+    id = _ref.id;
   var triggerRef = (0, _react.useContext)(_triggerRefContext.TriggerRefContext);
   var _usePopupAppearance = (0, _useAppearance.usePopupAppearance)({
       appearance: inAppearance,
@@ -81,50 +80,11 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref) {
   var handleOpenLayerObserverCloseSignal = (0, _react.useCallback)(function () {
     onClose === null || onClose === void 0 || onClose(null);
   }, [onClose]);
-
-  // On the top-layer path, the Popover 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)({
-      isOpen: isOpen,
-      onClose: handleOpenLayerObserverCloseSignal,
-      type: 'popup'
-    });
-  }
-
-  // Top-layer rendering path: native Popover API via @atlaskit/top-layer.
-  // Mirrors the FF branch in the legacy `Popup` component (popup.tsx).
-  if ((0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
-    return /*#__PURE__*/_react.default.createElement(_popupContentTopLayer.PopupContentTopLayer, {
-      xcss: xcss,
-      appearance: inAppearance,
-      offset: offset,
-      onClose: onClose,
-      testId: testId,
-      placement: placement,
-      fallbackPlacements: fallbackPlacements,
-      popupComponent: popupComponent,
-      autoFocus: autoFocus,
-      shouldFitContainer: shouldFitContainer,
-      shouldFitViewport: shouldFitViewport,
-      role: role,
-      label: label,
-      titleId: titleId,
-      zIndex: zIndex,
-      shouldRenderToParent: inShouldRenderToParent,
-      strategy: strategy,
-      boundary: boundary,
-      rootBoundary: rootBoundary,
-      shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
-      shouldDisableFocusLock: shouldDisableFocusLock,
-      shouldFlip: shouldFlip,
-      shouldDisableGpuAcceleration: shouldDisableGpuAcceleration,
-      isOpen: isOpen,
-      id: id
-    }, children);
-  }
+  (0, _useNotifyOpenLayerObserver.useNotifyOpenLayerObserver)({
+    isOpen: isOpen,
+    onClose: handleOpenLayerObserverCloseSignal,
+    type: 'popup'
+  });
   if (!isOpen) {
     return null;
   }
@@ -164,4 +124,40 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref) {
   return /*#__PURE__*/_react.default.createElement(_portal.default, {
     zIndex: zIndex
   }, popperWrapper);
-};
+}
+
+/**
+ * __Popup content__
+ *
+ * Popup content is the component that renders the content of the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+function PopupContent(props) {
+  (0, _useEnsureIsInsidePopup.useEnsureIsInsidePopup)();
+  var isOpen = (0, _react.useContext)(_isOpenContext.IsOpenContext);
+  var id = (0, _react.useContext)(_idContext.IdContext);
+
+  // Select the rendering implementation at the component boundary rather than
+  // gating hooks inside a single component. Each implementation owns its own
+  // hooks, so a runtime feature-flag change swaps component types (a clean
+  // remount) instead of changing the hook order of a mounted component.
+  //
+  // Forwarding the full props onto the chosen implementation is intentional:
+  // both implementations declare explicit prop types, so the forward is type
+  // checked rather than an unbounded API.
+  if ((0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+    // The top-layer Popover registers with the open layer observer itself.
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props -- intentional forward to a typed implementation
+    return /*#__PURE__*/_react.default.createElement(_popupContentTopLayer.PopupContentTopLayer, (0, _extends2.default)({}, props, {
+      isOpen: isOpen,
+      id: id
+    }));
+  }
+
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props -- intentional forward to a typed implementation
+  return /*#__PURE__*/_react.default.createElement(PopupContentLegacy, (0, _extends2.default)({}, props, {
+    isOpen: isOpen,
+    id: id
+  }));
+}

package/dist/cjs/popper-wrapper.js

@@ -1,4 +1,4 @@
-/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popper-wrapper.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/popup-top-layer.js

@@ -1,4 +1,4 @@
-/* popup-top-layer.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popup-top-layer.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/popup.js

@@ -1,4 +1,4 @@
-/* popup.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popup.tsx generated by @compiled/babel-plugin v2.0.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -31,7 +31,7 @@ var defaultLayer = 400;
 var wrapperStyles = {
   root: "_kqswh2mm"
 };
-var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (props) {
+var PopupLegacy = function PopupLegacy(props) {
   var xcss = props.xcss,
     _props$appearance = props.appearance,
     inAppearance = _props$appearance === void 0 ? 'default' : _props$appearance,
@@ -89,25 +89,11 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (props) {
   var handleOpenLayerObserverCloseSignal = (0, _react.useCallback)(function () {
     onClose === null || onClose === void 0 || onClose(null);
   }, [onClose]);
-
-  // On the top-layer path, the Popover 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)({
-      isOpen: isOpen,
-      onClose: handleOpenLayerObserverCloseSignal,
-      type: 'popup'
-    });
-  }
-
-  // Top-layer rendering path: native Popover API via @atlaskit/top-layer
-  if ((0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
-    // Pass the original props object to preserve the discriminated union
-    // (shouldFitContainer: true vs false) that is lost after destructuring.
-    return /*#__PURE__*/React.createElement(_popupTopLayer.PopupTopLayer, props);
-  }
+  (0, _useNotifyOpenLayerObserver.useNotifyOpenLayerObserver)({
+    isOpen: isOpen,
+    onClose: handleOpenLayerObserverCloseSignal,
+    type: 'popup'
+  });
 
   // `xcss` is part of Popup's public API and is forwarded as-is to
   // the internal PopperWrapper, which rebuilds the inner styles. We
@@ -171,4 +157,17 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (props) {
     }, popupContent);
   }
   return popupContent;
+};
+var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(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.
+  if ((0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+    // Pass the original props object to preserve the discriminated union
+    // (shouldFitContainer: true vs false) that is lost after destructuring.
+    return /*#__PURE__*/React.createElement(_popupTopLayer.PopupTopLayer, props);
+  }
+  return /*#__PURE__*/React.createElement(PopupLegacy, props);
 });

package/dist/es2019/compositional/popup-content-top-layer.js

@@ -1,4 +1,4 @@
-/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v2.0.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./popup-content-top-layer.compiled.css";
 import * as React from 'react';

package/dist/es2019/compositional/popup-content.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useContext } from 'react';
 import { Layering } from '@atlaskit/layering/layering';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
@@ -18,13 +19,13 @@ const shouldDisableGpuAccelerationModifiers = [{
   }
 }];
 /**
- * __Popup content__
- *
- * Popup content is the component that renders the content of the popup.
+ * Legacy (Popper + Portal) implementation of the compositional PopupContent.
  *
- * It must be a child of the Popup component.
+ * Renders when the `platform-dst-top-layer` flag is off. This component owns
+ * the open layer observer registration, which on the top-layer path is handled
+ * by the `Popover` primitive inside `PopupContentTopLayer` instead.
  */
-export const PopupContent = ({
+function PopupContentLegacy({
   xcss,
   appearance: inAppearance = 'default',
   children,
@@ -48,12 +49,10 @@ export const PopupContent = ({
   shouldFitViewport,
   shouldDisableGpuAcceleration = false,
   role,
-  label,
-  titleId
-}) => {
-  useEnsureIsInsidePopup();
-  const isOpen = useContext(IsOpenContext);
-  const id = useContext(IdContext);
+  titleId,
+  isOpen,
+  id
+}) {
   const triggerRef = useContext(TriggerRefContext);
   const {
     appearance,
@@ -65,50 +64,11 @@ export const PopupContent = ({
   const handleOpenLayerObserverCloseSignal = useCallback(() => {
     onClose === null || onClose === void 0 ? void 0 : onClose(null);
   }, [onClose]);
-
-  // On the top-layer path, the Popover 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 (!fg('platform-dst-top-layer')) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useNotifyOpenLayerObserver({
-      isOpen,
-      onClose: handleOpenLayerObserverCloseSignal,
-      type: 'popup'
-    });
-  }
-
-  // Top-layer rendering path: native Popover API via @atlaskit/top-layer.
-  // Mirrors the FF branch in the legacy `Popup` component (popup.tsx).
-  if (fg('platform-dst-top-layer')) {
-    return /*#__PURE__*/React.createElement(PopupContentTopLayer, {
-      xcss: xcss,
-      appearance: inAppearance,
-      offset: offset,
-      onClose: onClose,
-      testId: testId,
-      placement: placement,
-      fallbackPlacements: fallbackPlacements,
-      popupComponent: popupComponent,
-      autoFocus: autoFocus,
-      shouldFitContainer: shouldFitContainer,
-      shouldFitViewport: shouldFitViewport,
-      role: role,
-      label: label,
-      titleId: titleId,
-      zIndex: zIndex,
-      shouldRenderToParent: inShouldRenderToParent,
-      strategy: strategy,
-      boundary: boundary,
-      rootBoundary: rootBoundary,
-      shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
-      shouldDisableFocusLock: shouldDisableFocusLock,
-      shouldFlip: shouldFlip,
-      shouldDisableGpuAcceleration: shouldDisableGpuAcceleration,
-      isOpen: isOpen,
-      id: id
-    }, children);
-  }
+  useNotifyOpenLayerObserver({
+    isOpen,
+    onClose: handleOpenLayerObserverCloseSignal,
+    type: 'popup'
+  });
   if (!isOpen) {
     return null;
   }
@@ -148,4 +108,40 @@ export const PopupContent = ({
   return /*#__PURE__*/React.createElement(Portal, {
     zIndex: zIndex
   }, popperWrapper);
-};
+}
+
+/**
+ * __Popup content__
+ *
+ * Popup content is the component that renders the content of the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+export function PopupContent(props) {
+  useEnsureIsInsidePopup();
+  const isOpen = useContext(IsOpenContext);
+  const id = useContext(IdContext);
+
+  // Select the rendering implementation at the component boundary rather than
+  // gating hooks inside a single component. Each implementation owns its own
+  // hooks, so a runtime feature-flag change swaps component types (a clean
+  // remount) instead of changing the hook order of a mounted component.
+  //
+  // Forwarding the full props onto the chosen implementation is intentional:
+  // both implementations declare explicit prop types, so the forward is type
+  // checked rather than an unbounded API.
+  if (fg('platform-dst-top-layer')) {
+    // The top-layer Popover registers with the open layer observer itself.
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props -- intentional forward to a typed implementation
+    return /*#__PURE__*/React.createElement(PopupContentTopLayer, _extends({}, props, {
+      isOpen: isOpen,
+      id: id
+    }));
+  }
+
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props -- intentional forward to a typed implementation
+  return /*#__PURE__*/React.createElement(PopupContentLegacy, _extends({}, props, {
+    isOpen: isOpen,
+    id: id
+  }));
+}

package/dist/es2019/popper-wrapper.js

@@ -1,4 +1,4 @@
-/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popper-wrapper.tsx generated by @compiled/babel-plugin v2.0.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./popper-wrapper.compiled.css";
 import * as React from 'react';

package/dist/es2019/popup-top-layer.js

@@ -1,4 +1,4 @@
-/* popup-top-layer.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popup-top-layer.tsx generated by @compiled/babel-plugin v2.0.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./popup-top-layer.compiled.css";
 import * as React from 'react';

package/dist/es2019/popup.js

@@ -1,4 +1,4 @@
-/* popup.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popup.tsx generated by @compiled/babel-plugin v2.0.0 */
 /* eslint-disable @repo/internal/react/require-jsdoc */
 import "./popup.compiled.css";
 import * as React from 'react';
@@ -21,7 +21,7 @@ const defaultLayer = 400;
 const wrapperStyles = {
   root: "_kqswh2mm"
 };
-export const Popup = /*#__PURE__*/memo(props => {
+const PopupLegacy = props => {
   const {
     xcss,
     appearance: inAppearance = 'default',
@@ -68,25 +68,11 @@ export const Popup = /*#__PURE__*/memo(props => {
   const handleOpenLayerObserverCloseSignal = useCallback(() => {
     onClose === null || onClose === void 0 ? void 0 : onClose(null);
   }, [onClose]);
-
-  // On the top-layer path, the Popover 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 (!fg('platform-dst-top-layer')) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useNotifyOpenLayerObserver({
-      isOpen,
-      onClose: handleOpenLayerObserverCloseSignal,
-      type: 'popup'
-    });
-  }
-
-  // Top-layer rendering path: native Popover API via @atlaskit/top-layer
-  if (fg('platform-dst-top-layer')) {
-    // Pass the original props object to preserve the discriminated union
-    // (shouldFitContainer: true vs false) that is lost after destructuring.
-    return /*#__PURE__*/React.createElement(PopupTopLayer, props);
-  }
+  useNotifyOpenLayerObserver({
+    isOpen,
+    onClose: handleOpenLayerObserverCloseSignal,
+    type: 'popup'
+  });
 
   // `xcss` is part of Popup's public API and is forwarded as-is to
   // the internal PopperWrapper, which rebuilds the inner styles. We
@@ -151,4 +137,17 @@ export const Popup = /*#__PURE__*/memo(props => {
     }, popupContent);
   }
   return popupContent;
+};
+export const Popup = /*#__PURE__*/memo(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.
+  if (fg('platform-dst-top-layer')) {
+    // Pass the original props object to preserve the discriminated union
+    // (shouldFitContainer: true vs false) that is lost after destructuring.
+    return /*#__PURE__*/React.createElement(PopupTopLayer, props);
+  }
+  return /*#__PURE__*/React.createElement(PopupLegacy, props);
 });

package/dist/esm/compositional/popup-content-top-layer.js

@@ -1,4 +1,4 @@
-/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v2.0.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./popup-content-top-layer.compiled.css";
 import * as React from 'react';

package/dist/esm/compositional/popup-content.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useContext } from 'react';
 import { Layering } from '@atlaskit/layering/layering';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
@@ -18,13 +19,13 @@ var shouldDisableGpuAccelerationModifiers = [{
   }
 }];
 /**
- * __Popup content__
- *
- * Popup content is the component that renders the content of the popup.
+ * Legacy (Popper + Portal) implementation of the compositional PopupContent.
  *
- * It must be a child of the Popup component.
+ * Renders when the `platform-dst-top-layer` flag is off. This component owns
+ * the open layer observer registration, which on the top-layer path is handled
+ * by the `Popover` primitive inside `PopupContentTopLayer` instead.
  */
-export var PopupContent = function PopupContent(_ref) {
+function PopupContentLegacy(_ref) {
   var xcss = _ref.xcss,
     _ref$appearance = _ref.appearance,
     inAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
@@ -57,11 +58,9 @@ export var PopupContent = function PopupContent(_ref) {
     _ref$shouldDisableGpu = _ref.shouldDisableGpuAcceleration,
     shouldDisableGpuAcceleration = _ref$shouldDisableGpu === void 0 ? false : _ref$shouldDisableGpu,
     role = _ref.role,
-    label = _ref.label,
-    titleId = _ref.titleId;
-  useEnsureIsInsidePopup();
-  var isOpen = useContext(IsOpenContext);
-  var id = useContext(IdContext);
+    titleId = _ref.titleId,
+    isOpen = _ref.isOpen,
+    id = _ref.id;
   var triggerRef = useContext(TriggerRefContext);
   var _usePopupAppearance = usePopupAppearance({
       appearance: inAppearance,
@@ -72,50 +71,11 @@ export var PopupContent = function PopupContent(_ref) {
   var handleOpenLayerObserverCloseSignal = useCallback(function () {
     onClose === null || onClose === void 0 || onClose(null);
   }, [onClose]);
-
-  // On the top-layer path, the Popover 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 (!fg('platform-dst-top-layer')) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useNotifyOpenLayerObserver({
-      isOpen: isOpen,
-      onClose: handleOpenLayerObserverCloseSignal,
-      type: 'popup'
-    });
-  }
-
-  // Top-layer rendering path: native Popover API via @atlaskit/top-layer.
-  // Mirrors the FF branch in the legacy `Popup` component (popup.tsx).
-  if (fg('platform-dst-top-layer')) {
-    return /*#__PURE__*/React.createElement(PopupContentTopLayer, {
-      xcss: xcss,
-      appearance: inAppearance,
-      offset: offset,
-      onClose: onClose,
-      testId: testId,
-      placement: placement,
-      fallbackPlacements: fallbackPlacements,
-      popupComponent: popupComponent,
-      autoFocus: autoFocus,
-      shouldFitContainer: shouldFitContainer,
-      shouldFitViewport: shouldFitViewport,
-      role: role,
-      label: label,
-      titleId: titleId,
-      zIndex: zIndex,
-      shouldRenderToParent: inShouldRenderToParent,
-      strategy: strategy,
-      boundary: boundary,
-      rootBoundary: rootBoundary,
-      shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
-      shouldDisableFocusLock: shouldDisableFocusLock,
-      shouldFlip: shouldFlip,
-      shouldDisableGpuAcceleration: shouldDisableGpuAcceleration,
-      isOpen: isOpen,
-      id: id
-    }, children);
-  }
+  useNotifyOpenLayerObserver({
+    isOpen: isOpen,
+    onClose: handleOpenLayerObserverCloseSignal,
+    type: 'popup'
+  });
   if (!isOpen) {
     return null;
   }
@@ -155,4 +115,40 @@ export var PopupContent = function PopupContent(_ref) {
   return /*#__PURE__*/React.createElement(Portal, {
     zIndex: zIndex
   }, popperWrapper);
-};
+}
+
+/**
+ * __Popup content__
+ *
+ * Popup content is the component that renders the content of the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+export function PopupContent(props) {
+  useEnsureIsInsidePopup();
+  var isOpen = useContext(IsOpenContext);
+  var id = useContext(IdContext);
+
+  // Select the rendering implementation at the component boundary rather than
+  // gating hooks inside a single component. Each implementation owns its own
+  // hooks, so a runtime feature-flag change swaps component types (a clean
+  // remount) instead of changing the hook order of a mounted component.
+  //
+  // Forwarding the full props onto the chosen implementation is intentional:
+  // both implementations declare explicit prop types, so the forward is type
+  // checked rather than an unbounded API.
+  if (fg('platform-dst-top-layer')) {
+    // The top-layer Popover registers with the open layer observer itself.
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props -- intentional forward to a typed implementation
+    return /*#__PURE__*/React.createElement(PopupContentTopLayer, _extends({}, props, {
+      isOpen: isOpen,
+      id: id
+    }));
+  }
+
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props -- intentional forward to a typed implementation
+  return /*#__PURE__*/React.createElement(PopupContentLegacy, _extends({}, props, {
+    isOpen: isOpen,
+    id: id
+  }));
+}

package/dist/esm/popper-wrapper.js

@@ -1,4 +1,4 @@
-/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popper-wrapper.tsx generated by @compiled/babel-plugin v2.0.0 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

package/dist/esm/popup-top-layer.js

@@ -1,4 +1,4 @@
-/* popup-top-layer.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popup-top-layer.tsx generated by @compiled/babel-plugin v2.0.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./popup-top-layer.compiled.css";
 import * as React from 'react';

package/dist/esm/popup.js

@@ -1,4 +1,4 @@
-/* popup.tsx generated by @compiled/babel-plugin v0.40.0 */
+/* popup.tsx generated by @compiled/babel-plugin v2.0.0 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./popup.compiled.css";
 import * as React from 'react';
@@ -23,7 +23,7 @@ var defaultLayer = 400;
 var wrapperStyles = {
   root: "_kqswh2mm"
 };
-export var Popup = /*#__PURE__*/memo(function (props) {
+var PopupLegacy = function PopupLegacy(props) {
   var xcss = props.xcss,
     _props$appearance = props.appearance,
     inAppearance = _props$appearance === void 0 ? 'default' : _props$appearance,
@@ -81,25 +81,11 @@ export var Popup = /*#__PURE__*/memo(function (props) {
   var handleOpenLayerObserverCloseSignal = useCallback(function () {
     onClose === null || onClose === void 0 || onClose(null);
   }, [onClose]);
-
-  // On the top-layer path, the Popover 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 (!fg('platform-dst-top-layer')) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useNotifyOpenLayerObserver({
-      isOpen: isOpen,
-      onClose: handleOpenLayerObserverCloseSignal,
-      type: 'popup'
-    });
-  }
-
-  // Top-layer rendering path: native Popover API via @atlaskit/top-layer
-  if (fg('platform-dst-top-layer')) {
-    // Pass the original props object to preserve the discriminated union
-    // (shouldFitContainer: true vs false) that is lost after destructuring.
-    return /*#__PURE__*/React.createElement(PopupTopLayer, props);
-  }
+  useNotifyOpenLayerObserver({
+    isOpen: isOpen,
+    onClose: handleOpenLayerObserverCloseSignal,
+    type: 'popup'
+  });
 
   // `xcss` is part of Popup's public API and is forwarded as-is to
   // the internal PopperWrapper, which rebuilds the inner styles. We
@@ -163,4 +149,17 @@ export var Popup = /*#__PURE__*/memo(function (props) {
     }, popupContent);
   }
   return popupContent;
+};
+export var Popup = /*#__PURE__*/memo(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.
+  if (fg('platform-dst-top-layer')) {
+    // Pass the original props object to preserve the discriminated union
+    // (shouldFitContainer: true vs false) that is lost after destructuring.
+    return /*#__PURE__*/React.createElement(PopupTopLayer, props);
+  }
+  return /*#__PURE__*/React.createElement(PopupLegacy, props);
 });

package/dist/types/compositional/popup-content.d.ts

@@ -31,5 +31,5 @@ export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPo
  *
  * It must be a child of the Popup component.
  */
-export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldIgnoreCloseEvent, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, label, titleId, }: PopupContentProps) => React.JSX.Element | null;
+export declare function PopupContent(props: PopupContentProps): React.ReactNode;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "5.2.1",
+	"version": "5.2.3",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,12 +36,12 @@
 		"@atlaskit/layering": "^5.0.0",
 		"@atlaskit/motion": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
-		"@atlaskit/popper": "^8.4.0",
+		"@atlaskit/popper": "^8.5.0",
 		"@atlaskit/portal": "^6.1.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/tokens": "^16.3.0",
-		"@atlaskit/top-layer": "^2.0.0",
+		"@atlaskit/top-layer": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.0",
 		"bind-event-listener": "^3.0.0",
@@ -61,9 +61,9 @@
 		"@atlaskit/code": "^18.2.0",
 		"@atlaskit/docs": "^12.1.0",
 		"@atlaskit/form": "^16.1.0",
-		"@atlaskit/heading": "^6.2.0",
+		"@atlaskit/heading": "^7.0.0",
 		"@atlaskit/icon": "^37.2.0",
-		"@atlaskit/link": "^4.3.0",
+		"@atlaskit/link": "^5.0.0",
 		"@atlaskit/modal-dialog": "^16.2.0",
 		"@atlaskit/section-message": "^9.2.0",
 		"@atlaskit/textfield": "^9.1.0",