@atlaskit/emoji 64.2.1 → 64.4.1

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

@@ -1,16 +1,19 @@
 import { supportsUploadFeature } from '../../api/EmojiResource';
 import { uploadFailedEvent, uploadSucceededEvent } from '../../util/analytics';
 import { messages } from '../i18n';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
 export var uploadEmoji = function uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics) {
   var startTime = Date.now();
   errorSetter(undefined);
 
   if (supportsUploadFeature(emojiProvider)) {
+    ufoExperiences['emoji-uploaded'].start();
     emojiProvider.uploadCustomEmoji(upload).then(function (emojiDescription) {
       fireAnalytics(uploadSucceededEvent({
         duration: Date.now() - startTime
       }));
       onSuccess(emojiDescription);
+      ufoExperiences['emoji-uploaded'].success();
     }).catch(function (err) {
       errorSetter(messages.emojiUploadFailed); // eslint-disable-next-line no-console
 
@@ -19,6 +22,7 @@ export var uploadEmoji = function uploadEmoji(upload, emojiProvider, errorSetter
         duration: Date.now() - startTime,
         reason: messages.emojiUploadFailed.defaultMessage
       }));
+      ufoExperiences['emoji-uploaded'].failure();
     });
   }
 };

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

@@ -1,19 +1,21 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var _$nest, _$nest2, _$nest3, _$nest4, _$nest6, _$nest7, _$nest8, _$nest9, _$nest10, _$nest11;
+var _css, _css2, _span, _css3, _css6, _input, _css7;
 
+import { css } from '@emotion/core';
 import { borderRadius } from '@atlaskit/theme/constants';
-import * as colors from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
-import { style } from 'typestyle';
-export var selected = 'emoji-common-selected';
-export var selectOnHover = 'emoji-common-select-on-hover';
+import { N20, N200, N300, N900, R300, R400 } from '@atlaskit/theme/colors';
+export var commonSelectedStyles = 'emoji-common-selected';
+export var selectOnHoverStyles = 'emoji-common-select-on-hover';
 export var emojiSprite = 'emoji-common-emoji-sprite';
-export var emojiNode = 'emoji-common-node';
+export var emojiNodeStyles = 'emoji-common-node';
 export var emojiImage = 'emoji-common-emoji-image';
-export var deleteButton = style({
+export var emojiDeleteButton = 'emoji-common-deleteButton';
+export var emojiMainStyle = 'emoji-common-main-styles';
+export var deleteButton = css({
   // hide by default
   visibility: 'hidden',
   display: 'flex',
@@ -26,7 +28,13 @@ export var deleteButton = style({
   paddingTop: '4px',
   marginBottom: '-4px'
 });
-export var emoji = style({
+export var emojiToneSelectorContainer = css({
+  flex: 1,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  padding: '8px 10px 8px 0'
+});
+export var emojiStyles = css((_css = {
   borderRadius: '5px',
   backgroundColor: 'transparent',
   display: 'inline-block',
@@ -34,173 +42,132 @@ export var emoji = style({
   // Ensure along with vertical align middle, we don't increase the line height for p and some
   // headings. Smaller headings get a slight increase in height, cannot add more negative margin
   // as a "selected" emoji (e.g. in the editor) will not look good.
-  margin: '-1px 0',
-  $nest: (_$nest = {}, _defineProperty(_$nest, "&.".concat(selected, ",&.").concat(selectOnHover, ":hover"), {
-    backgroundColor: akEmojiSelectedBackgroundColor
-  }), _defineProperty(_$nest, "&.".concat(selected, ",&.").concat(selectOnHover, ":hover .").concat(deleteButton), {
-    // show delete button on hover
-    visibility: 'visible'
-  }), _defineProperty(_$nest, "img", {
-    display: 'block'
-  }), _$nest)
-});
-export var emojiContainer = style({
+  margin: '-1px 0'
+}, _defineProperty(_css, "&.".concat(commonSelectedStyles, ",&.").concat(selectOnHoverStyles, ":hover"), {
+  backgroundColor: akEmojiSelectedBackgroundColor
+}), _defineProperty(_css, "&.".concat(commonSelectedStyles, ",&.").concat(selectOnHoverStyles, ":hover .").concat(emojiDeleteButton), {
+  // show delete button on hover
+  visibility: 'visible'
+}), _defineProperty(_css, "img", {
+  display: 'block'
+}), _css));
+export var emojiContainer = css((_css2 = {
   display: 'inline-block',
   // Ensure along with vertical align middle, we don't increase the line height for h1..h6, and p
-  margin: '-1px 0',
-  $nest: (_$nest2 = {}, _defineProperty(_$nest2, "&.".concat(selected, ",&.").concat(selectOnHover, ":hover"), {
-    backgroundColor: akEmojiSelectedBackgroundColor
-  }), _defineProperty(_$nest2, ".".concat(emojiSprite), {
-    background: 'transparent no-repeat',
-    display: 'inline-block',
-    verticalAlign: 'middle',
-    height: "".concat(defaultEmojiHeight, "px"),
-    width: "".concat(defaultEmojiHeight, "px")
-  }), _$nest2)
-});
+  margin: '-1px 0'
+}, _defineProperty(_css2, "&.".concat(commonSelectedStyles, ",&.").concat(selectOnHoverStyles, ":hover"), {
+  backgroundColor: akEmojiSelectedBackgroundColor
+}), _defineProperty(_css2, ".".concat(emojiSprite), {
+  background: 'transparent no-repeat',
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  minHeight: "".concat(defaultEmojiHeight, "px"),
+  minWidth: "".concat(defaultEmojiHeight, "px")
+}), _css2));
 export var placeholder = 'emoji-common-placeholder';
-export var placeholderContainer = style({
+export var placeholderContainer = css({
   // Ensure no vertical reflow
   margin: '-1px 0',
   display: 'inline-block',
-  background: '#f7f7f7',
+  background: token('color.border', '#f7f7f7'),
   borderRadius: '20%',
   verticalAlign: 'middle',
   whiteSpace: 'nowrap'
 });
-export var placeholderEmoji = style({
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  whiteSpace: 'nowrap'
-});
-export var emojiButton = style({
+export var emojiButton = css((_css3 = {
   backgroundColor: 'transparent',
   border: '0',
   cursor: 'pointer',
-  padding: 0,
-  $nest: (_$nest4 = {}, _defineProperty(_$nest4, '&::-moz-focus-inner', {
-    border: '0 none',
-    padding: 0
-  }), _defineProperty(_$nest4, '&>span', {
-    borderRadius: '5px',
-    padding: '8px',
-    $nest: (_$nest3 = {}, _defineProperty(_$nest3, "&>.".concat(emojiSprite), {
-      height: '24px',
-      width: '24px'
-    }), _defineProperty(_$nest3, "&>img", {
-      height: '24px',
-      width: '24px'
-    }), _$nest3)
-  }), _$nest4)
-});
-export var hiddenToneButton = style({
+  padding: 0
+}, _defineProperty(_css3, '&::-moz-focus-inner', {
+  border: '0 none',
+  padding: 0
+}), _defineProperty(_css3, '&>span', (_span = {
+  borderRadius: '5px',
+  padding: '8px'
+}, _defineProperty(_span, "&>.".concat(emojiSprite), {
+  height: '24px',
+  width: '24px'
+}), _defineProperty(_span, "&>img", {
+  height: '24px',
+  width: '24px'
+}), _span)), _css3));
+export var hiddenToneButton = css({
   // Hide currently selected tone that rendered in the ToneSelector to avoid duplication
-  // Set $ unique: true to be able to apply the ccs property to an element as described here https://github.com/typestyle/typestyle/issues/253
-  display: 'none',
-  $unique: true
+  display: 'none'
 }); // Emoji Preview
 
 export var buttons = 'emoji-common-buttons';
-export var preview = 'emoji-common-preview';
-export var previewImg = 'emoji-common-preview-image';
-export var previewText = 'emoji-common-preview-text';
-export var name = 'emoji-common-name';
-export var shortName = 'emoji-common-shortname';
-export var previewSingleLine = 'emoji-common-preview-single-line';
 export var toneSelectorContainer = 'emoji-common-tone-selector-container';
-export var emojiPreviewSection = 'emoji-preview-section';
-export var emojiPreview = style({
+export var emojiPickerAddEmoji = 'emoji-picker-add-emoji';
+export var previewText = css({
   display: 'flex',
-  height: '50px',
-  boxSizing: 'border-box',
-  $nest: (_$nest9 = {}, _defineProperty(_$nest9, ".".concat(preview), {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'nowrap',
-    padding: '10px',
-    $nest: (_$nest8 = {}, _defineProperty(_$nest8, ".".concat(emojiSprite), {
-      height: '32px',
-      margin: '0',
-      width: '32px'
-    }), _defineProperty(_$nest8, ".".concat(previewImg), {
-      display: 'inline-block',
-      flex: 'initial',
-      width: '32px',
-      $nest: {
-        '&>span': {
-          width: '32px',
-          height: '32px',
-          padding: 0,
-          maxHeight: 'inherit',
-          $nest: {
-            '&>img': {
-              position: 'relative',
-              left: '50%',
-              top: '50%',
-              transform: 'translateX(-50%) translateY(-50%)',
-              maxHeight: '32px',
-              maxWidth: '32px',
-              padding: 0,
-              display: 'block'
-            }
-          }
-        }
-      }
-    }), _defineProperty(_$nest8, ".".concat(previewText), {
-      display: 'flex',
-      flexDirection: 'column',
-      marginLeft: '10px',
-      marginTop: '-2px',
-      maxWidth: '285px',
-      width: '285px'
-      /* IE */
-      ,
-      flexGrow: 1,
-      flexShrink: 1,
-      $nest: (_$nest6 = {}, _defineProperty(_$nest6, ".".concat(name), {
-        display: 'block',
-        color: token('color.text', colors.N900),
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        $nest: _defineProperty({}, '&:first-letter', {
-          textTransform: 'uppercase'
-        })
-      }), _defineProperty(_$nest6, ".".concat(shortName), {
-        display: 'block',
-        color: token('color.text.subtle', colors.N200),
-        fontSize: '12px',
-        lineHeight: 1,
-        marginBottom: '-2px',
-        overflow: 'hidden',
-        paddingBottom: '2px',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-      }), _$nest6)
-    }), _defineProperty(_$nest8, ".".concat(previewSingleLine), {
-      paddingTop: '10px',
-      $nest: (_$nest7 = {}, _defineProperty(_$nest7, ".".concat(name), {
-        display: 'none'
-      }), _defineProperty(_$nest7, ".".concat(shortName), {
-        color: token('color.text', colors.N900),
-        fontSize: '14px'
-      }), _$nest7)
-    }), _$nest8)
-  }), _defineProperty(_$nest9, ".".concat(previewText), {
-    maxWidth: '235px',
-    width: '235px'
-    /* IE */
-
-  }), _$nest9)
+  flexDirection: 'column',
+  alignSelf: 'center',
+  marginTop: '-2px',
+  marginLeft: '10px',
+  maxWidth: '285px',
+  width: '285px'
+  /* IE */
+  ,
+  flexGrow: 1,
+  flexShrink: 1
 });
-export var emojiToneSelectorContainer = style({
-  flex: 1,
+export var emojiName = css(_defineProperty({
+  display: 'block',
+  color: token('color.text', N900),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+}, '&:first-letter', {
+  textTransform: 'uppercase'
+}));
+export var emojiShortName = css(_defineProperty({
+  display: 'block',
+  color: token('color.text.subtle', N200),
+  fontSize: '12px',
+  lineHeight: 1,
+  marginBottom: '-2px',
+  overflow: 'hidden',
+  paddingBottom: '2px',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+}, '&:first-of-type', {
+  color: token('color.text', N900),
+  fontSize: '14px'
+}));
+export var preview = css({
   display: 'flex',
-  justifyContent: 'flex-end',
-  padding: '8px 10px 8px 0'
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  padding: '10px'
+});
+export var previewImg = css((_css6 = {
+  display: 'inline-block',
+  flex: 'initial',
+  width: '32px'
+}, _defineProperty(_css6, "& .".concat(emojiSprite, ", > span"), {
+  width: '32px',
+  height: '32px',
+  padding: 0,
+  maxHeight: 'inherit'
+}), _defineProperty(_css6, "& > span > img", {
+  position: 'relative',
+  left: '50%',
+  top: '50%',
+  transform: 'translateX(-50%) translateY(-50%)',
+  maxHeight: '32px',
+  maxWidth: '32px',
+  padding: 0,
+  display: 'block'
+}), _css6));
+export var emojiPreview = css({
+  display: 'flex',
+  height: '50px',
+  boxSizing: 'border-box'
 }); // Scrollable
 
-export var emojiScrollable = style({
+export var emojiScrollable = css({
   border: "1px solid ".concat(token('color.border', '#fff')),
   borderRadius: "".concat(borderRadius(), "px"),
   display: 'block',
@@ -210,186 +177,169 @@ export var emojiScrollable = style({
   padding: '0'
 }); // EmojiUpload
 
-export var emojiUpload = style({
+export var emojiUpload = css({
   height: '78px',
   padding: '10px',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-around'
 });
-export var uploadChooseFileMessage = style({
-  color: token('color.text.subtle', colors.N300),
+export var uploadChooseFileMessage = css({
+  color: token('color.text.subtle', N300),
   fontSize: '12px',
   paddingBottom: '7px'
 });
-export var emojiUploadBottom = style({
+export var emojiUploadBottom = css({
   fontSize: '11px'
 });
-export var uploadChooseFileRow = style({
+export var uploadChooseFileRow = css({
   display: 'flex',
   justifyContent: 'space-between'
 });
-export var uploadChooseFileEmojiName = style({
+export var uploadChooseFileEmojiName = css({
   flex: '1 1 auto',
   marginRight: '5px',
-  $nest: {
-    input: {
-      background: 'transparent',
-      border: 0,
-      outline: 'none',
-      $nest: (_$nest10 = {}, _defineProperty(_$nest10, '&:invalid', {
-        boxShadow: 'none'
-      }), _defineProperty(_$nest10, '&::-ms-clear', {
-        display: 'none'
-      }), _$nest10)
-    }
-  }
+  input: (_input = {
+    background: 'transparent',
+    border: 0,
+    outline: 'none'
+  }, _defineProperty(_input, '&:invalid', {
+    boxShadow: 'none'
+  }), _defineProperty(_input, '&::-ms-clear', {
+    display: 'none'
+  }), _input)
 });
-export var uploadChooseFileBrowse = style({
+export var uploadChooseFileBrowse = css({
   flex: '0 0 auto'
 });
-export var uploadPreviewFooter = style({
+export var uploadPreviewFooter = css({
   display: 'flex',
   flexDirection: 'column',
   height: '100px',
   padding: '10px'
 });
-export var uploadPreview = style({
+export var uploadPreview = css({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: token('color.background.neutral', colors.N20),
+  background: token('color.background.neutral', N20),
   borderRadius: "".concat(borderRadius(), "px"),
   padding: '10px'
 });
-export var uploadPreviewText = style({
-  $nest: {
-    h5: {
-      color: token('color.text.subtle', colors.N300),
-      paddingBottom: '4px',
-      fontSize: '12px'
-    },
-    img: {
-      maxHeight: '20px',
-      maxWidth: '50px'
-    }
+export var uploadPreviewText = css({
+  h5: {
+    color: token('color.text.subtle', N300),
+    paddingBottom: '4px',
+    fontSize: '12px'
+  },
+  img: {
+    maxHeight: '20px',
+    maxWidth: '50px'
   }
 });
-export var bigEmojiPreview = style({
+export var bigEmojiPreview = css({
   paddingLeft: '4px',
-  $nest: {
-    img: {
-      maxHeight: '40px',
-      maxWidth: '100px'
-    }
+  img: {
+    maxHeight: '40px',
+    maxWidth: '100px'
   }
 });
-export var uploadAddRow = style({
+export var uploadAddRow = css({
   display: 'flex',
   justifyContent: 'flex-end',
   alignItems: 'center',
   paddingTop: '10px'
 });
-export var AddCustomEmoji = style({
+export var addCustomEmoji = css({
   alignSelf: 'center',
   marginLeft: '10px',
   marginBottom: '10px'
 }); // Emoji Delete preview
 
 export var submitDelete = 'emoji-submit-delete';
-export var previewButtonGroup = 'emoji-preview-button-group';
-export var deletePreview = style({
+export var deletePreview = css({
   height: '100px',
   padding: '10px',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'flex-end'
 });
-export var deleteText = style({
+export var deleteText = css({
   height: '64px',
   fontSize: '12px',
-  $nest: {
-    ':first-child': {
-      color: token('color.text.subtle', colors.N300),
-      lineHeight: '16px'
-    }
+  '&:first-of-type': {
+    color: token('color.text.subtle', N300),
+    lineHeight: '16px'
   }
 });
-export var deleteFooter = style({
+export var previewButtonGroup = css({
+  display: 'flex'
+});
+export var deleteFooter = css((_css7 = {
   display: 'flex',
   height: '40px',
   alignItems: 'center',
   justifyContent: 'space-between',
-  $nest: (_$nest11 = {
-    img: {
-      maxHeight: '32px',
-      maxWidth: '72px'
-    }
-  }, _defineProperty(_$nest11, ".".concat(previewButtonGroup), {
+  img: {
+    maxHeight: '32px',
+    maxWidth: '72px'
+  }
+}, _defineProperty(_css7, ".".concat(submitDelete), {
+  width: '84px',
+  fontWeight: 'bold',
+  marginRight: '4px'
+}), _defineProperty(_css7, "button", {
+  display: 'flex',
+  justifyContent: 'center',
+  fontSize: '14px',
+  div: {
     display: 'flex'
-  }), _defineProperty(_$nest11, ".".concat(submitDelete), {
-    width: '84px',
-    fontWeight: 'bold',
-    marginRight: '4px'
-  }), _defineProperty(_$nest11, "button", {
-    display: 'flex',
-    justifyContent: 'center',
-    fontSize: '14px',
-    $nest: {
-      div: {
-        display: 'flex'
-      }
-    }
-  }), _$nest11)
-});
-export var emojiDeleteErrorMessage = style({
+  }
+}), _css7));
+export var emojiDeleteErrorMessage = css({
   display: 'flex',
-  color: token('color.text.danger', colors.R400),
+  color: token('color.text.danger', R400),
   alignItems: 'center',
   justifyContent: 'flex-end',
   paddingRight: '4px'
 });
-export var emojiChooseFileErrorMessage = style({
+export var emojiChooseFileErrorMessage = css({
   display: 'flex',
-  color: token('color.text.danger', colors.R300),
+  color: token('color.text.danger', R300),
   paddingRight: '10px',
   justifyContent: 'flex-start'
 });
-export var emojiPreviewErrorMessage = style({
+export var emojiPreviewErrorMessage = css({
   display: 'inline-flex',
-  color: token('color.text.danger', colors.R400),
+  color: token('color.text.danger', R400),
   paddingRight: '10px',
   justifyContent: 'flex-end',
   alignItems: 'center'
 });
-export var addCustomEmojiButton = style({
+export var addCustomEmojiButton = css({
   maxWidth: '285px'
 });
-export var uploadRetryButton = style({
+export var uploadRetryButton = css({
   maxWidth: '172px',
   justifyContent: 'center',
   fontWeight: 'bold',
   marginRight: '4px',
-  $nest: {
-    div: {
-      display: 'flex'
-    }
+  div: {
+    display: 'flex'
   }
 });
-export var uploadEmojiButton = style({
+export var uploadEmojiButton = css({
   maxWidth: '187px',
   justifyContent: 'center',
   marginRight: '4px',
-  $nest: {
-    div: {
-      display: 'flex'
-    }
+  div: {
+    display: 'flex'
   }
 });
-export var cancelButton = style({
+export var cancelButton = css({
   maxWidth: '100px'
 });
-export var buttonSpinner = style({
+export var buttonSpinner = css({
   marginRight: '10px',
   marginLeft: '10px'
 });

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

@@ -10,14 +10,15 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
-import classNames from 'classnames';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import React from 'react';
 import { PureComponent } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { defaultCategories } from '../../util/constants';
 import { messages } from '../i18n';
 import { CategoryDescriptionMap } from './categories';
-import * as styles from './styles';
+import { active, categorySelector, disable, categoryStyles } from './styles';
 export var sortCategories = function sortCategories(c1, c2) {
   return CategoryDescriptionMap[c1].order - CategoryDescriptionMap[c2].order;
 };
@@ -96,37 +97,38 @@ var CategorySelector = /*#__PURE__*/function (_PureComponent) {
 
       if (categories) {
         var formatMessage = intl.formatMessage;
-        categoriesSection = /*#__PURE__*/React.createElement("ul", null, categories.map(function (categoryId) {
+        categoriesSection = jsx("ul", null, categories.map(function (categoryId) {
           var category = CategoryDescriptionMap[categoryId];
-          var categoryClasses = [styles.category];
+          var categoryClasses = [categoryStyles];
 
           if (categoryId === _this2.props.activeCategoryId) {
-            categoryClasses.push(styles.active);
+            categoryClasses.push(active);
           }
 
           if (disableCategories) {
-            categoryClasses.push(styles.disable);
+            categoryClasses.push(disable);
           }
 
           var Icon = category.icon;
           var categoryName = formatMessage(messages[category.name]);
-          return /*#__PURE__*/React.createElement("li", {
+          return jsx("li", {
             key: category.id
-          }, /*#__PURE__*/React.createElement("button", {
+          }, jsx("button", {
             "aria-label": categoryName,
             "data-category-id": category.id,
-            className: classNames(categoryClasses),
+            disabled: disableCategories,
+            css: categoryClasses,
             onClick: _this2.onClick,
             title: categoryName,
             type: "button"
-          }, /*#__PURE__*/React.createElement(Icon, {
+          }, jsx(Icon, {
             label: categoryName
           })));
         }));
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames([styles.categorySelector])
+      return jsx("div", {
+        css: categorySelector
       }, categoriesSection);
     }
   }]);