@atlaskit/emoji 70.10.1 → 70.10.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 (14) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/components/common/EmojiDeletePreview.compiled.css +22 -1
  3. package/dist/cjs/components/common/EmojiDeletePreview.js +48 -0
  4. package/dist/cjs/components/picker/EmojiPickerComponent.js +25 -13
  5. package/dist/cjs/util/analytics/analytics.js +1 -1
  6. package/dist/es2019/components/common/EmojiDeletePreview.compiled.css +22 -1
  7. package/dist/es2019/components/common/EmojiDeletePreview.js +49 -1
  8. package/dist/es2019/components/picker/EmojiPickerComponent.js +25 -13
  9. package/dist/es2019/util/analytics/analytics.js +1 -1
  10. package/dist/esm/components/common/EmojiDeletePreview.compiled.css +22 -1
  11. package/dist/esm/components/common/EmojiDeletePreview.js +49 -1
  12. package/dist/esm/components/picker/EmojiPickerComponent.js +25 -13
  13. package/dist/esm/util/analytics/analytics.js +1 -1
  14. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/emoji
2
2
 
3
+ ## 70.10.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`0ad23a9827f5d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0ad23a9827f5d) -
8
+ Updated the delete emoji screen to match the upload emoji screen
9
+
3
10
  ## 70.10.1
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/components/common/EmojiDeletePreview.compiled.css CHANGED
@@ -1,18 +1,39 @@
1
1
  ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
+ ._1sc1wadc span{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
+ ._2rko1tm3{border-radius:var(--ds-radius-xxlarge,1pc)}
4
+ ._zulp1b66{gap:var(--ds-space-050,4px)}
5
+ ._zulpu2gc{gap:var(--ds-space-100,8px)}
6
+ ._zulputpp{gap:var(--ds-space-150,9pt)}
7
+ ._16jlkb7n{flex-grow:1}
8
+ ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
2
9
  ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
3
10
  ._19l3zwfg img{max-height:2pc}
11
+ ._19pkutpp{margin-top:var(--ds-space-150,9pt)}
12
+ ._1bah1h6o{justify-content:center}
4
13
  ._1bah1yb4{justify-content:space-between}
5
14
  ._1bahesu3{justify-content:flex-end}
6
15
  ._1e0c1txw{display:flex}
16
+ ._1o9zkb7n{flex-shrink:1}
7
17
  ._1qz31b66 .emoji-submit-delete{margin-right:var(--ds-space-050,4px)}
18
+ ._1tke1sa4{min-height:390px}
8
19
  ._1txfwu06 .emoji-submit-delete{font-weight:var(--ds-font-weight-bold,653)}
9
20
  ._2lx21bp4{flex-direction:column}
10
21
  ._4cvr1h6o{align-items:center}
22
+ ._4cvr1y6m{align-items:flex-start}
11
23
  ._4t3i1ylp{height:40px}
12
24
  ._4t3i53f4{height:75pt}
13
25
  ._4t3ivbgk{height:4pc}
26
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
27
+ ._bna7t9kd img{height:72px}
14
28
  ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
29
+ ._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
30
+ ._i0dl1wug{flex-basis:auto}
15
31
  ._m73io7ol .emoji-submit-delete{width:84px}
32
+ ._mezjt9kd img{width:72px}
16
33
  ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
34
+ ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
17
35
  ._rtyst9kd img{max-width:72px}
18
- ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
36
+ ._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
37
+ ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
38
+ ._vchhusvi{box-sizing:border-box}
39
+ ._y3gn1e5h{text-align:left}
package/dist/cjs/components/common/EmojiDeletePreview.js CHANGED
@@ -23,6 +23,7 @@ var _new = _interopRequireDefault(require("@atlaskit/button/new"));
23
23
  var _heading = _interopRequireDefault(require("@atlaskit/heading"));
24
24
  var _compiled = require("@atlaskit/primitives/compiled");
25
25
  var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
26
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
26
27
  var _i18n = require("../i18n");
27
28
  var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
28
29
  var _EmojiErrorMessage = _interopRequireWildcard(require("./EmojiErrorMessage"));
@@ -35,6 +36,10 @@ var deleteFooter = null;
35
36
  var deletePreview = null;
36
37
  var deleteText = null;
37
38
  var previewButtonGroup = null;
39
+ var deletePreviewNew = null;
40
+ var deleteTextSection = null;
41
+ var emojiPreviewLargeBox = null;
42
+ var deleteButtonGroup = null;
38
43
  var emojiDeletePreviewTestId = exports.emojiDeletePreviewTestId = 'emoji-delete-preview';
39
44
  var deleteEmojiLabelId = 'fabric.emoji.delete.label.id';
40
45
  var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
@@ -92,6 +97,49 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
92
97
  loading = _this$state.loading,
93
98
  error = _this$state.error;
94
99
  var formatMessage = intl.formatMessage;
100
+ if ((0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
101
+ return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
102
+ noFocusGuards: true
103
+ }, /*#__PURE__*/React.createElement("div", {
104
+ "data-testid": emojiDeletePreviewTestId,
105
+ className: (0, _runtime.ax)(["_zulputpp _1e0c1txw _2lx21bp4 _1tke1sa4 _ca0qutpp _u5f3pxbi _n3tdutpp _19bvpxbi _vchhusvi"])
106
+ }, /*#__PURE__*/React.createElement("div", {
107
+ className: (0, _runtime.ax)(["_zulp1b66 _1e0c1txw _2lx21bp4 _4cvr1y6m _y3gn1e5h"])
108
+ }, /*#__PURE__*/React.createElement(_compiled.Box, {
109
+ paddingBlockEnd: "space.100"
110
+ }, /*#__PURE__*/React.createElement(_heading.default, {
111
+ size: "small"
112
+ }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.deleteEmojiTitle))), /*#__PURE__*/React.createElement(_compiled.Text, {
113
+ color: "color.text.subtle",
114
+ size: "small"
115
+ }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
116
+ values: {
117
+ emojiShortName: emoji.shortName
118
+ }
119
+ })))), /*#__PURE__*/React.createElement("div", {
120
+ className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _2rko1tm3 _1e0c1txw _4cvr1h6o _1bah1h6o _bfhk1gly _1sc1wadc _mezjt9kd _bna7t9kd"])
121
+ }, /*#__PURE__*/React.createElement(_CachingEmoji.default, {
122
+ emoji: emoji
123
+ })), /*#__PURE__*/React.createElement("div", {
124
+ className: (0, _runtime.ax)(["_zulpu2gc _1e0c1txw _4cvr1h6o _1bahesu3 _19pkutpp"])
125
+ }, error && !loading ? /*#__PURE__*/React.createElement(_EmojiErrorMessage.default, {
126
+ message: formatMessage(_i18n.messages.deleteEmojiFailed),
127
+ errorStyle: "delete",
128
+ tooltip: true
129
+ }) : null, /*#__PURE__*/React.createElement(_visuallyHidden.default, {
130
+ id: deleteEmojiLabelId
131
+ }, formatMessage(_i18n.messages.deleteEmojiLabel)), /*#__PURE__*/React.createElement(_new.default, {
132
+ appearance: "subtle",
133
+ onClick: this.onCancel
134
+ }, /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.cancelLabel)), /*#__PURE__*/React.createElement(_RetryableButton.default, {
135
+ label: formatMessage(_i18n.messages.deleteEmojiLabel),
136
+ onSubmit: this.onSubmit,
137
+ appearance: "danger",
138
+ loading: loading,
139
+ error: error,
140
+ ariaLabelledBy: "".concat(_EmojiErrorMessage.emojiErrorScreenreaderTestId, " ").concat(deleteEmojiLabelId)
141
+ }))));
142
+ }
95
143
  return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
96
144
  noFocusGuards: true
97
145
  }, /*#__PURE__*/React.createElement("div", {
package/dist/cjs/components/picker/EmojiPickerComponent.js CHANGED
@@ -35,6 +35,7 @@ var _RecordSelectionDefault = require("../common/RecordSelectionDefault");
35
35
  var _CategorySelector = _interopRequireDefault(require("./CategorySelector"));
36
36
  var _EmojiPickerFooter = _interopRequireDefault(require("./EmojiPickerFooter"));
37
37
  var _EmojiUploadPicker = _interopRequireDefault(require("../common/EmojiUploadPicker"));
38
+ var _EmojiDeletePreview = _interopRequireDefault(require("../common/EmojiDeletePreview"));
38
39
  var _EmojiPickerList = require("./EmojiPickerList");
39
40
  var _analytics = require("../../util/analytics");
40
41
  var _useEmoji2 = require("../../hooks/useEmoji");
@@ -171,14 +172,14 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
171
172
  if (isProgrammaticScroll.current && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
172
173
  return;
173
174
  }
174
- // Ignore scroll-driven category changes while the upload screen is open
175
- if (uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
175
+ // Ignore scroll-driven category changes while the upload or delete screen is open
176
+ if ((uploading || emojiToDelete) && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
176
177
  return;
177
178
  }
178
179
  if (activeCategory !== category) {
179
180
  setActiveCategory(category);
180
181
  }
181
- }, [activeCategory, uploading]);
182
+ }, [activeCategory, uploading, emojiToDelete]);
182
183
  var calculateElapsedTime = function calculateElapsedTime() {
183
184
  return Date.now() - openTime.current;
184
185
  };
@@ -334,10 +335,15 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
334
335
  return;
335
336
  }
336
337
 
337
- // If the upload screen is open, close it when a category is selected
338
- if (uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
339
- setUploading(false);
340
- setUploadErrorMessage(undefined);
338
+ // If the upload or delete screen is open, close it when a category is selected
339
+ if ((0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
340
+ if (uploading) {
341
+ setUploading(false);
342
+ setUploadErrorMessage(undefined);
343
+ }
344
+ if (emojiToDelete) {
345
+ setEmojiToDelete(undefined);
346
+ }
341
347
  }
342
348
  emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
343
349
  if (!disableCategories) {
@@ -368,7 +374,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
368
374
  }));
369
375
  }
370
376
  });
371
- }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading]);
377
+ }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading, emojiToDelete]);
372
378
  var recordUsageOnSelection = (0, _react.useMemo)(function () {
373
379
  return (0, _RecordSelectionDefault.createRecordSelectionDefault)(emojiProvider, onSelectWrapper, function (analytic) {
374
380
  return fireAnalytics(analytic(_types.SearchSourceTypes.PICKER));
@@ -630,7 +636,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
630
636
  onKeyDown: suppressKeyPress,
631
637
  className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
632
638
  }, /*#__PURE__*/React.createElement(_CategorySelector.default, {
633
- activeCategoryId: uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? null : activeCategory,
639
+ activeCategoryId: (uploading || emojiToDelete) && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? null : activeCategory,
634
640
  dynamicCategories: dynamicCategories,
635
641
  disableCategories: disableCategories,
636
642
  onCategorySelected: onCategorySelected
@@ -663,7 +669,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
663
669
  onOpenUpload: onOpenUpload,
664
670
  size: size,
665
671
  activeCategoryId: activeCategory
666
- }), showPreview && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
672
+ }), showPreview && !(emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
667
673
  selectedEmoji: selectedEmoji,
668
674
  uploadEnabled: isUploadSupported && !uploading,
669
675
  onOpenUpload: onOpenUpload
@@ -678,13 +684,13 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
678
684
  onKeyPress: suppressKeyPress,
679
685
  onKeyUp: suppressKeyPress,
680
686
  onKeyDown: suppressKeyPress,
681
- className: (0, _runtime.ax)(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", showPreview || uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
687
+ className: (0, _runtime.ax)(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", showPreview || (uploading || !!emojiToDelete) && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
682
688
  style: {
683
689
  "--_19dn98e": (0, _runtime.ix)("".concat(emojiPickerHeight, "px")),
684
690
  "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
685
691
  }
686
692
  }, /*#__PURE__*/React.createElement(_CategorySelector.default, {
687
- activeCategoryId: uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? null : activeCategory,
693
+ activeCategoryId: (uploading || emojiToDelete) && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? null : activeCategory,
688
694
  dynamicCategories: dynamicCategories,
689
695
  disableCategories: disableCategories,
690
696
  onCategorySelected: onCategorySelected
@@ -717,7 +723,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
717
723
  onOpenUpload: onOpenUpload,
718
724
  size: size,
719
725
  activeCategoryId: activeCategory
720
- }), showPreview && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
726
+ }), showPreview && !(emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
721
727
  selectedEmoji: selectedEmoji,
722
728
  uploadEnabled: isUploadSupported && !uploading,
723
729
  onOpenUpload: onOpenUpload
@@ -729,6 +735,12 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
729
735
  onFileChooserClicked: onFileChooserClicked,
730
736
  errorMessage: formattedErrorMessage,
731
737
  initialUploadName: query
738
+ })), emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') && /*#__PURE__*/React.createElement("div", {
739
+ className: (0, _runtime.ax)(["_2rkofajl _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
740
+ }, /*#__PURE__*/React.createElement(_EmojiDeletePreview.default, {
741
+ emoji: emojiToDelete,
742
+ onDeleteEmoji: onDeleteEmoji,
743
+ onCloseDelete: onCloseDelete
732
744
  })));
733
745
  };
734
746
  var _default_1 = /*#__PURE__*/(0, _react.memo)(EmojiPickerComponent);
package/dist/cjs/util/analytics/analytics.js CHANGED
@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
20
20
  actionSubjectId: actionSubjectId,
21
21
  attributes: _objectSpread({
22
22
  packageName: "@atlaskit/emoji",
23
- packageVersion: "70.10.0"
23
+ packageVersion: "70.10.1"
24
24
  }, attributes)
25
25
  };
26
26
  };
package/dist/es2019/components/common/EmojiDeletePreview.compiled.css CHANGED
@@ -1,18 +1,39 @@
1
1
  ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
+ ._1sc1wadc span{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
+ ._2rko1tm3{border-radius:var(--ds-radius-xxlarge,1pc)}
4
+ ._zulp1b66{gap:var(--ds-space-050,4px)}
5
+ ._zulpu2gc{gap:var(--ds-space-100,8px)}
6
+ ._zulputpp{gap:var(--ds-space-150,9pt)}
7
+ ._16jlkb7n{flex-grow:1}
8
+ ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
2
9
  ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
3
10
  ._19l3zwfg img{max-height:2pc}
11
+ ._19pkutpp{margin-top:var(--ds-space-150,9pt)}
12
+ ._1bah1h6o{justify-content:center}
4
13
  ._1bah1yb4{justify-content:space-between}
5
14
  ._1bahesu3{justify-content:flex-end}
6
15
  ._1e0c1txw{display:flex}
16
+ ._1o9zkb7n{flex-shrink:1}
7
17
  ._1qz31b66 .emoji-submit-delete{margin-right:var(--ds-space-050,4px)}
18
+ ._1tke1sa4{min-height:390px}
8
19
  ._1txfwu06 .emoji-submit-delete{font-weight:var(--ds-font-weight-bold,653)}
9
20
  ._2lx21bp4{flex-direction:column}
10
21
  ._4cvr1h6o{align-items:center}
22
+ ._4cvr1y6m{align-items:flex-start}
11
23
  ._4t3i1ylp{height:40px}
12
24
  ._4t3i53f4{height:75pt}
13
25
  ._4t3ivbgk{height:4pc}
26
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
27
+ ._bna7t9kd img{height:72px}
14
28
  ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
29
+ ._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
30
+ ._i0dl1wug{flex-basis:auto}
15
31
  ._m73io7ol .emoji-submit-delete{width:84px}
32
+ ._mezjt9kd img{width:72px}
16
33
  ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
34
+ ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
17
35
  ._rtyst9kd img{max-width:72px}
18
- ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
36
+ ._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
37
+ ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
38
+ ._vchhusvi{box-sizing:border-box}
39
+ ._y3gn1e5h{text-align:left}
package/dist/es2019/components/common/EmojiDeletePreview.js CHANGED
@@ -8,8 +8,9 @@ import { Component } from 'react';
8
8
  import { FormattedMessage, injectIntl } from 'react-intl';
9
9
  import AkButton from '@atlaskit/button/new';
10
10
  import Heading from '@atlaskit/heading';
11
- import { Text } from '@atlaskit/primitives/compiled';
11
+ import { Box, Text } from '@atlaskit/primitives/compiled';
12
12
  import FocusLock from 'react-focus-lock';
13
+ import { fg } from '@atlaskit/platform-feature-flags';
13
14
  import { messages } from '../i18n';
14
15
  import CachingEmoji from './CachingEmoji';
15
16
  import EmojiErrorMessage, { emojiErrorScreenreaderTestId } from './EmojiErrorMessage';
@@ -19,6 +20,10 @@ const deleteFooter = null;
19
20
  const deletePreview = null;
20
21
  const deleteText = null;
21
22
  const previewButtonGroup = null;
23
+ const deletePreviewNew = null;
24
+ const deleteTextSection = null;
25
+ const emojiPreviewLargeBox = null;
26
+ const deleteButtonGroup = null;
22
27
  export const emojiDeletePreviewTestId = 'emoji-delete-preview';
23
28
  const deleteEmojiLabelId = 'fabric.emoji.delete.label.id';
24
29
  class EmojiDeletePreview extends Component {
@@ -73,6 +78,49 @@ class EmojiDeletePreview extends Component {
73
78
  const {
74
79
  formatMessage
75
80
  } = intl;
81
+ if (fg('platform_emoji_picker_refresh')) {
82
+ return /*#__PURE__*/React.createElement(FocusLock, {
83
+ noFocusGuards: true
84
+ }, /*#__PURE__*/React.createElement("div", {
85
+ "data-testid": emojiDeletePreviewTestId,
86
+ className: ax(["_zulputpp _1e0c1txw _2lx21bp4 _1tke1sa4 _ca0qutpp _u5f3pxbi _n3tdutpp _19bvpxbi _vchhusvi"])
87
+ }, /*#__PURE__*/React.createElement("div", {
88
+ className: ax(["_zulp1b66 _1e0c1txw _2lx21bp4 _4cvr1y6m _y3gn1e5h"])
89
+ }, /*#__PURE__*/React.createElement(Box, {
90
+ paddingBlockEnd: "space.100"
91
+ }, /*#__PURE__*/React.createElement(Heading, {
92
+ size: "small"
93
+ }, /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiTitle))), /*#__PURE__*/React.createElement(Text, {
94
+ color: "color.text.subtle",
95
+ size: "small"
96
+ }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
97
+ values: {
98
+ emojiShortName: emoji.shortName
99
+ }
100
+ })))), /*#__PURE__*/React.createElement("div", {
101
+ className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _2rko1tm3 _1e0c1txw _4cvr1h6o _1bah1h6o _bfhk1gly _1sc1wadc _mezjt9kd _bna7t9kd"])
102
+ }, /*#__PURE__*/React.createElement(CachingEmoji, {
103
+ emoji: emoji
104
+ })), /*#__PURE__*/React.createElement("div", {
105
+ className: ax(["_zulpu2gc _1e0c1txw _4cvr1h6o _1bahesu3 _19pkutpp"])
106
+ }, error && !loading ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
107
+ message: formatMessage(messages.deleteEmojiFailed),
108
+ errorStyle: "delete",
109
+ tooltip: true
110
+ }) : null, /*#__PURE__*/React.createElement(VisuallyHidden, {
111
+ id: deleteEmojiLabelId
112
+ }, formatMessage(messages.deleteEmojiLabel)), /*#__PURE__*/React.createElement(AkButton, {
113
+ appearance: "subtle",
114
+ onClick: this.onCancel
115
+ }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cancelLabel)), /*#__PURE__*/React.createElement(RetryableButton, {
116
+ label: formatMessage(messages.deleteEmojiLabel),
117
+ onSubmit: this.onSubmit,
118
+ appearance: "danger",
119
+ loading: loading,
120
+ error: error,
121
+ ariaLabelledBy: `${emojiErrorScreenreaderTestId} ${deleteEmojiLabelId}`
122
+ }))));
123
+ }
76
124
  return /*#__PURE__*/React.createElement(FocusLock, {
77
125
  noFocusGuards: true
78
126
  }, /*#__PURE__*/React.createElement("div", {
package/dist/es2019/components/picker/EmojiPickerComponent.js CHANGED
@@ -22,6 +22,7 @@ import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
22
22
  import CategorySelector from './CategorySelector';
23
23
  import EmojiPickerFooter from './EmojiPickerFooter';
24
24
  import EmojiUploadPicker from '../common/EmojiUploadPicker';
25
+ import EmojiDeletePreviewComponent from '../common/EmojiDeletePreview';
25
26
  import { EmojiPickerVirtualListInternal as EmojiPickerList } from './EmojiPickerList';
26
27
  import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
27
28
  import { useEmoji } from '../../hooks/useEmoji';
@@ -113,14 +114,14 @@ const EmojiPickerComponent = ({
113
114
  if (isProgrammaticScroll.current && fg('platform_emoji_picker_refresh')) {
114
115
  return;
115
116
  }
116
- // Ignore scroll-driven category changes while the upload screen is open
117
- if (uploading && fg('platform_emoji_picker_refresh')) {
117
+ // Ignore scroll-driven category changes while the upload or delete screen is open
118
+ if ((uploading || emojiToDelete) && fg('platform_emoji_picker_refresh')) {
118
119
  return;
119
120
  }
120
121
  if (activeCategory !== category) {
121
122
  setActiveCategory(category);
122
123
  }
123
- }, [activeCategory, uploading]);
124
+ }, [activeCategory, uploading, emojiToDelete]);
124
125
  const calculateElapsedTime = () => {
125
126
  return Date.now() - openTime.current;
126
127
  };
@@ -278,10 +279,15 @@ const EmojiPickerComponent = ({
278
279
  return;
279
280
  }
280
281
 
281
- // If the upload screen is open, close it when a category is selected
282
- if (uploading && fg('platform_emoji_picker_refresh')) {
283
- setUploading(false);
284
- setUploadErrorMessage(undefined);
282
+ // If the upload or delete screen is open, close it when a category is selected
283
+ if (fg('platform_emoji_picker_refresh')) {
284
+ if (uploading) {
285
+ setUploading(false);
286
+ setUploadErrorMessage(undefined);
287
+ }
288
+ if (emojiToDelete) {
289
+ setEmojiToDelete(undefined);
290
+ }
285
291
  }
286
292
  emojiProvider.findInCategory(categoryId).then(emojisInCategory => {
287
293
  if (!disableCategories) {
@@ -312,7 +318,7 @@ const EmojiPickerComponent = ({
312
318
  }));
313
319
  }
314
320
  });
315
- }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading]);
321
+ }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading, emojiToDelete]);
316
322
  const recordUsageOnSelection = useMemo(() => createRecordSelectionDefault(emojiProvider, onSelectWrapper, analytic => fireAnalytics(analytic(SearchSourceTypes.PICKER))), [emojiProvider, fireAnalytics, onSelectWrapper]);
317
323
  const formattedErrorMessage = useMemo(() => uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null, [uploadErrorMessage]);
318
324
  const onFileChooserClicked = useCallback(() => {
@@ -536,7 +542,7 @@ const EmojiPickerComponent = ({
536
542
  onKeyDown: suppressKeyPress,
537
543
  className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
538
544
  }, /*#__PURE__*/React.createElement(CategorySelector, {
539
- activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
545
+ activeCategoryId: (uploading || emojiToDelete) && fg('platform_emoji_picker_refresh') ? null : activeCategory,
540
546
  dynamicCategories: dynamicCategories,
541
547
  disableCategories: disableCategories,
542
548
  onCategorySelected: onCategorySelected
@@ -569,7 +575,7 @@ const EmojiPickerComponent = ({
569
575
  onOpenUpload: onOpenUpload,
570
576
  size: size,
571
577
  activeCategoryId: activeCategory
572
- }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
578
+ }), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
573
579
  selectedEmoji: selectedEmoji,
574
580
  uploadEnabled: isUploadSupported && !uploading,
575
581
  onOpenUpload: onOpenUpload
@@ -584,9 +590,9 @@ const EmojiPickerComponent = ({
584
590
  onKeyPress: suppressKeyPress,
585
591
  onKeyUp: suppressKeyPress,
586
592
  onKeyDown: suppressKeyPress,
587
- className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm", showPreview || uploading && fg('platform_emoji_picker_refresh') ? withPreviewHeight[size] : withoutPreviewHeight[size]])
593
+ className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm", showPreview || (uploading || !!emojiToDelete) && fg('platform_emoji_picker_refresh') ? withPreviewHeight[size] : withoutPreviewHeight[size]])
588
594
  }, /*#__PURE__*/React.createElement(CategorySelector, {
589
- activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
595
+ activeCategoryId: (uploading || emojiToDelete) && fg('platform_emoji_picker_refresh') ? null : activeCategory,
590
596
  dynamicCategories: dynamicCategories,
591
597
  disableCategories: disableCategories,
592
598
  onCategorySelected: onCategorySelected
@@ -619,7 +625,7 @@ const EmojiPickerComponent = ({
619
625
  onOpenUpload: onOpenUpload,
620
626
  size: size,
621
627
  activeCategoryId: activeCategory
622
- }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
628
+ }), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
623
629
  selectedEmoji: selectedEmoji,
624
630
  uploadEnabled: isUploadSupported && !uploading,
625
631
  onOpenUpload: onOpenUpload
@@ -631,6 +637,12 @@ const EmojiPickerComponent = ({
631
637
  onFileChooserClicked: onFileChooserClicked,
632
638
  errorMessage: formattedErrorMessage,
633
639
  initialUploadName: query
640
+ })), emojiToDelete && fg('platform_emoji_picker_refresh') && /*#__PURE__*/React.createElement("div", {
641
+ className: ax(["_2rkofajl _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
642
+ }, /*#__PURE__*/React.createElement(EmojiDeletePreviewComponent, {
643
+ emoji: emojiToDelete,
644
+ onDeleteEmoji: onDeleteEmoji,
645
+ onCloseDelete: onCloseDelete
634
646
  })));
635
647
  };
636
648
  const _default_1 = /*#__PURE__*/memo(EmojiPickerComponent);
package/dist/es2019/util/analytics/analytics.js CHANGED
@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
9
9
  actionSubjectId,
10
10
  attributes: {
11
11
  packageName: "@atlaskit/emoji",
12
- packageVersion: "70.10.0",
12
+ packageVersion: "70.10.1",
13
13
  ...attributes
14
14
  }
15
15
  });
package/dist/esm/components/common/EmojiDeletePreview.compiled.css CHANGED
@@ -1,18 +1,39 @@
1
1
  ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
+ ._1sc1wadc span{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
+ ._2rko1tm3{border-radius:var(--ds-radius-xxlarge,1pc)}
4
+ ._zulp1b66{gap:var(--ds-space-050,4px)}
5
+ ._zulpu2gc{gap:var(--ds-space-100,8px)}
6
+ ._zulputpp{gap:var(--ds-space-150,9pt)}
7
+ ._16jlkb7n{flex-grow:1}
8
+ ._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
2
9
  ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
3
10
  ._19l3zwfg img{max-height:2pc}
11
+ ._19pkutpp{margin-top:var(--ds-space-150,9pt)}
12
+ ._1bah1h6o{justify-content:center}
4
13
  ._1bah1yb4{justify-content:space-between}
5
14
  ._1bahesu3{justify-content:flex-end}
6
15
  ._1e0c1txw{display:flex}
16
+ ._1o9zkb7n{flex-shrink:1}
7
17
  ._1qz31b66 .emoji-submit-delete{margin-right:var(--ds-space-050,4px)}
18
+ ._1tke1sa4{min-height:390px}
8
19
  ._1txfwu06 .emoji-submit-delete{font-weight:var(--ds-font-weight-bold,653)}
9
20
  ._2lx21bp4{flex-direction:column}
10
21
  ._4cvr1h6o{align-items:center}
22
+ ._4cvr1y6m{align-items:flex-start}
11
23
  ._4t3i1ylp{height:40px}
12
24
  ._4t3i53f4{height:75pt}
13
25
  ._4t3ivbgk{height:4pc}
26
+ ._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
27
+ ._bna7t9kd img{height:72px}
14
28
  ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
29
+ ._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
30
+ ._i0dl1wug{flex-basis:auto}
15
31
  ._m73io7ol .emoji-submit-delete{width:84px}
32
+ ._mezjt9kd img{width:72px}
16
33
  ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
34
+ ._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
17
35
  ._rtyst9kd img{max-width:72px}
18
- ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
36
+ ._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
37
+ ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
38
+ ._vchhusvi{box-sizing:border-box}
39
+ ._y3gn1e5h{text-align:left}
package/dist/esm/components/common/EmojiDeletePreview.js CHANGED
@@ -15,8 +15,9 @@ import { Component } from 'react';
15
15
  import { FormattedMessage, injectIntl } from 'react-intl';
16
16
  import AkButton from '@atlaskit/button/new';
17
17
  import Heading from '@atlaskit/heading';
18
- import { Text } from '@atlaskit/primitives/compiled';
18
+ import { Box, Text } from '@atlaskit/primitives/compiled';
19
19
  import FocusLock from 'react-focus-lock';
20
+ import { fg } from '@atlaskit/platform-feature-flags';
20
21
  import { messages } from '../i18n';
21
22
  import CachingEmoji from './CachingEmoji';
22
23
  import EmojiErrorMessage, { emojiErrorScreenreaderTestId } from './EmojiErrorMessage';
@@ -26,6 +27,10 @@ var deleteFooter = null;
26
27
  var deletePreview = null;
27
28
  var deleteText = null;
28
29
  var previewButtonGroup = null;
30
+ var deletePreviewNew = null;
31
+ var deleteTextSection = null;
32
+ var emojiPreviewLargeBox = null;
33
+ var deleteButtonGroup = null;
29
34
  export var emojiDeletePreviewTestId = 'emoji-delete-preview';
30
35
  var deleteEmojiLabelId = 'fabric.emoji.delete.label.id';
31
36
  var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
@@ -83,6 +88,49 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
83
88
  loading = _this$state.loading,
84
89
  error = _this$state.error;
85
90
  var formatMessage = intl.formatMessage;
91
+ if (fg('platform_emoji_picker_refresh')) {
92
+ return /*#__PURE__*/React.createElement(FocusLock, {
93
+ noFocusGuards: true
94
+ }, /*#__PURE__*/React.createElement("div", {
95
+ "data-testid": emojiDeletePreviewTestId,
96
+ className: ax(["_zulputpp _1e0c1txw _2lx21bp4 _1tke1sa4 _ca0qutpp _u5f3pxbi _n3tdutpp _19bvpxbi _vchhusvi"])
97
+ }, /*#__PURE__*/React.createElement("div", {
98
+ className: ax(["_zulp1b66 _1e0c1txw _2lx21bp4 _4cvr1y6m _y3gn1e5h"])
99
+ }, /*#__PURE__*/React.createElement(Box, {
100
+ paddingBlockEnd: "space.100"
101
+ }, /*#__PURE__*/React.createElement(Heading, {
102
+ size: "small"
103
+ }, /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiTitle))), /*#__PURE__*/React.createElement(Text, {
104
+ color: "color.text.subtle",
105
+ size: "small"
106
+ }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
107
+ values: {
108
+ emojiShortName: emoji.shortName
109
+ }
110
+ })))), /*#__PURE__*/React.createElement("div", {
111
+ className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _2rko1tm3 _1e0c1txw _4cvr1h6o _1bah1h6o _bfhk1gly _1sc1wadc _mezjt9kd _bna7t9kd"])
112
+ }, /*#__PURE__*/React.createElement(CachingEmoji, {
113
+ emoji: emoji
114
+ })), /*#__PURE__*/React.createElement("div", {
115
+ className: ax(["_zulpu2gc _1e0c1txw _4cvr1h6o _1bahesu3 _19pkutpp"])
116
+ }, error && !loading ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
117
+ message: formatMessage(messages.deleteEmojiFailed),
118
+ errorStyle: "delete",
119
+ tooltip: true
120
+ }) : null, /*#__PURE__*/React.createElement(VisuallyHidden, {
121
+ id: deleteEmojiLabelId
122
+ }, formatMessage(messages.deleteEmojiLabel)), /*#__PURE__*/React.createElement(AkButton, {
123
+ appearance: "subtle",
124
+ onClick: this.onCancel
125
+ }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cancelLabel)), /*#__PURE__*/React.createElement(RetryableButton, {
126
+ label: formatMessage(messages.deleteEmojiLabel),
127
+ onSubmit: this.onSubmit,
128
+ appearance: "danger",
129
+ loading: loading,
130
+ error: error,
131
+ ariaLabelledBy: "".concat(emojiErrorScreenreaderTestId, " ").concat(deleteEmojiLabelId)
132
+ }))));
133
+ }
86
134
  return /*#__PURE__*/React.createElement(FocusLock, {
87
135
  noFocusGuards: true
88
136
  }, /*#__PURE__*/React.createElement("div", {
package/dist/esm/components/picker/EmojiPickerComponent.js CHANGED
@@ -29,6 +29,7 @@ import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
29
29
  import CategorySelector from './CategorySelector';
30
30
  import EmojiPickerFooter from './EmojiPickerFooter';
31
31
  import EmojiUploadPicker from '../common/EmojiUploadPicker';
32
+ import EmojiDeletePreviewComponent from '../common/EmojiDeletePreview';
32
33
  import { EmojiPickerVirtualListInternal as EmojiPickerList } from './EmojiPickerList';
33
34
  import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
34
35
  import { useEmoji } from '../../hooks/useEmoji';
@@ -162,14 +163,14 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
162
163
  if (isProgrammaticScroll.current && fg('platform_emoji_picker_refresh')) {
163
164
  return;
164
165
  }
165
- // Ignore scroll-driven category changes while the upload screen is open
166
- if (uploading && fg('platform_emoji_picker_refresh')) {
166
+ // Ignore scroll-driven category changes while the upload or delete screen is open
167
+ if ((uploading || emojiToDelete) && fg('platform_emoji_picker_refresh')) {
167
168
  return;
168
169
  }
169
170
  if (activeCategory !== category) {
170
171
  setActiveCategory(category);
171
172
  }
172
- }, [activeCategory, uploading]);
173
+ }, [activeCategory, uploading, emojiToDelete]);
173
174
  var calculateElapsedTime = function calculateElapsedTime() {
174
175
  return Date.now() - openTime.current;
175
176
  };
@@ -325,10 +326,15 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
325
326
  return;
326
327
  }
327
328
 
328
- // If the upload screen is open, close it when a category is selected
329
- if (uploading && fg('platform_emoji_picker_refresh')) {
330
- setUploading(false);
331
- setUploadErrorMessage(undefined);
329
+ // If the upload or delete screen is open, close it when a category is selected
330
+ if (fg('platform_emoji_picker_refresh')) {
331
+ if (uploading) {
332
+ setUploading(false);
333
+ setUploadErrorMessage(undefined);
334
+ }
335
+ if (emojiToDelete) {
336
+ setEmojiToDelete(undefined);
337
+ }
332
338
  }
333
339
  emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
334
340
  if (!disableCategories) {
@@ -359,7 +365,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
359
365
  }));
360
366
  }
361
367
  });
362
- }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading]);
368
+ }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading, emojiToDelete]);
363
369
  var recordUsageOnSelection = useMemo(function () {
364
370
  return createRecordSelectionDefault(emojiProvider, onSelectWrapper, function (analytic) {
365
371
  return fireAnalytics(analytic(SearchSourceTypes.PICKER));
@@ -621,7 +627,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
621
627
  onKeyDown: suppressKeyPress,
622
628
  className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
623
629
  }, /*#__PURE__*/React.createElement(CategorySelector, {
624
- activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
630
+ activeCategoryId: (uploading || emojiToDelete) && fg('platform_emoji_picker_refresh') ? null : activeCategory,
625
631
  dynamicCategories: dynamicCategories,
626
632
  disableCategories: disableCategories,
627
633
  onCategorySelected: onCategorySelected
@@ -654,7 +660,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
654
660
  onOpenUpload: onOpenUpload,
655
661
  size: size,
656
662
  activeCategoryId: activeCategory
657
- }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
663
+ }), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
658
664
  selectedEmoji: selectedEmoji,
659
665
  uploadEnabled: isUploadSupported && !uploading,
660
666
  onOpenUpload: onOpenUpload
@@ -669,13 +675,13 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
669
675
  onKeyPress: suppressKeyPress,
670
676
  onKeyUp: suppressKeyPress,
671
677
  onKeyDown: suppressKeyPress,
672
- className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", showPreview || uploading && fg('platform_emoji_picker_refresh') ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
678
+ className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", showPreview || (uploading || !!emojiToDelete) && fg('platform_emoji_picker_refresh') ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
673
679
  style: {
674
680
  "--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
675
681
  "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
676
682
  }
677
683
  }, /*#__PURE__*/React.createElement(CategorySelector, {
678
- activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
684
+ activeCategoryId: (uploading || emojiToDelete) && fg('platform_emoji_picker_refresh') ? null : activeCategory,
679
685
  dynamicCategories: dynamicCategories,
680
686
  disableCategories: disableCategories,
681
687
  onCategorySelected: onCategorySelected
@@ -708,7 +714,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
708
714
  onOpenUpload: onOpenUpload,
709
715
  size: size,
710
716
  activeCategoryId: activeCategory
711
- }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
717
+ }), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
712
718
  selectedEmoji: selectedEmoji,
713
719
  uploadEnabled: isUploadSupported && !uploading,
714
720
  onOpenUpload: onOpenUpload
@@ -720,6 +726,12 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
720
726
  onFileChooserClicked: onFileChooserClicked,
721
727
  errorMessage: formattedErrorMessage,
722
728
  initialUploadName: query
729
+ })), emojiToDelete && fg('platform_emoji_picker_refresh') && /*#__PURE__*/React.createElement("div", {
730
+ className: ax(["_2rkofajl _kqswstnw _154iidpf _1ltvidpf _1xi2idpf _94n5idpf _bfhk1bhr _1pbykb7n _18m91wug"])
731
+ }, /*#__PURE__*/React.createElement(EmojiDeletePreviewComponent, {
732
+ emoji: emojiToDelete,
733
+ onDeleteEmoji: onDeleteEmoji,
734
+ onCloseDelete: onCloseDelete
723
735
  })));
724
736
  };
725
737
  var _default_1 = /*#__PURE__*/memo(EmojiPickerComponent);
package/dist/esm/util/analytics/analytics.js CHANGED
@@ -14,7 +14,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
14
14
  actionSubjectId: actionSubjectId,
15
15
  attributes: _objectSpread({
16
16
  packageName: "@atlaskit/emoji",
17
- packageVersion: "70.10.0"
17
+ packageVersion: "70.10.1"
18
18
  }, attributes)
19
19
  };
20
20
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/emoji",
3
- "version": "70.10.1",
3
+ "version": "70.10.2",
4
4
  "description": "Fabric emoji React components",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"