@atlaskit/top-layer 6.1.0 → 6.2.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 +16 -0
- package/README.md +23 -25
- package/dist/cjs/dialog/create-close-event.js +2 -1
- package/dist/cjs/internal/use-focus-wrap.js +1 -1
- package/dist/cjs/internal/use-initial-focus.js +1 -1
- package/dist/cjs/placement-map/index.js +1 -1
- package/dist/cjs/popover/create-close-event.js +2 -1
- package/dist/cjs/popover/popover.js +3 -2
- package/dist/cjs/use-arrow-navigation/use-arrow-navigation.js +2 -1
- package/dist/es2019/dialog/create-close-event.js +2 -1
- package/dist/es2019/internal/use-focus-wrap.js +1 -1
- package/dist/es2019/internal/use-initial-focus.js +1 -1
- package/dist/es2019/placement-map/index.js +1 -1
- package/dist/es2019/popover/create-close-event.js +2 -1
- package/dist/es2019/popover/popover.js +3 -2
- package/dist/es2019/use-arrow-navigation/use-arrow-navigation.js +2 -1
- package/dist/esm/dialog/create-close-event.js +2 -1
- package/dist/esm/internal/use-focus-wrap.js +1 -1
- package/dist/esm/internal/use-initial-focus.js +1 -1
- package/dist/esm/placement-map/index.js +1 -1
- package/dist/esm/popover/create-close-event.js +2 -1
- package/dist/esm/popover/popover.js +3 -2
- package/dist/esm/use-arrow-navigation/use-arrow-navigation.js +2 -1
- package/dist/types/dialog/create-close-event.d.ts +2 -1
- package/dist/types/placement-map/index.d.ts +1 -1
- package/dist/types/popover/create-close-event.d.ts +2 -1
- package/dist/types/popover/types.d.ts +23 -2
- package/dist/types/use-arrow-navigation/use-arrow-navigation.d.ts +2 -1
- package/package.json +3 -3
- package/dist/cjs/internal/should-focus-into-popover.js +0 -19
- package/dist/es2019/internal/should-focus-into-popover.js +0 -14
- package/dist/esm/internal/should-focus-into-popover.js +0 -13
- package/dist/types/internal/should-focus-into-popover.d.ts +0 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/top-layer
|
|
2
2
|
|
|
3
|
+
## 6.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`fd59fcdb03cf1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fd59fcdb03cf1) -
|
|
8
|
+
`Popover` registers with the open layer observer only when it has an `onClose`, and manual popover
|
|
9
|
+
props now accept `onClose`.
|
|
10
|
+
|
|
11
|
+
## 6.1.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`1849f66e0bf17`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1849f66e0bf17) -
|
|
16
|
+
Remove an unused internal focus helper and fix stale README examples and import paths.
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 6.1.0
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -12,14 +12,15 @@ placement or size — compose it with the `useAnchoredPopover` hook when you nee
|
|
|
12
12
|
content.
|
|
13
13
|
|
|
14
14
|
```tsx
|
|
15
|
-
import { useRef } from 'react';
|
|
15
|
+
import { useRef, useState } from 'react';
|
|
16
16
|
import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
|
|
17
|
-
import { Popover } from '@atlaskit/top-layer/popover';
|
|
17
|
+
import { Popover } from '@atlaskit/top-layer/popover/popover';
|
|
18
18
|
import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
|
|
19
19
|
import { usePopoverId } from '@atlaskit/top-layer/use-popover-id';
|
|
20
20
|
import { useAnchoredPopover } from '@atlaskit/top-layer/use-anchored-popover';
|
|
21
21
|
|
|
22
|
-
function MyPopup(
|
|
22
|
+
function MyPopup() {
|
|
23
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
23
24
|
const triggerRef = useRef<HTMLButtonElement>(null);
|
|
24
25
|
const popoverRef = useRef<HTMLDivElement>(null);
|
|
25
26
|
const popoverId = usePopoverId();
|
|
@@ -35,7 +36,7 @@ function MyPopup({ isOpen, onClose }: { isOpen: boolean; onClose: () => void })
|
|
|
35
36
|
<>
|
|
36
37
|
<button
|
|
37
38
|
ref={triggerRef}
|
|
38
|
-
onClick={() =>
|
|
39
|
+
onClick={() => setIsOpen((value) => !value)}
|
|
39
40
|
{...getAriaForTrigger({ role: 'dialog', isOpen, popoverId })}
|
|
40
41
|
>
|
|
41
42
|
Open
|
|
@@ -47,7 +48,7 @@ function MyPopup({ isOpen, onClose }: { isOpen: boolean; onClose: () => void })
|
|
|
47
48
|
label="Settings"
|
|
48
49
|
isOpen={isOpen}
|
|
49
50
|
shouldAnimate
|
|
50
|
-
onClose={
|
|
51
|
+
onClose={() => setIsOpen(false)}
|
|
51
52
|
>
|
|
52
53
|
<PopoverSurface>Content here</PopoverSurface>
|
|
53
54
|
</Popover>
|
|
@@ -72,27 +73,24 @@ function MyPopup({ isOpen, onClose }: { isOpen: boolean; onClose: () => void })
|
|
|
72
73
|
|
|
73
74
|
## Dialog
|
|
74
75
|
|
|
75
|
-
|
|
76
|
+
A modal dialog on the native `<dialog>` element. `isOpen` calls `showModal()` and `close()`. It has
|
|
77
|
+
no visual opinions (no width, surface or layout); consumers such as `@atlaskit/modal-dialog` add
|
|
78
|
+
their own. A `label` or `labelledBy` is required.
|
|
76
79
|
|
|
77
80
|
```tsx
|
|
78
|
-
{
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
<Dialog.Title>Heading</Dialog.Title>
|
|
85
|
-
<Dialog.CloseButton />
|
|
86
|
-
</Dialog.Header>
|
|
87
|
-
<Dialog.Body>Content</Dialog.Body>
|
|
88
|
-
<Dialog.Footer>Actions</Dialog.Footer>
|
|
89
|
-
</Dialog.Surface>
|
|
90
|
-
</Dialog.Content>
|
|
91
|
-
</Dialog>
|
|
92
|
-
);
|
|
93
|
-
}
|
|
81
|
+
import { Dialog } from '@atlaskit/top-layer/dialog-content';
|
|
82
|
+
|
|
83
|
+
<Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} labelledBy={titleId}>
|
|
84
|
+
<h2 id={titleId}>Heading</h2>
|
|
85
|
+
Content
|
|
86
|
+
</Dialog>;
|
|
94
87
|
```
|
|
95
88
|
|
|
89
|
+
- `onClose({ reason })` fires after an allowed Escape (`'escape'`) or backdrop click
|
|
90
|
+
(`'overlay-click'`). Set `isOpen={false}` in response.
|
|
91
|
+
- `dismissedBy` limits user dismissal: `'escape-and-outside-click'` (default), `'escape'` or
|
|
92
|
+
`'none'`.
|
|
93
|
+
|
|
96
94
|
## Animations
|
|
97
95
|
|
|
98
96
|
Both `Popover` and `Dialog` support CSS-based entry/exit animations via the `shouldAnimate` prop.
|
|
@@ -106,9 +104,9 @@ for entry and
|
|
|
106
104
|
Pass `shouldAnimate` to enable the default popover entry and exit animation:
|
|
107
105
|
|
|
108
106
|
```tsx
|
|
109
|
-
import { Popover } from '@atlaskit/top-layer/popover';
|
|
107
|
+
import { Popover } from '@atlaskit/top-layer/popover/popover';
|
|
110
108
|
|
|
111
|
-
<Popover shouldAnimate role="dialog" label="My popover" isOpen={isOpen}>
|
|
109
|
+
<Popover shouldAnimate role="dialog" label="My popover" isOpen={isOpen} onClose={onClose}>
|
|
112
110
|
Content
|
|
113
111
|
</Popover>;
|
|
114
112
|
```
|
|
@@ -124,7 +122,7 @@ the phase-specific animation styles.
|
|
|
124
122
|
Pass `shouldAnimate` to enable the default dialog entry and exit animation:
|
|
125
123
|
|
|
126
124
|
```tsx
|
|
127
|
-
import { Dialog } from '@atlaskit/top-layer/dialog';
|
|
125
|
+
import { Dialog } from '@atlaskit/top-layer/dialog-content';
|
|
128
126
|
|
|
129
127
|
<Dialog shouldAnimate isOpen={isOpen} onClose={onClose} label="My dialog">
|
|
130
128
|
Content
|
|
@@ -16,7 +16,8 @@ exports.createCloseEvent = createCloseEvent;
|
|
|
16
16
|
*
|
|
17
17
|
* @example
|
|
18
18
|
* ```tsx
|
|
19
|
-
* import { createCloseEvent
|
|
19
|
+
* import { createCloseEvent } from '@atlaskit/top-layer/create-close-event';
|
|
20
|
+
* import { type TDialogCloseReason } from '@atlaskit/top-layer/dialog/types';
|
|
20
21
|
*
|
|
21
22
|
* function onDialogClose({ reason }: { reason: TDialogCloseReason }) {
|
|
22
23
|
* legacyOnClose(createCloseEvent({ reason }));
|
|
@@ -27,7 +27,7 @@ var _isNestedLayerFocused = require("../focus/is-nested-layer-focused");
|
|
|
27
27
|
* impossible to implement generically here. The consumer component
|
|
28
28
|
* (e.g. `dropdown-menu`) owns all menu keyboard navigation.
|
|
29
29
|
*
|
|
30
|
-
* See: notes/
|
|
30
|
+
* See: notes/decisions/menu-keyboard.md
|
|
31
31
|
*/
|
|
32
32
|
function roleRequiresFocusWrap(role) {
|
|
33
33
|
return role === 'dialog' || role === 'alertdialog';
|
|
@@ -150,7 +150,7 @@ function getInitialFocusTarget(_ref2) {
|
|
|
150
150
|
// type-ahead, Enter/Space, submenu coordination) is the responsibility
|
|
151
151
|
// of the consumer component (e.g. dropdown-menu), because menu keyboard
|
|
152
152
|
// behavior varies by context (orientation, nesting, item type, control
|
|
153
|
-
// pattern). See: notes/
|
|
153
|
+
// pattern). See: notes/decisions/menu-keyboard.md
|
|
154
154
|
return (0, _getFirstFocusable.getFirstFocusable)({
|
|
155
155
|
container: container
|
|
156
156
|
});
|
|
@@ -43,7 +43,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
43
43
|
*
|
|
44
44
|
* @example
|
|
45
45
|
* ```ts
|
|
46
|
-
* import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
|
|
46
|
+
* import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
|
|
47
47
|
*
|
|
48
48
|
* // In a migration from @atlaskit/popup:
|
|
49
49
|
* const oldPlacement: TLegacyPlacement = 'bottom-start';
|
|
@@ -18,7 +18,8 @@ exports.createPopoverCloseEvent = createPopoverCloseEvent;
|
|
|
18
18
|
*
|
|
19
19
|
* @example
|
|
20
20
|
* ```tsx
|
|
21
|
-
* import { createPopoverCloseEvent
|
|
21
|
+
* import { createPopoverCloseEvent } from '@atlaskit/top-layer/popover/create-close-event';
|
|
22
|
+
* import { type TPopoverCloseReason } from '@atlaskit/top-layer/popover/types';
|
|
22
23
|
*
|
|
23
24
|
* function onPopoverClose({ reason }: { reason: TPopoverCloseReason }) {
|
|
24
25
|
* legacyOnClose(createPopoverCloseEvent({ reason }));
|
|
@@ -179,7 +179,8 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
|
|
|
179
179
|
|
|
180
180
|
// Register with open layer observer so `closeLayers()` and open-count
|
|
181
181
|
// subscriptions work. Only popup-like roles register as `popup`; passive
|
|
182
|
-
// roles (tooltip, status, etc.) leave `type` undefined.
|
|
182
|
+
// roles (tooltip, status, etc.) leave `type` undefined. Without `onClose`
|
|
183
|
+
// the layer cannot be closed, so it does not register.
|
|
183
184
|
var handleObserverClose = (0, _react.useCallback)(function () {
|
|
184
185
|
var _onCloseRef$current;
|
|
185
186
|
(_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
|
|
@@ -188,7 +189,7 @@ var Popover = exports.Popover = /*#__PURE__*/(0, _react.forwardRef)(function Pop
|
|
|
188
189
|
}, []);
|
|
189
190
|
(0, _useNotifyOpenLayerObserver.useNotifyOpenLayerObserver)({
|
|
190
191
|
type: role && POPUP_ROLES.has(role) ? 'popup' : undefined,
|
|
191
|
-
isOpen: isOpen,
|
|
192
|
+
isOpen: isOpen && Boolean(onClose),
|
|
192
193
|
onClose: handleObserverClose
|
|
193
194
|
});
|
|
194
195
|
|
|
@@ -53,7 +53,8 @@ var menuScope = '[role="menu"]';
|
|
|
53
53
|
*
|
|
54
54
|
* @example With nested menu filter
|
|
55
55
|
* ```tsx
|
|
56
|
-
* import {
|
|
56
|
+
* import { isAtCurrentMenuLevel } from '@atlaskit/top-layer/is-at-current-menu-level';
|
|
57
|
+
* import { useArrowNavigation } from '@atlaskit/top-layer/use-arrow-navigation/use-arrow-navigation';
|
|
57
58
|
*
|
|
58
59
|
* useArrowNavigation({
|
|
59
60
|
* containerRef: menuRef,
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
*
|
|
11
11
|
* @example
|
|
12
12
|
* ```tsx
|
|
13
|
-
* import { createCloseEvent
|
|
13
|
+
* import { createCloseEvent } from '@atlaskit/top-layer/create-close-event';
|
|
14
|
+
* import { type TDialogCloseReason } from '@atlaskit/top-layer/dialog/types';
|
|
14
15
|
*
|
|
15
16
|
* function onDialogClose({ reason }: { reason: TDialogCloseReason }) {
|
|
16
17
|
* legacyOnClose(createCloseEvent({ reason }));
|
|
@@ -21,7 +21,7 @@ import { isNestedLayerFocused } from '../focus/is-nested-layer-focused';
|
|
|
21
21
|
* impossible to implement generically here. The consumer component
|
|
22
22
|
* (e.g. `dropdown-menu`) owns all menu keyboard navigation.
|
|
23
23
|
*
|
|
24
|
-
* See: notes/
|
|
24
|
+
* See: notes/decisions/menu-keyboard.md
|
|
25
25
|
*/
|
|
26
26
|
function roleRequiresFocusWrap(role) {
|
|
27
27
|
return role === 'dialog' || role === 'alertdialog';
|
|
@@ -144,7 +144,7 @@ function getInitialFocusTarget({
|
|
|
144
144
|
// type-ahead, Enter/Space, submenu coordination) is the responsibility
|
|
145
145
|
// of the consumer component (e.g. dropdown-menu), because menu keyboard
|
|
146
146
|
// behavior varies by context (orientation, nesting, item type, control
|
|
147
|
-
// pattern). See: notes/
|
|
147
|
+
// pattern). See: notes/decisions/menu-keyboard.md
|
|
148
148
|
return getFirstFocusable({
|
|
149
149
|
container
|
|
150
150
|
});
|
|
@@ -33,7 +33,7 @@ import { placementMapping } from './placement-mapping';
|
|
|
33
33
|
*
|
|
34
34
|
* @example
|
|
35
35
|
* ```ts
|
|
36
|
-
* import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
|
|
36
|
+
* import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
|
|
37
37
|
*
|
|
38
38
|
* // In a migration from @atlaskit/popup:
|
|
39
39
|
* const oldPlacement: TLegacyPlacement = 'bottom-start';
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
*
|
|
13
13
|
* @example
|
|
14
14
|
* ```tsx
|
|
15
|
-
* import { createPopoverCloseEvent
|
|
15
|
+
* import { createPopoverCloseEvent } from '@atlaskit/top-layer/popover/create-close-event';
|
|
16
|
+
* import { type TPopoverCloseReason } from '@atlaskit/top-layer/popover/types';
|
|
16
17
|
*
|
|
17
18
|
* function onPopoverClose({ reason }: { reason: TPopoverCloseReason }) {
|
|
18
19
|
* legacyOnClose(createPopoverCloseEvent({ reason }));
|
|
@@ -173,7 +173,8 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
|
|
|
173
173
|
|
|
174
174
|
// Register with open layer observer so `closeLayers()` and open-count
|
|
175
175
|
// subscriptions work. Only popup-like roles register as `popup`; passive
|
|
176
|
-
// roles (tooltip, status, etc.) leave `type` undefined.
|
|
176
|
+
// roles (tooltip, status, etc.) leave `type` undefined. Without `onClose`
|
|
177
|
+
// the layer cannot be closed, so it does not register.
|
|
177
178
|
const handleObserverClose = useCallback(() => {
|
|
178
179
|
var _onCloseRef$current;
|
|
179
180
|
(_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
|
|
@@ -182,7 +183,7 @@ export const Popover = /*#__PURE__*/forwardRef(function Popover({
|
|
|
182
183
|
}, []);
|
|
183
184
|
useNotifyOpenLayerObserver({
|
|
184
185
|
type: role && POPUP_ROLES.has(role) ? 'popup' : undefined,
|
|
185
|
-
isOpen,
|
|
186
|
+
isOpen: isOpen && Boolean(onClose),
|
|
186
187
|
onClose: handleObserverClose
|
|
187
188
|
});
|
|
188
189
|
|
|
@@ -47,7 +47,8 @@ const menuScope = '[role="menu"]';
|
|
|
47
47
|
*
|
|
48
48
|
* @example With nested menu filter
|
|
49
49
|
* ```tsx
|
|
50
|
-
* import {
|
|
50
|
+
* import { isAtCurrentMenuLevel } from '@atlaskit/top-layer/is-at-current-menu-level';
|
|
51
|
+
* import { useArrowNavigation } from '@atlaskit/top-layer/use-arrow-navigation/use-arrow-navigation';
|
|
51
52
|
*
|
|
52
53
|
* useArrowNavigation({
|
|
53
54
|
* containerRef: menuRef,
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
*
|
|
11
11
|
* @example
|
|
12
12
|
* ```tsx
|
|
13
|
-
* import { createCloseEvent
|
|
13
|
+
* import { createCloseEvent } from '@atlaskit/top-layer/create-close-event';
|
|
14
|
+
* import { type TDialogCloseReason } from '@atlaskit/top-layer/dialog/types';
|
|
14
15
|
*
|
|
15
16
|
* function onDialogClose({ reason }: { reason: TDialogCloseReason }) {
|
|
16
17
|
* legacyOnClose(createCloseEvent({ reason }));
|
|
@@ -21,7 +21,7 @@ import { isNestedLayerFocused } from '../focus/is-nested-layer-focused';
|
|
|
21
21
|
* impossible to implement generically here. The consumer component
|
|
22
22
|
* (e.g. `dropdown-menu`) owns all menu keyboard navigation.
|
|
23
23
|
*
|
|
24
|
-
* See: notes/
|
|
24
|
+
* See: notes/decisions/menu-keyboard.md
|
|
25
25
|
*/
|
|
26
26
|
function roleRequiresFocusWrap(role) {
|
|
27
27
|
return role === 'dialog' || role === 'alertdialog';
|
|
@@ -144,7 +144,7 @@ function getInitialFocusTarget(_ref2) {
|
|
|
144
144
|
// type-ahead, Enter/Space, submenu coordination) is the responsibility
|
|
145
145
|
// of the consumer component (e.g. dropdown-menu), because menu keyboard
|
|
146
146
|
// behavior varies by context (orientation, nesting, item type, control
|
|
147
|
-
// pattern). See: notes/
|
|
147
|
+
// pattern). See: notes/decisions/menu-keyboard.md
|
|
148
148
|
return getFirstFocusable({
|
|
149
149
|
container: container
|
|
150
150
|
});
|
|
@@ -37,7 +37,7 @@ import { placementMapping } from './placement-mapping';
|
|
|
37
37
|
*
|
|
38
38
|
* @example
|
|
39
39
|
* ```ts
|
|
40
|
-
* import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
|
|
40
|
+
* import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
|
|
41
41
|
*
|
|
42
42
|
* // In a migration from @atlaskit/popup:
|
|
43
43
|
* const oldPlacement: TLegacyPlacement = 'bottom-start';
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
*
|
|
13
13
|
* @example
|
|
14
14
|
* ```tsx
|
|
15
|
-
* import { createPopoverCloseEvent
|
|
15
|
+
* import { createPopoverCloseEvent } from '@atlaskit/top-layer/popover/create-close-event';
|
|
16
|
+
* import { type TPopoverCloseReason } from '@atlaskit/top-layer/popover/types';
|
|
16
17
|
*
|
|
17
18
|
* function onPopoverClose({ reason }: { reason: TPopoverCloseReason }) {
|
|
18
19
|
* legacyOnClose(createPopoverCloseEvent({ reason }));
|
|
@@ -170,7 +170,8 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref2, ref) {
|
|
|
170
170
|
|
|
171
171
|
// Register with open layer observer so `closeLayers()` and open-count
|
|
172
172
|
// subscriptions work. Only popup-like roles register as `popup`; passive
|
|
173
|
-
// roles (tooltip, status, etc.) leave `type` undefined.
|
|
173
|
+
// roles (tooltip, status, etc.) leave `type` undefined. Without `onClose`
|
|
174
|
+
// the layer cannot be closed, so it does not register.
|
|
174
175
|
var handleObserverClose = useCallback(function () {
|
|
175
176
|
var _onCloseRef$current;
|
|
176
177
|
(_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
|
|
@@ -179,7 +180,7 @@ export var Popover = /*#__PURE__*/forwardRef(function Popover(_ref2, ref) {
|
|
|
179
180
|
}, []);
|
|
180
181
|
useNotifyOpenLayerObserver({
|
|
181
182
|
type: role && POPUP_ROLES.has(role) ? 'popup' : undefined,
|
|
182
|
-
isOpen: isOpen,
|
|
183
|
+
isOpen: isOpen && Boolean(onClose),
|
|
183
184
|
onClose: handleObserverClose
|
|
184
185
|
});
|
|
185
186
|
|
|
@@ -47,7 +47,8 @@ var menuScope = '[role="menu"]';
|
|
|
47
47
|
*
|
|
48
48
|
* @example With nested menu filter
|
|
49
49
|
* ```tsx
|
|
50
|
-
* import {
|
|
50
|
+
* import { isAtCurrentMenuLevel } from '@atlaskit/top-layer/is-at-current-menu-level';
|
|
51
|
+
* import { useArrowNavigation } from '@atlaskit/top-layer/use-arrow-navigation/use-arrow-navigation';
|
|
51
52
|
*
|
|
52
53
|
* useArrowNavigation({
|
|
53
54
|
* containerRef: menuRef,
|
|
@@ -11,7 +11,8 @@ import type { TDialogCloseReason } from './types';
|
|
|
11
11
|
*
|
|
12
12
|
* @example
|
|
13
13
|
* ```tsx
|
|
14
|
-
* import { createCloseEvent
|
|
14
|
+
* import { createCloseEvent } from '@atlaskit/top-layer/create-close-event';
|
|
15
|
+
* import { type TDialogCloseReason } from '@atlaskit/top-layer/dialog/types';
|
|
15
16
|
*
|
|
16
17
|
* function onDialogClose({ reason }: { reason: TDialogCloseReason }) {
|
|
17
18
|
* legacyOnClose(createCloseEvent({ reason }));
|
|
@@ -33,7 +33,7 @@ import type { TLegacyPlacement } from './legacy-placements';
|
|
|
33
33
|
*
|
|
34
34
|
* @example
|
|
35
35
|
* ```ts
|
|
36
|
-
* import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
|
|
36
|
+
* import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
|
|
37
37
|
*
|
|
38
38
|
* // In a migration from @atlaskit/popup:
|
|
39
39
|
* const oldPlacement: TLegacyPlacement = 'bottom-start';
|
|
@@ -13,7 +13,8 @@ import type { TPopoverCloseReason } from './types';
|
|
|
13
13
|
*
|
|
14
14
|
* @example
|
|
15
15
|
* ```tsx
|
|
16
|
-
* import { createPopoverCloseEvent
|
|
16
|
+
* import { createPopoverCloseEvent } from '@atlaskit/top-layer/popover/create-close-event';
|
|
17
|
+
* import { type TPopoverCloseReason } from '@atlaskit/top-layer/popover/types';
|
|
17
18
|
*
|
|
18
19
|
* function onPopoverClose({ reason }: { reason: TPopoverCloseReason }) {
|
|
19
20
|
* legacyOnClose(createPopoverCloseEvent({ reason }));
|
|
@@ -21,6 +21,12 @@ export type TPopoverCloseReason = 'escape' | 'light-dismiss' | 'programmatic';
|
|
|
21
21
|
*/
|
|
22
22
|
export type TPopoverForwardedProps = TPopoverBaseProps & {
|
|
23
23
|
mode?: 'auto' | 'hint' | 'manual';
|
|
24
|
+
/**
|
|
25
|
+
* Called when the popover asks to close. See `TPopoverProps` for each `reason`.
|
|
26
|
+
*
|
|
27
|
+
* Also opts the popover into the open layer observer: only a popover with
|
|
28
|
+
* `onClose` registers, so only it can be closed by `closeLayers()`.
|
|
29
|
+
*/
|
|
24
30
|
onClose?: (args: {
|
|
25
31
|
reason: TPopoverCloseReason;
|
|
26
32
|
}) => void;
|
|
@@ -165,14 +171,29 @@ export type TPopoverProps = TPopoverBaseProps & TAriaRoleRequired & ({
|
|
|
165
171
|
* controlled intent after native dismissal. If `isOpen` remains `true`,
|
|
166
172
|
* the Popover remains natively closed until the prop changes.
|
|
167
173
|
*
|
|
168
|
-
* The `reason` field indicates how the
|
|
174
|
+
* The `reason` field indicates how the close was requested:
|
|
169
175
|
* - `'escape'`: the user pressed the Escape key.
|
|
170
176
|
* - `'light-dismiss'`: the user clicked outside (or another auto-dismiss).
|
|
177
|
+
* - `'programmatic'`: the open layer observer's `closeLayers()` asked
|
|
178
|
+
* every open layer to close (for example, the side navigation toggle).
|
|
179
|
+
* The popover stays open until the consumer sets `isOpen` to `false`.
|
|
171
180
|
*/
|
|
172
181
|
onClose: (args: {
|
|
173
182
|
reason: TPopoverCloseReason;
|
|
174
183
|
}) => void;
|
|
175
184
|
} | {
|
|
176
185
|
mode: 'manual';
|
|
177
|
-
|
|
186
|
+
/**
|
|
187
|
+
* Enables programmatic close through the open layer observer. When
|
|
188
|
+
* provided, the popover registers as an open layer, and `closeLayers()`
|
|
189
|
+
* calls this with `reason: 'programmatic'`. Set `isOpen` to `false` in
|
|
190
|
+
* response. Without it, the popover does not register, so `closeLayers()`
|
|
191
|
+
* cannot close it and it is not counted as an open layer.
|
|
192
|
+
*
|
|
193
|
+
* Manual popovers have no light dismiss, so this is the only reason
|
|
194
|
+
* they receive.
|
|
195
|
+
*/
|
|
196
|
+
onClose?: (args: {
|
|
197
|
+
reason: TPopoverCloseReason;
|
|
198
|
+
}) => void;
|
|
178
199
|
});
|
|
@@ -89,7 +89,8 @@ export type TUseArrowNavigationArgs = {
|
|
|
89
89
|
*
|
|
90
90
|
* @example With nested menu filter
|
|
91
91
|
* ```tsx
|
|
92
|
-
* import {
|
|
92
|
+
* import { isAtCurrentMenuLevel } from '@atlaskit/top-layer/is-at-current-menu-level';
|
|
93
|
+
* import { useArrowNavigation } from '@atlaskit/top-layer/use-arrow-navigation/use-arrow-navigation';
|
|
93
94
|
*
|
|
94
95
|
* useArrowNavigation({
|
|
95
96
|
* containerRef: menuRef,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/top-layer",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.2.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,7 +40,7 @@
|
|
|
40
40
|
"@atlaskit/ds-lib": "^8.0.0",
|
|
41
41
|
"@atlaskit/layering": "^6.0.0",
|
|
42
42
|
"@atlaskit/react-compiler-gating": "^0.2.0",
|
|
43
|
-
"@atlaskit/tokens": "^20.
|
|
43
|
+
"@atlaskit/tokens": "^20.3.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0",
|
|
45
45
|
"@compiled/react": "^1.0.2",
|
|
46
46
|
"bind-event-listener": "^3.0.0",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"@af/integration-testing": "workspace:^",
|
|
55
55
|
"@af/visual-regression": "workspace:^",
|
|
56
56
|
"@atlaskit/button": "^25.4.0",
|
|
57
|
-
"@atlaskit/checkbox": "^19.
|
|
57
|
+
"@atlaskit/checkbox": "^19.3.0",
|
|
58
58
|
"@atlaskit/heading": "^8.0.0",
|
|
59
59
|
"@atlaskit/lozenge": "^17.0.0",
|
|
60
60
|
"@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.shouldFocusIntoPopover = shouldFocusIntoPopover;
|
|
7
|
-
var rolesThatMoveFocus = new Set(['dialog', 'alertdialog', 'menu', 'listbox', 'tree', 'grid']);
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Returns `true` when the given popover role moves focus into the popover
|
|
11
|
-
* on open, and `false` otherwise (including when `role` is `undefined`).
|
|
12
|
-
*/
|
|
13
|
-
function shouldFocusIntoPopover(_ref) {
|
|
14
|
-
var role = _ref.role;
|
|
15
|
-
if (!role) {
|
|
16
|
-
return false;
|
|
17
|
-
}
|
|
18
|
-
return rolesThatMoveFocus.has(role);
|
|
19
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
const 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({
|
|
8
|
-
role
|
|
9
|
-
}) {
|
|
10
|
-
if (!role) {
|
|
11
|
-
return false;
|
|
12
|
-
}
|
|
13
|
-
return rolesThatMoveFocus.has(role);
|
|
14
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { TRoleRequiringAccessibleName, TRoleWithImplicitName } from './role-types';
|
|
2
|
-
/**
|
|
3
|
-
* Returns `true` when the given popover role moves focus into the popover
|
|
4
|
-
* on open, and `false` otherwise (including when `role` is `undefined`).
|
|
5
|
-
*/
|
|
6
|
-
export declare function shouldFocusIntoPopover({ role, }: {
|
|
7
|
-
role: TRoleRequiringAccessibleName | TRoleWithImplicitName | undefined;
|
|
8
|
-
}): boolean;
|