@atlaskit/emoji 65.0.0 → 65.2.0

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

@@ -1,17 +1,11 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-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; } }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React, { createRef, PureComponent } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import EmojiButton from './EmojiButton';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel, toneSelectedEvent, toneSelectorOpenedEvent } from '../../util/analytics';
@@ -25,91 +19,60 @@ var extractAllTones = function extractAllTones(emoji) {
   return [emoji];
 };
 
-export var ToneSelectorInternal = /*#__PURE__*/function (_PureComponent) {
-  _inherits(ToneSelectorInternal, _PureComponent);
-
-  var _super = _createSuper(ToneSelectorInternal);
-
-  function ToneSelectorInternal() {
-    var _this;
-
-    _classCallCheck(this, ToneSelectorInternal);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+export var ToneSelectorInternal = function ToneSelectorInternal(props) {
+  var createAnalyticsEvent = props.createAnalyticsEvent,
+      emoji = props.emoji,
+      previewEmojiId = props.previewEmojiId,
+      onToneSelected = props.onToneSelected;
+  var isMounted = useRef(false);
+  var firstToneButtonRef = useRef(null);
+  var emojiToneCollection = useMemo(function () {
+    return extractAllTones(emoji).map(function (tone, index) {
+      return _objectSpread(_objectSpread({}, tone), {}, {
+        focused: tone.id !== previewEmojiId,
+        label: setSkinToneAriaLabelText(tone.name),
+        toneId: index
+      });
+    });
+  }, [emoji, previewEmojiId]);
+  useEffect(function () {
+    if (firstToneButtonRef.current) {
+      firstToneButtonRef.current.focus();
     }
+  }, [firstToneButtonRef]);
 
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "firstToneButtonRef", /*#__PURE__*/createRef());
+  var fireAnalyticsEvent = function fireAnalyticsEvent(event) {
+    if (createAnalyticsEvent) {
+      createAndFireEventInElementsChannel(event)(createAnalyticsEvent);
+    }
+  };
 
-    _defineProperty(_assertThisInitialized(_this), "onToneSelectedHandler", function (skinTone) {
-      var onToneSelected = _this.props.onToneSelected;
-      onToneSelected(skinTone);
+  var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
+    return function () {
+      onToneSelected(toneValue);
       var toneList = ['default', 'light', 'mediumLight', 'medium', 'mediumDark', 'dark'];
-
-      _this.fireEvent(toneSelectedEvent({
-        skinToneModifier: toneList[skinTone]
+      fireAnalyticsEvent(toneSelectedEvent({
+        skinToneModifier: toneList[toneValue]
       }));
-    });
+    };
+  };
 
-    return _this;
+  if (!isMounted.current) {
+    fireAnalyticsEvent(toneSelectorOpenedEvent({}));
   }
 
-  _createClass(ToneSelectorInternal, [{
-    key: "fireEvent",
-    value: function fireEvent(event) {
-      var createAnalyticsEvent = this.props.createAnalyticsEvent;
-
-      if (createAnalyticsEvent) {
-        createAndFireEventInElementsChannel(event)(createAnalyticsEvent);
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$firstToneButton, _this$firstToneButton2;
-
-      (_this$firstToneButton = this.firstToneButtonRef) === null || _this$firstToneButton === void 0 ? void 0 : (_this$firstToneButton2 = _this$firstToneButton.current) === null || _this$firstToneButton2 === void 0 ? void 0 : _this$firstToneButton2.focus();
-    }
-  }, {
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      this.fireEvent(toneSelectorOpenedEvent({}));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          emoji = _this$props.emoji,
-          previewEmojiId = _this$props.previewEmojiId;
-      var toneEmojis = extractAllTones(emoji);
-      var isRefAlreadySet = false;
-      return /*#__PURE__*/React.createElement("div", null, toneEmojis.map(function (tone, i) {
-        var shouldSetRef = !isRefAlreadySet && tone.id !== previewEmojiId;
-
-        if (shouldSetRef) {
-          isRefAlreadySet = true;
-        }
-
-        return /*#__PURE__*/React.createElement(EmojiButton, {
-          ref: shouldSetRef ? _this2.firstToneButtonRef : null,
-          shouldHideButton: tone.id === previewEmojiId,
-          ariaLabelText: setSkinToneAriaLabelText(tone.name),
-          key: "".concat(tone.id),
-          onSelected: function onSelected() {
-            return _this2.onToneSelectedHandler(i);
-          },
-          emoji: tone,
-          selectOnHover: true
-        });
-      }));
-    }
-  }]);
-
-  return ToneSelectorInternal;
-}(PureComponent);
+  isMounted.current = true;
+  return /*#__PURE__*/React.createElement("div", null, emojiToneCollection.map(function (tone) {
+    return /*#__PURE__*/React.createElement(EmojiButton, {
+      ref: tone.focused ? firstToneButtonRef : null,
+      shouldHideButton: tone.id === previewEmojiId,
+      ariaLabelText: tone.label,
+      key: "".concat(tone.id),
+      onSelected: onToneSelectedHandler(tone.toneId),
+      emoji: tone,
+      selectOnHover: true
+    });
+  }));
+};
 var ToneSelector = withAnalyticsEvents()(ToneSelectorInternal);
 export default ToneSelector;

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

@@ -33,7 +33,7 @@ export var emojiToneSelectorContainer = css({
   flex: 1,
   display: 'flex',
   justifyContent: 'flex-end',
-  padding: '8px 10px 8px 0'
+  padding: '10px 10px 11px 0'
 });
 export var emojiStyles = css((_css = {
   borderRadius: "".concat(borderRadius(), "px"),
@@ -112,8 +112,6 @@ export var hiddenToneButton = css({
   display: 'none'
 }); // Emoji Preview
 
-export var buttons = 'emoji-common-buttons';
-export var toneSelectorContainer = 'emoji-common-tone-selector-container';
 export var emojiPickerAddEmoji = 'emoji-picker-add-emoji';
 export var previewText = css({
   display: 'flex',
@@ -155,7 +153,9 @@ export var preview = css({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'nowrap',
-  padding: '10px'
+  padding: '10px',
+  height: '32px',
+  alignItems: 'center'
 });
 export var previewImg = css((_css6 = {
   display: 'inline-block',
@@ -175,12 +175,7 @@ export var previewImg = css((_css6 = {
   maxWidth: '32px',
   padding: 0,
   display: 'block'
-}), _css6));
-export var emojiPreview = css({
-  display: 'flex',
-  height: '50px',
-  boxSizing: 'border-box'
-}); // Scrollable
+}), _css6)); // Scrollable
 
 export var emojiScrollable = css({
   border: "1px solid ".concat(token('color.border', '#fff')),
@@ -357,4 +352,9 @@ export var cancelButton = css({
 export var buttonSpinner = css({
   marginRight: '10px',
   marginLeft: '10px'
+});
+export var emojiActionsWrapper = css({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center'
 });

package/dist/esm/components/hooks.js

@@ -0,0 +1,8 @@
+import { useRef, useEffect } from 'react';
+export function useDidMount() {
+  var didMountRef = useRef(false);
+  useEffect(function () {
+    didMountRef.current = true;
+  }, []);
+  return didMountRef.current;
+}

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

@@ -1,50 +1,21 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
-
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { isMessagesKey } from '../../util/type-helpers';
 import { messages } from '../i18n';
 import { emojiCategoryTitle } from './styles';
 
-var EmojiPickerCategoryHeading = /*#__PURE__*/function (_PureComponent) {
-  _inherits(EmojiPickerCategoryHeading, _PureComponent);
-
-  var _super = _createSuper(EmojiPickerCategoryHeading);
-
-  function EmojiPickerCategoryHeading() {
-    _classCallCheck(this, EmojiPickerCategoryHeading);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(EmojiPickerCategoryHeading, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          id = _this$props.id,
-          title = _this$props.title,
-          className = _this$props.className;
-      return jsx("div", {
-        id: id,
-        "data-category-id": id,
-        className: className
-      }, jsx("div", {
-        css: emojiCategoryTitle
-      }, isMessagesKey(title) ? jsx(FormattedMessage, messages[title]) : title));
-    }
-  }]);
-
-  return EmojiPickerCategoryHeading;
-}(PureComponent);
-
-export { EmojiPickerCategoryHeading as default };
+var EmojiPickerCategoryHeading = function EmojiPickerCategoryHeading(_ref) {
+  var id = _ref.id,
+      title = _ref.title,
+      className = _ref.className;
+  return jsx("div", {
+    id: id,
+    "data-category-id": id,
+    className: className
+  }, jsx("div", {
+    css: emojiCategoryTitle
+  }, isMessagesKey(title) ? jsx(FormattedMessage, messages[title]) : title));
+};
+
+export default EmojiPickerCategoryHeading;