@atlaskit/reactions 21.6.2 → 21.7.0

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useIntl } from 'react-intl-next';
 import { jsx } from '@emotion/core';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji';
@@ -7,7 +8,7 @@ import { Analytics } from '../../analytics';
 import { Counter } from '../Counter';
 import { FlashAnimation } from '../FlashAnimation';
 import { ReactionTooltip } from '../ReactionTooltip';
-import { utils } from '../../shared';
+import { i18n, utils } from '../../shared';
 import * as styles from './styles';
 /**
  * Test id for Reaction item wrapper div
@@ -40,10 +41,7 @@ export const Reaction = ({
   useEffect(() => {
     (async () => {
       const emojiResource = await Promise.resolve(emojiProvider);
-      const foundEmoji = await emojiResource.findByEmojiId({
-        shortName: '',
-        id: reaction.emojiId
-      });
+      const foundEmoji = await emojiResource.findById(reaction.emojiId);
 
       if (foundEmoji) {
         setEmojiName(foundEmoji.name);
@@ -75,14 +73,18 @@ export const Reaction = ({
       onMouseEnter(reaction, event);
     }
   }, [createAnalyticsEvent, reaction, onMouseEnter]);
+  const intl = useIntl();
   return jsx(ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction
   }, jsx("button", {
     className: className,
     css: [styles.reactionStyle, reaction.reacted && styles.reactedStyle],
-    title: reaction.emojiId,
+    "aria-label": intl.formatMessage(i18n.messages.reactWithEmoji, {
+      emoji: emojiName
+    }),
     type: "button",
+    "data-emoji-id": reaction.emojiId,
     "data-testid": RENDER_REACTION_TESTID,
     onMouseUp: handleMouseUp,
     onMouseEnter: handleMouseEnter

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

@@ -1,12 +1,14 @@
 /** @jsx jsx */
-import React, { Fragment, useCallback, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/core';
+import { FormattedMessage } from 'react-intl-next';
 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 { i18n } from '../../shared';
 import { useClickAway } from '../../hooks';
 import * as styles from './styles';
 /**
@@ -56,7 +58,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     pickerQuickReactionEmojiIds,
     onShowMore,
     onOpen,
-    onCancel
+    onCancel,
+    tooltipContent = jsx(FormattedMessage, i18n.messages.addReaction)
   } = props;
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
@@ -67,7 +70,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
    * 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 updatePopper = useRef();
   const [settings, setSettings] = useState({
     /**
      * Show the picker floating panel
@@ -89,7 +92,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     }
 
     close();
-  });
+  }, 'click', true);
   /**
    * 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
@@ -114,10 +117,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
    * @param e event param
    */
 
-  const onSelectMoreClick = useCallback(async e => {
+  const onSelectMoreClick = useCallback(e => {
     e.preventDefault();
-    await updatePopper.current(); // Update popper position
-
     setSettings({
       isOpen: true,
       showFullPicker: true
@@ -160,7 +161,18 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
 
     UFO.PickerRender.success();
   };
+  /**
+   * When picker is opened, re-calculate the picker position
+   */
 
+
+  useEffect(() => {
+    if (settings.isOpen) {
+      if (updatePopper.current) {
+        updatePopper.current();
+      }
+    }
+  }, [settings]);
   const wrapperClassName = ` ${settings.isOpen ? 'isOpen' : ''} ${miniMode ? 'miniMode' : ''} ${className}`;
   return jsx("div", {
     className: wrapperClassName,
@@ -174,7 +186,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     ref: popperRef,
     onClick: onTriggerClick,
     miniMode: miniMode,
-    disabled: disabled
+    disabled: disabled,
+    tooltipContent: tooltipContent
   })), jsx(Popper, {
     placement: "bottom-start",
     modifiers: popperModifiers

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

@@ -18,6 +18,8 @@ export const popupStyle = css({
   borderRadius: `${borderRadius()}px`,
   boxShadow: token('elevation.shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
   '&> div': {
-    boxShadow: undefined
+    boxShadow: undefined,
+    marginTop: '4px',
+    marginBottom: '4px'
   }
 });

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

@@ -2,7 +2,6 @@
 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';
@@ -10,28 +9,42 @@ 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
+ * Get content of the tooltip
  */
+export function getTooltip(status, errorMessage) {
+  switch (status) {
+    case ReactionStatus.error:
+      return errorMessage || jsx(FormattedMessage, i18n.messages.unexpectedError);
+    // When reaction is not available don't show any tooltip (e.g. Archive page in Confluence)
+
+    case ReactionStatus.disabled:
+      return null;
 
-export const RENDER_TOOLTIP_TESTID = 'render-tooltip';
+    case ReactionStatus.notLoaded:
+    case ReactionStatus.loading:
+      return jsx(FormattedMessage, i18n.messages.loadingReactions);
 
+    case ReactionStatus.ready:
+      return jsx(FormattedMessage, i18n.messages.addReaction);
+  }
+}
 /**
  * Renders list of reactions
  */
+
 export const Reactions = /*#__PURE__*/React.memo(({
   flash = {},
   status,
   errorMessage,
   loadReaction,
-  quickReactionEmojiIds,
-  containerAri,
-  ari,
+  quickReactionEmojis,
   pickerQuickReactionEmojiIds,
   onReactionHover,
   onSelection,
@@ -61,23 +74,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
       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) {
@@ -111,12 +107,17 @@ export const Reactions = /*#__PURE__*/React.memo(({
     /**
      * 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) {
+    if (reactions.length > 0 || !quickReactionEmojis) {
       return reactions;
     } // add any missing default reactions
 
 
-    const items = quickReactionEmojiIds.filter(emojiId => !reactions.some(reaction => reaction.emojiId === emojiId)).map(emojiId => {
+    const {
+      ari,
+      containerAri,
+      emojiIds
+    } = quickReactionEmojis;
+    const items = emojiIds.filter(emojiId => !reactions.some(reaction => reaction.emojiId === emojiId)).map(emojiId => {
       return {
         ari,
         containerAri,
@@ -126,7 +127,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
       };
     });
     return reactions.concat(items);
-  }, [ari, containerAri, quickReactionEmojiIds, reactions]);
+  }, [quickReactionEmojis, reactions]);
   return jsx("div", {
     css: styles.wrapperStyle,
     "data-testid": RENDER_REACTIONS_TESTID
@@ -138,10 +139,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     onClick: onReactionClick,
     onMouseEnter: handleReactionMouseEnter,
     flash: flash[reaction.emojiId]
-  })), jsx(Tooltip, {
-    testId: RENDER_TOOLTIP_TESTID,
-    content: getTooltip()
-  }, jsx(ReactionPicker, {
+  })), jsx(ReactionPicker, {
     css: styles.reactionStyle,
     emojiProvider: emojiProvider,
     miniMode: true,
@@ -151,6 +149,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     onSelection: handleOnSelection,
     onOpen: handlePickerOpen,
     onCancel: handleOnCancel,
-    onShowMore: handleOnMore
-  })));
+    onShowMore: handleOnMore,
+    tooltipContent: getTooltip(status, errorMessage)
+  }));
 });

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

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

package/dist/es2019/components/ShowMore/ShowMore.js

@@ -32,7 +32,7 @@ export const ShowMore = ({
   }, jsx("button", {
     className: className.button,
     css: [styles.moreButtonStyle, buttonStyle],
-    title: i18n.messages.moreEmoji.defaultMessage,
+    "aria-label": i18n.messages.moreEmoji.defaultMessage,
     type: "button",
     style: style.button,
     onMouseDown: onClick,

package/dist/es2019/components/Trigger/Trigger.js

@@ -2,25 +2,37 @@
 import React from 'react';
 import { jsx } from '@emotion/core';
 import Button from '@atlaskit/button/standard-button';
+import Tooltip from '@atlaskit/tooltip';
 import EmojiAddIcon from '@atlaskit/icon/glyph/emoji-add';
 import * as styles from './styles';
+/**
+ * Test id for the tooltip
+ */
+
+export const RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
 
 /**
- * Render a button to open the reactions picker
+ * Render an emoji button to open the reactions select picker
  */
 export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
+    onClick,
     miniMode,
+    tooltipContent,
     disabled = false
   } = props;
 
   const handleMouseDown = (e, analyticsEvent) => {
-    if (props.onClick && !props.disabled) {
-      props.onClick(e, analyticsEvent);
+    if (onClick && !disabled) {
+      onClick(e, analyticsEvent);
     }
   };
 
-  return jsx(Button, {
+  return jsx(Tooltip, {
+    testId: RENDER_TOOLTIP_TRIGGER_TESTID,
+    content: tooltipContent,
+    position: "top"
+  }, jsx(Button, {
     css: styles.triggerStyle({
       miniMode,
       disabled
@@ -34,5 +46,5 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     }),
     spacing: "none",
     ref: ref
-  });
+  }));
 });

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

@@ -1 +1 @@
-export { Trigger } from './Trigger';
+export { Trigger, RENDER_TOOLTIP_TRIGGER_TESTID } from './Trigger';

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

@@ -1,24 +1,29 @@
 /** @jsx jsx */
 import { css } from '@emotion/core';
 import { token } from '@atlaskit/tokens';
-import { N70 } from '@atlaskit/theme/colors';
+import { N70, N20, N40 } from '@atlaskit/theme/colors';
 export const DISABLED_BUTTON_COLOR = `${token('color.text.disabled', N70)} !important`;
 export const triggerStyle = ({
   miniMode = false,
   disabled = false
 }) => css({
-  width: '32px',
+  minWidth: '32px',
   height: '32px',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   lineHeight: '16px',
   ...(miniMode && {
-    width: '24px',
-    height: '24px'
+    height: '24px',
+    padding: 0,
+    border: `1px solid ${token('color.border', N40)}`,
+    borderRadius: '20px'
   }),
   ...(disabled && {
     color: DISABLED_BUTTON_COLOR,
     cursor: 'not-allowed'
-  })
+  }),
+  '&:hover': {
+    background: `${token('color.background.neutral.subtle.hovered', N20)}`
+  }
 });

package/dist/es2019/hooks/useClickAway.js

@@ -4,9 +4,10 @@ import { useEffect } from 'react';
  * @param ref ref object to an html element
  * @param callback event callback when detected a click outside the ref object
  * @param type (Optional) type of event to listen to. @default click
+ * @param useCapture (Optional) use capture phase of event. @default false
  */
 
-export function useClickAway(ref, callback, type = 'click') {
+export function useClickAway(ref, callback, type = 'click', useCapture = false) {
   useEffect(() => {
     /**
      * Alert if clicked on outside of element
@@ -18,10 +19,10 @@ export function useClickAway(ref, callback, type = 'click') {
     } // Bind the event listener
 
 
-    document.addEventListener(type, handleClickOutside);
+    document.addEventListener(type, handleClickOutside, useCapture);
     return () => {
       // Unbind the event listener on clean up
-      document.removeEventListener(type, handleClickOutside);
+      document.removeEventListener(type, handleClickOutside, useCapture);
     };
-  }, [ref, callback, type]);
+  }, [ref, callback, type, useCapture]);
 }

package/dist/es2019/shared/i18n.js

@@ -1,5 +1,10 @@
 import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
+  addReaction: {
+    id: 'fabric.reactions.add',
+    defaultMessage: 'Add reaction',
+    description: 'Message for add reaction button'
+  },
   loadingReactions: {
     id: 'fabric.reactions.loading',
     defaultMessage: 'Loading...',
@@ -10,6 +15,11 @@ export const messages = defineMessages({
     defaultMessage: 'More emojis',
     description: 'Tooltip of the "show more" button in the quick reaction selector. The full emoji selector is displayed when the user clicks on it.'
   },
+  reactWithEmoji: {
+    id: 'fabric.reactions.reactwithemoji',
+    defaultMessage: 'React with {emoji} emoji',
+    description: 'Aria label on reaction button'
+  },
   unexpectedError: {
     id: 'fabric.reactions.error.unexpected',
     defaultMessage: 'Reactions are temporarily unavailable',

package/dist/es2019/types/reaction.js

@@ -6,6 +6,10 @@
  * MetaData for Reaction object
  */
 
+/**
+ * Metadata for composing a summary of emojis that will be shown in the the primary view even if the reaction count is zero
+ */
+
 /**
  * Event handler for when the user clicks on the reaction
  * @param id give id for the emoji
@@ -31,4 +35,5 @@ export let ReactionStatus;
   ReactionStatus["loading"] = "LOADING";
   ReactionStatus["error"] = "ERROR";
   ReactionStatus["notLoaded"] = "NOT_LOADED";
+  ReactionStatus["disabled"] = "DISABLED";
 })(ReactionStatus || (ReactionStatus = {}));

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.6.2"
+	"version": "21.7.0"
 }

package/dist/esm/MockReactionsClient.js

@@ -33,13 +33,11 @@ var getReactionKey = function getReactionKey(containerAri, ari) {
 };
 
 var defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon')];
-
-var mockData = _defineProperty({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 999, false), getReactionSummary(':astonished:', 9, false), getReactionSummary(':heart:', 99, false)]);
+export var mockData = _defineProperty({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 999, false), getReactionSummary(':astonished:', 9, false), getReactionSummary(':heart:', 99, false)]);
 /**
  * Mocked version of the client to fetch user information
  */
 
-
 export var MockReactionsClient = /*#__PURE__*/function () {
   function MockReactionsClient() {
     var _this = this;

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

@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import React from 'react';
+import { useIntl } from 'react-intl-next';
 import { jsx } from '@emotion/core';
 import { ResourcedEmoji } from '@atlaskit/emoji';
-import { utils } from '../../shared';
+import { i18n, utils } from '../../shared';
 import * as styles from './styles';
 export var RENDER_BUTTON_TESTID = 'button-emoji-id';
 
@@ -22,10 +23,13 @@ export var EmojiButton = function EmojiButton(_ref) {
     }
   };
 
+  var intl = useIntl();
   return jsx("button", {
     "data-testid": RENDER_BUTTON_TESTID,
     onClick: onButtonClick,
-    title: emojiId.shortName,
+    "aria-label": intl.formatMessage(i18n.messages.reactWithEmoji, {
+      emoji: emojiId.shortName
+    }),
     type: "button",
     css: styles.emojiButtonStyle
   }, jsx(ResourcedEmoji, {

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

@@ -4,6 +4,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useIntl } from 'react-intl-next';
 import { jsx } from '@emotion/core';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji';
@@ -11,7 +12,7 @@ import { Analytics } from '../../analytics';
 import { Counter } from '../Counter';
 import { FlashAnimation } from '../FlashAnimation';
 import { ReactionTooltip } from '../ReactionTooltip';
-import { utils } from '../../shared';
+import { i18n, utils } from '../../shared';
 import * as styles from './styles';
 /**
  * Test id for Reaction item wrapper div
@@ -59,10 +60,7 @@ export var Reaction = function Reaction(_ref) {
             case 2:
               emojiResource = _context.sent;
               _context.next = 5;
-              return emojiResource.findByEmojiId({
-                shortName: '',
-                id: reaction.emojiId
-              });
+              return emojiResource.findById(reaction.emojiId);
 
             case 5:
               foundEmoji = _context.sent;
@@ -102,14 +100,18 @@ export var Reaction = function Reaction(_ref) {
       onMouseEnter(reaction, event);
     }
   }, [createAnalyticsEvent, reaction, onMouseEnter]);
+  var intl = useIntl();
   return jsx(ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction
   }, jsx("button", {
     className: className,
     css: [styles.reactionStyle, reaction.reacted && styles.reactedStyle],
-    title: reaction.emojiId,
+    "aria-label": intl.formatMessage(i18n.messages.reactWithEmoji, {
+      emoji: emojiName
+    }),
     type: "button",
+    "data-emoji-id": reaction.emojiId,
     "data-testid": RENDER_REACTION_TESTID,
     onMouseUp: handleMouseUp,
     onMouseEnter: handleMouseEnter