@atlaskit/top-layer 0.16.0 → 0.18.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 +14 -0
- package/README.md +4 -4
- package/animations/package.json +1 -8
- package/dialog/package.json +1 -8
- package/dialog-scroll-lock/package.json +1 -8
- package/dist/cjs/animations/presets.js +96 -9
- package/dist/cjs/dialog/dialog-content.js +12 -30
- package/dist/cjs/entry-points/animations.js +12 -0
- 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/animations/presets.js +145 -2
- package/dist/es2019/dialog/dialog-content.js +12 -30
- package/dist/es2019/entry-points/animations.js +1 -1
- 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/animations/presets.js +93 -9
- package/dist/esm/dialog/dialog-content.js +12 -30
- package/dist/esm/entry-points/animations.js +1 -1
- 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/animations/presets.d.ts +16 -0
- package/dist/types/entry-points/animations.d.ts +1 -1
- 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 +3 -3
- 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 -94
- 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,126 +0,0 @@
|
|
|
1
|
-
import { type CSSProperties, type ReactNode } from 'react';
|
|
2
|
-
import { type TAnimationPreset } from '../animations/types';
|
|
3
|
-
/**
|
|
4
|
-
* Close reasons produced by the Dialog primitive.
|
|
5
|
-
*
|
|
6
|
-
* - `'escape'`: user pressed Escape (native `cancel` event on `<dialog>`).
|
|
7
|
-
* - `'overlay-click'`: user clicked the backdrop / overlay area.
|
|
8
|
-
*
|
|
9
|
-
* Consumer-initiated ("programmatic") close is not a reason the primitive
|
|
10
|
-
* produces. The consumer simply sets `isOpen={false}`.
|
|
11
|
-
*/
|
|
12
|
-
export type TDialogCloseReason = 'escape' | 'overlay-click';
|
|
13
|
-
/**
|
|
14
|
-
* Props shared across `TDialogProps` variants.
|
|
15
|
-
*
|
|
16
|
-
* The accessible-name requirement (one of `label` or `labelledBy`) is encoded
|
|
17
|
-
* in the discriminated union below - WCAG 4.1.2 violations are caught at
|
|
18
|
-
* compile time instead of in production audit reports.
|
|
19
|
-
*/
|
|
20
|
-
type TDialogBaseProps = {
|
|
21
|
-
children: ReactNode;
|
|
22
|
-
/**
|
|
23
|
-
* Whether the dialog is open.
|
|
24
|
-
*
|
|
25
|
-
* - `true`: calls `showModal()`, entry animation plays via `@starting-style`.
|
|
26
|
-
* - `false`: calls `close()`. When an `animate` preset is provided, the exit
|
|
27
|
-
* animation plays (via `allow-discrete`) before the dialog becomes logically closed.
|
|
28
|
-
*
|
|
29
|
-
* **Lifecycle observable to consumers:**
|
|
30
|
-
*
|
|
31
|
-
* - The `<dialog>` host element is in the DOM only while open or its exit
|
|
32
|
-
* animation is playing. After exit completes the element is unmounted so
|
|
33
|
-
* it does not leave an empty `role="dialog"` element in the accessibility
|
|
34
|
-
* tree. The exact unmount timing is private and may change.
|
|
35
|
-
* - The `id` (supplied or generated) is stable across opens.
|
|
36
|
-
* - The `ref` is populated only while the host element is rendered. Consumers
|
|
37
|
-
* that read from the ref should gate the read on `isOpen` being `true`.
|
|
38
|
-
*/
|
|
39
|
-
isOpen: boolean;
|
|
40
|
-
/**
|
|
41
|
-
* Called when the user triggers close via Escape or backdrop click.
|
|
42
|
-
*
|
|
43
|
-
* The dialog does **not** close itself. The consumer decides whether to
|
|
44
|
-
* set `isOpen={false}` (e.g. gate by reason).
|
|
45
|
-
*/
|
|
46
|
-
onClose: (args: {
|
|
47
|
-
reason: TDialogCloseReason;
|
|
48
|
-
}) => void;
|
|
49
|
-
/**
|
|
50
|
-
* Animation preset for entry/exit transitions.
|
|
51
|
-
*
|
|
52
|
-
* Pass an `TAnimationPreset` (e.g. `dialogSlideUpAndFade()`) to enable
|
|
53
|
-
* CSS-based entry and exit animation. Pass `false` (or omit) to disable.
|
|
54
|
-
*/
|
|
55
|
-
animate?: TAnimationPreset | false;
|
|
56
|
-
/**
|
|
57
|
-
* Additional inline styles applied to the `<dialog>` element.
|
|
58
|
-
*
|
|
59
|
-
* Use for custom width, height, transform, or other overrides.
|
|
60
|
-
*/
|
|
61
|
-
style?: CSSProperties;
|
|
62
|
-
/**
|
|
63
|
-
* Test ID applied to the `<dialog>` element.
|
|
64
|
-
*/
|
|
65
|
-
testId?: string;
|
|
66
|
-
/**
|
|
67
|
-
* HTML `id` attribute for the `<dialog>` element.
|
|
68
|
-
*/
|
|
69
|
-
id?: string;
|
|
70
|
-
/**
|
|
71
|
-
* When true, the `::backdrop` pseudo-element is rendered transparent.
|
|
72
|
-
*
|
|
73
|
-
* Useful for stacked dialogs where only the foreground dialog should
|
|
74
|
-
* show a visible backdrop, or when the consumer wants no overlay.
|
|
75
|
-
*/
|
|
76
|
-
shouldHideBackdrop?: boolean;
|
|
77
|
-
/**
|
|
78
|
-
* Called after the exit animation completes (or immediately on close when
|
|
79
|
-
* there is no animation or reduced motion is active).
|
|
80
|
-
*
|
|
81
|
-
* Use this for external lifecycle coordination, e.g. firing an
|
|
82
|
-
* `onCloseComplete` callback or notifying ExitingPersistence.
|
|
83
|
-
*/
|
|
84
|
-
onExitFinish?: () => void;
|
|
85
|
-
};
|
|
86
|
-
/**
|
|
87
|
-
* Props for the `Dialog` primitive.
|
|
88
|
-
*
|
|
89
|
-
* Low-level wrapper around the native `<dialog>` element.
|
|
90
|
-
* Manages visibility (`showModal()` / `close()`), animation, Escape handling,
|
|
91
|
-
* and backdrop-click detection. Has no visual opinions - no width, height,
|
|
92
|
-
* background, border-radius, or layout. Consumers (e.g. `@atlaskit/modal-dialog`)
|
|
93
|
-
* provide their own visual styling.
|
|
94
|
-
*
|
|
95
|
-
* Discriminated on the accessible-name source: at least one of `label`
|
|
96
|
-
* (aria-label) or `labelledBy` (aria-labelledby) must be provided. This
|
|
97
|
-
* enforces WCAG 4.1.2 at the type level - an unlabelled dialog landmark
|
|
98
|
-
* is not constructible. Mirrors the pattern used by `TPopupContentProps`.
|
|
99
|
-
*/
|
|
100
|
-
export type TDialogProps = TDialogBaseProps & ({
|
|
101
|
-
/**
|
|
102
|
-
* Accessible label (`aria-label`).
|
|
103
|
-
*
|
|
104
|
-
* When provided, `aria-labelledby` is not set.
|
|
105
|
-
* Use when there is no visible title element to reference.
|
|
106
|
-
*/
|
|
107
|
-
label: string;
|
|
108
|
-
/**
|
|
109
|
-
* ID of the element that labels the dialog (`aria-labelledby`).
|
|
110
|
-
*
|
|
111
|
-
* Ignored when `label` is provided.
|
|
112
|
-
*/
|
|
113
|
-
labelledBy?: string;
|
|
114
|
-
} | {
|
|
115
|
-
/**
|
|
116
|
-
* Accessible label (`aria-label`).
|
|
117
|
-
*
|
|
118
|
-
* Optional when `labelledBy` is provided.
|
|
119
|
-
*/
|
|
120
|
-
label?: string;
|
|
121
|
-
/**
|
|
122
|
-
* ID of the element that labels the dialog (`aria-labelledby`).
|
|
123
|
-
*/
|
|
124
|
-
labelledBy: string;
|
|
125
|
-
});
|
|
126
|
-
export {};
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
type TDialogScrollLockProps = {
|
|
2
|
-
/**
|
|
3
|
-
* Whether the parent dialog is open. The scroll lock is applied while
|
|
4
|
-
* `true` and released the moment this flips to `false`, regardless of
|
|
5
|
-
* when (or whether) React unmounts this component. Pass the same
|
|
6
|
-
* `isOpen` value you pass to the parent `Dialog`.
|
|
7
|
-
*/
|
|
8
|
-
isOpen: boolean;
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* __DialogScrollLock__
|
|
12
|
-
*
|
|
13
|
-
* Prevents background page scrolling while a dialog is open. Designed to be
|
|
14
|
-
* rendered inside a `Dialog` and given the same `isOpen` value.
|
|
15
|
-
*
|
|
16
|
-
* Native `<dialog>.showModal()` makes background content _inert_ (not
|
|
17
|
-
* focusable/clickable), but does **not** prevent scroll events from reaching
|
|
18
|
-
* the document body. This component fills that gap by setting
|
|
19
|
-
* `overflow: hidden` on `document.body` while `isOpen` is `true`.
|
|
20
|
-
*
|
|
21
|
-
* The lock is driven by `isOpen` rather than by mount/unmount so that release
|
|
22
|
-
* happens synchronously in the same commit that flips `isOpen` to `false`.
|
|
23
|
-
* Relying on unmount alone was racy: `Dialog` defers the unmount of its
|
|
24
|
-
* children until the host element's close/toggle event fires, which can be
|
|
25
|
-
* after a consumer or test observes the dialog as hidden, leading to a
|
|
26
|
-
* stale `overflow: hidden` window.
|
|
27
|
-
*
|
|
28
|
-
* @example
|
|
29
|
-
* ```tsx
|
|
30
|
-
* import { Dialog } from '@atlaskit/top-layer/dialog';
|
|
31
|
-
* import { DialogScrollLock } from '@atlaskit/top-layer/dialog-scroll-lock';
|
|
32
|
-
*
|
|
33
|
-
* <Dialog isOpen={isOpen} onClose={onClose}>
|
|
34
|
-
* <DialogScrollLock isOpen={isOpen} />
|
|
35
|
-
* {children}
|
|
36
|
-
* </Dialog>
|
|
37
|
-
* ```
|
|
38
|
-
*/
|
|
39
|
-
export declare function DialogScrollLock({ isOpen }: TDialogScrollLockProps): null;
|
|
40
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { DialogScrollLock } from '../dialog-scroll-lock';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { getAriaForTrigger } from '../internal/get-aria-for-trigger';
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
export { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer/open-layer-observer';
|
|
2
|
-
export { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/use-notify-open-layer-observer';
|
|
3
|
-
export { useOpenLayerObserver } from '@atlaskit/layering/experimental/use-open-layer-observer';
|
|
4
|
-
export { OpenLayerObserverNamespaceProvider } from '@atlaskit/layering/experimental/open-layer-observer-namespace-provider';
|
|
5
|
-
export type { LayerType } from '@atlaskit/layering/experimental/types';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { useAnchorPositionAtPoint, type TAnchorPoint, } from '../internal/use-anchor-position-at-point';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { useAnchorPosition } from '../internal/use-anchor-position';
|
|
@@ -1,11 +0,0 @@
|
|
|
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;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { useWidthFromAnchor } from '../internal/use-width-from-anchor';
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { TFocusableFilter } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* Returns the first focusable element within the container.
|
|
4
|
-
*/
|
|
5
|
-
export declare function getFirstFocusable({ container, filter, }: {
|
|
6
|
-
container: HTMLElement;
|
|
7
|
-
filter?: TFocusableFilter;
|
|
8
|
-
}): HTMLElement | null;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { TFocusableFilter } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* Returns all focusable HTMLElements within the container, optionally filtered.
|
|
4
|
-
*
|
|
5
|
-
* Focusables that belong to a nested top-layer scope (a `[popover]` or
|
|
6
|
-
* `<dialog>` descendant of the container) are excluded - those elements
|
|
7
|
-
* are owned by the inner layer's focus management. The container itself
|
|
8
|
-
* is allowed to be a popover/dialog; only nested ones are filtered.
|
|
9
|
-
*/
|
|
10
|
-
export declare function getFocusables({ container, filter, }: {
|
|
11
|
-
container: HTMLElement;
|
|
12
|
-
filter?: TFocusableFilter;
|
|
13
|
-
}): HTMLElement[];
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { TFocusableFilter } from './types';
|
|
2
|
-
/**
|
|
3
|
-
* Returns the last focusable element within the container.
|
|
4
|
-
*/
|
|
5
|
-
export declare function getLastFocusable({ container, filter, }: {
|
|
6
|
-
container: HTMLElement;
|
|
7
|
-
filter?: TFocusableFilter;
|
|
8
|
-
}): HTMLElement | null;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Returns the next focusable element in the given direction relative to the
|
|
3
|
-
* currently focused element within the container. Wraps around at both ends.
|
|
4
|
-
*
|
|
5
|
-
* Returns `null` if there is no focused element within the container or if
|
|
6
|
-
* the focused element is not in the list of focusable elements.
|
|
7
|
-
*/
|
|
8
|
-
import type { TFocusableFilter } from './types';
|
|
9
|
-
export declare function getNextFocusable({ container, direction, filter, }: {
|
|
10
|
-
container: HTMLElement;
|
|
11
|
-
direction: 'forwards' | 'backwards';
|
|
12
|
-
filter?: TFocusableFilter;
|
|
13
|
-
}): HTMLElement | null;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Returns true when `element` and `container` resolve to the same nearest
|
|
3
|
-
* top-layer host (or both resolve to `null`, meaning the document layer).
|
|
4
|
-
*/
|
|
5
|
-
export declare function isInSameLayer({ element, container, }: {
|
|
6
|
-
element: HTMLElement;
|
|
7
|
-
container: HTMLElement;
|
|
8
|
-
}): boolean;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Returns `true` when `document.activeElement` is inside a nested top-layer
|
|
3
|
-
* descendant of `container` (a `[popover]`, `<dialog>`, `[role="dialog"]` or
|
|
4
|
-
* `[role="alertdialog"]` that is itself a descendant of `container`).
|
|
5
|
-
*/
|
|
6
|
-
export declare function isNestedLayerFocused({ container }: {
|
|
7
|
-
container: HTMLElement;
|
|
8
|
-
}): boolean;
|
|
File without changes
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { type TPlacement } from './resolve-placement';
|
|
2
|
-
/**
|
|
3
|
-
* Computes popover position from trigger rect and viewport, flipping to
|
|
4
|
-
* the side with more space when needed. Re-runs on scroll/resize.
|
|
5
|
-
*
|
|
6
|
-
* `gap` and `crossAxisShift` are pre-resolved to pixels by the
|
|
7
|
-
* caller (see `resolveCssLengthToPixels`), so this function stays purely
|
|
8
|
-
* numeric.
|
|
9
|
-
*/
|
|
10
|
-
export declare function computeFallbackPosition({ triggerRect, popoverEl, placement, viewport, gap, crossAxisShift, }: {
|
|
11
|
-
triggerRect: DOMRect;
|
|
12
|
-
popoverEl: HTMLElement;
|
|
13
|
-
placement: TPlacement;
|
|
14
|
-
viewport: {
|
|
15
|
-
width: number;
|
|
16
|
-
height: number;
|
|
17
|
-
};
|
|
18
|
-
gap: number;
|
|
19
|
-
crossAxisShift: {
|
|
20
|
-
value: number;
|
|
21
|
-
direction: 'forwards' | 'backwards';
|
|
22
|
-
};
|
|
23
|
-
}): {
|
|
24
|
-
top: number;
|
|
25
|
-
left: number;
|
|
26
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Combine multiple cleanup functions into a single cleanup function.
|
|
3
|
-
*
|
|
4
|
-
* @example
|
|
5
|
-
* ```ts
|
|
6
|
-
* useEffect(() => {
|
|
7
|
-
* return combine(
|
|
8
|
-
* bind(window, { type: 'resize', listener: onResize }),
|
|
9
|
-
* bind(window, { type: 'scroll', listener: onScroll, options: { capture: true } }),
|
|
10
|
-
* );
|
|
11
|
-
* }, []);
|
|
12
|
-
* ```
|
|
13
|
-
*/
|
|
14
|
-
export declare function combine(...cleanupFns: ((() => void) | undefined)[]): () => void;
|
|
@@ -1,93 +0,0 @@
|
|
|
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
|
-
/**
|
|
37
|
-
* `aria-controls` is `undefined` while the popover is closed, because
|
|
38
|
-
* the popover host element is only rendered in the DOM while open. A
|
|
39
|
-
* dangling `aria-controls` reference (pointing at a missing ID) is
|
|
40
|
-
* tolerated by assistive tech but flagged by some a11y tooling, so
|
|
41
|
-
* we leave it unset until the target exists.
|
|
42
|
-
*/
|
|
43
|
-
'aria-controls': string | undefined;
|
|
44
|
-
};
|
|
45
|
-
/**
|
|
46
|
-
* Returns the ARIA attributes to spread onto a click-activated popover trigger.
|
|
47
|
-
*
|
|
48
|
-
* Centralises three attributes that are easy to forget or get wrong individually:
|
|
49
|
-
*
|
|
50
|
-
* - `aria-haspopup` - derived from the popover's role (e.g. `dialog → "dialog"`,
|
|
51
|
-
* `menu → "menu"`, `tooltip → undefined`). React omits the attribute when
|
|
52
|
-
* the value is `undefined`.
|
|
53
|
-
* - `aria-expanded` - reflects the current open state.
|
|
54
|
-
* - `aria-controls` - references the popover element by its id, even
|
|
55
|
-
* while the popover is closed. The relationship is stable; `aria-expanded`
|
|
56
|
-
* carries the current visibility state.
|
|
57
|
-
*
|
|
58
|
-
* **This function is for click/keyboard-activated popovers only.** For
|
|
59
|
-
* hover-driven tooltips, the trigger should use `aria-describedby` instead.
|
|
60
|
-
*
|
|
61
|
-
* @example
|
|
62
|
-
* ```tsx
|
|
63
|
-
* import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
|
|
64
|
-
* import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
|
|
65
|
-
*
|
|
66
|
-
* const popoverId = usePopoverId();
|
|
67
|
-
* const [isOpen, setIsOpen] = useState(false);
|
|
68
|
-
*
|
|
69
|
-
* return (
|
|
70
|
-
* <>
|
|
71
|
-
* <button
|
|
72
|
-
* ref={triggerRef}
|
|
73
|
-
* onClick={() => setIsOpen((previous) => !previous)}
|
|
74
|
-
* {...getAriaForTrigger({ role: 'dialog', isOpen, popoverId })}
|
|
75
|
-
* >
|
|
76
|
-
* Open
|
|
77
|
-
* </button>
|
|
78
|
-
* <Popover
|
|
79
|
-
* id={popoverId}
|
|
80
|
-
* role="dialog"
|
|
81
|
-
* label="My dialog"
|
|
82
|
-
* isOpen={isOpen}
|
|
83
|
-
* triggerRef={triggerRef}
|
|
84
|
-
* onClose={() => setIsOpen(false)}
|
|
85
|
-
* >
|
|
86
|
-
* …
|
|
87
|
-
* </Popover>
|
|
88
|
-
* </>
|
|
89
|
-
* );
|
|
90
|
-
* ```
|
|
91
|
-
*/
|
|
92
|
-
export declare function getAriaForTrigger({ role, isOpen, popoverId, }: TGetAriaForTriggerOptions): TAriaForTrigger;
|
|
93
|
-
export {};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { type TPlacementOptions } from '../internal/resolve-placement';
|
|
2
|
-
/**
|
|
3
|
-
* Resolves placement options to CSS `position-area` syntax.
|
|
4
|
-
*
|
|
5
|
-
* The `align` field represents the *visual* alignment:
|
|
6
|
-
* - `align: 'start'` means "aligned to the trigger's start edge" (left in LTR for block axis)
|
|
7
|
-
* - `align: 'end'` means "aligned to the trigger's end edge"
|
|
8
|
-
* - `align: 'center'` means centered (single-axis position-area)
|
|
9
|
-
*
|
|
10
|
-
* CSS `position-area` uses `span-*` keywords which indicate the *expansion direction*.
|
|
11
|
-
* Visual start-alignment requires `span-{cross-axis}-end` (expand toward end = start-aligned).
|
|
12
|
-
* This function handles the inversion internally.
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'center' } }) // → 'block-end'
|
|
16
|
-
* placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'start' } }) // → 'block-end span-inline-end'
|
|
17
|
-
* placementToPositionArea({ placement: { axis: 'block', edge: 'end', align: 'end' } }) // → 'block-end span-inline-start'
|
|
18
|
-
*/
|
|
19
|
-
export declare function placementToPositionArea({ placement }: {
|
|
20
|
-
placement: TPlacementOptions;
|
|
21
|
-
}): string;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { type TPlacementOptions } from '../internal/resolve-placement';
|
|
2
|
-
/**
|
|
3
|
-
* Returns `position-try-fallbacks` value based on placement.
|
|
4
|
-
*
|
|
5
|
-
* For centered placements, includes cross-axis aligned position-area
|
|
6
|
-
* values so the browser can shift the popover along the cross-axis
|
|
7
|
-
* when the centered position would overflow the viewport edge.
|
|
8
|
-
*
|
|
9
|
-
* Fallback order for centered placements (e.g. `block-end`):
|
|
10
|
-
* 1. Same edge, start-aligned (shift for near-edge overflow)
|
|
11
|
-
* 2. Same edge, end-aligned (shift for far-edge overflow)
|
|
12
|
-
* 3. Flipped edge, centered
|
|
13
|
-
* 4. Flipped edge, start-aligned
|
|
14
|
-
* 5. Flipped edge, end-aligned
|
|
15
|
-
*
|
|
16
|
-
* For aligned placements (start/end), includes the same-edge centered
|
|
17
|
-
* position as fallbacks so the browser can try centering when the aligned
|
|
18
|
-
* position would overflow, before flipping to the opposite edge.
|
|
19
|
-
*
|
|
20
|
-
* **Why `flip-inline flip-block` (or `flip-block flip-inline`) is included:**
|
|
21
|
-
*
|
|
22
|
-
* When a popup is in a viewport corner (e.g. inline-end align-end at the
|
|
23
|
-
* top-right), flipping only the primary axis (`flip-inline`) moves the popup
|
|
24
|
-
* to the left but keeps the same cross-axis span direction (e.g. upward),
|
|
25
|
-
* which is still off-screen. The combined keyword `flip-inline flip-block`
|
|
26
|
-
* mirrors the popup diagonally. It flips BOTH the position-area AND both
|
|
27
|
-
* inline and block margins simultaneously, placing the popup at the
|
|
28
|
-
* diagonally opposite corner where there is always space.
|
|
29
|
-
*
|
|
30
|
-
* Named `position-area` entries (e.g. `inline-start span-block-end`) in
|
|
31
|
-
* `position-try-fallbacks` do NOT update margins, so only the `flip-*`
|
|
32
|
-
* tactic keywords correctly flip the gap margin along with the position.
|
|
33
|
-
*/
|
|
34
|
-
export declare function placementToTryFallbacks({ placement }: {
|
|
35
|
-
placement: TPlacementOptions;
|
|
36
|
-
}): string;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Returns `true` when the user prefers reduced motion.
|
|
3
|
-
*
|
|
4
|
-
* Safe for SSR (returns `false` when `window` is unavailable).
|
|
5
|
-
*
|
|
6
|
-
* The result is cached after the first call via `once`. This avoids
|
|
7
|
-
* calling `matchMedia` on every render. The trade-off is that if a user
|
|
8
|
-
* toggles the OS reduced-motion setting mid-session, the change will not
|
|
9
|
-
* take effect until the next page load. This is acceptable because
|
|
10
|
-
* toggling this system-level preference mid-session is extremely rare,
|
|
11
|
-
* and a page refresh is a reasonable expectation for system accessibility
|
|
12
|
-
* settings to take effect.
|
|
13
|
-
*/
|
|
14
|
-
export declare const prefersReducedMotion: () => boolean;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Resolves a CSS length value to a pixel number using a hidden DOM probe.
|
|
3
|
-
*
|
|
4
|
-
* Used by the JS positioning fallback: consumer offsets can be numbers,
|
|
5
|
-
* `${n}px` strings, tokenised `var(--ds-space-100, 8px)` strings, `calc()`
|
|
6
|
-
* expressions, viewport units, etc. Parsing arbitrary CSS in JS is fragile
|
|
7
|
-
* (and impossible for `calc(var(...))` without a layout context), so we let
|
|
8
|
-
* the browser do the math.
|
|
9
|
-
*
|
|
10
|
-
* The probe is appended to `container` so it inherits the same containing
|
|
11
|
-
* block, font size, and custom-property scope as the popover.
|
|
12
|
-
*
|
|
13
|
-
* Cost: one synchronous reflow on first cacheable resolution per
|
|
14
|
-
* (container, value) pair, then a `WeakMap` lookup. Resolutions involving
|
|
15
|
-
* `var(` are intentionally not cached.
|
|
16
|
-
*/
|
|
17
|
-
export declare function resolveCssLengthToPixels({ value, container, }: {
|
|
18
|
-
value: number | string;
|
|
19
|
-
container: HTMLElement;
|
|
20
|
-
}): number;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Normalizes an offset to a CSS length string. Numbers become `${n}px`;
|
|
3
|
-
* strings pass through. Apply at the API boundary so internal code only
|
|
4
|
-
* deals with strings.
|
|
5
|
-
*/
|
|
6
|
-
export declare function toCssLengthString({ value }: {
|
|
7
|
-
value: number | string;
|
|
8
|
-
}): string;
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Cross-axis shift. `value` is a CSS length string (consumer numbers are
|
|
3
|
-
* normalized to `${n}px`). `direction` is `'forwards'` (toward end) or
|
|
4
|
-
* `'backwards'` (toward start).
|
|
5
|
-
*/
|
|
6
|
-
export type TCrossAxisShiftOffset = {
|
|
7
|
-
value: string;
|
|
8
|
-
direction: 'forwards' | 'backwards';
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* Fully-resolved placement (internal). Use `getPlacement` for partial input.
|
|
12
|
-
* `offset.gap` and `offset.crossAxisShift.value` are always CSS
|
|
13
|
-
* length strings.
|
|
14
|
-
*/
|
|
15
|
-
export type TPlacement = {
|
|
16
|
-
axis: 'block' | 'inline';
|
|
17
|
-
edge: 'start' | 'end';
|
|
18
|
-
align: 'start' | 'center' | 'end';
|
|
19
|
-
offset: {
|
|
20
|
-
gap: string;
|
|
21
|
-
crossAxisShift: {
|
|
22
|
-
value: string;
|
|
23
|
-
direction: 'forwards' | 'backwards';
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
};
|
|
27
|
-
/**
|
|
28
|
-
* Partial placement options. `offset.gap` and
|
|
29
|
-
* `offset.crossAxisShift.value` accept either a number (pixels) or a
|
|
30
|
-
* CSS length string (e.g. `token('space.100')`).
|
|
31
|
-
*
|
|
32
|
-
* The two offset axes are named for clarity at the call site:
|
|
33
|
-
* - `gap` - distance away from the trigger along the placement axis
|
|
34
|
-
* - `crossAxisShift` - nudge along the trigger edge (perpendicular to the placement axis)
|
|
35
|
-
*/
|
|
36
|
-
export type TPlacementOptions = {
|
|
37
|
-
axis?: 'block' | 'inline';
|
|
38
|
-
edge?: 'start' | 'end';
|
|
39
|
-
align?: 'start' | 'center' | 'end';
|
|
40
|
-
offset?: {
|
|
41
|
-
gap?: number | string;
|
|
42
|
-
crossAxisShift?: {
|
|
43
|
-
value?: number | string;
|
|
44
|
-
direction?: 'forwards' | 'backwards';
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
};
|
|
48
|
-
/**
|
|
49
|
-
* Resolves a partial placement to its fully-specified form. Number offsets
|
|
50
|
-
* are normalized to `${n}px` strings.
|
|
51
|
-
*
|
|
52
|
-
* Defaults: `axis: 'block'`, `edge: 'end'`, `align: 'center'`,
|
|
53
|
-
* `offset.gap: token('space.100', '8px')`,
|
|
54
|
-
* `offset.crossAxisShift: { value: '0px', direction: 'forwards' }`.
|
|
55
|
-
*/
|
|
56
|
-
export declare function getPlacement({ placement }: {
|
|
57
|
-
placement: TPlacementOptions;
|
|
58
|
-
}): TPlacement;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { TAriaHasPopupValue, TRoleRequiringAccessibleName, TRoleWithImplicitName } from './role-types';
|
|
2
|
-
/**
|
|
3
|
-
* Maps a popover content role to the correct `aria-haspopup` value
|
|
4
|
-
* for its trigger element.
|
|
5
|
-
*
|
|
6
|
-
* Returns `undefined` for roles that are not popups in the ARIA sense
|
|
7
|
-
* (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
|
|
8
|
-
* should not announce a popup at all - emitting `aria-haspopup="dialog"`
|
|
9
|
-
* on a tooltip trigger would mislead assistive technology.
|
|
10
|
-
*/
|
|
11
|
-
export declare function roleToAriaHasPopup({ role, }: {
|
|
12
|
-
role: TRoleRequiringAccessibleName | TRoleWithImplicitName | undefined;
|
|
13
|
-
}): TAriaHasPopupValue;
|