@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 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 atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', 'Productivity', 'Logos'];
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 _useState7 = (0, _react.useState)(false),
115
- _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
116
- categoriesChanged = _useState8[0],
117
- setCategoriesChanged = _useState8[1];
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.4.7"
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 atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', 'Productivity', 'Logos'];
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,
@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
9
9
  actionSubjectId,
10
10
  attributes: {
11
11
  packageName: "@atlaskit/emoji",
12
- packageVersion: "71.4.7",
12
+ packageVersion: "71.5.1",
13
13
  ...attributes
14
14
  }
15
15
  });
@@ -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 atlassianSubcategoryOrder = ['Faces', 'Hands', 'Reactions', 'Objects', 'Productivity', 'Logos'];
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 _useState7 = useState(false),
107
- _useState8 = _slicedToArray(_useState7, 2),
108
- categoriesChanged = _useState8[0],
109
- setCategoriesChanged = _useState8[1];
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.4.7"
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.0",
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": "^111.0.0",
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.12.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",