@atlaskit/emoji 71.7.7 → 71.7.9

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/emoji
 
+## 71.7.9
+
+### Patch Changes
+
+- Updated dependencies
+
+## 71.7.8
+
+### Patch Changes
+
+- [`ca797600724c6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ca797600724c6) -
+  Increase emoji picker height when dropzone (preview) upload errors are shown
+- Updated dependencies
+
 ## 71.7.7
 
 ### Patch Changes

package/dist/cjs/components/common/EmojiActions.js

@@ -269,6 +269,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
     onCloseDelete = props.onCloseDelete,
     onDeleteEmoji = props.onDeleteEmoji,
     onUploadEmoji = props.onUploadEmoji,
+    onUploadPreviewErrorChange = props.onUploadPreviewErrorChange,
     uploadErrorMessage = props.uploadErrorMessage,
     uploading = props.uploading,
     onFileChooserClicked = props.onFileChooserClicked,
@@ -328,6 +329,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
       onFileChooserClicked: onFileChooserClicked,
       errorMessage: uploadErrorMessage,
       initialUploadName: initialUploadName,
+      onUploadPreviewErrorChange: onUploadPreviewErrorChange,
       contentId: props.contentId,
       fireAnalytics: props.fireAnalytics
     })) : /*#__PURE__*/React.createElement("div", {
@@ -338,6 +340,7 @@ var EmojiActions = exports.EmojiActions = function EmojiActions(props) {
       onFileChooserClicked: onFileChooserClicked,
       errorMessage: uploadErrorMessage,
       initialUploadName: initialUploadName,
+      onUploadPreviewErrorChange: onUploadPreviewErrorChange,
       contentId: props.contentId,
       fireAnalytics: props.fireAnalytics
     }));

package/dist/cjs/components/common/EmojiUploadPicker.js

@@ -250,6 +250,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     disableFocusLock = _props$disableFocusLo === void 0 ? false : _props$disableFocusLo,
     contentId = props.contentId,
     fireAnalytics = props.fireAnalytics,
+    onUploadPreviewErrorChange = props.onUploadPreviewErrorChange,
     intl = props.intl;
   var _useState = (0, _react.useState)(errorMessage ? _internalTypes.UploadStatus.Error : _internalTypes.UploadStatus.Waiting),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -292,7 +293,8 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     setName(undefined);
     setPreviewImage(undefined);
     setUploadStatus(_internalTypes.UploadStatus.Waiting);
-  }, []);
+    onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
+  }, [onUploadPreviewErrorChange]);
   var onNameChange = (0, _react.useCallback)(function (event) {
     var newName = sanitizeName(event.target.value);
     if (name !== newName) {
@@ -340,16 +342,18 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     setFilename('rovo-emoji.png');
     setPreviewImage(dataURL);
     setChooseEmojiErrorMessage(undefined);
+    onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
     // Only auto-populate the name if the user hasn't already typed one.
     setName(function (current) {
       return current || sanitizeName(suggestedName);
     });
-  }, []);
+  }, [onUploadPreviewErrorChange]);
   var errorOnUpload = (0, _react.useCallback)(function (event) {
     (0, _logger.default)('File load error: ', event);
     setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiUploadFailed));
+    onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
     cancelChooseFile();
-  }, [cancelChooseFile]);
+  }, [cancelChooseFile, onUploadPreviewErrorChange]);
   var onFileLoad = (0, _react.useCallback)(function (file) {
     return /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(f) {
@@ -367,12 +371,14 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
             case 1:
               setPreviewImage(f.target.result);
               setChooseEmojiErrorMessage(undefined);
+              onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
               _context.next = 3;
               break;
             case 2:
               _context.prev = 2;
               _t = _context["catch"](0);
               setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiInvalidImage));
+              onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
               cancelChooseFile();
             case 3:
             case "end":
@@ -384,7 +390,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
         return _ref.apply(this, arguments);
       };
     }();
-  }, [cancelChooseFile, name]);
+  }, [cancelChooseFile, name, onUploadPreviewErrorChange]);
   var onChooseFile = (0, _react.useCallback)(function (event) {
     var files = event.target.files;
     if (files.length) {
@@ -392,11 +398,13 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
       var file = files[0];
       if (!isSupportedEmojiUploadFileType(file)) {
         setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiUnsupportedFileType));
+        onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(true);
         cancelChooseFile();
         return;
       }
       if (ImageUtil.hasFileExceededSize(file)) {
         setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiImageTooBig));
+        onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
         cancelChooseFile();
         return;
       }
@@ -405,9 +413,10 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
       reader.addEventListener('error', errorOnUpload);
       reader.readAsDataURL(file);
     } else {
+      onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
       cancelChooseFile();
     }
-  }, [cancelChooseFile, errorOnUpload, onFileLoad]);
+  }, [cancelChooseFile, errorOnUpload, onFileLoad, onUploadPreviewErrorChange]);
   var cancelUpload = (0, _react.useCallback)(function (event) {
     if ((0, _platformFeatureFlags.fg)('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
       event === null || event === void 0 || event.preventDefault();
@@ -415,6 +424,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     }
     clearUploadPicker();
     onUploadCancelled();
+    onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
 
     // using setTimeout here to allow the UI to update before setting focus
     setTimeout(function (lastFocus) {
@@ -423,7 +433,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
         (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 || (_getDocument = _getDocument.getElementById(lastFocus)) === null || _getDocument === void 0 || _getDocument.focus();
       }
     }, 0, lastFocusedElementId.current);
-  }, [clearUploadPicker, onUploadCancelled]);
+  }, [clearUploadPicker, onUploadCancelled, onUploadPreviewErrorChange]);
   var onChooseFileClicked = function onChooseFileClicked() {
     onFileChooserClicked && onFileChooserClicked();
   };

package/dist/cjs/components/picker/EmojiPickerComponent.compiled.css

@@ -17,6 +17,7 @@
 ._1ul910mj{min-width:var(--_gsvyy7)}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1784{height:470px}
+._4t3i189v{height:495px}
 ._4t3i19lm{height:514px}
 ._4t3i1ckg{height:455px}
 ._4t3i1dsu{height:419px}
@@ -24,12 +25,14 @@
 ._4t3i1sa4{height:390px}
 ._4t3i2300{height:429px}
 ._4t3i50k7{height:499px}
+._4t3i6iir{height:335px}
 ._4t3iaq3k{height:295px}
 ._4t3ibqjm{height:310px}
 ._4t3iihnn{height:434px}
 ._4t3iixjv{height:375px}
 ._4t3ikbql{height:450px}
 ._4t3iqbeb{height:339px}
+._4t3iqxjr{height:415px}
 ._4t3iuxo9{height:var(--_19dn98e)}
 ._4t3ivixp{height:349px}
 ._4t3ixt2k{height:509px}

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

@@ -58,6 +58,7 @@ var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px
 var emojiPickerHeight = 295;
 var emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
 var emojiPickerHeightWithPreviewNew = 310;
+var emojiPickerHeightWithPreviewAndPreviewErrorNew = 335;
 var emojiPickerHeightDeleteRefresh = 339;
 var emojiPickerWidth = 350;
 var emojiPickerMinHeight = 260;
@@ -86,6 +87,11 @@ var withUploadRefreshHeight = {
   medium: "_4t3i1sa4 _1tke5x59",
   large: "_4t3i1784 _1tke1pna"
 };
+var withUploadRefreshAndPreviewErrorHeight = {
+  small: "_4t3i6iir _1tkegx0z",
+  medium: "_4t3iqxjr _1tke5x59",
+  large: "_4t3i189v _1tke1pna"
+};
 var withDeleteRefreshHeight = {
   small: "_4t3iqbeb _1tkegx0z",
   medium: "_4t3i1dsu _1tke5x59",
@@ -171,14 +177,18 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
     uploadErrorMessage = _useState24[0],
     setUploadErrorMessage = _useState24[1];
-  var _useState25 = (0, _react.useState)(),
+  var _useState25 = (0, _react.useState)(false),
     _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
-    emojiToDelete = _useState26[0],
-    setEmojiToDelete = _useState26[1];
+    hasUploadPreviewError = _useState26[0],
+    setHasUploadPreviewError = _useState26[1];
   var _useState27 = (0, _react.useState)(),
     _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
-    toneEmoji = _useState28[0],
-    setToneEmoji = _useState28[1];
+    emojiToDelete = _useState28[0],
+    setEmojiToDelete = _useState28[1];
+  var _useState29 = (0, _react.useState)(),
+    _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
+    toneEmoji = _useState30[0],
+    setToneEmoji = _useState30[1];
   var emojiPickerList = (0, _react.useMemo)(function () {
     return /*#__PURE__*/(0, _react.createRef)();
   }, []);
@@ -508,6 +518,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     }
     (0, _reactDom.unstable_batchedUpdates)(function () {
       setUploadErrorMessage(undefined);
+      setHasUploadPreviewError(false);
       setUploading(true);
     });
     fireAnalytics((0, _analytics.uploadBeginButton)());
@@ -692,7 +703,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     role: "dialog",
     "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
     "aria-modal": true,
-    className: (0, _runtime.ax)([isRefreshEmojiPickerEnabled() ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", !!emojiToDelete && isRefreshEmojiPickerEnabled() ? withDeleteRefreshHeight[size] : uploading && isRefreshEmojiPickerEnabled() ? withUploadRefreshHeight[size] : query && filteredEmojis.length === 0 && isRefreshEmojiPickerEnabled() ? withNoResultsRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size], showAiUpload && "_4t3ikbql _c71l8k0t"]),
+    className: (0, _runtime.ax)([isRefreshEmojiPickerEnabled() ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", !!emojiToDelete && isRefreshEmojiPickerEnabled() ? withDeleteRefreshHeight[size] : uploading && isRefreshEmojiPickerEnabled() ? hasUploadPreviewError ? withUploadRefreshAndPreviewErrorHeight[size] : withUploadRefreshHeight[size] : query && filteredEmojis.length === 0 && isRefreshEmojiPickerEnabled() ? withNoResultsRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size], showAiUpload && "_4t3ikbql _c71l8k0t"]),
     style: {
       "--_19dn98e": (0, _runtime.ix)("".concat(emojiPickerHeight, "px")),
       "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
@@ -733,6 +744,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     uploadEnabled: uploadEnabled,
     onUploadEmoji: onUploadEmoji,
     onUploadCancelled: onUploadCancelled,
+    onUploadPreviewErrorChange: setHasUploadPreviewError,
     onDeleteEmoji: onDeleteEmoji,
     onCloseDelete: onCloseDelete,
     onFileChooserClicked: onFileChooserClicked,

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

@@ -87,6 +87,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     uploadErrorMessage = props.uploadErrorMessage,
     onUploadCancelled = props.onUploadCancelled,
     onUploadEmoji = props.onUploadEmoji,
+    onUploadPreviewErrorChange = props.onUploadPreviewErrorChange,
     onDeleteEmoji = props.onDeleteEmoji,
     onCloseDelete = props.onCloseDelete,
     onFileChooserClicked = props.onFileChooserClicked,
@@ -508,6 +509,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     emojiToDelete: emojiToDelete,
     initialUploadName: initialUploadName,
     uploadErrorMessage: uploadErrorMessage,
+    onUploadPreviewErrorChange: onUploadPreviewErrorChange,
     onUploadCancelled: onUploadCancelled,
     onUploadEmoji: onUploadEmoji,
     onCloseDelete: handleOnCloseDelete,

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: "71.7.6"
+      packageVersion: "71.7.8"
     }, attributes)
   };
 };

package/dist/es2019/components/common/EmojiActions.js

@@ -260,6 +260,7 @@ export const EmojiActions = props => {
     onCloseDelete,
     onDeleteEmoji,
     onUploadEmoji,
+    onUploadPreviewErrorChange,
     uploadErrorMessage,
     uploading,
     onFileChooserClicked,
@@ -310,6 +311,7 @@ export const EmojiActions = props => {
       onFileChooserClicked: onFileChooserClicked,
       errorMessage: uploadErrorMessage,
       initialUploadName: initialUploadName,
+      onUploadPreviewErrorChange: onUploadPreviewErrorChange,
       contentId: props.contentId,
       fireAnalytics: props.fireAnalytics
     })) : /*#__PURE__*/React.createElement("div", {
@@ -320,6 +322,7 @@ export const EmojiActions = props => {
       onFileChooserClicked: onFileChooserClicked,
       errorMessage: uploadErrorMessage,
       initialUploadName: initialUploadName,
+      onUploadPreviewErrorChange: onUploadPreviewErrorChange,
       contentId: props.contentId,
       fireAnalytics: props.fireAnalytics
     }));

package/dist/es2019/components/common/EmojiUploadPicker.js

@@ -236,6 +236,7 @@ const EmojiUploadPicker = props => {
     disableFocusLock = false,
     contentId,
     fireAnalytics,
+    onUploadPreviewErrorChange,
     intl
   } = props;
   const [uploadStatus, setUploadStatus] = useState(errorMessage ? UploadStatus.Error : UploadStatus.Waiting);
@@ -264,7 +265,8 @@ const EmojiUploadPicker = props => {
     setName(undefined);
     setPreviewImage(undefined);
     setUploadStatus(UploadStatus.Waiting);
-  }, []);
+    onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 ? void 0 : onUploadPreviewErrorChange(false);
+  }, [onUploadPreviewErrorChange]);
   const onNameChange = useCallback(event => {
     let newName = sanitizeName(event.target.value);
     if (name !== newName) {
@@ -314,14 +316,16 @@ const EmojiUploadPicker = props => {
     setFilename('rovo-emoji.png');
     setPreviewImage(dataURL);
     setChooseEmojiErrorMessage(undefined);
+    onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 ? void 0 : onUploadPreviewErrorChange(false);
     // Only auto-populate the name if the user hasn't already typed one.
     setName(current => current || sanitizeName(suggestedName));
-  }, []);
+  }, [onUploadPreviewErrorChange]);
   const errorOnUpload = useCallback(event => {
     debug('File load error: ', event);
     setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiUploadFailed));
+    onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 ? void 0 : onUploadPreviewErrorChange(false);
     cancelChooseFile();
-  }, [cancelChooseFile]);
+  }, [cancelChooseFile, onUploadPreviewErrorChange]);
   const onFileLoad = useCallback(file => async f => {
     try {
       setFilename(file.name);
@@ -331,11 +335,13 @@ const EmojiUploadPicker = props => {
       await ImageUtil.parseImage(f.target.result);
       setPreviewImage(f.target.result);
       setChooseEmojiErrorMessage(undefined);
+      onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 ? void 0 : onUploadPreviewErrorChange(false);
     } catch {
       setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiInvalidImage));
+      onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 ? void 0 : onUploadPreviewErrorChange(false);
       cancelChooseFile();
     }
-  }, [cancelChooseFile, name]);
+  }, [cancelChooseFile, name, onUploadPreviewErrorChange]);
   const onChooseFile = useCallback(event => {
     const files = event.target.files;
     if (files.length) {
@@ -343,11 +349,13 @@ const EmojiUploadPicker = props => {
       const file = files[0];
       if (!isSupportedEmojiUploadFileType(file)) {
         setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiUnsupportedFileType));
+        onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 ? void 0 : onUploadPreviewErrorChange(true);
         cancelChooseFile();
         return;
       }
       if (ImageUtil.hasFileExceededSize(file)) {
         setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiImageTooBig));
+        onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 ? void 0 : onUploadPreviewErrorChange(false);
         cancelChooseFile();
         return;
       }
@@ -356,9 +364,10 @@ const EmojiUploadPicker = props => {
       reader.addEventListener('error', errorOnUpload);
       reader.readAsDataURL(file);
     } else {
+      onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 ? void 0 : onUploadPreviewErrorChange(false);
       cancelChooseFile();
     }
-  }, [cancelChooseFile, errorOnUpload, onFileLoad]);
+  }, [cancelChooseFile, errorOnUpload, onFileLoad, onUploadPreviewErrorChange]);
   const cancelUpload = useCallback(event => {
     if (fg('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
       event === null || event === void 0 ? void 0 : event.preventDefault();
@@ -366,6 +375,7 @@ const EmojiUploadPicker = props => {
     }
     clearUploadPicker();
     onUploadCancelled();
+    onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 ? void 0 : onUploadPreviewErrorChange(false);
 
     // using setTimeout here to allow the UI to update before setting focus
     setTimeout(lastFocus => {
@@ -374,7 +384,7 @@ const EmojiUploadPicker = props => {
         (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : (_getDocument$getEleme = _getDocument.getElementById(lastFocus)) === null || _getDocument$getEleme === void 0 ? void 0 : _getDocument$getEleme.focus();
       }
     }, 0, lastFocusedElementId.current);
-  }, [clearUploadPicker, onUploadCancelled]);
+  }, [clearUploadPicker, onUploadCancelled, onUploadPreviewErrorChange]);
   const onChooseFileClicked = () => {
     onFileChooserClicked && onFileChooserClicked();
   };

package/dist/es2019/components/picker/EmojiPickerComponent.compiled.css

@@ -17,6 +17,7 @@
 ._1ul91edt{min-width:350px}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1784{height:470px}
+._4t3i189v{height:495px}
 ._4t3i19lm{height:514px}
 ._4t3i1ckg{height:455px}
 ._4t3i1dsu{height:419px}
@@ -24,12 +25,14 @@
 ._4t3i1sa4{height:390px}
 ._4t3i2300{height:429px}
 ._4t3i50k7{height:499px}
+._4t3i6iir{height:335px}
 ._4t3iaq3k{height:295px}
 ._4t3ibqjm{height:310px}
 ._4t3iihnn{height:434px}
 ._4t3iixjv{height:375px}
 ._4t3ikbql{height:450px}
 ._4t3iqbeb{height:339px}
+._4t3iqxjr{height:415px}
 ._4t3ivixp{height:349px}
 ._4t3ixt2k{height:509px}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}

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

@@ -42,6 +42,7 @@ const emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0
 const emojiPickerHeight = 295;
 const emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
 const emojiPickerHeightWithPreviewNew = 310;
+const emojiPickerHeightWithPreviewAndPreviewErrorNew = 335;
 const emojiPickerHeightDeleteRefresh = 339;
 const emojiPickerWidth = 350;
 const emojiPickerMinHeight = 260;
@@ -70,6 +71,11 @@ const withUploadRefreshHeight = {
   medium: "_4t3i1sa4 _1tke5x59",
   large: "_4t3i1784 _1tke1pna"
 };
+const withUploadRefreshAndPreviewErrorHeight = {
+  small: "_4t3i6iir _1tkegx0z",
+  medium: "_4t3iqxjr _1tke5x59",
+  large: "_4t3i189v _1tke1pna"
+};
 const withDeleteRefreshHeight = {
   small: "_4t3iqbeb _1tkegx0z",
   medium: "_4t3i1dsu _1tke5x59",
@@ -116,6 +122,7 @@ const EmojiPickerComponent = ({
   const [activeCategory, setActiveCategory] = useState(null);
   const [disableCategories, setDisableCategories] = useState(false);
   const [uploadErrorMessage, setUploadErrorMessage] = useState();
+  const [hasUploadPreviewError, setHasUploadPreviewError] = useState(false);
   const [emojiToDelete, setEmojiToDelete] = useState();
   const [toneEmoji, setToneEmoji] = useState();
   const emojiPickerList = useMemo(() => /*#__PURE__*/createRef(), []);
@@ -437,6 +444,7 @@ const EmojiPickerComponent = ({
     }
     batchedUpdates(() => {
       setUploadErrorMessage(undefined);
+      setHasUploadPreviewError(false);
       setUploading(true);
     });
     fireAnalytics(uploadBeginButton());
@@ -597,7 +605,7 @@ const EmojiPickerComponent = ({
     role: "dialog",
     "aria-label": formatMessage(messages.emojiPickerTitle),
     "aria-modal": true,
-    className: ax([isRefreshEmojiPickerEnabled() ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm", !!emojiToDelete && isRefreshEmojiPickerEnabled() ? withDeleteRefreshHeight[size] : uploading && isRefreshEmojiPickerEnabled() ? withUploadRefreshHeight[size] : query && filteredEmojis.length === 0 && isRefreshEmojiPickerEnabled() ? withNoResultsRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size], showAiUpload && "_4t3ikbql _c71l8k0t"])
+    className: ax([isRefreshEmojiPickerEnabled() ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm", !!emojiToDelete && isRefreshEmojiPickerEnabled() ? withDeleteRefreshHeight[size] : uploading && isRefreshEmojiPickerEnabled() ? hasUploadPreviewError ? withUploadRefreshAndPreviewErrorHeight[size] : withUploadRefreshHeight[size] : query && filteredEmojis.length === 0 && isRefreshEmojiPickerEnabled() ? withNoResultsRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size], showAiUpload && "_4t3ikbql _c71l8k0t"])
   }, /*#__PURE__*/React.createElement("div", {
     role: "presentation",
     onKeyPress: suppressKeyPress,
@@ -634,6 +642,7 @@ const EmojiPickerComponent = ({
     uploadEnabled: uploadEnabled,
     onUploadEmoji: onUploadEmoji,
     onUploadCancelled: onUploadCancelled,
+    onUploadPreviewErrorChange: setHasUploadPreviewError,
     onDeleteEmoji: onDeleteEmoji,
     onCloseDelete: onCloseDelete,
     onFileChooserClicked: onFileChooserClicked,

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

@@ -70,6 +70,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     uploadErrorMessage,
     onUploadCancelled,
     onUploadEmoji,
+    onUploadPreviewErrorChange,
     onDeleteEmoji,
     onCloseDelete,
     onFileChooserClicked,
@@ -463,6 +464,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     emojiToDelete: emojiToDelete,
     initialUploadName: initialUploadName,
     uploadErrorMessage: uploadErrorMessage,
+    onUploadPreviewErrorChange: onUploadPreviewErrorChange,
     onUploadCancelled: onUploadCancelled,
     onUploadEmoji: onUploadEmoji,
     onCloseDelete: handleOnCloseDelete,

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

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

package/dist/esm/components/common/EmojiActions.js

@@ -260,6 +260,7 @@ export var EmojiActions = function EmojiActions(props) {
     onCloseDelete = props.onCloseDelete,
     onDeleteEmoji = props.onDeleteEmoji,
     onUploadEmoji = props.onUploadEmoji,
+    onUploadPreviewErrorChange = props.onUploadPreviewErrorChange,
     uploadErrorMessage = props.uploadErrorMessage,
     uploading = props.uploading,
     onFileChooserClicked = props.onFileChooserClicked,
@@ -319,6 +320,7 @@ export var EmojiActions = function EmojiActions(props) {
       onFileChooserClicked: onFileChooserClicked,
       errorMessage: uploadErrorMessage,
       initialUploadName: initialUploadName,
+      onUploadPreviewErrorChange: onUploadPreviewErrorChange,
       contentId: props.contentId,
       fireAnalytics: props.fireAnalytics
     })) : /*#__PURE__*/React.createElement("div", {
@@ -329,6 +331,7 @@ export var EmojiActions = function EmojiActions(props) {
       onFileChooserClicked: onFileChooserClicked,
       errorMessage: uploadErrorMessage,
       initialUploadName: initialUploadName,
+      onUploadPreviewErrorChange: onUploadPreviewErrorChange,
       contentId: props.contentId,
       fireAnalytics: props.fireAnalytics
     }));

package/dist/esm/components/common/EmojiUploadPicker.js

@@ -242,6 +242,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     disableFocusLock = _props$disableFocusLo === void 0 ? false : _props$disableFocusLo,
     contentId = props.contentId,
     fireAnalytics = props.fireAnalytics,
+    onUploadPreviewErrorChange = props.onUploadPreviewErrorChange,
     intl = props.intl;
   var _useState = useState(errorMessage ? UploadStatus.Error : UploadStatus.Waiting),
     _useState2 = _slicedToArray(_useState, 2),
@@ -284,7 +285,8 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     setName(undefined);
     setPreviewImage(undefined);
     setUploadStatus(UploadStatus.Waiting);
-  }, []);
+    onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
+  }, [onUploadPreviewErrorChange]);
   var onNameChange = useCallback(function (event) {
     var newName = sanitizeName(event.target.value);
     if (name !== newName) {
@@ -332,16 +334,18 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     setFilename('rovo-emoji.png');
     setPreviewImage(dataURL);
     setChooseEmojiErrorMessage(undefined);
+    onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
     // Only auto-populate the name if the user hasn't already typed one.
     setName(function (current) {
       return current || sanitizeName(suggestedName);
     });
-  }, []);
+  }, [onUploadPreviewErrorChange]);
   var errorOnUpload = useCallback(function (event) {
     debug('File load error: ', event);
     setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiUploadFailed));
+    onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
     cancelChooseFile();
-  }, [cancelChooseFile]);
+  }, [cancelChooseFile, onUploadPreviewErrorChange]);
   var onFileLoad = useCallback(function (file) {
     return /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(f) {
@@ -359,12 +363,14 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
             case 1:
               setPreviewImage(f.target.result);
               setChooseEmojiErrorMessage(undefined);
+              onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
               _context.next = 3;
               break;
             case 2:
               _context.prev = 2;
               _t = _context["catch"](0);
               setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiInvalidImage));
+              onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
               cancelChooseFile();
             case 3:
             case "end":
@@ -376,7 +382,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
         return _ref.apply(this, arguments);
       };
     }();
-  }, [cancelChooseFile, name]);
+  }, [cancelChooseFile, name, onUploadPreviewErrorChange]);
   var onChooseFile = useCallback(function (event) {
     var files = event.target.files;
     if (files.length) {
@@ -384,11 +390,13 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
       var file = files[0];
       if (!isSupportedEmojiUploadFileType(file)) {
         setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiUnsupportedFileType));
+        onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(true);
         cancelChooseFile();
         return;
       }
       if (ImageUtil.hasFileExceededSize(file)) {
         setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiImageTooBig));
+        onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
         cancelChooseFile();
         return;
       }
@@ -397,9 +405,10 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
       reader.addEventListener('error', errorOnUpload);
       reader.readAsDataURL(file);
     } else {
+      onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
       cancelChooseFile();
     }
-  }, [cancelChooseFile, errorOnUpload, onFileLoad]);
+  }, [cancelChooseFile, errorOnUpload, onFileLoad, onUploadPreviewErrorChange]);
   var cancelUpload = useCallback(function (event) {
     if (fg('platform_emoji_keep_picker_open_on_upload') || isRefreshEmojiPickerEnabled()) {
       event === null || event === void 0 || event.preventDefault();
@@ -407,6 +416,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     }
     clearUploadPicker();
     onUploadCancelled();
+    onUploadPreviewErrorChange === null || onUploadPreviewErrorChange === void 0 || onUploadPreviewErrorChange(false);
 
     // using setTimeout here to allow the UI to update before setting focus
     setTimeout(function (lastFocus) {
@@ -415,7 +425,7 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
         (_getDocument = getDocument()) === null || _getDocument === void 0 || (_getDocument = _getDocument.getElementById(lastFocus)) === null || _getDocument === void 0 || _getDocument.focus();
       }
     }, 0, lastFocusedElementId.current);
-  }, [clearUploadPicker, onUploadCancelled]);
+  }, [clearUploadPicker, onUploadCancelled, onUploadPreviewErrorChange]);
   var onChooseFileClicked = function onChooseFileClicked() {
     onFileChooserClicked && onFileChooserClicked();
   };

package/dist/esm/components/picker/EmojiPickerComponent.compiled.css

@@ -17,6 +17,7 @@
 ._1ul910mj{min-width:var(--_gsvyy7)}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1784{height:470px}
+._4t3i189v{height:495px}
 ._4t3i19lm{height:514px}
 ._4t3i1ckg{height:455px}
 ._4t3i1dsu{height:419px}
@@ -24,12 +25,14 @@
 ._4t3i1sa4{height:390px}
 ._4t3i2300{height:429px}
 ._4t3i50k7{height:499px}
+._4t3i6iir{height:335px}
 ._4t3iaq3k{height:295px}
 ._4t3ibqjm{height:310px}
 ._4t3iihnn{height:434px}
 ._4t3iixjv{height:375px}
 ._4t3ikbql{height:450px}
 ._4t3iqbeb{height:339px}
+._4t3iqxjr{height:415px}
 ._4t3iuxo9{height:var(--_19dn98e)}
 ._4t3ivixp{height:349px}
 ._4t3ixt2k{height:509px}

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

@@ -49,6 +49,7 @@ var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px
 var emojiPickerHeight = 295;
 var emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
 var emojiPickerHeightWithPreviewNew = 310;
+var emojiPickerHeightWithPreviewAndPreviewErrorNew = 335;
 var emojiPickerHeightDeleteRefresh = 339;
 var emojiPickerWidth = 350;
 var emojiPickerMinHeight = 260;
@@ -77,6 +78,11 @@ var withUploadRefreshHeight = {
   medium: "_4t3i1sa4 _1tke5x59",
   large: "_4t3i1784 _1tke1pna"
 };
+var withUploadRefreshAndPreviewErrorHeight = {
+  small: "_4t3i6iir _1tkegx0z",
+  medium: "_4t3iqxjr _1tke5x59",
+  large: "_4t3i189v _1tke1pna"
+};
 var withDeleteRefreshHeight = {
   small: "_4t3iqbeb _1tkegx0z",
   medium: "_4t3i1dsu _1tke5x59",
@@ -162,14 +168,18 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     _useState24 = _slicedToArray(_useState23, 2),
     uploadErrorMessage = _useState24[0],
     setUploadErrorMessage = _useState24[1];
-  var _useState25 = useState(),
+  var _useState25 = useState(false),
     _useState26 = _slicedToArray(_useState25, 2),
-    emojiToDelete = _useState26[0],
-    setEmojiToDelete = _useState26[1];
+    hasUploadPreviewError = _useState26[0],
+    setHasUploadPreviewError = _useState26[1];
   var _useState27 = useState(),
     _useState28 = _slicedToArray(_useState27, 2),
-    toneEmoji = _useState28[0],
-    setToneEmoji = _useState28[1];
+    emojiToDelete = _useState28[0],
+    setEmojiToDelete = _useState28[1];
+  var _useState29 = useState(),
+    _useState30 = _slicedToArray(_useState29, 2),
+    toneEmoji = _useState30[0],
+    setToneEmoji = _useState30[1];
   var emojiPickerList = useMemo(function () {
     return /*#__PURE__*/createRef();
   }, []);
@@ -499,6 +509,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     }
     batchedUpdates(function () {
       setUploadErrorMessage(undefined);
+      setHasUploadPreviewError(false);
       setUploading(true);
     });
     fireAnalytics(uploadBeginButton());
@@ -683,7 +694,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     role: "dialog",
     "aria-label": formatMessage(messages.emojiPickerTitle),
     "aria-modal": true,
-    className: ax([isRefreshEmojiPickerEnabled() ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", !!emojiToDelete && isRefreshEmojiPickerEnabled() ? withDeleteRefreshHeight[size] : uploading && isRefreshEmojiPickerEnabled() ? withUploadRefreshHeight[size] : query && filteredEmojis.length === 0 && isRefreshEmojiPickerEnabled() ? withNoResultsRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size], showAiUpload && "_4t3ikbql _c71l8k0t"]),
+    className: ax([isRefreshEmojiPickerEnabled() ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", !!emojiToDelete && isRefreshEmojiPickerEnabled() ? withDeleteRefreshHeight[size] : uploading && isRefreshEmojiPickerEnabled() ? hasUploadPreviewError ? withUploadRefreshAndPreviewErrorHeight[size] : withUploadRefreshHeight[size] : query && filteredEmojis.length === 0 && isRefreshEmojiPickerEnabled() ? withNoResultsRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size], showAiUpload && "_4t3ikbql _c71l8k0t"]),
     style: {
       "--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
       "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
@@ -724,6 +735,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     uploadEnabled: uploadEnabled,
     onUploadEmoji: onUploadEmoji,
     onUploadCancelled: onUploadCancelled,
+    onUploadPreviewErrorChange: setHasUploadPreviewError,
     onDeleteEmoji: onDeleteEmoji,
     onCloseDelete: onCloseDelete,
     onFileChooserClicked: onFileChooserClicked,

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

@@ -79,6 +79,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     uploadErrorMessage = props.uploadErrorMessage,
     onUploadCancelled = props.onUploadCancelled,
     onUploadEmoji = props.onUploadEmoji,
+    onUploadPreviewErrorChange = props.onUploadPreviewErrorChange,
     onDeleteEmoji = props.onDeleteEmoji,
     onCloseDelete = props.onCloseDelete,
     onFileChooserClicked = props.onFileChooserClicked,
@@ -500,6 +501,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     emojiToDelete: emojiToDelete,
     initialUploadName: initialUploadName,
     uploadErrorMessage: uploadErrorMessage,
+    onUploadPreviewErrorChange: onUploadPreviewErrorChange,
     onUploadCancelled: onUploadCancelled,
     onUploadEmoji: onUploadEmoji,
     onCloseDelete: handleOnCloseDelete,

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: "71.7.6"
+      packageVersion: "71.7.8"
     }, attributes)
   };
 };

package/dist/types/components/common/EmojiActions.d.ts

@@ -35,6 +35,7 @@ export interface Props {
     onToneSelectorCancelled?: OnToneSelectorCancelled;
     onUploadCancelled: () => void;
     onUploadEmoji: OnUploadEmoji;
+    onUploadPreviewErrorChange?: (hasPreviewError: boolean) => void;
     productivityColorPreviewEmojis?: Partial<Record<ProductivityColor, EmojiDescription>>;
     query?: string;
     resultsCount?: number;

package/dist/types/components/common/EmojiUploadPicker.d.ts

@@ -19,6 +19,7 @@ export interface Props {
     onFileChooserClicked?: () => void;
     onUploadCancelled: () => void;
     onUploadEmoji: OnUploadEmoji;
+    onUploadPreviewErrorChange?: (hasPreviewError: boolean) => void;
     /**
      * Current Confluence page content id. When provided (and the
      * `confluence_ai_generated_emojis` experiment is on), the "Create an emoji

package/dist/types/components/picker/EmojiPickerList.d.ts

@@ -38,6 +38,7 @@ export interface Props {
     onToneSelectorCancelled?: OnToneSelectorCancelled;
     onUploadCancelled: () => void;
     onUploadEmoji: OnUploadEmoji;
+    onUploadPreviewErrorChange?: (hasPreviewError: boolean) => void;
     query?: string;
     selectedProductivityColor?: ProductivityColor;
     selectedTone?: ToneSelection;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.7.7",
+	"version": "71.7.9",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -50,7 +50,7 @@
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^122.0.0",
+		"@atlaskit/tmp-editor-statsig": "^124.0.0",
 		"@atlaskit/tokens": "^15.5.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/ufo": "^1.0.0",