@atlaskit/top-layer 4.4.5 → 5.0.0

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

@@ -1,108 +0,0 @@
-import { resolvePlacement } from './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({
-  align,
-  edgeKey,
-  crossAxis
-}) {
-  if (align === 'center') {
-    return [`${edgeKey} span-${crossAxis}-end`, `${edgeKey} span-${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.
-  const near = align === 'start' ? 'end' : 'start';
-  const far = align === 'start' ? 'start' : 'end';
-  return [`${edgeKey} span-${crossAxis}-${near}`, edgeKey, `${edgeKey} span-${crossAxis}-${far}`];
-}
-function flipDiagonally({
-  axis
-}) {
-  const flipOnMainAxis = axis === 'block' ? 'flip-block' : 'flip-inline';
-  const flipToCrossAxis = axis === 'block' ? 'flip-inline' : 'flip-block';
-  return `${flipOnMainAxis} ${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'
- */
-export function placementToTryFallbacks({
-  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.
-   */
-
-  const resolved = resolvePlacement({
-    placement
-  });
-  const {
-    axis,
-    edge,
-    align
-  } = resolved;
-  const crossAxis = axis === 'block' ? 'inline' : 'block';
-  const flippedEdge = edge === 'start' ? 'end' : 'start';
-  const sameEdgeArea = `${axis}-${edge}`;
-  const oppositeEdgeArea = `${axis}-${flippedEdge}`;
-  const 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,
-    edgeKey: sameEdgeArea,
-    crossAxis
-  }), flipOnMainAxis, align !== 'center' ? flipDiagonally({
-    axis
-  }) : null, slideOnEdge({
-    align,
-    edgeKey: oppositeEdgeArea,
-    crossAxis
-  })].filter(Boolean).flat().join(', ');
-}

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

@@ -1,101 +0,0 @@
-const 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({
-  element,
-  value
-}) {
-  var _cacheForElement$get;
-  if (!canCacheResolvedLength(value)) {
-    return null;
-  }
-  const 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({
-  element,
-  value,
-  result
-}) {
-  var _elementCaches$get;
-  if (!canCacheResolvedLength(value)) {
-    return;
-  }
-  const 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.
- */
-export function resolveCssLengthToPixels({
-  value,
-  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.
-  const pxMatch = value.match(/^(-?\d+(?:\.\d+)?)px$/);
-  if (pxMatch) {
-    return Number(pxMatch[1]);
-  }
-  const cached = getCachedResolvedLength({
-    element: container,
-    value
-  });
-  if (cached !== null) {
-    return cached;
-  }
-  const 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);
-  const resolved = parseFloat(getComputedStyle(probe).marginLeft);
-  container.removeChild(probe);
-  const result = Number.isFinite(resolved) ? resolved : 0;
-  cacheResolvedLength({
-    element: container,
-    value,
-    result
-  });
-  return result;
-}

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

@@ -1,124 +0,0 @@
-import { useLayoutEffect, useRef } from 'react';
-import { useAnchorPosition } from './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>;
- * }
- * ```
- */
-export function useAnchorPositionAtPoint({
-  popoverRef,
-  placement,
-  getPoint,
-  isEnabled = true,
-  isOpen
-}) {
-  const syntheticAnchorRef = 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.
-  const getPointRef = 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.
-  useLayoutEffect(() => {
-    if (!isEnabled) {
-      return;
-    }
-    const point = getPointRef.current();
-    if (!point) {
-      return;
-    }
-    const 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 = `${point.y}px`;
-    anchor.style.left = `${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.
-  useAnchorPosition({
-    anchorRef: syntheticAnchorRef,
-    popoverRef,
-    placement,
-    isEnabled,
-    isOpen
-  });
-}