@atlaskit/top-layer 0.12.1 → 0.12.2

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 (90) hide show
  1. package/CHANGELOG.md +7 -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/internal/ensure-preset-styles.js +1 -1
  6. package/dist/cjs/internal/reduced-motion.js +1 -1
  7. package/dist/cjs/internal/resolve-placement.js +2 -2
  8. package/dist/cjs/internal/role-types.js +1 -1
  9. package/dist/cjs/internal/slot.js +3 -3
  10. package/dist/cjs/internal/use-anchor-position.js +15 -30
  11. package/dist/cjs/internal/use-animated-visibility.js +10 -10
  12. package/dist/cjs/internal/use-animation-preset.js +1 -1
  13. package/dist/cjs/internal/use-preset-styles.js +1 -1
  14. package/dist/cjs/internal/use-width-from-anchor.js +4 -4
  15. package/dist/cjs/popover/create-close-event.js +1 -1
  16. package/dist/cjs/popover/popover.js +3 -3
  17. package/dist/cjs/popup/popup-content.js +4 -4
  18. package/dist/cjs/testing/polyfill.js +8 -8
  19. package/dist/cjs/testing/to-be-visible.js +5 -5
  20. package/dist/cjs/use-arrow-navigation/is-at-current-menu-level.js +19 -12
  21. package/dist/cjs/use-simple-light-dismiss/index.js +3 -3
  22. package/dist/es2019/animations/presets.js +5 -5
  23. package/dist/es2019/dialog/create-close-event.js +1 -1
  24. package/dist/es2019/dialog/dialog-content.js +5 -5
  25. package/dist/es2019/internal/ensure-preset-styles.js +1 -1
  26. package/dist/es2019/internal/reduced-motion.js +1 -1
  27. package/dist/es2019/internal/resolve-placement.js +2 -2
  28. package/dist/es2019/internal/role-types.js +1 -1
  29. package/dist/es2019/internal/slot.js +3 -3
  30. package/dist/es2019/internal/use-anchor-position.js +13 -16
  31. package/dist/es2019/internal/use-animated-visibility.js +10 -10
  32. package/dist/es2019/internal/use-animation-preset.js +1 -1
  33. package/dist/es2019/internal/use-preset-styles.js +1 -1
  34. package/dist/es2019/internal/use-width-from-anchor.js +4 -4
  35. package/dist/es2019/popover/create-close-event.js +1 -1
  36. package/dist/es2019/popover/popover.js +3 -3
  37. package/dist/es2019/popup/popup-content.js +4 -4
  38. package/dist/es2019/testing/polyfill.js +8 -8
  39. package/dist/es2019/testing/to-be-visible.js +5 -5
  40. package/dist/es2019/use-arrow-navigation/is-at-current-menu-level.js +19 -12
  41. package/dist/es2019/use-simple-light-dismiss/index.js +3 -3
  42. package/dist/esm/animations/presets.js +5 -5
  43. package/dist/esm/dialog/create-close-event.js +1 -1
  44. package/dist/esm/dialog/dialog-content.js +5 -5
  45. package/dist/esm/internal/ensure-preset-styles.js +1 -1
  46. package/dist/esm/internal/reduced-motion.js +1 -1
  47. package/dist/esm/internal/resolve-placement.js +2 -2
  48. package/dist/esm/internal/role-types.js +1 -1
  49. package/dist/esm/internal/slot.js +3 -3
  50. package/dist/esm/internal/use-anchor-position.js +15 -30
  51. package/dist/esm/internal/use-animated-visibility.js +10 -10
  52. package/dist/esm/internal/use-animation-preset.js +1 -1
  53. package/dist/esm/internal/use-preset-styles.js +1 -1
  54. package/dist/esm/internal/use-width-from-anchor.js +4 -4
  55. package/dist/esm/popover/create-close-event.js +1 -1
  56. package/dist/esm/popover/popover.js +3 -3
  57. package/dist/esm/popup/popup-content.js +4 -4
  58. package/dist/esm/testing/polyfill.js +8 -8
  59. package/dist/esm/testing/to-be-visible.js +5 -5
  60. package/dist/esm/use-arrow-navigation/is-at-current-menu-level.js +19 -12
  61. package/dist/esm/use-simple-light-dismiss/index.js +3 -3
  62. package/dist/types/dialog/create-close-event.d.ts +1 -1
  63. package/dist/types/dialog/types.d.ts +8 -0
  64. package/dist/types/internal/reduced-motion.d.ts +1 -1
  65. package/dist/types/internal/resolve-placement.d.ts +2 -2
  66. package/dist/types/internal/slot.d.ts +4 -4
  67. package/dist/types/internal/use-animated-visibility.d.ts +3 -3
  68. package/dist/types/internal/use-animation-preset.d.ts +1 -1
  69. package/dist/types/internal/use-preset-styles.d.ts +1 -1
  70. package/dist/types/internal/use-width-from-anchor.d.ts +2 -2
  71. package/dist/types/popover/create-close-event.d.ts +1 -1
  72. package/dist/types/popover/popover.d.ts +1 -1
  73. package/dist/types/popup/popup-context.d.ts +1 -1
  74. package/dist/types/testing/to-be-visible.d.ts +3 -3
  75. package/dist/types/use-simple-light-dismiss/index.d.ts +1 -1
  76. package/dist/types-ts4.5/dialog/create-close-event.d.ts +1 -1
  77. package/dist/types-ts4.5/dialog/types.d.ts +8 -0
  78. package/dist/types-ts4.5/internal/reduced-motion.d.ts +1 -1
  79. package/dist/types-ts4.5/internal/resolve-placement.d.ts +2 -2
  80. package/dist/types-ts4.5/internal/slot.d.ts +4 -4
  81. package/dist/types-ts4.5/internal/use-animated-visibility.d.ts +3 -3
  82. package/dist/types-ts4.5/internal/use-animation-preset.d.ts +1 -1
  83. package/dist/types-ts4.5/internal/use-preset-styles.d.ts +1 -1
  84. package/dist/types-ts4.5/internal/use-width-from-anchor.d.ts +2 -2
  85. package/dist/types-ts4.5/popover/create-close-event.d.ts +1 -1
  86. package/dist/types-ts4.5/popover/popover.d.ts +1 -1
  87. package/dist/types-ts4.5/popup/popup-context.d.ts +1 -1
  88. package/dist/types-ts4.5/testing/to-be-visible.d.ts +3 -3
  89. package/dist/types-ts4.5/use-simple-light-dismiss/index.d.ts +1 -1
  90. package/package.json +1 -1
@@ -2,7 +2,7 @@
2
2
  * Creates a synthetic DOM event from a `TDialogCloseReason`.
3
3
  *
4
4
  * Useful when bridging the Dialog primitive's `onClose({ reason })` callback
5
- * to a legacy API that expects a `KeyboardEvent` or `MouseEvent` — for example,
5
+ * to a legacy API that expects a `KeyboardEvent` or `MouseEvent` - for example,
6
6
  * `@atlaskit/modal-dialog`'s `onClose(event, analyticsEvent)` contract.
7
7
  *
8
8
  * - `'escape'` → `KeyboardEvent('keydown', { key: 'Escape' })`
@@ -49,7 +49,7 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
49
49
  var ownRef = useRef(null);
50
50
  var combinedRef = mergeRefs([ownRef, ref]);
51
51
 
52
- // ── Animation lifecycle ──
52
+ // Animation lifecycle
53
53
  var _useAnimatedVisibilit = useAnimatedVisibility({
54
54
  isOpen: isOpen,
55
55
  animate: animate,
@@ -59,7 +59,7 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
59
59
  showChildren = _useAnimatedVisibilit.showChildren,
60
60
  preset = _useAnimatedVisibilit.preset;
61
61
 
62
- // ── Focus wrap ──
62
+ // Focus wrap
63
63
  // Native <dialog>.showModal() traps focus but wraps through <body> at
64
64
  // the boundary (A → B → C → body → A). This hook intercepts Tab to
65
65
  // wrap directly (A → B → C → A), matching the WAI-ARIA APG pattern.
@@ -68,7 +68,7 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
68
68
  role: 'dialog'
69
69
  });
70
70
 
71
- // ── Open layer observer registration ──
71
+ // Open layer observer registration
72
72
  // Notifies the open layer observer so app-coordination features
73
73
  // (open-count subscriptions) work with top-layer dialogs.
74
74
  useNotifyOpenLayerObserver({
@@ -99,7 +99,7 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
99
99
  }
100
100
  }, [isOpen]);
101
101
 
102
- // ── Handle native Escape (cancel event) ──
102
+ // Handle native Escape (cancel event)
103
103
  var handleCancel = useCallback(function (event) {
104
104
  event.preventDefault();
105
105
  onClose({
@@ -107,7 +107,7 @@ export var Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref, ref) {
107
107
  });
108
108
  }, [onClose]);
109
109
 
110
- // ── Handle backdrop click ──
110
+ // Handle backdrop click
111
111
  // Attached via bind-event-listener rather than a React prop so we avoid
112
112
  // a11y lint suppressions on the <dialog> element.
113
113
  // Keyboard dismiss is already handled natively (Escape → onCancel above).
@@ -4,7 +4,7 @@
4
4
  * Each preset's CSS is injected at most once into `<head>`.
5
5
  * Shared by both PopoverContent and DialogContent.
6
6
  *
7
- * Note: injected `<style>` elements and the tracking Set are append-only —
7
+ * Note: injected `<style>` elements and the tracking Set are append-only -
8
8
  * they are never removed. This is intentional: the number of distinct
9
9
  * presets is bounded (handful of animation presets), so the
10
10
  * memory footprint is negligible. Removing styles would risk breaking
@@ -7,7 +7,7 @@ import once from '@atlaskit/ds-lib/once';
7
7
  *
8
8
  * The result is cached after the first call via `once`. This avoids
9
9
  * calling `matchMedia` on every render. The trade-off is that if a user
10
- * toggles the OS reduced-motion setting mid-session, the change won't
10
+ * toggles the OS reduced-motion setting mid-session, the change will not
11
11
  * take effect until the next page load. This is acceptable because
12
12
  * toggling this system-level preference mid-session is extremely rare,
13
13
  * and a page refresh is a reasonable expectation for system accessibility
@@ -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
  /**
@@ -22,7 +22,7 @@
22
22
  * (e.g. a combobox labels its listbox, tooltip content IS the accessible name).
23
23
  */
24
24
 
25
- // ── Shared ARIA role discrimination types ──
25
+ // Shared ARIA role discrimination types
26
26
  //
27
27
  // These encode the WCAG 4.1.2 constraint: roles like `dialog`, `alertdialog`,
28
28
  // and `menu` MUST have an accessible name (either `label` or `labelledBy`).
@@ -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;
@@ -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
@@ -338,7 +326,7 @@ export function useAnchorPosition(_ref3) {
338
326
  return _undoPositioning;
339
327
  }
340
328
 
341
- // ── JS fallback ──
329
+ // JS fallback
342
330
  // The popover is already in the browser's top layer via popover="auto",
343
331
  // so it does not need position:fixed. We only reset the UA defaults
344
332
  // (inset: 0; margin: auto) and set top/left based on measurements.
@@ -407,20 +395,17 @@ export function useAnchorPosition(_ref3) {
407
395
  // Self-disconnects after one valid measurement; ongoing
408
396
  // scroll/resize is handled by the window listeners below.
409
397
  // `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 () {
398
+ // (e.g. post-office's `node` environment). Fall back to the
399
+ // module-scope `noopResizeObserver` stub there. The scroll/resize
400
+ // listeners below still keep the popover positioned in the rare
401
+ // case the consumer also polyfilled `showPopover` but not
402
+ // `ResizeObserver`. Real browsers always have it.
403
+ var resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
419
404
  if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
420
405
  update();
421
406
  resizeObserver.disconnect();
422
407
  }
423
- });
408
+ }) : noopResizeObserver;
424
409
 
425
410
  // If the popover is already open by the time this effect runs (for
426
411
  // example, the parent `useAnchorPosition` effect runs after the child
@@ -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;
@@ -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 @@
2
2
  * Creates a synthetic DOM event from a `TPopoverCloseReason`.
3
3
  *
4
4
  * Useful when bridging the Popover primitive's `onClose({ reason })` callback
5
- * to a legacy API that expects a native DOM event — for example,
5
+ * to a legacy API that expects a native DOM event - for example,
6
6
  * `@atlaskit/inline-dialog`'s `onClose(event)` contract.
7
7
  *
8
8
  * - `'escape'` → `KeyboardEvent('keydown', { key: 'Escape' })`
@@ -47,7 +47,7 @@ var POPUP_ROLES = new Set(['menu', 'listbox', 'dialog', 'alertdialog', 'tree', '
47
47
  * Unopinionated top-layer primitive.
48
48
  *
49
49
  * Manages only visibility (isOpen) and animation (animate). Has no knowledge
50
- * of positioning — compose with `useAnchorPosition` for anchor positioning
50
+ * of positioning - compose with `useAnchorPosition` for anchor positioning
51
51
  * and optionally `useWidthFromAnchor` for setting the width of a popover element
52
52
  * relative to its anchor trigger.
53
53
  *
@@ -96,7 +96,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
96
96
  showChildren = _useAnimatedVisibilit.showChildren,
97
97
  preset = _useAnimatedVisibilit.preset;
98
98
 
99
- // ── Focus management ──
99
+ // Focus management
100
100
  // Initial focus: on open, moves focus into the popover (role-dependent).
101
101
  // Focus wrap: Tab/Shift+Tab cycle within the popover for dialog roles.
102
102
  // Focus restoration: handled natively by the Popover API. The browser
@@ -112,7 +112,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref, ref) {
112
112
  role: role
113
113
  });
114
114
 
115
- // ── Open layer observer registration ──
115
+ // Open layer observer registration
116
116
  // Notifies the open layer observer so app-coordination features
117
117
  // (closeLayers(), open-count subscriptions) work with top-layer popovers.
118
118
  //
@@ -89,7 +89,7 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
89
89
  // Note: onOpenChange composition is handled by handleOpenChange below,
90
90
  // which also adds nested-popover focus restoration.
91
91
 
92
- // ── Sync aria-haspopup on the trigger with the content's role ──
92
+ // Sync aria-haspopup on the trigger with the content's role
93
93
  var setAriaHasPopup = ctx === null || ctx === void 0 ? void 0 : ctx.setAriaHasPopup;
94
94
  useLayoutEffect(function () {
95
95
  setAriaHasPopup === null || setAriaHasPopup === void 0 || setAriaHasPopup(roleToAriaHasPopup({
@@ -97,7 +97,7 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
97
97
  }));
98
98
  }, [role, setAriaHasPopup]);
99
99
 
100
- // ── Focus restoration ──
100
+ // Focus restoration
101
101
  // The native Popover API handles focus restoration automatically for
102
102
  // popover="auto" and popover="hint":
103
103
  // - Escape → restores focus to the previously focused element (the trigger)
@@ -124,7 +124,7 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
124
124
  }
125
125
  consumerOnOpenChange === null || consumerOnOpenChange === void 0 || consumerOnOpenChange(args);
126
126
 
127
- // ── Nested popover focus restoration fallback ──
127
+ // Nested popover focus restoration fallback
128
128
  // The browser only captures `previouslyFocusedElement` for the
129
129
  // outermost popover="auto" in the stack. Inner (nested) popovers
130
130
  // have shouldRestoreFocus=false, so the browser will not restore
@@ -153,7 +153,7 @@ export var PopupContent = /*#__PURE__*/forwardRef(function PopupContent(_ref, re
153
153
  }
154
154
  }, [consumerOnOpenChange, triggerRef, role, setPopupState, willAnimate]);
155
155
 
156
- // ── Anchor positioning ──
156
+ // Anchor positioning
157
157
  // Compose useAnchorPosition with Popover. The hook positions the popover
158
158
  // relative to the trigger element via CSS Anchor Positioning (with JS fallback).
159
159
  // Use ctx.popoverRef when inside the compound (so the trigger can also
@@ -102,7 +102,7 @@ function createToggleScheduler() {
102
102
  newState: newState
103
103
  });
104
104
 
105
- // Task queue (setTimeout) — browser fires toggle after microtasks drain, not during
105
+ // Task queue (setTimeout) - browser fires toggle after microtasks drain, not during
106
106
  setTimeout(function () {
107
107
  var entry = pending.get(element);
108
108
  if (!entry) {
@@ -172,7 +172,7 @@ function createDialogToggleScheduler() {
172
172
  };
173
173
  }
174
174
 
175
- // ─── Popover API ────────────────────────────────────────────────────────────
175
+ // Popover API
176
176
  // Spec: https://html.spec.whatwg.org/multipage/popover.html
177
177
 
178
178
  // `popover` attribute valid values. Empty / "auto" -> "auto"; unknown -> "manual".
@@ -535,7 +535,7 @@ if (typeof HTMLElement !== 'undefined') {
535
535
  if (isPopoverOpen({
536
536
  element: this
537
537
  })) {
538
- return; // already showing — no-op
538
+ return; // already showing - no-op
539
539
  }
540
540
 
541
541
  // sync, cancelable on show only
@@ -715,7 +715,7 @@ if (typeof HTMLElement !== 'undefined') {
715
715
  }
716
716
  }
717
717
 
718
- // ─── HTMLDialogElement ──────────────────────────────────────────────────────
718
+ // HTMLDialogElement
719
719
  // Spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element
720
720
 
721
721
  if (typeof HTMLDialogElement !== 'undefined') {
@@ -730,7 +730,7 @@ if (typeof HTMLDialogElement !== 'undefined') {
730
730
  }
731
731
  if (this.hasAttribute('open')) {
732
732
  if (this._isModal) {
733
- return; // already modal — no-op
733
+ return; // already modal - no-op
734
734
  }
735
735
  throw new DOMException("Failed to execute 'showModal' on 'HTMLDialogElement': ".concat(describeElement({
736
736
  element: this
@@ -754,7 +754,7 @@ if (typeof HTMLDialogElement !== 'undefined') {
754
754
  }
755
755
  if (typeof proto.show !== 'function') {
756
756
  proto.show = function show() {
757
- // Browser does not throw for disconnected elements on show — just no-op
757
+ // Browser does not throw for disconnected elements on show - just no-op
758
758
  if (!this.isConnected || this.hasAttribute('open')) {
759
759
  return;
760
760
  }
@@ -777,10 +777,10 @@ if (typeof HTMLDialogElement !== 'undefined') {
777
777
  if (typeof proto.close !== 'function') {
778
778
  proto.close = function close(returnValue) {
779
779
  if (!this.hasAttribute('open')) {
780
- return; // already closed — no-op
780
+ return; // already closed - no-op
781
781
  }
782
782
 
783
- // Sync beforetoggle (not cancelable) — matches browser behavior
783
+ // Sync beforetoggle (not cancelable) - matches browser behavior
784
784
  fireToggleEvent({
785
785
  element: this,
786
786
  type: 'beforetoggle',
@@ -5,13 +5,13 @@
5
5
  *
6
6
  * jest-dom's `toBeVisible()` does not know about the Popover API. In real
7
7
  * browsers the UA stylesheet hides `[popover]` with `display: none`, but
8
- * jsdom has no such stylesheet — so closed popovers incorrectly appear visible.
8
+ * jsdom has no such stylesheet - so closed popovers incorrectly appear visible.
9
9
  *
10
10
  * Raw jest-dom results in jsdom:
11
11
  *
12
- * closed popover / child → true (WRONG — should be false)
12
+ * closed popover / child → true (WRONG - should be false)
13
13
  * open popover / child → true (correct)
14
- * closed dialog / child → false (correct — jsdom natively hides <dialog>)
14
+ * closed dialog / child → false (correct - jsdom natively hides <dialog>)
15
15
  * open dialog / child → true (correct)
16
16
  *
17
17
  * We correct both false positives and false negatives:
@@ -62,7 +62,7 @@ expect.extend({
62
62
  var originalResult = originalToBeVisible.call(this, element);
63
63
  var topLayerState = nearestTopLayerState(element);
64
64
  if (originalResult.pass) {
65
- // Original says visible — override if nearest top-layer host is closed.
65
+ // Original says visible - override if nearest top-layer host is closed.
66
66
  if (topLayerState === 'closed') {
67
67
  return {
68
68
  pass: false,
@@ -74,7 +74,7 @@ expect.extend({
74
74
  return originalResult;
75
75
  }
76
76
 
77
- // Original says not visible — override if nearest top-layer host is open.
77
+ // Original says not visible - override if nearest top-layer host is open.
78
78
  // jsdom may hide [popover] elements even when they are logically open.
79
79
  if (topLayerState === 'open') {
80
80
  return {
@@ -1,5 +1,23 @@
1
1
  var menuScope = '[role="menu"]';
2
2
 
3
+ /**
4
+ * Recursively walks from `node` toward `container`, returning `true` when
5
+ * `container` is reached without crossing another `role="menu"` ancestor.
6
+ *
7
+ * Used by `isAtCurrentMenuLevel` (pattern 2) to determine if the
8
+ * `closestMenu` is owned by the wrapper container directly. Recursion
9
+ * avoids a mutable `let parent` walk and keeps the function body linear.
10
+ */
11
+ function reachesContainerWithoutNestedMenu(node, container) {
12
+ if (!node || node === container) {
13
+ return node === container;
14
+ }
15
+ if (node.getAttribute('role') === 'menu') {
16
+ return false;
17
+ }
18
+ return reachesContainerWithoutNestedMenu(node.parentElement, container);
19
+ }
20
+
3
21
  /**
4
22
  * Returns true if the element belongs to the current menu level of the
5
23
  * container, i.e. it is NOT inside a nested `role="menu"` sub-container.
@@ -66,16 +84,5 @@ export function isAtCurrentMenuLevel(element, container) {
66
84
 
67
85
  // Walk up from the closest menu to see if it is "owned" by this
68
86
  // container without passing through another role="menu" first.
69
- var parent = closestMenu.parentElement;
70
- while (parent && parent !== container) {
71
- if (parent.getAttribute('role') === 'menu') {
72
- // There is a parent menu between the closest menu and the
73
- // container, so the element is in a nested sub-menu.
74
- return false;
75
- }
76
- parent = parent.parentElement;
77
- }
78
-
79
- // The closest menu is directly inside the container (no nesting).
80
- return parent === container;
87
+ return reachesContainerWithoutNestedMenu(closestMenu.parentElement, container);
81
88
  }
@@ -9,7 +9,7 @@ import { bind } from 'bind-event-listener';
9
9
  * **No stacking awareness:** This hook does not track a popover stack.
10
10
  * If multiple manual popovers are open and all use this hook, a single
11
11
  * Escape press or outside click will dismiss **all of them simultaneously**.
12
- * This is by design — the hook is intentionally simple for cases where
12
+ * This is by design - the hook is intentionally simple for cases where
13
13
  * only one manual popover is open at a time.
14
14
  *
15
15
  * For stacked/nested popovers that should dismiss one-at-a-time, use
@@ -46,7 +46,7 @@ export function useSimpleLightDismiss(_ref) {
46
46
  // (trigger onClick → setIsOpen(true) → React render → useEffect).
47
47
  // By the time this effect runs, the opening click has finished
48
48
  // bubbling. A capture-phase listener added now cannot retroactively
49
- // fire for that event — it only fires for *future* clicks.
49
+ // fire for that event - it only fires for *future* clicks.
50
50
  //
51
51
  // This avoids the need for timestamp guards or deferred binding.
52
52
  // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- binding to document for light dismiss
@@ -58,7 +58,7 @@ export function useSimpleLightDismiss(_ref) {
58
58
  return;
59
59
  }
60
60
 
61
- // If the click target is inside the popover, don't dismiss.
61
+ // If the click target is inside the popover, do not dismiss.
62
62
  if (event.target instanceof Node && el.contains(event.target)) {
63
63
  return;
64
64
  }
@@ -3,7 +3,7 @@ import type { TDialogCloseReason } from './types';
3
3
  * Creates a synthetic DOM event from a `TDialogCloseReason`.
4
4
  *
5
5
  * Useful when bridging the Dialog primitive's `onClose({ reason })` callback
6
- * to a legacy API that expects a `KeyboardEvent` or `MouseEvent` — for example,
6
+ * to a legacy API that expects a `KeyboardEvent` or `MouseEvent` - for example,
7
7
  * `@atlaskit/modal-dialog`'s `onClose(event, analyticsEvent)` contract.
8
8
  *
9
9
  * - `'escape'` → `KeyboardEvent('keydown', { key: 'Escape' })`
@@ -49,6 +49,14 @@ type TDialogBaseProps = {
49
49
  * Additional inline styles applied to the `<dialog>` element.
50
50
  *
51
51
  * Use for custom width, height, transform, or other overrides.
52
+ *
53
+ * Rule deviation: the house rules ban unbounded `style` props on
54
+ * components. `Dialog` is a low-level primitive that intentionally has
55
+ * no visual opinions of its own; consumers such as `@atlaskit/modal-dialog`
56
+ * must be able to set width, height, and transforms on the native
57
+ * `<dialog>` element. Removing this prop would be a breaking change
58
+ * and is tracked separately. Keep until an xcss-based replacement
59
+ * exists on the primitive.
52
60
  */
53
61
  style?: CSSProperties;
54
62
  /**
@@ -5,7 +5,7 @@
5
5
  *
6
6
  * The result is cached after the first call via `once`. This avoids
7
7
  * calling `matchMedia` on every render. The trade-off is that if a user
8
- * toggles the OS reduced-motion setting mid-session, the change won't
8
+ * toggles the OS reduced-motion setting mid-session, the change will not
9
9
  * take effect until the next page load. This is acceptable because
10
10
  * toggling this system-level preference mid-session is extremely rare,
11
11
  * and a page refresh is a reasonable expectation for system accessibility
@@ -30,8 +30,8 @@ export type TPlacement = {
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
  export type TPlacementOptions = {
37
37
  axis?: 'block' | 'inline';