@atlaskit/top-layer 0.12.1 → 0.12.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/top-layer
 
+## 0.12.2
+
+### Patch Changes
+
+- [`7210e88c14f95`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7210e88c14f95) -
+  Internal: align package with house authoring rules (style-only refactors).
+
 ## 0.12.1
 
 ### Patch Changes

package/dist/cjs/animations/presets.js

@@ -9,7 +9,7 @@ exports.fade = fade;
 exports.scaleAndFade = scaleAndFade;
 exports.slideAndFade = slideAndFade;
 var _resolvePlacement = require("../internal/resolve-placement");
-// ── slideAndFade ──
+// slideAndFade
 
 function getSlideAndFadeProperties(_ref) {
   var placement = _ref.placement,
@@ -91,7 +91,7 @@ function slideAndFade(options) {
   };
 }
 
-// ── fade ──
+// fade
 
 var FADE_CSS = "\n[data-ds-popover-fade] {\n  opacity: 0;\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-popover-fade]:popover-open {\n  opacity: 1;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-popover-fade]:popover-open {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-popover-fade],\n  [data-ds-popover-fade]:popover-open {\n    transition-duration: 0s;\n  }\n}\n";
 
@@ -117,7 +117,7 @@ function fade() {
   };
 }
 
-// ── scaleAndFade ──
+// scaleAndFade
 
 var SCALE_AND_FADE_CSS = "\n[data-ds-popover-scale-and-fade] {\n  opacity: 0;\n  transform: scale(0.95);\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-popover-scale-and-fade]:popover-open {\n  opacity: 1;\n  transform: none;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-popover-scale-and-fade]:popover-open {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-popover-scale-and-fade],\n  [data-ds-popover-scale-and-fade]:popover-open {\n    transition-duration: 0s;\n  }\n}\n";
 
@@ -147,7 +147,7 @@ function scaleAndFade() {
 // Dialog presets
 // ══════════════════════════════════════════════════════════════════════════════
 
-// ── dialogSlideUpAndFade ──
+// dialogSlideUpAndFade
 
 var DIALOG_SLIDE_UP_AND_FADE_CSS = "\n[data-ds-dialog-slide-up-and-fade] {\n  opacity: 0;\n  transform: translateY(calc(-1 * var(--ds-dialog-ty, 12px)));\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open] {\n  opacity: 1;\n  transform: none;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-slide-up-and-fade][open] {\n    opacity: 0;\n    transform: translateY(var(--ds-dialog-ty, 12px));\n  }\n}\n\n[data-ds-dialog-slide-up-and-fade]::backdrop {\n  background-color: transparent;\n  transition:\n    background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open]::backdrop {\n  background-color: var(--ds-blanket, #050C1F75);\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-dialog-slide-up-and-fade],\n  [data-ds-dialog-slide-up-and-fade][open],\n  [data-ds-dialog-slide-up-and-fade]::backdrop,\n  [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n    transition-duration: 0s;\n  }\n}\n";
 
@@ -183,7 +183,7 @@ function dialogSlideUpAndFade(options) {
   };
 }
 
-// ── dialogFade ──
+// dialogFade
 
 var DIALOG_FADE_CSS = "\n[data-ds-dialog-fade] {\n  opacity: 0;\n  transition:\n    opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-fade][open] {\n  opacity: 1;\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-fade][open] {\n    opacity: 0;\n  }\n}\n\n[data-ds-dialog-fade]::backdrop {\n  background-color: transparent;\n  transition:\n    background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),\n    overlay 175ms allow-discrete,\n    display 175ms allow-discrete;\n}\n\n[data-ds-dialog-fade][open]::backdrop {\n  background-color: var(--ds-blanket, #050C1F75);\n  transition-duration: 350ms;\n}\n\n@starting-style {\n  [data-ds-dialog-fade][open]::backdrop {\n    background-color: transparent;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-ds-dialog-fade],\n  [data-ds-dialog-fade][open],\n  [data-ds-dialog-fade]::backdrop,\n  [data-ds-dialog-fade][open]::backdrop {\n    transition-duration: 0s;\n  }\n}\n";
 

package/dist/cjs/dialog/create-close-event.js

@@ -8,7 +8,7 @@ exports.createCloseEvent = createCloseEvent;
  * Creates a synthetic DOM event from a `TDialogCloseReason`.
  *
  * Useful when bridging the Dialog primitive's `onClose({ reason })` callback
- * to a legacy API that expects a `KeyboardEvent` or `MouseEvent` — for example,
+ * to a legacy API that expects a `KeyboardEvent` or `MouseEvent` - for example,
  * `@atlaskit/modal-dialog`'s `onClose(event, analyticsEvent)` contract.
  *
  * - `'escape'` → `KeyboardEvent('keydown', { key: 'Escape' })`

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

@@ -58,7 +58,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
   var ownRef = (0, _react.useRef)(null);
   var combinedRef = (0, _mergeRefs.default)([ownRef, ref]);
 
-  // ── Animation lifecycle ──
+  // Animation lifecycle
   var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
       isOpen: isOpen,
       animate: animate,
@@ -68,7 +68,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     showChildren = _useAnimatedVisibilit.showChildren,
     preset = _useAnimatedVisibilit.preset;
 
-  // ── Focus wrap ──
+  // Focus wrap
   // Native <dialog>.showModal() traps focus but wraps through <body> at
   // the boundary (A → B → C → body → A). This hook intercepts Tab to
   // wrap directly (A → B → C → A), matching the WAI-ARIA APG pattern.
@@ -77,7 +77,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     role: 'dialog'
   });
 
-  // ── Open layer observer registration ──
+  // Open layer observer registration
   // Notifies the open layer observer so app-coordination features
   // (open-count subscriptions) work with top-layer dialogs.
   (0, _openLayerObserver.useNotifyOpenLayerObserver)({
@@ -108,7 +108,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     }
   }, [isOpen]);
 
-  // ── Handle native Escape (cancel event) ──
+  // Handle native Escape (cancel event)
   var handleCancel = (0, _react.useCallback)(function (event) {
     event.preventDefault();
     onClose({
@@ -116,7 +116,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
     });
   }, [onClose]);
 
-  // ── Handle backdrop click ──
+  // Handle backdrop click
   // Attached via bind-event-listener rather than a React prop so we avoid
   // a11y lint suppressions on the <dialog> element.
   // Keyboard dismiss is already handled natively (Escape → onCancel above).

package/dist/cjs/internal/ensure-preset-styles.js

@@ -10,7 +10,7 @@ exports.ensurePresetStyles = ensurePresetStyles;
  * Each preset's CSS is injected at most once into `<head>`.
  * Shared by both PopoverContent and DialogContent.
  *
- * Note: injected `<style>` elements and the tracking Set are append-only —
+ * Note: injected `<style>` elements and the tracking Set are append-only -
  * they are never removed. This is intentional: the number of distinct
  * presets is bounded (handful of animation presets), so the
  * memory footprint is negligible. Removing styles would risk breaking

package/dist/cjs/internal/reduced-motion.js

@@ -13,7 +13,7 @@ var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
  *
  * The result is cached after the first call via `once`. This avoids
  * calling `matchMedia` on every render. The trade-off is that if a user
- * toggles the OS reduced-motion setting mid-session, the change won't
+ * toggles the OS reduced-motion setting mid-session, the change will not
  * take effect until the next page load. This is acceptable because
  * toggling this system-level preference mid-session is extremely rare,
  * and a page refresh is a reasonable expectation for system accessibility

package/dist/cjs/internal/resolve-placement.js

@@ -30,8 +30,8 @@ var DEFAULT_GAP = "var(--ds-space-100, 8px)";
  * CSS length string (e.g. `token('space.100')`).
  *
  * The two offset axes are named for clarity at the call site:
- *   - `gap`     — distance away from the trigger along the placement axis
- *   - `crossAxisShift`  — nudge along the trigger edge (perpendicular to the placement axis)
+ *   - `gap`     - distance away from the trigger along the placement axis
+ *   - `crossAxisShift`  - nudge along the trigger edge (perpendicular to the placement axis)
  */
 
 /**

package/dist/cjs/internal/role-types.js

@@ -29,7 +29,7 @@ exports.shouldFocusIntoPopover = shouldFocusIntoPopover;
  * (e.g. a combobox labels its listbox, tooltip content IS the accessible name).
  */
 
-// ── Shared ARIA role discrimination types ──
+// Shared ARIA role discrimination types
 //
 // These encode the WCAG 4.1.2 constraint: roles like `dialog`, `alertdialog`,
 // and `menu` MUST have an accessible name (either `label` or `labelledBy`).

package/dist/cjs/internal/slot.js

@@ -32,14 +32,14 @@ function isSlotChild(child) {
  * Merges props (including ref) onto a single React element child.
  *
  * A safer alternative to raw `cloneElement` that:
- * 1. Guards with `isValidElement` — non-element children (strings,
+ * 1. Guards with `isValidElement` - non-element children (strings,
  *    fragments, null) are returned as-is instead of crashing.
  * 2. Merges refs via `mergeRefs` so both the caller's ref and the
  *    child's existing ref are honoured.
  * 3. Spreads any additional props (ARIA attributes, event handlers, etc.)
  *    onto the child element.
  *
- * Event handlers (e.g. `onClick`) are **not** auto-merged — the caller's
+ * Event handlers (e.g. `onClick`) are **not** auto-merged - the caller's
  * handler replaces the child's. Compose handlers before passing them in.
  *
  * @example
@@ -52,7 +52,7 @@ function isSlotChild(child) {
 var Slot = exports.Slot = /*#__PURE__*/(0, _react.forwardRef)(function Slot(slotProps, ref) {
   var rawChildren = slotProps.children,
     props = (0, _objectWithoutProperties2.default)(slotProps, _excluded);
-  // `SlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
+  // `TSlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
   var children = rawChildren;
   if (!isSlotChild(children)) {
     return children;

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAnchorPosition = useAnchorPosition;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
@@ -37,25 +35,15 @@ var _setStyle = require("./set-style");
 // from `./resolve-placement` so search-and-jump lands at the source of truth.
 
 /**
- * Module-scope no-op `ResizeObserver` used in non-DOM jest environments where
+ * Module-scope no-op `ResizeObserver` stub used in non-DOM jest environments where
  * `ResizeObserver` is `undefined`. Hoisted out of the effect to avoid
- * allocating a new class declaration on every run.
+ * re-allocating on every run.
  */
-var NoopResizeObserver = /*#__PURE__*/function () {
-  function NoopResizeObserver() {
-    (0, _classCallCheck2.default)(this, NoopResizeObserver);
-  }
-  return (0, _createClass2.default)(NoopResizeObserver, [{
-    key: "observe",
-    value: function observe() {}
-  }, {
-    key: "unobserve",
-    value: function unobserve() {}
-  }, {
-    key: "disconnect",
-    value: function disconnect() {}
-  }]);
-}();
+var noopResizeObserver = {
+  observe: function observe() {},
+  unobserve: function unobserve() {},
+  disconnect: function disconnect() {}
+};
 
 /**
  * Returns true when the popover is currently open. Wrapped because the
@@ -345,7 +333,7 @@ function useAnchorPosition(_ref3) {
       return _undoPositioning;
     }
 
-    // ── JS fallback ──
+    // JS fallback
     // The popover is already in the browser's top layer via popover="auto",
     // so it does not need position:fixed. We only reset the UA defaults
     // (inset: 0; margin: auto) and set top/left based on measurements.
@@ -414,20 +402,17 @@ function useAnchorPosition(_ref3) {
     // Self-disconnects after one valid measurement; ongoing
     // scroll/resize is handled by the window listeners below.
     // `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. The `NoopResizeObserver` class is
-    // hoisted to module scope (see top of file) so we do not allocate
-    // a new constructor on every effect run.
-    var ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
-    var resizeObserver = new ResizeObserverImpl(function () {
+    // (e.g. post-office's `node` environment). Fall back to the
+    // module-scope `noopResizeObserver` stub 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 resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
       if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
         update();
         resizeObserver.disconnect();
       }
-    });
+    }) : noopResizeObserver;
 
     // If the popover is already open by the time this effect runs (for
     // example, the parent `useAnchorPosition` effect runs after the child

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

@@ -15,19 +15,19 @@ var _usePresetStyles = require("./use-preset-styles");
  *
  * Used by both `Popover` and `Dialog` to share the same animation lifecycle
  * logic. Those components own their own show/hide mechanisms (showPopover /
- * hidePopover vs showModal / close) and event handling — this hook only
+ * hidePopover vs showModal / close) and event handling - this hook only
  * manages the relationship between `isOpen` and when children are rendered.
  *
  * ## Problem
  *
  * We want to delay the unmount of children until a CSS exit transition has
  * finished playing. If we unmount children the moment `isOpen` becomes
- * `false`, the exit animation is never visible — the content just disappears.
+ * `false`, the exit animation is never visible - the content just disappears.
  *
  * ## How it works
  *
  * `showChildren` tracks whether the consumer's children should be in the DOM.
- * It does not mirror `isOpen` exactly — it intentionally lags behind during
+ * It does not mirror `isOpen` exactly - it intentionally lags behind during
  * exit animations:
  *
  * ```
@@ -63,12 +63,12 @@ function useAnimatedVisibility(_ref) {
   // or the user has enabled the "prefers reduced motion" OS setting.
   var willAnimate = Boolean(animate) && !(0, _reducedMotion.prefersReducedMotion)();
 
-  // ── showChildren state ──
+  // showChildren state
   //
   // This is the core of the hook. `showChildren` controls whether the
   // consumer's children are in the DOM. The two `if` blocks below are
   // intentionally written as synchronous state updates during render
-  // (React supports this pattern — setState during render is treated as
+  // (React supports this pattern - setState during render is treated as
   // a synchronous re-render before the browser paints).
   //
   // Mount path:  isOpen went true but showChildren is still false → mount.
@@ -95,7 +95,7 @@ function useAnimatedVisibility(_ref) {
   var onExitFinishRef = (0, _react.useRef)(onExitFinish);
   onExitFinishRef.current = onExitFinish;
 
-  // ── Animated entry effect ──
+  // Animated entry effect
   //
   // Fires `onEnterFinish` after the entry transition completes.
   // When there is no animation, fires it immediately via a separate effect.
@@ -144,7 +144,7 @@ function useAnimatedVisibility(_ref) {
     };
   }, [isOpen, showChildren, willAnimate, preset === null || preset === void 0 ? void 0 : preset.enterDurationMs, elementRef]);
 
-  // ── Non-animated entry callback ──
+  // Non-animated entry callback
   //
   // When there is no animation, fire `onEnterFinish` immediately on mount and after `isOpen` goes false->true.
   // The initial value is false to make sure it fires on mount if the current `isOpen` is true.
@@ -158,7 +158,7 @@ function useAnimatedVisibility(_ref) {
     }
   }, [isOpen, willAnimate]);
 
-  // ── Animated exit effect ──
+  // Animated exit effect
   //
   // Runs when all three conditions are true:
   //   • `isOpen` is false  (consumer wants to close)
@@ -221,10 +221,10 @@ function useAnimatedVisibility(_ref) {
     };
   }, [isOpen, showChildren, willAnimate, preset === null || preset === void 0 ? void 0 : preset.exitDurationMs, elementRef]);
 
-  // ── Non-animated exit callback ──
+  // Non-animated exit callback
   //
   // When there is no animation, children unmount synchronously (handled
-  // by the `if` block above). But `onExitFinish` still needs to fire —
+  // by the `if` block above). But `onExitFinish` still needs to fire -
   // we do that in a follow-up effect so the consumer can react to it.
   //
   // Uses a previous-value ref (`wasOpenRef`) to detect the exact

package/dist/cjs/internal/use-animation-preset.js

@@ -9,7 +9,7 @@ var _ensurePresetStyles = require("./ensure-preset-styles");
 /**
  * Normalizes the `animate` prop to a preset (or null) and ensures its CSS
  * is injected once into document.head. Used by PopupContent, Popover, and
- * DialogContent so they don't duplicate this logic.
+ * DialogContent so they do not duplicate this logic.
  */
 function useAnimationPreset(animate) {
   var preset = animate != null && animate !== false ? animate : null;

package/dist/cjs/internal/use-preset-styles.js

@@ -10,7 +10,7 @@ var _ensurePresetStyles = require("./ensure-preset-styles");
  * Normalizes a preset prop to a value (or null) and ensures its CSS
  * is injected once into `document.head`.
  *
- * Works with any preset that has `{ css, name }` — animation presets
+ * Works with any preset that has `{ css, name }` - animation presets
  * (TAnimationPreset) satisfies this shape.
  */
 function usePresetStyles(_ref) {

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

@@ -9,8 +9,8 @@ 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,
+ * - `'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)
  *
@@ -35,7 +35,7 @@ function useWidthFromAnchor(_ref) {
     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
+      // `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)({
@@ -91,7 +91,7 @@ function useWidthFromAnchor(_ref) {
         });
       }
 
-      // No anchor available in JS fallback — still apply min-inline-size.
+      // No anchor available in JS fallback - still apply min-inline-size.
       return (0, _setStyle.setStyle)({
         el: node,
         styles: [minInlineSizeStyle]

package/dist/cjs/popover/create-close-event.js

@@ -8,7 +8,7 @@ exports.createPopoverCloseEvent = createPopoverCloseEvent;
  * Creates a synthetic DOM event from a `TPopoverCloseReason`.
  *
  * Useful when bridging the Popover primitive's `onClose({ reason })` callback
- * to a legacy API that expects a native DOM event — for example,
+ * to a legacy API that expects a native DOM event - for example,
  * `@atlaskit/inline-dialog`'s `onClose(event)` contract.
  *
  * - `'escape'` → `KeyboardEvent('keydown', { key: 'Escape' })`

package/dist/cjs/popover/popover.js

@@ -56,7 +56,7 @@ var POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree', '
  * 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.
  *
@@ -105,7 +105,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     showChildren = _useAnimatedVisibilit.showChildren,
     preset = _useAnimatedVisibilit.preset;
 
-  // ── Focus management ──
+  // Focus management
   // Initial focus: on open, moves focus into the popover (role-dependent).
   // Focus wrap: Tab/Shift+Tab cycle within the popover for dialog roles.
   // Focus restoration: handled natively by the Popover API. The browser
@@ -121,7 +121,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
     role: role
   });
 
-  // ── Open layer observer registration ──
+  // Open layer observer registration
   // Notifies the open layer observer so app-coordination features
   // (closeLayers(), open-count subscriptions) work with top-layer popovers.
   //

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

@@ -97,7 +97,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
   // Note: onOpenChange composition is handled by handleOpenChange below,
   // which also adds nested-popover focus restoration.
 
-  // ── Sync aria-haspopup on the trigger with the content's role ──
+  // Sync aria-haspopup on the trigger with the content's role
   var setAriaHasPopup = ctx === null || ctx === void 0 ? void 0 : ctx.setAriaHasPopup;
   (0, _react.useLayoutEffect)(function () {
     setAriaHasPopup === null || setAriaHasPopup === void 0 || setAriaHasPopup((0, _roleTypes.roleToAriaHasPopup)({
@@ -105,7 +105,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     }));
   }, [role, setAriaHasPopup]);
 
-  // ── Focus restoration ──
+  // Focus restoration
   // The native Popover API handles focus restoration automatically for
   // popover="auto" and popover="hint":
   //   - Escape → restores focus to the previously focused element (the trigger)
@@ -132,7 +132,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     }
     consumerOnOpenChange === null || consumerOnOpenChange === void 0 || consumerOnOpenChange(args);
 
-    // ── Nested popover focus restoration fallback ──
+    // 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 will not restore
@@ -161,7 +161,7 @@ var PopupContent = exports.PopupContent = /*#__PURE__*/(0, _react.forwardRef)(fu
     }
   }, [consumerOnOpenChange, triggerRef, role, setPopupState, willAnimate]);
 
-  // ── Anchor positioning ──
+  // Anchor positioning
   // Compose useAnchorPosition with Popover. The hook positions the popover
   // relative to the trigger element via CSS Anchor Positioning (with JS fallback).
   // Use ctx.popoverRef when inside the compound (so the trigger can also

package/dist/cjs/testing/polyfill.js

@@ -104,7 +104,7 @@ function createToggleScheduler() {
       newState: newState
     });
 
-    // Task queue (setTimeout) — browser fires toggle after microtasks drain, not during
+    // Task queue (setTimeout) - browser fires toggle after microtasks drain, not during
     setTimeout(function () {
       var entry = pending.get(element);
       if (!entry) {
@@ -174,7 +174,7 @@ function createDialogToggleScheduler() {
   };
 }
 
-// ─── Popover API ────────────────────────────────────────────────────────────
+// Popover API
 // Spec: https://html.spec.whatwg.org/multipage/popover.html
 
 // `popover` attribute valid values. Empty / "auto" -> "auto"; unknown -> "manual".
@@ -537,7 +537,7 @@ if (typeof HTMLElement !== 'undefined') {
       if (isPopoverOpen({
         element: this
       })) {
-        return; // already showing — no-op
+        return; // already showing - no-op
       }
 
       // sync, cancelable on show only
@@ -717,7 +717,7 @@ if (typeof HTMLElement !== 'undefined') {
   }
 }
 
-// ─── HTMLDialogElement ──────────────────────────────────────────────────────
+// HTMLDialogElement
 // Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element
 
 if (typeof HTMLDialogElement !== 'undefined') {
@@ -732,7 +732,7 @@ if (typeof HTMLDialogElement !== 'undefined') {
       }
       if (this.hasAttribute('open')) {
         if (this._isModal) {
-          return; // already modal — no-op
+          return; // already modal - no-op
         }
         throw new DOMException("Failed to execute 'showModal' on 'HTMLDialogElement': ".concat(describeElement({
           element: this
@@ -756,7 +756,7 @@ if (typeof HTMLDialogElement !== 'undefined') {
   }
   if (typeof proto.show !== 'function') {
     proto.show = function show() {
-      // Browser does not throw for disconnected elements on show — just no-op
+      // Browser does not throw for disconnected elements on show - just no-op
       if (!this.isConnected || this.hasAttribute('open')) {
         return;
       }
@@ -779,10 +779,10 @@ if (typeof HTMLDialogElement !== 'undefined') {
   if (typeof proto.close !== 'function') {
     proto.close = function close(returnValue) {
       if (!this.hasAttribute('open')) {
-        return; // already closed — no-op
+        return; // already closed - no-op
       }
 
-      // Sync beforetoggle (not cancelable) — matches browser behavior
+      // Sync beforetoggle (not cancelable) - matches browser behavior
       fireToggleEvent({
         element: this,
         type: 'beforetoggle',

package/dist/cjs/testing/to-be-visible.js

@@ -8,13 +8,13 @@ var _matchers = require("@testing-library/jest-dom/matchers");
  *
  * jest-dom's `toBeVisible()` does not know about the Popover API. In real
  * browsers the UA stylesheet hides `[popover]` with `display: none`, but
- * jsdom has no such stylesheet — so closed popovers incorrectly appear visible.
+ * jsdom has no such stylesheet - so closed popovers incorrectly appear visible.
  *
  * Raw jest-dom results in jsdom:
  *
- *   closed popover / child  → true  (WRONG — should be false)
+ *   closed popover / child  → true  (WRONG - should be false)
  *   open popover / child    → true  (correct)
- *   closed dialog / child   → false (correct — jsdom natively hides <dialog>)
+ *   closed dialog / child   → false (correct - jsdom natively hides <dialog>)
  *   open dialog / child     → true  (correct)
  *
  * We correct both false positives and false negatives:
@@ -65,7 +65,7 @@ expect.extend({
     var originalResult = _matchers.toBeVisible.call(this, element);
     var topLayerState = nearestTopLayerState(element);
     if (originalResult.pass) {
-      // Original says visible — override if nearest top-layer host is closed.
+      // Original says visible - override if nearest top-layer host is closed.
       if (topLayerState === 'closed') {
         return {
           pass: false,
@@ -77,7 +77,7 @@ expect.extend({
       return originalResult;
     }
 
-    // Original says not visible — override if nearest top-layer host is open.
+    // Original says not visible - override if nearest top-layer host is open.
     // jsdom may hide [popover] elements even when they are logically open.
     if (topLayerState === 'open') {
       return {

package/dist/cjs/use-arrow-navigation/is-at-current-menu-level.js

@@ -6,6 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.isAtCurrentMenuLevel = isAtCurrentMenuLevel;
 var menuScope = '[role="menu"]';
 
+/**
+ * Recursively walks from `node` toward `container`, returning `true` when
+ * `container` is reached without crossing another `role="menu"` ancestor.
+ *
+ * Used by `isAtCurrentMenuLevel` (pattern 2) to determine if the
+ * `closestMenu` is owned by the wrapper container directly. Recursion
+ * avoids a mutable `let parent` walk and keeps the function body linear.
+ */
+function reachesContainerWithoutNestedMenu(node, container) {
+  if (!node || node === container) {
+    return node === container;
+  }
+  if (node.getAttribute('role') === 'menu') {
+    return false;
+  }
+  return reachesContainerWithoutNestedMenu(node.parentElement, container);
+}
+
 /**
  * Returns true if the element belongs to the current menu level of the
  * container, i.e. it is NOT inside a nested `role="menu"` sub-container.
@@ -72,16 +90,5 @@ function isAtCurrentMenuLevel(element, container) {
 
   // Walk up from the closest menu to see if it is "owned" by this
   // container without passing through another role="menu" first.
-  var parent = closestMenu.parentElement;
-  while (parent && parent !== container) {
-    if (parent.getAttribute('role') === 'menu') {
-      // There is a parent menu between the closest menu and the
-      // container, so the element is in a nested sub-menu.
-      return false;
-    }
-    parent = parent.parentElement;
-  }
-
-  // The closest menu is directly inside the container (no nesting).
-  return parent === container;
+  return reachesContainerWithoutNestedMenu(closestMenu.parentElement, container);
 }

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

@@ -15,7 +15,7 @@ var _bindEventListener = require("bind-event-listener");
  * **No stacking awareness:** This hook does not track a popover stack.
  * If multiple manual popovers are open and all use this hook, a single
  * Escape press or outside click will dismiss **all of them simultaneously**.
- * This is by design — the hook is intentionally simple for cases where
+ * This is by design - the hook is intentionally simple for cases where
  * only one manual popover is open at a time.
  *
  * For stacked/nested popovers that should dismiss one-at-a-time, use
@@ -52,7 +52,7 @@ function useSimpleLightDismiss(_ref) {
     // (trigger onClick → setIsOpen(true) → React render → useEffect).
     // By the time this effect runs, the opening click has finished
     // bubbling. A capture-phase listener added now cannot retroactively
-    // fire for that event — it only fires for *future* clicks.
+    // fire for that event - it only fires for *future* clicks.
     //
     // This avoids the need for timestamp guards or deferred binding.
     // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- binding to document for light dismiss
@@ -64,7 +64,7 @@ function useSimpleLightDismiss(_ref) {
           return;
         }
 
-        // If the click target is inside the popover, don't dismiss.
+        // If the click target is inside the popover, do not dismiss.
         if (event.target instanceof Node && el.contains(event.target)) {
           return;
         }