@atlaskit/emoji 70.11.0 → 70.11.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/emoji
 
+## 70.11.1
+
+### Patch Changes
+
+- [`f9457ee7bd8fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f9457ee7bd8fc) -
+  Add file type validation to emoji picker.
+- Updated dependencies
+
 ## 70.11.0
 
 ### Minor Changes

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

@@ -43,6 +43,8 @@ var uploadChooseFileEmojiName = null;
 var uploadChooseFileMessage = null;
 var uploadChooseFileRow = null;
 var uploadChooseFileRowNew = null;
+var supportedEmojiUploadMimeTypes = new Set(['image/png', 'image/jpeg', 'image/gif']);
+var supportedEmojiUploadExtensions = ['.png', '.jpg', '.jpeg', '.gif'];
 var uploadEmojiNameInputTestId = exports.uploadEmojiNameInputTestId = 'upload-emoji-name-input';
 var uploadEmojiComponentTestId = exports.uploadEmojiComponentTestId = 'upload-emoji-component';
 var cancelEmojiUploadPickerTestId = exports.cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
@@ -59,6 +61,18 @@ var toEmojiName = function toEmojiName(uploadName) {
   var name = uploadName.split('_').join(' ');
   return "".concat(name.substr(0, 1).toLocaleUpperCase()).concat(name.substr(1));
 };
+var isSupportedEmojiUploadFileType = function isSupportedEmojiUploadFileType(file) {
+  if (!(0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+    return true;
+  }
+  if (supportedEmojiUploadMimeTypes.has(file.type)) {
+    return true;
+  }
+  var lowerCaseFileName = file.name.toLowerCase();
+  return supportedEmojiUploadExtensions.some(function (extension) {
+    return lowerCaseFileName.endsWith(extension);
+  });
+};
 var ChooseEmojiFile = /*#__PURE__*/(0, _react.memo)(function (props) {
   var _props$name = props.name,
     name = _props$name === void 0 ? '' : _props$name,
@@ -342,6 +356,11 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     if (files.length) {
       var reader = new FileReader();
       var file = files[0];
+      if (!isSupportedEmojiUploadFileType(file)) {
+        setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiUnsupportedFileType));
+        cancelChooseFile();
+        return;
+      }
       if (ImageUtil.hasFileExceededSize(file)) {
         setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiImageTooBig));
         cancelChooseFile();

package/dist/cjs/components/i18n.js

@@ -221,6 +221,11 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
     defaultMessage: 'Selected image is more than 1 MB',
     description: 'Error message for image too big, beyond the size limit'
   },
+  emojiUnsupportedFileType: {
+    id: 'fabric.emoji.error.unsupported.file.type',
+    defaultMessage: "This file type isn't supported. Select a PNG, JPEG, or GIF to create your emoji.",
+    description: 'Error message shown when the selected emoji upload file type is not supported'
+  },
   emojiDuplicateName: {
     id: 'fabric.emoji.error.duplicate.name',
     defaultMessage: 'An emoji with this name exists already',

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.10.14"
+      packageVersion: "70.11.0"
     }, attributes)
   };
 };

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

@@ -32,6 +32,8 @@ const uploadChooseFileEmojiName = null;
 const uploadChooseFileMessage = null;
 const uploadChooseFileRow = null;
 const uploadChooseFileRowNew = null;
+const supportedEmojiUploadMimeTypes = new Set(['image/png', 'image/jpeg', 'image/gif']);
+const supportedEmojiUploadExtensions = ['.png', '.jpg', '.jpeg', '.gif'];
 export const uploadEmojiNameInputTestId = 'upload-emoji-name-input';
 export const uploadEmojiComponentTestId = 'upload-emoji-component';
 export const cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
@@ -48,6 +50,16 @@ const toEmojiName = uploadName => {
   const name = uploadName.split('_').join(' ');
   return `${name.substr(0, 1).toLocaleUpperCase()}${name.substr(1)}`;
 };
+const isSupportedEmojiUploadFileType = file => {
+  if (!fg('platform_emoji_picker_refresh')) {
+    return true;
+  }
+  if (supportedEmojiUploadMimeTypes.has(file.type)) {
+    return true;
+  }
+  const lowerCaseFileName = file.name.toLowerCase();
+  return supportedEmojiUploadExtensions.some(extension => lowerCaseFileName.endsWith(extension));
+};
 const ChooseEmojiFile = /*#__PURE__*/memo(props => {
   const {
     name = '',
@@ -297,6 +309,11 @@ const EmojiUploadPicker = props => {
     if (files.length) {
       const reader = new FileReader();
       const file = files[0];
+      if (!isSupportedEmojiUploadFileType(file)) {
+        setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiUnsupportedFileType));
+        cancelChooseFile();
+        return;
+      }
       if (ImageUtil.hasFileExceededSize(file)) {
         setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiImageTooBig));
         cancelChooseFile();

package/dist/es2019/components/i18n.js

@@ -215,6 +215,11 @@ export const messages = defineMessages({
     defaultMessage: 'Selected image is more than 1 MB',
     description: 'Error message for image too big, beyond the size limit'
   },
+  emojiUnsupportedFileType: {
+    id: 'fabric.emoji.error.unsupported.file.type',
+    defaultMessage: "This file type isn't supported. Select a PNG, JPEG, or GIF to create your emoji.",
+    description: 'Error message shown when the selected emoji upload file type is not supported'
+  },
   emojiDuplicateName: {
     id: 'fabric.emoji.error.duplicate.name',
     defaultMessage: 'An emoji with this name exists already',

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.10.14",
+    packageVersion: "70.11.0",
     ...attributes
   }
 });

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

@@ -35,6 +35,8 @@ var uploadChooseFileEmojiName = null;
 var uploadChooseFileMessage = null;
 var uploadChooseFileRow = null;
 var uploadChooseFileRowNew = null;
+var supportedEmojiUploadMimeTypes = new Set(['image/png', 'image/jpeg', 'image/gif']);
+var supportedEmojiUploadExtensions = ['.png', '.jpg', '.jpeg', '.gif'];
 export var uploadEmojiNameInputTestId = 'upload-emoji-name-input';
 export var uploadEmojiComponentTestId = 'upload-emoji-component';
 export var cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
@@ -51,6 +53,18 @@ var toEmojiName = function toEmojiName(uploadName) {
   var name = uploadName.split('_').join(' ');
   return "".concat(name.substr(0, 1).toLocaleUpperCase()).concat(name.substr(1));
 };
+var isSupportedEmojiUploadFileType = function isSupportedEmojiUploadFileType(file) {
+  if (!fg('platform_emoji_picker_refresh')) {
+    return true;
+  }
+  if (supportedEmojiUploadMimeTypes.has(file.type)) {
+    return true;
+  }
+  var lowerCaseFileName = file.name.toLowerCase();
+  return supportedEmojiUploadExtensions.some(function (extension) {
+    return lowerCaseFileName.endsWith(extension);
+  });
+};
 var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
   var _props$name = props.name,
     name = _props$name === void 0 ? '' : _props$name,
@@ -334,6 +348,11 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     if (files.length) {
       var reader = new FileReader();
       var file = files[0];
+      if (!isSupportedEmojiUploadFileType(file)) {
+        setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiUnsupportedFileType));
+        cancelChooseFile();
+        return;
+      }
       if (ImageUtil.hasFileExceededSize(file)) {
         setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiImageTooBig));
         cancelChooseFile();

package/dist/esm/components/i18n.js

@@ -215,6 +215,11 @@ export var messages = defineMessages({
     defaultMessage: 'Selected image is more than 1 MB',
     description: 'Error message for image too big, beyond the size limit'
   },
+  emojiUnsupportedFileType: {
+    id: 'fabric.emoji.error.unsupported.file.type',
+    defaultMessage: "This file type isn't supported. Select a PNG, JPEG, or GIF to create your emoji.",
+    description: 'Error message shown when the selected emoji upload file type is not supported'
+  },
   emojiDuplicateName: {
     id: 'fabric.emoji.error.duplicate.name',
     defaultMessage: 'An emoji with this name exists already',

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.10.14"
+      packageVersion: "70.11.0"
     }, attributes)
   };
 };

package/dist/types/components/i18n.d.ts

@@ -159,6 +159,11 @@ export declare const messages: {
         description: string;
         id: string;
     };
+    emojiUnsupportedFileType: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     emojiUploadFailed: {
         defaultMessage: string;
         description: string;

package/dist/types-ts4.5/components/i18n.d.ts

@@ -159,6 +159,11 @@ export declare const messages: {
         description: string;
         id: string;
     };
+    emojiUnsupportedFileType: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     emojiUploadFailed: {
         defaultMessage: string;
         description: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "70.11.0",
+	"version": "70.11.1",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -52,9 +52,9 @@
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/textfield": "^8.3.0",
-		"@atlaskit/tmp-editor-statsig": "^84.4.0",
+		"@atlaskit/tmp-editor-statsig": "^85.0.0",
 		"@atlaskit/tokens": "^13.1.0",
-		"@atlaskit/tooltip": "^22.4.0",
+		"@atlaskit/tooltip": "^22.5.0",
 		"@atlaskit/ufo": "^0.5.0",
 		"@atlaskit/util-service-support": "^6.4.0",
 		"@atlaskit/visually-hidden": "^3.1.0",