@atlaskit/top-layer 3.1.0 → 4.0.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 +3 -1
- package/CHANGELOG.md +26 -0
- package/README.md +0 -14
- package/dist/cjs/focus/is-in-same-layer.js +1 -7
- package/dist/cjs/focus/selectors.js +1 -1
- package/dist/cjs/internal/get-aria-for-trigger.js +23 -9
- package/dist/cjs/internal/role-types.js +1 -64
- package/dist/cjs/internal/use-anchor-position.js +53 -19
- package/dist/cjs/popover/popover.js +2 -2
- package/dist/es2019/focus/is-in-same-layer.js +1 -7
- package/dist/es2019/focus/selectors.js +1 -1
- package/dist/es2019/internal/get-aria-for-trigger.js +23 -10
- package/dist/es2019/internal/role-types.js +0 -59
- package/dist/es2019/internal/use-anchor-position.js +53 -19
- package/dist/es2019/popover/popover.js +1 -1
- package/dist/esm/focus/is-in-same-layer.js +1 -7
- package/dist/esm/focus/selectors.js +1 -1
- package/dist/esm/internal/get-aria-for-trigger.js +23 -10
- package/dist/esm/internal/role-types.js +0 -58
- package/dist/esm/internal/use-anchor-position.js +53 -19
- package/dist/esm/popover/popover.js +1 -1
- package/dist/types/internal/get-aria-for-trigger.d.ts +21 -7
- package/dist/types/internal/role-types.d.ts +0 -32
- package/dist/types/popover/types.d.ts +1 -1
- package/package.json +3 -30
- package/animations/package.json +0 -10
- package/dist/cjs/entry-points/animations.js +0 -1
- package/dist/cjs/internal/role-to-aria-has-popup.js +0 -37
- package/dist/cjs/internal/slot.js +0 -65
- package/dist/es2019/entry-points/animations.js +0 -0
- package/dist/es2019/internal/role-to-aria-has-popup.js +0 -32
- package/dist/es2019/internal/slot.js +0 -57
- package/dist/esm/entry-points/animations.js +0 -0
- package/dist/esm/internal/role-to-aria-has-popup.js +0 -31
- package/dist/esm/internal/slot.js +0 -59
- package/dist/types/entry-points/animations.d.ts +0 -0
- package/dist/types/internal/role-to-aria-has-popup.d.ts +0 -13
- package/dist/types/internal/slot.d.ts +0 -29
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { roleToAriaHasPopup } from './role-to-aria-has-popup';
|
|
2
|
-
|
|
3
1
|
/**
|
|
4
2
|
* Roles accepted by `getAriaForTrigger`.
|
|
5
3
|
*
|
|
@@ -9,12 +7,34 @@ import { roleToAriaHasPopup } from './role-to-aria-has-popup';
|
|
|
9
7
|
* manually for tooltip triggers.
|
|
10
8
|
*/
|
|
11
9
|
|
|
10
|
+
/**
|
|
11
|
+
* Valid values for the `aria-haspopup` attribute.
|
|
12
|
+
*
|
|
13
|
+
* Derived from the HTML spec - maps popover roles to what the trigger
|
|
14
|
+
* announces. `undefined` means the attribute is omitted entirely (used for
|
|
15
|
+
* non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
|
|
16
|
+
* `aria-haspopup` would be misleading).
|
|
17
|
+
*
|
|
18
|
+
* `true` is intentionally NOT in the union - the runtime only ever produces
|
|
19
|
+
* the explicit string forms, so widening the type would invite consumers to
|
|
20
|
+
* pass `true` and get an `aria-haspopup="true"` serialisation that the
|
|
21
|
+
* runtime no longer emits.
|
|
22
|
+
*/
|
|
23
|
+
|
|
12
24
|
/**
|
|
13
25
|
* Non-undefined subset of `TAriaHasPopupValue`. Every role accepted by
|
|
14
26
|
* `getAriaForTrigger` maps to a concrete `aria-haspopup` string, so the
|
|
15
27
|
* trigger always receives a defined attribute value.
|
|
16
28
|
*/
|
|
17
29
|
|
|
30
|
+
var roleToAriaHasPopup = {
|
|
31
|
+
dialog: 'dialog',
|
|
32
|
+
alertdialog: 'dialog',
|
|
33
|
+
menu: 'menu',
|
|
34
|
+
listbox: 'listbox',
|
|
35
|
+
tree: 'tree',
|
|
36
|
+
grid: 'grid'
|
|
37
|
+
};
|
|
18
38
|
/**
|
|
19
39
|
* Returns the ARIA attributes to spread onto a click-activated popover trigger.
|
|
20
40
|
*
|
|
@@ -66,13 +86,6 @@ export function getAriaForTrigger(_ref) {
|
|
|
66
86
|
var role = _ref.role,
|
|
67
87
|
isOpen = _ref.isOpen,
|
|
68
88
|
popoverId = _ref.popoverId;
|
|
69
|
-
// `roleToAriaHasPopup` accepts a wider role union (including tooltip-family
|
|
70
|
-
// roles that map to `undefined`). `TAriaForTriggerRole` excludes those, so
|
|
71
|
-
// the returned value is guaranteed to be a defined string. The cast narrows
|
|
72
|
-
// the wider helper signature to match.
|
|
73
|
-
var ariaHasPopup = roleToAriaHasPopup({
|
|
74
|
-
role: role
|
|
75
|
-
});
|
|
76
89
|
// `aria-controls` is set to `undefined` while closed. The `Popover` /
|
|
77
90
|
// `Dialog` primitives unmount their host element after the exit
|
|
78
91
|
// animation finishes, so a closed-state `aria-controls` would point
|
|
@@ -81,7 +94,7 @@ export function getAriaForTrigger(_ref) {
|
|
|
81
94
|
// until the target exists, avoiding the dangling reference while
|
|
82
95
|
// keeping the relationship live whenever it is meaningful.
|
|
83
96
|
return {
|
|
84
|
-
'aria-haspopup':
|
|
97
|
+
'aria-haspopup': roleToAriaHasPopup[role],
|
|
85
98
|
'aria-expanded': isOpen,
|
|
86
99
|
'aria-controls': isOpen ? popoverId : undefined
|
|
87
100
|
};
|
|
@@ -1,58 +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
|
-
var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* Returns `true` when the given popover role moves focus into the popover
|
|
49
|
-
* on open, and `false` otherwise (including when `role` is `undefined`).
|
|
50
|
-
*/
|
|
51
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
52
|
-
export function shouldFocusIntoPopover(_ref) {
|
|
53
|
-
var role = _ref.role;
|
|
54
|
-
if (!role) {
|
|
55
|
-
return false;
|
|
56
|
-
}
|
|
57
|
-
return rolesThatMoveFocus.has(role);
|
|
58
|
-
}
|
|
@@ -317,11 +317,10 @@ export function useAnchorPosition(_ref3) {
|
|
|
317
317
|
* See `notes/decisions/anchor-name-lifetime.md`
|
|
318
318
|
*/
|
|
319
319
|
trigger.style.setProperty('anchor-name', anchorName);
|
|
320
|
-
|
|
320
|
+
return setStyle({
|
|
321
321
|
element: popover,
|
|
322
322
|
styles: popoverStyles
|
|
323
|
-
})
|
|
324
|
-
return _undoPositioning;
|
|
323
|
+
});
|
|
325
324
|
}
|
|
326
325
|
|
|
327
326
|
// JS fallback. The popover is already in the top layer via
|
|
@@ -337,6 +336,38 @@ export function useAnchorPosition(_ref3) {
|
|
|
337
336
|
value: 'auto'
|
|
338
337
|
}]
|
|
339
338
|
});
|
|
339
|
+
|
|
340
|
+
// The popover can be consumer-owned (`@atlaskit/popper`'s `createPopper`),
|
|
341
|
+
// so restore prior inline values rather than removing ours.
|
|
342
|
+
var undoPosition;
|
|
343
|
+
var undoHide;
|
|
344
|
+
|
|
345
|
+
// `opacity: 0` not `visibility: hidden`: Firefox skips visibility-hidden
|
|
346
|
+
// elements during `<dialog>` initial-focus traversal.
|
|
347
|
+
function hideUntilPositioned() {
|
|
348
|
+
// Keep the first snapshot, else we capture our own `opacity: 0`.
|
|
349
|
+
// (`!popover` is for TS: narrowing does not reach nested functions.)
|
|
350
|
+
if (!popover || undoHide) {
|
|
351
|
+
return;
|
|
352
|
+
}
|
|
353
|
+
undoHide = setStyle({
|
|
354
|
+
element: popover,
|
|
355
|
+
styles: [{
|
|
356
|
+
property: 'opacity',
|
|
357
|
+
value: '0'
|
|
358
|
+
}]
|
|
359
|
+
});
|
|
360
|
+
}
|
|
361
|
+
function reveal() {
|
|
362
|
+
var _undoHide;
|
|
363
|
+
(_undoHide = undoHide) === null || _undoHide === void 0 || _undoHide();
|
|
364
|
+
undoHide = undefined;
|
|
365
|
+
}
|
|
366
|
+
function restorePosition() {
|
|
367
|
+
var _undoPosition;
|
|
368
|
+
(_undoPosition = undoPosition) === null || _undoPosition === void 0 || _undoPosition();
|
|
369
|
+
undoPosition = undefined;
|
|
370
|
+
}
|
|
340
371
|
function update() {
|
|
341
372
|
if (!trigger || !popover) {
|
|
342
373
|
return;
|
|
@@ -375,11 +406,20 @@ export function useAnchorPosition(_ref3) {
|
|
|
375
406
|
}),
|
|
376
407
|
top = _computeFallbackPosit.top,
|
|
377
408
|
left = _computeFallbackPosit.left;
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
409
|
+
|
|
410
|
+
// Restore first so the snapshot stays the consumer's value.
|
|
411
|
+
restorePosition();
|
|
412
|
+
undoPosition = setStyle({
|
|
413
|
+
element: popover,
|
|
414
|
+
styles: [{
|
|
415
|
+
property: 'top',
|
|
416
|
+
value: "".concat(top, "px")
|
|
417
|
+
}, {
|
|
418
|
+
property: 'left',
|
|
419
|
+
value: "".concat(left, "px")
|
|
420
|
+
}]
|
|
421
|
+
});
|
|
422
|
+
reveal();
|
|
383
423
|
}
|
|
384
424
|
|
|
385
425
|
// Throttle scroll/resize updates to one per animation frame
|
|
@@ -413,22 +453,17 @@ export function useAnchorPosition(_ref3) {
|
|
|
413
453
|
// event has already fired and our listener below would miss it. Start
|
|
414
454
|
// observing immediately so the first measurement still happens.
|
|
415
455
|
if (isPopoverOpen(popover)) {
|
|
416
|
-
|
|
456
|
+
hideUntilPositioned();
|
|
417
457
|
resizeObserver.observe(popover);
|
|
418
458
|
}
|
|
419
459
|
var undoPositioning = combine(cleanupBaseStyles,
|
|
420
|
-
//
|
|
421
|
-
// the UA-default position, then re-observe for a fresh
|
|
422
|
-
// measurement. We use `opacity: 0` rather than
|
|
423
|
-
// `visibility: hidden` because Firefox skips visibility-hidden
|
|
424
|
-
// elements during `<dialog>` initial-focus traversal. See
|
|
425
|
-
// `form-in-popup.spec.tsx` on `desktop-firefox`.
|
|
460
|
+
// Each open needs a fresh measurement, so hide and re-observe.
|
|
426
461
|
bind(popover, {
|
|
427
462
|
type: 'toggle',
|
|
428
463
|
listener: function listener(event) {
|
|
429
464
|
var toggleEvent = event;
|
|
430
465
|
if (toggleEvent.newState === 'open') {
|
|
431
|
-
|
|
466
|
+
hideUntilPositioned();
|
|
432
467
|
resizeObserver.observe(popover);
|
|
433
468
|
}
|
|
434
469
|
}
|
|
@@ -449,9 +484,8 @@ export function useAnchorPosition(_ref3) {
|
|
|
449
484
|
}
|
|
450
485
|
}), function () {
|
|
451
486
|
scheduledUpdate.cancel();
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
popover.style.removeProperty('opacity');
|
|
487
|
+
restorePosition();
|
|
488
|
+
reveal();
|
|
455
489
|
});
|
|
456
490
|
return undoPositioning;
|
|
457
491
|
}, [anchorRef, popoverRef, stablePlacement, forceFallbackPositioning, isEnabled, id, isOpen]);
|
|
@@ -8,7 +8,7 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
|
8
8
|
import once from '@atlaskit/ds-lib/once';
|
|
9
9
|
import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
|
|
10
10
|
import { resolvePlacement } from '../internal/resolve-placement';
|
|
11
|
-
import { shouldFocusIntoPopover } from '../internal/
|
|
11
|
+
import { shouldFocusIntoPopover } from '../internal/should-focus-into-popover';
|
|
12
12
|
import { useAnimatedVisibility } from '../internal/use-animated-visibility';
|
|
13
13
|
import { useFocusWrap } from '../internal/use-focus-wrap';
|
|
14
14
|
import { useInitialFocus } from '../internal/use-initial-focus';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type TRoleRequiringAccessibleName } from './role-types';
|
|
2
2
|
/**
|
|
3
3
|
* Roles accepted by `getAriaForTrigger`.
|
|
4
4
|
*
|
|
@@ -8,6 +8,26 @@ import { type TAriaHasPopupValue, type TRoleRequiringAccessibleName } from './ro
|
|
|
8
8
|
* manually for tooltip triggers.
|
|
9
9
|
*/
|
|
10
10
|
type TAriaForTriggerRole = TRoleRequiringAccessibleName | 'listbox' | 'tree' | 'grid';
|
|
11
|
+
/**
|
|
12
|
+
* Valid values for the `aria-haspopup` attribute.
|
|
13
|
+
*
|
|
14
|
+
* Derived from the HTML spec - maps popover roles to what the trigger
|
|
15
|
+
* announces. `undefined` means the attribute is omitted entirely (used for
|
|
16
|
+
* non-popup roles like `tooltip`/`status`/`alert`/`note`/`log` where
|
|
17
|
+
* `aria-haspopup` would be misleading).
|
|
18
|
+
*
|
|
19
|
+
* `true` is intentionally NOT in the union - the runtime only ever produces
|
|
20
|
+
* the explicit string forms, so widening the type would invite consumers to
|
|
21
|
+
* pass `true` and get an `aria-haspopup="true"` serialisation that the
|
|
22
|
+
* runtime no longer emits.
|
|
23
|
+
*/
|
|
24
|
+
type TAriaHasPopupValue = 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | undefined;
|
|
25
|
+
/**
|
|
26
|
+
* Non-undefined subset of `TAriaHasPopupValue`. Every role accepted by
|
|
27
|
+
* `getAriaForTrigger` maps to a concrete `aria-haspopup` string, so the
|
|
28
|
+
* trigger always receives a defined attribute value.
|
|
29
|
+
*/
|
|
30
|
+
type TAriaHasPopupForTrigger = Exclude<TAriaHasPopupValue, undefined>;
|
|
11
31
|
type TGetAriaForTriggerOptions = {
|
|
12
32
|
/**
|
|
13
33
|
* The `role` that will be set on the `<Popover>` element. Used to derive
|
|
@@ -24,12 +44,6 @@ type TGetAriaForTriggerOptions = {
|
|
|
24
44
|
*/
|
|
25
45
|
popoverId: string;
|
|
26
46
|
};
|
|
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
47
|
type TAriaForTrigger = {
|
|
34
48
|
'aria-haspopup': TAriaHasPopupForTrigger;
|
|
35
49
|
'aria-expanded': boolean;
|
|
@@ -1,17 +1,3 @@
|
|
|
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
1
|
/**
|
|
16
2
|
* Roles that require an accessible name (`label` or `labelledBy`) per WCAG 4.1.2.
|
|
17
3
|
* Without a name, assistive technology cannot identify these landmarks.
|
|
@@ -50,22 +36,4 @@ export type TAriaRoleRequired = ({
|
|
|
50
36
|
} & TAccessibleNameRequired) | ({
|
|
51
37
|
role: TRoleWithImplicitName;
|
|
52
38
|
} & 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
39
|
export {};
|
|
@@ -92,7 +92,7 @@ type TPopoverBaseProps = {
|
|
|
92
92
|
*/
|
|
93
93
|
isOpen: boolean;
|
|
94
94
|
/**
|
|
95
|
-
* Placement hint for
|
|
95
|
+
* Placement hint for the default directional animation.
|
|
96
96
|
*
|
|
97
97
|
* When `shouldAnimate` is `true`, placement is used to set CSS custom
|
|
98
98
|
* properties (like `--ds-popover-tx`, `--ds-popover-ty`) that control the
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/top-layer",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.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",
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
"@atlaskit/ds-lib": "^8.0.0",
|
|
41
41
|
"@atlaskit/layering": "^5.0.0",
|
|
42
42
|
"@atlaskit/react-compiler-gating": "^0.2.0",
|
|
43
|
-
"@atlaskit/tokens": "^16.
|
|
43
|
+
"@atlaskit/tokens": "^16.7.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0",
|
|
45
|
-
"@compiled/react": "^1.0.
|
|
45
|
+
"@compiled/react": "^1.0.2",
|
|
46
46
|
"bind-event-listener": "^3.0.0",
|
|
47
47
|
"raf-schd": "^4.0.3"
|
|
48
48
|
},
|
|
@@ -68,33 +68,6 @@
|
|
|
68
68
|
"react-dom": "^19.0.0",
|
|
69
69
|
"tiny-invariant": "^1.2.0"
|
|
70
70
|
},
|
|
71
|
-
"techstack": {
|
|
72
|
-
"@atlassian/frontend": {
|
|
73
|
-
"import-structure": [
|
|
74
|
-
"atlassian-conventions"
|
|
75
|
-
],
|
|
76
|
-
"circular-dependencies": [
|
|
77
|
-
"file-and-folder-level"
|
|
78
|
-
]
|
|
79
|
-
},
|
|
80
|
-
"@repo/internal": {
|
|
81
|
-
"dom-events": "use-bind-event-listener",
|
|
82
|
-
"ui-components": [
|
|
83
|
-
"lite-mode"
|
|
84
|
-
],
|
|
85
|
-
"design-tokens": [
|
|
86
|
-
"color",
|
|
87
|
-
"spacing"
|
|
88
|
-
],
|
|
89
|
-
"deprecation": [
|
|
90
|
-
"no-deprecated-imports"
|
|
91
|
-
],
|
|
92
|
-
"styling": [
|
|
93
|
-
"static",
|
|
94
|
-
"compiled"
|
|
95
|
-
]
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
71
|
"publishConfig": {
|
|
99
72
|
"registry": "https://registry.npmjs.org/"
|
|
100
73
|
}
|
package/animations/package.json
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@atlaskit/top-layer/animations",
|
|
3
|
-
"main": "../dist/cjs/entry-points/animations.js",
|
|
4
|
-
"module": "../dist/esm/entry-points/animations.js",
|
|
5
|
-
"module:es2019": "../dist/es2019/entry-points/animations.js",
|
|
6
|
-
"sideEffects": [
|
|
7
|
-
"*.compiled.css"
|
|
8
|
-
],
|
|
9
|
-
"types": "../dist/types/entry-points/animations.d.ts"
|
|
10
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.roleToAriaHasPopup = roleToAriaHasPopup;
|
|
7
|
-
/**
|
|
8
|
-
* Maps a popover content role to the correct `aria-haspopup` value
|
|
9
|
-
* for its trigger element.
|
|
10
|
-
*
|
|
11
|
-
* Returns `undefined` for roles that are not popups in the ARIA sense
|
|
12
|
-
* (`tooltip`, `note`, `status`, `alert`, `log`). Triggers for those roles
|
|
13
|
-
* should not announce a popup at all - emitting `aria-haspopup="dialog"`
|
|
14
|
-
* on a tooltip trigger would mislead assistive technology.
|
|
15
|
-
*/
|
|
16
|
-
function roleToAriaHasPopup(_ref) {
|
|
17
|
-
var role = _ref.role;
|
|
18
|
-
if (role === 'menu') {
|
|
19
|
-
return 'menu';
|
|
20
|
-
}
|
|
21
|
-
if (role === 'listbox') {
|
|
22
|
-
return 'listbox';
|
|
23
|
-
}
|
|
24
|
-
if (role === 'tree') {
|
|
25
|
-
return 'tree';
|
|
26
|
-
}
|
|
27
|
-
if (role === 'grid') {
|
|
28
|
-
return 'grid';
|
|
29
|
-
}
|
|
30
|
-
if (role === 'dialog' || role === 'alertdialog') {
|
|
31
|
-
return 'dialog';
|
|
32
|
-
}
|
|
33
|
-
// Non-popup roles (tooltip, note, status, alert, log) and the
|
|
34
|
-
// no-role case: omit `aria-haspopup` entirely. React drops the
|
|
35
|
-
// attribute when the value is `undefined`.
|
|
36
|
-
return undefined;
|
|
37
|
-
}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.Slot = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
-
var _react = require("react");
|
|
11
|
-
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
|
|
12
|
-
var _excluded = ["children"];
|
|
13
|
-
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; }
|
|
14
|
-
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) { (0, _defineProperty2.default)(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; }
|
|
15
|
-
/**
|
|
16
|
-
* Extra DOM/event props are passed through to the cloned child.
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* Single element child: merge the caller ref with `child.ref`.
|
|
21
|
-
*
|
|
22
|
-
* Do not read `child.props.ref`: React keeps a `ref` key on `props` for
|
|
23
|
-
* host elements but accessing it logs a warning and returns `undefined`
|
|
24
|
-
* (ref lives on the element as `child.ref`).
|
|
25
|
-
*/
|
|
26
|
-
|
|
27
|
-
function isSlotChild(child) {
|
|
28
|
-
return /*#__PURE__*/(0, _react.isValidElement)(child);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Merges props (including ref) onto a single React element child.
|
|
33
|
-
*
|
|
34
|
-
* A safer alternative to raw `cloneElement` that:
|
|
35
|
-
* 1. Guards with `isValidElement` - non-element children (strings,
|
|
36
|
-
* fragments, null) are returned as-is instead of crashing.
|
|
37
|
-
* 2. Merges refs via `mergeRefs` so both the caller's ref and the
|
|
38
|
-
* child's existing ref are honoured.
|
|
39
|
-
* 3. Spreads any additional props (ARIA attributes, event handlers, etc.)
|
|
40
|
-
* onto the child element.
|
|
41
|
-
*
|
|
42
|
-
* Event handlers (e.g. `onClick`) are **not** auto-merged - the caller's
|
|
43
|
-
* handler replaces the child's. Compose handlers before passing them in.
|
|
44
|
-
*
|
|
45
|
-
* @example
|
|
46
|
-
* ```tsx
|
|
47
|
-
* <Slot ref={triggerRef} onClick={handleClick} aria-expanded={isOpen}>
|
|
48
|
-
* <button>Open</button>
|
|
49
|
-
* </Slot>
|
|
50
|
-
* ```
|
|
51
|
-
*/
|
|
52
|
-
var Slot = exports.Slot = /*#__PURE__*/(0, _react.forwardRef)(function Slot(slotProps, ref) {
|
|
53
|
-
var rawChildren = slotProps.children,
|
|
54
|
-
props = (0, _objectWithoutProperties2.default)(slotProps, _excluded);
|
|
55
|
-
// `TSlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
|
|
56
|
-
var children = rawChildren;
|
|
57
|
-
if (!isSlotChild(children)) {
|
|
58
|
-
return children;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
// eslint-disable-next-line @repo/internal/react/no-clone-element -- Slot is a controlled wrapper around cloneElement with isValidElement guard
|
|
62
|
-
return /*#__PURE__*/(0, _react.cloneElement)(children, _objectSpread(_objectSpread({}, props), {}, {
|
|
63
|
-
ref: (0, _mergeRefs.default)([ref, children.ref])
|
|
64
|
-
}));
|
|
65
|
-
});
|
|
File without changes
|
|
@@ -1,32 +0,0 @@
|
|
|
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({
|
|
11
|
-
role
|
|
12
|
-
}) {
|
|
13
|
-
if (role === 'menu') {
|
|
14
|
-
return 'menu';
|
|
15
|
-
}
|
|
16
|
-
if (role === 'listbox') {
|
|
17
|
-
return 'listbox';
|
|
18
|
-
}
|
|
19
|
-
if (role === 'tree') {
|
|
20
|
-
return 'tree';
|
|
21
|
-
}
|
|
22
|
-
if (role === 'grid') {
|
|
23
|
-
return 'grid';
|
|
24
|
-
}
|
|
25
|
-
if (role === 'dialog' || role === 'alertdialog') {
|
|
26
|
-
return 'dialog';
|
|
27
|
-
}
|
|
28
|
-
// Non-popup roles (tooltip, note, status, alert, log) and the
|
|
29
|
-
// no-role case: omit `aria-haspopup` entirely. React drops the
|
|
30
|
-
// attribute when the value is `undefined`.
|
|
31
|
-
return undefined;
|
|
32
|
-
}
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { cloneElement, forwardRef, isValidElement } from 'react';
|
|
2
|
-
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Extra DOM/event props are passed through to the cloned child.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Single element child: merge the caller ref with `child.ref`.
|
|
10
|
-
*
|
|
11
|
-
* Do not read `child.props.ref`: React keeps a `ref` key on `props` for
|
|
12
|
-
* host elements but accessing it logs a warning and returns `undefined`
|
|
13
|
-
* (ref lives on the element as `child.ref`).
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
function isSlotChild(child) {
|
|
17
|
-
return /*#__PURE__*/isValidElement(child);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Merges props (including ref) onto a single React element child.
|
|
22
|
-
*
|
|
23
|
-
* A safer alternative to raw `cloneElement` that:
|
|
24
|
-
* 1. Guards with `isValidElement` - non-element children (strings,
|
|
25
|
-
* fragments, null) are returned as-is instead of crashing.
|
|
26
|
-
* 2. Merges refs via `mergeRefs` so both the caller's ref and the
|
|
27
|
-
* child's existing ref are honoured.
|
|
28
|
-
* 3. Spreads any additional props (ARIA attributes, event handlers, etc.)
|
|
29
|
-
* onto the child element.
|
|
30
|
-
*
|
|
31
|
-
* Event handlers (e.g. `onClick`) are **not** auto-merged - the caller's
|
|
32
|
-
* handler replaces the child's. Compose handlers before passing them in.
|
|
33
|
-
*
|
|
34
|
-
* @example
|
|
35
|
-
* ```tsx
|
|
36
|
-
* <Slot ref={triggerRef} onClick={handleClick} aria-expanded={isOpen}>
|
|
37
|
-
* <button>Open</button>
|
|
38
|
-
* </Slot>
|
|
39
|
-
* ```
|
|
40
|
-
*/
|
|
41
|
-
export const Slot = /*#__PURE__*/forwardRef(function Slot(slotProps, ref) {
|
|
42
|
-
const {
|
|
43
|
-
children: rawChildren,
|
|
44
|
-
...props
|
|
45
|
-
} = slotProps;
|
|
46
|
-
// `TSlotProps` intersects `Record<string, unknown>`, so `children` is typed as `unknown`.
|
|
47
|
-
const children = rawChildren;
|
|
48
|
-
if (!isSlotChild(children)) {
|
|
49
|
-
return children;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// eslint-disable-next-line @repo/internal/react/no-clone-element -- Slot is a controlled wrapper around cloneElement with isValidElement guard
|
|
53
|
-
return /*#__PURE__*/cloneElement(children, {
|
|
54
|
-
...props,
|
|
55
|
-
ref: mergeRefs([ref, children.ref])
|
|
56
|
-
});
|
|
57
|
-
});
|
|
File without changes
|
|
@@ -1,31 +0,0 @@
|
|
|
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
|
-
}
|