@atlaskit/reactions 22.2.0 → 22.2.2

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

@@ -5,13 +5,12 @@ import { constants } from '../../shared';
 const REACTIONS_CONTAINER_WIDTH = 48;
 const REACTION_RIGHT_MARGIN = 8;
 /* we want to display around 9 reactions and show 10th one as faded so removing 2px from REACTIONS_CONTAINER_WIDTH*/
-
 const CONTAINER_WIDTH = constants.NUMBER_OF_REACTIONS_TO_DISPLAY * (REACTIONS_CONTAINER_WIDTH + REACTION_RIGHT_MARGIN) + REACTIONS_CONTAINER_WIDTH - 2;
 const REACTION_CONTAINER_HEIGHT = 48;
+
 /*Reactions Container. Using pseudo Element :after to set border since with onClick of Reaction to higlight the
 border blue below the reaction. Setting Border Width based on number of reactions to make sure it shows up
 in case the container overflows */
-
 export const containerStyle = reactionsBorderWidth => css({
   overflow: 'hidden',
   maxWidth: `${CONTAINER_WIDTH}px`,
@@ -54,7 +53,6 @@ export const counterStyle = isSelected => css({
     color: isSelected ? `${`var(--ds-text, ${B400})`}!important` : `2px solid ${`var(--ds-text, ${N500})`}!important`
   }
 });
-
 const fadedCss = (edge, theme) => css({
   content: '""',
   position: 'absolute',
@@ -63,9 +61,8 @@ const fadedCss = (edge, theme) => css({
   width: `${REACTIONS_CONTAINER_WIDTH}px`,
   height: `${REACTION_CONTAINER_HEIGHT}px`,
   zIndex: 0,
-  background: theme === 'dark' || theme === 'legacy-dark' ? `linear-gradient(${containerEdgeAngle[edge]}deg, rgba(34, 39, 43, 0.95) 40.23%, rgba(34, 39, 43, 0.55) 58.33%, rgba(34, 39, 43, 0) 77.49%)` : `linear-gradient(${containerEdgeAngle[edge]}deg, rgba(255, 255, 255, 0.95) 40.23%, rgba(255, 255, 255, 0.55) 58.33%, rgba(255, 255, 255, 0) 77.49%)`
+  background: theme === 'dark' ? `linear-gradient(${containerEdgeAngle[edge]}deg, rgba(34, 39, 43, 0.95) 40.23%, rgba(34, 39, 43, 0.55) 58.33%, rgba(34, 39, 43, 0) 77.49%)` : `linear-gradient(${containerEdgeAngle[edge]}deg, rgba(255, 255, 255, 0.95) 40.23%, rgba(255, 255, 255, 0.55) 58.33%, rgba(255, 255, 255, 0) 77.49%)`
 });
-
 export const customTabWrapper = (isSelected, selectedEmojiId, theme) => css({
   flexShrink: 0,
   display: 'flex',

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

@@ -11,15 +11,15 @@ import { UFO } from '../../analytics';
 import { i18n } from '../../shared';
 import { useClickAway } from '../../hooks';
 import * as styles from './styles';
+
 /**
  * Test id for wrapper ReactionPicker div
  */
-
 export const RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
+
 /**
  * Emoji Picker Controller Id for Accessibility Labels
  */
-
 const PICKER_CONTROL_ID = 'emoji-picker';
 const popperModifiers = [
 /**
@@ -48,7 +48,6 @@ https://popper.js.org/docs/v1/#modifiers..applyStyle
   name: 'preventOverflow',
   enabled: true
 }];
-
 /**
  * Picker component for adding reactions
  */
@@ -70,43 +69,40 @@ export const ReactionPicker = /*#__PURE__*/React.memo(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();
   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, () => {
     onCancel();
     close();
   }, 'click', true, settings.isOpen);
+
   /**
    * 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 abort reaction experience
     UFO.PickerRender.abort({
       metadata: {
         emojiId: _id,
@@ -115,11 +111,11 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
       }
     });
   }, [allowAllEmojis, pickerQuickReactionEmojiIds]);
+
   /**
    * Event handle rwhen selecting to show the custom emoji icons picker
    * @param e event param
    */
-
   const onSelectMoreClick = useCallback(e => {
     e.preventDefault();
     setSettings({
@@ -128,24 +124,23 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     });
     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();
@@ -153,15 +148,14 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
       isOpen: !settings.isOpen,
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
     });
-    onOpen(); // ufo reactions picker opened success
-
+    onOpen();
+    // ufo reactions picker opened success
     UFO.PickerRender.success();
   };
+
   /**
    * When picker is opened, re-calculate the picker position
    */
-
-
   useEffect(() => {
     if (settings.isOpen) {
       if (updatePopper.current) {
@@ -177,7 +171,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     ref: wrapperRef
   }, jsx(Manager, null, jsx(Reference, null, ({
     ref: popperRef
-  }) => // Render a button to open the <Selector /> panel
+  }) =>
+  // Render a button to open the <Selector /> panel
   jsx(Trigger, {
     ariaAttributes: {
       'aria-expanded': settings.isOpen,

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
@@ -7,10 +6,10 @@ 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 = ({
   children,

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

@@ -13,37 +13,33 @@ import { Reaction } from '../Reaction';
 import { ReactionsDialog } from '../ReactionDialog';
 import { ReactionPicker } from '../ReactionPicker';
 import * as styles from './styles';
+
 /**
  * Set of all available UFO experiences relating to reactions dialog
  */
-
 export const ufoExperiences = {
   /**
    * Expeirence when a reaction dialog is opened
    */
   openDialog: UFO.ReactionDialogOpened,
-
   /**
    * Experience when a reaction dialog is closed
    */
   closeDialog: UFO.ReactionDialogClosed,
-
   /**
    * Experience when a reaction changed/fetched from inside the modal dialog
    */
   selectedReactionChangeInsideDialog: UFO.ReactionDialogSelectedReactionChanged
 };
+
 /**
  * Test id for wrapper Reactions div
  */
-
 export const RENDER_REACTIONS_TESTID = 'render-reactions';
 /**
  * Test id for the view all reacted user to trigger the dialog
  */
-
 export const RENDER_VIEWALL_REACTED_USERS_DIALOG = 'viewall-reacted-users-dialog';
-
 /**
  * Get content of the tooltip
  */
@@ -52,22 +48,19 @@ export function getTooltip(status, errorMessage) {
     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;
-
     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,
@@ -105,7 +98,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
       renderTime.current = Date.now();
     } else {
       var _renderTime$current;
-
       Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionsRenderedEvent, (_renderTime$current = renderTime.current) !== null && _renderTime$current !== void 0 ? _renderTime$current : Date.now() //renderTime.current can be null during unit test cases
       );
       renderTime.current = undefined;
@@ -134,17 +126,18 @@ export const Reactions = /*#__PURE__*/React.memo(({
     openTime.current = undefined;
     onSelection(emojiId);
   }, [createAnalyticsEvent, onSelection, reactions]);
+
   /**
    * event handler to open selected reaction from tooltip
    * @param emojiId selected emoji id
    */
-
   const handleOpenReactionsDialog = emojiId => {
     // ufo start opening reaction dialog
     ufoExperiences.openDialog.start();
     setSelectedEmojiId(emojiId);
-    onDialogOpenCallback(emojiId, 'tooltip'); // ufo opening reaction dialog success
+    onDialogOpenCallback(emojiId, 'tooltip');
 
+    // ufo opening reaction dialog success
     ufoExperiences.openDialog.success({
       metadata: {
         emojiId: emojiId,
@@ -153,19 +146,19 @@ export const Reactions = /*#__PURE__*/React.memo(({
       }
     });
   };
+
   /**
    * Event handler to oepn all reactions link button
    */
-
-
   const handleOpenAllReactionsDialog = () => {
     // ufo start opening reaction dialog
     ufoExperiences.openDialog.start();
     const emojiId = reactions[0].emojiId;
     getReactionDetails(emojiId);
     setSelectedEmojiId(emojiId);
-    onDialogOpenCallback(emojiId, 'button'); // ufo opening reaction dialog success
+    onDialogOpenCallback(emojiId, 'button');
 
+    // ufo opening reaction dialog success
     ufoExperiences.openDialog.success({
       metadata: {
         emojiId: emojiId,
@@ -174,13 +167,13 @@ export const Reactions = /*#__PURE__*/React.memo(({
       }
     });
   };
-
   const handleCloseReactionsDialog = (e, analyticsEvent) => {
     // ufo closing opening reaction dialog
     ufoExperiences.closeDialog.start();
     setSelectedEmojiId('');
-    onDialogCloseCallback(e, analyticsEvent); // ufo closing reaction dialog success
+    onDialogCloseCallback(e, analyticsEvent);
 
+    // ufo closing reaction dialog success
     ufoExperiences.closeDialog.success({
       metadata: {
         source: 'Reactions',
@@ -188,13 +181,13 @@ export const Reactions = /*#__PURE__*/React.memo(({
       }
     });
   };
-
   const handleSelectReactionInDialog = (emojiId, analyticsEvent) => {
     // ufo selected reaction inside the modal dialog
     ufoExperiences.selectedReactionChangeInsideDialog.start();
     handleReactionMouseEnter(emojiId);
-    onDialogSelectReactionCallback(emojiId, analyticsEvent); // ufo selected reaction inside the modal dialog success
+    onDialogSelectReactionCallback(emojiId, analyticsEvent);
 
+    // ufo selected reaction inside the modal dialog success
     ufoExperiences.selectedReactionChangeInsideDialog.success({
       metadata: {
         emojiId: emojiId,
@@ -203,22 +196,20 @@ export const Reactions = /*#__PURE__*/React.memo(({
       }
     });
   };
+
   /**
    * 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 || !quickReactionEmojis) {
       return reactions;
-    } // add any missing default reactions
-
+    }
 
+    // add any missing default reactions
     const {
       ari,
       containerAri,

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

@@ -6,12 +6,11 @@ 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
  */
@@ -26,50 +25,46 @@ export const Selector = ({
   /**
    * 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,
@@ -84,7 +79,6 @@ export const Selector = ({
       onClick: onSelected
     })));
   };
-
   return jsx("div", {
     css: styles.selectorStyle
   }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? jsx(ShowMore, {

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

@@ -29,11 +29,11 @@ export const revealAnimation = keyframes({
 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

@@ -6,13 +6,12 @@ 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';
 export const RENDER_WRAPPER_TESTID = 'show-more-wrapper';
-
 /**
  * Show more custom emojis button
  */

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
@@ -7,12 +6,11 @@ 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 an emoji button to open the reactions select picker
  */
@@ -24,13 +22,11 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     disabled = false,
     ariaAttributes = {}
   } = props;
-
   const handleMouseDown = (e, analyticsEvent) => {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
     }
   };
-
   return jsx(Tooltip, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
     content: tooltipContent

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

@@ -1,5 +1,4 @@
 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
  */
@@ -19,9 +18,7 @@ export class UfoErrorBoundary extends React.Component {
       });
     }
   }
-
   render() {
     return this.props.children;
   }
-
 }

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

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { ReactionPicker, UfoErrorBoundary } from '../../components';
 import { UFO } from '../../analytics';
-
 /**
  * Reaction Picker component
  */
@@ -16,15 +15,12 @@ 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(store);
-
       _store.addReaction(containerAri, ari, emojiId);
     })();
   };
-
   return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
     experiences: [UFO.PickerRender]
   }, /*#__PURE__*/React.createElement(ReactionPicker, _extends({}, props, {

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

@@ -5,20 +5,17 @@ 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
  */
 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 {
@@ -26,13 +23,11 @@ export const mapStateToPropsHelper = (containerAri, ari, state) => {
         status: reactionsState.status,
         flash: state.flash[`${containerAri}|${ari}`]
       };
-
     case ReactionStatus.error:
       return {
         status: ReactionStatus.error,
         reactions: []
       };
-
     default:
       return {
         status: ReactionStatus.loading,
@@ -40,10 +35,10 @@ export const mapStateToPropsHelper = (containerAri, ari, state) => {
       };
   }
 };
+
 /**
  * Export the mapper function outside the component so easier to do unit tests
  */
-
 export const mapDispatchToPropsHelper = (actions, containerAri, ari) => {
   return {
     loadReaction: () => {
@@ -70,22 +65,21 @@ export const ConnectedReactionsView = props => {
   /**
    * Reference to the <Reactions /> component instance mandatory props
    */
-
   const [stateData, setStateData] = useState();
-  const [dispatchData, setDispatchData] = useState(); // compose a UFO experience object
-
+  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
+  }, [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: 'ConnectedReactionsView',
@@ -96,58 +90,52 @@ export const ConnectedReactionsView = props => {
       });
     };
   }, [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);
       })();
     };