@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,71 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Valid values for the `aria-haspopup` attribute.
|
|
3
|
-
*
|
|
4
|
-
* Derived from the HTML spec - maps popover roles to what the trigger
|
|
5
|
-
* announces. `undefined` means the attribute is omitted entirely (used for
|
|
6
|
-
* non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
|
|
7
|
-
* `aria-haspopup` would be misleading).
|
|
8
|
-
*
|
|
9
|
-
* `true` is intentionally NOT in the union - the runtime only ever produces
|
|
10
|
-
* the explicit string forms, so widening the type would invite consumers to
|
|
11
|
-
* pass `true` and get an `aria-haspopup="true"` serialisation that the
|
|
12
|
-
* runtime no longer emits.
|
|
13
|
-
*/
|
|
14
|
-
export type TAriaHasPopupValue = 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | undefined;
|
|
15
|
-
/**
|
|
16
|
-
* Roles that require an accessible name (`label` or `labelledBy`) per WCAG 4.1.2.
|
|
17
|
-
* Without a name, assistive technology cannot identify these landmarks.
|
|
18
|
-
*/
|
|
19
|
-
export type TRoleRequiringAccessibleName = 'dialog' | 'alertdialog' | 'menu';
|
|
20
|
-
/**
|
|
21
|
-
* Roles where the accessible name is derived from content or provided externally
|
|
22
|
-
* (e.g. a combobox labels its listbox, tooltip content IS the accessible name).
|
|
23
|
-
*/
|
|
24
|
-
export type TRoleWithImplicitName = 'tooltip' | 'listbox' | 'tree' | 'grid' | 'note' | 'status' | 'alert' | 'log';
|
|
25
|
-
type TAccessibleNameRequired = {
|
|
26
|
-
/**
|
|
27
|
-
* Accessible name via `aria-label`.
|
|
28
|
-
*/
|
|
29
|
-
label: string;
|
|
30
|
-
labelledBy?: string;
|
|
31
|
-
} | {
|
|
32
|
-
label?: string;
|
|
33
|
-
/**
|
|
34
|
-
* Accessible name via `aria-labelledby`.
|
|
35
|
-
*/
|
|
36
|
-
labelledBy: string;
|
|
37
|
-
};
|
|
38
|
-
type TAccessibleNameOptional = {
|
|
39
|
-
label?: string;
|
|
40
|
-
labelledBy?: string;
|
|
41
|
-
};
|
|
42
|
-
/**
|
|
43
|
-
* ARIA role props where a role is always required.
|
|
44
|
-
*
|
|
45
|
-
* Used by `TPopupContentProps`. Popup content must always declare
|
|
46
|
-
* its role so assistive technology can identify the layer.
|
|
47
|
-
*/
|
|
48
|
-
export type TAriaRoleRequired = ({
|
|
49
|
-
role: TRoleRequiringAccessibleName;
|
|
50
|
-
} & TAccessibleNameRequired) | ({
|
|
51
|
-
role: TRoleWithImplicitName;
|
|
52
|
-
} & TAccessibleNameOptional);
|
|
53
|
-
/**
|
|
54
|
-
* ARIA role props where a role is optional.
|
|
55
|
-
*
|
|
56
|
-
* Used by `TPopoverProps`. The low-level primitive allows omitting
|
|
57
|
-
* the role for cases where it is set externally or not needed.
|
|
58
|
-
*/
|
|
59
|
-
export type TAriaRoleOptional = ({
|
|
60
|
-
role: TRoleRequiringAccessibleName;
|
|
61
|
-
} & TAccessibleNameRequired) | ({
|
|
62
|
-
role?: TRoleWithImplicitName;
|
|
63
|
-
} & TAccessibleNameOptional);
|
|
64
|
-
/**
|
|
65
|
-
* Returns `true` when the given popover role moves focus into the popover
|
|
66
|
-
* on open, and `false` otherwise (including when `role` is `undefined`).
|
|
67
|
-
*/
|
|
68
|
-
export declare function shouldFocusIntoPopover({ role, }: {
|
|
69
|
-
role: TRoleRequiringAccessibleName | TRoleWithImplicitName | undefined;
|
|
70
|
-
}): boolean;
|
|
71
|
-
export {};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Sets inline styles on an element and returns a cleanup function that
|
|
3
|
-
* restores the prior inline values (so we do not stomp consumer styles).
|
|
4
|
-
*/
|
|
5
|
-
export declare function setStyle({ el, styles, }: {
|
|
6
|
-
el: HTMLElement;
|
|
7
|
-
styles: Array<{
|
|
8
|
-
property: string;
|
|
9
|
-
value: string;
|
|
10
|
-
}>;
|
|
11
|
-
}): () => void;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { TRoleRequiringAccessibleName, TRoleWithImplicitName } from './role-types';
|
|
2
|
-
/**
|
|
3
|
-
* Returns `true` when the given popover role moves focus into the popover
|
|
4
|
-
* on open, and `false` otherwise (including when `role` is `undefined`).
|
|
5
|
-
*/
|
|
6
|
-
export declare function shouldFocusIntoPopover({ role, }: {
|
|
7
|
-
role: TRoleRequiringAccessibleName | TRoleWithImplicitName | undefined;
|
|
8
|
-
}): boolean;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { type ForwardRefExoticComponent, type ReactNode, type RefAttributes } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Extra DOM/event props are passed through to the cloned child.
|
|
4
|
-
*/
|
|
5
|
-
export type SlotProps = {
|
|
6
|
-
children: ReactNode;
|
|
7
|
-
} & Record<string, unknown>;
|
|
8
|
-
/**
|
|
9
|
-
* Merges props (including ref) onto a single React element child.
|
|
10
|
-
*
|
|
11
|
-
* A safer alternative to raw `cloneElement` that:
|
|
12
|
-
* 1. Guards with `isValidElement` - non-element children (strings,
|
|
13
|
-
* fragments, null) are returned as-is instead of crashing.
|
|
14
|
-
* 2. Merges refs via `mergeRefs` so both the caller's ref and the
|
|
15
|
-
* child's existing ref are honoured.
|
|
16
|
-
* 3. Spreads any additional props (ARIA attributes, event handlers, etc.)
|
|
17
|
-
* onto the child element.
|
|
18
|
-
*
|
|
19
|
-
* Event handlers (e.g. `onClick`) are **not** auto-merged - the caller's
|
|
20
|
-
* handler replaces the child's. Compose handlers before passing them in.
|
|
21
|
-
*
|
|
22
|
-
* @example
|
|
23
|
-
* ```tsx
|
|
24
|
-
* <Slot ref={triggerRef} onClick={handleClick} aria-expanded={isOpen}>
|
|
25
|
-
* <button>Open</button>
|
|
26
|
-
* </Slot>
|
|
27
|
-
* ```
|
|
28
|
-
*/
|
|
29
|
-
export declare const Slot: ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>;
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import { type RefObject } from 'react';
|
|
2
|
-
import { type TPlacementOptions } from './resolve-placement';
|
|
3
|
-
/**
|
|
4
|
-
* A point in viewport coordinates (CSS pixels) at which the synthetic
|
|
5
|
-
* anchor should be placed.
|
|
6
|
-
*
|
|
7
|
-
* Axis-named (`x`/`y`) rather than edge-named (`left`/`top`) so the
|
|
8
|
-
* shape is unambiguous in RTL writing modes — there is no ambiguity
|
|
9
|
-
* about whether a coordinate is logical (`inline-start`/`block-start`)
|
|
10
|
-
* or physical (`left`/`top`). Viewport coordinates are always
|
|
11
|
-
* physical, so we name them with the physical axis labels.
|
|
12
|
-
*/
|
|
13
|
-
export type TAnchorPoint = {
|
|
14
|
-
x: number;
|
|
15
|
-
y: number;
|
|
16
|
-
};
|
|
17
|
-
/**
|
|
18
|
-
* Positions a popover at a consumer-supplied viewport coordinate using a
|
|
19
|
-
* hidden synthetic anchor.
|
|
20
|
-
*
|
|
21
|
-
* @example
|
|
22
|
-
* ```tsx
|
|
23
|
-
* function PointPositionedPopover({ popoverRef, placement, mousePos }) {
|
|
24
|
-
* useAnchorPositionAtPoint({
|
|
25
|
-
* popoverRef,
|
|
26
|
-
* placement,
|
|
27
|
-
* isEnabled: Boolean(mousePos),
|
|
28
|
-
* getPoint: () => {
|
|
29
|
-
* if (!mousePos) return null;
|
|
30
|
-
* return { x: mousePos.clientX, y: mousePos.clientY };
|
|
31
|
-
* },
|
|
32
|
-
* });
|
|
33
|
-
* return <Popover ref={popoverRef}>...</Popover>;
|
|
34
|
-
* }
|
|
35
|
-
* ```
|
|
36
|
-
*/
|
|
37
|
-
export declare function useAnchorPositionAtPoint({ popoverRef, placement, getPoint, isEnabled, isOpen, }: {
|
|
38
|
-
/**
|
|
39
|
-
* Element being positioned. Passed to `useAnchorPosition`.
|
|
40
|
-
*/
|
|
41
|
-
popoverRef: RefObject<HTMLElement | null>;
|
|
42
|
-
/**
|
|
43
|
-
* Where the popover sits relative to the anchor.
|
|
44
|
-
*/
|
|
45
|
-
placement: TPlacementOptions;
|
|
46
|
-
/**
|
|
47
|
-
* Lazy callback returning the viewport coordinate to anchor at.
|
|
48
|
-
* Called once per activation (every `isEnabled: false → true`
|
|
49
|
-
* transition); the result is latched and not re-read.
|
|
50
|
-
*
|
|
51
|
-
* Return `null` to signal "no point yet" — the hook stays in a
|
|
52
|
-
* no-DOM state so another positioning strategy can own the popover.
|
|
53
|
-
*
|
|
54
|
-
* Read from a ref, so it does not need to be memoized.
|
|
55
|
-
*/
|
|
56
|
-
getPoint: () => TAnchorPoint | null;
|
|
57
|
-
/**
|
|
58
|
-
* When `false`, the hook is a no-op: no synthetic anchor is created
|
|
59
|
-
* and no positioning is applied. Defaults to `true`.
|
|
60
|
-
*/
|
|
61
|
-
isEnabled?: boolean;
|
|
62
|
-
/**
|
|
63
|
-
* Whether the popover is currently open. Forwarded to the inner
|
|
64
|
-
* `useAnchorPosition` so it re-runs across host remount cycles.
|
|
65
|
-
*/
|
|
66
|
-
isOpen: boolean;
|
|
67
|
-
}): void;
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Anchor positioning for top-layer popovers. See
|
|
3
|
-
* `notes/architecture/positioning.md` for the full model.
|
|
4
|
-
*
|
|
5
|
-
* Two runtime paths: CSS Anchor Positioning (modern browsers) and a JS
|
|
6
|
-
* fallback that measures the trigger and writes `top`/`left`.
|
|
7
|
-
*
|
|
8
|
-
* Both paths honour `offset.gap` and `offset.crossAxisShift`. The
|
|
9
|
-
* CSS path passes the values through as strings; the JS fallback resolves
|
|
10
|
-
* them to pixels via a hidden DOM probe (see `resolveCssLengthToPixels`)
|
|
11
|
-
* so tokens, `calc()`, `var()`, etc all work. The JS fallback hides the
|
|
12
|
-
* popover with `opacity: 0` until the first measurement completes, so it
|
|
13
|
-
* is never painted at the wrong location.
|
|
14
|
-
*/
|
|
15
|
-
import { type RefObject } from 'react';
|
|
16
|
-
import { type TPlacementOptions } from '../internal/resolve-placement';
|
|
17
|
-
/**
|
|
18
|
-
* Hook that positions an element relative to an anchor element using
|
|
19
|
-
* CSS Anchor Positioning (with a JS fallback for older browsers).
|
|
20
|
-
*
|
|
21
|
-
* This hook is the positioning primitive. It has no knowledge of popovers,
|
|
22
|
-
* visibility, or animation. Compose it with `Popover` for anchor-positioned
|
|
23
|
-
* top-layer content.
|
|
24
|
-
*
|
|
25
|
-
* When CSS Anchor Positioning is supported, it sets CSS properties
|
|
26
|
-
* (`anchor-name`, `position-anchor`, `position-area`, `position-try-fallbacks`)
|
|
27
|
-
* directly on the elements via `el.style.setProperty()`.
|
|
28
|
-
*
|
|
29
|
-
* When not supported, it falls back to JavaScript-based positioning using
|
|
30
|
-
* `position: fixed` with measured coordinates, re-running on scroll (capture)
|
|
31
|
-
* and resize events.
|
|
32
|
-
*
|
|
33
|
-
* `placement` may be a fresh inline object on every render: a structural
|
|
34
|
-
* comparison is used internally so re-runs are skipped when the resolved
|
|
35
|
-
* placement shape is unchanged.
|
|
36
|
-
*/
|
|
37
|
-
export declare function useAnchorPosition({ anchorRef, popoverRef, placement, forceFallbackPositioning, isEnabled, isOpen, }: {
|
|
38
|
-
/**
|
|
39
|
-
* Element to position relative to.
|
|
40
|
-
*/
|
|
41
|
-
anchorRef: RefObject<HTMLElement | null>;
|
|
42
|
-
/**
|
|
43
|
-
* Element being positioned (typically a popover).
|
|
44
|
-
*
|
|
45
|
-
* The popover host may be unmounted between opens (the `Popover`
|
|
46
|
-
* primitive unmounts after its exit animation). Pass `isOpen` so the
|
|
47
|
-
* positioning effect re-runs against the freshly mounted element on
|
|
48
|
-
* the next open. Without it, the effect's bound listeners and styles
|
|
49
|
-
* would target the previous (detached) element.
|
|
50
|
-
*/
|
|
51
|
-
popoverRef: RefObject<HTMLElement | null>;
|
|
52
|
-
/**
|
|
53
|
-
* Where to place the element relative to the anchor.
|
|
54
|
-
* `offset.gap` and `offset.crossAxisShift` are part of the
|
|
55
|
-
* placement object.
|
|
56
|
-
*
|
|
57
|
-
* All fields are optional. Omitted fields fall back to:
|
|
58
|
-
* - `axis`: `'block'`
|
|
59
|
-
* - `edge`: `'end'`
|
|
60
|
-
* - `align`: `'center'`
|
|
61
|
-
* - `offset.gap`: `token('space.100', '8px')`
|
|
62
|
-
* - `offset.crossAxisShift.value`: `'0px'`
|
|
63
|
-
* - `offset.crossAxisShift.direction`: `'forwards'`
|
|
64
|
-
*
|
|
65
|
-
* The full default placement (`{}`) renders the popover centered
|
|
66
|
-
* below the trigger with one `space.100` of gap and no cross-axis
|
|
67
|
-
* shift.
|
|
68
|
-
*
|
|
69
|
-
* `offset.gap` and `offset.crossAxisShift.value` accept either a
|
|
70
|
-
* number (pixels) or a CSS length string (eg `token('space.200')`).
|
|
71
|
-
*/
|
|
72
|
-
placement?: TPlacementOptions;
|
|
73
|
-
/**
|
|
74
|
-
* Forces the JavaScript positioning fallback even when the browser
|
|
75
|
-
* supports CSS Anchor Positioning. Useful for testing fallback
|
|
76
|
-
* behavior in any environment, including production.
|
|
77
|
-
*/
|
|
78
|
-
forceFallbackPositioning?: boolean;
|
|
79
|
-
/**
|
|
80
|
-
* When `false`, the hook is a no-op and applies no positioning.
|
|
81
|
-
* Defaults to `true`.
|
|
82
|
-
*/
|
|
83
|
-
isEnabled?: boolean;
|
|
84
|
-
/**
|
|
85
|
-
* Whether the popover is currently open. Drives a re-run of the
|
|
86
|
-
* positioning effect when the popover host element is unmounted
|
|
87
|
-
* and remounted across open cycles, so listeners and styles are
|
|
88
|
-
* always wired to the live host element.
|
|
89
|
-
*/
|
|
90
|
-
isOpen: boolean;
|
|
91
|
-
}): void;
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import { type RefObject } from 'react';
|
|
2
|
-
import { type TAnimationPreset } from '../animations/types';
|
|
3
|
-
type TUseAnimatedVisibilityArgs = {
|
|
4
|
-
/**
|
|
5
|
-
* Whether the element is logically open.
|
|
6
|
-
*/
|
|
7
|
-
isOpen: boolean;
|
|
8
|
-
/**
|
|
9
|
-
* Animation preset for entry/exit transitions.
|
|
10
|
-
* Pass `false` or `undefined` to disable animation.
|
|
11
|
-
*/
|
|
12
|
-
animate: TAnimationPreset | false | undefined;
|
|
13
|
-
/**
|
|
14
|
-
* Ref to the DOM element that plays the entry/exit transitions.
|
|
15
|
-
* Used to listen for `transitionend`.
|
|
16
|
-
*/
|
|
17
|
-
elementRef: RefObject<HTMLElement | null>;
|
|
18
|
-
/**
|
|
19
|
-
* Called after the entry animation completes (or immediately on open
|
|
20
|
-
* when there is no animation or reduced motion is active).
|
|
21
|
-
* This includes initial mount with `isOpen=true`.
|
|
22
|
-
*/
|
|
23
|
-
onEnterFinish?: () => void;
|
|
24
|
-
/**
|
|
25
|
-
* Called after the exit animation completes (or immediately on close
|
|
26
|
-
* when there is no animation or reduced motion is active).
|
|
27
|
-
*/
|
|
28
|
-
onExitFinish?: () => void;
|
|
29
|
-
};
|
|
30
|
-
type TUseAnimatedVisibilityResult = {
|
|
31
|
-
/**
|
|
32
|
-
* Current visibility phase. See `TPhase` for the full lifecycle.
|
|
33
|
-
*
|
|
34
|
-
* `phase !== 'closed'` means the host element is mounted and on
|
|
35
|
-
* screen, including during animated entry, animated exit, and the
|
|
36
|
-
* non-animated close handshake. Use this when you need "the user
|
|
37
|
-
* can still see / interact with the element" semantics (e.g. focus
|
|
38
|
-
* trapping, listeners that must outlive the exit).
|
|
39
|
-
*/
|
|
40
|
-
phase: TPhase;
|
|
41
|
-
/**
|
|
42
|
-
* Resolved animation preset (with CSS injected), or `null` if
|
|
43
|
-
* animation is disabled.
|
|
44
|
-
*/
|
|
45
|
-
preset: TAnimationPreset | null;
|
|
46
|
-
};
|
|
47
|
-
/**
|
|
48
|
-
* Visibility lifecycle phase shared between `useAnimatedVisibility`,
|
|
49
|
-
* `useFocusWrap`, `useInitialFocus`, and the `Popover` / `Dialog`
|
|
50
|
-
* components.
|
|
51
|
-
*
|
|
52
|
-
* - `closed`: host element is unmounted. No DOM presence.
|
|
53
|
-
* - `entering`: host element is mounted and the CSS entry transition
|
|
54
|
-
* is playing. **Only emitted when animation is enabled.** With
|
|
55
|
-
* animation disabled the lifecycle goes directly `closed → open`.
|
|
56
|
-
* - `open`: host element is mounted and settled. No transition is
|
|
57
|
-
* playing.
|
|
58
|
-
* - `exiting`: `isOpen` has flipped to `false` but the host element
|
|
59
|
-
* is still mounted. Emitted while the CSS exit transition is playing
|
|
60
|
-
* (animation enabled) OR while we wait for the browser's
|
|
61
|
-
* `toggle`/`close` event to fire on the still-attached element so
|
|
62
|
-
* focus restoration can run (animation disabled).
|
|
63
|
-
*
|
|
64
|
-
* State machine:
|
|
65
|
-
* ```
|
|
66
|
-
* animation ON: closed → entering → open → exiting → closed
|
|
67
|
-
* animation OFF: closed → open → exiting → closed
|
|
68
|
-
* interrupts: entering → exiting (close mid-entry)
|
|
69
|
-
* exiting → entering (reopen mid-exit, animated)
|
|
70
|
-
* exiting → open (reopen mid-handshake, non-animated)
|
|
71
|
-
* ```
|
|
72
|
-
*
|
|
73
|
-
* `phase !== 'closed'` is the canonical "host is currently in the DOM
|
|
74
|
-
* and on screen" predicate.
|
|
75
|
-
*/
|
|
76
|
-
export type TPhase = 'closed' | 'entering' | 'open' | 'exiting';
|
|
77
|
-
/**
|
|
78
|
-
* Manages the children mount/unmount lifecycle around CSS exit transitions.
|
|
79
|
-
*
|
|
80
|
-
* Used by both `Popover` and `Dialog` to share the same animation lifecycle
|
|
81
|
-
* logic. Those components own their own show/hide mechanisms (showPopover /
|
|
82
|
-
* hidePopover vs showModal / close) and event handling - this hook only
|
|
83
|
-
* manages the relationship between `isOpen` and when children are rendered.
|
|
84
|
-
*
|
|
85
|
-
* ## Problem
|
|
86
|
-
*
|
|
87
|
-
* We want to delay the unmount of children until a CSS exit transition has
|
|
88
|
-
* finished playing. If we unmount children the moment `isOpen` becomes
|
|
89
|
-
* `false`, the exit animation is never visible - the content just disappears.
|
|
90
|
-
*
|
|
91
|
-
* ## How it works
|
|
92
|
-
*
|
|
93
|
-
* The lifecycle is modeled as a `phase` discriminated union (`closed`,
|
|
94
|
-
* `entering`, `open`, `exiting`). The host element is rendered while
|
|
95
|
-
* `phase !== 'closed'`, so the `exiting` phase keeps the host mounted
|
|
96
|
-
* while the CSS exit transition plays (or, with animation disabled,
|
|
97
|
-
* while we wait for the browser `toggle` / `close` event to fire on the
|
|
98
|
-
* still-attached element):
|
|
99
|
-
*
|
|
100
|
-
* ```
|
|
101
|
-
* isOpen: true ──────────────── false
|
|
102
|
-
* phase: open ──────────────── exiting ─── (exit settle) ─── closed
|
|
103
|
-
* ```
|
|
104
|
-
*
|
|
105
|
-
* Every effect dispatches on the single `phase` value instead of a
|
|
106
|
-
* cross-product of booleans.
|
|
107
|
-
*/
|
|
108
|
-
export declare function useAnimatedVisibility({ isOpen, animate, elementRef, onEnterFinish, onExitFinish, }: TUseAnimatedVisibilityArgs): TUseAnimatedVisibilityResult;
|
|
109
|
-
export {};
|
|
@@ -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;
|