@atlaskit/reactions 30.0.0 → 30.0.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/reactions
 
+## 30.0.2
+
+### Patch Changes
+
+- [#130224](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/130224)
+  [`d075c99b9abd7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d075c99b9abd7) -
+  migrate to compiled css for reaction picker and reaction summary view
+
+## 30.0.1
+
+### Patch Changes
+
+- [#131283](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131283)
+  [`8ee415b479d07`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8ee415b479d07) -
+  Migrates reactions dialog to compiled css
+
 ## 30.0.0
 
 ### Major Changes

package/afm-cc/tsconfig.json

@@ -32,6 +32,9 @@
         {
             "path": "../../../design-system/button/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/css/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../emoji/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../../design-system/button/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/css/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../emoji/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -32,6 +32,9 @@
 		{
 			"path": "../../../design-system/button/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/css/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../emoji/afm-post-office/tsconfig.json"
 		},

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 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) { (0, _defineProperty2.default)(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; }
 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/cjs/components/ShowMore/ShowMore.js

@@ -5,18 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ShowMore = exports.RENDER_SHOWMORE_TESTID = void 0;
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _new = require("@atlaskit/button/new");
 var _showMoreHorizontalEditorMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--editor-more"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _i18n = require("../../shared/i18n");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 /**
  * Test id for wrapper button
  */
@@ -26,10 +20,10 @@ var RENDER_SHOWMORE_TESTID = exports.RENDER_SHOWMORE_TESTID = 'show-more-button'
  */
 var ShowMore = exports.ShowMore = function ShowMore(_ref) {
   var onClick = _ref.onClick;
-  return (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.moreEmoji, function (message) {
-    return (0, _react.jsx)(_tooltip.default, {
+  return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.moreEmoji, function (message) {
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       content: message
-    }, (0, _react.jsx)(_new.IconButton, {
+    }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
       label: _i18n.messages.moreEmoji.defaultMessage,
       onClick: onClick,
       testId: RENDER_SHOWMORE_TESTID,

package/dist/cjs/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/cjs/components/compiled/EmojiButton.js

@@ -0,0 +1,48 @@
+/* EmojiButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RENDER_BUTTON_TESTID = exports.EmojiButton = void 0;
+require("./EmojiButton.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _reactIntlNext = require("react-intl-next");
+var _emoji = require("@atlaskit/emoji");
+var _i18n = require("../../shared/i18n");
+var _utils = require("../../shared/utils");
+var _compiled = require("@atlaskit/primitives/compiled");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  emojiButton: "_12ji1r31 _1qu2glyw _12y31o36 _2rkoglpi _189eidpf _1e0c1txw _bfhksm61 _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _o7ksrkh3 _1llw1q5f"
+};
+var RENDER_BUTTON_TESTID = exports.RENDER_BUTTON_TESTID = 'button-emoji-id';
+/**
+ * custom button to render the custom emoji selector inside the reaction picker
+ */
+var EmojiButton = exports.EmojiButton = function EmojiButton(_ref) {
+  var emojiId = _ref.emojiId,
+    onClick = _ref.onClick,
+    emojiProvider = _ref.emojiProvider;
+  var onButtonClick = function onButtonClick(event) {
+    event.preventDefault();
+    if (onClick && (0, _utils.isLeftClick)(event)) {
+      onClick(emojiId, undefined, event);
+    }
+  };
+  var intl = (0, _reactIntlNext.useIntl)();
+  return /*#__PURE__*/React.createElement(_compiled.Pressable, {
+    testId: RENDER_BUTTON_TESTID,
+    onClick: onButtonClick,
+    "aria-label": intl.formatMessage(_i18n.messages.reactWithEmoji, {
+      emoji: emojiId.shortName
+    }),
+    xcss: styles.emojiButton
+  }, /*#__PURE__*/React.createElement(_emoji.ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: emojiId
+  }));
+};

package/dist/cjs/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/cjs/components/compiled/ReactionButton.js

@@ -20,9 +20,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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"
 };
 
 /**
@@ -39,6 +40,7 @@ var ReactionButton = exports.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,
@@ -55,7 +57,7 @@ var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,
     testId: testId,
-    xcss: (0, _react2.cx)(styles.reactionButton, reacted && styles.reacted, !reacted && showSubtleStyle && styles.borderless, !reacted && showOpaqueBackground && styles.opaqueBackground,
+    xcss: (0, _react2.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
     (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && styles.reactionStylesRefresh)
   }, dataAttributes), /*#__PURE__*/React.createElement(_FlashAnimation.FlashAnimation, {

package/dist/cjs/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/cjs/components/compiled/ReactionPicker.js

@@ -0,0 +1,325 @@
+/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionPicker = exports.RENDER_REACTIONPICKER_TESTID = exports.RENDER_REACTIONPICKERPANEL_TESTID = exports.PopperWrapper = void 0;
+require("./ReactionPicker.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _picker = require("@atlaskit/emoji/picker");
+var _popper = require("@atlaskit/popper");
+var _constants = require("@atlaskit/theme/constants");
+var _useCloseManager = require("../../hooks/useCloseManager");
+var _useFocusTrap = require("../../hooks/useFocusTrap");
+var _i18n = require("../../shared/i18n");
+var _ufo = require("../../ufo");
+var _Selector = require("./Selector");
+var _Trigger = require("./Trigger");
+var _colors = require("@atlaskit/theme/colors");
+var _RepositionOnUpdate = require("../ReactionPicker/RepositionOnUpdate");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2.default)(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; }
+var pickerStyle = null;
+var contentStyle = null;
+var popupWrapperStyle = null;
+var popupStyle = null;
+/**
+ * Test id for wrapper ReactionPicker div
+ */
+var RENDER_REACTIONPICKER_TESTID = exports.RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
+
+/**
+ * Test id for ReactionPicker panel div
+ */
+var RENDER_REACTIONPICKERPANEL_TESTID = exports.RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
+
+/**
+ * Emoji Picker Controller Id for Accessibility Labels
+ */
+var PICKER_CONTROL_ID = 'emoji-picker';
+/**
+ * Picker component for adding reactions
+ */
+var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.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.default.createElement(_reactIntlNext.FormattedMessage, _i18n.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 = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    triggerRef = _useState2[0],
+    setTriggerRef = _useState2[1];
+
+  /**
+   * Container <div /> reference (used by custom hook to detect click outside)
+   */
+  var wrapperRef = (0, _react.useRef)(null);
+  var updatePopper = (0, _react.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 = (0, _react.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 = (0, _slicedToArray2.default)(_useState3, 2),
+    settings = _useState4[0],
+    setSettings = _useState4[1];
+
+  /**
+   * Custom hook triggers when user clicks outside the reactions picker
+   */
+  (0, _useCloseManager.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 = (0, _react.useCallback)(function (_id) {
+    setSettings(_objectSpread(_objectSpread({}, settings), {}, {
+      isOpen: false
+    }));
+    // ufo abort reaction experience
+    _ufo.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 = (0, _react.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 = (0, _react.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
+    _ufo.PickerRender.start();
+    setSettings({
+      isOpen: !settings.isOpen,
+      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
+      popperPlacement: popperPlacement
+    });
+    onOpen();
+    // ufo reactions picker opened success
+    _ufo.PickerRender.success();
+  };
+  var wrapperClassName = " ".concat(settings.isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
+  (0, _react.useLayoutEffect)(function () {
+    var _updatePopper$current;
+    (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === void 0 || _updatePopper$current.call(updatePopper);
+  }, [settings]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: (0, _runtime.ax)(["_s7n4nkob _1pra1o8l", wrapperClassName]),
+    "data-testid": RENDER_REACTIONPICKER_TESTID,
+    ref: wrapperRef
+  }, /*#__PURE__*/_react.default.createElement(_popper.Manager, null, /*#__PURE__*/_react.default.createElement(_popper.Reference, null, function (_ref) {
+    var _ref2 = _ref.ref;
+    return (
+      /*#__PURE__*/
+      // Render a button to open the <Selector /> panel
+      _react.default.createElement(_Trigger.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.default.createElement(PopperWrapper, {
+    settings: settings,
+    popperModifiers: popperModifiers
+  }, settings.showFullPicker ? /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    size: emojiPickerSize
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw"])
+  }, /*#__PURE__*/_react.default.createElement(_Selector.Selector, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    showMore: allowAllEmojis,
+    onMoreClick: onSelectMoreClick,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
+  })))));
+});
+var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
+  var settings = props.settings,
+    children = props.children,
+    popperModifiers = props.popperModifiers;
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    popupRef = _useState6[0],
+    setPopupRef = _useState6[1];
+  /**
+   * add focus lock to popup
+   */
+  (0, _useFocusTrap.useFocusTrap)({
+    initialFocusRef: null,
+    targetRef: popupRef
+  });
+  return /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+    placement: settings.popperPlacement,
+    modifiers: popperModifiers,
+    strategy: "absolute"
+  }, function (_ref3) {
+    var _ref4 = _ref3.ref,
+      style = _ref3.style,
+      update = _ref3.update;
+    return /*#__PURE__*/_react.default.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: _constants.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: (0, _runtime.ax)(["_nt751r31 _49pcglyw _1hvw1o36"])
+    }, /*#__PURE__*/_react.default.createElement(_RepositionOnUpdate.RepositionOnUpdate, {
+      update: update,
+      settings: settings
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _runtime.ax)(["_2rko1sit _bfhk13b4 _16qs1a23 _1bch1b66 _79pa1b66"]),
+      style: {
+        "--_1f6rtr1": (0, _runtime.ix)("var(--ds-surface-overlay, ".concat(_colors.N0, ")")),
+        "--_3t1odq": (0, _runtime.ix)("var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"))
+      }
+    }, children)));
+  });
+};

package/dist/cjs/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)}