@atlaskit/top-layer 0.17.0 → 1.0.0

package/dist/types-ts4.5/animations/presets.d.ts

@@ -1,110 +0,0 @@
-import { type TAnimationPreset } from './types';
-export declare function popupMotion(): TAnimationPreset;
-type TSlideAndFadeOptions = {
-    /**
-     * Slide distance in pixels. Defaults to `4`.
-     */
-    distance?: number;
-};
-/**
- * Directional slide + opacity animation.
- *
- * The popover slides in from the direction opposite its placement edge
- * (e.g. a `block-end` popover slides down from above).
- *
- * @param options.distance - Slide distance in pixels. Defaults to `4`.
- *
- * @example
- * ```tsx
- * import { slideAndFade } from '@atlaskit/top-layer/animations';
- *
- * // Default 4px slide (tooltip)
- * <Popover animate={slideAndFade()} />
- *
- * // Custom 8px slide (popup / dropdown)
- * <Popover animate={slideAndFade({ distance: 8 })} />
- * ```
- */
-export declare function slideAndFade(options?: TSlideAndFadeOptions): TAnimationPreset;
-/**
- * Simple opacity transition, no transform.
- *
- * Suitable for popup dialogs or content that does not need directional motion.
- *
- * @example
- * ```tsx
- * import { fade } from '@atlaskit/top-layer/animations';
- *
- * <Popover animate={fade()} />
- * ```
- */
-export declare function fade(): TAnimationPreset;
-/**
- * Scale from 0.95 + opacity transition.
- *
- * Suitable for menus, dropdowns, and select options.
- *
- * @example
- * ```tsx
- * import { scaleAndFade } from '@atlaskit/top-layer/animations';
- *
- * <Popover animate={scaleAndFade()} />
- * ```
- */
-export declare function scaleAndFade(): TAnimationPreset;
-/**
- * Dialog motion animation.
- *
- * Includes backdrop fade animation.
- *
- * @example
- * ```tsx
- * import { dialogMotion } from '@atlaskit/top-layer/animations';
- *
- * <Dialog animate={dialogMotion()} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-export declare function dialogMotion(): TAnimationPreset;
-type TDialogSlideUpAndFadeOptions = {
-    /**
-     * Slide distance in pixels. Defaults to `12`.
-     */
-    distance?: number;
-};
-/**
- * Slide up + opacity animation for dialogs.
- *
- * Entry slides up from below; exit slides up and out (asymmetric).
- * Includes backdrop fade animation.
- *
- * @param options.distance - Slide distance in pixels. Defaults to `12`.
- *
- * @example
- * ```tsx
- * import { dialogSlideUpAndFade } from '@atlaskit/top-layer/animations';
- *
- * const animation = dialogSlideUpAndFade();
- * <Dialog animate={animation} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-export declare function dialogSlideUpAndFade(options?: TDialogSlideUpAndFadeOptions): TAnimationPreset;
-/**
- * Simple opacity transition for dialogs, no transform.
- *
- * Includes backdrop fade animation.
- *
- * @example
- * ```tsx
- * import { dialogFade } from '@atlaskit/top-layer/animations';
- *
- * <Dialog animate={dialogFade()} isOpen={isOpen} onClose={handleClose} label="...">
- *   ...
- * </Dialog>
- * ```
- */
-export declare function dialogFade(): TAnimationPreset;
-export {};

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

@@ -1,38 +0,0 @@
-import type { TPlacementOptions } from '../internal/resolve-placement';
-/**
- * A self-contained animation preset for top-layer elements (popovers and dialogs).
- *
- * Contains the CSS rules (injected once into `<head>`), a data-attribute name
- * for CSS targeting, optional per-placement custom properties, and the exit
- * duration used for a `transitionend` fallback timeout.
- *
- * Entry animation uses `@starting-style`.
- * Exit animation uses `allow-discrete` on `display`/`overlay` to keep the
- * element visible in the top layer while CSS transitions play.
- */
-export type TAnimationPreset = {
-    /**
-     * CSS to inject once into `document.head`, scoped via a data attribute
-     * (e.g. `[data-ds-popover-{name}]` or `[data-ds-dialog-{name}]`).
-     */
-    css: string;
-    /**
-     * Data attribute suffix for CSS targeting (e.g. `'slide-and-fade'`).
-     */
-    name: string;
-    /**
-     * Per-placement CSS custom properties (e.g. directional offset for
-     * `slideAndFade`). Only used by popover presets that vary by placement.
-     */
-    getProperties?: (args: {
-        placement: TPlacementOptions;
-    }) => Record<string, string>;
-    /**
-     * Entry duration in ms (for `transitionend` fallback timeout on open).
-     */
-    enterDurationMs: number;
-    /**
-     * Exit duration in ms (for `transitionend` fallback timeout on close).
-     */
-    exitDurationMs: number;
-};

package/dist/types-ts4.5/dialog/create-close-event.d.ts

@@ -1,23 +0,0 @@
-import type { TDialogCloseReason } from './types';
-/**
- * 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, type TDialogCloseReason } from '@atlaskit/top-layer/dialog';
- *
- * function onDialogClose({ reason }: { reason: TDialogCloseReason }) {
- *   legacyOnClose(createCloseEvent({ reason }));
- * }
- * ```
- */
-export declare function createCloseEvent({ reason, }: {
-    reason: TDialogCloseReason;
-}): KeyboardEvent | MouseEvent;

package/dist/types-ts4.5/dialog/dialog-content.d.ts

@@ -1,24 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import { type TDialogProps } from './types';
-/**
- * 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}`.
- *
- * Accessibility: render at least one focusable element (typically a close
- * button) when `isOpen` becomes `true`. Tab is always trapped inside the
- * dialog, so keyboard users need somewhere to land.
- */
-export declare const Dialog: React.ForwardRefExoticComponent<TDialogProps & React.RefAttributes<HTMLDialogElement>>;

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

@@ -1,3 +0,0 @@
-export { createCloseEvent } from './create-close-event';
-export { Dialog } from './dialog-content';
-export type { TDialogCloseReason, TDialogProps } from './types';

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

@@ -1,126 +0,0 @@
-import { type CSSProperties, type ReactNode } from 'react';
-import { type TAnimationPreset } from '../animations/types';
-/**
- * Close reasons produced by the Dialog primitive.
- *
- * - `'escape'`: user pressed Escape (native `cancel` event on `<dialog>`).
- * - `'overlay-click'`: user clicked the backdrop / overlay area.
- *
- * Consumer-initiated ("programmatic") close is not a reason the primitive
- * produces. The consumer simply sets `isOpen={false}`.
- */
-export type TDialogCloseReason = 'escape' | 'overlay-click';
-/**
- * Props shared across `TDialogProps` variants.
- *
- * The accessible-name requirement (one of `label` or `labelledBy`) is encoded
- * in the discriminated union below - WCAG 4.1.2 violations are caught at
- * compile time instead of in production audit reports.
- */
-type TDialogBaseProps = {
-    children: ReactNode;
-    /**
-     * Whether the dialog is open.
-     *
-     * - `true`: calls `showModal()`, entry animation plays via `@starting-style`.
-     * - `false`: calls `close()`. When an `animate` preset is provided, the exit
-     *   animation plays (via `allow-discrete`) before the dialog becomes logically closed.
-     *
-     * **Lifecycle observable to consumers:**
-     *
-     * - The `<dialog>` host element is in the DOM only while open or its exit
-     *   animation is playing. After exit completes the element is unmounted so
-     *   it does not leave an empty `role="dialog"` element in the accessibility
-     *   tree. The exact unmount timing is private and may change.
-     * - The `id` (supplied or generated) is stable across opens.
-     * - The `ref` is populated only while the host element is rendered. Consumers
-     *   that read from the ref should gate the read on `isOpen` being `true`.
-     */
-    isOpen: boolean;
-    /**
-     * Called when the user triggers close via Escape or backdrop click.
-     *
-     * The dialog does **not** close itself. The consumer decides whether to
-     * set `isOpen={false}` (e.g. gate by reason).
-     */
-    onClose: (args: {
-        reason: TDialogCloseReason;
-    }) => void;
-    /**
-     * Animation preset for entry/exit transitions.
-     *
-     * Pass an `TAnimationPreset` (e.g. `dialogSlideUpAndFade()`) to enable
-     * CSS-based entry and exit animation. Pass `false` (or omit) to disable.
-     */
-    animate?: TAnimationPreset | false;
-    /**
-     * Additional inline styles applied to the `<dialog>` element.
-     *
-     * Use for custom width, height, transform, or other overrides.
-     */
-    style?: CSSProperties;
-    /**
-     * Test ID applied to the `<dialog>` element.
-     */
-    testId?: string;
-    /**
-     * HTML `id` attribute for the `<dialog>` element.
-     */
-    id?: string;
-    /**
-     * When true, the `::backdrop` pseudo-element is rendered transparent.
-     *
-     * Useful for stacked dialogs where only the foreground dialog should
-     * show a visible backdrop, or when the consumer wants no overlay.
-     */
-    shouldHideBackdrop?: boolean;
-    /**
-     * Called after the exit animation completes (or immediately on close when
-     * there is no animation or reduced motion is active).
-     *
-     * Use this for external lifecycle coordination, e.g. firing an
-     * `onCloseComplete` callback or notifying ExitingPersistence.
-     */
-    onExitFinish?: () => void;
-};
-/**
- * Props for the `Dialog` primitive.
- *
- * Low-level wrapper around the native `<dialog>` element.
- * Manages visibility (`showModal()` / `close()`), animation, Escape handling,
- * and backdrop-click detection. Has no visual opinions - no width, height,
- * background, border-radius, or layout. Consumers (e.g. `@atlaskit/modal-dialog`)
- * provide their own visual styling.
- *
- * Discriminated on the accessible-name source: at least one of `label`
- * (aria-label) or `labelledBy` (aria-labelledby) must be provided. This
- * enforces WCAG 4.1.2 at the type level - an unlabelled dialog landmark
- * is not constructible. Mirrors the pattern used by `TPopupContentProps`.
- */
-export type TDialogProps = TDialogBaseProps & ({
-    /**
-     * Accessible label (`aria-label`).
-     *
-     * When provided, `aria-labelledby` is not set.
-     * Use when there is no visible title element to reference.
-     */
-    label: string;
-    /**
-     * ID of the element that labels the dialog (`aria-labelledby`).
-     *
-     * Ignored when `label` is provided.
-     */
-    labelledBy?: string;
-} | {
-    /**
-     * Accessible label (`aria-label`).
-     *
-     * Optional when `labelledBy` is provided.
-     */
-    label?: string;
-    /**
-     * ID of the element that labels the dialog (`aria-labelledby`).
-     */
-    labelledBy: string;
-});
-export {};

package/dist/types-ts4.5/dialog-scroll-lock/index.d.ts

@@ -1,40 +0,0 @@
-type TDialogScrollLockProps = {
-    /**
-     * Whether the parent dialog is open. The scroll lock is applied while
-     * `true` and released the moment this flips to `false`, regardless of
-     * when (or whether) React unmounts this component. Pass the same
-     * `isOpen` value you pass to the parent `Dialog`.
-     */
-    isOpen: boolean;
-};
-/**
- * __DialogScrollLock__
- *
- * Prevents background page scrolling while a dialog is open. Designed to be
- * rendered inside a `Dialog` and given the same `isOpen` value.
- *
- * 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` while `isOpen` is `true`.
- *
- * The lock is driven by `isOpen` rather than by mount/unmount so that release
- * happens synchronously in the same commit that flips `isOpen` to `false`.
- * Relying on unmount alone was racy: `Dialog` defers the unmount of its
- * children until the host element's close/toggle event fires, which can be
- * after a consumer or test observes the dialog as hidden, leading to a
- * stale `overflow: hidden` window.
- *
- * @example
- * ```tsx
- * import { Dialog } from '@atlaskit/top-layer/dialog';
- * import { DialogScrollLock } from '@atlaskit/top-layer/dialog-scroll-lock';
- *
- * <Dialog isOpen={isOpen} onClose={onClose}>
- *   <DialogScrollLock isOpen={isOpen} />
- *   {children}
- * </Dialog>
- * ```
- */
-export declare function DialogScrollLock({ isOpen }: TDialogScrollLockProps): null;
-export {};

package/dist/types-ts4.5/entry-points/animations.d.ts

@@ -1,2 +0,0 @@
-export { dialogMotion, popupMotion, slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade, } from '../animations/presets';
-export type { TAnimationPreset } from '../animations/types';

package/dist/types-ts4.5/entry-points/dialog-scroll-lock.d.ts

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

package/dist/types-ts4.5/entry-points/dialog.d.ts

@@ -1,2 +0,0 @@
-export { createCloseEvent, Dialog } from '../dialog';
-export type { TDialogCloseReason, TDialogProps } from '../dialog';

package/dist/types-ts4.5/entry-points/focus.d.ts

@@ -1,4 +0,0 @@
-export type { TFocusableFilter } from '../focus/types';
-export { getFirstFocusable } from '../focus/get-first-focusable';
-export { getLastFocusable } from '../focus/get-last-focusable';
-export { getNextFocusable } from '../focus/get-next-focusable';

package/dist/types-ts4.5/entry-points/get-aria-for-trigger.d.ts

@@ -1 +0,0 @@
-export { getAriaForTrigger } from '../internal/get-aria-for-trigger';

package/dist/types-ts4.5/entry-points/open-layer-observer.d.ts

@@ -1,5 +0,0 @@
-export { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer/open-layer-observer';
-export { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/use-notify-open-layer-observer';
-export { useOpenLayerObserver } from '@atlaskit/layering/experimental/use-open-layer-observer';
-export { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer-namespace-provider';
-export type { LayerType } from '@atlaskit/layering/experimental/types';

package/dist/types-ts4.5/entry-points/placement-map.d.ts

@@ -1,3 +0,0 @@
-export { fromLegacyPlacement } from '../placement-map';
-export { LEGACY_PLACEMENTS } from '../placement-map/legacy-placements';
-export type { TLegacyPlacement, TPlacementOptions } from '../placement-map';

package/dist/types-ts4.5/entry-points/popover-surface.d.ts

@@ -1,2 +0,0 @@
-export { PopoverSurface } from '../popover-surface';
-export type { TPopoverSurfaceProps } from '../popover-surface';

package/dist/types-ts4.5/entry-points/popover.d.ts

@@ -1,2 +0,0 @@
-export { createPopoverCloseEvent, Popover } from '../popover';
-export type { TPopoverProps, TPopoverCloseReason, TPlacementOptions } from '../popover';

package/dist/types-ts4.5/entry-points/use-anchor-position-at-point.d.ts

@@ -1 +0,0 @@
-export { useAnchorPositionAtPoint, type TAnchorPoint, } from '../internal/use-anchor-position-at-point';

package/dist/types-ts4.5/entry-points/use-anchor-position.d.ts

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

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

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

package/dist/types-ts4.5/entry-points/use-popover-id.d.ts

@@ -1,11 +0,0 @@
-/**
- * Returns a stable HTML `id` used to wire a trigger element to its popover
- * via ARIA (`aria-controls`) and the Popover API (`popovertarget`).
- *
- * The returned value is intended for the `id` attribute on the popover and
- * for the matching `aria-controls` / `popovertarget` references on the
- * trigger. It is NOT a CSS `anchor-name` value: CSS anchor positioning is
- * handled internally by `useAnchorPosition`, which mints and applies its
- * own `anchor-name` on the trigger element.
- */
-export declare function usePopoverId(): string;

package/dist/types-ts4.5/entry-points/use-simple-light-dismiss.d.ts

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

package/dist/types-ts4.5/entry-points/use-width-from-anchor.d.ts

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

package/dist/types-ts4.5/focus/get-first-focusable.d.ts

@@ -1,8 +0,0 @@
-import type { TFocusableFilter } from './types';
-/**
- * Returns the first focusable element within the container.
- */
-export declare function getFirstFocusable({ container, filter, }: {
-    container: HTMLElement;
-    filter?: TFocusableFilter;
-}): HTMLElement | null;

package/dist/types-ts4.5/focus/get-focusables.d.ts

@@ -1,13 +0,0 @@
-import type { TFocusableFilter } from './types';
-/**
- * Returns all focusable HTMLElements within the container, optionally filtered.
- *
- * Focusables that belong to a nested top-layer scope (a `[popover]` or
- * `<dialog>` descendant of the container) are excluded - those elements
- * are owned by the inner layer's focus management. The container itself
- * is allowed to be a popover/dialog; only nested ones are filtered.
- */
-export declare function getFocusables({ container, filter, }: {
-    container: HTMLElement;
-    filter?: TFocusableFilter;
-}): HTMLElement[];

package/dist/types-ts4.5/focus/get-last-focusable.d.ts

@@ -1,8 +0,0 @@
-import type { TFocusableFilter } from './types';
-/**
- * Returns the last focusable element within the container.
- */
-export declare function getLastFocusable({ container, filter, }: {
-    container: HTMLElement;
-    filter?: TFocusableFilter;
-}): HTMLElement | null;

package/dist/types-ts4.5/focus/get-next-focusable.d.ts

@@ -1,13 +0,0 @@
-/**
- * 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.
- */
-import type { TFocusableFilter } from './types';
-export declare function getNextFocusable({ container, direction, filter, }: {
-    container: HTMLElement;
-    direction: 'forwards' | 'backwards';
-    filter?: TFocusableFilter;
-}): HTMLElement | null;

package/dist/types-ts4.5/focus/is-in-same-layer.d.ts

@@ -1,8 +0,0 @@
-/**
- * Returns true when `element` and `container` resolve to the same nearest
- * top-layer host (or both resolve to `null`, meaning the document layer).
- */
-export declare function isInSameLayer({ element, container, }: {
-    element: HTMLElement;
-    container: HTMLElement;
-}): boolean;

package/dist/types-ts4.5/focus/is-nested-layer-focused.d.ts

@@ -1,8 +0,0 @@
-/**
- * Returns `true` when `document.activeElement` is inside a nested top-layer
- * descendant of `container` (a `[popover]`, `<dialog>`, `[role="dialog"]` or
- * `[role="alertdialog"]` that is itself a descendant of `container`).
- */
-export declare function isNestedLayerFocused({ container }: {
-    container: HTMLElement;
-}): boolean;

package/dist/types-ts4.5/focus/selectors.d.ts

@@ -1,4 +0,0 @@
-export declare const selectors: {
-    focusable: string;
-    focused: string;
-};

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

@@ -1,5 +0,0 @@
-/**
- * An optional callback to restrict which focusable elements are included.
- * Return `true` to include the element, `false` to skip it.
- */
-export type TFocusableFilter = (element: HTMLElement, container: HTMLElement) => boolean;

package/dist/types-ts4.5/internal/anchor-positioning-fallback.d.ts

@@ -1,26 +0,0 @@
-import { type TPlacement } from './resolve-placement';
-/**
- * Computes popover position from trigger rect and viewport, flipping to
- * the side with more space when needed. Re-runs on scroll/resize.
- *
- * `gap` and `crossAxisShift` are pre-resolved to pixels by the
- * caller (see `resolveCssLengthToPixels`), so this function stays purely
- * numeric.
- */
-export declare function computeFallbackPosition({ triggerRect, popoverEl, placement, viewport, gap, crossAxisShift, }: {
-    triggerRect: DOMRect;
-    popoverEl: HTMLElement;
-    placement: TPlacement;
-    viewport: {
-        width: number;
-        height: number;
-    };
-    gap: number;
-    crossAxisShift: {
-        value: number;
-        direction: 'forwards' | 'backwards';
-    };
-}): {
-    top: number;
-    left: number;
-};

package/dist/types-ts4.5/internal/combine.d.ts

@@ -1,14 +0,0 @@
-/**
- * Combine multiple cleanup functions into a single cleanup function.
- *
- * @example
- * ```ts
- * useEffect(() => {
- *   return combine(
- *     bind(window, { type: 'resize', listener: onResize }),
- *     bind(window, { type: 'scroll', listener: onScroll, options: { capture: true } }),
- *   );
- * }, []);
- * ```
- */
-export declare function combine(...cleanupFns: ((() => void) | undefined)[]): () => void;

package/dist/types-ts4.5/internal/ensure-preset-styles.d.ts

@@ -1,6 +0,0 @@
-export declare function ensurePresetStyles({ preset }: {
-    preset: {
-        css: string;
-        name: string;
-    };
-}): void;