@atlaskit/top-layer 0.16.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (141) hide show
  1. package/AGENTS.md +113 -0
  2. package/CHANGELOG.md +14 -0
  3. package/README.md +4 -4
  4. package/animations/package.json +1 -8
  5. package/dialog/package.json +1 -8
  6. package/dialog-scroll-lock/package.json +1 -8
  7. package/dist/cjs/animations/presets.js +96 -9
  8. package/dist/cjs/dialog/dialog-content.js +12 -30
  9. package/dist/cjs/entry-points/animations.js +12 -0
  10. package/dist/cjs/internal/set-style.js +5 -5
  11. package/dist/cjs/internal/slot.js +1 -1
  12. package/dist/cjs/internal/use-anchor-position-at-point.js +8 -8
  13. package/dist/cjs/internal/use-anchor-position.js +19 -40
  14. package/dist/cjs/internal/use-animated-visibility.js +31 -61
  15. package/dist/cjs/internal/use-initial-focus.js +9 -13
  16. package/dist/cjs/internal/use-width-from-anchor.js +6 -6
  17. package/dist/cjs/popover/popover.js +30 -58
  18. package/dist/cjs/popover-surface/popover-surface.js +4 -3
  19. package/dist/cjs/testing/polyfill.js +9 -9
  20. package/dist/cjs/use-simple-light-dismiss/index.js +3 -3
  21. package/dist/es2019/animations/presets.js +145 -2
  22. package/dist/es2019/dialog/dialog-content.js +12 -30
  23. package/dist/es2019/entry-points/animations.js +1 -1
  24. package/dist/es2019/internal/set-style.js +5 -5
  25. package/dist/es2019/internal/slot.js +1 -1
  26. package/dist/es2019/internal/use-anchor-position-at-point.js +8 -8
  27. package/dist/es2019/internal/use-anchor-position.js +19 -40
  28. package/dist/es2019/internal/use-animated-visibility.js +31 -61
  29. package/dist/es2019/internal/use-initial-focus.js +9 -13
  30. package/dist/es2019/internal/use-width-from-anchor.js +6 -6
  31. package/dist/es2019/popover/popover.js +30 -58
  32. package/dist/es2019/popover-surface/popover-surface.js +1 -1
  33. package/dist/es2019/testing/polyfill.js +7 -11
  34. package/dist/es2019/use-simple-light-dismiss/index.js +3 -3
  35. package/dist/esm/animations/presets.js +93 -9
  36. package/dist/esm/dialog/dialog-content.js +12 -30
  37. package/dist/esm/entry-points/animations.js +1 -1
  38. package/dist/esm/internal/set-style.js +5 -5
  39. package/dist/esm/internal/slot.js +1 -1
  40. package/dist/esm/internal/use-anchor-position-at-point.js +8 -8
  41. package/dist/esm/internal/use-anchor-position.js +19 -40
  42. package/dist/esm/internal/use-animated-visibility.js +31 -61
  43. package/dist/esm/internal/use-initial-focus.js +9 -13
  44. package/dist/esm/internal/use-width-from-anchor.js +6 -6
  45. package/dist/esm/popover/popover.js +30 -58
  46. package/dist/esm/popover-surface/popover-surface.js +1 -1
  47. package/dist/esm/testing/polyfill.js +9 -9
  48. package/dist/esm/use-simple-light-dismiss/index.js +3 -3
  49. package/dist/types/animations/presets.d.ts +16 -0
  50. package/dist/types/entry-points/animations.d.ts +1 -1
  51. package/dist/types/internal/set-style.d.ts +2 -2
  52. package/dist/types/internal/slot.d.ts +2 -2
  53. package/dist/types/internal/use-anchor-position-at-point.d.ts +2 -2
  54. package/dist/types/internal/use-anchor-position.d.ts +0 -4
  55. package/dist/types/internal/use-initial-focus.d.ts +1 -1
  56. package/dist/types/popover/types.d.ts +5 -7
  57. package/dist/types/popover-surface/popover-surface.d.ts +2 -2
  58. package/focus/package.json +1 -8
  59. package/get-aria-for-trigger/package.json +1 -8
  60. package/open-layer-observer/package.json +1 -8
  61. package/package.json +3 -3
  62. package/placement-map/package.json +1 -8
  63. package/popover/package.json +1 -8
  64. package/popover-surface/package.json +1 -8
  65. package/testing/polyfill/package.json +1 -8
  66. package/testing/to-be-visible/package.json +1 -8
  67. package/use-anchor-position/package.json +1 -8
  68. package/use-anchor-position-at-point/package.json +1 -8
  69. package/use-arrow-navigation/package.json +1 -8
  70. package/use-popover-id/package.json +1 -8
  71. package/use-simple-light-dismiss/package.json +1 -8
  72. package/use-width-from-anchor/package.json +1 -8
  73. package/dist/types-ts4.5/animations/presets.d.ts +0 -94
  74. package/dist/types-ts4.5/animations/types.d.ts +0 -38
  75. package/dist/types-ts4.5/dialog/create-close-event.d.ts +0 -23
  76. package/dist/types-ts4.5/dialog/dialog-content.d.ts +0 -24
  77. package/dist/types-ts4.5/dialog/index.d.ts +0 -3
  78. package/dist/types-ts4.5/dialog/types.d.ts +0 -126
  79. package/dist/types-ts4.5/dialog-scroll-lock/index.d.ts +0 -40
  80. package/dist/types-ts4.5/entry-points/animations.d.ts +0 -2
  81. package/dist/types-ts4.5/entry-points/dialog-scroll-lock.d.ts +0 -1
  82. package/dist/types-ts4.5/entry-points/dialog.d.ts +0 -2
  83. package/dist/types-ts4.5/entry-points/focus.d.ts +0 -4
  84. package/dist/types-ts4.5/entry-points/get-aria-for-trigger.d.ts +0 -1
  85. package/dist/types-ts4.5/entry-points/open-layer-observer.d.ts +0 -5
  86. package/dist/types-ts4.5/entry-points/placement-map.d.ts +0 -3
  87. package/dist/types-ts4.5/entry-points/popover-surface.d.ts +0 -2
  88. package/dist/types-ts4.5/entry-points/popover.d.ts +0 -2
  89. package/dist/types-ts4.5/entry-points/use-anchor-position-at-point.d.ts +0 -1
  90. package/dist/types-ts4.5/entry-points/use-anchor-position.d.ts +0 -1
  91. package/dist/types-ts4.5/entry-points/use-arrow-navigation.d.ts +0 -3
  92. package/dist/types-ts4.5/entry-points/use-popover-id.d.ts +0 -11
  93. package/dist/types-ts4.5/entry-points/use-simple-light-dismiss.d.ts +0 -2
  94. package/dist/types-ts4.5/entry-points/use-width-from-anchor.d.ts +0 -1
  95. package/dist/types-ts4.5/focus/get-first-focusable.d.ts +0 -8
  96. package/dist/types-ts4.5/focus/get-focusables.d.ts +0 -13
  97. package/dist/types-ts4.5/focus/get-last-focusable.d.ts +0 -8
  98. package/dist/types-ts4.5/focus/get-next-focusable.d.ts +0 -13
  99. package/dist/types-ts4.5/focus/is-in-same-layer.d.ts +0 -8
  100. package/dist/types-ts4.5/focus/is-nested-layer-focused.d.ts +0 -8
  101. package/dist/types-ts4.5/focus/selectors.d.ts +0 -4
  102. package/dist/types-ts4.5/focus/types.d.ts +0 -5
  103. package/dist/types-ts4.5/index.d.ts +0 -0
  104. package/dist/types-ts4.5/internal/anchor-positioning-fallback.d.ts +0 -26
  105. package/dist/types-ts4.5/internal/combine.d.ts +0 -14
  106. package/dist/types-ts4.5/internal/ensure-preset-styles.d.ts +0 -6
  107. package/dist/types-ts4.5/internal/get-aria-for-trigger.d.ts +0 -93
  108. package/dist/types-ts4.5/internal/placement-to-position-area.d.ts +0 -21
  109. package/dist/types-ts4.5/internal/placement-to-try-fallbacks.d.ts +0 -36
  110. package/dist/types-ts4.5/internal/reduced-motion.d.ts +0 -14
  111. package/dist/types-ts4.5/internal/resolve-css-length-to-pixels.d.ts +0 -20
  112. package/dist/types-ts4.5/internal/resolve-css-length.d.ts +0 -8
  113. package/dist/types-ts4.5/internal/resolve-placement.d.ts +0 -58
  114. package/dist/types-ts4.5/internal/role-to-aria-has-popup.d.ts +0 -13
  115. package/dist/types-ts4.5/internal/role-types.d.ts +0 -71
  116. package/dist/types-ts4.5/internal/set-style.d.ts +0 -11
  117. package/dist/types-ts4.5/internal/should-focus-into-popover.d.ts +0 -8
  118. package/dist/types-ts4.5/internal/slot.d.ts +0 -29
  119. package/dist/types-ts4.5/internal/use-anchor-position-at-point.d.ts +0 -67
  120. package/dist/types-ts4.5/internal/use-anchor-position.d.ts +0 -91
  121. package/dist/types-ts4.5/internal/use-animated-visibility.d.ts +0 -109
  122. package/dist/types-ts4.5/internal/use-animation-preset.d.ts +0 -11
  123. package/dist/types-ts4.5/internal/use-focus-wrap.d.ts +0 -25
  124. package/dist/types-ts4.5/internal/use-initial-focus.d.ts +0 -73
  125. package/dist/types-ts4.5/internal/use-preset-styles.d.ts +0 -15
  126. package/dist/types-ts4.5/internal/use-width-from-anchor.d.ts +0 -21
  127. package/dist/types-ts4.5/placement-map/index.d.ts +0 -51
  128. package/dist/types-ts4.5/placement-map/legacy-placements.d.ts +0 -27
  129. package/dist/types-ts4.5/placement-map/placement-mapping.d.ts +0 -13
  130. package/dist/types-ts4.5/popover/create-close-event.d.ts +0 -25
  131. package/dist/types-ts4.5/popover/index.d.ts +0 -3
  132. package/dist/types-ts4.5/popover/popover.d.ts +0 -17
  133. package/dist/types-ts4.5/popover/types.d.ts +0 -193
  134. package/dist/types-ts4.5/popover-surface/index.d.ts +0 -2
  135. package/dist/types-ts4.5/popover-surface/popover-surface.d.ts +0 -21
  136. package/dist/types-ts4.5/testing/polyfill.d.ts +0 -25
  137. package/dist/types-ts4.5/testing/to-be-visible.d.ts +0 -23
  138. package/dist/types-ts4.5/use-arrow-navigation/index.d.ts +0 -3
  139. package/dist/types-ts4.5/use-arrow-navigation/is-at-current-menu-level.d.ts +0 -48
  140. package/dist/types-ts4.5/use-arrow-navigation/use-arrow-navigation.d.ts +0 -102
  141. package/dist/types-ts4.5/use-simple-light-dismiss/index.d.ts +0 -45
@@ -1,71 +0,0 @@
1
- /**
2
- * Valid values for the `aria-haspopup` attribute.
3
- *
4
- * Derived from the HTML spec - maps popover roles to what the trigger
5
- * announces. `undefined` means the attribute is omitted entirely (used for
6
- * non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
7
- * `aria-haspopup` would be misleading).
8
- *
9
- * `true` is intentionally NOT in the union - the runtime only ever produces
10
- * the explicit string forms, so widening the type would invite consumers to
11
- * pass `true` and get an `aria-haspopup="true"` serialisation that the
12
- * runtime no longer emits.
13
- */
14
- export type TAriaHasPopupValue = 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | undefined;
15
- /**
16
- * Roles that require an accessible name (`label` or `labelledBy`) per WCAG 4.1.2.
17
- * Without a name, assistive technology cannot identify these landmarks.
18
- */
19
- export type TRoleRequiringAccessibleName = 'dialog' | 'alertdialog' | 'menu';
20
- /**
21
- * Roles where the accessible name is derived from content or provided externally
22
- * (e.g. a combobox labels its listbox, tooltip content IS the accessible name).
23
- */
24
- export type TRoleWithImplicitName = 'tooltip' | 'listbox' | 'tree' | 'grid' | 'note' | 'status' | 'alert' | 'log';
25
- type TAccessibleNameRequired = {
26
- /**
27
- * Accessible name via `aria-label`.
28
- */
29
- label: string;
30
- labelledBy?: string;
31
- } | {
32
- label?: string;
33
- /**
34
- * Accessible name via `aria-labelledby`.
35
- */
36
- labelledBy: string;
37
- };
38
- type TAccessibleNameOptional = {
39
- label?: string;
40
- labelledBy?: string;
41
- };
42
- /**
43
- * ARIA role props where a role is always required.
44
- *
45
- * Used by `TPopupContentProps`. Popup content must always declare
46
- * its role so assistive technology can identify the layer.
47
- */
48
- export type TAriaRoleRequired = ({
49
- role: TRoleRequiringAccessibleName;
50
- } & TAccessibleNameRequired) | ({
51
- role: TRoleWithImplicitName;
52
- } & TAccessibleNameOptional);
53
- /**
54
- * ARIA role props where a role is optional.
55
- *
56
- * Used by `TPopoverProps`. The low-level primitive allows omitting
57
- * the role for cases where it is set externally or not needed.
58
- */
59
- export type TAriaRoleOptional = ({
60
- role: TRoleRequiringAccessibleName;
61
- } & TAccessibleNameRequired) | ({
62
- role?: TRoleWithImplicitName;
63
- } & TAccessibleNameOptional);
64
- /**
65
- * Returns `true` when the given popover role moves focus into the popover
66
- * on open, and `false` otherwise (including when `role` is `undefined`).
67
- */
68
- export declare function shouldFocusIntoPopover({ role, }: {
69
- role: TRoleRequiringAccessibleName | TRoleWithImplicitName | undefined;
70
- }): boolean;
71
- export {};
@@ -1,11 +0,0 @@
1
- /**
2
- * Sets inline styles on an element and returns a cleanup function that
3
- * restores the prior inline values (so we do not stomp consumer styles).
4
- */
5
- export declare function setStyle({ el, styles, }: {
6
- el: HTMLElement;
7
- styles: Array<{
8
- property: string;
9
- value: string;
10
- }>;
11
- }): () => void;
@@ -1,8 +0,0 @@
1
- import type { TRoleRequiringAccessibleName, TRoleWithImplicitName } from './role-types';
2
- /**
3
- * Returns `true` when the given popover role moves focus into the popover
4
- * on open, and `false` otherwise (including when `role` is `undefined`).
5
- */
6
- export declare function shouldFocusIntoPopover({ role, }: {
7
- role: TRoleRequiringAccessibleName | TRoleWithImplicitName | undefined;
8
- }): boolean;
@@ -1,29 +0,0 @@
1
- import { type ForwardRefExoticComponent, type ReactNode, type RefAttributes } from 'react';
2
- /**
3
- * Extra DOM/event props are passed through to the cloned child.
4
- */
5
- export type SlotProps = {
6
- children: ReactNode;
7
- } & Record<string, unknown>;
8
- /**
9
- * Merges props (including ref) onto a single React element child.
10
- *
11
- * A safer alternative to raw `cloneElement` that:
12
- * 1. Guards with `isValidElement` - non-element children (strings,
13
- * fragments, null) are returned as-is instead of crashing.
14
- * 2. Merges refs via `mergeRefs` so both the caller's ref and the
15
- * child's existing ref are honoured.
16
- * 3. Spreads any additional props (ARIA attributes, event handlers, etc.)
17
- * onto the child element.
18
- *
19
- * Event handlers (e.g. `onClick`) are **not** auto-merged - the caller's
20
- * handler replaces the child's. Compose handlers before passing them in.
21
- *
22
- * @example
23
- * ```tsx
24
- * <Slot ref={triggerRef} onClick={handleClick} aria-expanded={isOpen}>
25
- * <button>Open</button>
26
- * </Slot>
27
- * ```
28
- */
29
- export declare const Slot: ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>;
@@ -1,67 +0,0 @@
1
- import { type RefObject } from 'react';
2
- import { type TPlacementOptions } from './resolve-placement';
3
- /**
4
- * A point in viewport coordinates (CSS pixels) at which the synthetic
5
- * anchor should be placed.
6
- *
7
- * Axis-named (`x`/`y`) rather than edge-named (`left`/`top`) so the
8
- * shape is unambiguous in RTL writing modes — there is no ambiguity
9
- * about whether a coordinate is logical (`inline-start`/`block-start`)
10
- * or physical (`left`/`top`). Viewport coordinates are always
11
- * physical, so we name them with the physical axis labels.
12
- */
13
- export type TAnchorPoint = {
14
- x: number;
15
- y: number;
16
- };
17
- /**
18
- * Positions a popover at a consumer-supplied viewport coordinate using a
19
- * hidden synthetic anchor.
20
- *
21
- * @example
22
- * ```tsx
23
- * function PointPositionedPopover({ popoverRef, placement, mousePos }) {
24
- * useAnchorPositionAtPoint({
25
- * popoverRef,
26
- * placement,
27
- * isEnabled: Boolean(mousePos),
28
- * getPoint: () => {
29
- * if (!mousePos) return null;
30
- * return { x: mousePos.clientX, y: mousePos.clientY };
31
- * },
32
- * });
33
- * return <Popover ref={popoverRef}>...</Popover>;
34
- * }
35
- * ```
36
- */
37
- export declare function useAnchorPositionAtPoint({ popoverRef, placement, getPoint, isEnabled, isOpen, }: {
38
- /**
39
- * Element being positioned. Passed to `useAnchorPosition`.
40
- */
41
- popoverRef: RefObject<HTMLElement | null>;
42
- /**
43
- * Where the popover sits relative to the anchor.
44
- */
45
- placement: TPlacementOptions;
46
- /**
47
- * Lazy callback returning the viewport coordinate to anchor at.
48
- * Called once per activation (every `isEnabled: false → true`
49
- * transition); the result is latched and not re-read.
50
- *
51
- * Return `null` to signal "no point yet" — the hook stays in a
52
- * no-DOM state so another positioning strategy can own the popover.
53
- *
54
- * Read from a ref, so it does not need to be memoized.
55
- */
56
- getPoint: () => TAnchorPoint | null;
57
- /**
58
- * When `false`, the hook is a no-op: no synthetic anchor is created
59
- * and no positioning is applied. Defaults to `true`.
60
- */
61
- isEnabled?: boolean;
62
- /**
63
- * Whether the popover is currently open. Forwarded to the inner
64
- * `useAnchorPosition` so it re-runs across host remount cycles.
65
- */
66
- isOpen: boolean;
67
- }): void;
@@ -1,91 +0,0 @@
1
- /**
2
- * Anchor positioning for top-layer popovers. See
3
- * `notes/architecture/positioning.md` for the full model.
4
- *
5
- * Two runtime paths: CSS Anchor Positioning (modern browsers) and a JS
6
- * fallback that measures the trigger and writes `top`/`left`.
7
- *
8
- * Both paths honour `offset.gap` and `offset.crossAxisShift`. The
9
- * CSS path passes the values through as strings; the JS fallback resolves
10
- * them to pixels via a hidden DOM probe (see `resolveCssLengthToPixels`)
11
- * so tokens, `calc()`, `var()`, etc all work. The JS fallback hides the
12
- * popover with `opacity: 0` until the first measurement completes, so it
13
- * is never painted at the wrong location.
14
- */
15
- import { type RefObject } from 'react';
16
- import { type TPlacementOptions } from '../internal/resolve-placement';
17
- /**
18
- * Hook that positions an element relative to an anchor element using
19
- * CSS Anchor Positioning (with a JS fallback for older browsers).
20
- *
21
- * This hook is the positioning primitive. It has no knowledge of popovers,
22
- * visibility, or animation. Compose it with `Popover` for anchor-positioned
23
- * top-layer content.
24
- *
25
- * When CSS Anchor Positioning is supported, it sets CSS properties
26
- * (`anchor-name`, `position-anchor`, `position-area`, `position-try-fallbacks`)
27
- * directly on the elements via `el.style.setProperty()`.
28
- *
29
- * When not supported, it falls back to JavaScript-based positioning using
30
- * `position: fixed` with measured coordinates, re-running on scroll (capture)
31
- * and resize events.
32
- *
33
- * `placement` may be a fresh inline object on every render: a structural
34
- * comparison is used internally so re-runs are skipped when the resolved
35
- * placement shape is unchanged.
36
- */
37
- export declare function useAnchorPosition({ anchorRef, popoverRef, placement, forceFallbackPositioning, isEnabled, isOpen, }: {
38
- /**
39
- * Element to position relative to.
40
- */
41
- anchorRef: RefObject<HTMLElement | null>;
42
- /**
43
- * Element being positioned (typically a popover).
44
- *
45
- * The popover host may be unmounted between opens (the `Popover`
46
- * primitive unmounts after its exit animation). Pass `isOpen` so the
47
- * positioning effect re-runs against the freshly mounted element on
48
- * the next open. Without it, the effect's bound listeners and styles
49
- * would target the previous (detached) element.
50
- */
51
- popoverRef: RefObject<HTMLElement | null>;
52
- /**
53
- * Where to place the element relative to the anchor.
54
- * `offset.gap` and `offset.crossAxisShift` are part of the
55
- * placement object.
56
- *
57
- * All fields are optional. Omitted fields fall back to:
58
- * - `axis`: `'block'`
59
- * - `edge`: `'end'`
60
- * - `align`: `'center'`
61
- * - `offset.gap`: `token('space.100', '8px')`
62
- * - `offset.crossAxisShift.value`: `'0px'`
63
- * - `offset.crossAxisShift.direction`: `'forwards'`
64
- *
65
- * The full default placement (`{}`) renders the popover centered
66
- * below the trigger with one `space.100` of gap and no cross-axis
67
- * shift.
68
- *
69
- * `offset.gap` and `offset.crossAxisShift.value` accept either a
70
- * number (pixels) or a CSS length string (eg `token('space.200')`).
71
- */
72
- placement?: TPlacementOptions;
73
- /**
74
- * Forces the JavaScript positioning fallback even when the browser
75
- * supports CSS Anchor Positioning. Useful for testing fallback
76
- * behavior in any environment, including production.
77
- */
78
- forceFallbackPositioning?: boolean;
79
- /**
80
- * When `false`, the hook is a no-op and applies no positioning.
81
- * Defaults to `true`.
82
- */
83
- isEnabled?: boolean;
84
- /**
85
- * Whether the popover is currently open. Drives a re-run of the
86
- * positioning effect when the popover host element is unmounted
87
- * and remounted across open cycles, so listeners and styles are
88
- * always wired to the live host element.
89
- */
90
- isOpen: boolean;
91
- }): void;
@@ -1,109 +0,0 @@
1
- import { type RefObject } from 'react';
2
- import { type TAnimationPreset } from '../animations/types';
3
- type TUseAnimatedVisibilityArgs = {
4
- /**
5
- * Whether the element is logically open.
6
- */
7
- isOpen: boolean;
8
- /**
9
- * Animation preset for entry/exit transitions.
10
- * Pass `false` or `undefined` to disable animation.
11
- */
12
- animate: TAnimationPreset | false | undefined;
13
- /**
14
- * Ref to the DOM element that plays the entry/exit transitions.
15
- * Used to listen for `transitionend`.
16
- */
17
- elementRef: RefObject<HTMLElement | null>;
18
- /**
19
- * Called after the entry animation completes (or immediately on open
20
- * when there is no animation or reduced motion is active).
21
- * This includes initial mount with `isOpen=true`.
22
- */
23
- onEnterFinish?: () => void;
24
- /**
25
- * Called after the exit animation completes (or immediately on close
26
- * when there is no animation or reduced motion is active).
27
- */
28
- onExitFinish?: () => void;
29
- };
30
- type TUseAnimatedVisibilityResult = {
31
- /**
32
- * Current visibility phase. See `TPhase` for the full lifecycle.
33
- *
34
- * `phase !== 'closed'` means the host element is mounted and on
35
- * screen, including during animated entry, animated exit, and the
36
- * non-animated close handshake. Use this when you need "the user
37
- * can still see / interact with the element" semantics (e.g. focus
38
- * trapping, listeners that must outlive the exit).
39
- */
40
- phase: TPhase;
41
- /**
42
- * Resolved animation preset (with CSS injected), or `null` if
43
- * animation is disabled.
44
- */
45
- preset: TAnimationPreset | null;
46
- };
47
- /**
48
- * Visibility lifecycle phase shared between `useAnimatedVisibility`,
49
- * `useFocusWrap`, `useInitialFocus`, and the `Popover` / `Dialog`
50
- * components.
51
- *
52
- * - `closed`: host element is unmounted. No DOM presence.
53
- * - `entering`: host element is mounted and the CSS entry transition
54
- * is playing. **Only emitted when animation is enabled.** With
55
- * animation disabled the lifecycle goes directly `closed → open`.
56
- * - `open`: host element is mounted and settled. No transition is
57
- * playing.
58
- * - `exiting`: `isOpen` has flipped to `false` but the host element
59
- * is still mounted. Emitted while the CSS exit transition is playing
60
- * (animation enabled) OR while we wait for the browser's
61
- * `toggle`/`close` event to fire on the still-attached element so
62
- * focus restoration can run (animation disabled).
63
- *
64
- * State machine:
65
- * ```
66
- * animation ON: closed → entering → open → exiting → closed
67
- * animation OFF: closed → open → exiting → closed
68
- * interrupts: entering → exiting (close mid-entry)
69
- * exiting → entering (reopen mid-exit, animated)
70
- * exiting → open (reopen mid-handshake, non-animated)
71
- * ```
72
- *
73
- * `phase !== 'closed'` is the canonical "host is currently in the DOM
74
- * and on screen" predicate.
75
- */
76
- export type TPhase = 'closed' | 'entering' | 'open' | 'exiting';
77
- /**
78
- * Manages the children mount/unmount lifecycle around CSS exit transitions.
79
- *
80
- * Used by both `Popover` and `Dialog` to share the same animation lifecycle
81
- * logic. Those components own their own show/hide mechanisms (showPopover /
82
- * hidePopover vs showModal / close) and event handling - this hook only
83
- * manages the relationship between `isOpen` and when children are rendered.
84
- *
85
- * ## Problem
86
- *
87
- * We want to delay the unmount of children until a CSS exit transition has
88
- * finished playing. If we unmount children the moment `isOpen` becomes
89
- * `false`, the exit animation is never visible - the content just disappears.
90
- *
91
- * ## How it works
92
- *
93
- * The lifecycle is modeled as a `phase` discriminated union (`closed`,
94
- * `entering`, `open`, `exiting`). The host element is rendered while
95
- * `phase !== 'closed'`, so the `exiting` phase keeps the host mounted
96
- * while the CSS exit transition plays (or, with animation disabled,
97
- * while we wait for the browser `toggle` / `close` event to fire on the
98
- * still-attached element):
99
- *
100
- * ```
101
- * isOpen: true ──────────────── false
102
- * phase: open ──────────────── exiting ─── (exit settle) ─── closed
103
- * ```
104
- *
105
- * Every effect dispatches on the single `phase` value instead of a
106
- * cross-product of booleans.
107
- */
108
- export declare function useAnimatedVisibility({ isOpen, animate, elementRef, onEnterFinish, onExitFinish, }: TUseAnimatedVisibilityArgs): TUseAnimatedVisibilityResult;
109
- export {};
@@ -1,11 +0,0 @@
1
- type TPresetWithCssAndName = {
2
- css: string;
3
- name: string;
4
- };
5
- /**
6
- * Normalizes the `animate` prop to a preset (or null) and ensures its CSS
7
- * is injected once into document.head. Used by PopupContent, Popover, and
8
- * DialogContent so they do not duplicate this logic.
9
- */
10
- export declare function useAnimationPreset<T extends TPresetWithCssAndName>(animate: T | false | null | undefined): T | null;
11
- export {};
@@ -1,25 +0,0 @@
1
- import { type RefObject } from 'react';
2
- import { type TPhase } from './use-animated-visibility';
3
- /**
4
- * Wraps Tab/Shift+Tab focus within a popover element when its role
5
- * semantically requires it (dialog, alertdialog).
6
- *
7
- * While the popover is open, Tab and Shift+Tab are intercepted
8
- * (via `preventDefault`) and remapped to cycle through focusable
9
- * elements within the container using wrapping navigation.
10
- *
11
- * Light dismiss (Escape, click outside) continues to work natively
12
- * via `popover="auto"` - this hook only intercepts Tab.
13
- *
14
- * Always call this hook unconditionally. The listener is only
15
- * attached when the role requires focus wrapping, and is cleaned
16
- * up and re-evaluated when the role changes.
17
- */
18
- export declare function useFocusWrap({ elementRef, role, phase, }: {
19
- elementRef: RefObject<HTMLElement | null>;
20
- role: string | undefined;
21
- /**
22
- * Whether the element is open. Used to attach the Tab listener.
23
- */
24
- phase: TPhase;
25
- }): void;
@@ -1,73 +0,0 @@
1
- import { type RefObject } from 'react';
2
- import { type TPhase } from './use-animated-visibility';
3
- /**
4
- * Moves focus into a popover element when it opens, based on its ARIA role.
5
- *
6
- * Follows the WAI-ARIA APG initial-focus patterns for each role:
7
- * - `dialog` / `alertdialog` → focus first focusable (or `[autofocus]`)
8
- * - `menu` → focus first menu item
9
- * - `listbox` → focus selected or first option
10
- * - `tooltip` / no role → no focus movement (focus must remain on trigger;
11
- * moving focus into the tooltip would dismiss it)
12
- *
13
- * Role is taken from the typed `role` prop - this is the consumer's contract
14
- * and is not subject to drift from a directly-mutated DOM attribute.
15
- *
16
- * Always call this hook unconditionally. Focus is moved on each transition
17
- * into a visible phase, the moment the host element first becomes visible
18
- * for that open intent:
19
- *
20
- * - Animated path: on `closed → entering`. The host has just been mounted
21
- * and the layout effect that calls `showPopover()` / `showModal()` has
22
- * already run, so the element is in the top layer. We focus before the
23
- * entry transition settles to match the WAI-ARIA APG expectation that
24
- * focus lands on the new menu / dialog the instant it opens, not after
25
- * the CSS finishes animating.
26
- * - Non-animated path: on `closed → open` (the entering phase is skipped).
27
- * - Reopen mid-exit: on `exiting → entering`. When a user dismisses the
28
- * popup (Escape, close button, light dismiss) the browser natively
29
- * restores focus to the trigger as part of `hidePopover()` /
30
- * `<dialog>.close()`. If the consumer reopens before the exit transition
31
- * has settled, the phase machine jumps `exiting → entering` without
32
- * passing through `closed`, so without this branch the popup would be
33
- * visible again with focus stranded on the trigger — a keyboard usability
34
- * gap for menu/dialog/listbox roles.
35
- *
36
- * Note: there is a rare programmatic path where a consumer flips `isOpen`
37
- * false → true without any user-initiated close gesture and had moved focus
38
- * to a non-default target inside the popup. In that scenario this hook
39
- * re-focuses the role-appropriate default (e.g. first menu item) rather
40
- * than preserving the consumer-chosen target. This matches the documented
41
- * `closed → entering` behavior and is considered acceptable given how
42
- * abstract the scenario is. See `notes/architecture/focus.md`.
43
- *
44
- * Pure `entering → exiting → entering` stutters where the popup never
45
- * reaches `closed` and the consumer toggles in the same frame are still
46
- * collapsed: the `prevPhase` ref guard rejects any transition whose
47
- * previous phase was not `closed` or `exiting`.
48
- *
49
- * Tradeoff vs the previous `requestAnimationFrame` based approach: we no
50
- * longer wait one paint before focusing. The element is already attached
51
- * and in the top layer when this effect runs (the show / hide layout
52
- * effect runs first), so screen-reader announcement and visible focus
53
- * land together. If a regression appears that needs the extra paint
54
- * (e.g. browsers that require a layout pass before `focus()` works on a
55
- * freshly promoted top-layer element), wrap the `focus()` call in a
56
- * single `requestAnimationFrame` here and re-add a same-element ref
57
- * check inside the RAF callback.
58
- */
59
- export declare function useInitialFocus({ elementRef, phase, role, }: {
60
- elementRef: RefObject<HTMLElement | null>;
61
- /**
62
- * Current visibility phase from `useAnimatedVisibility`. Initial
63
- * focus is moved on the transition out of `'closed'`:
64
- *
65
- * - Animated path: fires on `closed → entering`, immediately after
66
- * the host element mounts and `showPopover()` / `showModal()` has
67
- * run in the preceding layout effect.
68
- * - Non-animated path: fires on `closed → open` (entering phase is
69
- * skipped entirely when animation is disabled).
70
- */
71
- phase: TPhase;
72
- role: string | undefined;
73
- }): void;
@@ -1,15 +0,0 @@
1
- type TPresetWithCssAndName = {
2
- css: string;
3
- name: string;
4
- };
5
- /**
6
- * Normalizes a preset prop to a value (or null) and ensures its CSS
7
- * is injected once into `document.head`.
8
- *
9
- * Works with any preset that has `{ css, name }` - animation presets
10
- * (TAnimationPreset) satisfies this shape.
11
- */
12
- export declare function usePresetStyles<T extends TPresetWithCssAndName>({ preset, }: {
13
- preset: T | false | null | undefined;
14
- }): T | null;
15
- export {};
@@ -1,21 +0,0 @@
1
- import { type RefObject } from 'react';
2
- import type { TWidthFromAnchorMode } from '../popover/types';
3
- /**
4
- * Sets the width of a popover element relative to its anchor element.
5
- *
6
- * - `'match-anchor'` → `width: anchor-size(width)` - popover matches anchor width exactly.
7
- * - `'min-anchor'` → `min-width: anchor-size(width)` - popover is at least as wide as anchor,
8
- * but can grow wider.
9
- * - `'none'` → no explicit width is set (default behaviour)
10
- *
11
- * Uses CSS `anchor-size(width)` when the browser supports it, falling back to a
12
- * one-off measurement of `anchor.offsetWidth`.
13
- *
14
- * Designed to be composed alongside `useAnchorPosition` for top-layer popovers.
15
- */
16
- export declare function useWidthFromAnchor({ mode, popoverRef, anchorRef, isOpen, }: {
17
- mode: TWidthFromAnchorMode;
18
- popoverRef: RefObject<HTMLElement | null>;
19
- anchorRef: RefObject<HTMLElement | null>;
20
- isOpen: boolean;
21
- }): void;
@@ -1,51 +0,0 @@
1
- import { type TPlacementOptions } from '../internal/resolve-placement';
2
- import type { TLegacyPlacement } from './legacy-placements';
3
- /**
4
- * Maps legacy Popper.js placement values to the new object-based
5
- * `Placement` values used by `@atlaskit/top-layer/popover`.
6
- *
7
- * **Mapping logic:**
8
- *
9
- * | Legacy (Popper.js) | New (Placement object) |
10
- * | ------------------- | --------------------------------------------------- |
11
- * | `top` | `{ axis: 'block', edge: 'start', align: 'center' }` |
12
- * | `top-start` | `{ axis: 'block', edge: 'start', align: 'start' }` |
13
- * | `top-center` | `{ axis: 'block', edge: 'start', align: 'center' }` |
14
- * | `top-end` | `{ axis: 'block', edge: 'start', align: 'end' }` |
15
- * | `bottom` | `{ axis: 'block', edge: 'end', align: 'center' }` |
16
- * | `bottom-start` | `{ axis: 'block', edge: 'end', align: 'start' }` |
17
- * | `bottom-center` | `{ axis: 'block', edge: 'end', align: 'center' }` |
18
- * | `bottom-end` | `{ axis: 'block', edge: 'end', align: 'end' }` |
19
- * | `right` | `{ axis: 'inline', edge: 'end', align: 'center' }` |
20
- * | `right-start` | `{ axis: 'inline', edge: 'end', align: 'start' }` |
21
- * | `right-end` | `{ axis: 'inline', edge: 'end', align: 'end' }` |
22
- * | `left` | `{ axis: 'inline', edge: 'start', align: 'center' }` |
23
- * | `left-start` | `{ axis: 'inline', edge: 'start', align: 'start' }` |
24
- * | `left-end` | `{ axis: 'inline', edge: 'start', align: 'end' }` |
25
- * | `auto` | `{ axis: 'block', edge: 'end', align: 'center' }` |
26
- * | `auto-start` | `{ axis: 'block', edge: 'end', align: 'start' }` |
27
- * | `auto-end` | `{ axis: 'block', edge: 'end', align: 'end' }` |
28
- *
29
- * `auto*` is mapped to `block-end` (a reduction in expressiveness vs Popper's
30
- * runtime auto-flip). CSS `position-try-fallbacks` provides flipping at the
31
- * edge - but the initial placement is fixed. If migrating away from Popper's
32
- * dynamic auto, prefer an explicit placement.
33
- *
34
- * @example
35
- * ```ts
36
- * import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
37
- *
38
- * // In a migration from @atlaskit/popup:
39
- * const oldPlacement: TLegacyPlacement = 'bottom-start';
40
- * const newPlacement: TPlacementOptions = fromLegacyPlacement({ legacy: oldPlacement });
41
- * // newPlacement === { axis: 'block', edge: 'end', align: 'start' }
42
- * ```
43
- */
44
- export declare function fromLegacyPlacement({ legacy, offset, }: {
45
- legacy: TLegacyPlacement;
46
- offset?: [
47
- along: number,
48
- away: number
49
- ];
50
- }): TPlacementOptions;
51
- export type { TLegacyPlacement, TPlacementOptions };
@@ -1,27 +0,0 @@
1
- /**
2
- * Legacy Popper.js placement values (used by `@atlaskit/popper`,
3
- * `@atlaskit/popup`, `@atlaskit/tooltip`, etc.). Re-exported from
4
- * `@atlaskit/top-layer/placement-map` for migration consumers that need
5
- * to enumerate every placement (e.g. for a settings dropdown). New code
6
- * should use the object-based `TPlacementOptions` directly.
7
- */
8
- export declare const LEGACY_PLACEMENTS: readonly [
9
- "auto",
10
- "auto-start",
11
- "auto-end",
12
- "top",
13
- "top-start",
14
- "top-center",
15
- "top-end",
16
- "bottom",
17
- "bottom-start",
18
- "bottom-center",
19
- "bottom-end",
20
- "right",
21
- "right-start",
22
- "right-end",
23
- "left",
24
- "left-start",
25
- "left-end"
26
- ];
27
- export type TLegacyPlacement = (typeof LEGACY_PLACEMENTS)[number];
@@ -1,13 +0,0 @@
1
- import { type TPlacementOptions } from '../internal/resolve-placement';
2
- import type { TLegacyPlacement } from './legacy-placements';
3
- /**
4
- * The full mapping record. Internal - use `fromLegacyPlacement` from the
5
- * public entry-point so the offset-tuple translation is applied consistently.
6
- *
7
- * Note: `auto`, `auto-start`, `auto-end` map to `block-end` placements. This
8
- * is a reduction in expressiveness vs Popper.js (which picked the best
9
- * placement at runtime). CSS `position-try-fallbacks` flips at the edge but
10
- * the initial placement is fixed. Migration consumers who relied on Popper's
11
- * dynamic auto-flip should pick an explicit placement instead.
12
- */
13
- export declare const placementMapping: Record<TLegacyPlacement, TPlacementOptions>;
@@ -1,25 +0,0 @@
1
- import type { TPopoverCloseReason } from './types';
2
- /**
3
- * Creates a synthetic DOM event from a `TPopoverCloseReason`.
4
- *
5
- * Useful when bridging the Popover primitive's `onClose({ reason })` callback
6
- * to a legacy API that expects a native DOM event - for example,
7
- * `@atlaskit/inline-dialog`'s `onClose(event)` contract.
8
- *
9
- * - `'escape'` → `KeyboardEvent('keydown', { key: 'Escape' })`
10
- * - `'light-dismiss'` → `MouseEvent('click')`
11
- *
12
- * For any other reason, a generic `Event('close')` is returned as a fallback.
13
- *
14
- * @example
15
- * ```tsx
16
- * import { createPopoverCloseEvent, type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
17
- *
18
- * function onPopoverClose({ reason }: { reason: TPopoverCloseReason }) {
19
- * legacyOnClose(createPopoverCloseEvent({ reason }));
20
- * }
21
- * ```
22
- */
23
- export declare function createPopoverCloseEvent({ reason, }: {
24
- reason: TPopoverCloseReason;
25
- }): KeyboardEvent | MouseEvent | Event;
@@ -1,3 +0,0 @@
1
- export { Popover } from './popover';
2
- export { createPopoverCloseEvent } from './create-close-event';
3
- export type { TPopoverCloseReason, TPopoverProps, TPlacementOptions } from './types';