@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.
Files changed (141) hide show
  1. package/AGENTS.md +113 -0
  2. package/CHANGELOG.md +14 -0
  3. package/README.md +4 -4
  4. package/animations/package.json +1 -8
  5. package/dialog/package.json +1 -8
  6. package/dialog-scroll-lock/package.json +1 -8
  7. package/dist/cjs/animations/presets.js +96 -9
  8. package/dist/cjs/dialog/dialog-content.js +12 -30
  9. package/dist/cjs/entry-points/animations.js +12 -0
  10. package/dist/cjs/internal/set-style.js +5 -5
  11. package/dist/cjs/internal/slot.js +1 -1
  12. package/dist/cjs/internal/use-anchor-position-at-point.js +8 -8
  13. package/dist/cjs/internal/use-anchor-position.js +19 -40
  14. package/dist/cjs/internal/use-animated-visibility.js +31 -61
  15. package/dist/cjs/internal/use-initial-focus.js +9 -13
  16. package/dist/cjs/internal/use-width-from-anchor.js +6 -6
  17. package/dist/cjs/popover/popover.js +30 -58
  18. package/dist/cjs/popover-surface/popover-surface.js +4 -3
  19. package/dist/cjs/testing/polyfill.js +9 -9
  20. package/dist/cjs/use-simple-light-dismiss/index.js +3 -3
  21. package/dist/es2019/animations/presets.js +145 -2
  22. package/dist/es2019/dialog/dialog-content.js +12 -30
  23. package/dist/es2019/entry-points/animations.js +1 -1
  24. package/dist/es2019/internal/set-style.js +5 -5
  25. package/dist/es2019/internal/slot.js +1 -1
  26. package/dist/es2019/internal/use-anchor-position-at-point.js +8 -8
  27. package/dist/es2019/internal/use-anchor-position.js +19 -40
  28. package/dist/es2019/internal/use-animated-visibility.js +31 -61
  29. package/dist/es2019/internal/use-initial-focus.js +9 -13
  30. package/dist/es2019/internal/use-width-from-anchor.js +6 -6
  31. package/dist/es2019/popover/popover.js +30 -58
  32. package/dist/es2019/popover-surface/popover-surface.js +1 -1
  33. package/dist/es2019/testing/polyfill.js +7 -11
  34. package/dist/es2019/use-simple-light-dismiss/index.js +3 -3
  35. package/dist/esm/animations/presets.js +93 -9
  36. package/dist/esm/dialog/dialog-content.js +12 -30
  37. package/dist/esm/entry-points/animations.js +1 -1
  38. package/dist/esm/internal/set-style.js +5 -5
  39. package/dist/esm/internal/slot.js +1 -1
  40. package/dist/esm/internal/use-anchor-position-at-point.js +8 -8
  41. package/dist/esm/internal/use-anchor-position.js +19 -40
  42. package/dist/esm/internal/use-animated-visibility.js +31 -61
  43. package/dist/esm/internal/use-initial-focus.js +9 -13
  44. package/dist/esm/internal/use-width-from-anchor.js +6 -6
  45. package/dist/esm/popover/popover.js +30 -58
  46. package/dist/esm/popover-surface/popover-surface.js +1 -1
  47. package/dist/esm/testing/polyfill.js +9 -9
  48. package/dist/esm/use-simple-light-dismiss/index.js +3 -3
  49. package/dist/types/animations/presets.d.ts +16 -0
  50. package/dist/types/entry-points/animations.d.ts +1 -1
  51. package/dist/types/internal/set-style.d.ts +2 -2
  52. package/dist/types/internal/slot.d.ts +2 -2
  53. package/dist/types/internal/use-anchor-position-at-point.d.ts +2 -2
  54. package/dist/types/internal/use-anchor-position.d.ts +0 -4
  55. package/dist/types/internal/use-initial-focus.d.ts +1 -1
  56. package/dist/types/popover/types.d.ts +5 -7
  57. package/dist/types/popover-surface/popover-surface.d.ts +2 -2
  58. package/focus/package.json +1 -8
  59. package/get-aria-for-trigger/package.json +1 -8
  60. package/open-layer-observer/package.json +1 -8
  61. package/package.json +3 -3
  62. package/placement-map/package.json +1 -8
  63. package/popover/package.json +1 -8
  64. package/popover-surface/package.json +1 -8
  65. package/testing/polyfill/package.json +1 -8
  66. package/testing/to-be-visible/package.json +1 -8
  67. package/use-anchor-position/package.json +1 -8
  68. package/use-anchor-position-at-point/package.json +1 -8
  69. package/use-arrow-navigation/package.json +1 -8
  70. package/use-popover-id/package.json +1 -8
  71. package/use-simple-light-dismiss/package.json +1 -8
  72. package/use-width-from-anchor/package.json +1 -8
  73. package/dist/types-ts4.5/animations/presets.d.ts +0 -94
  74. package/dist/types-ts4.5/animations/types.d.ts +0 -38
  75. package/dist/types-ts4.5/dialog/create-close-event.d.ts +0 -23
  76. package/dist/types-ts4.5/dialog/dialog-content.d.ts +0 -24
  77. package/dist/types-ts4.5/dialog/index.d.ts +0 -3
  78. package/dist/types-ts4.5/dialog/types.d.ts +0 -126
  79. package/dist/types-ts4.5/dialog-scroll-lock/index.d.ts +0 -40
  80. package/dist/types-ts4.5/entry-points/animations.d.ts +0 -2
  81. package/dist/types-ts4.5/entry-points/dialog-scroll-lock.d.ts +0 -1
  82. package/dist/types-ts4.5/entry-points/dialog.d.ts +0 -2
  83. package/dist/types-ts4.5/entry-points/focus.d.ts +0 -4
  84. package/dist/types-ts4.5/entry-points/get-aria-for-trigger.d.ts +0 -1
  85. package/dist/types-ts4.5/entry-points/open-layer-observer.d.ts +0 -5
  86. package/dist/types-ts4.5/entry-points/placement-map.d.ts +0 -3
  87. package/dist/types-ts4.5/entry-points/popover-surface.d.ts +0 -2
  88. package/dist/types-ts4.5/entry-points/popover.d.ts +0 -2
  89. package/dist/types-ts4.5/entry-points/use-anchor-position-at-point.d.ts +0 -1
  90. package/dist/types-ts4.5/entry-points/use-anchor-position.d.ts +0 -1
  91. package/dist/types-ts4.5/entry-points/use-arrow-navigation.d.ts +0 -3
  92. package/dist/types-ts4.5/entry-points/use-popover-id.d.ts +0 -11
  93. package/dist/types-ts4.5/entry-points/use-simple-light-dismiss.d.ts +0 -2
  94. package/dist/types-ts4.5/entry-points/use-width-from-anchor.d.ts +0 -1
  95. package/dist/types-ts4.5/focus/get-first-focusable.d.ts +0 -8
  96. package/dist/types-ts4.5/focus/get-focusables.d.ts +0 -13
  97. package/dist/types-ts4.5/focus/get-last-focusable.d.ts +0 -8
  98. package/dist/types-ts4.5/focus/get-next-focusable.d.ts +0 -13
  99. package/dist/types-ts4.5/focus/is-in-same-layer.d.ts +0 -8
  100. package/dist/types-ts4.5/focus/is-nested-layer-focused.d.ts +0 -8
  101. package/dist/types-ts4.5/focus/selectors.d.ts +0 -4
  102. package/dist/types-ts4.5/focus/types.d.ts +0 -5
  103. package/dist/types-ts4.5/index.d.ts +0 -0
  104. package/dist/types-ts4.5/internal/anchor-positioning-fallback.d.ts +0 -26
  105. package/dist/types-ts4.5/internal/combine.d.ts +0 -14
  106. package/dist/types-ts4.5/internal/ensure-preset-styles.d.ts +0 -6
  107. package/dist/types-ts4.5/internal/get-aria-for-trigger.d.ts +0 -93
  108. package/dist/types-ts4.5/internal/placement-to-position-area.d.ts +0 -21
  109. package/dist/types-ts4.5/internal/placement-to-try-fallbacks.d.ts +0 -36
  110. package/dist/types-ts4.5/internal/reduced-motion.d.ts +0 -14
  111. package/dist/types-ts4.5/internal/resolve-css-length-to-pixels.d.ts +0 -20
  112. package/dist/types-ts4.5/internal/resolve-css-length.d.ts +0 -8
  113. package/dist/types-ts4.5/internal/resolve-placement.d.ts +0 -58
  114. package/dist/types-ts4.5/internal/role-to-aria-has-popup.d.ts +0 -13
  115. package/dist/types-ts4.5/internal/role-types.d.ts +0 -71
  116. package/dist/types-ts4.5/internal/set-style.d.ts +0 -11
  117. package/dist/types-ts4.5/internal/should-focus-into-popover.d.ts +0 -8
  118. package/dist/types-ts4.5/internal/slot.d.ts +0 -29
  119. package/dist/types-ts4.5/internal/use-anchor-position-at-point.d.ts +0 -67
  120. package/dist/types-ts4.5/internal/use-anchor-position.d.ts +0 -91
  121. package/dist/types-ts4.5/internal/use-animated-visibility.d.ts +0 -109
  122. package/dist/types-ts4.5/internal/use-animation-preset.d.ts +0 -11
  123. package/dist/types-ts4.5/internal/use-focus-wrap.d.ts +0 -25
  124. package/dist/types-ts4.5/internal/use-initial-focus.d.ts +0 -73
  125. package/dist/types-ts4.5/internal/use-preset-styles.d.ts +0 -15
  126. package/dist/types-ts4.5/internal/use-width-from-anchor.d.ts +0 -21
  127. package/dist/types-ts4.5/placement-map/index.d.ts +0 -51
  128. package/dist/types-ts4.5/placement-map/legacy-placements.d.ts +0 -27
  129. package/dist/types-ts4.5/placement-map/placement-mapping.d.ts +0 -13
  130. package/dist/types-ts4.5/popover/create-close-event.d.ts +0 -25
  131. package/dist/types-ts4.5/popover/index.d.ts +0 -3
  132. package/dist/types-ts4.5/popover/popover.d.ts +0 -17
  133. package/dist/types-ts4.5/popover/types.d.ts +0 -193
  134. package/dist/types-ts4.5/popover-surface/index.d.ts +0 -2
  135. package/dist/types-ts4.5/popover-surface/popover-surface.d.ts +0 -21
  136. package/dist/types-ts4.5/testing/polyfill.d.ts +0 -25
  137. package/dist/types-ts4.5/testing/to-be-visible.d.ts +0 -23
  138. package/dist/types-ts4.5/use-arrow-navigation/index.d.ts +0 -3
  139. package/dist/types-ts4.5/use-arrow-navigation/is-at-current-menu-level.d.ts +0 -48
  140. package/dist/types-ts4.5/use-arrow-navigation/use-arrow-navigation.d.ts +0 -102
  141. 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,2 +0,0 @@
1
- export { slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade, } from '../animations/presets';
2
- export type { TAnimationPreset } from '../animations/types';
@@ -1 +0,0 @@
1
- export { DialogScrollLock } from '../dialog-scroll-lock';
@@ -1,2 +0,0 @@
1
- export { createCloseEvent, Dialog } from '../dialog';
2
- export type { TDialogCloseReason, TDialogProps } from '../dialog';
@@ -1,4 +0,0 @@
1
- export type { TFocusableFilter } from '../focus/types';
2
- export { getFirstFocusable } from '../focus/get-first-focusable';
3
- export { getLastFocusable } from '../focus/get-last-focusable';
4
- export { getNextFocusable } from '../focus/get-next-focusable';
@@ -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,3 +0,0 @@
1
- export { fromLegacyPlacement } from '../placement-map';
2
- export { LEGACY_PLACEMENTS } from '../placement-map/legacy-placements';
3
- export type { TLegacyPlacement, TPlacementOptions } from '../placement-map';
@@ -1,2 +0,0 @@
1
- export { PopoverSurface } from '../popover-surface';
2
- export type { TPopoverSurfaceProps } from '../popover-surface';
@@ -1,2 +0,0 @@
1
- export { createPopoverCloseEvent, Popover } from '../popover';
2
- export type { TPopoverProps, TPopoverCloseReason, TPlacementOptions } from '../popover';
@@ -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,3 +0,0 @@
1
- export { useArrowNavigation } from '../use-arrow-navigation';
2
- export type { TUseArrowNavigationArgs } from '../use-arrow-navigation';
3
- export { isAtCurrentMenuLevel } from '../use-arrow-navigation/is-at-current-menu-level';
@@ -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,2 +0,0 @@
1
- export { useSimpleLightDismiss } from '../use-simple-light-dismiss';
2
- export type { TUseSimpleLightDismissOptions } from '../use-simple-light-dismiss';
@@ -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;
@@ -1,4 +0,0 @@
1
- export declare const selectors: {
2
- focusable: string;
3
- focused: string;
4
- };
@@ -1,5 +0,0 @@
1
- /**
2
- * An optional callback to restrict which focusable elements are included.
3
- * Return `true` to include the element, `false` to skip it.
4
- */
5
- export type TFocusableFilter = (element: HTMLElement, container: HTMLElement) => 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,6 +0,0 @@
1
- export declare function ensurePresetStyles({ preset }: {
2
- preset: {
3
- css: string;
4
- name: string;
5
- };
6
- }): 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;