@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
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @atlaskit/top-layer
2
2
 
3
+ ## 0.13.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`cf4af9aa9a2fe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cf4af9aa9a2fe) -
8
+ Fix tooltip with `position="mouse-x"` / `position="mouse-y"` not respecting the `mousePosition`
9
+ prop when the `platform-dst-top-layer` feature flag is enabled.
10
+
11
+ The cursor-anchored tooltip is now positioned via a new `useAnchorPositionAtPoint` hook in
12
+ `@atlaskit/top-layer`, which delegates to `useAnchorPosition` against a hidden anchor element
13
+ placed once at the cursor location at show time. The popover stays anchored at that location and
14
+ does not follow subsequent pointer movement.
15
+
16
+ `useAnchorPosition` now also accepts an optional `isEnabled` prop (defaults to `true`); when
17
+ `false`, the hook is a no-op.
18
+
19
+ ## 0.12.2
20
+
21
+ ### Patch Changes
22
+
23
+ - [`7210e88c14f95`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7210e88c14f95) -
24
+ Internal: align package with house authoring rules (style-only refactors).
25
+
3
26
  ## 0.12.1
4
27
 
5
28
  ### Patch Changes
@@ -9,7 +9,7 @@ exports.fade = fade;
9
9
  exports.scaleAndFade = scaleAndFade;
10
10
  exports.slideAndFade = slideAndFade;
11
11
  var _resolvePlacement = require("../internal/resolve-placement");
12
- // ── slideAndFade ──
12
+ // slideAndFade
13
13
 
14
14
  function getSlideAndFadeProperties(_ref) {
15
15
  var placement = _ref.placement,
@@ -91,7 +91,7 @@ function slideAndFade(options) {
91
91
  };
92
92
  }
93
93
 
94
- // ── fade ──
94
+ // fade
95
95
 
96
96
  var FADE_CSS = "\n[data-ds-popover-fade] {\n opacity: 0;\n transition:\n opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[data-ds-popover-fade]:popover-open {\n opacity: 1;\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-popover-fade]:popover-open {\n opacity: 0;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-ds-popover-fade],\n [data-ds-popover-fade]:popover-open {\n transition-duration: 0s;\n }\n}\n";
97
97
 
@@ -117,7 +117,7 @@ function fade() {
117
117
  };
118
118
  }
119
119
 
120
- // ── scaleAndFade ──
120
+ // scaleAndFade
121
121
 
122
122
  var SCALE_AND_FADE_CSS = "\n[data-ds-popover-scale-and-fade] {\n opacity: 0;\n transform: scale(0.95);\n transition:\n opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[data-ds-popover-scale-and-fade]:popover-open {\n opacity: 1;\n transform: none;\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-popover-scale-and-fade]:popover-open {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-ds-popover-scale-and-fade],\n [data-ds-popover-scale-and-fade]:popover-open {\n transition-duration: 0s;\n }\n}\n";
123
123
 
@@ -147,7 +147,7 @@ function scaleAndFade() {
147
147
  // Dialog presets
148
148
  // ══════════════════════════════════════════════════════════════════════════════
149
149
 
150
- // ── dialogSlideUpAndFade ──
150
+ // dialogSlideUpAndFade
151
151
 
152
152
  var DIALOG_SLIDE_UP_AND_FADE_CSS = "\n[data-ds-dialog-slide-up-and-fade] {\n opacity: 0;\n transform: translateY(calc(-1 * var(--ds-dialog-ty, 12px)));\n transition:\n opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n transform 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open] {\n opacity: 1;\n transform: none;\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-dialog-slide-up-and-fade][open] {\n opacity: 0;\n transform: translateY(var(--ds-dialog-ty, 12px));\n }\n}\n\n[data-ds-dialog-slide-up-and-fade]::backdrop {\n background-color: transparent;\n transition:\n background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[data-ds-dialog-slide-up-and-fade][open]::backdrop {\n background-color: var(--ds-blanket, #050C1F75);\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n background-color: transparent;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-ds-dialog-slide-up-and-fade],\n [data-ds-dialog-slide-up-and-fade][open],\n [data-ds-dialog-slide-up-and-fade]::backdrop,\n [data-ds-dialog-slide-up-and-fade][open]::backdrop {\n transition-duration: 0s;\n }\n}\n";
153
153
 
@@ -183,7 +183,7 @@ function dialogSlideUpAndFade(options) {
183
183
  };
184
184
  }
185
185
 
186
- // ── dialogFade ──
186
+ // dialogFade
187
187
 
188
188
  var DIALOG_FADE_CSS = "\n[data-ds-dialog-fade] {\n opacity: 0;\n transition:\n opacity 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[data-ds-dialog-fade][open] {\n opacity: 1;\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-dialog-fade][open] {\n opacity: 0;\n }\n}\n\n[data-ds-dialog-fade]::backdrop {\n background-color: transparent;\n transition:\n background-color 175ms cubic-bezier(0.15, 1, 0.3, 1),\n overlay 175ms allow-discrete,\n display 175ms allow-discrete;\n}\n\n[data-ds-dialog-fade][open]::backdrop {\n background-color: var(--ds-blanket, #050C1F75);\n transition-duration: 350ms;\n}\n\n@starting-style {\n [data-ds-dialog-fade][open]::backdrop {\n background-color: transparent;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-ds-dialog-fade],\n [data-ds-dialog-fade][open],\n [data-ds-dialog-fade]::backdrop,\n [data-ds-dialog-fade][open]::backdrop {\n transition-duration: 0s;\n }\n}\n";
189
189
 
@@ -8,7 +8,7 @@ exports.createCloseEvent = createCloseEvent;
8
8
  * Creates a synthetic DOM event from a `TDialogCloseReason`.
9
9
  *
10
10
  * Useful when bridging the Dialog primitive's `onClose({ reason })` callback
11
- * to a legacy API that expects a `KeyboardEvent` or `MouseEvent` — for example,
11
+ * to a legacy API that expects a `KeyboardEvent` or `MouseEvent` - for example,
12
12
  * `@atlaskit/modal-dialog`'s `onClose(event, analyticsEvent)` contract.
13
13
  *
14
14
  * - `'escape'` → `KeyboardEvent('keydown', { key: 'Escape' })`
@@ -58,7 +58,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
58
58
  var ownRef = (0, _react.useRef)(null);
59
59
  var combinedRef = (0, _mergeRefs.default)([ownRef, ref]);
60
60
 
61
- // ── Animation lifecycle ──
61
+ // Animation lifecycle
62
62
  var _useAnimatedVisibilit = (0, _useAnimatedVisibility.useAnimatedVisibility)({
63
63
  isOpen: isOpen,
64
64
  animate: animate,
@@ -68,7 +68,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
68
68
  showChildren = _useAnimatedVisibilit.showChildren,
69
69
  preset = _useAnimatedVisibilit.preset;
70
70
 
71
- // ── Focus wrap ──
71
+ // Focus wrap
72
72
  // Native <dialog>.showModal() traps focus but wraps through <body> at
73
73
  // the boundary (A → B → C → body → A). This hook intercepts Tab to
74
74
  // wrap directly (A → B → C → A), matching the WAI-ARIA APG pattern.
@@ -77,7 +77,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
77
77
  role: 'dialog'
78
78
  });
79
79
 
80
- // ── Open layer observer registration ──
80
+ // Open layer observer registration
81
81
  // Notifies the open layer observer so app-coordination features
82
82
  // (open-count subscriptions) work with top-layer dialogs.
83
83
  (0, _openLayerObserver.useNotifyOpenLayerObserver)({
@@ -108,7 +108,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
108
108
  }
109
109
  }, [isOpen]);
110
110
 
111
- // ── Handle native Escape (cancel event) ──
111
+ // Handle native Escape (cancel event)
112
112
  var handleCancel = (0, _react.useCallback)(function (event) {
113
113
  event.preventDefault();
114
114
  onClose({
@@ -116,7 +116,7 @@ var Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(function Dialo
116
116
  });
117
117
  }, [onClose]);
118
118
 
119
- // ── Handle backdrop click ──
119
+ // Handle backdrop click
120
120
  // Attached via bind-event-listener rather than a React prop so we avoid
121
121
  // a11y lint suppressions on the <dialog> element.
122
122
  // Keyboard dismiss is already handled natively (Escape → onCancel above).
@@ -6,19 +6,21 @@ Object.defineProperty(exports, "__esModule", {
6
6
  Object.defineProperty(exports, "getFirstFocusable", {
7
7
  enumerable: true,
8
8
  get: function get() {
9
- return _focus.getFirstFocusable;
9
+ return _getFirstFocusable.getFirstFocusable;
10
10
  }
11
11
  });
12
12
  Object.defineProperty(exports, "getLastFocusable", {
13
13
  enumerable: true,
14
14
  get: function get() {
15
- return _focus.getLastFocusable;
15
+ return _getLastFocusable.getLastFocusable;
16
16
  }
17
17
  });
18
18
  Object.defineProperty(exports, "getNextFocusable", {
19
19
  enumerable: true,
20
20
  get: function get() {
21
- return _focus.getNextFocusable;
21
+ return _getNextFocusable.getNextFocusable;
22
22
  }
23
23
  });
24
- var _focus = require("../focus");
24
+ var _getFirstFocusable = require("../focus/get-first-focusable");
25
+ var _getLastFocusable = require("../focus/get-last-focusable");
26
+ var _getNextFocusable = require("../focus/get-next-focusable");
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "useAnchorPositionAtPoint", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _useAnchorPositionAtPoint.useAnchorPositionAtPoint;
10
+ }
11
+ });
12
+ var _useAnchorPositionAtPoint = require("../internal/use-anchor-position-at-point");
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getFirstFocusable = getFirstFocusable;
7
+ var _getFocusables = require("./get-focusables");
8
+ /**
9
+ * Returns the first focusable element within the container.
10
+ */
11
+ function getFirstFocusable(_ref) {
12
+ var container = _ref.container,
13
+ filter = _ref.filter;
14
+ var items = (0, _getFocusables.getFocusables)({
15
+ container: container,
16
+ filter: filter
17
+ });
18
+ return items.length > 0 ? items[0] : null;
19
+ }
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getFocusables = getFocusables;
7
+ var _isInSameLayer = require("./is-in-same-layer");
8
+ var _selectors = require("./selectors");
9
+ /**
10
+ * Returns all focusable HTMLElements within the container, optionally filtered.
11
+ *
12
+ * Focusables that belong to a nested top-layer scope (a `[popover]` or
13
+ * `<dialog>` descendant of the container) are excluded - those elements
14
+ * are owned by the inner layer's focus management. The container itself
15
+ * is allowed to be a popover/dialog; only nested ones are filtered.
16
+ */
17
+ function getFocusables(_ref) {
18
+ var container = _ref.container,
19
+ filter = _ref.filter;
20
+ return Array.from(container.querySelectorAll(_selectors.selectors.focusable)).filter(function (element) {
21
+ return element instanceof HTMLElement;
22
+ }).filter(function (element) {
23
+ return (0, _isInSameLayer.isInSameLayer)({
24
+ element: element,
25
+ container: container
26
+ });
27
+ }).filter(function (element) {
28
+ return !filter || filter(element, container);
29
+ });
30
+ }
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getLastFocusable = getLastFocusable;
7
+ var _getFocusables = require("./get-focusables");
8
+ /**
9
+ * Returns the last focusable element within the container.
10
+ */
11
+ function getLastFocusable(_ref) {
12
+ var container = _ref.container,
13
+ filter = _ref.filter;
14
+ var items = (0, _getFocusables.getFocusables)({
15
+ container: container,
16
+ filter: filter
17
+ });
18
+ return items.length > 0 ? items[items.length - 1] : null;
19
+ }
@@ -0,0 +1,43 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getNextFocusable = getNextFocusable;
7
+ var _getFocusables = require("./get-focusables");
8
+ var _selectors = require("./selectors");
9
+ /**
10
+ * Returns the next focusable element in the given direction relative to the
11
+ * currently focused element within the container. Wraps around at both ends.
12
+ *
13
+ * Returns `null` if there is no focused element within the container or if
14
+ * the focused element is not in the list of focusable elements.
15
+ */
16
+
17
+ function getNextFocusable(_ref) {
18
+ var _all$nextIndex;
19
+ var container = _ref.container,
20
+ direction = _ref.direction,
21
+ filter = _ref.filter;
22
+ var all = (0, _getFocusables.getFocusables)({
23
+ container: container,
24
+ filter: filter
25
+ });
26
+ var current = container.querySelector(_selectors.selectors.focused);
27
+ if (!(current instanceof HTMLElement)) {
28
+ return null;
29
+ }
30
+ var index = all.indexOf(current);
31
+ if (index === -1) {
32
+ return null;
33
+ }
34
+ var nextIndex = function () {
35
+ if (direction === 'forwards') {
36
+ return (index + 1) % all.length;
37
+ }
38
+ var proposed = index - 1;
39
+ // if going into negative numbers, loop back to the last item
40
+ return proposed < 0 ? all.length - 1 : proposed;
41
+ }();
42
+ return (_all$nextIndex = all[nextIndex]) !== null && _all$nextIndex !== void 0 ? _all$nextIndex : null;
43
+ }
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.isInSameLayer = isInSameLayer;
7
+ var topLayerSelector = '[popover], dialog, [role="dialog"], [role="alertdialog"]';
8
+
9
+ /**
10
+ * Returns true when `element` and `container` resolve to the same nearest
11
+ * top-layer host (or both resolve to `null`, meaning the document layer).
12
+ */
13
+ function isInSameLayer(_ref) {
14
+ var element = _ref.element,
15
+ container = _ref.container;
16
+ var elementLayer = element.closest(topLayerSelector);
17
+ var containerLayer = container.closest(topLayerSelector);
18
+ // Both elements are in the "document" layer
19
+ if (!elementLayer && !containerLayer) {
20
+ return true;
21
+ }
22
+ return elementLayer === containerLayer;
23
+ }
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.isNestedLayerFocused = isNestedLayerFocused;
7
+ var _browserApis = require("@atlaskit/browser-apis");
8
+ var _isInSameLayer = require("./is-in-same-layer");
9
+ /**
10
+ * Returns `true` when `document.activeElement` is inside a nested top-layer
11
+ * descendant of `container` (a `[popover]`, `<dialog>`, `[role="dialog"]` or
12
+ * `[role="alertdialog"]` that is itself a descendant of `container`).
13
+ */
14
+ function isNestedLayerFocused(_ref) {
15
+ var _getDocument;
16
+ var container = _ref.container;
17
+ var focused = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement;
18
+ if (!(focused instanceof HTMLElement)) {
19
+ return false;
20
+ }
21
+
22
+ // Cannot be in a nested layer if it is not in the container
23
+ if (!container.contains(focused)) {
24
+ return false;
25
+ }
26
+
27
+ // If not in the same layer, must be in a nested layer
28
+ return !(0, _isInSameLayer.isInSameLayer)({
29
+ element: focused,
30
+ container: container
31
+ });
32
+ }
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.selectors = void 0;
7
+ var selectors = exports.selectors = function () {
8
+ // Common exclusion filter applied to every selector.
9
+ var not = ':not([tabindex="-1"]):not([aria-disabled="true"]):not([aria-hidden="true"])';
10
+ var notDisabled = ":not([disabled])".concat(not);
11
+ var focusable = ["a[href]".concat(not), "area[href]".concat(not), "input".concat(notDisabled, ":not([type=\"hidden\"])"), "select".concat(notDisabled), "textarea".concat(notDisabled), "button".concat(notDisabled), "iframe".concat(not), "audio[controls]".concat(not), "video[controls]".concat(not), "[contenteditable]:not([contenteditable=\"false\"])".concat(not), "[tabindex]".concat(notDisabled).concat(not)];
12
+ return {
13
+ focusable: focusable.join(','),
14
+ // Build the `:focus` selector
15
+ focused: focusable.map(function (selector) {
16
+ return "".concat(selector, ":focus");
17
+ }).join(',')
18
+ };
19
+ }();
@@ -0,0 +1 @@
1
+ "use strict";
@@ -10,7 +10,7 @@ exports.ensurePresetStyles = ensurePresetStyles;
10
10
  * Each preset's CSS is injected at most once into `<head>`.
11
11
  * Shared by both PopoverContent and DialogContent.
12
12
  *
13
- * Note: injected `<style>` elements and the tracking Set are append-only —
13
+ * Note: injected `<style>` elements and the tracking Set are append-only -
14
14
  * they are never removed. This is intentional: the number of distinct
15
15
  * presets is bounded (handful of animation presets), so the
16
16
  * memory footprint is negligible. Removing styles would risk breaking
@@ -13,7 +13,7 @@ var _once = _interopRequireDefault(require("@atlaskit/ds-lib/once"));
13
13
  *
14
14
  * The result is cached after the first call via `once`. This avoids
15
15
  * calling `matchMedia` on every render. The trade-off is that if a user
16
- * toggles the OS reduced-motion setting mid-session, the change won't
16
+ * toggles the OS reduced-motion setting mid-session, the change will not
17
17
  * take effect until the next page load. This is acceptable because
18
18
  * toggling this system-level preference mid-session is extremely rare,
19
19
  * and a page refresh is a reasonable expectation for system accessibility
@@ -30,8 +30,8 @@ var DEFAULT_GAP = "var(--ds-space-100, 8px)";
30
30
  * CSS length string (e.g. `token('space.100')`).
31
31
  *
32
32
  * The two offset axes are named for clarity at the call site:
33
- * - `gap` — distance away from the trigger along the placement axis
34
- * - `crossAxisShift` — nudge along the trigger edge (perpendicular to the placement axis)
33
+ * - `gap` - distance away from the trigger along the placement axis
34
+ * - `crossAxisShift` - nudge along the trigger edge (perpendicular to the placement axis)
35
35
  */
36
36
 
37
37
  /**
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.roleToAriaHasPopup = roleToAriaHasPopup;
7
+ /**
8
+ * Maps a popover content role to the correct `aria-haspopup` value
9
+ * for its trigger element.
10
+ *
11
+ * Returns `undefined` for roles that are not popups in the ARIA sense
12
+ * (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
13
+ * should not announce a popup at all - emitting `aria-haspopup="dialog"`
14
+ * on a tooltip trigger would mislead assistive technology.
15
+ */
16
+ function roleToAriaHasPopup(_ref) {
17
+ var role = _ref.role;
18
+ if (role === 'menu') {
19
+ return 'menu';
20
+ }
21
+ if (role === 'listbox') {
22
+ return 'listbox';
23
+ }
24
+ if (role === 'tree') {
25
+ return 'tree';
26
+ }
27
+ if (role === 'grid') {
28
+ return 'grid';
29
+ }
30
+ if (role === 'dialog' || role === 'alertdialog') {
31
+ return 'dialog';
32
+ }
33
+ // Non-popup roles (tooltip, note, status, alert, log) and the
34
+ // no-role case: omit `aria-haspopup` entirely. React drops the
35
+ // attribute when the value is `undefined`.
36
+ return undefined;
37
+ }
@@ -1,97 +1 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.roleToAriaHasPopup = roleToAriaHasPopup;
7
- exports.shouldFocusIntoPopover = shouldFocusIntoPopover;
8
- /**
9
- * Valid values for the `aria-haspopup` attribute.
10
- *
11
- * Derived from the HTML spec - maps popover roles to what the trigger
12
- * announces. `undefined` means the attribute is omitted entirely (used for
13
- * non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
14
- * `aria-haspopup` would be misleading).
15
- *
16
- * `true` is intentionally NOT in the union - the runtime only ever produces
17
- * the explicit string forms, so widening the type would invite consumers to
18
- * pass `true` and get an `aria-haspopup="true"` serialisation that the
19
- * runtime no longer emits.
20
- */
21
-
22
- /**
23
- * Roles that require an accessible name (`label` or `labelledBy`) per WCAG 4.1.2.
24
- * Without a name, assistive technology cannot identify these landmarks.
25
- */
26
-
27
- /**
28
- * Roles where the accessible name is derived from content or provided externally
29
- * (e.g. a combobox labels its listbox, tooltip content IS the accessible name).
30
- */
31
-
32
- // ── Shared ARIA role discrimination types ──
33
- //
34
- // These encode the WCAG 4.1.2 constraint: roles like `dialog`, `alertdialog`,
35
- // and `menu` MUST have an accessible name (either `label` or `labelledBy`).
36
- // TypeScript enforces this at compile time via discriminated unions.
37
-
38
- /**
39
- * ARIA role props where a role is always required.
40
- *
41
- * Used by `TPopupContentProps`. Popup content must always declare
42
- * its role so assistive technology can identify the layer.
43
- */
44
-
45
- /**
46
- * ARIA role props where a role is optional.
47
- *
48
- * Used by `TPopoverProps`. The low-level primitive allows omitting
49
- * the role for cases where it is set externally or not needed.
50
- */
51
-
52
- /**
53
- * Maps a popover content role to the correct `aria-haspopup` value
54
- * for its trigger element.
55
- *
56
- * Returns `undefined` for roles that are not popups in the ARIA sense
57
- * (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
58
- * should not announce a popup at all - emitting `aria-haspopup="dialog"`
59
- * on a tooltip trigger would mislead assistive technology.
60
- */
61
- // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
62
- function roleToAriaHasPopup(_ref) {
63
- var role = _ref.role;
64
- if (role === 'menu') {
65
- return 'menu';
66
- }
67
- if (role === 'listbox') {
68
- return 'listbox';
69
- }
70
- if (role === 'tree') {
71
- return 'tree';
72
- }
73
- if (role === 'grid') {
74
- return 'grid';
75
- }
76
- if (role === 'dialog' || role === 'alertdialog') {
77
- return 'dialog';
78
- }
79
- // Non-popup roles (tooltip, note, status, alert, log) and the
80
- // no-role case: omit `aria-haspopup` entirely. React drops the
81
- // attribute when the value is `undefined`.
82
- return undefined;
83
- }
84
- var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
85
-
86
- /**
87
- * Returns `true` when the given popover role moves focus into the popover
88
- * on open, and `false` otherwise (including when `role` is `undefined`).
89
- */
90
- // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
91
- function shouldFocusIntoPopover(_ref2) {
92
- var role = _ref2.role;
93
- if (!role) {
94
- return false;
95
- }
96
- return rolesThatMoveFocus.has(role);
97
- }
1
+ "use strict";
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.shouldFocusIntoPopover = shouldFocusIntoPopover;
7
+ var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
8
+
9
+ /**
10
+ * Returns `true` when the given popover role moves focus into the popover
11
+ * on open, and `false` otherwise (including when `role` is `undefined`).
12
+ */
13
+ function shouldFocusIntoPopover(_ref) {
14
+ var role = _ref.role;
15
+ if (!role) {
16
+ return false;
17
+ }
18
+ return rolesThatMoveFocus.has(role);
19
+ }
@@ -32,14 +32,14 @@ function isSlotChild(child) {
32
32
  * Merges props (including ref) onto a single React element child.
33
33
  *
34
34
  * A safer alternative to raw `cloneElement` that:
35
- * 1. Guards with `isValidElement` — non-element children (strings,
35
+ * 1. Guards with `isValidElement` - non-element children (strings,
36
36
  * fragments, null) are returned as-is instead of crashing.
37
37
  * 2. Merges refs via `mergeRefs` so both the caller's ref and the
38
38
  * child's existing ref are honoured.
39
39
  * 3. Spreads any additional props (ARIA attributes, event handlers, etc.)
40
40
  * onto the child element.
41
41
  *
42
- * Event handlers (e.g. `onClick`) are **not** auto-merged — the caller's
42
+ * Event handlers (e.g. `onClick`) are **not** auto-merged - the caller's
43
43
  * handler replaces the child's. Compose handlers before passing them in.
44
44
  *
45
45
  * @example
@@ -52,7 +52,7 @@ function isSlotChild(child) {
52
52
  var Slot = exports.Slot = /*#__PURE__*/(0, _react.forwardRef)(function Slot(slotProps, ref) {
53
53
  var rawChildren = slotProps.children,
54
54
  props = (0, _objectWithoutProperties2.default)(slotProps, _excluded);
55
- // `SlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
55
+ // `TSlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
56
56
  var children = rawChildren;
57
57
  if (!isSlotChild(children)) {
58
58
  return children;