@atlaskit/top-layer 0.17.0 → 1.0.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 (132) hide show
  1. package/AGENTS.md +113 -0
  2. package/CHANGELOG.md +33 -0
  3. package/animations/package.json +1 -8
  4. package/dialog/package.json +1 -8
  5. package/dialog-scroll-lock/package.json +1 -8
  6. package/dist/cjs/dialog/dialog-content.js +12 -30
  7. package/dist/cjs/internal/set-style.js +5 -5
  8. package/dist/cjs/internal/slot.js +1 -1
  9. package/dist/cjs/internal/use-anchor-position-at-point.js +8 -8
  10. package/dist/cjs/internal/use-anchor-position.js +19 -40
  11. package/dist/cjs/internal/use-animated-visibility.js +31 -61
  12. package/dist/cjs/internal/use-initial-focus.js +9 -13
  13. package/dist/cjs/internal/use-width-from-anchor.js +6 -6
  14. package/dist/cjs/popover/popover.js +30 -58
  15. package/dist/cjs/popover-surface/popover-surface.js +4 -3
  16. package/dist/cjs/testing/polyfill.js +9 -9
  17. package/dist/cjs/use-simple-light-dismiss/index.js +3 -3
  18. package/dist/es2019/dialog/dialog-content.js +12 -30
  19. package/dist/es2019/internal/set-style.js +5 -5
  20. package/dist/es2019/internal/slot.js +1 -1
  21. package/dist/es2019/internal/use-anchor-position-at-point.js +8 -8
  22. package/dist/es2019/internal/use-anchor-position.js +19 -40
  23. package/dist/es2019/internal/use-animated-visibility.js +31 -61
  24. package/dist/es2019/internal/use-initial-focus.js +9 -13
  25. package/dist/es2019/internal/use-width-from-anchor.js +6 -6
  26. package/dist/es2019/popover/popover.js +30 -58
  27. package/dist/es2019/popover-surface/popover-surface.js +1 -1
  28. package/dist/es2019/testing/polyfill.js +7 -11
  29. package/dist/es2019/use-simple-light-dismiss/index.js +3 -3
  30. package/dist/esm/dialog/dialog-content.js +12 -30
  31. package/dist/esm/internal/set-style.js +5 -5
  32. package/dist/esm/internal/slot.js +1 -1
  33. package/dist/esm/internal/use-anchor-position-at-point.js +8 -8
  34. package/dist/esm/internal/use-anchor-position.js +19 -40
  35. package/dist/esm/internal/use-animated-visibility.js +31 -61
  36. package/dist/esm/internal/use-initial-focus.js +9 -13
  37. package/dist/esm/internal/use-width-from-anchor.js +6 -6
  38. package/dist/esm/popover/popover.js +30 -58
  39. package/dist/esm/popover-surface/popover-surface.js +1 -1
  40. package/dist/esm/testing/polyfill.js +9 -9
  41. package/dist/esm/use-simple-light-dismiss/index.js +3 -3
  42. package/dist/types/internal/set-style.d.ts +2 -2
  43. package/dist/types/internal/slot.d.ts +2 -2
  44. package/dist/types/internal/use-anchor-position-at-point.d.ts +2 -2
  45. package/dist/types/internal/use-anchor-position.d.ts +0 -4
  46. package/dist/types/internal/use-initial-focus.d.ts +1 -1
  47. package/dist/types/popover/types.d.ts +5 -7
  48. package/dist/types/popover-surface/popover-surface.d.ts +2 -2
  49. package/focus/package.json +1 -8
  50. package/get-aria-for-trigger/package.json +1 -8
  51. package/open-layer-observer/package.json +1 -8
  52. package/package.json +11 -19
  53. package/placement-map/package.json +1 -8
  54. package/popover/package.json +1 -8
  55. package/popover-surface/package.json +1 -8
  56. package/testing/polyfill/package.json +1 -8
  57. package/testing/to-be-visible/package.json +1 -8
  58. package/use-anchor-position/package.json +1 -8
  59. package/use-anchor-position-at-point/package.json +1 -8
  60. package/use-arrow-navigation/package.json +1 -8
  61. package/use-popover-id/package.json +1 -8
  62. package/use-simple-light-dismiss/package.json +1 -8
  63. package/use-width-from-anchor/package.json +1 -8
  64. package/dist/types-ts4.5/animations/presets.d.ts +0 -110
  65. package/dist/types-ts4.5/animations/types.d.ts +0 -38
  66. package/dist/types-ts4.5/dialog/create-close-event.d.ts +0 -23
  67. package/dist/types-ts4.5/dialog/dialog-content.d.ts +0 -24
  68. package/dist/types-ts4.5/dialog/index.d.ts +0 -3
  69. package/dist/types-ts4.5/dialog/types.d.ts +0 -126
  70. package/dist/types-ts4.5/dialog-scroll-lock/index.d.ts +0 -40
  71. package/dist/types-ts4.5/entry-points/animations.d.ts +0 -2
  72. package/dist/types-ts4.5/entry-points/dialog-scroll-lock.d.ts +0 -1
  73. package/dist/types-ts4.5/entry-points/dialog.d.ts +0 -2
  74. package/dist/types-ts4.5/entry-points/focus.d.ts +0 -4
  75. package/dist/types-ts4.5/entry-points/get-aria-for-trigger.d.ts +0 -1
  76. package/dist/types-ts4.5/entry-points/open-layer-observer.d.ts +0 -5
  77. package/dist/types-ts4.5/entry-points/placement-map.d.ts +0 -3
  78. package/dist/types-ts4.5/entry-points/popover-surface.d.ts +0 -2
  79. package/dist/types-ts4.5/entry-points/popover.d.ts +0 -2
  80. package/dist/types-ts4.5/entry-points/use-anchor-position-at-point.d.ts +0 -1
  81. package/dist/types-ts4.5/entry-points/use-anchor-position.d.ts +0 -1
  82. package/dist/types-ts4.5/entry-points/use-arrow-navigation.d.ts +0 -3
  83. package/dist/types-ts4.5/entry-points/use-popover-id.d.ts +0 -11
  84. package/dist/types-ts4.5/entry-points/use-simple-light-dismiss.d.ts +0 -2
  85. package/dist/types-ts4.5/entry-points/use-width-from-anchor.d.ts +0 -1
  86. package/dist/types-ts4.5/focus/get-first-focusable.d.ts +0 -8
  87. package/dist/types-ts4.5/focus/get-focusables.d.ts +0 -13
  88. package/dist/types-ts4.5/focus/get-last-focusable.d.ts +0 -8
  89. package/dist/types-ts4.5/focus/get-next-focusable.d.ts +0 -13
  90. package/dist/types-ts4.5/focus/is-in-same-layer.d.ts +0 -8
  91. package/dist/types-ts4.5/focus/is-nested-layer-focused.d.ts +0 -8
  92. package/dist/types-ts4.5/focus/selectors.d.ts +0 -4
  93. package/dist/types-ts4.5/focus/types.d.ts +0 -5
  94. package/dist/types-ts4.5/index.d.ts +0 -0
  95. package/dist/types-ts4.5/internal/anchor-positioning-fallback.d.ts +0 -26
  96. package/dist/types-ts4.5/internal/combine.d.ts +0 -14
  97. package/dist/types-ts4.5/internal/ensure-preset-styles.d.ts +0 -6
  98. package/dist/types-ts4.5/internal/get-aria-for-trigger.d.ts +0 -93
  99. package/dist/types-ts4.5/internal/placement-to-position-area.d.ts +0 -21
  100. package/dist/types-ts4.5/internal/placement-to-try-fallbacks.d.ts +0 -36
  101. package/dist/types-ts4.5/internal/reduced-motion.d.ts +0 -14
  102. package/dist/types-ts4.5/internal/resolve-css-length-to-pixels.d.ts +0 -20
  103. package/dist/types-ts4.5/internal/resolve-css-length.d.ts +0 -8
  104. package/dist/types-ts4.5/internal/resolve-placement.d.ts +0 -58
  105. package/dist/types-ts4.5/internal/role-to-aria-has-popup.d.ts +0 -13
  106. package/dist/types-ts4.5/internal/role-types.d.ts +0 -71
  107. package/dist/types-ts4.5/internal/set-style.d.ts +0 -11
  108. package/dist/types-ts4.5/internal/should-focus-into-popover.d.ts +0 -8
  109. package/dist/types-ts4.5/internal/slot.d.ts +0 -29
  110. package/dist/types-ts4.5/internal/use-anchor-position-at-point.d.ts +0 -67
  111. package/dist/types-ts4.5/internal/use-anchor-position.d.ts +0 -91
  112. package/dist/types-ts4.5/internal/use-animated-visibility.d.ts +0 -109
  113. package/dist/types-ts4.5/internal/use-animation-preset.d.ts +0 -11
  114. package/dist/types-ts4.5/internal/use-focus-wrap.d.ts +0 -25
  115. package/dist/types-ts4.5/internal/use-initial-focus.d.ts +0 -73
  116. package/dist/types-ts4.5/internal/use-preset-styles.d.ts +0 -15
  117. package/dist/types-ts4.5/internal/use-width-from-anchor.d.ts +0 -21
  118. package/dist/types-ts4.5/placement-map/index.d.ts +0 -51
  119. package/dist/types-ts4.5/placement-map/legacy-placements.d.ts +0 -27
  120. package/dist/types-ts4.5/placement-map/placement-mapping.d.ts +0 -13
  121. package/dist/types-ts4.5/popover/create-close-event.d.ts +0 -25
  122. package/dist/types-ts4.5/popover/index.d.ts +0 -3
  123. package/dist/types-ts4.5/popover/popover.d.ts +0 -17
  124. package/dist/types-ts4.5/popover/types.d.ts +0 -193
  125. package/dist/types-ts4.5/popover-surface/index.d.ts +0 -2
  126. package/dist/types-ts4.5/popover-surface/popover-surface.d.ts +0 -21
  127. package/dist/types-ts4.5/testing/polyfill.d.ts +0 -25
  128. package/dist/types-ts4.5/testing/to-be-visible.d.ts +0 -23
  129. package/dist/types-ts4.5/use-arrow-navigation/index.d.ts +0 -3
  130. package/dist/types-ts4.5/use-arrow-navigation/is-at-current-menu-level.d.ts +0 -48
  131. package/dist/types-ts4.5/use-arrow-navigation/use-arrow-navigation.d.ts +0 -102
  132. package/dist/types-ts4.5/use-simple-light-dismiss/index.d.ts +0 -45
@@ -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';
@@ -1,17 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import { type TPopoverForwardedProps } from './types';
7
- /**
8
- * Unopinionated top-layer primitive. Manages visibility and animation only;
9
- * compose with `useAnchorPosition` / `useWidthFromAnchor` for positioning.
10
- *
11
- * `isOpen={true}` calls `showPopover()` (entry via `@starting-style`);
12
- * `isOpen={false}` calls `hidePopover()` (exit via `allow-discrete`).
13
- *
14
- * In `mode="auto"`, the browser can light-dismiss (Escape, click outside).
15
- * `onClose` fires; the consumer must then set `isOpen` to `false`.
16
- */
17
- export declare const Popover: React.ForwardRefExoticComponent<TPopoverForwardedProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,193 +0,0 @@
1
- import { type ReactNode } from 'react';
2
- import { type StrictXCSSProp } from '@atlaskit/css';
3
- import { type TAnimationPreset } from '../animations/types';
4
- import { type TPlacementOptions } from '../internal/resolve-placement';
5
- import { type TAriaRoleRequired, type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
6
- /**
7
- * The reason a popover was closed.
8
- *
9
- * - `'escape'`: The user pressed the Escape key.
10
- * - `'light-dismiss'`: The user clicked outside the popover (or the browser
11
- * dismissed it for another auto-mode reason).
12
- * - `'programmatic'`: The popover was closed programmatically.
13
- */
14
- export type TPopoverCloseReason = 'escape' | 'light-dismiss' | 'programmatic';
15
- /**
16
- * Flat (non-discriminated) props accepted by the Popover component internally.
17
- *
18
- * TypeScript limitation: when PopupContent destructures props from a
19
- * discriminated union (role, label, labelledBy) and re-passes them individually
20
- * to Popover, TypeScript cannot prove the individual fields still satisfy the
21
- * union constraint. This flat type accepts all role/label combinations without
22
- * the union, since ARIA correctness is enforced at the TPopupContentProps
23
- * boundary where consumers interact.
24
- */
25
- export type TPopoverForwardedProps = TPopoverBaseProps & {
26
- mode?: 'auto' | 'hint' | 'manual';
27
- onClose?: (args: {
28
- reason: TPopoverCloseReason;
29
- }) => void;
30
- role?: TRoleRequiringAccessibleName | TRoleWithImplicitName;
31
- label?: string;
32
- labelledBy?: string;
33
- };
34
- export type { TPlacementOptions };
35
- type TPopoverBaseProps = {
36
- children: ReactNode;
37
- /**
38
- * Additional CSS styles applied to the popover root element.
39
- * Use to set `backgroundColor` to match the popup surface colour.
40
- */
41
- xcss?: StrictXCSSProp<'backgroundColor', never>;
42
- /**
43
- * Animation preset for entry/exit transitions.
44
- *
45
- * Animations use `@starting-style` and `allow-discrete` for progressive
46
- * enhancement: browsers without support show/hide instantly.
47
- */
48
- animate?: false | TAnimationPreset;
49
- /**
50
- * Test ID applied to the popover element.
51
- */
52
- testId?: string;
53
- /**
54
- * HTML `id` attribute for the popover element. When omitted, a unique ID
55
- * is generated automatically. Pair the trigger with this ID via `aria-controls`
56
- * and the popover with `popovertarget`. Use `usePopoverId()` to generate a
57
- * stable, CSS-safe id.
58
- */
59
- id?: string;
60
- /**
61
- * Whether the popover is open.
62
- *
63
- * - **`true`:** show the popover (calls `showPopover()`, entry animation plays via `@starting-style`).
64
- * - **`false`:** hide the popover. When an `animate` preset is provided, the exit
65
- * animation plays (via `allow-discrete`) before the popover becomes logically closed.
66
- * Otherwise hides instantly.
67
- *
68
- * The consumer does not conditionally render the `Popover` — visibility is driven
69
- * by this prop.
70
- *
71
- * **Lifecycle observable to consumers:**
72
- *
73
- * - The host element is in the DOM only while the popover is open or its exit
74
- * animation is playing. After exit completes the element is unmounted so it
75
- * does not leave an empty `role` / `popover` element in the accessibility tree.
76
- * The exact unmount timing is private and may change.
77
- * - The `id` (supplied or generated via `usePopoverId()`) is stable across opens.
78
- * - The `ref` is populated only while the host element is rendered. Consumers
79
- * that read from the ref outside of `onOpenChange` / `onEnterFinish` should
80
- * gate the read on `isOpen` being `true`.
81
- *
82
- * **Important:** For `mode="auto"` popovers, the browser can dismiss the popover
83
- * via light dismiss (Escape, click outside) independently of this prop. When that
84
- * happens, `onClose` is called and the consumer should respond by setting `isOpen`
85
- * to `false`. If `isOpen` remains `true` after a browser dismiss, the DOM and
86
- * React state will be out of sync (the popover will be hidden despite `isOpen={true}`).
87
- */
88
- isOpen: boolean;
89
- /**
90
- * Called when the popover's open state changes via browser toggle events.
91
- *
92
- * Receives the new open state and a reference to the popover element,
93
- * which is useful for focus management (e.g. focusing the first interactive
94
- * child on open via `getFirstFocusable` from `@atlaskit/top-layer/focus`).
95
- *
96
- * @example
97
- * ```tsx
98
- * <Popover
99
- * onOpenChange={({ isOpen, element }) => {
100
- * if (isOpen) {
101
- * getFirstFocusable({ container: element })?.focus();
102
- * }
103
- * }}
104
- * />
105
- * ```
106
- */
107
- onOpenChange?: (args: {
108
- isOpen: boolean;
109
- element: HTMLDivElement;
110
- }) => void;
111
- /**
112
- * Placement hint for directional animations (e.g. `slideAndFade`).
113
- *
114
- * When `animate` is provided, the preset's `getProperties(placement)` is
115
- * called to set CSS custom properties (like `--ds-popover-tx`, `--ds-popover-ty`)
116
- * that control the slide direction. Has no effect without `animate`.
117
- *
118
- * This does NOT control positioning. Use `useAnchorPosition` for that.
119
- */
120
- placement?: TPlacementOptions;
121
- /**
122
- * Called after the entry animation completes (or immediately on open when
123
- * there is no animation or reduced motion is active).
124
- *
125
- * Use this for external lifecycle coordination - e.g. notifying a manager
126
- * that the show sequence is finished.
127
- */
128
- onEnterFinish?: () => void;
129
- /**
130
- * Called after the exit animation completes (or immediately on close when
131
- * there is no animation or reduced motion is active).
132
- *
133
- * Use this for external lifecycle coordination, e.g. notifying a manager
134
- * that the hide sequence is finished, or firing an `onCloseComplete` callback.
135
- */
136
- onExitFinish?: () => void;
137
- };
138
- /**
139
- * Unopinionated top-layer primitive.
140
- *
141
- * `Popover` manages only top-layer visibility and animation. It has no
142
- * knowledge of positioning. For anchor positioning, compose with the
143
- * `useAnchorPosition` hook separately.
144
- *
145
- * Use `Popover` directly for custom trigger lifecycles (hover, timers,
146
- * external state) or trigger-less UI (flags, toasts). For the common
147
- * button-opens-content pattern, use the `Popup` compound instead.
148
- *
149
- * Dismiss behavior:
150
- * - `'auto'` (default): Escape to close, click-outside to close, focus restoration,
151
- * automatic nesting, mutual exclusivity.
152
- * - `'hint'`: ephemeral UI (e.g. tooltips) that does not close other `auto`
153
- * popovers. Falls back silently to `auto` semantics in browsers without
154
- * `popover='hint'` support, meaning the hint will close any other `auto`
155
- * popovers in those browsers. If cross-browser uniformity matters more
156
- * than the no-close behaviour, pass `auto` explicitly.
157
- * - `'manual'`: no light dismiss. Consumer controls show/hide entirely. Only
158
- * appropriate for persistent UI (e.g. flags, banners).
159
- */
160
- export type TPopoverProps = TPopoverBaseProps & TAriaRoleRequired & ({
161
- mode?: 'auto' | 'hint';
162
- /**
163
- * Called when the popover is dismissed via light dismiss
164
- * (Escape, click outside).
165
- *
166
- * Required for `auto` and `hint` modes - without it, browser
167
- * dismissals leave the consumer's `isOpen` stuck at `true` while
168
- * the DOM is hidden, producing a stale-open state.
169
- *
170
- * The `reason` field indicates how the dismiss occurred:
171
- * - `'escape'`: the user pressed the Escape key.
172
- * - `'light-dismiss'`: the user clicked outside (or another auto-dismiss).
173
- */
174
- onClose: (args: {
175
- reason: TPopoverCloseReason;
176
- }) => void;
177
- } | {
178
- mode: 'manual';
179
- onClose?: never;
180
- });
181
- /**
182
- * The width mode of the popover relative to its anchor element.
183
- *
184
- * - `'none'` (default): popover sizes to its content, ignoring the anchor width.
185
- * - `'match-anchor'`: popover matches the anchor element's width exactly
186
- * via CSS `anchor-size(width)`. Falls back to a one-off measurement
187
- * of `anchorRef.current.offsetWidth` when CSS Anchor Positioning
188
- * is not supported.
189
- * - `'min-anchor'`: popover is at least as wide as the anchor, but
190
- * can grow wider if content requires it. Uses `min-width: anchor-size(width)`.
191
- * Falls back to a one-off measurement of the anchor's width.
192
- */
193
- export type TWidthFromAnchorMode = 'none' | 'match-anchor' | 'min-anchor';
@@ -1,2 +0,0 @@
1
- export { PopoverSurface } from './popover-surface';
2
- export type { TPopoverSurfaceProps } from './popover-surface';
@@ -1,21 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React, { type ReactNode } from 'react';
6
- export type TPopoverSurfaceProps = {
7
- children: ReactNode;
8
- };
9
- /**
10
- * Optional styled wrapper for popover content.
11
- *
12
- * Adds default visual styling (background, border-radius, box-shadow)
13
- * using design tokens.
14
- *
15
- * Presentational primitive - `children`-only by design. This component
16
- * intentionally exposes no `style`, `className`, `xcss`, `id`, or `ref`
17
- * props. If you need any of those, render your own wrapper element inside
18
- * `Popover` instead. `PopoverSurface` is the no-config "give me the default
19
- * ADS overlay look" surface, nothing more.
20
- */
21
- export declare function PopoverSurface({ children }: TPopoverSurfaceProps): React.ReactElement;
@@ -1,25 +0,0 @@
1
- /**
2
- * Popover API & HTMLDialogElement polyfills for jsdom.
3
- *
4
- * jsdom does not implement the Popover API or the HTMLDialogElement methods
5
- * (showModal, show, close). This polyfill provides faithful implementations,
6
- * including timing semantics validated against Chromium via Playwright.
7
- *
8
- * Behaviour:
9
- * - beforetoggle: sync, cancelable on popover show only. toggle: async task, never cancelable.
10
- * - Rapid show/hide coalesces into one toggle event (originalOldState to finalNewState).
11
- * - Dialog: showModal/show fire beforetoggle+toggle. close fires toggle then close event.
12
- * - Popover open state tracked via `data-popover-open` (no `:popover-open` in jsdom).
13
- * - Auto popovers: maintain an open stack, perform light-dismiss on document mousedown
14
- * outside the open chain, and dismiss the topmost on Escape.
15
- * - On open, removes any inline `opacity: 0` from the popover element so callers that
16
- * rely on a `ResizeObserver` reveal callback (e.g. `use-anchor-position`) become
17
- * visible in jsdom, where layout-driven RO callbacks never fire.
18
- *
19
- * Companion `toBeVisible` patch lives at `./to-be-visible`.
20
- *
21
- * Importing this module has the side-effect of patching the relevant
22
- * prototypes. It is safe to import multiple times; each branch is guarded
23
- * to avoid overwriting native implementations or re-patching.
24
- */
25
- export {};
@@ -1,23 +0,0 @@
1
- /**
2
- * Patches `toBeVisible()` to understand popover and dialog visibility.
3
- *
4
- * jest-dom's `toBeVisible()` does not know about the Popover API. In real
5
- * browsers the UA stylesheet hides `[popover]` with `display: none`, but
6
- * jsdom has no such stylesheet - so closed popovers incorrectly appear visible.
7
- *
8
- * Raw jest-dom results in jsdom:
9
- *
10
- * closed popover / child → true (WRONG - should be false)
11
- * open popover / child → true (correct)
12
- * closed dialog / child → false (correct - jsdom natively hides <dialog>)
13
- * open dialog / child → true (correct)
14
- *
15
- * We correct both false positives and false negatives:
16
- * 1. Delegate to the original first.
17
- * 2. If it says "visible" → check for closed top-layer hosts (false positive).
18
- * 3. If it says "not visible" → check for open top-layer hosts (false negative).
19
- *
20
- * Must load via `setupFilesAfterEnv` (after jest-dom registers its matchers).
21
- * Polyfills live in `./polyfill` (loaded via `setupFiles`).
22
- */
23
- export {};
@@ -1,3 +0,0 @@
1
- export { useArrowNavigation } from './use-arrow-navigation';
2
- export type { TUseArrowNavigationArgs } from './use-arrow-navigation';
3
- export { isAtCurrentMenuLevel } from './is-at-current-menu-level';
@@ -1,48 +0,0 @@
1
- /**
2
- * Returns true if the element belongs to the current menu level of the
3
- * container, i.e. it is NOT inside a nested `role="menu"` sub-container.
4
- *
5
- * Uses `element.closest('[role="menu"]')` to determine the nearest menu
6
- * scope. If the nearest scope is the container's own `role="menu"` element,
7
- * the element belongs to this level. If it is a different (nested) menu,
8
- * the element belongs to a child level and should be excluded.
9
- *
10
- * Supports two container patterns:
11
- *
12
- * **1. Container has `role="menu"` directly** (preferred, used by avatar-group):
13
- * ```
14
- * <div ref={containerRef} role="menu">
15
- * <button role="menuitem" /> ← isAtCurrentMenuLevel → true
16
- * <div role="menu"> ← nested sub-menu
17
- * <button role="menuitem" /> ← isAtCurrentMenuLevel → false
18
- * </div>
19
- * </div>
20
- * ```
21
- * Uses the simple check: `element.closest('[role="menu"]') === container`
22
- *
23
- * **2. Container is a wrapper without `role="menu"`** (used by dropdown-menu,
24
- * where `MenuGroup` owns `role="menu"` but does not accept a ref):
25
- * ```
26
- * <div ref={containerRef}> ← wrapper (no role="menu")
27
- * <MenuGroup role="menu">
28
- * <button role="menuitem" /> ← isAtCurrentMenuLevel → true
29
- * <div role="menu"> ← nested sub-menu
30
- * <button role="menuitem" /> ← isAtCurrentMenuLevel → false
31
- * </div>
32
- * </MenuGroup>
33
- * </div>
34
- * ```
35
- * Falls back to walking the DOM to check that the element's closest
36
- * `role="menu"` is the container's own menu (not doubly nested).
37
- *
38
- * Ideally all consumers should use pattern 1 (place the ref directly on the
39
- * `role="menu"` element). Pattern 2 exists because `@atlaskit/menu`'s
40
- * `MenuGroup` does not currently accept a ref. If `MenuGroup` gains ref
41
- * support in the future, dropdown-menu should switch to pattern 1 and the
42
- * fallback path can be removed.
43
- *
44
- * Used both as a `TFocusableFilter` (to scope getNextFocusable etc.) and as
45
- * a guard to prevent parent menu handlers from acting on events that
46
- * belong to a nested menu.
47
- */
48
- export declare function isAtCurrentMenuLevel(element: Element, container: HTMLElement): boolean;