@atlaskit/inline-dialog 14.2.1 → 14.2.3

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 +14 -0
  2. package/dist/cjs/InlineDialog/index.js +44 -58
  3. package/dist/es2019/InlineDialog/index.js +46 -61
  4. package/dist/esm/InlineDialog/index.js +46 -60
  5. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/inline-dialog
2
2
 
3
+ ## 14.2.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#116568](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116568)
8
+ [`f8fef52dc49ff`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f8fef52dc49ff) -
9
+ Correct the usage of handling escape onClose request
10
+
11
+ ## 14.2.2
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 14.2.1
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/InlineDialog/index.js CHANGED
@@ -26,37 +26,22 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
26
26
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
27
27
 
28
28
  var packageName = "@atlaskit/inline-dialog";
29
- var packageVersion = "14.2.1";
29
+ var packageVersion = "14.2.3";
30
30
  var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
31
31
  if (!node) {
32
32
  return false;
33
33
  }
34
34
  return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
35
35
  };
36
- var InlineDialogWithLayering = function InlineDialogWithLayering(_ref) {
37
- var isOpen = _ref.isOpen,
38
- onContentBlur = _ref.onContentBlur,
39
- onContentClick = _ref.onContentClick,
40
- onContentFocus = _ref.onContentFocus,
41
- onClose = _ref.onClose,
42
- placement = _ref.placement,
43
- strategy = _ref.strategy,
44
- testId = _ref.testId,
45
- content = _ref.content,
46
- children = _ref.children;
47
- return (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
48
- isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
49
- }, (0, _react2.jsx)(InlineDialog, {
50
- isOpen: isOpen,
51
- onContentBlur: onContentBlur,
52
- onContentClick: onContentClick,
53
- onContentFocus: onContentFocus,
54
- onClose: onClose,
55
- placement: placement,
56
- strategy: strategy,
57
- testId: testId,
58
- content: content
59
- }, children));
36
+
37
+ // escape close manager for layering
38
+ var EscapeCloseManager = function EscapeCloseManager(_ref) {
39
+ var handleClose = _ref.handleClose;
40
+ (0, _layering.useCloseOnEscapePress)({
41
+ onClose: handleClose
42
+ });
43
+ // only create a dummy component for using ths hook in class component
44
+ return (0, _react2.jsx)("span", null);
60
45
  };
61
46
  var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
62
47
  var _ref2$isOpen = _ref2.isOpen,
@@ -80,14 +65,12 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
80
65
  var triggerRef = (0, _react.useRef)(null);
81
66
  // we put this into a ref to avoid handleCloseRequest having this as a dependency
82
67
  var onCloseRef = (0, _react.useRef)(onClose);
68
+ var isLayeringEnabled = (0, _platformFeatureFlags.fg)('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
83
69
  (0, _react.useEffect)(function () {
84
70
  onCloseRef.current = onClose;
85
71
  });
86
- var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
87
- isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
88
72
  var handleCloseRequest = (0, _react.useCallback)(function (event) {
89
73
  var target = event.target;
90
-
91
74
  // checks for when target is not HTMLElement
92
75
  if (!(target instanceof HTMLElement)) {
93
76
  return;
@@ -99,30 +82,29 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
99
82
  if (!document.body.contains(target)) {
100
83
  return;
101
84
  }
102
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.inline-message-layering_wfp1p')) {
103
- if (!isLayerDisabled()) {
104
- var _onCloseRef$current;
105
- (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
106
- isOpen: false,
107
- event: event
108
- });
109
- }
110
- } else {
111
- // handles the case where inline dialog opens portalled elements such as modal
112
- if (checkIsChildOfPortal(target)) {
113
- return;
114
- }
85
+ if (isLayeringEnabled) {
86
+ var _onCloseRef$current;
87
+ (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
88
+ isOpen: false,
89
+ event: event
90
+ });
91
+ return;
92
+ }
115
93
 
116
- // call onClose if the click originated from outside the dialog
117
- if (containerRef.current && !containerRef.current.contains(target)) {
118
- var _onCloseRef$current2;
119
- (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef, {
120
- isOpen: false,
121
- event: event
122
- });
123
- }
94
+ // handles the case where inline dialog opens portalled elements such as modal
95
+ if (checkIsChildOfPortal(target)) {
96
+ return;
97
+ }
98
+
99
+ // call onClose if the click originated from outside the dialog
100
+ if (containerRef.current && !containerRef.current.contains(target)) {
101
+ var _onCloseRef$current2;
102
+ (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef, {
103
+ isOpen: false,
104
+ event: event
105
+ });
124
106
  }
125
- }, [isLayerDisabled]);
107
+ }, [isLayeringEnabled]);
126
108
  var handleClick = (0, _react.useCallback)(function (event) {
127
109
  var _containerRef$current;
128
110
  // exit if we click outside but on the trigger — it can handle the clicks itself
@@ -131,23 +113,22 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
131
113
  }
132
114
 
133
115
  // if feature flag is enabled we won't file the close event when clicking inside dialog
134
- if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.inline-message-layering_wfp1p') && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
116
+ if (isLayeringEnabled && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
135
117
  return;
136
118
  }
137
119
  handleCloseRequest(event);
138
- }, [handleCloseRequest]);
120
+ }, [handleCloseRequest, isLayeringEnabled]);
139
121
  (0, _react.useEffect)(function () {
140
122
  if (!isOpen) {
141
123
  return;
142
124
  }
143
- var unbind = (0, _bindEventListener.bind)(window, {
125
+ return (0, _bindEventListener.bind)(window, {
144
126
  type: 'click',
145
127
  listener: handleClick,
146
128
  options: {
147
129
  capture: true
148
130
  }
149
131
  });
150
- return unbind;
151
132
  }, [isOpen, handleClick]);
152
133
  var handleKeyDown = (0, _react.useCallback)(function (event) {
153
134
  if (event.key === 'Escape') {
@@ -155,7 +136,8 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
155
136
  }
156
137
  }, [handleCloseRequest]);
157
138
  (0, _react.useEffect)(function () {
158
- if (!isOpen) {
139
+ // if layering is enabled, we will use useCloseOnEscapePress hook instead
140
+ if (!isOpen || isLayeringEnabled) {
159
141
  return;
160
142
  }
161
143
  var unbind = (0, _bindEventListener.bind)(window, {
@@ -166,7 +148,7 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
166
148
  }
167
149
  });
168
150
  return unbind;
169
- }, [isOpen, handleKeyDown]);
151
+ }, [isOpen, handleKeyDown, isLayeringEnabled]);
170
152
  var popper = isOpen ? (0, _react2.jsx)(_popper.Popper, {
171
153
  placement: placement,
172
154
  strategy: strategy
@@ -205,7 +187,11 @@ var InlineDialog = exports.InlineDialogWithoutAnalytics = /*#__PURE__*/(0, _reac
205
187
  }
206
188
  }
207
189
  }, (0, _react2.jsx)(_react.default.Fragment, null, children));
208
- }), popper);
190
+ }), isLayeringEnabled ? (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
191
+ isDisabled: false
192
+ }, popper, (0, _react2.jsx)(EscapeCloseManager, {
193
+ handleClose: handleCloseRequest
194
+ })) : popper);
209
195
  });
210
196
  InlineDialog.displayName = 'InlineDialog';
211
197
  var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
@@ -223,4 +209,4 @@ var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
223
209
  packageVersion: packageVersion
224
210
  }
225
211
  })
226
- })(InlineDialogWithLayering));
212
+ })(InlineDialog));
package/dist/es2019/InlineDialog/index.js CHANGED
@@ -10,43 +10,28 @@ import { bind } from 'bind-event-listener';
10
10
  import NodeResolver from 'react-node-resolver';
11
11
  import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
12
12
  import noop from '@atlaskit/ds-lib/noop';
13
- import { UNSAFE_LAYERING, UNSAFE_useLayering } from '@atlaskit/layering';
14
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
13
+ import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
14
+ import { fg } from '@atlaskit/platform-feature-flags';
15
15
  import { Manager, Popper, Reference } from '@atlaskit/popper';
16
16
  import { Container } from './styled/container';
17
17
  const packageName = "@atlaskit/inline-dialog";
18
- const packageVersion = "14.2.1";
18
+ const packageVersion = "14.2.3";
19
19
  const checkIsChildOfPortal = node => {
20
20
  if (!node) {
21
21
  return false;
22
22
  }
23
23
  return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
24
24
  };
25
- const InlineDialogWithLayering = ({
26
- isOpen,
27
- onContentBlur,
28
- onContentClick,
29
- onContentFocus,
30
- onClose,
31
- placement,
32
- strategy,
33
- testId,
34
- content,
35
- children
25
+
26
+ // escape close manager for layering
27
+ const EscapeCloseManager = ({
28
+ handleClose
36
29
  }) => {
37
- return jsx(UNSAFE_LAYERING, {
38
- isDisabled: getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
39
- }, jsx(InlineDialog, {
40
- isOpen: isOpen,
41
- onContentBlur: onContentBlur,
42
- onContentClick: onContentClick,
43
- onContentFocus: onContentFocus,
44
- onClose: onClose,
45
- placement: placement,
46
- strategy: strategy,
47
- testId: testId,
48
- content: content
49
- }, children));
30
+ useCloseOnEscapePress({
31
+ onClose: handleClose
32
+ });
33
+ // only create a dummy component for using ths hook in class component
34
+ return jsx("span", null);
50
35
  };
51
36
  const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
52
37
  isOpen = false,
@@ -64,17 +49,14 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
64
49
  const triggerRef = useRef(null);
65
50
  // we put this into a ref to avoid handleCloseRequest having this as a dependency
66
51
  const onCloseRef = useRef(onClose);
52
+ const isLayeringEnabled = fg('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
67
53
  useEffect(() => {
68
54
  onCloseRef.current = onClose;
69
55
  });
70
- const {
71
- isLayerDisabled
72
- } = UNSAFE_useLayering();
73
56
  const handleCloseRequest = useCallback(event => {
74
57
  const {
75
58
  target
76
59
  } = event;
77
-
78
60
  // checks for when target is not HTMLElement
79
61
  if (!(target instanceof HTMLElement)) {
80
62
  return;
@@ -86,30 +68,29 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
86
68
  if (!document.body.contains(target)) {
87
69
  return;
88
70
  }
89
- if (getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p')) {
90
- if (!isLayerDisabled()) {
91
- var _onCloseRef$current;
92
- (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
93
- isOpen: false,
94
- event
95
- });
96
- }
97
- } else {
98
- // handles the case where inline dialog opens portalled elements such as modal
99
- if (checkIsChildOfPortal(target)) {
100
- return;
101
- }
71
+ if (isLayeringEnabled) {
72
+ var _onCloseRef$current;
73
+ (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
74
+ isOpen: false,
75
+ event
76
+ });
77
+ return;
78
+ }
102
79
 
103
- // call onClose if the click originated from outside the dialog
104
- if (containerRef.current && !containerRef.current.contains(target)) {
105
- var _onCloseRef$current2;
106
- (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 ? void 0 : _onCloseRef$current2.call(onCloseRef, {
107
- isOpen: false,
108
- event
109
- });
110
- }
80
+ // handles the case where inline dialog opens portalled elements such as modal
81
+ if (checkIsChildOfPortal(target)) {
82
+ return;
83
+ }
84
+
85
+ // call onClose if the click originated from outside the dialog
86
+ if (containerRef.current && !containerRef.current.contains(target)) {
87
+ var _onCloseRef$current2;
88
+ (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 ? void 0 : _onCloseRef$current2.call(onCloseRef, {
89
+ isOpen: false,
90
+ event
91
+ });
111
92
  }
112
- }, [isLayerDisabled]);
93
+ }, [isLayeringEnabled]);
113
94
  const handleClick = useCallback(event => {
114
95
  var _containerRef$current;
115
96
  // exit if we click outside but on the trigger — it can handle the clicks itself
@@ -118,23 +99,22 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
118
99
  }
119
100
 
120
101
  // if feature flag is enabled we won't file the close event when clicking inside dialog
121
- if (getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
102
+ if (isLayeringEnabled && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
122
103
  return;
123
104
  }
124
105
  handleCloseRequest(event);
125
- }, [handleCloseRequest]);
106
+ }, [handleCloseRequest, isLayeringEnabled]);
126
107
  useEffect(() => {
127
108
  if (!isOpen) {
128
109
  return;
129
110
  }
130
- const unbind = bind(window, {
111
+ return bind(window, {
131
112
  type: 'click',
132
113
  listener: handleClick,
133
114
  options: {
134
115
  capture: true
135
116
  }
136
117
  });
137
- return unbind;
138
118
  }, [isOpen, handleClick]);
139
119
  const handleKeyDown = useCallback(event => {
140
120
  if (event.key === 'Escape') {
@@ -142,7 +122,8 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
142
122
  }
143
123
  }, [handleCloseRequest]);
144
124
  useEffect(() => {
145
- if (!isOpen) {
125
+ // if layering is enabled, we will use useCloseOnEscapePress hook instead
126
+ if (!isOpen || isLayeringEnabled) {
146
127
  return;
147
128
  }
148
129
  const unbind = bind(window, {
@@ -153,7 +134,7 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
153
134
  }
154
135
  });
155
136
  return unbind;
156
- }, [isOpen, handleKeyDown]);
137
+ }, [isOpen, handleKeyDown, isLayeringEnabled]);
157
138
  const popper = isOpen ? jsx(Popper, {
158
139
  placement: placement,
159
140
  strategy: strategy
@@ -190,7 +171,11 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
190
171
  ref.current = node;
191
172
  }
192
173
  }
193
- }, jsx(React.Fragment, null, children))), popper);
174
+ }, jsx(React.Fragment, null, children))), isLayeringEnabled ? jsx(UNSAFE_LAYERING, {
175
+ isDisabled: false
176
+ }, popper, jsx(EscapeCloseManager, {
177
+ handleClose: handleCloseRequest
178
+ })) : popper);
194
179
  });
195
180
  InlineDialog.displayName = 'InlineDialog';
196
181
  export { InlineDialog as InlineDialogWithoutAnalytics };
@@ -209,4 +194,4 @@ export default withAnalyticsContext({
209
194
  packageVersion
210
195
  }
211
196
  })
212
- })(InlineDialogWithLayering));
197
+ })(InlineDialog));
package/dist/esm/InlineDialog/index.js CHANGED
@@ -10,42 +10,27 @@ import { bind } from 'bind-event-listener';
10
10
  import NodeResolver from 'react-node-resolver';
11
11
  import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
12
12
  import noop from '@atlaskit/ds-lib/noop';
13
- import { UNSAFE_LAYERING, UNSAFE_useLayering } from '@atlaskit/layering';
14
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
13
+ import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
14
+ import { fg } from '@atlaskit/platform-feature-flags';
15
15
  import { Manager, Popper, Reference } from '@atlaskit/popper';
16
16
  import { Container } from './styled/container';
17
17
  var packageName = "@atlaskit/inline-dialog";
18
- var packageVersion = "14.2.1";
18
+ var packageVersion = "14.2.3";
19
19
  var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
20
20
  if (!node) {
21
21
  return false;
22
22
  }
23
23
  return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
24
24
  };
25
- var InlineDialogWithLayering = function InlineDialogWithLayering(_ref) {
26
- var isOpen = _ref.isOpen,
27
- onContentBlur = _ref.onContentBlur,
28
- onContentClick = _ref.onContentClick,
29
- onContentFocus = _ref.onContentFocus,
30
- onClose = _ref.onClose,
31
- placement = _ref.placement,
32
- strategy = _ref.strategy,
33
- testId = _ref.testId,
34
- content = _ref.content,
35
- children = _ref.children;
36
- return jsx(UNSAFE_LAYERING, {
37
- isDisabled: getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
38
- }, jsx(InlineDialog, {
39
- isOpen: isOpen,
40
- onContentBlur: onContentBlur,
41
- onContentClick: onContentClick,
42
- onContentFocus: onContentFocus,
43
- onClose: onClose,
44
- placement: placement,
45
- strategy: strategy,
46
- testId: testId,
47
- content: content
48
- }, children));
25
+
26
+ // escape close manager for layering
27
+ var EscapeCloseManager = function EscapeCloseManager(_ref) {
28
+ var handleClose = _ref.handleClose;
29
+ useCloseOnEscapePress({
30
+ onClose: handleClose
31
+ });
32
+ // only create a dummy component for using ths hook in class component
33
+ return jsx("span", null);
49
34
  };
50
35
  var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
51
36
  var _ref2$isOpen = _ref2.isOpen,
@@ -69,14 +54,12 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
69
54
  var triggerRef = useRef(null);
70
55
  // we put this into a ref to avoid handleCloseRequest having this as a dependency
71
56
  var onCloseRef = useRef(onClose);
57
+ var isLayeringEnabled = fg('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
72
58
  useEffect(function () {
73
59
  onCloseRef.current = onClose;
74
60
  });
75
- var _UNSAFE_useLayering = UNSAFE_useLayering(),
76
- isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
77
61
  var handleCloseRequest = useCallback(function (event) {
78
62
  var target = event.target;
79
-
80
63
  // checks for when target is not HTMLElement
81
64
  if (!(target instanceof HTMLElement)) {
82
65
  return;
@@ -88,30 +71,29 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
88
71
  if (!document.body.contains(target)) {
89
72
  return;
90
73
  }
91
- if (getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p')) {
92
- if (!isLayerDisabled()) {
93
- var _onCloseRef$current;
94
- (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
95
- isOpen: false,
96
- event: event
97
- });
98
- }
99
- } else {
100
- // handles the case where inline dialog opens portalled elements such as modal
101
- if (checkIsChildOfPortal(target)) {
102
- return;
103
- }
74
+ if (isLayeringEnabled) {
75
+ var _onCloseRef$current;
76
+ (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
77
+ isOpen: false,
78
+ event: event
79
+ });
80
+ return;
81
+ }
104
82
 
105
- // call onClose if the click originated from outside the dialog
106
- if (containerRef.current && !containerRef.current.contains(target)) {
107
- var _onCloseRef$current2;
108
- (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef, {
109
- isOpen: false,
110
- event: event
111
- });
112
- }
83
+ // handles the case where inline dialog opens portalled elements such as modal
84
+ if (checkIsChildOfPortal(target)) {
85
+ return;
86
+ }
87
+
88
+ // call onClose if the click originated from outside the dialog
89
+ if (containerRef.current && !containerRef.current.contains(target)) {
90
+ var _onCloseRef$current2;
91
+ (_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef, {
92
+ isOpen: false,
93
+ event: event
94
+ });
113
95
  }
114
- }, [isLayerDisabled]);
96
+ }, [isLayeringEnabled]);
115
97
  var handleClick = useCallback(function (event) {
116
98
  var _containerRef$current;
117
99
  // exit if we click outside but on the trigger — it can handle the clicks itself
@@ -120,23 +102,22 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
120
102
  }
121
103
 
122
104
  // if feature flag is enabled we won't file the close event when clicking inside dialog
123
- if (getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
105
+ if (isLayeringEnabled && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
124
106
  return;
125
107
  }
126
108
  handleCloseRequest(event);
127
- }, [handleCloseRequest]);
109
+ }, [handleCloseRequest, isLayeringEnabled]);
128
110
  useEffect(function () {
129
111
  if (!isOpen) {
130
112
  return;
131
113
  }
132
- var unbind = bind(window, {
114
+ return bind(window, {
133
115
  type: 'click',
134
116
  listener: handleClick,
135
117
  options: {
136
118
  capture: true
137
119
  }
138
120
  });
139
- return unbind;
140
121
  }, [isOpen, handleClick]);
141
122
  var handleKeyDown = useCallback(function (event) {
142
123
  if (event.key === 'Escape') {
@@ -144,7 +125,8 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
144
125
  }
145
126
  }, [handleCloseRequest]);
146
127
  useEffect(function () {
147
- if (!isOpen) {
128
+ // if layering is enabled, we will use useCloseOnEscapePress hook instead
129
+ if (!isOpen || isLayeringEnabled) {
148
130
  return;
149
131
  }
150
132
  var unbind = bind(window, {
@@ -155,7 +137,7 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
155
137
  }
156
138
  });
157
139
  return unbind;
158
- }, [isOpen, handleKeyDown]);
140
+ }, [isOpen, handleKeyDown, isLayeringEnabled]);
159
141
  var popper = isOpen ? jsx(Popper, {
160
142
  placement: placement,
161
143
  strategy: strategy
@@ -194,7 +176,11 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
194
176
  }
195
177
  }
196
178
  }, jsx(React.Fragment, null, children));
197
- }), popper);
179
+ }), isLayeringEnabled ? jsx(UNSAFE_LAYERING, {
180
+ isDisabled: false
181
+ }, popper, jsx(EscapeCloseManager, {
182
+ handleClose: handleCloseRequest
183
+ })) : popper);
198
184
  });
199
185
  InlineDialog.displayName = 'InlineDialog';
200
186
  export { InlineDialog as InlineDialogWithoutAnalytics };
@@ -213,4 +199,4 @@ export default withAnalyticsContext({
213
199
  packageVersion: packageVersion
214
200
  }
215
201
  })
216
- })(InlineDialogWithLayering));
202
+ })(InlineDialog));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-dialog",
3
- "version": "14.2.1",
3
+ "version": "14.2.3",
4
4
  "description": "An inline dialog is a pop-up container for small amounts of information. It can also contain controls.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -44,10 +44,10 @@
44
44
  "@atlaskit/analytics-next": "^9.3.0",
45
45
  "@atlaskit/ds-lib": "^2.3.0",
46
46
  "@atlaskit/layering": "^0.3.0",
47
- "@atlaskit/platform-feature-flags": "^0.2.0",
47
+ "@atlaskit/platform-feature-flags": "^0.3.0",
48
48
  "@atlaskit/popper": "^6.1.0",
49
49
  "@atlaskit/theme": "^12.11.0",
50
- "@atlaskit/tokens": "^1.51.0",
50
+ "@atlaskit/tokens": "^1.53.0",
51
51
  "@babel/runtime": "^7.0.0",
52
52
  "@emotion/react": "^11.7.1",
53
53
  "bind-event-listener": "^3.0.0",
@@ -60,8 +60,8 @@
60
60
  "@af/accessibility-testing": "*",
61
61
  "@af/integration-testing": "*",
62
62
  "@af/visual-regression": "*",
63
- "@atlaskit/button": "^17.22.0",
64
- "@atlaskit/datetime-picker": "^13.6.0",
63
+ "@atlaskit/button": "^18.1.0",
64
+ "@atlaskit/datetime-picker": "^13.7.0",
65
65
  "@atlaskit/docs": "*",
66
66
  "@atlaskit/modal-dialog": "^12.14.0",
67
67
  "@atlaskit/section-message": "^6.5.0",