@atlaskit/top-layer 0.12.0 → 0.12.2

package/dist/cjs/use-arrow-navigation/use-arrow-navigation.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isAtCurrentMenuLevel = isAtCurrentMenuLevel;
 exports.useArrowNavigation = useArrowNavigation;
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
@@ -12,86 +11,6 @@ var _keycodes = require("@atlaskit/ds-lib/keycodes");
 var _focus = require("../focus");
 var menuScope = '[role="menu"]';
 
-/**
- * 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.
- *
- * Uses `element.closest('[role="menu"]')` to determine the nearest menu
- * scope. If the nearest scope is the container's own `role="menu"` element,
- * the element belongs to this level. If it is a different (nested) menu,
- * the element belongs to a child level and should be excluded.
- *
- * Supports two container patterns:
- *
- * **1. Container has `role="menu"` directly** (preferred, used by avatar-group):
- *   ```
- *   <div ref={containerRef} role="menu">
- *     <button role="menuitem" />   ← isAtCurrentMenuLevel → true
- *     <div role="menu">            ← nested sub-menu
- *       <button role="menuitem" /> ← isAtCurrentMenuLevel → false
- *     </div>
- *   </div>
- *   ```
- *   Uses the simple check: `element.closest('[role="menu"]') === container`
- *
- * **2. Container is a wrapper without `role="menu"`** (used by dropdown-menu,
- *   where `MenuGroup` owns `role="menu"` but does not accept a ref):
- *   ```
- *   <div ref={containerRef}>         ← wrapper (no role="menu")
- *     <MenuGroup role="menu">
- *       <button role="menuitem" />   ← isAtCurrentMenuLevel → true
- *       <div role="menu">            ← nested sub-menu
- *         <button role="menuitem" /> ← isAtCurrentMenuLevel → false
- *       </div>
- *     </MenuGroup>
- *   </div>
- *   ```
- *   Falls back to walking the DOM to check that the element's closest
- *   `role="menu"` is the container's own menu (not doubly nested).
- *
- * Ideally all consumers should use pattern 1 (place the ref directly on the
- * `role="menu"` element). Pattern 2 exists because `@atlaskit/menu`'s
- * `MenuGroup` does not currently accept a ref. If `MenuGroup` gains ref
- * support in the future, dropdown-menu should switch to pattern 1 and the
- * fallback path can be removed.
- *
- * Used both as a `TFocusableFilter` (to scope getNextFocusable etc.) and as
- * a guard to prevent parent menu handlers from acting on events that
- * belong to a nested menu.
- */
-function isAtCurrentMenuLevel(element, container) {
-  var closestMenu = element.closest(menuScope);
-
-  // Container itself has role="menu". Element belongs to this level
-  // if its closest menu is the container.
-  if (container.getAttribute('role') === 'menu') {
-    return closestMenu === container;
-  }
-
-  // Container is a wrapper without role="menu" (e.g. dropdown-menu
-  // wraps a MenuGroup). The element belongs to the top level if its
-  // closest role="menu" ancestor is a direct child of the container,
-  // i.e. there is no nested role="menu" between them.
-  if (closestMenu === null) {
-    return true;
-  }
-
-  // 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;
-}
-
 /**
  * Args for `useArrowNavigation`.
  *
@@ -142,7 +61,6 @@ function isAtCurrentMenuLevel(element, container) {
  * });
  * ```
  */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 function useArrowNavigation(_ref) {
   var containerRef = _ref.containerRef,
     onClose = _ref.onClose,

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;
         }

package/dist/es2019/animations/presets.js

@@ -1,6 +1,6 @@
 import { getPlacement } from '../internal/resolve-placement';
 
-// ── slideAndFade ──
+// slideAndFade
 
 function getSlideAndFadeProperties({
   placement,
@@ -123,7 +123,7 @@ export function slideAndFade(options) {
   };
 }
 
-// ── fade ──
+// fade
 
 const FADE_CSS = `
 [data-ds-popover-fade] {
@@ -175,7 +175,7 @@ export function fade() {
   };
 }
 
-// ── scaleAndFade ──
+// scaleAndFade
 
 const SCALE_AND_FADE_CSS = `
 [data-ds-popover-scale-and-fade] {
@@ -235,7 +235,7 @@ export function scaleAndFade() {
 // Dialog presets
 // ══════════════════════════════════════════════════════════════════════════════
 
-// ── dialogSlideUpAndFade ──
+// dialogSlideUpAndFade
 
 const DIALOG_SLIDE_UP_AND_FADE_CSS = `
 [data-ds-dialog-slide-up-and-fade] {
@@ -322,7 +322,7 @@ export function dialogSlideUpAndFade(options) {
   };
 }
 
-// ── dialogFade ──
+// dialogFade
 
 const DIALOG_FADE_CSS = `
 [data-ds-dialog-fade] {

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

@@ -2,7 +2,7 @@
  * 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/es2019/dialog/dialog-content.js

@@ -49,7 +49,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
   const ownRef = useRef(null);
   const combinedRef = mergeRefs([ownRef, ref]);
 
-  // ── Animation lifecycle ──
+  // Animation lifecycle
   const {
     showChildren,
     preset
@@ -60,7 +60,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     onExitFinish
   });
 
-  // ── 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.
@@ -69,7 +69,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     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.
   useNotifyOpenLayerObserver({
@@ -100,7 +100,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     }
   }, [isOpen]);
 
-  // ── Handle native Escape (cancel event) ──
+  // Handle native Escape (cancel event)
   const handleCancel = useCallback(event => {
     event.preventDefault();
     onClose({
@@ -108,7 +108,7 @@ export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
     });
   }, [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/es2019/entry-points/use-arrow-navigation.js

@@ -1 +1,2 @@
-export { useArrowNavigation, isAtCurrentMenuLevel } from '../use-arrow-navigation';
+export { useArrowNavigation } from '../use-arrow-navigation';
+export { isAtCurrentMenuLevel } from '../use-arrow-navigation/is-at-current-menu-level';

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

@@ -4,7 +4,7 @@
  * 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/es2019/internal/placement-to-position-area.js

@@ -0,0 +1,40 @@
+import { getPlacement } from './resolve-placement';
+
+/**
+ * Resolves placement options to CSS `position-area` syntax.
+ *
+ * The `align` field represents the *visual* alignment:
+ * - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
+ * - `align: 'end'` means "aligned to the trigger's end edge"
+ * - `align: 'center'` means centered (single-axis position-area)
+ *
+ * CSS `position-area` uses `span-*` keywords which indicate the *expansion direction*.
+ * Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
+ * This function handles the inversion internally.
+ *
+ * @example
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } })   // → 'block-end span-inline-start'
+ */
+export function placementToPositionArea({
+  placement
+}) {
+  const {
+    axis,
+    edge,
+    align
+  } = getPlacement({
+    placement
+  });
+  const edgeValue = `${axis}-${edge}`;
+  if (align === 'center') {
+    return edgeValue;
+  }
+
+  // Cross-axis name: block ↔ inline
+  const crossAxis = axis === 'block' ? 'inline' : 'block';
+  // Invert align → CSS span direction: visual 'start' → span toward 'end'
+  const spanDir = align === 'start' ? 'end' : 'start';
+  return `${edgeValue} span-${crossAxis}-${spanDir}`;
+}

package/dist/es2019/internal/placement-to-try-fallbacks.js

@@ -0,0 +1,77 @@
+import { getPlacement } from './resolve-placement';
+
+/**
+ * Returns `position-try-fallbacks` value based on placement.
+ *
+ * For centered placements, includes cross-axis aligned position-area
+ * values so the browser can shift the popover along the cross-axis
+ * when the centered position would overflow the viewport edge.
+ *
+ * Fallback order for centered placements (e.g. `block-end`):
+ * 1. Same edge, start-aligned (shift for near-edge overflow)
+ * 2. Same edge, end-aligned (shift for far-edge overflow)
+ * 3. Flipped edge, centered
+ * 4. Flipped edge, start-aligned
+ * 5. Flipped edge, end-aligned
+ *
+ * For aligned placements (start/end), includes the same-edge centered
+ * position as fallbacks so the browser can try centering when the aligned
+ * position would overflow, before flipping to the opposite edge.
+ *
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
+ *
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
+ * mirrors the popup diagonally. It flips BOTH the position-area AND both
+ * inline and block margins simultaneously, placing the popup at the
+ * diagonally opposite corner where there is always space.
+ *
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
+ * tactic keywords correctly flip the gap margin along with the position.
+ */
+export function placementToTryFallbacks({
+  placement
+}) {
+  const {
+    axis,
+    edge,
+    align
+  } = getPlacement({
+    placement
+  });
+  const crossAxis = axis === 'block' ? 'inline' : 'block';
+  const flippedEdge = edge === 'start' ? 'end' : 'start';
+  const sameEdge = `${axis}-${edge}`;
+  const oppositeEdge = `${axis}-${flippedEdge}`;
+  const flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
+  const flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
+
+  // Single algorithm: produce the shift list against any base alignment.
+  // For `align: 'start'` the "near" shift expands toward `end`; for
+  // `align: 'end'` it expands toward `start`; for `align: 'center'`
+  // either order is symmetric (we use end-then-start to match the
+  // historical fallback list).
+  function shifts(baseAlign, edgeKey) {
+    if (baseAlign === 'center') {
+      return [`${edgeKey} span-${crossAxis}-end`, `${edgeKey} span-${crossAxis}-start`];
+    }
+    const near = baseAlign === 'start' ? 'end' : 'start';
+    const far = baseAlign === 'start' ? 'start' : 'end';
+    return [`${edgeKey} span-${crossAxis}-${near}`, edgeKey, `${edgeKey} span-${crossAxis}-${far}`];
+  }
+  if (align !== 'center') {
+    // Aligned (start/end): try same-edge shifts, then single-axis flip,
+    // then diagonal flip for corner overflow, then opposite-edge shifts.
+    // Legacy Popper fallback ordering for e.g. bottom-start:
+    // [bottom, bottom-end, top-start, top, top-end, auto].
+    return [...shifts(align, sameEdge), flipKeyword, `${flipKeyword} ${flipCrossKeyword}`, ...shifts(align, oppositeEdge)].join(', ');
+  }
+
+  // Centered: same-edge shifts, single-axis flip, opposite-edge shifts.
+  // Diagonal flip is unnecessary because centered placements expand
+  // equally in both cross-axis directions.
+  return [...shifts('center', sameEdge), flipKeyword, ...shifts('center', oppositeEdge)].join(', ');
+}

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

@@ -7,7 +7,7 @@ import once from '@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/es2019/internal/resolve-placement.js

@@ -25,8 +25,8 @@ const 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/es2019/internal/role-types.js

@@ -22,7 +22,7 @@
  * (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/es2019/internal/slot.js

@@ -21,14 +21,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
@@ -43,7 +43,7 @@ export const Slot = /*#__PURE__*/forwardRef(function Slot(slotProps, ref) {
     children: rawChildren,
     ...props
   } = slotProps;
-  // `SlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
+  // `TSlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
   const children = rawChildren;
   if (!isSlotChild(children)) {
     return children;

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

@@ -18,6 +18,8 @@ import rafSchedule from 'raf-schd';
 import once from '@atlaskit/ds-lib/once';
 import { computeFallbackPosition } from './anchor-positioning-fallback';
 import { combine } from './combine';
+import { placementToPositionArea } from './placement-to-position-area';
+import { placementToTryFallbacks } from './placement-to-try-fallbacks';
 import { resolveCssLengthToPixels } from './resolve-css-length-to-pixels';
 import { getPlacement } from './resolve-placement';
 import { setStyle } from './set-style';
@@ -26,132 +28,16 @@ import { setStyle } from './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.
  */
-const NoopResizeObserver = class {
-  observe() {}
-  unobserve() {}
+const noopResizeObserver = {
+  observe() {},
+  unobserve() {},
   disconnect() {}
 };
 
-/**
- * Resolves placement options to CSS `position-area` syntax.
- *
- * The `align` field represents the *visual* alignment:
- * - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
- * - `align: 'end'` means "aligned to the trigger's end edge"
- * - `align: 'center'` means centered (single-axis position-area)
- *
- * CSS `position-area` uses `span-*` keywords which indicate the *expansion direction*.
- * Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
- * This function handles the inversion internally.
- *
- * @example
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } })   // → 'block-end span-inline-start'
- */
-export function placementToPositionArea({
-  placement
-}) {
-  const {
-    axis,
-    edge,
-    align
-  } = getPlacement({
-    placement
-  });
-  const edgeValue = `${axis}-${edge}`;
-  if (align === 'center') {
-    return edgeValue;
-  }
-
-  // Cross-axis name: block ↔ inline
-  const crossAxis = axis === 'block' ? 'inline' : 'block';
-  // Invert align → CSS span direction: visual 'start' → span toward 'end'
-  const spanDir = align === 'start' ? 'end' : 'start';
-  return `${edgeValue} span-${crossAxis}-${spanDir}`;
-}
-
-/**
- * Returns `position-try-fallbacks` value based on placement.
- *
- * For centered placements, includes cross-axis aligned position-area
- * values so the browser can shift the popover along the cross-axis
- * when the centered position would overflow the viewport edge.
- *
- * Fallback order for centered placements (e.g. `block-end`):
- * 1. Same edge, start-aligned (shift for near-edge overflow)
- * 2. Same edge, end-aligned (shift for far-edge overflow)
- * 3. Flipped edge, centered
- * 4. Flipped edge, start-aligned
- * 5. Flipped edge, end-aligned
- *
- * For aligned placements (start/end), includes the same-edge centered
- * position as fallbacks so the browser can try centering when the aligned
- * position would overflow, before flipping to the opposite edge.
- *
- * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
- *
- * When a popup is in a viewport corner (e.g. inline-end align-end at the
- * top-right), flipping only the primary axis (`flip-inline`) moves the popup
- * to the left but keeps the same cross-axis span direction (e.g. upward),
- * which is still off-screen. The combined keyword `flip-inline flip-block`
- * mirrors the popup diagonally. It flips BOTH the position-area AND both
- * inline and block margins simultaneously, placing the popup at the
- * diagonally opposite corner where there is always space.
- *
- * Named `position-area` entries (e.g. `inline-start span-block-end`) in
- * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
- * tactic keywords correctly flip the gap margin along with the position.
- */
-// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export function placementToTryFallbacks({
-  placement
-}) {
-  const {
-    axis,
-    edge,
-    align
-  } = getPlacement({
-    placement
-  });
-  const crossAxis = axis === 'block' ? 'inline' : 'block';
-  const flippedEdge = edge === 'start' ? 'end' : 'start';
-  const sameEdge = `${axis}-${edge}`;
-  const oppositeEdge = `${axis}-${flippedEdge}`;
-  const flipKeyword = axis === 'block' ? 'flip-block' : 'flip-inline';
-  const flipCrossKeyword = axis === 'block' ? 'flip-inline' : 'flip-block';
-
-  // Single algorithm: produce the shift list against any base alignment.
-  // For `align: 'start'` the "near" shift expands toward `end`; for
-  // `align: 'end'` it expands toward `start`; for `align: 'center'`
-  // either order is symmetric (we use end-then-start to match the
-  // historical fallback list).
-  function shifts(baseAlign, edgeKey) {
-    if (baseAlign === 'center') {
-      return [`${edgeKey} span-${crossAxis}-end`, `${edgeKey} span-${crossAxis}-start`];
-    }
-    const near = baseAlign === 'start' ? 'end' : 'start';
-    const far = baseAlign === 'start' ? 'start' : 'end';
-    return [`${edgeKey} span-${crossAxis}-${near}`, edgeKey, `${edgeKey} span-${crossAxis}-${far}`];
-  }
-  if (align !== 'center') {
-    // Aligned (start/end): try same-edge shifts, then single-axis flip,
-    // then diagonal flip for corner overflow, then opposite-edge shifts.
-    // Legacy Popper fallback ordering for e.g. bottom-start:
-    // [bottom, bottom-end, top-start, top, top-end, auto].
-    return [...shifts(align, sameEdge), flipKeyword, `${flipKeyword} ${flipCrossKeyword}`, ...shifts(align, oppositeEdge)].join(', ');
-  }
-
-  // Centered: same-edge shifts, single-axis flip, opposite-edge shifts.
-  // Diagonal flip is unnecessary because centered placements expand
-  // equally in both cross-axis directions.
-  return [...shifts('center', sameEdge), flipKeyword, ...shifts('center', oppositeEdge)].join(', ');
-}
-
 /**
  * Returns true when the popover is currently open. Wrapped because the
  * `:popover-open` pseudo-class is not implemented in some test environments
@@ -443,7 +329,7 @@ export function useAnchorPosition({
       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.
@@ -513,20 +399,17 @@ export function useAnchorPosition({
     // 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.
-    const ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
-    const resizeObserver = new ResizeObserverImpl(() => {
+    // (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.
+    const resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => {
       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