@atlaskit/emoji 65.1.1 → 65.2.0

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

@@ -9,18 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ToneSelectorInternal = void 0;
 
-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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -39,9 +27,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 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) { (0, _defineProperty2.default)(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; }
 
 var extractAllTones = function extractAllTones(emoji) {
   if (emoji.skinVariations) {
@@ -51,88 +39,61 @@ var extractAllTones = function extractAllTones(emoji) {
   return [emoji];
 };
 
-var ToneSelectorInternal = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(ToneSelectorInternal, _PureComponent);
-
-  var _super = _createSuper(ToneSelectorInternal);
-
-  function ToneSelectorInternal() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ToneSelectorInternal);
+var ToneSelectorInternal = function ToneSelectorInternal(props) {
+  var createAnalyticsEvent = props.createAnalyticsEvent,
+      emoji = props.emoji,
+      previewEmojiId = props.previewEmojiId,
+      onToneSelected = props.onToneSelected;
+  var isMounted = (0, _react.useRef)(false);
+  var firstToneButtonRef = (0, _react.useRef)(null);
+  var emojiToneCollection = (0, _react.useMemo)(function () {
+    return extractAllTones(emoji).map(function (tone, index) {
+      return _objectSpread(_objectSpread({}, tone), {}, {
+        focused: tone.id !== previewEmojiId,
+        label: (0, _setSkinToneAriaLabelText.setSkinToneAriaLabelText)(tone.name),
+        toneId: index
+      });
+    });
+  }, [emoji, previewEmojiId]);
+  (0, _react.useEffect)(function () {
+    if (firstToneButtonRef.current) {
+      firstToneButtonRef.current.focus();
+    }
+  }, [firstToneButtonRef]);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  var fireAnalyticsEvent = function fireAnalyticsEvent(event) {
+    if (createAnalyticsEvent) {
+      (0, _analytics.createAndFireEventInElementsChannel)(event)(createAnalyticsEvent);
     }
+  };
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "firstToneButtonRef", /*#__PURE__*/(0, _react.createRef)());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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((0, _analytics.toneSelectedEvent)({
-        skinToneModifier: toneList[skinTone]
+      fireAnalyticsEvent((0, _analytics.toneSelectedEvent)({
+        skinToneModifier: toneList[toneValue]
       }));
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(ToneSelectorInternal, [{
-    key: "fireEvent",
-    value: function fireEvent(event) {
-      var createAnalyticsEvent = this.props.createAnalyticsEvent;
+    };
+  };
 
-      if (createAnalyticsEvent) {
-        (0, _analytics.createAndFireEventInElementsChannel)(event)(createAnalyticsEvent);
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$firstToneButton, _this$firstToneButton2;
+  if (!isMounted.current) {
+    fireAnalyticsEvent((0, _analytics.toneSelectorOpenedEvent)({}));
+  }
 
-      (_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((0, _analytics.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.default.createElement("div", null, toneEmojis.map(function (tone, i) {
-        var shouldSetRef = !isRefAlreadySet && tone.id !== previewEmojiId;
-
-        if (shouldSetRef) {
-          isRefAlreadySet = true;
-        }
-
-        return /*#__PURE__*/_react.default.createElement(_EmojiButton.default, {
-          ref: shouldSetRef ? _this2.firstToneButtonRef : null,
-          shouldHideButton: tone.id === previewEmojiId,
-          ariaLabelText: (0, _setSkinToneAriaLabelText.setSkinToneAriaLabelText)(tone.name),
-          key: "".concat(tone.id),
-          onSelected: function onSelected() {
-            return _this2.onToneSelectedHandler(i);
-          },
-          emoji: tone,
-          selectOnHover: true
-        });
-      }));
-    }
-  }]);
-  return ToneSelectorInternal;
-}(_react.PureComponent);
+  isMounted.current = true;
+  return /*#__PURE__*/_react.default.createElement("div", null, emojiToneCollection.map(function (tone) {
+    return /*#__PURE__*/_react.default.createElement(_EmojiButton.default, {
+      ref: tone.focused ? firstToneButtonRef : null,
+      shouldHideButton: tone.id === previewEmojiId,
+      ariaLabelText: tone.label,
+      key: "".concat(tone.id),
+      onSelected: onToneSelectedHandler(tone.toneId),
+      emoji: tone,
+      selectOnHover: true
+    });
+  }));
+};
 
 exports.ToneSelectorInternal = ToneSelectorInternal;
 var ToneSelector = (0, _analyticsNext.withAnalyticsEvents)()(ToneSelectorInternal);

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.toneSelectorContainer = exports.submitDelete = exports.selectOnHoverStyles = exports.previewText = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderContainerAnimated = exports.placeholderContainer = exports.placeholder = exports.hiddenToneButton = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiStyles = exports.emojiSprite = exports.emojiShortName = exports.emojiScrollable = exports.emojiPreviewErrorMessage = exports.emojiPreview = exports.emojiPickerAddEmoji = exports.emojiNodeStyles = exports.emojiName = exports.emojiMainStyle = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiDeleteButton = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.commonSelectedStyles = exports.cancelButton = exports.buttons = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.addCustomEmoji = void 0;
+exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.submitDelete = exports.selectOnHoverStyles = exports.previewText = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderContainerAnimated = exports.placeholderContainer = exports.placeholder = exports.hiddenToneButton = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiStyles = exports.emojiSprite = exports.emojiShortName = exports.emojiScrollable = exports.emojiPreviewErrorMessage = exports.emojiPickerAddEmoji = exports.emojiNodeStyles = exports.emojiName = exports.emojiMainStyle = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiDeleteButton = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emojiActionsWrapper = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.commonSelectedStyles = exports.cancelButton = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.addCustomEmoji = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -57,7 +57,7 @@ var emojiToneSelectorContainer = (0, _core.css)({
   flex: 1,
   display: 'flex',
   justifyContent: 'flex-end',
-  padding: '8px 10px 8px 0'
+  padding: '10px 10px 11px 0'
 });
 exports.emojiToneSelectorContainer = emojiToneSelectorContainer;
 var emojiStyles = (0, _core.css)((_css = {
@@ -144,10 +144,6 @@ var hiddenToneButton = (0, _core.css)({
 }); // Emoji Preview
 
 exports.hiddenToneButton = hiddenToneButton;
-var buttons = 'emoji-common-buttons';
-exports.buttons = buttons;
-var toneSelectorContainer = 'emoji-common-tone-selector-container';
-exports.toneSelectorContainer = toneSelectorContainer;
 var emojiPickerAddEmoji = 'emoji-picker-add-emoji';
 exports.emojiPickerAddEmoji = emojiPickerAddEmoji;
 var previewText = (0, _core.css)({
@@ -193,7 +189,9 @@ var preview = (0, _core.css)({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'nowrap',
-  padding: '10px'
+  padding: '10px',
+  height: '32px',
+  alignItems: 'center'
 });
 exports.preview = preview;
 var previewImg = (0, _core.css)((_css6 = {
@@ -214,15 +212,9 @@ var previewImg = (0, _core.css)((_css6 = {
   maxWidth: '32px',
   padding: 0,
   display: 'block'
-}), _css6));
-exports.previewImg = previewImg;
-var emojiPreview = (0, _core.css)({
-  display: 'flex',
-  height: '50px',
-  boxSizing: 'border-box'
-}); // Scrollable
+}), _css6)); // Scrollable
 
-exports.emojiPreview = emojiPreview;
+exports.previewImg = previewImg;
 var emojiScrollable = (0, _core.css)({
   border: "1px solid ".concat((0, _tokens.token)('color.border', '#fff')),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
@@ -424,4 +416,10 @@ var buttonSpinner = (0, _core.css)({
   marginRight: '10px',
   marginLeft: '10px'
 });
-exports.buttonSpinner = buttonSpinner;
+exports.buttonSpinner = buttonSpinner;
+var emojiActionsWrapper = (0, _core.css)({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center'
+});
+exports.emojiActionsWrapper = emojiActionsWrapper;

package/dist/cjs/components/hooks.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDidMount = useDidMount;
+
+var _react = require("react");
+
+function useDidMount() {
+  var didMountRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    didMountRef.current = true;
+  }, []);
+  return didMountRef.current;
+}

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

@@ -1,26 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-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 _core = require("@emotion/core");
 
-var _react = require("react");
-
 var _reactIntlNext = require("react-intl-next");
 
 var _typeHelpers = require("../../util/type-helpers");
@@ -29,37 +15,19 @@ var _i18n = require("../i18n");
 
 var _styles = require("./styles");
 
-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; } }
-
-var EmojiPickerCategoryHeading = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(EmojiPickerCategoryHeading, _PureComponent);
-
-  var _super = _createSuper(EmojiPickerCategoryHeading);
-
-  function EmojiPickerCategoryHeading() {
-    (0, _classCallCheck2.default)(this, EmojiPickerCategoryHeading);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(EmojiPickerCategoryHeading, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          id = _this$props.id,
-          title = _this$props.title,
-          className = _this$props.className;
-      return (0, _core.jsx)("div", {
-        id: id,
-        "data-category-id": id,
-        className: className
-      }, (0, _core.jsx)("div", {
-        css: _styles.emojiCategoryTitle
-      }, (0, _typeHelpers.isMessagesKey)(title) ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages[title]) : title));
-    }
-  }]);
-  return EmojiPickerCategoryHeading;
-}(_react.PureComponent);
-
-exports.default = EmojiPickerCategoryHeading;
+/** @jsx jsx */
+var EmojiPickerCategoryHeading = function EmojiPickerCategoryHeading(_ref) {
+  var id = _ref.id,
+      title = _ref.title,
+      className = _ref.className;
+  return (0, _core.jsx)("div", {
+    id: id,
+    "data-category-id": id,
+    className: className
+  }, (0, _core.jsx)("div", {
+    css: _styles.emojiCategoryTitle
+  }, (0, _typeHelpers.isMessagesKey)(title) ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages[title]) : title));
+};
+
+var _default = EmojiPickerCategoryHeading;
+exports.default = _default;