@atlaskit/reactions 21.5.1 → 21.6.1

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

@@ -0,0 +1,98 @@
+/** @jsx jsx */
+import React, { useEffect, useRef, useState } from 'react';
+import { jsx } from '@emotion/core';
+import Tooltip from '@atlaskit/tooltip';
+import { constants } from '../../shared';
+import { EmojiButton } from '../EmojiButton';
+import { ShowMore } from '../ShowMore';
+import * as styles from './styles';
+/**
+ * Test id for wrapper Selector div
+ */
+
+export const RENDER_SELECTOR_TESTID = 'render-selector';
+
+/**
+ * Reactions picker panel part of the <ReactionPicker /> component
+ */
+export const Selector = ({
+  emojiProvider,
+  onMoreClick,
+  onSelection,
+  showMore,
+  pickerQuickReactionEmojiIds = constants.DefaultReactions
+}) => {
+  const [selection, setSelection] = useState();
+  /**
+   * Collection of global DOM timeout ids when user selects emojis for animation display
+   */
+
+  const timeoutIds = useRef([]);
+  /**
+   * Clear the timeouts for the selected emojis when the component unmounts
+   */
+
+  useEffect(() => {
+    const timeoutValues = timeoutIds.current;
+    return function cleanup() {
+      timeoutValues.forEach(clearTimeout);
+    };
+  }, []);
+  /**
+   * event handler when an emoji gets selected
+   * @param item selected emoji
+   * @param description depth detail of the selected emoji
+   * @param event Dom event data
+   */
+
+  const onSelected = (item, description, event) => {
+    timeoutIds.current.push(window.setTimeout(() => {
+      onSelection(item, description, event);
+    }, 250));
+    setSelection(item);
+  };
+  /**
+   * custom css styling for the emoji icon
+   * @param index location of the emoji in the rendered list of items
+   */
+
+
+  const emojiStyleAnimation = index => ({
+    animationDelay: `${index * 50}ms`
+  });
+  /**
+   * Render the default emoji icon
+   * @param emoji emoji item
+   * @param index location of the emoji in the array
+   */
+
+
+  const renderEmoji = (emoji, index) => {
+    var _emoji$id;
+
+    return jsx("div", {
+      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
+      className: emoji === selection ? 'selected' : undefined,
+      css: [styles.emojiStyle, styles.revealStyle],
+      style: emojiStyleAnimation(index),
+      "data-testid": RENDER_SELECTOR_TESTID
+    }, jsx(Tooltip, {
+      content: emoji.shortName
+    }, jsx(EmojiButton, {
+      emojiId: emoji,
+      emojiProvider: emojiProvider,
+      onClick: onSelected
+    })));
+  };
+
+  return jsx("div", {
+    css: styles.selectorStyle
+  }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? jsx(ShowMore, {
+    key: "more",
+    buttonStyle: styles.revealStyle,
+    style: {
+      button: emojiStyleAnimation(constants.DefaultReactions.length)
+    },
+    onClick: onMoreClick
+  }) : null);
+};

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

@@ -0,0 +1,3 @@
+export { Selector, RENDER_SELECTOR_TESTID } from './Selector';
+import * as _styles from './styles';
+export { _styles as styles };

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

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+import { css, keyframes } from '@emotion/core';
+export const selectorStyle = css({
+  boxSizing: 'border-box',
+  display: 'flex',
+  padding: 0
+});
+export const emojiStyle = css({
+  display: 'inline-block',
+  opacity: 0,
+  '&.selected': {
+    transition: 'transform 200ms ease-in-out  ',
+    transform: 'translateY(-48px) scale(2.667)'
+  }
+});
+export const revealAnimation = keyframes({
+  '0%': {
+    opacity: 1,
+    transform: 'scale(0.5)'
+  },
+  '75%': {
+    transform: 'scale(1.25)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'scale(1)'
+  }
+});
+export const revealStyle = css({
+  animation: `${revealAnimation} 150ms ease-in-out forwards`
+});
+/**
+ * custom css styling for the emoji icon
+ * @param index location of the emoji in the rendered list of items
+ */
+
+export const emojiStyleAnimation = index => ({
+  animationDelay: `${index * 50}ms`
+});

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

@@ -0,0 +1,43 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/core';
+import { FormattedMessage } from 'react-intl-next';
+import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
+import Tooltip from '@atlaskit/tooltip';
+import { i18n } from '../../shared';
+import * as styles from './styles';
+/**
+ * Test id for wrapper button
+ */
+
+export const RENDER_SHOWMORE_TESTID = 'show-more-button';
+
+/**
+ * Show more custom emojis button
+ */
+export const ShowMore = ({
+  onClick,
+  style = {},
+  className = {},
+  buttonStyle
+}) => {
+  return jsx("div", {
+    className: className.container,
+    css: styles.moreEmojiContainerStyle,
+    style: style.container
+  }, jsx("div", {
+    css: styles.separatorStyle
+  }), jsx(FormattedMessage, i18n.messages.moreEmoji, message => jsx(Tooltip, {
+    content: message
+  }, jsx("button", {
+    className: className.button,
+    css: [styles.moreButtonStyle, buttonStyle],
+    title: i18n.messages.moreEmoji.defaultMessage,
+    type: "button",
+    style: style.button,
+    onMouseDown: onClick,
+    "data-testid": RENDER_SHOWMORE_TESTID
+  }, jsx(EditorMoreIcon, {
+    label: "More"
+  })))));
+};

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

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

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

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import { css } from '@emotion/core';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { N30A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+export const moreEmojiContainerStyle = css({
+  display: 'flex'
+});
+export const moreButtonStyle = css({
+  opacity: 0,
+  outline: 'none',
+  backgroundColor: 'transparent',
+  border: 0,
+  borderRadius: `${borderRadius()}px`,
+  cursor: 'pointer',
+  margin: '4px 4px 4px 0',
+  padding: '4px',
+  width: '38px',
+  verticalAlign: 'top',
+  '&:hover': {
+    backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
+  }
+});
+export const separatorStyle = css({
+  backgroundColor: token('color.border', N30A),
+  margin: '8px 8px 8px 4px',
+  width: '1px',
+  height: '60%',
+  display: 'inline-block'
+});

package/dist/es2019/components/{Trigger.js → Trigger/Trigger.js}

@@ -1,38 +1,33 @@
 /** @jsx jsx */
-import { jsx, css } from '@emotion/core';
+import React from 'react';
+import { jsx } from '@emotion/core';
 import Button from '@atlaskit/button/standard-button';
 import EmojiAddIcon from '@atlaskit/icon/glyph/emoji-add';
-import React from 'react';
-const triggerStyle = css({
-  width: '32px',
-  height: '32px',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  lineHeight: '16px',
-  '&.miniMode': {
-    width: '24px',
-    height: '24px'
-  }
-});
+import * as styles from './styles';
+
+/**
+ * Render a button to open the reactions picker
+ */
 export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     miniMode,
     disabled = false
   } = props;
 
-  const handleMouseDown = () => {
-    if (props.onClick) {
-      props.onClick();
+  const handleMouseDown = (e, analyticsEvent) => {
+    if (props.onClick && !props.disabled) {
+      props.onClick(e, analyticsEvent);
     }
   };
 
   return jsx(Button, {
-    className: miniMode ? 'miniMode' : '',
-    css: triggerStyle,
+    css: styles.triggerStyle({
+      miniMode,
+      disabled
+    }),
     appearance: "subtle",
     onClick: handleMouseDown,
-    isDisabled: disabled,
+    "aria-disabled": disabled,
     iconBefore: jsx(EmojiAddIcon, {
       size: "small",
       label: "Add reaction"

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

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

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

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { css } from '@emotion/core';
+import { token } from '@atlaskit/tokens';
+import { N70 } 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',
+  height: '32px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  lineHeight: '16px',
+  ...(miniMode && {
+    width: '24px',
+    height: '24px'
+  }),
+  ...(disabled && {
+    color: DISABLED_BUTTON_COLOR,
+    cursor: 'not-allowed'
+  })
+});

package/dist/es2019/components/{UfoErrorBoundary.js → UfoErrorBoundary/UfoErrorBoundary.js}

@@ -1,4 +1,8 @@
 import React from 'react';
+
+/**
+ * Error boundary wrapper to notify "failure" for UFO events of components when there was a re-rendering exception caught inside the `componentDidCatch` event handler
+ */
 export class UfoErrorBoundary extends React.Component {
   componentDidCatch(error, errorInfo) {
     for (const exp of this.props.experiences) {

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

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

package/dist/es2019/containers/ConnectedReactionPicker/ConnectedReactionPicker.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ReactionPicker, UfoErrorBoundary } from '../../components';
+import { UFO } from '../../analytics';
+
+/**
+ * Reaction Picker component
+ */
+export const ConnectedReactionPicker = props => {
+  /**
+   * callback event when an emoji item is selected
+   * @param emojiId unique id for the reaction emoji
+   */
+  const onSelection = emojiId => {
+    (async () => {
+      const _store = await Promise.resolve(props.store);
+
+      _store.addReaction(props.containerAri, props.ari, emojiId);
+    })();
+  };
+
+  return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+    experiences: [UFO.PickerRender]
+  }, /*#__PURE__*/React.createElement(ReactionPicker, _extends({}, props, {
+    onSelection: onSelection
+  })));
+};

package/dist/es2019/containers/ConnectedReactionPicker/index.js

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

package/dist/es2019/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -0,0 +1,166 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { Reactions, UfoErrorBoundary } from '../../components';
+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 const mapStateToPropsHelper = (containerAri, ari, state) => {
+  const reactionsState = state && state.reactions[`${containerAri}|${ari}`];
+
+  if (!state || !reactionsState) {
+    return {
+      status: ReactionStatus.notLoaded,
+      reactions: []
+    };
+  }
+
+  switch (reactionsState.status) {
+    case ReactionStatus.ready:
+      return {
+        reactions: reactionsState.reactions,
+        status: reactionsState.status,
+        flash: state.flash[`${containerAri}|${ari}`]
+      };
+
+    case ReactionStatus.error:
+      return {
+        status: ReactionStatus.error,
+        reactions: []
+      };
+
+    default:
+      return {
+        status: ReactionStatus.loading,
+        reactions: []
+      };
+  }
+};
+/**
+ * Export the mapper function outside the component so easier to do unit tests migration from Enzyme to React Testing Library
+ */
+
+export const mapDispatchToPropsHelper = (actions, containerAri, ari) => {
+  return {
+    loadReaction: () => {
+      actions.getReactions(containerAri, ari);
+    },
+    onReactionClick: emojiId => {
+      actions.toggleReaction(containerAri, ari, emojiId);
+    },
+    onReactionHover: emojiId => {
+      actions.getDetailedReaction(containerAri, ari, emojiId);
+    },
+    onSelection: emojiId => {
+      actions.addReaction(containerAri, ari, emojiId);
+    }
+  };
+};
+export const ConnectedReactionsView = props => {
+  const {
+    ari,
+    containerAri,
+    store
+  } = props;
+  /**
+   * Reference to the <Reactions /> component instance mandatory props
+   */
+
+  const [stateData, setStateData] = useState();
+  const [dispatchData, setDispatchData] = useState(); // compose a UFO experience object
+
+  const experienceInstance = useRef();
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  useEffect(() => {
+    experienceInstance.current = ufoExperiences.render(ari);
+  }, [ari]); // abort when component gets unmounted
+
+  useEffect(() => {
+    return function cleanup() {
+      var _experienceInstance$c;
+
+      (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort({
+        metadata: {
+          source: 'Connected-Reactions-View',
+          data: {
+            ari,
+            containerAri
+          },
+          reason: 'unmount'
+        }
+      });
+    };
+  }, [experienceInstance, containerAri, ari]);
+  /**
+   * Maps the store instance "reactions" data to the <Reactions /> component state data
+   * @param state store instance latest data
+   */
+
+  const mapStateToProps = useCallback(state => {
+    return mapStateToPropsHelper(containerAri, ari, state);
+  }, [containerAri, ari]);
+  /**
+   * Map the store instance "actions" methods to the <Reactions /> component actions methods
+   * @param actions list of actions in the store instance
+   */
+
+  const mapDispatchToProps = useCallback(actions => {
+    return mapDispatchToPropsHelper(actions, containerAri, ari);
+  }, [ari, containerAri]);
+  useEffect(() => {
+    (async () => {
+      const _store = await Promise.resolve(store);
+
+      if (_store.setCreateAnalyticsEvent && createAnalyticsEvent) {
+        _store.setCreateAnalyticsEvent(createAnalyticsEvent);
+      }
+
+      const state = mapStateToProps(_store.getState());
+      const dispatch = mapDispatchToProps(_store);
+      setStateData(state);
+      setDispatchData(dispatch);
+    })();
+  }, [createAnalyticsEvent, store, ari, containerAri, mapStateToProps, mapDispatchToProps]);
+  /**
+   * Listen to changes on the store data.
+   * TODO: Needs to be refactored inside the MemoryReactionsStore to different pattern, currently it relies on internal callbacks variable to trigger changes to the store.
+   * The flow that each action method triggers a call to "setState" => "triggerOnChange" => calls the callback function registered by the onChange method and de-register by the "removeOnChangeListener" method
+   */
+
+  useEffect(() => {
+    const onChangeCallback = state => {
+      const stateProps = mapStateToProps(state);
+      setStateData(stateProps);
+    };
+
+    (async () => {
+      const _store = await Promise.resolve(store);
+
+      _store.onChange(onChangeCallback);
+    })();
+
+    return function cleanup() {
+      (async () => {
+        const _store = await Promise.resolve(store);
+
+        _store.removeOnChangeListener(onChangeCallback);
+      })();
+    };
+  }, [mapStateToProps, store]);
+  return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+    data: {
+      containerAri,
+      ari
+    }
+  }, /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+    experiences: experienceInstance.current ? [experienceInstance.current] : []
+  }, stateData && dispatchData ? /*#__PURE__*/React.createElement(Reactions, _extends({
+    key: `${props.containerAri}|${props.ari}`
+  }, props, dispatchData, stateData)) : null));
+};

package/dist/es2019/containers/ConnectedReactionsView/index.js

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

package/dist/es2019/containers/index.js

@@ -1,2 +1,2 @@
-export { ConnectedReactionPicker } from './ConnectedReactionPicker';
-export { ConnectedReactionsView } from './ConnectedReactionsView';
+export * from './ConnectedReactionPicker';
+export * from './ConnectedReactionsView';

package/dist/es2019/hooks/index.js

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

package/dist/es2019/hooks/useClickAway.js

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+/**
+ * Custom hook to detect when user action is outside given container ref
+ * @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
+ */
+
+export function useClickAway(ref, callback, type = 'click') {
+  useEffect(() => {
+    /**
+     * Alert if clicked on outside of element
+     */
+    function handleClickOutside(event) {
+      if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) {
+        callback();
+      }
+    } // Bind the event listener
+
+
+    document.addEventListener(type, handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener(type, handleClickOutside);
+    };
+  }, [ref, callback, type]);
+}

package/dist/es2019/index.js

@@ -1,5 +1,7 @@
 export { UFO } from './analytics';
-export { ReactionServiceClient } from './client';
+export { ReactionServiceClient } from './client'; // TODO: Convert all calls for ReactionRequest to Request, RequestClient to Client and ReactionsStore to Store
+
+export { constants } from './shared';
 export { Reaction, ReactionPicker, Reactions } from './components';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
 export { MemoryReactionsStore, ReactionConsumer } from './store';

package/dist/es2019/shared/constants.js

@@ -1,4 +1,32 @@
-// site id for jdog.jira-dev.com
-export const demoCloudId = `49d8b9d6-ee7d-4931-a0ca-7fcae7d1c3b5`;
-export const AriPrefix = `ari:cloud:test:${demoCloudId}:item/`;
-export const ContainerAriPrefix = `ari:cloud:test:${demoCloudId}:container/`;
+/**
+ * Initial list of emoji to pick from
+ */
+export const DefaultReactions = [{
+  id: '1f44d',
+  shortName: ':thumbsup:'
+}, {
+  id: '1f44f',
+  shortName: ':clap:'
+}, {
+  id: '1f525',
+  shortName: ':fire:'
+}, {
+  id: '2764',
+  shortName: ':heart:'
+}, {
+  id: '1f632',
+  shortName: ':astonished:'
+}, {
+  id: '1f914',
+  shortName: ':thinking:'
+}];
+/**
+ * ES6 Map object from default emoji reactions (with key => shortName, value => entire emoji item)
+ */
+
+export const DefaultReactionsByShortName = new Map(DefaultReactions.map(reaction => [reaction.shortName, reaction]));
+/**
+ * Maximum number of users to show in the tooltip for an emoji reaction
+ */
+
+export const TOOLTIP_USERS_LIMIT = 5;

package/dist/es2019/{components → shared}/i18n.js

@@ -12,7 +12,7 @@ export const messages = defineMessages({
   },
   unexpectedError: {
     id: 'fabric.reactions.error.unexpected',
-    defaultMessage: 'Something went wrong',
+    defaultMessage: 'Reactions are temporarily unavailable',
     description: 'Unexpected error message'
   },
   otherUsers: {

package/dist/es2019/shared/index.js

@@ -1,2 +1,6 @@
-import * as _Constants from './constants';
-export { _Constants as Constants };
+import * as _constants from './constants';
+export { _constants as constants };
+import * as _utils from './utils';
+export { _utils as utils };
+import * as _i18n from './i18n';
+export { _i18n as i18n };

package/dist/es2019/shared/utils.js

@@ -0,0 +1,35 @@
+import { DefaultReactions } from './constants';
+/**
+ * Is selected mouse event a left click
+ * @param event event data
+ */
+
+export const isLeftClick = event => event.button === 0 && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+/**
+ * Does provided item part of the default emoji ids
+ * @param item selected emoji item
+ */
+
+export const isDefaultReaction = item => DefaultReactions.some(otherEmojiId => isEqualEmojiId(otherEmojiId, item));
+/**
+ * compare 2 emoji items if they are same input
+ * @param a first emoji item
+ * @param b second emoji item
+ */
+
+const isEqualEmojiId = (a, b) => {
+  if (isEmojiId(a) && isEmojiId(b)) {
+    return a === b || a && b && a.id === b.id && a.shortName === b.shortName;
+  } else {
+    return a === b;
+  }
+};
+/**
+ * Type guard if provided object is a string id or an object info collection for the emoji
+ * @param item given item
+ */
+
+
+const isEmojiId = item => {
+  return item.id !== undefined;
+};