@atlaskit/reactions 21.0.3 → 21.1.0

package/dist/es2019/components/Counter.js

@@ -1,154 +1,70 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import { N90, B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import cx from 'classnames';
-import React from 'react';
-import { CSSTransition } from 'react-transition-group';
-import { keyframes, style } from 'typestyle';
-import { akHeight } from './utils';
-const animationTime = 300;
-export const countStyle = style({
-  fontSize: '11px',
+import React, { memo } from 'react';
+import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
+import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+export const counterTestId = 'counter-container';
+export const countStyle = css({
+  fontSize: 11,
+  // TODO: nice to have a theme level token for fontSize
   color: token('color.text.subtlest', N90),
   overflow: 'hidden',
-  height: `${akHeight}px`,
-  transition: `width ${animationTime}ms ease-in-out`
+  position: 'relative',
+  padding: '4px 8px 4px 0',
+  lineHeight: '14px'
 });
-export const highlightStyle = style({
-  color: token('color.text.brand', B400),
+export const highlightStyle = css({
+  color: token('color.text.selected', B400),
   fontWeight: 600
 });
-export const containerStyle = style({
+export const containerStyle = css({
   display: 'flex',
   flexDirection: 'column'
 });
-
-const slideAnimation = (start, end) => {
-  const animation = keyframes({
-    '0%': {
-      transform: `translateY(${start}%)`
-    },
-    '100%': {
-      transform: `translateY(${end}%)`
+export const Counter = /*#__PURE__*/memo(({
+  highlight = false,
+  limit = 100,
+  overLimitLabel = '99+',
+  className,
+  value,
+  animationDuration = mediumDurationMs
+}) => {
+  const hasReachedLimit = value => limit && value >= limit;
+
+  const getLabel = value => {
+    if (hasReachedLimit(value)) {
+      return overLimitLabel || '';
+    } else if (value === 0) {
+      return '';
+    } else {
+      return value.toString();
     }
-  });
-  return `${animation} ${animationTime}ms ease-in-out`;
-};
-
-const counterAnimation = (start, end) => style({
-  animation: slideAnimation(start, end)
-});
-
-export const slideUpStyle = counterAnimation(0, -50);
-export const slideDownStyle = counterAnimation(-50, 0);
-export class Counter extends React.PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "getLabel", value => {
-      const {
-        overLimitLabel
-      } = this.props;
-
-      if (this.hasReachedLimit(value)) {
-        return overLimitLabel || '';
-      } else if (value === 0) {
-        return '';
-      } else {
-        return value.toString();
-      }
-    });
-
-    _defineProperty(this, "hasReachedLimit", value => this.props.limit && value >= this.props.limit);
-
-    _defineProperty(this, "renderPrevious", () => {
-      const {
-        previous
-      } = this.state;
-
-      if (previous !== undefined) {
-        const className = cx({
-          [highlightStyle]: previous.highlight
-        });
-        return /*#__PURE__*/React.createElement("div", {
-          key: previous.value,
-          className: className
-        }, this.getLabel(previous.value));
-      }
-
-      return null;
-    });
-
-    _defineProperty(this, "clearPrevious", () => {
-      this.setState({
-        previous: undefined
-      });
-    });
-
-    this.state = {
-      previous: undefined
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      value,
-      highlight
-    } = this.props;
-
-    if (value !== undefined && value !== nextProps.value && (!this.hasReachedLimit(value) || !this.hasReachedLimit(nextProps.value))) {
-      this.setState({
-        previous: {
-          value,
-          highlight
-        }
-      });
+  };
+
+  const previousValue = usePreviousValue(value);
+  const label = getLabel(value);
+  const increase = previousValue ? previousValue < value : false;
+  return jsx("div", {
+    className: className,
+    css: countStyle,
+    style: {
+      width: label.length * 7
     }
-  }
-
-  render() {
-    const {
-      value,
-      highlight,
-      className: classNameProp
-    } = this.props;
-    const {
-      previous
-    } = this.state;
-    const label = this.getLabel(value);
-    const increase = previous !== undefined && previous.value < value;
-    const decrease = previous !== undefined && previous.value > value;
-    const enterClass = increase ? slideUpStyle : decrease ? slideDownStyle : undefined;
-    const className = cx(countStyle, classNameProp);
-    const currentClassName = cx({
-      [highlightStyle]: highlight
-    }); // WS-2525 With the pill UI updates, width of * 10 was too much so dropped down to * 7
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: className,
-      style: {
-        width: label.length * 7
-      }
-    }, /*#__PURE__*/React.createElement(CSSTransition, {
-      classNames: {
-        enter: enterClass
-      },
-      timeout: animationTime,
-      in: increase || decrease,
-      onEntered: this.clearPrevious
-    }, /*#__PURE__*/React.createElement("div", {
-      className: containerStyle
-    }, increase ? this.renderPrevious() : null, /*#__PURE__*/React.createElement("div", {
-      className: currentClassName,
-      key: value
-    }, label), decrease ? this.renderPrevious() : null)));
-  }
-
-}
-
-_defineProperty(Counter, "defaultProps", {
-  highlight: false,
-  limit: 100,
-  overLimitLabel: '99+',
-  className: undefined
+  }, jsx(ExitingPersistence, null, jsx(SlideIn, {
+    enterFrom: increase ? 'bottom' : 'top',
+    key: value,
+    duration: animationDuration
+  }, (motion, direction) => jsx("div", {
+    ref: motion.ref,
+    css: [containerStyle, css({
+      position: direction === 'exiting' ? 'absolute' : undefined
+    })],
+    className: motion.className,
+    "data-testid": counterTestId
+  }, jsx("div", {
+    css: highlight && highlightStyle,
+    key: value
+  }, label)))));
 });

package/dist/es2019/components/EmojiButton.js

@@ -1,10 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import React from 'react';
 import { PureComponent } from 'react';
-import { style } from 'typestyle';
 import { isLeftClick } from './utils';
-const emojiButtonStyle = style({
+const emojiButtonStyle = css({
   outline: 'none',
   display: 'flex',
   backgroundColor: 'transparent',
@@ -13,11 +15,9 @@ const emojiButtonStyle = style({
   cursor: 'pointer',
   margin: '0',
   padding: '10px 8px',
-  $nest: {
-    '&:hover > span': {
-      transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
-      transform: 'scale(1.33)'
-    }
+  '&:hover > span': {
+    transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
+    transform: 'scale(1.33)'
   }
 });
 export class EmojiButton extends PureComponent {
@@ -38,10 +38,10 @@ export class EmojiButton extends PureComponent {
       emojiId,
       emojiProvider
     } = this.props;
-    return /*#__PURE__*/React.createElement("button", {
+    return jsx("button", {
       onMouseUp: this.handleMouseDown,
-      className: emojiButtonStyle
-    }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
+      css: emojiButtonStyle
+    }, jsx(ResourcedEmoji, {
       emojiProvider: emojiProvider,
       emojiId: emojiId
     }));

package/dist/es2019/components/FlashAnimation.js

@@ -1,39 +1,40 @@
+/** @jsx jsx */
+import { jsx, css, keyframes } from '@emotion/core';
 import { B75, B300 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import cx from 'classnames';
 import React from 'react';
-import { keyframes, style } from 'typestyle';
-const containerStyle = style({
+export const flashAnimationTestId = 'flash-animation';
+const containerStyle = css({
   width: '100%',
   height: '100%'
 });
 const flashTime = 700;
-const flashAnimation = keyframes({
+export const flashAnimation = keyframes({
   '0%': {
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: token('color.background.brand.pressed', B75),
-    borderColor: token('color.icon.brand', B300)
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.border.selected', B300)
   },
   '75%': {
-    backgroundColor: token('color.background.brand.pressed', B75),
-    borderColor: token('color.icon.brand', B300)
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.border.selected', B300)
   },
   '100%': {
-    backgroundColor: token('color.background.brand.pressed', B75),
-    borderColor: token('color.icon.brand', B300)
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.border.selected', B300)
   }
 });
-export const flashStyle = style({
+export const flashStyle = css({
   animation: `${flashAnimation} ${flashTime}ms ease-in-out`
 });
 /**
  * Flash animation background component. See Reaction component for usage.
  */
 
-export const FlashAnimation = props => /*#__PURE__*/React.createElement("div", {
-  className: cx(containerStyle, props.className, {
-    [flashStyle]: props.flash
-  })
+export const FlashAnimation = props => jsx("div", {
+  className: props.className,
+  css: [containerStyle, props.flash && flashStyle],
+  "data-testid": flashAnimationTestId
 }, props.children);

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,33 +40,25 @@ 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',
   height: `${flashHeight}px`
 });
-const counterStyle = style({
-  padding: '4px 8px 4px 0',
-  lineHeight: '14px'
-});
 
 class ReactionWithoutAnalytics extends PureComponent {
   constructor(props) {
@@ -90,10 +83,10 @@ class ReactionWithoutAnalytics extends PureComponent {
       }
     });
 
-    _defineProperty(this, "handleMouseOver", event => {
+    _defineProperty(this, "handleMouseEnter", event => {
       event.preventDefault();
       const {
-        onMouseOver,
+        onMouseEnter,
         reaction
       } = this.props;
 
@@ -101,8 +94,8 @@ class ReactionWithoutAnalytics extends PureComponent {
         this.hoverStart = Date.now();
       }
 
-      if (onMouseOver) {
-        onMouseOver(this.props.reaction, event);
+      if (onMouseEnter) {
+        onMouseEnter(this.props.reaction, event);
       }
     });
 
@@ -145,31 +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,
-      onMouseOver: this.handleMouseOver
-    }, /*#__PURE__*/React.createElement(ReactionTooltip, {
+      onMouseEnter: this.handleMouseEnter
+    }, 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, {
-      className: counterStyle,
+    })), jsx(Counter, {
       value: reaction.count,
       highlight: reaction.reacted
     }))));
@@ -180,7 +170,7 @@ class ReactionWithoutAnalytics extends PureComponent {
 _defineProperty(ReactionWithoutAnalytics, "defaultProps", {
   flash: false,
   className: undefined,
-  onMouseOver: undefined,
+  onMouseEnter: undefined,
   flashOnMount: false
 });
 

package/dist/es2019/components/ReactionPicker.js

@@ -1,37 +1,34 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+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 React, { Fragment } from 'react';
 import { PureComponent } from 'react';
 import ReactDOM from 'react-dom';
-import { style } from 'typestyle';
 import { Selector } from './Selector';
 import { Trigger } from './Trigger';
 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
   }
 });
 
@@ -154,9 +151,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 +162,7 @@ export class ReactionPicker extends PureComponent {
   }
 
   renderEmojiPicker() {
-    return /*#__PURE__*/React.createElement(EmojiPicker, {
+    return jsx(EmojiPicker, {
       emojiProvider: this.props.emojiProvider,
       onSelection: this.onEmojiSelected
     });
@@ -180,22 +177,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 +199,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));