@atlaskit/reactions 21.6.2 → 21.8.0

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

@@ -1,13 +1,14 @@
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { useIntl } from 'react-intl-next';
+import { jsx } from '@emotion/react';
 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 { 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/Reaction/styles.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { B50, B75, B300, N20, N40, N400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 /**

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

@@ -1,12 +1,14 @@
 /** @jsx jsx */
-import React, { Fragment, useCallback, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { jsx } from '@emotion/react';
+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';
 /**
@@ -14,6 +16,11 @@ import * as styles from './styles';
  */
 
 export const RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
+/**
+ * Emoji Picker Controller Id for Accessibility Labels
+ */
+
+const PICKER_CONTROL_ID = 'emoji-picker';
 const popperModifiers = [
 /**
  Removing this applyStyle modifier as it throws client errors ref:
@@ -56,7 +63,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 +75,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 +97,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
@@ -104,7 +112,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     UFO.PickerRender.abort({
       metadata: {
         emojiId: _id,
-        source: 'Reaction-Picker',
+        source: 'ReactionPicker',
         reason: 'close dialog'
       }
     });
@@ -114,10 +122,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 +166,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,
@@ -171,10 +188,15 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     ref: popperRef
   }) => // Render a button to open the <Selector /> panel
   jsx(Trigger, {
+    ariaAttributes: {
+      'aria-expanded': settings.isOpen,
+      'aria-controls': PICKER_CONTROL_ID
+    },
     ref: popperRef,
     onClick: onTriggerClick,
     miniMode: miniMode,
-    disabled: disabled
+    disabled: disabled,
+    tooltipContent: tooltipContent
   })), jsx(Popper, {
     placement: "bottom-start",
     modifiers: popperModifiers
@@ -185,6 +207,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
   }) => {
     updatePopper.current = update;
     return jsx(Fragment, null, settings.isOpen && jsx("div", {
+      id: PICKER_CONTROL_ID,
       style: {
         zIndex: layers.layer(),
         ...style

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
@@ -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/ReactionTooltip/ReactionTooltip.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { FormattedMessage } from 'react-intl-next';
 import { constants, i18n } from '../../shared';
@@ -41,6 +41,6 @@ export const ReactionTooltip = ({
   return jsx(Tooltip, {
     content: content,
     position: "bottom",
-    "data-testid": RENDER_REACTIONTOOLTIP_TESTID
+    testId: RENDER_REACTIONTOOLTIP_TESTID
   }, React.Children.only(children));
 };

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
 import { N90 } from '@atlaskit/theme/colors';
 export const verticalMargin = 5;

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

@@ -1,8 +1,7 @@
 /** @jsx jsx */
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 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/Reactions/styles.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 export const reactionStyle = css({
   display: 'inline-block',
   // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)

package/dist/es2019/components/Selector/Selector.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React, { useEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { constants } from '../../shared';
 import { EmojiButton } from '../EmojiButton';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, keyframes } from '@emotion/core';
+import { css, keyframes } from '@emotion/react';
 export const selectorStyle = css({
   boxSizing: 'border-box',
   display: 'flex',

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import Tooltip from '@atlaskit/tooltip';
@@ -11,6 +11,7 @@ import * as styles from './styles';
  */
 
 export const RENDER_SHOWMORE_TESTID = 'show-more-button';
+export const RENDER_WRAPPER_TESTID = 'show-more-wrapper';
 
 /**
  * Show more custom emojis button
@@ -24,7 +25,8 @@ export const ShowMore = ({
   return jsx("div", {
     className: className.container,
     css: styles.moreEmojiContainerStyle,
-    style: style.container
+    style: style.container,
+    "data-testid": RENDER_WRAPPER_TESTID
   }, jsx("div", {
     css: styles.separatorStyle
   }), jsx(FormattedMessage, i18n.messages.moreEmoji, message => jsx(Tooltip, {
@@ -32,7 +34,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/ShowMore/index.js

@@ -1 +1 @@
-export { ShowMore, RENDER_SHOWMORE_TESTID } from './ShowMore';
+export { ShowMore, RENDER_SHOWMORE_TESTID, RENDER_WRAPPER_TESTID } from './ShowMore';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30A } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';

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

@@ -1,26 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 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,
-    disabled = false
+    tooltipContent,
+    disabled = false,
+    ariaAttributes = {}
   } = 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, _extends({
     css: styles.triggerStyle({
       miniMode,
       disabled
@@ -34,5 +49,5 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     }),
     spacing: "none",
     ref: ref
-  });
+  }, ariaAttributes)));
 });

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 { css } from '@emotion/react';
 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/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -7,7 +7,7 @@ import { ufoExperiences } from '../../store';
 import { ReactionStatus } from '../../types';
 
 /**
- * Export the mapper function outside the component so easier to do unit tests migration from Enzyme to React Testing Library
+ * Export the mapper function outside the component so easier to do unit tests
  */
 export const mapStateToPropsHelper = (containerAri, ari, state) => {
   const reactionsState = state && state.reactions[`${containerAri}|${ari}`];
@@ -41,7 +41,7 @@ export const mapStateToPropsHelper = (containerAri, ari, state) => {
   }
 };
 /**
- * Export the mapper function outside the component so easier to do unit tests migration from Enzyme to React Testing Library
+ * Export the mapper function outside the component so easier to do unit tests
  */
 
 export const mapDispatchToPropsHelper = (actions, containerAri, ari) => {
@@ -87,11 +87,9 @@ export const ConnectedReactionsView = props => {
 
       (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort({
         metadata: {
-          source: 'Connected-Reactions-View',
-          data: {
-            ari,
-            containerAri
-          },
+          source: 'ConnectedReactionsView',
+          ari,
+          containerAri,
           reason: 'unmount'
         }
       });

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/constants.js

@@ -20,6 +20,16 @@ export const DefaultReactions = [{
   id: '1f914',
   shortName: ':thinking:'
 }];
+/**
+ * Default label to show for the overLimitLabel prop
+ */
+
+export const DEFAULT_OVER_THE_LIMIT_REACTION_LABEL = '1k+';
+/**
+ * Default maximum value to use when the emoji received higher than top limit reactions
+ */
+
+export const DEFAULT_REACTION_TOP_LIMIT = 1000;
 /**
  * ES6 Map object from default emoji reactions (with key => shortName, value => entire emoji item)
  */

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',