@atlaskit/reactions 21.4.0 → 21.6.0

package/dist/esm/components/EmojiButton/EmojiButton.js

@@ -0,0 +1,35 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/core';
+import { ResourcedEmoji } from '@atlaskit/emoji';
+import { utils } from '../../shared';
+import * as styles from './styles';
+export var RENDER_BUTTON_TESTID = 'button-emoji-id';
+
+/**
+ * custom button to render the custom emoji selector inside the reaction picker
+ */
+export var EmojiButton = function EmojiButton(_ref) {
+  var emojiId = _ref.emojiId,
+      onClick = _ref.onClick,
+      emojiProvider = _ref.emojiProvider;
+
+  var onButtonClick = function onButtonClick(event) {
+    event.preventDefault();
+
+    if (onClick && utils.isLeftClick(event)) {
+      onClick(emojiId, undefined, event);
+    }
+  };
+
+  return jsx("button", {
+    "data-testid": RENDER_BUTTON_TESTID,
+    onClick: onButtonClick,
+    title: emojiId.shortName,
+    type: "button",
+    css: styles.emojiButtonStyle
+  }, jsx(ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: emojiId
+  }));
+};

package/dist/esm/components/EmojiButton/index.js

@@ -0,0 +1 @@
+export { EmojiButton, RENDER_BUTTON_TESTID } from './EmojiButton';

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

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { css } from '@emotion/core';
+export var emojiButtonStyle = css({
+  outline: 'none',
+  display: 'flex',
+  backgroundColor: 'transparent',
+  border: 0,
+  borderRadius: '5px',
+  cursor: 'pointer',
+  margin: '0',
+  padding: '10px 8px',
+  '&:hover > span': {
+    transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
+    transform: 'scale(1.33)'
+  }
+});

package/dist/esm/components/FlashAnimation/FlashAnimation.js

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/core';
+import * as styles from './styles';
+
+/**
+ * Test id for wrapper FlashAnimation div
+ */
+export var RENDER_FLASHANIMATION_TESTID = 'flash-animation';
+/**
+ * Flash animation background component. See Reaction component for usage.
+ */
+
+export var FlashAnimation = function FlashAnimation(props) {
+  return jsx("div", {
+    className: props.className,
+    css: [styles.containerStyle, props.flash && styles.flashStyle],
+    "data-testid": RENDER_FLASHANIMATION_TESTID
+  }, props.children);
+};

package/dist/esm/components/FlashAnimation/index.js

@@ -0,0 +1 @@
+export { FlashAnimation, RENDER_FLASHANIMATION_TESTID } from './FlashAnimation';

package/dist/esm/components/{FlashAnimation.js → FlashAnimation/styles.js}

@@ -1,13 +1,7 @@
 /** @jsx jsx */
-import { jsx, css, keyframes } from '@emotion/core';
+import { css, keyframes } from '@emotion/core';
 import { B75, B300 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import React from 'react';
-export var flashAnimationTestId = 'flash-animation';
-var containerStyle = css({
-  width: '100%',
-  height: '100%'
-});
 var flashTime = 700;
 export var flashAnimation = keyframes({
   '0%': {
@@ -26,17 +20,10 @@ export var flashAnimation = keyframes({
     borderColor: token('color.border.selected', B300)
   }
 });
+export var containerStyle = css({
+  width: '100%',
+  height: '100%'
+});
 export var flashStyle = css({
   animation: "".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out")
-});
-/**
- * Flash animation background component. See Reaction component for usage.
- */
-
-export var FlashAnimation = function FlashAnimation(props) {
-  return jsx("div", {
-    className: props.className,
-    css: [containerStyle, props.flash && flashStyle],
-    "data-testid": flashAnimationTestId
-  }, props.children);
-};
+});

package/dist/esm/components/Reaction/Reaction.js

@@ -0,0 +1,131 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+/** @jsx jsx */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { jsx } from '@emotion/core';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ResourcedEmoji } from '@atlaskit/emoji';
+import { Analytics } from '../../analytics';
+import { Counter } from '../Counter';
+import { FlashAnimation } from '../FlashAnimation';
+import { ReactionTooltip } from '../ReactionTooltip';
+import { utils } from '../../shared';
+import * as styles from './styles';
+/**
+ * Test id for Reaction item wrapper div
+ */
+
+export var RENDER_REACTION_TESTID = 'render_reaction_wrapper';
+
+/**
+ * Render an emoji reaction button
+ */
+export var Reaction = function Reaction(_ref) {
+  var emojiProvider = _ref.emojiProvider,
+      onClick = _ref.onClick,
+      reaction = _ref.reaction,
+      onMouseEnter = _ref.onMouseEnter,
+      className = _ref.className,
+      _ref$flash = _ref.flash,
+      flash = _ref$flash === void 0 ? false : _ref$flash;
+  var emojiId = {
+    id: reaction.emojiId,
+    shortName: ''
+  };
+  var hoverStart = useRef();
+
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      emojiName = _useState2[0],
+      setEmojiName = _useState2[1]; // TODO: Extract the flow to a custom hook to retrieve emoji detailed description from an id using a custom hook. This will benefit a better optimization instead of the emojiProvider resolving everytime.
+  // Also optimize in future version to fetch in batch several emojiIds
+
+
+  useEffect(function () {
+    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var emojiResource, foundEmoji;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return Promise.resolve(emojiProvider);
+
+            case 2:
+              emojiResource = _context.sent;
+              _context.next = 5;
+              return emojiResource.findByEmojiId({
+                shortName: '',
+                id: reaction.emojiId
+              });
+
+            case 5:
+              foundEmoji = _context.sent;
+
+              if (foundEmoji) {
+                setEmojiName(foundEmoji.name);
+              }
+
+            case 7:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))();
+  }, [emojiProvider, reaction.emojiId]);
+  var handleMouseUp = useCallback(function (event) {
+    event.preventDefault();
+
+    if (utils.isLeftClick(event)) {
+      var reacted = reaction.reacted,
+          _emojiId = reaction.emojiId;
+      Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionClickedEvent, !reacted, _emojiId);
+      onClick(reaction.emojiId, event);
+    }
+  }, [createAnalyticsEvent, reaction, onClick]);
+  var handleMouseEnter = useCallback(function (event) {
+    event.preventDefault();
+
+    if (!reaction.users || !reaction.users.length) {
+      hoverStart.current = Date.now();
+    }
+
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionHoveredEvent, hoverStart.current);
+
+    if (onMouseEnter) {
+      onMouseEnter(reaction, event);
+    }
+  }, [createAnalyticsEvent, reaction, onMouseEnter]);
+  return jsx(ReactionTooltip, {
+    emojiName: emojiName,
+    reaction: reaction
+  }, jsx("button", {
+    className: className,
+    css: [styles.reactionStyle, reaction.reacted && styles.reactedStyle],
+    title: reaction.emojiId,
+    type: "button",
+    "data-testid": RENDER_REACTION_TESTID,
+    onMouseUp: handleMouseUp,
+    onMouseEnter: handleMouseEnter
+  }, jsx(FlashAnimation, {
+    flash: flash,
+    css: styles.flashStyle
+  }, jsx("div", {
+    css: [styles.emojiStyle, reaction.count === 0 && {
+      padding: '4px 2px 4px 10px'
+    }]
+  }, jsx(ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: emojiId,
+    fitToHeight: 16
+  })), jsx(Counter, {
+    value: reaction.count,
+    highlight: reaction.reacted
+  }))));
+};

package/dist/esm/components/Reaction/index.js

@@ -0,0 +1 @@
+export { Reaction, RENDER_REACTION_TESTID } from './Reaction';

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

@@ -0,0 +1,55 @@
+/** @jsx jsx */
+import { css } from '@emotion/core';
+import { B50, B75, B300, N20, N40, N400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+/**
+ * Default styling px height for an emoji reaction
+ */
+
+var akHeight = 24;
+/**
+ * Styling Note:
+ * Padding and line height are set within the child components
+ * of FlashAnimation b/c it otherwise throws off the flash styling
+ */
+
+export var emojiStyle = css({
+  transformOrigin: 'center center 0',
+  lineHeight: '12px',
+  padding: '4px 4px 4px 8px'
+});
+export var reactionStyle = css({
+  outline: 'none',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  minWidth: '36px',
+  height: "".concat(akHeight, "px"),
+  background: 'transparent',
+  border: "1px solid ".concat(token('color.border', N40)),
+  boxSizing: 'border-box',
+  borderRadius: '20px',
+  color: "".concat(token('color.text.subtle', N400)),
+  cursor: 'pointer',
+  margin: 0,
+  padding: 0,
+  transition: '200ms ease-in-out',
+  '&:hover': {
+    background: "".concat(token('color.background.neutral.subtle.hovered', N20))
+  }
+});
+export var reactedStyle = css({
+  backgroundColor: token('color.background.selected', B50),
+  borderColor: token('color.border.selected', B300),
+  '&:hover': {
+    background: "".concat(token('color.background.selected.hovered', B75))
+  }
+});
+export var flashHeight = akHeight - 2; // height without the 1px border
+
+export var flashStyle = css({
+  display: 'flex',
+  flexDirection: 'row',
+  borderRadius: '10px',
+  height: "".concat(flashHeight, "px")
+});

package/dist/esm/components/ReactionPicker/ReactionPicker.js

@@ -0,0 +1,243 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+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 _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) { _defineProperty(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; }
+
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+/** @jsx jsx */
+import React, { Fragment, useCallback, useRef, useState } from 'react';
+import { jsx } from '@emotion/core';
+import { EmojiPicker } from '@atlaskit/emoji/picker';
+import { Manager, Popper, Reference } from '@atlaskit/popper';
+import { layers } from '@atlaskit/theme/constants';
+import { Selector } from '../Selector';
+import { Trigger } from '../Trigger';
+import { UFO } from '../../analytics';
+import { useClickAway } from '../../hooks';
+import * as styles from './styles';
+/**
+ * Test id for wrapper ReactionPicker div
+ */
+
+export var RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
+var popperModifiers = [
+/**
+ Removing this applyStyle modifier as it throws client errors ref:
+https://popper.js.org/docs/v1/#modifiers
+https://popper.js.org/docs/v1/#modifiers..applyStyle
+{ name: 'applyStyle', enabled: false },
+ */
+{
+  name: 'hide',
+  enabled: false
+}, {
+  name: 'offset',
+  enabled: true,
+  options: {
+    offset: [0, 0]
+  }
+}, {
+  name: 'flip',
+  enabled: true,
+  options: {
+    flipVariations: true,
+    boundariesElement: 'scrollParent'
+  }
+}, {
+  name: 'preventOverflow',
+  enabled: true
+}];
+
+/**
+ * Picker component for adding reactions
+ */
+export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
+  var miniMode = props.miniMode,
+      className = props.className,
+      emojiProvider = props.emojiProvider,
+      onSelection = props.onSelection,
+      allowAllEmojis = props.allowAllEmojis,
+      disabled = props.disabled,
+      pickerQuickReactionEmojiIds = props.pickerQuickReactionEmojiIds,
+      onShowMore = props.onShowMore,
+      onOpen = props.onOpen,
+      onCancel = props.onCancel;
+  /**
+   * Container <div /> reference (used by custom hook to detect click outside)
+   */
+
+  var wrapperRef = useRef(null);
+  /**
+   * a function you can ask Popper to recompute your tooltip's position. It will directly call the Popper#update method
+   */
+
+  var updatePopper = useRef(function () {
+    return Promise.resolve();
+  });
+
+  var _useState = useState({
+    /**
+     * Show the picker floating panel
+     */
+    isOpen: false,
+
+    /**
+     * Show the full custom emoji list picker or the default list of emojis
+     */
+    showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      settings = _useState2[0],
+      setSettings = _useState2[1];
+  /**
+   * Custom hook triggers when user clicks outside the reactions picker
+   */
+
+
+  useClickAway(wrapperRef, function () {
+    if (onCancel) {
+      onCancel();
+    }
+
+    close();
+  });
+  /**
+   * Event callback when the picker is closed
+   * @param _id Optional id if an emoji button was selected or undefineed if was clicked outside the picker
+   */
+
+  var close = useCallback(function (_id) {
+    setSettings({
+      isOpen: false,
+      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
+    }); // ufo abort reaction experience
+
+    UFO.PickerRender.abort({
+      metadata: {
+        emojiId: _id,
+        source: 'Reaction-Picker',
+        reason: 'close dialog'
+      }
+    });
+  }, [allowAllEmojis, pickerQuickReactionEmojiIds]);
+  /**
+   * Event handle rwhen selecting to show the custom emoji icons picker
+   * @param e event param
+   */
+
+  var onSelectMoreClick = useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              _context.next = 3;
+              return updatePopper.current();
+
+            case 3:
+              // Update popper position
+              setSettings({
+                isOpen: true,
+                showFullPicker: true
+              });
+
+              if (onShowMore) {
+                onShowMore();
+              }
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [onShowMore]);
+  /**
+   * Event callback when an emoji icon is selected
+   * @param item selected item
+   */
+
+  var onEmojiSelected = useCallback(function (item) {
+    // no emoji was selected
+    if (!item.id) {
+      return;
+    }
+
+    onSelection(item.id, settings.showFullPicker ? 'emojiPicker' : 'quickSelector');
+    close(item.id);
+  }, [close, onSelection, settings.showFullPicker]);
+  /**
+   * Event handler when the emoji icon to open the custom picker is selected
+   */
+
+  var onTriggerClick = function onTriggerClick() {
+    // ufo start reactions picker open experience
+    UFO.PickerRender.start();
+    setSettings({
+      isOpen: !settings.isOpen,
+      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
+    });
+
+    if (onOpen) {
+      onOpen();
+    } // ufo reactions picker opened success
+
+
+    UFO.PickerRender.success();
+  };
+
+  var wrapperClassName = " ".concat(settings.isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
+  return jsx("div", {
+    className: wrapperClassName,
+    css: styles.pickerStyle,
+    ref: wrapperRef,
+    "data-testid": RENDER_REACTIONPICKER_TESTID
+  }, jsx(Manager, null, jsx(Reference, null, function (_ref2) {
+    var popperRef = _ref2.ref;
+    return (// Render a button to open the <Selector /> panel
+      jsx(Trigger, {
+        ref: popperRef,
+        onClick: onTriggerClick,
+        miniMode: miniMode,
+        disabled: disabled
+      })
+    );
+  }), jsx(Popper, {
+    placement: "bottom-start",
+    modifiers: popperModifiers
+  }, function (_ref3) {
+    var ref = _ref3.ref,
+        style = _ref3.style,
+        update = _ref3.update;
+    updatePopper.current = update;
+    return jsx(Fragment, null, settings.isOpen && jsx("div", {
+      style: _objectSpread({
+        zIndex: layers.layer()
+      }, style),
+      ref: ref
+    }, jsx("div", {
+      css: styles.popupStyle
+    }, settings.showFullPicker ? jsx(EmojiPicker, {
+      emojiProvider: emojiProvider,
+      onSelection: onEmojiSelected
+    }) : jsx("div", {
+      css: styles.contentStyle
+    }, jsx(Selector, {
+      emojiProvider: emojiProvider,
+      onSelection: onEmojiSelected,
+      showMore: allowAllEmojis,
+      onMoreClick: onSelectMoreClick,
+      pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
+    })))));
+  })));
+});

package/dist/esm/components/ReactionPicker/index.js

@@ -0,0 +1 @@
+export { ReactionPicker, RENDER_REACTIONPICKER_TESTID } from './ReactionPicker';

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

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { css } from '@emotion/core';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+export var pickerStyle = css({
+  verticalAlign: 'middle',
+  '&.miniMode': {
+    display: 'inline-block',
+    marginRight: '4px'
+  }
+});
+export var contentStyle = css({
+  display: 'flex'
+});
+export var popupStyle = css({
+  background: token('elevation.surface.overlay', N0),
+  borderRadius: "".concat(borderRadius(), "px"),
+  boxShadow: token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
+  '&> div': {
+    boxShadow: undefined
+  }
+});

package/dist/esm/components/ReactionTooltip/ReactionTooltip.js

@@ -0,0 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/core';
+import Tooltip from '@atlaskit/tooltip';
+import { FormattedMessage } from 'react-intl-next';
+import { constants, i18n } from '../../shared';
+import * as styles from './styles';
+/**
+ * Test id for wrapper ReactionTooltip div
+ */
+
+export var RENDER_REACTIONTOOLTIP_TESTID = 'render-reactionTooltip';
+export var ReactionTooltip = function ReactionTooltip(_ref) {
+  var emojiName = _ref.emojiName,
+      children = _ref.children,
+      _ref$maxReactions = _ref.maxReactions,
+      maxReactions = _ref$maxReactions === void 0 ? constants.TOOLTIP_USERS_LIMIT : _ref$maxReactions,
+      _ref$reaction$users = _ref.reaction.users,
+      users = _ref$reaction$users === void 0 ? [] : _ref$reaction$users;
+
+  /**
+   * Render list of users in the tooltip box
+   */
+  var content = !users || users.length === 0 ? null : jsx("div", {
+    css: styles.tooltipStyle
+  }, jsx("ul", null, emojiName ? jsx("li", {
+    css: styles.emojiNameStyle
+  }, emojiName) : null, users.slice(0, maxReactions).map(function (user, index) {
+    return jsx("li", {
+      key: index
+    }, user.displayName);
+  }), users.length > maxReactions ? jsx("li", {
+    css: styles.footerStyle
+  }, jsx(FormattedMessage, _extends({}, i18n.messages.otherUsers, {
+    values: {
+      count: users.length - maxReactions
+    }
+  }))) : null));
+  return jsx(Tooltip, {
+    content: content,
+    position: "bottom",
+    "data-testid": RENDER_REACTIONTOOLTIP_TESTID
+  }, React.Children.only(children));
+};

package/dist/esm/components/ReactionTooltip/index.js

@@ -0,0 +1 @@
+export { ReactionTooltip, RENDER_REACTIONTOOLTIP_TESTID } from './ReactionTooltip';

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

@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import { css } from '@emotion/core';
+import { token } from '@atlaskit/tokens';
+import { N90 } from '@atlaskit/theme/colors';
+export var verticalMargin = 5;
+export var tooltipStyle = css({
+  maxWidth: '150px',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  marginBottom: verticalMargin,
+  ul: {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    textAlign: 'left'
+  },
+  li: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    marginTop: verticalMargin
+  }
+});
+export var emojiNameStyle = css({
+  textTransform: 'capitalize',
+  color: token('color.text.inverse', N90),
+  fontWeight: 600
+});
+export var footerStyle = css({
+  color: token('color.text.inverse', N90),
+  fontWeight: 300
+});