@atlaskit/emoji 71.2.0 → 71.2.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/emoji
 
+## 71.2.2
+
+### Patch Changes
+
+- [`deb7c88f3baed`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/deb7c88f3baed) -
+  Update unicode emoji sizing so renderer typography can control text emoji scale.
+- Updated dependencies
+
+## 71.2.1
+
+### Patch Changes
+
+- [`6fbfacbeddc94`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6fbfacbeddc94) -
+  Ensure scroll to Your uploads on clicking uploads category
+- Updated dependencies
+
 ## 71.2.0
 
 ### Minor Changes

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

@@ -281,11 +281,11 @@ var UnicodeEmojiImage = function UnicodeEmojiImage(props) {
   });
 };
 var UnicodeEmoji = exports.UnicodeEmoji = function UnicodeEmoji(props) {
-  var _props$fitToHeight;
   var emoji = props.emoji,
     selected = props.selected,
     selectOnHover = props.selectOnHover,
     className = props.className,
+    fitToHeight = props.fitToHeight,
     _props$renderUnicodeE = props.renderUnicodeEmojiAsImage,
     renderUnicodeEmojiAsImage = _props$renderUnicodeE === void 0 ? true : _props$renderUnicodeE;
   if (renderUnicodeEmojiAsImage) {
@@ -293,20 +293,14 @@ var UnicodeEmoji = exports.UnicodeEmoji = function UnicodeEmoji(props) {
   }
   var classes = "".concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(className ? className : '');
   var emojiText = emoji.representation.unicodeEmoji;
-  var size = (_props$fitToHeight = props.fitToHeight) !== null && _props$fitToHeight !== void 0 ? _props$fitToHeight : _constants.defaultEmojiHeight;
+  var defaultSize = "".concat(fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : _constants.defaultEmojiHeight, "px");
+  var emojiSize = "var(--emoji-common-unicode-size, ".concat(defaultSize, ")");
   var style = {
-    display: 'inline-block',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: "max(1em, ".concat(size, "px)"),
-    width: "max(1em, ".concat(size, "px)"),
-    height: "max(1em, ".concat(size, "px)"),
-    textAlign: 'center',
-    alignContent: 'center',
-    alignSelf: 'center',
+    display: 'inline-flex',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '0',
-    margin: '0',
-    padding: '0'
+    fontSize: emojiSize,
+    alignItems: 'center',
+    aspectRatio: '1/1'
   };
   return (
     /*#__PURE__*/

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

@@ -390,7 +390,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
           if (isTeamojiExperimentEnabled) {
             isProgrammaticScroll.current = true;
           }
-          emojiPickerList.current.reveal(categoryId);
+          emojiPickerList.current.reveal(categoryId, isTeamojiExperimentEnabled);
           if (isTeamojiExperimentEnabled) {
             // Clear the flag after the scroll animation has settled.
             setTimeout(function () {

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

@@ -380,7 +380,9 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       reveal: function reveal(category) {
-        var row = categoryTracker.getRow(category);
+        var _categoryTracker$getR;
+        var preferYourUploads = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        var row = preferYourUploads && category === _constants.customCategory ? (_categoryTracker$getR = categoryTracker.getRow(_constants.yourUploadsCategory)) !== null && _categoryTracker$getR !== void 0 ? _categoryTracker$getR : categoryTracker.getRow(category) : categoryTracker.getRow(category);
         (0, _utils.scrollToRow)(listRef, row);
       },
       scrollToBottom: function scrollToBottom() {

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

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

@@ -256,12 +256,12 @@ const UnicodeEmojiImage = props => {
   });
 };
 export const UnicodeEmoji = props => {
-  var _props$fitToHeight;
   const {
     emoji,
     selected,
     selectOnHover,
     className,
+    fitToHeight,
     renderUnicodeEmojiAsImage = true
   } = props;
   if (renderUnicodeEmojiAsImage) {
@@ -269,20 +269,14 @@ export const UnicodeEmoji = props => {
   }
   const classes = `${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${className ? className : ''}`;
   const emojiText = emoji.representation.unicodeEmoji;
-  const size = (_props$fitToHeight = props.fitToHeight) !== null && _props$fitToHeight !== void 0 ? _props$fitToHeight : defaultEmojiHeight;
+  const defaultSize = `${fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight}px`;
+  const emojiSize = `var(--emoji-common-unicode-size, ${defaultSize})`;
   const style = {
-    display: 'inline-block',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: `max(1em, ${size}px)`,
-    width: `max(1em, ${size}px)`,
-    height: `max(1em, ${size}px)`,
-    textAlign: 'center',
-    alignContent: 'center',
-    alignSelf: 'center',
+    display: 'inline-flex',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '0',
-    margin: '0',
-    padding: '0'
+    fontSize: emojiSize,
+    alignItems: 'center',
+    aspectRatio: '1/1'
   };
   return (
     /*#__PURE__*/

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

@@ -331,7 +331,7 @@ const EmojiPickerComponent = ({
           if (isTeamojiExperimentEnabled) {
             isProgrammaticScroll.current = true;
           }
-          emojiPickerList.current.reveal(categoryId);
+          emojiPickerList.current.reveal(categoryId, isTeamojiExperimentEnabled);
           if (isTeamojiExperimentEnabled) {
             // Clear the flag after the scroll animation has settled.
             setTimeout(() => {

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

@@ -340,8 +340,9 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
    */
   useImperativeHandle(ref, () => {
     return {
-      reveal(category) {
-        const row = categoryTracker.getRow(category);
+      reveal(category, preferYourUploads = false) {
+        var _categoryTracker$getR;
+        const row = preferYourUploads && category === customCategory ? (_categoryTracker$getR = categoryTracker.getRow(yourUploadsCategory)) !== null && _categoryTracker$getR !== void 0 ? _categoryTracker$getR : categoryTracker.getRow(category) : categoryTracker.getRow(category);
         scrollToRow(listRef, row);
       },
       scrollToBottom() {

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

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

@@ -272,11 +272,11 @@ var UnicodeEmojiImage = function UnicodeEmojiImage(props) {
   });
 };
 export var UnicodeEmoji = function UnicodeEmoji(props) {
-  var _props$fitToHeight;
   var emoji = props.emoji,
     selected = props.selected,
     selectOnHover = props.selectOnHover,
     className = props.className,
+    fitToHeight = props.fitToHeight,
     _props$renderUnicodeE = props.renderUnicodeEmojiAsImage,
     renderUnicodeEmojiAsImage = _props$renderUnicodeE === void 0 ? true : _props$renderUnicodeE;
   if (renderUnicodeEmojiAsImage) {
@@ -284,20 +284,14 @@ export var UnicodeEmoji = function UnicodeEmoji(props) {
   }
   var classes = "".concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? selectOnHoverStyles : '', " ").concat(className ? className : '');
   var emojiText = emoji.representation.unicodeEmoji;
-  var size = (_props$fitToHeight = props.fitToHeight) !== null && _props$fitToHeight !== void 0 ? _props$fitToHeight : defaultEmojiHeight;
+  var defaultSize = "".concat(fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight, "px");
+  var emojiSize = "var(--emoji-common-unicode-size, ".concat(defaultSize, ")");
   var style = {
-    display: 'inline-block',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: "max(1em, ".concat(size, "px)"),
-    width: "max(1em, ".concat(size, "px)"),
-    height: "max(1em, ".concat(size, "px)"),
-    textAlign: 'center',
-    alignContent: 'center',
-    alignSelf: 'center',
+    display: 'inline-flex',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '0',
-    margin: '0',
-    padding: '0'
+    fontSize: emojiSize,
+    alignItems: 'center',
+    aspectRatio: '1/1'
   };
   return (
     /*#__PURE__*/

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

@@ -381,7 +381,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
           if (isTeamojiExperimentEnabled) {
             isProgrammaticScroll.current = true;
           }
-          emojiPickerList.current.reveal(categoryId);
+          emojiPickerList.current.reveal(categoryId, isTeamojiExperimentEnabled);
           if (isTeamojiExperimentEnabled) {
             // Clear the flag after the scroll animation has settled.
             setTimeout(function () {

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

@@ -372,7 +372,9 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
   useImperativeHandle(ref, function () {
     return {
       reveal: function reveal(category) {
-        var row = categoryTracker.getRow(category);
+        var _categoryTracker$getR;
+        var preferYourUploads = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+        var row = preferYourUploads && category === customCategory ? (_categoryTracker$getR = categoryTracker.getRow(yourUploadsCategory)) !== null && _categoryTracker$getR !== void 0 ? _categoryTracker$getR : categoryTracker.getRow(category) : categoryTracker.getRow(category);
         _scrollToRow(listRef, row);
       },
       scrollToBottom: function scrollToBottom() {

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

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

@@ -45,7 +45,7 @@ export interface Props {
 export interface State {
 }
 export type PickerListRef = {
-    reveal: (category: CategoryId) => void;
+    reveal: (category: CategoryId, preferYourUploads?: boolean) => void;
     scrollToBottom: () => void;
     scrollToRecentlyUploaded: (uploadedEmoji: EmojiDescription) => void;
     scrollToRow: (index?: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.2.0",
+	"version": "71.2.2",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
 		"@atlaskit/afm-i18n-platform-elements-emoji": "2.158.0",
 		"@atlaskit/analytics-next": "^12.0.0",
 		"@atlaskit/browser-apis": "^1.0.0",
-		"@atlaskit/button": "^24.0.0",
+		"@atlaskit/button": "^24.1.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
 		"@atlaskit/form": "^16.0.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/radio": "^9.0.0",
 		"@atlaskit/spinner": "^20.0.0",
 		"@atlaskit/textfield": "^9.0.0",
-		"@atlaskit/tmp-editor-statsig": "^107.1.0",
+		"@atlaskit/tmp-editor-statsig": "^108.4.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@atlaskit/tooltip": "^23.0.0",
 		"@atlaskit/ufo": "^1.0.0",