@atlaskit/top-layer 0.12.1 → 0.13.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 (196) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/cjs/animations/presets.js +5 -5
  3. package/dist/cjs/dialog/create-close-event.js +1 -1
  4. package/dist/cjs/dialog/dialog-content.js +5 -5
  5. package/dist/cjs/entry-points/focus.js +6 -4
  6. package/dist/cjs/entry-points/use-anchor-position-at-point.js +12 -0
  7. package/dist/cjs/focus/get-first-focusable.js +19 -0
  8. package/dist/cjs/focus/get-focusables.js +30 -0
  9. package/dist/cjs/focus/get-last-focusable.js +19 -0
  10. package/dist/cjs/focus/get-next-focusable.js +43 -0
  11. package/dist/cjs/focus/is-in-same-layer.js +23 -0
  12. package/dist/cjs/focus/is-nested-layer-focused.js +32 -0
  13. package/dist/cjs/focus/selectors.js +19 -0
  14. package/dist/cjs/focus/types.js +1 -0
  15. package/dist/cjs/internal/ensure-preset-styles.js +1 -1
  16. package/dist/cjs/internal/reduced-motion.js +1 -1
  17. package/dist/cjs/internal/resolve-placement.js +2 -2
  18. package/dist/cjs/internal/role-to-aria-has-popup.js +37 -0
  19. package/dist/cjs/internal/role-types.js +1 -97
  20. package/dist/cjs/internal/should-focus-into-popover.js +19 -0
  21. package/dist/cjs/internal/slot.js +3 -3
  22. package/dist/cjs/internal/use-anchor-position-at-point.js +127 -0
  23. package/dist/cjs/internal/use-anchor-position.js +22 -33
  24. package/dist/cjs/internal/use-animated-visibility.js +10 -10
  25. package/dist/cjs/internal/use-animation-preset.js +1 -1
  26. package/dist/cjs/internal/use-focus-wrap.js +8 -5
  27. package/dist/cjs/internal/use-initial-focus.js +4 -4
  28. package/dist/cjs/internal/use-preset-styles.js +1 -1
  29. package/dist/cjs/internal/use-width-from-anchor.js +4 -4
  30. package/dist/cjs/placement-map/index.js +2 -2
  31. package/dist/cjs/placement-map/legacy-placements.js +2 -101
  32. package/dist/cjs/placement-map/placement-mapping.js +103 -0
  33. package/dist/cjs/popover/create-close-event.js +1 -1
  34. package/dist/cjs/popover/popover.js +3 -3
  35. package/dist/cjs/popup/popup-content.js +8 -7
  36. package/dist/cjs/testing/polyfill.js +8 -8
  37. package/dist/cjs/testing/to-be-visible.js +5 -5
  38. package/dist/cjs/use-arrow-navigation/is-at-current-menu-level.js +19 -12
  39. package/dist/cjs/use-arrow-navigation/use-arrow-navigation.js +7 -5
  40. package/dist/cjs/use-simple-light-dismiss/index.js +3 -3
  41. package/dist/es2019/animations/presets.js +5 -5
  42. package/dist/es2019/dialog/create-close-event.js +1 -1
  43. package/dist/es2019/dialog/dialog-content.js +5 -5
  44. package/dist/es2019/entry-points/focus.js +3 -1
  45. package/dist/es2019/entry-points/use-anchor-position-at-point.js +1 -0
  46. package/dist/es2019/focus/get-first-focusable.js +14 -0
  47. package/dist/es2019/focus/get-focusables.js +19 -0
  48. package/dist/es2019/focus/get-last-focusable.js +14 -0
  49. package/dist/es2019/focus/get-next-focusable.js +38 -0
  50. package/dist/es2019/focus/is-in-same-layer.js +18 -0
  51. package/dist/es2019/focus/is-nested-layer-focused.js +28 -0
  52. package/dist/es2019/focus/selectors.js +11 -0
  53. package/dist/es2019/focus/types.js +0 -0
  54. package/dist/es2019/internal/ensure-preset-styles.js +1 -1
  55. package/dist/es2019/internal/reduced-motion.js +1 -1
  56. package/dist/es2019/internal/resolve-placement.js +2 -2
  57. package/dist/es2019/internal/role-to-aria-has-popup.js +32 -0
  58. package/dist/es2019/internal/role-types.js +0 -92
  59. package/dist/es2019/internal/should-focus-into-popover.js +14 -0
  60. package/dist/es2019/internal/slot.js +3 -3
  61. package/dist/es2019/internal/use-anchor-position-at-point.js +122 -0
  62. package/dist/es2019/internal/use-anchor-position.js +19 -19
  63. package/dist/es2019/internal/use-animated-visibility.js +10 -10
  64. package/dist/es2019/internal/use-animation-preset.js +1 -1
  65. package/dist/es2019/internal/use-focus-wrap.js +4 -1
  66. package/dist/es2019/internal/use-initial-focus.js +1 -1
  67. package/dist/es2019/internal/use-preset-styles.js +1 -1
  68. package/dist/es2019/internal/use-width-from-anchor.js +4 -4
  69. package/dist/es2019/placement-map/index.js +1 -1
  70. package/dist/es2019/placement-map/legacy-placements.js +1 -100
  71. package/dist/es2019/placement-map/placement-mapping.js +97 -0
  72. package/dist/es2019/popover/create-close-event.js +1 -1
  73. package/dist/es2019/popover/popover.js +3 -3
  74. package/dist/es2019/popup/popup-content.js +6 -5
  75. package/dist/es2019/testing/polyfill.js +8 -8
  76. package/dist/es2019/testing/to-be-visible.js +5 -5
  77. package/dist/es2019/use-arrow-navigation/is-at-current-menu-level.js +19 -12
  78. package/dist/es2019/use-arrow-navigation/use-arrow-navigation.js +3 -1
  79. package/dist/es2019/use-simple-light-dismiss/index.js +3 -3
  80. package/dist/esm/animations/presets.js +5 -5
  81. package/dist/esm/dialog/create-close-event.js +1 -1
  82. package/dist/esm/dialog/dialog-content.js +5 -5
  83. package/dist/esm/entry-points/focus.js +3 -1
  84. package/dist/esm/entry-points/use-anchor-position-at-point.js +1 -0
  85. package/dist/esm/focus/get-first-focusable.js +13 -0
  86. package/dist/esm/focus/get-focusables.js +24 -0
  87. package/dist/esm/focus/get-last-focusable.js +13 -0
  88. package/dist/esm/focus/get-next-focusable.js +37 -0
  89. package/dist/esm/focus/is-in-same-layer.js +17 -0
  90. package/dist/esm/focus/is-nested-layer-focused.js +27 -0
  91. package/dist/esm/focus/selectors.js +13 -0
  92. package/dist/esm/focus/types.js +0 -0
  93. package/dist/esm/internal/ensure-preset-styles.js +1 -1
  94. package/dist/esm/internal/reduced-motion.js +1 -1
  95. package/dist/esm/internal/resolve-placement.js +2 -2
  96. package/dist/esm/internal/role-to-aria-has-popup.js +31 -0
  97. package/dist/esm/internal/role-types.js +0 -90
  98. package/dist/esm/internal/should-focus-into-popover.js +13 -0
  99. package/dist/esm/internal/slot.js +3 -3
  100. package/dist/esm/internal/use-anchor-position-at-point.js +122 -0
  101. package/dist/esm/internal/use-anchor-position.js +22 -33
  102. package/dist/esm/internal/use-animated-visibility.js +10 -10
  103. package/dist/esm/internal/use-animation-preset.js +1 -1
  104. package/dist/esm/internal/use-focus-wrap.js +4 -1
  105. package/dist/esm/internal/use-initial-focus.js +1 -1
  106. package/dist/esm/internal/use-preset-styles.js +1 -1
  107. package/dist/esm/internal/use-width-from-anchor.js +4 -4
  108. package/dist/esm/placement-map/index.js +1 -1
  109. package/dist/esm/placement-map/legacy-placements.js +1 -100
  110. package/dist/esm/placement-map/placement-mapping.js +97 -0
  111. package/dist/esm/popover/create-close-event.js +1 -1
  112. package/dist/esm/popover/popover.js +3 -3
  113. package/dist/esm/popup/popup-content.js +6 -5
  114. package/dist/esm/testing/polyfill.js +8 -8
  115. package/dist/esm/testing/to-be-visible.js +5 -5
  116. package/dist/esm/use-arrow-navigation/is-at-current-menu-level.js +19 -12
  117. package/dist/esm/use-arrow-navigation/use-arrow-navigation.js +3 -1
  118. package/dist/esm/use-simple-light-dismiss/index.js +3 -3
  119. package/dist/types/dialog/create-close-event.d.ts +1 -1
  120. package/dist/types/dialog/types.d.ts +8 -0
  121. package/dist/types/entry-points/focus.d.ts +4 -2
  122. package/dist/types/entry-points/use-anchor-position-at-point.d.ts +1 -0
  123. package/dist/types/focus/get-first-focusable.d.ts +8 -0
  124. package/dist/types/focus/get-focusables.d.ts +13 -0
  125. package/dist/types/focus/get-last-focusable.d.ts +8 -0
  126. package/dist/types/focus/get-next-focusable.d.ts +13 -0
  127. package/dist/types/focus/is-in-same-layer.d.ts +8 -0
  128. package/dist/types/focus/is-nested-layer-focused.d.ts +8 -0
  129. package/dist/types/focus/selectors.d.ts +4 -0
  130. package/dist/types/focus/types.d.ts +5 -0
  131. package/dist/types/internal/reduced-motion.d.ts +1 -1
  132. package/dist/types/internal/resolve-placement.d.ts +2 -2
  133. package/dist/types/internal/role-to-aria-has-popup.d.ts +13 -0
  134. package/dist/types/internal/role-types.d.ts +0 -19
  135. package/dist/types/internal/should-focus-into-popover.d.ts +8 -0
  136. package/dist/types/internal/slot.d.ts +4 -4
  137. package/dist/types/internal/use-anchor-position-at-point.d.ts +62 -0
  138. package/dist/types/internal/use-anchor-position.d.ts +6 -1
  139. package/dist/types/internal/use-animated-visibility.d.ts +3 -3
  140. package/dist/types/internal/use-animation-preset.d.ts +1 -1
  141. package/dist/types/internal/use-preset-styles.d.ts +1 -1
  142. package/dist/types/internal/use-width-from-anchor.d.ts +2 -2
  143. package/dist/types/placement-map/index.d.ts +1 -1
  144. package/dist/types/placement-map/legacy-placements.d.ts +0 -12
  145. package/dist/types/placement-map/placement-mapping.d.ts +13 -0
  146. package/dist/types/popover/create-close-event.d.ts +1 -1
  147. package/dist/types/popover/popover.d.ts +1 -1
  148. package/dist/types/popup/popup-context.d.ts +1 -1
  149. package/dist/types/testing/to-be-visible.d.ts +3 -3
  150. package/dist/types/use-arrow-navigation/use-arrow-navigation.d.ts +1 -1
  151. package/dist/types/use-simple-light-dismiss/index.d.ts +1 -1
  152. package/dist/types-ts4.5/dialog/create-close-event.d.ts +1 -1
  153. package/dist/types-ts4.5/dialog/types.d.ts +8 -0
  154. package/dist/types-ts4.5/entry-points/focus.d.ts +4 -2
  155. package/dist/types-ts4.5/entry-points/use-anchor-position-at-point.d.ts +1 -0
  156. package/dist/types-ts4.5/focus/get-first-focusable.d.ts +8 -0
  157. package/dist/types-ts4.5/focus/get-focusables.d.ts +13 -0
  158. package/dist/types-ts4.5/focus/get-last-focusable.d.ts +8 -0
  159. package/dist/types-ts4.5/focus/get-next-focusable.d.ts +13 -0
  160. package/dist/types-ts4.5/focus/is-in-same-layer.d.ts +8 -0
  161. package/dist/types-ts4.5/focus/is-nested-layer-focused.d.ts +8 -0
  162. package/dist/types-ts4.5/focus/selectors.d.ts +4 -0
  163. package/dist/types-ts4.5/focus/types.d.ts +5 -0
  164. package/dist/types-ts4.5/internal/reduced-motion.d.ts +1 -1
  165. package/dist/types-ts4.5/internal/resolve-placement.d.ts +2 -2
  166. package/dist/types-ts4.5/internal/role-to-aria-has-popup.d.ts +13 -0
  167. package/dist/types-ts4.5/internal/role-types.d.ts +0 -19
  168. package/dist/types-ts4.5/internal/should-focus-into-popover.d.ts +8 -0
  169. package/dist/types-ts4.5/internal/slot.d.ts +4 -4
  170. package/dist/types-ts4.5/internal/use-anchor-position-at-point.d.ts +62 -0
  171. package/dist/types-ts4.5/internal/use-anchor-position.d.ts +6 -1
  172. package/dist/types-ts4.5/internal/use-animated-visibility.d.ts +3 -3
  173. package/dist/types-ts4.5/internal/use-animation-preset.d.ts +1 -1
  174. package/dist/types-ts4.5/internal/use-preset-styles.d.ts +1 -1
  175. package/dist/types-ts4.5/internal/use-width-from-anchor.d.ts +2 -2
  176. package/dist/types-ts4.5/placement-map/index.d.ts +1 -1
  177. package/dist/types-ts4.5/placement-map/legacy-placements.d.ts +0 -12
  178. package/dist/types-ts4.5/placement-map/placement-mapping.d.ts +13 -0
  179. package/dist/types-ts4.5/popover/create-close-event.d.ts +1 -1
  180. package/dist/types-ts4.5/popover/popover.d.ts +1 -1
  181. package/dist/types-ts4.5/popup/popup-context.d.ts +1 -1
  182. package/dist/types-ts4.5/testing/to-be-visible.d.ts +3 -3
  183. package/dist/types-ts4.5/use-arrow-navigation/use-arrow-navigation.d.ts +1 -1
  184. package/dist/types-ts4.5/use-simple-light-dismiss/index.d.ts +1 -1
  185. package/package.json +1 -1
  186. package/use-anchor-position-at-point/package.json +17 -0
  187. package/dist/cjs/focus/focus.js +0 -169
  188. package/dist/cjs/focus/index.js +0 -24
  189. package/dist/es2019/focus/focus.js +0 -158
  190. package/dist/es2019/focus/index.js +0 -1
  191. package/dist/esm/focus/focus.js +0 -160
  192. package/dist/esm/focus/index.js +0 -1
  193. package/dist/types/focus/focus.d.ts +0 -50
  194. package/dist/types/focus/index.d.ts +0 -2
  195. package/dist/types-ts4.5/focus/focus.d.ts +0 -50
  196. package/dist/types-ts4.5/focus/index.d.ts +0 -2
@@ -25,8 +25,8 @@ var DEFAULT_GAP = "var(--ds-space-100, 8px)";
25
25
  * CSS length string (e.g. `token('space.100')`).
26
26
  *
27
27
  * The two offset axes are named for clarity at the call site:
28
- * - `gap` — distance away from the trigger along the placement axis
29
- * - `crossAxisShift` — nudge along the trigger edge (perpendicular to the placement axis)
28
+ * - `gap` - distance away from the trigger along the placement axis
29
+ * - `crossAxisShift` - nudge along the trigger edge (perpendicular to the placement axis)
30
30
  */
31
31
 
32
32
  /**
@@ -0,0 +1,31 @@
1
+ /**
2
+ * Maps a popover content role to the correct `aria-haspopup` value
3
+ * for its trigger element.
4
+ *
5
+ * Returns `undefined` for roles that are not popups in the ARIA sense
6
+ * (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
7
+ * should not announce a popup at all - emitting `aria-haspopup="dialog"`
8
+ * on a tooltip trigger would mislead assistive technology.
9
+ */
10
+ export function roleToAriaHasPopup(_ref) {
11
+ var role = _ref.role;
12
+ if (role === 'menu') {
13
+ return 'menu';
14
+ }
15
+ if (role === 'listbox') {
16
+ return 'listbox';
17
+ }
18
+ if (role === 'tree') {
19
+ return 'tree';
20
+ }
21
+ if (role === 'grid') {
22
+ return 'grid';
23
+ }
24
+ if (role === 'dialog' || role === 'alertdialog') {
25
+ return 'dialog';
26
+ }
27
+ // Non-popup roles (tooltip, note, status, alert, log) and the
28
+ // no-role case: omit `aria-haspopup` entirely. React drops the
29
+ // attribute when the value is `undefined`.
30
+ return undefined;
31
+ }
@@ -1,90 +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
-
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
-
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
-
25
- // ── Shared ARIA role discrimination types ──
26
- //
27
- // These encode the WCAG 4.1.2 constraint: roles like `dialog`, `alertdialog`,
28
- // and `menu` MUST have an accessible name (either `label` or `labelledBy`).
29
- // TypeScript enforces this at compile time via discriminated unions.
30
-
31
- /**
32
- * ARIA role props where a role is always required.
33
- *
34
- * Used by `TPopupContentProps`. Popup content must always declare
35
- * its role so assistive technology can identify the layer.
36
- */
37
-
38
- /**
39
- * ARIA role props where a role is optional.
40
- *
41
- * Used by `TPopoverProps`. The low-level primitive allows omitting
42
- * the role for cases where it is set externally or not needed.
43
- */
44
-
45
- /**
46
- * Maps a popover content role to the correct `aria-haspopup` value
47
- * for its trigger element.
48
- *
49
- * Returns `undefined` for roles that are not popups in the ARIA sense
50
- * (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
51
- * should not announce a popup at all - emitting `aria-haspopup="dialog"`
52
- * on a tooltip trigger would mislead assistive technology.
53
- */
54
- // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
55
- export function roleToAriaHasPopup(_ref) {
56
- var role = _ref.role;
57
- if (role === 'menu') {
58
- return 'menu';
59
- }
60
- if (role === 'listbox') {
61
- return 'listbox';
62
- }
63
- if (role === 'tree') {
64
- return 'tree';
65
- }
66
- if (role === 'grid') {
67
- return 'grid';
68
- }
69
- if (role === 'dialog' || role === 'alertdialog') {
70
- return 'dialog';
71
- }
72
- // Non-popup roles (tooltip, note, status, alert, log) and the
73
- // no-role case: omit `aria-haspopup` entirely. React drops the
74
- // attribute when the value is `undefined`.
75
- return undefined;
76
- }
77
- var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
78
-
79
- /**
80
- * Returns `true` when the given popover role moves focus into the popover
81
- * on open, and `false` otherwise (including when `role` is `undefined`).
82
- */
83
- // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
84
- export function shouldFocusIntoPopover(_ref2) {
85
- var role = _ref2.role;
86
- if (!role) {
87
- return false;
88
- }
89
- return rolesThatMoveFocus.has(role);
90
- }
@@ -0,0 +1,13 @@
1
+ var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
2
+
3
+ /**
4
+ * Returns `true` when the given popover role moves focus into the popover
5
+ * on open, and `false` otherwise (including when `role` is `undefined`).
6
+ */
7
+ export function shouldFocusIntoPopover(_ref) {
8
+ var role = _ref.role;
9
+ if (!role) {
10
+ return false;
11
+ }
12
+ return rolesThatMoveFocus.has(role);
13
+ }
@@ -26,14 +26,14 @@ function isSlotChild(child) {
26
26
  * Merges props (including ref) onto a single React element child.
27
27
  *
28
28
  * A safer alternative to raw `cloneElement` that:
29
- * 1. Guards with `isValidElement` — non-element children (strings,
29
+ * 1. Guards with `isValidElement` - non-element children (strings,
30
30
  * fragments, null) are returned as-is instead of crashing.
31
31
  * 2. Merges refs via `mergeRefs` so both the caller's ref and the
32
32
  * child's existing ref are honoured.
33
33
  * 3. Spreads any additional props (ARIA attributes, event handlers, etc.)
34
34
  * onto the child element.
35
35
  *
36
- * Event handlers (e.g. `onClick`) are **not** auto-merged — the caller's
36
+ * Event handlers (e.g. `onClick`) are **not** auto-merged - the caller's
37
37
  * handler replaces the child's. Compose handlers before passing them in.
38
38
  *
39
39
  * @example
@@ -46,7 +46,7 @@ function isSlotChild(child) {
46
46
  export var Slot = /*#__PURE__*/forwardRef(function Slot(slotProps, ref) {
47
47
  var rawChildren = slotProps.children,
48
48
  props = _objectWithoutProperties(slotProps, _excluded);
49
- // `SlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
49
+ // `TSlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
50
50
  var children = rawChildren;
51
51
  if (!isSlotChild(children)) {
52
52
  return children;
@@ -0,0 +1,122 @@
1
+ import { useLayoutEffect, useRef } from 'react';
2
+ import { useAnchorPosition } from './use-anchor-position';
3
+
4
+ /**
5
+ * A point in viewport coordinates (CSS pixels) at which the synthetic
6
+ * anchor should be placed.
7
+ *
8
+ * Axis-named (`x`/`y`) rather than edge-named (`left`/`top`) so the
9
+ * shape is unambiguous in RTL writing modes — there is no ambiguity
10
+ * about whether a coordinate is logical (`inline-start`/`block-start`)
11
+ * or physical (`left`/`top`). Viewport coordinates are always
12
+ * physical, so we name them with the physical axis labels.
13
+ */
14
+
15
+ /**
16
+ * Styles the synthetic anchor as an invisible, zero-size point.
17
+ * Dynamic `inset-*` overrides are written by the positioning effect.
18
+ *
19
+ * Uses `Object.assign` rather than Compiled CSS (element is outside the React tree)
20
+ * or the internal `setStyle` helper (we own this element entirely — it is created
21
+ * and removed by this hook — so the snapshot/restore semantics `setStyle`
22
+ * provides for caller-owned elements would be dead work here).
23
+ */
24
+ function applyStaticAnchorStyles(el) {
25
+ Object.assign(el.style, {
26
+ position: 'fixed',
27
+ // `top`/`left` rather than `inset-block-start`/`inset-inline-start`
28
+ // for consistency with the dynamic positioning effect below, which
29
+ // uses physical properties (see comment there for the rationale).
30
+ top: '0',
31
+ left: '0',
32
+ // Zero size — placement decides which side the popover sits on.
33
+ width: '0',
34
+ height: '0',
35
+ // Prevent the overlay from intercepting pointer events.
36
+ pointerEvents: 'none'
37
+ });
38
+ }
39
+
40
+ // `useAnchorPosition` requires a real DOM element. When the caller only
41
+ // has a viewport coordinate (e.g. cursor at hover time), this hook
42
+ // manages a hidden `<div>` at that point and delegates the rest.
43
+ //
44
+ // The `<div>` is appended directly to `document.body` to escape any
45
+ // transformed ancestor, which would otherwise break `position: fixed`
46
+ // viewport-relative resolution.
47
+
48
+ /**
49
+ * Positions a popover at a consumer-supplied viewport coordinate using a
50
+ * hidden synthetic anchor.
51
+ *
52
+ * @example
53
+ * ```tsx
54
+ * function PointPositionedPopover({ popoverRef, placement, mousePos }) {
55
+ * useAnchorPositionAtPoint({
56
+ * popoverRef,
57
+ * placement,
58
+ * isEnabled: Boolean(mousePos),
59
+ * getPoint: () => {
60
+ * if (!mousePos) return null;
61
+ * return { x: mousePos.clientX, y: mousePos.clientY };
62
+ * },
63
+ * });
64
+ * return <Popover ref={popoverRef}>...</Popover>;
65
+ * }
66
+ * ```
67
+ */
68
+ export function useAnchorPositionAtPoint(_ref) {
69
+ var popoverRef = _ref.popoverRef,
70
+ placement = _ref.placement,
71
+ getPoint = _ref.getPoint,
72
+ _ref$isEnabled = _ref.isEnabled,
73
+ isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
74
+ var syntheticAnchorRef = useRef(null);
75
+
76
+ // `getPoint` is kept in a ref so the layout effect can call the
77
+ // latest version without listing it as a dep — that would re-fire
78
+ // on every render and re-latch the point.
79
+ var getPointRef = useRef(getPoint);
80
+ getPointRef.current = getPoint;
81
+
82
+ // Lazy element creation: the `<div>` is only created when both
83
+ // `isEnabled` is true AND `getPoint()` returns a non-null point.
84
+ // `useLayoutEffect` ensures the element exists before the inner
85
+ // `useAnchorPosition` (also a layout effect) reads the ref.
86
+ useLayoutEffect(function () {
87
+ if (!isEnabled) {
88
+ return;
89
+ }
90
+ var point = getPointRef.current();
91
+ if (!point) {
92
+ return;
93
+ }
94
+ var anchor = document.createElement('div');
95
+ anchor.setAttribute('aria-hidden', 'true');
96
+ applyStaticAnchorStyles(anchor);
97
+ // `point.x`/`y` are physical viewport coordinates (from
98
+ // `MouseEvent.clientX/Y`), so map directly onto physical
99
+ // `left`/`top`. This is RTL-safe: `position: fixed` + physical
100
+ // insets is direction-independent. Using logical
101
+ // `inset-inline-start` would need `viewportWidth - point.x` in
102
+ // RTL to land at the same physical pixel.
103
+ anchor.style.top = "".concat(point.y, "px");
104
+ anchor.style.left = "".concat(point.x, "px");
105
+ document.body.appendChild(anchor);
106
+ syntheticAnchorRef.current = anchor;
107
+ return function cleanup() {
108
+ anchor.remove();
109
+ syntheticAnchorRef.current = null;
110
+ };
111
+ }, [isEnabled]);
112
+
113
+ // Mirror `isEnabled` so both hooks stay in sync — when disabled,
114
+ // neither this hook nor the inner one touches the popover, leaving
115
+ // any other positioning the consumer has set up free to take effect.
116
+ useAnchorPosition({
117
+ anchorRef: syntheticAnchorRef,
118
+ popoverRef: popoverRef,
119
+ placement: placement,
120
+ isEnabled: isEnabled
121
+ });
122
+ }
@@ -1,5 +1,3 @@
1
- import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
- import _createClass from "@babel/runtime/helpers/createClass";
3
1
  /**
4
2
  * Anchor positioning for top-layer popovers. See
5
3
  * `notes/architecture/positioning.md` for the full model.
@@ -30,25 +28,15 @@ import { setStyle } from './set-style';
30
28
  // from `./resolve-placement` so search-and-jump lands at the source of truth.
31
29
 
32
30
  /**
33
- * Module-scope no-op `ResizeObserver` used in non-DOM jest environments where
31
+ * Module-scope no-op `ResizeObserver` stub used in non-DOM jest environments where
34
32
  * `ResizeObserver` is `undefined`. Hoisted out of the effect to avoid
35
- * allocating a new class declaration on every run.
33
+ * re-allocating on every run.
36
34
  */
37
- var NoopResizeObserver = /*#__PURE__*/function () {
38
- function NoopResizeObserver() {
39
- _classCallCheck(this, NoopResizeObserver);
40
- }
41
- return _createClass(NoopResizeObserver, [{
42
- key: "observe",
43
- value: function observe() {}
44
- }, {
45
- key: "unobserve",
46
- value: function unobserve() {}
47
- }, {
48
- key: "disconnect",
49
- value: function disconnect() {}
50
- }]);
51
- }();
35
+ var noopResizeObserver = {
36
+ observe: function observe() {},
37
+ unobserve: function unobserve() {},
38
+ disconnect: function disconnect() {}
39
+ };
52
40
 
53
41
  /**
54
42
  * Returns true when the popover is currently open. Wrapped because the
@@ -205,19 +193,23 @@ function useStablePlacement(placement) {
205
193
  * comparison is used internally so re-runs are skipped when the resolved
206
194
  * placement shape is unchanged.
207
195
  */
208
- // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
209
196
  export function useAnchorPosition(_ref3) {
210
197
  var anchorRef = _ref3.anchorRef,
211
198
  popoverRef = _ref3.popoverRef,
212
199
  _ref3$placement = _ref3.placement,
213
200
  placement = _ref3$placement === void 0 ? {} : _ref3$placement,
214
201
  _ref3$forceFallbackPo = _ref3.forceFallbackPositioning,
215
- forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo;
202
+ forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo,
203
+ _ref3$isEnabled = _ref3.isEnabled,
204
+ isEnabled = _ref3$isEnabled === void 0 ? true : _ref3$isEnabled;
216
205
  var id = useId();
217
206
  // Stabilize `placement` object so the same object literal
218
207
  // value returns an object with the same reference
219
208
  var stablePlacement = useStablePlacement(placement);
220
209
  useLayoutEffect(function () {
210
+ if (!isEnabled) {
211
+ return;
212
+ }
221
213
  var trigger = anchorRef.current;
222
214
  var popover = popoverRef.current;
223
215
  if (!trigger || !popover) {
@@ -338,7 +330,7 @@ export function useAnchorPosition(_ref3) {
338
330
  return _undoPositioning;
339
331
  }
340
332
 
341
- // ── JS fallback ──
333
+ // JS fallback
342
334
  // The popover is already in the browser's top layer via popover="auto",
343
335
  // so it does not need position:fixed. We only reset the UA defaults
344
336
  // (inset: 0; margin: auto) and set top/left based on measurements.
@@ -407,20 +399,17 @@ export function useAnchorPosition(_ref3) {
407
399
  // Self-disconnects after one valid measurement; ongoing
408
400
  // scroll/resize is handled by the window listeners below.
409
401
  // `ResizeObserver` is missing in some non-DOM jest environments
410
- // (e.g. post-office's `node` environment). Fall back to a no-op
411
- // observer there. The scroll/resize listeners below still keep
412
- // the popover positioned in the rare case the consumer also
413
- // polyfilled `showPopover` but not `ResizeObserver`. Real
414
- // browsers always have it. The `NoopResizeObserver` class is
415
- // hoisted to module scope (see top of file) so we do not allocate
416
- // a new constructor on every effect run.
417
- var ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
418
- var resizeObserver = new ResizeObserverImpl(function () {
402
+ // (e.g. post-office's `node` environment). Fall back to the
403
+ // module-scope `noopResizeObserver` stub there. The scroll/resize
404
+ // listeners below still keep the popover positioned in the rare
405
+ // case the consumer also polyfilled `showPopover` but not
406
+ // `ResizeObserver`. Real browsers always have it.
407
+ var resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
419
408
  if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
420
409
  update();
421
410
  resizeObserver.disconnect();
422
411
  }
423
- });
412
+ }) : noopResizeObserver;
424
413
 
425
414
  // If the popover is already open by the time this effect runs (for
426
415
  // example, the parent `useAnchorPosition` effect runs after the child
@@ -469,5 +458,5 @@ export function useAnchorPosition(_ref3) {
469
458
  popover.style.removeProperty('opacity');
470
459
  });
471
460
  return undoPositioning;
472
- }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, id]);
461
+ }, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id]);
473
462
  }
@@ -8,19 +8,19 @@ import { usePresetStyles } from './use-preset-styles';
8
8
  *
9
9
  * Used by both `Popover` and `Dialog` to share the same animation lifecycle
10
10
  * logic. Those components own their own show/hide mechanisms (showPopover /
11
- * hidePopover vs showModal / close) and event handling — this hook only
11
+ * hidePopover vs showModal / close) and event handling - this hook only
12
12
  * manages the relationship between `isOpen` and when children are rendered.
13
13
  *
14
14
  * ## Problem
15
15
  *
16
16
  * We want to delay the unmount of children until a CSS exit transition has
17
17
  * finished playing. If we unmount children the moment `isOpen` becomes
18
- * `false`, the exit animation is never visible — the content just disappears.
18
+ * `false`, the exit animation is never visible - the content just disappears.
19
19
  *
20
20
  * ## How it works
21
21
  *
22
22
  * `showChildren` tracks whether the consumer's children should be in the DOM.
23
- * It does not mirror `isOpen` exactly — it intentionally lags behind during
23
+ * It does not mirror `isOpen` exactly - it intentionally lags behind during
24
24
  * exit animations:
25
25
  *
26
26
  * ```
@@ -56,12 +56,12 @@ export function useAnimatedVisibility(_ref) {
56
56
  // or the user has enabled the "prefers reduced motion" OS setting.
57
57
  var willAnimate = Boolean(animate) && !prefersReducedMotion();
58
58
 
59
- // ── showChildren state ──
59
+ // showChildren state
60
60
  //
61
61
  // This is the core of the hook. `showChildren` controls whether the
62
62
  // consumer's children are in the DOM. The two `if` blocks below are
63
63
  // intentionally written as synchronous state updates during render
64
- // (React supports this pattern — setState during render is treated as
64
+ // (React supports this pattern - setState during render is treated as
65
65
  // a synchronous re-render before the browser paints).
66
66
  //
67
67
  // Mount path: isOpen went true but showChildren is still false → mount.
@@ -88,7 +88,7 @@ export function useAnimatedVisibility(_ref) {
88
88
  var onExitFinishRef = useRef(onExitFinish);
89
89
  onExitFinishRef.current = onExitFinish;
90
90
 
91
- // ── Animated entry effect ──
91
+ // Animated entry effect
92
92
  //
93
93
  // Fires `onEnterFinish` after the entry transition completes.
94
94
  // When there is no animation, fires it immediately via a separate effect.
@@ -137,7 +137,7 @@ export function useAnimatedVisibility(_ref) {
137
137
  };
138
138
  }, [isOpen, showChildren, willAnimate, preset === null || preset === void 0 ? void 0 : preset.enterDurationMs, elementRef]);
139
139
 
140
- // ── Non-animated entry callback ──
140
+ // Non-animated entry callback
141
141
  //
142
142
  // When there is no animation, fire `onEnterFinish` immediately on mount and after `isOpen` goes false->true.
143
143
  // The initial value is false to make sure it fires on mount if the current `isOpen` is true.
@@ -151,7 +151,7 @@ export function useAnimatedVisibility(_ref) {
151
151
  }
152
152
  }, [isOpen, willAnimate]);
153
153
 
154
- // ── Animated exit effect ──
154
+ // Animated exit effect
155
155
  //
156
156
  // Runs when all three conditions are true:
157
157
  // • `isOpen` is false (consumer wants to close)
@@ -214,10 +214,10 @@ export function useAnimatedVisibility(_ref) {
214
214
  };
215
215
  }, [isOpen, showChildren, willAnimate, preset === null || preset === void 0 ? void 0 : preset.exitDurationMs, elementRef]);
216
216
 
217
- // ── Non-animated exit callback ──
217
+ // Non-animated exit callback
218
218
  //
219
219
  // When there is no animation, children unmount synchronously (handled
220
- // by the `if` block above). But `onExitFinish` still needs to fire —
220
+ // by the `if` block above). But `onExitFinish` still needs to fire -
221
221
  // we do that in a follow-up effect so the consumer can react to it.
222
222
  //
223
223
  // Uses a previous-value ref (`wasOpenRef`) to detect the exact
@@ -3,7 +3,7 @@ import { ensurePresetStyles } from './ensure-preset-styles';
3
3
  /**
4
4
  * Normalizes the `animate` prop to a preset (or null) and ensures its CSS
5
5
  * is injected once into document.head. Used by PopupContent, Popover, and
6
- * DialogContent so they don't duplicate this logic.
6
+ * DialogContent so they do not duplicate this logic.
7
7
  */
8
8
  export function useAnimationPreset(animate) {
9
9
  var preset = animate != null && animate !== false ? animate : null;
@@ -1,6 +1,9 @@
1
1
  import { useEffect } from 'react';
2
2
  import { bind } from 'bind-event-listener';
3
- import { getFirstFocusable, getLastFocusable, getNextFocusable, isNestedLayerFocused } from '../focus/focus';
3
+ import { getFirstFocusable } from '../focus/get-first-focusable';
4
+ import { getLastFocusable } from '../focus/get-last-focusable';
5
+ import { getNextFocusable } from '../focus/get-next-focusable';
6
+ import { isNestedLayerFocused } from '../focus/is-nested-layer-focused';
4
7
 
5
8
  /**
6
9
  * Roles that require focus wrapping per WAI-ARIA APG.
@@ -1,5 +1,5 @@
1
1
  import { useEffect, useRef } from 'react';
2
- import { getFirstFocusable } from '../focus/focus';
2
+ import { getFirstFocusable } from '../focus/get-first-focusable';
3
3
 
4
4
  /**
5
5
  * Determines the correct element to receive initial focus within a popover,
@@ -4,7 +4,7 @@ import { ensurePresetStyles } from './ensure-preset-styles';
4
4
  * Normalizes a preset prop to a value (or null) and ensures its CSS
5
5
  * is injected once into `document.head`.
6
6
  *
7
- * Works with any preset that has `{ css, name }` — animation presets
7
+ * Works with any preset that has `{ css, name }` - animation presets
8
8
  * (TAnimationPreset) satisfies this shape.
9
9
  */
10
10
  export function usePresetStyles(_ref) {
@@ -4,8 +4,8 @@ import { setStyle } from './set-style';
4
4
  /**
5
5
  * Sets the width of a popover element relative to its anchor element.
6
6
  *
7
- * - `'match-anchor'` → `width: anchor-size(width)` — popover matches anchor width exactly.
8
- * - `'min-anchor'` → `min-width: anchor-size(width)` — popover is at least as wide as anchor,
7
+ * - `'match-anchor'` → `width: anchor-size(width)` - popover matches anchor width exactly.
8
+ * - `'min-anchor'` → `min-width: anchor-size(width)` - popover is at least as wide as anchor,
9
9
  * but can grow wider.
10
10
  * - `'none'` → no explicit width is set (default behaviour)
11
11
  *
@@ -30,7 +30,7 @@ export function useWidthFromAnchor(_ref) {
30
30
  var supportsAnchorSize = typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('width', 'anchor-size(width)');
31
31
  if (mode === 'match-anchor') {
32
32
  // Set an exact width matching the anchor.
33
- // `min-inline-size` is intentionally NOT set here — it would override the
33
+ // `min-inline-size` is intentionally NOT set here - it would override the
34
34
  // explicit width constraint, allowing the popover to grow past the anchor's width.
35
35
  if (supportsAnchorSize) {
36
36
  return setStyle({
@@ -86,7 +86,7 @@ export function useWidthFromAnchor(_ref) {
86
86
  });
87
87
  }
88
88
 
89
- // No anchor available in JS fallback — still apply min-inline-size.
89
+ // No anchor available in JS fallback - still apply min-inline-size.
90
90
  return setStyle({
91
91
  el: node,
92
92
  styles: [minInlineSizeStyle]
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
4
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
- import { placementMapping } from './legacy-placements';
5
+ import { placementMapping } from './placement-mapping';
6
6
 
7
7
  /**
8
8
  * Maps legacy Popper.js placement values to the new object-based
@@ -5,103 +5,4 @@
5
5
  * to enumerate every placement (e.g. for a settings dropdown). New code
6
6
  * should use the object-based `TPlacementOptions` directly.
7
7
  */
8
- // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
9
- export var LEGACY_PLACEMENTS = ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-center', 'top-end', 'bottom', 'bottom-start', 'bottom-center', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
10
- /**
11
- * The full mapping record. Internal - use `fromLegacyPlacement` from the
12
- * public entry-point so the offset-tuple translation is applied consistently.
13
- *
14
- * Note: `auto`, `auto-start`, `auto-end` map to `block-end` placements. This
15
- * is a reduction in expressiveness vs Popper.js (which picked the best
16
- * placement at runtime). CSS `position-try-fallbacks` flips at the edge but
17
- * the initial placement is fixed. Migration consumers who relied on Popper's
18
- * dynamic auto-flip should pick an explicit placement instead.
19
- */
20
- // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
21
- export var placementMapping = {
22
- top: {
23
- axis: 'block',
24
- edge: 'start',
25
- align: 'center'
26
- },
27
- 'top-start': {
28
- axis: 'block',
29
- edge: 'start',
30
- align: 'start'
31
- },
32
- 'top-center': {
33
- axis: 'block',
34
- edge: 'start',
35
- align: 'center'
36
- },
37
- 'top-end': {
38
- axis: 'block',
39
- edge: 'start',
40
- align: 'end'
41
- },
42
- bottom: {
43
- axis: 'block',
44
- edge: 'end',
45
- align: 'center'
46
- },
47
- 'bottom-start': {
48
- axis: 'block',
49
- edge: 'end',
50
- align: 'start'
51
- },
52
- 'bottom-center': {
53
- axis: 'block',
54
- edge: 'end',
55
- align: 'center'
56
- },
57
- 'bottom-end': {
58
- axis: 'block',
59
- edge: 'end',
60
- align: 'end'
61
- },
62
- right: {
63
- axis: 'inline',
64
- edge: 'end',
65
- align: 'center'
66
- },
67
- 'right-start': {
68
- axis: 'inline',
69
- edge: 'end',
70
- align: 'start'
71
- },
72
- 'right-end': {
73
- axis: 'inline',
74
- edge: 'end',
75
- align: 'end'
76
- },
77
- left: {
78
- axis: 'inline',
79
- edge: 'start',
80
- align: 'center'
81
- },
82
- 'left-start': {
83
- axis: 'inline',
84
- edge: 'start',
85
- align: 'start'
86
- },
87
- 'left-end': {
88
- axis: 'inline',
89
- edge: 'start',
90
- align: 'end'
91
- },
92
- auto: {
93
- axis: 'block',
94
- edge: 'end',
95
- align: 'center'
96
- },
97
- 'auto-start': {
98
- axis: 'block',
99
- edge: 'end',
100
- align: 'start'
101
- },
102
- 'auto-end': {
103
- axis: 'block',
104
- edge: 'end',
105
- align: 'end'
106
- }
107
- };
8
+ export var LEGACY_PLACEMENTS = ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-center', 'top-end', 'bottom', 'bottom-start', 'bottom-center', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];