@atlaskit/give-kudos 2.3.2 → 3.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 (12) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/ui/GiveKudosLauncher/main.compiled.css +4 -0
  3. package/dist/cjs/ui/GiveKudosLauncher/main.js +56 -92
  4. package/dist/es2019/ui/GiveKudosLauncher/main.compiled.css +4 -0
  5. package/dist/es2019/ui/GiveKudosLauncher/main.js +54 -94
  6. package/dist/esm/ui/GiveKudosLauncher/main.compiled.css +4 -0
  7. package/dist/esm/ui/GiveKudosLauncher/main.js +54 -94
  8. package/dist/types/ui/GiveKudosLauncher/index.d.ts +1 -1
  9. package/dist/types/ui/GiveKudosLauncher/main.d.ts +2 -2
  10. package/dist/types-ts4.5/ui/GiveKudosLauncher/index.d.ts +1 -1
  11. package/dist/types-ts4.5/ui/GiveKudosLauncher/main.d.ts +2 -2
  12. package/package.json +8 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlassian/give-kudos
2
2
 
3
+ ## 3.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#105389](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105389)
8
+ [`e7d05b3fb5162`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e7d05b3fb5162) -
9
+ Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
10
+ the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
11
+
12
+ Please note, in order to use this version, you will need to ensure that your bundler is configured
13
+ to handle `.css` imports correctly. Most bundlers come with built-in support for `.css` imports,
14
+ so you may not need to do anything. If you are using a different bundler, please refer to the
15
+ documentation for that bundler to understand how to handle `.css` imports.
16
+
3
17
  ## 2.3.2
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/ui/GiveKudosLauncher/main.compiled.css ADDED
@@ -0,0 +1,4 @@
1
+
2
+ ._19itglyw{border:none}._154ipxbi{top:var(--ds-space-200,1pc)}
3
+ ._1ltvpxbi{left:var(--ds-space-200,1pc)}
4
+ ._kqswstnw{position:absolute}
package/dist/cjs/ui/GiveKudosLauncher/main.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* main.tsx generated by @compiled/babel-plugin v0.35.0 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,15 +7,18 @@ Object.defineProperty(exports, "__esModule", {
6
7
  value: true
7
8
  });
8
9
  exports.default = void 0;
10
+ require("./main.compiled.css");
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var React = _react;
13
+ var _runtime = require("@compiled/react/runtime");
9
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
15
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
12
- var _react = require("react");
13
- var _react2 = require("@emotion/react");
14
17
  var _reactIntlNext = require("react-intl-next");
15
18
  var _analyticsNext = require("@atlaskit/analytics-next");
19
+ var _new = require("@atlaskit/button/new");
16
20
  var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
17
- var _drawer = _interopRequireDefault(require("@atlaskit/drawer"));
21
+ var _compiled = require("@atlaskit/drawer/compiled");
18
22
  var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/core/migration/arrow-left"));
19
23
  var _successCheckCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/success--check-circle"));
20
24
  var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
@@ -29,31 +33,11 @@ var _types = require("../../types");
29
33
  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); }
30
34
  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; }
31
35
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
32
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
33
- * @jsxRuntime classic
34
- * @jsx jsx
35
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
36
- var iframeStyles = (0, _react2.css)({
37
- border: 0
38
- });
39
- var sidebarDivStyles = (0, _react2.css)({
40
- position: 'absolute',
41
- margin: "var(--ds-space-200, 16px)".concat(" 0 0 ", "var(--ds-space-200, 16px)"),
42
- display: 'flex',
43
- alignItems: 'center',
44
- justifyContent: 'center'
45
- });
46
- var sidebarButtonStyles = (0, _react2.css)({
47
- padding: 0,
48
- width: '32px',
49
- height: '32px',
50
- display: 'flex',
51
- alignItems: 'center',
52
- background: 0,
53
- borderRadius: '50%',
54
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
55
- lineHeight: 1
56
- });
36
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
37
+ var styles = {
38
+ drawerCloseButtonContainer: "_kqswstnw _154ipxbi _1ltvpxbi",
39
+ iframe: "_19itglyw"
40
+ };
57
41
  var ANALYTICS_CHANNEL = 'atlas';
58
42
  var GiveKudosLauncher = function GiveKudosLauncher(props) {
59
43
  var _props$recipient;
@@ -109,18 +93,18 @@ var GiveKudosLauncher = function GiveKudosLauncher(props) {
109
93
  switch (flagEvent.eventType) {
110
94
  case _types.FlagEventType.KUDOS_CREATED:
111
95
  handleCreateOrFail({
112
- title: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.default.kudosCreatedFlag),
96
+ title: /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.default.kudosCreatedFlag),
113
97
  id: "kudosCreatedFlag-".concat(flagEvent.kudosUuid),
114
- description: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.default.kudosCreatedDescriptionFlag, {
98
+ description: /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.default.kudosCreatedDescriptionFlag, {
115
99
  values: {
116
100
  a: function a(s) {
117
- return (0, _react2.jsx)("a", {
101
+ return /*#__PURE__*/React.createElement("a", {
118
102
  href: "".concat(teamCentralBaseUrl, "/people/kudos/").concat(flagEvent.kudosUuid)
119
103
  }, s);
120
104
  }
121
105
  }
122
106
  })),
123
- icon: (0, _react2.jsx)(_successCheckCircle.default, {
107
+ icon: /*#__PURE__*/React.createElement(_successCheckCircle.default, {
124
108
  spacing: "spacious",
125
109
  label: intl.formatMessage(_messages.default.successIconLabel),
126
110
  color: "var(--ds-icon-success, ".concat(_colors.G300, ")")
@@ -129,17 +113,17 @@ var GiveKudosLauncher = function GiveKudosLauncher(props) {
129
113
  break;
130
114
  case _types.FlagEventType.KUDOS_FAILED:
131
115
  handleCreateOrFail({
132
- title: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.default.kudosCreationFailedFlag),
116
+ title: /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.default.kudosCreationFailedFlag),
133
117
  id: "jiraKudosCreationFailedFlag-".concat(flagEvent.kudosUuid),
134
- description: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.default.kudosCreationFailedDescriptionFlag)
118
+ description: /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.default.kudosCreationFailedDescriptionFlag)
135
119
  });
136
120
  break;
137
121
  case _types.FlagEventType.JIRA_KUDOS_CREATED:
138
122
  handleCreateOrFail({
139
- title: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.default.JiraKudosCreatedFlag),
123
+ title: /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.default.JiraKudosCreatedFlag),
140
124
  id: "kudosCreatedFlag-".concat(flagEvent.kudosUuid),
141
- description: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.default.JiraKudosCreatedDescriptionFlag),
142
- icon: (0, _react2.jsx)(_successCheckCircle.default, {
125
+ description: /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.default.JiraKudosCreatedDescriptionFlag),
126
+ icon: /*#__PURE__*/React.createElement(_successCheckCircle.default, {
143
127
  spacing: "spacious",
144
128
  label: intl.formatMessage(_messages.default.successIconLabel),
145
129
  color: "var(--ds-icon-success, ".concat(_colors.G300, ")")
@@ -155,12 +139,12 @@ var GiveKudosLauncher = function GiveKudosLauncher(props) {
155
139
  break;
156
140
  case _types.FlagEventType.JIRA_KUDOS_FAILED:
157
141
  handleCreateOrFail({
158
- title: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.default.JiraKudosCreationFailedFlag),
142
+ title: /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.default.JiraKudosCreationFailedFlag),
159
143
  id: "jiraKudosCreationFailedFlag-".concat(flagEvent.kudosUuid),
160
- description: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.default.JiraKudosCreationFailedDescriptionFlag, {
144
+ description: /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.default.JiraKudosCreationFailedDescriptionFlag, {
161
145
  values: {
162
146
  a: function a(s) {
163
- return (0, _react2.jsx)("a", {
147
+ return /*#__PURE__*/React.createElement("a", {
164
148
  href: flagEvent.jiraKudosFormUrl
165
149
  }, s);
166
150
  }
@@ -197,18 +181,18 @@ var GiveKudosLauncher = function GiveKudosLauncher(props) {
197
181
  closeDrawer();
198
182
  sendAnalytic('created', {});
199
183
  addFlag && addFlag({
200
- title: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.default.kudosCreatedFlag),
184
+ title: /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.default.kudosCreatedFlag),
201
185
  id: "kudosCreatedFlag-".concat(uuid),
202
- description: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.default.kudosCreatedDescriptionFlag, {
186
+ description: /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.default.kudosCreatedDescriptionFlag, {
203
187
  values: {
204
188
  a: function a(s) {
205
- return (0, _react2.jsx)("a", {
189
+ return /*#__PURE__*/React.createElement("a", {
206
190
  href: "".concat(teamCentralBaseUrl, "/people/kudos/").concat(uuid)
207
191
  }, s);
208
192
  }
209
193
  }
210
194
  })),
211
- icon: (0, _react2.jsx)(_successCheckCircle.default, {
195
+ icon: /*#__PURE__*/React.createElement(_successCheckCircle.default, {
212
196
  spacing: "spacious",
213
197
  label: intl.formatMessage(_messages.default.successIconLabel),
214
198
  color: "var(--ds-icon-success, ".concat(_colors.G300, ")")
@@ -264,82 +248,62 @@ var GiveKudosLauncher = function GiveKudosLauncher(props) {
264
248
  handleCloseDrawerClickedFuncRef.current = handleCloseDrawerClickedFunc;
265
249
  // eslint-disable-next-line react-hooks/exhaustive-deps
266
250
  }, [isDirty]);
267
- var renderIframe = function renderIframe() {
268
- return (
269
- // eslint-disable-next-line jsx-a11y/iframe-has-title
270
- (0, _react2.jsx)("iframe", {
271
- src: giveKudosUrl,
272
- ref: iframeEl,
273
- width: "100%",
274
- height: "100%",
275
- frameBorder: "0",
276
- allow: "camera;microphone",
277
- css: iframeStyles
278
- })
279
- );
280
- };
281
251
  var handleCloseDrawerClicked = function handleCloseDrawerClicked() {
282
252
  handleCloseDrawerClickedFuncRef.current();
283
253
  };
284
- var renderSidebar = function renderSidebar() {
285
- return (0, _react2.jsx)("div", {
286
- css: sidebarDivStyles
287
- }, (0, _react2.jsx)(_standardButton.default, {
288
- onClick: handleCloseDrawerClicked,
289
- css: sidebarButtonStyles
290
- }, (0, _react2.jsx)(_arrowLeft.default, {
291
- color: "currentColor",
292
- spacing: "spacious",
293
- label: intl.formatMessage(_messages.default.closeDrawerButtonLabel)
294
- })));
295
- };
254
+ var recipientParam = props.recipient ? "&type=".concat(props.recipient.type, "&recipientId=").concat(props.recipient.recipientId) : '';
255
+ var giveKudosUrl = "".concat(props.teamCentralBaseUrl, "/give-kudos?cloudId=").concat(props.cloudId).concat(recipientParam, "&unsavedMessage=").concat(intl.formatMessage(_messages.default.unsavedKudosWarning));
296
256
  var renderDrawer = (0, _react.useMemo)(function () {
297
257
  if (props.isOpen) {
298
258
  sendAnalytic('opened', {});
299
259
  }
300
- return (0, _react2.jsx)(_drawer.default, {
260
+ return /*#__PURE__*/React.createElement(_compiled.Drawer, {
301
261
  width: "full",
302
262
  isOpen: props.isOpen,
303
263
  zIndex: _constants.layers.modal(),
304
264
  onClose: handleCloseDrawerClicked
305
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
306
- ,
307
- overrides: {
308
- Content: {
309
- component: renderIframe
310
- },
311
- Sidebar: {
312
- component: renderSidebar
313
- }
314
- }
315
- });
265
+ }, /*#__PURE__*/React.createElement("div", {
266
+ className: (0, _runtime.ax)([styles.drawerCloseButtonContainer])
267
+ }, /*#__PURE__*/React.createElement(_new.IconButton, {
268
+ onClick: handleCloseDrawerClicked,
269
+ icon: _arrowLeft.default,
270
+ label: intl.formatMessage(_messages.default.closeDrawerButtonLabel),
271
+ shape: "circle",
272
+ appearance: "subtle"
273
+ })), /*#__PURE__*/React.createElement("iframe", {
274
+ src: giveKudosUrl,
275
+ ref: iframeEl,
276
+ width: "100%",
277
+ height: "100%",
278
+ frameBorder: "0",
279
+ allow: "camera;microphone",
280
+ className: (0, _runtime.ax)([styles.iframe])
281
+ }));
316
282
  // eslint-disable-next-line react-hooks/exhaustive-deps
317
283
  }, [(_props$recipient = props.recipient) === null || _props$recipient === void 0 ? void 0 : _props$recipient.recipientId, props.isOpen]);
318
- var recipientParam = props.recipient ? "&type=".concat(props.recipient.type, "&recipientId=").concat(props.recipient.recipientId) : '';
319
- var giveKudosUrl = "".concat(props.teamCentralBaseUrl, "/give-kudos?cloudId=").concat(props.cloudId).concat(recipientParam, "&unsavedMessage=").concat(intl.formatMessage(_messages.default.unsavedKudosWarning));
320
- return (0, _react2.jsx)(_portal.default, {
284
+ return /*#__PURE__*/React.createElement(_portal.default, {
321
285
  zIndex: _constants.layers.modal()
322
- }, (0, _react2.jsx)("div", {
286
+ }, /*#__PURE__*/React.createElement("div", {
323
287
  "data-testid": testId
324
- }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, isCloseConfirmModalOpen && (0, _react2.jsx)(_modalDialog.default, {
288
+ }, /*#__PURE__*/React.createElement(_modalDialog.ModalTransition, null, isCloseConfirmModalOpen && /*#__PURE__*/React.createElement(_modalDialog.default, {
325
289
  onClose: closeWarningModal,
326
290
  width: "small"
327
- }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.default.confirmCloseTitle))), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.default.unsavedKudosWarning)), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_standardButton.default, {
291
+ }, /*#__PURE__*/React.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/React.createElement(_modalDialog.ModalTitle, null, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.default.confirmCloseTitle))), /*#__PURE__*/React.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.default.unsavedKudosWarning)), /*#__PURE__*/React.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/React.createElement(_standardButton.default, {
328
292
  appearance: "subtle",
329
293
  onClick: closeWarningModal,
330
294
  autoFocus: true
331
- }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.default.unsavedKudosWarningCancelButton)), (0, _react2.jsx)(_standardButton.default, {
295
+ }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.default.unsavedKudosWarningCancelButton)), /*#__PURE__*/React.createElement(_standardButton.default, {
332
296
  appearance: "primary",
333
297
  onClick: function onClick() {
334
298
  sendCancelAnalytic();
335
299
  closeDrawer();
336
300
  }
337
- }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.default.unsavedKudosWarningCloseButton))))), renderDrawer));
301
+ }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.default.unsavedKudosWarningCloseButton))))), renderDrawer));
338
302
  };
339
303
  var ComposedGiveKudosLauncher = function ComposedGiveKudosLauncher(props) {
340
- return (0, _react2.jsx)(_intlMessagesProvider.IntlMessagesProvider, {
304
+ return /*#__PURE__*/React.createElement(_intlMessagesProvider.IntlMessagesProvider, {
341
305
  loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale,
342
306
  defaultMessages: _en.default
343
- }, (0, _react2.jsx)(GiveKudosLauncher, props));
307
+ }, /*#__PURE__*/React.createElement(GiveKudosLauncher, props));
344
308
  };
345
309
  var _default = exports.default = ComposedGiveKudosLauncher;
package/dist/es2019/ui/GiveKudosLauncher/main.compiled.css ADDED
@@ -0,0 +1,4 @@
1
+
2
+ ._19itglyw{border:none}._154ipxbi{top:var(--ds-space-200,1pc)}
3
+ ._1ltvpxbi{left:var(--ds-space-200,1pc)}
4
+ ._kqswstnw{position:absolute}
package/dist/es2019/ui/GiveKudosLauncher/main.js CHANGED
@@ -1,17 +1,14 @@
1
+ /* main.tsx generated by @compiled/babel-plugin v0.35.0 */
1
2
  import _extends from "@babel/runtime/helpers/extends";
2
- /**
3
- * @jsxRuntime classic
4
- * @jsx jsx
5
- */
6
-
3
+ import "./main.compiled.css";
4
+ import * as React from 'react';
5
+ import { ax, ix } from "@compiled/react/runtime";
7
6
  import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
8
-
9
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
10
- import { css, jsx } from '@emotion/react';
11
7
  import { FormattedMessage, useIntl } from 'react-intl-next';
12
8
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
9
+ import { IconButton } from '@atlaskit/button/new';
13
10
  import Button from '@atlaskit/button/standard-button';
14
- import Drawer from '@atlaskit/drawer';
11
+ import { Drawer } from '@atlaskit/drawer/compiled';
15
12
  import ArrowLeft from '@atlaskit/icon/core/migration/arrow-left';
16
13
  import SuccessIcon from '@atlaskit/icon/core/migration/success--check-circle';
17
14
  import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
@@ -23,27 +20,10 @@ import { fetchMessagesForLocale } from '../../common/utils/fetch-messages-for-lo
23
20
  import i18nEN from '../../i18n/en';
24
21
  import messages from '../../messages';
25
22
  import { FlagEventType, isFlagEventTypeValue } from '../../types';
26
- const iframeStyles = css({
27
- border: 0
28
- });
29
- const sidebarDivStyles = css({
30
- position: 'absolute',
31
- margin: `${"var(--ds-space-200, 16px)"} 0 0 ${"var(--ds-space-200, 16px)"}`,
32
- display: 'flex',
33
- alignItems: 'center',
34
- justifyContent: 'center'
35
- });
36
- const sidebarButtonStyles = css({
37
- padding: 0,
38
- width: '32px',
39
- height: '32px',
40
- display: 'flex',
41
- alignItems: 'center',
42
- background: 0,
43
- borderRadius: '50%',
44
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
45
- lineHeight: 1
46
- });
23
+ const styles = {
24
+ drawerCloseButtonContainer: "_kqswstnw _154ipxbi _1ltvpxbi",
25
+ iframe: "_19itglyw"
26
+ };
47
27
  const ANALYTICS_CHANNEL = 'atlas';
48
28
  const GiveKudosLauncher = props => {
49
29
  var _props$recipient;
@@ -97,16 +77,16 @@ const GiveKudosLauncher = props => {
97
77
  switch (flagEvent.eventType) {
98
78
  case FlagEventType.KUDOS_CREATED:
99
79
  handleCreateOrFail({
100
- title: jsx(FormattedMessage, messages.kudosCreatedFlag),
80
+ title: /*#__PURE__*/React.createElement(FormattedMessage, messages.kudosCreatedFlag),
101
81
  id: `kudosCreatedFlag-${flagEvent.kudosUuid}`,
102
- description: jsx(FormattedMessage, _extends({}, messages.kudosCreatedDescriptionFlag, {
82
+ description: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.kudosCreatedDescriptionFlag, {
103
83
  values: {
104
- a: s => jsx("a", {
84
+ a: s => /*#__PURE__*/React.createElement("a", {
105
85
  href: `${teamCentralBaseUrl}/people/kudos/${flagEvent.kudosUuid}`
106
86
  }, s)
107
87
  }
108
88
  })),
109
- icon: jsx(SuccessIcon, {
89
+ icon: /*#__PURE__*/React.createElement(SuccessIcon, {
110
90
  spacing: "spacious",
111
91
  label: intl.formatMessage(messages.successIconLabel),
112
92
  color: `var(--ds-icon-success, ${G300})`
@@ -115,17 +95,17 @@ const GiveKudosLauncher = props => {
115
95
  break;
116
96
  case FlagEventType.KUDOS_FAILED:
117
97
  handleCreateOrFail({
118
- title: jsx(FormattedMessage, messages.kudosCreationFailedFlag),
98
+ title: /*#__PURE__*/React.createElement(FormattedMessage, messages.kudosCreationFailedFlag),
119
99
  id: `jiraKudosCreationFailedFlag-${flagEvent.kudosUuid}`,
120
- description: jsx(FormattedMessage, messages.kudosCreationFailedDescriptionFlag)
100
+ description: /*#__PURE__*/React.createElement(FormattedMessage, messages.kudosCreationFailedDescriptionFlag)
121
101
  });
122
102
  break;
123
103
  case FlagEventType.JIRA_KUDOS_CREATED:
124
104
  handleCreateOrFail({
125
- title: jsx(FormattedMessage, messages.JiraKudosCreatedFlag),
105
+ title: /*#__PURE__*/React.createElement(FormattedMessage, messages.JiraKudosCreatedFlag),
126
106
  id: `kudosCreatedFlag-${flagEvent.kudosUuid}`,
127
- description: jsx(FormattedMessage, messages.JiraKudosCreatedDescriptionFlag),
128
- icon: jsx(SuccessIcon, {
107
+ description: /*#__PURE__*/React.createElement(FormattedMessage, messages.JiraKudosCreatedDescriptionFlag),
108
+ icon: /*#__PURE__*/React.createElement(SuccessIcon, {
129
109
  spacing: "spacious",
130
110
  label: intl.formatMessage(messages.successIconLabel),
131
111
  color: `var(--ds-icon-success, ${G300})`
@@ -141,11 +121,11 @@ const GiveKudosLauncher = props => {
141
121
  break;
142
122
  case FlagEventType.JIRA_KUDOS_FAILED:
143
123
  handleCreateOrFail({
144
- title: jsx(FormattedMessage, messages.JiraKudosCreationFailedFlag),
124
+ title: /*#__PURE__*/React.createElement(FormattedMessage, messages.JiraKudosCreationFailedFlag),
145
125
  id: `jiraKudosCreationFailedFlag-${flagEvent.kudosUuid}`,
146
- description: jsx(FormattedMessage, _extends({}, messages.JiraKudosCreationFailedDescriptionFlag, {
126
+ description: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.JiraKudosCreationFailedDescriptionFlag, {
147
127
  values: {
148
- a: s => jsx("a", {
128
+ a: s => /*#__PURE__*/React.createElement("a", {
149
129
  href: flagEvent.jiraKudosFormUrl
150
130
  }, s)
151
131
  }
@@ -181,16 +161,16 @@ const GiveKudosLauncher = props => {
181
161
  closeDrawer();
182
162
  sendAnalytic('created', {});
183
163
  addFlag && addFlag({
184
- title: jsx(FormattedMessage, messages.kudosCreatedFlag),
164
+ title: /*#__PURE__*/React.createElement(FormattedMessage, messages.kudosCreatedFlag),
185
165
  id: `kudosCreatedFlag-${uuid}`,
186
- description: jsx(FormattedMessage, _extends({}, messages.kudosCreatedDescriptionFlag, {
166
+ description: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.kudosCreatedDescriptionFlag, {
187
167
  values: {
188
- a: s => jsx("a", {
168
+ a: s => /*#__PURE__*/React.createElement("a", {
189
169
  href: `${teamCentralBaseUrl}/people/kudos/${uuid}`
190
170
  }, s)
191
171
  }
192
172
  })),
193
- icon: jsx(SuccessIcon, {
173
+ icon: /*#__PURE__*/React.createElement(SuccessIcon, {
194
174
  spacing: "spacious",
195
175
  label: intl.formatMessage(messages.successIconLabel),
196
176
  color: `var(--ds-icon-success, ${G300})`
@@ -246,82 +226,62 @@ const GiveKudosLauncher = props => {
246
226
  handleCloseDrawerClickedFuncRef.current = handleCloseDrawerClickedFunc;
247
227
  // eslint-disable-next-line react-hooks/exhaustive-deps
248
228
  }, [isDirty]);
249
- const renderIframe = () => {
250
- return (
251
- // eslint-disable-next-line jsx-a11y/iframe-has-title
252
- jsx("iframe", {
253
- src: giveKudosUrl,
254
- ref: iframeEl,
255
- width: "100%",
256
- height: "100%",
257
- frameBorder: "0",
258
- allow: "camera;microphone",
259
- css: iframeStyles
260
- })
261
- );
262
- };
263
229
  const handleCloseDrawerClicked = () => {
264
230
  handleCloseDrawerClickedFuncRef.current();
265
231
  };
266
- const renderSidebar = () => {
267
- return jsx("div", {
268
- css: sidebarDivStyles
269
- }, jsx(Button, {
270
- onClick: handleCloseDrawerClicked,
271
- css: sidebarButtonStyles
272
- }, jsx(ArrowLeft, {
273
- color: "currentColor",
274
- spacing: "spacious",
275
- label: intl.formatMessage(messages.closeDrawerButtonLabel)
276
- })));
277
- };
232
+ const recipientParam = props.recipient ? `&type=${props.recipient.type}&recipientId=${props.recipient.recipientId}` : '';
233
+ const giveKudosUrl = `${props.teamCentralBaseUrl}/give-kudos?cloudId=${props.cloudId}${recipientParam}&unsavedMessage=${intl.formatMessage(messages.unsavedKudosWarning)}`;
278
234
  const renderDrawer = useMemo(() => {
279
235
  if (props.isOpen) {
280
236
  sendAnalytic('opened', {});
281
237
  }
282
- return jsx(Drawer, {
238
+ return /*#__PURE__*/React.createElement(Drawer, {
283
239
  width: "full",
284
240
  isOpen: props.isOpen,
285
241
  zIndex: layers.modal(),
286
242
  onClose: handleCloseDrawerClicked
287
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
288
- ,
289
- overrides: {
290
- Content: {
291
- component: renderIframe
292
- },
293
- Sidebar: {
294
- component: renderSidebar
295
- }
296
- }
297
- });
243
+ }, /*#__PURE__*/React.createElement("div", {
244
+ className: ax([styles.drawerCloseButtonContainer])
245
+ }, /*#__PURE__*/React.createElement(IconButton, {
246
+ onClick: handleCloseDrawerClicked,
247
+ icon: ArrowLeft,
248
+ label: intl.formatMessage(messages.closeDrawerButtonLabel),
249
+ shape: "circle",
250
+ appearance: "subtle"
251
+ })), /*#__PURE__*/React.createElement("iframe", {
252
+ src: giveKudosUrl,
253
+ ref: iframeEl,
254
+ width: "100%",
255
+ height: "100%",
256
+ frameBorder: "0",
257
+ allow: "camera;microphone",
258
+ className: ax([styles.iframe])
259
+ }));
298
260
  // eslint-disable-next-line react-hooks/exhaustive-deps
299
261
  }, [(_props$recipient = props.recipient) === null || _props$recipient === void 0 ? void 0 : _props$recipient.recipientId, props.isOpen]);
300
- const recipientParam = props.recipient ? `&type=${props.recipient.type}&recipientId=${props.recipient.recipientId}` : '';
301
- const giveKudosUrl = `${props.teamCentralBaseUrl}/give-kudos?cloudId=${props.cloudId}${recipientParam}&unsavedMessage=${intl.formatMessage(messages.unsavedKudosWarning)}`;
302
- return jsx(Portal, {
262
+ return /*#__PURE__*/React.createElement(Portal, {
303
263
  zIndex: layers.modal()
304
- }, jsx("div", {
264
+ }, /*#__PURE__*/React.createElement("div", {
305
265
  "data-testid": testId
306
- }, jsx(ModalTransition, null, isCloseConfirmModalOpen && jsx(Modal, {
266
+ }, /*#__PURE__*/React.createElement(ModalTransition, null, isCloseConfirmModalOpen && /*#__PURE__*/React.createElement(Modal, {
307
267
  onClose: closeWarningModal,
308
268
  width: "small"
309
- }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(FormattedMessage, messages.confirmCloseTitle))), jsx(ModalBody, null, jsx(FormattedMessage, messages.unsavedKudosWarning)), jsx(ModalFooter, null, jsx(Button, {
269
+ }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.confirmCloseTitle))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.unsavedKudosWarning)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
310
270
  appearance: "subtle",
311
271
  onClick: closeWarningModal,
312
272
  autoFocus: true
313
- }, jsx(FormattedMessage, messages.unsavedKudosWarningCancelButton)), jsx(Button, {
273
+ }, /*#__PURE__*/React.createElement(FormattedMessage, messages.unsavedKudosWarningCancelButton)), /*#__PURE__*/React.createElement(Button, {
314
274
  appearance: "primary",
315
275
  onClick: () => {
316
276
  sendCancelAnalytic();
317
277
  closeDrawer();
318
278
  }
319
- }, jsx(FormattedMessage, messages.unsavedKudosWarningCloseButton))))), renderDrawer));
279
+ }, /*#__PURE__*/React.createElement(FormattedMessage, messages.unsavedKudosWarningCloseButton))))), renderDrawer));
320
280
  };
321
281
  const ComposedGiveKudosLauncher = props => {
322
- return jsx(IntlMessagesProvider, {
282
+ return /*#__PURE__*/React.createElement(IntlMessagesProvider, {
323
283
  loaderFn: fetchMessagesForLocale,
324
284
  defaultMessages: i18nEN
325
- }, jsx(GiveKudosLauncher, props));
285
+ }, /*#__PURE__*/React.createElement(GiveKudosLauncher, props));
326
286
  };
327
287
  export default ComposedGiveKudosLauncher;
package/dist/esm/ui/GiveKudosLauncher/main.compiled.css ADDED
@@ -0,0 +1,4 @@
1
+
2
+ ._19itglyw{border:none}._154ipxbi{top:var(--ds-space-200,1pc)}
3
+ ._1ltvpxbi{left:var(--ds-space-200,1pc)}
4
+ ._kqswstnw{position:absolute}
package/dist/esm/ui/GiveKudosLauncher/main.js CHANGED
@@ -1,21 +1,18 @@
1
+ /* main.tsx generated by @compiled/babel-plugin v0.35.0 */
1
2
  import _extends from "@babel/runtime/helpers/extends";
2
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
4
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
5
+ import "./main.compiled.css";
6
+ import * as React from 'react';
7
+ import { ax, ix } from "@compiled/react/runtime";
4
8
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
9
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
- /**
7
- * @jsxRuntime classic
8
- * @jsx jsx
9
- */
10
-
11
10
  import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
12
-
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
- import { css, jsx } from '@emotion/react';
15
11
  import { FormattedMessage, useIntl } from 'react-intl-next';
16
12
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
13
+ import { IconButton } from '@atlaskit/button/new';
17
14
  import Button from '@atlaskit/button/standard-button';
18
- import Drawer from '@atlaskit/drawer';
15
+ import { Drawer } from '@atlaskit/drawer/compiled';
19
16
  import ArrowLeft from '@atlaskit/icon/core/migration/arrow-left';
20
17
  import SuccessIcon from '@atlaskit/icon/core/migration/success--check-circle';
21
18
  import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
@@ -27,27 +24,10 @@ import { fetchMessagesForLocale } from '../../common/utils/fetch-messages-for-lo
27
24
  import i18nEN from '../../i18n/en';
28
25
  import messages from '../../messages';
29
26
  import { FlagEventType, isFlagEventTypeValue } from '../../types';
30
- var iframeStyles = css({
31
- border: 0
32
- });
33
- var sidebarDivStyles = css({
34
- position: 'absolute',
35
- margin: "var(--ds-space-200, 16px)".concat(" 0 0 ", "var(--ds-space-200, 16px)"),
36
- display: 'flex',
37
- alignItems: 'center',
38
- justifyContent: 'center'
39
- });
40
- var sidebarButtonStyles = css({
41
- padding: 0,
42
- width: '32px',
43
- height: '32px',
44
- display: 'flex',
45
- alignItems: 'center',
46
- background: 0,
47
- borderRadius: '50%',
48
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
49
- lineHeight: 1
50
- });
27
+ var styles = {
28
+ drawerCloseButtonContainer: "_kqswstnw _154ipxbi _1ltvpxbi",
29
+ iframe: "_19itglyw"
30
+ };
51
31
  var ANALYTICS_CHANNEL = 'atlas';
52
32
  var GiveKudosLauncher = function GiveKudosLauncher(props) {
53
33
  var _props$recipient;
@@ -103,18 +83,18 @@ var GiveKudosLauncher = function GiveKudosLauncher(props) {
103
83
  switch (flagEvent.eventType) {
104
84
  case FlagEventType.KUDOS_CREATED:
105
85
  handleCreateOrFail({
106
- title: jsx(FormattedMessage, messages.kudosCreatedFlag),
86
+ title: /*#__PURE__*/React.createElement(FormattedMessage, messages.kudosCreatedFlag),
107
87
  id: "kudosCreatedFlag-".concat(flagEvent.kudosUuid),
108
- description: jsx(FormattedMessage, _extends({}, messages.kudosCreatedDescriptionFlag, {
88
+ description: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.kudosCreatedDescriptionFlag, {
109
89
  values: {
110
90
  a: function a(s) {
111
- return jsx("a", {
91
+ return /*#__PURE__*/React.createElement("a", {
112
92
  href: "".concat(teamCentralBaseUrl, "/people/kudos/").concat(flagEvent.kudosUuid)
113
93
  }, s);
114
94
  }
115
95
  }
116
96
  })),
117
- icon: jsx(SuccessIcon, {
97
+ icon: /*#__PURE__*/React.createElement(SuccessIcon, {
118
98
  spacing: "spacious",
119
99
  label: intl.formatMessage(messages.successIconLabel),
120
100
  color: "var(--ds-icon-success, ".concat(G300, ")")
@@ -123,17 +103,17 @@ var GiveKudosLauncher = function GiveKudosLauncher(props) {
123
103
  break;
124
104
  case FlagEventType.KUDOS_FAILED:
125
105
  handleCreateOrFail({
126
- title: jsx(FormattedMessage, messages.kudosCreationFailedFlag),
106
+ title: /*#__PURE__*/React.createElement(FormattedMessage, messages.kudosCreationFailedFlag),
127
107
  id: "jiraKudosCreationFailedFlag-".concat(flagEvent.kudosUuid),
128
- description: jsx(FormattedMessage, messages.kudosCreationFailedDescriptionFlag)
108
+ description: /*#__PURE__*/React.createElement(FormattedMessage, messages.kudosCreationFailedDescriptionFlag)
129
109
  });
130
110
  break;
131
111
  case FlagEventType.JIRA_KUDOS_CREATED:
132
112
  handleCreateOrFail({
133
- title: jsx(FormattedMessage, messages.JiraKudosCreatedFlag),
113
+ title: /*#__PURE__*/React.createElement(FormattedMessage, messages.JiraKudosCreatedFlag),
134
114
  id: "kudosCreatedFlag-".concat(flagEvent.kudosUuid),
135
- description: jsx(FormattedMessage, messages.JiraKudosCreatedDescriptionFlag),
136
- icon: jsx(SuccessIcon, {
115
+ description: /*#__PURE__*/React.createElement(FormattedMessage, messages.JiraKudosCreatedDescriptionFlag),
116
+ icon: /*#__PURE__*/React.createElement(SuccessIcon, {
137
117
  spacing: "spacious",
138
118
  label: intl.formatMessage(messages.successIconLabel),
139
119
  color: "var(--ds-icon-success, ".concat(G300, ")")
@@ -149,12 +129,12 @@ var GiveKudosLauncher = function GiveKudosLauncher(props) {
149
129
  break;
150
130
  case FlagEventType.JIRA_KUDOS_FAILED:
151
131
  handleCreateOrFail({
152
- title: jsx(FormattedMessage, messages.JiraKudosCreationFailedFlag),
132
+ title: /*#__PURE__*/React.createElement(FormattedMessage, messages.JiraKudosCreationFailedFlag),
153
133
  id: "jiraKudosCreationFailedFlag-".concat(flagEvent.kudosUuid),
154
- description: jsx(FormattedMessage, _extends({}, messages.JiraKudosCreationFailedDescriptionFlag, {
134
+ description: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.JiraKudosCreationFailedDescriptionFlag, {
155
135
  values: {
156
136
  a: function a(s) {
157
- return jsx("a", {
137
+ return /*#__PURE__*/React.createElement("a", {
158
138
  href: flagEvent.jiraKudosFormUrl
159
139
  }, s);
160
140
  }
@@ -191,18 +171,18 @@ var GiveKudosLauncher = function GiveKudosLauncher(props) {
191
171
  closeDrawer();
192
172
  sendAnalytic('created', {});
193
173
  addFlag && addFlag({
194
- title: jsx(FormattedMessage, messages.kudosCreatedFlag),
174
+ title: /*#__PURE__*/React.createElement(FormattedMessage, messages.kudosCreatedFlag),
195
175
  id: "kudosCreatedFlag-".concat(uuid),
196
- description: jsx(FormattedMessage, _extends({}, messages.kudosCreatedDescriptionFlag, {
176
+ description: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.kudosCreatedDescriptionFlag, {
197
177
  values: {
198
178
  a: function a(s) {
199
- return jsx("a", {
179
+ return /*#__PURE__*/React.createElement("a", {
200
180
  href: "".concat(teamCentralBaseUrl, "/people/kudos/").concat(uuid)
201
181
  }, s);
202
182
  }
203
183
  }
204
184
  })),
205
- icon: jsx(SuccessIcon, {
185
+ icon: /*#__PURE__*/React.createElement(SuccessIcon, {
206
186
  spacing: "spacious",
207
187
  label: intl.formatMessage(messages.successIconLabel),
208
188
  color: "var(--ds-icon-success, ".concat(G300, ")")
@@ -258,82 +238,62 @@ var GiveKudosLauncher = function GiveKudosLauncher(props) {
258
238
  handleCloseDrawerClickedFuncRef.current = handleCloseDrawerClickedFunc;
259
239
  // eslint-disable-next-line react-hooks/exhaustive-deps
260
240
  }, [isDirty]);
261
- var renderIframe = function renderIframe() {
262
- return (
263
- // eslint-disable-next-line jsx-a11y/iframe-has-title
264
- jsx("iframe", {
265
- src: giveKudosUrl,
266
- ref: iframeEl,
267
- width: "100%",
268
- height: "100%",
269
- frameBorder: "0",
270
- allow: "camera;microphone",
271
- css: iframeStyles
272
- })
273
- );
274
- };
275
241
  var handleCloseDrawerClicked = function handleCloseDrawerClicked() {
276
242
  handleCloseDrawerClickedFuncRef.current();
277
243
  };
278
- var renderSidebar = function renderSidebar() {
279
- return jsx("div", {
280
- css: sidebarDivStyles
281
- }, jsx(Button, {
282
- onClick: handleCloseDrawerClicked,
283
- css: sidebarButtonStyles
284
- }, jsx(ArrowLeft, {
285
- color: "currentColor",
286
- spacing: "spacious",
287
- label: intl.formatMessage(messages.closeDrawerButtonLabel)
288
- })));
289
- };
244
+ var recipientParam = props.recipient ? "&type=".concat(props.recipient.type, "&recipientId=").concat(props.recipient.recipientId) : '';
245
+ var giveKudosUrl = "".concat(props.teamCentralBaseUrl, "/give-kudos?cloudId=").concat(props.cloudId).concat(recipientParam, "&unsavedMessage=").concat(intl.formatMessage(messages.unsavedKudosWarning));
290
246
  var renderDrawer = useMemo(function () {
291
247
  if (props.isOpen) {
292
248
  sendAnalytic('opened', {});
293
249
  }
294
- return jsx(Drawer, {
250
+ return /*#__PURE__*/React.createElement(Drawer, {
295
251
  width: "full",
296
252
  isOpen: props.isOpen,
297
253
  zIndex: layers.modal(),
298
254
  onClose: handleCloseDrawerClicked
299
- // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
300
- ,
301
- overrides: {
302
- Content: {
303
- component: renderIframe
304
- },
305
- Sidebar: {
306
- component: renderSidebar
307
- }
308
- }
309
- });
255
+ }, /*#__PURE__*/React.createElement("div", {
256
+ className: ax([styles.drawerCloseButtonContainer])
257
+ }, /*#__PURE__*/React.createElement(IconButton, {
258
+ onClick: handleCloseDrawerClicked,
259
+ icon: ArrowLeft,
260
+ label: intl.formatMessage(messages.closeDrawerButtonLabel),
261
+ shape: "circle",
262
+ appearance: "subtle"
263
+ })), /*#__PURE__*/React.createElement("iframe", {
264
+ src: giveKudosUrl,
265
+ ref: iframeEl,
266
+ width: "100%",
267
+ height: "100%",
268
+ frameBorder: "0",
269
+ allow: "camera;microphone",
270
+ className: ax([styles.iframe])
271
+ }));
310
272
  // eslint-disable-next-line react-hooks/exhaustive-deps
311
273
  }, [(_props$recipient = props.recipient) === null || _props$recipient === void 0 ? void 0 : _props$recipient.recipientId, props.isOpen]);
312
- var recipientParam = props.recipient ? "&type=".concat(props.recipient.type, "&recipientId=").concat(props.recipient.recipientId) : '';
313
- var giveKudosUrl = "".concat(props.teamCentralBaseUrl, "/give-kudos?cloudId=").concat(props.cloudId).concat(recipientParam, "&unsavedMessage=").concat(intl.formatMessage(messages.unsavedKudosWarning));
314
- return jsx(Portal, {
274
+ return /*#__PURE__*/React.createElement(Portal, {
315
275
  zIndex: layers.modal()
316
- }, jsx("div", {
276
+ }, /*#__PURE__*/React.createElement("div", {
317
277
  "data-testid": testId
318
- }, jsx(ModalTransition, null, isCloseConfirmModalOpen && jsx(Modal, {
278
+ }, /*#__PURE__*/React.createElement(ModalTransition, null, isCloseConfirmModalOpen && /*#__PURE__*/React.createElement(Modal, {
319
279
  onClose: closeWarningModal,
320
280
  width: "small"
321
- }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(FormattedMessage, messages.confirmCloseTitle))), jsx(ModalBody, null, jsx(FormattedMessage, messages.unsavedKudosWarning)), jsx(ModalFooter, null, jsx(Button, {
281
+ }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.confirmCloseTitle))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.unsavedKudosWarning)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
322
282
  appearance: "subtle",
323
283
  onClick: closeWarningModal,
324
284
  autoFocus: true
325
- }, jsx(FormattedMessage, messages.unsavedKudosWarningCancelButton)), jsx(Button, {
285
+ }, /*#__PURE__*/React.createElement(FormattedMessage, messages.unsavedKudosWarningCancelButton)), /*#__PURE__*/React.createElement(Button, {
326
286
  appearance: "primary",
327
287
  onClick: function onClick() {
328
288
  sendCancelAnalytic();
329
289
  closeDrawer();
330
290
  }
331
- }, jsx(FormattedMessage, messages.unsavedKudosWarningCloseButton))))), renderDrawer));
291
+ }, /*#__PURE__*/React.createElement(FormattedMessage, messages.unsavedKudosWarningCloseButton))))), renderDrawer));
332
292
  };
333
293
  var ComposedGiveKudosLauncher = function ComposedGiveKudosLauncher(props) {
334
- return jsx(IntlMessagesProvider, {
294
+ return /*#__PURE__*/React.createElement(IntlMessagesProvider, {
335
295
  loaderFn: fetchMessagesForLocale,
336
296
  defaultMessages: i18nEN
337
- }, jsx(GiveKudosLauncher, props));
297
+ }, /*#__PURE__*/React.createElement(GiveKudosLauncher, props));
338
298
  };
339
299
  export default ComposedGiveKudosLauncher;
package/dist/types/ui/GiveKudosLauncher/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  /// <reference types="react" />
2
- export declare const GiveKudosLauncherLazy: import("react").LazyExoticComponent<(props: import("../..").GiveKudosDrawerProps) => import("@emotion/react").jsx.JSX.Element>;
2
+ export declare const GiveKudosLauncherLazy: import("react").LazyExoticComponent<(props: import("../..").GiveKudosDrawerProps) => JSX.Element>;
package/dist/types/ui/GiveKudosLauncher/main.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * @jsxRuntime classic
3
3
  * @jsx jsx
4
4
  */
5
- import { jsx } from '@emotion/react';
5
+ /// <reference types="react" />
6
6
  import { type GiveKudosDrawerProps } from '../../types';
7
- declare const ComposedGiveKudosLauncher: (props: GiveKudosDrawerProps) => jsx.JSX.Element;
7
+ declare const ComposedGiveKudosLauncher: (props: GiveKudosDrawerProps) => JSX.Element;
8
8
  export default ComposedGiveKudosLauncher;
package/dist/types-ts4.5/ui/GiveKudosLauncher/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  /// <reference types="react" />
2
- export declare const GiveKudosLauncherLazy: import("react").LazyExoticComponent<(props: import("../..").GiveKudosDrawerProps) => import("@emotion/react").jsx.JSX.Element>;
2
+ export declare const GiveKudosLauncherLazy: import("react").LazyExoticComponent<(props: import("../..").GiveKudosDrawerProps) => JSX.Element>;
package/dist/types-ts4.5/ui/GiveKudosLauncher/main.d.ts CHANGED
@@ -1,8 +1,8 @@
1
+ /// <reference types="react" />
1
2
  /**
2
3
  * @jsxRuntime classic
3
4
  * @jsx jsx
4
5
  */
5
- import { jsx } from '@emotion/react';
6
6
  import { type GiveKudosDrawerProps } from '../../types';
7
- declare const ComposedGiveKudosLauncher: (props: GiveKudosDrawerProps) => jsx.JSX.Element;
7
+ declare const ComposedGiveKudosLauncher: (props: GiveKudosDrawerProps) => JSX.Element;
8
8
  export default ComposedGiveKudosLauncher;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/give-kudos",
3
- "version": "2.3.2",
3
+ "version": "3.0.0",
4
4
  "description": "Give Kudos experience ",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -28,7 +28,9 @@
28
28
  ]
29
29
  }
30
30
  },
31
- "sideEffects": false,
31
+ "sideEffects": [
32
+ "**/*.compiled.css"
33
+ ],
32
34
  "atlaskit:src": "src/index.ts",
33
35
  "af:exports": {
34
36
  ".": "./src/index.ts"
@@ -41,15 +43,15 @@
41
43
  "dependencies": {
42
44
  "@atlaskit/analytics-next": "^10.2.0",
43
45
  "@atlaskit/button": "^20.3.0",
46
+ "@atlaskit/css": "^0.7.4",
44
47
  "@atlaskit/drawer": "^9.3.0",
45
- "@atlaskit/icon": "^23.3.0",
48
+ "@atlaskit/icon": "^23.4.0",
46
49
  "@atlaskit/intl-messages-provider": "^1.0.2",
47
50
  "@atlaskit/modal-dialog": "^12.19.0",
48
51
  "@atlaskit/portal": "^4.10.0",
49
52
  "@atlaskit/theme": "^14.0.0",
50
- "@atlaskit/tokens": "^3.0.0",
53
+ "@atlaskit/tokens": "^3.2.0",
51
54
  "@babel/runtime": "^7.0.0",
52
- "@emotion/react": "^11.7.1",
53
55
  "react-intl-next": "npm:react-intl@^5.18.1"
54
56
  },
55
57
  "peerDependencies": {
@@ -92,7 +94,7 @@
92
94
  "no-deprecated-imports"
93
95
  ],
94
96
  "styling": [
95
- "emotion",
97
+ "compiled",
96
98
  "static"
97
99
  ],
98
100
  "imports": [