@atlaskit/inline-dialog 15.1.2 → 15.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 +8 -0
  2. package/dist/cjs/InlineDialog/index.js +31 -46
  3. package/dist/es2019/InlineDialog/index.js +33 -47
  4. package/dist/esm/InlineDialog/index.js +32 -47
  5. package/package.json +5 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/inline-dialog
2
2
 
3
+ ## 15.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#157176](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157176)
8
+ [`3d03c4f1002ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3d03c4f1002ab) -
9
+ Integrate layering and use CloseManager instead
10
+
3
11
  ## 15.1.2
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/InlineDialog/index.js CHANGED
@@ -32,12 +32,30 @@ var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
32
32
  return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
33
33
  };
34
34
 
35
- // escape close manager for layering
36
- var EscapeCloseManager = function EscapeCloseManager(_ref) {
37
- var handleClose = _ref.handleClose;
35
+ // Close manager for layering
36
+ var CloseManager = function CloseManager(_ref) {
37
+ var handleEscapeClose = _ref.handleEscapeClose,
38
+ handleClick = _ref.handleClick;
38
39
  (0, _layering.useCloseOnEscapePress)({
39
- onClose: handleClose
40
+ onClose: handleEscapeClose
40
41
  });
42
+ var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
43
+ isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
44
+ (0, _react.useEffect)(function () {
45
+ return (0, _bindEventListener.bind)(window, {
46
+ type: 'click',
47
+ listener: function listener(e) {
48
+ if (isLayerDisabled()) {
49
+ return;
50
+ }
51
+ handleClick(e);
52
+ },
53
+ options: {
54
+ capture: true
55
+ }
56
+ });
57
+ }, [handleClick, isLayerDisabled]);
58
+
41
59
  // only create a dummy component for using ths hook in class component
42
60
  return (0, _react2.jsx)("span", null);
43
61
  };
@@ -68,12 +86,11 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
68
86
  action: 'closed',
69
87
  componentName: 'inlineDialog',
70
88
  packageName: "@atlaskit/inline-dialog",
71
- packageVersion: "15.1.2"
89
+ packageVersion: "15.2.0"
72
90
  });
73
91
 
74
92
  // we put this into a ref to avoid handleCloseRequest having this as a dependency
75
93
  var onCloseRef = (0, _react.useRef)(onClose);
76
- var isLayeringEnabled = (0, _platformFeatureFlags.fg)('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
77
94
  (0, _react.useEffect)(function () {
78
95
  onCloseRef.current = onClose;
79
96
  });
@@ -90,7 +107,7 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
90
107
  if (!document.body.contains(target)) {
91
108
  return;
92
109
  }
93
- if (isLayeringEnabled) {
110
+ if (isOpen) {
94
111
  var _onCloseRef$current;
95
112
  (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
96
113
  isOpen: false,
@@ -112,51 +129,18 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
112
129
  event: event
113
130
  });
114
131
  }
115
- }, [isLayeringEnabled]);
132
+ }, [isOpen]);
116
133
  var handleClick = (0, _react.useCallback)(function (event) {
117
134
  var _containerRef$current;
118
135
  // exit if we click outside but on the trigger — it can handle the clicks itself
119
136
  if (triggerRef.current && triggerRef.current.contains(event.target)) {
120
137
  return;
121
138
  }
122
-
123
- // if feature flag is enabled we won't file the close event when clicking inside dialog
124
- if (isLayeringEnabled && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
139
+ if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
125
140
  return;
126
141
  }
127
142
  handleCloseRequest(event);
128
- }, [handleCloseRequest, isLayeringEnabled]);
129
- (0, _react.useEffect)(function () {
130
- if (!isOpen) {
131
- return;
132
- }
133
- return (0, _bindEventListener.bind)(window, {
134
- type: 'click',
135
- listener: handleClick,
136
- options: {
137
- capture: true
138
- }
139
- });
140
- }, [isOpen, handleClick]);
141
- var handleKeyDown = (0, _react.useCallback)(function (event) {
142
- if (event.key === 'Escape') {
143
- handleCloseRequest(event);
144
- }
145
- }, [handleCloseRequest]);
146
- (0, _react.useEffect)(function () {
147
- // if layering is enabled, we will use useCloseOnEscapePress hook instead
148
- if (!isOpen || isLayeringEnabled) {
149
- return;
150
- }
151
- var unbind = (0, _bindEventListener.bind)(window, {
152
- type: 'keydown',
153
- listener: handleKeyDown,
154
- options: {
155
- capture: true
156
- }
157
- });
158
- return unbind;
159
- }, [isOpen, handleKeyDown, isLayeringEnabled]);
143
+ }, [handleCloseRequest, containerRef, triggerRef]);
160
144
  var popper = isOpen ? (0, _react2.jsx)(_popper.Popper, {
161
145
  placement: placement,
162
146
  strategy: strategy
@@ -197,10 +181,11 @@ var InlineDialog = /*#__PURE__*/(0, _react.memo)(function InlineDialog(_ref2) {
197
181
  },
198
182
  hasNodeResolver: !(0, _platformFeatureFlags.fg)('platform_design_system_team_portal_logic_r18_fix')
199
183
  }, (0, _react2.jsx)(_react.default.Fragment, null, children));
200
- }), isLayeringEnabled ? (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
184
+ }), isOpen ? (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
201
185
  isDisabled: false
202
- }, popper, (0, _react2.jsx)(EscapeCloseManager, {
203
- handleClose: handleCloseRequest
186
+ }, popper, (0, _react2.jsx)(CloseManager, {
187
+ handleEscapeClose: handleCloseRequest,
188
+ handleClick: handleClick
204
189
  })) : popper);
205
190
  });
206
191
 
package/dist/es2019/InlineDialog/index.js CHANGED
@@ -9,7 +9,7 @@ import { jsx } from '@emotion/react';
9
9
  import { bind } from 'bind-event-listener';
10
10
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
11
11
  import noop from '@atlaskit/ds-lib/noop';
12
- import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
12
+ import { UNSAFE_LAYERING, UNSAFE_useLayering, useCloseOnEscapePress } from '@atlaskit/layering';
13
13
  import { fg } from '@atlaskit/platform-feature-flags';
14
14
  import { Manager, Popper, Reference } from '@atlaskit/popper';
15
15
  import NodeResolverWrapper from './node-resolver-wrapper';
@@ -21,13 +21,32 @@ const checkIsChildOfPortal = node => {
21
21
  return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
22
22
  };
23
23
 
24
- // escape close manager for layering
25
- const EscapeCloseManager = ({
26
- handleClose
24
+ // Close manager for layering
25
+ const CloseManager = ({
26
+ handleEscapeClose,
27
+ handleClick
27
28
  }) => {
28
29
  useCloseOnEscapePress({
29
- onClose: handleClose
30
+ onClose: handleEscapeClose
30
31
  });
32
+ const {
33
+ isLayerDisabled
34
+ } = UNSAFE_useLayering();
35
+ useEffect(() => {
36
+ return bind(window, {
37
+ type: 'click',
38
+ listener: e => {
39
+ if (isLayerDisabled()) {
40
+ return;
41
+ }
42
+ handleClick(e);
43
+ },
44
+ options: {
45
+ capture: true
46
+ }
47
+ });
48
+ }, [handleClick, isLayerDisabled]);
49
+
31
50
  // only create a dummy component for using ths hook in class component
32
51
  return jsx("span", null);
33
52
  };
@@ -50,12 +69,11 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
50
69
  action: 'closed',
51
70
  componentName: 'inlineDialog',
52
71
  packageName: "@atlaskit/inline-dialog",
53
- packageVersion: "15.1.2"
72
+ packageVersion: "15.2.0"
54
73
  });
55
74
 
56
75
  // we put this into a ref to avoid handleCloseRequest having this as a dependency
57
76
  const onCloseRef = useRef(onClose);
58
- const isLayeringEnabled = fg('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
59
77
  useEffect(() => {
60
78
  onCloseRef.current = onClose;
61
79
  });
@@ -74,7 +92,7 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
74
92
  if (!document.body.contains(target)) {
75
93
  return;
76
94
  }
77
- if (isLayeringEnabled) {
95
+ if (isOpen) {
78
96
  var _onCloseRef$current;
79
97
  (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 ? void 0 : _onCloseRef$current.call(onCloseRef, {
80
98
  isOpen: false,
@@ -96,51 +114,18 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
96
114
  event
97
115
  });
98
116
  }
99
- }, [isLayeringEnabled]);
117
+ }, [isOpen]);
100
118
  const handleClick = useCallback(event => {
101
119
  var _containerRef$current;
102
120
  // exit if we click outside but on the trigger — it can handle the clicks itself
103
121
  if (triggerRef.current && triggerRef.current.contains(event.target)) {
104
122
  return;
105
123
  }
106
-
107
- // if feature flag is enabled we won't file the close event when clicking inside dialog
108
- if (isLayeringEnabled && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
124
+ if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
109
125
  return;
110
126
  }
111
127
  handleCloseRequest(event);
112
- }, [handleCloseRequest, isLayeringEnabled]);
113
- useEffect(() => {
114
- if (!isOpen) {
115
- return;
116
- }
117
- return bind(window, {
118
- type: 'click',
119
- listener: handleClick,
120
- options: {
121
- capture: true
122
- }
123
- });
124
- }, [isOpen, handleClick]);
125
- const handleKeyDown = useCallback(event => {
126
- if (event.key === 'Escape') {
127
- handleCloseRequest(event);
128
- }
129
- }, [handleCloseRequest]);
130
- useEffect(() => {
131
- // if layering is enabled, we will use useCloseOnEscapePress hook instead
132
- if (!isOpen || isLayeringEnabled) {
133
- return;
134
- }
135
- const unbind = bind(window, {
136
- type: 'keydown',
137
- listener: handleKeyDown,
138
- options: {
139
- capture: true
140
- }
141
- });
142
- return unbind;
143
- }, [isOpen, handleKeyDown, isLayeringEnabled]);
128
+ }, [handleCloseRequest, containerRef, triggerRef]);
144
129
  const popper = isOpen ? jsx(Popper, {
145
130
  placement: placement,
146
131
  strategy: strategy
@@ -179,10 +164,11 @@ const InlineDialog = /*#__PURE__*/memo(function InlineDialog({
179
164
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
180
165
  },
181
166
  hasNodeResolver: !fg('platform_design_system_team_portal_logic_r18_fix')
182
- }, jsx(React.Fragment, null, children))), isLayeringEnabled ? jsx(UNSAFE_LAYERING, {
167
+ }, jsx(React.Fragment, null, children))), isOpen ? jsx(UNSAFE_LAYERING, {
183
168
  isDisabled: false
184
- }, popper, jsx(EscapeCloseManager, {
185
- handleClose: handleCloseRequest
169
+ }, popper, jsx(CloseManager, {
170
+ handleEscapeClose: handleCloseRequest,
171
+ handleClick: handleClick
186
172
  })) : popper);
187
173
  });
188
174
 
package/dist/esm/InlineDialog/index.js CHANGED
@@ -9,7 +9,7 @@ import { jsx } from '@emotion/react';
9
9
  import { bind } from 'bind-event-listener';
10
10
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
11
11
  import noop from '@atlaskit/ds-lib/noop';
12
- import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
12
+ import { UNSAFE_LAYERING, UNSAFE_useLayering, useCloseOnEscapePress } from '@atlaskit/layering';
13
13
  import { fg } from '@atlaskit/platform-feature-flags';
14
14
  import { Manager, Popper, Reference } from '@atlaskit/popper';
15
15
  import NodeResolverWrapper from './node-resolver-wrapper';
@@ -21,12 +21,30 @@ var checkIsChildOfPortal = function checkIsChildOfPortal(node) {
21
21
  return node.classList && node.classList.contains('atlaskit-portal-container') || checkIsChildOfPortal(node.parentElement);
22
22
  };
23
23
 
24
- // escape close manager for layering
25
- var EscapeCloseManager = function EscapeCloseManager(_ref) {
26
- var handleClose = _ref.handleClose;
24
+ // Close manager for layering
25
+ var CloseManager = function CloseManager(_ref) {
26
+ var handleEscapeClose = _ref.handleEscapeClose,
27
+ handleClick = _ref.handleClick;
27
28
  useCloseOnEscapePress({
28
- onClose: handleClose
29
+ onClose: handleEscapeClose
29
30
  });
31
+ var _UNSAFE_useLayering = UNSAFE_useLayering(),
32
+ isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
33
+ useEffect(function () {
34
+ return bind(window, {
35
+ type: 'click',
36
+ listener: function listener(e) {
37
+ if (isLayerDisabled()) {
38
+ return;
39
+ }
40
+ handleClick(e);
41
+ },
42
+ options: {
43
+ capture: true
44
+ }
45
+ });
46
+ }, [handleClick, isLayerDisabled]);
47
+
30
48
  // only create a dummy component for using ths hook in class component
31
49
  return jsx("span", null);
32
50
  };
@@ -57,12 +75,11 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
57
75
  action: 'closed',
58
76
  componentName: 'inlineDialog',
59
77
  packageName: "@atlaskit/inline-dialog",
60
- packageVersion: "15.1.2"
78
+ packageVersion: "15.2.0"
61
79
  });
62
80
 
63
81
  // we put this into a ref to avoid handleCloseRequest having this as a dependency
64
82
  var onCloseRef = useRef(onClose);
65
- var isLayeringEnabled = fg('platform.design-system-team.inline-message-layering_wfp1p') && isOpen;
66
83
  useEffect(function () {
67
84
  onCloseRef.current = onClose;
68
85
  });
@@ -79,7 +96,7 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
79
96
  if (!document.body.contains(target)) {
80
97
  return;
81
98
  }
82
- if (isLayeringEnabled) {
99
+ if (isOpen) {
83
100
  var _onCloseRef$current;
84
101
  (_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef, {
85
102
  isOpen: false,
@@ -101,51 +118,18 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
101
118
  event: event
102
119
  });
103
120
  }
104
- }, [isLayeringEnabled]);
121
+ }, [isOpen]);
105
122
  var handleClick = useCallback(function (event) {
106
123
  var _containerRef$current;
107
124
  // exit if we click outside but on the trigger — it can handle the clicks itself
108
125
  if (triggerRef.current && triggerRef.current.contains(event.target)) {
109
126
  return;
110
127
  }
111
-
112
- // if feature flag is enabled we won't file the close event when clicking inside dialog
113
- if (isLayeringEnabled && (_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
128
+ if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
114
129
  return;
115
130
  }
116
131
  handleCloseRequest(event);
117
- }, [handleCloseRequest, isLayeringEnabled]);
118
- useEffect(function () {
119
- if (!isOpen) {
120
- return;
121
- }
122
- return bind(window, {
123
- type: 'click',
124
- listener: handleClick,
125
- options: {
126
- capture: true
127
- }
128
- });
129
- }, [isOpen, handleClick]);
130
- var handleKeyDown = useCallback(function (event) {
131
- if (event.key === 'Escape') {
132
- handleCloseRequest(event);
133
- }
134
- }, [handleCloseRequest]);
135
- useEffect(function () {
136
- // if layering is enabled, we will use useCloseOnEscapePress hook instead
137
- if (!isOpen || isLayeringEnabled) {
138
- return;
139
- }
140
- var unbind = bind(window, {
141
- type: 'keydown',
142
- listener: handleKeyDown,
143
- options: {
144
- capture: true
145
- }
146
- });
147
- return unbind;
148
- }, [isOpen, handleKeyDown, isLayeringEnabled]);
132
+ }, [handleCloseRequest, containerRef, triggerRef]);
149
133
  var popper = isOpen ? jsx(Popper, {
150
134
  placement: placement,
151
135
  strategy: strategy
@@ -186,10 +170,11 @@ var InlineDialog = /*#__PURE__*/memo(function InlineDialog(_ref2) {
186
170
  },
187
171
  hasNodeResolver: !fg('platform_design_system_team_portal_logic_r18_fix')
188
172
  }, jsx(React.Fragment, null, children));
189
- }), isLayeringEnabled ? jsx(UNSAFE_LAYERING, {
173
+ }), isOpen ? jsx(UNSAFE_LAYERING, {
190
174
  isDisabled: false
191
- }, popper, jsx(EscapeCloseManager, {
192
- handleClose: handleCloseRequest
175
+ }, popper, jsx(CloseManager, {
176
+ handleEscapeClose: handleCloseRequest,
177
+ handleClick: handleClick
193
178
  })) : popper);
194
179
  });
195
180
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-dialog",
3
- "version": "15.1.2",
3
+ "version": "15.2.0",
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/"
@@ -56,13 +56,13 @@
56
56
  "@af/accessibility-testing": "*",
57
57
  "@af/integration-testing": "*",
58
58
  "@af/visual-regression": "*",
59
- "@atlaskit/button": "^20.2.0",
60
- "@atlaskit/datetime-picker": "^15.4.0",
59
+ "@atlaskit/button": "^20.3.0",
60
+ "@atlaskit/datetime-picker": "^15.5.0",
61
61
  "@atlaskit/docs": "*",
62
- "@atlaskit/dropdown-menu": "^12.20.0",
62
+ "@atlaskit/dropdown-menu": "^12.21.0",
63
63
  "@atlaskit/modal-dialog": "^12.17.0",
64
64
  "@atlaskit/section-message": "^6.6.0",
65
- "@atlaskit/select": "^18.1.0",
65
+ "@atlaskit/select": "^18.4.0",
66
66
  "@atlaskit/ssr": "*",
67
67
  "@atlaskit/visual-regression": "*",
68
68
  "@testing-library/react": "^12.1.5",
@@ -108,9 +108,6 @@
108
108
  }
109
109
  },
110
110
  "platform-feature-flags": {
111
- "platform.design-system-team.inline-message-layering_wfp1p": {
112
- "type": "boolean"
113
- },
114
111
  "platform_design_system_team_portal_logic_r18_fix": {
115
112
  "type": "boolean"
116
113
  }