@atlaskit/popup 1.27.0 → 1.27.1

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 (9) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/use-focus-manager.js +20 -12
  3. package/dist/es2019/use-focus-manager.js +21 -12
  4. package/dist/esm/use-focus-manager.js +20 -12
  5. package/dist/types/types.d.ts +1 -0
  6. package/dist/types/use-focus-manager.d.ts +1 -1
  7. package/dist/types-ts4.5/types.d.ts +1 -0
  8. package/dist/types-ts4.5/use-focus-manager.d.ts +1 -1
  9. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/popup
2
2
 
3
+ ## 1.27.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#144902](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144902)
8
+ [`16cce78563062`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/16cce78563062) -
9
+ Fixes a bug that caused the trigger to lose the ability to have focus after closing a dropdown
10
+ menu using the Escape key inside the popup content.
11
+
3
12
  ## 1.27.0
4
13
 
5
14
  ### Minor Changes
package/dist/cjs/use-focus-manager.js CHANGED
@@ -8,6 +8,7 @@ exports.useFocusManager = void 0;
8
8
  var _react = require("react");
9
9
  var _focusTrap = _interopRequireDefault(require("focus-trap"));
10
10
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
11
+ var _layering = require("@atlaskit/layering");
11
12
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
13
  var _useAnimationFrame2 = require("./utils/use-animation-frame");
13
14
  var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
@@ -17,25 +18,32 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
17
18
  autoFocus = _ref.autoFocus,
18
19
  shouldCloseOnTab = _ref.shouldCloseOnTab,
19
20
  shouldDisableFocusTrap = _ref.shouldDisableFocusTrap,
20
- shouldReturnFocus = _ref.shouldReturnFocus;
21
+ shouldReturnFocus = _ref.shouldReturnFocus,
22
+ shouldRenderToParent = _ref.shouldRenderToParent;
21
23
  var _useAnimationFrame = (0, _useAnimationFrame2.useAnimationFrame)(),
22
24
  requestFrame = _useAnimationFrame.requestFrame,
23
25
  cancelAllFrames = _useAnimationFrame.cancelAllFrames;
26
+ var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
27
+ currentLevel = _UNSAFE_useLayering.currentLevel;
24
28
  (0, _react.useEffect)(function () {
25
29
  if (!popupRef || shouldCloseOnTab) {
26
30
  return _noop.default;
27
31
  }
28
32
  if (shouldDisableFocusTrap && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
29
- // Plucking trigger & popup content container from the tab order so that
30
- // when we Shift+Tab, the focus moves to the element before trigger
31
- requestFrame(function () {
32
- triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '-1');
33
- if (popupRef && autoFocus) {
34
- popupRef.setAttribute('tabindex', '-1');
35
- }
36
- (initialFocusRef || popupRef).focus();
37
- });
38
- return _noop.default;
33
+ var isDropdown = popupRef.matches('[id^=ds--dropdown--]');
34
+ var popups = document.querySelectorAll("[data-ds--level=\"".concat(currentLevel - 1, "\"]"));
35
+ if (!(popups[popups.length - 1] && !shouldRenderToParent && isDropdown)) {
36
+ // Plucking trigger & popup content container from the tab order so that
37
+ // when we Shift+Tab, the focus moves to the element before trigger
38
+ requestFrame(function () {
39
+ triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '-1');
40
+ if (popupRef && autoFocus) {
41
+ popupRef.setAttribute('tabindex', '-1');
42
+ }
43
+ (initialFocusRef || popupRef).focus();
44
+ });
45
+ return _noop.default;
46
+ }
39
47
  }
40
48
  var trapConfig = {
41
49
  clickOutsideDeactivates: true,
@@ -54,5 +62,5 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
54
62
  cancelAllFrames();
55
63
  focusTrap.deactivate();
56
64
  };
57
- }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
65
+ }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus, shouldRenderToParent, currentLevel]);
58
66
  };
package/dist/es2019/use-focus-manager.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { useEffect } from 'react';
2
2
  import createFocusTrap from 'focus-trap';
3
3
  import noop from '@atlaskit/ds-lib/noop';
4
+ import { UNSAFE_useLayering } from '@atlaskit/layering';
4
5
  import { fg } from '@atlaskit/platform-feature-flags';
5
6
  import { useAnimationFrame } from './utils/use-animation-frame';
6
7
  export const useFocusManager = ({
@@ -10,27 +11,35 @@ export const useFocusManager = ({
10
11
  autoFocus,
11
12
  shouldCloseOnTab,
12
13
  shouldDisableFocusTrap,
13
- shouldReturnFocus
14
+ shouldReturnFocus,
15
+ shouldRenderToParent
14
16
  }) => {
15
17
  const {
16
18
  requestFrame,
17
19
  cancelAllFrames
18
20
  } = useAnimationFrame();
21
+ const {
22
+ currentLevel
23
+ } = UNSAFE_useLayering();
19
24
  useEffect(() => {
20
25
  if (!popupRef || shouldCloseOnTab) {
21
26
  return noop;
22
27
  }
23
28
  if (shouldDisableFocusTrap && fg('platform_dst_popup-disable-focuslock')) {
24
- // Plucking trigger & popup content container from the tab order so that
25
- // when we Shift+Tab, the focus moves to the element before trigger
26
- requestFrame(() => {
27
- triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.setAttribute('tabindex', '-1');
28
- if (popupRef && autoFocus) {
29
- popupRef.setAttribute('tabindex', '-1');
30
- }
31
- (initialFocusRef || popupRef).focus();
32
- });
33
- return noop;
29
+ const isDropdown = popupRef.matches('[id^=ds--dropdown--]');
30
+ const popups = document.querySelectorAll(`[data-ds--level="${currentLevel - 1}"]`);
31
+ if (!(popups[popups.length - 1] && !shouldRenderToParent && isDropdown)) {
32
+ // Plucking trigger & popup content container from the tab order so that
33
+ // when we Shift+Tab, the focus moves to the element before trigger
34
+ requestFrame(() => {
35
+ triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.setAttribute('tabindex', '-1');
36
+ if (popupRef && autoFocus) {
37
+ popupRef.setAttribute('tabindex', '-1');
38
+ }
39
+ (initialFocusRef || popupRef).focus();
40
+ });
41
+ return noop;
42
+ }
34
43
  }
35
44
  const trapConfig = {
36
45
  clickOutsideDeactivates: true,
@@ -49,5 +58,5 @@ export const useFocusManager = ({
49
58
  cancelAllFrames();
50
59
  focusTrap.deactivate();
51
60
  };
52
- }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
61
+ }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus, shouldRenderToParent, currentLevel]);
53
62
  };
package/dist/esm/use-focus-manager.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { useEffect } from 'react';
2
2
  import createFocusTrap from 'focus-trap';
3
3
  import noop from '@atlaskit/ds-lib/noop';
4
+ import { UNSAFE_useLayering } from '@atlaskit/layering';
4
5
  import { fg } from '@atlaskit/platform-feature-flags';
5
6
  import { useAnimationFrame } from './utils/use-animation-frame';
6
7
  export var useFocusManager = function useFocusManager(_ref) {
@@ -10,25 +11,32 @@ export var useFocusManager = function useFocusManager(_ref) {
10
11
  autoFocus = _ref.autoFocus,
11
12
  shouldCloseOnTab = _ref.shouldCloseOnTab,
12
13
  shouldDisableFocusTrap = _ref.shouldDisableFocusTrap,
13
- shouldReturnFocus = _ref.shouldReturnFocus;
14
+ shouldReturnFocus = _ref.shouldReturnFocus,
15
+ shouldRenderToParent = _ref.shouldRenderToParent;
14
16
  var _useAnimationFrame = useAnimationFrame(),
15
17
  requestFrame = _useAnimationFrame.requestFrame,
16
18
  cancelAllFrames = _useAnimationFrame.cancelAllFrames;
19
+ var _UNSAFE_useLayering = UNSAFE_useLayering(),
20
+ currentLevel = _UNSAFE_useLayering.currentLevel;
17
21
  useEffect(function () {
18
22
  if (!popupRef || shouldCloseOnTab) {
19
23
  return noop;
20
24
  }
21
25
  if (shouldDisableFocusTrap && fg('platform_dst_popup-disable-focuslock')) {
22
- // Plucking trigger & popup content container from the tab order so that
23
- // when we Shift+Tab, the focus moves to the element before trigger
24
- requestFrame(function () {
25
- triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '-1');
26
- if (popupRef && autoFocus) {
27
- popupRef.setAttribute('tabindex', '-1');
28
- }
29
- (initialFocusRef || popupRef).focus();
30
- });
31
- return noop;
26
+ var isDropdown = popupRef.matches('[id^=ds--dropdown--]');
27
+ var popups = document.querySelectorAll("[data-ds--level=\"".concat(currentLevel - 1, "\"]"));
28
+ if (!(popups[popups.length - 1] && !shouldRenderToParent && isDropdown)) {
29
+ // Plucking trigger & popup content container from the tab order so that
30
+ // when we Shift+Tab, the focus moves to the element before trigger
31
+ requestFrame(function () {
32
+ triggerRef === null || triggerRef === void 0 || triggerRef.setAttribute('tabindex', '-1');
33
+ if (popupRef && autoFocus) {
34
+ popupRef.setAttribute('tabindex', '-1');
35
+ }
36
+ (initialFocusRef || popupRef).focus();
37
+ });
38
+ return noop;
39
+ }
32
40
  }
33
41
  var trapConfig = {
34
42
  clickOutsideDeactivates: true,
@@ -47,5 +55,5 @@ export var useFocusManager = function useFocusManager(_ref) {
47
55
  cancelAllFrames();
48
56
  focusTrap.deactivate();
49
57
  };
50
- }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus]);
58
+ }, [popupRef, triggerRef, autoFocus, initialFocusRef, shouldCloseOnTab, shouldDisableFocusTrap, requestFrame, cancelAllFrames, shouldReturnFocus, shouldRenderToParent, currentLevel]);
51
59
  };
package/dist/types/types.d.ts CHANGED
@@ -262,6 +262,7 @@ export type FocusManagerHook = {
262
262
  autoFocus: boolean;
263
263
  shouldDisableFocusTrap: boolean;
264
264
  shouldReturnFocus: boolean;
265
+ shouldRenderToParent?: boolean;
265
266
  };
266
267
  export type RepositionOnUpdateProps = PropsWithChildren<{
267
268
  update: PopperChildrenProps['update'];
package/dist/types/use-focus-manager.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { type FocusManagerHook } from './types';
2
- export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, shouldReturnFocus, }: FocusManagerHook) => void;
2
+ export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, shouldReturnFocus, shouldRenderToParent, }: FocusManagerHook) => void;
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -265,6 +265,7 @@ export type FocusManagerHook = {
265
265
  autoFocus: boolean;
266
266
  shouldDisableFocusTrap: boolean;
267
267
  shouldReturnFocus: boolean;
268
+ shouldRenderToParent?: boolean;
268
269
  };
269
270
  export type RepositionOnUpdateProps = PropsWithChildren<{
270
271
  update: PopperChildrenProps['update'];
package/dist/types-ts4.5/use-focus-manager.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { type FocusManagerHook } from './types';
2
- export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, shouldReturnFocus, }: FocusManagerHook) => void;
2
+ export declare const useFocusManager: ({ initialFocusRef, popupRef, triggerRef, autoFocus, shouldCloseOnTab, shouldDisableFocusTrap, shouldReturnFocus, shouldRenderToParent, }: FocusManagerHook) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/popup",
3
- "version": "1.27.0",
3
+ "version": "1.27.1",
4
4
  "description": "A popup displays brief content in an overlay.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -45,7 +45,7 @@
45
45
  "@atlaskit/portal": "^4.9.0",
46
46
  "@atlaskit/primitives": "^12.2.0",
47
47
  "@atlaskit/theme": "^13.0.0",
48
- "@atlaskit/tokens": "^1.60.0",
48
+ "@atlaskit/tokens": "^1.61.0",
49
49
  "@babel/runtime": "^7.0.0",
50
50
  "@emotion/react": "^11.7.1",
51
51
  "bind-event-listener": "^3.0.0",
@@ -61,7 +61,7 @@
61
61
  "@af/accessibility-testing": "*",
62
62
  "@af/integration-testing": "*",
63
63
  "@af/visual-regression": "*",
64
- "@atlaskit/button": "^20.1.0",
64
+ "@atlaskit/button": "^20.2.0",
65
65
  "@atlaskit/icon": "^22.18.0",
66
66
  "@atlaskit/ssr": "*",
67
67
  "@atlaskit/textfield": "^6.5.0",