@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
@@ -0,0 +1,86 @@
1
+ import { type TAriaHasPopupValue, type TRoleRequiringAccessibleName } from './role-types';
2
+ /**
3
+ * Roles accepted by `getAriaForTrigger`.
4
+ *
5
+ * Excludes tooltip-family roles (`tooltip`, `note`, `status`, `alert`, `log`)
6
+ * because the correct trigger wiring for those is `aria-describedby`, not
7
+ * `aria-haspopup` / `aria-expanded` / `aria-controls`. Use `aria-describedby`
8
+ * manually for tooltip triggers.
9
+ */
10
+ type TAriaForTriggerRole = TRoleRequiringAccessibleName | 'listbox' | 'tree' | 'grid';
11
+ type TGetAriaForTriggerOptions = {
12
+ /**
13
+ * The `role` that will be set on the `<Popover>` element. Used to derive
14
+ * the correct `aria-haspopup` value for the trigger.
15
+ */
16
+ role: TAriaForTriggerRole;
17
+ /**
18
+ * Whether the popover is currently open. Drives `aria-expanded`.
19
+ */
20
+ isOpen: boolean;
21
+ /**
22
+ * The popover identifier - the value returned by `usePopoverId()`,
23
+ * passed as `id` to `<Popover>` and referenced here via `aria-controls`.
24
+ */
25
+ popoverId: string;
26
+ };
27
+ /**
28
+ * Non-undefined subset of `TAriaHasPopupValue`. Every role accepted by
29
+ * `getAriaForTrigger` maps to a concrete `aria-haspopup` string, so the
30
+ * trigger always receives a defined attribute value.
31
+ */
32
+ type TAriaHasPopupForTrigger = Exclude<TAriaHasPopupValue, undefined>;
33
+ type TAriaForTrigger = {
34
+ 'aria-haspopup': TAriaHasPopupForTrigger;
35
+ 'aria-expanded': boolean;
36
+ 'aria-controls': string;
37
+ };
38
+ /**
39
+ * Returns the ARIA attributes to spread onto a click-activated popover trigger.
40
+ *
41
+ * Centralises three attributes that are easy to forget or get wrong individually:
42
+ *
43
+ * - `aria-haspopup` - derived from the popover's role (e.g. `dialog → "dialog"`,
44
+ * `menu → "menu"`, `tooltip → undefined`). React omits the attribute when
45
+ * the value is `undefined`.
46
+ * - `aria-expanded` - reflects the current open state.
47
+ * - `aria-controls` - references the popover element by its id, even
48
+ * while the popover is closed. The relationship is stable; `aria-expanded`
49
+ * carries the current visibility state.
50
+ *
51
+ * **This function is for click/keyboard-activated popovers only.** For
52
+ * hover-driven tooltips, the trigger should use `aria-describedby` instead.
53
+ *
54
+ * @example
55
+ * ```tsx
56
+ * import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
57
+ * import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
58
+ *
59
+ * const popoverId = usePopoverId();
60
+ * const [isOpen, setIsOpen] = useState(false);
61
+ *
62
+ * return (
63
+ * <>
64
+ * <button
65
+ * ref={triggerRef}
66
+ * onClick={() => setIsOpen((previous) => !previous)}
67
+ * {...getAriaForTrigger({ role: 'dialog', isOpen, popoverId })}
68
+ * >
69
+ * Open
70
+ * </button>
71
+ * <Popover
72
+ * id={popoverId}
73
+ * role="dialog"
74
+ * label="My dialog"
75
+ * isOpen={isOpen}
76
+ * triggerRef={triggerRef}
77
+ * onClose={() => setIsOpen(false)}
78
+ * >
79
+ * …
80
+ * </Popover>
81
+ * </>
82
+ * );
83
+ * ```
84
+ */
85
+ export declare function getAriaForTrigger({ role, isOpen, popoverId, }: TGetAriaForTriggerOptions): TAriaForTrigger;
86
+ export {};
@@ -61,4 +61,11 @@ export type TAriaRoleOptional = ({
61
61
  } & TAccessibleNameRequired) | ({
62
62
  role?: TRoleWithImplicitName;
63
63
  } & TAccessibleNameOptional);
64
+ /**
65
+ * Returns `true` when the given popover role moves focus into the popover
66
+ * on open, and `false` otherwise (including when `role` is `undefined`).
67
+ */
68
+ export declare function shouldFocusIntoPopover({ role, }: {
69
+ role: TRoleRequiringAccessibleName | TRoleWithImplicitName | undefined;
70
+ }): boolean;
64
71
  export {};
@@ -2,7 +2,7 @@ import { type ForwardRefExoticComponent, type ReactNode, type RefAttributes } fr
2
2
  /**
3
3
  * Extra DOM/event props are passed through to the cloned child.
4
4
  */
5
- export type TSlotProps = {
5
+ export type SlotProps = {
6
6
  children: ReactNode;
7
7
  } & Record<string, unknown>;
8
8
  /**
@@ -26,4 +26,4 @@ export type TSlotProps = {
26
26
  * </Slot>
27
27
  * ```
28
28
  */
29
- export declare const Slot: ForwardRefExoticComponent<TSlotProps & RefAttributes<HTMLElement>>;
29
+ export declare const Slot: ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>;
@@ -13,8 +13,7 @@ import type { TPopoverCloseReason } from './types';
13
13
  *
14
14
  * @example
15
15
  * ```tsx
16
- * import { createPopoverCloseEvent } from '@atlaskit/top-layer/create-close-event';
17
- * import { type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
16
+ * import { createPopoverCloseEvent, type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
18
17
  *
19
18
  * function onPopoverClose({ reason }: { reason: TPopoverCloseReason }) {
20
19
  * legacyOnClose(createPopoverCloseEvent({ reason }));
@@ -1,3 +1,3 @@
1
1
  export { Popover } from './popover';
2
2
  export { createPopoverCloseEvent } from './create-close-event';
3
- export type { TPopoverCloseReason, TPopoverProps } from './types';
3
+ export type { TPopoverCloseReason, TPopoverProps, TPlacementOptions } from './types';
@@ -5,20 +5,13 @@
5
5
  import React from 'react';
6
6
  import { type TPopoverForwardedProps } from './types';
7
7
  /**
8
- * Unopinionated top-layer primitive.
8
+ * Unopinionated top-layer primitive. Manages visibility and animation only;
9
+ * compose with `useAnchorPosition` / `useWidthFromAnchor` for positioning.
9
10
  *
10
- * Manages only visibility (isOpen) and animation (animate). Has no knowledge
11
- * of positioning - compose with `useAnchorPosition` for anchor positioning
12
- * and optionally `useWidthFromAnchor` for setting the width of a popover element
13
- * relative to its anchor trigger.
11
+ * `isOpen={true}` calls `showPopover()` (entry via `@starting-style`);
12
+ * `isOpen={false}` calls `hidePopover()` (exit via `allow-discrete`).
14
13
  *
15
- * Visibility is driven by the `isOpen` prop:
16
- * - `isOpen={true}` → `showPopover()`, entry animation via `@starting-style`
17
- * - `isOpen={false}` → `hidePopover()`, exit animation via `allow-discrete`
18
- *
19
- * For `mode="auto"`, the browser can dismiss the popover via light dismiss
20
- * (Escape, click outside). When that happens, `onClose` is called and the
21
- * consumer must set `isOpen` to `false`. The DOM owns the dismiss; React
22
- * must follow.
14
+ * In `mode="auto"`, the browser can light-dismiss (Escape, click outside).
15
+ * `onClose` fires; the consumer must then set `isOpen` to `false`.
23
16
  */
24
17
  export declare const Popover: React.ForwardRefExoticComponent<TPopoverForwardedProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,8 +1,8 @@
1
1
  import { type ReactNode } from 'react';
2
2
  import { type StrictXCSSProp } from '@atlaskit/css';
3
3
  import { type TAnimationPreset } from '../animations/types';
4
+ import { type TPlacementOptions } from '../internal/resolve-placement';
4
5
  import { type TAriaRoleRequired, type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
5
- import { type TPlacementOptions } from '../popup/types';
6
6
  /**
7
7
  * The reason a popover was closed.
8
8
  *
@@ -31,6 +31,7 @@ export type TPopoverForwardedProps = TPopoverBaseProps & {
31
31
  label?: string;
32
32
  labelledBy?: string;
33
33
  };
34
+ export type { TPlacementOptions };
34
35
  type TPopoverBaseProps = {
35
36
  children: ReactNode;
36
37
  /**
@@ -51,8 +52,9 @@ type TPopoverBaseProps = {
51
52
  testId?: string;
52
53
  /**
53
54
  * HTML `id` attribute for the popover element. When omitted, a unique ID
54
- * is generated automatically. The `<Popup>` compound passes its context ID
55
- * so that `Popup.Trigger` can reference it via `aria-controls` / `popovertarget`.
55
+ * is generated automatically. Pair the trigger with this ID via `aria-controls`
56
+ * and the popover with `popovertarget`. Use `usePopoverId()` to generate a
57
+ * stable, CSS-safe id.
56
58
  */
57
59
  id?: string;
58
60
  /**
@@ -109,7 +111,7 @@ type TPopoverBaseProps = {
109
111
  * Called after the entry animation completes (or immediately on open when
110
112
  * there is no animation or reduced motion is active).
111
113
  *
112
- * Use this for external lifecycle coordination — e.g. notifying a manager
114
+ * Use this for external lifecycle coordination - e.g. notifying a manager
113
115
  * that the show sequence is finished.
114
116
  */
115
117
  onEnterFinish?: () => void;
@@ -178,4 +180,3 @@ export type TPopoverProps = TPopoverBaseProps & TAriaRoleRequired & ({
178
180
  * Falls back to a one-off measurement of the anchor's width.
179
181
  */
180
182
  export type TWidthFromAnchorMode = 'none' | 'match-anchor' | 'min-anchor';
181
- export {};
@@ -0,0 +1,2 @@
1
+ export { PopoverSurface } from './popover-surface';
2
+ export type { TPopoverSurfaceProps } from './popover-surface';
@@ -0,0 +1,21 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import React, { type ReactNode } from 'react';
6
+ export type TPopoverSurfaceProps = {
7
+ children: ReactNode;
8
+ };
9
+ /**
10
+ * Optional styled wrapper for popover content.
11
+ *
12
+ * Adds default visual styling (background, border-radius, box-shadow)
13
+ * using design tokens.
14
+ *
15
+ * Presentational primitive - `children`-only by design. This component
16
+ * intentionally exposes no `style`, `className`, `xcss`, `id`, or `ref`
17
+ * props. If you need any of those, render your own wrapper element inside
18
+ * `Popover` instead. `PopoverSurface` is the no-config "give me the default
19
+ * ADS overlay look" surface, nothing more.
20
+ */
21
+ export declare function PopoverSurface({ children }: TPopoverSurfaceProps): React.ReactElement;
@@ -18,10 +18,10 @@ type TSlideAndFadeOptions = {
18
18
  * import { slideAndFade } from '@atlaskit/top-layer/animations';
19
19
  *
20
20
  * // Default 4px slide (tooltip)
21
- * <Popup.Content animate={slideAndFade()} />
21
+ * <Popover animate={slideAndFade()} />
22
22
  *
23
23
  * // Custom 8px slide (popup / dropdown)
24
- * <Popup.Content animate={slideAndFade({ distance: 8 })} />
24
+ * <Popover animate={slideAndFade({ distance: 8 })} />
25
25
  * ```
26
26
  */
27
27
  export declare function slideAndFade(options?: TSlideAndFadeOptions): TAnimationPreset;
@@ -34,7 +34,7 @@ export declare function slideAndFade(options?: TSlideAndFadeOptions): TAnimation
34
34
  * ```tsx
35
35
  * import { fade } from '@atlaskit/top-layer/animations';
36
36
  *
37
- * <Popup.Content animate={fade()} />
37
+ * <Popover animate={fade()} />
38
38
  * ```
39
39
  */
40
40
  export declare function fade(): TAnimationPreset;
@@ -47,7 +47,7 @@ export declare function fade(): TAnimationPreset;
47
47
  * ```tsx
48
48
  * import { scaleAndFade } from '@atlaskit/top-layer/animations';
49
49
  *
50
- * <Popup.Content animate={scaleAndFade()} />
50
+ * <Popover animate={scaleAndFade()} />
51
51
  * ```
52
52
  */
53
53
  export declare function scaleAndFade(): TAnimationPreset;
@@ -1,4 +1,4 @@
1
- import type { TPlacementOptions } from '../popup/types';
1
+ import type { TPlacementOptions } from '../internal/resolve-placement';
2
2
  /**
3
3
  * A self-contained animation preset for top-layer elements (popovers and dialogs).
4
4
  *
@@ -36,11 +36,3 @@ export type TAnimationPreset = {
36
36
  */
37
37
  exitDurationMs: number;
38
38
  };
39
- /**
40
- * @deprecated Use `TAnimationPreset` instead.
41
- */
42
- export type TPopoverAnimationPreset = TAnimationPreset;
43
- /**
44
- * @deprecated Use `TAnimationPreset` instead.
45
- */
46
- export type TDialogAnimationPreset = TAnimationPreset;
@@ -11,8 +11,7 @@ import type { TDialogCloseReason } from './types';
11
11
  *
12
12
  * @example
13
13
  * ```tsx
14
- * import { createCloseEvent } from '@atlaskit/top-layer/create-close-event';
15
- * import { type TDialogCloseReason } from '@atlaskit/top-layer/dialog';
14
+ * import { createCloseEvent, type TDialogCloseReason } from '@atlaskit/top-layer/dialog';
16
15
  *
17
16
  * function onDialogClose({ reason }: { reason: TDialogCloseReason }) {
18
17
  * legacyOnClose(createCloseEvent({ reason }));
@@ -49,14 +49,6 @@ 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.
60
52
  */
61
53
  style?: CSSProperties;
62
54
  /**
@@ -1,2 +1,2 @@
1
1
  export { slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade, } from '../animations/presets';
2
- export type { TAnimationPreset, TPopoverAnimationPreset, TDialogAnimationPreset, } from '../animations/types';
2
+ export type { TAnimationPreset } from '../animations/types';
@@ -1,2 +1,2 @@
1
- export { Dialog } from '../dialog';
1
+ export { createCloseEvent, Dialog } from '../dialog';
2
2
  export type { TDialogCloseReason, TDialogProps } from '../dialog';
@@ -0,0 +1 @@
1
+ export { getAriaForTrigger } from '../internal/get-aria-for-trigger';
@@ -0,0 +1,2 @@
1
+ export { PopoverSurface } from '../popover-surface';
2
+ export type { TPopoverSurfaceProps } from '../popover-surface';
@@ -1,2 +1,2 @@
1
- export { Popover } from '../popover';
2
- export type { TPopoverProps, TPopoverCloseReason } from '../popover';
1
+ export { createPopoverCloseEvent, Popover } from '../popover';
2
+ export type { TPopoverProps, TPopoverCloseReason, TPlacementOptions } from '../popover';
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Returns a stable HTML `id` used to wire a trigger element to its popover
3
+ * via ARIA (`aria-controls`) and the Popover API (`popovertarget`).
4
+ *
5
+ * The returned value is intended for the `id` attribute on the popover and
6
+ * for the matching `aria-controls` / `popovertarget` references on the
7
+ * trigger. It is NOT a CSS `anchor-name` value: CSS anchor positioning is
8
+ * handled internally by `useAnchorPosition`, which mints and applies its
9
+ * own `anchor-name` on the trigger element.
10
+ */
11
+ export declare function usePopoverId(): string;
@@ -0,0 +1,86 @@
1
+ import { type TAriaHasPopupValue, type TRoleRequiringAccessibleName } from './role-types';
2
+ /**
3
+ * Roles accepted by `getAriaForTrigger`.
4
+ *
5
+ * Excludes tooltip-family roles (`tooltip`, `note`, `status`, `alert`, `log`)
6
+ * because the correct trigger wiring for those is `aria-describedby`, not
7
+ * `aria-haspopup` / `aria-expanded` / `aria-controls`. Use `aria-describedby`
8
+ * manually for tooltip triggers.
9
+ */
10
+ type TAriaForTriggerRole = TRoleRequiringAccessibleName | 'listbox' | 'tree' | 'grid';
11
+ type TGetAriaForTriggerOptions = {
12
+ /**
13
+ * The `role` that will be set on the `<Popover>` element. Used to derive
14
+ * the correct `aria-haspopup` value for the trigger.
15
+ */
16
+ role: TAriaForTriggerRole;
17
+ /**
18
+ * Whether the popover is currently open. Drives `aria-expanded`.
19
+ */
20
+ isOpen: boolean;
21
+ /**
22
+ * The popover identifier - the value returned by `usePopoverId()`,
23
+ * passed as `id` to `<Popover>` and referenced here via `aria-controls`.
24
+ */
25
+ popoverId: string;
26
+ };
27
+ /**
28
+ * Non-undefined subset of `TAriaHasPopupValue`. Every role accepted by
29
+ * `getAriaForTrigger` maps to a concrete `aria-haspopup` string, so the
30
+ * trigger always receives a defined attribute value.
31
+ */
32
+ type TAriaHasPopupForTrigger = Exclude<TAriaHasPopupValue, undefined>;
33
+ type TAriaForTrigger = {
34
+ 'aria-haspopup': TAriaHasPopupForTrigger;
35
+ 'aria-expanded': boolean;
36
+ 'aria-controls': string;
37
+ };
38
+ /**
39
+ * Returns the ARIA attributes to spread onto a click-activated popover trigger.
40
+ *
41
+ * Centralises three attributes that are easy to forget or get wrong individually:
42
+ *
43
+ * - `aria-haspopup` - derived from the popover's role (e.g. `dialog → "dialog"`,
44
+ * `menu → "menu"`, `tooltip → undefined`). React omits the attribute when
45
+ * the value is `undefined`.
46
+ * - `aria-expanded` - reflects the current open state.
47
+ * - `aria-controls` - references the popover element by its id, even
48
+ * while the popover is closed. The relationship is stable; `aria-expanded`
49
+ * carries the current visibility state.
50
+ *
51
+ * **This function is for click/keyboard-activated popovers only.** For
52
+ * hover-driven tooltips, the trigger should use `aria-describedby` instead.
53
+ *
54
+ * @example
55
+ * ```tsx
56
+ * import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
57
+ * import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
58
+ *
59
+ * const popoverId = usePopoverId();
60
+ * const [isOpen, setIsOpen] = useState(false);
61
+ *
62
+ * return (
63
+ * <>
64
+ * <button
65
+ * ref={triggerRef}
66
+ * onClick={() => setIsOpen((previous) => !previous)}
67
+ * {...getAriaForTrigger({ role: 'dialog', isOpen, popoverId })}
68
+ * >
69
+ * Open
70
+ * </button>
71
+ * <Popover
72
+ * id={popoverId}
73
+ * role="dialog"
74
+ * label="My dialog"
75
+ * isOpen={isOpen}
76
+ * triggerRef={triggerRef}
77
+ * onClose={() => setIsOpen(false)}
78
+ * >
79
+ * …
80
+ * </Popover>
81
+ * </>
82
+ * );
83
+ * ```
84
+ */
85
+ export declare function getAriaForTrigger({ role, isOpen, popoverId, }: TGetAriaForTriggerOptions): TAriaForTrigger;
86
+ export {};
@@ -61,4 +61,11 @@ export type TAriaRoleOptional = ({
61
61
  } & TAccessibleNameRequired) | ({
62
62
  role?: TRoleWithImplicitName;
63
63
  } & TAccessibleNameOptional);
64
+ /**
65
+ * Returns `true` when the given popover role moves focus into the popover
66
+ * on open, and `false` otherwise (including when `role` is `undefined`).
67
+ */
68
+ export declare function shouldFocusIntoPopover({ role, }: {
69
+ role: TRoleRequiringAccessibleName | TRoleWithImplicitName | undefined;
70
+ }): boolean;
64
71
  export {};
@@ -2,7 +2,7 @@ import { type ForwardRefExoticComponent, type ReactNode, type RefAttributes } fr
2
2
  /**
3
3
  * Extra DOM/event props are passed through to the cloned child.
4
4
  */
5
- export type TSlotProps = {
5
+ export type SlotProps = {
6
6
  children: ReactNode;
7
7
  } & Record<string, unknown>;
8
8
  /**
@@ -26,4 +26,4 @@ export type TSlotProps = {
26
26
  * </Slot>
27
27
  * ```
28
28
  */
29
- export declare const Slot: ForwardRefExoticComponent<TSlotProps & RefAttributes<HTMLElement>>;
29
+ export declare const Slot: ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>;
@@ -13,8 +13,7 @@ import type { TPopoverCloseReason } from './types';
13
13
  *
14
14
  * @example
15
15
  * ```tsx
16
- * import { createPopoverCloseEvent } from '@atlaskit/top-layer/create-close-event';
17
- * import { type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
16
+ * import { createPopoverCloseEvent, type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
18
17
  *
19
18
  * function onPopoverClose({ reason }: { reason: TPopoverCloseReason }) {
20
19
  * legacyOnClose(createPopoverCloseEvent({ reason }));
@@ -1,3 +1,3 @@
1
1
  export { Popover } from './popover';
2
2
  export { createPopoverCloseEvent } from './create-close-event';
3
- export type { TPopoverCloseReason, TPopoverProps } from './types';
3
+ export type { TPopoverCloseReason, TPopoverProps, TPlacementOptions } from './types';
@@ -5,20 +5,13 @@
5
5
  import React from 'react';
6
6
  import { type TPopoverForwardedProps } from './types';
7
7
  /**
8
- * Unopinionated top-layer primitive.
8
+ * Unopinionated top-layer primitive. Manages visibility and animation only;
9
+ * compose with `useAnchorPosition` / `useWidthFromAnchor` for positioning.
9
10
  *
10
- * Manages only visibility (isOpen) and animation (animate). Has no knowledge
11
- * of positioning - compose with `useAnchorPosition` for anchor positioning
12
- * and optionally `useWidthFromAnchor` for setting the width of a popover element
13
- * relative to its anchor trigger.
11
+ * `isOpen={true}` calls `showPopover()` (entry via `@starting-style`);
12
+ * `isOpen={false}` calls `hidePopover()` (exit via `allow-discrete`).
14
13
  *
15
- * Visibility is driven by the `isOpen` prop:
16
- * - `isOpen={true}` → `showPopover()`, entry animation via `@starting-style`
17
- * - `isOpen={false}` → `hidePopover()`, exit animation via `allow-discrete`
18
- *
19
- * For `mode="auto"`, the browser can dismiss the popover via light dismiss
20
- * (Escape, click outside). When that happens, `onClose` is called and the
21
- * consumer must set `isOpen` to `false`. The DOM owns the dismiss; React
22
- * must follow.
14
+ * In `mode="auto"`, the browser can light-dismiss (Escape, click outside).
15
+ * `onClose` fires; the consumer must then set `isOpen` to `false`.
23
16
  */
24
17
  export declare const Popover: React.ForwardRefExoticComponent<TPopoverForwardedProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,8 +1,8 @@
1
1
  import { type ReactNode } from 'react';
2
2
  import { type StrictXCSSProp } from '@atlaskit/css';
3
3
  import { type TAnimationPreset } from '../animations/types';
4
+ import { type TPlacementOptions } from '../internal/resolve-placement';
4
5
  import { type TAriaRoleRequired, type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
5
- import { type TPlacementOptions } from '../popup/types';
6
6
  /**
7
7
  * The reason a popover was closed.
8
8
  *
@@ -31,6 +31,7 @@ export type TPopoverForwardedProps = TPopoverBaseProps & {
31
31
  label?: string;
32
32
  labelledBy?: string;
33
33
  };
34
+ export type { TPlacementOptions };
34
35
  type TPopoverBaseProps = {
35
36
  children: ReactNode;
36
37
  /**
@@ -51,8 +52,9 @@ type TPopoverBaseProps = {
51
52
  testId?: string;
52
53
  /**
53
54
  * HTML `id` attribute for the popover element. When omitted, a unique ID
54
- * is generated automatically. The `<Popup>` compound passes its context ID
55
- * so that `Popup.Trigger` can reference it via `aria-controls` / `popovertarget`.
55
+ * is generated automatically. Pair the trigger with this ID via `aria-controls`
56
+ * and the popover with `popovertarget`. Use `usePopoverId()` to generate a
57
+ * stable, CSS-safe id.
56
58
  */
57
59
  id?: string;
58
60
  /**
@@ -109,7 +111,7 @@ type TPopoverBaseProps = {
109
111
  * Called after the entry animation completes (or immediately on open when
110
112
  * there is no animation or reduced motion is active).
111
113
  *
112
- * Use this for external lifecycle coordination — e.g. notifying a manager
114
+ * Use this for external lifecycle coordination - e.g. notifying a manager
113
115
  * that the show sequence is finished.
114
116
  */
115
117
  onEnterFinish?: () => void;
@@ -178,4 +180,3 @@ export type TPopoverProps = TPopoverBaseProps & TAriaRoleRequired & ({
178
180
  * Falls back to a one-off measurement of the anchor's width.
179
181
  */
180
182
  export type TWidthFromAnchorMode = 'none' | 'match-anchor' | 'min-anchor';
181
- export {};
@@ -0,0 +1,2 @@
1
+ export { PopoverSurface } from './popover-surface';
2
+ export type { TPopoverSurfaceProps } from './popover-surface';
@@ -0,0 +1,21 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import React, { type ReactNode } from 'react';
6
+ export type TPopoverSurfaceProps = {
7
+ children: ReactNode;
8
+ };
9
+ /**
10
+ * Optional styled wrapper for popover content.
11
+ *
12
+ * Adds default visual styling (background, border-radius, box-shadow)
13
+ * using design tokens.
14
+ *
15
+ * Presentational primitive - `children`-only by design. This component
16
+ * intentionally exposes no `style`, `className`, `xcss`, `id`, or `ref`
17
+ * props. If you need any of those, render your own wrapper element inside
18
+ * `Popover` instead. `PopoverSurface` is the no-config "give me the default
19
+ * ADS overlay look" surface, nothing more.
20
+ */
21
+ export declare function PopoverSurface({ children }: TPopoverSurfaceProps): React.ReactElement;
@@ -0,0 +1,17 @@
1
+ {
2
+ "name": "@atlaskit/top-layer/get-aria-for-trigger",
3
+ "main": "../dist/cjs/entry-points/get-aria-for-trigger.js",
4
+ "module": "../dist/esm/entry-points/get-aria-for-trigger.js",
5
+ "module:es2019": "../dist/es2019/entry-points/get-aria-for-trigger.js",
6
+ "sideEffects": [
7
+ "*.compiled.css"
8
+ ],
9
+ "types": "../dist/types/entry-points/get-aria-for-trigger.d.ts",
10
+ "typesVersions": {
11
+ ">=4.5 <5.9": {
12
+ "*": [
13
+ "../dist/types-ts4.5/entry-points/get-aria-for-trigger.d.ts"
14
+ ]
15
+ }
16
+ }
17
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/top-layer",
3
- "version": "0.13.0",
3
+ "version": "0.15.0",
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",
@@ -37,8 +37,8 @@
37
37
  "@atlaskit/browser-apis": "^0.0.2",
38
38
  "@atlaskit/css": "^0.19.0",
39
39
  "@atlaskit/ds-lib": "^7.0.0",
40
- "@atlaskit/layering": "^3.7.0",
41
- "@atlaskit/tokens": "^13.1.0",
40
+ "@atlaskit/layering": "^3.8.0",
41
+ "@atlaskit/tokens": "^13.3.0",
42
42
  "@babel/runtime": "^7.0.0",
43
43
  "@compiled/react": "^0.20.0",
44
44
  "bind-event-listener": "^3.0.0",
@@ -0,0 +1,17 @@
1
+ {
2
+ "name": "@atlaskit/top-layer/popover-surface",
3
+ "main": "../dist/cjs/entry-points/popover-surface.js",
4
+ "module": "../dist/esm/entry-points/popover-surface.js",
5
+ "module:es2019": "../dist/es2019/entry-points/popover-surface.js",
6
+ "sideEffects": [
7
+ "*.compiled.css"
8
+ ],
9
+ "types": "../dist/types/entry-points/popover-surface.d.ts",
10
+ "typesVersions": {
11
+ ">=4.5 <5.9": {
12
+ "*": [
13
+ "../dist/types-ts4.5/entry-points/popover-surface.d.ts"
14
+ ]
15
+ }
16
+ }
17
+ }