@atlaskit/emoji 70.8.0 → 70.9.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/emoji
 
+## 70.9.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 70.9.0
+
+### Minor Changes
+
+- [`54ec962646a89`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/54ec962646a89) -
+  Close upload emoji on category selected + hide selected category on upload emoji open
+
 ## 70.8.0
 
 ### Minor Changes

package/dist/cjs/components/picker/EmojiPickerComponent.js

@@ -160,10 +160,14 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     if (isProgrammaticScroll.current && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
       return;
     }
+    // Ignore scroll-driven category changes while the upload screen is open
+    if (uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+      return;
+    }
     if (activeCategory !== category) {
       setActiveCategory(category);
     }
-  }, [activeCategory]);
+  }, [activeCategory, uploading]);
   var calculateElapsedTime = function calculateElapsedTime() {
     return Date.now() - openTime.current;
   };
@@ -318,6 +322,12 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     if (!categoryId) {
       return;
     }
+
+    // If the upload screen is open, close it when a category is selected
+    if (uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+      setUploading(false);
+      setUploadErrorMessage(undefined);
+    }
     emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
       if (!disableCategories) {
         var newSelectedEmoji;
@@ -347,7 +357,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
         }));
       }
     });
-  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone]);
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading]);
   var recordUsageOnSelection = (0, _react.useMemo)(function () {
     return (0, _RecordSelectionDefault.createRecordSelectionDefault)(emojiProvider, onSelectWrapper, function (analytic) {
       return fireAnalytics(analytic(_types.SearchSourceTypes.PICKER));
@@ -575,7 +585,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       onKeyDown: suppressKeyPress,
       className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
     }, /*#__PURE__*/React.createElement(_CategorySelector.default, {
-      activeCategoryId: activeCategory,
+      activeCategoryId: uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? null : activeCategory,
       dynamicCategories: dynamicCategories,
       disableCategories: disableCategories,
       onCategorySelected: onCategorySelected
@@ -629,7 +639,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
     }
   }, /*#__PURE__*/React.createElement(_CategorySelector.default, {
-    activeCategoryId: activeCategory,
+    activeCategoryId: uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? null : activeCategory,
     dynamicCategories: dynamicCategories,
     disableCategories: disableCategories,
     onCategorySelected: onCategorySelected

package/dist/cjs/util/analytics/analytics.js

@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "70.7.2"
+      packageVersion: "70.9.0"
     }, attributes)
   };
 };

package/dist/es2019/components/picker/EmojiPickerComponent.js

@@ -102,10 +102,14 @@ const EmojiPickerComponent = ({
     if (isProgrammaticScroll.current && fg('platform_emoji_picker_refresh')) {
       return;
     }
+    // Ignore scroll-driven category changes while the upload screen is open
+    if (uploading && fg('platform_emoji_picker_refresh')) {
+      return;
+    }
     if (activeCategory !== category) {
       setActiveCategory(category);
     }
-  }, [activeCategory]);
+  }, [activeCategory, uploading]);
   const calculateElapsedTime = () => {
     return Date.now() - openTime.current;
   };
@@ -262,6 +266,12 @@ const EmojiPickerComponent = ({
     if (!categoryId) {
       return;
     }
+
+    // If the upload screen is open, close it when a category is selected
+    if (uploading && fg('platform_emoji_picker_refresh')) {
+      setUploading(false);
+      setUploadErrorMessage(undefined);
+    }
     emojiProvider.findInCategory(categoryId).then(emojisInCategory => {
       if (!disableCategories) {
         let newSelectedEmoji;
@@ -291,7 +301,7 @@ const EmojiPickerComponent = ({
         }));
       }
     });
-  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone]);
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading]);
   const recordUsageOnSelection = useMemo(() => createRecordSelectionDefault(emojiProvider, onSelectWrapper, analytic => fireAnalytics(analytic(SearchSourceTypes.PICKER))), [emojiProvider, fireAnalytics, onSelectWrapper]);
   const formattedErrorMessage = useMemo(() => uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null, [uploadErrorMessage]);
   const onFileChooserClicked = useCallback(() => {
@@ -485,7 +495,7 @@ const EmojiPickerComponent = ({
       onKeyDown: suppressKeyPress,
       className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
     }, /*#__PURE__*/React.createElement(CategorySelector, {
-      activeCategoryId: activeCategory,
+      activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
       dynamicCategories: dynamicCategories,
       disableCategories: disableCategories,
       onCategorySelected: onCategorySelected
@@ -535,7 +545,7 @@ const EmojiPickerComponent = ({
     onKeyDown: suppressKeyPress,
     className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm", showPreview || uploading && fg('platform_emoji_picker_refresh') ? withPreviewHeight[size] : withoutPreviewHeight[size]])
   }, /*#__PURE__*/React.createElement(CategorySelector, {
-    activeCategoryId: activeCategory,
+    activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
     dynamicCategories: dynamicCategories,
     disableCategories: disableCategories,
     onCategorySelected: onCategorySelected

package/dist/es2019/util/analytics/analytics.js

@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "70.7.2",
+    packageVersion: "70.9.0",
     ...attributes
   }
 });

package/dist/esm/components/picker/EmojiPickerComponent.js

@@ -151,10 +151,14 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     if (isProgrammaticScroll.current && fg('platform_emoji_picker_refresh')) {
       return;
     }
+    // Ignore scroll-driven category changes while the upload screen is open
+    if (uploading && fg('platform_emoji_picker_refresh')) {
+      return;
+    }
     if (activeCategory !== category) {
       setActiveCategory(category);
     }
-  }, [activeCategory]);
+  }, [activeCategory, uploading]);
   var calculateElapsedTime = function calculateElapsedTime() {
     return Date.now() - openTime.current;
   };
@@ -309,6 +313,12 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     if (!categoryId) {
       return;
     }
+
+    // If the upload screen is open, close it when a category is selected
+    if (uploading && fg('platform_emoji_picker_refresh')) {
+      setUploading(false);
+      setUploadErrorMessage(undefined);
+    }
     emojiProvider.findInCategory(categoryId).then(function (emojisInCategory) {
       if (!disableCategories) {
         var newSelectedEmoji;
@@ -338,7 +348,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
         }));
       }
     });
-  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone]);
+  }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone, uploading]);
   var recordUsageOnSelection = useMemo(function () {
     return createRecordSelectionDefault(emojiProvider, onSelectWrapper, function (analytic) {
       return fireAnalytics(analytic(SearchSourceTypes.PICKER));
@@ -566,7 +576,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       onKeyDown: suppressKeyPress,
       className: ax(["_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bah1yb4 _1tkeidpf"])
     }, /*#__PURE__*/React.createElement(CategorySelector, {
-      activeCategoryId: activeCategory,
+      activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
       dynamicCategories: dynamicCategories,
       disableCategories: disableCategories,
       onCategorySelected: onCategorySelected
@@ -620,7 +630,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
     }
   }, /*#__PURE__*/React.createElement(CategorySelector, {
-    activeCategoryId: activeCategory,
+    activeCategoryId: uploading && fg('platform_emoji_picker_refresh') ? null : activeCategory,
     dynamicCategories: dynamicCategories,
     disableCategories: disableCategories,
     onCategorySelected: onCategorySelected

package/dist/esm/util/analytics/analytics.js

@@ -14,7 +14,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "70.7.2"
+      packageVersion: "70.9.0"
     }, attributes)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "70.8.0",
+	"version": "70.9.1",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,15 +44,15 @@
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^34.5.0",
-		"@atlaskit/media-client": "^36.2.0",
+		"@atlaskit/icon": "^35.0.0",
+		"@atlaskit/media-client": "^36.3.0",
 		"@atlaskit/media-client-react": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tmp-editor-statsig": "^81.0.0",
+		"@atlaskit/tmp-editor-statsig": "^81.1.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^22.2.0",
 		"@atlaskit/ufo": "^0.5.0",
@@ -78,7 +78,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/elements-test-helpers": "workspace:^",
-		"@atlaskit/media-core": "^37.0.0",
+		"@atlaskit/media-core": "^37.1.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/theme": "^23.2.0",
 		"@atlassian/a11y-jest-testing": "^0.11.0",