@atlaskit/popup 4.22.0 → 4.22.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 (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/use-close-manager.js +26 -4
  3. package/dist/es2019/use-close-manager.js +26 -4
  4. package/dist/esm/use-close-manager.js +26 -4
  5. package/package.json +5 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/popup
2
2
 
3
+ ## 4.22.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`ae5198c2f44ed`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ae5198c2f44ed) -
8
+ Fix @atlaskit/popup containing a portal-rendered child overlay (Drawer, Modal, etc.) now correctly
9
+ ignores clicks inside that overlay
10
+
3
11
  ## 4.22.0
4
12
 
5
13
  ### Minor Changes
package/dist/cjs/use-close-manager.js CHANGED
@@ -68,23 +68,45 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
68
68
  if (!doesDomNodeExist) {
69
69
  return;
70
70
  }
71
- if (isLayerDisabled()) {
71
+ if ((0, _platformFeatureFlags.fg)('jsmgrowth_popup_fix')) {
72
72
  if (target instanceof HTMLElement) {
73
73
  var _target$closest;
74
74
  var layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-ds--level]");
75
75
  if (layeredElement) {
76
- var closeType = layeredElement.getAttribute('[data-ds--close--type]');
77
- if (closeType === 'single') {
76
+ var closeType = layeredElement.getAttribute('data-ds--close--type');
77
+ if (closeType === 'single' && isLayerDisabled()) {
78
78
  // if the close type is single, we won't close other disabled layers when clicking outside
79
79
  return;
80
80
  }
81
81
  var levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
82
82
  if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
83
- // won't trigger onClick event when we click in a higher layer.
83
+ // Don't close this popup when the click landed inside a higher-level layer
84
+ // (e.g. a Drawer or Modal that portals to <body>). Such nodes are not DOM
85
+ // descendants of popupRef, so the contains() checks below would wrongly
86
+ // classify them as "outside" clicks and close the popup prematurely.
84
87
  return;
85
88
  }
86
89
  }
87
90
  }
91
+ } else {
92
+ if (isLayerDisabled()) {
93
+ if (target instanceof HTMLElement) {
94
+ var _target$closest2;
95
+ var _layeredElement = (_target$closest2 = target.closest) === null || _target$closest2 === void 0 ? void 0 : _target$closest2.call(target, "[data-ds--level]");
96
+ if (_layeredElement) {
97
+ var _closeType = _layeredElement.getAttribute('[data-ds--close--type]');
98
+ if (_closeType === 'single') {
99
+ // if the close type is single, we won't close other disabled layers when clicking outside
100
+ return;
101
+ }
102
+ var _levelOfClickedLayer = _layeredElement.getAttribute('data-ds--level');
103
+ if (_levelOfClickedLayer && Number(_levelOfClickedLayer) > currentLevel) {
104
+ // won't trigger onClick event when we click in a higher layer.
105
+ return;
106
+ }
107
+ }
108
+ }
109
+ }
88
110
  }
89
111
  var isClickOnPopup = popupRef && popupRef.contains(target);
90
112
  var isClickOnTrigger = triggerRef && triggerRef.contains(target);
package/dist/es2019/use-close-manager.js CHANGED
@@ -65,23 +65,45 @@ export const useCloseManager = ({
65
65
  if (!doesDomNodeExist) {
66
66
  return;
67
67
  }
68
- if (isLayerDisabled()) {
68
+ if (fg('jsmgrowth_popup_fix')) {
69
69
  if (target instanceof HTMLElement) {
70
70
  var _target$closest;
71
71
  const layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, `[data-ds--level]`);
72
72
  if (layeredElement) {
73
- const closeType = layeredElement.getAttribute('[data-ds--close--type]');
74
- if (closeType === 'single') {
73
+ const closeType = layeredElement.getAttribute('data-ds--close--type');
74
+ if (closeType === 'single' && isLayerDisabled()) {
75
75
  // if the close type is single, we won't close other disabled layers when clicking outside
76
76
  return;
77
77
  }
78
78
  const levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
79
79
  if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
80
- // won't trigger onClick event when we click in a higher layer.
80
+ // Don't close this popup when the click landed inside a higher-level layer
81
+ // (e.g. a Drawer or Modal that portals to <body>). Such nodes are not DOM
82
+ // descendants of popupRef, so the contains() checks below would wrongly
83
+ // classify them as "outside" clicks and close the popup prematurely.
81
84
  return;
82
85
  }
83
86
  }
84
87
  }
88
+ } else {
89
+ if (isLayerDisabled()) {
90
+ if (target instanceof HTMLElement) {
91
+ var _target$closest2;
92
+ const layeredElement = (_target$closest2 = target.closest) === null || _target$closest2 === void 0 ? void 0 : _target$closest2.call(target, `[data-ds--level]`);
93
+ if (layeredElement) {
94
+ const closeType = layeredElement.getAttribute('[data-ds--close--type]');
95
+ if (closeType === 'single') {
96
+ // if the close type is single, we won't close other disabled layers when clicking outside
97
+ return;
98
+ }
99
+ const levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
100
+ if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
101
+ // won't trigger onClick event when we click in a higher layer.
102
+ return;
103
+ }
104
+ }
105
+ }
106
+ }
85
107
  }
86
108
  const isClickOnPopup = popupRef && popupRef.contains(target);
87
109
  const isClickOnTrigger = triggerRef && triggerRef.contains(target);
package/dist/esm/use-close-manager.js CHANGED
@@ -60,23 +60,45 @@ export var useCloseManager = function useCloseManager(_ref) {
60
60
  if (!doesDomNodeExist) {
61
61
  return;
62
62
  }
63
- if (isLayerDisabled()) {
63
+ if (fg('jsmgrowth_popup_fix')) {
64
64
  if (target instanceof HTMLElement) {
65
65
  var _target$closest;
66
66
  var layeredElement = (_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-ds--level]");
67
67
  if (layeredElement) {
68
- var closeType = layeredElement.getAttribute('[data-ds--close--type]');
69
- if (closeType === 'single') {
68
+ var closeType = layeredElement.getAttribute('data-ds--close--type');
69
+ if (closeType === 'single' && isLayerDisabled()) {
70
70
  // if the close type is single, we won't close other disabled layers when clicking outside
71
71
  return;
72
72
  }
73
73
  var levelOfClickedLayer = layeredElement.getAttribute('data-ds--level');
74
74
  if (levelOfClickedLayer && Number(levelOfClickedLayer) > currentLevel) {
75
- // won't trigger onClick event when we click in a higher layer.
75
+ // Don't close this popup when the click landed inside a higher-level layer
76
+ // (e.g. a Drawer or Modal that portals to <body>). Such nodes are not DOM
77
+ // descendants of popupRef, so the contains() checks below would wrongly
78
+ // classify them as "outside" clicks and close the popup prematurely.
76
79
  return;
77
80
  }
78
81
  }
79
82
  }
83
+ } else {
84
+ if (isLayerDisabled()) {
85
+ if (target instanceof HTMLElement) {
86
+ var _target$closest2;
87
+ var _layeredElement = (_target$closest2 = target.closest) === null || _target$closest2 === void 0 ? void 0 : _target$closest2.call(target, "[data-ds--level]");
88
+ if (_layeredElement) {
89
+ var _closeType = _layeredElement.getAttribute('[data-ds--close--type]');
90
+ if (_closeType === 'single') {
91
+ // if the close type is single, we won't close other disabled layers when clicking outside
92
+ return;
93
+ }
94
+ var _levelOfClickedLayer = _layeredElement.getAttribute('data-ds--level');
95
+ if (_levelOfClickedLayer && Number(_levelOfClickedLayer) > currentLevel) {
96
+ // won't trigger onClick event when we click in a higher layer.
97
+ return;
98
+ }
99
+ }
100
+ }
101
+ }
80
102
  }
81
103
  var isClickOnPopup = popupRef && popupRef.contains(target);
82
104
  var isClickOnTrigger = triggerRef && triggerRef.contains(target);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/popup",
3
- "version": "4.22.0",
3
+ "version": "4.22.1",
4
4
  "description": "A popup displays brief content in an overlay.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -69,7 +69,7 @@
69
69
  "@atlaskit/docs": "^11.8.0",
70
70
  "@atlaskit/form": "^15.5.0",
71
71
  "@atlaskit/heading": "^5.4.0",
72
- "@atlaskit/icon": "^35.1.0",
72
+ "@atlaskit/icon": "^35.3.0",
73
73
  "@atlaskit/link": "^3.4.0",
74
74
  "@atlaskit/modal-dialog": "^15.2.0",
75
75
  "@atlaskit/section-message": "^8.13.0",
@@ -114,6 +114,9 @@
114
114
  }
115
115
  },
116
116
  "platform-feature-flags": {
117
+ "jsmgrowth_popup_fix": {
118
+ "type": "boolean"
119
+ },
117
120
  "platform-dst-top-layer": {
118
121
  "type": "boolean"
119
122
  },