@atlaskit/top-layer 4.4.5 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "4.4.5",
+	"version": "5.0.0",
 	"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": "^16.12.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
-  });
-}