@atlaskit/emoji 71.16.3 → 71.17.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/emoji
 
+## 71.17.0
+
+### Minor Changes
+
+- [`a32f36ef87959`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a32f36ef87959) -
+  Gated behind `add_emoji_media_size_to_media_file_upload_request`, switches emoji upload to use
+  media client uploadExternal function.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 71.16.4
+
+### Patch Changes
+
+- [`e115e358fd590`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e115e358fd590) -
+  Retain onMouseLeave effect for updated emoji picker
+- Updated dependencies
+
 ## 71.16.3
 
 ### Patch Changes

package/dist/cjs/api/media/SiteEmojiResource.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mediaProportionOfProgress = exports.getDataUrlSizeInBytes = exports.default = void 0;
+exports.mediaProportionOfProgress = exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -25,27 +25,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // Assume media is 95% of total upload time.
 var mediaProportionOfProgress = exports.mediaProportionOfProgress = 95 / 100;
-var getDataUrlSizeInBytes = exports.getDataUrlSizeInBytes = function getDataUrlSizeInBytes(dataURL) {
-  var separatorIndex = dataURL.indexOf(',');
-  if (separatorIndex === -1) {
-    return undefined;
-  }
-  var metadata = dataURL.slice(0, separatorIndex);
-  var data = dataURL.slice(separatorIndex + 1);
-  if (!data) {
-    return undefined;
-  }
-  if (metadata.includes(';base64')) {
-    var _data$match;
-    var padding = ((_data$match = data.match(/=*$/)) === null || _data$match === void 0 ? void 0 : _data$match[0].length) || 0;
-    return Math.floor(data.length * 3 / 4) - padding;
-  }
-  try {
-    return new TextEncoder().encode(decodeURIComponent(data)).length;
-  } catch (_unused) {
-    return data.length;
-  }
-};
 var SiteEmojiResource = exports.default = /*#__PURE__*/function () {
   // @ts-ignore: I am not being read from, should I be deleted???
 
@@ -210,35 +189,64 @@ var SiteEmojiResource = exports.default = /*#__PURE__*/function () {
             },
             useSha256ForUploads: true
           });
-          var size = (0, _fg.fg)('add_emoji_media_size_to_media_file_upload_request') ? getDataUrlSizeInBytes(upload.dataURL) : undefined;
-          var subscription = mediaClient.file.upload(_objectSpread({
-            content: upload.dataURL,
-            name: upload.filename,
-            collection: collectionName
-          }, size !== undefined ? {
-            size: size
-          } : {})).subscribe({
-            next: function next(state) {
-              if (state.status === 'uploading' && progressCallback) {
-                progressCallback({
-                  percent: state.progress * mediaProportionOfProgress
-                });
-              } else if (state.status === 'processing' || state.status === 'processed') {
-                subscription.unsubscribe();
-                var totalUploadTime = Date.now() - startTime;
-                var mediaUploadTime = totalUploadTime - tokenLoadTime;
-                (0, _logger.default)('total upload / media upload times', totalUploadTime, mediaUploadTime);
-                _this2.postToEmojiService(upload, state.id).then(function (emoji) {
-                  resolve(emoji);
-                }).catch(function (httpError) {
-                  reject(httpError.reason || httpError);
-                });
+          if ((0, _fg.fg)('add_emoji_media_size_to_media_file_upload_request')) {
+            mediaClient.file.uploadExternal(upload.dataURL, collectionName, undefined, true).then(function (_ref3) {
+              var uploadableFileUpfrontIds = _ref3.uploadableFileUpfrontIds;
+              var subscription = mediaClient.file.getFileState(uploadableFileUpfrontIds.id, {
+                collectionName: collectionName
+              }).subscribe({
+                next: function next(state) {
+                  if (state.status === 'uploading' && progressCallback) {
+                    progressCallback({
+                      percent: state.progress * mediaProportionOfProgress
+                    });
+                  } else if (state.status === 'processing' || state.status === 'processed') {
+                    subscription.unsubscribe();
+                    var totalUploadTime = Date.now() - startTime;
+                    var mediaUploadTime = totalUploadTime - tokenLoadTime;
+                    (0, _logger.default)('total upload / media upload times', totalUploadTime, mediaUploadTime);
+                    _this2.postToEmojiService(upload, uploadableFileUpfrontIds.id).then(function (emoji) {
+                      resolve(emoji);
+                    }).catch(function (httpError) {
+                      reject(httpError.reason || httpError);
+                    });
+                  }
+                },
+                error: function error(_error) {
+                  reject(_error);
+                }
+              });
+            }).catch(function (error) {
+              reject(error);
+            });
+          } else {
+            var subscription = mediaClient.file.upload({
+              content: upload.dataURL,
+              name: upload.filename,
+              collection: collectionName
+            }).subscribe({
+              next: function next(state) {
+                if (state.status === 'uploading' && progressCallback) {
+                  progressCallback({
+                    percent: state.progress * mediaProportionOfProgress
+                  });
+                } else if (state.status === 'processing' || state.status === 'processed') {
+                  subscription.unsubscribe();
+                  var totalUploadTime = Date.now() - startTime;
+                  var mediaUploadTime = totalUploadTime - tokenLoadTime;
+                  (0, _logger.default)('total upload / media upload times', totalUploadTime, mediaUploadTime);
+                  _this2.postToEmojiService(upload, state.id).then(function (emoji) {
+                    resolve(emoji);
+                  }).catch(function (httpError) {
+                    reject(httpError.reason || httpError);
+                  });
+                }
+              },
+              error: function error(_error2) {
+                reject(_error2);
               }
-            },
-            error: function error(_error) {
-              reject(_error);
-            }
-          });
+            });
+          }
         });
       });
     }

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

@@ -23,6 +23,7 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
   var emojis = _ref.emojis,
     onSelected = _ref.onSelected,
     onMouseMove = _ref.onMouseMove,
+    onMouseLeave = _ref.onMouseLeave,
     onFocus = _ref.onFocus,
     title = _ref.title,
     showDelete = _ref.showDelete,
@@ -61,6 +62,7 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
       selectOnHover: true,
       onSelected: onSelected,
       onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave,
       onFocus: handleFocus(index),
       showDelete: showDelete,
       onDelete: onDelete,

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

package/dist/es2019/api/media/SiteEmojiResource.js

@@ -9,27 +9,6 @@ import TokenManager from './TokenManager';
 import debug from '../../util/logger';
 // Assume media is 95% of total upload time.
 export const mediaProportionOfProgress = 95 / 100;
-export const getDataUrlSizeInBytes = dataURL => {
-  const separatorIndex = dataURL.indexOf(',');
-  if (separatorIndex === -1) {
-    return undefined;
-  }
-  const metadata = dataURL.slice(0, separatorIndex);
-  const data = dataURL.slice(separatorIndex + 1);
-  if (!data) {
-    return undefined;
-  }
-  if (metadata.includes(';base64')) {
-    var _data$match;
-    const padding = ((_data$match = data.match(/=*$/)) === null || _data$match === void 0 ? void 0 : _data$match[0].length) || 0;
-    return Math.floor(data.length * 3 / 4) - padding;
-  }
-  try {
-    return new TextEncoder().encode(decodeURIComponent(data)).length;
-  } catch {
-    return data.length;
-  }
-};
 export default class SiteEmojiResource {
   // @ts-ignore: I am not being read from, should I be deleted???
 
@@ -167,36 +146,65 @@ export default class SiteEmojiResource {
           }),
           useSha256ForUploads: true
         });
-        const size = fg('add_emoji_media_size_to_media_file_upload_request') ? getDataUrlSizeInBytes(upload.dataURL) : undefined;
-        const subscription = mediaClient.file.upload({
-          content: upload.dataURL,
-          name: upload.filename,
-          collection: collectionName,
-          ...(size !== undefined ? {
-            size
-          } : {})
-        }).subscribe({
-          next: state => {
-            if (state.status === 'uploading' && progressCallback) {
-              progressCallback({
-                percent: state.progress * mediaProportionOfProgress
-              });
-            } else if (state.status === 'processing' || state.status === 'processed') {
-              subscription.unsubscribe();
-              const totalUploadTime = Date.now() - startTime;
-              const mediaUploadTime = totalUploadTime - tokenLoadTime;
-              debug('total upload / media upload times', totalUploadTime, mediaUploadTime);
-              this.postToEmojiService(upload, state.id).then(emoji => {
-                resolve(emoji);
-              }).catch(httpError => {
-                reject(httpError.reason || httpError);
-              });
-            }
-          },
-          error(error) {
+        if (fg('add_emoji_media_size_to_media_file_upload_request')) {
+          mediaClient.file.uploadExternal(upload.dataURL, collectionName, undefined, true).then(({
+            uploadableFileUpfrontIds
+          }) => {
+            const subscription = mediaClient.file.getFileState(uploadableFileUpfrontIds.id, {
+              collectionName
+            }).subscribe({
+              next: state => {
+                if (state.status === 'uploading' && progressCallback) {
+                  progressCallback({
+                    percent: state.progress * mediaProportionOfProgress
+                  });
+                } else if (state.status === 'processing' || state.status === 'processed') {
+                  subscription.unsubscribe();
+                  const totalUploadTime = Date.now() - startTime;
+                  const mediaUploadTime = totalUploadTime - tokenLoadTime;
+                  debug('total upload / media upload times', totalUploadTime, mediaUploadTime);
+                  this.postToEmojiService(upload, uploadableFileUpfrontIds.id).then(emoji => {
+                    resolve(emoji);
+                  }).catch(httpError => {
+                    reject(httpError.reason || httpError);
+                  });
+                }
+              },
+              error(error) {
+                reject(error);
+              }
+            });
+          }).catch(error => {
             reject(error);
-          }
-        });
+          });
+        } else {
+          const subscription = mediaClient.file.upload({
+            content: upload.dataURL,
+            name: upload.filename,
+            collection: collectionName
+          }).subscribe({
+            next: state => {
+              if (state.status === 'uploading' && progressCallback) {
+                progressCallback({
+                  percent: state.progress * mediaProportionOfProgress
+                });
+              } else if (state.status === 'processing' || state.status === 'processed') {
+                subscription.unsubscribe();
+                const totalUploadTime = Date.now() - startTime;
+                const mediaUploadTime = totalUploadTime - tokenLoadTime;
+                debug('total upload / media upload times', totalUploadTime, mediaUploadTime);
+                this.postToEmojiService(upload, state.id).then(emoji => {
+                  resolve(emoji);
+                }).catch(httpError => {
+                  reject(httpError.reason || httpError);
+                });
+              }
+            },
+            error(error) {
+              reject(error);
+            }
+          });
+        }
       });
     });
   }

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

@@ -14,6 +14,7 @@ const EmojiPickerEmojiRow = ({
   emojis,
   onSelected,
   onMouseMove,
+  onMouseLeave,
   onFocus,
   title,
   showDelete,
@@ -55,6 +56,7 @@ const EmojiPickerEmojiRow = ({
       selectOnHover: true,
       onSelected: onSelected,
       onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave,
       onFocus: handleFocus(index),
       showDelete: showDelete,
       onDelete: onDelete,

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

package/dist/esm/api/media/SiteEmojiResource.js

@@ -18,27 +18,6 @@ import TokenManager from './TokenManager';
 import debug from '../../util/logger';
 // Assume media is 95% of total upload time.
 export var mediaProportionOfProgress = 95 / 100;
-export var getDataUrlSizeInBytes = function getDataUrlSizeInBytes(dataURL) {
-  var separatorIndex = dataURL.indexOf(',');
-  if (separatorIndex === -1) {
-    return undefined;
-  }
-  var metadata = dataURL.slice(0, separatorIndex);
-  var data = dataURL.slice(separatorIndex + 1);
-  if (!data) {
-    return undefined;
-  }
-  if (metadata.includes(';base64')) {
-    var _data$match;
-    var padding = ((_data$match = data.match(/=*$/)) === null || _data$match === void 0 ? void 0 : _data$match[0].length) || 0;
-    return Math.floor(data.length * 3 / 4) - padding;
-  }
-  try {
-    return new TextEncoder().encode(decodeURIComponent(data)).length;
-  } catch (_unused) {
-    return data.length;
-  }
-};
 var SiteEmojiResource = /*#__PURE__*/function () {
   // @ts-ignore: I am not being read from, should I be deleted???
 
@@ -203,35 +182,64 @@ var SiteEmojiResource = /*#__PURE__*/function () {
             },
             useSha256ForUploads: true
           });
-          var size = fg('add_emoji_media_size_to_media_file_upload_request') ? getDataUrlSizeInBytes(upload.dataURL) : undefined;
-          var subscription = mediaClient.file.upload(_objectSpread({
-            content: upload.dataURL,
-            name: upload.filename,
-            collection: collectionName
-          }, size !== undefined ? {
-            size: size
-          } : {})).subscribe({
-            next: function next(state) {
-              if (state.status === 'uploading' && progressCallback) {
-                progressCallback({
-                  percent: state.progress * mediaProportionOfProgress
-                });
-              } else if (state.status === 'processing' || state.status === 'processed') {
-                subscription.unsubscribe();
-                var totalUploadTime = Date.now() - startTime;
-                var mediaUploadTime = totalUploadTime - tokenLoadTime;
-                debug('total upload / media upload times', totalUploadTime, mediaUploadTime);
-                _this2.postToEmojiService(upload, state.id).then(function (emoji) {
-                  resolve(emoji);
-                }).catch(function (httpError) {
-                  reject(httpError.reason || httpError);
-                });
+          if (fg('add_emoji_media_size_to_media_file_upload_request')) {
+            mediaClient.file.uploadExternal(upload.dataURL, collectionName, undefined, true).then(function (_ref3) {
+              var uploadableFileUpfrontIds = _ref3.uploadableFileUpfrontIds;
+              var subscription = mediaClient.file.getFileState(uploadableFileUpfrontIds.id, {
+                collectionName: collectionName
+              }).subscribe({
+                next: function next(state) {
+                  if (state.status === 'uploading' && progressCallback) {
+                    progressCallback({
+                      percent: state.progress * mediaProportionOfProgress
+                    });
+                  } else if (state.status === 'processing' || state.status === 'processed') {
+                    subscription.unsubscribe();
+                    var totalUploadTime = Date.now() - startTime;
+                    var mediaUploadTime = totalUploadTime - tokenLoadTime;
+                    debug('total upload / media upload times', totalUploadTime, mediaUploadTime);
+                    _this2.postToEmojiService(upload, uploadableFileUpfrontIds.id).then(function (emoji) {
+                      resolve(emoji);
+                    }).catch(function (httpError) {
+                      reject(httpError.reason || httpError);
+                    });
+                  }
+                },
+                error: function error(_error) {
+                  reject(_error);
+                }
+              });
+            }).catch(function (error) {
+              reject(error);
+            });
+          } else {
+            var subscription = mediaClient.file.upload({
+              content: upload.dataURL,
+              name: upload.filename,
+              collection: collectionName
+            }).subscribe({
+              next: function next(state) {
+                if (state.status === 'uploading' && progressCallback) {
+                  progressCallback({
+                    percent: state.progress * mediaProportionOfProgress
+                  });
+                } else if (state.status === 'processing' || state.status === 'processed') {
+                  subscription.unsubscribe();
+                  var totalUploadTime = Date.now() - startTime;
+                  var mediaUploadTime = totalUploadTime - tokenLoadTime;
+                  debug('total upload / media upload times', totalUploadTime, mediaUploadTime);
+                  _this2.postToEmojiService(upload, state.id).then(function (emoji) {
+                    resolve(emoji);
+                  }).catch(function (httpError) {
+                    reject(httpError.reason || httpError);
+                  });
+                }
+              },
+              error: function error(_error2) {
+                reject(_error2);
               }
-            },
-            error: function error(_error) {
-              reject(_error);
-            }
-          });
+            });
+          }
         });
       });
     }

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

@@ -14,6 +14,7 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
   var emojis = _ref.emojis,
     onSelected = _ref.onSelected,
     onMouseMove = _ref.onMouseMove,
+    onMouseLeave = _ref.onMouseLeave,
     onFocus = _ref.onFocus,
     title = _ref.title,
     showDelete = _ref.showDelete,
@@ -52,6 +53,7 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
       selectOnHover: true,
       onSelected: onSelected,
       onMouseMove: onMouseMove,
+      onMouseLeave: onMouseLeave,
       onFocus: handleFocus(index),
       showDelete: showDelete,
       onDelete: onDelete,

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

package/dist/types/api/media/SiteEmojiResource.d.ts

@@ -15,7 +15,6 @@ type TokenisedEmojiRepresentation = {
     representation?: EmojiRepresentation;
 };
 export declare const mediaProportionOfProgress: number;
-export declare const getDataUrlSizeInBytes: (dataURL: string) => number | undefined;
 export default class SiteEmojiResource {
     private siteServiceConfig;
     private mediaApiToken;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.16.3",
+	"version": "71.17.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -50,8 +50,8 @@
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/textfield": "^10.0.0",
 		"@atlaskit/theme": "^28.0.0",
-		"@atlaskit/tmp-editor-statsig": "^146.0.0",
-		"@atlaskit/tokens": "^16.6.0",
+		"@atlaskit/tmp-editor-statsig": "^147.1.0",
+		"@atlaskit/tokens": "^16.7.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/ufo": "^1.0.0",
 		"@atlaskit/util-service-support": "^7.2.0",

package/emoji.docs.tsx

@@ -1,96 +0,0 @@
-/**
- * Structured MCP docs for `@atlaskit/emoji`.
- */
-
-import path from 'path';
-
-import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
-
-import packageJson from './package.json';
-
-const packagePath = path.resolve(__dirname);
-
-const documentation: StructuredContentSource = {
-	package: {
-		package: '@atlaskit/emoji',
-		packagePath,
-		packageJson,
-		overview:
-			'React components and utilities for displaying and picking emojis. It includes support for standard emojis, custom emojis, and skin tone variations.',
-	},
-	components: [
-		{
-			name: 'Emoji',
-			description: 'A component for displaying a single emoji.',
-			status: 'general-availability',
-			import: {
-				name: 'Emoji',
-				package: '@atlaskit/emoji',
-				type: 'named',
-				packagePath,
-				packageJson,
-			},
-			usageGuidelines: ['Use `Emoji` to render a specific emoji by its ID or short name.'],
-			keywords: ['emoji', 'display'],
-			categories: ['elements'],
-			examples: [
-				{
-					name: 'Simple emoji',
-					description: 'Basic usage of the Emoji component.',
-					source: path.resolve(packagePath, './examples/00-simple-emoji.tsx'),
-				},
-			],
-		},
-		{
-			name: 'EmojiPicker',
-			description: 'A component that provides a searchable picker for emojis.',
-			status: 'general-availability',
-			import: {
-				name: 'EmojiPicker',
-				package: '@atlaskit/emoji',
-				type: 'named',
-				packagePath,
-				packageJson,
-			},
-			usageGuidelines: [
-				'Use `EmojiPicker` when you need to allow users to select an emoji from a list.',
-				'Requires an `EmojiResource` to fetch and manage emoji data.',
-			],
-			keywords: ['emoji', 'picker', 'select'],
-			categories: ['elements'],
-			examples: [
-				{
-					name: 'Emoji picker with usage',
-					description: 'Emoji picker with frequently used emojis tracked.',
-					source: path.resolve(packagePath, './examples/06-emoji-picker-with-usage.tsx'),
-				},
-			],
-		},
-		{
-			name: 'EmojiTypeAhead',
-			description: 'A component that provides emoji suggestions based on user input.',
-			status: 'general-availability',
-			import: {
-				name: 'EmojiTypeAhead',
-				package: '@atlaskit/emoji',
-				type: 'named',
-				packagePath,
-				packageJson,
-			},
-			usageGuidelines: [
-				'Use `EmojiTypeAhead` to provide a shortcut-based emoji selection experience (e.g., typing `:smile`).',
-			],
-			keywords: ['emoji', 'typeahead', 'autocomplete'],
-			categories: ['elements'],
-			examples: [
-				{
-					name: 'Standard emoji typeahead',
-					description: 'Basic usage of EmojiTypeAhead.',
-					source: path.resolve(packagePath, './examples/03-standard-emoji-typeahead.tsx'),
-				},
-			],
-		},
-	],
-};
-
-export default documentation;