@atlaskit/drawer 7.14.3 → 9.0.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 (10) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/components/index.js +57 -74
  3. package/dist/cjs/components/primitives/focus-lock.js +1 -1
  4. package/dist/es2019/components/index.js +50 -71
  5. package/dist/esm/components/index.js +56 -73
  6. package/dist/types/components/index.d.ts +2 -17
  7. package/dist/types/components/types.d.ts +2 -8
  8. package/dist/types-ts4.5/components/index.d.ts +2 -17
  9. package/dist/types-ts4.5/components/types.d.ts +2 -8
  10. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/drawer
2
2
 
3
+ ## 9.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#142249](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142249)
8
+ [`fee9fd211df7b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fee9fd211df7b) -
9
+ Remove deprecated prop `shouldUnmountOnExit` which was deprecated in version 7.1.9. This prop can
10
+ be safely removed from your code as it has been non-functional for several years.
11
+
12
+ ## 8.0.0
13
+
14
+ ### Major Changes
15
+
16
+ - [#140090](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140090)
17
+ [`89833597971da`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/89833597971da) -
18
+ Refactor of analytics handling to remove usages of legacy AnalyticsContext. Removed
19
+ WithAnalyticsEventsProps from type.
20
+
3
21
  ## 7.14.3
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/components/index.js CHANGED
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = exports.DrawerBase = void 0;
8
+ exports.default = exports.Drawer = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _exenv = require("exenv");
11
11
  var _analyticsNext = require("@atlaskit/analytics-next");
@@ -15,44 +15,24 @@ var _portal = _interopRequireDefault(require("@atlaskit/portal"));
15
15
  var _blanket = _interopRequireDefault(require("./blanket"));
16
16
  var _primitives = _interopRequireDefault(require("./primitives"));
17
17
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
18
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
19
19
  /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
20
20
 
21
- var packageName = "@atlaskit/drawer";
22
- var packageVersion = "7.14.3";
23
- var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
24
- var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
25
- return createAndFireEventOnAtlaskit({
26
- action: 'dismissed',
27
- actionSubject: 'drawer',
28
- attributes: {
29
- componentName: 'drawer',
30
- packageName: packageName,
31
- packageVersion: packageVersion,
32
- trigger: trigger
33
- }
34
- })(createAnalyticsEvent);
35
- };
36
-
37
21
  // escape close manager for layering
38
22
  var EscapeCloseManager = function EscapeCloseManager(_ref) {
39
- var createAnalyticsEvent = _ref.createAnalyticsEvent,
40
- handleClose = _ref.handleClose;
41
- var onClose = _react.default.useCallback(function (event) {
42
- if (handleClose) {
43
- var _analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, 'escKey');
44
- handleClose(event, _analyticsEvent);
45
- }
46
- }, [handleClose, createAnalyticsEvent]);
23
+ var onClose = _ref.onClose;
24
+ // wrap so that we can cast the event to a React.KeyboardEvent
25
+ var handleClose = (0, _react.useCallback)(function (evt) {
26
+ onClose && onClose(evt);
27
+ }, [onClose]);
47
28
  (0, _layering.useCloseOnEscapePress)({
48
- onClose: onClose
29
+ onClose: handleClose
49
30
  });
50
- // only create a dummy component for using ths hook in class component
51
31
  return /*#__PURE__*/_react.default.createElement("span", null);
52
32
  };
53
33
 
54
34
  /**
55
- * __Drawer base__
35
+ * __Drawer__
56
36
  *
57
37
  * A drawer is a panel that slides in from the left side of the screen.
58
38
  *
@@ -60,7 +40,7 @@ var EscapeCloseManager = function EscapeCloseManager(_ref) {
60
40
  * - [Code](https://atlassian.design/components/drawer/code)
61
41
  * - [Usage](https://atlassian.design/components/drawer/usage)
62
42
  */
63
- var DrawerBase = exports.DrawerBase = function DrawerBase(_ref2) {
43
+ var Drawer = exports.Drawer = function Drawer(_ref2) {
64
44
  var _ref2$width = _ref2.width,
65
45
  width = _ref2$width === void 0 ? 'narrow' : _ref2$width,
66
46
  isOpen = _ref2.isOpen,
@@ -71,14 +51,12 @@ var DrawerBase = exports.DrawerBase = function DrawerBase(_ref2) {
71
51
  _ref2$autoFocusFirstE = _ref2.autoFocusFirstElem,
72
52
  autoFocusFirstElem = _ref2$autoFocusFirstE === void 0 ? true : _ref2$autoFocusFirstE,
73
53
  onKeyDown = _ref2.onKeyDown,
74
- createAnalyticsEvent = _ref2.createAnalyticsEvent,
75
54
  onClose = _ref2.onClose,
76
55
  testId = _ref2.testId,
77
56
  children = _ref2.children,
78
57
  icon = _ref2.icon,
79
58
  closeLabel = _ref2.closeLabel,
80
59
  scrollContentLabel = _ref2.scrollContentLabel,
81
- shouldUnmountOnExit = _ref2.shouldUnmountOnExit,
82
60
  onCloseComplete = _ref2.onCloseComplete,
83
61
  onOpenComplete = _ref2.onOpenComplete,
84
62
  overrides = _ref2.overrides,
@@ -88,37 +66,59 @@ var DrawerBase = exports.DrawerBase = function DrawerBase(_ref2) {
88
66
  titleId = _ref2.titleId,
89
67
  enterFrom = _ref2.enterFrom;
90
68
  var body = _exenv.canUseDOM ? document.querySelector('body') : undefined;
91
- var handleClose = (0, _react.useCallback)(function (event, trigger) {
92
- var analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, trigger);
93
- if (onClose) {
94
- onClose(event, analyticsEvent);
69
+ var handleClose = (0, _analyticsNext.usePlatformLeafEventHandler)({
70
+ fn: function fn(evt, analyticsEvent) {
71
+ return onClose && onClose(evt, analyticsEvent);
72
+ },
73
+ action: 'dismissed',
74
+ componentName: 'drawer',
75
+ packageName: "@atlaskit/drawer",
76
+ packageVersion: "9.0.0",
77
+ analyticsData: {
78
+ trigger: 'escKey'
95
79
  }
96
- }, [createAnalyticsEvent, onClose]);
97
- (0, _react.useEffect)(function () {
98
- var handleKeyDown = function handleKeyDown(event) {
99
- if (!(0, _platformFeatureFlags.fg)('platform.design-system-team.inline-message-layering_wfp1p')) {
100
- // when feature flag on, we will use the EscapeCloseManager instead
101
- if (event.key === 'Escape' && isOpen) {
102
- handleClose(event, 'escKey');
103
- }
104
- }
105
- if (onKeyDown) {
106
- onKeyDown(event);
80
+ });
81
+ var handleKeyDown = (0, _react.useCallback)(function (evt) {
82
+ onKeyDown && onKeyDown(evt);
83
+ if (!(0, _platformFeatureFlags.fg)('platform.design-system-team.inline-message-layering_wfp1p')) {
84
+ // when feature flag on, we will use the EscapeCloseManager instead
85
+ if (evt.key === 'Escape' && isOpen && onClose) {
86
+ handleClose(evt);
107
87
  }
108
- };
88
+ }
89
+ }, [handleClose, isOpen, onClose, onKeyDown]);
90
+ (0, _react.useEffect)(function () {
109
91
  if (isOpen) {
110
92
  window.addEventListener('keydown', handleKeyDown);
111
93
  }
112
94
  return function () {
113
95
  window.removeEventListener('keydown', handleKeyDown);
114
96
  };
115
- }, [handleClose, isOpen, onKeyDown]);
116
- var handleBlanketClick = function handleBlanketClick(event) {
117
- handleClose(event, 'blanket');
118
- };
119
- var handleBackButtonClick = function handleBackButtonClick(event) {
120
- handleClose(event, 'backButton');
121
- };
97
+ }, [handleKeyDown, isOpen]);
98
+ var handleBlanketClick = (0, _analyticsNext.usePlatformLeafEventHandler)({
99
+ fn: function fn(evt, analyticsEvent) {
100
+ return onClose && onClose(evt, analyticsEvent);
101
+ },
102
+ action: 'dismissed',
103
+ componentName: 'drawer',
104
+ packageName: "@atlaskit/drawer",
105
+ packageVersion: "9.0.0",
106
+ analyticsData: {
107
+ trigger: 'blanket'
108
+ }
109
+ });
110
+ var handleBackButtonClick = (0, _analyticsNext.usePlatformLeafEventHandler)({
111
+ fn: function fn(evt, analyticsEvent) {
112
+ return onClose && onClose(evt, analyticsEvent);
113
+ },
114
+ action: 'dismissed',
115
+ componentName: 'drawer',
116
+ packageName: "@atlaskit/drawer",
117
+ packageVersion: "9.0.0",
118
+ analyticsData: {
119
+ trigger: 'backButton'
120
+ }
121
+ });
122
122
  if (!body) {
123
123
  return null;
124
124
  }
@@ -139,8 +139,7 @@ var DrawerBase = exports.DrawerBase = function DrawerBase(_ref2) {
139
139
  width: width,
140
140
  enterFrom: enterFrom,
141
141
  label: label,
142
- titleId: titleId,
143
- shouldUnmountOnExit: shouldUnmountOnExit
142
+ titleId: titleId
144
143
  // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
145
144
  ,
146
145
  overrides: overrides,
@@ -151,23 +150,7 @@ var DrawerBase = exports.DrawerBase = function DrawerBase(_ref2) {
151
150
  }, isOpen && (0, _platformFeatureFlags.fg)('platform.design-system-team.inline-message-layering_wfp1p') ? /*#__PURE__*/_react.default.createElement(_layering.UNSAFE_LAYERING, {
152
151
  isDisabled: false
153
152
  }, children, /*#__PURE__*/_react.default.createElement(EscapeCloseManager, {
154
- createAnalyticsEvent: createAnalyticsEvent,
155
- handleClose: handleClose
153
+ onClose: handleClose
156
154
  })) : children));
157
155
  };
158
-
159
- /**
160
- * __Drawer__
161
- *
162
- * A drawer is a panel that slides in from the left side of the screen.
163
- *
164
- * - [Examples](https://atlassian.design/components/drawer/examples)
165
- * - [Code](https://atlassian.design/components/drawer/code)
166
- * - [Usage](https://atlassian.design/components/drawer/usage)
167
- */
168
- var Drawer = (0, _analyticsNext.withAnalyticsContext)({
169
- componentName: 'drawer',
170
- packageName: packageName,
171
- packageVersion: packageVersion
172
- })((0, _analyticsNext.withAnalyticsEvents)()(DrawerBase));
173
156
  var _default = exports.default = Drawer;
package/dist/cjs/components/primitives/focus-lock.js CHANGED
@@ -11,7 +11,7 @@ var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
11
11
  var _reactScrolllock = _interopRequireDefault(require("react-scrolllock"));
12
12
  var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
13
13
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
14
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
14
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
15
15
  /**
16
16
  * __Focus lock__
17
17
  *
package/dist/es2019/components/index.js CHANGED
@@ -1,46 +1,28 @@
1
1
  /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
2
2
  import React, { useCallback, useEffect } from 'react';
3
3
  import { canUseDOM } from 'exenv';
4
- import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
4
+ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
5
5
  import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
7
  import Portal from '@atlaskit/portal';
8
8
  import Blanket from './blanket';
9
9
  import DrawerPrimitive from './primitives';
10
- const packageName = "@atlaskit/drawer";
11
- const packageVersion = "7.14.3";
12
- const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
13
- const createAndFireOnClick = (createAnalyticsEvent, trigger) => createAndFireEventOnAtlaskit({
14
- action: 'dismissed',
15
- actionSubject: 'drawer',
16
- attributes: {
17
- componentName: 'drawer',
18
- packageName,
19
- packageVersion,
20
- trigger
21
- }
22
- })(createAnalyticsEvent);
23
-
24
10
  // escape close manager for layering
25
11
  const EscapeCloseManager = ({
26
- createAnalyticsEvent,
27
- handleClose
12
+ onClose
28
13
  }) => {
29
- const onClose = React.useCallback(event => {
30
- if (handleClose) {
31
- const analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, 'escKey');
32
- handleClose(event, analyticsEvent);
33
- }
34
- }, [handleClose, createAnalyticsEvent]);
14
+ // wrap so that we can cast the event to a React.KeyboardEvent
15
+ const handleClose = useCallback(evt => {
16
+ onClose && onClose(evt);
17
+ }, [onClose]);
35
18
  useCloseOnEscapePress({
36
- onClose: onClose
19
+ onClose: handleClose
37
20
  });
38
- // only create a dummy component for using ths hook in class component
39
21
  return /*#__PURE__*/React.createElement("span", null);
40
22
  };
41
23
 
42
24
  /**
43
- * __Drawer base__
25
+ * __Drawer__
44
26
  *
45
27
  * A drawer is a panel that slides in from the left side of the screen.
46
28
  *
@@ -48,21 +30,19 @@ const EscapeCloseManager = ({
48
30
  * - [Code](https://atlassian.design/components/drawer/code)
49
31
  * - [Usage](https://atlassian.design/components/drawer/usage)
50
32
  */
51
- export const DrawerBase = ({
33
+ export const Drawer = ({
52
34
  width = 'narrow',
53
35
  isOpen,
54
36
  isFocusLockEnabled = true,
55
37
  shouldReturnFocus = true,
56
38
  autoFocusFirstElem = true,
57
39
  onKeyDown,
58
- createAnalyticsEvent,
59
40
  onClose,
60
41
  testId,
61
42
  children,
62
43
  icon,
63
44
  closeLabel,
64
45
  scrollContentLabel,
65
- shouldUnmountOnExit,
66
46
  onCloseComplete,
67
47
  onOpenComplete,
68
48
  // eslint-disable-next-line @repo/internal/react/consistent-props-definitions
@@ -73,37 +53,53 @@ export const DrawerBase = ({
73
53
  enterFrom
74
54
  }) => {
75
55
  const body = canUseDOM ? document.querySelector('body') : undefined;
76
- const handleClose = useCallback((event, trigger) => {
77
- const analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, trigger);
78
- if (onClose) {
79
- onClose(event, analyticsEvent);
56
+ const handleClose = usePlatformLeafEventHandler({
57
+ fn: (evt, analyticsEvent) => onClose && onClose(evt, analyticsEvent),
58
+ action: 'dismissed',
59
+ componentName: 'drawer',
60
+ packageName: "@atlaskit/drawer",
61
+ packageVersion: "9.0.0",
62
+ analyticsData: {
63
+ trigger: 'escKey'
80
64
  }
81
- }, [createAnalyticsEvent, onClose]);
82
- useEffect(() => {
83
- const handleKeyDown = event => {
84
- if (!fg('platform.design-system-team.inline-message-layering_wfp1p')) {
85
- // when feature flag on, we will use the EscapeCloseManager instead
86
- if (event.key === 'Escape' && isOpen) {
87
- handleClose(event, 'escKey');
88
- }
89
- }
90
- if (onKeyDown) {
91
- onKeyDown(event);
65
+ });
66
+ const handleKeyDown = useCallback(evt => {
67
+ onKeyDown && onKeyDown(evt);
68
+ if (!fg('platform.design-system-team.inline-message-layering_wfp1p')) {
69
+ // when feature flag on, we will use the EscapeCloseManager instead
70
+ if (evt.key === 'Escape' && isOpen && onClose) {
71
+ handleClose(evt);
92
72
  }
93
- };
73
+ }
74
+ }, [handleClose, isOpen, onClose, onKeyDown]);
75
+ useEffect(() => {
94
76
  if (isOpen) {
95
77
  window.addEventListener('keydown', handleKeyDown);
96
78
  }
97
79
  return () => {
98
80
  window.removeEventListener('keydown', handleKeyDown);
99
81
  };
100
- }, [handleClose, isOpen, onKeyDown]);
101
- const handleBlanketClick = event => {
102
- handleClose(event, 'blanket');
103
- };
104
- const handleBackButtonClick = event => {
105
- handleClose(event, 'backButton');
106
- };
82
+ }, [handleKeyDown, isOpen]);
83
+ const handleBlanketClick = usePlatformLeafEventHandler({
84
+ fn: (evt, analyticsEvent) => onClose && onClose(evt, analyticsEvent),
85
+ action: 'dismissed',
86
+ componentName: 'drawer',
87
+ packageName: "@atlaskit/drawer",
88
+ packageVersion: "9.0.0",
89
+ analyticsData: {
90
+ trigger: 'blanket'
91
+ }
92
+ });
93
+ const handleBackButtonClick = usePlatformLeafEventHandler({
94
+ fn: (evt, analyticsEvent) => onClose && onClose(evt, analyticsEvent),
95
+ action: 'dismissed',
96
+ componentName: 'drawer',
97
+ packageName: "@atlaskit/drawer",
98
+ packageVersion: "9.0.0",
99
+ analyticsData: {
100
+ trigger: 'backButton'
101
+ }
102
+ });
107
103
  if (!body) {
108
104
  return null;
109
105
  }
@@ -124,8 +120,7 @@ export const DrawerBase = ({
124
120
  width: width,
125
121
  enterFrom: enterFrom,
126
122
  label: label,
127
- titleId: titleId,
128
- shouldUnmountOnExit: shouldUnmountOnExit
123
+ titleId: titleId
129
124
  // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
130
125
  ,
131
126
  overrides: overrides,
@@ -136,23 +131,7 @@ export const DrawerBase = ({
136
131
  }, isOpen && fg('platform.design-system-team.inline-message-layering_wfp1p') ? /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
137
132
  isDisabled: false
138
133
  }, children, /*#__PURE__*/React.createElement(EscapeCloseManager, {
139
- createAnalyticsEvent: createAnalyticsEvent,
140
- handleClose: handleClose
134
+ onClose: handleClose
141
135
  })) : children));
142
136
  };
143
-
144
- /**
145
- * __Drawer__
146
- *
147
- * A drawer is a panel that slides in from the left side of the screen.
148
- *
149
- * - [Examples](https://atlassian.design/components/drawer/examples)
150
- * - [Code](https://atlassian.design/components/drawer/code)
151
- * - [Usage](https://atlassian.design/components/drawer/usage)
152
- */
153
- const Drawer = withAnalyticsContext({
154
- componentName: 'drawer',
155
- packageName,
156
- packageVersion
157
- })(withAnalyticsEvents()(DrawerBase));
158
137
  export default Drawer;
package/dist/esm/components/index.js CHANGED
@@ -1,47 +1,27 @@
1
1
  /* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
2
2
  import React, { useCallback, useEffect } from 'react';
3
3
  import { canUseDOM } from 'exenv';
4
- import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
4
+ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
5
5
  import { UNSAFE_LAYERING, useCloseOnEscapePress } from '@atlaskit/layering';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
7
  import Portal from '@atlaskit/portal';
8
8
  import Blanket from './blanket';
9
9
  import DrawerPrimitive from './primitives';
10
- var packageName = "@atlaskit/drawer";
11
- var packageVersion = "7.14.3";
12
- var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
13
- var createAndFireOnClick = function createAndFireOnClick(createAnalyticsEvent, trigger) {
14
- return createAndFireEventOnAtlaskit({
15
- action: 'dismissed',
16
- actionSubject: 'drawer',
17
- attributes: {
18
- componentName: 'drawer',
19
- packageName: packageName,
20
- packageVersion: packageVersion,
21
- trigger: trigger
22
- }
23
- })(createAnalyticsEvent);
24
- };
25
-
26
10
  // escape close manager for layering
27
11
  var EscapeCloseManager = function EscapeCloseManager(_ref) {
28
- var createAnalyticsEvent = _ref.createAnalyticsEvent,
29
- handleClose = _ref.handleClose;
30
- var onClose = React.useCallback(function (event) {
31
- if (handleClose) {
32
- var _analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, 'escKey');
33
- handleClose(event, _analyticsEvent);
34
- }
35
- }, [handleClose, createAnalyticsEvent]);
12
+ var onClose = _ref.onClose;
13
+ // wrap so that we can cast the event to a React.KeyboardEvent
14
+ var handleClose = useCallback(function (evt) {
15
+ onClose && onClose(evt);
16
+ }, [onClose]);
36
17
  useCloseOnEscapePress({
37
- onClose: onClose
18
+ onClose: handleClose
38
19
  });
39
- // only create a dummy component for using ths hook in class component
40
20
  return /*#__PURE__*/React.createElement("span", null);
41
21
  };
42
22
 
43
23
  /**
44
- * __Drawer base__
24
+ * __Drawer__
45
25
  *
46
26
  * A drawer is a panel that slides in from the left side of the screen.
47
27
  *
@@ -49,7 +29,7 @@ var EscapeCloseManager = function EscapeCloseManager(_ref) {
49
29
  * - [Code](https://atlassian.design/components/drawer/code)
50
30
  * - [Usage](https://atlassian.design/components/drawer/usage)
51
31
  */
52
- export var DrawerBase = function DrawerBase(_ref2) {
32
+ export var Drawer = function Drawer(_ref2) {
53
33
  var _ref2$width = _ref2.width,
54
34
  width = _ref2$width === void 0 ? 'narrow' : _ref2$width,
55
35
  isOpen = _ref2.isOpen,
@@ -60,14 +40,12 @@ export var DrawerBase = function DrawerBase(_ref2) {
60
40
  _ref2$autoFocusFirstE = _ref2.autoFocusFirstElem,
61
41
  autoFocusFirstElem = _ref2$autoFocusFirstE === void 0 ? true : _ref2$autoFocusFirstE,
62
42
  onKeyDown = _ref2.onKeyDown,
63
- createAnalyticsEvent = _ref2.createAnalyticsEvent,
64
43
  onClose = _ref2.onClose,
65
44
  testId = _ref2.testId,
66
45
  children = _ref2.children,
67
46
  icon = _ref2.icon,
68
47
  closeLabel = _ref2.closeLabel,
69
48
  scrollContentLabel = _ref2.scrollContentLabel,
70
- shouldUnmountOnExit = _ref2.shouldUnmountOnExit,
71
49
  onCloseComplete = _ref2.onCloseComplete,
72
50
  onOpenComplete = _ref2.onOpenComplete,
73
51
  overrides = _ref2.overrides,
@@ -77,37 +55,59 @@ export var DrawerBase = function DrawerBase(_ref2) {
77
55
  titleId = _ref2.titleId,
78
56
  enterFrom = _ref2.enterFrom;
79
57
  var body = canUseDOM ? document.querySelector('body') : undefined;
80
- var handleClose = useCallback(function (event, trigger) {
81
- var analyticsEvent = createAnalyticsEvent && createAndFireOnClick(createAnalyticsEvent, trigger);
82
- if (onClose) {
83
- onClose(event, analyticsEvent);
58
+ var handleClose = usePlatformLeafEventHandler({
59
+ fn: function fn(evt, analyticsEvent) {
60
+ return onClose && onClose(evt, analyticsEvent);
61
+ },
62
+ action: 'dismissed',
63
+ componentName: 'drawer',
64
+ packageName: "@atlaskit/drawer",
65
+ packageVersion: "9.0.0",
66
+ analyticsData: {
67
+ trigger: 'escKey'
84
68
  }
85
- }, [createAnalyticsEvent, onClose]);
86
- useEffect(function () {
87
- var handleKeyDown = function handleKeyDown(event) {
88
- if (!fg('platform.design-system-team.inline-message-layering_wfp1p')) {
89
- // when feature flag on, we will use the EscapeCloseManager instead
90
- if (event.key === 'Escape' && isOpen) {
91
- handleClose(event, 'escKey');
92
- }
93
- }
94
- if (onKeyDown) {
95
- onKeyDown(event);
69
+ });
70
+ var handleKeyDown = useCallback(function (evt) {
71
+ onKeyDown && onKeyDown(evt);
72
+ if (!fg('platform.design-system-team.inline-message-layering_wfp1p')) {
73
+ // when feature flag on, we will use the EscapeCloseManager instead
74
+ if (evt.key === 'Escape' && isOpen && onClose) {
75
+ handleClose(evt);
96
76
  }
97
- };
77
+ }
78
+ }, [handleClose, isOpen, onClose, onKeyDown]);
79
+ useEffect(function () {
98
80
  if (isOpen) {
99
81
  window.addEventListener('keydown', handleKeyDown);
100
82
  }
101
83
  return function () {
102
84
  window.removeEventListener('keydown', handleKeyDown);
103
85
  };
104
- }, [handleClose, isOpen, onKeyDown]);
105
- var handleBlanketClick = function handleBlanketClick(event) {
106
- handleClose(event, 'blanket');
107
- };
108
- var handleBackButtonClick = function handleBackButtonClick(event) {
109
- handleClose(event, 'backButton');
110
- };
86
+ }, [handleKeyDown, isOpen]);
87
+ var handleBlanketClick = usePlatformLeafEventHandler({
88
+ fn: function fn(evt, analyticsEvent) {
89
+ return onClose && onClose(evt, analyticsEvent);
90
+ },
91
+ action: 'dismissed',
92
+ componentName: 'drawer',
93
+ packageName: "@atlaskit/drawer",
94
+ packageVersion: "9.0.0",
95
+ analyticsData: {
96
+ trigger: 'blanket'
97
+ }
98
+ });
99
+ var handleBackButtonClick = usePlatformLeafEventHandler({
100
+ fn: function fn(evt, analyticsEvent) {
101
+ return onClose && onClose(evt, analyticsEvent);
102
+ },
103
+ action: 'dismissed',
104
+ componentName: 'drawer',
105
+ packageName: "@atlaskit/drawer",
106
+ packageVersion: "9.0.0",
107
+ analyticsData: {
108
+ trigger: 'backButton'
109
+ }
110
+ });
111
111
  if (!body) {
112
112
  return null;
113
113
  }
@@ -128,8 +128,7 @@ export var DrawerBase = function DrawerBase(_ref2) {
128
128
  width: width,
129
129
  enterFrom: enterFrom,
130
130
  label: label,
131
- titleId: titleId,
132
- shouldUnmountOnExit: shouldUnmountOnExit
131
+ titleId: titleId
133
132
  // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
134
133
  ,
135
134
  overrides: overrides,
@@ -140,23 +139,7 @@ export var DrawerBase = function DrawerBase(_ref2) {
140
139
  }, isOpen && fg('platform.design-system-team.inline-message-layering_wfp1p') ? /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
141
140
  isDisabled: false
142
141
  }, children, /*#__PURE__*/React.createElement(EscapeCloseManager, {
143
- createAnalyticsEvent: createAnalyticsEvent,
144
- handleClose: handleClose
142
+ onClose: handleClose
145
143
  })) : children));
146
144
  };
147
-
148
- /**
149
- * __Drawer__
150
- *
151
- * A drawer is a panel that slides in from the left side of the screen.
152
- *
153
- * - [Examples](https://atlassian.design/components/drawer/examples)
154
- * - [Code](https://atlassian.design/components/drawer/code)
155
- * - [Usage](https://atlassian.design/components/drawer/usage)
156
- */
157
- var Drawer = withAnalyticsContext({
158
- componentName: 'drawer',
159
- packageName: packageName,
160
- packageVersion: packageVersion
161
- })(withAnalyticsEvents()(DrawerBase));
162
145
  export default Drawer;
package/dist/types/components/index.d.ts CHANGED
@@ -1,15 +1,5 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import { type DrawerProps } from './types';
3
- /**
4
- * __Drawer base__
5
- *
6
- * A drawer is a panel that slides in from the left side of the screen.
7
- *
8
- * - [Examples](https://atlassian.design/components/drawer/examples)
9
- * - [Code](https://atlassian.design/components/drawer/code)
10
- * - [Usage](https://atlassian.design/components/drawer/usage)
11
- */
12
- export declare const DrawerBase: ({ width, isOpen, isFocusLockEnabled, shouldReturnFocus, autoFocusFirstElem, onKeyDown, createAnalyticsEvent, onClose, testId, children, icon, closeLabel, scrollContentLabel, shouldUnmountOnExit, onCloseComplete, onOpenComplete, overrides, zIndex, label, titleId, enterFrom, }: DrawerProps) => JSX.Element | null;
13
3
  /**
14
4
  * __Drawer__
15
5
  *
@@ -19,10 +9,5 @@ export declare const DrawerBase: ({ width, isOpen, isFocusLockEnabled, shouldRet
19
9
  * - [Code](https://atlassian.design/components/drawer/code)
20
10
  * - [Usage](https://atlassian.design/components/drawer/usage)
21
11
  */
22
- declare const Drawer: React.ForwardRefExoticComponent<Pick<Omit<import("./types").BaseProps & import("./types").FocusLockSettings & import("@atlaskit/analytics-next").WithAnalyticsEventsProps & import("./types").DrawerLabel & {
23
- onKeyDown?: ((event: React.SyntheticEvent<Element, Event>) => void) | undefined;
24
- onClose?: ((event: React.SyntheticEvent<HTMLElement, Event>, analyticsEvent: any) => void) | undefined;
25
- isOpen: boolean;
26
- zIndex?: number | "unset" | undefined;
27
- }, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "onKeyDown" | "key" | "onClose" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").BaseProps | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
12
+ export declare const Drawer: ({ width, isOpen, isFocusLockEnabled, shouldReturnFocus, autoFocusFirstElem, onKeyDown, onClose, testId, children, icon, closeLabel, scrollContentLabel, onCloseComplete, onOpenComplete, overrides, zIndex, label, titleId, enterFrom, }: DrawerProps) => JSX.Element | null;
28
13
  export default Drawer;
package/dist/types/components/types.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { type ComponentType, type ReactElement, type ReactNode, type RefObject, type SyntheticEvent } from 'react';
2
2
  import { type CSSObject } from '@emotion/react';
3
- import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
4
3
  import { type Direction } from '@atlaskit/motion';
5
4
  export type Widths = {
6
5
  extended: {
@@ -57,11 +56,6 @@ export interface BaseProps {
57
56
  * A callback function that will be called when the drawer has finished its close transition.
58
57
  */
59
58
  onCloseComplete?: (node: HTMLElement | null) => void;
60
- /**
61
- * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release.
62
- * Boolean that controls if drawer should be retained/discarded
63
- */
64
- shouldUnmountOnExit?: boolean;
65
59
  /**
66
60
  * Avoid overrides whenever possible. The `overrides` prop allows granular customisation of the drawer. Both the sidebar and content components can be overridden.
67
61
  */
@@ -129,7 +123,7 @@ export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings, Draw
129
123
  in: boolean;
130
124
  onClose: (event: SyntheticEvent<HTMLElement>) => void;
131
125
  }
132
- export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & DrawerLabel & {
126
+ export type DrawerProps = BaseProps & FocusLockSettings & DrawerLabel & {
133
127
  /**
134
128
  * Callback function called while the drawer is displayed and `keydown` event is triggered.
135
129
  */
@@ -137,7 +131,7 @@ export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsPro
137
131
  /**
138
132
  * Callback function called when the drawer is closed.
139
133
  */
140
- onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent: any) => void;
134
+ onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent?: any) => void;
141
135
  /**
142
136
  * Controls if the drawer is open or closed.
143
137
  */
package/dist/types-ts4.5/components/index.d.ts CHANGED
@@ -1,15 +1,5 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import { type DrawerProps } from './types';
3
- /**
4
- * __Drawer base__
5
- *
6
- * A drawer is a panel that slides in from the left side of the screen.
7
- *
8
- * - [Examples](https://atlassian.design/components/drawer/examples)
9
- * - [Code](https://atlassian.design/components/drawer/code)
10
- * - [Usage](https://atlassian.design/components/drawer/usage)
11
- */
12
- export declare const DrawerBase: ({ width, isOpen, isFocusLockEnabled, shouldReturnFocus, autoFocusFirstElem, onKeyDown, createAnalyticsEvent, onClose, testId, children, icon, closeLabel, scrollContentLabel, shouldUnmountOnExit, onCloseComplete, onOpenComplete, overrides, zIndex, label, titleId, enterFrom, }: DrawerProps) => JSX.Element | null;
13
3
  /**
14
4
  * __Drawer__
15
5
  *
@@ -19,10 +9,5 @@ export declare const DrawerBase: ({ width, isOpen, isFocusLockEnabled, shouldRet
19
9
  * - [Code](https://atlassian.design/components/drawer/code)
20
10
  * - [Usage](https://atlassian.design/components/drawer/usage)
21
11
  */
22
- declare const Drawer: React.ForwardRefExoticComponent<Pick<Omit<import("./types").BaseProps & import("./types").FocusLockSettings & import("@atlaskit/analytics-next").WithAnalyticsEventsProps & import("./types").DrawerLabel & {
23
- onKeyDown?: ((event: React.SyntheticEvent<Element, Event>) => void) | undefined;
24
- onClose?: ((event: React.SyntheticEvent<HTMLElement, Event>, analyticsEvent: any) => void) | undefined;
25
- isOpen: boolean;
26
- zIndex?: number | "unset" | undefined;
27
- }, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "onKeyDown" | "key" | "onClose" | "zIndex" | "isOpen" | "analyticsContext" | keyof import("./types").BaseProps | keyof import("./types").FocusLockSettings | keyof import("./types").DrawerLabel> & React.RefAttributes<any>>;
12
+ export declare const Drawer: ({ width, isOpen, isFocusLockEnabled, shouldReturnFocus, autoFocusFirstElem, onKeyDown, onClose, testId, children, icon, closeLabel, scrollContentLabel, onCloseComplete, onOpenComplete, overrides, zIndex, label, titleId, enterFrom, }: DrawerProps) => JSX.Element | null;
28
13
  export default Drawer;
package/dist/types-ts4.5/components/types.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import { type ComponentType, type ReactElement, type ReactNode, type RefObject, type SyntheticEvent } from 'react';
2
2
  import { type CSSObject } from '@emotion/react';
3
- import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
4
3
  import { type Direction } from '@atlaskit/motion';
5
4
  export type Widths = {
6
5
  extended: {
@@ -57,11 +56,6 @@ export interface BaseProps {
57
56
  * A callback function that will be called when the drawer has finished its close transition.
58
57
  */
59
58
  onCloseComplete?: (node: HTMLElement | null) => void;
60
- /**
61
- * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release.
62
- * Boolean that controls if drawer should be retained/discarded
63
- */
64
- shouldUnmountOnExit?: boolean;
65
59
  /**
66
60
  * Avoid overrides whenever possible. The `overrides` prop allows granular customisation of the drawer. Both the sidebar and content components can be overridden.
67
61
  */
@@ -129,7 +123,7 @@ export interface DrawerPrimitiveProps extends BaseProps, FocusLockSettings, Draw
129
123
  in: boolean;
130
124
  onClose: (event: SyntheticEvent<HTMLElement>) => void;
131
125
  }
132
- export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsProps & DrawerLabel & {
126
+ export type DrawerProps = BaseProps & FocusLockSettings & DrawerLabel & {
133
127
  /**
134
128
  * Callback function called while the drawer is displayed and `keydown` event is triggered.
135
129
  */
@@ -137,7 +131,7 @@ export type DrawerProps = BaseProps & FocusLockSettings & WithAnalyticsEventsPro
137
131
  /**
138
132
  * Callback function called when the drawer is closed.
139
133
  */
140
- onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent: any) => void;
134
+ onClose?: (event: SyntheticEvent<HTMLElement>, analyticsEvent?: any) => void;
141
135
  /**
142
136
  * Controls if the drawer is open or closed.
143
137
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/drawer",
3
- "version": "7.14.3",
3
+ "version": "9.0.0",
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/"
@@ -39,13 +39,13 @@
39
39
  "@atlaskit/analytics-next": "^10.1.0",
40
40
  "@atlaskit/blanket": "^13.3.0",
41
41
  "@atlaskit/button": "^20.1.0",
42
- "@atlaskit/icon": "^22.16.0",
42
+ "@atlaskit/icon": "^22.18.0",
43
43
  "@atlaskit/layering": "^0.4.0",
44
44
  "@atlaskit/motion": "^1.9.0",
45
45
  "@atlaskit/platform-feature-flags": "^0.3.0",
46
46
  "@atlaskit/portal": "^4.9.0",
47
47
  "@atlaskit/theme": "^13.0.0",
48
- "@atlaskit/tokens": "^1.59.0",
48
+ "@atlaskit/tokens": "^1.60.0",
49
49
  "@babel/runtime": "^7.0.0",
50
50
  "@emotion/react": "^11.7.1",
51
51
  "bind-event-listener": "^3.0.0",