@atlaskit/emoji 73.3.3 → 73.3.4
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 +9 -0
- package/dist/cjs/api/EmojiRepository.js +1 -7
- package/dist/cjs/api/EmojiResource.js +1 -3
- package/dist/cjs/components/common/DeleteButton.js +2 -8
- package/dist/cjs/components/common/EmojiActions.compiled.css +1 -3
- package/dist/cjs/components/common/EmojiActions.js +6 -45
- package/dist/cjs/components/common/EmojiDeletePreview.compiled.css +1 -16
- package/dist/cjs/components/common/EmojiDeletePreview.js +17 -65
- package/dist/cjs/components/common/EmojiErrorMessage.js +2 -9
- package/dist/cjs/components/common/EmojiRadioButton.js +3 -4
- package/dist/cjs/components/common/EmojiUploadPicker.compiled.css +1 -14
- package/dist/cjs/components/common/EmojiUploadPicker.js +7 -90
- package/dist/cjs/components/common/FileChooser.js +15 -25
- package/dist/cjs/components/common/TonePreviewButton.compiled.css +1 -2
- package/dist/cjs/components/common/TonePreviewButton.js +2 -23
- package/dist/cjs/components/common/ToneSelectorInternal.js +1 -10
- package/dist/cjs/components/picker/CategorySelector.compiled.css +0 -6
- package/dist/cjs/components/picker/CategorySelector.js +5 -44
- package/dist/cjs/components/picker/EmojiPickerComponent.compiled.css +1 -2
- package/dist/cjs/components/picker/EmojiPickerComponent.js +38 -57
- package/dist/cjs/components/picker/EmojiPickerEmojiRow.js +1 -2
- package/dist/cjs/components/picker/EmojiPickerFooter.compiled.css +0 -2
- package/dist/cjs/components/picker/EmojiPickerFooter.js +1 -8
- package/dist/cjs/components/picker/EmojiPickerInternal.compiled.css +1 -2
- package/dist/cjs/components/picker/EmojiPickerInternal.js +1 -9
- package/dist/cjs/components/picker/EmojiPickerList.js +30 -36
- package/dist/cjs/components/picker/EmojiPickerListSearch.compiled.css +0 -1
- package/dist/cjs/components/picker/EmojiPickerListSearch.js +2 -24
- package/dist/cjs/components/picker/EmojiPickerSizes.js +0 -1
- package/dist/cjs/components/picker/VirtualList.js +2 -3
- package/dist/cjs/components/picker/categories.js +1 -84
- package/dist/cjs/components/uploader/EmojiUploadComponent.js +0 -2
- package/dist/cjs/util/constants.js +1 -2
- package/dist/es2019/api/EmojiRepository.js +1 -7
- package/dist/es2019/api/EmojiResource.js +1 -3
- package/dist/es2019/components/common/DeleteButton.js +2 -8
- package/dist/es2019/components/common/EmojiActions.compiled.css +1 -3
- package/dist/es2019/components/common/EmojiActions.js +6 -45
- package/dist/es2019/components/common/EmojiDeletePreview.compiled.css +1 -16
- package/dist/es2019/components/common/EmojiDeletePreview.js +17 -65
- package/dist/es2019/components/common/EmojiErrorMessage.js +2 -9
- package/dist/es2019/components/common/EmojiRadioButton.js +2 -3
- package/dist/es2019/components/common/EmojiUploadPicker.compiled.css +1 -14
- package/dist/es2019/components/common/EmojiUploadPicker.js +7 -87
- package/dist/es2019/components/common/FileChooser.js +15 -25
- package/dist/es2019/components/common/TonePreviewButton.compiled.css +1 -2
- package/dist/es2019/components/common/TonePreviewButton.js +2 -23
- package/dist/es2019/components/common/ToneSelectorInternal.js +1 -10
- package/dist/es2019/components/picker/CategorySelector.compiled.css +0 -6
- package/dist/es2019/components/picker/CategorySelector.js +5 -44
- package/dist/es2019/components/picker/EmojiPickerComponent.compiled.css +1 -2
- package/dist/es2019/components/picker/EmojiPickerComponent.js +44 -61
- package/dist/es2019/components/picker/EmojiPickerEmojiRow.js +1 -2
- package/dist/es2019/components/picker/EmojiPickerFooter.compiled.css +0 -2
- package/dist/es2019/components/picker/EmojiPickerFooter.js +1 -8
- package/dist/es2019/components/picker/EmojiPickerInternal.compiled.css +1 -2
- package/dist/es2019/components/picker/EmojiPickerInternal.js +1 -9
- package/dist/es2019/components/picker/EmojiPickerList.js +29 -35
- package/dist/es2019/components/picker/EmojiPickerListSearch.compiled.css +0 -1
- package/dist/es2019/components/picker/EmojiPickerListSearch.js +2 -24
- package/dist/es2019/components/picker/EmojiPickerSizes.js +1 -2
- package/dist/es2019/components/picker/VirtualList.js +2 -3
- package/dist/es2019/components/picker/categories.js +0 -83
- package/dist/es2019/components/uploader/EmojiUploadComponent.js +0 -2
- package/dist/es2019/util/constants.js +0 -1
- package/dist/esm/api/EmojiRepository.js +1 -7
- package/dist/esm/api/EmojiResource.js +1 -3
- package/dist/esm/components/common/DeleteButton.js +2 -8
- package/dist/esm/components/common/EmojiActions.compiled.css +1 -3
- package/dist/esm/components/common/EmojiActions.js +6 -45
- package/dist/esm/components/common/EmojiDeletePreview.compiled.css +1 -16
- package/dist/esm/components/common/EmojiDeletePreview.js +17 -65
- package/dist/esm/components/common/EmojiErrorMessage.js +2 -9
- package/dist/esm/components/common/EmojiRadioButton.js +3 -4
- package/dist/esm/components/common/EmojiUploadPicker.compiled.css +1 -14
- package/dist/esm/components/common/EmojiUploadPicker.js +7 -90
- package/dist/esm/components/common/FileChooser.js +15 -25
- package/dist/esm/components/common/TonePreviewButton.compiled.css +1 -2
- package/dist/esm/components/common/TonePreviewButton.js +2 -23
- package/dist/esm/components/common/ToneSelectorInternal.js +1 -10
- package/dist/esm/components/picker/CategorySelector.compiled.css +0 -6
- package/dist/esm/components/picker/CategorySelector.js +6 -45
- package/dist/esm/components/picker/EmojiPickerComponent.compiled.css +1 -2
- package/dist/esm/components/picker/EmojiPickerComponent.js +39 -58
- package/dist/esm/components/picker/EmojiPickerEmojiRow.js +1 -2
- package/dist/esm/components/picker/EmojiPickerFooter.compiled.css +0 -2
- package/dist/esm/components/picker/EmojiPickerFooter.js +1 -8
- package/dist/esm/components/picker/EmojiPickerInternal.compiled.css +1 -2
- package/dist/esm/components/picker/EmojiPickerInternal.js +1 -9
- package/dist/esm/components/picker/EmojiPickerList.js +31 -37
- package/dist/esm/components/picker/EmojiPickerListSearch.compiled.css +0 -1
- package/dist/esm/components/picker/EmojiPickerListSearch.js +2 -24
- package/dist/esm/components/picker/EmojiPickerSizes.js +1 -2
- package/dist/esm/components/picker/VirtualList.js +2 -3
- package/dist/esm/components/picker/categories.js +0 -83
- package/dist/esm/components/uploader/EmojiUploadComponent.js +0 -2
- package/dist/esm/util/constants.js +0 -1
- package/dist/types/components/common/EmojiUploadPicker.d.ts +0 -1
- package/dist/types/components/picker/EmojiPickerSizes.d.ts +0 -1
- package/dist/types/components/picker/categories.d.ts +0 -1
- package/dist/types/components/uploader/EmojiUploadComponent.d.ts +0 -1
- package/dist/types/components/uploader/EmojiUploader.d.ts +0 -1
- package/dist/types/util/constants.d.ts +0 -1
- package/package.json +1 -14
- package/dist/cjs/components/common/AddOwnEmoji.compiled.css +0 -6
- package/dist/cjs/components/common/AddOwnEmoji.js +0 -58
- package/dist/cjs/components/common/EmojiUploadPreview.compiled.css +0 -19
- package/dist/cjs/components/common/EmojiUploadPreview.js +0 -119
- package/dist/cjs/components/common/isRefreshEmojiPickerEnabled.js +0 -10
- package/dist/cjs/components/picker/sortCategories.js +0 -15
- package/dist/cjs/util/teamoji26RefreshEmojiPicker.js +0 -19
- package/dist/es2019/components/common/AddOwnEmoji.compiled.css +0 -6
- package/dist/es2019/components/common/AddOwnEmoji.js +0 -49
- package/dist/es2019/components/common/EmojiUploadPreview.compiled.css +0 -19
- package/dist/es2019/components/common/EmojiUploadPreview.js +0 -100
- package/dist/es2019/components/common/isRefreshEmojiPickerEnabled.js +0 -4
- package/dist/es2019/components/picker/sortCategories.js +0 -7
- package/dist/es2019/util/teamoji26RefreshEmojiPicker.js +0 -13
- package/dist/esm/components/common/AddOwnEmoji.compiled.css +0 -6
- package/dist/esm/components/common/AddOwnEmoji.js +0 -49
- package/dist/esm/components/common/EmojiUploadPreview.compiled.css +0 -19
- package/dist/esm/components/common/EmojiUploadPreview.js +0 -110
- package/dist/esm/components/common/isRefreshEmojiPickerEnabled.js +0 -4
- package/dist/esm/components/picker/sortCategories.js +0 -9
- package/dist/esm/util/teamoji26RefreshEmojiPicker.js +0 -13
- package/dist/types/components/common/AddOwnEmoji.d.ts +0 -9
- package/dist/types/components/common/EmojiUploadPreview.d.ts +0 -22
- package/dist/types/components/common/isRefreshEmojiPickerEnabled.d.ts +0 -1
- package/dist/types/components/picker/sortCategories.d.ts +0 -6
- package/dist/types/util/teamoji26RefreshEmojiPicker.d.ts +0 -6
|
@@ -6,36 +6,25 @@ import * as React from 'react';
|
|
|
6
6
|
import { ax, ix } from "@compiled/react/runtime";
|
|
7
7
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
8
8
|
import { useEffect, useLayoutEffect, useState, useRef, memo, useCallback } from 'react';
|
|
9
|
-
import FocusLock from 'react-focus-lock';
|
|
10
9
|
import { FormattedMessage, injectIntl } from 'react-intl';
|
|
11
10
|
import { getDocument } from '@atlaskit/browser-apis';
|
|
12
11
|
import Button from '@atlaskit/button/default/button';
|
|
13
|
-
import AkButton from '@atlaskit/button/standard-button';
|
|
14
|
-
import CrossIcon from '@atlaskit/icon/core/cross';
|
|
15
12
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
16
13
|
import { Box } from '@atlaskit/primitives/compiled/box';
|
|
17
|
-
import { Text } from '@atlaskit/primitives/compiled/text';
|
|
18
14
|
import TextField from '@atlaskit/textfield/text-field';
|
|
19
15
|
import * as ImageUtil from '../../util/image';
|
|
20
16
|
import debug from '../../util/logger';
|
|
21
17
|
import { messages } from '../i18n';
|
|
22
18
|
import CreateEmojiWithRovo from './CreateEmojiWithRovo';
|
|
23
19
|
import EmojiErrorMessage from './EmojiErrorMessage';
|
|
24
|
-
import EmojiUploadPreview from './EmojiUploadPreview';
|
|
25
20
|
import FileChooser from './FileChooser';
|
|
26
21
|
import { UploadStatus } from './internal-types';
|
|
27
|
-
import { isRefreshEmojiPickerEnabled } from './isRefreshEmojiPickerEnabled';
|
|
28
|
-
var closeEmojiUploadButton = null;
|
|
29
22
|
var uploadAddRowNew = null;
|
|
30
|
-
var emojiUpload = null;
|
|
31
23
|
var emojiUploadNew = null;
|
|
32
|
-
var emojiUploadTop = null;
|
|
33
24
|
var emojiUploadTopNew = null;
|
|
34
25
|
var labelStyles = null;
|
|
35
26
|
var labelStylesNew = null;
|
|
36
|
-
var uploadChooseFileEmojiName = null;
|
|
37
27
|
var uploadChooseFileMessage = null;
|
|
38
|
-
var uploadChooseFileRow = null;
|
|
39
28
|
var uploadChooseFileRowNew = null;
|
|
40
29
|
var supportedEmojiUploadMimeTypes = new Set(['image/png', 'image/jpeg', 'image/gif']);
|
|
41
30
|
var supportedEmojiUploadExtensions = ['.png', '.jpg', '.jpeg', '.gif'];
|
|
@@ -60,9 +49,6 @@ var toDefaultUploadName = function toDefaultUploadName(fileName) {
|
|
|
60
49
|
return sanitizeName(nameWithoutExtension).slice(0, maxNameLength);
|
|
61
50
|
};
|
|
62
51
|
var isSupportedEmojiUploadFileType = function isSupportedEmojiUploadFileType(file) {
|
|
63
|
-
if (!isRefreshEmojiPickerEnabled()) {
|
|
64
|
-
return true;
|
|
65
|
-
}
|
|
66
52
|
if (supportedEmojiUploadMimeTypes.has(file.type)) {
|
|
67
53
|
return true;
|
|
68
54
|
}
|
|
@@ -86,7 +72,6 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
|
|
|
86
72
|
aiSection = props.aiSection,
|
|
87
73
|
intl = props.intl;
|
|
88
74
|
var formatMessage = intl.formatMessage;
|
|
89
|
-
var disableChooser = !name;
|
|
90
75
|
var fileChooserButtonDescriptionId = 'choose.emoji.file.button.screen.reader.description.id';
|
|
91
76
|
var inputRef = useRef(null);
|
|
92
77
|
var onKeyDownHandler = useCallback(function (event) {
|
|
@@ -100,14 +85,12 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
|
|
|
100
85
|
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
|
|
101
86
|
});
|
|
102
87
|
}, []);
|
|
103
|
-
var cancelLabel = formatMessage(messages.cancelLabel);
|
|
104
88
|
var emojiPlaceholder = formatMessage(messages.emojiPlaceholder);
|
|
105
89
|
var emojiNameAriaLabel = formatMessage(messages.emojiNameAriaLabel);
|
|
106
|
-
var emojiChooseFileTitle = formatMessage(messages.emojiChooseFileTitle);
|
|
107
90
|
var emojiChooseFileTitleNew = formatMessage(messages.emojiChooseFileDndTitle);
|
|
108
91
|
var isUploading = uploadStatus === UploadStatus.Uploading;
|
|
109
92
|
var addEmojiDisabled = !previewImage || !name || isUploading;
|
|
110
|
-
return
|
|
93
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
111
94
|
"data-testid": uploadEmojiComponentTestId,
|
|
112
95
|
className: ax(["_ca0qu2gc _u5f3pxbi _n3tdu2gc _19bvpxbi _1e0c1txw _2lx21bp4 _1bah1b1v"])
|
|
113
96
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -119,7 +102,7 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
|
|
|
119
102
|
className: ax(["_zulp12x7 _1e0c1txw _2lx21bp4 _1tker0r7"])
|
|
120
103
|
}, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, function () {
|
|
121
104
|
return /*#__PURE__*/React.createElement(FileChooser, {
|
|
122
|
-
label:
|
|
105
|
+
label: emojiChooseFileTitleNew,
|
|
123
106
|
onChange: onChooseFile,
|
|
124
107
|
onClick: onClick,
|
|
125
108
|
accept: "image/png,image/jpeg,image/gif",
|
|
@@ -164,62 +147,7 @@ var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
|
|
|
164
147
|
appearance: "primary",
|
|
165
148
|
isDisabled: addEmojiDisabled,
|
|
166
149
|
isLoading: isUploading
|
|
167
|
-
}, /*#__PURE__*/React.createElement(FormattedMessage, messages.addEmojiLabel))))
|
|
168
|
-
"data-testid": uploadEmojiComponentTestId,
|
|
169
|
-
className: ax(["_ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _1e0c1txw _2lx21bp4 _1bah1b1v"])
|
|
170
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
171
|
-
className: ax(["_11c8wadc _n3tdu2gc _1e0c1txw _1bah1yb4 _4cvresu3"])
|
|
172
|
-
}, /*#__PURE__*/React.createElement("label", {
|
|
173
|
-
htmlFor: "new-emoji-name-input",
|
|
174
|
-
className: ax(["_1w90azsu", "_11c8wadc _k48p1pd9"])
|
|
175
|
-
}, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
|
|
176
|
-
className: ax(["_1e0c1txw"])
|
|
177
|
-
}, /*#__PURE__*/React.createElement(AkButton, {
|
|
178
|
-
onClick: onUploadCancelled,
|
|
179
|
-
"aria-label": cancelLabel,
|
|
180
|
-
appearance: "subtle",
|
|
181
|
-
spacing: "none",
|
|
182
|
-
shouldFitContainer: true,
|
|
183
|
-
testId: cancelEmojiUploadPickerTestId,
|
|
184
|
-
name: messages.addCustomEmojiLabel.defaultMessage
|
|
185
|
-
}, /*#__PURE__*/React.createElement(CrossIcon, {
|
|
186
|
-
color: "currentColor",
|
|
187
|
-
label: cancelLabel
|
|
188
|
-
})))), /*#__PURE__*/React.createElement("div", {
|
|
189
|
-
className: ax(["_1e0c1txw _1bah1yb4 _n3tdu2gc _gy1p12x7"])
|
|
190
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
191
|
-
className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1rwq1j28 _scffidpf _xmji1r31 _gxxuglyw _34ir1o36 _coc6glyw _9bj2glyw"])
|
|
192
|
-
}, /*#__PURE__*/React.createElement(TextField, {
|
|
193
|
-
placeholder: emojiPlaceholder,
|
|
194
|
-
"aria-label": emojiNameAriaLabel,
|
|
195
|
-
maxLength: maxNameLength,
|
|
196
|
-
onChange: onNameChange,
|
|
197
|
-
onKeyDown: onKeyDownHandler,
|
|
198
|
-
value: name,
|
|
199
|
-
isCompact: true,
|
|
200
|
-
autoFocus: true,
|
|
201
|
-
testId: uploadEmojiNameInputTestId,
|
|
202
|
-
ref: inputRef,
|
|
203
|
-
id: "new-emoji-name-input",
|
|
204
|
-
"aria-required": true
|
|
205
|
-
})), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, function () {
|
|
206
|
-
return /*#__PURE__*/React.createElement(FileChooser, {
|
|
207
|
-
label: isRefreshEmojiPickerEnabled() ? emojiChooseFileTitleNew : emojiChooseFileTitle,
|
|
208
|
-
onChange: onChooseFile,
|
|
209
|
-
onClick: onClick,
|
|
210
|
-
accept: "image/png,image/jpeg,image/gif",
|
|
211
|
-
ariaDescribedBy: fileChooserButtonDescriptionId,
|
|
212
|
-
isDisabled: disableChooser
|
|
213
|
-
});
|
|
214
|
-
}))), /*#__PURE__*/React.createElement("div", {
|
|
215
|
-
id: fileChooserButtonDescriptionId
|
|
216
|
-
}, !errorMessage ? /*#__PURE__*/React.createElement(Text, {
|
|
217
|
-
as: "p",
|
|
218
|
-
size: "small"
|
|
219
|
-
}, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiImageRequirements)) : /*#__PURE__*/React.createElement(EmojiErrorMessage, {
|
|
220
|
-
errorStyle: "chooseFile",
|
|
221
|
-
message: errorMessage
|
|
222
|
-
})));
|
|
150
|
+
}, /*#__PURE__*/React.createElement(FormattedMessage, messages.addEmojiLabel))));
|
|
223
151
|
});
|
|
224
152
|
var EmojiUploadPicker = function EmojiUploadPicker(props) {
|
|
225
153
|
var _document$activeEleme;
|
|
@@ -228,8 +156,6 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
|
|
|
228
156
|
onUploadEmoji = props.onUploadEmoji,
|
|
229
157
|
onFileChooserClicked = props.onFileChooserClicked,
|
|
230
158
|
onUploadCancelled = props.onUploadCancelled,
|
|
231
|
-
_props$disableFocusLo = props.disableFocusLock,
|
|
232
|
-
disableFocusLock = _props$disableFocusLo === void 0 ? false : _props$disableFocusLo,
|
|
233
159
|
contentId = props.contentId,
|
|
234
160
|
fireAnalytics = props.fireAnalytics,
|
|
235
161
|
onUploadPreviewErrorChange = props.onUploadPreviewErrorChange,
|
|
@@ -345,7 +271,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
|
|
|
345
271
|
case 0:
|
|
346
272
|
_context.prev = 0;
|
|
347
273
|
setFilename(file.name);
|
|
348
|
-
if (!name
|
|
274
|
+
if (!name) {
|
|
349
275
|
setName(toDefaultUploadName(file.name));
|
|
350
276
|
}
|
|
351
277
|
_context.next = 1;
|
|
@@ -417,7 +343,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
|
|
|
417
343
|
var onChooseFileClicked = function onChooseFileClicked() {
|
|
418
344
|
onFileChooserClicked && onFileChooserClicked();
|
|
419
345
|
};
|
|
420
|
-
var isDuplicateNameError = errorMessage !== null && errorMessage !== undefined
|
|
346
|
+
var isDuplicateNameError = errorMessage !== null && errorMessage !== undefined;
|
|
421
347
|
|
|
422
348
|
// "Create an emoji with Rovo" AI generation section. Only rendered when the
|
|
423
349
|
// experiment is on AND a page content id is available (the image generation
|
|
@@ -429,14 +355,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
|
|
|
429
355
|
fireAnalytics: fireAnalytics,
|
|
430
356
|
onEmojiGenerated: onEmojiGenerated
|
|
431
357
|
}) : null;
|
|
432
|
-
var content =
|
|
433
|
-
errorMessage: errorMessage,
|
|
434
|
-
name: name,
|
|
435
|
-
onAddEmoji: onAddEmoji,
|
|
436
|
-
onUploadCancelled: cancelUpload,
|
|
437
|
-
previewImage: previewImage,
|
|
438
|
-
uploadStatus: uploadStatus
|
|
439
|
-
}) : /*#__PURE__*/React.createElement(ChooseEmojiFile, {
|
|
358
|
+
var content = /*#__PURE__*/React.createElement(ChooseEmojiFile, {
|
|
440
359
|
name: name,
|
|
441
360
|
onChooseFile: onChooseFile,
|
|
442
361
|
onClick: onChooseFileClicked,
|
|
@@ -450,9 +369,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
|
|
|
450
369
|
aiSection: aiSection,
|
|
451
370
|
intl: intl
|
|
452
371
|
});
|
|
453
|
-
return
|
|
454
|
-
noFocusGuards: true
|
|
455
|
-
}, content);
|
|
372
|
+
return content;
|
|
456
373
|
};
|
|
457
374
|
|
|
458
375
|
// eslint-disable-next-line @typescript-eslint/no-restricted-types
|
|
@@ -8,7 +8,6 @@ import UploadIcon from '@atlaskit/icon/core/upload';
|
|
|
8
8
|
import { dropTargetForExternal } from '@atlaskit/pragmatic-drag-and-drop/adapter/drop-target-for-external';
|
|
9
9
|
import { containsFiles } from '@atlaskit/pragmatic-drag-and-drop/utils/contains-files';
|
|
10
10
|
import { getFiles } from '@atlaskit/pragmatic-drag-and-drop/utils/get-files';
|
|
11
|
-
import { isRefreshEmojiPickerEnabled } from './isRefreshEmojiPickerEnabled';
|
|
12
11
|
export var chooseFileButtonTestId = 'choose-file-button';
|
|
13
12
|
export var fileUploadInputTestId = 'file-upload';
|
|
14
13
|
export var dropzoneTestId = 'file-dropzone';
|
|
@@ -67,7 +66,7 @@ var FileChooser = function FileChooser(props) {
|
|
|
67
66
|
}, [onChange]);
|
|
68
67
|
useEffect(function () {
|
|
69
68
|
var element = dropzoneRef.current;
|
|
70
|
-
if (!element
|
|
69
|
+
if (!element) {
|
|
71
70
|
return;
|
|
72
71
|
}
|
|
73
72
|
var suppressNativeFileDrop = function suppressNativeFileDrop(event) {
|
|
@@ -169,31 +168,22 @@ var FileChooser = function FileChooser(props) {
|
|
|
169
168
|
},
|
|
170
169
|
"data-testid": fileUploadInputTestId
|
|
171
170
|
});
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
}) : /*#__PURE__*/React.createElement(Button, {
|
|
185
|
-
onClick: handleOnChooseFile,
|
|
186
|
-
isDisabled: isDisabled,
|
|
187
|
-
appearance: "subtle",
|
|
188
|
-
iconBefore: UploadIcon,
|
|
189
|
-
"aria-describedby": ariaDescribedBy,
|
|
190
|
-
testId: chooseFileButtonTestId,
|
|
191
|
-
ref: fileButtonRef
|
|
192
|
-
}, label), hiddenInput);
|
|
193
|
-
}
|
|
194
|
-
return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Button, {
|
|
171
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
172
|
+
ref: dropzoneRef,
|
|
173
|
+
"data-testid": dropzoneTestId,
|
|
174
|
+
"data-dragging": isDragging ? 'true' : undefined,
|
|
175
|
+
role: "region",
|
|
176
|
+
"aria-label": label,
|
|
177
|
+
className: ax(["_zulpu2gc _2rko1qi0 _189ee4h9 _1dqogq9o _1h6d1l7x _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _4t3i7l9q _u5f3utpp _19bvutpp _bfhkhfxm _80omtlke _k8m01rje _1oec1ign _6fl4574g", isDragging && "_1h6dq98m _bfhkufnl"])
|
|
178
|
+
}, previewImage ? /*#__PURE__*/React.createElement("img", {
|
|
179
|
+
src: previewImage,
|
|
180
|
+
alt: previewAlt,
|
|
181
|
+
className: ax(["_c71l1j4a _p12f1osq _5ral1f51"])
|
|
182
|
+
}) : /*#__PURE__*/React.createElement(Button, {
|
|
195
183
|
onClick: handleOnChooseFile,
|
|
196
184
|
isDisabled: isDisabled,
|
|
185
|
+
appearance: "subtle",
|
|
186
|
+
iconBefore: UploadIcon,
|
|
197
187
|
"aria-describedby": ariaDescribedBy,
|
|
198
188
|
testId: chooseFileButtonTestId,
|
|
199
189
|
ref: fileButtonRef
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
|
|
2
2
|
._19itidpf{border:0}
|
|
3
|
-
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
|
-
._2rkofajl{border-radius:var(--ds-radius-small,3px)}._11bcidpf::-moz-focus-inner{border-width:0}
|
|
3
|
+
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}._11bcidpf::-moz-focus-inner{border-width:0}
|
|
5
4
|
._dqozglyw::-moz-focus-inner{border-style:none}
|
|
6
5
|
._19bvidpf{padding-left:0}
|
|
7
6
|
._1at812x7>span{padding-top:var(--ds-space-075,6px)}
|
|
@@ -3,7 +3,6 @@ import "./TonePreviewButton.compiled.css";
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
5
|
import { forwardRef, memo } from 'react';
|
|
6
|
-
import { isTeamoji26RefreshEmojiPickerEnabledNoExposure } from '../../util/teamoji26RefreshEmojiPicker';
|
|
7
6
|
import Emoji from './Emoji';
|
|
8
7
|
export var tonePreviewTestId = 'tone-preview';
|
|
9
8
|
var emojiButton = null;
|
|
@@ -21,7 +20,7 @@ export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
21
20
|
onSelected = props.onSelected,
|
|
22
21
|
_props$isVisible = props.isVisible,
|
|
23
22
|
isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
|
|
24
|
-
return
|
|
23
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
25
24
|
ref: ref,
|
|
26
25
|
onClick: onSelected,
|
|
27
26
|
onKeyDown: onKeyDown,
|
|
@@ -35,27 +34,7 @@ export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
35
34
|
},
|
|
36
35
|
"data-testid": tonePreviewTestId,
|
|
37
36
|
type: "button",
|
|
38
|
-
className: ax(["_19itidpf
|
|
39
|
-
}, /*#__PURE__*/React.createElement(Emoji, {
|
|
40
|
-
emoji: emoji,
|
|
41
|
-
selectOnHover: selectOnHover,
|
|
42
|
-
shouldBeInteractive: false,
|
|
43
|
-
"aria-hidden": true
|
|
44
|
-
})) : /*#__PURE__*/React.createElement("button", {
|
|
45
|
-
ref: ref,
|
|
46
|
-
onClick: onSelected,
|
|
47
|
-
onKeyDown: onKeyDown,
|
|
48
|
-
"aria-label": ariaLabelText,
|
|
49
|
-
"aria-expanded": ariaExpanded,
|
|
50
|
-
"aria-controls": ariaControls
|
|
51
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
52
|
-
,
|
|
53
|
-
style: {
|
|
54
|
-
overflow: 'hidden'
|
|
55
|
-
},
|
|
56
|
-
"data-testid": tonePreviewTestId,
|
|
57
|
-
type: "button",
|
|
58
|
-
className: ax(["_19itidpf _2rkofajl _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
|
|
37
|
+
className: ax(["_19itidpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1y54 _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw", "_19itia51", "_2rko1qi0"])
|
|
59
38
|
}, /*#__PURE__*/React.createElement(Emoji, {
|
|
60
39
|
emoji: emoji,
|
|
61
40
|
selectOnHover: selectOnHover,
|
|
@@ -13,7 +13,6 @@ import { toneSelectedEvent } from '../../util/analytics/toneSelectedEvent';
|
|
|
13
13
|
import { toneSelectorOpenedEvent } from '../../util/analytics/toneSelectorOpenedEvent';
|
|
14
14
|
import { messages } from '../i18n';
|
|
15
15
|
import EmojiRadioButton from './EmojiRadioButton';
|
|
16
|
-
import { isRefreshEmojiPickerEnabled } from './isRefreshEmojiPickerEnabled';
|
|
17
16
|
import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
|
|
18
17
|
import { toneSelectorTestId } from './ToneSelector';
|
|
19
18
|
var hidden = null;
|
|
@@ -104,7 +103,7 @@ export var ToneSelectorInternal = function ToneSelectorInternal(props) {
|
|
|
104
103
|
onMouseDown: onMouseDownHandler,
|
|
105
104
|
className: ax([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
|
|
106
105
|
}, emojiToneCollection.map(function (tone, renderIndex) {
|
|
107
|
-
return
|
|
106
|
+
return /*#__PURE__*/React.createElement(EmojiRadioButton, {
|
|
108
107
|
ref: function ref(el) {
|
|
109
108
|
radioRefs.current[renderIndex] = el;
|
|
110
109
|
if (tone.isSelected && selectedToneRadioRef) {
|
|
@@ -120,14 +119,6 @@ export var ToneSelectorInternal = function ToneSelectorInternal(props) {
|
|
|
120
119
|
},
|
|
121
120
|
onSelected: onToneSelectedHandler(tone.toneIndex),
|
|
122
121
|
selectOnHover: true
|
|
123
|
-
}) : /*#__PURE__*/React.createElement(EmojiRadioButton, {
|
|
124
|
-
ref: tone.isSelected ? selectedToneRadioRef : null,
|
|
125
|
-
defaultChecked: tone.isSelected,
|
|
126
|
-
ariaLabelText: tone.label,
|
|
127
|
-
key: "".concat(tone.id),
|
|
128
|
-
emoji: tone,
|
|
129
|
-
onSelected: onToneSelectedHandler(tone.toneIndex),
|
|
130
|
-
selectOnHover: true
|
|
131
122
|
});
|
|
132
123
|
}));
|
|
133
124
|
};
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
._2rko12b0{border-radius:var(--ds-radius-small,4px)}
|
|
2
1
|
._v564h5h4{transition:color .2s ease}
|
|
3
2
|
._189eidpf{border-width:0}._13li1mok{border-top-left-radius:var(--ds-radius-large,8px)}
|
|
4
3
|
._16jlidpf{flex-grow:0}
|
|
5
4
|
._19bv12x7{padding-left:var(--ds-space-075,6px)}
|
|
6
5
|
._19bvu2gc{padding-left:var(--ds-space-100,8px)}
|
|
7
|
-
._19bvze3t{padding-left:var(--ds-space-0,0)}
|
|
8
6
|
._1bah1b1v{justify-content:space-around}
|
|
9
7
|
._1bah1h6o{justify-content:center}
|
|
10
8
|
._1doc1dm9{border-bottom-width:var(--ds-border-width-selected,2px)}
|
|
@@ -18,15 +16,12 @@
|
|
|
18
16
|
._2lx2vrvc{flex-direction:row}
|
|
19
17
|
._4cvr1fhb{align-items:stretch}
|
|
20
18
|
._4cvr1h6o{align-items:center}
|
|
21
|
-
._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
|
|
22
19
|
._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
|
|
23
20
|
._bfhkvuon{background-color:var(--ds-surface,#fff)}
|
|
24
|
-
._ca0q12x7{padding-top:var(--ds-space-075,6px)}
|
|
25
21
|
._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
|
|
26
22
|
._ca0qze3t{padding-top:var(--ds-space-0,0)}
|
|
27
23
|
._dpd31txw button{display:flex}
|
|
28
24
|
._i0dl1wug{flex-basis:auto}
|
|
29
|
-
._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
|
|
30
25
|
._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
|
|
31
26
|
._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
|
|
32
27
|
._qrwq1mok{border-top-right-radius:var(--ds-radius-large,8px)}
|
|
@@ -34,7 +29,6 @@
|
|
|
34
29
|
._syaz6x5g{color:var(--ds-text-selected,#1868db)}
|
|
35
30
|
._u5f312x7{padding-right:var(--ds-space-075,6px)}
|
|
36
31
|
._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
|
|
37
|
-
._u5f3ze3t{padding-right:var(--ds-space-0,0)}
|
|
38
32
|
._1jc41ihb:hover{border-bottom-color:var(--ds-border-bold,#7d818a)}
|
|
39
33
|
._1jc4a755:hover{border-bottom-color:var(--ds-border-brand,#1868db)}
|
|
40
34
|
._30l31rpy:hover{color:var(--ds-text-subtlest,#6b6e76)}
|
|
@@ -10,33 +10,26 @@ import { Pressable } from '@atlaskit/primitives/compiled/pressable';
|
|
|
10
10
|
import Tooltip from '@atlaskit/tooltip/Tooltip';
|
|
11
11
|
import { usePrevious } from '../../hooks/usePrevious';
|
|
12
12
|
import { CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED, defaultCategories, KeyboardKeys } from '../../util/constants';
|
|
13
|
-
import { isRefreshEmojiPickerEnabled } from '../common/isRefreshEmojiPickerEnabled';
|
|
14
13
|
import { messages } from '../i18n';
|
|
15
|
-
import {
|
|
14
|
+
import { CategoryDescriptionMapNew } from './categories';
|
|
16
15
|
import { categorySelectorCategoryTestId } from './categorySelectorCategoryTestId';
|
|
17
16
|
import { RENDER_EMOJI_PICKER_LIST_TESTID } from './EmojiPickerList';
|
|
18
|
-
import { sortCategories } from './sortCategories';
|
|
19
17
|
import { sortCategoriesNew } from './sortCategoriesNew';
|
|
20
18
|
var styles = {
|
|
21
|
-
commonCategory: "_2rko12b0 _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
|
|
22
19
|
commonCategoryNew: "_v564h5h4 _189eidpf _bfhksm61 _ca0qu2gc _n3tdu2gc _19bv12x7 _u5f312x7 _1e0c1txw _4cvr1h6o _1bah1h6o",
|
|
23
|
-
defaultCategory: "_syaz1rpy _30l36x5g",
|
|
24
20
|
defaultCategoryNew: "_syaz1rpy _1doc1dm9 _1il9nqa1 _1o3i1j28 _30l31rpy _1jc41ihb",
|
|
25
|
-
activeCategory: "_syaz6x5g _30l36x5g",
|
|
26
21
|
activeCategoryNew: "_syaz6x5g _1doc1dm9 _1il9nqa1 _1o3ia755 _30l36x5g _1jc4a755",
|
|
27
22
|
disabledCategory: "_syaz1rpy"
|
|
28
23
|
};
|
|
29
|
-
var categorySelector = null;
|
|
30
24
|
var categorySelectorNew = null;
|
|
31
|
-
var categorySelectorTablist = null;
|
|
32
25
|
var categorySelectorTablistNew = null;
|
|
33
26
|
var addNewCategories = function addNewCategories(oldCategories, newCategories) {
|
|
34
27
|
if (!newCategories) {
|
|
35
28
|
return oldCategories;
|
|
36
29
|
}
|
|
37
30
|
return oldCategories.concat(newCategories.filter(function (category) {
|
|
38
|
-
return !!
|
|
39
|
-
})).sort(
|
|
31
|
+
return !!CategoryDescriptionMapNew[category];
|
|
32
|
+
})).sort(sortCategoriesNew);
|
|
40
33
|
};
|
|
41
34
|
export var categorySelectorComponentTestId = 'category-selector-component';
|
|
42
35
|
var CategorySelector = function CategorySelector(props) {
|
|
@@ -130,14 +123,14 @@ var CategorySelector = function CategorySelector(props) {
|
|
|
130
123
|
};
|
|
131
124
|
var categoriesSection;
|
|
132
125
|
if (categories) {
|
|
133
|
-
categoriesSection =
|
|
126
|
+
categoriesSection = /*#__PURE__*/React.createElement("div", {
|
|
134
127
|
role: "tablist",
|
|
135
128
|
"aria-label": formatMessage(messages.categoriesSelectorLabel),
|
|
136
129
|
"data-testid": categorySelectorComponentTestId,
|
|
137
130
|
ref: categoryRef,
|
|
138
131
|
className: ax(["_ca0qze3t _n3tdze3t _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1fhb"])
|
|
139
132
|
}, categories.map(function (categoryId, index) {
|
|
140
|
-
var category =
|
|
133
|
+
var category = CategoryDescriptionMapNew[categoryId];
|
|
141
134
|
var Icon = category.icon;
|
|
142
135
|
var categoryName = formatMessage(messages[category.name]);
|
|
143
136
|
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
@@ -160,42 +153,10 @@ var CategorySelector = function CategorySelector(props) {
|
|
|
160
153
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
161
154
|
label: categoryName
|
|
162
155
|
})));
|
|
163
|
-
})) : /*#__PURE__*/React.createElement("div", {
|
|
164
|
-
role: "tablist",
|
|
165
|
-
"aria-label": formatMessage(messages.categoriesSelectorLabel),
|
|
166
|
-
"data-testid": categorySelectorComponentTestId,
|
|
167
|
-
ref: categoryRef,
|
|
168
|
-
className: ax(["_ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1h6o"])
|
|
169
|
-
}, categories.map(function (categoryId, index) {
|
|
170
|
-
var category = isRefreshEmojiPickerEnabled() ? CategoryDescriptionMapNew[categoryId] : CategoryDescriptionMap[categoryId];
|
|
171
|
-
var Icon = category.icon;
|
|
172
|
-
var categoryName = formatMessage(messages[category.name]);
|
|
173
|
-
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
174
|
-
content: categoryName,
|
|
175
|
-
position: "bottom",
|
|
176
|
-
key: category.id
|
|
177
|
-
}, /*#__PURE__*/React.createElement(Pressable, {
|
|
178
|
-
id: "category-selector-".concat(category.id),
|
|
179
|
-
"data-focus-index": index,
|
|
180
|
-
"aria-label": categoryName,
|
|
181
|
-
"aria-controls": currentFocus === index ? RENDER_EMOJI_PICKER_LIST_TESTID : undefined,
|
|
182
|
-
"aria-selected": categoryId === activeCategoryId,
|
|
183
|
-
xcss: cx(styles.commonCategory, styles.defaultCategory, categoryId === activeCategoryId && styles.activeCategory, disableCategories && styles.disabledCategory),
|
|
184
|
-
isDisabled: disableCategories,
|
|
185
|
-
onClick: handleClick(categoryId, index),
|
|
186
|
-
testId: categorySelectorCategoryTestId(categoryId),
|
|
187
|
-
tabIndex: currentFocus === index ? 0 : -1,
|
|
188
|
-
onKeyDown: handleKeyDown,
|
|
189
|
-
role: "tab"
|
|
190
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
191
|
-
label: categoryName
|
|
192
|
-
})));
|
|
193
156
|
}));
|
|
194
157
|
}
|
|
195
|
-
return
|
|
158
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
196
159
|
className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _bfhkvuon _13li1mok _qrwq1mok _ca0qze3t _n3tdze3t _1doce4h9 _1il9nqa1 _1o3i1l7x _dpd31txw"])
|
|
197
|
-
}, categoriesSection) : /*#__PURE__*/React.createElement("div", {
|
|
198
|
-
className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _bfhkhfxm _dpd31txw"])
|
|
199
160
|
}, categoriesSection);
|
|
200
161
|
};
|
|
201
162
|
export default CategorySelector;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
._19itahnd{border:var(--ds-border,#0b120e24) var(--ds-border-width,1px) solid}
|
|
2
|
-
._2rko1mok{border-radius:var(--ds-radius-large,8px)}
|
|
3
|
-
._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16jlkb7n{flex-grow:1}
|
|
2
|
+
._2rko1mok{border-radius:var(--ds-radius-large,8px)}._16jlkb7n{flex-grow:1}
|
|
4
3
|
._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
5
4
|
._18m915vq{overflow-y:hidden}
|
|
6
5
|
._18m91wug{overflow-y:auto}
|