@atlaskit/popup 6.3.3 → 6.3.5

package/dist/es2019/compositional/trigger-ref-object-context.js

@@ -6,8 +6,8 @@ import { createContext } from 'react';
  * for the top-layer path. Unlike `TriggerRefContext` (which provides
  * `HTMLElement | null` as React state and causes a re-render when the trigger
  * mounts), this context provides a ref object whose identity is stable across
- * renders — allowing `useAnchorPosition` to receive a stable `anchorRef`
- * without needing to create a new ref wrapper on every `triggerRef` state change.
+ * renders — allowing `useAnchoredPopover` to receive a stable anchor ref without
+ * needing to create a new ref wrapper on every `triggerRef` state change.
  */
 export const TriggerRefObjectContext = /*#__PURE__*/createContext({
   current: null

package/dist/es2019/internal/get-popup-axis-sizes.js

@@ -0,0 +1,37 @@
+/**
+ * Maps the legacy `shouldFitContainer` / `shouldFitViewport` pair onto
+ * `useAnchoredPopover`'s per-axis sizes. Shared by the standard and the
+ * compositional adapter so the two cannot drift.
+ *
+ * Both props can be set together while `inlineSize` takes one value, so
+ * `shouldFitContainer` wins the inline axis, being the more specific request.
+ * Fitting then applies to the block axis only, and still turns the
+ * placement-axis floor on, so a cramped popup flips rather than letterboxing.
+ *
+ * Known cost on a `left-*` / `right-*` placement: the anchor floor is unclamped
+ * so it can drive the flip, and a min beats a max, so a trigger wider than the
+ * viewport is floored past the viewport cap. Not new, and not reconciled - see
+ * `@atlaskit/top-layer`'s `notes/decisions/width-from-anchor-floors.md`.
+ */
+export function getPopupAxisSizes({
+  shouldFitContainer,
+  shouldFitViewport
+}) {
+  const blockSize = shouldFitViewport ? 'max-available' : 'content';
+  if (shouldFitContainer) {
+    return {
+      inlineSize: 'match-anchor',
+      blockSize
+    };
+  }
+  if (shouldFitViewport) {
+    return {
+      inlineSize: 'max-available',
+      blockSize
+    };
+  }
+  return {
+    inlineSize: 'content',
+    blockSize
+  };
+}

package/dist/es2019/popper-wrapper.js

@@ -1,4 +1,4 @@
-/* popper-wrapper.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* popper-wrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
 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,6 +1,5 @@
-/* popup-top-layer.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* popup-top-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import "./popup-top-layer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, memo, useCallback, useEffect, useMemo, useRef } from 'react';
@@ -10,15 +9,10 @@ import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
 import { createPopoverCloseEvent } from '@atlaskit/top-layer/popover/create-close-event';
 import { Popover } from '@atlaskit/top-layer/popover/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
-import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
+import { useAnchoredPopover } from '@atlaskit/top-layer/use-anchored-popover';
 import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
-import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
+import { getPopupAxisSizes } from './internal/get-popup-axis-sizes';
 import { useRoleProps } from './internal/top-layer-bridge';
-const contentOverflowStyles = {
-  fitViewport: "_1reo1wug _18m91wug",
-  default: ""
-};
-
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 const EMPTY_STYLE = {};
 
@@ -81,8 +75,14 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
   // top-layer: focus trapping is role-based. shouldDisableFocusLock is a no-op.
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   shouldDisableFocusLock: _shouldDisableFocusLock,
-  // top-layer: shouldFitViewport is handled via overflow on content wrapper.
-  shouldFitViewport,
+  // top-layer: maps onto `'max-available'`, capping the popup to the space
+  // between the trigger and the viewport edge. `PopoverSurface` already owns
+  // `overflow: auto`, so the capped surface scrolls.
+  //
+  // Keep the explicit `false`: `undefined` previously reached an
+  // `isEnabled = true` default and silently enabled fitting for every popup
+  // that omitted the prop.
+  shouldFitViewport = false,
   // top-layer: appearance is accepted but UNSAFE_modal-below-sm is not yet implemented.
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   appearance: _appearance
@@ -159,17 +159,15 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
     legacy: placement,
     offset: offsetProp
   }), [placement, offsetProp]);
-  useAnchorPosition({
+  useAnchoredPopover({
     anchorRef: triggerRef,
     popoverRef,
     placement: topLayerPlacement,
-    isOpen
-  });
-  useWidthFromAnchor({
-    mode: shouldFitContainer ? 'match-anchor' : 'none',
-    popoverRef,
-    anchorRef: triggerRef,
-    isOpen
+    isOpen,
+    ...getPopupAxisSizes({
+      shouldFitContainer,
+      shouldFitViewport
+    })
   });
 
   // onClose bridge.
@@ -250,7 +248,20 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
     "data-testid": testId,
     tabIndex: autoFocus ? -1 : undefined,
     xcss: xcss
-  }, content(contentProps)) : /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
-    className: ax([contentOverflowStyles[shouldFitViewport ? 'fitViewport' : 'default']])
+    // Forwarded because several in-tree containers key their own
+    // `overflow: auto` branch off it.
+    ,
+    shouldFitViewport: shouldFitViewport
+  }, content(contentProps)) :
+  /*#__PURE__*/
+  // `PopoverSurface` owns `overflow: auto` and the `box-shadow` on the
+  // same element, so it is the scroll container. The wrapper exists only
+  // to carry the consumer's `xcss`: `PopoverSurface` exposes no
+  // `className` or `xcss` by design, so `xcss` lands on a CHILD of the
+  // surface. `width` works there; surface-level declarations apply one
+  // level in. Same shape as `compositional/popup-content-top-layer.tsx`.
+  React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: xcss
   }, content(contentProps)))));
 });

package/dist/es2019/popup.js

@@ -1,4 +1,4 @@
-/* popup.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* popup.tsx generated by @compiled/babel-plugin v3.0.1 */
 /* eslint-disable @repo/internal/react/require-jsdoc */
 import "./popup.compiled.css";
 import * as React from 'react';

package/dist/es2019/use-appearance.js

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
 
 /**
@@ -13,11 +14,18 @@ export function usePopupAppearance({
   appearance: _appearance,
   shouldRenderToParent: _shouldRenderToParent
 }) {
-  const mq = useMediaQuery('below.sm', e => {
+  const canBecomeModal = _appearance === 'UNSAFE_modal-below-sm';
+
+  /**
+   * This gate removes unnecessary state changes across the below-sm boundary
+   * The state change is only needed if the popup can become a modal - and this is maintained
+   */
+  const shouldUseMediaQuery = !fg('platform_dst_popup_media_query_perf_fix') || canBecomeModal;
+  const mq = useMediaQuery('below.sm', shouldUseMediaQuery ? e => {
     setIsSmallViewport(!!e.matches);
-  });
+  } : undefined);
   const [isSmallViewport, setIsSmallViewport] = useState(!!(mq !== null && mq !== void 0 && mq.matches));
-  const appearance = _appearance === 'UNSAFE_modal-below-sm' && isSmallViewport ? 'UNSAFE_modal-below-sm' : 'default';
+  const appearance = canBecomeModal && isSmallViewport ? 'UNSAFE_modal-below-sm' : 'default';
   const shouldRenderToParent = _shouldRenderToParent && appearance === 'default';
   return {
     appearance,

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

@@ -1,19 +1,20 @@
-/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import "./popup-content-top-layer.compiled.css";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
-import { ax, ix } from '@compiled/react/runtime';
 import noop from '@atlaskit/ds-lib/noop';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
 import { createPopoverCloseEvent } from '@atlaskit/top-layer/popover/create-close-event';
 import { Popover } from '@atlaskit/top-layer/popover/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
-import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
-import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
+import { useAnchoredPopover } from '@atlaskit/top-layer/use-anchored-popover';
+import { getPopupAxisSizes } from '../internal/get-popup-axis-sizes';
 import { useRoleProps } from '../internal/top-layer-bridge';
 import { TriggerRefObjectContext } from './trigger-ref-object-context';
-var overflowAutoStyles = null;
 
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 var EMPTY_STYLE = {};
@@ -38,8 +39,10 @@ export function PopupContentTopLayer(_ref) {
     PopupContainer = _ref.popupComponent,
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
-    shouldFitContainer = _ref.shouldFitContainer,
-    shouldFitViewport = _ref.shouldFitViewport,
+    _ref$shouldFitContain = _ref.shouldFitContainer,
+    shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
+    _ref$shouldFitViewpor = _ref.shouldFitViewport,
+    shouldFitViewport = _ref$shouldFitViewpor === void 0 ? false : _ref$shouldFitViewpor,
     role = _ref.role,
     label = _ref.label,
     titleId = _ref.titleId,
@@ -159,18 +162,15 @@ export function PopupContentTopLayer(_ref) {
 
   // `isOpen` is included so the anchor positioning effect re-runs when
   // the Popover host element is unmounted/remounted across open cycles.
-  useAnchorPosition({
+  useAnchoredPopover(_objectSpread({
     anchorRef: anchorRef,
     popoverRef: popoverRef,
     placement: topLayerPlacement,
     isOpen: isOpen
-  });
-  useWidthFromAnchor({
-    mode: shouldFitContainer ? 'match-anchor' : 'none',
-    popoverRef: popoverRef,
-    anchorRef: anchorRef,
-    isOpen: isOpen
-  });
+  }, getPopupAxisSizes({
+    shouldFitContainer: shouldFitContainer,
+    shouldFitViewport: shouldFitViewport
+  })));
 
   // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
   // All popupComponent implementations use forwardRef per the PopupComponentProps contract.
@@ -190,8 +190,20 @@ export function PopupContentTopLayer(_ref) {
     "data-testid": testId,
     tabIndex: autoFocus ? -1 : undefined,
     xcss: xcss
-  }, children(contentProps)) : /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
+    // Forwarded because several in-tree containers key their own
+    // `overflow: auto` branch off it.
+    ,
+    shouldFitViewport: shouldFitViewport
+  }, children(contentProps)) :
+  /*#__PURE__*/
+  // `PopoverSurface` owns `overflow: auto` and the `box-shadow` on the
+  // same element, so it is the scroll container. The wrapper exists only
+  // to carry the consumer's `xcss`: `PopoverSurface` exposes no
+  // `className` or `xcss` by design, so `xcss` lands on a CHILD of the
+  // surface. `width` works there; surface-level declarations apply one
+  // level in. Same shape as `../popup-top-layer.tsx`.
+  React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: ax([shouldFitViewport && "_1reo1wug _18m91wug", ax([xcss])])
+    className: xcss
   }, children(contentProps))));
 }

package/dist/esm/compositional/popup.js

@@ -43,7 +43,7 @@ export var Popup = function Popup(_ref) {
   // When the top-layer flag is on, we maintain a stable RefObject for the
   // trigger element, provided through TriggerRefObjectContext. Unlike the
   // state-based triggerRef (which causes a re-render when the trigger mounts),
-  // this ref has a stable identity so useAnchorPosition's useLayoutEffect dep
+  // this ref has a stable identity so useAnchoredPopover's useLayoutEffect dep
   // array never changes — the effect runs once on mount when the trigger element
   // is already populated. PopupTrigger sets this ref directly instead of calling
   // the state setter, avoiding an unnecessary re-render.

package/dist/esm/compositional/trigger-ref-object-context.js

@@ -6,8 +6,8 @@ import { createContext } from 'react';
  * for the top-layer path. Unlike `TriggerRefContext` (which provides
  * `HTMLElement | null` as React state and causes a re-render when the trigger
  * mounts), this context provides a ref object whose identity is stable across
- * renders — allowing `useAnchorPosition` to receive a stable `anchorRef`
- * without needing to create a new ref wrapper on every `triggerRef` state change.
+ * renders — allowing `useAnchoredPopover` to receive a stable anchor ref without
+ * needing to create a new ref wrapper on every `triggerRef` state change.
  */
 export var TriggerRefObjectContext = /*#__PURE__*/createContext({
   current: null

package/dist/esm/internal/get-popup-axis-sizes.js

@@ -0,0 +1,36 @@
+/**
+ * Maps the legacy `shouldFitContainer` / `shouldFitViewport` pair onto
+ * `useAnchoredPopover`'s per-axis sizes. Shared by the standard and the
+ * compositional adapter so the two cannot drift.
+ *
+ * Both props can be set together while `inlineSize` takes one value, so
+ * `shouldFitContainer` wins the inline axis, being the more specific request.
+ * Fitting then applies to the block axis only, and still turns the
+ * placement-axis floor on, so a cramped popup flips rather than letterboxing.
+ *
+ * Known cost on a `left-*` / `right-*` placement: the anchor floor is unclamped
+ * so it can drive the flip, and a min beats a max, so a trigger wider than the
+ * viewport is floored past the viewport cap. Not new, and not reconciled - see
+ * `@atlaskit/top-layer`'s `notes/decisions/width-from-anchor-floors.md`.
+ */
+export function getPopupAxisSizes(_ref) {
+  var shouldFitContainer = _ref.shouldFitContainer,
+    shouldFitViewport = _ref.shouldFitViewport;
+  var blockSize = shouldFitViewport ? 'max-available' : 'content';
+  if (shouldFitContainer) {
+    return {
+      inlineSize: 'match-anchor',
+      blockSize: blockSize
+    };
+  }
+  if (shouldFitViewport) {
+    return {
+      inlineSize: 'max-available',
+      blockSize: blockSize
+    };
+  }
+  return {
+    inlineSize: 'content',
+    blockSize: blockSize
+  };
+}

package/dist/esm/popper-wrapper.js

@@ -1,4 +1,4 @@
-/* popper-wrapper.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* popper-wrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
 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,8 +1,10 @@
-/* popup-top-layer.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* popup-top-layer.tsx generated by @compiled/babel-plugin v3.0.1 */
 import _extends from "@babel/runtime/helpers/extends";
-import "./popup-top-layer.compiled.css";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Fragment, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
@@ -10,15 +12,10 @@ import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
 import { createPopoverCloseEvent } from '@atlaskit/top-layer/popover/create-close-event';
 import { Popover } from '@atlaskit/top-layer/popover/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
-import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
+import { useAnchoredPopover } from '@atlaskit/top-layer/use-anchored-popover';
 import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
-import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
+import { getPopupAxisSizes } from './internal/get-popup-axis-sizes';
 import { useRoleProps } from './internal/top-layer-bridge';
-var contentOverflowStyles = {
-  fitViewport: "_1reo1wug _18m91wug",
-  default: ""
-};
-
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 var EMPTY_STYLE = {};
 
@@ -65,7 +62,8 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     _rootBoundary = _ref.rootBoundary,
     _shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
     _shouldDisableFocusLock = _ref.shouldDisableFocusLock,
-    shouldFitViewport = _ref.shouldFitViewport,
+    _ref$shouldFitViewpor = _ref.shouldFitViewport,
+    shouldFitViewport = _ref$shouldFitViewpor === void 0 ? false : _ref$shouldFitViewpor,
     _appearance = _ref.appearance;
   var triggerRef = useRef(null);
   var popoverRef = useRef(null);
@@ -140,18 +138,15 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
       offset: offsetProp
     });
   }, [placement, offsetProp]);
-  useAnchorPosition({
+  useAnchoredPopover(_objectSpread({
     anchorRef: triggerRef,
     popoverRef: popoverRef,
     placement: topLayerPlacement,
     isOpen: isOpen
-  });
-  useWidthFromAnchor({
-    mode: shouldFitContainer ? 'match-anchor' : 'none',
-    popoverRef: popoverRef,
-    anchorRef: triggerRef,
-    isOpen: isOpen
-  });
+  }, getPopupAxisSizes({
+    shouldFitContainer: shouldFitContainer,
+    shouldFitViewport: shouldFitViewport
+  })));
 
   // onClose bridge.
   // Translates top-layer's { reason: TPopoverCloseReason } into legacy
@@ -232,7 +227,20 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     "data-testid": testId,
     tabIndex: autoFocus ? -1 : undefined,
     xcss: xcss
-  }, content(contentProps)) : /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
-    className: ax([contentOverflowStyles[shouldFitViewport ? 'fitViewport' : 'default']])
+    // Forwarded because several in-tree containers key their own
+    // `overflow: auto` branch off it.
+    ,
+    shouldFitViewport: shouldFitViewport
+  }, content(contentProps)) :
+  /*#__PURE__*/
+  // `PopoverSurface` owns `overflow: auto` and the `box-shadow` on the
+  // same element, so it is the scroll container. The wrapper exists only
+  // to carry the consumer's `xcss`: `PopoverSurface` exposes no
+  // `className` or `xcss` by design, so `xcss` lands on a CHILD of the
+  // surface. `width` works there; surface-level declarations apply one
+  // level in. Same shape as `compositional/popup-content-top-layer.tsx`.
+  React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: xcss
   }, content(contentProps)))));
 });

package/dist/esm/popup.js

@@ -1,4 +1,4 @@
-/* popup.tsx generated by @compiled/babel-plugin v2.0.0 */
+/* popup.tsx generated by @compiled/babel-plugin v3.0.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./popup.compiled.css";
 import * as React from 'react';

package/dist/esm/use-appearance.js

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/compiled';
 
 /**
@@ -13,14 +14,21 @@ import { UNSAFE_useMediaQuery as useMediaQuery } from '@atlaskit/primitives/comp
 export function usePopupAppearance(_ref) {
   var _appearance = _ref.appearance,
     _shouldRenderToParent = _ref.shouldRenderToParent;
-  var mq = useMediaQuery('below.sm', function (e) {
+  var canBecomeModal = _appearance === 'UNSAFE_modal-below-sm';
+
+  /**
+   * This gate removes unnecessary state changes across the below-sm boundary
+   * The state change is only needed if the popup can become a modal - and this is maintained
+   */
+  var shouldUseMediaQuery = !fg('platform_dst_popup_media_query_perf_fix') || canBecomeModal;
+  var mq = useMediaQuery('below.sm', shouldUseMediaQuery ? function (e) {
     setIsSmallViewport(!!e.matches);
-  });
+  } : undefined);
   var _useState = useState(!!(mq !== null && mq !== void 0 && mq.matches)),
     _useState2 = _slicedToArray(_useState, 2),
     isSmallViewport = _useState2[0],
     setIsSmallViewport = _useState2[1];
-  var appearance = _appearance === 'UNSAFE_modal-below-sm' && isSmallViewport ? 'UNSAFE_modal-below-sm' : 'default';
+  var appearance = canBecomeModal && isSmallViewport ? 'UNSAFE_modal-below-sm' : 'default';
   var shouldRenderToParent = _shouldRenderToParent && appearance === 'default';
   return {
     appearance: appearance,

package/dist/types/compositional/trigger-ref-object-context.d.ts

@@ -4,7 +4,7 @@ import { type Context, type MutableRefObject } from 'react';
  * for the top-layer path. Unlike `TriggerRefContext` (which provides
  * `HTMLElement | null` as React state and causes a re-render when the trigger
  * mounts), this context provides a ref object whose identity is stable across
- * renders — allowing `useAnchorPosition` to receive a stable `anchorRef`
- * without needing to create a new ref wrapper on every `triggerRef` state change.
+ * renders — allowing `useAnchoredPopover` to receive a stable anchor ref without
+ * needing to create a new ref wrapper on every `triggerRef` state change.
  */
 export declare const TriggerRefObjectContext: Context<MutableRefObject<HTMLElement | null>>;

package/dist/types/internal/get-popup-axis-sizes.d.ts

@@ -0,0 +1,25 @@
+import type { TAnchoredPopoverOptions } from '@atlaskit/top-layer/use-anchored-popover';
+type TPopupAxisSize = NonNullable<TAnchoredPopoverOptions['inlineSize']>;
+/**
+ * Maps the legacy `shouldFitContainer` / `shouldFitViewport` pair onto
+ * `useAnchoredPopover`'s per-axis sizes. Shared by the standard and the
+ * compositional adapter so the two cannot drift.
+ *
+ * Both props can be set together while `inlineSize` takes one value, so
+ * `shouldFitContainer` wins the inline axis, being the more specific request.
+ * Fitting then applies to the block axis only, and still turns the
+ * placement-axis floor on, so a cramped popup flips rather than letterboxing.
+ *
+ * Known cost on a `left-*` / `right-*` placement: the anchor floor is unclamped
+ * so it can drive the flip, and a min beats a max, so a trigger wider than the
+ * viewport is floored past the viewport cap. Not new, and not reconciled - see
+ * `@atlaskit/top-layer`'s `notes/decisions/width-from-anchor-floors.md`.
+ */
+export declare function getPopupAxisSizes({ shouldFitContainer, shouldFitViewport, }: {
+    shouldFitContainer: boolean;
+    shouldFitViewport: boolean;
+}): {
+    inlineSize: TPopupAxisSize;
+    blockSize: TPopupAxisSize;
+};
+export {};

package/dist/types/types.d.ts

@@ -46,6 +46,36 @@ export interface ContentProps {
      */
     setInitialFocusRef: Dispatch<SetStateAction<HTMLElement | null>>;
 }
+/**
+ * Props passed to a custom `popupComponent`, which renders as the popup container in
+ * place of the default surface.
+ *
+ * **Contract on the top-layer path (`platform-dst-top-layer`).** The container is
+ * the first child of a `display: flex` popover host whose `& > *` rule sets
+ * `flex-grow: 1`, `min-inline-size: 0` and `min-block-size: 0`. A size cap
+ * (`shouldFitViewport`, or the always-on viewport backstop) reaches the content only
+ * through that first child, so a container has to:
+ *
+ * 1. Render exactly one in-flow root. A second in-flow root becomes a second flex
+ *    item, laid out in a row beside the first.
+ * 2. Keep that root in flow, not `position: absolute` or `fixed`. An out-of-flow root
+ *    is not a flex item, so `flex-grow` and cross-axis stretch never reach it.
+ * 3. Give the root ITSELF a non-`visible` computed `overflow`, so it is the scroll
+ *    container. The `min-*-size: 0` reset caps the root's box whatever its
+ *    `overflow` is; a `visible` root's content spills out of a correctly-sized box
+ *    instead of scrolling.
+ * 4. Leave the block size `auto`, so cross-axis stretch can size it.
+ * 5. Not pin the inline size above the cap, and not set `flex-shrink: 0`.
+ * 6. Put the `overflow` on the root, not on a descendant. `& > *` reaches one level.
+ *
+ * `shouldFitViewport` is forwarded on both paths, so the container can own its
+ * `overflow` (several in-tree containers key an `overflow: auto` branch off it).
+ *
+ * `shouldRenderToParent` is NOT forwarded on the top-layer path, by decision:
+ * everything renders in the top layer, so the container receives `undefined`, and a
+ * `(!shouldRenderToParent || shouldFitViewport)` branch reads as "fitting applies",
+ * which is the intended reading there.
+ */
 export interface PopupComponentProps {
     /**
      * Children passed through by the parent popup.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "6.3.3",
+	"version": "6.3.5",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,8 +40,8 @@
 		"@atlaskit/portal": "^6.4.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^16.11.0",
-		"@atlaskit/top-layer": "^4.4.0",
+		"@atlaskit/tokens": "^16.12.0",
+		"@atlaskit/top-layer": "^5.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",
@@ -60,11 +60,12 @@
 		"@atlaskit/banner": "^15.3.0",
 		"@atlaskit/button": "^25.3.0",
 		"@atlaskit/code": "^19.2.0",
+		"@atlaskit/datetime-picker": "^18.7.0",
 		"@atlaskit/docs": "^12.2.0",
 		"@atlaskit/dropdown-menu": "^18.3.0",
 		"@atlaskit/form": "^17.2.0",
 		"@atlaskit/heading": "^7.2.0",
-		"@atlaskit/icon": "^37.6.0",
+		"@atlaskit/icon": "^37.7.0",
 		"@atlaskit/link": "^5.1.0",
 		"@atlaskit/menu": "^10.2.0",
 		"@atlaskit/modal-dialog": "^16.6.0",
@@ -78,6 +79,7 @@
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@atlassian/testing-library": "^0.11.0",
+		"@atlassian/workbench": "workspace:*",
 		"ast-types": "^0.13.3",
 		"jscodeshift": "^17.0.0",
 		"raf-stub": "^2.0.1",
@@ -116,6 +118,9 @@
 		},
 		"platform_dst-popup-trigger-initial-focus-ref": {
 			"type": "boolean"
+		},
+		"platform_dst_popup_media_query_perf_fix": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/popup/"

package/dist/cjs/compositional/popup-content-top-layer.compiled.css

@@ -1,2 +0,0 @@
-._18m91wug{overflow-y:auto}
-._1reo1wug{overflow-x:auto}

package/dist/cjs/popup-top-layer.compiled.css

@@ -1,2 +0,0 @@
-._18m91wug{overflow-y:auto}
-._1reo1wug{overflow-x:auto}

package/dist/es2019/compositional/popup-content-top-layer.compiled.css

@@ -1,2 +0,0 @@
-._18m91wug{overflow-y:auto}
-._1reo1wug{overflow-x:auto}

package/dist/es2019/popup-top-layer.compiled.css

@@ -1,2 +0,0 @@
-._18m91wug{overflow-y:auto}
-._1reo1wug{overflow-x:auto}

package/dist/esm/compositional/popup-content-top-layer.compiled.css

@@ -1,2 +0,0 @@
-._18m91wug{overflow-y:auto}
-._1reo1wug{overflow-x:auto}

package/dist/esm/popup-top-layer.compiled.css

@@ -1,2 +0,0 @@
-._18m91wug{overflow-y:auto}
-._1reo1wug{overflow-x:auto}