@atlaskit/reactions 21.0.5 → 21.2.1

package/dist/es2019/components/Reaction.js

@@ -1,12 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import { B50, B75, B300, N20, N40, N400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
-import { style } from 'typestyle';
 import { createAndFireSafe, createReactionClickedEvent, createReactionHoveredEvent } from '../analytics';
 import { Counter } from './Counter';
 import { FlashAnimation } from './FlashAnimation';
@@ -18,12 +19,12 @@ import { isLeftClick, akHeight } from './utils';
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
 
-const emojiStyle = style({
+const emojiStyle = css({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
   padding: '4px 4px 4px 8px'
 });
-const reactionStyle = style({
+const reactionStyle = css({
   outline: 'none',
   display: 'flex',
   flexDirection: 'row',
@@ -39,24 +40,20 @@ const reactionStyle = style({
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
-  $nest: {
-    '&:hover': {
-      background: `${token('color.background.neutral.subtle.hovered', N20)}`
-    }
+  '&:hover': {
+    background: `${token('color.background.neutral.subtle.hovered', N20)}`
   }
 });
-const reactedStyle = style({
-  backgroundColor: token('color.background.brand', B50),
-  borderColor: token('color.icon.brand', B300),
-  $nest: {
-    '&:hover': {
-      background: `${token('color.background.brand.hovered', B75)}`
-    }
+const reactedStyle = css({
+  backgroundColor: token('color.background.selected', B50),
+  borderColor: token('color.border.selected', B300),
+  '&:hover': {
+    background: `${token('color.background.selected.hovered', B75)}`
   }
 });
 const flashHeight = akHeight - 2; // height without the 1px border
 
-const flashStyle = style({
+const flashStyle = css({
   display: 'flex',
   flexDirection: 'row',
   borderRadius: '10px',
@@ -141,30 +138,28 @@ class ReactionWithoutAnalytics extends PureComponent {
     const {
       emojiName
     } = this.state;
-    const classNames = cx(reactionStyle, classNameProp, {
-      [reactedStyle]: reaction.reacted
-    });
     const emojiId = {
       id: reaction.emojiId,
       shortName: ''
     };
-    return /*#__PURE__*/React.createElement("button", {
-      className: classNames,
+    return jsx("button", {
+      className: classNameProp,
+      css: [reactionStyle, reaction.reacted && reactedStyle],
       onMouseUp: this.handleMouseDown,
       onMouseEnter: this.handleMouseEnter
-    }, /*#__PURE__*/React.createElement(ReactionTooltip, {
+    }, jsx(ReactionTooltip, {
       emojiName: emojiName,
       reaction: reaction
-    }, /*#__PURE__*/React.createElement(FlashAnimation, {
+    }, jsx(FlashAnimation, {
       flash: flash,
-      className: flashStyle
-    }, /*#__PURE__*/React.createElement("div", {
-      className: emojiStyle
-    }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
+      css: flashStyle
+    }, jsx("div", {
+      css: emojiStyle
+    }, jsx(ResourcedEmoji, {
       emojiProvider: emojiProvider,
       emojiId: emojiId,
       fitToHeight: 16
-    })), /*#__PURE__*/React.createElement(Counter, {
+    })), jsx(Counter, {
       value: reaction.count,
       highlight: reaction.reacted
     }))));

package/dist/es2019/components/ReactionPicker.js

@@ -1,37 +1,34 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import React, { Fragment, PureComponent } from 'react';
+import ReactDOM from 'react-dom';
+import { jsx, css } from '@emotion/core';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import cx from 'classnames';
-import React from 'react';
-import { PureComponent } from 'react';
-import ReactDOM from 'react-dom';
-import { style } from 'typestyle';
 import { Selector } from './Selector';
 import { Trigger } from './Trigger';
+import { UFO } from '../analytics';
 import { layers } from '@atlaskit/theme/constants';
-const pickerStyle = style({
+const pickerStyle = css({
   verticalAlign: 'middle',
-  $nest: {
-    '&.miniMode': {
-      display: 'inline-block',
-      marginRight: '4px'
-    }
+  '&.miniMode': {
+    display: 'inline-block',
+    marginRight: '4px'
   }
 });
-const contentStyle = style({
+const contentStyle = css({
   display: 'flex'
 });
-const popupStyle = style({
+const popupStyle = css({
   background: token('elevation.surface.overlay', N0),
   borderRadius: `${borderRadius()}px`,
   boxShadow: token('elevation.shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
-  $nest: {
-    '&> div': {
-      boxShadow: undefined
-    }
+  '&> div': {
+    boxShadow: undefined
   }
 });
 
@@ -94,6 +91,9 @@ export class ReactionPicker extends PureComponent {
     });
 
     _defineProperty(this, "onTriggerClick", () => {
+      // ufo start reaction experience
+      UFO.PickerRender.start();
+
       if (this.props.onOpen) {
         this.props.onOpen();
       }
@@ -101,6 +101,9 @@ export class ReactionPicker extends PureComponent {
       this.setState({
         isOpen: !this.state.isOpen,
         showFullPicker: false
+      }, () => {
+        // ufo add reaction success
+        UFO.PickerRender.success();
       });
     });
 
@@ -140,12 +143,16 @@ export class ReactionPicker extends PureComponent {
 
   componentWillUnmount() {
     document.removeEventListener('click', this.handleClickOutside);
+    UFO.PickerRender.abort();
   }
 
   close(_emojiId) {
     this.setState({
       isOpen: false,
       showFullPicker: false
+    }, () => {
+      // ufo abort reaction experience
+      UFO.PickerRender.abort();
     });
   }
 
@@ -154,9 +161,9 @@ export class ReactionPicker extends PureComponent {
       emojiProvider,
       allowAllEmojis
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: contentStyle
-    }, /*#__PURE__*/React.createElement(Selector, {
+    return jsx("div", {
+      css: contentStyle
+    }, jsx(Selector, {
       emojiProvider: emojiProvider,
       onSelection: this.onEmojiSelected,
       showMore: allowAllEmojis,
@@ -165,7 +172,7 @@ export class ReactionPicker extends PureComponent {
   }
 
   renderEmojiPicker() {
-    return /*#__PURE__*/React.createElement(EmojiPicker, {
+    return jsx(EmojiPicker, {
       emojiProvider: this.props.emojiProvider,
       onSelection: this.onEmojiSelected
     });
@@ -180,22 +187,20 @@ export class ReactionPicker extends PureComponent {
       isOpen
     } = this.state;
     const {
-      miniMode
+      miniMode,
+      className
     } = this.props;
-    const classNames = cx(pickerStyle, {
-      isOpen: isOpen,
-      miniMode: miniMode
-    }, this.props.className);
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames
-    }, /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, ({
+    return jsx("div", {
+      className: ` ${isOpen ? 'isOpen' : ''} ${miniMode ? 'miniMode' : ''} ${className}`,
+      css: pickerStyle
+    }, jsx(Manager, null, jsx(Reference, null, ({
       ref
-    }) => /*#__PURE__*/React.createElement(Trigger, {
+    }) => jsx(Trigger, {
       ref: ref,
       onClick: this.onTriggerClick,
       miniMode: miniMode,
       disabled: this.props.disabled
-    })), /*#__PURE__*/React.createElement(Popper, {
+    })), jsx(Popper, {
       placement: "bottom-start",
       modifiers: this.popperModifiers
     }, ({
@@ -204,14 +209,14 @@ export class ReactionPicker extends PureComponent {
       update
     }) => {
       this.updatePopper = update;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, this.state.isOpen && /*#__PURE__*/React.createElement("div", {
+      return jsx(Fragment, null, isOpen && jsx("div", {
         style: {
           zIndex: layers.layer(),
           ...style
         },
         ref: ref
-      }, /*#__PURE__*/React.createElement("div", {
-        className: popupStyle
+      }, jsx("div", {
+        css: popupStyle
       }, this.renderContent())));
     })));
   }

package/dist/es2019/components/ReactionTooltip.js

@@ -1,38 +1,38 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
-import React from 'react';
+import React, { Fragment } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { style } from 'typestyle';
 import { token } from '@atlaskit/tokens';
 import { N90 } from '@atlaskit/theme/colors';
 import { messages } from './i18n';
 const verticalMargin = 5;
-const tooltipStyle = style({
+const tooltipStyle = css({
   maxWidth: '150px',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   marginBottom: verticalMargin,
-  $nest: {
-    ul: {
-      listStyle: 'none',
-      margin: 0,
-      padding: 0,
-      textAlign: 'left'
-    },
-    li: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      marginTop: verticalMargin
-    }
+  ul: {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    textAlign: 'left'
+  },
+  li: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    marginTop: verticalMargin
   }
 });
-const emojiNameStyle = style({
+const emojiNameStyle = css({
   textTransform: 'capitalize',
   color: token('color.text.inverse', N90),
   fontWeight: 600
 });
-const footerStyle = style({
+const footerStyle = css({
   color: token('color.text.inverse', N90),
   fontWeight: 300
 });
@@ -45,25 +45,25 @@ export const ReactionTooltip = ({
   }
 }) => {
   if (!users || users.length === 0) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.only(children));
+    return jsx(Fragment, null, React.Children.only(children));
   }
 
-  const content = /*#__PURE__*/React.createElement("div", {
-    className: tooltipStyle
-  }, /*#__PURE__*/React.createElement("ul", null, emojiName ? /*#__PURE__*/React.createElement("li", {
-    className: emojiNameStyle
+  const content = jsx("div", {
+    css: tooltipStyle
+  }, jsx("ul", null, emojiName ? jsx("li", {
+    css: emojiNameStyle
   }, emojiName) : null, users.slice(0, TOOLTIP_USERS_LIMIT).map((user, index) => {
-    return /*#__PURE__*/React.createElement("li", {
+    return jsx("li", {
       key: index
     }, user.displayName);
-  }), users.length > TOOLTIP_USERS_LIMIT ? /*#__PURE__*/React.createElement("li", {
-    className: footerStyle
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.otherUsers, {
+  }), users.length > TOOLTIP_USERS_LIMIT ? jsx("li", {
+    css: footerStyle
+  }, jsx(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {
       count: users.length - TOOLTIP_USERS_LIMIT
     }
   }))) : null));
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     content: content,
     position: "bottom"
   }, React.Children.only(children));

package/dist/es2019/components/Reactions.js

@@ -1,20 +1,22 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { style } from 'typestyle';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionSelectionEvent, createReactionsRenderedEvent } from '../analytics';
 import { ReactionStatus } from '../types/ReactionStatus';
 import { messages } from './i18n';
 import { Reaction } from './Reaction';
 import { ReactionPicker } from './ReactionPicker';
-const reactionStyle = style({
+const reactionStyle = css({
   display: 'inline-block',
   // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)
   margin: '2px 4px 0 4px'
 });
-const reactionsStyle = style({
+const reactionsStyle = css({
   display: 'flex',
   flexWrap: 'wrap',
   position: 'relative',
@@ -22,10 +24,8 @@ const reactionsStyle = style({
   borderRadius: '15px',
   // To allow to row spacing of 2px on wrap, and 0px on first row
   marginTop: '-2px',
-  $nest: {
-    '& > :first-child': {
-      marginLeft: 0
-    }
+  '& > :first-of-type': {
+    marginLeft: 0
   }
 });
 export class ReactionsWithoutAnalytics extends React.PureComponent {
@@ -49,11 +49,11 @@ export class ReactionsWithoutAnalytics extends React.PureComponent {
 
       switch (status) {
         case ReactionStatus.error:
-          return errorMessage ? errorMessage : /*#__PURE__*/React.createElement(FormattedMessage, messages.unexpectedError);
+          return errorMessage ? errorMessage : jsx(FormattedMessage, messages.unexpectedError);
 
         case ReactionStatus.loading:
         case ReactionStatus.notLoaded:
-          return /*#__PURE__*/React.createElement(FormattedMessage, messages.loadingReactions);
+          return jsx(FormattedMessage, messages.loadingReactions);
 
         default:
           return undefined;
@@ -89,9 +89,9 @@ export class ReactionsWithoutAnalytics extends React.PureComponent {
       }
     });
 
-    _defineProperty(this, "renderReaction", reaction => /*#__PURE__*/React.createElement(Reaction, {
+    _defineProperty(this, "renderReaction", reaction => jsx(Reaction, {
       key: reaction.emojiId,
-      className: reactionStyle,
+      css: reactionStyle,
       reaction: reaction,
       emojiProvider: this.props.emojiProvider,
       onClick: this.props.onReactionClick,
@@ -116,10 +116,10 @@ export class ReactionsWithoutAnalytics extends React.PureComponent {
       boundariesElement,
       allowAllEmojis
     } = this.props;
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx(Tooltip, {
       content: this.getTooltip()
-    }, /*#__PURE__*/React.createElement(ReactionPicker, {
-      className: reactionStyle,
+    }, jsx(ReactionPicker, {
+      css: reactionStyle,
       emojiProvider: emojiProvider,
       miniMode: true,
       boundariesElement: boundariesElement,
@@ -133,8 +133,8 @@ export class ReactionsWithoutAnalytics extends React.PureComponent {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: reactionsStyle
+    return jsx("div", {
+      css: reactionsStyle
     }, this.props.reactions.map(this.renderReaction), this.renderPicker());
   }
 

package/dist/es2019/components/Selector.js

@@ -1,25 +1,25 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx, css, keyframes } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
-import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
-import { keyframes, style } from 'typestyle';
 import { EmojiButton } from './EmojiButton';
 import { ShowMore } from './ShowMore';
 import { equalEmojiId } from './utils';
-const selectorStyle = style({
+export const renderEmojiTestId = 'render-emoji';
+const selectorStyle = css({
   boxSizing: 'border-box',
   display: 'flex',
   padding: 0
 });
-const emojiStyle = style({
+const emojiStyle = css({
   display: 'inline-block',
   opacity: 0,
-  $nest: {
-    '&.selected': {
-      transition: 'transform 200ms ease-in-out  ',
-      transform: 'translateY(-48px) scale(2.667)'
-    }
+  '&.selected': {
+    transition: 'transform 200ms ease-in-out  ',
+    transform: 'translateY(-48px) scale(2.667)'
   }
 });
 const revealAnimation = keyframes({
@@ -35,7 +35,7 @@ const revealAnimation = keyframes({
     transform: 'scale(1)'
   }
 });
-export const revealStyle = style({
+export const revealStyle = css({
   animation: `${revealAnimation} 150ms ease-in-out forwards`
 });
 
@@ -80,28 +80,25 @@ export class Selector extends PureComponent {
         emojiProvider
       } = this.props;
       const key = emojiId.id || emojiId.shortName;
-      const classNames = cx(emojiStyle, revealStyle, {
-        selected: emojiId === this.state.selection
-      });
       const style = revealDelay(index);
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         key: key,
-        className: classNames,
-        style: style
-      }, /*#__PURE__*/React.createElement(Tooltip, {
+        className: emojiId === this.state.selection ? 'selected' : '',
+        css: [emojiStyle, revealStyle],
+        style: style,
+        "data-testid": renderEmojiTestId
+      }, jsx(Tooltip, {
         content: emojiId.shortName
-      }, /*#__PURE__*/React.createElement(EmojiButton, {
+      }, jsx(EmojiButton, {
         emojiId: emojiId,
         emojiProvider: emojiProvider,
         onClick: this.onEmojiSelected
       })));
     });
 
-    _defineProperty(this, "renderShowMore", () => /*#__PURE__*/React.createElement(ShowMore, {
+    _defineProperty(this, "renderShowMore", () => jsx(ShowMore, {
       key: "more",
-      className: {
-        button: revealStyle
-      },
+      revealStyle: revealStyle,
       style: {
         button: revealDelay(defaultReactions.length)
       },
@@ -122,8 +119,8 @@ export class Selector extends PureComponent {
     const {
       showMore
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: selectorStyle
+    return jsx("div", {
+      css: selectorStyle
     }, defaultReactions.map(this.renderEmoji), showMore ? this.renderShowMore() : null);
   }
 

package/dist/es2019/components/ShowMore.js

@@ -1,18 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30A } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
-import cx from 'classnames';
 import React from 'react';
-import { style } from 'typestyle';
 import { messages } from './i18n';
 import { FormattedMessage } from 'react-intl-next';
-const moreEmojiContainerStyle = style({
+import { revealStyle } from './Selector';
+const moreEmojiContainerStyle = css({
   display: 'flex'
 });
-const moreButtonStyle = style({
+const moreButtonStyle = css({
   opacity: 0,
   outline: 'none',
   backgroundColor: 'transparent',
@@ -23,19 +25,18 @@ const moreButtonStyle = style({
   padding: '4px',
   width: '38px',
   verticalAlign: 'top',
-  $nest: {
-    '&:hover': {
-      backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
-    }
+  '&:hover': {
+    backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
   }
 });
-const separatorStyle = style({
+const separatorStyle = css({
   backgroundColor: token('color.border', N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',
   display: 'inline-block'
 });
+export const showMoreTestId = 'show-more-button';
 export class ShowMore extends React.PureComponent {
   render() {
     const {
@@ -43,18 +44,21 @@ export class ShowMore extends React.PureComponent {
       onClick,
       className: classNameProp
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
-      className: cx(moreEmojiContainerStyle, classNameProp.container),
+    return jsx("div", {
+      className: classNameProp.container,
+      css: moreEmojiContainerStyle,
       style: style.container
-    }, /*#__PURE__*/React.createElement("div", {
-      className: separatorStyle
-    }), /*#__PURE__*/React.createElement(FormattedMessage, messages.moreEmoji, text => /*#__PURE__*/React.createElement(Tooltip, {
+    }, jsx("div", {
+      css: separatorStyle
+    }), jsx(FormattedMessage, messages.moreEmoji, text => jsx(Tooltip, {
       content: text
-    }, /*#__PURE__*/React.createElement("button", {
-      className: cx(moreButtonStyle, classNameProp.button),
+    }, jsx("button", {
+      className: classNameProp.button,
+      css: [moreButtonStyle, revealStyle],
       style: style.button,
-      onMouseDown: onClick
-    }, /*#__PURE__*/React.createElement(EditorMoreIcon, {
+      onMouseDown: onClick,
+      "data-testid": showMoreTestId
+    }, jsx(EditorMoreIcon, {
       label: "More"
     })))));
   }

package/dist/es2019/components/Trigger.js

@@ -1,20 +1,18 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import Button from '@atlaskit/button/standard-button';
 import EmojiAddIcon from '@atlaskit/icon/glyph/emoji-add';
-import cx from 'classnames';
 import React from 'react';
-import { style } from 'typestyle';
-const triggerStyle = style({
+const triggerStyle = css({
   width: '32px',
   height: '32px',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   lineHeight: '16px',
-  $nest: {
-    '&.miniMode': {
-      width: '24px',
-      height: '24px'
-    }
+  '&.miniMode': {
+    width: '24px',
+    height: '24px'
   }
 });
 export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -29,15 +27,13 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   };
 
-  const classNames = cx(triggerStyle, {
-    miniMode
-  });
-  return /*#__PURE__*/React.createElement(Button, {
-    className: classNames,
+  return jsx(Button, {
+    className: miniMode ? 'miniMode' : '',
+    css: triggerStyle,
     appearance: "subtle",
     onClick: handleMouseDown,
     isDisabled: disabled,
-    iconBefore: /*#__PURE__*/React.createElement(EmojiAddIcon, {
+    iconBefore: jsx(EmojiAddIcon, {
       size: "small",
       label: "Add reaction"
     }),

package/dist/es2019/components/UfoErrorBoundary.js

@@ -0,0 +1,13 @@
+import React from 'react';
+export class UfoErrorBoundary extends React.Component {
+  componentDidCatch() {
+    for (const e of this.props.experiences) {
+      e.failure();
+    }
+  }
+
+  render() {
+    return this.props.children;
+  }
+
+}