@atlaskit/top-layer 0.11.0 → 0.12.1

package/dist/types-ts4.5/popup/popup-context.d.ts

@@ -2,6 +2,23 @@ import React, { type MutableRefObject, type RefObject } from 'react';
 import { type TAriaHasPopupValue } from '../internal/role-types';
 import { type TPopoverCloseReason } from '../popover/types';
 import { type TPlacementOptions } from './types';
+/**
+ * Represents the lifecycle state of the popup.
+ *
+ * - `'closed'`: fully closed, not visible, no animation playing.
+ * - `'animating-open'`: entry animation is playing (popup is opening but not yet settled).
+ * - `'open'`: fully open, browser popover is showing, entry animation complete.
+ * - `'animating-closed'`: exit animation is playing (popup is closing but still visible).
+ *
+ * Used to derive `aria-expanded` on the trigger:
+ * - `aria-expanded` is `true` in `'animating-open'`, `'open'`, and `'animating-closed'`.
+ *
+ * This avoids screen readers announcing the popup as closed while it is
+ * still visually present on screen during animations, and prevents consumers
+ * that conditionally show/hide trigger UI based on `aria-expanded` from hiding
+ * the trigger (and thus the popup anchor) mid-animation.
+ */
+export type TPopupState = 'closed' | 'animating-open' | 'open' | 'animating-closed';
 export type TPopupContextValue = {
     /**
      * Auto-generated ID for the popover content element (used for aria-controls).
@@ -27,13 +44,16 @@ export type TPopupContextValue = {
      */
     popoverRef: RefObject<HTMLDivElement | null>;
     /**
-     * Whether the popover is currently open.
+     * The full lifecycle state of the popup.
+     *
+     * See `TPopupState` for the full state machine description.
      */
-    isOpen: boolean;
+    popupState: TPopupState;
     /**
-     * Set the open state (internal context sync).
+     * Updates the popup lifecycle state. Called by `PopupContent` as animations
+     * begin and complete.
      */
-    setIsOpen: (open: boolean) => void;
+    setPopupState: (state: TPopupState) => void;
     /**
      * Consumer's onOpenChange callback, forwarded to the Popover.
      */
@@ -73,24 +93,4 @@ export type TPopupContextValue = {
      */
     forceFallbackPositioning?: boolean;
 };
-/**
- * __Popup provider__
- *
- * Provides shared popup state (placement, popoverId, triggerRef,
- * isOpen, onClose) to compound child components such as `Popup.Trigger` and
- * `Popup.Content`.
- */
-export declare const PopupProvider: React.Provider<TPopupContextValue | null>;
-/**
- * Returns the nearest `Popup` context value.
- *
- * Throws if called outside of a `<Popup>` compound component.
- */
-export declare function usePopupContext(): TPopupContextValue;
-/**
- * Returns the popup context if available, or `null` when used outside `<Popup>`.
- *
- * Used by `PopupContent` to support standalone usage (e.g. tooltip)
- * where values are passed as props instead of coming from a compound component.
- */
-export declare function useMaybePopupContext(): TPopupContextValue | null;
+export declare const PopupContext: React.Context<TPopupContextValue | null>;

package/dist/types-ts4.5/popup/popup-provider.d.ts

@@ -0,0 +1,10 @@
+import { type Provider } from 'react';
+import { type TPopupContextValue } from './popup-context';
+/**
+ * __Popup provider__
+ *
+ * Provides shared popup state (placement, popoverId, triggerRef,
+ * isOpen, onClose) to compound child components such as `Popup.Trigger` and
+ * `Popup.Content`.
+ */
+export declare const PopupProvider: Provider<TPopupContextValue | null>;

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

@@ -258,6 +258,18 @@ type TPopupContentBaseProps = {
      * ```
      */
     isOpen?: boolean;
+    /**
+     * Called after the entry animation completes (or immediately on open when
+     * there is no animation). Use this for lifecycle coordination that must
+     * happen after the popup has fully animated in.
+     */
+    onEnterFinish?: () => void;
+    /**
+     * Called after the exit animation completes (or immediately on close when
+     * there is no animation). Use this for lifecycle coordination that must
+     * happen after the popup has fully animated out.
+     */
+    onExitFinish?: () => void;
 };
 /**
  * Popup content props.

package/dist/types-ts4.5/popup/use-maybe-popup-context.d.ts

@@ -0,0 +1,8 @@
+import { type TPopupContextValue } from './popup-context';
+/**
+ * Returns the popup context if available, or `null` when used outside `<Popup>`.
+ *
+ * Used by `PopupContent` to support standalone usage (e.g. tooltip)
+ * where values are passed as props instead of coming from a compound component.
+ */
+export declare function useMaybePopupContext(): TPopupContextValue | null;

package/dist/types-ts4.5/popup/use-popup-context.d.ts

@@ -0,0 +1,7 @@
+import { type TPopupContextValue } from './popup-context';
+/**
+ * Returns the nearest `Popup` context value.
+ *
+ * Throws if called outside of a `<Popup>` compound component.
+ */
+export declare function usePopupContext(): TPopupContextValue;

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

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

package/dist/types-ts4.5/use-arrow-navigation/is-at-current-menu-level.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 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.
+ */
+export declare function isAtCurrentMenuLevel(element: Element, container: HTMLElement): boolean;

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

@@ -1,53 +1,5 @@
 import { type RefObject } from 'react';
 import { type TFocusableFilter } from '../focus';
-/**
- * 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.
- */
-export declare function isAtCurrentMenuLevel(element: Element, container: HTMLElement): boolean;
 /**
  * Args for `useArrowNavigation`.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "0.11.0",
+	"version": "0.12.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",
@@ -38,7 +38,7 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
 		"@atlaskit/layering": "^3.7.0",
-		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/tokens": "^13.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",

package/dist/cjs/arrow/index.js

@@ -1,131 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.arrow = void 0;
-var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
-var _resolvePlacement = require("../internal/resolve-placement");
-var _useAnchorPosition = require("../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 = (0, _resolvePlacement.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: (0, _useAnchorPosition.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: (0, _useAnchorPosition.placementToPositionArea)({
-      placement: {
-        axis: axis,
-        edge: flippedEdge,
-        align: align
-      }
-    })
-  }), positionAreaToRuleName({
-    positionArea: (0, _useAnchorPosition.placementToPositionArea)({
-      placement: {
-        axis: axis,
-        edge: edge,
-        align: flippedAlign
-      }
-    })
-  }), positionAreaToRuleName({
-    positionArea: (0, _useAnchorPosition.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} />
- * ```
- */
-var arrow = exports.arrow = (0, _once.default)(function () {
-  return {
-    name: 'arrow',
-    css: ARROW_CSS,
-    getTryFallbacks: getTryFallbacks
-  };
-});

package/dist/cjs/arrow/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dist/es2019/arrow/index.js

@@ -1,269 +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/
- */
-const ARROW_CSS = `
-[data-ds-popover-arrow] {
-  clip-path: inset(var(--ds-arrow-offset, 0px)) margin-box;
-  box-shadow: none;
-}
-
-/* Top and Bottom arrows (vertical hexagon) */
-[data-ds-popover-arrow]::before {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  background: inherit;
-  left: 50%;
-  transform: translateX(-50%);
-  width: calc(var(--ds-arrow-size, 8px) * 2);
-  height: calc(100% + var(--ds-arrow-size, 8px) * 2);
-  top: calc(var(--ds-arrow-size, 8px) * -1);
-  clip-path: polygon(
-    0 var(--ds-arrow-size, 8px),
-    50% 0,
-    100% var(--ds-arrow-size, 8px),
-    100% calc(100% - var(--ds-arrow-size, 8px)),
-    50% 100%,
-    0 calc(100% - var(--ds-arrow-size, 8px))
-  );
-}
-
-/* Left and Right arrows (horizontal hexagon) */
-[data-ds-popover-arrow]::after {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  background: inherit;
-  top: 50%;
-  transform: translateY(-50%);
-  height: calc(var(--ds-arrow-size, 8px) * 2);
-  width: calc(100% + var(--ds-arrow-size, 8px) * 2);
-  left: calc(var(--ds-arrow-size, 8px) * -1);
-  clip-path: polygon(
-    var(--ds-arrow-size, 8px) 0,
-    calc(100% - var(--ds-arrow-size, 8px)) 0,
-    100% 50%,
-    calc(100% - var(--ds-arrow-size, 8px)) 100%,
-    var(--ds-arrow-size, 8px) 100%,
-    0 50%
-  );
-}
-
-/* ── @position-try rules ──
- * One rule per possible position-area value.
- * Each sets the position-area and the correct margin direction
- * so the arrow on the anchor-facing side is revealed.
- *
- * Margin direction per edge:
- *   block-start  (above anchor) → margin-block-end   (bottom, facing anchor)
- *   block-end    (below anchor) → margin-block-start  (top, facing anchor)
- *   inline-start (left of anchor) → margin-inline-end (right, facing anchor)
- *   inline-end   (right of anchor) → margin-inline-start (left, facing anchor)
- */
-
-/* Each rule sets two margins: the anchor-facing margin for the gap
-   (via --ds-arrow-size) and one cross-axis margin for the shift
-   (via one of --ds-cross-axis-shift-margin-start, --ds-cross-axis-shift-margin-end,
-   --ds-cross-axis-shift-margin-block-start, or --ds-cross-axis-shift-margin-block-end). The
-   side matches the popover's anchored cross-axis edge per align. Only
-   one of the four properties is non-zero at a time; useAnchorPosition
-   picks it. See notes/architecture/positioning.md for details. */
-/* Single-axis centered (align: center) */
-@position-try --ds-arrow-block-start {
-  position-area: block-start;
-  margin: 0;
-  margin-block-end: var(--ds-arrow-size, 8px);
-  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);
-}
-@position-try --ds-arrow-block-end {
-  position-area: block-end;
-  margin: 0;
-  margin-block-start: var(--ds-arrow-size, 8px);
-  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);
-}
-@position-try --ds-arrow-inline-start {
-  position-area: inline-start;
-  margin: 0;
-  margin-inline-end: var(--ds-arrow-size, 8px);
-  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);
-}
-@position-try --ds-arrow-inline-end {
-  position-area: inline-end;
-  margin: 0;
-  margin-inline-start: var(--ds-arrow-size, 8px);
-  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);
-}
-
-/* Block edge + inline span (align: start uses span-inline-end; align: end uses span-inline-start) */
-@position-try --ds-arrow-block-start-span-inline-start {
-  position-area: block-start span-inline-start;
-  margin: 0;
-  margin-block-end: var(--ds-arrow-size, 8px);
-  margin-inline-end: var(--ds-cross-axis-shift-margin-end, 0px);
-}
-@position-try --ds-arrow-block-start-span-inline-end {
-  position-area: block-start span-inline-end;
-  margin: 0;
-  margin-block-end: var(--ds-arrow-size, 8px);
-  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);
-}
-@position-try --ds-arrow-block-end-span-inline-start {
-  position-area: block-end span-inline-start;
-  margin: 0;
-  margin-block-start: var(--ds-arrow-size, 8px);
-  margin-inline-end: var(--ds-cross-axis-shift-margin-end, 0px);
-}
-@position-try --ds-arrow-block-end-span-inline-end {
-  position-area: block-end span-inline-end;
-  margin: 0;
-  margin-block-start: var(--ds-arrow-size, 8px);
-  margin-inline-start: var(--ds-cross-axis-shift-margin-start, 0px);
-}
-
-/* Inline edge + block span (align: start uses span-block-end; align: end uses span-block-start) */
-@position-try --ds-arrow-inline-start-span-block-start {
-  position-area: inline-start span-block-start;
-  margin: 0;
-  margin-inline-end: var(--ds-arrow-size, 8px);
-  margin-block-end: var(--ds-cross-axis-shift-margin-block-end, 0px);
-}
-@position-try --ds-arrow-inline-start-span-block-end {
-  position-area: inline-start span-block-end;
-  margin: 0;
-  margin-inline-end: var(--ds-arrow-size, 8px);
-  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);
-}
-@position-try --ds-arrow-inline-end-span-block-start {
-  position-area: inline-end span-block-start;
-  margin: 0;
-  margin-inline-start: var(--ds-arrow-size, 8px);
-  margin-block-end: var(--ds-cross-axis-shift-margin-block-end, 0px);
-}
-@position-try --ds-arrow-inline-end-span-block-end {
-  position-area: inline-end span-block-end;
-  margin: 0;
-  margin-inline-start: var(--ds-arrow-size, 8px);
-  margin-block-start: var(--ds-cross-axis-shift-margin-block-start, 0px);
-}
-`;
-
-// ── 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({
-  positionArea
-}) {
-  return `--ds-arrow-${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({
-  placement
-}) {
-  const {
-    axis,
-    edge,
-    align
-  } = getPlacement({
-    placement
-  });
-  if (align === 'center') {
-    // Single-axis: only flip the edge
-    const flippedEdge = edge === 'start' ? 'end' : 'start';
-    return positionAreaToRuleName({
-      positionArea: placementToPositionArea({
-        placement: {
-          axis,
-          edge: flippedEdge
-        }
-      })
-    });
-  }
-
-  // Compound placement: try flipping edge, alignment, and both
-  const flippedEdge = edge === 'start' ? 'end' : 'start';
-  const flippedAlign = align === 'start' ? 'end' : 'start';
-  return [positionAreaToRuleName({
-    positionArea: placementToPositionArea({
-      placement: {
-        axis,
-        edge: flippedEdge,
-        align
-      }
-    })
-  }), positionAreaToRuleName({
-    positionArea: placementToPositionArea({
-      placement: {
-        axis,
-        edge,
-        align: flippedAlign
-      }
-    })
-  }), positionAreaToRuleName({
-    positionArea: placementToPositionArea({
-      placement: {
-        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 const arrow = once(() => ({
-  name: 'arrow',
-  css: ARROW_CSS,
-  getTryFallbacks
-}));

package/dist/es2019/arrow/types.js

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