@atlaskit/reactions 30.0.1 → 30.0.3

package/dist/es2019/components/compiled/EmojiButton.js

@@ -0,0 +1,40 @@
+/* EmojiButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiButton.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useIntl } from 'react-intl-next';
+import { ResourcedEmoji } from '@atlaskit/emoji';
+import { messages } from '../../shared/i18n';
+import { isLeftClick } from '../../shared/utils';
+import { Pressable } from '@atlaskit/primitives/compiled';
+const styles = {
+  emojiButton: "_12ji1r31 _1qu2glyw _12y31o36 _2rkoglpi _189eidpf _1e0c1txw _bfhksm61 _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _o7ksrkh3 _1llw1q5f"
+};
+export const RENDER_BUTTON_TESTID = 'button-emoji-id';
+/**
+ * custom button to render the custom emoji selector inside the reaction picker
+ */
+export const EmojiButton = ({
+  emojiId,
+  onClick,
+  emojiProvider
+}) => {
+  const onButtonClick = event => {
+    event.preventDefault();
+    if (onClick && isLeftClick(event)) {
+      onClick(emojiId, undefined, event);
+    }
+  };
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement(Pressable, {
+    testId: RENDER_BUTTON_TESTID,
+    onClick: onButtonClick,
+    "aria-label": intl.formatMessage(messages.reactWithEmoji, {
+      emoji: emojiId.shortName
+    }),
+    xcss: styles.emojiButton
+  }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: emojiId
+  }));
+};

package/dist/es2019/components/compiled/ReactionButton.compiled.css

@@ -4,15 +4,13 @@
 ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
 ._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqoglyw{border-style:none}
 ._1dqonqa1{border-style:solid}
 ._1h6d1yqz{border-color:var(--ds-border-selected,#0c66e4)}
-._1h6dmuej{border-color:var(--ds-border,#091e4224)}
-._1kl7glyw{border-left:none}
-._1s7zglyw{border-right:none}
-._n7zlglyw{border-bottom:none}
-._x3doglyw{border-top:none}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
 ._18m915vq{overflow-y:hidden}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
+._19pk12x7{margin-top:var(--ds-space-075,6px)}
 ._1e0c1txw{display:flex}
 ._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
 ._1reo15vq{overflow-x:hidden}
@@ -21,6 +19,7 @@
 ._4cvr1h6o{align-items:center}
 ._4cvr1y6m{align-items:flex-start}
 ._4t3i1tcg{height:24px}
+._4t3igktf{height:20px}
 ._4t3iqslr{height:22px}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}

package/dist/es2019/components/compiled/ReactionButton.js

@@ -10,9 +10,10 @@ import { Pressable } from '@atlaskit/primitives/compiled';
 const styles = {
   reactionButton: "_2rko14q2 _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _2lx2vrvc _4cvr1y6m _1ul914no _4t3i1tcg _bfhksm61 _syaz1gjq _1pfh1b66 _12l21b66 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _irr3166n _1di61dty",
   reactionStylesRefresh: "_2rkoglpi",
-  borderless: "_x3doglyw _1kl7glyw _1s7zglyw _n7zlglyw",
   reacted: "_1h6d1yqz _bfhkfg4m _irr3i1yw _1di619ru",
-  opaqueBackground: "_bfhkvuon _irr3108i _1di61ji5"
+  opaqueBackground: "_bfhkvuon _irr3108i _1di61ji5",
+  compactButton: "_4t3igktf _4cvr1h6o _19pk12x7",
+  borderless: "_1dqoglyw"
 };
 
 /**
@@ -28,6 +29,7 @@ export const ReactionButton = ({
   flash = false,
   showSubtleStyle,
   showOpaqueBackground,
+  useCompactStyles,
   reacted,
   ariaLabel,
   ariaPressed,
@@ -44,7 +46,7 @@ export const ReactionButton = ({
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,
     testId: testId,
-    xcss: cx(styles.reactionButton, reacted && styles.reacted, !reacted && showSubtleStyle && styles.borderless, !reacted && showOpaqueBackground && styles.opaqueBackground,
+    xcss: cx(styles.reactionButton, useCompactStyles && styles.compactButton, reacted && styles.reacted, !reacted && showSubtleStyle && styles.borderless, !reacted && showOpaqueBackground && styles.opaqueBackground,
     // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
     fg('platform-component-visual-refresh') && styles.reactionStylesRefresh)
   }, dataAttributes), /*#__PURE__*/React.createElement(FlashAnimation, {

package/dist/es2019/components/compiled/ReactionPicker.compiled.css

@@ -0,0 +1,11 @@
+
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}._16qs1kf5{box-shadow:var(--ds-shadow-overlay,0 4px 8px -2px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31))}
+._1bch1b66>div{margin-top:var(--ds-space-050,4px)}
+._1e0c1txw{display:flex}
+._1pra1o8l.miniMode{display:inline-block}
+._79pa1b66>div{margin-bottom:var(--ds-space-050,4px)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._s7n4nkob{vertical-align:middle}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}

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

@@ -0,0 +1,295 @@
+/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ReactionPicker.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useLayoutEffect, useRef, useState } from '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 { useCloseManager } from '../../hooks/useCloseManager';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { messages } from '../../shared/i18n';
+import { PickerRender } from '../../ufo';
+import { Selector } from './Selector';
+import { Trigger } from './Trigger';
+import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+const pickerStyle = null;
+const contentStyle = null;
+const popupWrapperStyle = null;
+const popupStyle = null;
+import { RepositionOnUpdate } from '../ReactionPicker/RepositionOnUpdate';
+
+/**
+ * Test id for wrapper ReactionPicker div
+ */
+export const RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
+
+/**
+ * Test id for ReactionPicker panel div
+ */
+export const RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
+
+/**
+ * Emoji Picker Controller Id for Accessibility Labels
+ */
+const PICKER_CONTROL_ID = 'emoji-picker';
+/**
+ * Picker component for adding reactions
+ */
+export const ReactionPicker = /*#__PURE__*/React.memo(props => {
+  const {
+    miniMode,
+    className,
+    emojiProvider,
+    onSelection,
+    allowAllEmojis,
+    disabled,
+    pickerQuickReactionEmojiIds,
+    onShowMore = () => {},
+    onOpen = () => {},
+    onCancel = () => {},
+    tooltipContent = /*#__PURE__*/React.createElement(FormattedMessage, messages.addReaction),
+    emojiPickerSize,
+    showOpaqueBackground = false,
+    subtleReactionsSummaryAndPicker = false,
+    showAddReactionText = false,
+    showRoundTrigger = false,
+    reactionPickerTriggerIcon,
+    reactionPickerPlacement,
+    reactionsPickerPreventOverflowOptions
+  } = props;
+  const [triggerRef, setTriggerRef] = useState(null);
+
+  /**
+   * Container <div /> reference (used by custom hook to detect click outside)
+   */
+  const wrapperRef = useRef(null);
+  const updatePopper = useRef();
+  const popperPlacement = showRoundTrigger ? 'left' : reactionPickerPlacement || 'bottom-start';
+  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,
+    ...(reactionsPickerPreventOverflowOptions && {
+      options: reactionsPickerPreventOverflowOptions
+    })
+  }];
+  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,
+    /**
+     * Use left placement for popper - using value based on showRoundTrigger for now since it needs the left placement
+     */
+    popperPlacement
+  });
+
+  /**
+   * Custom hook triggers when user clicks outside the reactions picker
+   */
+  useCloseManager(wrapperRef, callbackType => {
+    close();
+    onCancel();
+    if (triggerRef && callbackType === 'ESCAPE') {
+      requestAnimationFrame(() => triggerRef.focus());
+    }
+  }, 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({
+      ...settings,
+      isOpen: false
+    });
+    // ufo abort reaction experience
+    PickerRender.abort({
+      metadata: {
+        emojiId: _id,
+        source: 'ReactionPicker',
+        reason: 'close dialog'
+      }
+    });
+  }, [settings]);
+
+  /**
+   * Event handle rwhen selecting to show the custom emoji icons picker
+   * @param e event param
+   */
+  const onSelectMoreClick = useCallback(e => {
+    e.preventDefault();
+    setSettings({
+      isOpen: true,
+      showFullPicker: true,
+      popperPlacement
+    });
+    onShowMore();
+  }, [onShowMore, popperPlacement]);
+
+  /**
+   * 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
+    PickerRender.start();
+    setSettings({
+      isOpen: !settings.isOpen,
+      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
+      popperPlacement
+    });
+    onOpen();
+    // ufo reactions picker opened success
+    PickerRender.success();
+  };
+  const wrapperClassName = ` ${settings.isOpen ? 'isOpen' : ''} ${miniMode ? 'miniMode' : ''} ${className}`;
+  useLayoutEffect(() => {
+    var _updatePopper$current;
+    (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === void 0 ? void 0 : _updatePopper$current.call(updatePopper);
+  }, [settings]);
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_s7n4nkob _1pra1o8l", wrapperClassName]),
+    "data-testid": RENDER_REACTIONPICKER_TESTID,
+    ref: wrapperRef
+  }, /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, ({
+    ref
+  }) =>
+  /*#__PURE__*/
+  // Render a button to open the <Selector /> panel
+  React.createElement(Trigger, {
+    ariaAttributes: {
+      'aria-expanded': settings.isOpen,
+      'aria-controls': PICKER_CONTROL_ID
+    },
+    ref: node => {
+      if (node && settings.isOpen) {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else {
+          ref.current = node;
+        }
+        setTriggerRef(node);
+      }
+    },
+    isSelected: settings.isOpen,
+    onClick: onTriggerClick,
+    miniMode: miniMode,
+    disabled: disabled,
+    tooltipContent: settings.isOpen ? null : tooltipContent,
+    showOpaqueBackground: showOpaqueBackground,
+    showAddReactionText: showAddReactionText,
+    subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+    showRoundTrigger: showRoundTrigger,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon
+  })), settings.isOpen && /*#__PURE__*/React.createElement(PopperWrapper, {
+    settings: settings,
+    popperModifiers: popperModifiers
+  }, settings.showFullPicker ? /*#__PURE__*/React.createElement(EmojiPicker, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    size: emojiPickerSize
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw"])
+  }, /*#__PURE__*/React.createElement(Selector, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    showMore: allowAllEmojis,
+    onMoreClick: onSelectMoreClick,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
+  })))));
+});
+export const PopperWrapper = props => {
+  const {
+    settings,
+    children,
+    popperModifiers
+  } = props;
+  const [popupRef, setPopupRef] = useState(null);
+  /**
+   * add focus lock to popup
+   */
+  useFocusTrap({
+    initialFocusRef: null,
+    targetRef: popupRef
+  });
+  return /*#__PURE__*/React.createElement(Popper, {
+    placement: settings.popperPlacement,
+    modifiers: popperModifiers,
+    strategy: "absolute"
+  }, ({
+    ref,
+    style,
+    update
+  }) => {
+    return /*#__PURE__*/React.createElement("div", {
+      id: PICKER_CONTROL_ID,
+      "data-testid": RENDER_REACTIONPICKERPANEL_TESTID
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: {
+        zIndex: layers.layer(),
+        ...style
+      },
+      ref: node => {
+        if (node) {
+          if (typeof ref === 'function') {
+            ref(node);
+          } else {
+            ref.current = node;
+          }
+          setPopupRef(node);
+        }
+      },
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex: 0,
+      className: ax(["_nt751r31 _49pcglyw _1hvw1o36"])
+    }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
+      update: update,
+      settings: settings
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax(["_2rko1sit _bfhk1bhr _16qs1kf5 _1bch1b66 _79pa1b66"])
+    }, children)));
+  });
+};

package/dist/es2019/components/compiled/ReactionSummaryButton.compiled.css

@@ -0,0 +1,7 @@
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._8hrz1nam{transform-origin:center center 0}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._kqswh2mm{position:relative}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}

package/dist/es2019/components/compiled/ReactionSummaryButton.js

@@ -0,0 +1,88 @@
+/* ReactionSummaryButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ReactionSummaryButton.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef, useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { ResourcedEmoji } from '@atlaskit/emoji';
+import { messages } from '../../shared/i18n';
+import { Counter } from './Counter';
+import { ReactionButton } from './ReactionButton';
+import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
+import { cx } from '@compiled/react';
+const styles = {
+  emoji: "_8hrz1nam",
+  button: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc",
+  compactPadding: "_ca0qv77o",
+  container: "_kqswh2mm"
+};
+/**
+ * Test id for summary reaction wrapper button
+ */
+export const RENDER_SUMMARY_BUTTON_TESTID = 'reaction-summary-button';
+
+/**
+ * Test id for emojis displayed inside summary button. All emoji's in the summary button will have this test id
+ */
+export const RENDER_SUMMARY_EMOJI_TESTID = 'summary-emoji-display';
+
+// forwardRef is used here so that the parent popup component can properly interact with the button
+export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
+  emojiProvider,
+  reactions = [],
+  emojisToShow = 3,
+  onClick,
+  showOpaqueBackground = false,
+  subtleReactionsSummaryAndPicker = false,
+  useCompactStyles = false,
+  useButtonAlignmentStyling = false
+}, ref) => {
+  const intl = useIntl();
+
+  // Helper function to sort reactions by count and return top N
+  const getTopReactions = (reactions, topN) => {
+    return [...reactions].sort((a, b) => b.count - a.count).slice(0, topN);
+  };
+  const totalReactionsCount = useMemo(() => {
+    return reactions.reduce((accum, current) => {
+      return accum += (current === null || current === void 0 ? void 0 : current.count) || 0;
+    }, 0);
+  }, [reactions]);
+  const topReactions = useMemo(() => getTopReactions(reactions, emojisToShow), [emojisToShow, reactions]);
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.container,
+    ref: ref,
+    alignItems: "center",
+    justifyContent: "center"
+  }, /*#__PURE__*/React.createElement(ReactionButton, {
+    onClick: onClick,
+    testId: RENDER_SUMMARY_BUTTON_TESTID,
+    ariaLabel: intl.formatMessage(messages.summary),
+    useCompactStyles: useCompactStyles,
+    showSubtleStyle: subtleReactionsSummaryAndPicker,
+    showOpaqueBackground: showOpaqueBackground
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "space.050",
+    xcss: cx(styles.button, useCompactStyles && styles.compactPadding),
+    testId: "reaction-summary-wrapper"
+  }, topReactions.map(reaction => /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.emoji,
+    testId: RENDER_SUMMARY_EMOJI_TESTID,
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/use-tokens-typography
+      lineHeight: '12px'
+    }
+  }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
+    key: reaction.emojiId,
+    emojiProvider: emojiProvider,
+    emojiId: {
+      id: reaction.emojiId,
+      shortName: ''
+    },
+    fitToHeight: useCompactStyles ? 12 : 16
+  })))), /*#__PURE__*/React.createElement(Counter, {
+    value: totalReactionsCount,
+    useDarkerFont: useCompactStyles || useButtonAlignmentStyling,
+    useUpdatedStyles: !useCompactStyles && useButtonAlignmentStyling
+  })));
+});

package/dist/es2019/components/compiled/ReactionSummaryView.compiled.css

@@ -0,0 +1,5 @@
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._p12foiq5{max-width:325px}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/es2019/components/compiled/ReactionSummaryView.js

@@ -0,0 +1,87 @@
+/* ReactionSummaryView.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./ReactionSummaryView.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useState } from 'react';
+import Popup from '@atlaskit/popup';
+import { Reaction } from './Reaction';
+import { ReactionSummaryViewEmojiPicker } from '../ReactionSummary/ReactionSummaryViewEmojiPicker';
+import { ReactionSummaryButton } from './ReactionSummaryButton';
+import { Inline } from '@atlaskit/primitives/compiled';
+const styles = {
+  summaryPopup: "_ca0q1b66 _u5f3u2gc _n3tdu2gc _19bvu2gc _p12foiq5"
+};
+
+/**
+ * Test id for the Reactions summary view popup
+ */
+export const RENDER_SUMMARY_VIEW_POPUP_TESTID = 'render-summary-view-popup';
+export const ReactionSummaryView = ({
+  emojiProvider,
+  reactions = [],
+  flash = {},
+  particleEffectByEmoji = {},
+  placement = 'auto-start',
+  onReactionClick,
+  onReactionFocused,
+  onReactionMouseEnter,
+  showOpaqueBackground = false,
+  subtleReactionsSummaryAndPicker = false,
+  allowUserDialog,
+  handleOpenReactionsDialog,
+  isViewOnly = false,
+  allowSelectFromSummaryView,
+  disabled,
+  emojiPickerSize,
+  onSelection,
+  tooltipContent,
+  reactionPickerTriggerIcon,
+  onOpen,
+  useButtonAlignmentStyling
+}) => {
+  const [isSummaryPopupOpen, setSummaryPopupOpen] = useState(false);
+  const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), []);
+  const handleSummaryClick = useCallback(() => setSummaryPopupOpen(!isSummaryPopupOpen), [isSummaryPopupOpen]);
+  return /*#__PURE__*/React.createElement(Popup, {
+    placement: placement,
+    content: () => /*#__PURE__*/React.createElement(Inline, {
+      xcss: styles.summaryPopup,
+      testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
+      space: "space.025",
+      shouldWrap: true,
+      alignBlock: "center"
+    }, reactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
+      key: reaction.emojiId,
+      reaction: reaction,
+      emojiProvider: emojiProvider,
+      onClick: onReactionClick,
+      onFocused: onReactionFocused,
+      onMouseEnter: onReactionMouseEnter,
+      flash: flash[reaction.emojiId],
+      showParticleEffect: particleEffectByEmoji[reaction.emojiId],
+      allowUserDialog: allowUserDialog,
+      handleOpenReactionsDialog: handleOpenReactionsDialog,
+      isViewOnly: isViewOnly
+    })), allowSelectFromSummaryView && /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
+      emojiProvider: emojiProvider,
+      disabled: disabled,
+      onSelection: onSelection,
+      emojiPickerSize: emojiPickerSize,
+      tooltipContent: tooltipContent,
+      reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+      onOpen: onOpen
+    })),
+    isOpen: isSummaryPopupOpen,
+    onClose: handlePopupClose,
+    trigger: triggerProps => /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {
+      emojiProvider: emojiProvider,
+      reactions: reactions,
+      onClick: handleSummaryClick,
+      showOpaqueBackground: showOpaqueBackground,
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+      useCompactStyles: allowSelectFromSummaryView,
+      useButtonAlignmentStyling: useButtonAlignmentStyling
+    }))
+  });
+};

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

@@ -14,8 +14,8 @@ import { ReactionStatus } from '../../types';
 import { ReactionDialogOpened, ReactionDialogSelectedReactionChanged } from '../../ufo';
 import { Reaction } from './Reaction';
 import { ReactionsDialog } from './ReactionsDialog';
-import { ReactionPicker } from '../ReactionPicker';
-import { ReactionSummaryView } from '../ReactionSummary/';
+import { ReactionPicker } from './ReactionPicker';
+import { ReactionSummaryView } from './ReactionSummaryView';
 const wrapperStyle = null;
 const noFlexWrapStyles = null;
 const noContainerPositionStyles = null;
@@ -108,7 +108,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
   allowSelectFromSummaryView = false,
   useButtonAlignmentStyling = false
 }) => {
-  const [selectedEmojiId, setSelectedEmojiId] = useState();
+  const [selectedEmojiId, setSelectedEmojiId] = useState('');
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();

package/dist/es2019/components/compiled/Selector.compiled.css

@@ -0,0 +1,14 @@
+
+._y44v8out{animation:k12q5x3s .15s ease-in-out forwards}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1e0c1o8l{display:inline-block}
+._1p3lnqa1{border-left-style:solid}
+._4t3i1tcg{height:24px}
+._5wramuej{border-left-color:var(--ds-border,#091e4224)}
+._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._t6vde4h9{border-left-width:var(--ds-border-width,1px)}
+._tzy4idpf{opacity:0}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+@keyframes k12q5x3s{0%{opacity:1;transform:scale(.5)}75%{transform:scale(1.25)}to{opacity:1;transform:scale(1)}}