@atlaskit/top-layer 0.17.0 → 1.0.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.
- package/AGENTS.md +113 -0
- package/CHANGELOG.md +33 -0
- package/animations/package.json +1 -8
- package/dialog/package.json +1 -8
- package/dialog-scroll-lock/package.json +1 -8
- package/dist/cjs/dialog/dialog-content.js +12 -30
- package/dist/cjs/internal/set-style.js +5 -5
- package/dist/cjs/internal/slot.js +1 -1
- package/dist/cjs/internal/use-anchor-position-at-point.js +8 -8
- package/dist/cjs/internal/use-anchor-position.js +19 -40
- package/dist/cjs/internal/use-animated-visibility.js +31 -61
- package/dist/cjs/internal/use-initial-focus.js +9 -13
- package/dist/cjs/internal/use-width-from-anchor.js +6 -6
- package/dist/cjs/popover/popover.js +30 -58
- package/dist/cjs/popover-surface/popover-surface.js +4 -3
- package/dist/cjs/testing/polyfill.js +9 -9
- package/dist/cjs/use-simple-light-dismiss/index.js +3 -3
- package/dist/es2019/dialog/dialog-content.js +12 -30
- package/dist/es2019/internal/set-style.js +5 -5
- package/dist/es2019/internal/slot.js +1 -1
- package/dist/es2019/internal/use-anchor-position-at-point.js +8 -8
- package/dist/es2019/internal/use-anchor-position.js +19 -40
- package/dist/es2019/internal/use-animated-visibility.js +31 -61
- package/dist/es2019/internal/use-initial-focus.js +9 -13
- package/dist/es2019/internal/use-width-from-anchor.js +6 -6
- package/dist/es2019/popover/popover.js +30 -58
- package/dist/es2019/popover-surface/popover-surface.js +1 -1
- package/dist/es2019/testing/polyfill.js +7 -11
- package/dist/es2019/use-simple-light-dismiss/index.js +3 -3
- package/dist/esm/dialog/dialog-content.js +12 -30
- package/dist/esm/internal/set-style.js +5 -5
- package/dist/esm/internal/slot.js +1 -1
- package/dist/esm/internal/use-anchor-position-at-point.js +8 -8
- package/dist/esm/internal/use-anchor-position.js +19 -40
- package/dist/esm/internal/use-animated-visibility.js +31 -61
- package/dist/esm/internal/use-initial-focus.js +9 -13
- package/dist/esm/internal/use-width-from-anchor.js +6 -6
- package/dist/esm/popover/popover.js +30 -58
- package/dist/esm/popover-surface/popover-surface.js +1 -1
- package/dist/esm/testing/polyfill.js +9 -9
- package/dist/esm/use-simple-light-dismiss/index.js +3 -3
- package/dist/types/internal/set-style.d.ts +2 -2
- package/dist/types/internal/slot.d.ts +2 -2
- package/dist/types/internal/use-anchor-position-at-point.d.ts +2 -2
- package/dist/types/internal/use-anchor-position.d.ts +0 -4
- package/dist/types/internal/use-initial-focus.d.ts +1 -1
- package/dist/types/popover/types.d.ts +5 -7
- package/dist/types/popover-surface/popover-surface.d.ts +2 -2
- package/focus/package.json +1 -8
- package/get-aria-for-trigger/package.json +1 -8
- package/open-layer-observer/package.json +1 -8
- package/package.json +11 -19
- package/placement-map/package.json +1 -8
- package/popover/package.json +1 -8
- package/popover-surface/package.json +1 -8
- package/testing/polyfill/package.json +1 -8
- package/testing/to-be-visible/package.json +1 -8
- package/use-anchor-position/package.json +1 -8
- package/use-anchor-position-at-point/package.json +1 -8
- package/use-arrow-navigation/package.json +1 -8
- package/use-popover-id/package.json +1 -8
- package/use-simple-light-dismiss/package.json +1 -8
- package/use-width-from-anchor/package.json +1 -8
- package/dist/types-ts4.5/animations/presets.d.ts +0 -110
- package/dist/types-ts4.5/animations/types.d.ts +0 -38
- package/dist/types-ts4.5/dialog/create-close-event.d.ts +0 -23
- package/dist/types-ts4.5/dialog/dialog-content.d.ts +0 -24
- package/dist/types-ts4.5/dialog/index.d.ts +0 -3
- package/dist/types-ts4.5/dialog/types.d.ts +0 -126
- package/dist/types-ts4.5/dialog-scroll-lock/index.d.ts +0 -40
- package/dist/types-ts4.5/entry-points/animations.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/dialog-scroll-lock.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/dialog.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/focus.d.ts +0 -4
- package/dist/types-ts4.5/entry-points/get-aria-for-trigger.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/open-layer-observer.d.ts +0 -5
- package/dist/types-ts4.5/entry-points/placement-map.d.ts +0 -3
- package/dist/types-ts4.5/entry-points/popover-surface.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/popover.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/use-anchor-position-at-point.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/use-anchor-position.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/use-arrow-navigation.d.ts +0 -3
- package/dist/types-ts4.5/entry-points/use-popover-id.d.ts +0 -11
- package/dist/types-ts4.5/entry-points/use-simple-light-dismiss.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/use-width-from-anchor.d.ts +0 -1
- package/dist/types-ts4.5/focus/get-first-focusable.d.ts +0 -8
- package/dist/types-ts4.5/focus/get-focusables.d.ts +0 -13
- package/dist/types-ts4.5/focus/get-last-focusable.d.ts +0 -8
- package/dist/types-ts4.5/focus/get-next-focusable.d.ts +0 -13
- package/dist/types-ts4.5/focus/is-in-same-layer.d.ts +0 -8
- package/dist/types-ts4.5/focus/is-nested-layer-focused.d.ts +0 -8
- package/dist/types-ts4.5/focus/selectors.d.ts +0 -4
- package/dist/types-ts4.5/focus/types.d.ts +0 -5
- package/dist/types-ts4.5/index.d.ts +0 -0
- package/dist/types-ts4.5/internal/anchor-positioning-fallback.d.ts +0 -26
- package/dist/types-ts4.5/internal/combine.d.ts +0 -14
- package/dist/types-ts4.5/internal/ensure-preset-styles.d.ts +0 -6
- package/dist/types-ts4.5/internal/get-aria-for-trigger.d.ts +0 -93
- package/dist/types-ts4.5/internal/placement-to-position-area.d.ts +0 -21
- package/dist/types-ts4.5/internal/placement-to-try-fallbacks.d.ts +0 -36
- package/dist/types-ts4.5/internal/reduced-motion.d.ts +0 -14
- package/dist/types-ts4.5/internal/resolve-css-length-to-pixels.d.ts +0 -20
- package/dist/types-ts4.5/internal/resolve-css-length.d.ts +0 -8
- package/dist/types-ts4.5/internal/resolve-placement.d.ts +0 -58
- package/dist/types-ts4.5/internal/role-to-aria-has-popup.d.ts +0 -13
- package/dist/types-ts4.5/internal/role-types.d.ts +0 -71
- package/dist/types-ts4.5/internal/set-style.d.ts +0 -11
- package/dist/types-ts4.5/internal/should-focus-into-popover.d.ts +0 -8
- package/dist/types-ts4.5/internal/slot.d.ts +0 -29
- package/dist/types-ts4.5/internal/use-anchor-position-at-point.d.ts +0 -67
- package/dist/types-ts4.5/internal/use-anchor-position.d.ts +0 -91
- package/dist/types-ts4.5/internal/use-animated-visibility.d.ts +0 -109
- package/dist/types-ts4.5/internal/use-animation-preset.d.ts +0 -11
- package/dist/types-ts4.5/internal/use-focus-wrap.d.ts +0 -25
- package/dist/types-ts4.5/internal/use-initial-focus.d.ts +0 -73
- package/dist/types-ts4.5/internal/use-preset-styles.d.ts +0 -15
- package/dist/types-ts4.5/internal/use-width-from-anchor.d.ts +0 -21
- package/dist/types-ts4.5/placement-map/index.d.ts +0 -51
- package/dist/types-ts4.5/placement-map/legacy-placements.d.ts +0 -27
- package/dist/types-ts4.5/placement-map/placement-mapping.d.ts +0 -13
- package/dist/types-ts4.5/popover/create-close-event.d.ts +0 -25
- package/dist/types-ts4.5/popover/index.d.ts +0 -3
- package/dist/types-ts4.5/popover/popover.d.ts +0 -17
- package/dist/types-ts4.5/popover/types.d.ts +0 -193
- package/dist/types-ts4.5/popover-surface/index.d.ts +0 -2
- package/dist/types-ts4.5/popover-surface/popover-surface.d.ts +0 -21
- package/dist/types-ts4.5/testing/polyfill.d.ts +0 -25
- package/dist/types-ts4.5/testing/to-be-visible.d.ts +0 -23
- package/dist/types-ts4.5/use-arrow-navigation/index.d.ts +0 -3
- package/dist/types-ts4.5/use-arrow-navigation/is-at-current-menu-level.d.ts +0 -48
- package/dist/types-ts4.5/use-arrow-navigation/use-arrow-navigation.d.ts +0 -102
- package/dist/types-ts4.5/use-simple-light-dismiss/index.d.ts +0 -45
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
type TPresetWithCssAndName = {
|
|
2
|
-
css: string;
|
|
3
|
-
name: string;
|
|
4
|
-
};
|
|
5
|
-
/**
|
|
6
|
-
* Normalizes the `animate` prop to a preset (or null) and ensures its CSS
|
|
7
|
-
* is injected once into document.head. Used by PopupContent, Popover, and
|
|
8
|
-
* DialogContent so they do not duplicate this logic.
|
|
9
|
-
*/
|
|
10
|
-
export declare function useAnimationPreset<T extends TPresetWithCssAndName>(animate: T | false | null | undefined): T | null;
|
|
11
|
-
export {};
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { type RefObject } from 'react';
|
|
2
|
-
import { type TPhase } from './use-animated-visibility';
|
|
3
|
-
/**
|
|
4
|
-
* Wraps Tab/Shift+Tab focus within a popover element when its role
|
|
5
|
-
* semantically requires it (dialog, alertdialog).
|
|
6
|
-
*
|
|
7
|
-
* While the popover is open, Tab and Shift+Tab are intercepted
|
|
8
|
-
* (via `preventDefault`) and remapped to cycle through focusable
|
|
9
|
-
* elements within the container using wrapping navigation.
|
|
10
|
-
*
|
|
11
|
-
* Light dismiss (Escape, click outside) continues to work natively
|
|
12
|
-
* via `popover="auto"` - this hook only intercepts Tab.
|
|
13
|
-
*
|
|
14
|
-
* Always call this hook unconditionally. The listener is only
|
|
15
|
-
* attached when the role requires focus wrapping, and is cleaned
|
|
16
|
-
* up and re-evaluated when the role changes.
|
|
17
|
-
*/
|
|
18
|
-
export declare function useFocusWrap({ elementRef, role, phase, }: {
|
|
19
|
-
elementRef: RefObject<HTMLElement | null>;
|
|
20
|
-
role: string | undefined;
|
|
21
|
-
/**
|
|
22
|
-
* Whether the element is open. Used to attach the Tab listener.
|
|
23
|
-
*/
|
|
24
|
-
phase: TPhase;
|
|
25
|
-
}): void;
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { type RefObject } from 'react';
|
|
2
|
-
import { type TPhase } from './use-animated-visibility';
|
|
3
|
-
/**
|
|
4
|
-
* Moves focus into a popover element when it opens, based on its ARIA role.
|
|
5
|
-
*
|
|
6
|
-
* Follows the WAI-ARIA APG initial-focus patterns for each role:
|
|
7
|
-
* - `dialog` / `alertdialog` → focus first focusable (or `[autofocus]`)
|
|
8
|
-
* - `menu` → focus first menu item
|
|
9
|
-
* - `listbox` → focus selected or first option
|
|
10
|
-
* - `tooltip` / no role → no focus movement (focus must remain on trigger;
|
|
11
|
-
* moving focus into the tooltip would dismiss it)
|
|
12
|
-
*
|
|
13
|
-
* Role is taken from the typed `role` prop - this is the consumer's contract
|
|
14
|
-
* and is not subject to drift from a directly-mutated DOM attribute.
|
|
15
|
-
*
|
|
16
|
-
* Always call this hook unconditionally. Focus is moved on each transition
|
|
17
|
-
* into a visible phase, the moment the host element first becomes visible
|
|
18
|
-
* for that open intent:
|
|
19
|
-
*
|
|
20
|
-
* - Animated path: on `closed → entering`. The host has just been mounted
|
|
21
|
-
* and the layout effect that calls `showPopover()` / `showModal()` has
|
|
22
|
-
* already run, so the element is in the top layer. We focus before the
|
|
23
|
-
* entry transition settles to match the WAI-ARIA APG expectation that
|
|
24
|
-
* focus lands on the new menu / dialog the instant it opens, not after
|
|
25
|
-
* the CSS finishes animating.
|
|
26
|
-
* - Non-animated path: on `closed → open` (the entering phase is skipped).
|
|
27
|
-
* - Reopen mid-exit: on `exiting → entering`. When a user dismisses the
|
|
28
|
-
* popup (Escape, close button, light dismiss) the browser natively
|
|
29
|
-
* restores focus to the trigger as part of `hidePopover()` /
|
|
30
|
-
* `<dialog>.close()`. If the consumer reopens before the exit transition
|
|
31
|
-
* has settled, the phase machine jumps `exiting → entering` without
|
|
32
|
-
* passing through `closed`, so without this branch the popup would be
|
|
33
|
-
* visible again with focus stranded on the trigger — a keyboard usability
|
|
34
|
-
* gap for menu/dialog/listbox roles.
|
|
35
|
-
*
|
|
36
|
-
* Note: there is a rare programmatic path where a consumer flips `isOpen`
|
|
37
|
-
* false → true without any user-initiated close gesture and had moved focus
|
|
38
|
-
* to a non-default target inside the popup. In that scenario this hook
|
|
39
|
-
* re-focuses the role-appropriate default (e.g. first menu item) rather
|
|
40
|
-
* than preserving the consumer-chosen target. This matches the documented
|
|
41
|
-
* `closed → entering` behavior and is considered acceptable given how
|
|
42
|
-
* abstract the scenario is. See `notes/architecture/focus.md`.
|
|
43
|
-
*
|
|
44
|
-
* Pure `entering → exiting → entering` stutters where the popup never
|
|
45
|
-
* reaches `closed` and the consumer toggles in the same frame are still
|
|
46
|
-
* collapsed: the `prevPhase` ref guard rejects any transition whose
|
|
47
|
-
* previous phase was not `closed` or `exiting`.
|
|
48
|
-
*
|
|
49
|
-
* Tradeoff vs the previous `requestAnimationFrame` based approach: we no
|
|
50
|
-
* longer wait one paint before focusing. The element is already attached
|
|
51
|
-
* and in the top layer when this effect runs (the show / hide layout
|
|
52
|
-
* effect runs first), so screen-reader announcement and visible focus
|
|
53
|
-
* land together. If a regression appears that needs the extra paint
|
|
54
|
-
* (e.g. browsers that require a layout pass before `focus()` works on a
|
|
55
|
-
* freshly promoted top-layer element), wrap the `focus()` call in a
|
|
56
|
-
* single `requestAnimationFrame` here and re-add a same-element ref
|
|
57
|
-
* check inside the RAF callback.
|
|
58
|
-
*/
|
|
59
|
-
export declare function useInitialFocus({ elementRef, phase, role, }: {
|
|
60
|
-
elementRef: RefObject<HTMLElement | null>;
|
|
61
|
-
/**
|
|
62
|
-
* Current visibility phase from `useAnimatedVisibility`. Initial
|
|
63
|
-
* focus is moved on the transition out of `'closed'`:
|
|
64
|
-
*
|
|
65
|
-
* - Animated path: fires on `closed → entering`, immediately after
|
|
66
|
-
* the host element mounts and `showPopover()` / `showModal()` has
|
|
67
|
-
* run in the preceding layout effect.
|
|
68
|
-
* - Non-animated path: fires on `closed → open` (entering phase is
|
|
69
|
-
* skipped entirely when animation is disabled).
|
|
70
|
-
*/
|
|
71
|
-
phase: TPhase;
|
|
72
|
-
role: string | undefined;
|
|
73
|
-
}): void;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
type TPresetWithCssAndName = {
|
|
2
|
-
css: string;
|
|
3
|
-
name: string;
|
|
4
|
-
};
|
|
5
|
-
/**
|
|
6
|
-
* Normalizes a preset prop to a value (or null) and ensures its CSS
|
|
7
|
-
* is injected once into `document.head`.
|
|
8
|
-
*
|
|
9
|
-
* Works with any preset that has `{ css, name }` - animation presets
|
|
10
|
-
* (TAnimationPreset) satisfies this shape.
|
|
11
|
-
*/
|
|
12
|
-
export declare function usePresetStyles<T extends TPresetWithCssAndName>({ preset, }: {
|
|
13
|
-
preset: T | false | null | undefined;
|
|
14
|
-
}): T | null;
|
|
15
|
-
export {};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { type RefObject } from 'react';
|
|
2
|
-
import type { TWidthFromAnchorMode } from '../popover/types';
|
|
3
|
-
/**
|
|
4
|
-
* Sets the width of a popover element relative to its anchor element.
|
|
5
|
-
*
|
|
6
|
-
* - `'match-anchor'` → `width: anchor-size(width)` - popover matches anchor width exactly.
|
|
7
|
-
* - `'min-anchor'` → `min-width: anchor-size(width)` - popover is at least as wide as anchor,
|
|
8
|
-
* but can grow wider.
|
|
9
|
-
* - `'none'` → no explicit width is set (default behaviour)
|
|
10
|
-
*
|
|
11
|
-
* Uses CSS `anchor-size(width)` when the browser supports it, falling back to a
|
|
12
|
-
* one-off measurement of `anchor.offsetWidth`.
|
|
13
|
-
*
|
|
14
|
-
* Designed to be composed alongside `useAnchorPosition` for top-layer popovers.
|
|
15
|
-
*/
|
|
16
|
-
export declare function useWidthFromAnchor({ mode, popoverRef, anchorRef, isOpen, }: {
|
|
17
|
-
mode: TWidthFromAnchorMode;
|
|
18
|
-
popoverRef: RefObject<HTMLElement | null>;
|
|
19
|
-
anchorRef: RefObject<HTMLElement | null>;
|
|
20
|
-
isOpen: boolean;
|
|
21
|
-
}): void;
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { type TPlacementOptions } from '../internal/resolve-placement';
|
|
2
|
-
import type { TLegacyPlacement } from './legacy-placements';
|
|
3
|
-
/**
|
|
4
|
-
* Maps legacy Popper.js placement values to the new object-based
|
|
5
|
-
* `Placement` values used by `@atlaskit/top-layer/popover`.
|
|
6
|
-
*
|
|
7
|
-
* **Mapping logic:**
|
|
8
|
-
*
|
|
9
|
-
* | Legacy (Popper.js) | New (Placement object) |
|
|
10
|
-
* | ------------------- | --------------------------------------------------- |
|
|
11
|
-
* | `top` | `{ axis: 'block', edge: 'start', align: 'center' }` |
|
|
12
|
-
* | `top-start` | `{ axis: 'block', edge: 'start', align: 'start' }` |
|
|
13
|
-
* | `top-center` | `{ axis: 'block', edge: 'start', align: 'center' }` |
|
|
14
|
-
* | `top-end` | `{ axis: 'block', edge: 'start', align: 'end' }` |
|
|
15
|
-
* | `bottom` | `{ axis: 'block', edge: 'end', align: 'center' }` |
|
|
16
|
-
* | `bottom-start` | `{ axis: 'block', edge: 'end', align: 'start' }` |
|
|
17
|
-
* | `bottom-center` | `{ axis: 'block', edge: 'end', align: 'center' }` |
|
|
18
|
-
* | `bottom-end` | `{ axis: 'block', edge: 'end', align: 'end' }` |
|
|
19
|
-
* | `right` | `{ axis: 'inline', edge: 'end', align: 'center' }` |
|
|
20
|
-
* | `right-start` | `{ axis: 'inline', edge: 'end', align: 'start' }` |
|
|
21
|
-
* | `right-end` | `{ axis: 'inline', edge: 'end', align: 'end' }` |
|
|
22
|
-
* | `left` | `{ axis: 'inline', edge: 'start', align: 'center' }` |
|
|
23
|
-
* | `left-start` | `{ axis: 'inline', edge: 'start', align: 'start' }` |
|
|
24
|
-
* | `left-end` | `{ axis: 'inline', edge: 'start', align: 'end' }` |
|
|
25
|
-
* | `auto` | `{ axis: 'block', edge: 'end', align: 'center' }` |
|
|
26
|
-
* | `auto-start` | `{ axis: 'block', edge: 'end', align: 'start' }` |
|
|
27
|
-
* | `auto-end` | `{ axis: 'block', edge: 'end', align: 'end' }` |
|
|
28
|
-
*
|
|
29
|
-
* `auto*` is mapped to `block-end` (a reduction in expressiveness vs Popper's
|
|
30
|
-
* runtime auto-flip). CSS `position-try-fallbacks` provides flipping at the
|
|
31
|
-
* edge - but the initial placement is fixed. If migrating away from Popper's
|
|
32
|
-
* dynamic auto, prefer an explicit placement.
|
|
33
|
-
*
|
|
34
|
-
* @example
|
|
35
|
-
* ```ts
|
|
36
|
-
* import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
|
|
37
|
-
*
|
|
38
|
-
* // In a migration from @atlaskit/popup:
|
|
39
|
-
* const oldPlacement: TLegacyPlacement = 'bottom-start';
|
|
40
|
-
* const newPlacement: TPlacementOptions = fromLegacyPlacement({ legacy: oldPlacement });
|
|
41
|
-
* // newPlacement === { axis: 'block', edge: 'end', align: 'start' }
|
|
42
|
-
* ```
|
|
43
|
-
*/
|
|
44
|
-
export declare function fromLegacyPlacement({ legacy, offset, }: {
|
|
45
|
-
legacy: TLegacyPlacement;
|
|
46
|
-
offset?: [
|
|
47
|
-
along: number,
|
|
48
|
-
away: number
|
|
49
|
-
];
|
|
50
|
-
}): TPlacementOptions;
|
|
51
|
-
export type { TLegacyPlacement, TPlacementOptions };
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Legacy Popper.js placement values (used by `@atlaskit/popper`,
|
|
3
|
-
* `@atlaskit/popup`, `@atlaskit/tooltip`, etc.). Re-exported from
|
|
4
|
-
* `@atlaskit/top-layer/placement-map` for migration consumers that need
|
|
5
|
-
* to enumerate every placement (e.g. for a settings dropdown). New code
|
|
6
|
-
* should use the object-based `TPlacementOptions` directly.
|
|
7
|
-
*/
|
|
8
|
-
export declare const LEGACY_PLACEMENTS: readonly [
|
|
9
|
-
"auto",
|
|
10
|
-
"auto-start",
|
|
11
|
-
"auto-end",
|
|
12
|
-
"top",
|
|
13
|
-
"top-start",
|
|
14
|
-
"top-center",
|
|
15
|
-
"top-end",
|
|
16
|
-
"bottom",
|
|
17
|
-
"bottom-start",
|
|
18
|
-
"bottom-center",
|
|
19
|
-
"bottom-end",
|
|
20
|
-
"right",
|
|
21
|
-
"right-start",
|
|
22
|
-
"right-end",
|
|
23
|
-
"left",
|
|
24
|
-
"left-start",
|
|
25
|
-
"left-end"
|
|
26
|
-
];
|
|
27
|
-
export type TLegacyPlacement = (typeof LEGACY_PLACEMENTS)[number];
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { type TPlacementOptions } from '../internal/resolve-placement';
|
|
2
|
-
import type { TLegacyPlacement } from './legacy-placements';
|
|
3
|
-
/**
|
|
4
|
-
* The full mapping record. Internal - use `fromLegacyPlacement` from the
|
|
5
|
-
* public entry-point so the offset-tuple translation is applied consistently.
|
|
6
|
-
*
|
|
7
|
-
* Note: `auto`, `auto-start`, `auto-end` map to `block-end` placements. This
|
|
8
|
-
* is a reduction in expressiveness vs Popper.js (which picked the best
|
|
9
|
-
* placement at runtime). CSS `position-try-fallbacks` flips at the edge but
|
|
10
|
-
* the initial placement is fixed. Migration consumers who relied on Popper's
|
|
11
|
-
* dynamic auto-flip should pick an explicit placement instead.
|
|
12
|
-
*/
|
|
13
|
-
export declare const placementMapping: Record<TLegacyPlacement, TPlacementOptions>;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import type { TPopoverCloseReason } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* Creates a synthetic DOM event from a `TPopoverCloseReason`.
|
|
4
|
-
*
|
|
5
|
-
* Useful when bridging the Popover primitive's `onClose({ reason })` callback
|
|
6
|
-
* to a legacy API that expects a native DOM event - for example,
|
|
7
|
-
* `@atlaskit/inline-dialog`'s `onClose(event)` contract.
|
|
8
|
-
*
|
|
9
|
-
* - `'escape'` → `KeyboardEvent('keydown', { key: 'Escape' })`
|
|
10
|
-
* - `'light-dismiss'` → `MouseEvent('click')`
|
|
11
|
-
*
|
|
12
|
-
* For any other reason, a generic `Event('close')` is returned as a fallback.
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* ```tsx
|
|
16
|
-
* import { createPopoverCloseEvent, type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
|
|
17
|
-
*
|
|
18
|
-
* function onPopoverClose({ reason }: { reason: TPopoverCloseReason }) {
|
|
19
|
-
* legacyOnClose(createPopoverCloseEvent({ reason }));
|
|
20
|
-
* }
|
|
21
|
-
* ```
|
|
22
|
-
*/
|
|
23
|
-
export declare function createPopoverCloseEvent({ reason, }: {
|
|
24
|
-
reason: TPopoverCloseReason;
|
|
25
|
-
}): KeyboardEvent | MouseEvent | Event;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import React from 'react';
|
|
6
|
-
import { type TPopoverForwardedProps } from './types';
|
|
7
|
-
/**
|
|
8
|
-
* Unopinionated top-layer primitive. Manages visibility and animation only;
|
|
9
|
-
* compose with `useAnchorPosition` / `useWidthFromAnchor` for positioning.
|
|
10
|
-
*
|
|
11
|
-
* `isOpen={true}` calls `showPopover()` (entry via `@starting-style`);
|
|
12
|
-
* `isOpen={false}` calls `hidePopover()` (exit via `allow-discrete`).
|
|
13
|
-
*
|
|
14
|
-
* In `mode="auto"`, the browser can light-dismiss (Escape, click outside).
|
|
15
|
-
* `onClose` fires; the consumer must then set `isOpen` to `false`.
|
|
16
|
-
*/
|
|
17
|
-
export declare const Popover: React.ForwardRefExoticComponent<TPopoverForwardedProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } 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 TAriaRoleRequired, type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
|
|
6
|
-
/**
|
|
7
|
-
* The reason a popover was closed.
|
|
8
|
-
*
|
|
9
|
-
* - `'escape'`: The user pressed the Escape key.
|
|
10
|
-
* - `'light-dismiss'`: The user clicked outside the popover (or the browser
|
|
11
|
-
* dismissed it for another auto-mode reason).
|
|
12
|
-
* - `'programmatic'`: The popover was closed programmatically.
|
|
13
|
-
*/
|
|
14
|
-
export type TPopoverCloseReason = 'escape' | 'light-dismiss' | 'programmatic';
|
|
15
|
-
/**
|
|
16
|
-
* Flat (non-discriminated) props accepted by the Popover component internally.
|
|
17
|
-
*
|
|
18
|
-
* TypeScript limitation: when PopupContent destructures props from a
|
|
19
|
-
* discriminated union (role, label, labelledBy) and re-passes them individually
|
|
20
|
-
* to Popover, TypeScript cannot prove the individual fields still satisfy the
|
|
21
|
-
* union constraint. This flat type accepts all role/label combinations without
|
|
22
|
-
* the union, since ARIA correctness is enforced at the TPopupContentProps
|
|
23
|
-
* boundary where consumers interact.
|
|
24
|
-
*/
|
|
25
|
-
export type TPopoverForwardedProps = TPopoverBaseProps & {
|
|
26
|
-
mode?: 'auto' | 'hint' | 'manual';
|
|
27
|
-
onClose?: (args: {
|
|
28
|
-
reason: TPopoverCloseReason;
|
|
29
|
-
}) => void;
|
|
30
|
-
role?: TRoleRequiringAccessibleName | TRoleWithImplicitName;
|
|
31
|
-
label?: string;
|
|
32
|
-
labelledBy?: string;
|
|
33
|
-
};
|
|
34
|
-
export type { TPlacementOptions };
|
|
35
|
-
type TPopoverBaseProps = {
|
|
36
|
-
children: ReactNode;
|
|
37
|
-
/**
|
|
38
|
-
* Additional CSS styles applied to the popover root element.
|
|
39
|
-
* Use to set `backgroundColor` to match the popup surface colour.
|
|
40
|
-
*/
|
|
41
|
-
xcss?: StrictXCSSProp<'backgroundColor', never>;
|
|
42
|
-
/**
|
|
43
|
-
* Animation preset for entry/exit transitions.
|
|
44
|
-
*
|
|
45
|
-
* Animations use `@starting-style` and `allow-discrete` for progressive
|
|
46
|
-
* enhancement: browsers without support show/hide instantly.
|
|
47
|
-
*/
|
|
48
|
-
animate?: false | TAnimationPreset;
|
|
49
|
-
/**
|
|
50
|
-
* Test ID applied to the popover element.
|
|
51
|
-
*/
|
|
52
|
-
testId?: string;
|
|
53
|
-
/**
|
|
54
|
-
* HTML `id` attribute for the popover element. When omitted, a unique ID
|
|
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.
|
|
58
|
-
*/
|
|
59
|
-
id?: string;
|
|
60
|
-
/**
|
|
61
|
-
* Whether the popover is open.
|
|
62
|
-
*
|
|
63
|
-
* - **`true`:** show the popover (calls `showPopover()`, entry animation plays via `@starting-style`).
|
|
64
|
-
* - **`false`:** hide the popover. When an `animate` preset is provided, the exit
|
|
65
|
-
* animation plays (via `allow-discrete`) before the popover becomes logically closed.
|
|
66
|
-
* Otherwise hides instantly.
|
|
67
|
-
*
|
|
68
|
-
* The consumer does not conditionally render the `Popover` — visibility is driven
|
|
69
|
-
* by this prop.
|
|
70
|
-
*
|
|
71
|
-
* **Lifecycle observable to consumers:**
|
|
72
|
-
*
|
|
73
|
-
* - The host element is in the DOM only while the popover is open or its exit
|
|
74
|
-
* animation is playing. After exit completes the element is unmounted so it
|
|
75
|
-
* does not leave an empty `role` / `popover` element in the accessibility tree.
|
|
76
|
-
* The exact unmount timing is private and may change.
|
|
77
|
-
* - The `id` (supplied or generated via `usePopoverId()`) is stable across opens.
|
|
78
|
-
* - The `ref` is populated only while the host element is rendered. Consumers
|
|
79
|
-
* that read from the ref outside of `onOpenChange` / `onEnterFinish` should
|
|
80
|
-
* gate the read on `isOpen` being `true`.
|
|
81
|
-
*
|
|
82
|
-
* **Important:** For `mode="auto"` popovers, the browser can dismiss the popover
|
|
83
|
-
* via light dismiss (Escape, click outside) independently of this prop. When that
|
|
84
|
-
* happens, `onClose` is called and the consumer should respond by setting `isOpen`
|
|
85
|
-
* to `false`. If `isOpen` remains `true` after a browser dismiss, the DOM and
|
|
86
|
-
* React state will be out of sync (the popover will be hidden despite `isOpen={true}`).
|
|
87
|
-
*/
|
|
88
|
-
isOpen: boolean;
|
|
89
|
-
/**
|
|
90
|
-
* Called when the popover's open state changes via browser toggle events.
|
|
91
|
-
*
|
|
92
|
-
* Receives the new open state and a reference to the popover element,
|
|
93
|
-
* which is useful for focus management (e.g. focusing the first interactive
|
|
94
|
-
* child on open via `getFirstFocusable` from `@atlaskit/top-layer/focus`).
|
|
95
|
-
*
|
|
96
|
-
* @example
|
|
97
|
-
* ```tsx
|
|
98
|
-
* <Popover
|
|
99
|
-
* onOpenChange={({ isOpen, element }) => {
|
|
100
|
-
* if (isOpen) {
|
|
101
|
-
* getFirstFocusable({ container: element })?.focus();
|
|
102
|
-
* }
|
|
103
|
-
* }}
|
|
104
|
-
* />
|
|
105
|
-
* ```
|
|
106
|
-
*/
|
|
107
|
-
onOpenChange?: (args: {
|
|
108
|
-
isOpen: boolean;
|
|
109
|
-
element: HTMLDivElement;
|
|
110
|
-
}) => void;
|
|
111
|
-
/**
|
|
112
|
-
* Placement hint for directional animations (e.g. `slideAndFade`).
|
|
113
|
-
*
|
|
114
|
-
* When `animate` is provided, the preset's `getProperties(placement)` is
|
|
115
|
-
* called to set CSS custom properties (like `--ds-popover-tx`, `--ds-popover-ty`)
|
|
116
|
-
* that control the slide direction. Has no effect without `animate`.
|
|
117
|
-
*
|
|
118
|
-
* This does NOT control positioning. Use `useAnchorPosition` for that.
|
|
119
|
-
*/
|
|
120
|
-
placement?: TPlacementOptions;
|
|
121
|
-
/**
|
|
122
|
-
* Called after the entry animation completes (or immediately on open when
|
|
123
|
-
* there is no animation or reduced motion is active).
|
|
124
|
-
*
|
|
125
|
-
* Use this for external lifecycle coordination - e.g. notifying a manager
|
|
126
|
-
* that the show sequence is finished.
|
|
127
|
-
*/
|
|
128
|
-
onEnterFinish?: () => void;
|
|
129
|
-
/**
|
|
130
|
-
* Called after the exit animation completes (or immediately on close when
|
|
131
|
-
* there is no animation or reduced motion is active).
|
|
132
|
-
*
|
|
133
|
-
* Use this for external lifecycle coordination, e.g. notifying a manager
|
|
134
|
-
* that the hide sequence is finished, or firing an `onCloseComplete` callback.
|
|
135
|
-
*/
|
|
136
|
-
onExitFinish?: () => void;
|
|
137
|
-
};
|
|
138
|
-
/**
|
|
139
|
-
* Unopinionated top-layer primitive.
|
|
140
|
-
*
|
|
141
|
-
* `Popover` manages only top-layer visibility and animation. It has no
|
|
142
|
-
* knowledge of positioning. For anchor positioning, compose with the
|
|
143
|
-
* `useAnchorPosition` hook separately.
|
|
144
|
-
*
|
|
145
|
-
* Use `Popover` directly for custom trigger lifecycles (hover, timers,
|
|
146
|
-
* external state) or trigger-less UI (flags, toasts). For the common
|
|
147
|
-
* button-opens-content pattern, use the `Popup` compound instead.
|
|
148
|
-
*
|
|
149
|
-
* Dismiss behavior:
|
|
150
|
-
* - `'auto'` (default): Escape to close, click-outside to close, focus restoration,
|
|
151
|
-
* automatic nesting, mutual exclusivity.
|
|
152
|
-
* - `'hint'`: ephemeral UI (e.g. tooltips) that does not close other `auto`
|
|
153
|
-
* popovers. Falls back silently to `auto` semantics in browsers without
|
|
154
|
-
* `popover='hint'` support, meaning the hint will close any other `auto`
|
|
155
|
-
* popovers in those browsers. If cross-browser uniformity matters more
|
|
156
|
-
* than the no-close behaviour, pass `auto` explicitly.
|
|
157
|
-
* - `'manual'`: no light dismiss. Consumer controls show/hide entirely. Only
|
|
158
|
-
* appropriate for persistent UI (e.g. flags, banners).
|
|
159
|
-
*/
|
|
160
|
-
export type TPopoverProps = TPopoverBaseProps & TAriaRoleRequired & ({
|
|
161
|
-
mode?: 'auto' | 'hint';
|
|
162
|
-
/**
|
|
163
|
-
* Called when the popover is dismissed via light dismiss
|
|
164
|
-
* (Escape, click outside).
|
|
165
|
-
*
|
|
166
|
-
* Required for `auto` and `hint` modes - without it, browser
|
|
167
|
-
* dismissals leave the consumer's `isOpen` stuck at `true` while
|
|
168
|
-
* the DOM is hidden, producing a stale-open state.
|
|
169
|
-
*
|
|
170
|
-
* The `reason` field indicates how the dismiss occurred:
|
|
171
|
-
* - `'escape'`: the user pressed the Escape key.
|
|
172
|
-
* - `'light-dismiss'`: the user clicked outside (or another auto-dismiss).
|
|
173
|
-
*/
|
|
174
|
-
onClose: (args: {
|
|
175
|
-
reason: TPopoverCloseReason;
|
|
176
|
-
}) => void;
|
|
177
|
-
} | {
|
|
178
|
-
mode: 'manual';
|
|
179
|
-
onClose?: never;
|
|
180
|
-
});
|
|
181
|
-
/**
|
|
182
|
-
* The width mode of the popover relative to its anchor element.
|
|
183
|
-
*
|
|
184
|
-
* - `'none'` (default): popover sizes to its content, ignoring the anchor width.
|
|
185
|
-
* - `'match-anchor'`: popover matches the anchor element's width exactly
|
|
186
|
-
* via CSS `anchor-size(width)`. Falls back to a one-off measurement
|
|
187
|
-
* of `anchorRef.current.offsetWidth` when CSS Anchor Positioning
|
|
188
|
-
* is not supported.
|
|
189
|
-
* - `'min-anchor'`: popover is at least as wide as the anchor, but
|
|
190
|
-
* can grow wider if content requires it. Uses `min-width: anchor-size(width)`.
|
|
191
|
-
* Falls back to a one-off measurement of the anchor's width.
|
|
192
|
-
*/
|
|
193
|
-
export type TWidthFromAnchorMode = 'none' | 'match-anchor' | 'min-anchor';
|
|
@@ -1,21 +0,0 @@
|
|
|
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;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Popover API & HTMLDialogElement polyfills for jsdom.
|
|
3
|
-
*
|
|
4
|
-
* jsdom does not implement the Popover API or the HTMLDialogElement methods
|
|
5
|
-
* (showModal, show, close). This polyfill provides faithful implementations,
|
|
6
|
-
* including timing semantics validated against Chromium via Playwright.
|
|
7
|
-
*
|
|
8
|
-
* Behaviour:
|
|
9
|
-
* - beforetoggle: sync, cancelable on popover show only. toggle: async task, never cancelable.
|
|
10
|
-
* - Rapid show/hide coalesces into one toggle event (originalOldState to finalNewState).
|
|
11
|
-
* - Dialog: showModal/show fire beforetoggle+toggle. close fires toggle then close event.
|
|
12
|
-
* - Popover open state tracked via `data-popover-open` (no `:popover-open` in jsdom).
|
|
13
|
-
* - Auto popovers: maintain an open stack, perform light-dismiss on document mousedown
|
|
14
|
-
* outside the open chain, and dismiss the topmost on Escape.
|
|
15
|
-
* - On open, removes any inline `opacity: 0` from the popover element so callers that
|
|
16
|
-
* rely on a `ResizeObserver` reveal callback (e.g. `use-anchor-position`) become
|
|
17
|
-
* visible in jsdom, where layout-driven RO callbacks never fire.
|
|
18
|
-
*
|
|
19
|
-
* Companion `toBeVisible` patch lives at `./to-be-visible`.
|
|
20
|
-
*
|
|
21
|
-
* Importing this module has the side-effect of patching the relevant
|
|
22
|
-
* prototypes. It is safe to import multiple times; each branch is guarded
|
|
23
|
-
* to avoid overwriting native implementations or re-patching.
|
|
24
|
-
*/
|
|
25
|
-
export {};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Patches `toBeVisible()` to understand popover and dialog visibility.
|
|
3
|
-
*
|
|
4
|
-
* jest-dom's `toBeVisible()` does not know about the Popover API. In real
|
|
5
|
-
* browsers the UA stylesheet hides `[popover]` with `display: none`, but
|
|
6
|
-
* jsdom has no such stylesheet - so closed popovers incorrectly appear visible.
|
|
7
|
-
*
|
|
8
|
-
* Raw jest-dom results in jsdom:
|
|
9
|
-
*
|
|
10
|
-
* closed popover / child → true (WRONG - should be false)
|
|
11
|
-
* open popover / child → true (correct)
|
|
12
|
-
* closed dialog / child → false (correct - jsdom natively hides <dialog>)
|
|
13
|
-
* open dialog / child → true (correct)
|
|
14
|
-
*
|
|
15
|
-
* We correct both false positives and false negatives:
|
|
16
|
-
* 1. Delegate to the original first.
|
|
17
|
-
* 2. If it says "visible" → check for closed top-layer hosts (false positive).
|
|
18
|
-
* 3. If it says "not visible" → check for open top-layer hosts (false negative).
|
|
19
|
-
*
|
|
20
|
-
* Must load via `setupFilesAfterEnv` (after jest-dom registers its matchers).
|
|
21
|
-
* Polyfills live in `./polyfill` (loaded via `setupFiles`).
|
|
22
|
-
*/
|
|
23
|
-
export {};
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Returns true if the element belongs to the current menu level of the
|
|
3
|
-
* container, i.e. it is NOT inside a nested `role="menu"` sub-container.
|
|
4
|
-
*
|
|
5
|
-
* Uses `element.closest('[role="menu"]')` to determine the nearest menu
|
|
6
|
-
* scope. If the nearest scope is the container's own `role="menu"` element,
|
|
7
|
-
* the element belongs to this level. If it is a different (nested) menu,
|
|
8
|
-
* the element belongs to a child level and should be excluded.
|
|
9
|
-
*
|
|
10
|
-
* Supports two container patterns:
|
|
11
|
-
*
|
|
12
|
-
* **1. Container has `role="menu"` directly** (preferred, used by avatar-group):
|
|
13
|
-
* ```
|
|
14
|
-
* <div ref={containerRef} role="menu">
|
|
15
|
-
* <button role="menuitem" /> ← isAtCurrentMenuLevel → true
|
|
16
|
-
* <div role="menu"> ← nested sub-menu
|
|
17
|
-
* <button role="menuitem" /> ← isAtCurrentMenuLevel → false
|
|
18
|
-
* </div>
|
|
19
|
-
* </div>
|
|
20
|
-
* ```
|
|
21
|
-
* Uses the simple check: `element.closest('[role="menu"]') === container`
|
|
22
|
-
*
|
|
23
|
-
* **2. Container is a wrapper without `role="menu"`** (used by dropdown-menu,
|
|
24
|
-
* where `MenuGroup` owns `role="menu"` but does not accept a ref):
|
|
25
|
-
* ```
|
|
26
|
-
* <div ref={containerRef}> ← wrapper (no role="menu")
|
|
27
|
-
* <MenuGroup role="menu">
|
|
28
|
-
* <button role="menuitem" /> ← isAtCurrentMenuLevel → true
|
|
29
|
-
* <div role="menu"> ← nested sub-menu
|
|
30
|
-
* <button role="menuitem" /> ← isAtCurrentMenuLevel → false
|
|
31
|
-
* </div>
|
|
32
|
-
* </MenuGroup>
|
|
33
|
-
* </div>
|
|
34
|
-
* ```
|
|
35
|
-
* Falls back to walking the DOM to check that the element's closest
|
|
36
|
-
* `role="menu"` is the container's own menu (not doubly nested).
|
|
37
|
-
*
|
|
38
|
-
* Ideally all consumers should use pattern 1 (place the ref directly on the
|
|
39
|
-
* `role="menu"` element). Pattern 2 exists because `@atlaskit/menu`'s
|
|
40
|
-
* `MenuGroup` does not currently accept a ref. If `MenuGroup` gains ref
|
|
41
|
-
* support in the future, dropdown-menu should switch to pattern 1 and the
|
|
42
|
-
* fallback path can be removed.
|
|
43
|
-
*
|
|
44
|
-
* Used both as a `TFocusableFilter` (to scope getNextFocusable etc.) and as
|
|
45
|
-
* a guard to prevent parent menu handlers from acting on events that
|
|
46
|
-
* belong to a nested menu.
|
|
47
|
-
*/
|
|
48
|
-
export declare function isAtCurrentMenuLevel(element: Element, container: HTMLElement): boolean;
|