@atlaskit/top-layer 0.12.2 → 0.14.0

package/dist/esm/popup/popup.js

@@ -1,72 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useId, useRef, useState } from 'react';
-import { PopupProvider } from './popup-provider';
-/**
- * Popup compound: trigger + popover content.
- *
- * Use when a button opens anchored content (dropdown, menu, dialog).
- * The browser manages visibility via `togglePopover()`; the consumer
- * never manages `isOpen`. For custom trigger lifecycles (hover, timers,
- * external state), use `Popover` directly instead.
- *
- * Provides context (triggerRef, placement, isOpen, onClose, mode) that
- * `Popup.Content` reads and forwards to the underlying `Popover`.
- */
-export function PopupRoot(props) {
-  var _props$placement, _props$mode;
-  var children = props.children,
-    testId = props.testId,
-    forceFallbackPositioning = props.forceFallbackPositioning,
-    onOpenChange = props.onOpenChange;
-  // `{}` resolves to "below the trigger, centered, with `space.100` gap"
-  // inside `useAnchorPosition`, which is the common case.
-  var placement = (_props$placement = props.placement) !== null && _props$placement !== void 0 ? _props$placement : {};
-  var mode = (_props$mode = props.mode) !== null && _props$mode !== void 0 ? _props$mode : 'auto';
-
-  // `TPopupProps` discriminates on `mode`: `manual` types `onClose` as
-  // `never`, so for manual consumers `props.onClose` is always `undefined`
-  // here. No runtime guard needed; the type contract carries the rule.
-  var onClose = props.onClose;
-  var id = useId();
-  // `useId()` returns IDs containing colons (`:r1:`), which are invalid
-  // in CSS selectors and `popover` target attributes. `replaceAll` is
-  // not in our browser matrix.
-  var sanitizedId = id.replace(/:/g, '');
-  var popoverId = "popover-".concat(sanitizedId);
-  var triggerRef = useRef(null);
-  var popoverRef = useRef(null);
-  var _useState = useState('closed'),
-    _useState2 = _slicedToArray(_useState, 2),
-    popupState = _useState2[0],
-    setPopupState = _useState2[1];
-  // Initial seed before `Popup.Content`'s layout effect resolves the
-  // real role on first paint.
-  var _useState3 = useState('dialog'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    ariaHasPopup = _useState4[0],
-    setAriaHasPopup = _useState4[1];
-  var handleClose = useCallback(function (args) {
-    onClose === null || onClose === void 0 || onClose(args);
-  }, [onClose]);
-  var contextValue = {
-    popoverId: popoverId,
-    placement: placement,
-    // `null` when the consumer did not supply a handler (manual mode, or
-    // auto/hint without a light-dismiss handler). `Popup.Content` reads
-    // this to decide whether to forward an `onClose` to `Popover`.
-    onClose: onClose ? handleClose : null,
-    triggerRef: triggerRef,
-    popoverRef: popoverRef,
-    popupState: popupState,
-    setPopupState: setPopupState,
-    onOpenChange: onOpenChange,
-    mode: mode,
-    ariaHasPopup: ariaHasPopup,
-    setAriaHasPopup: setAriaHasPopup,
-    testId: testId,
-    forceFallbackPositioning: forceFallbackPositioning
-  };
-  return /*#__PURE__*/React.createElement(PopupProvider, {
-    value: contextValue
-  }, children);
-}

package/dist/esm/popup/types.js

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

package/dist/esm/popup/use-maybe-popup-context.js

@@ -1,12 +0,0 @@
-import { useContext } from 'react';
-import { PopupContext } 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 function useMaybePopupContext() {
-  return useContext(PopupContext);
-}

package/dist/esm/popup/use-popup-context.js

@@ -1,15 +0,0 @@
-import { useContext } from 'react';
-import { PopupContext } from './popup-context';
-
-/**
- * Returns the nearest `Popup` context value.
- *
- * Throws if called outside of a `<Popup>` compound component.
- */
-export function usePopupContext() {
-  var ctx = useContext(PopupContext);
-  if (ctx === null) {
-    throw new Error('@atlaskit/top-layer: Popup compound components must be used within <Popup>.');
-  }
-  return ctx;
-}

package/dist/types/entry-points/popup-surface.d.ts

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

package/dist/types/entry-points/popup.d.ts

@@ -1,2 +0,0 @@
-export { Popup } from '../popup';
-export type { TPlacementOptions, TPopupProps, TPopupContentProps, TPopupRole, TPopupTriggerProps, TTriggerFunctionRenderProps, } from '../popup';

package/dist/types/focus/focus.d.ts

@@ -1,50 +0,0 @@
-/**
- * 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.
- */
-/**
- * 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;
-/**
- * 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;
-/**
- * Returns the first focusable element within the container.
- */
-export declare function getFirstFocusable({ container, filter, }: {
-    container: HTMLElement;
-    filter?: TFocusableFilter;
-}): HTMLElement | null;
-/**
- * Returns the last focusable element within the container.
- */
-export declare function getLastFocusable({ container, filter, }: {
-    container: HTMLElement;
-    filter?: TFocusableFilter;
-}): HTMLElement | 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 declare function getNextFocusable({ container, direction, filter, }: {
-    container: HTMLElement;
-    direction: 'forwards' | 'backwards';
-    filter?: TFocusableFilter;
-}): HTMLElement | null;

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

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

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

@@ -1,34 +0,0 @@
-import { PopupRoot } from './popup';
-import { PopupContent } from './popup-content';
-import { PopupSurface } from './popup-surface';
-import { PopupTrigger } from './popup-trigger';
-import { PopupTriggerFunction } from './popup-trigger-function';
-/**
- * Compound component for rendering content in the browser's top layer
- * using the native Popover API (`popover="auto"`).
- * Placement is owned by this compound: root provides it via context, Content applies it
- * (CSS Anchor Positioning or JS fallback).
- *
- * For default overlay styling (background, shadow, border-radius), see `PopupSurface` in the package examples.
- *
- * @example
- * ```tsx
- * <Popup placement={{ edge: 'end' }} onClose={handleClose}>
- *   <Popup.Trigger>
- *     <button>Open</button>
- *   </Popup.Trigger>
- *   <Popup.Content role="dialog" label="My popup">
- *     Content goes here
- *   </Popup.Content>
- * </Popup>
- * ```
- */
-declare const Popup: typeof PopupRoot & {
-    Trigger: typeof PopupTrigger;
-    TriggerFunction: typeof PopupTriggerFunction;
-    Content: typeof PopupContent;
-    Surface: typeof PopupSurface;
-};
-export { Popup };
-export type { TPlacementOptions, TPopupProps, TPopupContentProps, TPopupRole, TPopupSurfaceProps, TPopupTriggerProps, } from './types';
-export type { TTriggerFunctionRenderProps } from './popup-trigger-function';

package/dist/types/popup/popup-content.d.ts

@@ -1,14 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import { type TPopupContentProps } from './types';
-/**
- * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
- *
- * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
- * and onClose from context. For standalone usage (tooltip, spotlight, flag),
- * use `Popover` + `useAnchorPosition` directly.
- */
-export declare const PopupContent: React.ForwardRefExoticComponent<TPopupContentProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,96 +0,0 @@
-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).
-     */
-    popoverId: string;
-    /**
-     * Requested placement.
-     */
-    placement: TPlacementOptions;
-    /**
-     * Called when the popover is dismissed via light dismiss.
-     * `null` when mode is 'manual' (no light dismiss).
-     */
-    onClose: ((args: {
-        reason: TPopoverCloseReason;
-    }) => void) | null;
-    /**
-     * Mutable ref to the trigger element (set by Popup.Trigger / Popup.TriggerFunction).
-     */
-    triggerRef: MutableRefObject<HTMLElement | null>;
-    /**
-     * Ref to the popover content element (set by Popup.Content).
-     */
-    popoverRef: RefObject<HTMLDivElement | null>;
-    /**
-     * The full lifecycle state of the popup.
-     *
-     * See `TPopupState` for the full state machine description.
-     */
-    popupState: TPopupState;
-    /**
-     * Updates the popup lifecycle state. Called by `PopupContent` as animations
-     * begin and complete.
-     */
-    setPopupState: (state: TPopupState) => void;
-    /**
-     * Consumer's onOpenChange callback, forwarded to the Popover.
-     */
-    onOpenChange?: (args: {
-        isOpen: boolean;
-        element: HTMLDivElement;
-    }) => void;
-    /**
-     * Native popover mode. Flows from the Popup root to Content via context.
-     */
-    mode: 'auto' | 'hint' | 'manual';
-    /**
-     * The `aria-haspopup` value derived from the content's role.
-     *
-     * Set by `Popup.Content` via `setAriaHasPopup` when it renders.
-     * Read by `Popup.Trigger` / `Popup.TriggerFunction` to set
-     * the correct `aria-haspopup` on the trigger element.
-     *
-     * This flows the content's role to the trigger without requiring
-     * the consumer to specify the role in two places. The trigger
-     * renders with the default ('dialog') on first paint; Content's
-     * layout effect updates it before the browser paints.
-     */
-    ariaHasPopup: TAriaHasPopupValue;
-    /**
-     * Updates `ariaHasPopup` - called by Content on mount/role change.
-     */
-    setAriaHasPopup: (value: TAriaHasPopupValue) => void;
-    /**
-     * Test ID prefix.
-     */
-    testId?: string;
-    /**
-     * Forces the JavaScript positioning fallback even when the browser
-     * supports CSS Anchor Positioning. Useful for testing fallback
-     * behavior in any environment, including production.
-     */
-    forceFallbackPositioning?: boolean;
-};
-export declare const PopupContext: React.Context<TPopupContextValue | null>;

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

@@ -1,10 +0,0 @@
-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/popup/popup-surface.d.ts

@@ -1,22 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
-import { type TPopupSurfaceProps } from './types';
-/**
- * Optional styled wrapper for popup content.
- *
- * Adds default visual styling (background, border-radius, box-shadow)
- * using design tokens. Consumers who want fully custom styling
- * should use `Popup.Content` without wrapping in `PopupSurface`.
- *
- * Exposed as `Popup.Surface` on the compound component.
- *
- * **Presentational primitive - `children`-only by design.** This component
- * intentionally exposes no `style`, `className`, `xcss`, `id`, or `ref`
- * props. If you need any of those, render your own wrapper element inside
- * `Popup.Content` instead - `PopupSurface` is the no-config "give me the
- * default ADS overlay look" surface, nothing more.
- */
-export declare function PopupSurface({ children }: TPopupSurfaceProps): React.ReactElement;

package/dist/types/popup/popup-trigger-function.d.ts

@@ -1,112 +0,0 @@
-import React, { type ReactNode, type RefCallback } from 'react';
-import { type TAriaHasPopupValue } from '../internal/role-types';
-/**
- * Props passed to the `TriggerFunction` render-prop child.
- */
-export type TTriggerFunctionRenderProps = {
-    /**
-     * Ref callback to attach to the trigger element. Sets `triggerRef` in
-     * popup context for anchor positioning and `togglePopover`.
-     */
-    ref: RefCallback<HTMLElement>;
-    /**
-     * Whether the popover content is currently visible.
-     * Use for `aria-expanded` and conditional styling.
-     */
-    isOpen: boolean;
-    /**
-     * ID of the popover content element. Use for `aria-controls`.
-     */
-    popoverId: string;
-    /**
-     * Toggle the popover open/closed via the native Popover API.
-     *
-     * Calling `toggle()` invokes `popoverEl.togglePopover()` on the
-     * underlying content element. This hides the imperative DOM API
-     * behind a stable function reference.
-     */
-    toggle: () => void;
-    /**
-     * Pre-composed ARIA attributes for the trigger element.
-     *
-     * Spread these onto your trigger: `{...ariaAttributes}`.
-     *
-     * Contains:
-     * - `aria-expanded`: whether the popover is open
-     * - `aria-controls`: ID of the popover content
-     * - `aria-haspopup`: derived from the content's ARIA role via context
-     *
-     * **Note on `aria-haspopup`:** When the content's role maps to a specific
-     * popup type (`'menu'`, `'dialog'`, `'listbox'`, etc.), the corresponding
-     * string value is emitted. For non-popup roles (`tooltip`, `note`,
-     * `status`, `alert`, `log`) the value is `undefined`, so React drops the
-     * attribute entirely - these triggers should not announce a popup.
-     *
-     * The value type (`TAriaHasPopupValue`) is internal and may narrow further
-     * in future minor versions. Do **not** extract it via `Parameters<…>`.
-     * Spread `ariaAttributes` directly onto the trigger; do not destructure
-     * and re-type.
-     */
-    ariaAttributes: {
-        'aria-expanded': boolean;
-        'aria-controls': string;
-        'aria-haspopup': TAriaHasPopupValue;
-    };
-};
-type TPopupTriggerFunctionProps = {
-    /**
-     * Render-prop function that receives trigger props.
-     *
-     * Unlike `Popup.Trigger`, this does not use `cloneElement`. The consumer
-     * is responsible for spreading ref, ARIA attributes, and attaching `toggle`
-     * to the appropriate event(s).
-     *
-     * @example
-     * ```tsx
-     * <Popup.TriggerFunction>
-     *   {({ ref, toggle, ariaAttributes }) => (
-     *     <button ref={ref} onClick={toggle} {...ariaAttributes}>
-     *       Open menu
-     *     </button>
-     *   )}
-     * </Popup.TriggerFunction>
-     * ```
-     *
-     * **Note:** This sub-component uses a render-prop pattern and is not
-     * compatible with React Server Components (RSC). It must be used
-     * inside a client component boundary (`'use client'`).
-     */
-    children: (props: TTriggerFunctionRenderProps) => ReactNode;
-};
-/**
- * Render-prop alternative to `Popup.Trigger`.
- *
- * Use when you need full control over the trigger element. For example,
- * to compose your own trigger with custom event handlers, wrap a third-party
- * component, or build a trigger from multiple elements.
- *
- * `Popup.Trigger` uses `cloneElement` internally, which limits composability.
- * `Popup.TriggerFunction` hands you the raw props and lets you wire them up.
- *
- * **Note:** This sub-component uses a render-prop pattern and is not
- * compatible with React Server Components (RSC). It must be used inside
- * a client component boundary (`'use client'`).
- *
- * @example
- * ```tsx
- * <Popup placement={{ edge: 'end' }} onClose={handleClose}>
- *   <Popup.TriggerFunction>
- *     {({ ref, toggle, ariaAttributes }) => (
- *       <button ref={ref} onClick={toggle} {...ariaAttributes}>
- *         Open
- *       </button>
- *     )}
- *   </Popup.TriggerFunction>
- *   <Popup.Content role="dialog" label="My popup">
- *     Content
- *   </Popup.Content>
- * </Popup>
- * ```
- */
-export declare function PopupTriggerFunction({ children }: TPopupTriggerFunctionProps): React.ReactNode;
-export {};

package/dist/types/popup/popup-trigger.d.ts

@@ -1,14 +0,0 @@
-import { type ReactNode } from 'react';
-import { type TPopupTriggerProps } from './types';
-/**
- * Wraps a single trigger element via `cloneElement`. Attaches aria
- * attributes, the toggle handler, and the anchor-name. `aria-haspopup`
- * is derived from `Popup.Content`'s role via context.
- *
- * Child constraints: must be a single ref-forwarding element. The child's
- * `onClick` is composed (runs after); other event handlers are NOT.
- * Children using Compiled's `css` prop swallow injected props - use
- * `Popup.TriggerFunction` for these cases or any time you need handler
- * composition.
- */
-export declare function PopupTrigger({ children }: TPopupTriggerProps): ReactNode;

package/dist/types/popup/popup.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { type TPopupProps } from './types';
-/**
- * Popup compound: trigger + popover content.
- *
- * Use when a button opens anchored content (dropdown, menu, dialog).
- * The browser manages visibility via `togglePopover()`; the consumer
- * never manages `isOpen`. For custom trigger lifecycles (hover, timers,
- * external state), use `Popover` directly instead.
- *
- * Provides context (triggerRef, placement, isOpen, onClose, mode) that
- * `Popup.Content` reads and forwards to the underlying `Popover`.
- */
-export declare function PopupRoot(props: TPopupProps): React.ReactElement;