@atlaskit/top-layer 0.12.0 → 0.12.1

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 (79) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/entry-points/use-arrow-navigation.js +3 -2
  3. package/dist/cjs/internal/placement-to-position-area.js +43 -0
  4. package/dist/cjs/internal/placement-to-try-fallbacks.js +82 -0
  5. package/dist/cjs/internal/use-anchor-position.js +18 -131
  6. package/dist/cjs/popup/popup-content.js +2 -2
  7. package/dist/cjs/popup/popup-context.js +2 -38
  8. package/dist/cjs/popup/popup-provider.js +15 -0
  9. package/dist/cjs/popup/popup-trigger-function.js +2 -2
  10. package/dist/cjs/popup/popup-trigger.js +2 -2
  11. package/dist/cjs/popup/popup.js +2 -2
  12. package/dist/cjs/popup/use-maybe-popup-context.js +17 -0
  13. package/dist/cjs/popup/use-popup-context.js +20 -0
  14. package/dist/cjs/use-arrow-navigation/index.js +3 -2
  15. package/dist/cjs/use-arrow-navigation/is-at-current-menu-level.js +87 -0
  16. package/dist/cjs/use-arrow-navigation/use-arrow-navigation.js +0 -82
  17. package/dist/es2019/entry-points/use-arrow-navigation.js +2 -1
  18. package/dist/es2019/internal/placement-to-position-area.js +40 -0
  19. package/dist/es2019/internal/placement-to-try-fallbacks.js +77 -0
  20. package/dist/es2019/internal/use-anchor-position.js +2 -116
  21. package/dist/es2019/popup/popup-content.js +2 -1
  22. package/dist/es2019/popup/popup-context.js +2 -36
  23. package/dist/es2019/popup/popup-provider.js +10 -0
  24. package/dist/es2019/popup/popup-trigger-function.js +1 -1
  25. package/dist/es2019/popup/popup-trigger.js +2 -1
  26. package/dist/es2019/popup/popup.js +1 -1
  27. package/dist/es2019/popup/use-maybe-popup-context.js +12 -0
  28. package/dist/es2019/popup/use-popup-context.js +15 -0
  29. package/dist/es2019/use-arrow-navigation/index.js +2 -1
  30. package/dist/es2019/use-arrow-navigation/is-at-current-menu-level.js +81 -0
  31. package/dist/es2019/use-arrow-navigation/use-arrow-navigation.js +0 -81
  32. package/dist/esm/entry-points/use-arrow-navigation.js +2 -1
  33. package/dist/esm/internal/placement-to-position-area.js +38 -0
  34. package/dist/esm/internal/placement-to-try-fallbacks.js +76 -0
  35. package/dist/esm/internal/use-anchor-position.js +16 -127
  36. package/dist/esm/popup/popup-content.js +2 -1
  37. package/dist/esm/popup/popup-context.js +2 -36
  38. package/dist/esm/popup/popup-provider.js +10 -0
  39. package/dist/esm/popup/popup-trigger-function.js +1 -1
  40. package/dist/esm/popup/popup-trigger.js +2 -1
  41. package/dist/esm/popup/popup.js +1 -1
  42. package/dist/esm/popup/use-maybe-popup-context.js +12 -0
  43. package/dist/esm/popup/use-popup-context.js +15 -0
  44. package/dist/esm/use-arrow-navigation/index.js +2 -1
  45. package/dist/esm/use-arrow-navigation/is-at-current-menu-level.js +81 -0
  46. package/dist/esm/use-arrow-navigation/use-arrow-navigation.js +0 -81
  47. package/dist/types/entry-points/use-arrow-navigation.d.ts +2 -1
  48. package/dist/types/internal/placement-to-position-area.d.ts +21 -0
  49. package/dist/types/internal/placement-to-try-fallbacks.d.ts +36 -0
  50. package/dist/types/internal/use-anchor-position.d.ts +0 -55
  51. package/dist/types/popup/popup-context.d.ts +1 -21
  52. package/dist/types/popup/popup-provider.d.ts +10 -0
  53. package/dist/types/popup/use-maybe-popup-context.d.ts +8 -0
  54. package/dist/types/popup/use-popup-context.d.ts +7 -0
  55. package/dist/types/use-arrow-navigation/index.d.ts +2 -1
  56. package/dist/types/use-arrow-navigation/is-at-current-menu-level.d.ts +48 -0
  57. package/dist/types/use-arrow-navigation/use-arrow-navigation.d.ts +0 -48
  58. package/dist/types-ts4.5/entry-points/use-arrow-navigation.d.ts +2 -1
  59. package/dist/types-ts4.5/internal/placement-to-position-area.d.ts +21 -0
  60. package/dist/types-ts4.5/internal/placement-to-try-fallbacks.d.ts +36 -0
  61. package/dist/types-ts4.5/internal/use-anchor-position.d.ts +0 -55
  62. package/dist/types-ts4.5/popup/popup-context.d.ts +1 -21
  63. package/dist/types-ts4.5/popup/popup-provider.d.ts +10 -0
  64. package/dist/types-ts4.5/popup/use-maybe-popup-context.d.ts +8 -0
  65. package/dist/types-ts4.5/popup/use-popup-context.d.ts +7 -0
  66. package/dist/types-ts4.5/use-arrow-navigation/index.d.ts +2 -1
  67. package/dist/types-ts4.5/use-arrow-navigation/is-at-current-menu-level.d.ts +48 -0
  68. package/dist/types-ts4.5/use-arrow-navigation/use-arrow-navigation.d.ts +0 -48
  69. package/package.json +2 -2
  70. package/dist/cjs/arrow/index.js +0 -131
  71. package/dist/cjs/arrow/types.js +0 -5
  72. package/dist/es2019/arrow/index.js +0 -269
  73. package/dist/es2019/arrow/types.js +0 -1
  74. package/dist/esm/arrow/index.js +0 -124
  75. package/dist/esm/arrow/types.js +0 -1
  76. package/dist/types/arrow/index.d.ts +0 -24
  77. package/dist/types/arrow/types.d.ts +0 -29
  78. package/dist/types-ts4.5/arrow/index.d.ts +0 -24
  79. package/dist/types-ts4.5/arrow/types.d.ts +0 -29
@@ -0,0 +1,36 @@
1
+ import { type TPlacementOptions } from '../internal/resolve-placement';
2
+ /**
3
+ * Returns `position-try-fallbacks` value based on placement.
4
+ *
5
+ * For centered placements, includes cross-axis aligned position-area
6
+ * values so the browser can shift the popover along the cross-axis
7
+ * when the centered position would overflow the viewport edge.
8
+ *
9
+ * Fallback order for centered placements (e.g. `block-end`):
10
+ * 1. Same edge, start-aligned (shift for near-edge overflow)
11
+ * 2. Same edge, end-aligned (shift for far-edge overflow)
12
+ * 3. Flipped edge, centered
13
+ * 4. Flipped edge, start-aligned
14
+ * 5. Flipped edge, end-aligned
15
+ *
16
+ * For aligned placements (start/end), includes the same-edge centered
17
+ * position as fallbacks so the browser can try centering when the aligned
18
+ * position would overflow, before flipping to the opposite edge.
19
+ *
20
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
21
+ *
22
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
23
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
24
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
25
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
26
+ * mirrors the popup diagonally. It flips BOTH the position-area AND both
27
+ * inline and block margins simultaneously, placing the popup at the
28
+ * diagonally opposite corner where there is always space.
29
+ *
30
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
31
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
32
+ * tactic keywords correctly flip the gap margin along with the position.
33
+ */
34
+ export declare function placementToTryFallbacks({ placement }: {
35
+ placement: TPlacementOptions;
36
+ }): string;
@@ -14,61 +14,6 @@
14
14
  */
15
15
  import { type RefObject } from 'react';
16
16
  import { type TPlacementOptions } from '../internal/resolve-placement';
17
- /**
18
- * Resolves placement options to CSS `position-area` syntax.
19
- *
20
- * The `align` field represents the *visual* alignment:
21
- * - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
22
- * - `align: 'end'` means "aligned to the trigger's end edge"
23
- * - `align: 'center'` means centered (single-axis position-area)
24
- *
25
- * CSS `position-area` uses `span-*` keywords which indicate the *expansion direction*.
26
- * Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
27
- * This function handles the inversion internally.
28
- *
29
- * @example
30
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
31
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
32
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } }) // → 'block-end span-inline-start'
33
- */
34
- export declare function placementToPositionArea({ placement }: {
35
- placement: TPlacementOptions;
36
- }): string;
37
- /**
38
- * Returns `position-try-fallbacks` value based on placement.
39
- *
40
- * For centered placements, includes cross-axis aligned position-area
41
- * values so the browser can shift the popover along the cross-axis
42
- * when the centered position would overflow the viewport edge.
43
- *
44
- * Fallback order for centered placements (e.g. `block-end`):
45
- * 1. Same edge, start-aligned (shift for near-edge overflow)
46
- * 2. Same edge, end-aligned (shift for far-edge overflow)
47
- * 3. Flipped edge, centered
48
- * 4. Flipped edge, start-aligned
49
- * 5. Flipped edge, end-aligned
50
- *
51
- * For aligned placements (start/end), includes the same-edge centered
52
- * position as fallbacks so the browser can try centering when the aligned
53
- * position would overflow, before flipping to the opposite edge.
54
- *
55
- * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
56
- *
57
- * When a popup is in a viewport corner (e.g. inline-end align-end at the
58
- * top-right), flipping only the primary axis (`flip-inline`) moves the popup
59
- * to the left but keeps the same cross-axis span direction (e.g. upward),
60
- * which is still off-screen. The combined keyword `flip-inline flip-block`
61
- * mirrors the popup diagonally. It flips BOTH the position-area AND both
62
- * inline and block margins simultaneously, placing the popup at the
63
- * diagonally opposite corner where there is always space.
64
- *
65
- * Named `position-area` entries (e.g. `inline-start span-block-end`) in
66
- * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
67
- * tactic keywords correctly flip the gap margin along with the position.
68
- */
69
- export declare function placementToTryFallbacks({ placement }: {
70
- placement: TPlacementOptions;
71
- }): string;
72
17
  /**
73
18
  * Hook that positions an element relative to an anchor element using
74
19
  * CSS Anchor Positioning (with a JS fallback for older browsers).
@@ -93,24 +93,4 @@ export type TPopupContextValue = {
93
93
  */
94
94
  forceFallbackPositioning?: boolean;
95
95
  };
96
- /**
97
- * __Popup provider__
98
- *
99
- * Provides shared popup state (placement, popoverId, triggerRef,
100
- * isOpen, onClose) to compound child components such as `Popup.Trigger` and
101
- * `Popup.Content`.
102
- */
103
- export declare const PopupProvider: React.Provider<TPopupContextValue | null>;
104
- /**
105
- * Returns the nearest `Popup` context value.
106
- *
107
- * Throws if called outside of a `<Popup>` compound component.
108
- */
109
- export declare function usePopupContext(): TPopupContextValue;
110
- /**
111
- * Returns the popup context if available, or `null` when used outside `<Popup>`.
112
- *
113
- * Used by `PopupContent` to support standalone usage (e.g. tooltip)
114
- * where values are passed as props instead of coming from a compound component.
115
- */
116
- export declare function useMaybePopupContext(): TPopupContextValue | null;
96
+ export declare const PopupContext: React.Context<TPopupContextValue | null>;
@@ -0,0 +1,10 @@
1
+ import { type Provider } from 'react';
2
+ import { type TPopupContextValue } from './popup-context';
3
+ /**
4
+ * __Popup provider__
5
+ *
6
+ * Provides shared popup state (placement, popoverId, triggerRef,
7
+ * isOpen, onClose) to compound child components such as `Popup.Trigger` and
8
+ * `Popup.Content`.
9
+ */
10
+ export declare const PopupProvider: Provider<TPopupContextValue | null>;
@@ -0,0 +1,8 @@
1
+ import { type TPopupContextValue } from './popup-context';
2
+ /**
3
+ * Returns the popup context if available, or `null` when used outside `<Popup>`.
4
+ *
5
+ * Used by `PopupContent` to support standalone usage (e.g. tooltip)
6
+ * where values are passed as props instead of coming from a compound component.
7
+ */
8
+ export declare function useMaybePopupContext(): TPopupContextValue | null;
@@ -0,0 +1,7 @@
1
+ import { type TPopupContextValue } from './popup-context';
2
+ /**
3
+ * Returns the nearest `Popup` context value.
4
+ *
5
+ * Throws if called outside of a `<Popup>` compound component.
6
+ */
7
+ export declare function usePopupContext(): TPopupContextValue;
@@ -1,2 +1,3 @@
1
- export { useArrowNavigation, isAtCurrentMenuLevel } from './use-arrow-navigation';
1
+ export { useArrowNavigation } from './use-arrow-navigation';
2
2
  export type { TUseArrowNavigationArgs } from './use-arrow-navigation';
3
+ export { isAtCurrentMenuLevel } from './is-at-current-menu-level';
@@ -0,0 +1,48 @@
1
+ /**
2
+ * Returns true if the element belongs to the current menu level of the
3
+ * container, i.e. it is NOT inside a nested `role="menu"` sub-container.
4
+ *
5
+ * Uses `element.closest('[role="menu"]')` to determine the nearest menu
6
+ * scope. If the nearest scope is the container's own `role="menu"` element,
7
+ * the element belongs to this level. If it is a different (nested) menu,
8
+ * the element belongs to a child level and should be excluded.
9
+ *
10
+ * Supports two container patterns:
11
+ *
12
+ * **1. Container has `role="menu"` directly** (preferred, used by avatar-group):
13
+ * ```
14
+ * <div ref={containerRef} role="menu">
15
+ * <button role="menuitem" /> ← isAtCurrentMenuLevel → true
16
+ * <div role="menu"> ← nested sub-menu
17
+ * <button role="menuitem" /> ← isAtCurrentMenuLevel → false
18
+ * </div>
19
+ * </div>
20
+ * ```
21
+ * Uses the simple check: `element.closest('[role="menu"]') === container`
22
+ *
23
+ * **2. Container is a wrapper without `role="menu"`** (used by dropdown-menu,
24
+ * where `MenuGroup` owns `role="menu"` but does not accept a ref):
25
+ * ```
26
+ * <div ref={containerRef}> ← wrapper (no role="menu")
27
+ * <MenuGroup role="menu">
28
+ * <button role="menuitem" /> ← isAtCurrentMenuLevel → true
29
+ * <div role="menu"> ← nested sub-menu
30
+ * <button role="menuitem" /> ← isAtCurrentMenuLevel → false
31
+ * </div>
32
+ * </MenuGroup>
33
+ * </div>
34
+ * ```
35
+ * Falls back to walking the DOM to check that the element's closest
36
+ * `role="menu"` is the container's own menu (not doubly nested).
37
+ *
38
+ * Ideally all consumers should use pattern 1 (place the ref directly on the
39
+ * `role="menu"` element). Pattern 2 exists because `@atlaskit/menu`'s
40
+ * `MenuGroup` does not currently accept a ref. If `MenuGroup` gains ref
41
+ * support in the future, dropdown-menu should switch to pattern 1 and the
42
+ * fallback path can be removed.
43
+ *
44
+ * Used both as a `TFocusableFilter` (to scope getNextFocusable etc.) and as
45
+ * a guard to prevent parent menu handlers from acting on events that
46
+ * belong to a nested menu.
47
+ */
48
+ export declare function isAtCurrentMenuLevel(element: Element, container: HTMLElement): boolean;
@@ -1,53 +1,5 @@
1
1
  import { type RefObject } from 'react';
2
2
  import { type TFocusableFilter } from '../focus';
3
- /**
4
- * Returns true if the element belongs to the current menu level of the
5
- * container, i.e. it is NOT inside a nested `role="menu"` sub-container.
6
- *
7
- * Uses `element.closest('[role="menu"]')` to determine the nearest menu
8
- * scope. If the nearest scope is the container's own `role="menu"` element,
9
- * the element belongs to this level. If it is a different (nested) menu,
10
- * the element belongs to a child level and should be excluded.
11
- *
12
- * Supports two container patterns:
13
- *
14
- * **1. Container has `role="menu"` directly** (preferred, used by avatar-group):
15
- * ```
16
- * <div ref={containerRef} role="menu">
17
- * <button role="menuitem" /> ← isAtCurrentMenuLevel → true
18
- * <div role="menu"> ← nested sub-menu
19
- * <button role="menuitem" /> ← isAtCurrentMenuLevel → false
20
- * </div>
21
- * </div>
22
- * ```
23
- * Uses the simple check: `element.closest('[role="menu"]') === container`
24
- *
25
- * **2. Container is a wrapper without `role="menu"`** (used by dropdown-menu,
26
- * where `MenuGroup` owns `role="menu"` but does not accept a ref):
27
- * ```
28
- * <div ref={containerRef}> ← wrapper (no role="menu")
29
- * <MenuGroup role="menu">
30
- * <button role="menuitem" /> ← isAtCurrentMenuLevel → true
31
- * <div role="menu"> ← nested sub-menu
32
- * <button role="menuitem" /> ← isAtCurrentMenuLevel → false
33
- * </div>
34
- * </MenuGroup>
35
- * </div>
36
- * ```
37
- * Falls back to walking the DOM to check that the element's closest
38
- * `role="menu"` is the container's own menu (not doubly nested).
39
- *
40
- * Ideally all consumers should use pattern 1 (place the ref directly on the
41
- * `role="menu"` element). Pattern 2 exists because `@atlaskit/menu`'s
42
- * `MenuGroup` does not currently accept a ref. If `MenuGroup` gains ref
43
- * support in the future, dropdown-menu should switch to pattern 1 and the
44
- * fallback path can be removed.
45
- *
46
- * Used both as a `TFocusableFilter` (to scope getNextFocusable etc.) and as
47
- * a guard to prevent parent menu handlers from acting on events that
48
- * belong to a nested menu.
49
- */
50
- export declare function isAtCurrentMenuLevel(element: Element, container: HTMLElement): boolean;
51
3
  /**
52
4
  * Args for `useArrowNavigation`.
53
5
  *
@@ -1,2 +1,3 @@
1
- export { useArrowNavigation, isAtCurrentMenuLevel } from '../use-arrow-navigation';
1
+ export { useArrowNavigation } from '../use-arrow-navigation';
2
2
  export type { TUseArrowNavigationArgs } from '../use-arrow-navigation';
3
+ export { isAtCurrentMenuLevel } from '../use-arrow-navigation/is-at-current-menu-level';
@@ -0,0 +1,21 @@
1
+ import { type TPlacementOptions } from '../internal/resolve-placement';
2
+ /**
3
+ * Resolves placement options to CSS `position-area` syntax.
4
+ *
5
+ * The `align` field represents the *visual* alignment:
6
+ * - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
7
+ * - `align: 'end'` means "aligned to the trigger's end edge"
8
+ * - `align: 'center'` means centered (single-axis position-area)
9
+ *
10
+ * CSS `position-area` uses `span-*` keywords which indicate the *expansion direction*.
11
+ * Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
12
+ * This function handles the inversion internally.
13
+ *
14
+ * @example
15
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
16
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
17
+ * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } }) // → 'block-end span-inline-start'
18
+ */
19
+ export declare function placementToPositionArea({ placement }: {
20
+ placement: TPlacementOptions;
21
+ }): string;
@@ -0,0 +1,36 @@
1
+ import { type TPlacementOptions } from '../internal/resolve-placement';
2
+ /**
3
+ * Returns `position-try-fallbacks` value based on placement.
4
+ *
5
+ * For centered placements, includes cross-axis aligned position-area
6
+ * values so the browser can shift the popover along the cross-axis
7
+ * when the centered position would overflow the viewport edge.
8
+ *
9
+ * Fallback order for centered placements (e.g. `block-end`):
10
+ * 1. Same edge, start-aligned (shift for near-edge overflow)
11
+ * 2. Same edge, end-aligned (shift for far-edge overflow)
12
+ * 3. Flipped edge, centered
13
+ * 4. Flipped edge, start-aligned
14
+ * 5. Flipped edge, end-aligned
15
+ *
16
+ * For aligned placements (start/end), includes the same-edge centered
17
+ * position as fallbacks so the browser can try centering when the aligned
18
+ * position would overflow, before flipping to the opposite edge.
19
+ *
20
+ * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
21
+ *
22
+ * When a popup is in a viewport corner (e.g. inline-end align-end at the
23
+ * top-right), flipping only the primary axis (`flip-inline`) moves the popup
24
+ * to the left but keeps the same cross-axis span direction (e.g. upward),
25
+ * which is still off-screen. The combined keyword `flip-inline flip-block`
26
+ * mirrors the popup diagonally. It flips BOTH the position-area AND both
27
+ * inline and block margins simultaneously, placing the popup at the
28
+ * diagonally opposite corner where there is always space.
29
+ *
30
+ * Named `position-area` entries (e.g. `inline-start span-block-end`) in
31
+ * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
32
+ * tactic keywords correctly flip the gap margin along with the position.
33
+ */
34
+ export declare function placementToTryFallbacks({ placement }: {
35
+ placement: TPlacementOptions;
36
+ }): string;
@@ -14,61 +14,6 @@
14
14
  */
15
15
  import { type RefObject } from 'react';
16
16
  import { type TPlacementOptions } from '../internal/resolve-placement';
17
- /**
18
- * Resolves placement options to CSS `position-area` syntax.
19
- *
20
- * The `align` field represents the *visual* alignment:
21
- * - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
22
- * - `align: 'end'` means "aligned to the trigger's end edge"
23
- * - `align: 'center'` means centered (single-axis position-area)
24
- *
25
- * CSS `position-area` uses `span-*` keywords which indicate the *expansion direction*.
26
- * Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
27
- * This function handles the inversion internally.
28
- *
29
- * @example
30
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
31
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
32
- * placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } }) // → 'block-end span-inline-start'
33
- */
34
- export declare function placementToPositionArea({ placement }: {
35
- placement: TPlacementOptions;
36
- }): string;
37
- /**
38
- * Returns `position-try-fallbacks` value based on placement.
39
- *
40
- * For centered placements, includes cross-axis aligned position-area
41
- * values so the browser can shift the popover along the cross-axis
42
- * when the centered position would overflow the viewport edge.
43
- *
44
- * Fallback order for centered placements (e.g. `block-end`):
45
- * 1. Same edge, start-aligned (shift for near-edge overflow)
46
- * 2. Same edge, end-aligned (shift for far-edge overflow)
47
- * 3. Flipped edge, centered
48
- * 4. Flipped edge, start-aligned
49
- * 5. Flipped edge, end-aligned
50
- *
51
- * For aligned placements (start/end), includes the same-edge centered
52
- * position as fallbacks so the browser can try centering when the aligned
53
- * position would overflow, before flipping to the opposite edge.
54
- *
55
- * **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
56
- *
57
- * When a popup is in a viewport corner (e.g. inline-end align-end at the
58
- * top-right), flipping only the primary axis (`flip-inline`) moves the popup
59
- * to the left but keeps the same cross-axis span direction (e.g. upward),
60
- * which is still off-screen. The combined keyword `flip-inline flip-block`
61
- * mirrors the popup diagonally. It flips BOTH the position-area AND both
62
- * inline and block margins simultaneously, placing the popup at the
63
- * diagonally opposite corner where there is always space.
64
- *
65
- * Named `position-area` entries (e.g. `inline-start span-block-end`) in
66
- * `position-try-fallbacks` do NOT update margins, so only the `flip-*`
67
- * tactic keywords correctly flip the gap margin along with the position.
68
- */
69
- export declare function placementToTryFallbacks({ placement }: {
70
- placement: TPlacementOptions;
71
- }): string;
72
17
  /**
73
18
  * Hook that positions an element relative to an anchor element using
74
19
  * CSS Anchor Positioning (with a JS fallback for older browsers).
@@ -93,24 +93,4 @@ export type TPopupContextValue = {
93
93
  */
94
94
  forceFallbackPositioning?: boolean;
95
95
  };
96
- /**
97
- * __Popup provider__
98
- *
99
- * Provides shared popup state (placement, popoverId, triggerRef,
100
- * isOpen, onClose) to compound child components such as `Popup.Trigger` and
101
- * `Popup.Content`.
102
- */
103
- export declare const PopupProvider: React.Provider<TPopupContextValue | null>;
104
- /**
105
- * Returns the nearest `Popup` context value.
106
- *
107
- * Throws if called outside of a `<Popup>` compound component.
108
- */
109
- export declare function usePopupContext(): TPopupContextValue;
110
- /**
111
- * Returns the popup context if available, or `null` when used outside `<Popup>`.
112
- *
113
- * Used by `PopupContent` to support standalone usage (e.g. tooltip)
114
- * where values are passed as props instead of coming from a compound component.
115
- */
116
- export declare function useMaybePopupContext(): TPopupContextValue | null;
96
+ export declare const PopupContext: React.Context<TPopupContextValue | null>;
@@ -0,0 +1,10 @@
1
+ import { type Provider } from 'react';
2
+ import { type TPopupContextValue } from './popup-context';
3
+ /**
4
+ * __Popup provider__
5
+ *
6
+ * Provides shared popup state (placement, popoverId, triggerRef,
7
+ * isOpen, onClose) to compound child components such as `Popup.Trigger` and
8
+ * `Popup.Content`.
9
+ */
10
+ export declare const PopupProvider: Provider<TPopupContextValue | null>;
@@ -0,0 +1,8 @@
1
+ import { type TPopupContextValue } from './popup-context';
2
+ /**
3
+ * Returns the popup context if available, or `null` when used outside `<Popup>`.
4
+ *
5
+ * Used by `PopupContent` to support standalone usage (e.g. tooltip)
6
+ * where values are passed as props instead of coming from a compound component.
7
+ */
8
+ export declare function useMaybePopupContext(): TPopupContextValue | null;
@@ -0,0 +1,7 @@
1
+ import { type TPopupContextValue } from './popup-context';
2
+ /**
3
+ * Returns the nearest `Popup` context value.
4
+ *
5
+ * Throws if called outside of a `<Popup>` compound component.
6
+ */
7
+ export declare function usePopupContext(): TPopupContextValue;
@@ -1,2 +1,3 @@
1
- export { useArrowNavigation, isAtCurrentMenuLevel } from './use-arrow-navigation';
1
+ export { useArrowNavigation } from './use-arrow-navigation';
2
2
  export type { TUseArrowNavigationArgs } from './use-arrow-navigation';
3
+ export { isAtCurrentMenuLevel } from './is-at-current-menu-level';
@@ -0,0 +1,48 @@
1
+ /**
2
+ * Returns true if the element belongs to the current menu level of the
3
+ * container, i.e. it is NOT inside a nested `role="menu"` sub-container.
4
+ *
5
+ * Uses `element.closest('[role="menu"]')` to determine the nearest menu
6
+ * scope. If the nearest scope is the container's own `role="menu"` element,
7
+ * the element belongs to this level. If it is a different (nested) menu,
8
+ * the element belongs to a child level and should be excluded.
9
+ *
10
+ * Supports two container patterns:
11
+ *
12
+ * **1. Container has `role="menu"` directly** (preferred, used by avatar-group):
13
+ * ```
14
+ * <div ref={containerRef} role="menu">
15
+ * <button role="menuitem" /> ← isAtCurrentMenuLevel → true
16
+ * <div role="menu"> ← nested sub-menu
17
+ * <button role="menuitem" /> ← isAtCurrentMenuLevel → false
18
+ * </div>
19
+ * </div>
20
+ * ```
21
+ * Uses the simple check: `element.closest('[role="menu"]') === container`
22
+ *
23
+ * **2. Container is a wrapper without `role="menu"`** (used by dropdown-menu,
24
+ * where `MenuGroup` owns `role="menu"` but does not accept a ref):
25
+ * ```
26
+ * <div ref={containerRef}> ← wrapper (no role="menu")
27
+ * <MenuGroup role="menu">
28
+ * <button role="menuitem" /> ← isAtCurrentMenuLevel → true
29
+ * <div role="menu"> ← nested sub-menu
30
+ * <button role="menuitem" /> ← isAtCurrentMenuLevel → false
31
+ * </div>
32
+ * </MenuGroup>
33
+ * </div>
34
+ * ```
35
+ * Falls back to walking the DOM to check that the element's closest
36
+ * `role="menu"` is the container's own menu (not doubly nested).
37
+ *
38
+ * Ideally all consumers should use pattern 1 (place the ref directly on the
39
+ * `role="menu"` element). Pattern 2 exists because `@atlaskit/menu`'s
40
+ * `MenuGroup` does not currently accept a ref. If `MenuGroup` gains ref
41
+ * support in the future, dropdown-menu should switch to pattern 1 and the
42
+ * fallback path can be removed.
43
+ *
44
+ * Used both as a `TFocusableFilter` (to scope getNextFocusable etc.) and as
45
+ * a guard to prevent parent menu handlers from acting on events that
46
+ * belong to a nested menu.
47
+ */
48
+ export declare function isAtCurrentMenuLevel(element: Element, container: HTMLElement): boolean;
@@ -1,53 +1,5 @@
1
1
  import { type RefObject } from 'react';
2
2
  import { type TFocusableFilter } from '../focus';
3
- /**
4
- * Returns true if the element belongs to the current menu level of the
5
- * container, i.e. it is NOT inside a nested `role="menu"` sub-container.
6
- *
7
- * Uses `element.closest('[role="menu"]')` to determine the nearest menu
8
- * scope. If the nearest scope is the container's own `role="menu"` element,
9
- * the element belongs to this level. If it is a different (nested) menu,
10
- * the element belongs to a child level and should be excluded.
11
- *
12
- * Supports two container patterns:
13
- *
14
- * **1. Container has `role="menu"` directly** (preferred, used by avatar-group):
15
- * ```
16
- * <div ref={containerRef} role="menu">
17
- * <button role="menuitem" /> ← isAtCurrentMenuLevel → true
18
- * <div role="menu"> ← nested sub-menu
19
- * <button role="menuitem" /> ← isAtCurrentMenuLevel → false
20
- * </div>
21
- * </div>
22
- * ```
23
- * Uses the simple check: `element.closest('[role="menu"]') === container`
24
- *
25
- * **2. Container is a wrapper without `role="menu"`** (used by dropdown-menu,
26
- * where `MenuGroup` owns `role="menu"` but does not accept a ref):
27
- * ```
28
- * <div ref={containerRef}> ← wrapper (no role="menu")
29
- * <MenuGroup role="menu">
30
- * <button role="menuitem" /> ← isAtCurrentMenuLevel → true
31
- * <div role="menu"> ← nested sub-menu
32
- * <button role="menuitem" /> ← isAtCurrentMenuLevel → false
33
- * </div>
34
- * </MenuGroup>
35
- * </div>
36
- * ```
37
- * Falls back to walking the DOM to check that the element's closest
38
- * `role="menu"` is the container's own menu (not doubly nested).
39
- *
40
- * Ideally all consumers should use pattern 1 (place the ref directly on the
41
- * `role="menu"` element). Pattern 2 exists because `@atlaskit/menu`'s
42
- * `MenuGroup` does not currently accept a ref. If `MenuGroup` gains ref
43
- * support in the future, dropdown-menu should switch to pattern 1 and the
44
- * fallback path can be removed.
45
- *
46
- * Used both as a `TFocusableFilter` (to scope getNextFocusable etc.) and as
47
- * a guard to prevent parent menu handlers from acting on events that
48
- * belong to a nested menu.
49
- */
50
- export declare function isAtCurrentMenuLevel(element: Element, container: HTMLElement): boolean;
51
3
  /**
52
4
  * Args for `useArrowNavigation`.
53
5
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/top-layer",
3
- "version": "0.12.0",
3
+ "version": "0.12.1",
4
4
  "description": "Low-level layering primitives based on popover and dialog",
5
5
  "homepage": "https://atlassian.design/components/top-layer",
6
6
  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
@@ -38,7 +38,7 @@
38
38
  "@atlaskit/css": "^0.19.0",
39
39
  "@atlaskit/ds-lib": "^7.0.0",
40
40
  "@atlaskit/layering": "^3.7.0",
41
- "@atlaskit/tokens": "^13.0.0",
41
+ "@atlaskit/tokens": "^13.1.0",
42
42
  "@babel/runtime": "^7.0.0",
43
43
  "@compiled/react": "^0.20.0",
44
44
  "bind-event-listener": "^3.0.0",