@atlaskit/top-layer 0.17.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 (132) hide show
  1. package/AGENTS.md +113 -0
  2. package/CHANGELOG.md +7 -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 +1 -1
  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,102 +0,0 @@
1
- import { type RefObject } from 'react';
2
- import { type TFocusableFilter } from '../focus/types';
3
- /**
4
- * Args for `useArrowNavigation`.
5
- *
6
- * Keyboard contract:
7
- * - `ArrowDown` / `ArrowUp` move within the current menu level.
8
- * - `Home` / `End` jump to first / last.
9
- * - `ArrowRight` / `ArrowLeft` opens / closes nested submenus.
10
- * - `Tab` / `Shift+Tab` dismiss the menu (matching the ARIA APG menu pattern,
11
- * plus Radix UI / Headless UI / React Aria / Floating UI conventions).
12
- * Symmetric in both directions: there is no special-case for the last
13
- * item that lets Tab leave the menu without dismissing it.
14
- * - `Page Up` / `Page Down`: NOT handled - extend via your own listener if
15
- * your menu needs page-style scrolling.
16
- */
17
- export type TUseArrowNavigationArgs = {
18
- /**
19
- * Ref to the container element that holds the focusable items.
20
- */
21
- containerRef: RefObject<HTMLElement | null>;
22
- /**
23
- * Called when ArrowRight is pressed on a focused element with `aria-haspopup`.
24
- *
25
- * This follows the WAI-ARIA menu pattern: ArrowRight on a menu item that
26
- * controls a submenu should open that submenu. The consumer decides *how*
27
- * to open it (e.g. `trigger.click()`, imperative state update, etc.).
28
- *
29
- * Only fires when `filter` (if provided) confirms the focused element
30
- * belongs to the current menu level.
31
- */
32
- onNestedOpen?: ({ trigger }: {
33
- trigger: HTMLElement;
34
- }) => void;
35
- /**
36
- * Called when ArrowLeft is pressed and the current menu is nested
37
- * (i.e. the container is inside another `role="menu"`).
38
- *
39
- * This follows the WAI-ARIA menu pattern: ArrowLeft in a submenu
40
- * should close it and return to the parent menu. The consumer
41
- * decides *how* to close (e.g. calling their close handler).
42
- */
43
- onNestedClose?: () => void;
44
- /**
45
- * Called when the user presses Tab to exit the menu.
46
- */
47
- onClose: () => void;
48
- /**
49
- * When false, the keydown listener is not attached.
50
- * Defaults to true.
51
- */
52
- isEnabled?: boolean;
53
- /**
54
- * Optional filter to restrict which focusable elements are navigated.
55
- * When provided, only elements that pass the filter will be focused.
56
- *
57
- * The filter is also used as a guard on the currently focused element:
58
- * if the focused element does not pass the filter, the handler bails out.
59
- * This prevents parent menu handlers from acting on events that belong
60
- * to a nested menu.
61
- *
62
- * A common filter is `isAtCurrentMenuLevel` which excludes items inside
63
- * nested `role="menu"` sub-containers.
64
- */
65
- filter?: TFocusableFilter;
66
- };
67
- /**
68
- * Provides arrow key navigation for menu containers.
69
- *
70
- * Uses the focusable helpers from `@atlaskit/top-layer/focus` to manage
71
- * DOM-based focus movement within a container.
72
- *
73
- * - **ArrowDown / ArrowUp**: Move focus to the next/previous item (wraps).
74
- * - **Home / End**: Move focus to the first/last item.
75
- * - **Tab**: Calls `onClose` to exit the menu.
76
- *
77
- * When a `filter` is provided, it is used both for scoping focusable
78
- * elements and as a guard to prevent parent menu handlers from acting
79
- * on events that belong to a nested menu.
80
- *
81
- * @example Basic usage
82
- * ```tsx
83
- * useArrowNavigation({
84
- * containerRef: menuRef,
85
- * onClose: () => setIsOpen(false),
86
- * isEnabled: isOpen,
87
- * });
88
- * ```
89
- *
90
- * @example With nested menu filter
91
- * ```tsx
92
- * import { useArrowNavigation, isAtCurrentMenuLevel } from '@atlaskit/top-layer/use-arrow-navigation';
93
- *
94
- * useArrowNavigation({
95
- * containerRef: menuRef,
96
- * onClose: () => setIsOpen(false),
97
- * isEnabled: isOpen,
98
- * filter: isAtCurrentMenuLevel,
99
- * });
100
- * ```
101
- */
102
- export declare function useArrowNavigation({ containerRef, onClose, onNestedOpen, onNestedClose, isEnabled, filter, }: TUseArrowNavigationArgs): void;
@@ -1,45 +0,0 @@
1
- import { type RefObject } from 'react';
2
- import { type TPopoverCloseReason } from '../popover/types';
3
- type TUseSimpleLightDismissOptions = {
4
- /**
5
- * Ref to the popover element. Clicks inside this element will not trigger dismiss.
6
- */
7
- popoverRef: RefObject<HTMLElement | null>;
8
- /**
9
- * Whether the popover is currently open.
10
- * Listeners are only bound when `isOpen` is `true`.
11
- */
12
- isOpen: boolean;
13
- /**
14
- * Called when a light-dismiss event occurs.
15
- *
16
- * - `reason: 'escape'` - the user pressed the Escape key.
17
- * - `reason: 'light-dismiss'` - the user clicked outside the popover.
18
- *
19
- * **Note:** This hook provides simple, standalone light dismiss that does not
20
- * participate in the browser's `popover="auto"` dismiss stack. Every active
21
- * instance will fire independently - if multiple popovers use this hook,
22
- * they will all receive dismiss events.
23
- */
24
- onClose: (args: {
25
- reason: TPopoverCloseReason;
26
- }) => void;
27
- };
28
- /**
29
- * Simple light-dismiss hook for `popover="manual"` elements.
30
- *
31
- * Provides Escape-to-close and click-outside-to-close behavior without
32
- * relying on the browser's `popover="auto"` light-dismiss stack.
33
- *
34
- * **No stacking awareness:** This hook does not track a popover stack.
35
- * If multiple manual popovers are open and all use this hook, a single
36
- * Escape press or outside click will dismiss **all of them simultaneously**.
37
- * This is by design - the hook is intentionally simple for cases where
38
- * only one manual popover is open at a time.
39
- *
40
- * For stacked/nested popovers that should dismiss one-at-a-time, use
41
- * `popover="auto"` mode instead, which provides native stack-aware
42
- * light dismiss via the browser's top-layer stack.
43
- */
44
- export declare function useSimpleLightDismiss({ popoverRef, isOpen, onClose, }: TUseSimpleLightDismissOptions): void;
45
- export type { TUseSimpleLightDismissOptions };