@atlaskit/top-layer 4.4.5 → 5.0.1

package/dist/types/internal/use-anchored-popover.d.ts

@@ -0,0 +1,143 @@
+/**
+ * Positioning AND anchor-relative sizing for top-layer popovers. Anchors an
+ * ELEMENT; to anchor a viewport coordinate use `useAnchoredPopoverAtPoint`.
+ *
+ * Two runtime paths, each a function that applies its styles and returns the
+ * cleanup: CSS Anchor Positioning in `./anchor-positioning`, and the JavaScript
+ * fallback in `./javascript-fallback`. The path is resolved ONCE, at the top of
+ * the hook, and threaded through positioning, sizing and margins.
+ *
+ * See `notes/architecture/positioning.md` and
+ * `notes/decisions/fit-available-space.md`.
+ */
+import { type RefObject } from 'react';
+import { type TPopoverAxisSize } from './anchored-popover-size';
+import { type TPlacementOptions } from './resolve-placement';
+/**
+ * Exported so `useAnchoredPopoverAtPoint` can forward the options it does not own.
+ */
+export type TAnchoredPopoverOptions = {
+    /**
+     * The element to position against. The ref OBJECT must be referentially stable,
+     * as the effect depends on it. `.current` may be `null` on the first render.
+     */
+    anchorRef: RefObject<HTMLElement | null>;
+    /**
+     * `false` means "do not position": the hook applies nothing and touches no DOM,
+     * so another strategy can own the popover. Defaults to `true`.
+     *
+     * A disabled hook holds no `setStyle` snapshot, which is what lets a consumer
+     * call this AND `useAnchoredPopoverAtPoint` on one popover with COMPLEMENTARY
+     * values. Two enabled hooks nest their snapshots, and React unwinds them in
+     * commit order rather than write order, so a stale inline value can survive.
+     */
+    isEnabled?: boolean;
+    /**
+     * Element being positioned. May be unmounted between opens; see `isOpen`.
+     */
+    popoverRef: RefObject<HTMLElement | null>;
+    /**
+     * Where the popover sits relative to the anchor, plus `offset.gap`,
+     * `offset.crossAxisShift` and `minSize`. Required, because the sizing rules read
+     * the placement axis; individual fields are optional. See `TPlacementOptions`.
+     */
+    placement: TPlacementOptions;
+    /**
+     * Re-runs the effect across open cycles, so styles and listeners follow the live
+     * host element through a remount.
+     */
+    isOpen: boolean;
+    /**
+     * How wide the popover is, defaulting to `'content'`: the natural width, so a
+     * popover too wide for the space beside its anchor slides to a roomier side
+     * rather than wrapping into it. Both axes take the same four values under the
+     * same rules - see `TPopoverAxisSize` in `anchored-popover-size.tsx`.
+     */
+    inlineSize?: TPopoverAxisSize;
+    /**
+     * The block-axis twin of `inlineSize`, so `'max-available'` caps the HEIGHT.
+     */
+    blockSize?: TPopoverAxisSize;
+    /**
+     * Leaves `inline-size` to the popover element's own styles, skipping
+     * `TPopoverAxisSize` rule 4. For an element the consumer owns and may have given
+     * a `width` of its own - `@atlaskit/popper`'s imperative `createPopper` adapter
+     * is the case. Everything positioning an unstyled `Popover` host leaves this
+     * `false`.
+     */
+    shouldPreserveInlineSize?: boolean;
+    /**
+     * Forces the JavaScript positioning fallback, so it can be exercised in any
+     * environment.
+     *
+     * @internal Testing only. Also switches sizing to measured pixels, because
+     * `anchor-size()` has no anchor to resolve against without `position-anchor`.
+     */
+    forceFallbackPositioning?: boolean;
+};
+/**
+ * Positions and sizes a popover relative to an anchor. Owns every inline style on
+ * the popover host: where it goes, how big it is relative to its anchor, and the
+ * margins that keep it clear of the anchor and the viewport edge. It knows nothing
+ * about visibility or animation - compose it with `Popover`.
+ *
+ * On modern browsers the browser handles flipping via CSS Anchor Positioning;
+ * otherwise it falls back to measured `position: fixed` coordinates, re-run on
+ * scroll and resize.
+ *
+ * `inlineSize` and `blockSize` both default to `'content'`. Two rules are
+ * surprising: fitting one axis also fits an axis left on `'content'`, and fitting
+ * either axis floors the placement axis. See `TPopoverAxisSize`.
+ *
+ * **Several React roots on one page.** The `anchor-name` this hook writes to an
+ * anchor that has none is minted from `useId()`, like every other id in the design
+ * system. `useId()` is unique within a root; across roots it is unique for
+ * client-rendered roots but NOT for roots that hydrate the same markup, where it
+ * is derived from tree position. Two anchors carrying one name resolve to the last
+ * in tree order, so a popover can attach to another root's trigger. A host that
+ * hydrates more than one root must give each a distinct `identifierPrefix` (on
+ * `hydrateRoot` and the matching server render). That is already required for the
+ * popover's own `id`, which `aria-controls` and `popovertarget` point at, and for
+ * every `aria-*` id the design system mints. A bundle with two copies of
+ * `react-dom` has the same exposure for client-rendered roots.
+ *
+ * @example Position a popover below its trigger
+ * ```tsx
+ * const triggerRef = useRef<HTMLButtonElement>(null);
+ * const popoverRef = useRef<HTMLDivElement>(null);
+ *
+ * useAnchoredPopover({
+ *   anchorRef: triggerRef,
+ *   popoverRef,
+ *   placement: { axis: 'block', edge: 'end' },
+ *   isOpen,
+ * });
+ * ```
+ *
+ * @example Match the trigger's width and keep the popover on screen
+ * ```tsx
+ * // What `<Popup shouldFitContainer shouldFitViewport>` maps to.
+ * useAnchoredPopover({
+ *   anchorRef: triggerRef,
+ *   popoverRef,
+ *   placement: { axis: 'block', edge: 'end' },
+ *   isOpen,
+ *   inlineSize: 'match-anchor',
+ *   blockSize: 'max-available',
+ * });
+ * ```
+ *
+ * @example Switch to a cursor position mid-mount
+ * ```tsx
+ * // Complementary `isEnabled`, so exactly one hook owns the popover.
+ * const shared = { popoverRef, placement, isOpen };
+ *
+ * useAnchoredPopover({ ...shared, anchorRef: triggerRef, isEnabled: !mousePos });
+ * useAnchoredPopoverAtPoint({
+ *   ...shared,
+ *   isEnabled: Boolean(mousePos),
+ *   getPoint: () => mousePosRef.current,
+ * });
+ * ```
+ */
+export declare function useAnchoredPopover({ anchorRef, popoverRef, placement, isOpen, isEnabled, inlineSize, blockSize, shouldPreserveInlineSize, forceFallbackPositioning, }: TAnchoredPopoverOptions): void;

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

@@ -9,4 +9,5 @@ export { createPopoverCloseEvent } from './create-close-event';
 /**
  * @deprecated Import from the generated per-export subpath instead.
  */
-export type { TPopoverCloseReason, TPopoverProps, TPlacementOptions } from './types';
+export type { TPopoverCloseReason, TPopoverProps } from './types';
+export type { TPlacementOptions } from '../internal/resolve-placement';

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

@@ -6,7 +6,7 @@ import React from 'react';
 import { type TPopoverForwardedProps } from './types';
 /**
  * Unopinionated top-layer primitive. Owns visibility and animation only;
- * compose with `useAnchorPosition` / `useWidthFromAnchor` for positioning.
+ * compose with `useAnchoredPopover` for positioning and sizing.
  *
  * ### 🔌 Visibility
  *

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

@@ -30,6 +30,18 @@ export type TPopoverForwardedProps = TPopoverBaseProps & {
 };
 export type { TPlacementOptions };
 type TPopoverBaseProps = {
+    /**
+     * Pass ONE element. The host is a flex row while open, so that a size cap can
+     * reach it (see `useAnchoredPopover`); two element children become two flex
+     * items SIDE BY SIDE at half width each. A fragment does not help - its children
+     * are the flex items - which is why this is not expressible as a type. It
+     * matters most where a consumer's render prop is handed through unwrapped, as
+     * `@atlaskit/popper` and `@atlaskit/spotlight` do.
+     *
+     * The host zeroes that element's `min-inline-size` and `min-block-size` so the
+     * cap can shrink a non-scrolling child, at zero specificity, so a minimum the
+     * element sets itself wins. See the host styles in `popover.tsx`.
+     */
     children: ReactNode;
     /**
      * Animation styles applied while the popover is entering.
@@ -100,7 +112,7 @@ type TPopoverBaseProps = {
      * properties (like `--ds-popover-tx`, `--ds-popover-ty`) that control the
      * slide direction. Has no effect without `shouldAnimate`.
      *
-     * This does NOT control positioning. Use `useAnchorPosition` for that.
+     * This does NOT control positioning. Use `useAnchoredPopover` for that.
      */
     placement?: TPlacementOptions;
     /**
@@ -125,8 +137,8 @@ type TPopoverBaseProps = {
  * Unopinionated top-layer primitive.
  *
  * `Popover` manages only top-layer visibility and animation. It has no
- * knowledge of positioning. For anchor positioning, compose with the
- * `useAnchorPosition` hook separately.
+ * knowledge of positioning. For anchor positioning and sizing, compose with the
+ * `useAnchoredPopover` hook separately.
  *
  * Use `Popover` directly for custom trigger lifecycles (hover, timers,
  * external state) or trigger-less UI (flags, toasts). For the common
@@ -164,17 +176,3 @@ export type TPopoverProps = TPopoverBaseProps & TAriaRoleRequired & ({
     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 `inline-size: anchor-size(self-inline)`. 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-inline-size: anchor-size(self-inline)`. Falls back to a one-off
- *   measurement of the anchor's width.
- */
-export type TWidthFromAnchorMode = 'none' | 'match-anchor' | 'min-anchor';

package/dist/types/testing/polyfill.d.ts

@@ -12,9 +12,9 @@
  *  - Popover open state tracked via `data-popover-open` (no `:popover-open` in jsdom).
  *  - Auto popovers: maintain an open stack, perform light-dismiss on document mousedown
  *    outside the open chain, and dismiss the topmost on Escape.
- *  - On open, removes any inline `opacity: 0` from the popover element so callers that
- *    rely on a `ResizeObserver` reveal callback (e.g. `use-anchor-position`) become
- *    visible in jsdom, where layout-driven RO callbacks never fire.
+ *  - On open, removes any inline `opacity: 0` from the popover element, so the
+ *    JavaScript positioning fallback's `ResizeObserver` reveal is not needed in
+ *    jsdom, where its non-zero-layout guard can never pass.
  *
  * Companion `toBeVisible` patch lives at `./to-be-visible`.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "4.4.5",
+	"version": "5.0.1",
 	"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",
@@ -40,7 +40,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^5.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^16.11.0",
+		"@atlaskit/tokens": "^17.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",

package/use-anchored-popover/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@atlaskit/top-layer/use-anchored-popover",
+  "main": "../dist/cjs/internal/use-anchored-popover.js",
+  "module": "../dist/esm/internal/use-anchored-popover.js",
+  "module:es2019": "../dist/es2019/internal/use-anchored-popover.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/internal/use-anchored-popover.d.ts"
+}

package/use-anchored-popover-at-point/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@atlaskit/top-layer/use-anchored-popover-at-point",
+  "main": "../dist/cjs/internal/use-anchored-popover-at-point.js",
+  "module": "../dist/esm/internal/use-anchored-popover-at-point.js",
+  "module:es2019": "../dist/es2019/internal/use-anchored-popover-at-point.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/internal/use-anchored-popover-at-point.d.ts"
+}

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

@@ -1,108 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.placementToTryFallbacks = placementToTryFallbacks;
-var _resolvePlacement = require("./resolve-placement");
-/**
- * A `position-area` primary edge — the placement axis joined to its edge, e.g.
- * `block-end` or `inline-start`. These are the four edges a popover can sit on.
- */
-
-function slideOnEdge(_ref) {
-  var align = _ref.align,
-    edgeKey = _ref.edgeKey,
-    crossAxis = _ref.crossAxis;
-  if (align === 'center') {
-    return ["".concat(edgeKey, " span-").concat(crossAxis, "-end"), "".concat(edgeKey, " span-").concat(crossAxis, "-start")];
-  }
-  // For `align: 'start'` the popover expands toward `end`, so the "near"
-  // span is `end` and the "far" span is `start`; `align: 'end'` mirrors
-  // this. The bare `edgeKey` (re-centered) sits between them.
-  var near = align === 'start' ? 'end' : 'start';
-  var far = align === 'start' ? 'start' : 'end';
-  return ["".concat(edgeKey, " span-").concat(crossAxis, "-").concat(near), edgeKey, "".concat(edgeKey, " span-").concat(crossAxis, "-").concat(far)];
-}
-function flipDiagonally(_ref2) {
-  var axis = _ref2.axis;
-  var flipOnMainAxis = axis === 'block' ? 'flip-block' : 'flip-inline';
-  var flipToCrossAxis = axis === 'block' ? 'flip-inline' : 'flip-block';
-  return "".concat(flipOnMainAxis, " ").concat(flipToCrossAxis);
-}
-
-/**
- * Returns the `position-try-fallbacks` value for a placement.
- *
- * @example
- * // Centered on the block-end edge (the default placement):
- * placementToTryFallbacks({ placement: { axis: 'block', edge: 'end', align: 'center' } });
- * // => 'block-end span-inline-end, block-end span-inline-start, flip-block,
- * //     block-start span-inline-end, block-start span-inline-start'
- */
-function placementToTryFallbacks(_ref3) {
-  var placement = _ref3.placement;
-  /**
-   * **Build the fallback list**
-   *
-   * Each entry is a complete alternative position.
-   * The browser tries them _in order_ and uses the _first_ one that fits.
-   */
-
-  var resolved = (0, _resolvePlacement.resolvePlacement)({
-    placement: placement
-  });
-  var axis = resolved.axis,
-    edge = resolved.edge,
-    align = resolved.align;
-  var crossAxis = axis === 'block' ? 'inline' : 'block';
-  var flippedEdge = edge === 'start' ? 'end' : 'start';
-  var sameEdgeArea = "".concat(axis, "-").concat(edge);
-  var oppositeEdgeArea = "".concat(axis, "-").concat(flippedEdge);
-  var flipOnMainAxis = axis === 'block' ? 'flip-block' : 'flip-inline';
-
-  /**
-   * **Fallback algorithm**
-   *
-   * We have two things we can do to keep something visible:
-   *
-   * 1. _Slide_ along edges
-   * 2. _Flip_ to another edge
-   *
-   * _Centered popover_
-   *
-   * Desired: Sits in middle of main edge
-   *
-   * Fallbacks:
-   *  1: _Slide_ along main edge on the cross axis
-   *  2: _Flip_ on main axis to opposite edge (centered)
-   *  3: _Slide_ along opposite edge on the cross axis
-   *
-   * _Start or end aligned popover_
-   *
-   * Desired: Sits at start / end of main edge
-   *
-   * Fallbacks:
-   *  1: _Slide_ along main edge on the cross axis
-   *  2: _Flip_ on main axis to opposite edge
-   *  3: _Flip_ on the diagonal (flip main axis + flip cross axis) into the
-   *     opposite corner. For start / end alignment, this is the clean escape
-   *     when the popover would otherwise land offscreen on both axes (ie in a
-   *     corner). Rule 4 gets the job done, but a slide drops the gap
-   *     as named position-area values don't carry margins).
-   *     The diagonal flip keeps the gap and the alignment.
-   *  4: _Slide_ along opposite edge on the cross axis
-   */
-
-  return [slideOnEdge({
-    align: align,
-    edgeKey: sameEdgeArea,
-    crossAxis: crossAxis
-  }), flipOnMainAxis, align !== 'center' ? flipDiagonally({
-    axis: axis
-  }) : null, slideOnEdge({
-    align: align,
-    edgeKey: oppositeEdgeArea,
-    crossAxis: crossAxis
-  })].filter(Boolean).flat().join(', ');
-}

package/dist/cjs/internal/resolve-css-length-to-pixels.js

@@ -1,104 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.resolveCssLengthToPixels = resolveCssLengthToPixels;
-var elementCaches = new WeakMap();
-function canCacheResolvedLength(value) {
-  // Custom-property values can be retargeted by inline overrides on the
-  // consumer's wrapper, so we cannot prove a cached pixel value is still valid.
-  return !value.includes('var(');
-}
-function getCachedResolvedLength(_ref) {
-  var _cacheForElement$get;
-  var element = _ref.element,
-    value = _ref.value;
-  if (!canCacheResolvedLength(value)) {
-    return null;
-  }
-  var cacheForElement = elementCaches.get(element);
-  return (_cacheForElement$get = cacheForElement === null || cacheForElement === void 0 ? void 0 : cacheForElement.get(value)) !== null && _cacheForElement$get !== void 0 ? _cacheForElement$get : null;
-}
-function cacheResolvedLength(_ref2) {
-  var _elementCaches$get;
-  var element = _ref2.element,
-    value = _ref2.value,
-    result = _ref2.result;
-  if (!canCacheResolvedLength(value)) {
-    return;
-  }
-  var cacheForElement = (_elementCaches$get = elementCaches.get(element)) !== null && _elementCaches$get !== void 0 ? _elementCaches$get : new Map();
-  cacheForElement.set(value, result);
-  elementCaches.set(element, cacheForElement);
-}
-
-/**
- * Resolves a CSS length value to a pixel number using a hidden DOM probe.
- *
- * Used by the JS positioning fallback: consumer offsets can be numbers,
- * `${n}px` strings, tokenised `var(--ds-space-100, 8px)` strings, `calc()`
- * expressions, viewport units, etc. Parsing arbitrary CSS in JS is fragile
- * (and impossible for `calc(var(...))` without a layout context), so we let
- * the browser do the math.
- *
- * The probe is appended to `container` so it inherits the same containing
- * block, font size, and custom-property scope as the popover.
- *
- * Cost: one synchronous reflow on first cacheable resolution per
- * (container, value) pair, then a `WeakMap` lookup. Resolutions involving
- * `var(` are intentionally not cached.
- */
-function resolveCssLengthToPixels(_ref3) {
-  var value = _ref3.value,
-    container = _ref3.container;
-  if (typeof value === 'number') {
-    return value;
-  }
-
-  // Fast path: unitless zero is universally zero pixels - accept `'0'` and
-  // `'-0'` without a probe. (Consumers occasionally pass `'0'` instead of
-  // the number `0`.)
-  if (value === '0' || value === '-0') {
-    return 0;
-  }
-
-  // Fast path: bare `${n}px` strings come from the consumer normalisation
-  // in `resolvePlacement`. Avoid a reflow when we can.
-  var pxMatch = value.match(/^(-?\d+(?:\.\d+)?)px$/);
-  if (pxMatch) {
-    return Number(pxMatch[1]);
-  }
-  var cached = getCachedResolvedLength({
-    element: container,
-    value: value
-  });
-  if (cached !== null) {
-    return cached;
-  }
-  var probe = container.ownerDocument.createElement('div');
-  probe.style.position = 'absolute';
-  probe.style.visibility = 'hidden';
-  probe.style.pointerEvents = 'none';
-  probe.style.height = '0';
-  probe.style.padding = '0';
-  probe.style.border = '0';
-  // `width` clamps negatives to 0; use `margin-left` instead so signs are
-  // preserved. `getComputedStyle` returns the resolved pixel value for
-  // margin-* properties even when the source was a token / calc / var.
-  probe.style.marginLeft = value;
-  // Hide the probe from assistive tech and event targeting; defensive
-  // against `getElementsByTagName('div')` walks in consumer code.
-  probe.setAttribute('aria-hidden', 'true');
-  probe.setAttribute('inert', '');
-  container.appendChild(probe);
-  var resolved = parseFloat(getComputedStyle(probe).marginLeft);
-  container.removeChild(probe);
-  var result = Number.isFinite(resolved) ? resolved : 0;
-  cacheResolvedLength({
-    element: container,
-    value: value,
-    result: result
-  });
-  return result;
-}

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

@@ -1,129 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useAnchorPositionAtPoint = useAnchorPositionAtPoint;
-var _react = require("react");
-var _useAnchorPosition = require("./use-anchor-position");
-/**
- * A point in viewport coordinates (CSS pixels) at which the synthetic
- * anchor should be placed.
- *
- * Axis-named (`x`/`y`) rather than edge-named (`left`/`top`) so the
- * shape is unambiguous in RTL writing modes - there is no ambiguity
- * about whether a coordinate is logical (`inline-start`/`block-start`)
- * or physical (`left`/`top`). Viewport coordinates are always
- * physical, so we name them with the physical axis labels.
- */
-
-/**
- * Styles the synthetic anchor as an invisible, zero-size point.
- * Dynamic `inset-*` overrides are written by the positioning effect.
- *
- * Uses `Object.assign` rather than Compiled CSS (element is outside the React tree)
- * or the internal `setStyle` helper (we own this element entirely - it is created
- * and removed by this hook - so the snapshot/restore semantics `setStyle`
- * provides for caller-owned elements would be dead work here).
- */
-function applyStaticAnchorStyles(element) {
-  Object.assign(element.style, {
-    position: 'fixed',
-    // `top`/`left` rather than `inset-block-start`/`inset-inline-start`
-    // for consistency with the dynamic positioning effect below, which
-    // uses physical properties (see comment there for the rationale).
-    top: '0',
-    left: '0',
-    // Zero size - placement decides which side the popover sits on.
-    width: '0',
-    height: '0',
-    // Prevent the overlay from intercepting pointer events.
-    pointerEvents: 'none'
-  });
-}
-
-// `useAnchorPosition` requires a real DOM element. When the caller only
-// has a viewport coordinate (e.g. cursor at hover time), this hook
-// manages a hidden `<div>` at that point and delegates the rest.
-//
-// The `<div>` is appended directly to `document.body` to escape any
-// transformed ancestor, which would otherwise break `position: fixed`
-// viewport-relative resolution.
-
-/**
- * Positions a popover at a consumer-supplied viewport coordinate using a
- * hidden synthetic anchor.
- *
- * @example
- * ```tsx
- * function PointPositionedPopover({ popoverRef, placement, mousePos }) {
- *   useAnchorPositionAtPoint({
- *     popoverRef,
- *     placement,
- *     isEnabled: Boolean(mousePos),
- *     getPoint: () => {
- *       if (!mousePos) return null;
- *       return { x: mousePos.clientX, y: mousePos.clientY };
- *     },
- *   });
- *   return <Popover ref={popoverRef}>...</Popover>;
- * }
- * ```
- */
-function useAnchorPositionAtPoint(_ref) {
-  var popoverRef = _ref.popoverRef,
-    placement = _ref.placement,
-    getPoint = _ref.getPoint,
-    _ref$isEnabled = _ref.isEnabled,
-    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
-    isOpen = _ref.isOpen;
-  var syntheticAnchorRef = (0, _react.useRef)(null);
-
-  // `getPoint` is kept in a ref so the layout effect can call the
-  // latest version without listing it as a dep - that would re-fire
-  // on every render and re-latch the point.
-  var getPointRef = (0, _react.useRef)(getPoint);
-  getPointRef.current = getPoint;
-
-  // Lazy element creation: the `<div>` is only created when both
-  // `isEnabled` is true AND `getPoint()` returns a non-null point.
-  // `useLayoutEffect` ensures the element exists before the inner
-  // `useAnchorPosition` (also a layout effect) reads the ref.
-  (0, _react.useLayoutEffect)(function () {
-    if (!isEnabled) {
-      return;
-    }
-    var point = getPointRef.current();
-    if (!point) {
-      return;
-    }
-    var anchor = document.createElement('div');
-    anchor.setAttribute('aria-hidden', 'true');
-    applyStaticAnchorStyles(anchor);
-    // `point.x`/`y` are physical viewport coordinates (from
-    // `MouseEvent.clientX/Y`), so map directly onto physical
-    // `left`/`top`. This is RTL-safe: `position: fixed` + physical
-    // insets is direction-independent. Using logical
-    // `inset-inline-start` would need `viewportWidth - point.x` in
-    // RTL to land at the same physical pixel.
-    anchor.style.top = "".concat(point.y, "px");
-    anchor.style.left = "".concat(point.x, "px");
-    document.body.appendChild(anchor);
-    syntheticAnchorRef.current = anchor;
-    return function cleanup() {
-      anchor.remove();
-      syntheticAnchorRef.current = null;
-    };
-  }, [isEnabled]);
-
-  // Mirror `isEnabled` so both hooks stay in sync - when disabled,
-  // neither this hook nor the inner one touches the popover, leaving
-  // any other positioning the consumer has set up free to take effect.
-  (0, _useAnchorPosition.useAnchorPosition)({
-    anchorRef: syntheticAnchorRef,
-    popoverRef: popoverRef,
-    placement: placement,
-    isEnabled: isEnabled,
-    isOpen: isOpen
-  });
-}