@atlaskit/top-layer 0.6.2 → 0.7.0

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

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

package/dist/es2019/focus/focus.js

@@ -39,7 +39,7 @@ function getFocusables({
   container,
   filter
 }) {
-  return Array.from(container.querySelectorAll(selectors.focusable)).filter(el => el instanceof HTMLElement).filter(el => !filter || filter(el, container));
+  return Array.from(container.querySelectorAll(selectors.focusable)).filter(element => element instanceof HTMLElement).filter(element => !filter || filter(element, container));
 }
 
 /**

package/dist/es2019/internal/combine.js

@@ -13,6 +13,6 @@
  */
 export function combine(...cleanupFns) {
   return function cleanup() {
-    cleanupFns.forEach(fn => fn === null || fn === void 0 ? void 0 : fn());
+    cleanupFns.forEach(callback => callback === null || callback === void 0 ? void 0 : callback());
   };
 }

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,
@@ -488,7 +482,19 @@ export function useAnchorPosition({
     // ResizeObserver fires once the browser has real dimensions.
     // Self-disconnects after one valid measurement; ongoing
     // scroll/resize is handled by the window listeners below.
-    const resizeObserver = new ResizeObserver(() => {
+    // `ResizeObserver` is missing in some non-DOM jest environments
+    // (e.g. post-office's `node` environment). Fall back to a no-op
+    // observer there — the scroll/resize listeners below still keep
+    // the popover positioned in the rare case the consumer also
+    // polyfilled `showPopover` but not `ResizeObserver`. Real
+    // browsers always have it.
+    const NoopResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+    const ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
+    const resizeObserver = new ResizeObserverImpl(() => {
       if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
         update();
         resizeObserver.disconnect();

package/dist/es2019/internal/use-animated-visibility.js

@@ -104,8 +104,8 @@ export function useAnimatedVisibility({
     if (isOpen || !showChildren || !willAnimate) {
       return;
     }
-    const el = elementRef.current;
-    if (!el) {
+    const element = elementRef.current;
+    if (!element) {
       return;
     }
     function finish() {
@@ -119,7 +119,7 @@ export function useAnimatedVisibility({
     const fallbackId = setTimeout(finish, ((_preset$exitDurationM = preset === null || preset === void 0 ? void 0 : preset.exitDurationMs) !== null && _preset$exitDurationM !== void 0 ? _preset$exitDurationM : 0) + 50);
 
     // Primary: listen for the CSS transition to complete
-    const unbind = bind(el, {
+    const unbind = bind(element, {
       type: 'transitionend',
       listener: finish,
       options: {

package/dist/es2019/internal/use-focus-wrap.js

@@ -34,7 +34,7 @@ function roleRequiresFocusWrap(role) {
  * 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
@@ -45,11 +45,11 @@ export function useFocusWrap({
   role
 }) {
   useEffect(() => {
-    const el = elementRef.current;
-    if (!el || !roleRequiresFocusWrap(role)) {
+    const element = elementRef.current;
+    if (!element || !roleRequiresFocusWrap(role)) {
       return;
     }
-    const unbind = bind(el, {
+    const unbind = bind(element, {
       type: 'keydown',
       listener: event => {
         if (event.key !== 'Tab') {
@@ -61,7 +61,7 @@ export function useFocusWrap({
         // Try to move to the next/previous focusable element relative
         // to the currently focused element within the container.
         const next = getNextFocusable({
-          container: el,
+          container: element,
           direction
         });
         if (next) {
@@ -73,9 +73,9 @@ export function useFocusWrap({
         // focused element isn't in the focusable list). Fall back to
         // the first or last focusable element depending on direction.
         const fallback = direction === 'forwards' ? getFirstFocusable({
-          container: el
+          container: element
         }) : getLastFocusable({
-          container: el
+          container: element
         });
         if (fallback) {
           fallback.focus();

package/dist/es2019/internal/use-initial-focus.js

@@ -13,7 +13,7 @@ import { getFirstFocusable } from '../focus/focus';
  * - no role / other roles: no focus movement
  *
  * Note: React 18's `autoFocus` JSX prop does NOT set the HTML `autofocus`
- * attribute — it only calls `.focus()` imperatively during commit, which
+ * attribute - it only calls `.focus()` imperatively during commit, which
  * has no effect on hidden popover content. Consumers must set the native
  * attribute via a ref callback (e.g. `node.setAttribute('autofocus', '')`).
  * React 19+ reflects the JSX prop as the HTML attribute automatically.

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`
@@ -116,21 +118,21 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
   // the browser processes light dismiss), read in the toggle handler.
   const closeReasonRef = useRef('light-dismiss');
   const handleToggle = useCallback(event => {
-    const el = ownRef.current;
+    const element = ownRef.current;
     if (event.newState === 'open') {
-      if (el) {
+      if (element) {
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({
           isOpen: true,
-          element: el
+          element: element
         });
       }
       return;
     }
     if (event.newState === 'closed') {
-      if (el) {
+      if (element) {
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange({
           isOpen: false,
-          element: el
+          element: element
         });
       }
 
@@ -148,13 +150,13 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
     }
   }, [onClose, onOpenChange]);
   useEffect(() => {
-    const el = ownRef.current;
-    if (!el) {
+    const element = ownRef.current;
+    if (!element) {
       return;
     }
 
     // Capture-phase: tag Escape before the browser processes light dismiss.
-    const unbindEscape = bind(el, {
+    const unbindEscape = bind(element, {
       type: 'keydown',
       listener: event => {
         if (event.key === 'Escape') {
@@ -165,7 +167,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
         capture: true
       }
     });
-    const unbindToggle = bind(el, {
+    const unbindToggle = bind(element, {
       type: 'toggle',
       listener: handleToggle
     });

package/dist/es2019/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.
  */
@@ -23,7 +24,7 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
   animate,
   arrow,
   mode,
-  width = 'content',
+  widthFromAnchor = 'none',
   xcss,
   isOpen: isOpenProp,
   triggerRef: triggerRefProp,
@@ -88,7 +89,7 @@ export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
     // ── 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 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/es2019/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({
@@ -34,7 +34,7 @@ export function PopupTrigger({
   const 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).
   const isOpenRef = React.useRef(isOpen);
   isOpenRef.current = isOpen;

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

@@ -21,7 +21,7 @@ export function useSimpleLightDismiss({
   isOpen,
   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.
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
   useEffect(() => {

package/dist/esm/arrow/index.js

@@ -14,7 +14,7 @@ import { getPlacement, placementToPositionArea } from '../internal/use-anchor-po
  *
  * Constraints:
  * - `box-shadow` must be `none` (interferes with `clip-path: inset() margin-box`)
- * - `::before` and `::after` are consumed — consumers cannot use them
+ * - `::before` and `::after` are consumed - consumers cannot use them
  * - Arrow pseudo-elements use `background: inherit` from the popover element
  *
  * @see https://goulet.dev/posts/tooltip-with-popover-and-anchor-positioning/
@@ -39,7 +39,7 @@ function positionAreaToRuleName(_ref) {
  * that change both `position-area` and `margin` when flipping.
  *
  * This is required for the arrow technique because built-in keywords
- * (`flip-block`, `flip-inline`) only flip `position-area` — they do
+ * (`flip-block`, `flip-inline`) only flip `position-area` - they do
  * not update the margin direction needed to reveal the correct arrow.
  */
 function getTryFallbacks(_ref2) {

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

@@ -119,7 +119,12 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
   var escapedId = CSS.escape(dialogId);
   return /*#__PURE__*/React.createElement("dialog", _extends({
     ref: combinedRef,
-    id: dialogId,
+    id: dialogId
+    // Modern browsers infer modal semantics from `.showModal()` but
+    // some assistive tech still keys off `aria-modal="true"`. Setting
+    // it explicitly is recommended by WAI-ARIA APG dialog pattern.
+    ,
+    "aria-modal": "true",
     "aria-label": label,
     "aria-labelledby": label ? undefined : labelledBy,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

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

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

package/dist/esm/focus/focus.js

@@ -38,10 +38,10 @@ var selectors = function () {
 function getFocusables(_ref) {
   var container = _ref.container,
     filter = _ref.filter;
-  return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (el) {
-    return el instanceof HTMLElement;
-  }).filter(function (el) {
-    return !filter || filter(el, container);
+  return Array.from(container.querySelectorAll(selectors.focusable)).filter(function (element) {
+    return element instanceof HTMLElement;
+  }).filter(function (element) {
+    return !filter || filter(element, container);
   });
 }
 

package/dist/esm/internal/combine.js

@@ -16,8 +16,8 @@ export function combine() {
     cleanupFns[_key] = arguments[_key];
   }
   return function cleanup() {
-    cleanupFns.forEach(function (fn) {
-      return fn === null || fn === void 0 ? void 0 : fn();
+    cleanupFns.forEach(function (callback) {
+      return callback === null || callback === void 0 ? void 0 : callback();
     });
   };
 }

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

@@ -1,3 +1,5 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
 /**
  * Anchor positioning for top-layer popovers. See
  * `notes/architecture/positioning.md` for the full model.
@@ -314,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,
@@ -480,7 +476,29 @@ export function useAnchorPosition(_ref5) {
     // ResizeObserver fires once the browser has real dimensions.
     // Self-disconnects after one valid measurement; ongoing
     // scroll/resize is handled by the window listeners below.
-    var resizeObserver = new ResizeObserver(function () {
+    // `ResizeObserver` is missing in some non-DOM jest environments
+    // (e.g. post-office's `node` environment). Fall back to a no-op
+    // observer there — the scroll/resize listeners below still keep
+    // the popover positioned in the rare case the consumer also
+    // polyfilled `showPopover` but not `ResizeObserver`. Real
+    // browsers always have it.
+    var NoopResizeObserver = /*#__PURE__*/function () {
+      function NoopResizeObserver() {
+        _classCallCheck(this, NoopResizeObserver);
+      }
+      return _createClass(NoopResizeObserver, [{
+        key: "observe",
+        value: function observe() {}
+      }, {
+        key: "unobserve",
+        value: function unobserve() {}
+      }, {
+        key: "disconnect",
+        value: function disconnect() {}
+      }]);
+    }();
+    var ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
+    var resizeObserver = new ResizeObserverImpl(function () {
       if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
         update();
         resizeObserver.disconnect();

package/dist/esm/internal/use-animated-visibility.js

@@ -107,8 +107,8 @@ export function useAnimatedVisibility(_ref) {
     if (isOpen || !showChildren || !willAnimate) {
       return;
     }
-    var el = elementRef.current;
-    if (!el) {
+    var element = elementRef.current;
+    if (!element) {
       return;
     }
     function finish() {
@@ -122,7 +122,7 @@ export function useAnimatedVisibility(_ref) {
     var fallbackId = setTimeout(finish, ((_preset$exitDurationM = preset === null || preset === void 0 ? void 0 : preset.exitDurationMs) !== null && _preset$exitDurationM !== void 0 ? _preset$exitDurationM : 0) + 50);
 
     // Primary: listen for the CSS transition to complete
-    var unbind = bind(el, {
+    var unbind = bind(element, {
       type: 'transitionend',
       listener: finish,
       options: {

package/dist/esm/internal/use-focus-wrap.js

@@ -34,7 +34,7 @@ function roleRequiresFocusWrap(role) {
  * 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
@@ -44,11 +44,11 @@ export function useFocusWrap(_ref) {
   var elementRef = _ref.elementRef,
     role = _ref.role;
   useEffect(function () {
-    var el = elementRef.current;
-    if (!el || !roleRequiresFocusWrap(role)) {
+    var element = elementRef.current;
+    if (!element || !roleRequiresFocusWrap(role)) {
       return;
     }
-    var unbind = bind(el, {
+    var unbind = bind(element, {
       type: 'keydown',
       listener: function listener(event) {
         if (event.key !== 'Tab') {
@@ -60,7 +60,7 @@ export function useFocusWrap(_ref) {
         // Try to move to the next/previous focusable element relative
         // to the currently focused element within the container.
         var next = getNextFocusable({
-          container: el,
+          container: element,
           direction: direction
         });
         if (next) {
@@ -72,9 +72,9 @@ export function useFocusWrap(_ref) {
         // focused element isn't in the focusable list). Fall back to
         // the first or last focusable element depending on direction.
         var fallback = direction === 'forwards' ? getFirstFocusable({
-          container: el
+          container: element
         }) : getLastFocusable({
-          container: el
+          container: element
         });
         if (fallback) {
           fallback.focus();

package/dist/esm/internal/use-initial-focus.js

@@ -13,7 +13,7 @@ import { getFirstFocusable } from '../focus/focus';
  * - no role / other roles: no focus movement
  *
  * Note: React 18's `autoFocus` JSX prop does NOT set the HTML `autofocus`
- * attribute — it only calls `.focus()` imperatively during commit, which
+ * attribute - it only calls `.focus()` imperatively during commit, which
  * has no effect on hidden popover content. Consumers must set the native
  * attribute via a ref callback (e.g. `node.setAttribute('autofocus', '')`).
  * React 19+ reflects the JSX prop as the HTML attribute automatically.