@atlaskit/top-layer 0.13.0 → 0.15.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/CHANGELOG.md +23 -0
- package/README.md +61 -34
- package/dist/cjs/animations/presets.js +4 -4
- package/dist/cjs/dialog/create-close-event.js +1 -2
- package/dist/cjs/entry-points/dialog.js +6 -0
- package/dist/cjs/entry-points/get-aria-for-trigger.js +12 -0
- package/dist/cjs/entry-points/popover-surface.js +12 -0
- package/dist/cjs/entry-points/popover.js +6 -0
- package/dist/cjs/entry-points/use-popover-id.js +21 -0
- package/dist/cjs/internal/get-aria-for-trigger.js +88 -0
- package/dist/cjs/internal/role-types.js +64 -1
- package/dist/cjs/internal/slot.js +1 -1
- package/dist/cjs/internal/use-anchor-position.js +30 -14
- package/dist/cjs/popover/create-close-event.js +1 -2
- package/dist/cjs/popover/popover.js +79 -80
- package/dist/cjs/popover-surface/index.js +12 -0
- package/dist/cjs/{popup/popup-surface.js → popover-surface/popover-surface.js} +9 -12
- package/dist/cjs/testing/polyfill.js +9 -6
- package/dist/es2019/animations/presets.js +4 -4
- package/dist/es2019/dialog/create-close-event.js +1 -2
- package/dist/es2019/entry-points/dialog.js +1 -1
- package/dist/es2019/entry-points/get-aria-for-trigger.js +1 -0
- package/dist/es2019/entry-points/popover-surface.js +1 -0
- package/dist/es2019/entry-points/popover.js +1 -1
- package/dist/es2019/entry-points/use-popover-id.js +15 -0
- package/dist/es2019/internal/get-aria-for-trigger.js +84 -0
- package/dist/es2019/internal/role-types.js +59 -0
- package/dist/es2019/internal/slot.js +1 -1
- package/dist/es2019/internal/use-anchor-position.js +16 -12
- package/dist/es2019/popover/create-close-event.js +1 -2
- package/dist/es2019/popover/popover.js +79 -80
- package/dist/es2019/popover-surface/index.js +1 -0
- package/dist/es2019/popover-surface/popover-surface.js +27 -0
- package/dist/es2019/testing/polyfill.js +9 -6
- package/dist/esm/animations/presets.js +4 -4
- package/dist/esm/dialog/create-close-event.js +1 -2
- package/dist/esm/entry-points/dialog.js +1 -1
- package/dist/esm/entry-points/get-aria-for-trigger.js +1 -0
- package/dist/esm/entry-points/popover-surface.js +1 -0
- package/dist/esm/entry-points/popover.js +1 -1
- package/dist/esm/entry-points/use-popover-id.js +15 -0
- package/dist/esm/internal/get-aria-for-trigger.js +83 -0
- package/dist/esm/internal/role-types.js +58 -0
- package/dist/esm/internal/slot.js +1 -1
- package/dist/esm/internal/use-anchor-position.js +30 -14
- package/dist/esm/popover/create-close-event.js +1 -2
- package/dist/esm/popover/popover.js +79 -80
- package/dist/esm/popover-surface/index.js +1 -0
- package/dist/esm/popover-surface/popover-surface.js +26 -0
- package/dist/esm/testing/polyfill.js +9 -6
- package/dist/types/animations/presets.d.ts +4 -4
- package/dist/types/animations/types.d.ts +1 -9
- package/dist/types/dialog/create-close-event.d.ts +1 -2
- package/dist/types/dialog/types.d.ts +0 -8
- package/dist/types/entry-points/animations.d.ts +1 -1
- package/dist/types/entry-points/dialog.d.ts +1 -1
- package/dist/types/entry-points/get-aria-for-trigger.d.ts +1 -0
- package/dist/types/entry-points/popover-surface.d.ts +2 -0
- package/dist/types/entry-points/popover.d.ts +2 -2
- package/dist/types/entry-points/use-popover-id.d.ts +11 -0
- package/dist/types/internal/get-aria-for-trigger.d.ts +86 -0
- package/dist/types/internal/role-types.d.ts +7 -0
- package/dist/types/internal/slot.d.ts +2 -2
- package/dist/types/popover/create-close-event.d.ts +1 -2
- package/dist/types/popover/index.d.ts +1 -1
- package/dist/types/popover/popover.d.ts +6 -13
- package/dist/types/popover/types.d.ts +6 -5
- package/dist/types/popover-surface/index.d.ts +2 -0
- package/dist/types/popover-surface/popover-surface.d.ts +21 -0
- package/dist/types-ts4.5/animations/presets.d.ts +4 -4
- package/dist/types-ts4.5/animations/types.d.ts +1 -9
- package/dist/types-ts4.5/dialog/create-close-event.d.ts +1 -2
- package/dist/types-ts4.5/dialog/types.d.ts +0 -8
- package/dist/types-ts4.5/entry-points/animations.d.ts +1 -1
- package/dist/types-ts4.5/entry-points/dialog.d.ts +1 -1
- package/dist/types-ts4.5/entry-points/get-aria-for-trigger.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/popover-surface.d.ts +2 -0
- package/dist/types-ts4.5/entry-points/popover.d.ts +2 -2
- package/dist/types-ts4.5/entry-points/use-popover-id.d.ts +11 -0
- package/dist/types-ts4.5/internal/get-aria-for-trigger.d.ts +86 -0
- package/dist/types-ts4.5/internal/role-types.d.ts +7 -0
- package/dist/types-ts4.5/internal/slot.d.ts +2 -2
- package/dist/types-ts4.5/popover/create-close-event.d.ts +1 -2
- package/dist/types-ts4.5/popover/index.d.ts +1 -1
- package/dist/types-ts4.5/popover/popover.d.ts +6 -13
- package/dist/types-ts4.5/popover/types.d.ts +6 -5
- package/dist/types-ts4.5/popover-surface/index.d.ts +2 -0
- package/dist/types-ts4.5/popover-surface/popover-surface.d.ts +21 -0
- package/get-aria-for-trigger/package.json +17 -0
- package/package.json +3 -3
- package/popover-surface/package.json +17 -0
- package/use-popover-id/package.json +17 -0
- package/create-close-event/package.json +0 -17
- package/dialog/create-close-event/package.json +0 -17
- package/dist/cjs/entry-points/create-close-event.js +0 -19
- package/dist/cjs/entry-points/dialog/create-close-event.js +0 -12
- package/dist/cjs/entry-points/popover/create-close-event.js +0 -12
- package/dist/cjs/entry-points/popup-surface.js +0 -12
- package/dist/cjs/entry-points/popup.js +0 -12
- package/dist/cjs/popup/index.js +0 -37
- package/dist/cjs/popup/popup-content.js +0 -215
- package/dist/cjs/popup/popup-context.js +0 -25
- package/dist/cjs/popup/popup-provider.js +0 -15
- package/dist/cjs/popup/popup-trigger-function.js +0 -80
- package/dist/cjs/popup/popup-trigger.js +0 -66
- package/dist/cjs/popup/popup.js +0 -81
- package/dist/cjs/popup/types.js +0 -5
- package/dist/cjs/popup/use-maybe-popup-context.js +0 -17
- package/dist/cjs/popup/use-popup-context.js +0 -20
- package/dist/es2019/entry-points/create-close-event.js +0 -9
- package/dist/es2019/entry-points/dialog/create-close-event.js +0 -1
- package/dist/es2019/entry-points/popover/create-close-event.js +0 -1
- package/dist/es2019/entry-points/popup-surface.js +0 -1
- package/dist/es2019/entry-points/popup.js +0 -1
- package/dist/es2019/popup/index.js +0 -33
- package/dist/es2019/popup/popup-content.js +0 -207
- package/dist/es2019/popup/popup-context.js +0 -20
- package/dist/es2019/popup/popup-provider.js +0 -10
- package/dist/es2019/popup/popup-surface.js +0 -30
- package/dist/es2019/popup/popup-trigger-function.js +0 -75
- package/dist/es2019/popup/popup-trigger.js +0 -61
- package/dist/es2019/popup/popup.js +0 -67
- package/dist/es2019/popup/types.js +0 -1
- package/dist/es2019/popup/use-maybe-popup-context.js +0 -12
- package/dist/es2019/popup/use-popup-context.js +0 -15
- package/dist/esm/entry-points/create-close-event.js +0 -9
- package/dist/esm/entry-points/dialog/create-close-event.js +0 -1
- package/dist/esm/entry-points/popover/create-close-event.js +0 -1
- package/dist/esm/entry-points/popup-surface.js +0 -1
- package/dist/esm/entry-points/popup.js +0 -1
- package/dist/esm/popup/index.js +0 -33
- package/dist/esm/popup/popup-content.js +0 -207
- package/dist/esm/popup/popup-context.js +0 -20
- package/dist/esm/popup/popup-provider.js +0 -10
- package/dist/esm/popup/popup-surface.js +0 -29
- package/dist/esm/popup/popup-trigger-function.js +0 -75
- package/dist/esm/popup/popup-trigger.js +0 -59
- package/dist/esm/popup/popup.js +0 -72
- package/dist/esm/popup/types.js +0 -1
- package/dist/esm/popup/use-maybe-popup-context.js +0 -12
- package/dist/esm/popup/use-popup-context.js +0 -15
- package/dist/types/entry-points/create-close-event.d.ts +0 -11
- package/dist/types/entry-points/dialog/create-close-event.d.ts +0 -2
- package/dist/types/entry-points/popover/create-close-event.d.ts +0 -2
- package/dist/types/entry-points/popup-surface.d.ts +0 -2
- package/dist/types/entry-points/popup.d.ts +0 -2
- package/dist/types/popup/index.d.ts +0 -34
- package/dist/types/popup/popup-content.d.ts +0 -14
- package/dist/types/popup/popup-context.d.ts +0 -96
- package/dist/types/popup/popup-provider.d.ts +0 -10
- package/dist/types/popup/popup-surface.d.ts +0 -22
- package/dist/types/popup/popup-trigger-function.d.ts +0 -112
- package/dist/types/popup/popup-trigger.d.ts +0 -14
- package/dist/types/popup/popup.d.ts +0 -14
- package/dist/types/popup/types.d.ts +0 -321
- package/dist/types/popup/use-maybe-popup-context.d.ts +0 -8
- package/dist/types/popup/use-popup-context.d.ts +0 -7
- package/dist/types-ts4.5/entry-points/create-close-event.d.ts +0 -11
- package/dist/types-ts4.5/entry-points/dialog/create-close-event.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/popover/create-close-event.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/popup-surface.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/popup.d.ts +0 -2
- package/dist/types-ts4.5/popup/index.d.ts +0 -34
- package/dist/types-ts4.5/popup/popup-content.d.ts +0 -14
- package/dist/types-ts4.5/popup/popup-context.d.ts +0 -96
- package/dist/types-ts4.5/popup/popup-provider.d.ts +0 -10
- package/dist/types-ts4.5/popup/popup-surface.d.ts +0 -22
- package/dist/types-ts4.5/popup/popup-trigger-function.d.ts +0 -112
- package/dist/types-ts4.5/popup/popup-trigger.d.ts +0 -14
- package/dist/types-ts4.5/popup/popup.d.ts +0 -14
- package/dist/types-ts4.5/popup/types.d.ts +0 -321
- package/dist/types-ts4.5/popup/use-maybe-popup-context.d.ts +0 -8
- package/dist/types-ts4.5/popup/use-popup-context.d.ts +0 -7
- package/popover/create-close-event/package.json +0 -17
- package/popup/package.json +0 -17
- package/popup-surface/package.json +0 -17
- /package/dist/cjs/{popup/popup-surface.compiled.css → popover-surface/popover-surface.compiled.css} +0 -0
- /package/dist/es2019/{popup/popup-surface.compiled.css → popover-surface/popover-surface.compiled.css} +0 -0
- /package/dist/esm/{popup/popup-surface.compiled.css → popover-surface/popover-surface.compiled.css} +0 -0
|
@@ -0,0 +1,86 @@
|
|
|
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
|
+
'aria-controls': string;
|
|
37
|
+
};
|
|
38
|
+
/**
|
|
39
|
+
* Returns the ARIA attributes to spread onto a click-activated popover trigger.
|
|
40
|
+
*
|
|
41
|
+
* Centralises three attributes that are easy to forget or get wrong individually:
|
|
42
|
+
*
|
|
43
|
+
* - `aria-haspopup` - derived from the popover's role (e.g. `dialog → "dialog"`,
|
|
44
|
+
* `menu → "menu"`, `tooltip → undefined`). React omits the attribute when
|
|
45
|
+
* the value is `undefined`.
|
|
46
|
+
* - `aria-expanded` - reflects the current open state.
|
|
47
|
+
* - `aria-controls` - references the popover element by its id, even
|
|
48
|
+
* while the popover is closed. The relationship is stable; `aria-expanded`
|
|
49
|
+
* carries the current visibility state.
|
|
50
|
+
*
|
|
51
|
+
* **This function is for click/keyboard-activated popovers only.** For
|
|
52
|
+
* hover-driven tooltips, the trigger should use `aria-describedby` instead.
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* ```tsx
|
|
56
|
+
* import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
|
|
57
|
+
* import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
|
|
58
|
+
*
|
|
59
|
+
* const popoverId = usePopoverId();
|
|
60
|
+
* const [isOpen, setIsOpen] = useState(false);
|
|
61
|
+
*
|
|
62
|
+
* return (
|
|
63
|
+
* <>
|
|
64
|
+
* <button
|
|
65
|
+
* ref={triggerRef}
|
|
66
|
+
* onClick={() => setIsOpen((previous) => !previous)}
|
|
67
|
+
* {...getAriaForTrigger({ role: 'dialog', isOpen, popoverId })}
|
|
68
|
+
* >
|
|
69
|
+
* Open
|
|
70
|
+
* </button>
|
|
71
|
+
* <Popover
|
|
72
|
+
* id={popoverId}
|
|
73
|
+
* role="dialog"
|
|
74
|
+
* label="My dialog"
|
|
75
|
+
* isOpen={isOpen}
|
|
76
|
+
* triggerRef={triggerRef}
|
|
77
|
+
* onClose={() => setIsOpen(false)}
|
|
78
|
+
* >
|
|
79
|
+
* …
|
|
80
|
+
* </Popover>
|
|
81
|
+
* </>
|
|
82
|
+
* );
|
|
83
|
+
* ```
|
|
84
|
+
*/
|
|
85
|
+
export declare function getAriaForTrigger({ role, isOpen, popoverId, }: TGetAriaForTriggerOptions): TAriaForTrigger;
|
|
86
|
+
export {};
|
|
@@ -61,4 +61,11 @@ export type TAriaRoleOptional = ({
|
|
|
61
61
|
} & TAccessibleNameRequired) | ({
|
|
62
62
|
role?: TRoleWithImplicitName;
|
|
63
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;
|
|
64
71
|
export {};
|
|
@@ -2,7 +2,7 @@ import { type ForwardRefExoticComponent, type ReactNode, type RefAttributes } fr
|
|
|
2
2
|
/**
|
|
3
3
|
* Extra DOM/event props are passed through to the cloned child.
|
|
4
4
|
*/
|
|
5
|
-
export type
|
|
5
|
+
export type SlotProps = {
|
|
6
6
|
children: ReactNode;
|
|
7
7
|
} & Record<string, unknown>;
|
|
8
8
|
/**
|
|
@@ -26,4 +26,4 @@ export type TSlotProps = {
|
|
|
26
26
|
* </Slot>
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
29
|
-
export declare const Slot: ForwardRefExoticComponent<
|
|
29
|
+
export declare const Slot: ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>;
|
|
@@ -13,8 +13,7 @@ import type { TPopoverCloseReason } from './types';
|
|
|
13
13
|
*
|
|
14
14
|
* @example
|
|
15
15
|
* ```tsx
|
|
16
|
-
* import { createPopoverCloseEvent } from '@atlaskit/top-layer/
|
|
17
|
-
* import { type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
|
|
16
|
+
* import { createPopoverCloseEvent, type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
|
|
18
17
|
*
|
|
19
18
|
* function onPopoverClose({ reason }: { reason: TPopoverCloseReason }) {
|
|
20
19
|
* legacyOnClose(createPopoverCloseEvent({ reason }));
|
|
@@ -5,20 +5,13 @@
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { type TPopoverForwardedProps } from './types';
|
|
7
7
|
/**
|
|
8
|
-
* Unopinionated top-layer primitive.
|
|
8
|
+
* Unopinionated top-layer primitive. Manages visibility and animation only;
|
|
9
|
+
* compose with `useAnchorPosition` / `useWidthFromAnchor` for positioning.
|
|
9
10
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* and optionally `useWidthFromAnchor` for setting the width of a popover element
|
|
13
|
-
* relative to its anchor trigger.
|
|
11
|
+
* `isOpen={true}` calls `showPopover()` (entry via `@starting-style`);
|
|
12
|
+
* `isOpen={false}` calls `hidePopover()` (exit via `allow-discrete`).
|
|
14
13
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* - `isOpen={false}` → `hidePopover()`, exit animation via `allow-discrete`
|
|
18
|
-
*
|
|
19
|
-
* For `mode="auto"`, the browser can dismiss the popover via light dismiss
|
|
20
|
-
* (Escape, click outside). When that happens, `onClose` is called and the
|
|
21
|
-
* consumer must set `isOpen` to `false`. The DOM owns the dismiss; React
|
|
22
|
-
* must follow.
|
|
14
|
+
* In `mode="auto"`, the browser can light-dismiss (Escape, click outside).
|
|
15
|
+
* `onClose` fires; the consumer must then set `isOpen` to `false`.
|
|
23
16
|
*/
|
|
24
17
|
export declare const Popover: React.ForwardRefExoticComponent<TPopoverForwardedProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import { type StrictXCSSProp } from '@atlaskit/css';
|
|
3
3
|
import { type TAnimationPreset } from '../animations/types';
|
|
4
|
+
import { type TPlacementOptions } from '../internal/resolve-placement';
|
|
4
5
|
import { type TAriaRoleRequired, type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
|
|
5
|
-
import { type TPlacementOptions } from '../popup/types';
|
|
6
6
|
/**
|
|
7
7
|
* The reason a popover was closed.
|
|
8
8
|
*
|
|
@@ -31,6 +31,7 @@ export type TPopoverForwardedProps = TPopoverBaseProps & {
|
|
|
31
31
|
label?: string;
|
|
32
32
|
labelledBy?: string;
|
|
33
33
|
};
|
|
34
|
+
export type { TPlacementOptions };
|
|
34
35
|
type TPopoverBaseProps = {
|
|
35
36
|
children: ReactNode;
|
|
36
37
|
/**
|
|
@@ -51,8 +52,9 @@ type TPopoverBaseProps = {
|
|
|
51
52
|
testId?: string;
|
|
52
53
|
/**
|
|
53
54
|
* HTML `id` attribute for the popover element. When omitted, a unique ID
|
|
54
|
-
* is generated automatically.
|
|
55
|
-
*
|
|
55
|
+
* is generated automatically. Pair the trigger with this ID via `aria-controls`
|
|
56
|
+
* and the popover with `popovertarget`. Use `usePopoverId()` to generate a
|
|
57
|
+
* stable, CSS-safe id.
|
|
56
58
|
*/
|
|
57
59
|
id?: string;
|
|
58
60
|
/**
|
|
@@ -109,7 +111,7 @@ type TPopoverBaseProps = {
|
|
|
109
111
|
* Called after the entry animation completes (or immediately on open when
|
|
110
112
|
* there is no animation or reduced motion is active).
|
|
111
113
|
*
|
|
112
|
-
* Use this for external lifecycle coordination
|
|
114
|
+
* Use this for external lifecycle coordination - e.g. notifying a manager
|
|
113
115
|
* that the show sequence is finished.
|
|
114
116
|
*/
|
|
115
117
|
onEnterFinish?: () => void;
|
|
@@ -178,4 +180,3 @@ export type TPopoverProps = TPopoverBaseProps & TAriaRoleRequired & ({
|
|
|
178
180
|
* Falls back to a one-off measurement of the anchor's width.
|
|
179
181
|
*/
|
|
180
182
|
export type TWidthFromAnchorMode = 'none' | 'match-anchor' | 'min-anchor';
|
|
181
|
-
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import React, { type ReactNode } from 'react';
|
|
6
|
+
export type TPopoverSurfaceProps = {
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Optional styled wrapper for popover content.
|
|
11
|
+
*
|
|
12
|
+
* Adds default visual styling (background, border-radius, box-shadow)
|
|
13
|
+
* using design tokens.
|
|
14
|
+
*
|
|
15
|
+
* Presentational primitive - `children`-only by design. This component
|
|
16
|
+
* intentionally exposes no `style`, `className`, `xcss`, `id`, or `ref`
|
|
17
|
+
* props. If you need any of those, render your own wrapper element inside
|
|
18
|
+
* `Popover` instead. `PopoverSurface` is the no-config "give me the default
|
|
19
|
+
* ADS overlay look" surface, nothing more.
|
|
20
|
+
*/
|
|
21
|
+
export declare function PopoverSurface({ children }: TPopoverSurfaceProps): React.ReactElement;
|
|
@@ -18,10 +18,10 @@ type TSlideAndFadeOptions = {
|
|
|
18
18
|
* import { slideAndFade } from '@atlaskit/top-layer/animations';
|
|
19
19
|
*
|
|
20
20
|
* // Default 4px slide (tooltip)
|
|
21
|
-
* <
|
|
21
|
+
* <Popover animate={slideAndFade()} />
|
|
22
22
|
*
|
|
23
23
|
* // Custom 8px slide (popup / dropdown)
|
|
24
|
-
* <
|
|
24
|
+
* <Popover animate={slideAndFade({ distance: 8 })} />
|
|
25
25
|
* ```
|
|
26
26
|
*/
|
|
27
27
|
export declare function slideAndFade(options?: TSlideAndFadeOptions): TAnimationPreset;
|
|
@@ -34,7 +34,7 @@ export declare function slideAndFade(options?: TSlideAndFadeOptions): TAnimation
|
|
|
34
34
|
* ```tsx
|
|
35
35
|
* import { fade } from '@atlaskit/top-layer/animations';
|
|
36
36
|
*
|
|
37
|
-
* <
|
|
37
|
+
* <Popover animate={fade()} />
|
|
38
38
|
* ```
|
|
39
39
|
*/
|
|
40
40
|
export declare function fade(): TAnimationPreset;
|
|
@@ -47,7 +47,7 @@ export declare function fade(): TAnimationPreset;
|
|
|
47
47
|
* ```tsx
|
|
48
48
|
* import { scaleAndFade } from '@atlaskit/top-layer/animations';
|
|
49
49
|
*
|
|
50
|
-
* <
|
|
50
|
+
* <Popover animate={scaleAndFade()} />
|
|
51
51
|
* ```
|
|
52
52
|
*/
|
|
53
53
|
export declare function scaleAndFade(): TAnimationPreset;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { TPlacementOptions } from '../
|
|
1
|
+
import type { TPlacementOptions } from '../internal/resolve-placement';
|
|
2
2
|
/**
|
|
3
3
|
* A self-contained animation preset for top-layer elements (popovers and dialogs).
|
|
4
4
|
*
|
|
@@ -36,11 +36,3 @@ export type TAnimationPreset = {
|
|
|
36
36
|
*/
|
|
37
37
|
exitDurationMs: number;
|
|
38
38
|
};
|
|
39
|
-
/**
|
|
40
|
-
* @deprecated Use `TAnimationPreset` instead.
|
|
41
|
-
*/
|
|
42
|
-
export type TPopoverAnimationPreset = TAnimationPreset;
|
|
43
|
-
/**
|
|
44
|
-
* @deprecated Use `TAnimationPreset` instead.
|
|
45
|
-
*/
|
|
46
|
-
export type TDialogAnimationPreset = TAnimationPreset;
|
|
@@ -11,8 +11,7 @@ import type { TDialogCloseReason } from './types';
|
|
|
11
11
|
*
|
|
12
12
|
* @example
|
|
13
13
|
* ```tsx
|
|
14
|
-
* import { createCloseEvent } from '@atlaskit/top-layer/
|
|
15
|
-
* import { type TDialogCloseReason } from '@atlaskit/top-layer/dialog';
|
|
14
|
+
* import { createCloseEvent, type TDialogCloseReason } from '@atlaskit/top-layer/dialog';
|
|
16
15
|
*
|
|
17
16
|
* function onDialogClose({ reason }: { reason: TDialogCloseReason }) {
|
|
18
17
|
* legacyOnClose(createCloseEvent({ reason }));
|
|
@@ -49,14 +49,6 @@ type TDialogBaseProps = {
|
|
|
49
49
|
* Additional inline styles applied to the `<dialog>` element.
|
|
50
50
|
*
|
|
51
51
|
* Use for custom width, height, transform, or other overrides.
|
|
52
|
-
*
|
|
53
|
-
* Rule deviation: the house rules ban unbounded `style` props on
|
|
54
|
-
* components. `Dialog` is a low-level primitive that intentionally has
|
|
55
|
-
* no visual opinions of its own; consumers such as `@atlaskit/modal-dialog`
|
|
56
|
-
* must be able to set width, height, and transforms on the native
|
|
57
|
-
* `<dialog>` element. Removing this prop would be a breaking change
|
|
58
|
-
* and is tracked separately. Keep until an xcss-based replacement
|
|
59
|
-
* exists on the primitive.
|
|
60
52
|
*/
|
|
61
53
|
style?: CSSProperties;
|
|
62
54
|
/**
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { slideAndFade, fade, scaleAndFade, dialogSlideUpAndFade, dialogFade, } from '../animations/presets';
|
|
2
|
-
export type { TAnimationPreset
|
|
2
|
+
export type { TAnimationPreset } from '../animations/types';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Dialog } from '../dialog';
|
|
1
|
+
export { createCloseEvent, Dialog } from '../dialog';
|
|
2
2
|
export type { TDialogCloseReason, TDialogProps } from '../dialog';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { getAriaForTrigger } from '../internal/get-aria-for-trigger';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Popover } from '../popover';
|
|
2
|
-
export type { TPopoverProps, TPopoverCloseReason } from '../popover';
|
|
1
|
+
export { createPopoverCloseEvent, Popover } from '../popover';
|
|
2
|
+
export type { TPopoverProps, TPopoverCloseReason, TPlacementOptions } from '../popover';
|
|
@@ -0,0 +1,11 @@
|
|
|
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;
|
|
@@ -0,0 +1,86 @@
|
|
|
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
|
+
'aria-controls': string;
|
|
37
|
+
};
|
|
38
|
+
/**
|
|
39
|
+
* Returns the ARIA attributes to spread onto a click-activated popover trigger.
|
|
40
|
+
*
|
|
41
|
+
* Centralises three attributes that are easy to forget or get wrong individually:
|
|
42
|
+
*
|
|
43
|
+
* - `aria-haspopup` - derived from the popover's role (e.g. `dialog → "dialog"`,
|
|
44
|
+
* `menu → "menu"`, `tooltip → undefined`). React omits the attribute when
|
|
45
|
+
* the value is `undefined`.
|
|
46
|
+
* - `aria-expanded` - reflects the current open state.
|
|
47
|
+
* - `aria-controls` - references the popover element by its id, even
|
|
48
|
+
* while the popover is closed. The relationship is stable; `aria-expanded`
|
|
49
|
+
* carries the current visibility state.
|
|
50
|
+
*
|
|
51
|
+
* **This function is for click/keyboard-activated popovers only.** For
|
|
52
|
+
* hover-driven tooltips, the trigger should use `aria-describedby` instead.
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* ```tsx
|
|
56
|
+
* import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
|
|
57
|
+
* import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
|
|
58
|
+
*
|
|
59
|
+
* const popoverId = usePopoverId();
|
|
60
|
+
* const [isOpen, setIsOpen] = useState(false);
|
|
61
|
+
*
|
|
62
|
+
* return (
|
|
63
|
+
* <>
|
|
64
|
+
* <button
|
|
65
|
+
* ref={triggerRef}
|
|
66
|
+
* onClick={() => setIsOpen((previous) => !previous)}
|
|
67
|
+
* {...getAriaForTrigger({ role: 'dialog', isOpen, popoverId })}
|
|
68
|
+
* >
|
|
69
|
+
* Open
|
|
70
|
+
* </button>
|
|
71
|
+
* <Popover
|
|
72
|
+
* id={popoverId}
|
|
73
|
+
* role="dialog"
|
|
74
|
+
* label="My dialog"
|
|
75
|
+
* isOpen={isOpen}
|
|
76
|
+
* triggerRef={triggerRef}
|
|
77
|
+
* onClose={() => setIsOpen(false)}
|
|
78
|
+
* >
|
|
79
|
+
* …
|
|
80
|
+
* </Popover>
|
|
81
|
+
* </>
|
|
82
|
+
* );
|
|
83
|
+
* ```
|
|
84
|
+
*/
|
|
85
|
+
export declare function getAriaForTrigger({ role, isOpen, popoverId, }: TGetAriaForTriggerOptions): TAriaForTrigger;
|
|
86
|
+
export {};
|
|
@@ -61,4 +61,11 @@ export type TAriaRoleOptional = ({
|
|
|
61
61
|
} & TAccessibleNameRequired) | ({
|
|
62
62
|
role?: TRoleWithImplicitName;
|
|
63
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;
|
|
64
71
|
export {};
|
|
@@ -2,7 +2,7 @@ import { type ForwardRefExoticComponent, type ReactNode, type RefAttributes } fr
|
|
|
2
2
|
/**
|
|
3
3
|
* Extra DOM/event props are passed through to the cloned child.
|
|
4
4
|
*/
|
|
5
|
-
export type
|
|
5
|
+
export type SlotProps = {
|
|
6
6
|
children: ReactNode;
|
|
7
7
|
} & Record<string, unknown>;
|
|
8
8
|
/**
|
|
@@ -26,4 +26,4 @@ export type TSlotProps = {
|
|
|
26
26
|
* </Slot>
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
29
|
-
export declare const Slot: ForwardRefExoticComponent<
|
|
29
|
+
export declare const Slot: ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>;
|
|
@@ -13,8 +13,7 @@ import type { TPopoverCloseReason } from './types';
|
|
|
13
13
|
*
|
|
14
14
|
* @example
|
|
15
15
|
* ```tsx
|
|
16
|
-
* import { createPopoverCloseEvent } from '@atlaskit/top-layer/
|
|
17
|
-
* import { type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
|
|
16
|
+
* import { createPopoverCloseEvent, type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
|
|
18
17
|
*
|
|
19
18
|
* function onPopoverClose({ reason }: { reason: TPopoverCloseReason }) {
|
|
20
19
|
* legacyOnClose(createPopoverCloseEvent({ reason }));
|
|
@@ -5,20 +5,13 @@
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { type TPopoverForwardedProps } from './types';
|
|
7
7
|
/**
|
|
8
|
-
* Unopinionated top-layer primitive.
|
|
8
|
+
* Unopinionated top-layer primitive. Manages visibility and animation only;
|
|
9
|
+
* compose with `useAnchorPosition` / `useWidthFromAnchor` for positioning.
|
|
9
10
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* and optionally `useWidthFromAnchor` for setting the width of a popover element
|
|
13
|
-
* relative to its anchor trigger.
|
|
11
|
+
* `isOpen={true}` calls `showPopover()` (entry via `@starting-style`);
|
|
12
|
+
* `isOpen={false}` calls `hidePopover()` (exit via `allow-discrete`).
|
|
14
13
|
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* - `isOpen={false}` → `hidePopover()`, exit animation via `allow-discrete`
|
|
18
|
-
*
|
|
19
|
-
* For `mode="auto"`, the browser can dismiss the popover via light dismiss
|
|
20
|
-
* (Escape, click outside). When that happens, `onClose` is called and the
|
|
21
|
-
* consumer must set `isOpen` to `false`. The DOM owns the dismiss; React
|
|
22
|
-
* must follow.
|
|
14
|
+
* In `mode="auto"`, the browser can light-dismiss (Escape, click outside).
|
|
15
|
+
* `onClose` fires; the consumer must then set `isOpen` to `false`.
|
|
23
16
|
*/
|
|
24
17
|
export declare const Popover: React.ForwardRefExoticComponent<TPopoverForwardedProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import { type StrictXCSSProp } from '@atlaskit/css';
|
|
3
3
|
import { type TAnimationPreset } from '../animations/types';
|
|
4
|
+
import { type TPlacementOptions } from '../internal/resolve-placement';
|
|
4
5
|
import { type TAriaRoleRequired, type TRoleRequiringAccessibleName, type TRoleWithImplicitName } from '../internal/role-types';
|
|
5
|
-
import { type TPlacementOptions } from '../popup/types';
|
|
6
6
|
/**
|
|
7
7
|
* The reason a popover was closed.
|
|
8
8
|
*
|
|
@@ -31,6 +31,7 @@ export type TPopoverForwardedProps = TPopoverBaseProps & {
|
|
|
31
31
|
label?: string;
|
|
32
32
|
labelledBy?: string;
|
|
33
33
|
};
|
|
34
|
+
export type { TPlacementOptions };
|
|
34
35
|
type TPopoverBaseProps = {
|
|
35
36
|
children: ReactNode;
|
|
36
37
|
/**
|
|
@@ -51,8 +52,9 @@ type TPopoverBaseProps = {
|
|
|
51
52
|
testId?: string;
|
|
52
53
|
/**
|
|
53
54
|
* HTML `id` attribute for the popover element. When omitted, a unique ID
|
|
54
|
-
* is generated automatically.
|
|
55
|
-
*
|
|
55
|
+
* is generated automatically. Pair the trigger with this ID via `aria-controls`
|
|
56
|
+
* and the popover with `popovertarget`. Use `usePopoverId()` to generate a
|
|
57
|
+
* stable, CSS-safe id.
|
|
56
58
|
*/
|
|
57
59
|
id?: string;
|
|
58
60
|
/**
|
|
@@ -109,7 +111,7 @@ type TPopoverBaseProps = {
|
|
|
109
111
|
* Called after the entry animation completes (or immediately on open when
|
|
110
112
|
* there is no animation or reduced motion is active).
|
|
111
113
|
*
|
|
112
|
-
* Use this for external lifecycle coordination
|
|
114
|
+
* Use this for external lifecycle coordination - e.g. notifying a manager
|
|
113
115
|
* that the show sequence is finished.
|
|
114
116
|
*/
|
|
115
117
|
onEnterFinish?: () => void;
|
|
@@ -178,4 +180,3 @@ export type TPopoverProps = TPopoverBaseProps & TAriaRoleRequired & ({
|
|
|
178
180
|
* Falls back to a one-off measurement of the anchor's width.
|
|
179
181
|
*/
|
|
180
182
|
export type TWidthFromAnchorMode = 'none' | 'match-anchor' | 'min-anchor';
|
|
181
|
-
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import React, { type ReactNode } from 'react';
|
|
6
|
+
export type TPopoverSurfaceProps = {
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Optional styled wrapper for popover content.
|
|
11
|
+
*
|
|
12
|
+
* Adds default visual styling (background, border-radius, box-shadow)
|
|
13
|
+
* using design tokens.
|
|
14
|
+
*
|
|
15
|
+
* Presentational primitive - `children`-only by design. This component
|
|
16
|
+
* intentionally exposes no `style`, `className`, `xcss`, `id`, or `ref`
|
|
17
|
+
* props. If you need any of those, render your own wrapper element inside
|
|
18
|
+
* `Popover` instead. `PopoverSurface` is the no-config "give me the default
|
|
19
|
+
* ADS overlay look" surface, nothing more.
|
|
20
|
+
*/
|
|
21
|
+
export declare function PopoverSurface({ children }: TPopoverSurfaceProps): React.ReactElement;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@atlaskit/top-layer/get-aria-for-trigger",
|
|
3
|
+
"main": "../dist/cjs/entry-points/get-aria-for-trigger.js",
|
|
4
|
+
"module": "../dist/esm/entry-points/get-aria-for-trigger.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/entry-points/get-aria-for-trigger.js",
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"*.compiled.css"
|
|
8
|
+
],
|
|
9
|
+
"types": "../dist/types/entry-points/get-aria-for-trigger.d.ts",
|
|
10
|
+
"typesVersions": {
|
|
11
|
+
">=4.5 <5.9": {
|
|
12
|
+
"*": [
|
|
13
|
+
"../dist/types-ts4.5/entry-points/get-aria-for-trigger.d.ts"
|
|
14
|
+
]
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/top-layer",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.0",
|
|
4
4
|
"description": "Low-level layering primitives based on popover and dialog",
|
|
5
5
|
"homepage": "https://atlassian.design/components/top-layer",
|
|
6
6
|
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"@atlaskit/browser-apis": "^0.0.2",
|
|
38
38
|
"@atlaskit/css": "^0.19.0",
|
|
39
39
|
"@atlaskit/ds-lib": "^7.0.0",
|
|
40
|
-
"@atlaskit/layering": "^3.
|
|
41
|
-
"@atlaskit/tokens": "^13.
|
|
40
|
+
"@atlaskit/layering": "^3.8.0",
|
|
41
|
+
"@atlaskit/tokens": "^13.3.0",
|
|
42
42
|
"@babel/runtime": "^7.0.0",
|
|
43
43
|
"@compiled/react": "^0.20.0",
|
|
44
44
|
"bind-event-listener": "^3.0.0",
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@atlaskit/top-layer/popover-surface",
|
|
3
|
+
"main": "../dist/cjs/entry-points/popover-surface.js",
|
|
4
|
+
"module": "../dist/esm/entry-points/popover-surface.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/entry-points/popover-surface.js",
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"*.compiled.css"
|
|
8
|
+
],
|
|
9
|
+
"types": "../dist/types/entry-points/popover-surface.d.ts",
|
|
10
|
+
"typesVersions": {
|
|
11
|
+
">=4.5 <5.9": {
|
|
12
|
+
"*": [
|
|
13
|
+
"../dist/types-ts4.5/entry-points/popover-surface.d.ts"
|
|
14
|
+
]
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|