@atlaskit/emoji 70.11.2 → 70.13.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.
- package/CHANGELOG.md +15 -0
- package/afm-cc/tsconfig.json +0 -3
- package/afm-products/tsconfig.json +0 -3
- package/dist/cjs/api/EmojiUtils.js +8 -1
- package/dist/cjs/components/i18n.js +0 -10
- package/dist/cjs/components/picker/EmojiPickerComponent.compiled.css +0 -3
- package/dist/cjs/components/picker/EmojiPickerComponent.js +6 -20
- package/dist/cjs/components/picker/EmojiPickerList.js +10 -31
- package/dist/cjs/components/picker/EmojiPickerSizes.js +0 -2
- package/dist/cjs/components/picker/EmojiPickerVirtualItems.js +1 -15
- package/dist/cjs/util/analytics/analytics.js +1 -1
- package/dist/es2019/api/EmojiUtils.js +8 -1
- package/dist/es2019/components/i18n.js +0 -10
- package/dist/es2019/components/picker/EmojiPickerComponent.compiled.css +0 -3
- package/dist/es2019/components/picker/EmojiPickerComponent.js +6 -20
- package/dist/es2019/components/picker/EmojiPickerList.js +11 -33
- package/dist/es2019/components/picker/EmojiPickerSizes.js +0 -2
- package/dist/es2019/components/picker/EmojiPickerVirtualItems.js +0 -7
- package/dist/es2019/util/analytics/analytics.js +1 -1
- package/dist/esm/api/EmojiUtils.js +8 -1
- package/dist/esm/components/i18n.js +0 -10
- package/dist/esm/components/picker/EmojiPickerComponent.compiled.css +0 -3
- package/dist/esm/components/picker/EmojiPickerComponent.js +6 -20
- package/dist/esm/components/picker/EmojiPickerList.js +11 -32
- package/dist/esm/components/picker/EmojiPickerSizes.js +0 -2
- package/dist/esm/components/picker/EmojiPickerVirtualItems.js +0 -14
- package/dist/esm/util/analytics/analytics.js +1 -1
- package/dist/types/api/EmojiUtils.d.ts +1 -1
- package/dist/types/components/i18n.d.ts +0 -10
- package/dist/types/components/picker/EmojiPickerSizes.d.ts +0 -1
- package/dist/types/components/picker/EmojiPickerVirtualItems.d.ts +1 -6
- package/dist/types-ts4.5/api/EmojiUtils.d.ts +1 -1
- package/dist/types-ts4.5/components/i18n.d.ts +0 -10
- package/dist/types-ts4.5/components/picker/EmojiPickerSizes.d.ts +0 -1
- package/dist/types-ts4.5/components/picker/EmojiPickerVirtualItems.d.ts +1 -6
- package/package.json +1 -2
- package/dist/cjs/components/picker/EmojiPickerNoResults.compiled.css +0 -12
- package/dist/cjs/components/picker/EmojiPickerNoResults.js +0 -50
- package/dist/es2019/components/picker/EmojiPickerNoResults.compiled.css +0 -12
- package/dist/es2019/components/picker/EmojiPickerNoResults.js +0 -40
- package/dist/esm/components/picker/EmojiPickerNoResults.compiled.css +0 -12
- package/dist/esm/components/picker/EmojiPickerNoResults.js +0 -41
- package/dist/types/components/picker/EmojiPickerNoResults.d.ts +0 -7
- package/dist/types-ts4.5/components/picker/EmojiPickerNoResults.d.ts +0 -7
|
@@ -8,8 +8,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
8
8
|
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; }
|
|
9
9
|
import { utils as serviceUtils } from '@atlaskit/util-service-support';
|
|
10
10
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
|
+
import { ProviderTypes } from '../types';
|
|
11
12
|
import { isImageRepresentation, isSpriteServiceRepresentation, convertImageToMediaRepresentation, buildEmojiDescriptionWithAltRepresentation } from '../util/type-helpers';
|
|
12
13
|
import debug from '../util/logger';
|
|
14
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
|
+
import { emojiIdToEmoji } from '../util/emojiIdToEmoji';
|
|
13
16
|
export var emojiRequest = function emojiRequest(provider, options) {
|
|
14
17
|
var _provider$getRatio = provider.getRatio,
|
|
15
18
|
getRatio = _provider$getRatio === void 0 ? getPixelRatio : _provider$getRatio,
|
|
@@ -131,7 +134,11 @@ export var denormaliseSkinEmoji = function denormaliseSkinEmoji(emoji, meta) {
|
|
|
131
134
|
*/
|
|
132
135
|
export var denormaliseEmojiServiceResponse = function denormaliseEmojiServiceResponse(emojiData) {
|
|
133
136
|
var emojis = emojiData.emojis.map(function (emoji) {
|
|
134
|
-
var
|
|
137
|
+
var unicodeEmoji = emojiIdToEmoji(emoji.id);
|
|
138
|
+
var useUnicodeRepresentation = !!(emoji.id && emoji.type === ProviderTypes.STANDARD && unicodeEmoji && fg('platform_twemoji_removal_unicode_emojis'));
|
|
139
|
+
var newRepresentation = useUnicodeRepresentation ? {
|
|
140
|
+
unicodeEmoji: unicodeEmoji
|
|
141
|
+
} : denormaliseServiceRepresentation(emoji.representation, emojiData.meta);
|
|
135
142
|
var altRepresentation = denormaliseServiceAltRepresentation(emoji.altRepresentations, emojiData.meta);
|
|
136
143
|
var newSkinVariations = denormaliseSkinEmoji(emoji, emojiData.meta);
|
|
137
144
|
|
|
@@ -225,16 +225,6 @@ export var messages = defineMessages({
|
|
|
225
225
|
defaultMessage: 'An emoji with this name exists already',
|
|
226
226
|
description: 'Error message shown when the user tries to upload an emoji with a name that already exists in the custom emoji set'
|
|
227
227
|
},
|
|
228
|
-
emojiPickerNoResults: {
|
|
229
|
-
id: 'fabric.emoji.picker.no.results',
|
|
230
|
-
defaultMessage: 'No results',
|
|
231
|
-
description: 'Heading shown in the emoji picker when a search query returns no matching emojis.'
|
|
232
|
-
},
|
|
233
|
-
emojiPickerAddCustomEmoji: {
|
|
234
|
-
id: 'fabric.emoji.picker.add.custom.emoji',
|
|
235
|
-
defaultMessage: 'Add custom emoji',
|
|
236
|
-
description: 'Label for the button shown in the emoji picker no-results screen that opens the custom emoji upload panel.'
|
|
237
|
-
},
|
|
238
228
|
emojiPickerTitle: {
|
|
239
229
|
id: 'fabric.emoji.picker',
|
|
240
230
|
defaultMessage: 'Emoji picker',
|
|
@@ -21,16 +21,13 @@
|
|
|
21
21
|
._1xi2idpf{right:0}
|
|
22
22
|
._2lx21bp4{flex-direction:column}
|
|
23
23
|
._4t3i1784{height:470px}
|
|
24
|
-
._4t3i19lm{height:514px}
|
|
25
24
|
._4t3i1ckg{height:455px}
|
|
26
25
|
._4t3i1dsu{height:419px}
|
|
27
|
-
._4t3i1j8x{height:354px}
|
|
28
26
|
._4t3i1sa4{height:390px}
|
|
29
27
|
._4t3i2300{height:429px}
|
|
30
28
|
._4t3i50k7{height:499px}
|
|
31
29
|
._4t3iaq3k{height:295px}
|
|
32
30
|
._4t3ibqjm{height:310px}
|
|
33
|
-
._4t3iihnn{height:434px}
|
|
34
31
|
._4t3iixjv{height:375px}
|
|
35
32
|
._4t3iqbeb{height:339px}
|
|
36
33
|
._4t3iuxo9{height:var(--_19dn98e)}
|
|
@@ -67,12 +67,6 @@ var withoutPreviewHeight = {
|
|
|
67
67
|
medium: "_4t3iixjv _1tke5x59",
|
|
68
68
|
large: "_4t3i1ckg _1tke1pna"
|
|
69
69
|
};
|
|
70
|
-
var emojiPickerHeightNoResults = 354;
|
|
71
|
-
var withNoResultsRefreshHeight = {
|
|
72
|
-
small: "_4t3i1j8x _1tkegx0z",
|
|
73
|
-
medium: "_4t3iihnn _1tke5x59",
|
|
74
|
-
large: "_4t3i19lm _1tke1pna"
|
|
75
|
-
};
|
|
76
70
|
var FREQUENTLY_USED_MAX = 16;
|
|
77
71
|
var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
|
|
78
72
|
var onSelection = _ref.onSelection,
|
|
@@ -147,7 +141,6 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
|
|
|
147
141
|
}, []);
|
|
148
142
|
var openTime = useRef(0);
|
|
149
143
|
var isMounting = useRef(true);
|
|
150
|
-
var lastNonSearchCategory = useRef(activeCategory);
|
|
151
144
|
var previousEmojiProvider = useRef(emojiProvider);
|
|
152
145
|
var isProgrammaticScroll = useRef(false);
|
|
153
146
|
var pickerRef = useRef(null);
|
|
@@ -189,11 +182,8 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
|
|
|
189
182
|
}
|
|
190
183
|
if (activeCategory !== category) {
|
|
191
184
|
setActiveCategory(category);
|
|
192
|
-
if (!query && fg('platform_emoji_picker_refresh')) {
|
|
193
|
-
lastNonSearchCategory.current = category;
|
|
194
|
-
}
|
|
195
185
|
}
|
|
196
|
-
}, [activeCategory, uploading, emojiToDelete
|
|
186
|
+
}, [activeCategory, uploading, emojiToDelete]);
|
|
197
187
|
var calculateElapsedTime = function calculateElapsedTime() {
|
|
198
188
|
return Date.now() - openTime.current;
|
|
199
189
|
};
|
|
@@ -410,10 +400,6 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
|
|
|
410
400
|
source: SearchSourceTypes.PICKER
|
|
411
401
|
};
|
|
412
402
|
if (searchQuery !== query) {
|
|
413
|
-
// Capture the active category before entering search so we can keep it highlighted
|
|
414
|
-
if (!query && searchQuery && fg('platform_emoji_picker_refresh')) {
|
|
415
|
-
lastNonSearchCategory.current = activeCategory;
|
|
416
|
-
}
|
|
417
403
|
setQuery(searchQuery);
|
|
418
404
|
}
|
|
419
405
|
updateEmojis(searchQuery, options);
|
|
@@ -421,7 +407,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
|
|
|
421
407
|
// scroll to top when search, which is search results section
|
|
422
408
|
scrollToTopOfList();
|
|
423
409
|
}
|
|
424
|
-
}, [
|
|
410
|
+
}, [query, filteredEmojis, selectedTone, updateEmojis, scrollToTopOfList]);
|
|
425
411
|
|
|
426
412
|
// When the upload screen is open, intercept any file drag at the window level so it
|
|
427
413
|
// cannot reach underlying page drop handlers (e.g. the Confluence editor).
|
|
@@ -642,7 +628,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
|
|
|
642
628
|
role: "dialog",
|
|
643
629
|
"aria-label": formatMessage(messages.emojiPickerTitle),
|
|
644
630
|
"aria-modal": true,
|
|
645
|
-
className: ax([fg('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", !!emojiToDelete && fg('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] :
|
|
631
|
+
className: ax([fg('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", !!emojiToDelete && fg('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
|
|
646
632
|
style: {
|
|
647
633
|
"--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
|
|
648
634
|
"--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
|
|
@@ -687,7 +673,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
|
|
|
687
673
|
onOpenUpload: onOpenUpload,
|
|
688
674
|
size: size,
|
|
689
675
|
activeCategoryId: activeCategory
|
|
690
|
-
}), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) &&
|
|
676
|
+
}), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
|
|
691
677
|
selectedEmoji: selectedEmoji,
|
|
692
678
|
uploadEnabled: isUploadSupported && !uploading,
|
|
693
679
|
onOpenUpload: onOpenUpload
|
|
@@ -702,7 +688,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
|
|
|
702
688
|
onKeyPress: suppressKeyPress,
|
|
703
689
|
onKeyUp: suppressKeyPress,
|
|
704
690
|
onKeyDown: suppressKeyPress,
|
|
705
|
-
className: ax([fg('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", !!emojiToDelete && fg('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] :
|
|
691
|
+
className: ax([fg('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", !!emojiToDelete && fg('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
|
|
706
692
|
style: {
|
|
707
693
|
"--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
|
|
708
694
|
"--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
|
|
@@ -741,7 +727,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
|
|
|
741
727
|
onOpenUpload: onOpenUpload,
|
|
742
728
|
size: size,
|
|
743
729
|
activeCategoryId: activeCategory
|
|
744
|
-
}), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) &&
|
|
730
|
+
}), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
|
|
745
731
|
selectedEmoji: selectedEmoji,
|
|
746
732
|
uploadEnabled: isUploadSupported && !uploading,
|
|
747
733
|
onOpenUpload: onOpenUpload
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
-
import { useIntl } from 'react-intl';
|
|
4
3
|
import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
5
4
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
import { customCategory, defaultEmojiPickerSize, frequentCategory, searchCategory, userCustomTitle, yourUploadsCategory } from '../../util/constants';
|
|
7
6
|
import { CategoryDescriptionMap, CategoryDescriptionMapNew } from './categories';
|
|
8
7
|
import CategoryTracker from './CategoryTracker';
|
|
9
8
|
import { sizes } from './EmojiPickerSizes';
|
|
10
|
-
import { CategoryHeadingItem, EmojisRowItem, LoadingItem,
|
|
9
|
+
import { CategoryHeadingItem, EmojisRowItem, LoadingItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
|
|
11
10
|
import EmojiActions from '../common/EmojiActions';
|
|
12
11
|
import { emojiPickerHeightOffset, scrollToRow as _scrollToRow } from './utils';
|
|
13
12
|
import { VirtualList } from './VirtualList';
|
|
14
13
|
import { EmojiPickerListContextProvider } from '../../context/EmojiPickerListContext';
|
|
15
14
|
import EmojiPickerTabPanel from './EmojiPickerTabPanel';
|
|
16
|
-
import { messages } from '../i18n';
|
|
17
15
|
|
|
18
16
|
/**
|
|
19
17
|
* Test id for wrapper Emoji Picker List div
|
|
@@ -62,8 +60,6 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
|
|
|
62
60
|
onFileChooserClicked = props.onFileChooserClicked,
|
|
63
61
|
onOpenUpload = props.onOpenUpload,
|
|
64
62
|
activeCategoryId = props.activeCategoryId;
|
|
65
|
-
var _useIntl = useIntl(),
|
|
66
|
-
formatMessage = _useIntl.formatMessage;
|
|
67
63
|
var listRef = useRef(null);
|
|
68
64
|
var _useState = useState([]),
|
|
69
65
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -181,27 +177,14 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
|
|
|
181
177
|
items.push(new LoadingItem());
|
|
182
178
|
} else {
|
|
183
179
|
if (query) {
|
|
184
|
-
var search =
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
items.push(new NoResultsItem({
|
|
193
|
-
onOpenUpload: onOpenUpload,
|
|
194
|
-
uploadEnabled: uploadEnabled
|
|
195
|
-
}));
|
|
196
|
-
} else {
|
|
197
|
-
// Only a single "result" category
|
|
198
|
-
items = [].concat(_toConsumableArray(items), _toConsumableArray(buildVirtualItemFromGroup({
|
|
199
|
-
category: searchCategory,
|
|
200
|
-
title: search.name,
|
|
201
|
-
emojis: emojis,
|
|
202
|
-
order: search.order
|
|
203
|
-
})));
|
|
204
|
-
}
|
|
180
|
+
var search = CategoryDescriptionMap.SEARCH;
|
|
181
|
+
// Only a single "result" category
|
|
182
|
+
items = [].concat(_toConsumableArray(items), _toConsumableArray(buildVirtualItemFromGroup({
|
|
183
|
+
category: searchCategory,
|
|
184
|
+
title: search.name,
|
|
185
|
+
emojis: emojis,
|
|
186
|
+
order: search.order
|
|
187
|
+
})));
|
|
205
188
|
} else {
|
|
206
189
|
// Group by category
|
|
207
190
|
|
|
@@ -226,7 +209,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
|
|
|
226
209
|
}
|
|
227
210
|
}
|
|
228
211
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
229
|
-
}, [allEmojiGroups, loading, query, emojis
|
|
212
|
+
}, [allEmojiGroups, loading, query, emojis]);
|
|
230
213
|
var findCategoryToActivate = function findCategoryToActivate(row) {
|
|
231
214
|
var category = null;
|
|
232
215
|
if (row instanceof CategoryHeadingItem) {
|
|
@@ -336,12 +319,8 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
|
|
|
336
319
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
337
320
|
}, [virtualItems, categoriesChanged]);
|
|
338
321
|
var virtualListHeight = useMemo(function () {
|
|
339
|
-
if (query && emojis.length === 0 && fg('platform_emoji_picker_refresh')) {
|
|
340
|
-
// No-results state: expand the list height to fit heading + illustration without scrolling
|
|
341
|
-
return sizes.categoryHeadingHeight + sizes.noResultsHeight + emojiPickerHeightOffset(size);
|
|
342
|
-
}
|
|
343
322
|
return fg('platform_emoji_picker_refresh') ? sizes.listHeightNew + emojiPickerHeightOffset(size) : sizes.listHeight + emojiPickerHeightOffset(size);
|
|
344
|
-
}, [size
|
|
323
|
+
}, [size]);
|
|
345
324
|
return /*#__PURE__*/React.createElement(EmojiPickerTabPanel, {
|
|
346
325
|
showSearchResults: !!query
|
|
347
326
|
}, /*#__PURE__*/React.createElement(EmojiActions, {
|
|
@@ -13,8 +13,6 @@ export var sizes = {
|
|
|
13
13
|
// 32px height
|
|
14
14
|
loadingRowHeight: 150,
|
|
15
15
|
// Fills remaining space without scrolling when loading.
|
|
16
|
-
noResultsHeight: 300,
|
|
17
|
-
// illustration (200px) + button + padding + gap
|
|
18
16
|
uploadActionHeight: 40,
|
|
19
17
|
// 40px height
|
|
20
18
|
emojiPerRow: 8
|
|
@@ -14,7 +14,6 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
14
14
|
import Spinner from '@atlaskit/spinner';
|
|
15
15
|
import EmojiPickerCategoryHeading from './EmojiPickerCategoryHeading';
|
|
16
16
|
import EmojiPickerEmojiRow from './EmojiPickerEmojiRow';
|
|
17
|
-
import EmojiPickerNoResults from './EmojiPickerNoResults';
|
|
18
17
|
import { sizes } from './EmojiPickerSizes';
|
|
19
18
|
var emojiPickerSpinner = null;
|
|
20
19
|
export var AbstractItem = /*#__PURE__*/_createClass(function AbstractItem(props, height) {
|
|
@@ -67,19 +66,6 @@ export var CategoryHeadingItem = /*#__PURE__*/function (_AbstractItem3) {
|
|
|
67
66
|
_inherits(CategoryHeadingItem, _AbstractItem3);
|
|
68
67
|
return _createClass(CategoryHeadingItem);
|
|
69
68
|
}(AbstractItem);
|
|
70
|
-
export var NoResultsItem = /*#__PURE__*/function (_AbstractItem4) {
|
|
71
|
-
function NoResultsItem(props) {
|
|
72
|
-
var _this4;
|
|
73
|
-
_classCallCheck(this, NoResultsItem);
|
|
74
|
-
_this4 = _callSuper(this, NoResultsItem, [props, sizes.noResultsHeight]);
|
|
75
|
-
_defineProperty(_this4, "renderItem", function () {
|
|
76
|
-
return /*#__PURE__*/React.createElement(EmojiPickerNoResults, _this4.props);
|
|
77
|
-
});
|
|
78
|
-
return _this4;
|
|
79
|
-
}
|
|
80
|
-
_inherits(NoResultsItem, _AbstractItem4);
|
|
81
|
-
return _createClass(NoResultsItem);
|
|
82
|
-
}(AbstractItem);
|
|
83
69
|
export var virtualItemRenderer = function virtualItemRenderer(rows, context) {
|
|
84
70
|
var index = context.index,
|
|
85
71
|
key = context.key;
|
|
@@ -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.
|
|
17
|
+
packageVersion: "70.12.0"
|
|
18
18
|
}, attributes)
|
|
19
19
|
};
|
|
20
20
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type RequestServiceOptions, type ServiceConfig } from '@atlaskit/util-service-support';
|
|
2
|
-
import type
|
|
2
|
+
import { type AltRepresentations, type EmojiDescription, type EmojiDescriptionWithVariations, type EmojiMeta, type EmojiRepresentation, type EmojiResponse, type EmojiServiceDescriptionWithVariations, type EmojiServiceRepresentation, type EmojiServiceResponse, type EmojiId } from '../types';
|
|
3
3
|
export interface EmojiLoaderConfig extends ServiceConfig {
|
|
4
4
|
getRatio?: () => number;
|
|
5
5
|
}
|
|
@@ -119,21 +119,11 @@ export declare const messages: {
|
|
|
119
119
|
description: string;
|
|
120
120
|
id: string;
|
|
121
121
|
};
|
|
122
|
-
emojiPickerAddCustomEmoji: {
|
|
123
|
-
defaultMessage: string;
|
|
124
|
-
description: string;
|
|
125
|
-
id: string;
|
|
126
|
-
};
|
|
127
122
|
emojiPickerGrid: {
|
|
128
123
|
defaultMessage: string;
|
|
129
124
|
description: string;
|
|
130
125
|
id: string;
|
|
131
126
|
};
|
|
132
|
-
emojiPickerNoResults: {
|
|
133
|
-
defaultMessage: string;
|
|
134
|
-
description: string;
|
|
135
|
-
id: string;
|
|
136
|
-
};
|
|
137
127
|
emojiPickerListPanel: {
|
|
138
128
|
defaultMessage: string;
|
|
139
129
|
description: string;
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
import type { ReactNode } from 'react';
|
|
6
6
|
import { type Props as CategoryHeadingProps } from './EmojiPickerCategoryHeading';
|
|
7
7
|
import { type Props as EmojiRowProps } from './EmojiPickerEmojiRow';
|
|
8
|
-
import { type Props as NoResultsProps } from './EmojiPickerNoResults';
|
|
9
8
|
import type { VirtualItem as VirtualItemContext } from '@tanstack/react-virtual';
|
|
10
9
|
export interface RenderItem {
|
|
11
10
|
(context?: VirtualItemContext): ReactNode;
|
|
@@ -33,8 +32,4 @@ export declare class CategoryHeadingItem extends AbstractItem<CategoryHeadingPro
|
|
|
33
32
|
constructor(props: CategoryHeadingProps);
|
|
34
33
|
renderItem: () => JSX.Element;
|
|
35
34
|
}
|
|
36
|
-
export declare
|
|
37
|
-
constructor(props: NoResultsProps);
|
|
38
|
-
renderItem: () => JSX.Element;
|
|
39
|
-
}
|
|
40
|
-
export declare const virtualItemRenderer: (rows: VirtualItem<CategoryHeadingProps | EmojiRowProps | NoResultsProps | {}>[], context: VirtualItemContext) => JSX.Element;
|
|
35
|
+
export declare const virtualItemRenderer: (rows: VirtualItem<CategoryHeadingProps | EmojiRowProps | {}>[], context: VirtualItemContext) => JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type RequestServiceOptions, type ServiceConfig } from '@atlaskit/util-service-support';
|
|
2
|
-
import type
|
|
2
|
+
import { type AltRepresentations, type EmojiDescription, type EmojiDescriptionWithVariations, type EmojiMeta, type EmojiRepresentation, type EmojiResponse, type EmojiServiceDescriptionWithVariations, type EmojiServiceRepresentation, type EmojiServiceResponse, type EmojiId } from '../types';
|
|
3
3
|
export interface EmojiLoaderConfig extends ServiceConfig {
|
|
4
4
|
getRatio?: () => number;
|
|
5
5
|
}
|
|
@@ -119,21 +119,11 @@ export declare const messages: {
|
|
|
119
119
|
description: string;
|
|
120
120
|
id: string;
|
|
121
121
|
};
|
|
122
|
-
emojiPickerAddCustomEmoji: {
|
|
123
|
-
defaultMessage: string;
|
|
124
|
-
description: string;
|
|
125
|
-
id: string;
|
|
126
|
-
};
|
|
127
122
|
emojiPickerGrid: {
|
|
128
123
|
defaultMessage: string;
|
|
129
124
|
description: string;
|
|
130
125
|
id: string;
|
|
131
126
|
};
|
|
132
|
-
emojiPickerNoResults: {
|
|
133
|
-
defaultMessage: string;
|
|
134
|
-
description: string;
|
|
135
|
-
id: string;
|
|
136
|
-
};
|
|
137
127
|
emojiPickerListPanel: {
|
|
138
128
|
defaultMessage: string;
|
|
139
129
|
description: string;
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
import type { ReactNode } from 'react';
|
|
6
6
|
import { type Props as CategoryHeadingProps } from './EmojiPickerCategoryHeading';
|
|
7
7
|
import { type Props as EmojiRowProps } from './EmojiPickerEmojiRow';
|
|
8
|
-
import { type Props as NoResultsProps } from './EmojiPickerNoResults';
|
|
9
8
|
import type { VirtualItem as VirtualItemContext } from '@tanstack/react-virtual';
|
|
10
9
|
export interface RenderItem {
|
|
11
10
|
(context?: VirtualItemContext): ReactNode;
|
|
@@ -33,8 +32,4 @@ export declare class CategoryHeadingItem extends AbstractItem<CategoryHeadingPro
|
|
|
33
32
|
constructor(props: CategoryHeadingProps);
|
|
34
33
|
renderItem: () => JSX.Element;
|
|
35
34
|
}
|
|
36
|
-
export declare
|
|
37
|
-
constructor(props: NoResultsProps);
|
|
38
|
-
renderItem: () => JSX.Element;
|
|
39
|
-
}
|
|
40
|
-
export declare const virtualItemRenderer: (rows: VirtualItem<CategoryHeadingProps | EmojiRowProps | NoResultsProps | {}>[], context: VirtualItemContext) => JSX.Element;
|
|
35
|
+
export declare const virtualItemRenderer: (rows: VirtualItem<CategoryHeadingProps | EmojiRowProps | {}>[], context: VirtualItemContext) => JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/emoji",
|
|
3
|
-
"version": "70.
|
|
3
|
+
"version": "70.13.0",
|
|
4
4
|
"description": "Fabric emoji React components",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -45,7 +45,6 @@
|
|
|
45
45
|
"@atlaskit/form": "^15.5.0",
|
|
46
46
|
"@atlaskit/heading": "^5.4.0",
|
|
47
47
|
"@atlaskit/icon": "^35.3.0",
|
|
48
|
-
"@atlaskit/image": "^3.0.0",
|
|
49
48
|
"@atlaskit/media-client": "^36.3.0",
|
|
50
49
|
"@atlaskit/media-client-react": "^5.1.0",
|
|
51
50
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
|
|
3
|
-
._1bah1h6o{justify-content:center}
|
|
4
|
-
._1bsb1osq{width:100%}
|
|
5
|
-
._1e0c1txw{display:flex}
|
|
6
|
-
._2lx21bp4{flex-direction:column}
|
|
7
|
-
._4cvr1h6o{align-items:center}
|
|
8
|
-
._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
|
|
9
|
-
._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
|
|
10
|
-
._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
|
|
11
|
-
._vchhusvi{box-sizing:border-box}
|
|
12
|
-
._y3gn1h6o{text-align:center}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
/* EmojiPickerNoResults.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
-
"use strict";
|
|
3
|
-
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
Object.defineProperty(exports, "__esModule", {
|
|
7
|
-
value: true
|
|
8
|
-
});
|
|
9
|
-
exports.default = exports.RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = void 0;
|
|
10
|
-
require("./EmojiPickerNoResults.compiled.css");
|
|
11
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
-
var React = _react;
|
|
13
|
-
var _runtime = require("@compiled/react/runtime");
|
|
14
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
|
-
var _reactIntl = require("react-intl");
|
|
16
|
-
var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
|
|
17
|
-
var _image = _interopRequireDefault(require("@atlaskit/image"));
|
|
18
|
-
var _i18n = require("../i18n");
|
|
19
|
-
var _dark = _interopRequireDefault(require("./assets/spot/search-no-result/dark.svg"));
|
|
20
|
-
var _light = _interopRequireDefault(require("./assets/spot/search-no-result/light.svg"));
|
|
21
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
22
|
-
var noResultsContainer = null;
|
|
23
|
-
var RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = exports.RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = 'render-emoji-picker-no-results';
|
|
24
|
-
var EmojiPickerNoResults = function EmojiPickerNoResults(_ref) {
|
|
25
|
-
var onOpenUpload = _ref.onOpenUpload,
|
|
26
|
-
uploadEnabled = _ref.uploadEnabled;
|
|
27
|
-
var handleOpenUpload = (0, _react.useCallback)(function (event) {
|
|
28
|
-
if ((0, _platformFeatureFlags.fg)('platform_emoji_keep_picker_open_on_upload')) {
|
|
29
|
-
event.preventDefault();
|
|
30
|
-
event.stopPropagation();
|
|
31
|
-
}
|
|
32
|
-
onOpenUpload();
|
|
33
|
-
}, [onOpenUpload]);
|
|
34
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
35
|
-
"data-testid": RENDER_EMOJI_PICKER_NO_RESULTS_TESTID,
|
|
36
|
-
className: (0, _runtime.ax)(["_zulppxbi _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _ca0q1ejb _u5f3pxbi _n3td1ejb _19bvpxbi _y3gn1h6o _1bsb1osq _vchhusvi"])
|
|
37
|
-
}, /*#__PURE__*/React.createElement(_image.default, {
|
|
38
|
-
src: _light.default,
|
|
39
|
-
srcDark: _dark.default,
|
|
40
|
-
alt: "",
|
|
41
|
-
width: 200
|
|
42
|
-
}), uploadEnabled && /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiPickerAddCustomEmoji, function (label) {
|
|
43
|
-
return /*#__PURE__*/React.createElement(_standardButton.default, {
|
|
44
|
-
onClick: handleOpenUpload,
|
|
45
|
-
appearance: "default",
|
|
46
|
-
tabIndex: 0
|
|
47
|
-
}, label);
|
|
48
|
-
}));
|
|
49
|
-
};
|
|
50
|
-
var _default = exports.default = EmojiPickerNoResults;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
|
|
3
|
-
._1bah1h6o{justify-content:center}
|
|
4
|
-
._1bsb1osq{width:100%}
|
|
5
|
-
._1e0c1txw{display:flex}
|
|
6
|
-
._2lx21bp4{flex-direction:column}
|
|
7
|
-
._4cvr1h6o{align-items:center}
|
|
8
|
-
._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
|
|
9
|
-
._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
|
|
10
|
-
._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
|
|
11
|
-
._vchhusvi{box-sizing:border-box}
|
|
12
|
-
._y3gn1h6o{text-align:center}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
/* EmojiPickerNoResults.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
-
import "./EmojiPickerNoResults.compiled.css";
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
-
import { useCallback } from 'react';
|
|
6
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
|
-
import { FormattedMessage } from 'react-intl';
|
|
8
|
-
import AkButton from '@atlaskit/button/standard-button';
|
|
9
|
-
import Image from '@atlaskit/image';
|
|
10
|
-
import { messages } from '../i18n';
|
|
11
|
-
import SearchNoResultDark from './assets/spot/search-no-result/dark.svg';
|
|
12
|
-
import SearchNoResultLight from './assets/spot/search-no-result/light.svg';
|
|
13
|
-
const noResultsContainer = null;
|
|
14
|
-
export const RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = 'render-emoji-picker-no-results';
|
|
15
|
-
const EmojiPickerNoResults = ({
|
|
16
|
-
onOpenUpload,
|
|
17
|
-
uploadEnabled
|
|
18
|
-
}) => {
|
|
19
|
-
const handleOpenUpload = useCallback(event => {
|
|
20
|
-
if (fg('platform_emoji_keep_picker_open_on_upload')) {
|
|
21
|
-
event.preventDefault();
|
|
22
|
-
event.stopPropagation();
|
|
23
|
-
}
|
|
24
|
-
onOpenUpload();
|
|
25
|
-
}, [onOpenUpload]);
|
|
26
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
27
|
-
"data-testid": RENDER_EMOJI_PICKER_NO_RESULTS_TESTID,
|
|
28
|
-
className: ax(["_zulppxbi _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _ca0q1ejb _u5f3pxbi _n3td1ejb _19bvpxbi _y3gn1h6o _1bsb1osq _vchhusvi"])
|
|
29
|
-
}, /*#__PURE__*/React.createElement(Image, {
|
|
30
|
-
src: SearchNoResultLight,
|
|
31
|
-
srcDark: SearchNoResultDark,
|
|
32
|
-
alt: "",
|
|
33
|
-
width: 200
|
|
34
|
-
}), uploadEnabled && /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPickerAddCustomEmoji, label => /*#__PURE__*/React.createElement(AkButton, {
|
|
35
|
-
onClick: handleOpenUpload,
|
|
36
|
-
appearance: "default",
|
|
37
|
-
tabIndex: 0
|
|
38
|
-
}, label)));
|
|
39
|
-
};
|
|
40
|
-
export default EmojiPickerNoResults;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
|
|
3
|
-
._1bah1h6o{justify-content:center}
|
|
4
|
-
._1bsb1osq{width:100%}
|
|
5
|
-
._1e0c1txw{display:flex}
|
|
6
|
-
._2lx21bp4{flex-direction:column}
|
|
7
|
-
._4cvr1h6o{align-items:center}
|
|
8
|
-
._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
|
|
9
|
-
._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
|
|
10
|
-
._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
|
|
11
|
-
._vchhusvi{box-sizing:border-box}
|
|
12
|
-
._y3gn1h6o{text-align:center}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
/* EmojiPickerNoResults.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
-
import "./EmojiPickerNoResults.compiled.css";
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
-
import { useCallback } from 'react';
|
|
6
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
|
-
import { FormattedMessage } from 'react-intl';
|
|
8
|
-
import AkButton from '@atlaskit/button/standard-button';
|
|
9
|
-
import Image from '@atlaskit/image';
|
|
10
|
-
import { messages } from '../i18n';
|
|
11
|
-
import SearchNoResultDark from './assets/spot/search-no-result/dark.svg';
|
|
12
|
-
import SearchNoResultLight from './assets/spot/search-no-result/light.svg';
|
|
13
|
-
var noResultsContainer = null;
|
|
14
|
-
export var RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = 'render-emoji-picker-no-results';
|
|
15
|
-
var EmojiPickerNoResults = function EmojiPickerNoResults(_ref) {
|
|
16
|
-
var onOpenUpload = _ref.onOpenUpload,
|
|
17
|
-
uploadEnabled = _ref.uploadEnabled;
|
|
18
|
-
var handleOpenUpload = useCallback(function (event) {
|
|
19
|
-
if (fg('platform_emoji_keep_picker_open_on_upload')) {
|
|
20
|
-
event.preventDefault();
|
|
21
|
-
event.stopPropagation();
|
|
22
|
-
}
|
|
23
|
-
onOpenUpload();
|
|
24
|
-
}, [onOpenUpload]);
|
|
25
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
26
|
-
"data-testid": RENDER_EMOJI_PICKER_NO_RESULTS_TESTID,
|
|
27
|
-
className: ax(["_zulppxbi _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _ca0q1ejb _u5f3pxbi _n3td1ejb _19bvpxbi _y3gn1h6o _1bsb1osq _vchhusvi"])
|
|
28
|
-
}, /*#__PURE__*/React.createElement(Image, {
|
|
29
|
-
src: SearchNoResultLight,
|
|
30
|
-
srcDark: SearchNoResultDark,
|
|
31
|
-
alt: "",
|
|
32
|
-
width: 200
|
|
33
|
-
}), uploadEnabled && /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPickerAddCustomEmoji, function (label) {
|
|
34
|
-
return /*#__PURE__*/React.createElement(AkButton, {
|
|
35
|
-
onClick: handleOpenUpload,
|
|
36
|
-
appearance: "default",
|
|
37
|
-
tabIndex: 0
|
|
38
|
-
}, label);
|
|
39
|
-
}));
|
|
40
|
-
};
|
|
41
|
-
export default EmojiPickerNoResults;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export declare const RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = "render-emoji-picker-no-results";
|
|
2
|
-
export interface Props {
|
|
3
|
-
onOpenUpload: () => void;
|
|
4
|
-
uploadEnabled: boolean;
|
|
5
|
-
}
|
|
6
|
-
declare const EmojiPickerNoResults: ({ onOpenUpload, uploadEnabled }: Props) => JSX.Element;
|
|
7
|
-
export default EmojiPickerNoResults;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export declare const RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = "render-emoji-picker-no-results";
|
|
2
|
-
export interface Props {
|
|
3
|
-
onOpenUpload: () => void;
|
|
4
|
-
uploadEnabled: boolean;
|
|
5
|
-
}
|
|
6
|
-
declare const EmojiPickerNoResults: ({ onOpenUpload, uploadEnabled }: Props) => JSX.Element;
|
|
7
|
-
export default EmojiPickerNoResults;
|