@atlaskit/top-layer 0.12.1 → 0.13.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/dist/cjs/animations/presets.js +5 -5
- package/dist/cjs/dialog/create-close-event.js +1 -1
- package/dist/cjs/dialog/dialog-content.js +5 -5
- package/dist/cjs/entry-points/focus.js +6 -4
- package/dist/cjs/entry-points/use-anchor-position-at-point.js +12 -0
- package/dist/cjs/focus/get-first-focusable.js +19 -0
- package/dist/cjs/focus/get-focusables.js +30 -0
- package/dist/cjs/focus/get-last-focusable.js +19 -0
- package/dist/cjs/focus/get-next-focusable.js +43 -0
- package/dist/cjs/focus/is-in-same-layer.js +23 -0
- package/dist/cjs/focus/is-nested-layer-focused.js +32 -0
- package/dist/cjs/focus/selectors.js +19 -0
- package/dist/cjs/focus/types.js +1 -0
- package/dist/cjs/internal/ensure-preset-styles.js +1 -1
- package/dist/cjs/internal/reduced-motion.js +1 -1
- package/dist/cjs/internal/resolve-placement.js +2 -2
- package/dist/cjs/internal/role-to-aria-has-popup.js +37 -0
- package/dist/cjs/internal/role-types.js +1 -97
- package/dist/cjs/internal/should-focus-into-popover.js +19 -0
- package/dist/cjs/internal/slot.js +3 -3
- package/dist/cjs/internal/use-anchor-position-at-point.js +127 -0
- package/dist/cjs/internal/use-anchor-position.js +22 -33
- package/dist/cjs/internal/use-animated-visibility.js +10 -10
- package/dist/cjs/internal/use-animation-preset.js +1 -1
- package/dist/cjs/internal/use-focus-wrap.js +8 -5
- package/dist/cjs/internal/use-initial-focus.js +4 -4
- package/dist/cjs/internal/use-preset-styles.js +1 -1
- package/dist/cjs/internal/use-width-from-anchor.js +4 -4
- package/dist/cjs/placement-map/index.js +2 -2
- package/dist/cjs/placement-map/legacy-placements.js +2 -101
- package/dist/cjs/placement-map/placement-mapping.js +103 -0
- package/dist/cjs/popover/create-close-event.js +1 -1
- package/dist/cjs/popover/popover.js +3 -3
- package/dist/cjs/popup/popup-content.js +8 -7
- package/dist/cjs/testing/polyfill.js +8 -8
- package/dist/cjs/testing/to-be-visible.js +5 -5
- package/dist/cjs/use-arrow-navigation/is-at-current-menu-level.js +19 -12
- package/dist/cjs/use-arrow-navigation/use-arrow-navigation.js +7 -5
- package/dist/cjs/use-simple-light-dismiss/index.js +3 -3
- package/dist/es2019/animations/presets.js +5 -5
- package/dist/es2019/dialog/create-close-event.js +1 -1
- package/dist/es2019/dialog/dialog-content.js +5 -5
- package/dist/es2019/entry-points/focus.js +3 -1
- package/dist/es2019/entry-points/use-anchor-position-at-point.js +1 -0
- package/dist/es2019/focus/get-first-focusable.js +14 -0
- package/dist/es2019/focus/get-focusables.js +19 -0
- package/dist/es2019/focus/get-last-focusable.js +14 -0
- package/dist/es2019/focus/get-next-focusable.js +38 -0
- package/dist/es2019/focus/is-in-same-layer.js +18 -0
- package/dist/es2019/focus/is-nested-layer-focused.js +28 -0
- package/dist/es2019/focus/selectors.js +11 -0
- package/dist/es2019/focus/types.js +0 -0
- package/dist/es2019/internal/ensure-preset-styles.js +1 -1
- package/dist/es2019/internal/reduced-motion.js +1 -1
- package/dist/es2019/internal/resolve-placement.js +2 -2
- package/dist/es2019/internal/role-to-aria-has-popup.js +32 -0
- package/dist/es2019/internal/role-types.js +0 -92
- package/dist/es2019/internal/should-focus-into-popover.js +14 -0
- package/dist/es2019/internal/slot.js +3 -3
- package/dist/es2019/internal/use-anchor-position-at-point.js +122 -0
- package/dist/es2019/internal/use-anchor-position.js +19 -19
- package/dist/es2019/internal/use-animated-visibility.js +10 -10
- package/dist/es2019/internal/use-animation-preset.js +1 -1
- package/dist/es2019/internal/use-focus-wrap.js +4 -1
- package/dist/es2019/internal/use-initial-focus.js +1 -1
- package/dist/es2019/internal/use-preset-styles.js +1 -1
- package/dist/es2019/internal/use-width-from-anchor.js +4 -4
- package/dist/es2019/placement-map/index.js +1 -1
- package/dist/es2019/placement-map/legacy-placements.js +1 -100
- package/dist/es2019/placement-map/placement-mapping.js +97 -0
- package/dist/es2019/popover/create-close-event.js +1 -1
- package/dist/es2019/popover/popover.js +3 -3
- package/dist/es2019/popup/popup-content.js +6 -5
- package/dist/es2019/testing/polyfill.js +8 -8
- package/dist/es2019/testing/to-be-visible.js +5 -5
- package/dist/es2019/use-arrow-navigation/is-at-current-menu-level.js +19 -12
- package/dist/es2019/use-arrow-navigation/use-arrow-navigation.js +3 -1
- package/dist/es2019/use-simple-light-dismiss/index.js +3 -3
- package/dist/esm/animations/presets.js +5 -5
- package/dist/esm/dialog/create-close-event.js +1 -1
- package/dist/esm/dialog/dialog-content.js +5 -5
- package/dist/esm/entry-points/focus.js +3 -1
- package/dist/esm/entry-points/use-anchor-position-at-point.js +1 -0
- package/dist/esm/focus/get-first-focusable.js +13 -0
- package/dist/esm/focus/get-focusables.js +24 -0
- package/dist/esm/focus/get-last-focusable.js +13 -0
- package/dist/esm/focus/get-next-focusable.js +37 -0
- package/dist/esm/focus/is-in-same-layer.js +17 -0
- package/dist/esm/focus/is-nested-layer-focused.js +27 -0
- package/dist/esm/focus/selectors.js +13 -0
- package/dist/esm/focus/types.js +0 -0
- package/dist/esm/internal/ensure-preset-styles.js +1 -1
- package/dist/esm/internal/reduced-motion.js +1 -1
- package/dist/esm/internal/resolve-placement.js +2 -2
- package/dist/esm/internal/role-to-aria-has-popup.js +31 -0
- package/dist/esm/internal/role-types.js +0 -90
- package/dist/esm/internal/should-focus-into-popover.js +13 -0
- package/dist/esm/internal/slot.js +3 -3
- package/dist/esm/internal/use-anchor-position-at-point.js +122 -0
- package/dist/esm/internal/use-anchor-position.js +22 -33
- package/dist/esm/internal/use-animated-visibility.js +10 -10
- package/dist/esm/internal/use-animation-preset.js +1 -1
- package/dist/esm/internal/use-focus-wrap.js +4 -1
- package/dist/esm/internal/use-initial-focus.js +1 -1
- package/dist/esm/internal/use-preset-styles.js +1 -1
- package/dist/esm/internal/use-width-from-anchor.js +4 -4
- package/dist/esm/placement-map/index.js +1 -1
- package/dist/esm/placement-map/legacy-placements.js +1 -100
- package/dist/esm/placement-map/placement-mapping.js +97 -0
- package/dist/esm/popover/create-close-event.js +1 -1
- package/dist/esm/popover/popover.js +3 -3
- package/dist/esm/popup/popup-content.js +6 -5
- package/dist/esm/testing/polyfill.js +8 -8
- package/dist/esm/testing/to-be-visible.js +5 -5
- package/dist/esm/use-arrow-navigation/is-at-current-menu-level.js +19 -12
- package/dist/esm/use-arrow-navigation/use-arrow-navigation.js +3 -1
- package/dist/esm/use-simple-light-dismiss/index.js +3 -3
- package/dist/types/dialog/create-close-event.d.ts +1 -1
- package/dist/types/dialog/types.d.ts +8 -0
- package/dist/types/entry-points/focus.d.ts +4 -2
- package/dist/types/entry-points/use-anchor-position-at-point.d.ts +1 -0
- package/dist/types/focus/get-first-focusable.d.ts +8 -0
- package/dist/types/focus/get-focusables.d.ts +13 -0
- package/dist/types/focus/get-last-focusable.d.ts +8 -0
- package/dist/types/focus/get-next-focusable.d.ts +13 -0
- package/dist/types/focus/is-in-same-layer.d.ts +8 -0
- package/dist/types/focus/is-nested-layer-focused.d.ts +8 -0
- package/dist/types/focus/selectors.d.ts +4 -0
- package/dist/types/focus/types.d.ts +5 -0
- package/dist/types/internal/reduced-motion.d.ts +1 -1
- package/dist/types/internal/resolve-placement.d.ts +2 -2
- package/dist/types/internal/role-to-aria-has-popup.d.ts +13 -0
- package/dist/types/internal/role-types.d.ts +0 -19
- package/dist/types/internal/should-focus-into-popover.d.ts +8 -0
- package/dist/types/internal/slot.d.ts +4 -4
- package/dist/types/internal/use-anchor-position-at-point.d.ts +62 -0
- package/dist/types/internal/use-anchor-position.d.ts +6 -1
- package/dist/types/internal/use-animated-visibility.d.ts +3 -3
- package/dist/types/internal/use-animation-preset.d.ts +1 -1
- package/dist/types/internal/use-preset-styles.d.ts +1 -1
- package/dist/types/internal/use-width-from-anchor.d.ts +2 -2
- package/dist/types/placement-map/index.d.ts +1 -1
- package/dist/types/placement-map/legacy-placements.d.ts +0 -12
- package/dist/types/placement-map/placement-mapping.d.ts +13 -0
- package/dist/types/popover/create-close-event.d.ts +1 -1
- package/dist/types/popover/popover.d.ts +1 -1
- package/dist/types/popup/popup-context.d.ts +1 -1
- package/dist/types/testing/to-be-visible.d.ts +3 -3
- package/dist/types/use-arrow-navigation/use-arrow-navigation.d.ts +1 -1
- package/dist/types/use-simple-light-dismiss/index.d.ts +1 -1
- package/dist/types-ts4.5/dialog/create-close-event.d.ts +1 -1
- package/dist/types-ts4.5/dialog/types.d.ts +8 -0
- package/dist/types-ts4.5/entry-points/focus.d.ts +4 -2
- package/dist/types-ts4.5/entry-points/use-anchor-position-at-point.d.ts +1 -0
- package/dist/types-ts4.5/focus/get-first-focusable.d.ts +8 -0
- package/dist/types-ts4.5/focus/get-focusables.d.ts +13 -0
- package/dist/types-ts4.5/focus/get-last-focusable.d.ts +8 -0
- package/dist/types-ts4.5/focus/get-next-focusable.d.ts +13 -0
- package/dist/types-ts4.5/focus/is-in-same-layer.d.ts +8 -0
- package/dist/types-ts4.5/focus/is-nested-layer-focused.d.ts +8 -0
- package/dist/types-ts4.5/focus/selectors.d.ts +4 -0
- package/dist/types-ts4.5/focus/types.d.ts +5 -0
- package/dist/types-ts4.5/internal/reduced-motion.d.ts +1 -1
- package/dist/types-ts4.5/internal/resolve-placement.d.ts +2 -2
- package/dist/types-ts4.5/internal/role-to-aria-has-popup.d.ts +13 -0
- package/dist/types-ts4.5/internal/role-types.d.ts +0 -19
- package/dist/types-ts4.5/internal/should-focus-into-popover.d.ts +8 -0
- package/dist/types-ts4.5/internal/slot.d.ts +4 -4
- package/dist/types-ts4.5/internal/use-anchor-position-at-point.d.ts +62 -0
- package/dist/types-ts4.5/internal/use-anchor-position.d.ts +6 -1
- package/dist/types-ts4.5/internal/use-animated-visibility.d.ts +3 -3
- package/dist/types-ts4.5/internal/use-animation-preset.d.ts +1 -1
- package/dist/types-ts4.5/internal/use-preset-styles.d.ts +1 -1
- package/dist/types-ts4.5/internal/use-width-from-anchor.d.ts +2 -2
- package/dist/types-ts4.5/placement-map/index.d.ts +1 -1
- package/dist/types-ts4.5/placement-map/legacy-placements.d.ts +0 -12
- package/dist/types-ts4.5/placement-map/placement-mapping.d.ts +13 -0
- package/dist/types-ts4.5/popover/create-close-event.d.ts +1 -1
- package/dist/types-ts4.5/popover/popover.d.ts +1 -1
- package/dist/types-ts4.5/popup/popup-context.d.ts +1 -1
- package/dist/types-ts4.5/testing/to-be-visible.d.ts +3 -3
- package/dist/types-ts4.5/use-arrow-navigation/use-arrow-navigation.d.ts +1 -1
- package/dist/types-ts4.5/use-simple-light-dismiss/index.d.ts +1 -1
- package/package.json +1 -1
- package/use-anchor-position-at-point/package.json +17 -0
- package/dist/cjs/focus/focus.js +0 -169
- package/dist/cjs/focus/index.js +0 -24
- package/dist/es2019/focus/focus.js +0 -158
- package/dist/es2019/focus/index.js +0 -1
- package/dist/esm/focus/focus.js +0 -160
- package/dist/esm/focus/index.js +0 -1
- package/dist/types/focus/focus.d.ts +0 -50
- package/dist/types/focus/index.d.ts +0 -2
- package/dist/types-ts4.5/focus/focus.d.ts +0 -50
- package/dist/types-ts4.5/focus/index.d.ts +0 -2
|
@@ -25,8 +25,8 @@ var DEFAULT_GAP = "var(--ds-space-100, 8px)";
|
|
|
25
25
|
* CSS length string (e.g. `token('space.100')`).
|
|
26
26
|
*
|
|
27
27
|
* The two offset axes are named for clarity at the call site:
|
|
28
|
-
* - `gap`
|
|
29
|
-
* - `crossAxisShift`
|
|
28
|
+
* - `gap` - distance away from the trigger along the placement axis
|
|
29
|
+
* - `crossAxisShift` - nudge along the trigger edge (perpendicular to the placement axis)
|
|
30
30
|
*/
|
|
31
31
|
|
|
32
32
|
/**
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Maps a popover content role to the correct `aria-haspopup` value
|
|
3
|
+
* for its trigger element.
|
|
4
|
+
*
|
|
5
|
+
* Returns `undefined` for roles that are not popups in the ARIA sense
|
|
6
|
+
* (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
|
|
7
|
+
* should not announce a popup at all - emitting `aria-haspopup="dialog"`
|
|
8
|
+
* on a tooltip trigger would mislead assistive technology.
|
|
9
|
+
*/
|
|
10
|
+
export function roleToAriaHasPopup(_ref) {
|
|
11
|
+
var role = _ref.role;
|
|
12
|
+
if (role === 'menu') {
|
|
13
|
+
return 'menu';
|
|
14
|
+
}
|
|
15
|
+
if (role === 'listbox') {
|
|
16
|
+
return 'listbox';
|
|
17
|
+
}
|
|
18
|
+
if (role === 'tree') {
|
|
19
|
+
return 'tree';
|
|
20
|
+
}
|
|
21
|
+
if (role === 'grid') {
|
|
22
|
+
return 'grid';
|
|
23
|
+
}
|
|
24
|
+
if (role === 'dialog' || role === 'alertdialog') {
|
|
25
|
+
return 'dialog';
|
|
26
|
+
}
|
|
27
|
+
// Non-popup roles (tooltip, note, status, alert, log) and the
|
|
28
|
+
// no-role case: omit `aria-haspopup` entirely. React drops the
|
|
29
|
+
// attribute when the value is `undefined`.
|
|
30
|
+
return undefined;
|
|
31
|
+
}
|
|
@@ -1,90 +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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
25
|
-
// ── Shared ARIA role discrimination types ──
|
|
26
|
-
//
|
|
27
|
-
// These encode the WCAG 4.1.2 constraint: roles like `dialog`, `alertdialog`,
|
|
28
|
-
// and `menu` MUST have an accessible name (either `label` or `labelledBy`).
|
|
29
|
-
// TypeScript enforces this at compile time via discriminated unions.
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* ARIA role props where a role is always required.
|
|
33
|
-
*
|
|
34
|
-
* Used by `TPopupContentProps`. Popup content must always declare
|
|
35
|
-
* its role so assistive technology can identify the layer.
|
|
36
|
-
*/
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* ARIA role props where a role is optional.
|
|
40
|
-
*
|
|
41
|
-
* Used by `TPopoverProps`. The low-level primitive allows omitting
|
|
42
|
-
* the role for cases where it is set externally or not needed.
|
|
43
|
-
*/
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* Maps a popover content role to the correct `aria-haspopup` value
|
|
47
|
-
* for its trigger element.
|
|
48
|
-
*
|
|
49
|
-
* Returns `undefined` for roles that are not popups in the ARIA sense
|
|
50
|
-
* (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
|
|
51
|
-
* should not announce a popup at all - emitting `aria-haspopup="dialog"`
|
|
52
|
-
* on a tooltip trigger would mislead assistive technology.
|
|
53
|
-
*/
|
|
54
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
55
|
-
export function roleToAriaHasPopup(_ref) {
|
|
56
|
-
var role = _ref.role;
|
|
57
|
-
if (role === 'menu') {
|
|
58
|
-
return 'menu';
|
|
59
|
-
}
|
|
60
|
-
if (role === 'listbox') {
|
|
61
|
-
return 'listbox';
|
|
62
|
-
}
|
|
63
|
-
if (role === 'tree') {
|
|
64
|
-
return 'tree';
|
|
65
|
-
}
|
|
66
|
-
if (role === 'grid') {
|
|
67
|
-
return 'grid';
|
|
68
|
-
}
|
|
69
|
-
if (role === 'dialog' || role === 'alertdialog') {
|
|
70
|
-
return 'dialog';
|
|
71
|
-
}
|
|
72
|
-
// Non-popup roles (tooltip, note, status, alert, log) and the
|
|
73
|
-
// no-role case: omit `aria-haspopup` entirely. React drops the
|
|
74
|
-
// attribute when the value is `undefined`.
|
|
75
|
-
return undefined;
|
|
76
|
-
}
|
|
77
|
-
var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
|
|
78
|
-
|
|
79
|
-
/**
|
|
80
|
-
* Returns `true` when the given popover role moves focus into the popover
|
|
81
|
-
* on open, and `false` otherwise (including when `role` is `undefined`).
|
|
82
|
-
*/
|
|
83
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
84
|
-
export function shouldFocusIntoPopover(_ref2) {
|
|
85
|
-
var role = _ref2.role;
|
|
86
|
-
if (!role) {
|
|
87
|
-
return false;
|
|
88
|
-
}
|
|
89
|
-
return rolesThatMoveFocus.has(role);
|
|
90
|
-
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Returns `true` when the given popover role moves focus into the popover
|
|
5
|
+
* on open, and `false` otherwise (including when `role` is `undefined`).
|
|
6
|
+
*/
|
|
7
|
+
export function shouldFocusIntoPopover(_ref) {
|
|
8
|
+
var role = _ref.role;
|
|
9
|
+
if (!role) {
|
|
10
|
+
return false;
|
|
11
|
+
}
|
|
12
|
+
return rolesThatMoveFocus.has(role);
|
|
13
|
+
}
|
|
@@ -26,14 +26,14 @@ function isSlotChild(child) {
|
|
|
26
26
|
* Merges props (including ref) onto a single React element child.
|
|
27
27
|
*
|
|
28
28
|
* A safer alternative to raw `cloneElement` that:
|
|
29
|
-
* 1. Guards with `isValidElement`
|
|
29
|
+
* 1. Guards with `isValidElement` - non-element children (strings,
|
|
30
30
|
* fragments, null) are returned as-is instead of crashing.
|
|
31
31
|
* 2. Merges refs via `mergeRefs` so both the caller's ref and the
|
|
32
32
|
* child's existing ref are honoured.
|
|
33
33
|
* 3. Spreads any additional props (ARIA attributes, event handlers, etc.)
|
|
34
34
|
* onto the child element.
|
|
35
35
|
*
|
|
36
|
-
* Event handlers (e.g. `onClick`) are **not** auto-merged
|
|
36
|
+
* Event handlers (e.g. `onClick`) are **not** auto-merged - the caller's
|
|
37
37
|
* handler replaces the child's. Compose handlers before passing them in.
|
|
38
38
|
*
|
|
39
39
|
* @example
|
|
@@ -46,7 +46,7 @@ function isSlotChild(child) {
|
|
|
46
46
|
export var Slot = /*#__PURE__*/forwardRef(function Slot(slotProps, ref) {
|
|
47
47
|
var rawChildren = slotProps.children,
|
|
48
48
|
props = _objectWithoutProperties(slotProps, _excluded);
|
|
49
|
-
// `
|
|
49
|
+
// `TSlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
|
|
50
50
|
var children = rawChildren;
|
|
51
51
|
if (!isSlotChild(children)) {
|
|
52
52
|
return children;
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { useLayoutEffect, useRef } from 'react';
|
|
2
|
+
import { useAnchorPosition } from './use-anchor-position';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* A point in viewport coordinates (CSS pixels) at which the synthetic
|
|
6
|
+
* anchor should be placed.
|
|
7
|
+
*
|
|
8
|
+
* Axis-named (`x`/`y`) rather than edge-named (`left`/`top`) so the
|
|
9
|
+
* shape is unambiguous in RTL writing modes — there is no ambiguity
|
|
10
|
+
* about whether a coordinate is logical (`inline-start`/`block-start`)
|
|
11
|
+
* or physical (`left`/`top`). Viewport coordinates are always
|
|
12
|
+
* physical, so we name them with the physical axis labels.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Styles the synthetic anchor as an invisible, zero-size point.
|
|
17
|
+
* Dynamic `inset-*` overrides are written by the positioning effect.
|
|
18
|
+
*
|
|
19
|
+
* Uses `Object.assign` rather than Compiled CSS (element is outside the React tree)
|
|
20
|
+
* or the internal `setStyle` helper (we own this element entirely — it is created
|
|
21
|
+
* and removed by this hook — so the snapshot/restore semantics `setStyle`
|
|
22
|
+
* provides for caller-owned elements would be dead work here).
|
|
23
|
+
*/
|
|
24
|
+
function applyStaticAnchorStyles(el) {
|
|
25
|
+
Object.assign(el.style, {
|
|
26
|
+
position: 'fixed',
|
|
27
|
+
// `top`/`left` rather than `inset-block-start`/`inset-inline-start`
|
|
28
|
+
// for consistency with the dynamic positioning effect below, which
|
|
29
|
+
// uses physical properties (see comment there for the rationale).
|
|
30
|
+
top: '0',
|
|
31
|
+
left: '0',
|
|
32
|
+
// Zero size — placement decides which side the popover sits on.
|
|
33
|
+
width: '0',
|
|
34
|
+
height: '0',
|
|
35
|
+
// Prevent the overlay from intercepting pointer events.
|
|
36
|
+
pointerEvents: 'none'
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// `useAnchorPosition` requires a real DOM element. When the caller only
|
|
41
|
+
// has a viewport coordinate (e.g. cursor at hover time), this hook
|
|
42
|
+
// manages a hidden `<div>` at that point and delegates the rest.
|
|
43
|
+
//
|
|
44
|
+
// The `<div>` is appended directly to `document.body` to escape any
|
|
45
|
+
// transformed ancestor, which would otherwise break `position: fixed`
|
|
46
|
+
// viewport-relative resolution.
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Positions a popover at a consumer-supplied viewport coordinate using a
|
|
50
|
+
* hidden synthetic anchor.
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* ```tsx
|
|
54
|
+
* function PointPositionedPopover({ popoverRef, placement, mousePos }) {
|
|
55
|
+
* useAnchorPositionAtPoint({
|
|
56
|
+
* popoverRef,
|
|
57
|
+
* placement,
|
|
58
|
+
* isEnabled: Boolean(mousePos),
|
|
59
|
+
* getPoint: () => {
|
|
60
|
+
* if (!mousePos) return null;
|
|
61
|
+
* return { x: mousePos.clientX, y: mousePos.clientY };
|
|
62
|
+
* },
|
|
63
|
+
* });
|
|
64
|
+
* return <Popover ref={popoverRef}>...</Popover>;
|
|
65
|
+
* }
|
|
66
|
+
* ```
|
|
67
|
+
*/
|
|
68
|
+
export function useAnchorPositionAtPoint(_ref) {
|
|
69
|
+
var popoverRef = _ref.popoverRef,
|
|
70
|
+
placement = _ref.placement,
|
|
71
|
+
getPoint = _ref.getPoint,
|
|
72
|
+
_ref$isEnabled = _ref.isEnabled,
|
|
73
|
+
isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
|
|
74
|
+
var syntheticAnchorRef = useRef(null);
|
|
75
|
+
|
|
76
|
+
// `getPoint` is kept in a ref so the layout effect can call the
|
|
77
|
+
// latest version without listing it as a dep — that would re-fire
|
|
78
|
+
// on every render and re-latch the point.
|
|
79
|
+
var getPointRef = useRef(getPoint);
|
|
80
|
+
getPointRef.current = getPoint;
|
|
81
|
+
|
|
82
|
+
// Lazy element creation: the `<div>` is only created when both
|
|
83
|
+
// `isEnabled` is true AND `getPoint()` returns a non-null point.
|
|
84
|
+
// `useLayoutEffect` ensures the element exists before the inner
|
|
85
|
+
// `useAnchorPosition` (also a layout effect) reads the ref.
|
|
86
|
+
useLayoutEffect(function () {
|
|
87
|
+
if (!isEnabled) {
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
var point = getPointRef.current();
|
|
91
|
+
if (!point) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
var anchor = document.createElement('div');
|
|
95
|
+
anchor.setAttribute('aria-hidden', 'true');
|
|
96
|
+
applyStaticAnchorStyles(anchor);
|
|
97
|
+
// `point.x`/`y` are physical viewport coordinates (from
|
|
98
|
+
// `MouseEvent.clientX/Y`), so map directly onto physical
|
|
99
|
+
// `left`/`top`. This is RTL-safe: `position: fixed` + physical
|
|
100
|
+
// insets is direction-independent. Using logical
|
|
101
|
+
// `inset-inline-start` would need `viewportWidth - point.x` in
|
|
102
|
+
// RTL to land at the same physical pixel.
|
|
103
|
+
anchor.style.top = "".concat(point.y, "px");
|
|
104
|
+
anchor.style.left = "".concat(point.x, "px");
|
|
105
|
+
document.body.appendChild(anchor);
|
|
106
|
+
syntheticAnchorRef.current = anchor;
|
|
107
|
+
return function cleanup() {
|
|
108
|
+
anchor.remove();
|
|
109
|
+
syntheticAnchorRef.current = null;
|
|
110
|
+
};
|
|
111
|
+
}, [isEnabled]);
|
|
112
|
+
|
|
113
|
+
// Mirror `isEnabled` so both hooks stay in sync — when disabled,
|
|
114
|
+
// neither this hook nor the inner one touches the popover, leaving
|
|
115
|
+
// any other positioning the consumer has set up free to take effect.
|
|
116
|
+
useAnchorPosition({
|
|
117
|
+
anchorRef: syntheticAnchorRef,
|
|
118
|
+
popoverRef: popoverRef,
|
|
119
|
+
placement: placement,
|
|
120
|
+
isEnabled: isEnabled
|
|
121
|
+
});
|
|
122
|
+
}
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
-
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
1
|
/**
|
|
4
2
|
* Anchor positioning for top-layer popovers. See
|
|
5
3
|
* `notes/architecture/positioning.md` for the full model.
|
|
@@ -30,25 +28,15 @@ import { setStyle } from './set-style';
|
|
|
30
28
|
// from `./resolve-placement` so search-and-jump lands at the source of truth.
|
|
31
29
|
|
|
32
30
|
/**
|
|
33
|
-
* Module-scope no-op `ResizeObserver` used in non-DOM jest environments where
|
|
31
|
+
* Module-scope no-op `ResizeObserver` stub used in non-DOM jest environments where
|
|
34
32
|
* `ResizeObserver` is `undefined`. Hoisted out of the effect to avoid
|
|
35
|
-
* allocating
|
|
33
|
+
* re-allocating on every run.
|
|
36
34
|
*/
|
|
37
|
-
var
|
|
38
|
-
function
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
key: "observe",
|
|
43
|
-
value: function observe() {}
|
|
44
|
-
}, {
|
|
45
|
-
key: "unobserve",
|
|
46
|
-
value: function unobserve() {}
|
|
47
|
-
}, {
|
|
48
|
-
key: "disconnect",
|
|
49
|
-
value: function disconnect() {}
|
|
50
|
-
}]);
|
|
51
|
-
}();
|
|
35
|
+
var noopResizeObserver = {
|
|
36
|
+
observe: function observe() {},
|
|
37
|
+
unobserve: function unobserve() {},
|
|
38
|
+
disconnect: function disconnect() {}
|
|
39
|
+
};
|
|
52
40
|
|
|
53
41
|
/**
|
|
54
42
|
* Returns true when the popover is currently open. Wrapped because the
|
|
@@ -205,19 +193,23 @@ function useStablePlacement(placement) {
|
|
|
205
193
|
* comparison is used internally so re-runs are skipped when the resolved
|
|
206
194
|
* placement shape is unchanged.
|
|
207
195
|
*/
|
|
208
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
209
196
|
export function useAnchorPosition(_ref3) {
|
|
210
197
|
var anchorRef = _ref3.anchorRef,
|
|
211
198
|
popoverRef = _ref3.popoverRef,
|
|
212
199
|
_ref3$placement = _ref3.placement,
|
|
213
200
|
placement = _ref3$placement === void 0 ? {} : _ref3$placement,
|
|
214
201
|
_ref3$forceFallbackPo = _ref3.forceFallbackPositioning,
|
|
215
|
-
forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo
|
|
202
|
+
forceFallbackPositioning = _ref3$forceFallbackPo === void 0 ? false : _ref3$forceFallbackPo,
|
|
203
|
+
_ref3$isEnabled = _ref3.isEnabled,
|
|
204
|
+
isEnabled = _ref3$isEnabled === void 0 ? true : _ref3$isEnabled;
|
|
216
205
|
var id = useId();
|
|
217
206
|
// Stabilize `placement` object so the same object literal
|
|
218
207
|
// value returns an object with the same reference
|
|
219
208
|
var stablePlacement = useStablePlacement(placement);
|
|
220
209
|
useLayoutEffect(function () {
|
|
210
|
+
if (!isEnabled) {
|
|
211
|
+
return;
|
|
212
|
+
}
|
|
221
213
|
var trigger = anchorRef.current;
|
|
222
214
|
var popover = popoverRef.current;
|
|
223
215
|
if (!trigger || !popover) {
|
|
@@ -338,7 +330,7 @@ export function useAnchorPosition(_ref3) {
|
|
|
338
330
|
return _undoPositioning;
|
|
339
331
|
}
|
|
340
332
|
|
|
341
|
-
//
|
|
333
|
+
// JS fallback
|
|
342
334
|
// The popover is already in the browser's top layer via popover="auto",
|
|
343
335
|
// so it does not need position:fixed. We only reset the UA defaults
|
|
344
336
|
// (inset: 0; margin: auto) and set top/left based on measurements.
|
|
@@ -407,20 +399,17 @@ export function useAnchorPosition(_ref3) {
|
|
|
407
399
|
// Self-disconnects after one valid measurement; ongoing
|
|
408
400
|
// scroll/resize is handled by the window listeners below.
|
|
409
401
|
// `ResizeObserver` is missing in some non-DOM jest environments
|
|
410
|
-
// (e.g. post-office's `node` environment). Fall back to
|
|
411
|
-
//
|
|
412
|
-
// the popover positioned in the rare
|
|
413
|
-
// polyfilled `showPopover` but not
|
|
414
|
-
// browsers always have it.
|
|
415
|
-
|
|
416
|
-
// a new constructor on every effect run.
|
|
417
|
-
var ResizeObserverImpl = typeof ResizeObserver !== 'undefined' ? ResizeObserver : NoopResizeObserver;
|
|
418
|
-
var resizeObserver = new ResizeObserverImpl(function () {
|
|
402
|
+
// (e.g. post-office's `node` environment). Fall back to the
|
|
403
|
+
// module-scope `noopResizeObserver` stub there. The scroll/resize
|
|
404
|
+
// listeners below still keep the popover positioned in the rare
|
|
405
|
+
// case the consumer also polyfilled `showPopover` but not
|
|
406
|
+
// `ResizeObserver`. Real browsers always have it.
|
|
407
|
+
var resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
|
|
419
408
|
if (popover.offsetWidth > 0 && popover.offsetHeight > 0) {
|
|
420
409
|
update();
|
|
421
410
|
resizeObserver.disconnect();
|
|
422
411
|
}
|
|
423
|
-
});
|
|
412
|
+
}) : noopResizeObserver;
|
|
424
413
|
|
|
425
414
|
// If the popover is already open by the time this effect runs (for
|
|
426
415
|
// example, the parent `useAnchorPosition` effect runs after the child
|
|
@@ -469,5 +458,5 @@ export function useAnchorPosition(_ref3) {
|
|
|
469
458
|
popover.style.removeProperty('opacity');
|
|
470
459
|
});
|
|
471
460
|
return undoPositioning;
|
|
472
|
-
}, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, id]);
|
|
461
|
+
}, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id]);
|
|
473
462
|
}
|
|
@@ -8,19 +8,19 @@ import { usePresetStyles } from './use-preset-styles';
|
|
|
8
8
|
*
|
|
9
9
|
* Used by both `Popover` and `Dialog` to share the same animation lifecycle
|
|
10
10
|
* logic. Those components own their own show/hide mechanisms (showPopover /
|
|
11
|
-
* hidePopover vs showModal / close) and event handling
|
|
11
|
+
* hidePopover vs showModal / close) and event handling - this hook only
|
|
12
12
|
* manages the relationship between `isOpen` and when children are rendered.
|
|
13
13
|
*
|
|
14
14
|
* ## Problem
|
|
15
15
|
*
|
|
16
16
|
* We want to delay the unmount of children until a CSS exit transition has
|
|
17
17
|
* finished playing. If we unmount children the moment `isOpen` becomes
|
|
18
|
-
* `false`, the exit animation is never visible
|
|
18
|
+
* `false`, the exit animation is never visible - the content just disappears.
|
|
19
19
|
*
|
|
20
20
|
* ## How it works
|
|
21
21
|
*
|
|
22
22
|
* `showChildren` tracks whether the consumer's children should be in the DOM.
|
|
23
|
-
* It does not mirror `isOpen` exactly
|
|
23
|
+
* It does not mirror `isOpen` exactly - it intentionally lags behind during
|
|
24
24
|
* exit animations:
|
|
25
25
|
*
|
|
26
26
|
* ```
|
|
@@ -56,12 +56,12 @@ export function useAnimatedVisibility(_ref) {
|
|
|
56
56
|
// or the user has enabled the "prefers reduced motion" OS setting.
|
|
57
57
|
var willAnimate = Boolean(animate) && !prefersReducedMotion();
|
|
58
58
|
|
|
59
|
-
//
|
|
59
|
+
// showChildren state
|
|
60
60
|
//
|
|
61
61
|
// This is the core of the hook. `showChildren` controls whether the
|
|
62
62
|
// consumer's children are in the DOM. The two `if` blocks below are
|
|
63
63
|
// intentionally written as synchronous state updates during render
|
|
64
|
-
// (React supports this pattern
|
|
64
|
+
// (React supports this pattern - setState during render is treated as
|
|
65
65
|
// a synchronous re-render before the browser paints).
|
|
66
66
|
//
|
|
67
67
|
// Mount path: isOpen went true but showChildren is still false → mount.
|
|
@@ -88,7 +88,7 @@ export function useAnimatedVisibility(_ref) {
|
|
|
88
88
|
var onExitFinishRef = useRef(onExitFinish);
|
|
89
89
|
onExitFinishRef.current = onExitFinish;
|
|
90
90
|
|
|
91
|
-
//
|
|
91
|
+
// Animated entry effect
|
|
92
92
|
//
|
|
93
93
|
// Fires `onEnterFinish` after the entry transition completes.
|
|
94
94
|
// When there is no animation, fires it immediately via a separate effect.
|
|
@@ -137,7 +137,7 @@ export function useAnimatedVisibility(_ref) {
|
|
|
137
137
|
};
|
|
138
138
|
}, [isOpen, showChildren, willAnimate, preset === null || preset === void 0 ? void 0 : preset.enterDurationMs, elementRef]);
|
|
139
139
|
|
|
140
|
-
//
|
|
140
|
+
// Non-animated entry callback
|
|
141
141
|
//
|
|
142
142
|
// When there is no animation, fire `onEnterFinish` immediately on mount and after `isOpen` goes false->true.
|
|
143
143
|
// The initial value is false to make sure it fires on mount if the current `isOpen` is true.
|
|
@@ -151,7 +151,7 @@ export function useAnimatedVisibility(_ref) {
|
|
|
151
151
|
}
|
|
152
152
|
}, [isOpen, willAnimate]);
|
|
153
153
|
|
|
154
|
-
//
|
|
154
|
+
// Animated exit effect
|
|
155
155
|
//
|
|
156
156
|
// Runs when all three conditions are true:
|
|
157
157
|
// • `isOpen` is false (consumer wants to close)
|
|
@@ -214,10 +214,10 @@ export function useAnimatedVisibility(_ref) {
|
|
|
214
214
|
};
|
|
215
215
|
}, [isOpen, showChildren, willAnimate, preset === null || preset === void 0 ? void 0 : preset.exitDurationMs, elementRef]);
|
|
216
216
|
|
|
217
|
-
//
|
|
217
|
+
// Non-animated exit callback
|
|
218
218
|
//
|
|
219
219
|
// When there is no animation, children unmount synchronously (handled
|
|
220
|
-
// by the `if` block above). But `onExitFinish` still needs to fire
|
|
220
|
+
// by the `if` block above). But `onExitFinish` still needs to fire -
|
|
221
221
|
// we do that in a follow-up effect so the consumer can react to it.
|
|
222
222
|
//
|
|
223
223
|
// Uses a previous-value ref (`wasOpenRef`) to detect the exact
|
|
@@ -3,7 +3,7 @@ import { ensurePresetStyles } from './ensure-preset-styles';
|
|
|
3
3
|
/**
|
|
4
4
|
* Normalizes the `animate` prop to a preset (or null) and ensures its CSS
|
|
5
5
|
* is injected once into document.head. Used by PopupContent, Popover, and
|
|
6
|
-
* DialogContent so they
|
|
6
|
+
* DialogContent so they do not duplicate this logic.
|
|
7
7
|
*/
|
|
8
8
|
export function useAnimationPreset(animate) {
|
|
9
9
|
var preset = animate != null && animate !== false ? animate : null;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
import { bind } from 'bind-event-listener';
|
|
3
|
-
import { getFirstFocusable
|
|
3
|
+
import { getFirstFocusable } from '../focus/get-first-focusable';
|
|
4
|
+
import { getLastFocusable } from '../focus/get-last-focusable';
|
|
5
|
+
import { getNextFocusable } from '../focus/get-next-focusable';
|
|
6
|
+
import { isNestedLayerFocused } from '../focus/is-nested-layer-focused';
|
|
4
7
|
|
|
5
8
|
/**
|
|
6
9
|
* Roles that require focus wrapping per WAI-ARIA APG.
|
|
@@ -4,7 +4,7 @@ import { ensurePresetStyles } from './ensure-preset-styles';
|
|
|
4
4
|
* Normalizes a preset prop to a value (or null) and ensures its CSS
|
|
5
5
|
* is injected once into `document.head`.
|
|
6
6
|
*
|
|
7
|
-
* Works with any preset that has `{ css, name }`
|
|
7
|
+
* Works with any preset that has `{ css, name }` - animation presets
|
|
8
8
|
* (TAnimationPreset) satisfies this shape.
|
|
9
9
|
*/
|
|
10
10
|
export function usePresetStyles(_ref) {
|
|
@@ -4,8 +4,8 @@ import { setStyle } from './set-style';
|
|
|
4
4
|
/**
|
|
5
5
|
* Sets the width of a popover element relative to its anchor element.
|
|
6
6
|
*
|
|
7
|
-
* - `'match-anchor'` → `width: anchor-size(width)`
|
|
8
|
-
* - `'min-anchor'` → `min-width: anchor-size(width)`
|
|
7
|
+
* - `'match-anchor'` → `width: anchor-size(width)` - popover matches anchor width exactly.
|
|
8
|
+
* - `'min-anchor'` → `min-width: anchor-size(width)` - popover is at least as wide as anchor,
|
|
9
9
|
* but can grow wider.
|
|
10
10
|
* - `'none'` → no explicit width is set (default behaviour)
|
|
11
11
|
*
|
|
@@ -30,7 +30,7 @@ export function useWidthFromAnchor(_ref) {
|
|
|
30
30
|
var supportsAnchorSize = typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('width', 'anchor-size(width)');
|
|
31
31
|
if (mode === 'match-anchor') {
|
|
32
32
|
// Set an exact width matching the anchor.
|
|
33
|
-
// `min-inline-size` is intentionally NOT set here
|
|
33
|
+
// `min-inline-size` is intentionally NOT set here - it would override the
|
|
34
34
|
// explicit width constraint, allowing the popover to grow past the anchor's width.
|
|
35
35
|
if (supportsAnchorSize) {
|
|
36
36
|
return setStyle({
|
|
@@ -86,7 +86,7 @@ export function useWidthFromAnchor(_ref) {
|
|
|
86
86
|
});
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
// No anchor available in JS fallback
|
|
89
|
+
// No anchor available in JS fallback - still apply min-inline-size.
|
|
90
90
|
return setStyle({
|
|
91
91
|
el: node,
|
|
92
92
|
styles: [minInlineSizeStyle]
|
|
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
4
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
|
-
import { placementMapping } from './
|
|
5
|
+
import { placementMapping } from './placement-mapping';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Maps legacy Popper.js placement values to the new object-based
|
|
@@ -5,103 +5,4 @@
|
|
|
5
5
|
* to enumerate every placement (e.g. for a settings dropdown). New code
|
|
6
6
|
* should use the object-based `TPlacementOptions` directly.
|
|
7
7
|
*/
|
|
8
|
-
|
|
9
|
-
export var LEGACY_PLACEMENTS = ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-center', 'top-end', 'bottom', 'bottom-start', 'bottom-center', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
|
|
10
|
-
/**
|
|
11
|
-
* The full mapping record. Internal - use `fromLegacyPlacement` from the
|
|
12
|
-
* public entry-point so the offset-tuple translation is applied consistently.
|
|
13
|
-
*
|
|
14
|
-
* Note: `auto`, `auto-start`, `auto-end` map to `block-end` placements. This
|
|
15
|
-
* is a reduction in expressiveness vs Popper.js (which picked the best
|
|
16
|
-
* placement at runtime). CSS `position-try-fallbacks` flips at the edge but
|
|
17
|
-
* the initial placement is fixed. Migration consumers who relied on Popper's
|
|
18
|
-
* dynamic auto-flip should pick an explicit placement instead.
|
|
19
|
-
*/
|
|
20
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
21
|
-
export var placementMapping = {
|
|
22
|
-
top: {
|
|
23
|
-
axis: 'block',
|
|
24
|
-
edge: 'start',
|
|
25
|
-
align: 'center'
|
|
26
|
-
},
|
|
27
|
-
'top-start': {
|
|
28
|
-
axis: 'block',
|
|
29
|
-
edge: 'start',
|
|
30
|
-
align: 'start'
|
|
31
|
-
},
|
|
32
|
-
'top-center': {
|
|
33
|
-
axis: 'block',
|
|
34
|
-
edge: 'start',
|
|
35
|
-
align: 'center'
|
|
36
|
-
},
|
|
37
|
-
'top-end': {
|
|
38
|
-
axis: 'block',
|
|
39
|
-
edge: 'start',
|
|
40
|
-
align: 'end'
|
|
41
|
-
},
|
|
42
|
-
bottom: {
|
|
43
|
-
axis: 'block',
|
|
44
|
-
edge: 'end',
|
|
45
|
-
align: 'center'
|
|
46
|
-
},
|
|
47
|
-
'bottom-start': {
|
|
48
|
-
axis: 'block',
|
|
49
|
-
edge: 'end',
|
|
50
|
-
align: 'start'
|
|
51
|
-
},
|
|
52
|
-
'bottom-center': {
|
|
53
|
-
axis: 'block',
|
|
54
|
-
edge: 'end',
|
|
55
|
-
align: 'center'
|
|
56
|
-
},
|
|
57
|
-
'bottom-end': {
|
|
58
|
-
axis: 'block',
|
|
59
|
-
edge: 'end',
|
|
60
|
-
align: 'end'
|
|
61
|
-
},
|
|
62
|
-
right: {
|
|
63
|
-
axis: 'inline',
|
|
64
|
-
edge: 'end',
|
|
65
|
-
align: 'center'
|
|
66
|
-
},
|
|
67
|
-
'right-start': {
|
|
68
|
-
axis: 'inline',
|
|
69
|
-
edge: 'end',
|
|
70
|
-
align: 'start'
|
|
71
|
-
},
|
|
72
|
-
'right-end': {
|
|
73
|
-
axis: 'inline',
|
|
74
|
-
edge: 'end',
|
|
75
|
-
align: 'end'
|
|
76
|
-
},
|
|
77
|
-
left: {
|
|
78
|
-
axis: 'inline',
|
|
79
|
-
edge: 'start',
|
|
80
|
-
align: 'center'
|
|
81
|
-
},
|
|
82
|
-
'left-start': {
|
|
83
|
-
axis: 'inline',
|
|
84
|
-
edge: 'start',
|
|
85
|
-
align: 'start'
|
|
86
|
-
},
|
|
87
|
-
'left-end': {
|
|
88
|
-
axis: 'inline',
|
|
89
|
-
edge: 'start',
|
|
90
|
-
align: 'end'
|
|
91
|
-
},
|
|
92
|
-
auto: {
|
|
93
|
-
axis: 'block',
|
|
94
|
-
edge: 'end',
|
|
95
|
-
align: 'center'
|
|
96
|
-
},
|
|
97
|
-
'auto-start': {
|
|
98
|
-
axis: 'block',
|
|
99
|
-
edge: 'end',
|
|
100
|
-
align: 'start'
|
|
101
|
-
},
|
|
102
|
-
'auto-end': {
|
|
103
|
-
axis: 'block',
|
|
104
|
-
edge: 'end',
|
|
105
|
-
align: 'end'
|
|
106
|
-
}
|
|
107
|
-
};
|
|
8
|
+
export var LEGACY_PLACEMENTS = ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-center', 'top-end', 'bottom', 'bottom-start', 'bottom-center', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
|