@atlaskit/emoji 64.0.1 → 64.2.0

package/dist/cjs/i18n/zh.js

@@ -8,10 +8,10 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Chinese
+//Chinese (Simplified)
 var _default = {
   'fabric.emoji.add.custom.emoji.label': '添加您自己的表情符号',
   'fabric.emoji.add.label': '添加表情符号',

package/dist/cjs/i18n/zh_TW.js

@@ -8,10 +8,10 @@ exports.default = void 0;
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// undefined
+//Chinese (Traditional)
 var _default = {
   'fabric.emoji.add.custom.emoji.label': '新增專屬的表情符號',
   'fabric.emoji.add.label': '新增表情符號',

package/dist/cjs/util/shared-styles.js

@@ -17,19 +17,19 @@ var emojiPickerListWidth = _constants2.emojiPickerWidth;
 exports.emojiPickerListWidth = emojiPickerListWidth;
 var emojiPickerListHeight = 205;
 exports.emojiPickerListHeight = emojiPickerListHeight;
-var emojiPickerBorderColor = (0, _tokens.token)('color.border.neutral', _colors.N40);
+var emojiPickerBorderColor = (0, _tokens.token)('color.border', _colors.N40);
 exports.emojiPickerBorderColor = emojiPickerBorderColor;
-var emojiPickerBoxShadow = (0, _tokens.token)('shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
+var emojiPickerBoxShadow = (0, _tokens.token)('elevation.shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
 exports.emojiPickerBoxShadow = emojiPickerBoxShadow;
-var noDialogContainerBorderColor = (0, _tokens.token)('color.border.neutral', _colors.N40);
+var noDialogContainerBorderColor = (0, _tokens.token)('color.border', _colors.N40);
 exports.noDialogContainerBorderColor = noDialogContainerBorderColor;
 var noDialogContainerBorderRadius = "".concat((0, _constants.borderRadius)(), "px");
 exports.noDialogContainerBorderRadius = noDialogContainerBorderRadius;
-var noDialogContainerBoxShadow = (0, _tokens.token)('shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
+var noDialogContainerBoxShadow = (0, _tokens.token)('elevation.shadow.overlay', '0 3px 6px rgba(0, 0, 0, 0.2)');
 exports.noDialogContainerBoxShadow = noDialogContainerBoxShadow;
-var akEmojiSelectedBackgroundColor = (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30);
+var akEmojiSelectedBackgroundColor = (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N30);
 exports.akEmojiSelectedBackgroundColor = akEmojiSelectedBackgroundColor;
-var emojiPreviewSelectedColor = (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N30);
+var emojiPreviewSelectedColor = (0, _tokens.token)('color.background.neutral', _colors.N30);
 exports.emojiPreviewSelectedColor = emojiPreviewSelectedColor;
 var emojiTypeAheadMaxHeight = 350;
 exports.emojiTypeAheadMaxHeight = emojiTypeAheadMaxHeight;

package/dist/cjs/version.json

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

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import PropTypes from 'prop-types';
 import React from 'react';
 import { PureComponent } from 'react';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
@@ -8,6 +7,7 @@ import { isEmojiDescription, isMediaEmoji, isPromise } from '../../util/type-hel
 import debug from '../../util/logger';
 import Emoji from './Emoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
+import { EmojiContext } from '../../context/EmojiContext';
 
 /**
  * Renders an emoji from a cached image, if required.
@@ -33,7 +33,7 @@ export const CachingEmoji = props => {
 
 export class CachingMediaEmoji extends PureComponent {
   constructor(props, context) {
-    super(props, context);
+    super(props);
 
     _defineProperty(this, "mounted", false);
 
@@ -76,6 +76,10 @@ export class CachingMediaEmoji extends PureComponent {
   }
 
   loadEmoji(emoji, context, forceLoad) {
+    if (!context) {
+      return;
+    }
+
     if (!context.emoji) {
       return undefined;
     }
@@ -168,8 +172,6 @@ export class CachingMediaEmoji extends PureComponent {
 
 }
 
-_defineProperty(CachingMediaEmoji, "contextTypes", {
-  emoji: PropTypes.object
-});
+_defineProperty(CachingMediaEmoji, "contextType", EmojiContext);
 
 export default CachingEmoji;

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

@@ -11,7 +11,7 @@ const DeleteButton = props => /*#__PURE__*/React.createElement("span", {
 }, /*#__PURE__*/React.createElement(Button, {
   iconBefore: /*#__PURE__*/React.createElement(CrossCircleIcon, {
     label: deleteEmojiLabel,
-    primaryColor: token('color.text.mediumEmphasis', N500),
+    primaryColor: token('color.text.subtle', N500),
     size: "small"
   }),
   onClick: props.onClick,

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import Tooltip from '@atlaskit/tooltip';
 import classNames from 'classnames';
 import React from 'react';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
@@ -26,6 +25,23 @@ const handleMouseDown = (props, event) => {
   }
 };
 
+const handleKeyPress = (props, event) => {
+  // Clicked emoji delete button
+  if (event.target instanceof Element && event.target.getAttribute('aria-label') === deleteEmojiLabel) {
+    return;
+  }
+
+  const {
+    emoji,
+    onSelected
+  } = props;
+  event.preventDefault();
+
+  if (onSelected && (event.key === 'Enter' || event.key === ' ')) {
+    onSelected(toEmojiId(emoji), emoji, event);
+  }
+};
+
 const handleMouseMove = (props, event) => {
   const {
     emoji,
@@ -73,7 +89,8 @@ const renderAsSprite = props => {
     selected,
     selectOnHover,
     className,
-    showTooltip
+    showTooltip,
+    shouldBeInteractive
   } = props;
   const representation = emoji.representation;
   const sprite = representation.sprite;
@@ -110,18 +127,19 @@ const renderAsSprite = props => {
     style: style
   }, "\xA0");
   return /*#__PURE__*/React.createElement("span", {
+    tabIndex: shouldBeInteractive ? 0 : undefined,
+    role: shouldBeInteractive ? 'button' : undefined,
     className: classNames(classes),
+    onKeyPress: event => handleKeyPress(props, event),
     onMouseDown: event => {
       handleMouseDown(props, event);
     },
     onMouseMove: event => {
       handleMouseMove(props, event);
     },
-    "aria-label": emoji.shortName
-  }, showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-    tag: "span",
-    content: emoji.shortName
-  }, emojiNode) : emojiNode);
+    "aria-label": emoji.shortName,
+    title: showTooltip ? emoji.shortName : ''
+  }, emojiNode);
 }; // Keep as pure functional component, see renderAsSprite.
 
 
@@ -133,7 +151,8 @@ const renderAsImage = props => {
     selectOnHover,
     className,
     showTooltip,
-    showDelete
+    showDelete,
+    shouldBeInteractive
   } = props;
   const classes = {
     [styles.emoji]: true,
@@ -205,18 +224,19 @@ const renderAsImage = props => {
     onError: onError
   }, sizing));
   return /*#__PURE__*/React.createElement("span", {
+    tabIndex: shouldBeInteractive ? 0 : undefined,
+    role: shouldBeInteractive ? 'button' : undefined,
     className: classNames(classes),
+    onKeyPress: event => handleKeyPress(props, event),
     onMouseDown: event => {
       handleMouseDown(props, event);
     },
     onMouseMove: event => {
       handleMouseMove(props, event);
     },
-    "aria-label": emoji.shortName
-  }, deleteButton, showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-    tag: "span",
-    content: emoji.shortName
-  }, emojiNode) : emojiNode);
+    "aria-label": emoji.shortName,
+    title: showTooltip ? emoji.shortName : ''
+  }, deleteButton, emojiNode);
 };
 
 export const Emoji = props => {

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

@@ -0,0 +1,178 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import classNames from 'classnames';
+import React from 'react';
+import { PureComponent } from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
+import EmojiDeletePreview from '../common/EmojiDeletePreview';
+import EmojiUploadPicker from '../common/EmojiUploadPicker';
+import * as styles from './styles';
+import * as footerStyles from '../picker/styles';
+import EmojiPickerListSearch from '../picker/EmojiPickerListSearch';
+import ToneSelector from './ToneSelector';
+import EmojiButton from './EmojiButton';
+import { messages } from '../i18n';
+import AkButton from '@atlaskit/button/standard-button';
+import AddIcon from '@atlaskit/icon/glyph/add';
+import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
+export class EmojiActions extends PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "state", {
+      selectingTone: false
+    });
+
+    _defineProperty(this, "onToneButtonClick", () => {
+      this.setState({
+        selectingTone: !this.state.selectingTone
+      });
+    });
+
+    _defineProperty(this, "onToneSelected", toneValue => {
+      this.setState({
+        selectingTone: false
+      });
+
+      if (this.props.onToneSelected) {
+        this.props.onToneSelected(toneValue);
+      }
+    });
+
+    _defineProperty(this, "onMouseLeave", () => {
+      const {
+        selectingTone
+      } = this.state;
+      const {
+        onToneSelectorCancelled
+      } = this.props;
+
+      if (selectingTone && onToneSelectorCancelled) {
+        onToneSelectorCancelled();
+      }
+
+      this.setState({
+        selectingTone: false
+      });
+    });
+  }
+
+  renderTones() {
+    const {
+      toneEmoji,
+      selectedTone,
+      intl
+    } = this.props;
+    const {
+      formatMessage
+    } = intl;
+
+    if (!toneEmoji) {
+      return null;
+    }
+
+    let previewEmoji = toneEmoji;
+
+    if (selectedTone && previewEmoji.skinVariations) {
+      previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.emojiToneSelectorContainer
+    }, this.state.selectingTone && /*#__PURE__*/React.createElement(ToneSelector, {
+      emoji: toneEmoji,
+      onToneSelected: this.onToneSelected,
+      previewEmojiId: previewEmoji.id
+    }), /*#__PURE__*/React.createElement(EmojiButton, {
+      ariaExpanded: this.state.selectingTone,
+      emoji: previewEmoji,
+      selectOnHover: true,
+      onSelected: this.onToneButtonClick,
+      ariaLabelText: formatMessage(messages.emojiSelectSkinToneButtonAriaLabelText, {
+        selectedTone: `${setSkinToneAriaLabelText(previewEmoji.name)} selected`
+      })
+    }));
+  } // note: emoji-picker-add-emoji className is used by pollinator synthetic checks
+
+
+  renderAddOwnEmoji() {
+    const {
+      onOpenUpload,
+      uploadEnabled,
+      intl
+    } = this.props;
+    const {
+      formatMessage
+    } = intl;
+
+    if (!uploadEnabled) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.AddCustomEmoji
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, label => /*#__PURE__*/React.createElement(AkButton, {
+      onClick: onOpenUpload,
+      iconBefore: /*#__PURE__*/React.createElement(AddIcon, {
+        label: formatMessage(messages.addCustomEmojiLabel),
+        size: "small"
+      }),
+      appearance: "subtle",
+      className: styles.addCustomEmojiButton + ' emoji-picker-add-emoji'
+    }, label)));
+  }
+
+  render() {
+    const {
+      initialUploadName,
+      onUploadCancelled,
+      onUploadEmoji,
+      onCloseDelete,
+      onDeleteEmoji,
+      uploadErrorMessage,
+      uploading,
+      onFileChooserClicked,
+      emojiToDelete,
+      onChange,
+      query
+    } = this.props;
+    const previewFooterClassnames = classNames([footerStyles.emojiPickerFooter, footerStyles.emojiActionsContainerWithBottomShadow]);
+
+    if (uploading) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: previewFooterClassnames
+      }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
+        onUploadCancelled: onUploadCancelled,
+        onUploadEmoji: onUploadEmoji,
+        onFileChooserClicked: onFileChooserClicked,
+        errorMessage: uploadErrorMessage,
+        initialUploadName: initialUploadName
+      }));
+    }
+
+    if (emojiToDelete) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: previewFooterClassnames
+      }, /*#__PURE__*/React.createElement(EmojiDeletePreview, {
+        emoji: emojiToDelete,
+        onDeleteEmoji: onDeleteEmoji,
+        onCloseDelete: onCloseDelete
+      }));
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: previewFooterClassnames,
+      onMouseLeave: this.onMouseLeave
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center'
+      }
+    }, !this.state.selectingTone && /*#__PURE__*/React.createElement(EmojiPickerListSearch, {
+      onChange: onChange,
+      query: query
+    }), this.renderTones()), this.renderAddOwnEmoji());
+  }
+
+}
+export default injectIntl(EmojiActions);

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import Tooltip from '@atlaskit/tooltip';
 import { placeholder, placeholderContainer } from './styles';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation } from '../../util/type-helpers';
@@ -36,15 +35,12 @@ const EmojiPlaceholder = props => {
     [placeholder]: true,
     [placeholderContainer]: true
   };
-  const placeholderNode = /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("span", {
     "aria-label": shortName,
     className: classNames(classes),
-    style: style
+    style: style,
+    title: showTooltip ? shortName : ''
   });
-  return showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
-    tag: "span",
-    content: shortName
-  }, placeholderNode) : placeholderNode;
 };
 
 export default EmojiPlaceholder;

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

@@ -104,8 +104,7 @@ export class EmojiPreview extends PureComponent {
     }
 
     const previewClasses = classNames({
-      [styles.preview]: true,
-      [styles.withToneSelector]: !!this.props.toneEmoji
+      [styles.preview]: true
     });
     const previewTextClasses = classNames({
       [styles.previewText]: true,

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

@@ -1,11 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Component } from 'react';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isPromise } from '../../util/type-helpers';
 import CachingEmoji from './CachingEmoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
+import { EmojiContextProvider } from '../../context/EmojiContextProvider';
 export default class ResourcedEmojiComponent extends Component {
   constructor(props) {
     super(props);
@@ -18,14 +18,6 @@ export default class ResourcedEmojiComponent extends Component {
     };
   }
 
-  getChildContext() {
-    return {
-      emoji: {
-        emojiProvider: this.props.emojiProvider
-      }
-    };
-  }
-
   refreshEmoji(emojiProvider, emojiId) {
     const foundEmoji = emojiProvider.findByEmojiId(emojiId);
 
@@ -110,15 +102,18 @@ export default class ResourcedEmojiComponent extends Component {
       id,
       fallback
     } = this.props.emojiId;
-    return /*#__PURE__*/React.createElement("span", {
+    const emojiContextValue = {
+      emoji: {
+        emojiProvider: this.props.emojiProvider
+      }
+    };
+    return /*#__PURE__*/React.createElement(EmojiContextProvider, {
+      emojiContextValue: emojiContextValue
+    }, /*#__PURE__*/React.createElement("span", {
       "data-emoji-id": id,
       "data-emoji-short-name": shortName,
       "data-emoji-text": fallback || shortName
-    }, element);
+    }, element));
   }
 
-}
-
-_defineProperty(ResourcedEmojiComponent, "childContextTypes", {
-  emoji: PropTypes.object
-});
+}

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

@@ -120,7 +120,6 @@ export const name = 'emoji-common-name';
 export const shortName = 'emoji-common-shortname';
 export const previewSingleLine = 'emoji-common-preview-single-line';
 export const toneSelectorContainer = 'emoji-common-tone-selector-container';
-export const withToneSelector = 'emoji-common-with-tone-selector';
 export const emojiPreviewSection = 'emoji-preview-section';
 export const emojiPreview = style({
   display: 'flex',
@@ -177,7 +176,7 @@ export const emojiPreview = style({
           $nest: {
             [`.${name}`]: {
               display: 'block',
-              color: token('color.text.highEmphasis', colors.N900),
+              color: token('color.text', colors.N900),
               overflow: 'hidden',
               textOverflow: 'ellipsis',
               whiteSpace: 'nowrap',
@@ -189,7 +188,7 @@ export const emojiPreview = style({
             },
             [`.${shortName}`]: {
               display: 'block',
-              color: token('color.text.mediumEmphasis', colors.N200),
+              color: token('color.text.subtle', colors.N200),
               fontSize: '12px',
               lineHeight: 1,
               marginBottom: '-2px',
@@ -207,35 +206,30 @@ export const emojiPreview = style({
               display: 'none'
             },
             [`.${shortName}`]: {
-              color: token('color.text.highEmphasis', colors.N900),
+              color: token('color.text', colors.N900),
               fontSize: '14px'
             }
           }
         }
       }
     },
-    [`.${buttons}`]: {
-      flex: 1,
-      textAlign: 'right',
-      margin: '6px'
-    },
-    [`.${toneSelectorContainer}`]: {
-      flex: 1,
-      display: 'flex',
-      justifyContent: 'flex-end',
-      margin: '6px'
-    },
-    [`.${withToneSelector} .${previewText}`]: {
+    [`.${previewText}`]: {
       maxWidth: '235px',
       width: '235px'
       /* IE */
 
     }
   }
+});
+export const emojiToneSelectorContainer = style({
+  flex: 1,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  padding: '8px 10px 8px 0'
 }); // Scrollable
 
 export const emojiScrollable = style({
-  border: `1px solid ${token('color.border.neutral', '#fff')}`,
+  border: `1px solid ${token('color.border', '#fff')}`,
   borderRadius: `${borderRadius()}px`,
   display: 'block',
   margin: '0',
@@ -252,7 +246,7 @@ export const emojiUpload = style({
   justifyContent: 'space-around'
 });
 export const uploadChooseFileMessage = style({
-  color: token('color.text.mediumEmphasis', colors.N300),
+  color: token('color.text.subtle', colors.N300),
   fontSize: '12px',
   paddingBottom: '7px'
 });
@@ -295,14 +289,14 @@ export const uploadPreview = style({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: token('color.background.subtleNeutral.resting', colors.N20),
+  background: token('color.background.neutral', colors.N20),
   borderRadius: `${borderRadius()}px`,
   padding: '10px'
 });
 export const uploadPreviewText = style({
   $nest: {
     h5: {
-      color: token('color.text.mediumEmphasis', colors.N300),
+      color: token('color.text.subtle', colors.N300),
       paddingBottom: '4px',
       fontSize: '12px'
     },
@@ -329,7 +323,8 @@ export const uploadAddRow = style({
 });
 export const AddCustomEmoji = style({
   alignSelf: 'center',
-  marginLeft: '10px'
+  marginLeft: '10px',
+  marginBottom: '10px'
 }); // Emoji Delete preview
 
 export const submitDelete = 'emoji-submit-delete';
@@ -339,14 +334,14 @@ export const deletePreview = style({
   padding: '10px',
   display: 'flex',
   flexDirection: 'column',
-  justifyContent: 'flex-end',
-  fontSize: '12px'
+  justifyContent: 'flex-end'
 });
 export const deleteText = style({
   height: '64px',
+  fontSize: '12px',
   $nest: {
     ':first-child': {
-      color: token('color.text.mediumEmphasis', colors.N300),
+      color: token('color.text.subtle', colors.N300),
       lineHeight: '16px'
     }
   }