@atlaskit/top-layer 0.16.0 → 0.18.0

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

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

package/dist/types/internal/set-style.d.ts

@@ -2,8 +2,8 @@
  * Sets inline styles on an element and returns a cleanup function that
  * restores the prior inline values (so we do not stomp consumer styles).
  */
-export declare function setStyle({ el, styles, }: {
-    el: HTMLElement;
+export declare function setStyle({ element, styles, }: {
+    element: HTMLElement;
     styles: Array<{
         property: string;
         value: string;

package/dist/types/internal/slot.d.ts

@@ -2,7 +2,7 @@ import { type ForwardRefExoticComponent, type ReactNode, type RefAttributes } fr
 /**
  * Extra DOM/event props are passed through to the cloned child.
  */
-export type SlotProps = {
+export type TSlotProps = {
     children: ReactNode;
 } & Record<string, unknown>;
 /**
@@ -26,4 +26,4 @@ export type SlotProps = {
  * </Slot>
  * ```
  */
-export declare const Slot: ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>;
+export declare const Slot: ForwardRefExoticComponent<TSlotProps & RefAttributes<HTMLElement>>;

package/dist/types/internal/use-anchor-position-at-point.d.ts

@@ -5,7 +5,7 @@ import { type TPlacementOptions } from './resolve-placement';
  * anchor should be placed.
  *
  * Axis-named (`x`/`y`) rather than edge-named (`left`/`top`) so the
- * shape is unambiguous in RTL writing modes — there is no ambiguity
+ * shape is unambiguous in RTL writing modes - there is no ambiguity
  * about whether a coordinate is logical (`inline-start`/`block-start`)
  * or physical (`left`/`top`). Viewport coordinates are always
  * physical, so we name them with the physical axis labels.
@@ -48,7 +48,7 @@ export declare function useAnchorPositionAtPoint({ popoverRef, placement, getPoi
      * Called once per activation (every `isEnabled: false → true`
      * transition); the result is latched and not re-read.
      *
-     * Return `null` to signal "no point yet" — the hook stays in a
+     * Return `null` to signal "no point yet" - the hook stays in a
      * no-DOM state so another positioning strategy can own the popover.
      *
      * Read from a ref, so it does not need to be memoized.

package/dist/types/internal/use-anchor-position.d.ts

@@ -29,10 +29,6 @@ import { type TPlacementOptions } from '../internal/resolve-placement';
  * When not supported, it falls back to JavaScript-based positioning using
  * `position: fixed` with measured coordinates, re-running on scroll (capture)
  * and resize events.
- *
- * `placement` may be a fresh inline object on every render: a structural
- * comparison is used internally so re-runs are skipped when the resolved
- * placement shape is unchanged.
  */
 export declare function useAnchorPosition({ anchorRef, popoverRef, placement, forceFallbackPositioning, isEnabled, isOpen, }: {
     /**

package/dist/types/internal/use-initial-focus.d.ts

@@ -30,7 +30,7 @@ import { type TPhase } from './use-animated-visibility';
  *   `<dialog>.close()`. If the consumer reopens before the exit transition
  *   has settled, the phase machine jumps `exiting → entering` without
  *   passing through `closed`, so without this branch the popup would be
- *   visible again with focus stranded on the trigger — a keyboard usability
+ *   visible again with focus stranded on the trigger - a keyboard usability
  *   gap for menu/dialog/listbox roles.
  *
  * Note: there is a rare programmatic path where a consumer flips `isOpen`

package/dist/types/popover/types.d.ts

@@ -15,12 +15,10 @@ export type TPopoverCloseReason = 'escape' | 'light-dismiss' | 'programmatic';
 /**
  * Flat (non-discriminated) props accepted by the Popover component internally.
  *
- * TypeScript limitation: when PopupContent destructures props from a
- * discriminated union (role, label, labelledBy) and re-passes them individually
- * to Popover, TypeScript cannot prove the individual fields still satisfy the
- * union constraint. This flat type accepts all role/label combinations without
- * the union, since ARIA correctness is enforced at the TPopupContentProps
- * boundary where consumers interact.
+ * Used by wrappers like `PopupContent` that destructure props from a
+ * discriminated union and re-pass the individual fields: TypeScript cannot
+ * prove the fields still satisfy the union. ARIA correctness is enforced at
+ * the `TPopupContentProps` boundary where consumers interact.
  */
 export type TPopoverForwardedProps = TPopoverBaseProps & {
     mode?: 'auto' | 'hint' | 'manual';
@@ -65,7 +63,7 @@ type TPopoverBaseProps = {
      *   animation plays (via `allow-discrete`) before the popover becomes logically closed.
      *   Otherwise hides instantly.
      *
-     * The consumer does not conditionally render the `Popover` — visibility is driven
+     * The consumer does not conditionally render the `Popover` - visibility is driven
      * by this prop.
      *
      * **Lifecycle observable to consumers:**

package/dist/types/popover-surface/popover-surface.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type TPopoverSurfaceProps = {
     children: ReactNode;
 };
@@ -18,4 +18,4 @@ export type TPopoverSurfaceProps = {
  * `Popover` instead. `PopoverSurface` is the no-config "give me the default
  * ADS overlay look" surface, nothing more.
  */
-export declare function PopoverSurface({ children }: TPopoverSurfaceProps): React.ReactElement;
+export declare function PopoverSurface({ children }: TPopoverSurfaceProps): ReactNode;

package/focus/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/focus.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/focus.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/focus.d.ts"
 }

package/get-aria-for-trigger/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/get-aria-for-trigger.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/get-aria-for-trigger.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/get-aria-for-trigger.d.ts"
 }

package/open-layer-observer/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/open-layer-observer.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/open-layer-observer.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/open-layer-observer.d.ts"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/top-layer",
-	"version": "0.16.0",
+	"version": "0.18.0",
 	"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.8.0",
-		"@atlaskit/tokens": "^13.3.0",
+		"@atlaskit/tokens": "^13.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -53,7 +53,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/lozenge": "^13.8.0",
+		"@atlaskit/lozenge": "^13.9.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^8.3.0",

package/placement-map/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/placement-map.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/placement-map.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/placement-map.d.ts"
 }

package/popover/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/popover.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/popover.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/popover.d.ts"
 }

package/popover-surface/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/popover-surface.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/popover-surface.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/popover-surface.d.ts"
 }

package/testing/polyfill/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../../dist/types/testing/polyfill.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/testing/polyfill.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/testing/polyfill.d.ts"
 }

package/testing/to-be-visible/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../../dist/types/testing/to-be-visible.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../../dist/types-ts4.5/testing/to-be-visible.d.ts"
-      ]
-    }
-  }
+  "types": "../../dist/types/testing/to-be-visible.d.ts"
 }

package/use-anchor-position/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/use-anchor-position.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/use-anchor-position.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/use-anchor-position.d.ts"
 }

package/use-anchor-position-at-point/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/use-anchor-position-at-point.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/use-anchor-position-at-point.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/use-anchor-position-at-point.d.ts"
 }

package/use-arrow-navigation/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/use-arrow-navigation.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/use-arrow-navigation.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/use-arrow-navigation.d.ts"
 }

package/use-popover-id/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/use-popover-id.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/use-popover-id.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/use-popover-id.d.ts"
 }

package/use-simple-light-dismiss/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/use-simple-light-dismiss.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/use-simple-light-dismiss.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/use-simple-light-dismiss.d.ts"
 }

package/use-width-from-anchor/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/use-width-from-anchor.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/use-width-from-anchor.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/use-width-from-anchor.d.ts"
 }

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

@@ -1,94 +0,0 @@
-import { type TAnimationPreset } from './types';
-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;
-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';