@atlaskit/top-layer 0.6.2 → 0.7.0

package/dist/esm/internal/use-width-from-anchor.js

@@ -0,0 +1,102 @@
+import { useLayoutEffect } from 'react';
+import { setStyle } from './set-style';
+
+/**
+ * Sets the width of a popover element relative to its anchor element.
+ *
+ * - `'match-anchor'` → `width: anchor-size(width)` — popover matches anchor width exactly.
+ * - `'min-anchor'`   → `min-width: anchor-size(width)` — popover is at least as wide as anchor,
+ *   but can grow wider.
+ * - `'none'`         → no explicit width is set (default behaviour)
+ *
+ * Uses CSS `anchor-size(width)` when the browser supports it, falling back to a
+ * one-off measurement of `anchor.offsetWidth`.
+ *
+ * Designed to be composed alongside `useAnchorPosition` for top-layer popovers.
+ */
+export function useWidthFromAnchor(_ref) {
+  var mode = _ref.mode,
+    popoverRef = _ref.popoverRef,
+    anchorRef = _ref.anchorRef;
+  useLayoutEffect(function () {
+    var node = popoverRef.current;
+    if (!node) {
+      return;
+    }
+
+    // Feature-detect `anchor-size()` specifically (not just `anchor-name`)
+    // so the JS fallback fires correctly in browsers that support anchor
+    // positioning but not anchor sizing.
+    var supportsAnchorSize = typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('width', 'anchor-size(width)');
+    if (mode === 'match-anchor') {
+      // Set an exact width matching the anchor.
+      // `min-inline-size` is intentionally NOT set here — it would override the
+      // explicit width constraint, allowing the popover to grow past the anchor's width.
+      if (supportsAnchorSize) {
+        return setStyle({
+          el: node,
+          styles: [{
+            property: 'width',
+            value: 'anchor-size(width)'
+          }]
+        });
+      }
+
+      // JS fallback: one-off read of the anchor's width.
+      var anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+      if (anchor) {
+        return setStyle({
+          el: node,
+          styles: [{
+            property: 'width',
+            value: "".concat(anchor.offsetWidth, "px")
+          }]
+        });
+      }
+      return;
+    }
+
+    // For 'min-anchor' and 'none', apply `min-inline-size: max-content` to ensure
+    // correct position-try-fallbacks behaviour (popover margin box overflows the
+    // viewport when its span region is too narrow, rather than wrapping content).
+    var minInlineSizeStyle = {
+      property: 'min-inline-size',
+      value: 'max-content'
+    };
+    if (mode === 'min-anchor') {
+      // Set a minimum width matching the anchor. The popover can grow wider
+      // if its content requires it.
+      if (supportsAnchorSize) {
+        return setStyle({
+          el: node,
+          styles: [minInlineSizeStyle, {
+            property: 'min-width',
+            value: 'anchor-size(width)'
+          }]
+        });
+      }
+      var _anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+      if (_anchor) {
+        return setStyle({
+          el: node,
+          styles: [minInlineSizeStyle, {
+            property: 'min-width',
+            value: "".concat(_anchor.offsetWidth, "px")
+          }]
+        });
+      }
+
+      // No anchor available in JS fallback — still apply min-inline-size.
+      return setStyle({
+        el: node,
+        styles: [minInlineSizeStyle]
+      });
+    }
+
+    // 'none' mode: no explicit width, but still apply `min-inline-size: max-content`.
+    return setStyle({
+      el: node,
+      styles: [minInlineSizeStyle]
+    });
+  }, [mode, popoverRef, anchorRef]);
+}

package/dist/esm/popover/popover.js

@@ -35,7 +35,9 @@ var styles = {
  * Unopinionated top-layer primitive.
  *
  * Manages only visibility (isOpen) and animation (animate). Has no knowledge
- * of positioning — compose with `useAnchorPosition` for anchor positioning.
+ * of positioning — compose with `useAnchorPosition` for anchor positioning
+ * and optionally `useWidthFromAnchor` for setting the width of a popover element
+ * relative to its anchor trigger.
  *
  * Visibility is driven by the `isOpen` prop:
  * - `isOpen={true}` → `showPopover()`, entry animation via `@starting-style`
@@ -117,21 +119,21 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
   // the browser processes light dismiss), read in the toggle handler.
   var closeReasonRef = useRef('light-dismiss');
   var handleToggle = useCallback(function (event) {
-    var el = ownRef.current;
+    var element = ownRef.current;
     if (event.newState === 'open') {
-      if (el) {
+      if (element) {
         onOpenChange === null || onOpenChange === void 0 || onOpenChange({
           isOpen: true,
-          element: el
+          element: element
         });
       }
       return;
     }
     if (event.newState === 'closed') {
-      if (el) {
+      if (element) {
         onOpenChange === null || onOpenChange === void 0 || onOpenChange({
           isOpen: false,
-          element: el
+          element: element
         });
       }
 
@@ -149,13 +151,13 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
     }
   }, [onClose, onOpenChange]);
   useEffect(function () {
-    var el = ownRef.current;
-    if (!el) {
+    var element = ownRef.current;
+    if (!element) {
       return;
     }
 
     // Capture-phase: tag Escape before the browser processes light dismiss.
-    var unbindEscape = bind(el, {
+    var unbindEscape = bind(element, {
       type: 'keydown',
       listener: function listener(event) {
         if (event.key === 'Escape') {
@@ -166,7 +168,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
         capture: true
       }
     });
-    var unbindToggle = bind(el, {
+    var unbindToggle = bind(element, {
       type: 'toggle',
       listener: handleToggle
     });

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

@@ -6,12 +6,13 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { roleToAriaHasPopup } from '../internal/role-types';
 import { useAnchorPosition } from '../internal/use-anchor-position';
 import { usePresetStyles } from '../internal/use-preset-styles';
+import { useWidthFromAnchor } from '../internal/use-width-from-anchor';
 import { Popover } from '../popover/popover';
 import { useMaybePopupContext } from './popup-context';
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
- * Used inside the `<Popup>` compound — reads triggerRef, placement, isOpen,
+ * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
  * and onClose from context. For standalone usage (tooltip, spotlight, flag),
  * use `Popover` + `useAnchorPosition` directly.
  */
@@ -24,8 +25,8 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
     animate = _ref.animate,
     arrow = _ref.arrow,
     mode = _ref.mode,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 'content' : _ref$width,
+    _ref$widthFromAnchor = _ref.widthFromAnchor,
+    widthFromAnchor = _ref$widthFromAnchor === void 0 ? 'none' : _ref$widthFromAnchor,
     xcss = _ref.xcss,
     isOpenProp = _ref.isOpen,
     triggerRefProp = _ref.triggerRef,
@@ -88,7 +89,7 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
     // ── Nested popover focus restoration fallback ──
     // The browser only captures `previouslyFocusedElement` for the
     // outermost popover="auto" in the stack. Inner (nested) popovers
-    // have shouldRestoreFocus=false, so the browser won't restore
+    // have shouldRestoreFocus=false, so the browser will not restore
     // focus when they close.
     //
     // We detect this case by checking if focus is still inside the
@@ -131,39 +132,11 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
     forceFallbackPositioning: forceFallbackPositioning,
     arrow: arrowPreset !== null && arrowPreset !== void 0 ? arrowPreset : undefined
   });
-
-  // ── Width: match trigger ──
-  // When width="trigger" or width="min-trigger", size the popover relative
-  // to the trigger element. Uses CSS `anchor-size(width)` when supported,
-  // falling back to a one-off measurement of the trigger's offsetWidth.
-  useLayoutEffect(function () {
-    if (width === 'content') {
-      return;
-    }
-    var node = popoverRef.current;
-    if (!node) {
-      return;
-    }
-    var cssProperty = width === 'trigger' ? 'width' : 'min-width';
-    var anchorValue = 'anchor-size(width)';
-
-    // Feature-detect `anchor-size()` specifically (not just `anchor-name`)
-    // so the JS fallback fires correctly in browsers that support anchor
-    // positioning but not anchor sizing.
-    var supportsAnchorSize = typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('width', 'anchor-size(width)');
-    if (supportsAnchorSize) {
-      node.style.setProperty(cssProperty, anchorValue);
-    } else {
-      // JS fallback: one-off read of the trigger's width.
-      var trigger = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current;
-      if (trigger) {
-        node.style.setProperty(cssProperty, "".concat(trigger.offsetWidth, "px"));
-      }
-    }
-    return function () {
-      node.style.removeProperty(cssProperty);
-    };
-  }, [width, popoverRef, triggerRef]);
+  useWidthFromAnchor({
+    mode: widthFromAnchor,
+    popoverRef: popoverRef,
+    anchorRef: triggerRef
+  });
 
   // Merge: the popoverRef (shared with trigger + positioning) and the forwarded ref.
   var combinedRef = mergeRefs([popoverRef, ref]);

package/dist/esm/popup/popup-trigger.js

@@ -18,7 +18,7 @@ import { usePopupContext } from './popup-context';
  * from opening.
  *
  * If you need Compiled `css` on the trigger, use `Popup.TriggerFunction`
- * instead — it hands you raw props via a render-prop and avoids
+ * instead - it hands you raw props via a render-prop and avoids
  * `cloneElement` entirely.
  */
 export function PopupTrigger(_ref) {
@@ -32,7 +32,7 @@ export function PopupTrigger(_ref) {
   var childOnClick = /*#__PURE__*/isValidElement(children) ? children.props.onClick : undefined;
 
   // Use a ref to track the latest isOpen value so the click handler
-  // doesn't need isOpen in its dependency array (which would recreate
+  // does not need isOpen in its dependency array (which would recreate
   // the handler on every open/close, breaking cloneElement identity).
   var isOpenRef = React.useRef(isOpen);
   isOpenRef.current = isOpen;

package/dist/esm/use-simple-light-dismiss/index.js

@@ -20,7 +20,7 @@ export function useSimpleLightDismiss(_ref) {
   var popoverRef = _ref.popoverRef,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose;
-  // Keep a stable ref to onClose so the effect doesn't re-bind on every render.
+  // Keep a stable ref to onClose so the effect does not re-bind on every render.
   var onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
   useEffect(function () {

package/dist/types/entry-points/use-width-from-anchor.d.ts

@@ -0,0 +1 @@
+export { useWidthFromAnchor } from '../internal/use-width-from-anchor';

package/dist/types/internal/use-anchor-position.d.ts

@@ -132,7 +132,7 @@ export declare function useAnchorPosition({ anchorRef, popoverRef, placement, fo
      * the preset's named `@position-try` rules (which update both
      * `position-area` and `margin` on flip) and sets `--ds-arrow-size`.
      *
-     * Pass `null` to disable. Has no effect in the JS fallback path —
+     * Pass `null` to disable. Has no effect in the JS fallback path -
      * arrows are CSS-only.
      */
     arrow?: TArrowPreset | null;

package/dist/types/internal/use-focus-wrap.d.ts

@@ -8,7 +8,7 @@ import { type RefObject } from 'react';
  * elements within the container using wrapping navigation.
  *
  * Light dismiss (Escape, click outside) continues to work natively
- * via `popover="auto"` — this hook only intercepts Tab.
+ * via `popover="auto"` - this hook only intercepts Tab.
  *
  * Always call this hook unconditionally. The listener is only
  * attached when the role requires focus wrapping, and is cleaned

package/dist/types/internal/use-width-from-anchor.d.ts

@@ -0,0 +1,20 @@
+import { type RefObject } from 'react';
+import type { TWidthFromAnchorMode } from '../popover/types';
+/**
+ * Sets the width of a popover element relative to its anchor element.
+ *
+ * - `'match-anchor'` → `width: anchor-size(width)` — popover matches anchor width exactly.
+ * - `'min-anchor'`   → `min-width: anchor-size(width)` — popover is at least as wide as anchor,
+ *   but can grow wider.
+ * - `'none'`         → no explicit width is set (default behaviour)
+ *
+ * Uses CSS `anchor-size(width)` when the browser supports it, falling back to a
+ * one-off measurement of `anchor.offsetWidth`.
+ *
+ * Designed to be composed alongside `useAnchorPosition` for top-layer popovers.
+ */
+export declare function useWidthFromAnchor({ mode, popoverRef, anchorRef, }: {
+    mode: TWidthFromAnchorMode;
+    popoverRef: RefObject<HTMLElement | null>;
+    anchorRef: RefObject<HTMLElement | null> | undefined;
+}): void;

package/dist/types/popover/popover.d.ts

@@ -8,7 +8,9 @@ import { type TPopoverForwardedProps } from './types';
  * Unopinionated top-layer primitive.
  *
  * Manages only visibility (isOpen) and animation (animate). Has no knowledge
- * of positioning — compose with `useAnchorPosition` for anchor positioning.
+ * of positioning — compose with `useAnchorPosition` for anchor positioning
+ * and optionally `useWidthFromAnchor` for setting the width of a popover element
+ * relative to its anchor trigger.
  *
  * Visibility is driven by the `isOpen` prop:
  * - `isOpen={true}` → `showPopover()`, entry animation via `@starting-style`

package/dist/types/popover/types.d.ts

@@ -157,4 +157,17 @@ export type TPopoverProps = TPopoverBaseProps & TAriaRoleOptional & ({
     mode: 'manual';
     onClose?: never;
 });
+/**
+ * The width mode of the popover relative to its anchor element.
+ *
+ * - `'none'` (default): popover sizes to its content, ignoring the anchor width.
+ * - `'match-anchor'`: popover matches the anchor element's width exactly
+ *   via CSS `anchor-size(width)`. Falls back to a one-off measurement
+ *   of `anchorRef.current.offsetWidth` when CSS Anchor Positioning
+ *   is not supported.
+ * - `'min-anchor'`: popover is at least as wide as the anchor, but
+ *   can grow wider if content requires it. Uses `min-width: anchor-size(width)`.
+ *   Falls back to a one-off measurement of the anchor's width.
+ */
+export type TWidthFromAnchorMode = 'none' | 'match-anchor' | 'min-anchor';
 export {};

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

@@ -7,7 +7,7 @@ import { type TPopupContentProps } from './types';
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
- * Used inside the `<Popup>` compound — reads triggerRef, placement, isOpen,
+ * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
  * and onClose from context. For standalone usage (tooltip, spotlight, flag),
  * use `Popover` + `useAnchorPosition` directly.
  */

package/dist/types/popup/popup-trigger.d.ts

@@ -17,7 +17,7 @@ import { type TPopupTriggerProps } from './types';
  * from opening.
  *
  * If you need Compiled `css` on the trigger, use `Popup.TriggerFunction`
- * instead — it hands you raw props via a render-prop and avoids
+ * instead - it hands you raw props via a render-prop and avoids
  * `cloneElement` entirely.
  */
 export declare function PopupTrigger({ children }: TPopupTriggerProps): ReactNode;

package/dist/types/popup/types.d.ts

@@ -4,7 +4,7 @@ import { type TAnimationPreset } from '../animations/types';
 import { type TArrowPreset } from '../arrow/types';
 import { type TPlacementOptions } from '../internal/resolve-placement';
 import { type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
-import { type TPopoverCloseReason } from '../popover/types';
+import { type TPopoverCloseReason, type TWidthFromAnchorMode } from '../popover/types';
 /**
  * Describes where to position a popover relative to its trigger. All fields
  * are optional. The default `{}` means "below the trigger, centered, with a
@@ -115,18 +115,18 @@ type TPopupContentBaseProps = {
      */
     ref?: Ref<HTMLDivElement>;
     /**
-     * Controls the width of the popover.
+     * Controls the width of the popover relative to its anchor element.
      *
-     * - `'content'` (default): popover sizes to its content.
-     * - `'trigger'`: popover matches the trigger element's width exactly
+     * - `'none'` (default): popover sizes to its content, ignoring the anchor width.
+     * - `'match-anchor'`: popover matches the anchor element's width exactly
      *   via CSS `anchor-size(width)`. Falls back to a one-off measurement
-     *   of `triggerRef.current.offsetWidth` when CSS Anchor Positioning
+     *   of `anchorRef.current.offsetWidth` when CSS Anchor Positioning
      *   is not supported.
-     * - `'min-trigger'`: popover is at least as wide as the trigger, but
+     * - `'min-anchor'`: popover is at least as wide as the anchor, but
      *   can grow wider if content requires it. Uses `min-width: anchor-size(width)`.
-     *   Falls back to a one-off measurement of the trigger's width.
+     *   Falls back to a one-off measurement of the anchor's width.
      */
-    width?: 'content' | 'trigger' | 'min-trigger';
+    widthFromAnchor?: TWidthFromAnchorMode;
     /**
      * Applies additional CSS styles to the popover root element using
      * design-system-safe xcss.

package/dist/types/use-simple-light-dismiss/index.d.ts

@@ -13,12 +13,12 @@ type TUseSimpleLightDismissOptions = {
     /**
      * Called when a light-dismiss event occurs.
      *
-     * - `reason: 'escape'` — the user pressed the Escape key.
-     * - `reason: 'light-dismiss'` — the user clicked outside the popover.
+     * - `reason: 'escape'` - the user pressed the Escape key.
+     * - `reason: 'light-dismiss'` - the user clicked outside the popover.
      *
      * **Note:** This hook provides simple, standalone light dismiss that does not
      * participate in the browser's `popover="auto"` dismiss stack. Every active
-     * instance will fire independently — if multiple popovers use this hook,
+     * instance will fire independently - if multiple popovers use this hook,
      * they will all receive dismiss events.
      */
     onClose: (args: {

package/dist/types-ts4.5/entry-points/use-width-from-anchor.d.ts

@@ -0,0 +1 @@
+export { useWidthFromAnchor } from '../internal/use-width-from-anchor';

package/dist/types-ts4.5/internal/use-anchor-position.d.ts

@@ -132,7 +132,7 @@ export declare function useAnchorPosition({ anchorRef, popoverRef, placement, fo
      * the preset's named `@position-try` rules (which update both
      * `position-area` and `margin` on flip) and sets `--ds-arrow-size`.
      *
-     * Pass `null` to disable. Has no effect in the JS fallback path —
+     * Pass `null` to disable. Has no effect in the JS fallback path -
      * arrows are CSS-only.
      */
     arrow?: TArrowPreset | null;

package/dist/types-ts4.5/internal/use-focus-wrap.d.ts

@@ -8,7 +8,7 @@ import { type RefObject } from 'react';
  * elements within the container using wrapping navigation.
  *
  * Light dismiss (Escape, click outside) continues to work natively
- * via `popover="auto"` — this hook only intercepts Tab.
+ * via `popover="auto"` - this hook only intercepts Tab.
  *
  * Always call this hook unconditionally. The listener is only
  * attached when the role requires focus wrapping, and is cleaned

package/dist/types-ts4.5/internal/use-width-from-anchor.d.ts

@@ -0,0 +1,20 @@
+import { type RefObject } from 'react';
+import type { TWidthFromAnchorMode } from '../popover/types';
+/**
+ * Sets the width of a popover element relative to its anchor element.
+ *
+ * - `'match-anchor'` → `width: anchor-size(width)` — popover matches anchor width exactly.
+ * - `'min-anchor'`   → `min-width: anchor-size(width)` — popover is at least as wide as anchor,
+ *   but can grow wider.
+ * - `'none'`         → no explicit width is set (default behaviour)
+ *
+ * Uses CSS `anchor-size(width)` when the browser supports it, falling back to a
+ * one-off measurement of `anchor.offsetWidth`.
+ *
+ * Designed to be composed alongside `useAnchorPosition` for top-layer popovers.
+ */
+export declare function useWidthFromAnchor({ mode, popoverRef, anchorRef, }: {
+    mode: TWidthFromAnchorMode;
+    popoverRef: RefObject<HTMLElement | null>;
+    anchorRef: RefObject<HTMLElement | null> | undefined;
+}): void;

package/dist/types-ts4.5/popover/popover.d.ts

@@ -8,7 +8,9 @@ import { type TPopoverForwardedProps } from './types';
  * Unopinionated top-layer primitive.
  *
  * Manages only visibility (isOpen) and animation (animate). Has no knowledge
- * of positioning — compose with `useAnchorPosition` for anchor positioning.
+ * of positioning — compose with `useAnchorPosition` for anchor positioning
+ * and optionally `useWidthFromAnchor` for setting the width of a popover element
+ * relative to its anchor trigger.
  *
  * Visibility is driven by the `isOpen` prop:
  * - `isOpen={true}` → `showPopover()`, entry animation via `@starting-style`

package/dist/types-ts4.5/popover/types.d.ts

@@ -157,4 +157,17 @@ export type TPopoverProps = TPopoverBaseProps & TAriaRoleOptional & ({
     mode: 'manual';
     onClose?: never;
 });
+/**
+ * The width mode of the popover relative to its anchor element.
+ *
+ * - `'none'` (default): popover sizes to its content, ignoring the anchor width.
+ * - `'match-anchor'`: popover matches the anchor element's width exactly
+ *   via CSS `anchor-size(width)`. Falls back to a one-off measurement
+ *   of `anchorRef.current.offsetWidth` when CSS Anchor Positioning
+ *   is not supported.
+ * - `'min-anchor'`: popover is at least as wide as the anchor, but
+ *   can grow wider if content requires it. Uses `min-width: anchor-size(width)`.
+ *   Falls back to a one-off measurement of the anchor's width.
+ */
+export type TWidthFromAnchorMode = 'none' | 'match-anchor' | 'min-anchor';
 export {};

package/dist/types-ts4.5/popup/popup-content.d.ts

@@ -7,7 +7,7 @@ import { type TPopupContentProps } from './types';
 /**
  * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
  *
- * Used inside the `<Popup>` compound — reads triggerRef, placement, isOpen,
+ * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
  * and onClose from context. For standalone usage (tooltip, spotlight, flag),
  * use `Popover` + `useAnchorPosition` directly.
  */

package/dist/types-ts4.5/popup/popup-trigger.d.ts

@@ -17,7 +17,7 @@ import { type TPopupTriggerProps } from './types';
  * from opening.
  *
  * If you need Compiled `css` on the trigger, use `Popup.TriggerFunction`
- * instead — it hands you raw props via a render-prop and avoids
+ * instead - it hands you raw props via a render-prop and avoids
  * `cloneElement` entirely.
  */
 export declare function PopupTrigger({ children }: TPopupTriggerProps): ReactNode;

package/dist/types-ts4.5/popup/types.d.ts

@@ -4,7 +4,7 @@ import { type TAnimationPreset } from '../animations/types';
 import { type TArrowPreset } from '../arrow/types';
 import { type TPlacementOptions } from '../internal/resolve-placement';
 import { type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
-import { type TPopoverCloseReason } from '../popover/types';
+import { type TPopoverCloseReason, type TWidthFromAnchorMode } from '../popover/types';
 /**
  * Describes where to position a popover relative to its trigger. All fields
  * are optional. The default `{}` means "below the trigger, centered, with a
@@ -115,18 +115,18 @@ type TPopupContentBaseProps = {
      */
     ref?: Ref<HTMLDivElement>;
     /**
-     * Controls the width of the popover.
+     * Controls the width of the popover relative to its anchor element.
      *
-     * - `'content'` (default): popover sizes to its content.
-     * - `'trigger'`: popover matches the trigger element's width exactly
+     * - `'none'` (default): popover sizes to its content, ignoring the anchor width.
+     * - `'match-anchor'`: popover matches the anchor element's width exactly
      *   via CSS `anchor-size(width)`. Falls back to a one-off measurement
-     *   of `triggerRef.current.offsetWidth` when CSS Anchor Positioning
+     *   of `anchorRef.current.offsetWidth` when CSS Anchor Positioning
      *   is not supported.
-     * - `'min-trigger'`: popover is at least as wide as the trigger, but
+     * - `'min-anchor'`: popover is at least as wide as the anchor, but
      *   can grow wider if content requires it. Uses `min-width: anchor-size(width)`.
-     *   Falls back to a one-off measurement of the trigger's width.
+     *   Falls back to a one-off measurement of the anchor's width.
      */
-    width?: 'content' | 'trigger' | 'min-trigger';
+    widthFromAnchor?: TWidthFromAnchorMode;
     /**
      * Applies additional CSS styles to the popover root element using
      * design-system-safe xcss.

package/dist/types-ts4.5/use-simple-light-dismiss/index.d.ts

@@ -13,12 +13,12 @@ type TUseSimpleLightDismissOptions = {
     /**
      * Called when a light-dismiss event occurs.
      *
-     * - `reason: 'escape'` — the user pressed the Escape key.
-     * - `reason: 'light-dismiss'` — the user clicked outside the popover.
+     * - `reason: 'escape'` - the user pressed the Escape key.
+     * - `reason: 'light-dismiss'` - the user clicked outside the popover.
      *
      * **Note:** This hook provides simple, standalone light dismiss that does not
      * participate in the browser's `popover="auto"` dismiss stack. Every active
-     * instance will fire independently — if multiple popovers use this hook,
+     * instance will fire independently - if multiple popovers use this hook,
      * they will all receive dismiss events.
      */
     onClose: (args: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "0.6.2",
+	"version": "0.7.0",
 	"description": "Low-level layering primitives based on popover and dialog",
 	"homepage": "https://atlassian.design/components/top-layer",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -59,7 +59,7 @@
 		"@atlaskit/textfield": "^8.3.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
-		"@atlassian/testing-library": "^0.5.0",
+		"@atlassian/testing-library": "^0.6.0",
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^16.3.0",
 		"@types/raf-schd": "^4.0.1",

package/use-width-from-anchor/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/top-layer/use-width-from-anchor",
+  "main": "../dist/cjs/entry-points/use-width-from-anchor.js",
+  "module": "../dist/esm/entry-points/use-width-from-anchor.js",
+  "module:es2019": "../dist/es2019/entry-points/use-width-from-anchor.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/entry-points/use-width-from-anchor.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/use-width-from-anchor.d.ts"
+      ]
+    }
+  }
+}