@atlaskit/reactions 21.5.1 → 21.6.0

package/dist/es2019/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 const flashAnimationTestId = 'flash-animation';
-const containerStyle = css({
-  width: '100%',
-  height: '100%'
-});
 const flashTime = 700;
 export const flashAnimation = keyframes({
   '0%': {
@@ -26,15 +20,10 @@ export const flashAnimation = keyframes({
     borderColor: token('color.border.selected', B300)
   }
 });
+export const containerStyle = css({
+  width: '100%',
+  height: '100%'
+});
 export const flashStyle = css({
   animation: `${flashAnimation} ${flashTime}ms ease-in-out`
-});
-/**
- * Flash animation background component. See Reaction component for usage.
- */
-
-export const FlashAnimation = props => jsx("div", {
-  className: props.className,
-  css: [containerStyle, props.flash && flashStyle],
-  "data-testid": flashAnimationTestId
-}, props.children);
+});

package/dist/es2019/components/Reaction/Reaction.js

@@ -0,0 +1,104 @@
+/** @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 const RENDER_REACTION_TESTID = 'render_reaction_wrapper';
+
+/**
+ * Render an emoji reaction button
+ */
+export const Reaction = ({
+  emojiProvider,
+  onClick,
+  reaction,
+  onMouseEnter,
+  className,
+  flash = false
+}) => {
+  const emojiId = {
+    id: reaction.emojiId,
+    shortName: ''
+  };
+  const hoverStart = useRef();
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const [emojiName, setEmojiName] = useState(); // 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(() => {
+    (async () => {
+      const emojiResource = await Promise.resolve(emojiProvider);
+      const foundEmoji = await emojiResource.findByEmojiId({
+        shortName: '',
+        id: reaction.emojiId
+      });
+
+      if (foundEmoji) {
+        setEmojiName(foundEmoji.name);
+      }
+    })();
+  }, [emojiProvider, reaction.emojiId]);
+  const handleMouseUp = useCallback(event => {
+    event.preventDefault();
+
+    if (utils.isLeftClick(event)) {
+      const {
+        reacted,
+        emojiId
+      } = reaction;
+      Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionClickedEvent, !reacted, emojiId);
+      onClick(reaction.emojiId, event);
+    }
+  }, [createAnalyticsEvent, reaction, onClick]);
+  const handleMouseEnter = useCallback(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/es2019/components/Reaction/index.js

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

package/dist/es2019/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
+ */
+
+const 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 const emojiStyle = css({
+  transformOrigin: 'center center 0',
+  lineHeight: '12px',
+  padding: '4px 4px 4px 8px'
+});
+export const reactionStyle = css({
+  outline: 'none',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  minWidth: '36px',
+  height: `${akHeight}px`,
+  background: 'transparent',
+  border: `1px solid ${token('color.border', N40)}`,
+  boxSizing: 'border-box',
+  borderRadius: '20px',
+  color: `${token('color.text.subtle', N400)}`,
+  cursor: 'pointer',
+  margin: 0,
+  padding: 0,
+  transition: '200ms ease-in-out',
+  '&:hover': {
+    background: `${token('color.background.neutral.subtle.hovered', N20)}`
+  }
+});
+export const reactedStyle = css({
+  backgroundColor: token('color.background.selected', B50),
+  borderColor: token('color.border.selected', B300),
+  '&:hover': {
+    background: `${token('color.background.selected.hovered', B75)}`
+  }
+});
+export const flashHeight = akHeight - 2; // height without the 1px border
+
+export const flashStyle = css({
+  display: 'flex',
+  flexDirection: 'row',
+  borderRadius: '10px',
+  height: `${flashHeight}px`
+});

package/dist/es2019/components/ReactionPicker/ReactionPicker.js

@@ -0,0 +1,208 @@
+/** @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 const RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
+const 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 const ReactionPicker = /*#__PURE__*/React.memo(props => {
+  const {
+    miniMode,
+    className,
+    emojiProvider,
+    onSelection,
+    allowAllEmojis,
+    disabled,
+    pickerQuickReactionEmojiIds,
+    onShowMore,
+    onOpen,
+    onCancel
+  } = props;
+  /**
+   * Container <div /> reference (used by custom hook to detect click outside)
+   */
+
+  const wrapperRef = useRef(null);
+  /**
+   * a function you can ask Popper to recompute your tooltip's position. It will directly call the Popper#update method
+   */
+
+  const updatePopper = useRef(() => Promise.resolve());
+  const [settings, setSettings] = 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
+  });
+  /**
+   * Custom hook triggers when user clicks outside the reactions picker
+   */
+
+  useClickAway(wrapperRef, () => {
+    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
+   */
+
+  const close = useCallback(_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
+   */
+
+  const onSelectMoreClick = useCallback(async e => {
+    e.preventDefault();
+    await updatePopper.current(); // Update popper position
+
+    setSettings({
+      isOpen: true,
+      showFullPicker: true
+    });
+
+    if (onShowMore) {
+      onShowMore();
+    }
+  }, [onShowMore]);
+  /**
+   * Event callback when an emoji icon is selected
+   * @param item selected item
+   */
+
+  const onEmojiSelected = useCallback(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
+   */
+
+  const 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();
+  };
+
+  const wrapperClassName = ` ${settings.isOpen ? 'isOpen' : ''} ${miniMode ? 'miniMode' : ''} ${className}`;
+  return jsx("div", {
+    className: wrapperClassName,
+    css: styles.pickerStyle,
+    ref: wrapperRef,
+    "data-testid": RENDER_REACTIONPICKER_TESTID
+  }, jsx(Manager, null, jsx(Reference, null, ({
+    ref: popperRef
+  }) => // 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
+  }, ({
+    ref,
+    style,
+    update
+  }) => {
+    updatePopper.current = update;
+    return jsx(Fragment, null, settings.isOpen && jsx("div", {
+      style: {
+        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/es2019/components/ReactionPicker/index.js

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

package/dist/es2019/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 const pickerStyle = css({
+  verticalAlign: 'middle',
+  '&.miniMode': {
+    display: 'inline-block',
+    marginRight: '4px'
+  }
+});
+export const contentStyle = css({
+  display: 'flex'
+});
+export 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}`),
+  '&> div': {
+    boxShadow: undefined
+  }
+});

package/dist/es2019/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 const RENDER_REACTIONTOOLTIP_TESTID = 'render-reactionTooltip';
+export const ReactionTooltip = ({
+  emojiName,
+  children,
+  maxReactions = constants.TOOLTIP_USERS_LIMIT,
+  reaction: {
+    users = []
+  }
+}) => {
+  /**
+   * Render list of users in the tooltip box
+   */
+  const 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((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/es2019/components/ReactionTooltip/index.js

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

package/dist/es2019/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 const verticalMargin = 5;
+export const 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 const emojiNameStyle = css({
+  textTransform: 'capitalize',
+  color: token('color.text.inverse', N90),
+  fontWeight: 600
+});
+export const footerStyle = css({
+  color: token('color.text.inverse', N90),
+  fontWeight: 300
+});

package/dist/es2019/components/Reactions/Reactions.js

@@ -0,0 +1,156 @@
+/** @jsx jsx */
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { jsx } from '@emotion/core';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import Tooltip from '@atlaskit/tooltip';
+import { FormattedMessage } from 'react-intl-next';
+import { Analytics } from '../../analytics';
+import { ReactionStatus } from '../../types';
+import { i18n } from '../../shared';
+import { Reaction } from '../Reaction';
+import { ReactionPicker } from '../ReactionPicker';
+import * as styles from './styles';
+
+/**
+ * Test id for wrapper Reactions div
+ */
+export const RENDER_REACTIONS_TESTID = 'render-reactions';
+/**
+ * Test id for the tooltip
+ */
+
+export const RENDER_TOOLTIP_TESTID = 'render-tooltip';
+
+/**
+ * Renders list of reactions
+ */
+export const Reactions = /*#__PURE__*/React.memo(({
+  flash = {},
+  status,
+  errorMessage,
+  loadReaction,
+  quickReactionEmojiIds,
+  containerAri,
+  ari,
+  pickerQuickReactionEmojiIds,
+  onReactionHover,
+  onSelection,
+  reactions = [],
+  emojiProvider,
+  allowAllEmojis,
+  onReactionClick
+}) => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  let openTime = useRef();
+  let renderTime = useRef();
+
+  if (status !== ReactionStatus.ready) {
+    renderTime.current = Date.now();
+  }
+
+  useEffect(() => {
+    if (status === ReactionStatus.notLoaded) {
+      loadReaction();
+    }
+  }, [status, loadReaction]);
+  useEffect(() => {
+    if (status === ReactionStatus.ready && renderTime.current) {
+      Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionsRenderedEvent, renderTime.current);
+      renderTime.current = undefined;
+    }
+  }, [createAnalyticsEvent, status]);
+  /**
+   * Get content of the tooltip
+   */
+
+  const getTooltip = () => {
+    switch (status) {
+      case ReactionStatus.error:
+        return errorMessage || jsx(FormattedMessage, i18n.messages.unexpectedError);
+
+      case ReactionStatus.loading:
+      case ReactionStatus.notLoaded:
+        return jsx(FormattedMessage, i18n.messages.loadingReactions);
+
+      default:
+        return undefined;
+    }
+  };
+
+  const handleReactionMouseEnter = summary => {
+    if (onReactionHover) {
+      onReactionHover(summary.emojiId);
+    }
+  };
+
+  const handlePickerOpen = useCallback(() => {
+    openTime.current = Date.now();
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createPickerButtonClickedEvent, reactions.length);
+  }, [createAnalyticsEvent, reactions]);
+  const handleOnCancel = useCallback(() => {
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createPickerCancelledEvent, openTime.current);
+    openTime.current = undefined;
+  }, [createAnalyticsEvent]);
+  const handleOnMore = useCallback(() => {
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createPickerMoreClickedEvent, openTime.current);
+  }, [createAnalyticsEvent]);
+  const handleOnSelection = useCallback((emojiId, source) => {
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionSelectionEvent, source, emojiId, reactions.find(reaction => reaction.emojiId === emojiId), openTime.current);
+    openTime.current = undefined;
+    onSelection(emojiId);
+  }, [createAnalyticsEvent, onSelection, reactions]);
+  /**
+   * Get the reactions that we want to render are any reactions with a count greater than zero as well as any default emoji not already shown
+   */
+
+  const memorizedReactions = useMemo(() => {
+    //
+
+    /**
+     * If reactions not empty, don't show quick reactions Pre defined emoji or if its empty => return the current list of reactions
+     */
+    if (reactions.length > 0 || !quickReactionEmojiIds) {
+      return reactions;
+    } // add any missing default reactions
+
+
+    const items = quickReactionEmojiIds.filter(emojiId => !reactions.some(reaction => reaction.emojiId === emojiId)).map(emojiId => {
+      return {
+        ari,
+        containerAri,
+        emojiId,
+        count: 0,
+        reacted: false
+      };
+    });
+    return reactions.concat(items);
+  }, [ari, containerAri, quickReactionEmojiIds, reactions]);
+  return jsx("div", {
+    css: styles.wrapperStyle,
+    "data-testid": RENDER_REACTIONS_TESTID
+  }, memorizedReactions.map(reaction => jsx(Reaction, {
+    key: reaction.emojiId,
+    css: styles.reactionStyle,
+    reaction: reaction,
+    emojiProvider: emojiProvider,
+    onClick: onReactionClick,
+    onMouseEnter: handleReactionMouseEnter,
+    flash: flash[reaction.emojiId]
+  })), jsx(Tooltip, {
+    testId: RENDER_TOOLTIP_TESTID,
+    content: getTooltip()
+  }, jsx(ReactionPicker, {
+    css: styles.reactionStyle,
+    emojiProvider: emojiProvider,
+    miniMode: true,
+    allowAllEmojis: allowAllEmojis,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    disabled: status !== ReactionStatus.ready,
+    onSelection: handleOnSelection,
+    onOpen: handlePickerOpen,
+    onCancel: handleOnCancel,
+    onShowMore: handleOnMore
+  })));
+});

package/dist/es2019/components/Reactions/index.js

@@ -0,0 +1 @@
+export { Reactions, RENDER_REACTIONS_TESTID, RENDER_TOOLTIP_TESTID } from './Reactions';

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

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { css } from '@emotion/core';
+export 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'
+});
+export const wrapperStyle = css({
+  display: 'flex',
+  flexWrap: 'wrap',
+  position: 'relative',
+  alignItems: 'center',
+  borderRadius: '15px',
+  // To allow to row spacing of 2px on wrap, and 0px on first row
+  marginTop: '-2px',
+  '> :first-of-type > :first-child': {
+    marginLeft: 0
+  }
+});