@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.
Files changed (33) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/README.md +23 -25
  3. package/dist/cjs/dialog/create-close-event.js +2 -1
  4. package/dist/cjs/internal/use-focus-wrap.js +1 -1
  5. package/dist/cjs/internal/use-initial-focus.js +1 -1
  6. package/dist/cjs/placement-map/index.js +1 -1
  7. package/dist/cjs/popover/create-close-event.js +2 -1
  8. package/dist/cjs/popover/popover.js +3 -2
  9. package/dist/cjs/use-arrow-navigation/use-arrow-navigation.js +2 -1
  10. package/dist/es2019/dialog/create-close-event.js +2 -1
  11. package/dist/es2019/internal/use-focus-wrap.js +1 -1
  12. package/dist/es2019/internal/use-initial-focus.js +1 -1
  13. package/dist/es2019/placement-map/index.js +1 -1
  14. package/dist/es2019/popover/create-close-event.js +2 -1
  15. package/dist/es2019/popover/popover.js +3 -2
  16. package/dist/es2019/use-arrow-navigation/use-arrow-navigation.js +2 -1
  17. package/dist/esm/dialog/create-close-event.js +2 -1
  18. package/dist/esm/internal/use-focus-wrap.js +1 -1
  19. package/dist/esm/internal/use-initial-focus.js +1 -1
  20. package/dist/esm/placement-map/index.js +1 -1
  21. package/dist/esm/popover/create-close-event.js +2 -1
  22. package/dist/esm/popover/popover.js +3 -2
  23. package/dist/esm/use-arrow-navigation/use-arrow-navigation.js +2 -1
  24. package/dist/types/dialog/create-close-event.d.ts +2 -1
  25. package/dist/types/placement-map/index.d.ts +1 -1
  26. package/dist/types/popover/create-close-event.d.ts +2 -1
  27. package/dist/types/popover/types.d.ts +23 -2
  28. package/dist/types/use-arrow-navigation/use-arrow-navigation.d.ts +2 -1
  29. package/package.json +3 -3
  30. package/dist/cjs/internal/should-focus-into-popover.js +0 -19
  31. package/dist/es2019/internal/should-focus-into-popover.js +0 -14
  32. package/dist/esm/internal/should-focus-into-popover.js +0 -13
  33. 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({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
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={() => popoverRef.current?.togglePopover()}
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={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
- Compound component for modal dialogs using the native `<dialog>` element with `.showModal()`.
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
- isOpen && (
80
- <Dialog onClose={handleClose} width="medium">
81
- <Dialog.Content>
82
- <Dialog.Surface>
83
- <Dialog.Header>
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, type TDialogCloseReason } from '@atlaskit/top-layer/dialog';
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/outputs/menu-keyboard-decision.md
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/outputs/menu-keyboard-decision.md
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, type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
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 { useArrowNavigation, isAtCurrentMenuLevel } from '@atlaskit/top-layer/use-arrow-navigation';
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, type TDialogCloseReason } from '@atlaskit/top-layer/dialog';
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/outputs/menu-keyboard-decision.md
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/outputs/menu-keyboard-decision.md
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, type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
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 { useArrowNavigation, isAtCurrentMenuLevel } from '@atlaskit/top-layer/use-arrow-navigation';
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, type TDialogCloseReason } from '@atlaskit/top-layer/dialog';
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/outputs/menu-keyboard-decision.md
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/outputs/menu-keyboard-decision.md
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, type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
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 { useArrowNavigation, isAtCurrentMenuLevel } from '@atlaskit/top-layer/use-arrow-navigation';
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, type TDialogCloseReason } from '@atlaskit/top-layer/dialog';
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, type TPopoverCloseReason } from '@atlaskit/top-layer/popover';
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 dismiss occurred:
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
- onClose?: never;
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 { useArrowNavigation, isAtCurrentMenuLevel } from '@atlaskit/top-layer/use-arrow-navigation';
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.1.0",
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.1.0",
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.2.0",
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;