@atlaskit/top-layer 0.11.0 → 0.12.1

package/dist/esm/arrow/index.js

@@ -1,124 +0,0 @@
-import once from '@atlaskit/ds-lib/once';
-import { getPlacement } from '../internal/resolve-placement';
-import { placementToPositionArea } from '../internal/use-anchor-position';
-/**
- * CSS for popover arrows using the `clip-path: inset() margin-box` technique.
- *
- * How it works:
- * 1. Four arrow shapes exist simultaneously as `::before` (top/bottom) and
- *    `::after` (left/right) hexagonal pseudo-elements.
- * 2. `clip-path: inset(0) margin-box` clips the popover to its margin-box.
- * 3. Margin on the anchor-facing side pushes the popover away, creating space
- *    where one arrow "escapes" the clip boundary and becomes visible.
- * 4. `@position-try` rules change both `position-area` and `margin` when
- *    flipping, ensuring the correct arrow is always shown.
- *
- * Constraints:
- * - `box-shadow` must be `none` (interferes with `clip-path: inset() margin-box`)
- * - `::before` and `::after` are consumed - consumers cannot use them
- * - Arrow pseudo-elements use `background: inherit` from the popover element
- *
- * @see https://goulet.dev/posts/tooltip-with-popover-and-anchor-positioning/
- */
-var ARROW_CSS = "\n[data-ds-popover-arrow] {\n  clip-path: inset(var(--ds-arrow-offset, 0px)) margin-box;\n  box-shadow: none;\n}\n\n/* Top and Bottom arrows (vertical hexagon) */\n[data-ds-popover-arrow]::before {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  background: inherit;\n  left: 50%;\n  transform: translateX(-50%);\n  width: calc(var(--ds-arrow-size, 8px) * 2);\n  height: calc(100% + var(--ds-arrow-size, 8px) * 2);\n  top: calc(var(--ds-arrow-size, 8px) * -1);\n  clip-path: polygon(\n    0 var(--ds-arrow-size, 8px),\n    50% 0,\n    100% var(--ds-arrow-size, 8px),\n    100% calc(100% - var(--ds-arrow-size, 8px)),\n    50% 100%,\n    0 calc(100% - var(--ds-arrow-size, 8px))\n  );\n}\n\n/* Left and Right arrows (horizontal hexagon) */\n[data-ds-popover-arrow]::after {\n  content: \"\";\n  position: absolute;\n  z-index: -1;\n  background: inherit;\n  top: 50%;\n  transform: translateY(-50%);\n  height: calc(var(--ds-arrow-size, 8px) * 2);\n  width: calc(100% + var(--ds-arrow-size, 8px) * 2);\n  left: calc(var(--ds-arrow-size, 8px) * -1);\n  clip-path: polygon(\n    var(--ds-arrow-size, 8px) 0,\n    calc(100% - var(--ds-arrow-size, 8px)) 0,\n    100% 50%,\n    calc(100% - var(--ds-arrow-size, 8px)) 100%,\n    var(--ds-arrow-size, 8px) 100%,\n    0 50%\n  );\n}\n\n/* \u2500\u2500 @position-try rules \u2500\u2500\n * One rule per possible position-area value.\n * Each sets the position-area and the correct margin direction\n * so the arrow on the anchor-facing side is revealed.\n *\n * Margin direction per edge:\n *   block-start  (above anchor) \u2192 margin-block-end   (bottom, facing anchor)\n *   block-end    (below anchor) \u2192 margin-block-start  (top, facing anchor)\n *   inline-start (left of anchor) \u2192 margin-inline-end (right, facing anchor)\n *   inline-end   (right of anchor) \u2192 margin-inline-start (left, facing anchor)\n */\n\n/* Each rule sets two margins: the anchor-facing margin for the gap\n   (via --ds-arrow-size) and one cross-axis margin for the shift\n   (via one of --ds-cross-axis-shift-margin-start, --ds-cross-axis-shift-margin-end,\n   --ds-cross-axis-shift-margin-block-start, or --ds-cross-axis-shift-margin-block-end). The\n   side matches the popover's anchored cross-axis edge per align. Only\n   one of the four properties is non-zero at a time; useAnchorPosition\n   picks it. See notes/architecture/positioning.md for details. */\n/* Single-axis centered (align: center) */\n@position-try --ds-arrow-block-start {\n  position-area: block-start;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\n}\n@position-try --ds-arrow-block-end {\n  position-area: block-end;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\n}\n@position-try --ds-arrow-inline-start {\n  position-area: inline-start;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\n}\n@position-try --ds-arrow-inline-end {\n  position-area: inline-end;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\n}\n\n/* Block edge + inline span (align: start uses span-inline-end; align: end uses span-inline-start) */\n@position-try --ds-arrow-block-start-span-inline-start {\n  position-area: block-start span-inline-start;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n  margin-inline-end: var(--ds-cross-axis-shift-margin-end, 0px);\n}\n@position-try --ds-arrow-block-start-span-inline-end {\n  position-area: block-start span-inline-end;\n  margin: 0;\n  margin-block-end: var(--ds-arrow-size, 8px);\n  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\n}\n@position-try --ds-arrow-block-end-span-inline-start {\n  position-area: block-end span-inline-start;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n  margin-inline-end: var(--ds-cross-axis-shift-margin-end, 0px);\n}\n@position-try --ds-arrow-block-end-span-inline-end {\n  position-area: block-end span-inline-end;\n  margin: 0;\n  margin-block-start: var(--ds-arrow-size, 8px);\n  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);\n}\n\n/* Inline edge + block span (align: start uses span-block-end; align: end uses span-block-start) */\n@position-try --ds-arrow-inline-start-span-block-start {\n  position-area: inline-start span-block-start;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n  margin-block-end: var(--ds-cross-axis-shift-margin-block-end, 0px);\n}\n@position-try --ds-arrow-inline-start-span-block-end {\n  position-area: inline-start span-block-end;\n  margin: 0;\n  margin-inline-end: var(--ds-arrow-size, 8px);\n  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\n}\n@position-try --ds-arrow-inline-end-span-block-start {\n  position-area: inline-end span-block-start;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n  margin-block-end: var(--ds-cross-axis-shift-margin-block-end, 0px);\n}\n@position-try --ds-arrow-inline-end-span-block-end {\n  position-area: inline-end span-block-end;\n  margin: 0;\n  margin-inline-start: var(--ds-arrow-size, 8px);\n  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);\n}\n";
-
-// ── Placement utilities ──
-
-/**
- * Converts a `position-area` value to a CSS rule name by replacing spaces with hyphens
- * and prepending `--ds-arrow-`.
- *
- * @example positionAreaToRuleName('block-end span-inline-start') → '--ds-arrow-block-end-span-inline-start'
- */
-function positionAreaToRuleName(_ref) {
-  var positionArea = _ref.positionArea;
-  return "--ds-arrow-".concat(positionArea.replace(/ /g, '-'));
-}
-
-/**
- * Returns `position-try-fallbacks` using named `@position-try` rules
- * that change both `position-area` and `margin` when flipping.
- *
- * This is required for the arrow technique because built-in keywords
- * (`flip-block`, `flip-inline`) only flip `position-area` - they do
- * not update the margin direction needed to reveal the correct arrow.
- */
-function getTryFallbacks(_ref2) {
-  var placement = _ref2.placement;
-  var _getPlacement = getPlacement({
-      placement: placement
-    }),
-    axis = _getPlacement.axis,
-    edge = _getPlacement.edge,
-    align = _getPlacement.align;
-  if (align === 'center') {
-    // Single-axis: only flip the edge
-    var _flippedEdge = edge === 'start' ? 'end' : 'start';
-    return positionAreaToRuleName({
-      positionArea: placementToPositionArea({
-        placement: {
-          axis: axis,
-          edge: _flippedEdge
-        }
-      })
-    });
-  }
-
-  // Compound placement: try flipping edge, alignment, and both
-  var flippedEdge = edge === 'start' ? 'end' : 'start';
-  var flippedAlign = align === 'start' ? 'end' : 'start';
-  return [positionAreaToRuleName({
-    positionArea: placementToPositionArea({
-      placement: {
-        axis: axis,
-        edge: flippedEdge,
-        align: align
-      }
-    })
-  }), positionAreaToRuleName({
-    positionArea: placementToPositionArea({
-      placement: {
-        axis: axis,
-        edge: edge,
-        align: flippedAlign
-      }
-    })
-  }), positionAreaToRuleName({
-    positionArea: placementToPositionArea({
-      placement: {
-        axis: axis,
-        edge: flippedEdge,
-        align: flippedAlign
-      }
-    })
-  })].join(', ');
-}
-
-/**
- * Creates an arrow preset for popover content.
- *
- * The returned object is passed to `PopoverContent`'s `arrow` prop.
- * It carries the CSS string and fallback logic so that consumers who
- * do not use arrows pay no bundle cost.
- *
- * The arrows inherit their background from the popover element.
- * When `arrow` is active, `PopoverContent` does not reset `background`
- * to `transparent`, allowing the UA default (`canvas`) or a consumer-set
- * background to show through.
- *
- * @example
- * ```tsx
- * import { arrow } from '@atlaskit/top-layer/arrow';
- *
- * const myArrow = arrow();
- *
- * <Popup.Content arrow={myArrow} />
- * ```
- */
-export var arrow = once(function () {
-  return {
-    name: 'arrow',
-    css: ARROW_CSS,
-    getTryFallbacks: getTryFallbacks
-  };
-});

package/dist/esm/arrow/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,24 +0,0 @@
-import { type TArrowPreset } from './types';
-/**
- * Creates an arrow preset for popover content.
- *
- * The returned object is passed to `PopoverContent`'s `arrow` prop.
- * It carries the CSS string and fallback logic so that consumers who
- * do not use arrows pay no bundle cost.
- *
- * The arrows inherit their background from the popover element.
- * When `arrow` is active, `PopoverContent` does not reset `background`
- * to `transparent`, allowing the UA default (`canvas`) or a consumer-set
- * background to show through.
- *
- * @example
- * ```tsx
- * import { arrow } from '@atlaskit/top-layer/arrow';
- *
- * const myArrow = arrow();
- *
- * <Popup.Content arrow={myArrow} />
- * ```
- */
-export declare const arrow: () => TArrowPreset;
-export type { TArrowPreset } from './types';

package/dist/types/arrow/types.d.ts

@@ -1,29 +0,0 @@
-import type { TPlacementOptions } from '../popup/types';
-/**
- * A self-contained arrow preset for PopoverContent.
- *
- * Contains the CSS rules (injected once into `<head>`), a data-attribute name
- * for CSS targeting, and a function to compute `position-try-fallbacks` values
- * that change both `position-area` and `margin` when the popover flips.
- *
- * Imported from `@atlaskit/top-layer/arrow` so that consumers who do not use
- * arrows pay no bundle cost for the CSS string or fallback logic.
- */
-export type TArrowPreset = {
-    /**
-     * CSS to inject once into `document.head`, scoped to `[data-ds-popover-{name}]`.
-     */
-    css: string;
-    /**
-     * Data attribute suffix for CSS targeting (e.g. `'arrow'`).
-     */
-    name: string;
-    /**
-     * Returns the `position-try-fallbacks` value for a given placement.
-     * Uses named `@position-try` rules that update both `position-area`
-     * and `margin` so the correct arrow is revealed after a flip.
-     */
-    getTryFallbacks: (args: {
-        placement: TPlacementOptions;
-    }) => string;
-};

package/dist/types-ts4.5/arrow/index.d.ts

@@ -1,24 +0,0 @@
-import { type TArrowPreset } from './types';
-/**
- * Creates an arrow preset for popover content.
- *
- * The returned object is passed to `PopoverContent`'s `arrow` prop.
- * It carries the CSS string and fallback logic so that consumers who
- * do not use arrows pay no bundle cost.
- *
- * The arrows inherit their background from the popover element.
- * When `arrow` is active, `PopoverContent` does not reset `background`
- * to `transparent`, allowing the UA default (`canvas`) or a consumer-set
- * background to show through.
- *
- * @example
- * ```tsx
- * import { arrow } from '@atlaskit/top-layer/arrow';
- *
- * const myArrow = arrow();
- *
- * <Popup.Content arrow={myArrow} />
- * ```
- */
-export declare const arrow: () => TArrowPreset;
-export type { TArrowPreset } from './types';

package/dist/types-ts4.5/arrow/types.d.ts

@@ -1,29 +0,0 @@
-import type { TPlacementOptions } from '../popup/types';
-/**
- * A self-contained arrow preset for PopoverContent.
- *
- * Contains the CSS rules (injected once into `<head>`), a data-attribute name
- * for CSS targeting, and a function to compute `position-try-fallbacks` values
- * that change both `position-area` and `margin` when the popover flips.
- *
- * Imported from `@atlaskit/top-layer/arrow` so that consumers who do not use
- * arrows pay no bundle cost for the CSS string or fallback logic.
- */
-export type TArrowPreset = {
-    /**
-     * CSS to inject once into `document.head`, scoped to `[data-ds-popover-{name}]`.
-     */
-    css: string;
-    /**
-     * Data attribute suffix for CSS targeting (e.g. `'arrow'`).
-     */
-    name: string;
-    /**
-     * Returns the `position-try-fallbacks` value for a given placement.
-     * Uses named `@position-try` rules that update both `position-area`
-     * and `margin` so the correct arrow is revealed after a flip.
-     */
-    getTryFallbacks: (args: {
-        placement: TPlacementOptions;
-    }) => string;
-};