@atlaskit/top-layer 0.13.0 → 0.14.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 (141) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/README.md +61 -34
  3. package/dist/cjs/animations/presets.js +4 -4
  4. package/dist/cjs/entry-points/get-aria-for-trigger.js +12 -0
  5. package/dist/cjs/entry-points/popover-surface.js +12 -0
  6. package/dist/cjs/entry-points/use-popover-id.js +21 -0
  7. package/dist/cjs/internal/get-aria-for-trigger.js +88 -0
  8. package/dist/cjs/internal/role-types.js +64 -1
  9. package/dist/cjs/internal/slot.js +1 -1
  10. package/dist/cjs/internal/use-anchor-position.js +30 -14
  11. package/dist/cjs/popover/popover.js +79 -80
  12. package/dist/cjs/popover-surface/index.js +12 -0
  13. package/dist/cjs/{popup/popup-surface.js → popover-surface/popover-surface.js} +9 -12
  14. package/dist/cjs/testing/polyfill.js +9 -6
  15. package/dist/es2019/animations/presets.js +4 -4
  16. package/dist/es2019/entry-points/get-aria-for-trigger.js +1 -0
  17. package/dist/es2019/entry-points/popover-surface.js +1 -0
  18. package/dist/es2019/entry-points/use-popover-id.js +15 -0
  19. package/dist/es2019/internal/get-aria-for-trigger.js +84 -0
  20. package/dist/es2019/internal/role-types.js +59 -0
  21. package/dist/es2019/internal/slot.js +1 -1
  22. package/dist/es2019/internal/use-anchor-position.js +16 -12
  23. package/dist/es2019/popover/popover.js +79 -80
  24. package/dist/es2019/popover-surface/index.js +1 -0
  25. package/dist/es2019/popover-surface/popover-surface.js +27 -0
  26. package/dist/es2019/testing/polyfill.js +9 -6
  27. package/dist/esm/animations/presets.js +4 -4
  28. package/dist/esm/entry-points/get-aria-for-trigger.js +1 -0
  29. package/dist/esm/entry-points/popover-surface.js +1 -0
  30. package/dist/esm/entry-points/use-popover-id.js +15 -0
  31. package/dist/esm/internal/get-aria-for-trigger.js +83 -0
  32. package/dist/esm/internal/role-types.js +58 -0
  33. package/dist/esm/internal/slot.js +1 -1
  34. package/dist/esm/internal/use-anchor-position.js +30 -14
  35. package/dist/esm/popover/popover.js +79 -80
  36. package/dist/esm/popover-surface/index.js +1 -0
  37. package/dist/esm/popover-surface/popover-surface.js +26 -0
  38. package/dist/esm/testing/polyfill.js +9 -6
  39. package/dist/types/animations/presets.d.ts +4 -4
  40. package/dist/types/animations/types.d.ts +1 -1
  41. package/dist/types/dialog/types.d.ts +0 -8
  42. package/dist/types/entry-points/get-aria-for-trigger.d.ts +1 -0
  43. package/dist/types/entry-points/popover-surface.d.ts +2 -0
  44. package/dist/types/entry-points/popover.d.ts +1 -1
  45. package/dist/types/entry-points/use-popover-id.d.ts +11 -0
  46. package/dist/types/internal/get-aria-for-trigger.d.ts +86 -0
  47. package/dist/types/internal/role-types.d.ts +7 -0
  48. package/dist/types/internal/slot.d.ts +2 -2
  49. package/dist/types/popover/index.d.ts +1 -1
  50. package/dist/types/popover/popover.d.ts +6 -13
  51. package/dist/types/popover/types.d.ts +6 -5
  52. package/dist/types/popover-surface/index.d.ts +2 -0
  53. package/dist/types/popover-surface/popover-surface.d.ts +21 -0
  54. package/dist/types-ts4.5/animations/presets.d.ts +4 -4
  55. package/dist/types-ts4.5/animations/types.d.ts +1 -1
  56. package/dist/types-ts4.5/dialog/types.d.ts +0 -8
  57. package/dist/types-ts4.5/entry-points/get-aria-for-trigger.d.ts +1 -0
  58. package/dist/types-ts4.5/entry-points/popover-surface.d.ts +2 -0
  59. package/dist/types-ts4.5/entry-points/popover.d.ts +1 -1
  60. package/dist/types-ts4.5/entry-points/use-popover-id.d.ts +11 -0
  61. package/dist/types-ts4.5/internal/get-aria-for-trigger.d.ts +86 -0
  62. package/dist/types-ts4.5/internal/role-types.d.ts +7 -0
  63. package/dist/types-ts4.5/internal/slot.d.ts +2 -2
  64. package/dist/types-ts4.5/popover/index.d.ts +1 -1
  65. package/dist/types-ts4.5/popover/popover.d.ts +6 -13
  66. package/dist/types-ts4.5/popover/types.d.ts +6 -5
  67. package/dist/types-ts4.5/popover-surface/index.d.ts +2 -0
  68. package/dist/types-ts4.5/popover-surface/popover-surface.d.ts +21 -0
  69. package/get-aria-for-trigger/package.json +17 -0
  70. package/package.json +3 -3
  71. package/popover-surface/package.json +17 -0
  72. package/use-popover-id/package.json +17 -0
  73. package/dist/cjs/entry-points/popup-surface.js +0 -12
  74. package/dist/cjs/entry-points/popup.js +0 -12
  75. package/dist/cjs/popup/index.js +0 -37
  76. package/dist/cjs/popup/popup-content.js +0 -215
  77. package/dist/cjs/popup/popup-context.js +0 -25
  78. package/dist/cjs/popup/popup-provider.js +0 -15
  79. package/dist/cjs/popup/popup-trigger-function.js +0 -80
  80. package/dist/cjs/popup/popup-trigger.js +0 -66
  81. package/dist/cjs/popup/popup.js +0 -81
  82. package/dist/cjs/popup/types.js +0 -5
  83. package/dist/cjs/popup/use-maybe-popup-context.js +0 -17
  84. package/dist/cjs/popup/use-popup-context.js +0 -20
  85. package/dist/es2019/entry-points/popup-surface.js +0 -1
  86. package/dist/es2019/entry-points/popup.js +0 -1
  87. package/dist/es2019/popup/index.js +0 -33
  88. package/dist/es2019/popup/popup-content.js +0 -207
  89. package/dist/es2019/popup/popup-context.js +0 -20
  90. package/dist/es2019/popup/popup-provider.js +0 -10
  91. package/dist/es2019/popup/popup-surface.js +0 -30
  92. package/dist/es2019/popup/popup-trigger-function.js +0 -75
  93. package/dist/es2019/popup/popup-trigger.js +0 -61
  94. package/dist/es2019/popup/popup.js +0 -67
  95. package/dist/es2019/popup/types.js +0 -1
  96. package/dist/es2019/popup/use-maybe-popup-context.js +0 -12
  97. package/dist/es2019/popup/use-popup-context.js +0 -15
  98. package/dist/esm/entry-points/popup-surface.js +0 -1
  99. package/dist/esm/entry-points/popup.js +0 -1
  100. package/dist/esm/popup/index.js +0 -33
  101. package/dist/esm/popup/popup-content.js +0 -207
  102. package/dist/esm/popup/popup-context.js +0 -20
  103. package/dist/esm/popup/popup-provider.js +0 -10
  104. package/dist/esm/popup/popup-surface.js +0 -29
  105. package/dist/esm/popup/popup-trigger-function.js +0 -75
  106. package/dist/esm/popup/popup-trigger.js +0 -59
  107. package/dist/esm/popup/popup.js +0 -72
  108. package/dist/esm/popup/types.js +0 -1
  109. package/dist/esm/popup/use-maybe-popup-context.js +0 -12
  110. package/dist/esm/popup/use-popup-context.js +0 -15
  111. package/dist/types/entry-points/popup-surface.d.ts +0 -2
  112. package/dist/types/entry-points/popup.d.ts +0 -2
  113. package/dist/types/popup/index.d.ts +0 -34
  114. package/dist/types/popup/popup-content.d.ts +0 -14
  115. package/dist/types/popup/popup-context.d.ts +0 -96
  116. package/dist/types/popup/popup-provider.d.ts +0 -10
  117. package/dist/types/popup/popup-surface.d.ts +0 -22
  118. package/dist/types/popup/popup-trigger-function.d.ts +0 -112
  119. package/dist/types/popup/popup-trigger.d.ts +0 -14
  120. package/dist/types/popup/popup.d.ts +0 -14
  121. package/dist/types/popup/types.d.ts +0 -321
  122. package/dist/types/popup/use-maybe-popup-context.d.ts +0 -8
  123. package/dist/types/popup/use-popup-context.d.ts +0 -7
  124. package/dist/types-ts4.5/entry-points/popup-surface.d.ts +0 -2
  125. package/dist/types-ts4.5/entry-points/popup.d.ts +0 -2
  126. package/dist/types-ts4.5/popup/index.d.ts +0 -34
  127. package/dist/types-ts4.5/popup/popup-content.d.ts +0 -14
  128. package/dist/types-ts4.5/popup/popup-context.d.ts +0 -96
  129. package/dist/types-ts4.5/popup/popup-provider.d.ts +0 -10
  130. package/dist/types-ts4.5/popup/popup-surface.d.ts +0 -22
  131. package/dist/types-ts4.5/popup/popup-trigger-function.d.ts +0 -112
  132. package/dist/types-ts4.5/popup/popup-trigger.d.ts +0 -14
  133. package/dist/types-ts4.5/popup/popup.d.ts +0 -14
  134. package/dist/types-ts4.5/popup/types.d.ts +0 -321
  135. package/dist/types-ts4.5/popup/use-maybe-popup-context.d.ts +0 -8
  136. package/dist/types-ts4.5/popup/use-popup-context.d.ts +0 -7
  137. package/popup/package.json +0 -17
  138. package/popup-surface/package.json +0 -17
  139. /package/dist/cjs/{popup/popup-surface.compiled.css → popover-surface/popover-surface.compiled.css} +0 -0
  140. /package/dist/es2019/{popup/popup-surface.compiled.css → popover-surface/popover-surface.compiled.css} +0 -0
  141. /package/dist/esm/{popup/popup-surface.compiled.css → popover-surface/popover-surface.compiled.css} +0 -0
@@ -1,10 +0,0 @@
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>;
@@ -1,22 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import { type TPopupSurfaceProps } from './types';
7
- /**
8
- * Optional styled wrapper for popup content.
9
- *
10
- * Adds default visual styling (background, border-radius, box-shadow)
11
- * using design tokens. Consumers who want fully custom styling
12
- * should use `Popup.Content` without wrapping in `PopupSurface`.
13
- *
14
- * Exposed as `Popup.Surface` on the compound component.
15
- *
16
- * **Presentational primitive - `children`-only by design.** This component
17
- * intentionally exposes no `style`, `className`, `xcss`, `id`, or `ref`
18
- * props. If you need any of those, render your own wrapper element inside
19
- * `Popup.Content` instead - `PopupSurface` is the no-config "give me the
20
- * default ADS overlay look" surface, nothing more.
21
- */
22
- export declare function PopupSurface({ children }: TPopupSurfaceProps): React.ReactElement;
@@ -1,112 +0,0 @@
1
- import React, { type ReactNode, type RefCallback } from 'react';
2
- import { type TAriaHasPopupValue } from '../internal/role-types';
3
- /**
4
- * Props passed to the `TriggerFunction` render-prop child.
5
- */
6
- export type TTriggerFunctionRenderProps = {
7
- /**
8
- * Ref callback to attach to the trigger element. Sets `triggerRef` in
9
- * popup context for anchor positioning and `togglePopover`.
10
- */
11
- ref: RefCallback<HTMLElement>;
12
- /**
13
- * Whether the popover content is currently visible.
14
- * Use for `aria-expanded` and conditional styling.
15
- */
16
- isOpen: boolean;
17
- /**
18
- * ID of the popover content element. Use for `aria-controls`.
19
- */
20
- popoverId: string;
21
- /**
22
- * Toggle the popover open/closed via the native Popover API.
23
- *
24
- * Calling `toggle()` invokes `popoverEl.togglePopover()` on the
25
- * underlying content element. This hides the imperative DOM API
26
- * behind a stable function reference.
27
- */
28
- toggle: () => void;
29
- /**
30
- * Pre-composed ARIA attributes for the trigger element.
31
- *
32
- * Spread these onto your trigger: `{...ariaAttributes}`.
33
- *
34
- * Contains:
35
- * - `aria-expanded`: whether the popover is open
36
- * - `aria-controls`: ID of the popover content
37
- * - `aria-haspopup`: derived from the content's ARIA role via context
38
- *
39
- * **Note on `aria-haspopup`:** When the content's role maps to a specific
40
- * popup type (`'menu'`, `'dialog'`, `'listbox'`, etc.), the corresponding
41
- * string value is emitted. For non-popup roles (`tooltip`, `note`,
42
- * `status`, `alert`, `log`) the value is `undefined`, so React drops the
43
- * attribute entirely - these triggers should not announce a popup.
44
- *
45
- * The value type (`TAriaHasPopupValue`) is internal and may narrow further
46
- * in future minor versions. Do **not** extract it via `Parameters<…>`.
47
- * Spread `ariaAttributes` directly onto the trigger; do not destructure
48
- * and re-type.
49
- */
50
- ariaAttributes: {
51
- 'aria-expanded': boolean;
52
- 'aria-controls': string;
53
- 'aria-haspopup': TAriaHasPopupValue;
54
- };
55
- };
56
- type TPopupTriggerFunctionProps = {
57
- /**
58
- * Render-prop function that receives trigger props.
59
- *
60
- * Unlike `Popup.Trigger`, this does not use `cloneElement`. The consumer
61
- * is responsible for spreading ref, ARIA attributes, and attaching `toggle`
62
- * to the appropriate event(s).
63
- *
64
- * @example
65
- * ```tsx
66
- * <Popup.TriggerFunction>
67
- * {({ ref, toggle, ariaAttributes }) => (
68
- * <button ref={ref} onClick={toggle} {...ariaAttributes}>
69
- * Open menu
70
- * </button>
71
- * )}
72
- * </Popup.TriggerFunction>
73
- * ```
74
- *
75
- * **Note:** This sub-component uses a render-prop pattern and is not
76
- * compatible with React Server Components (RSC). It must be used
77
- * inside a client component boundary (`'use client'`).
78
- */
79
- children: (props: TTriggerFunctionRenderProps) => ReactNode;
80
- };
81
- /**
82
- * Render-prop alternative to `Popup.Trigger`.
83
- *
84
- * Use when you need full control over the trigger element. For example,
85
- * to compose your own trigger with custom event handlers, wrap a third-party
86
- * component, or build a trigger from multiple elements.
87
- *
88
- * `Popup.Trigger` uses `cloneElement` internally, which limits composability.
89
- * `Popup.TriggerFunction` hands you the raw props and lets you wire them up.
90
- *
91
- * **Note:** This sub-component uses a render-prop pattern and is not
92
- * compatible with React Server Components (RSC). It must be used inside
93
- * a client component boundary (`'use client'`).
94
- *
95
- * @example
96
- * ```tsx
97
- * <Popup placement={{ edge: 'end' }} onClose={handleClose}>
98
- * <Popup.TriggerFunction>
99
- * {({ ref, toggle, ariaAttributes }) => (
100
- * <button ref={ref} onClick={toggle} {...ariaAttributes}>
101
- * Open
102
- * </button>
103
- * )}
104
- * </Popup.TriggerFunction>
105
- * <Popup.Content role="dialog" label="My popup">
106
- * Content
107
- * </Popup.Content>
108
- * </Popup>
109
- * ```
110
- */
111
- export declare function PopupTriggerFunction({ children }: TPopupTriggerFunctionProps): React.ReactNode;
112
- export {};
@@ -1,14 +0,0 @@
1
- import { type ReactNode } from 'react';
2
- import { type TPopupTriggerProps } from './types';
3
- /**
4
- * Wraps a single trigger element via `cloneElement`. Attaches aria
5
- * attributes, the toggle handler, and the anchor-name. `aria-haspopup`
6
- * is derived from `Popup.Content`'s role via context.
7
- *
8
- * Child constraints: must be a single ref-forwarding element. The child's
9
- * `onClick` is composed (runs after); other event handlers are NOT.
10
- * Children using Compiled's `css` prop swallow injected props - use
11
- * `Popup.TriggerFunction` for these cases or any time you need handler
12
- * composition.
13
- */
14
- export declare function PopupTrigger({ children }: TPopupTriggerProps): ReactNode;
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- import { type TPopupProps } from './types';
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 declare function PopupRoot(props: TPopupProps): React.ReactElement;
@@ -1,321 +0,0 @@
1
- import { type ReactElement, type ReactNode, type Ref, type RefObject } from 'react';
2
- import { type StrictXCSSProp } from '@atlaskit/css';
3
- import { type TAnimationPreset } from '../animations/types';
4
- import { type TPlacementOptions } from '../internal/resolve-placement';
5
- import { type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
6
- import { type TPopoverCloseReason, type TWidthFromAnchorMode } from '../popover/types';
7
- /**
8
- * Describes where to position a popover relative to its trigger. All fields
9
- * are optional. The default `{}` means "below the trigger, centered, with a
10
- * `space.100` token gap" (equivalent to Popper.js `'bottom'`).
11
- *
12
- * - `axis`: `'block'` (above/below, default) or `'inline'` (left/right)
13
- * - `edge`: `'start'` or `'end'` (default)
14
- * - `align`: `'start'`, `'center'` (default), or `'end'`
15
- * - `offset.gap`: distance from the trigger toward the popover (default `token('space.100', '8px')`, accepts number or CSS string)
16
- * - `offset.crossAxisShift.value`: cross-axis shift (default `0`)
17
- * - `offset.crossAxisShift.direction`: `'forwards'` (default) or `'backwards'`
18
- *
19
- * @example
20
- * ```ts
21
- * placement={{ align: 'start' }} // Below trigger, aligned to start
22
- * placement={{ axis: 'inline' }} // Right of trigger, centered
23
- * placement={{ offset: { gap: 4 } }} // Tooltip-like gap
24
- * placement={{ offset: { crossAxisShift: { value: 4, direction: 'backwards' } } }}
25
- * ```
26
- */
27
- export { type TPlacementOptions } from '../internal/resolve-placement';
28
- /**
29
- * Props shared across all `Popup` modes.
30
- *
31
- * Mode-specific behaviour for `onClose` is encoded in the discriminated
32
- * union below: `'auto'` and `'hint'` modes accept an `onClose` handler
33
- * (called on light dismiss); `'manual'` mode forbids it (no light dismiss
34
- * exists, so a handler would be dead code).
35
- */
36
- type TPopupBaseProps = {
37
- /**
38
- * Position of the popup relative to the trigger. Only the Popup compound uses
39
- * placement; the low-level Popover primitive does not.
40
- *
41
- * Defaults to `{}` which means "below the trigger, centered, with a
42
- * `space.100` token gap".
43
- */
44
- placement?: TPlacementOptions;
45
- /**
46
- * Must contain `Popup.Trigger` and `Popup.Content`.
47
- */
48
- children: ReactNode;
49
- /**
50
- * Called when the popup's open state changes.
51
- *
52
- * Receives the new open state and a reference to the popover element,
53
- * which is useful for focus management (e.g. focusing the first interactive
54
- * child on open via `getFirstFocusable` from `@atlaskit/top-layer/focus`).
55
- *
56
- * @example
57
- * ```tsx
58
- * <Popup
59
- * onOpenChange={({ isOpen, element }) => {
60
- * if (isOpen) {
61
- * getFirstFocusable({ container: element })?.focus();
62
- * }
63
- * }}
64
- * />
65
- * ```
66
- */
67
- onOpenChange?: (args: {
68
- isOpen: boolean;
69
- element: HTMLDivElement;
70
- }) => void;
71
- /**
72
- * Test ID applied to the popup content element.
73
- */
74
- testId?: string;
75
- /**
76
- * Forces the JavaScript positioning fallback even when the browser
77
- * supports CSS Anchor Positioning. Useful for testing fallback
78
- * behavior in any environment, including production.
79
- */
80
- forceFallbackPositioning?: boolean;
81
- };
82
- /**
83
- * Props for the `Popup` compound.
84
- *
85
- * Discriminated on `mode`:
86
- * - `'auto'` (default) and `'hint'`: light dismiss is enabled; `onClose` is
87
- * optional and is called when the browser dismisses the popover.
88
- * - `'manual'`: no light dismiss; `onClose` is `never` since the consumer
89
- * owns show/hide entirely and there is no dismiss event to handle.
90
- */
91
- export type TPopupProps = TPopupBaseProps & ({
92
- /**
93
- * Native popover attribute value. Default is `'auto'`.
94
- *
95
- * - `'auto'`: light dismiss (Escape, click-outside). Only one
96
- * `popover="auto"` can be open at a time; opening another closes
97
- * the previous.
98
- * - `'hint'`: allows ephemeral UI (e.g. tooltips) to open without
99
- * closing other `popover="auto"` popovers. Falls back to
100
- * `popover="auto"` when unsupported.
101
- */
102
- mode?: 'auto' | 'hint';
103
- /**
104
- * Called when the popup is dismissed via light dismiss.
105
- *
106
- * The `reason` field indicates how the dismiss occurred:
107
- * - `'escape'`: the user pressed the Escape key.
108
- * - `'light-dismiss'`: the user clicked outside (or another auto-dismiss).
109
- */
110
- onClose?: (args: {
111
- reason: TPopoverCloseReason;
112
- }) => void;
113
- } | {
114
- /**
115
- * `'manual'`: no light dismiss; the consumer controls show/hide
116
- * entirely. Escape and click-outside do not close the popover.
117
- */
118
- mode: 'manual';
119
- /**
120
- * Manual mode has no dismiss event, so `onClose` is forbidden.
121
- * The consumer owns show/hide via their own state.
122
- */
123
- onClose?: never;
124
- });
125
- export type TPopupTriggerProps = {
126
- /**
127
- * The trigger element. Must accept a ref.
128
- */
129
- children: ReactElement;
130
- };
131
- /**
132
- * All ARIA roles supported for popover content.
133
- * Add new roles to the appropriate category in `internal/role-types.tsx` as needed.
134
- */
135
- export type TPopupRole = TRoleRequiringAccessibleName | TRoleWithImplicitName;
136
- /**
137
- * Props shared across all popover role variants.
138
- *
139
- * When inside the `<Popup>` compound component, `isOpen` is provided automatically
140
- * via context (the browser manages visibility through `togglePopover()`).
141
- *
142
- * When used standalone (e.g. tooltip, spotlight), the consumer must provide `isOpen`
143
- * to control visibility. If `animate` is provided, `isOpen` is required at the type
144
- * level. This ensures exit animations always have a controlled lifecycle.
145
- */
146
- type TPopupContentBaseProps = {
147
- children: ReactNode;
148
- /**
149
- * Ref to the underlying `<div popover>` element.
150
- */
151
- ref?: Ref<HTMLDivElement>;
152
- /**
153
- * HTML `id` attribute for the popover element.
154
- *
155
- * Provide this when using `Popup.Content` standalone (outside the
156
- * `<Popup>` compound). The consumer is responsible for wiring
157
- * `aria-controls` on their own trigger to this same id. Inside the
158
- * `<Popup>` compound, the id flows from context - passing it here is
159
- * unnecessary.
160
- */
161
- id?: string;
162
- /**
163
- * Controls the width of the popover relative to its anchor element.
164
- *
165
- * - `'none'` (default): popover sizes to its content, ignoring the anchor width.
166
- * - `'match-anchor'`: popover matches the anchor element's width exactly
167
- * via CSS `anchor-size(width)`. Falls back to a one-off measurement
168
- * of `anchorRef.current.offsetWidth` when CSS Anchor Positioning
169
- * is not supported.
170
- * - `'min-anchor'`: popover is at least as wide as the anchor, but
171
- * can grow wider if content requires it. Uses `min-width: anchor-size(width)`.
172
- * Falls back to a one-off measurement of the anchor's width.
173
- */
174
- widthFromAnchor?: TWidthFromAnchorMode;
175
- /**
176
- * Applies additional CSS styles to the popover root element using
177
- * design-system-safe xcss.
178
- *
179
- * @example
180
- * ```tsx
181
- * const styles = cssMap({ surface: { backgroundColor: token('elevation.surface.overlay') } });
182
- * <Popup.Content xcss={styles.surface} ... />
183
- * ```
184
- */
185
- xcss?: StrictXCSSProp<'backgroundColor', never>;
186
- /**
187
- * Ref to the trigger element for anchor positioning.
188
- * When absent, anchor positioning is skipped (consumer handles positioning).
189
- */
190
- triggerRef?: RefObject<HTMLElement | null>;
191
- /**
192
- * Position of the popover relative to the trigger.
193
- */
194
- placement?: TPlacementOptions;
195
- /**
196
- * Called when the popover is dismissed via light dismiss (Escape, click outside).
197
- * When an animation preset is provided, `onClose` is called after the exit
198
- * animation completes.
199
- *
200
- * The `reason` field indicates how the dismiss occurred:
201
- * - `'escape'`: the user pressed the Escape key.
202
- * - `'light-dismiss'`: the user clicked outside (or another auto-dismiss).
203
- */
204
- onClose?: (args: {
205
- reason: TPopoverCloseReason;
206
- }) => void;
207
- /**
208
- * Test ID applied to the popover content element.
209
- */
210
- testId?: string;
211
- /**
212
- * Forces the JavaScript positioning fallback even when the browser
213
- * supports CSS Anchor Positioning. Useful for testing fallback
214
- * behavior in any environment, including production.
215
- */
216
- forceFallbackPositioning?: boolean;
217
- /**
218
- * Native popover attribute value. Default is `'auto'`.
219
- *
220
- * - `'auto'`: light dismiss (Escape, click-outside). Only one `popover="auto"` can be open at a time; opening another closes the previous.
221
- * - `'hint'`: allows ephemeral UI (e.g. tooltips) to open without closing other `popover="auto"` popovers. When the browser does not support `popover="hint"`, the component automatically falls back to `popover="auto"`; this fallback is transparent to the consumer.
222
- * - `'manual'`: no light dismiss; the consumer controls show/hide entirely (e.g. Flag). Escape and click-outside do not close the popover.
223
- */
224
- mode?: 'auto' | 'hint' | 'manual';
225
- /**
226
- * Animation preset for entry/exit transitions.
227
- *
228
- * - `TAnimationPreset`: a preset object (e.g. from `@atlaskit/top-layer/animations`).
229
- * Entry animation plays via `@starting-style`, exit via `allow-discrete`.
230
- * - `undefined` / `false`: no animation.
231
- *
232
- * When used standalone (outside `<Popup>` compound), pair with `isOpen` for exit
233
- * animations to work correctly. Inside the compound, `isOpen` is provided via context.
234
- *
235
- * Animations use `@starting-style` and `allow-discrete` for progressive
236
- * enhancement: browsers without support show/hide instantly.
237
- */
238
- animate?: false | TAnimationPreset;
239
- /**
240
- * Whether the popover is open.
241
- *
242
- * Controls `showPopover()` / `hidePopover()` on the underlying element.
243
- * Inside the `<Popup>` compound, `isOpen` is provided automatically via context
244
- * (the browser manages state through `togglePopover()`).
245
- *
246
- * For standalone usage, provide `isOpen` to control visibility, especially
247
- * when `animate` is set, so the exit animation lifecycle works correctly.
248
- *
249
- * @example
250
- * ```tsx
251
- * <Popup.Content
252
- * role="tooltip"
253
- * isOpen={isVisible}
254
- * animate={slideAndFade()}
255
- * >
256
- * Tooltip content
257
- * </Popup.Content>
258
- * ```
259
- */
260
- isOpen?: boolean;
261
- /**
262
- * Called after the entry animation completes (or immediately on open when
263
- * there is no animation). Use this for lifecycle coordination that must
264
- * happen after the popup has fully animated in.
265
- */
266
- onEnterFinish?: () => void;
267
- /**
268
- * Called after the exit animation completes (or immediately on close when
269
- * there is no animation). Use this for lifecycle coordination that must
270
- * happen after the popup has fully animated out.
271
- */
272
- onExitFinish?: () => void;
273
- };
274
- /**
275
- * Popup content props.
276
- *
277
- * Roles like `'dialog'`, `'alertdialog'`, and `'menu'` require an accessible
278
- * name. Provide either `label` (aria-label) or `labelledBy` (aria-labelledby).
279
- * TypeScript enforces this at compile time.
280
- */
281
- export type TPopupContentProps = TPopupContentBaseProps & (({
282
- /**
283
- * ARIA role for the popover. Roles that are ARIA landmarks (`dialog`,
284
- * `alertdialog`, `menu`) require an accessible name.
285
- */
286
- role: TRoleRequiringAccessibleName;
287
- } & ({
288
- /**
289
- * Accessible name via `aria-label`.
290
- */
291
- label: string;
292
- /**
293
- * Accessible name via `aria-labelledby`.
294
- */
295
- labelledBy?: string;
296
- } | {
297
- /**
298
- * Accessible name via `aria-label`.
299
- */
300
- label?: string;
301
- /**
302
- * Accessible name via `aria-labelledby`.
303
- */
304
- labelledBy: string;
305
- })) | {
306
- /**
307
- * ARIA role for the popover.
308
- */
309
- role: TRoleWithImplicitName;
310
- /**
311
- * Accessible name via `aria-label`.
312
- */
313
- label?: string;
314
- /**
315
- * Accessible name via `aria-labelledby`.
316
- */
317
- labelledBy?: string;
318
- });
319
- export type TPopupSurfaceProps = {
320
- children: ReactNode;
321
- };
@@ -1,8 +0,0 @@
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;
@@ -1,7 +0,0 @@
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 +0,0 @@
1
- export { PopupSurface } from '../popup/popup-surface';
2
- export type { TPopupSurfaceProps } from '../popup/types';
@@ -1,2 +0,0 @@
1
- export { Popup } from '../popup';
2
- export type { TPlacementOptions, TPopupProps, TPopupContentProps, TPopupRole, TPopupTriggerProps, TTriggerFunctionRenderProps, } from '../popup';
@@ -1,34 +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
- * Compound component for rendering content in the browser's top layer
8
- * using the native Popover API (`popover="auto"`).
9
- * Placement is owned by this compound: root provides it via context, Content applies it
10
- * (CSS Anchor Positioning or JS fallback).
11
- *
12
- * For default overlay styling (background, shadow, border-radius), see `PopupSurface` in the package examples.
13
- *
14
- * @example
15
- * ```tsx
16
- * <Popup placement={{ edge: 'end' }} onClose={handleClose}>
17
- * <Popup.Trigger>
18
- * <button>Open</button>
19
- * </Popup.Trigger>
20
- * <Popup.Content role="dialog" label="My popup">
21
- * Content goes here
22
- * </Popup.Content>
23
- * </Popup>
24
- * ```
25
- */
26
- declare const Popup: typeof PopupRoot & {
27
- Trigger: typeof PopupTrigger;
28
- TriggerFunction: typeof PopupTriggerFunction;
29
- Content: typeof PopupContent;
30
- Surface: typeof PopupSurface;
31
- };
32
- export { Popup };
33
- export type { TPlacementOptions, TPopupProps, TPopupContentProps, TPopupRole, TPopupSurfaceProps, TPopupTriggerProps, } from './types';
34
- export type { TTriggerFunctionRenderProps } from './popup-trigger-function';
@@ -1,14 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- import React from 'react';
6
- import { type TPopupContentProps } from './types';
7
- /**
8
- * Thin context wrapper that composes `Popover` + `useAnchorPosition`.
9
- *
10
- * Used inside the `<Popup>` compound - reads triggerRef, placement, isOpen,
11
- * and onClose from context. For standalone usage (tooltip, spotlight, flag),
12
- * use `Popover` + `useAnchorPosition` directly.
13
- */
14
- export declare const PopupContent: React.ForwardRefExoticComponent<TPopupContentProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,96 +0,0 @@
1
- import React, { type MutableRefObject, type RefObject } from 'react';
2
- import { type TAriaHasPopupValue } from '../internal/role-types';
3
- import { type TPopoverCloseReason } from '../popover/types';
4
- import { type TPlacementOptions } from './types';
5
- /**
6
- * Represents the lifecycle state of the popup.
7
- *
8
- * - `'closed'`: fully closed, not visible, no animation playing.
9
- * - `'animating-open'`: entry animation is playing (popup is opening but not yet settled).
10
- * - `'open'`: fully open, browser popover is showing, entry animation complete.
11
- * - `'animating-closed'`: exit animation is playing (popup is closing but still visible).
12
- *
13
- * Used to derive `aria-expanded` on the trigger:
14
- * - `aria-expanded` is `true` in `'animating-open'`, `'open'`, and `'animating-closed'`.
15
- *
16
- * This avoids screen readers announcing the popup as closed while it is
17
- * still visually present on screen during animations, and prevents consumers
18
- * that conditionally show/hide trigger UI based on `aria-expanded` from hiding
19
- * the trigger (and thus the popup anchor) mid-animation.
20
- */
21
- export type TPopupState = 'closed' | 'animating-open' | 'open' | 'animating-closed';
22
- export type TPopupContextValue = {
23
- /**
24
- * Auto-generated ID for the popover content element (used for aria-controls).
25
- */
26
- popoverId: string;
27
- /**
28
- * Requested placement.
29
- */
30
- placement: TPlacementOptions;
31
- /**
32
- * Called when the popover is dismissed via light dismiss.
33
- * `null` when mode is 'manual' (no light dismiss).
34
- */
35
- onClose: ((args: {
36
- reason: TPopoverCloseReason;
37
- }) => void) | null;
38
- /**
39
- * Mutable ref to the trigger element (set by Popup.Trigger / Popup.TriggerFunction).
40
- */
41
- triggerRef: MutableRefObject<HTMLElement | null>;
42
- /**
43
- * Ref to the popover content element (set by Popup.Content).
44
- */
45
- popoverRef: RefObject<HTMLDivElement | null>;
46
- /**
47
- * The full lifecycle state of the popup.
48
- *
49
- * See `TPopupState` for the full state machine description.
50
- */
51
- popupState: TPopupState;
52
- /**
53
- * Updates the popup lifecycle state. Called by `PopupContent` as animations
54
- * begin and complete.
55
- */
56
- setPopupState: (state: TPopupState) => void;
57
- /**
58
- * Consumer's onOpenChange callback, forwarded to the Popover.
59
- */
60
- onOpenChange?: (args: {
61
- isOpen: boolean;
62
- element: HTMLDivElement;
63
- }) => void;
64
- /**
65
- * Native popover mode. Flows from the Popup root to Content via context.
66
- */
67
- mode: 'auto' | 'hint' | 'manual';
68
- /**
69
- * The `aria-haspopup` value derived from the content's role.
70
- *
71
- * Set by `Popup.Content` via `setAriaHasPopup` when it renders.
72
- * Read by `Popup.Trigger` / `Popup.TriggerFunction` to set
73
- * the correct `aria-haspopup` on the trigger element.
74
- *
75
- * This flows the content's role to the trigger without requiring
76
- * the consumer to specify the role in two places. The trigger
77
- * renders with the default ('dialog') on first paint; Content's
78
- * layout effect updates it before the browser paints.
79
- */
80
- ariaHasPopup: TAriaHasPopupValue;
81
- /**
82
- * Updates `ariaHasPopup` - called by Content on mount/role change.
83
- */
84
- setAriaHasPopup: (value: TAriaHasPopupValue) => void;
85
- /**
86
- * Test ID prefix.
87
- */
88
- testId?: string;
89
- /**
90
- * Forces the JavaScript positioning fallback even when the browser
91
- * supports CSS Anchor Positioning. Useful for testing fallback
92
- * behavior in any environment, including production.
93
- */
94
- forceFallbackPositioning?: boolean;
95
- };
96
- export declare const PopupContext: React.Context<TPopupContextValue | null>;
@@ -1,10 +0,0 @@
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>;