@atlaskit/reactions 30.0.0 → 30.0.2

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

@@ -0,0 +1,90 @@
+/* Trigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./Trigger.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import { defineMessages, useIntl } from 'react-intl-next';
+import Tooltip from '@atlaskit/tooltip';
+import EmojiAddIcon from '@atlaskit/icon/core/migration/emoji-add';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import { cx } from '@compiled/react';
+import React from 'react';
+const styles = {
+  trigger: "_2rko14q2 _189ee4h9 _1dqonqa1 _1ul9zwfg _4t3i1tcg _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _1e0c1txw _1bah1h6o _4cvr1h6o",
+  subtleTrigger: "_1dqoglyw _1ul91tcg",
+  expandedTrigger: "_1ul9146b",
+  triggerStylesRefresh: "_2rkoglpi",
+  roundTrigger: "_2rko14q2 _4t3iviql _1bsbviql",
+  transparentEnabledTrigger: "_1h6dmuej _bfhksm61 _irr3166n _1di61dty",
+  opaqueEnabledTrigger: "_1h6dmuej _bfhkvuon _irr3108i _1di61ji5",
+  disabledTrigger: "_1h6d13gt _bfhksyzs",
+  miniMode: "_2rkoglpi _1dqoglyw _1ul91tcg _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
+};
+
+/**
+ * Test id for the tooltip
+ */
+export const RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
+export const RENDER_TRIGGER_BUTTON_TESTID = 'render-trigger-button';
+const i18n = defineMessages({
+  addReaction: {
+    id: 'reaction-picker-trigger.add.reaction.message',
+    description: 'Message displayed when there are no page reactions existing on the page.',
+    defaultMessage: 'Add a reaction'
+  }
+});
+const addReactionStyles = {
+  addReactionMessage: "_11c8dcr7 _syaz1gjq _18u01b66"
+};
+
+/**
+ * Render an emoji button to open the reactions select picker
+ */
+export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    onClick,
+    miniMode,
+    tooltipContent,
+    disabled = false,
+    ariaAttributes = {},
+    showOpaqueBackground = false,
+    showAddReactionText = false,
+    subtleReactionsSummaryAndPicker = false,
+    showRoundTrigger = false,
+    reactionPickerTriggerIcon
+  } = props;
+  const handleMouseDown = (e, analyticsEvent) => {
+    if (onClick && !disabled) {
+      onClick(e, analyticsEvent);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    testId: RENDER_TOOLTIP_TRIGGER_TESTID,
+    content: tooltipContent
+  }, /*#__PURE__*/React.createElement(Pressable, _extends({
+    testId: RENDER_TRIGGER_BUTTON_TESTID,
+    xcss: cx(styles.trigger, subtleReactionsSummaryAndPicker && styles.subtleTrigger, showAddReactionText && styles.expandedTrigger, disabled ? styles.disabledTrigger : showOpaqueBackground ? styles.opaqueEnabledTrigger : styles.transparentEnabledTrigger, miniMode && styles.miniMode,
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    fg('platform-component-visual-refresh') && styles.triggerStylesRefresh, showRoundTrigger && styles.roundTrigger),
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/use-tokens-typography
+      lineHeight: '16px'
+    },
+    onClick: handleMouseDown,
+    isDisabled: disabled,
+    ref: ref
+  }, ariaAttributes), !!reactionPickerTriggerIcon ? reactionPickerTriggerIcon :
+  /*#__PURE__*/
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-21007
+  React.createElement(EmojiAddIcon, {
+    testId: "emoji-add-icon",
+    color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
+    LEGACY_size: "small",
+    label: "Add reaction"
+  }), showAddReactionText && /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(addReactionStyles.addReactionMessage)
+  }, formatMessage(i18n.addReaction))));
+});

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

@@ -1,7 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { ReactionPicker, UfoErrorBoundary } from '../../components';
+import { UfoErrorBoundary } from '../../components';
 import { PickerRender } from '../../ufo';
+import { ReactionPicker as EmotionReactionPicker } from '../../components/ReactionPicker';
+import { ReactionPicker as CompiledReactionPicker } from '../../components/compiled/ReactionPicker';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+const ReactionPicker = componentWithFG('platform_editor_css_migrate_reactions', CompiledReactionPicker, EmotionReactionPicker);
 /**
  * Reaction Picker component
  */

package/dist/es2019/index.js

@@ -4,12 +4,16 @@ import { Reaction as EmotionReaction } from './components/Reaction';
 import { Reaction as CompiledReaction } from './components/compiled/Reaction';
 import { Reactions as EmotionReactions } from './components/Reactions';
 import { Reactions as CompiledReactions } from './components/compiled/Reactions';
+import { ReactionPicker as EmotionReactionPicker } from './components/ReactionPicker/ReactionPicker';
+import { ReactionPicker as CompiledReactionPicker } from './components/ReactionPicker/ReactionPicker';
 import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 const Reaction = componentWithFG('platform_editor_css_migrate_reactions', CompiledReaction, EmotionReaction);
 const Reactions = componentWithFG('platform_editor_css_migrate_reactions', CompiledReactions, EmotionReactions);
+const ReactionPicker = componentWithFG('platform_editor_css_migrate_reactions', CompiledReactionPicker, EmotionReactionPicker);
 export { ReactionServiceClient } from './client';
-export { Reaction, Reactions };
-export { ReactionPicker } from './components/ReactionPicker/ReactionPicker';
+export { Reaction };
+export { Reactions };
+export { ReactionPicker };
 export { useCloseManager } from './hooks/useCloseManager';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
 export { MemoryReactionsStore, ReactionConsumer } from './store';

package/dist/esm/analytics/index.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "30.0.0";
+var packageVersion = "30.0.2";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/ShowMore/ShowMore.js

@@ -1,9 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { IconButton } from '@atlaskit/button/new';
 import EditorMoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
@@ -19,10 +14,10 @@ export var RENDER_SHOWMORE_TESTID = 'show-more-button';
  */
 export var ShowMore = function ShowMore(_ref) {
   var onClick = _ref.onClick;
-  return jsx(FormattedMessage, messages.moreEmoji, function (message) {
-    return jsx(Tooltip, {
+  return /*#__PURE__*/React.createElement(FormattedMessage, messages.moreEmoji, function (message) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
       content: message
-    }, jsx(IconButton, {
+    }, /*#__PURE__*/React.createElement(IconButton, {
       label: messages.moreEmoji.defaultMessage,
       onClick: onClick,
       testId: RENDER_SHOWMORE_TESTID,

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

@@ -0,0 +1,17 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._189eidpf{border-width:0}._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._18u0ze3t{margin-left:var(--ds-space-0,0)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
+._1e0c1txw{display:flex}
+._1qu2glyw{outline-style:none}
+._2hwxze3t{margin-right:var(--ds-space-0,0)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._o7ksrkh3:hover{transition:transform .2s cubic-bezier(.23,1,.32,1)}
+._1llw1q5f:hover{transform:scale(1.33)}

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

@@ -0,0 +1,39 @@
+/* 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';
+var styles = {
+  emojiButton: "_12ji1r31 _1qu2glyw _12y31o36 _2rkoglpi _189eidpf _1e0c1txw _bfhksm61 _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _o7ksrkh3 _1llw1q5f"
+};
+export var RENDER_BUTTON_TESTID = 'button-emoji-id';
+/**
+ * custom button to render the custom emoji selector inside the reaction picker
+ */
+export var EmojiButton = function EmojiButton(_ref) {
+  var emojiId = _ref.emojiId,
+    onClick = _ref.onClick,
+    emojiProvider = _ref.emojiProvider;
+  var onButtonClick = function onButtonClick(event) {
+    event.preventDefault();
+    if (onClick && isLeftClick(event)) {
+      onClick(emojiId, undefined, event);
+    }
+  };
+  var 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/esm/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}
@@ -22,6 +20,7 @@
 ._4cvr1y6m{align-items:flex-start}
 ._4t3i1tcg{height:24px}
 ._4t3i3698{height:var(--_1ed2mu0)}
+._4t3igktf{height:20px}
 ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}

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

@@ -10,9 +10,10 @@ import { Pressable } from '@atlaskit/primitives/compiled';
 var 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"
 };
 
 /**
@@ -29,6 +30,7 @@ export var ReactionButton = function ReactionButton(_ref) {
     flash = _ref$flash === void 0 ? false : _ref$flash,
     showSubtleStyle = _ref.showSubtleStyle,
     showOpaqueBackground = _ref.showOpaqueBackground,
+    useCompactStyles = _ref.useCompactStyles,
     reacted = _ref.reacted,
     ariaLabel = _ref.ariaLabel,
     ariaPressed = _ref.ariaPressed,
@@ -45,7 +47,7 @@ export var ReactionButton = function ReactionButton(_ref) {
     "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/esm/components/compiled/ReactionPicker.compiled.css

@@ -0,0 +1,11 @@
+
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}._16qs1a23{box-shadow:var(--_3t1odq)}
+._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)}
+._bfhk13b4{background-color:var(--_1f6rtr1)}
+._s7n4nkob{vertical-align:middle}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}

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)}