@atlaskit/drawer 7.12.0 → 7.12.2

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 (8) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/components/index.js +32 -5
  3. package/dist/cjs/components/primitives/content.js +1 -1
  4. package/dist/es2019/components/index.js +33 -5
  5. package/dist/es2019/components/primitives/content.js +1 -1
  6. package/dist/esm/components/index.js +32 -5
  7. package/dist/esm/components/primitives/content.js +1 -1
  8. package/package.json +11 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/drawer
2
2
 
3
+ ## 7.12.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#113824](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113824)
8
+ [`0086bc04e40ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0086bc04e40ec) -
9
+ Add support of layering in drawer to have a correct escape close flow for multiple layered
10
+ components
11
+
12
+ ## 7.12.1
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 7.12.0
4
19
 
5
20
  ### Minor Changes
package/dist/cjs/components/index.js CHANGED
@@ -16,6 +16,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
16
16
  var _react = _interopRequireWildcard(require("react"));
17
17
  var _exenv = require("exenv");
18
18
  var _analyticsNext = require("@atlaskit/analytics-next");
19
+ var _layering = require("@atlaskit/layering");
20
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
21
  var _portal = _interopRequireDefault(require("@atlaskit/portal"));
20
22
  var _constants = require("../constants");
21
23
  var _blanket = _interopRequireDefault(require("./blanket"));
@@ -27,7 +29,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
27
29
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
28
30
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
29
31
  var packageName = "@atlaskit/drawer";
30
- var packageVersion = "7.12.0";
32
+ var packageVersion = "7.12.2";
31
33
  var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
32
34
  var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
33
35
  return createAndFireEventOnAtlaskit({
@@ -41,6 +43,23 @@ var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, t
41
43
  }
42
44
  })(createAnalyticsEvent);
43
45
  };
46
+
47
+ // escape close manager for layering
48
+ var EscapeCloseManager = function EscapeCloseManager(_ref) {
49
+ var createAnalyticsEvent = _ref.createAnalyticsEvent,
50
+ handleClose = _ref.handleClose;
51
+ var onClose = _react.default.useCallback(function (event) {
52
+ var analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, 'escKey');
53
+ if (handleClose) {
54
+ handleClose(event, analyticsEvent);
55
+ }
56
+ }, [handleClose, createAnalyticsEvent]);
57
+ (0, _layering.useCloseOnEscapePress)({
58
+ onClose: onClose
59
+ });
60
+ // only create a dummy component for using ths hook in class component
61
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
62
+ };
44
63
  var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
45
64
  (0, _inherits2.default)(DrawerBase, _Component);
46
65
  var _super = _createSuper(DrawerBase);
@@ -74,8 +93,11 @@ var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
74
93
  var _this$props2 = _this.props,
75
94
  isOpen = _this$props2.isOpen,
76
95
  onKeyDown = _this$props2.onKeyDown;
77
- if (event.key === 'Escape' && isOpen) {
78
- _this.handleClose(event, 'escKey');
96
+ if (!(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.inline-message-layering_wfp1p')) {
97
+ // when feature flag on, we will use the EscapeCloseManager instead
98
+ if (event.key === 'Escape' && isOpen) {
99
+ _this.handleClose(event, 'escKey');
100
+ }
79
101
  }
80
102
  if (onKeyDown) {
81
103
  onKeyDown(event);
@@ -133,7 +155,9 @@ var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
133
155
  zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex,
134
156
  label = _this$props3.label,
135
157
  titleId = _this$props3.titleId;
136
- return /*#__PURE__*/_react.default.createElement(_portal.default, {
158
+ return /*#__PURE__*/_react.default.createElement(_layering.UNSAFE_LAYERING, {
159
+ isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
160
+ }, /*#__PURE__*/_react.default.createElement(_portal.default, {
137
161
  zIndex: zIndex
138
162
  }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
139
163
  isOpen: isOpen,
@@ -158,7 +182,10 @@ var DrawerBase = exports.DrawerBase = /*#__PURE__*/function (_Component) {
158
182
  isFocusLockEnabled: isFocusLockEnabled,
159
183
  shouldReturnFocus: shouldReturnFocus,
160
184
  scrollContentLabel: scrollContentLabel
161
- }, children));
185
+ }, children, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.inline-message-layering_wfp1p') && /*#__PURE__*/_react.default.createElement(EscapeCloseManager, {
186
+ createAnalyticsEvent: this.props.createAnalyticsEvent,
187
+ handleClose: this.handleClose
188
+ }))));
162
189
  }
163
190
  }]);
164
191
  return DrawerBase;
package/dist/cjs/components/primitives/content.js CHANGED
@@ -58,7 +58,7 @@ var Content = function Content(_ref) {
58
58
  tabIndex: showContentFocus ? 0 : undefined,
59
59
  role: showContentFocus ? 'region' : undefined,
60
60
  "aria-label": showContentFocus ? scrollContentLabel : undefined,
61
- "data-testId": "drawer-contents"
61
+ "data-testid": "drawer-contents"
62
62
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
63
63
  }, props));
64
64
  };
package/dist/es2019/components/index.js CHANGED
@@ -3,12 +3,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import React, { Component } from 'react';
4
4
  import { canUseDOM } from 'exenv';
5
5
  import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
6
+ import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
7
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
6
8
  import Portal from '@atlaskit/portal';
7
9
  import { defaultFocusLockSettings } from '../constants';
8
10
  import Blanket from './blanket';
9
11
  import DrawerPrimitive from './primitives';
10
12
  const packageName = "@atlaskit/drawer";
11
- const packageVersion = "7.12.0";
13
+ const packageVersion = "7.12.2";
12
14
  const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
13
15
  const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
14
16
  action: 'dismissed',
@@ -20,6 +22,24 @@ const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEve
20
22
  trigger
21
23
  }
22
24
  })(createAnalyticsEvent);
25
+
26
+ // escape close manager for layering
27
+ const EscapeCloseManager = ({
28
+ createAnalyticsEvent,
29
+ handleClose
30
+ }) => {
31
+ const onClose = React.useCallback(event => {
32
+ const analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, 'escKey');
33
+ if (handleClose) {
34
+ handleClose(event, analyticsEvent);
35
+ }
36
+ }, [handleClose, createAnalyticsEvent]);
37
+ useCloseOnEscapePress({
38
+ onClose: onClose
39
+ });
40
+ // only create a dummy component for using ths hook in class component
41
+ return /*#__PURE__*/React.createElement(React.Fragment, null);
42
+ };
23
43
  export class DrawerBase extends Component {
24
44
  constructor(...args) {
25
45
  super(...args);
@@ -48,8 +68,11 @@ export class DrawerBase extends Component {
48
68
  isOpen,
49
69
  onKeyDown
50
70
  } = this.props;
51
- if (event.key === 'Escape' && isOpen) {
52
- this.handleClose(event, 'escKey');
71
+ if (!getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p')) {
72
+ // when feature flag on, we will use the EscapeCloseManager instead
73
+ if (event.key === 'Escape' && isOpen) {
74
+ this.handleClose(event, 'escKey');
75
+ }
53
76
  }
54
77
  if (onKeyDown) {
55
78
  onKeyDown(event);
@@ -102,7 +125,9 @@ export class DrawerBase extends Component {
102
125
  label,
103
126
  titleId
104
127
  } = this.props;
105
- return /*#__PURE__*/React.createElement(Portal, {
128
+ return /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
129
+ isDisabled: getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
130
+ }, /*#__PURE__*/React.createElement(Portal, {
106
131
  zIndex: zIndex
107
132
  }, /*#__PURE__*/React.createElement(Blanket, {
108
133
  isOpen: isOpen,
@@ -127,7 +152,10 @@ export class DrawerBase extends Component {
127
152
  isFocusLockEnabled: isFocusLockEnabled,
128
153
  shouldReturnFocus: shouldReturnFocus,
129
154
  scrollContentLabel: scrollContentLabel
130
- }, children));
155
+ }, children, getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') && /*#__PURE__*/React.createElement(EscapeCloseManager, {
156
+ createAnalyticsEvent: this.props.createAnalyticsEvent,
157
+ handleClose: this.handleClose
158
+ }))));
131
159
  }
132
160
  }
133
161
  _defineProperty(DrawerBase, "defaultProps", {
package/dist/es2019/components/primitives/content.js CHANGED
@@ -45,7 +45,7 @@ const Content = ({
45
45
  tabIndex: showContentFocus ? 0 : undefined,
46
46
  role: showContentFocus ? 'region' : undefined,
47
47
  "aria-label": showContentFocus ? scrollContentLabel : undefined,
48
- "data-testId": "drawer-contents"
48
+ "data-testid": "drawer-contents"
49
49
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
50
50
  }, props));
51
51
  };
package/dist/esm/components/index.js CHANGED
@@ -13,12 +13,14 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
13
13
  import React, { Component } from 'react';
14
14
  import { canUseDOM } from 'exenv';
15
15
  import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
16
+ import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
17
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
16
18
  import Portal from '@atlaskit/portal';
17
19
  import { defaultFocusLockSettings } from '../constants';
18
20
  import Blanket from './blanket';
19
21
  import DrawerPrimitive from './primitives';
20
22
  var packageName = "@atlaskit/drawer";
21
- var packageVersion = "7.12.0";
23
+ var packageVersion = "7.12.2";
22
24
  var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
23
25
  var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
24
26
  return createAndFireEventOnAtlaskit({
@@ -32,6 +34,23 @@ var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, t
32
34
  }
33
35
  })(createAnalyticsEvent);
34
36
  };
37
+
38
+ // escape close manager for layering
39
+ var EscapeCloseManager = function EscapeCloseManager(_ref) {
40
+ var createAnalyticsEvent = _ref.createAnalyticsEvent,
41
+ handleClose = _ref.handleClose;
42
+ var onClose = React.useCallback(function (event) {
43
+ var analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, 'escKey');
44
+ if (handleClose) {
45
+ handleClose(event, analyticsEvent);
46
+ }
47
+ }, [handleClose, createAnalyticsEvent]);
48
+ useCloseOnEscapePress({
49
+ onClose: onClose
50
+ });
51
+ // only create a dummy component for using ths hook in class component
52
+ return /*#__PURE__*/React.createElement(React.Fragment, null);
53
+ };
35
54
  export var DrawerBase = /*#__PURE__*/function (_Component) {
36
55
  _inherits(DrawerBase, _Component);
37
56
  var _super = _createSuper(DrawerBase);
@@ -65,8 +84,11 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
65
84
  var _this$props2 = _this.props,
66
85
  isOpen = _this$props2.isOpen,
67
86
  onKeyDown = _this$props2.onKeyDown;
68
- if (event.key === 'Escape' && isOpen) {
69
- _this.handleClose(event, 'escKey');
87
+ if (!getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p')) {
88
+ // when feature flag on, we will use the EscapeCloseManager instead
89
+ if (event.key === 'Escape' && isOpen) {
90
+ _this.handleClose(event, 'escKey');
91
+ }
70
92
  }
71
93
  if (onKeyDown) {
72
94
  onKeyDown(event);
@@ -124,7 +146,9 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
124
146
  zIndex = _this$props3$zIndex === void 0 ? 'unset' : _this$props3$zIndex,
125
147
  label = _this$props3.label,
126
148
  titleId = _this$props3.titleId;
127
- return /*#__PURE__*/React.createElement(Portal, {
149
+ return /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
150
+ isDisabled: getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
151
+ }, /*#__PURE__*/React.createElement(Portal, {
128
152
  zIndex: zIndex
129
153
  }, /*#__PURE__*/React.createElement(Blanket, {
130
154
  isOpen: isOpen,
@@ -149,7 +173,10 @@ export var DrawerBase = /*#__PURE__*/function (_Component) {
149
173
  isFocusLockEnabled: isFocusLockEnabled,
150
174
  shouldReturnFocus: shouldReturnFocus,
151
175
  scrollContentLabel: scrollContentLabel
152
- }, children));
176
+ }, children, getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') && /*#__PURE__*/React.createElement(EscapeCloseManager, {
177
+ createAnalyticsEvent: this.props.createAnalyticsEvent,
178
+ handleClose: this.handleClose
179
+ }))));
153
180
  }
154
181
  }]);
155
182
  return DrawerBase;
package/dist/esm/components/primitives/content.js CHANGED
@@ -53,7 +53,7 @@ var Content = function Content(_ref) {
53
53
  tabIndex: showContentFocus ? 0 : undefined,
54
54
  role: showContentFocus ? 'region' : undefined,
55
55
  "aria-label": showContentFocus ? scrollContentLabel : undefined,
56
- "data-testId": "drawer-contents"
56
+ "data-testid": "drawer-contents"
57
57
  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
58
58
  }, props));
59
59
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/drawer",
3
- "version": "7.12.0",
3
+ "version": "7.12.2",
4
4
  "description": "A drawer is a panel that slides in from the left side of the screen.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -42,12 +42,14 @@
42
42
  "dependencies": {
43
43
  "@atlaskit/analytics-next": "^9.3.0",
44
44
  "@atlaskit/blanket": "^13.2.0",
45
- "@atlaskit/button": "^17.19.0",
45
+ "@atlaskit/button": "^18.0.0",
46
46
  "@atlaskit/icon": "^22.4.0",
47
+ "@atlaskit/layering": "^0.3.0",
47
48
  "@atlaskit/motion": "^1.7.0",
49
+ "@atlaskit/platform-feature-flags": "^0.2.0",
48
50
  "@atlaskit/portal": "^4.6.0",
49
- "@atlaskit/theme": "^12.10.0",
50
- "@atlaskit/tokens": "^1.51.0",
51
+ "@atlaskit/theme": "^12.11.0",
52
+ "@atlaskit/tokens": "^1.53.0",
51
53
  "@babel/runtime": "^7.0.0",
52
54
  "@emotion/react": "^11.7.1",
53
55
  "bind-event-listener": "^3.0.0",
@@ -76,6 +78,11 @@
76
78
  "typescript": "~5.4.2",
77
79
  "wait-for-expect": "^1.2.0"
78
80
  },
81
+ "platform-feature-flags": {
82
+ "platform.design-system-team.inline-message-layering_wfp1p": {
83
+ "type": "boolean"
84
+ }
85
+ },
79
86
  "techstack": {
80
87
  "@atlassian/frontend": {
81
88
  "import-structure": "atlassian-conventions"