@atlaskit/emoji 65.0.0 → 65.2.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @atlaskit/emoji
 
+## 65.2.0
+
+### Minor Changes
+
+- [`dc70b6076fb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dc70b6076fb) - Converted emoji picker component children to functional components.
+- [`f397ebff733`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f397ebff733) - Emoji Upload Component refactor to functional
+- [`f39be18203b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f39be18203b) - ToneSelector and EmojiActions functional component conversion
+- [`2a233390245`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2a233390245) - Emoji Upload Picker and File Chooser functional component refactor
+- [`02b3743e97a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/02b3743e97a) - Converted emoji picker component to functional and fixed emoji preview bugs
+- [`16b6d3503f3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/16b6d3503f3) - EmojiErrorMessage, RetryableButton and Popup refactor to functional components
+- [`8a79098bcca`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a79098bcca) - CachiningEmoji and EmojiPreviewComponent functional component conversion
+- [`7f5cfd05d71`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f5cfd05d71) - Revert changes that causing the emoji picker emoji preview to jump
+
+### Patch Changes
+
+- [`fa52e2a1ffd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fa52e2a1ffd) - Convert the 04, 13, 19 and 03 emoji examples to function components
+- [`277d88799b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/277d88799b0) - Convert emoji example from class to functional
+- Updated dependencies
+
+## 65.1.1
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 65.1.0
+
+### Minor Changes
+
+- [`cceb3262363`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cceb3262363) - [ux] Show preview below the scrollable emoji box
+
+### Patch Changes
+
+- [`641bf010d2a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/641bf010d2a) - Added JSDoc comments for exposing props
+- [`c47218c565a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c47218c565a) - Convert the demo resource control to functional componment
+
 ## 65.0.0
 
 ### Major Changes

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

@@ -11,19 +11,7 @@ exports.default = exports.CachingMediaEmoji = exports.CachingEmoji = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -45,47 +33,41 @@ var _analytics = require("../../util/analytics");
 
 var _constants = require("../../util/constants");
 
-var _EmojiContext = require("../../context/EmojiContext");
-
 var _ufoExperiences = require("../../util/analytics/ufoExperiences");
 
-var _excluded = ["placeholderSize"],
-    _excluded2 = ["children"];
+var _useEmojiContext = require("../../hooks/useEmojiContext");
+
+var _excluded = ["emoji", "placeholderSize", "showTooltip", "fitToHeight", "children"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /**
  * Renders an emoji from a cached image, if required.
  */
 var CachingEmoji = function CachingEmoji(props) {
-  // Optimisation to only render the class based CachingMediaEmoji if necessary
+  // Optimisation to only render CachingMediaEmoji if necessary
   // slight performance hit, which accumulates for a large number of emoji.
-  var placeholderSize = props.placeholderSize,
-      emojiProps = (0, _objectWithoutProperties2.default)(props, _excluded); // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
+  var emoji = props.emoji; // start emoji rendered experience, it may have already started earlier in ResourcedEmoji
 
-  (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emojiProps.emoji.id || emojiProps.emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
+  (0, _analytics.useSampledUFOComponentExperience)(_analytics.ufoExperiences['emoji-rendered'].getInstance(emoji.id || emoji.shortName), _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP, {
     source: 'caching-emoji',
-    emoji: emojiProps.emoji.shortName
+    emoji: emoji.shortName
   });
   (0, _react.useEffect)(function () {
-    if (!(0, _ufoExperiences.hasUfoMarked)((0, _analytics.sampledUfoRenderedEmoji)(emojiProps.emoji), 'fmp')) {
-      (0, _analytics.sampledUfoRenderedEmoji)(emojiProps.emoji).markFMP();
+    if (!(0, _ufoExperiences.hasUfoMarked)((0, _analytics.sampledUfoRenderedEmoji)(emoji), 'fmp')) {
+      (0, _analytics.sampledUfoRenderedEmoji)(emoji).markFMP();
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
 
   var emojiNode = function emojiNode() {
-    if ((0, _typeHelpers.isMediaEmoji)(props.emoji)) {
+    if ((0, _typeHelpers.isMediaEmoji)(emoji)) {
       return /*#__PURE__*/_react.default.createElement(CachingMediaEmoji, props);
     }
 
-    return /*#__PURE__*/_react.default.createElement(_Emoji.default, emojiProps);
+    return /*#__PURE__*/_react.default.createElement(_Emoji.default, props);
   };
 
   return /*#__PURE__*/_react.default.createElement(_UfoErrorBoundary.UfoErrorBoundary, {
@@ -100,138 +82,89 @@ var CachingEmoji = function CachingEmoji(props) {
 
 exports.CachingEmoji = CachingEmoji;
 
-var CachingMediaEmoji = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(CachingMediaEmoji, _PureComponent);
-
-  var _super = _createSuper(CachingMediaEmoji);
-
-  function CachingMediaEmoji(props, context) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, CachingMediaEmoji);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleLoadError", function (_emojiId) {
-      (0, _analytics.sampledUfoRenderedEmoji)(_emojiId).failure({
+var CachingMediaEmoji = function CachingMediaEmoji(props) {
+  var emoji = props.emoji,
+      placeholderSize = props.placeholderSize,
+      showTooltip = props.showTooltip,
+      fitToHeight = props.fitToHeight,
+      children = props.children,
+      restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var shortName = emoji.shortName,
+      representation = emoji.representation;
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      cachedEmoji = _useState2[0],
+      setCachedEmoji = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      inValidImage = _useState4[0],
+      setInvalidImage = _useState4[1];
+
+  var context = (0, _useEmojiContext.useEmojiContext)();
+  var loadEmoji = (0, _react.useCallback)(function (emojiProvider) {
+    (0, _logger.default)('Loading image via media cache', emoji.shortName);
+    (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.MEDIA_START);
+    emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(function (cachedEmoji) {
+      setCachedEmoji(cachedEmoji);
+      setInvalidImage(false);
+      (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.MEDIA_END);
+    }).catch(function () {
+      setCachedEmoji(undefined);
+      setInvalidImage(true);
+      (0, _analytics.sampledUfoRenderedEmoji)(emoji).failure({
         metadata: {
-          reason: 'load error',
+          reason: 'failed to load media emoji',
           source: 'CachingMediaEmoji',
-          emoji: {
-            id: _emojiId.id,
-            shortName: _emojiId.shortName
+          data: {
+            emoji: {
+              id: emoji.id,
+              shortName: emoji.shortName,
+              name: emoji.name
+            }
           }
         }
       });
-
-      _this.setState({
-        invalidImage: true
-      });
     });
-    _this.state = {
-      cachedEmoji: undefined
-    };
-
-    _this.loadEmoji(props.emoji, context);
-
-    return _this;
-  }
-
-  (0, _createClass2.default)(CachingMediaEmoji, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var _this$state$cachedEmo;
-
-      if (this.props.emoji.shortName !== ((_this$state$cachedEmo = this.state.cachedEmoji) === null || _this$state$cachedEmo === void 0 ? void 0 : _this$state$cachedEmo.shortName)) {
-        this.loadEmoji(this.props.emoji, this.context);
-      }
+  }, [emoji]);
+  (0, _react.useEffect)(function () {
+    if (context && context.emoji.emojiProvider) {
+      loadEmoji(context.emoji.emojiProvider);
     }
-  }, {
-    key: "loadEmoji",
-    value: function loadEmoji(emoji, context) {
-      var _this2 = this;
-
-      if (!context) {
-        return;
-      }
-
-      if (!context.emoji) {
-        return undefined;
-      }
-
-      var emojiProvider = context.emoji.emojiProvider;
-
-      if (!emojiProvider) {
-        return undefined;
+  }, [context, loadEmoji]);
+
+  var handleLoadError = function handleLoadError(_emojiId) {
+    (0, _analytics.sampledUfoRenderedEmoji)(_emojiId).failure({
+      metadata: {
+        reason: 'load error',
+        source: 'CachingMediaEmoji',
+        emoji: {
+          id: _emojiId.id,
+          shortName: _emojiId.shortName
+        }
       }
+    });
+    setInvalidImage(true);
+  };
 
-      (0, _logger.default)('Loading image via media cache', emoji.shortName);
-      (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.MEDIA_START);
-      emojiProvider.getMediaEmojiDescriptionURLWithInlineToken(emoji).then(function (cachedEmoji) {
-        _this2.setState({
-          cachedEmoji: cachedEmoji,
-          invalidImage: false
-        });
-
-        (0, _analytics.sampledUfoRenderedEmoji)(emoji).mark(_types.UfoEmojiTimings.MEDIA_END);
-      }).catch(function () {
-        _this2.setState({
-          cachedEmoji: undefined,
-          invalidImage: true
-        });
-
-        (0, _analytics.sampledUfoRenderedEmoji)(emoji).failure({
-          metadata: {
-            reason: 'failed to load media emoji',
-            source: 'CachingMediaEmoji',
-            data: {
-              emoji: {
-                id: emoji.id,
-                shortName: emoji.shortName,
-                name: emoji.name
-              }
-            }
-          }
-        });
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$state = this.state,
-          cachedEmoji = _this$state.cachedEmoji,
-          invalidImage = _this$state.invalidImage;
-      var _this$props = this.props,
-          children = _this$props.children,
-          otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
-      var emojiComponent;
-
-      if (cachedEmoji && !invalidImage) {
-        emojiComponent = /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({}, otherProps, {
-          emoji: cachedEmoji,
-          onLoadError: this.handleLoadError
-        }));
-      } else {
-        var _this$props2 = this.props,
-            emoji = _this$props2.emoji,
-            placeholderSize = _this$props2.placeholderSize,
-            showTooltip = _this$props2.showTooltip,
-            fitToHeight = _this$props2.fitToHeight;
-        var shortName = emoji.shortName,
-            representation = emoji.representation;
-        emojiComponent = /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
-          size: fitToHeight || placeholderSize,
-          shortName: shortName,
-          showTooltip: showTooltip,
-          representation: representation
-        });
-      }
+  if (cachedEmoji && !inValidImage) {
+    return /*#__PURE__*/_react.default.createElement(_Emoji.default, (0, _extends2.default)({}, restProps, {
+      showTooltip: showTooltip,
+      fitToHeight: fitToHeight,
+      emoji: cachedEmoji,
+      onLoadError: handleLoadError
+    }));
+  }
 
-      return emojiComponent;
-    }
-  }]);
-  return CachingMediaEmoji;
-}(_react.PureComponent);
+  return /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
+    size: fitToHeight || placeholderSize,
+    shortName: shortName,
+    showTooltip: showTooltip,
+    representation: representation
+  });
+};
 
 exports.CachingMediaEmoji = CachingMediaEmoji;
-(0, _defineProperty2.default)(CachingMediaEmoji, "contextType", _EmojiContext.EmojiContext);
 var _default = CachingEmoji;
 exports.default = _default;

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

@@ -158,7 +158,7 @@ var SpriteEmoji = function SpriteEmoji(props) {
     onMouseDown: function onMouseDown(event) {
       handleMouseDown(props, event);
     },
-    onMouseMove: function onMouseMove(event) {
+    onMouseEnter: function onMouseEnter(event) {
       handleMouseMove(props, event);
     },
     "aria-label": emoji.shortName,
@@ -294,7 +294,7 @@ var ImageEmoji = function ImageEmoji(props) {
     onMouseDown: function onMouseDown(event) {
       handleMouseDown(props, event);
     },
-    onMouseMove: function onMouseMove(event) {
+    onMouseEnter: function onMouseEnter(event) {
       handleMouseMove(props, event);
     },
     "aria-label": emoji.shortName,