@atlaskit/top-layer 0.13.0 → 0.15.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 (179) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/README.md +61 -34
  3. package/dist/cjs/animations/presets.js +4 -4
  4. package/dist/cjs/dialog/create-close-event.js +1 -2
  5. package/dist/cjs/entry-points/dialog.js +6 -0
  6. package/dist/cjs/entry-points/get-aria-for-trigger.js +12 -0
  7. package/dist/cjs/entry-points/popover-surface.js +12 -0
  8. package/dist/cjs/entry-points/popover.js +6 -0
  9. package/dist/cjs/entry-points/use-popover-id.js +21 -0
  10. package/dist/cjs/internal/get-aria-for-trigger.js +88 -0
  11. package/dist/cjs/internal/role-types.js +64 -1
  12. package/dist/cjs/internal/slot.js +1 -1
  13. package/dist/cjs/internal/use-anchor-position.js +30 -14
  14. package/dist/cjs/popover/create-close-event.js +1 -2
  15. package/dist/cjs/popover/popover.js +79 -80
  16. package/dist/cjs/popover-surface/index.js +12 -0
  17. package/dist/cjs/{popup/popup-surface.js → popover-surface/popover-surface.js} +9 -12
  18. package/dist/cjs/testing/polyfill.js +9 -6
  19. package/dist/es2019/animations/presets.js +4 -4
  20. package/dist/es2019/dialog/create-close-event.js +1 -2
  21. package/dist/es2019/entry-points/dialog.js +1 -1
  22. package/dist/es2019/entry-points/get-aria-for-trigger.js +1 -0
  23. package/dist/es2019/entry-points/popover-surface.js +1 -0
  24. package/dist/es2019/entry-points/popover.js +1 -1
  25. package/dist/es2019/entry-points/use-popover-id.js +15 -0
  26. package/dist/es2019/internal/get-aria-for-trigger.js +84 -0
  27. package/dist/es2019/internal/role-types.js +59 -0
  28. package/dist/es2019/internal/slot.js +1 -1
  29. package/dist/es2019/internal/use-anchor-position.js +16 -12
  30. package/dist/es2019/popover/create-close-event.js +1 -2
  31. package/dist/es2019/popover/popover.js +79 -80
  32. package/dist/es2019/popover-surface/index.js +1 -0
  33. package/dist/es2019/popover-surface/popover-surface.js +27 -0
  34. package/dist/es2019/testing/polyfill.js +9 -6
  35. package/dist/esm/animations/presets.js +4 -4
  36. package/dist/esm/dialog/create-close-event.js +1 -2
  37. package/dist/esm/entry-points/dialog.js +1 -1
  38. package/dist/esm/entry-points/get-aria-for-trigger.js +1 -0
  39. package/dist/esm/entry-points/popover-surface.js +1 -0
  40. package/dist/esm/entry-points/popover.js +1 -1
  41. package/dist/esm/entry-points/use-popover-id.js +15 -0
  42. package/dist/esm/internal/get-aria-for-trigger.js +83 -0
  43. package/dist/esm/internal/role-types.js +58 -0
  44. package/dist/esm/internal/slot.js +1 -1
  45. package/dist/esm/internal/use-anchor-position.js +30 -14
  46. package/dist/esm/popover/create-close-event.js +1 -2
  47. package/dist/esm/popover/popover.js +79 -80
  48. package/dist/esm/popover-surface/index.js +1 -0
  49. package/dist/esm/popover-surface/popover-surface.js +26 -0
  50. package/dist/esm/testing/polyfill.js +9 -6
  51. package/dist/types/animations/presets.d.ts +4 -4
  52. package/dist/types/animations/types.d.ts +1 -9
  53. package/dist/types/dialog/create-close-event.d.ts +1 -2
  54. package/dist/types/dialog/types.d.ts +0 -8
  55. package/dist/types/entry-points/animations.d.ts +1 -1
  56. package/dist/types/entry-points/dialog.d.ts +1 -1
  57. package/dist/types/entry-points/get-aria-for-trigger.d.ts +1 -0
  58. package/dist/types/entry-points/popover-surface.d.ts +2 -0
  59. package/dist/types/entry-points/popover.d.ts +2 -2
  60. package/dist/types/entry-points/use-popover-id.d.ts +11 -0
  61. package/dist/types/internal/get-aria-for-trigger.d.ts +86 -0
  62. package/dist/types/internal/role-types.d.ts +7 -0
  63. package/dist/types/internal/slot.d.ts +2 -2
  64. package/dist/types/popover/create-close-event.d.ts +1 -2
  65. package/dist/types/popover/index.d.ts +1 -1
  66. package/dist/types/popover/popover.d.ts +6 -13
  67. package/dist/types/popover/types.d.ts +6 -5
  68. package/dist/types/popover-surface/index.d.ts +2 -0
  69. package/dist/types/popover-surface/popover-surface.d.ts +21 -0
  70. package/dist/types-ts4.5/animations/presets.d.ts +4 -4
  71. package/dist/types-ts4.5/animations/types.d.ts +1 -9
  72. package/dist/types-ts4.5/dialog/create-close-event.d.ts +1 -2
  73. package/dist/types-ts4.5/dialog/types.d.ts +0 -8
  74. package/dist/types-ts4.5/entry-points/animations.d.ts +1 -1
  75. package/dist/types-ts4.5/entry-points/dialog.d.ts +1 -1
  76. package/dist/types-ts4.5/entry-points/get-aria-for-trigger.d.ts +1 -0
  77. package/dist/types-ts4.5/entry-points/popover-surface.d.ts +2 -0
  78. package/dist/types-ts4.5/entry-points/popover.d.ts +2 -2
  79. package/dist/types-ts4.5/entry-points/use-popover-id.d.ts +11 -0
  80. package/dist/types-ts4.5/internal/get-aria-for-trigger.d.ts +86 -0
  81. package/dist/types-ts4.5/internal/role-types.d.ts +7 -0
  82. package/dist/types-ts4.5/internal/slot.d.ts +2 -2
  83. package/dist/types-ts4.5/popover/create-close-event.d.ts +1 -2
  84. package/dist/types-ts4.5/popover/index.d.ts +1 -1
  85. package/dist/types-ts4.5/popover/popover.d.ts +6 -13
  86. package/dist/types-ts4.5/popover/types.d.ts +6 -5
  87. package/dist/types-ts4.5/popover-surface/index.d.ts +2 -0
  88. package/dist/types-ts4.5/popover-surface/popover-surface.d.ts +21 -0
  89. package/get-aria-for-trigger/package.json +17 -0
  90. package/package.json +3 -3
  91. package/popover-surface/package.json +17 -0
  92. package/use-popover-id/package.json +17 -0
  93. package/create-close-event/package.json +0 -17
  94. package/dialog/create-close-event/package.json +0 -17
  95. package/dist/cjs/entry-points/create-close-event.js +0 -19
  96. package/dist/cjs/entry-points/dialog/create-close-event.js +0 -12
  97. package/dist/cjs/entry-points/popover/create-close-event.js +0 -12
  98. package/dist/cjs/entry-points/popup-surface.js +0 -12
  99. package/dist/cjs/entry-points/popup.js +0 -12
  100. package/dist/cjs/popup/index.js +0 -37
  101. package/dist/cjs/popup/popup-content.js +0 -215
  102. package/dist/cjs/popup/popup-context.js +0 -25
  103. package/dist/cjs/popup/popup-provider.js +0 -15
  104. package/dist/cjs/popup/popup-trigger-function.js +0 -80
  105. package/dist/cjs/popup/popup-trigger.js +0 -66
  106. package/dist/cjs/popup/popup.js +0 -81
  107. package/dist/cjs/popup/types.js +0 -5
  108. package/dist/cjs/popup/use-maybe-popup-context.js +0 -17
  109. package/dist/cjs/popup/use-popup-context.js +0 -20
  110. package/dist/es2019/entry-points/create-close-event.js +0 -9
  111. package/dist/es2019/entry-points/dialog/create-close-event.js +0 -1
  112. package/dist/es2019/entry-points/popover/create-close-event.js +0 -1
  113. package/dist/es2019/entry-points/popup-surface.js +0 -1
  114. package/dist/es2019/entry-points/popup.js +0 -1
  115. package/dist/es2019/popup/index.js +0 -33
  116. package/dist/es2019/popup/popup-content.js +0 -207
  117. package/dist/es2019/popup/popup-context.js +0 -20
  118. package/dist/es2019/popup/popup-provider.js +0 -10
  119. package/dist/es2019/popup/popup-surface.js +0 -30
  120. package/dist/es2019/popup/popup-trigger-function.js +0 -75
  121. package/dist/es2019/popup/popup-trigger.js +0 -61
  122. package/dist/es2019/popup/popup.js +0 -67
  123. package/dist/es2019/popup/types.js +0 -1
  124. package/dist/es2019/popup/use-maybe-popup-context.js +0 -12
  125. package/dist/es2019/popup/use-popup-context.js +0 -15
  126. package/dist/esm/entry-points/create-close-event.js +0 -9
  127. package/dist/esm/entry-points/dialog/create-close-event.js +0 -1
  128. package/dist/esm/entry-points/popover/create-close-event.js +0 -1
  129. package/dist/esm/entry-points/popup-surface.js +0 -1
  130. package/dist/esm/entry-points/popup.js +0 -1
  131. package/dist/esm/popup/index.js +0 -33
  132. package/dist/esm/popup/popup-content.js +0 -207
  133. package/dist/esm/popup/popup-context.js +0 -20
  134. package/dist/esm/popup/popup-provider.js +0 -10
  135. package/dist/esm/popup/popup-surface.js +0 -29
  136. package/dist/esm/popup/popup-trigger-function.js +0 -75
  137. package/dist/esm/popup/popup-trigger.js +0 -59
  138. package/dist/esm/popup/popup.js +0 -72
  139. package/dist/esm/popup/types.js +0 -1
  140. package/dist/esm/popup/use-maybe-popup-context.js +0 -12
  141. package/dist/esm/popup/use-popup-context.js +0 -15
  142. package/dist/types/entry-points/create-close-event.d.ts +0 -11
  143. package/dist/types/entry-points/dialog/create-close-event.d.ts +0 -2
  144. package/dist/types/entry-points/popover/create-close-event.d.ts +0 -2
  145. package/dist/types/entry-points/popup-surface.d.ts +0 -2
  146. package/dist/types/entry-points/popup.d.ts +0 -2
  147. package/dist/types/popup/index.d.ts +0 -34
  148. package/dist/types/popup/popup-content.d.ts +0 -14
  149. package/dist/types/popup/popup-context.d.ts +0 -96
  150. package/dist/types/popup/popup-provider.d.ts +0 -10
  151. package/dist/types/popup/popup-surface.d.ts +0 -22
  152. package/dist/types/popup/popup-trigger-function.d.ts +0 -112
  153. package/dist/types/popup/popup-trigger.d.ts +0 -14
  154. package/dist/types/popup/popup.d.ts +0 -14
  155. package/dist/types/popup/types.d.ts +0 -321
  156. package/dist/types/popup/use-maybe-popup-context.d.ts +0 -8
  157. package/dist/types/popup/use-popup-context.d.ts +0 -7
  158. package/dist/types-ts4.5/entry-points/create-close-event.d.ts +0 -11
  159. package/dist/types-ts4.5/entry-points/dialog/create-close-event.d.ts +0 -2
  160. package/dist/types-ts4.5/entry-points/popover/create-close-event.d.ts +0 -2
  161. package/dist/types-ts4.5/entry-points/popup-surface.d.ts +0 -2
  162. package/dist/types-ts4.5/entry-points/popup.d.ts +0 -2
  163. package/dist/types-ts4.5/popup/index.d.ts +0 -34
  164. package/dist/types-ts4.5/popup/popup-content.d.ts +0 -14
  165. package/dist/types-ts4.5/popup/popup-context.d.ts +0 -96
  166. package/dist/types-ts4.5/popup/popup-provider.d.ts +0 -10
  167. package/dist/types-ts4.5/popup/popup-surface.d.ts +0 -22
  168. package/dist/types-ts4.5/popup/popup-trigger-function.d.ts +0 -112
  169. package/dist/types-ts4.5/popup/popup-trigger.d.ts +0 -14
  170. package/dist/types-ts4.5/popup/popup.d.ts +0 -14
  171. package/dist/types-ts4.5/popup/types.d.ts +0 -321
  172. package/dist/types-ts4.5/popup/use-maybe-popup-context.d.ts +0 -8
  173. package/dist/types-ts4.5/popup/use-popup-context.d.ts +0 -7
  174. package/popover/create-close-event/package.json +0 -17
  175. package/popup/package.json +0 -17
  176. package/popup-surface/package.json +0 -17
  177. /package/dist/cjs/{popup/popup-surface.compiled.css → popover-surface/popover-surface.compiled.css} +0 -0
  178. /package/dist/es2019/{popup/popup-surface.compiled.css → popover-surface/popover-surface.compiled.css} +0 -0
  179. /package/dist/esm/{popup/popup-surface.compiled.css → popover-surface/popover-surface.compiled.css} +0 -0
@@ -1,17 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.useMaybePopupContext = useMaybePopupContext;
7
- var _react = require("react");
8
- var _popupContext = require("./popup-context");
9
- /**
10
- * Returns the popup context if available, or `null` when used outside `<Popup>`.
11
- *
12
- * Used by `PopupContent` to support standalone usage (e.g. tooltip)
13
- * where values are passed as props instead of coming from a compound component.
14
- */
15
- function useMaybePopupContext() {
16
- return (0, _react.useContext)(_popupContext.PopupContext);
17
- }
@@ -1,20 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.usePopupContext = usePopupContext;
7
- var _react = require("react");
8
- var _popupContext = require("./popup-context");
9
- /**
10
- * Returns the nearest `Popup` context value.
11
- *
12
- * Throws if called outside of a `<Popup>` compound component.
13
- */
14
- function usePopupContext() {
15
- var ctx = (0, _react.useContext)(_popupContext.PopupContext);
16
- if (ctx === null) {
17
- throw new Error('@atlaskit/top-layer: Popup compound components must be used within <Popup>.');
18
- }
19
- return ctx;
20
- }
@@ -1,9 +0,0 @@
1
- /**
2
- * @deprecated Combined entry-point retained for backwards-compatibility.
3
- * Prefer the disjoint subpaths so that bundle analysis attributes the cost
4
- * to the right consumer:
5
- * - `@atlaskit/top-layer/dialog/create-close-event` for `createCloseEvent`
6
- * - `@atlaskit/top-layer/popover/create-close-event` for `createPopoverCloseEvent`
7
- */
8
- export { createCloseEvent } from '../dialog';
9
- export { createPopoverCloseEvent } from '../popover/create-close-event';
@@ -1 +0,0 @@
1
- export { createCloseEvent } from '../../dialog/create-close-event';
@@ -1 +0,0 @@
1
- export { createPopoverCloseEvent } from '../../popover/create-close-event';
@@ -1 +0,0 @@
1
- export { PopupSurface } from '../popup/popup-surface';
@@ -1 +0,0 @@
1
- export { Popup } from '../popup';
@@ -1,33 +0,0 @@
1
- import { PopupRoot } from './popup';
2
- import { PopupContent } from './popup-content';
3
- import { PopupSurface } from './popup-surface';
4
- import { PopupTrigger } from './popup-trigger';
5
- import { PopupTriggerFunction } from './popup-trigger-function';
6
-
7
- /**
8
- * Compound component for rendering content in the browser's top layer
9
- * using the native Popover API (`popover="auto"`).
10
- * Placement is owned by this compound: root provides it via context, Content applies it
11
- * (CSS Anchor Positioning or JS fallback).
12
- *
13
- * For default overlay styling (background, shadow, border-radius), see `PopupSurface` in the package examples.
14
- *
15
- * @example
16
- * ```tsx
17
- * <Popup placement={{ edge: 'end' }} onClose={handleClose}>
18
- * <Popup.Trigger>
19
- * <button>Open</button>
20
- * </Popup.Trigger>
21
- * <Popup.Content role="dialog" label="My popup">
22
- * Content goes here
23
- * </Popup.Content>
24
- * </Popup>
25
- * ```
26
- */
27
- const Popup = Object.assign(PopupRoot, {
28
- Trigger: PopupTrigger,
29
- TriggerFunction: PopupTriggerFunction,
30
- Content: PopupContent,
31
- Surface: PopupSurface
32
- });
33
- export { Popup };
@@ -1,207 +0,0 @@
1
- /* popup-content.tsx generated by @compiled/babel-plugin v0.39.1 */
2
- import _extends from "@babel/runtime/helpers/extends";
3
- import { ax, ix } from "@compiled/react/runtime";
4
- import React, { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
5
- import mergeRefs from '@atlaskit/ds-lib/merge-refs';
6
- import { prefersReducedMotion } from '../internal/reduced-motion';
7
- import { roleToAriaHasPopup } from '../internal/role-to-aria-has-popup';
8
- import { shouldFocusIntoPopover } from '../internal/should-focus-into-popover';
9
- import { useAnchorPosition } from '../internal/use-anchor-position';
10
- import { useWidthFromAnchor } from '../internal/use-width-from-anchor';
11
- import { Popover } from '../popover/popover';
12
- import { useMaybePopupContext } from './use-maybe-popup-context';
13
-
14
- /**
15
- * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
16
- *
17
- * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
18
- * and onClose from context. For standalone usage (tooltip, spotlight, flag),
19
- * use `Popover` + `useAnchorPosition` directly.
20
- */
21
- export const PopupContent = /*#__PURE__*/forwardRef(function PopupContent({
22
- children,
23
- role,
24
- label,
25
- labelledBy,
26
- animate,
27
- mode,
28
- widthFromAnchor = 'none',
29
- xcss,
30
- isOpen: isOpenProp,
31
- triggerRef: triggerRefProp,
32
- placement: placementProp,
33
- onClose: onCloseProp,
34
- testId: testIdProp,
35
- forceFallbackPositioning: forceFallbackPositioningProp,
36
- id: idProp,
37
- onEnterFinish,
38
- onExitFinish
39
- }, ref) {
40
- var _ref, _ctx$popoverRef;
41
- // When inside <Popup>, context provides defaults. Props always win.
42
- const ctx = useMaybePopupContext();
43
- const triggerRef = triggerRefProp !== null && triggerRefProp !== void 0 ? triggerRefProp : ctx === null || ctx === void 0 ? void 0 : ctx.triggerRef;
44
- const placement = (_ref = placementProp !== null && placementProp !== void 0 ? placementProp : ctx === null || ctx === void 0 ? void 0 : ctx.placement) !== null && _ref !== void 0 ? _ref : {};
45
- const onClose = onCloseProp !== null && onCloseProp !== void 0 ? onCloseProp : ctx === null || ctx === void 0 ? void 0 : ctx.onClose;
46
- const testId = testIdProp !== null && testIdProp !== void 0 ? testIdProp : ctx === null || ctx === void 0 ? void 0 : ctx.testId;
47
- const forceFallbackPositioning = forceFallbackPositioningProp !== null && forceFallbackPositioningProp !== void 0 ? forceFallbackPositioningProp : ctx === null || ctx === void 0 ? void 0 : ctx.forceFallbackPositioning;
48
-
49
- // isOpen: prop wins, otherwise derive from context popupState.
50
- // 'animating-open' counts as open so <Popover> stays visible during entry animation.
51
- const isOpen = isOpenProp !== null && isOpenProp !== void 0 ? isOpenProp : ctx !== null ? ctx.popupState === 'open' || ctx.popupState === 'animating-open' : false;
52
- const setPopupState = ctx === null || ctx === void 0 ? void 0 : ctx.setPopupState;
53
- const consumerOnOpenChange = ctx === null || ctx === void 0 ? void 0 : ctx.onOpenChange;
54
-
55
- // ── TPopupState ──
56
- //
57
- // popupState is driven by handleOpenChange (below), which fires on every browser
58
- // toggle event (showPopover / hidePopover / light-dismiss).
59
- //
60
- // Exception — initial mount with isOpen=true (prop-controlled usage):
61
- // handleOpenChange only fires from the Popover's toggle event listener, which
62
- // is registered in a useEffect. On the first render, useEffect hasn't run yet,
63
- // so handleOpenChange never fires. We sync popupState here instead.
64
- //
65
- // Transitions when animations are active:
66
- // closed → animating-open → open (enter)
67
- // open → animating-closed → closed (exit, via onExitFinish)
68
- //
69
- // Without animation: closed ↔ open directly.
70
- const willAnimate = Boolean(animate) && !prefersReducedMotion();
71
- const hasMountedRef = useRef(false);
72
- useLayoutEffect(() => {
73
- if (hasMountedRef.current) {
74
- return;
75
- }
76
- hasMountedRef.current = true;
77
- if (isOpen) {
78
- setPopupState === null || setPopupState === void 0 ? void 0 : setPopupState(willAnimate ? 'animating-open' : 'open');
79
- }
80
- }, [isOpen, setPopupState, willAnimate]);
81
- const handleEnterFinish = useCallback(() => {
82
- setPopupState === null || setPopupState === void 0 ? void 0 : setPopupState('open');
83
- onEnterFinish === null || onEnterFinish === void 0 ? void 0 : onEnterFinish();
84
- }, [setPopupState, onEnterFinish]);
85
- const handleExitFinish = useCallback(() => {
86
- setPopupState === null || setPopupState === void 0 ? void 0 : setPopupState('closed');
87
- onExitFinish === null || onExitFinish === void 0 ? void 0 : onExitFinish();
88
- }, [setPopupState, onExitFinish]);
89
-
90
- // Note: onOpenChange composition is handled by handleOpenChange below,
91
- // which also adds nested-popover focus restoration.
92
-
93
- // Sync aria-haspopup on the trigger with the content's role
94
- const setAriaHasPopup = ctx === null || ctx === void 0 ? void 0 : ctx.setAriaHasPopup;
95
- useLayoutEffect(() => {
96
- setAriaHasPopup === null || setAriaHasPopup === void 0 ? void 0 : setAriaHasPopup(roleToAriaHasPopup({
97
- role
98
- }));
99
- }, [role, setAriaHasPopup]);
100
-
101
- // Focus restoration
102
- // The native Popover API handles focus restoration automatically for
103
- // popover="auto" and popover="hint":
104
- // - Escape → restores focus to the previously focused element (the trigger)
105
- // - Click-outside → does NOT restore (correct: the user clicked deliberately)
106
- // - hidePopover() → restores focus to the previously focused element
107
- //
108
- // However, for **nested** popover="auto" popovers, the browser only captures
109
- // `previouslyFocusedElement` for the outermost popover in the auto stack.
110
- // Inner popovers have `shouldRestoreFocus=false` per the spec, so the browser
111
- // does not restore focus when they close.
112
- //
113
- // To handle this, we listen for the close transition via `onOpenChange` and
114
- // restore focus to the trigger if the browser did not. This runs after the
115
- // browser's native restoration (which happens synchronously during hidePopover),
116
- // so it only takes effect when the browser skipped restoration (nested case).
117
- //
118
- // See: notes/architecture/focus-restoration.md
119
- const handleOpenChange = useCallback(args => {
120
- // Sync compound state
121
- if (args.isOpen) {
122
- setPopupState === null || setPopupState === void 0 ? void 0 : setPopupState(willAnimate ? 'animating-open' : 'open');
123
- } else {
124
- setPopupState === null || setPopupState === void 0 ? void 0 : setPopupState(willAnimate ? 'animating-closed' : 'closed');
125
- }
126
- consumerOnOpenChange === null || consumerOnOpenChange === void 0 ? void 0 : consumerOnOpenChange(args);
127
-
128
- // Nested popover focus restoration fallback
129
- // The browser only captures `previouslyFocusedElement` for the
130
- // outermost popover="auto" in the stack. Inner (nested) popovers
131
- // have shouldRestoreFocus=false, so the browser will not restore
132
- // focus when they close.
133
- //
134
- // We detect this case by checking if focus is still inside the
135
- // closing popover element. If it is, the browser did not restore,
136
- // and we need to move focus to the trigger ourselves.
137
- //
138
- // This does NOT fire for:
139
- // - Outermost popovers (browser already restored to trigger)
140
- // - Click-outside (focus is on the clicked element, not in popover)
141
- if (!args.isOpen) {
142
- const trigger = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current;
143
- const focusStillInPopover = trigger && args.element.contains(document.activeElement);
144
- // Single source of truth for "this role moves focus on open
145
- // and therefore needs to be restored on close" - see
146
- // `shouldFocusIntoPopover` in `internal/role-types.tsx`.
147
- if (focusStillInPopover && shouldFocusIntoPopover({
148
- role
149
- })) {
150
- trigger.focus({
151
- preventScroll: true
152
- });
153
- }
154
- }
155
- }, [consumerOnOpenChange, triggerRef, role, setPopupState, willAnimate]);
156
-
157
- // Anchor positioning
158
- // Compose useAnchorPosition with Popover. The hook positions the popover
159
- // relative to the trigger element via CSS Anchor Positioning (with JS fallback).
160
- // Use ctx.popoverRef when inside the compound (so the trigger can also
161
- // reach the same DOM element for togglePopover). Otherwise use a local ref.
162
- const localRef = useRef(null);
163
- const popoverRef = (_ctx$popoverRef = ctx === null || ctx === void 0 ? void 0 : ctx.popoverRef) !== null && _ctx$popoverRef !== void 0 ? _ctx$popoverRef : localRef;
164
- useAnchorPosition({
165
- anchorRef: triggerRef !== null && triggerRef !== void 0 ? triggerRef : {
166
- current: null
167
- },
168
- popoverRef,
169
- placement,
170
- forceFallbackPositioning
171
- });
172
- useWidthFromAnchor({
173
- mode: widthFromAnchor,
174
- popoverRef,
175
- anchorRef: triggerRef
176
- });
177
-
178
- // Merge: the popoverRef (shared with trigger + positioning) and the forwarded ref.
179
- const combinedRef = mergeRefs([popoverRef, ref]);
180
-
181
- // TPopupContentProps already validates the discriminated union (role + label,
182
- // mode + onClose) at its API boundary. Popover accepts TPopoverForwardedProps
183
- // internally so individual prop forwarding does not need to re-prove the union.
184
- const popoverProps = {
185
- isOpen,
186
- animate,
187
- placement,
188
- mode,
189
- role,
190
- label,
191
- labelledBy,
192
- onClose: onClose !== null && onClose !== void 0 ? onClose : undefined,
193
- onOpenChange: handleOpenChange,
194
- onEnterFinish: handleEnterFinish,
195
- onExitFinish: handleExitFinish,
196
- testId,
197
- children,
198
- // Standalone consumers can pass an explicit `id` - used by their own
199
- // trigger to wire `aria-controls`. Inside the `<Popup>` compound, the
200
- // id flows from context (`ctx.popoverId`).
201
- id: idProp !== null && idProp !== void 0 ? idProp : ctx === null || ctx === void 0 ? void 0 : ctx.popoverId,
202
- xcss
203
- };
204
- return /*#__PURE__*/React.createElement(Popover, _extends({
205
- ref: combinedRef
206
- }, popoverProps));
207
- });
@@ -1,20 +0,0 @@
1
- import { createContext } from 'react';
2
-
3
- /**
4
- * Represents the lifecycle state of the popup.
5
- *
6
- * - `'closed'`: fully closed, not visible, no animation playing.
7
- * - `'animating-open'`: entry animation is playing (popup is opening but not yet settled).
8
- * - `'open'`: fully open, browser popover is showing, entry animation complete.
9
- * - `'animating-closed'`: exit animation is playing (popup is closing but still visible).
10
- *
11
- * Used to derive `aria-expanded` on the trigger:
12
- * - `aria-expanded` is `true` in `'animating-open'`, `'open'`, and `'animating-closed'`.
13
- *
14
- * This avoids screen readers announcing the popup as closed while it is
15
- * still visually present on screen during animations, and prevents consumers
16
- * that conditionally show/hide trigger UI based on `aria-expanded` from hiding
17
- * the trigger (and thus the popup anchor) mid-animation.
18
- */
19
-
20
- export const PopupContext = /*#__PURE__*/createContext(null);
@@ -1,10 +0,0 @@
1
- import { PopupContext } from './popup-context';
2
-
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 const PopupProvider = PopupContext.Provider;
@@ -1,30 +0,0 @@
1
- /* popup-surface.tsx generated by @compiled/babel-plugin v0.39.1 */
2
- import "./popup-surface.compiled.css";
3
- import { ax, ix } from "@compiled/react/runtime";
4
- import React from 'react';
5
- const styles = {
6
- root: "_2rkofajl _1reo1wug _18m91wug _bfhk1bhr _16qs130s"
7
- };
8
-
9
- /**
10
- * Optional styled wrapper for popup content.
11
- *
12
- * Adds default visual styling (background, border-radius, box-shadow)
13
- * using design tokens. Consumers who want fully custom styling
14
- * should use `Popup.Content` without wrapping in `PopupSurface`.
15
- *
16
- * Exposed as `Popup.Surface` on the compound component.
17
- *
18
- * **Presentational primitive - `children`-only by design.** This component
19
- * intentionally exposes no `style`, `className`, `xcss`, `id`, or `ref`
20
- * props. If you need any of those, render your own wrapper element inside
21
- * `Popup.Content` instead - `PopupSurface` is the no-config "give me the
22
- * default ADS overlay look" surface, nothing more.
23
- */
24
- export function PopupSurface({
25
- children
26
- }) {
27
- return /*#__PURE__*/React.createElement("div", {
28
- className: ax([styles.root])
29
- }, children);
30
- }
@@ -1,75 +0,0 @@
1
- import { useCallback, useMemo } from 'react';
2
- import { usePopupContext } from './use-popup-context';
3
-
4
- /**
5
- * Props passed to the `TriggerFunction` render-prop child.
6
- */
7
-
8
- /**
9
- * Render-prop alternative to `Popup.Trigger`.
10
- *
11
- * Use when you need full control over the trigger element. For example,
12
- * to compose your own trigger with custom event handlers, wrap a third-party
13
- * component, or build a trigger from multiple elements.
14
- *
15
- * `Popup.Trigger` uses `cloneElement` internally, which limits composability.
16
- * `Popup.TriggerFunction` hands you the raw props and lets you wire them up.
17
- *
18
- * **Note:** This sub-component uses a render-prop pattern and is not
19
- * compatible with React Server Components (RSC). It must be used inside
20
- * a client component boundary (`'use client'`).
21
- *
22
- * @example
23
- * ```tsx
24
- * <Popup placement={{ edge: 'end' }} onClose={handleClose}>
25
- * <Popup.TriggerFunction>
26
- * {({ ref, toggle, ariaAttributes }) => (
27
- * <button ref={ref} onClick={toggle} {...ariaAttributes}>
28
- * Open
29
- * </button>
30
- * )}
31
- * </Popup.TriggerFunction>
32
- * <Popup.Content role="dialog" label="My popup">
33
- * Content
34
- * </Popup.Content>
35
- * </Popup>
36
- * ```
37
- */
38
- export function PopupTriggerFunction({
39
- children
40
- }) {
41
- const {
42
- triggerRef,
43
- popoverRef,
44
- popoverId,
45
- popupState,
46
- ariaHasPopup
47
- } = usePopupContext();
48
- const ref = useCallback(node => {
49
- triggerRef.current = node;
50
- }, [triggerRef]);
51
- const toggle = useCallback(() => {
52
- const popoverEl = popoverRef.current;
53
- if (popoverEl) {
54
- // Defensive: element may be disconnected or in an unexpected state.
55
- try {
56
- popoverEl.togglePopover();
57
- } catch {}
58
- }
59
- }, [popoverRef]);
60
- const ariaAttributes = useMemo(() => ({
61
- // aria-expanded stays true throughout entry and exit animations so screen readers
62
- // don't announce the popup as closed while it's still visible, and consumers
63
- // relying on aria-expanded to show/hide trigger UI don't lose the anchor mid-animation.
64
- 'aria-expanded': popupState === 'open' || popupState === 'animating-open' || popupState === 'animating-closed',
65
- 'aria-controls': popoverId,
66
- 'aria-haspopup': ariaHasPopup
67
- }), [popupState, popoverId, ariaHasPopup]);
68
- return children({
69
- ref,
70
- isOpen: popupState === 'open' || popupState === 'animating-open',
71
- popoverId,
72
- toggle,
73
- ariaAttributes
74
- });
75
- }
@@ -1,61 +0,0 @@
1
- import React, { isValidElement, useCallback } from 'react';
2
- import { Slot } from '../internal/slot';
3
- import { usePopupContext } from './use-popup-context';
4
-
5
- /**
6
- * Wraps a single trigger element via `cloneElement`. Attaches aria
7
- * attributes, the toggle handler, and the anchor-name. `aria-haspopup`
8
- * is derived from `Popup.Content`'s role via context.
9
- *
10
- * Child constraints: must be a single ref-forwarding element. The child's
11
- * `onClick` is composed (runs after); other event handlers are NOT.
12
- * Children using Compiled's `css` prop swallow injected props - use
13
- * `Popup.TriggerFunction` for these cases or any time you need handler
14
- * composition.
15
- */
16
- export function PopupTrigger({
17
- children
18
- }) {
19
- const {
20
- triggerRef,
21
- popoverRef,
22
- popoverId,
23
- popupState,
24
- ariaHasPopup
25
- } = usePopupContext();
26
- const childOnClick = /*#__PURE__*/isValidElement(children) ? children.props.onClick : undefined;
27
-
28
- // Use a ref to track the latest isOpen value so the click handler
29
- // does not need isOpen in its dependency array (which would recreate
30
- // the handler on every open/close, breaking cloneElement identity).
31
- const isOpenRef = React.useRef(popupState === 'open' || popupState === 'animating-open');
32
- isOpenRef.current = popupState === 'open' || popupState === 'animating-open';
33
- const handleClick = useCallback(event => {
34
- const popoverEl = popoverRef.current;
35
- if (popoverEl) {
36
- // `popover="auto"` light-dismiss can close the popover BEFORE
37
- // our click handler runs, so trust React's isOpen rather than
38
- // DOM state. If React still thinks it is closed, open it; if
39
- // it was open, the browser already closed it.
40
- if (!isOpenRef.current) {
41
- try {
42
- popoverEl.showPopover();
43
- } catch {
44
- // Element may be disconnected; ignore.
45
- }
46
- }
47
- }
48
- childOnClick === null || childOnClick === void 0 ? void 0 : childOnClick(event);
49
- }, [popoverRef, childOnClick]);
50
- return /*#__PURE__*/React.createElement(Slot, {
51
- ref: triggerRef,
52
- onClick: handleClick
53
- // aria-expanded stays true throughout entry and exit animations so screen readers
54
- // don't announce the popup as closed while it's still visible, and consumers
55
- // relying on aria-expanded to show/hide trigger UI don't lose the anchor mid-animation.
56
- ,
57
- "aria-expanded": popupState === 'open' || popupState === 'animating-open' || popupState === 'animating-closed',
58
- "aria-controls": popoverId,
59
- "aria-haspopup": ariaHasPopup
60
- }, children);
61
- }
@@ -1,67 +0,0 @@
1
- import React, { useCallback, useId, useRef, useState } from 'react';
2
- import { PopupProvider } from './popup-provider';
3
- /**
4
- * Popup compound: trigger + popover content.
5
- *
6
- * Use when a button opens anchored content (dropdown, menu, dialog).
7
- * The browser manages visibility via `togglePopover()`; the consumer
8
- * never manages `isOpen`. For custom trigger lifecycles (hover, timers,
9
- * external state), use `Popover` directly instead.
10
- *
11
- * Provides context (triggerRef, placement, isOpen, onClose, mode) that
12
- * `Popup.Content` reads and forwards to the underlying `Popover`.
13
- */
14
- export function PopupRoot(props) {
15
- var _props$placement, _props$mode;
16
- const {
17
- children,
18
- testId,
19
- forceFallbackPositioning,
20
- onOpenChange
21
- } = props;
22
- // `{}` resolves to "below the trigger, centered, with `space.100` gap"
23
- // inside `useAnchorPosition`, which is the common case.
24
- const placement = (_props$placement = props.placement) !== null && _props$placement !== void 0 ? _props$placement : {};
25
- const mode = (_props$mode = props.mode) !== null && _props$mode !== void 0 ? _props$mode : 'auto';
26
-
27
- // `TPopupProps` discriminates on `mode`: `manual` types `onClose` as
28
- // `never`, so for manual consumers `props.onClose` is always `undefined`
29
- // here. No runtime guard needed; the type contract carries the rule.
30
- const onClose = props.onClose;
31
- const id = useId();
32
- // `useId()` returns IDs containing colons (`:r1:`), which are invalid
33
- // in CSS selectors and `popover` target attributes. `replaceAll` is
34
- // not in our browser matrix.
35
- const sanitizedId = id.replace(/:/g, '');
36
- const popoverId = `popover-${sanitizedId}`;
37
- const triggerRef = useRef(null);
38
- const popoverRef = useRef(null);
39
- const [popupState, setPopupState] = useState('closed');
40
- // Initial seed before `Popup.Content`'s layout effect resolves the
41
- // real role on first paint.
42
- const [ariaHasPopup, setAriaHasPopup] = useState('dialog');
43
- const handleClose = useCallback(args => {
44
- onClose === null || onClose === void 0 ? void 0 : onClose(args);
45
- }, [onClose]);
46
- const contextValue = {
47
- popoverId,
48
- placement,
49
- // `null` when the consumer did not supply a handler (manual mode, or
50
- // auto/hint without a light-dismiss handler). `Popup.Content` reads
51
- // this to decide whether to forward an `onClose` to `Popover`.
52
- onClose: onClose ? handleClose : null,
53
- triggerRef,
54
- popoverRef,
55
- popupState,
56
- setPopupState,
57
- onOpenChange,
58
- mode,
59
- ariaHasPopup,
60
- setAriaHasPopup,
61
- testId,
62
- forceFallbackPositioning
63
- };
64
- return /*#__PURE__*/React.createElement(PopupProvider, {
65
- value: contextValue
66
- }, children);
67
- }
@@ -1 +0,0 @@
1
- export {};
@@ -1,12 +0,0 @@
1
- import { useContext } from 'react';
2
- import { PopupContext } from './popup-context';
3
-
4
- /**
5
- * Returns the popup context if available, or `null` when used outside `<Popup>`.
6
- *
7
- * Used by `PopupContent` to support standalone usage (e.g. tooltip)
8
- * where values are passed as props instead of coming from a compound component.
9
- */
10
- export function useMaybePopupContext() {
11
- return useContext(PopupContext);
12
- }
@@ -1,15 +0,0 @@
1
- import { useContext } from 'react';
2
- import { PopupContext } from './popup-context';
3
-
4
- /**
5
- * Returns the nearest `Popup` context value.
6
- *
7
- * Throws if called outside of a `<Popup>` compound component.
8
- */
9
- export function usePopupContext() {
10
- const ctx = useContext(PopupContext);
11
- if (ctx === null) {
12
- throw new Error('@atlaskit/top-layer: Popup compound components must be used within <Popup>.');
13
- }
14
- return ctx;
15
- }
@@ -1,9 +0,0 @@
1
- /**
2
- * @deprecated Combined entry-point retained for backwards-compatibility.
3
- * Prefer the disjoint subpaths so that bundle analysis attributes the cost
4
- * to the right consumer:
5
- * - `@atlaskit/top-layer/dialog/create-close-event` for `createCloseEvent`
6
- * - `@atlaskit/top-layer/popover/create-close-event` for `createPopoverCloseEvent`
7
- */
8
- export { createCloseEvent } from '../dialog';
9
- export { createPopoverCloseEvent } from '../popover/create-close-event';
@@ -1 +0,0 @@
1
- export { createCloseEvent } from '../../dialog/create-close-event';
@@ -1 +0,0 @@
1
- export { createPopoverCloseEvent } from '../../popover/create-close-event';
@@ -1 +0,0 @@
1
- export { PopupSurface } from '../popup/popup-surface';
@@ -1 +0,0 @@
1
- export { Popup } from '../popup';
@@ -1,33 +0,0 @@
1
- import { PopupRoot } from './popup';
2
- import { PopupContent } from './popup-content';
3
- import { PopupSurface } from './popup-surface';
4
- import { PopupTrigger } from './popup-trigger';
5
- import { PopupTriggerFunction } from './popup-trigger-function';
6
-
7
- /**
8
- * Compound component for rendering content in the browser's top layer
9
- * using the native Popover API (`popover="auto"`).
10
- * Placement is owned by this compound: root provides it via context, Content applies it
11
- * (CSS Anchor Positioning or JS fallback).
12
- *
13
- * For default overlay styling (background, shadow, border-radius), see `PopupSurface` in the package examples.
14
- *
15
- * @example
16
- * ```tsx
17
- * <Popup placement={{ edge: 'end' }} onClose={handleClose}>
18
- * <Popup.Trigger>
19
- * <button>Open</button>
20
- * </Popup.Trigger>
21
- * <Popup.Content role="dialog" label="My popup">
22
- * Content goes here
23
- * </Popup.Content>
24
- * </Popup>
25
- * ```
26
- */
27
- var Popup = Object.assign(PopupRoot, {
28
- Trigger: PopupTrigger,
29
- TriggerFunction: PopupTriggerFunction,
30
- Content: PopupContent,
31
- Surface: PopupSurface
32
- });
33
- export { Popup };