@atlaskit/reactions 30.0.1 → 30.0.2

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

@@ -0,0 +1,316 @@
+/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./ReactionPicker.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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';
+var pickerStyle = null;
+var contentStyle = null;
+var popupWrapperStyle = null;
+var popupStyle = null;
+import { RepositionOnUpdate } from '../ReactionPicker/RepositionOnUpdate';
+
+/**
+ * Test id for wrapper ReactionPicker div
+ */
+export var RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
+
+/**
+ * Test id for ReactionPicker panel div
+ */
+export var RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
+
+/**
+ * Emoji Picker Controller Id for Accessibility Labels
+ */
+var PICKER_CONTROL_ID = 'emoji-picker';
+/**
+ * Picker component for adding reactions
+ */
+export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
+  var miniMode = props.miniMode,
+    className = props.className,
+    emojiProvider = props.emojiProvider,
+    onSelection = props.onSelection,
+    allowAllEmojis = props.allowAllEmojis,
+    disabled = props.disabled,
+    pickerQuickReactionEmojiIds = props.pickerQuickReactionEmojiIds,
+    _props$onShowMore = props.onShowMore,
+    onShowMore = _props$onShowMore === void 0 ? function () {} : _props$onShowMore,
+    _props$onOpen = props.onOpen,
+    onOpen = _props$onOpen === void 0 ? function () {} : _props$onOpen,
+    _props$onCancel = props.onCancel,
+    onCancel = _props$onCancel === void 0 ? function () {} : _props$onCancel,
+    _props$tooltipContent = props.tooltipContent,
+    tooltipContent = _props$tooltipContent === void 0 ? /*#__PURE__*/React.createElement(FormattedMessage, messages.addReaction) : _props$tooltipContent,
+    emojiPickerSize = props.emojiPickerSize,
+    _props$showOpaqueBack = props.showOpaqueBackground,
+    showOpaqueBackground = _props$showOpaqueBack === void 0 ? false : _props$showOpaqueBack,
+    _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
+    _props$showAddReactio = props.showAddReactionText,
+    showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
+    _props$showRoundTrigg = props.showRoundTrigger,
+    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
+    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
+    reactionPickerPlacement = props.reactionPickerPlacement,
+    reactionsPickerPreventOverflowOptions = props.reactionsPickerPreventOverflowOptions;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    triggerRef = _useState2[0],
+    setTriggerRef = _useState2[1];
+
+  /**
+   * Container <div /> reference (used by custom hook to detect click outside)
+   */
+  var wrapperRef = useRef(null);
+  var updatePopper = useRef();
+  var popperPlacement = showRoundTrigger ? 'left' : reactionPickerPlacement || 'bottom-start';
+  var 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'
+    }
+  }, _objectSpread({
+    name: 'preventOverflow',
+    enabled: true
+  }, reactionsPickerPreventOverflowOptions && {
+    options: reactionsPickerPreventOverflowOptions
+  })];
+  var _useState3 = 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: popperPlacement
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    settings = _useState4[0],
+    setSettings = _useState4[1];
+
+  /**
+   * Custom hook triggers when user clicks outside the reactions picker
+   */
+  useCloseManager(wrapperRef, function (callbackType) {
+    close();
+    onCancel();
+    if (triggerRef && callbackType === 'ESCAPE') {
+      requestAnimationFrame(function () {
+        return 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
+   */
+  var close = useCallback(function (_id) {
+    setSettings(_objectSpread(_objectSpread({}, 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
+   */
+  var onSelectMoreClick = useCallback(function (e) {
+    e.preventDefault();
+    setSettings({
+      isOpen: true,
+      showFullPicker: true,
+      popperPlacement: popperPlacement
+    });
+    onShowMore();
+  }, [onShowMore, popperPlacement]);
+
+  /**
+   * Event callback when an emoji icon is selected
+   * @param item selected item
+   */
+  var onEmojiSelected = useCallback(function (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
+   */
+  var onTriggerClick = function onTriggerClick() {
+    // ufo start reactions picker open experience
+    PickerRender.start();
+    setSettings({
+      isOpen: !settings.isOpen,
+      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
+      popperPlacement: popperPlacement
+    });
+    onOpen();
+    // ufo reactions picker opened success
+    PickerRender.success();
+  };
+  var wrapperClassName = " ".concat(settings.isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
+  useLayoutEffect(function () {
+    var _updatePopper$current;
+    (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === 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, function (_ref) {
+    var _ref2 = _ref.ref;
+    return (
+      /*#__PURE__*/
+      // Render a button to open the <Selector /> panel
+      React.createElement(Trigger, {
+        ariaAttributes: {
+          'aria-expanded': settings.isOpen,
+          'aria-controls': PICKER_CONTROL_ID
+        },
+        ref: function ref(node) {
+          if (node && settings.isOpen) {
+            if (typeof _ref2 === 'function') {
+              _ref2(node);
+            } else {
+              _ref2.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 var PopperWrapper = function PopperWrapper(props) {
+  var settings = props.settings,
+    children = props.children,
+    popperModifiers = props.popperModifiers;
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    popupRef = _useState6[0],
+    setPopupRef = _useState6[1];
+  /**
+   * add focus lock to popup
+   */
+  useFocusTrap({
+    initialFocusRef: null,
+    targetRef: popupRef
+  });
+  return /*#__PURE__*/React.createElement(Popper, {
+    placement: settings.popperPlacement,
+    modifiers: popperModifiers,
+    strategy: "absolute"
+  }, function (_ref3) {
+    var _ref4 = _ref3.ref,
+      style = _ref3.style,
+      update = _ref3.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: _objectSpread({
+        zIndex: layers.layer()
+      }, style),
+      ref: function ref(node) {
+        if (node) {
+          if (typeof _ref4 === 'function') {
+            _ref4(node);
+          } else {
+            _ref4.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 _bfhk13b4 _16qs1a23 _1bch1b66 _79pa1b66"]),
+      style: {
+        "--_1f6rtr1": ix("var(--ds-surface-overlay, ".concat(N0, ")")),
+        "--_3t1odq": ix("var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"))
+      }
+    }, children)));
+  });
+};

package/dist/esm/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/esm/components/compiled/ReactionSummaryButton.js

@@ -0,0 +1,100 @@
+/* ReactionSummaryButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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';
+var styles = {
+  emoji: "_8hrz1nam",
+  button: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc",
+  compactPadding: "_ca0qv77o",
+  container: "_kqswh2mm"
+};
+/**
+ * Test id for summary reaction wrapper button
+ */
+export var 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 var RENDER_SUMMARY_EMOJI_TESTID = 'summary-emoji-display';
+
+// forwardRef is used here so that the parent popup component can properly interact with the button
+export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var emojiProvider = _ref.emojiProvider,
+    _ref$reactions = _ref.reactions,
+    reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
+    _ref$emojisToShow = _ref.emojisToShow,
+    emojisToShow = _ref$emojisToShow === void 0 ? 3 : _ref$emojisToShow,
+    onClick = _ref.onClick,
+    _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
+    _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
+    _ref$useCompactStyles = _ref.useCompactStyles,
+    useCompactStyles = _ref$useCompactStyles === void 0 ? false : _ref$useCompactStyles,
+    _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
+    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme;
+  var intl = useIntl();
+
+  // Helper function to sort reactions by count and return top N
+  var getTopReactions = function getTopReactions(reactions, topN) {
+    return _toConsumableArray(reactions).sort(function (a, b) {
+      return b.count - a.count;
+    }).slice(0, topN);
+  };
+  var totalReactionsCount = useMemo(function () {
+    return reactions.reduce(function (accum, current) {
+      return accum += (current === null || current === void 0 ? void 0 : current.count) || 0;
+    }, 0);
+  }, [reactions]);
+  var topReactions = useMemo(function () {
+    return 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(function (reaction) {
+    return /*#__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/esm/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/esm/components/compiled/ReactionSummaryView.js

@@ -0,0 +1,107 @@
+/* ReactionSummaryView.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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';
+var styles = {
+  summaryPopup: "_ca0q1b66 _u5f3u2gc _n3tdu2gc _19bvu2gc _p12foiq5"
+};
+
+/**
+ * Test id for the Reactions summary view popup
+ */
+export var RENDER_SUMMARY_VIEW_POPUP_TESTID = 'render-summary-view-popup';
+export var ReactionSummaryView = function ReactionSummaryView(_ref) {
+  var emojiProvider = _ref.emojiProvider,
+    _ref$reactions = _ref.reactions,
+    reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
+    _ref$flash = _ref.flash,
+    flash = _ref$flash === void 0 ? {} : _ref$flash,
+    _ref$particleEffectBy = _ref.particleEffectByEmoji,
+    particleEffectByEmoji = _ref$particleEffectBy === void 0 ? {} : _ref$particleEffectBy,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'auto-start' : _ref$placement,
+    onReactionClick = _ref.onReactionClick,
+    onReactionFocused = _ref.onReactionFocused,
+    onReactionMouseEnter = _ref.onReactionMouseEnter,
+    _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
+    _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
+    allowUserDialog = _ref.allowUserDialog,
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
+    _ref$isViewOnly = _ref.isViewOnly,
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
+    allowSelectFromSummaryView = _ref.allowSelectFromSummaryView,
+    disabled = _ref.disabled,
+    emojiPickerSize = _ref.emojiPickerSize,
+    onSelection = _ref.onSelection,
+    tooltipContent = _ref.tooltipContent,
+    reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
+    onOpen = _ref.onOpen,
+    useButtonAlignmentStyling = _ref.useButtonAlignmentStyling;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSummaryPopupOpen = _useState2[0],
+    setSummaryPopupOpen = _useState2[1];
+  var handlePopupClose = useCallback(function () {
+    return setSummaryPopupOpen(false);
+  }, []);
+  var handleSummaryClick = useCallback(function () {
+    return setSummaryPopupOpen(!isSummaryPopupOpen);
+  }, [isSummaryPopupOpen]);
+  return /*#__PURE__*/React.createElement(Popup, {
+    placement: placement,
+    content: function content() {
+      return /*#__PURE__*/React.createElement(Inline, {
+        xcss: styles.summaryPopup,
+        testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
+        space: "space.025",
+        shouldWrap: true,
+        alignBlock: "center"
+      }, reactions.map(function (reaction) {
+        return /*#__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: function trigger(triggerProps) {
+      return /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {
+        emojiProvider: emojiProvider,
+        reactions: reactions,
+        onClick: handleSummaryClick,
+        showOpaqueBackground: showOpaqueBackground,
+        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+        useCompactStyles: allowSelectFromSummaryView,
+        useButtonAlignmentStyling: useButtonAlignmentStyling
+      }));
+    }
+  });
+};

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

@@ -16,8 +16,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';
 var wrapperStyle = null;
 var noFlexWrapStyles = null;
 var noContainerPositionStyles = null;
@@ -131,7 +131,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     allowSelectFromSummaryView = _ref$allowSelectFromS === void 0 ? false : _ref$allowSelectFromS,
     _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
     useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme;
-  var _useState = useState(),
+  var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
     setSelectedEmojiId = _useState2[1];

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

@@ -0,0 +1,13 @@
+
+._y44vlcmg{animation:var(--_1m4wxxu)}._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)}

package/dist/esm/components/compiled/Selector.js

@@ -0,0 +1,71 @@
+/* Selector.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./Selector.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment } from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { DefaultReactions } from '../../shared/constants';
+import { EmojiButton } from './EmojiButton';
+import { ShowMore } from '../ShowMore';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
+var styles = {
+  container: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
+  separator: "_t6vde4h9 _5wramuej _1p3lnqa1 _ahbq1b66 _12l2u2gc _4t3i1tcg _1e0c1o8l"
+};
+var revealAnimation = null;
+var revealStyle = null;
+
+/**
+ * Test id for wrapper Selector div
+ */
+export var RENDER_SELECTOR_TESTID = 'render-selector';
+var Reveal = function Reveal(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax(["_y44vlcmg _tzy4idpf"]),
+    style: {
+      "--_1m4wxxu": ix("".concat(revealAnimation, " 150ms ease-in-out forwards"))
+    }
+  }, children);
+};
+
+/**
+ * Reactions picker panel part of the <ReactionPicker /> component
+ */
+export var Selector = function Selector(_ref2) {
+  var emojiProvider = _ref2.emojiProvider,
+    onMoreClick = _ref2.onMoreClick,
+    onSelection = _ref2.onSelection,
+    showMore = _ref2.showMore,
+    _ref2$pickerQuickReac = _ref2.pickerQuickReactionEmojiIds,
+    pickerQuickReactionEmojiIds = _ref2$pickerQuickReac === void 0 ? DefaultReactions : _ref2$pickerQuickReac;
+  /**
+   * Render the default emoji icon
+   * @param emoji emoji item
+   * @param index location of the emoji in the array
+   */
+  var renderEmoji = function renderEmoji(emoji, index) {
+    var _emoji$id;
+    return /*#__PURE__*/React.createElement(Reveal, {
+      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
+      testId: RENDER_SELECTOR_TESTID
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      content: emoji.shortName
+    }, /*#__PURE__*/React.createElement(EmojiButton, {
+      emojiId: emoji,
+      emojiProvider: emojiProvider,
+      onClick: onSelection
+    })));
+  };
+  return /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    xcss: styles.container
+  }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.separator
+  }), /*#__PURE__*/React.createElement(Reveal, null, /*#__PURE__*/React.createElement(ShowMore, {
+    key: "more",
+    onClick: onMoreClick
+  }))) : null);
+};

package/dist/esm/components/compiled/StaticReaction.compiled.css

@@ -10,8 +10,10 @@
 ._2lx2vrvc{flex-direction:row}
 ._4cvr1y6m{align-items:flex-start}
 ._4t3i1tcg{height:24px}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
-._d0al73ad:hover{cursor:default}
+._d0al73ad:hover{cursor:default}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}