@atlaskit/emoji 67.0.6 → 67.0.7

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/emoji
 
+## 67.0.7
+
+### Patch Changes
+
+- [`afd73c661b7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/afd73c661b7) - Fixed regression bug where selecting a category highlighted wrong category in category tracker
+- [`3fdb998a000`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fdb998a000) - Unblock hot-102193 to bump emoji to latest.
+- [`858c6abd872`](https://bitbucket.org/atlassian/atlassian-frontend/commits/858c6abd872) - Fix bug that was causing the emoji picker to crash on initial rendering
+- [`e2c42bb9cdd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e2c42bb9cdd) - [ux] fix emoji picker horizontal scrollbar issue
+- [`6d710a9b5b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6d710a9b5b0) - clean up delete preview styling
+- Updated dependencies
+
 ## 67.0.6
 
 ### Patch Changes

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

@@ -31,7 +31,7 @@ var CachingEmoji = function CachingEmoji(props) {
   // Optimisation to only render CachingMediaEmoji if necessary
   // slight performance hit, which accumulates for a large number of emoji.
   var emoji = props.emoji;
-  // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
+  // start emoji rendered experience, it may have already started earlier in `ResourcedEmoji`.
   (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
     source: 'CachingEmoji',
     emojiId: emoji.id
@@ -128,5 +128,5 @@ var CachingMediaEmoji = function CachingMediaEmoji(props) {
   });
 };
 exports.CachingMediaEmoji = CachingMediaEmoji;
-var _default = CachingEmoji;
+var _default = /*#__PURE__*/(0, _react.memo)(CachingEmoji);
 exports.default = _default;

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

@@ -52,5 +52,5 @@ var EmojiButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }));
 });
 exports.EmojiButton = EmojiButton;
-var _default = EmojiButton;
+var _default = /*#__PURE__*/(0, _react.memo)(EmojiButton);
 exports.default = _default;

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

@@ -12,7 +12,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("../../util/constants");
 var _sharedStyles = require("../../util/shared-styles");
 var _colors = require("@atlaskit/theme/colors");
-var _css, _css2, _templateObject, _span, _css3, _css6, _input, _css7;
+var _css, _css2, _templateObject, _span, _css3, _css6, _input;
 var commonSelectedStyles = 'emoji-common-selected';
 exports.commonSelectedStyles = commonSelectedStyles;
 var selectOnHoverStyles = 'emoji-common-select-on-hover';
@@ -341,27 +341,21 @@ var previewButtonGroup = (0, _react.css)({
   display: 'flex'
 });
 exports.previewButtonGroup = previewButtonGroup;
-var deleteFooter = (0, _react.css)((_css7 = {
+var deleteFooter = (0, _react.css)((0, _defineProperty2.default)({
   display: 'flex',
   height: '40px',
   alignItems: 'center',
   justifyContent: 'space-between',
+  fontSize: "var(--ds-font-size-100, 14px)",
   img: {
     maxHeight: '32px',
     maxWidth: '72px'
   }
-}, (0, _defineProperty2.default)(_css7, ".".concat(submitDelete), {
+}, ".".concat(submitDelete), {
   width: '84px',
   fontWeight: 'bold',
   marginRight: '4px'
-}), (0, _defineProperty2.default)(_css7, "button", {
-  display: 'flex',
-  justifyContent: 'center',
-  fontSize: '14px',
-  div: {
-    display: 'flex'
-  }
-}), _css7));
+}));
 exports.deleteFooter = deleteFooter;
 var emojiDeleteErrorMessage = (0, _react.css)({
   display: 'flex',

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

@@ -252,6 +252,7 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         onOpenUpload = _this$props2.onOpenUpload,
         _this$props2$size = _this$props2.size,
         size = _this$props2$size === void 0 ? _constants.defaultEmojiPickerSize : _this$props2$size;
+      var virtualListHeight = _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size);
       return (0, _react2.jsx)("div", {
         ref: "root",
         css: _styles.emojiPickerList,
@@ -276,7 +277,7 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         onChange: this.onSearch
       }), (0, _react2.jsx)(_VirtualList.VirtualList, {
         ref: "list",
-        height: _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size),
+        height: virtualListHeight,
         overscanRowCount: 10,
         rowCount: this.virtualItems.length,
         rowHeight: this.rowSize,

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

@@ -81,18 +81,23 @@ var VirtualList = /*#__PURE__*/function (_PureComponent) {
     value: function getFirstVisibleListElementIndex() {
       var _this$parentRef$curre,
         _this$parentRef$curre2,
-        _this3 = this,
-        _virtualList$firstVis;
+        _this3 = this;
       var virtualList = this.rowVirtualizer.getVirtualItems();
       var renderedElements = (_this$parentRef$curre = this.parentRef.current) === null || _this$parentRef$curre === void 0 ? void 0 : (_this$parentRef$curre2 = _this$parentRef$curre.firstChild) === null || _this$parentRef$curre2 === void 0 ? void 0 : _this$parentRef$curre2.childNodes;
-      var firstVisibleIndex = 0;
-      renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.forEach(function (value, key) {
-        if (_this3.isElementVisible(value)) {
-          firstVisibleIndex = key;
-          return;
-        }
+      if (virtualList.length === 0 || !renderedElements || renderedElements.length === 0) {
+        return 0;
+      }
+
+      // Convert NodeListOf<ChildNodes> to ChildNodes[]
+      var renderedElementsToArray = Array.from(renderedElements);
+      var firstVisibleIndex = renderedElementsToArray.findIndex(function (elem) {
+        return _this3.isElementVisible(elem);
       });
-      return ((_virtualList$firstVis = virtualList[firstVisibleIndex]) === null || _virtualList$firstVis === void 0 ? void 0 : _virtualList$firstVis.index) || 0;
+      if (firstVisibleIndex !== -1) {
+        var _virtualList$firstVis;
+        return ((_virtualList$firstVis = virtualList[firstVisibleIndex]) === null || _virtualList$firstVis === void 0 ? void 0 : _virtualList$firstVis.index) || 0;
+      }
+      return 0;
     }
   }, {
     key: "onRendered",
@@ -167,8 +172,7 @@ var VirtualList = /*#__PURE__*/function (_PureComponent) {
         role: "grid",
         style: {
           height: "".concat(height, "px"),
-          width: "".concat(width, "px"),
-          overflow: 'auto'
+          width: "".concat(width, "px")
         },
         css: _styles.virtualList,
         "data-testid": virtualListScrollContainerTestId,

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

@@ -107,6 +107,8 @@ var emojiPickerList = (0, _react.css)({
 // focus style is enabled by default - turn it off
 exports.emojiPickerList = emojiPickerList;
 var virtualList = (0, _react.css)({
+  overflowX: 'hidden',
+  overflowY: 'auto',
   '&:focus': {
     outline: 'none'
   }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "67.0.6",
+	"version": "67.0.7",
 	"sideEffects": false
 }

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useEffect, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { isMediaEmoji } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
 import debug from '../../util/logger';
@@ -21,7 +21,7 @@ export const CachingEmoji = props => {
   const {
     emoji
   } = props;
-  // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
+  // start emoji rendered experience, it may have already started earlier in `ResourcedEmoji`.
   useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
     source: 'CachingEmoji',
     emojiId: emoji.id
@@ -115,4 +115,4 @@ export const CachingMediaEmoji = props => {
     representation: representation
   });
 };
-export default CachingEmoji;
+export default /*#__PURE__*/memo(CachingEmoji);

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { forwardRef } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { leftClick } from '../../util/mouse';
 import { emojiButton, hiddenToneButton } from './styles';
@@ -46,4 +46,4 @@ export const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
     selectOnHover: selectOnHover
   }));
 });
-export default EmojiButton;
+export default /*#__PURE__*/memo(EmojiButton);

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

@@ -323,6 +323,7 @@ export const deleteFooter = css({
   height: '40px',
   alignItems: 'center',
   justifyContent: 'space-between',
+  fontSize: "var(--ds-font-size-100, 14px)",
   img: {
     maxHeight: '32px',
     maxWidth: '72px'
@@ -331,14 +332,6 @@ export const deleteFooter = css({
     width: '84px',
     fontWeight: 'bold',
     marginRight: '4px'
-  },
-  button: {
-    display: 'flex',
-    justifyContent: 'center',
-    fontSize: '14px',
-    div: {
-      display: 'flex'
-    }
   }
 });
 export const emojiDeleteErrorMessage = css({

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

@@ -218,6 +218,7 @@ export default class EmojiPickerVirtualList extends PureComponent {
       onOpenUpload,
       size = defaultEmojiPickerSize
     } = this.props;
+    const virtualListHeight = sizes.listHeight + emojiPickerHeightOffset(size);
     return jsx("div", {
       ref: "root",
       css: emojiPickerList,
@@ -242,7 +243,7 @@ export default class EmojiPickerVirtualList extends PureComponent {
       onChange: this.onSearch
     }), jsx(VirtualList, {
       ref: "list",
-      height: sizes.listHeight + emojiPickerHeightOffset(size),
+      height: virtualListHeight,
       overscanRowCount: 10,
       rowCount: this.virtualItems.length,
       rowHeight: this.rowSize,

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

@@ -49,17 +49,21 @@ export class VirtualList extends PureComponent {
     return isVisible;
   }
   getFirstVisibleListElementIndex() {
-    var _this$parentRef$curre, _this$parentRef$curre2, _virtualList$firstVis;
+    var _this$parentRef$curre, _this$parentRef$curre2;
     const virtualList = this.rowVirtualizer.getVirtualItems();
     const renderedElements = (_this$parentRef$curre = this.parentRef.current) === null || _this$parentRef$curre === void 0 ? void 0 : (_this$parentRef$curre2 = _this$parentRef$curre.firstChild) === null || _this$parentRef$curre2 === void 0 ? void 0 : _this$parentRef$curre2.childNodes;
-    let firstVisibleIndex = 0;
-    renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.forEach((value, key) => {
-      if (this.isElementVisible(value)) {
-        firstVisibleIndex = key;
-        return;
-      }
-    });
-    return ((_virtualList$firstVis = virtualList[firstVisibleIndex]) === null || _virtualList$firstVis === void 0 ? void 0 : _virtualList$firstVis.index) || 0;
+    if (virtualList.length === 0 || !renderedElements || renderedElements.length === 0) {
+      return 0;
+    }
+
+    // Convert NodeListOf<ChildNodes> to ChildNodes[]
+    const renderedElementsToArray = Array.from(renderedElements);
+    const firstVisibleIndex = renderedElementsToArray.findIndex(elem => this.isElementVisible(elem));
+    if (firstVisibleIndex !== -1) {
+      var _virtualList$firstVis;
+      return ((_virtualList$firstVis = virtualList[firstVisibleIndex]) === null || _virtualList$firstVis === void 0 ? void 0 : _virtualList$firstVis.index) || 0;
+    }
+    return 0;
   }
   onRendered() {
     const {
@@ -121,8 +125,7 @@ export class VirtualList extends PureComponent {
       role: "grid",
       style: {
         height: `${height}px`,
-        width: `${width}px`,
-        overflow: 'auto'
+        width: `${width}px`
       },
       css: virtualList,
       "data-testid": virtualListScrollContainerTestId,

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

@@ -99,6 +99,8 @@ export const emojiPickerList = css({
 
 // focus style is enabled by default - turn it off
 export const virtualList = css({
+  overflowX: 'hidden',
+  overflowY: 'auto',
   '&:focus': {
     outline: 'none'
   }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "67.0.6",
+	"version": "67.0.7",
 	"sideEffects": false
 }

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["emoji", "placeholderSize", "showTooltip", "fitToHeight", "children"];
-import React, { useEffect, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { isMediaEmoji } from '../../util/type-helpers';
 import { UfoEmojiTimings } from '../../types';
 import debug from '../../util/logger';
@@ -22,7 +22,7 @@ export var CachingEmoji = function CachingEmoji(props) {
   // Optimisation to only render CachingMediaEmoji if necessary
   // slight performance hit, which accumulates for a large number of emoji.
   var emoji = props.emoji;
-  // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
+  // start emoji rendered experience, it may have already started earlier in `ResourcedEmoji`.
   useSampledUFOComponentExperience(ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), SAMPLING_RATE_EMOJI_RENDERED_EXP, {
     source: 'CachingEmoji',
     emojiId: emoji.id
@@ -117,4 +117,4 @@ export var CachingMediaEmoji = function CachingMediaEmoji(props) {
     representation: representation
   });
 };
-export default CachingEmoji;
+export default /*#__PURE__*/memo(CachingEmoji);

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { forwardRef } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { leftClick } from '../../util/mouse';
 import { emojiButton, hiddenToneButton } from './styles';
@@ -40,4 +40,4 @@ export var EmojiButton = /*#__PURE__*/forwardRef(function (props, ref) {
     selectOnHover: selectOnHover
   }));
 });
-export default EmojiButton;
+export default /*#__PURE__*/memo(EmojiButton);

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

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _css, _css2, _templateObject, _span, _css3, _css6, _input, _css7;
+var _css, _css2, _templateObject, _span, _css3, _css6, _input;
 import { css, keyframes } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { defaultEmojiHeight } from '../../util/constants';
@@ -296,27 +296,21 @@ export var deleteText = css({
 export var previewButtonGroup = css({
   display: 'flex'
 });
-export var deleteFooter = css((_css7 = {
+export var deleteFooter = css(_defineProperty({
   display: 'flex',
   height: '40px',
   alignItems: 'center',
   justifyContent: 'space-between',
+  fontSize: "var(--ds-font-size-100, 14px)",
   img: {
     maxHeight: '32px',
     maxWidth: '72px'
   }
-}, _defineProperty(_css7, ".".concat(submitDelete), {
+}, ".".concat(submitDelete), {
   width: '84px',
   fontWeight: 'bold',
   marginRight: '4px'
-}), _defineProperty(_css7, "button", {
-  display: 'flex',
-  justifyContent: 'center',
-  fontSize: '14px',
-  div: {
-    display: 'flex'
-  }
-}), _css7));
+}));
 export var emojiDeleteErrorMessage = css({
   display: 'flex',
   color: "var(--ds-text-danger, ".concat(R400, ")"),

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

@@ -242,6 +242,7 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         onOpenUpload = _this$props2.onOpenUpload,
         _this$props2$size = _this$props2.size,
         size = _this$props2$size === void 0 ? defaultEmojiPickerSize : _this$props2$size;
+      var virtualListHeight = sizes.listHeight + emojiPickerHeightOffset(size);
       return jsx("div", {
         ref: "root",
         css: emojiPickerList,
@@ -266,7 +267,7 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         onChange: this.onSearch
       }), jsx(VirtualList, {
         ref: "list",
-        height: sizes.listHeight + emojiPickerHeightOffset(size),
+        height: virtualListHeight,
         overscanRowCount: 10,
         rowCount: this.virtualItems.length,
         rowHeight: this.rowSize,

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

@@ -71,18 +71,23 @@ export var VirtualList = /*#__PURE__*/function (_PureComponent) {
     value: function getFirstVisibleListElementIndex() {
       var _this$parentRef$curre,
         _this$parentRef$curre2,
-        _this3 = this,
-        _virtualList$firstVis;
+        _this3 = this;
       var virtualList = this.rowVirtualizer.getVirtualItems();
       var renderedElements = (_this$parentRef$curre = this.parentRef.current) === null || _this$parentRef$curre === void 0 ? void 0 : (_this$parentRef$curre2 = _this$parentRef$curre.firstChild) === null || _this$parentRef$curre2 === void 0 ? void 0 : _this$parentRef$curre2.childNodes;
-      var firstVisibleIndex = 0;
-      renderedElements === null || renderedElements === void 0 ? void 0 : renderedElements.forEach(function (value, key) {
-        if (_this3.isElementVisible(value)) {
-          firstVisibleIndex = key;
-          return;
-        }
+      if (virtualList.length === 0 || !renderedElements || renderedElements.length === 0) {
+        return 0;
+      }
+
+      // Convert NodeListOf<ChildNodes> to ChildNodes[]
+      var renderedElementsToArray = Array.from(renderedElements);
+      var firstVisibleIndex = renderedElementsToArray.findIndex(function (elem) {
+        return _this3.isElementVisible(elem);
       });
-      return ((_virtualList$firstVis = virtualList[firstVisibleIndex]) === null || _virtualList$firstVis === void 0 ? void 0 : _virtualList$firstVis.index) || 0;
+      if (firstVisibleIndex !== -1) {
+        var _virtualList$firstVis;
+        return ((_virtualList$firstVis = virtualList[firstVisibleIndex]) === null || _virtualList$firstVis === void 0 ? void 0 : _virtualList$firstVis.index) || 0;
+      }
+      return 0;
     }
   }, {
     key: "onRendered",
@@ -157,8 +162,7 @@ export var VirtualList = /*#__PURE__*/function (_PureComponent) {
         role: "grid",
         style: {
           height: "".concat(height, "px"),
-          width: "".concat(width, "px"),
-          overflow: 'auto'
+          width: "".concat(width, "px")
         },
         css: virtualList,
         "data-testid": virtualListScrollContainerTestId,

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

@@ -96,6 +96,8 @@ export var emojiPickerList = css({
 
 // focus style is enabled by default - turn it off
 export var virtualList = css({
+  overflowX: 'hidden',
+  overflowY: 'auto',
   '&:focus': {
     outline: 'none'
   }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "67.0.6",
+	"version": "67.0.7",
 	"sideEffects": false
 }

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { EmojiDescription } from '../../types';
 import { Props as EmojiProps } from './Emoji';
 export interface State {
@@ -17,4 +17,5 @@ export declare const CachingEmoji: FC<CachingEmojiProps>;
  * rendering paths depending on caching strategy.
  */
 export declare const CachingMediaEmoji: FC<CachingEmojiProps>;
-export default CachingEmoji;
+declare const _default: React.NamedExoticComponent<CachingEmojiProps>;
+export default _default;

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

@@ -10,4 +10,5 @@ export interface Props {
     shouldHideButton?: boolean;
 }
 export declare const EmojiButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
-export default EmojiButton;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "67.0.6",
+  "version": "67.0.7",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,14 +26,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^8.2.0",
+    "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/media-client": "^20.0.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/textfield": "^5.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^1.1.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/ufo": "^0.1.0",
     "@atlaskit/util-service-support": "^6.1.0",