@atlaskit/emoji 71.5.0 → 71.5.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.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/components/common/EmojiActions.js +4 -2
- package/dist/cjs/components/picker/EmojiPickerList.js +31 -6
- package/dist/cjs/util/analytics/analytics.js +1 -1
- package/dist/es2019/components/common/EmojiActions.js +4 -2
- package/dist/es2019/components/picker/EmojiPickerList.js +22 -2
- package/dist/es2019/util/analytics/analytics.js +1 -1
- package/dist/esm/components/common/EmojiActions.js +4 -2
- package/dist/esm/components/picker/EmojiPickerList.js +31 -6
- package/dist/esm/util/analytics/analytics.js +1 -1
- package/dist/types/components/common/EmojiActions.d.ts +1 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/emoji
|
|
2
2
|
|
|
3
|
+
## 71.5.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 71.5.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`488ec8f5b8696`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/488ec8f5b8696) -
|
|
14
|
+
Show the productivity emoji colour picker around productivity-related Atlassian subcategories
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 71.5.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
|
@@ -51,6 +51,7 @@ var emojiToneSelectorContainer = null;
|
|
|
51
51
|
var productivityColorPopup = null;
|
|
52
52
|
var previewFooter = null;
|
|
53
53
|
var previewFooterNew = null;
|
|
54
|
+
var atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
|
|
54
55
|
var emojiActionsTestId = exports.emojiActionsTestId = 'emoji-actions';
|
|
55
56
|
var uploadEmojiTestId = exports.uploadEmojiTestId = 'upload-emoji';
|
|
56
57
|
|
|
@@ -92,6 +93,7 @@ var AddOwnEmoji = exports.AddOwnEmoji = function AddOwnEmoji(props) {
|
|
|
92
93
|
};
|
|
93
94
|
var TonesWrapper = function TonesWrapper(props) {
|
|
94
95
|
var activeCategoryId = props.activeCategoryId,
|
|
96
|
+
activeAtlassianSubcategory = props.activeAtlassianSubcategory,
|
|
95
97
|
onProductivityColorSelected = props.onProductivityColorSelected,
|
|
96
98
|
productivityColorPreviewEmojis = props.productivityColorPreviewEmojis,
|
|
97
99
|
selectedProductivityColor = props.selectedProductivityColor,
|
|
@@ -149,7 +151,7 @@ var TonesWrapper = function TonesWrapper(props) {
|
|
|
149
151
|
openProductivityColorSelectorWithKeyboard.current = true;
|
|
150
152
|
}
|
|
151
153
|
}, []);
|
|
152
|
-
var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && isRefreshEmojiPickerEnabled());
|
|
154
|
+
var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(activeAtlassianSubcategory) && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && isRefreshEmojiPickerEnabled());
|
|
153
155
|
if (shouldShowProductivityColorSelector) {
|
|
154
156
|
var previewEmoji = (productivityColorPreviewEmojis === null || productivityColorPreviewEmojis === void 0 ? void 0 : productivityColorPreviewEmojis[selectedProductivityColor]) || Object.values(productivityColorPreviewEmojis || {})[0];
|
|
155
157
|
if (!previewEmoji) {
|
|
@@ -230,7 +232,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
|
|
|
230
232
|
showToneSelector = _useState6[0],
|
|
231
233
|
setShowToneSelector = _useState6[1];
|
|
232
234
|
var wasProductivityColorSelectorOpen = (0, _react.useRef)(false);
|
|
233
|
-
var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && isRefreshEmojiPickerEnabled());
|
|
235
|
+
var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(props.activeAtlassianSubcategory) && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && isRefreshEmojiPickerEnabled());
|
|
234
236
|
var onToneOpenHandler = (0, _react.useCallback)(function () {
|
|
235
237
|
return setShowToneSelector(true);
|
|
236
238
|
}, []);
|
|
@@ -41,7 +41,8 @@ var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
|
|
|
41
41
|
return isEnabled;
|
|
42
42
|
};
|
|
43
43
|
var atlassianCategory = 'ATLASSIAN';
|
|
44
|
-
var
|
|
44
|
+
var productivityAtlassianSubcategory = 'Productivity';
|
|
45
|
+
var atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', productivityAtlassianSubcategory, 'Logos'];
|
|
45
46
|
|
|
46
47
|
/**
|
|
47
48
|
* Emoji grouped by a category title ie. Frequent, Your Uploads, All Uploads
|
|
@@ -108,13 +109,17 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
|
|
|
108
109
|
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
109
110
|
lastYourUploadsRow = _useState6[0],
|
|
110
111
|
setLastYourUploadsRow = _useState6[1];
|
|
112
|
+
var _useState7 = (0, _react.useState)(null),
|
|
113
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
114
|
+
activeAtlassianSubcategory = _useState8[0],
|
|
115
|
+
setActiveAtlassianSubcategory = _useState8[1];
|
|
111
116
|
var categoryTracker = (0, _react.useMemo)(function () {
|
|
112
117
|
return new _CategoryTracker.default();
|
|
113
118
|
}, []);
|
|
114
|
-
var
|
|
115
|
-
|
|
116
|
-
categoriesChanged =
|
|
117
|
-
setCategoriesChanged =
|
|
119
|
+
var _useState9 = (0, _react.useState)(false),
|
|
120
|
+
_useState0 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
121
|
+
categoriesChanged = _useState0[0],
|
|
122
|
+
setCategoriesChanged = _useState0[1];
|
|
118
123
|
var isTeamojiExperimentEnabled = isRefreshEmojiPickerEnabled();
|
|
119
124
|
var visibleEmojis = (0, _react.useMemo)(function () {
|
|
120
125
|
return isTeamojiExperimentEnabled ? (0, _hiddenEmojis.filterHiddenEmojis)(emojis) : emojis;
|
|
@@ -171,6 +176,19 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
|
|
|
171
176
|
return categoryToGroupMap;
|
|
172
177
|
};
|
|
173
178
|
}, [addToCategoryMap, isTeamojiExperimentEnabled]);
|
|
179
|
+
var findAtlassianSubcategoryToActivate = (0, _react.useCallback)(function (startIndex) {
|
|
180
|
+
var row = virtualItems[startIndex];
|
|
181
|
+
if (row instanceof _EmojiPickerVirtualItems.CategoryHeadingItem && row.props.id === atlassianCategory) {
|
|
182
|
+
var nextAtlassianEmojiRow = virtualItems.slice(startIndex + 1).find(function (item) {
|
|
183
|
+
return item instanceof _EmojiPickerVirtualItems.EmojisRowItem && item.props.category === atlassianCategory;
|
|
184
|
+
});
|
|
185
|
+
return (nextAtlassianEmojiRow === null || nextAtlassianEmojiRow === void 0 ? void 0 : nextAtlassianEmojiRow.props.title) || row.props.title;
|
|
186
|
+
}
|
|
187
|
+
if (row instanceof _EmojiPickerVirtualItems.EmojisRowItem && row.props.category === atlassianCategory) {
|
|
188
|
+
return row.props.title;
|
|
189
|
+
}
|
|
190
|
+
return null;
|
|
191
|
+
}, [virtualItems]);
|
|
174
192
|
|
|
175
193
|
/**
|
|
176
194
|
* onRowsRendered callback function
|
|
@@ -194,13 +212,19 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
|
|
|
194
212
|
if (!query) {
|
|
195
213
|
// Calculate category in view - only relevant if categories shown, i.e. no query
|
|
196
214
|
var currentCategory = findCategoryToActivate(rowItem);
|
|
215
|
+
if (isTeamojiExperimentEnabled) {
|
|
216
|
+
var currentAtlassianSubcategory = findAtlassianSubcategoryToActivate(startIndex);
|
|
217
|
+
if (activeAtlassianSubcategory !== currentAtlassianSubcategory) {
|
|
218
|
+
setActiveAtlassianSubcategory(currentAtlassianSubcategory);
|
|
219
|
+
}
|
|
220
|
+
}
|
|
197
221
|
if (currentCategory !== null && activeCategoryId !== currentCategory) {
|
|
198
222
|
if (onCategoryActivated) {
|
|
199
223
|
onCategoryActivated(currentCategory);
|
|
200
224
|
}
|
|
201
225
|
}
|
|
202
226
|
}
|
|
203
|
-
}, [virtualItems, query, activeCategoryId, onCategoryActivated]);
|
|
227
|
+
}, [virtualItems, query, activeAtlassianSubcategory, activeCategoryId, findAtlassianSubcategoryToActivate, isTeamojiExperimentEnabled, onCategoryActivated]);
|
|
204
228
|
var buildEmojiGroupedByCategory = (0, _react.useCallback)(function (emojis, currentUser) {
|
|
205
229
|
var categoryToGroupMap = emojis.reduce(groupByCategory(currentUser), {});
|
|
206
230
|
setAllEmojiGroups(Object.keys(categoryToGroupMap).map(function (key) {
|
|
@@ -471,6 +495,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
|
|
|
471
495
|
onToneSelectorCancelled: onToneSelectorCancelled,
|
|
472
496
|
toneEmoji: toneEmoji,
|
|
473
497
|
activeCategoryId: isTeamojiExperimentEnabled ? activeCategoryId : undefined,
|
|
498
|
+
activeAtlassianSubcategory: isTeamojiExperimentEnabled ? activeAtlassianSubcategory : undefined,
|
|
474
499
|
productivityColorPreviewEmojis: isTeamojiExperimentEnabled ? productivityColorPreviewEmojis : undefined,
|
|
475
500
|
selectedProductivityColor: isTeamojiExperimentEnabled ? selectedProductivityColor : undefined,
|
|
476
501
|
uploading: uploading,
|
|
@@ -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: "71.
|
|
23
|
+
packageVersion: "71.5.1"
|
|
24
24
|
}, attributes)
|
|
25
25
|
};
|
|
26
26
|
};
|
|
@@ -41,6 +41,7 @@ const emojiToneSelectorContainer = null;
|
|
|
41
41
|
const productivityColorPopup = null;
|
|
42
42
|
const previewFooter = null;
|
|
43
43
|
const previewFooterNew = null;
|
|
44
|
+
const atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
|
|
44
45
|
export const emojiActionsTestId = 'emoji-actions';
|
|
45
46
|
export const uploadEmojiTestId = 'upload-emoji';
|
|
46
47
|
|
|
@@ -83,6 +84,7 @@ export const AddOwnEmoji = props => {
|
|
|
83
84
|
const TonesWrapper = props => {
|
|
84
85
|
const {
|
|
85
86
|
activeCategoryId,
|
|
87
|
+
activeAtlassianSubcategory,
|
|
86
88
|
onProductivityColorSelected,
|
|
87
89
|
productivityColorPreviewEmojis,
|
|
88
90
|
selectedProductivityColor,
|
|
@@ -140,7 +142,7 @@ const TonesWrapper = props => {
|
|
|
140
142
|
openProductivityColorSelectorWithKeyboard.current = true;
|
|
141
143
|
}
|
|
142
144
|
}, []);
|
|
143
|
-
const shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && isRefreshEmojiPickerEnabled());
|
|
145
|
+
const shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(activeAtlassianSubcategory) && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && isRefreshEmojiPickerEnabled());
|
|
144
146
|
if (shouldShowProductivityColorSelector) {
|
|
145
147
|
const previewEmoji = (productivityColorPreviewEmojis === null || productivityColorPreviewEmojis === void 0 ? void 0 : productivityColorPreviewEmojis[selectedProductivityColor]) || Object.values(productivityColorPreviewEmojis || {})[0];
|
|
146
148
|
if (!previewEmoji) {
|
|
@@ -219,7 +221,7 @@ export const EmojiActions = props => {
|
|
|
219
221
|
} = props;
|
|
220
222
|
const [showToneSelector, setShowToneSelector] = useState(false);
|
|
221
223
|
const wasProductivityColorSelectorOpen = useRef(false);
|
|
222
|
-
const shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && isRefreshEmojiPickerEnabled());
|
|
224
|
+
const shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(props.activeAtlassianSubcategory) && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && isRefreshEmojiPickerEnabled());
|
|
223
225
|
const onToneOpenHandler = useCallback(() => setShowToneSelector(true), []);
|
|
224
226
|
const onToneCloseHandler = useCallback(() => setShowToneSelector(false), []);
|
|
225
227
|
const onToneToggleHandler = useCallback(() => {
|
|
@@ -31,7 +31,8 @@ const isRefreshEmojiPickerEnabled = () => {
|
|
|
31
31
|
return isEnabled;
|
|
32
32
|
};
|
|
33
33
|
const atlassianCategory = 'ATLASSIAN';
|
|
34
|
-
const
|
|
34
|
+
const productivityAtlassianSubcategory = 'Productivity';
|
|
35
|
+
const atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', productivityAtlassianSubcategory, 'Logos'];
|
|
35
36
|
|
|
36
37
|
/**
|
|
37
38
|
* Emoji grouped by a category title ie. Frequent, Your Uploads, All Uploads
|
|
@@ -84,6 +85,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
|
|
|
84
85
|
const [allEmojiGroups, setAllEmojiGroups] = useState([]);
|
|
85
86
|
const [virtualItems, setVirtualItems] = useState([]);
|
|
86
87
|
const [lastYourUploadsRow, setLastYourUploadsRow] = useState(0);
|
|
88
|
+
const [activeAtlassianSubcategory, setActiveAtlassianSubcategory] = useState(null);
|
|
87
89
|
const categoryTracker = useMemo(() => new CategoryTracker(), []);
|
|
88
90
|
const [categoriesChanged, setCategoriesChanged] = useState(false);
|
|
89
91
|
const isTeamojiExperimentEnabled = isRefreshEmojiPickerEnabled();
|
|
@@ -134,6 +136,17 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
|
|
|
134
136
|
}
|
|
135
137
|
return categoryToGroupMap;
|
|
136
138
|
}, [addToCategoryMap, isTeamojiExperimentEnabled]);
|
|
139
|
+
const findAtlassianSubcategoryToActivate = useCallback(startIndex => {
|
|
140
|
+
const row = virtualItems[startIndex];
|
|
141
|
+
if (row instanceof CategoryHeadingItem && row.props.id === atlassianCategory) {
|
|
142
|
+
const nextAtlassianEmojiRow = virtualItems.slice(startIndex + 1).find(item => item instanceof EmojisRowItem && item.props.category === atlassianCategory);
|
|
143
|
+
return (nextAtlassianEmojiRow === null || nextAtlassianEmojiRow === void 0 ? void 0 : nextAtlassianEmojiRow.props.title) || row.props.title;
|
|
144
|
+
}
|
|
145
|
+
if (row instanceof EmojisRowItem && row.props.category === atlassianCategory) {
|
|
146
|
+
return row.props.title;
|
|
147
|
+
}
|
|
148
|
+
return null;
|
|
149
|
+
}, [virtualItems]);
|
|
137
150
|
|
|
138
151
|
/**
|
|
139
152
|
* onRowsRendered callback function
|
|
@@ -159,13 +172,19 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
|
|
|
159
172
|
if (!query) {
|
|
160
173
|
// Calculate category in view - only relevant if categories shown, i.e. no query
|
|
161
174
|
const currentCategory = findCategoryToActivate(rowItem);
|
|
175
|
+
if (isTeamojiExperimentEnabled) {
|
|
176
|
+
const currentAtlassianSubcategory = findAtlassianSubcategoryToActivate(startIndex);
|
|
177
|
+
if (activeAtlassianSubcategory !== currentAtlassianSubcategory) {
|
|
178
|
+
setActiveAtlassianSubcategory(currentAtlassianSubcategory);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
162
181
|
if (currentCategory !== null && activeCategoryId !== currentCategory) {
|
|
163
182
|
if (onCategoryActivated) {
|
|
164
183
|
onCategoryActivated(currentCategory);
|
|
165
184
|
}
|
|
166
185
|
}
|
|
167
186
|
}
|
|
168
|
-
}, [virtualItems, query, activeCategoryId, onCategoryActivated]);
|
|
187
|
+
}, [virtualItems, query, activeAtlassianSubcategory, activeCategoryId, findAtlassianSubcategoryToActivate, isTeamojiExperimentEnabled, onCategoryActivated]);
|
|
169
188
|
const buildEmojiGroupedByCategory = useCallback((emojis, currentUser) => {
|
|
170
189
|
const categoryToGroupMap = emojis.reduce(groupByCategory(currentUser), {});
|
|
171
190
|
setAllEmojiGroups(Object.keys(categoryToGroupMap).map(key => categoryToGroupMap[key]).map(group => {
|
|
@@ -431,6 +450,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
|
|
|
431
450
|
onToneSelectorCancelled: onToneSelectorCancelled,
|
|
432
451
|
toneEmoji: toneEmoji,
|
|
433
452
|
activeCategoryId: isTeamojiExperimentEnabled ? activeCategoryId : undefined,
|
|
453
|
+
activeAtlassianSubcategory: isTeamojiExperimentEnabled ? activeAtlassianSubcategory : undefined,
|
|
434
454
|
productivityColorPreviewEmojis: isTeamojiExperimentEnabled ? productivityColorPreviewEmojis : undefined,
|
|
435
455
|
selectedProductivityColor: isTeamojiExperimentEnabled ? selectedProductivityColor : undefined,
|
|
436
456
|
uploading: uploading,
|
|
@@ -42,6 +42,7 @@ var emojiToneSelectorContainer = null;
|
|
|
42
42
|
var productivityColorPopup = null;
|
|
43
43
|
var previewFooter = null;
|
|
44
44
|
var previewFooterNew = null;
|
|
45
|
+
var atlassianSubcategoriesWithProductivityColorSelector = ['Objects', 'Productivity', 'Logos'];
|
|
45
46
|
export var emojiActionsTestId = 'emoji-actions';
|
|
46
47
|
export var uploadEmojiTestId = 'upload-emoji';
|
|
47
48
|
|
|
@@ -83,6 +84,7 @@ export var AddOwnEmoji = function AddOwnEmoji(props) {
|
|
|
83
84
|
};
|
|
84
85
|
var TonesWrapper = function TonesWrapper(props) {
|
|
85
86
|
var activeCategoryId = props.activeCategoryId,
|
|
87
|
+
activeAtlassianSubcategory = props.activeAtlassianSubcategory,
|
|
86
88
|
onProductivityColorSelected = props.onProductivityColorSelected,
|
|
87
89
|
productivityColorPreviewEmojis = props.productivityColorPreviewEmojis,
|
|
88
90
|
selectedProductivityColor = props.selectedProductivityColor,
|
|
@@ -140,7 +142,7 @@ var TonesWrapper = function TonesWrapper(props) {
|
|
|
140
142
|
openProductivityColorSelectorWithKeyboard.current = true;
|
|
141
143
|
}
|
|
142
144
|
}, []);
|
|
143
|
-
var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && isRefreshEmojiPickerEnabled());
|
|
145
|
+
var shouldShowProductivityColorSelector = !!(activeCategoryId === 'ATLASSIAN' && activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(activeAtlassianSubcategory) && productivityColorPreviewEmojis && selectedProductivityColor && onProductivityColorSelected && isRefreshEmojiPickerEnabled());
|
|
144
146
|
if (shouldShowProductivityColorSelector) {
|
|
145
147
|
var previewEmoji = (productivityColorPreviewEmojis === null || productivityColorPreviewEmojis === void 0 ? void 0 : productivityColorPreviewEmojis[selectedProductivityColor]) || Object.values(productivityColorPreviewEmojis || {})[0];
|
|
146
148
|
if (!previewEmoji) {
|
|
@@ -221,7 +223,7 @@ export var EmojiActions = function EmojiActions(props) {
|
|
|
221
223
|
showToneSelector = _useState6[0],
|
|
222
224
|
setShowToneSelector = _useState6[1];
|
|
223
225
|
var wasProductivityColorSelectorOpen = useRef(false);
|
|
224
|
-
var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && isRefreshEmojiPickerEnabled());
|
|
226
|
+
var shouldUseProductivityColorControl = !!(props.activeCategoryId === 'ATLASSIAN' && props.activeAtlassianSubcategory && atlassianSubcategoriesWithProductivityColorSelector.includes(props.activeAtlassianSubcategory) && props.productivityColorPreviewEmojis && props.selectedProductivityColor && props.onProductivityColorSelected && isRefreshEmojiPickerEnabled());
|
|
225
227
|
var onToneOpenHandler = useCallback(function () {
|
|
226
228
|
return setShowToneSelector(true);
|
|
227
229
|
}, []);
|
|
@@ -33,7 +33,8 @@ var isRefreshEmojiPickerEnabled = function isRefreshEmojiPickerEnabled() {
|
|
|
33
33
|
return isEnabled;
|
|
34
34
|
};
|
|
35
35
|
var atlassianCategory = 'ATLASSIAN';
|
|
36
|
-
var
|
|
36
|
+
var productivityAtlassianSubcategory = 'Productivity';
|
|
37
|
+
var atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', productivityAtlassianSubcategory, 'Logos'];
|
|
37
38
|
|
|
38
39
|
/**
|
|
39
40
|
* Emoji grouped by a category title ie. Frequent, Your Uploads, All Uploads
|
|
@@ -100,13 +101,17 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
|
|
|
100
101
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
101
102
|
lastYourUploadsRow = _useState6[0],
|
|
102
103
|
setLastYourUploadsRow = _useState6[1];
|
|
104
|
+
var _useState7 = useState(null),
|
|
105
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
106
|
+
activeAtlassianSubcategory = _useState8[0],
|
|
107
|
+
setActiveAtlassianSubcategory = _useState8[1];
|
|
103
108
|
var categoryTracker = useMemo(function () {
|
|
104
109
|
return new CategoryTracker();
|
|
105
110
|
}, []);
|
|
106
|
-
var
|
|
107
|
-
|
|
108
|
-
categoriesChanged =
|
|
109
|
-
setCategoriesChanged =
|
|
111
|
+
var _useState9 = useState(false),
|
|
112
|
+
_useState0 = _slicedToArray(_useState9, 2),
|
|
113
|
+
categoriesChanged = _useState0[0],
|
|
114
|
+
setCategoriesChanged = _useState0[1];
|
|
110
115
|
var isTeamojiExperimentEnabled = isRefreshEmojiPickerEnabled();
|
|
111
116
|
var visibleEmojis = useMemo(function () {
|
|
112
117
|
return isTeamojiExperimentEnabled ? filterHiddenEmojis(emojis) : emojis;
|
|
@@ -163,6 +168,19 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
|
|
|
163
168
|
return categoryToGroupMap;
|
|
164
169
|
};
|
|
165
170
|
}, [addToCategoryMap, isTeamojiExperimentEnabled]);
|
|
171
|
+
var findAtlassianSubcategoryToActivate = useCallback(function (startIndex) {
|
|
172
|
+
var row = virtualItems[startIndex];
|
|
173
|
+
if (row instanceof CategoryHeadingItem && row.props.id === atlassianCategory) {
|
|
174
|
+
var nextAtlassianEmojiRow = virtualItems.slice(startIndex + 1).find(function (item) {
|
|
175
|
+
return item instanceof EmojisRowItem && item.props.category === atlassianCategory;
|
|
176
|
+
});
|
|
177
|
+
return (nextAtlassianEmojiRow === null || nextAtlassianEmojiRow === void 0 ? void 0 : nextAtlassianEmojiRow.props.title) || row.props.title;
|
|
178
|
+
}
|
|
179
|
+
if (row instanceof EmojisRowItem && row.props.category === atlassianCategory) {
|
|
180
|
+
return row.props.title;
|
|
181
|
+
}
|
|
182
|
+
return null;
|
|
183
|
+
}, [virtualItems]);
|
|
166
184
|
|
|
167
185
|
/**
|
|
168
186
|
* onRowsRendered callback function
|
|
@@ -186,13 +204,19 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
|
|
|
186
204
|
if (!query) {
|
|
187
205
|
// Calculate category in view - only relevant if categories shown, i.e. no query
|
|
188
206
|
var currentCategory = findCategoryToActivate(rowItem);
|
|
207
|
+
if (isTeamojiExperimentEnabled) {
|
|
208
|
+
var currentAtlassianSubcategory = findAtlassianSubcategoryToActivate(startIndex);
|
|
209
|
+
if (activeAtlassianSubcategory !== currentAtlassianSubcategory) {
|
|
210
|
+
setActiveAtlassianSubcategory(currentAtlassianSubcategory);
|
|
211
|
+
}
|
|
212
|
+
}
|
|
189
213
|
if (currentCategory !== null && activeCategoryId !== currentCategory) {
|
|
190
214
|
if (onCategoryActivated) {
|
|
191
215
|
onCategoryActivated(currentCategory);
|
|
192
216
|
}
|
|
193
217
|
}
|
|
194
218
|
}
|
|
195
|
-
}, [virtualItems, query, activeCategoryId, onCategoryActivated]);
|
|
219
|
+
}, [virtualItems, query, activeAtlassianSubcategory, activeCategoryId, findAtlassianSubcategoryToActivate, isTeamojiExperimentEnabled, onCategoryActivated]);
|
|
196
220
|
var buildEmojiGroupedByCategory = useCallback(function (emojis, currentUser) {
|
|
197
221
|
var categoryToGroupMap = emojis.reduce(groupByCategory(currentUser), {});
|
|
198
222
|
setAllEmojiGroups(Object.keys(categoryToGroupMap).map(function (key) {
|
|
@@ -463,6 +487,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
|
|
|
463
487
|
onToneSelectorCancelled: onToneSelectorCancelled,
|
|
464
488
|
toneEmoji: toneEmoji,
|
|
465
489
|
activeCategoryId: isTeamojiExperimentEnabled ? activeCategoryId : undefined,
|
|
490
|
+
activeAtlassianSubcategory: isTeamojiExperimentEnabled ? activeAtlassianSubcategory : undefined,
|
|
466
491
|
productivityColorPreviewEmojis: isTeamojiExperimentEnabled ? productivityColorPreviewEmojis : undefined,
|
|
467
492
|
selectedProductivityColor: isTeamojiExperimentEnabled ? selectedProductivityColor : undefined,
|
|
468
493
|
uploading: uploading,
|
|
@@ -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: "71.
|
|
17
|
+
packageVersion: "71.5.1"
|
|
18
18
|
}, attributes)
|
|
19
19
|
};
|
|
20
20
|
};
|
|
@@ -11,6 +11,7 @@ import { type OnUploadEmoji } from './EmojiUploadPicker';
|
|
|
11
11
|
import type { ProductivityColor } from '../../util/productivity-colors';
|
|
12
12
|
export interface Props {
|
|
13
13
|
activeCategoryId?: CategoryId | null;
|
|
14
|
+
activeAtlassianSubcategory?: string | null;
|
|
14
15
|
emojiToDelete?: EmojiDescription;
|
|
15
16
|
initialUploadName?: string;
|
|
16
17
|
onChange: (value: string) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/emoji",
|
|
3
|
-
"version": "71.5.
|
|
3
|
+
"version": "71.5.2",
|
|
4
4
|
"description": "Fabric emoji React components",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@atlaskit/spinner": "^20.0.0",
|
|
50
50
|
"@atlaskit/textfield": "^9.0.0",
|
|
51
51
|
"@atlaskit/theme": "^26.0.0",
|
|
52
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
52
|
+
"@atlaskit/tmp-editor-statsig": "^113.0.0",
|
|
53
53
|
"@atlaskit/tokens": "^15.0.0",
|
|
54
54
|
"@atlaskit/tooltip": "^23.0.0",
|
|
55
55
|
"@atlaskit/ufo": "^1.0.0",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"@af/visual-regression": "workspace:^",
|
|
77
77
|
"@atlaskit/media-core": "^38.0.0",
|
|
78
78
|
"@atlaskit/ssr": "workspace:^",
|
|
79
|
-
"@atlassian/a11y-jest-testing": "^0.
|
|
79
|
+
"@atlassian/a11y-jest-testing": "^0.13.0",
|
|
80
80
|
"@atlassian/feature-flags-test-utils": "^1.1.0",
|
|
81
81
|
"@emotion/jest": "^11.8.0",
|
|
82
82
|
"@testing-library/dom": "^10.1.0",
|