@atlaskit/popup 4.1.0 → 4.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 (5) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/use-close-manager.js +18 -28
  3. package/dist/es2019/use-close-manager.js +18 -27
  4. package/dist/esm/use-close-manager.js +18 -27
  5. package/package.json +10 -16
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/popup
2
2
 
3
+ ## 4.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#154745](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/154745)
8
+ [`7618d9837e247`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7618d9837e247) -
9
+ Tidy up design-system-closed-all-when-click-outside and sibling-dropdown-close-issue to provide
10
+ better keyboard navigation.
11
+
3
12
  ## 4.1.0
4
13
 
5
14
  ### Minor Changes
package/dist/cjs/use-close-manager.js CHANGED
@@ -12,8 +12,6 @@ var _layering = require("@atlaskit/layering");
12
12
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
13
  var _isElementInteractive = require("./utils/is-element-interactive");
14
14
  var _useAnimationFrame2 = require("./utils/use-animation-frame");
15
- // eslint-disable-next-line @typescript-eslint/consistent-type-imports
16
-
17
15
  var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
18
16
  var isOpen = _ref.isOpen,
19
17
  onClose = _ref.onClose,
@@ -37,16 +35,12 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
37
35
  var inIframe = window && window.self !== window.top && (0, _platformFeatureFlags.fg)('fix-dropdown-close-outside-iframe');
38
36
  var closePopup = function closePopup(event) {
39
37
  if (onClose) {
40
- if ((0, _platformFeatureFlags.fg)('sibling-dropdown-close-issue')) {
41
- var _currentLevel = null;
42
- if (event.target instanceof HTMLElement) {
43
- var _event$target$closest;
44
- _currentLevel = (_event$target$closest = event.target.closest("[data-ds--level]")) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.getAttribute('data-ds--level');
45
- }
46
- _currentLevel ? onClose(event, Number(_currentLevel)) : onClose(event);
47
- } else {
48
- onClose(event);
38
+ var _currentLevel = null;
39
+ if (event.target instanceof HTMLElement) {
40
+ var _event$target$closest;
41
+ _currentLevel = (_event$target$closest = event.target.closest("[data-ds--level]")) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.getAttribute('data-ds--level');
49
42
  }
43
+ _currentLevel ? onClose(event, Number(_currentLevel)) : onClose(event);
50
44
  }
51
45
  if (shouldDisableFocusTrap && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
52
46
  // Restoring the normal focus order for trigger.
@@ -73,25 +67,21 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
73
67
  return;
74
68
  }
75
69
  if (isLayerDisabled()) {
76
- if ((0, _platformFeatureFlags.fg)('design-system-closed-all-when-click-outside')) {
77
- if (target instanceof HTMLElement) {
78
- var _target$closest;
79
- var layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-ds--level]");
80
- if (layeredElement) {
81
- var closeType = layeredElement.getAttribute('[data-ds--close--type]');
82
- if (closeType === 'single') {
83
- // if the close type is single, we won't close other disabled layers when clicking outside
84
- return;
85
- }
86
- var levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
87
- if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
88
- // won't trigger onClick event when we click in a higher layer.
89
- return;
90
- }
70
+ if (target instanceof HTMLElement) {
71
+ var _target$closest;
72
+ var layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-ds--level]");
73
+ if (layeredElement) {
74
+ var closeType = layeredElement.getAttribute('[data-ds--close--type]');
75
+ if (closeType === 'single') {
76
+ // if the close type is single, we won't close other disabled layers when clicking outside
77
+ return;
78
+ }
79
+ var levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
80
+ if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
81
+ // won't trigger onClick event when we click in a higher layer.
82
+ return;
91
83
  }
92
84
  }
93
- } else {
94
- return;
95
85
  }
96
86
  }
97
87
  var isClickOnPopup = popupRef && popupRef.contains(target);
package/dist/es2019/use-close-manager.js CHANGED
@@ -1,4 +1,3 @@
1
- // eslint-disable-next-line @typescript-eslint/consistent-type-imports
2
1
  import { useEffect } from 'react';
3
2
  import { bind, bindAll } from 'bind-event-listener';
4
3
  import noop from '@atlaskit/ds-lib/noop';
@@ -32,16 +31,12 @@ export const useCloseManager = ({
32
31
  const inIframe = window && window.self !== window.top && fg('fix-dropdown-close-outside-iframe');
33
32
  const closePopup = event => {
34
33
  if (onClose) {
35
- if (fg('sibling-dropdown-close-issue')) {
36
- let currentLevel = null;
37
- if (event.target instanceof HTMLElement) {
38
- var _event$target$closest;
39
- currentLevel = (_event$target$closest = event.target.closest(`[data-ds--level]`)) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.getAttribute('data-ds--level');
40
- }
41
- currentLevel ? onClose(event, Number(currentLevel)) : onClose(event);
42
- } else {
43
- onClose(event);
34
+ let currentLevel = null;
35
+ if (event.target instanceof HTMLElement) {
36
+ var _event$target$closest;
37
+ currentLevel = (_event$target$closest = event.target.closest(`[data-ds--level]`)) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.getAttribute('data-ds--level');
44
38
  }
39
+ currentLevel ? onClose(event, Number(currentLevel)) : onClose(event);
45
40
  }
46
41
  if (shouldDisableFocusTrap && fg('platform_dst_popup-disable-focuslock')) {
47
42
  // Restoring the normal focus order for trigger.
@@ -70,25 +65,21 @@ export const useCloseManager = ({
70
65
  return;
71
66
  }
72
67
  if (isLayerDisabled()) {
73
- if (fg('design-system-closed-all-when-click-outside')) {
74
- if (target instanceof HTMLElement) {
75
- var _target$closest;
76
- const layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, `[data-ds--level]`);
77
- if (layeredElement) {
78
- const closeType = layeredElement.getAttribute('[data-ds--close--type]');
79
- if (closeType === 'single') {
80
- // if the close type is single, we won't close other disabled layers when clicking outside
81
- return;
82
- }
83
- const levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
84
- if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
85
- // won't trigger onClick event when we click in a higher layer.
86
- return;
87
- }
68
+ if (target instanceof HTMLElement) {
69
+ var _target$closest;
70
+ const layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, `[data-ds--level]`);
71
+ if (layeredElement) {
72
+ const closeType = layeredElement.getAttribute('[data-ds--close--type]');
73
+ if (closeType === 'single') {
74
+ // if the close type is single, we won't close other disabled layers when clicking outside
75
+ return;
76
+ }
77
+ const levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
78
+ if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
79
+ // won't trigger onClick event when we click in a higher layer.
80
+ return;
88
81
  }
89
82
  }
90
- } else {
91
- return;
92
83
  }
93
84
  }
94
85
  const isClickOnPopup = popupRef && popupRef.contains(target);
package/dist/esm/use-close-manager.js CHANGED
@@ -1,4 +1,3 @@
1
- // eslint-disable-next-line @typescript-eslint/consistent-type-imports
2
1
  import { useEffect } from 'react';
3
2
  import { bind, bindAll } from 'bind-event-listener';
4
3
  import noop from '@atlaskit/ds-lib/noop';
@@ -29,16 +28,12 @@ export var useCloseManager = function useCloseManager(_ref) {
29
28
  var inIframe = window && window.self !== window.top && fg('fix-dropdown-close-outside-iframe');
30
29
  var closePopup = function closePopup(event) {
31
30
  if (onClose) {
32
- if (fg('sibling-dropdown-close-issue')) {
33
- var _currentLevel = null;
34
- if (event.target instanceof HTMLElement) {
35
- var _event$target$closest;
36
- _currentLevel = (_event$target$closest = event.target.closest("[data-ds--level]")) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.getAttribute('data-ds--level');
37
- }
38
- _currentLevel ? onClose(event, Number(_currentLevel)) : onClose(event);
39
- } else {
40
- onClose(event);
31
+ var _currentLevel = null;
32
+ if (event.target instanceof HTMLElement) {
33
+ var _event$target$closest;
34
+ _currentLevel = (_event$target$closest = event.target.closest("[data-ds--level]")) === null || _event$target$closest === void 0 ? void 0 : _event$target$closest.getAttribute('data-ds--level');
41
35
  }
36
+ _currentLevel ? onClose(event, Number(_currentLevel)) : onClose(event);
42
37
  }
43
38
  if (shouldDisableFocusTrap && fg('platform_dst_popup-disable-focuslock')) {
44
39
  // Restoring the normal focus order for trigger.
@@ -65,25 +60,21 @@ export var useCloseManager = function useCloseManager(_ref) {
65
60
  return;
66
61
  }
67
62
  if (isLayerDisabled()) {
68
- if (fg('design-system-closed-all-when-click-outside')) {
69
- if (target instanceof HTMLElement) {
70
- var _target$closest;
71
- var layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-ds--level]");
72
- if (layeredElement) {
73
- var closeType = layeredElement.getAttribute('[data-ds--close--type]');
74
- if (closeType === 'single') {
75
- // if the close type is single, we won't close other disabled layers when clicking outside
76
- return;
77
- }
78
- var levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
79
- if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
80
- // won't trigger onClick event when we click in a higher layer.
81
- return;
82
- }
63
+ if (target instanceof HTMLElement) {
64
+ var _target$closest;
65
+ var layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-ds--level]");
66
+ if (layeredElement) {
67
+ var closeType = layeredElement.getAttribute('[data-ds--close--type]');
68
+ if (closeType === 'single') {
69
+ // if the close type is single, we won't close other disabled layers when clicking outside
70
+ return;
71
+ }
72
+ var levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
73
+ if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
74
+ // won't trigger onClick event when we click in a higher layer.
75
+ return;
83
76
  }
84
77
  }
85
- } else {
86
- return;
87
78
  }
88
79
  }
89
80
  var isClickOnPopup = popupRef && popupRef.contains(target);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/popup",
3
- "version": "4.1.0",
3
+ "version": "4.2.0",
4
4
  "description": "A popup displays brief content in an overlay.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
44
44
  "@atlaskit/platform-feature-flags": "^1.1.0",
45
45
  "@atlaskit/popper": "^7.0.0",
46
46
  "@atlaskit/portal": "^5.1.0",
47
- "@atlaskit/primitives": "^14.4.0",
47
+ "@atlaskit/primitives": "^14.7.0",
48
48
  "@atlaskit/tokens": "^4.8.0",
49
49
  "@babel/runtime": "^7.0.0",
50
50
  "@compiled/react": "^0.18.3",
@@ -58,22 +58,22 @@
58
58
  "react-dom": "^18.2.0"
59
59
  },
60
60
  "devDependencies": {
61
- "@af/accessibility-testing": "^2.0.0",
62
- "@af/integration-testing": "^0.5.0",
63
- "@af/visual-regression": "^1.3.0",
61
+ "@af/accessibility-testing": "workspace:^",
62
+ "@af/integration-testing": "workspace:^",
63
+ "@af/visual-regression": "workspace:^",
64
64
  "@atlaskit/button": "^23.0.0",
65
- "@atlaskit/code": "^17.0.0",
65
+ "@atlaskit/code": "^17.1.0",
66
66
  "@atlaskit/docs": "^10.0.0",
67
67
  "@atlaskit/form": "^12.0.0",
68
68
  "@atlaskit/heading": "^5.2.0",
69
- "@atlaskit/icon": "^25.6.0",
69
+ "@atlaskit/icon": "^26.0.0",
70
70
  "@atlaskit/link": "^3.1.0",
71
- "@atlaskit/modal-dialog": "^14.1.0",
71
+ "@atlaskit/modal-dialog": "^14.2.0",
72
72
  "@atlaskit/section-message": "^8.2.0",
73
- "@atlaskit/ssr": "^0.4.0",
73
+ "@atlaskit/ssr": "workspace:^",
74
74
  "@atlaskit/textfield": "^8.0.0",
75
75
  "@atlaskit/toggle": "^15.0.0",
76
- "@atlaskit/visual-regression": "^0.10.0",
76
+ "@atlaskit/visual-regression": "workspace:^",
77
77
  "@atlassian/feature-flags-test-utils": "^0.3.0",
78
78
  "@atlassian/ssr-tests": "^0.2.0",
79
79
  "@testing-library/react": "^13.4.0",
@@ -117,12 +117,6 @@
117
117
  "platform-design-system-popup-ref": {
118
118
  "type": "boolean"
119
119
  },
120
- "design-system-closed-all-when-click-outside": {
121
- "type": "boolean"
122
- },
123
- "sibling-dropdown-close-issue": {
124
- "type": "boolean"
125
- },
126
120
  "platform-design-system-apply-popup-wrapper-focus": {
127
121
  "type": "boolean"
128
122
  },