@atlaskit/top-layer 0.6.3 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/top-layer
 
+## 0.7.0
+
+### Minor Changes
+
+- [`43e486948865a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/43e486948865a) -
+  Added a new `useWidthFromAnchor` hook exported from `@atlaskit/top-layer/use-width-from-anchor`,
+  for setting the width of a popover element relative to its anchor trigger. Supports three modes:
+  `'none'` (no width constraint), `'match-anchor'` (popover matches anchor width exactly), and
+  `'min-anchor'` (popover is at least as wide as the anchor).
+
+  Renamed the `width` prop on `Popup.Content` to `widthFromAnchor`, and updated its type from a
+  string enum `'content' | 'trigger' | 'min-trigger'` to `'none' | 'match-anchor' | 'min-anchor'` to
+  match the new hook.
+
 ## 0.6.3
 
 ### Patch Changes

package/dist/cjs/entry-points/use-width-from-anchor.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useWidthFromAnchor", {
+  enumerable: true,
+  get: function get() {
+    return _useWidthFromAnchor.useWidthFromAnchor;
+  }
+});
+var _useWidthFromAnchor = require("../internal/use-width-from-anchor");

package/dist/cjs/internal/use-anchor-position.js

@@ -330,12 +330,6 @@ function useAnchorPosition(_ref5) {
         property: 'inset',
         value: 'auto'
       },
-      // Ensures the popup's margin box overflows the viewport when its span region is too
-      // narrow, triggering position-try-fallbacks correctly rather than wrapping content.
-      {
-        property: 'min-inline-size',
-        value: 'max-content'
-      },
       // Main-axis gap between the popover and its trigger
       {
         property: gap.property,

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

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWidthFromAnchor = useWidthFromAnchor;
+var _react = require("react");
+var _setStyle = require("./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.
+ */
+function useWidthFromAnchor(_ref) {
+  var mode = _ref.mode,
+    popoverRef = _ref.popoverRef,
+    anchorRef = _ref.anchorRef;
+  (0, _react.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 (0, _setStyle.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 (0, _setStyle.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 (0, _setStyle.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 (0, _setStyle.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 (0, _setStyle.setStyle)({
+        el: node,
+        styles: [minInlineSizeStyle]
+      });
+    }
+
+    // 'none' mode: no explicit width, but still apply `min-inline-size: max-content`.
+    return (0, _setStyle.setStyle)({
+      el: node,
+      styles: [minInlineSizeStyle]
+    });
+  }, [mode, popoverRef, anchorRef]);
+}

package/dist/cjs/popover/popover.js

@@ -44,7 +44,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`

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

@@ -14,6 +14,7 @@ var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _roleTypes = require("../internal/role-types");
 var _useAnchorPosition = require("../internal/use-anchor-position");
 var _usePresetStyles = require("../internal/use-preset-styles");
+var _useWidthFromAnchor = require("../internal/use-width-from-anchor");
 var _popover = require("../popover/popover");
 var _popupContext = require("./popup-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -33,8 +34,8 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     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,
@@ -140,39 +141,11 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     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.
-  (0, _react.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]);
+  (0, _useWidthFromAnchor.useWidthFromAnchor)({
+    mode: widthFromAnchor,
+    popoverRef: popoverRef,
+    anchorRef: triggerRef
+  });
 
   // Merge: the popoverRef (shared with trigger + positioning) and the forwarded ref.
   var combinedRef = (0, _mergeRefs.default)([popoverRef, ref]);

package/dist/es2019/entry-points/use-width-from-anchor.js

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

package/dist/es2019/internal/use-anchor-position.js

@@ -323,12 +323,6 @@ export function useAnchorPosition({
         property: 'inset',
         value: 'auto'
       },
-      // Ensures the popup's margin box overflows the viewport when its span region is too
-      // narrow, triggering position-try-fallbacks correctly rather than wrapping content.
-      {
-        property: 'min-inline-size',
-        value: 'max-content'
-      },
       // Main-axis gap between the popover and its trigger
       {
         property: gap.property,

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

@@ -0,0 +1,103 @@
+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({
+  mode,
+  popoverRef,
+  anchorRef
+}) {
+  useLayoutEffect(() => {
+    const 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.
+    const 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.
+      const anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+      if (anchor) {
+        return setStyle({
+          el: node,
+          styles: [{
+            property: 'width',
+            value: `${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).
+    const 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)'
+          }]
+        });
+      }
+      const anchor = anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current;
+      if (anchor) {
+        return setStyle({
+          el: node,
+          styles: [minInlineSizeStyle, {
+            property: 'min-width',
+            value: `${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/es2019/popover/popover.js

@@ -33,7 +33,9 @@ const 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`

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

@@ -6,6 +6,7 @@ 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';
 /**
@@ -23,7 +24,7 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
   animate,
   arrow,
   mode,
-  width = 'content',
+  widthFromAnchor = 'none',
   xcss,
   isOpen: isOpenProp,
   triggerRef: triggerRefProp,
@@ -131,39 +132,11 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
     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(() => {
-    if (width === 'content') {
-      return;
-    }
-    const node = popoverRef.current;
-    if (!node) {
-      return;
-    }
-    const cssProperty = width === 'trigger' ? 'width' : 'min-width';
-    const 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.
-    const 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.
-      const trigger = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current;
-      if (trigger) {
-        node.style.setProperty(cssProperty, `${trigger.offsetWidth}px`);
-      }
-    }
-    return () => {
-      node.style.removeProperty(cssProperty);
-    };
-  }, [width, popoverRef, triggerRef]);
+  useWidthFromAnchor({
+    mode: widthFromAnchor,
+    popoverRef,
+    anchorRef: triggerRef
+  });
 
   // Merge: the popoverRef (shared with trigger + positioning) and the forwarded ref.
   const combinedRef = mergeRefs([popoverRef, ref]);

package/dist/esm/entry-points/use-width-from-anchor.js

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

package/dist/esm/internal/use-anchor-position.js

@@ -316,12 +316,6 @@ export function useAnchorPosition(_ref5) {
         property: 'inset',
         value: 'auto'
       },
-      // Ensures the popup's margin box overflows the viewport when its span region is too
-      // narrow, triggering position-try-fallbacks correctly rather than wrapping content.
-      {
-        property: 'min-inline-size',
-        value: 'max-content'
-      },
       // Main-axis gap between the popover and its trigger
       {
         property: gap.property,

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`

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

@@ -6,6 +6,7 @@ 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';
 /**
@@ -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,
@@ -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/types/entry-points/use-width-from-anchor.d.ts

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

package/dist/types/internal/ensure-preset-styles.d.ts

@@ -1,4 +1,4 @@
-export declare function ensurePresetStyles({ preset, }: {
+export declare function ensurePresetStyles({ preset }: {
     preset: {
         css: string;
         name: string;

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/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/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/ensure-preset-styles.d.ts

@@ -1,4 +1,4 @@
-export declare function ensurePresetStyles({ preset, }: {
+export declare function ensurePresetStyles({ preset }: {
     preset: {
         css: string;
         name: string;

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/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "0.6.3",
+	"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"
+      ]
+    }
+  }
+}