@atlaskit/top-layer 0.1.0

package/dist/es2019/arrow/index.js

@@ -0,0 +1,249 @@
+import once from '@atlaskit/ds-lib/once';
+import { getPlacement, placementToPositionArea } from '../internal/use-anchor-positioning';
+/**
+ * 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(1px) 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, 1px)) 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)
+ */
+
+/* Single-axis centered */
+@position-try --ds-arrow-block-start {
+  position-area: block-start;
+  margin: 0;
+  margin-block-end: var(--ds-arrow-size, 8px);
+}
+@position-try --ds-arrow-block-end {
+  position-area: block-end;
+  margin: 0;
+  margin-block-start: var(--ds-arrow-size, 8px);
+}
+@position-try --ds-arrow-inline-start {
+  position-area: inline-start;
+  margin: 0;
+  margin-inline-end: var(--ds-arrow-size, 8px);
+}
+@position-try --ds-arrow-inline-end {
+  position-area: inline-end;
+  margin: 0;
+  margin-inline-start: var(--ds-arrow-size, 8px);
+}
+
+/* Block edge + inline span */
+@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);
+}
+@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);
+}
+@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);
+}
+@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);
+}
+
+/* Inline edge + block span */
+@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);
+}
+@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);
+}
+@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);
+}
+@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);
+}
+`;
+
+// ── 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
+ * don't 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

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

package/dist/es2019/dialog/create-close-event.js

@@ -0,0 +1,34 @@
+/**
+ * Creates a synthetic DOM event from a `TDialogCloseReason`.
+ *
+ * Useful when bridging the Dialog primitive's `onClose({ reason })` callback
+ * to a legacy API that expects a `KeyboardEvent` or `MouseEvent` — for example,
+ * `@atlaskit/modal-dialog`'s `onClose(event, analyticsEvent)` contract.
+ *
+ * - `'escape'` → `KeyboardEvent('keydown', { key: 'Escape' })`
+ * - `'overlay-click'` → `MouseEvent('click')`
+ *
+ * @example
+ * ```tsx
+ * import { createCloseEvent } from '@atlaskit/top-layer/create-close-event';
+ * import { type TDialogCloseReason } from '@atlaskit/top-layer/dialog';
+ *
+ * function onDialogClose({ reason }: { reason: TDialogCloseReason }) {
+ *   legacyOnClose(createCloseEvent({ reason }));
+ * }
+ * ```
+ */
+export function createCloseEvent({
+  reason
+}) {
+  if (reason === 'escape') {
+    return new KeyboardEvent('keydown', {
+      key: 'Escape',
+      bubbles: true
+    });
+  }
+  return new MouseEvent('click', {
+    bubbles: true,
+    cancelable: true
+  });
+}

package/dist/es2019/dialog/dialog-content.compiled.css

@@ -0,0 +1,14 @@
+
+._19itglyw{border:none}._18u01wug{margin-left:auto}
+._19pk1wug{margin-top:auto}
+._1ltk1i5c::-ms-backdrop{background-color:var(--ds-blanket,#050c1f75)}
+._1ltk1i5c::backdrop{background-color:var(--ds-blanket,#050c1f75)}
+._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
+._2hwx1wug{margin-right:auto}
+._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._bfhk1j28{background-color:transparent}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
+._c71lglyw{max-height:none}
+._otyr1wug{margin-bottom:auto}
+._p12fglyw{max-width:none}
+._y4tize3t{padding-inline-end:var(--ds-space-0,0)}

package/dist/es2019/dialog/dialog-content.js

@@ -0,0 +1,138 @@
+/* dialog-content.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./dialog-content.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';
+import { bind } from 'bind-event-listener';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
+import { useAnimatedVisibility } from '../internal/use-animated-visibility';
+import { useFocusWrap } from '../internal/use-focus-wrap';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- dialog reset requires values not in cssMap's type union
+const styles = {
+  dialog: "_19itglyw _19pk1wug _2hwx1wug _otyr1wug _18u01wug _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _p12fglyw _c71lglyw _bfhk1j28 _1ltk1i5c"
+};
+
+/**
+ * Low-level `<dialog>` primitive. No visual opinions — no width, height,
+ * background, border-radius, or layout. Consumers provide their own styling.
+ *
+ * Visibility is controlled declaratively via `isOpen`:
+ * - `isOpen={true}` calls `.showModal()` (entry animation via `@starting-style`)
+ * - `isOpen={false}` calls `.close()` (exit animation via `allow-discrete`)
+ *
+ * Handles native `cancel` event (Escape) and backdrop click detection.
+ *
+ * Close flow: we never call `dialog.close()` from event handlers. We always call
+ * `onClose`; the consumer decides whether to set `isOpen={false}`.
+ */
+export const Dialog = /*#__PURE__*/forwardRef(function Dialog({
+  children,
+  isOpen,
+  onClose,
+  onExitFinish,
+  animate,
+  style,
+  testId,
+  id: providedId,
+  label,
+  labelledBy,
+  shouldHideBackdrop
+}, ref) {
+  const generatedId = useId();
+  const dialogId = providedId !== null && providedId !== void 0 ? providedId : generatedId;
+  const ownRef = useRef(null);
+  const combinedRef = mergeRefs([ownRef, ref]);
+
+  // ── Animation lifecycle ──
+  const {
+    showChildren,
+    preset
+  } = useAnimatedVisibility({
+    isOpen,
+    animate,
+    elementRef: ownRef,
+    onExitFinish
+  });
+
+  // ── Focus wrap ──
+  // Native <dialog>.showModal() traps focus but wraps through <body> at
+  // the boundary (A → B → C → body → A). This hook intercepts Tab to
+  // wrap directly (A → B → C → A), matching the WAI-ARIA APG pattern.
+  useFocusWrap({
+    elementRef: ownRef,
+    role: 'dialog'
+  });
+
+  // Show/hide the dialog in response to isOpen changes.
+  useLayoutEffect(() => {
+    const dialog = ownRef.current;
+    if (!dialog) {
+      return;
+    }
+    if (isOpen) {
+      if (!dialog.open) {
+        dialog.showModal();
+      }
+      return () => {
+        if (dialog.open) {
+          dialog.close();
+        }
+      };
+    }
+    if (dialog.open) {
+      dialog.close();
+    }
+  }, [isOpen]);
+
+  // ── Handle native Escape (cancel event) ──
+  const handleCancel = useCallback(event => {
+    event.preventDefault();
+    onClose({
+      reason: 'escape'
+    });
+  }, [onClose]);
+
+  // ── Handle backdrop click ──
+  // Attached via bind-event-listener rather than a React prop so we avoid
+  // a11y lint suppressions on the <dialog> element.
+  // Keyboard dismiss is already handled natively (Escape → onCancel above).
+  useEffect(() => {
+    const dialog = ownRef.current;
+    if (!dialog) {
+      return;
+    }
+    return bind(dialog, {
+      type: 'click',
+      listener(event) {
+        if (event.target === event.currentTarget) {
+          onClose({
+            reason: 'overlay-click'
+          });
+        }
+      }
+    });
+  }, [onClose]);
+
+  // Atomic CSS (Compiled) deduplicates ::backdrop { background-color }
+  // into a single class, making it impossible to toggle between two values
+  // via cssMap entries. An ID-scoped <style> has higher specificity than
+  // any atomic class, so the override always wins.
+  const escapedId = CSS.escape(dialogId);
+  return /*#__PURE__*/React.createElement("dialog", _extends({
+    ref: combinedRef,
+    id: dialogId,
+    "aria-label": label,
+    "aria-labelledby": label ? undefined : labelledBy,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    style: style,
+    onCancel: handleCancel,
+    "data-testid": testId
+  }, preset ? {
+    [`data-ds-${preset.name}`]: ''
+  } : undefined, {
+    className: ax([styles.dialog])
+  }), shouldHideBackdrop &&
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles
+  React.createElement("style", null, `#${escapedId}::backdrop{background-color:transparent}`), showChildren ? children : null);
+});

package/dist/es2019/dialog/index.js

@@ -0,0 +1,2 @@
+export { createCloseEvent } from './create-close-event';
+export { Dialog } from './dialog-content';

package/dist/es2019/dialog/types.js

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

package/dist/es2019/dialog-scroll-lock/index.js

@@ -0,0 +1,41 @@
+import { useLayoutEffect } from 'react';
+import { getDocument } from '@atlaskit/browser-apis';
+
+/**
+ * __DialogScrollLock__
+ *
+ * Prevents background page scrolling while mounted. Designed to be rendered
+ * inside a `Dialog` so that the scroll lock is automatically removed when the
+ * dialog closes (unmounts its children).
+ *
+ * Native `<dialog>.showModal()` makes background content _inert_ (not
+ * focusable/clickable), but does **not** prevent scroll events from reaching
+ * the document body. This component fills that gap by setting
+ * `overflow: hidden` on `document.body`.
+ *
+ * @example
+ * ```tsx
+ * import { Dialog } from '@atlaskit/top-layer/dialog';
+ * import { DialogScrollLock } from '@atlaskit/top-layer/dialog-scroll-lock';
+ *
+ * <Dialog isOpen={isOpen} onClose={onClose}>
+ *   <DialogScrollLock />
+ *   {children}
+ * </Dialog>
+ * ```
+ */
+export function DialogScrollLock() {
+  useLayoutEffect(() => {
+    var _getDocument;
+    const body = (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.body;
+    if (!body) {
+      return;
+    }
+    const previousOverflow = body.style.overflow;
+    body.style.overflow = 'hidden';
+    return () => {
+      body.style.overflow = previousOverflow;
+    };
+  }, []);
+  return null;
+}

package/dist/es2019/entry-points/animations.js

@@ -0,0 +1 @@
+export { slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade } from '../animations/presets';

package/dist/es2019/entry-points/arrow.js

@@ -0,0 +1 @@
+export { arrow } from '../arrow';

package/dist/es2019/entry-points/create-close-event.js

@@ -0,0 +1,2 @@
+export { createCloseEvent } from '../dialog';
+export { createPopoverCloseEvent } from '../popover/create-close-event';

package/dist/es2019/entry-points/dialog-scroll-lock.js

@@ -0,0 +1 @@
+export { DialogScrollLock } from '../dialog-scroll-lock';

package/dist/es2019/entry-points/dialog.js

@@ -0,0 +1 @@
+export { Dialog } from '../dialog';

package/dist/es2019/entry-points/focus.js

@@ -0,0 +1 @@
+export { getFirstFocusable, getLastFocusable, getNextFocusable } from '../focus';

package/dist/es2019/entry-points/placement-map.js

@@ -0,0 +1 @@
+export { fromLegacyPlacement, placementMapping } from '../placement-map';

package/dist/es2019/entry-points/popover.js

@@ -0,0 +1 @@
+export { Popover } from '../popover';

package/dist/es2019/entry-points/popup-surface.js

@@ -0,0 +1 @@
+export { PopupSurface } from '../popup/popup-surface';

package/dist/es2019/entry-points/popup.js

@@ -0,0 +1 @@
+export { Popup } from '../popup';

package/dist/es2019/entry-points/use-anchor-position.js

@@ -0,0 +1 @@
+export { useAnchorPosition } from '../internal/use-anchor-positioning';

package/dist/es2019/entry-points/use-arrow-navigation.js

@@ -0,0 +1 @@
+export { useArrowNavigation, isAtCurrentMenuLevel } from '../use-arrow-navigation';

package/dist/es2019/entry-points/use-simple-light-dismiss.js

@@ -0,0 +1 @@
+export { useSimpleLightDismiss } from '../use-simple-light-dismiss';

package/dist/es2019/focus/focus.js

@@ -0,0 +1,107 @@
+/**
+ * Focusable element selectors and navigation helpers.
+ *
+ * Uses CSS selectors to discover focusable elements within a container,
+ * avoiding the need for a manual registration system. Disabled elements
+ * (both HTML `disabled` attribute and `aria-disabled="true"`) and elements
+ * with `tabindex="-1"` are excluded automatically.
+ *
+ * All public functions accept an optional `filter` callback to further
+ * restrict which focusable elements are included.
+ */
+
+const selectors = (() => {
+  // Common exclusion filter applied to every selector.
+  const not = ':not([tabindex="-1"]):not([aria-disabled="true"]):not([aria-hidden="true"])';
+  const notDisabled = `:not([disabled])${not}`;
+  const focusable = [`a[href]${not}`, `area[href]${not}`, `input${notDisabled}:not([type="hidden"])`, `select${notDisabled}`, `textarea${notDisabled}`, `button${notDisabled}`, `iframe${not}`, `audio[controls]${not}`, `video[controls]${not}`, `[contenteditable]:not([contenteditable="false"])${not}`, `[tabindex]${notDisabled}${not}`];
+  return {
+    focusable: focusable.join(','),
+    focused: focusable.join(':focus,') + ':focus'
+  };
+})();
+
+/**
+ * An optional callback to restrict which focusable elements are included.
+ * Return `true` to include the element, `false` to skip it.
+ */
+
+/**
+ * Returns all focusable HTMLElements within the container, optionally filtered.
+ *
+ * Note: this searches the full subtree and does not stop at nested
+ * popover/dialog boundaries. In practice this is fine because nested
+ * popovers are not rendered until they are opened, so their content
+ * is not in the DOM when the parent's initial focus runs. If that
+ * assumption changes, this would need to be scoped to the current layer.
+ */
+function getFocusables({
+  container,
+  filter
+}) {
+  return Array.from(container.querySelectorAll(selectors.focusable)).filter(el => el instanceof HTMLElement).filter(el => !filter || filter(el, container));
+}
+
+/**
+ * Returns the first focusable element within the container.
+ */
+export function getFirstFocusable({
+  container,
+  filter
+}) {
+  const items = getFocusables({
+    container,
+    filter
+  });
+  return items.length > 0 ? items[0] : null;
+}
+
+/**
+ * Returns the last focusable element within the container.
+ */
+export function getLastFocusable({
+  container,
+  filter
+}) {
+  const items = getFocusables({
+    container,
+    filter
+  });
+  return items.length > 0 ? items[items.length - 1] : null;
+}
+
+/**
+ * Returns the next focusable element in the given direction relative to the
+ * currently focused element within the container. Wraps around at both ends.
+ *
+ * Returns `null` if there is no focused element within the container or if
+ * the focused element is not in the list of focusable elements.
+ */
+export function getNextFocusable({
+  container,
+  direction,
+  filter
+}) {
+  var _all$nextIndex;
+  const all = getFocusables({
+    container,
+    filter
+  });
+  const current = container.querySelector(selectors.focused);
+  if (!(current instanceof HTMLElement)) {
+    return null;
+  }
+  const index = all.indexOf(current);
+  if (index === -1) {
+    return null;
+  }
+  const nextIndex = (() => {
+    if (direction === 'forwards') {
+      return (index + 1) % all.length;
+    }
+    const proposed = index - 1;
+    // if going into negative numbers, loop back to the last item
+    return proposed < 0 ? all.length - 1 : proposed;
+  })();
+  return (_all$nextIndex = all[nextIndex]) !== null && _all$nextIndex !== void 0 ? _all$nextIndex : null;
+}

package/dist/es2019/focus/index.js

@@ -0,0 +1 @@
+export { getFirstFocusable, getLastFocusable, getNextFocusable } from './focus';

package/dist/es2019/index.js

@@ -0,0 +1,7 @@
+// This file exists for module resolution purposes.
+// Not exporting anything from the root entry point.
+// Please use individual entry points for minimum bundle size:
+//
+//   import { Popup } from '@atlaskit/top-layer/popup';
+//   import { Dialog } from '@atlaskit/top-layer/dialog';
+//   import { Popover } from '@atlaskit/top-layer/popover';