@atlaskit/reactions 27.2.1 → 29.0.0

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

@@ -0,0 +1,70 @@
+/* ReactionButton.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.ReactionButton = void 0;
+require("./ReactionButton.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react2 = require("@compiled/react");
+var _FlashAnimation = require("./FlashAnimation");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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 = {
+  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"
+};
+
+/**
+ * Default styling px height for an emoji reaction
+ */
+var akHeight = 24;
+var flashHeight = akHeight - 2; // height without the 1px border
+
+var flashStyle = null;
+var flashStyleOld = null;
+var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
+  var onClick = _ref.onClick,
+    _ref$flash = _ref.flash,
+    flash = _ref$flash === void 0 ? false : _ref$flash,
+    showSubtleStyle = _ref.showSubtleStyle,
+    showOpaqueBackground = _ref.showOpaqueBackground,
+    reacted = _ref.reacted,
+    ariaLabel = _ref.ariaLabel,
+    ariaPressed = _ref.ariaPressed,
+    onMouseEnter = _ref.onMouseEnter,
+    onFocus = _ref.onFocus,
+    children = _ref.children,
+    _ref$dataAttributes = _ref.dataAttributes,
+    dataAttributes = _ref$dataAttributes === void 0 ? {} : _ref$dataAttributes,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(_compiled.Pressable, (0, _extends2.default)({
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onFocus: onFocus,
+    "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,
+    // 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, {
+    flash: flash
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    ,
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "_2rkogqwt _1e0c1txw _2lx2vrvc _4cvr1h6o _4t3i3698" : "_2rko19bv _1e0c1txw _2lx2vrvc _4cvr1h6o _4t3i3698"]),
+    style: {
+      "--_1ed2mu0": (0, _runtime.ix)("".concat(flashHeight, "px"))
+    }
+  }, children));
+};

package/dist/cjs/components/compiled/ReactionParticleEffect.compiled.css

@@ -0,0 +1,17 @@
+
+._y44v1gev{animation:var(--_wb63cw)}._154iidpf{top:0}
+._1lac188d:nth-child(3){animation-delay:.3s}
+._1ltvftgi{left:8px}
+._1ltvidpf{left:0}
+._1pbyifev{z-index:10000}
+._1qen1lpd:nth-child(2){left:-5px}
+._5sagpwmj{animation-duration:.7s}
+._7vm81dfm:nth-child(4){animation-delay:.45s}
+._91vyftgi:nth-child(3){left:8px}
+._jsy51n1a:nth-child(4){left:-1px}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}
+._tzy4idpf{opacity:0}
+._xg4k6ebc:nth-child(2){animation-delay:.15s}
+@media (prefers-reduced-motion:reduce){._m602idpf{opacity:0}}

package/dist/cjs/components/compiled/ReactionParticleEffect.js

@@ -0,0 +1,41 @@
+/* ReactionParticleEffect.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.ReactionParticleEffect = exports.PARTICLE_COUNT = void 0;
+require("./ReactionParticleEffect.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _emoji = require("@atlaskit/emoji");
+var _constants = require("@atlaskit/theme/constants");
+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 fade = null;
+var float = null;
+var containerStyle = null;
+var reactionParticleStyle = null;
+var PARTICLE_COUNT = exports.PARTICLE_COUNT = 4;
+var ReactionParticleEffect = exports.ReactionParticleEffect = function ReactionParticleEffect(_ref) {
+  var emojiProvider = _ref.emojiProvider,
+    emojiId = _ref.emojiId;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_kqswh2mm _1ltvftgi _1pbyifev _m602idpf"])
+  }, (0, _toConsumableArray2.default)(Array(PARTICLE_COUNT)).map(function (_, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: (0, _runtime.ax)(["_y44v1gev _kqswstnw _154iidpf _1ltvidpf _lcxvglyw _tzy4idpf _5sagpwmj _1qen1lpd _xg4k6ebc _91vyftgi _1lac188d _jsy51n1a _7vm81dfm"]),
+      style: {
+        "--_wb63cw": (0, _runtime.ix)("".concat(fade, " ease-in-out, ").concat(float, " ease"))
+      }
+    }, /*#__PURE__*/React.createElement(_emoji.ResourcedEmoji, {
+      emojiProvider: emojiProvider,
+      emojiId: emojiId,
+      fitToHeight: 16
+    }));
+  }));
+};

package/dist/cjs/components/compiled/ReactionTooltip.compiled.css

@@ -0,0 +1,29 @@
+
+._d1n8glyw ul{list-style:none}._102oidpf ul{margin-top:0}
+._17d4idpf ul{margin-left:0}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1eg614y2 li{margin-top:5px}
+._1hms8stv{text-decoration-line:underline}
+._1hziidpf ul{padding-top:0}
+._1kvxidpf ul{margin-right:0}
+._1p1d1dk0{text-transform:capitalize}
+._1pru15vq li{overflow-x:hidden}
+._1reo15vq{overflow-x:hidden}
+._1ysjidpf ul{margin-bottom:0}
+._1ywo1e5h ul{text-align:left}
+._3n4midpf ul{padding-right:0}
+._4bfu1r31{text-decoration-color:currentColor}
+._5qec1l2s li{text-overflow:ellipsis}
+._80omtlke{cursor:pointer}
+._ajmmnqa1{text-decoration-style:solid}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._k7zyidpf ul{padding-left:0}
+._ltofidpf ul{padding-bottom:0}
+._o5721q9c{white-space:nowrap}
+._otyr14y2{margin-bottom:5px}
+._p12f1w81{max-width:150px}
+._syaz1lqe{color:var(--_14nrcaz)}
+._u0h115vq li{overflow-y:hidden}
+._30l31i9p:hover{color:var(--_ywovvi)}
+._irr3pioe:hover{background-color:var(--_yr7xfv)}

package/dist/cjs/components/compiled/ReactionTooltip.js

@@ -0,0 +1,77 @@
+/* ReactionTooltip.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.verticalMargin = exports.ReactionTooltip = exports.RENDER_REACTIONTOOLTIP_TESTID = void 0;
+require("./ReactionTooltip.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _reactIntlNext = require("react-intl-next");
+var _constants = require("../../shared/constants");
+var _i18n = require("../../shared/i18n");
+var _colors = require("@atlaskit/theme/colors");
+var verticalMargin = exports.verticalMargin = 5;
+var tooltipStyle = null;
+var emojiNameStyle = null;
+var footerStyle = null;
+var underlineStyle = null;
+
+/**
+ * Test id for wrapper ReactionTooltip div
+ */
+var RENDER_REACTIONTOOLTIP_TESTID = exports.RENDER_REACTIONTOOLTIP_TESTID = 'render-reactionTooltip';
+var ReactionTooltip = exports.ReactionTooltip = function ReactionTooltip(_ref) {
+  var children = _ref.children,
+    emojiName = _ref.emojiName,
+    _ref$reaction$users = _ref.reaction.users,
+    users = _ref$reaction$users === void 0 ? [] : _ref$reaction$users,
+    _ref$maxReactions = _ref.maxReactions,
+    maxReactions = _ref$maxReactions === void 0 ? _constants.TOOLTIP_USERS_LIMIT : _ref$maxReactions,
+    _ref$isEnabled = _ref.isEnabled,
+    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+    allowUserDialog = _ref.allowUserDialog,
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
+    dismissTooltip = _ref.dismissTooltip;
+  var handleClick = function handleClick() {
+    if (allowUserDialog && handleOpenReactionsDialog) {
+      dismissTooltip();
+      handleOpenReactionsDialog();
+    }
+  };
+  var content = !users || users.length === 0 || !isEnabled ? null : /*#__PURE__*/_react.default.createElement("div", {
+    tabIndex: 0,
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _p12f1w81 _1bto1l2s _o5721q9c _otyr14y2 _d1n8glyw _102oidpf _1kvxidpf _1ysjidpf _17d4idpf _1hziidpf _3n4midpf _ltofidpf _k7zyidpf _1ywo1e5h _1pru15vq _u0h115vq _5qec1l2s _1eg614y2"])
+  }, /*#__PURE__*/_react.default.createElement("ul", null, emojiName ? /*#__PURE__*/_react.default.createElement("li", {
+    className: (0, _runtime.ax)(["_1p1d1dk0 _syaz1lqe _k48p1pd9"]),
+    style: {
+      "--_14nrcaz": (0, _runtime.ix)("var(--ds-text-inverse, ".concat(_colors.N90, ")"))
+    }
+  }, emojiName) : null, users.slice(0, maxReactions).map(function (user) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: user.id
+    }, user.displayName);
+  }), /*#__PURE__*/_react.default.createElement("li", {
+    onMouseDown: handleClick,
+    onClick: handleClick,
+    className: (0, _runtime.ax)(["_syaz1lqe", allowUserDialog && "_4bfu1r31 _1hms8stv _ajmmnqa1 _80omtlke _irr3pioe _30l31i9p"]),
+    style: {
+      "--_14nrcaz": (0, _runtime.ix)("var(--ds-text-inverse, ".concat(_colors.N90, ")")),
+      "--_yr7xfv": (0, _runtime.ix)("var(--ds-background-neutral-bold, ".concat(_colors.N800, ")")),
+      "--_ywovvi": (0, _runtime.ix)("var(--ds-text-inverse, ".concat(_colors.N0, ")"))
+    }
+  }, users.length > maxReactions && /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.otherUsers, {
+    values: {
+      count: users.length - maxReactions
+    }
+  })))));
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: content,
+    position: "bottom",
+    testId: RENDER_REACTIONTOOLTIP_TESTID
+  }, _react.default.Children.only(children));
+};

package/dist/cjs/components/compiled/Reactions.compiled.css

@@ -0,0 +1,11 @@
+
+._2rkoo7ao{border-radius:15px}._13vtidpf >:first-of-type>:first-of-type{margin-left:0}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pkr5cr{margin-top:var(--ds-space-negative-050,-4px)}
+._1e0c1o8l{display:inline-block}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._1n261q9c{flex-wrap:nowrap}
+._4cvr1h6o{align-items:center}
+._kqswh2mm{position:relative}
+._kqswpfqs{position:static}

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

@@ -0,0 +1,374 @@
+/* Reactions.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.Reactions = exports.RENDER_VIEWALL_REACTED_USERS_DIALOG = exports.RENDER_REACTIONS_TESTID = exports.RENDER_REACTIONS_SUMMARY_TESTID = void 0;
+exports.getTooltip = getTooltip;
+exports.ufoExperiences = void 0;
+require("./Reactions.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _modalDialog = require("@atlaskit/modal-dialog");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _segment = _interopRequireDefault(require("@atlaskit/react-ufo/segment"));
+var _analytics = require("../../analytics");
+var _constants = require("../../shared/constants");
+var _i18n = require("../../shared/i18n");
+var _types = require("../../types");
+var _ufo = require("../../ufo");
+var _Reaction = require("./Reaction");
+var _ReactionDialog = require("../ReactionDialog");
+var _ReactionPicker = require("../ReactionPicker");
+var _ReactionSummary = require("../ReactionSummary/");
+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 wrapperStyle = null;
+var noFlexWrapStyles = null;
+var noContainerPositionStyles = null;
+var reactionPickerStyle = null;
+
+/**
+ * Set of all available UFO experiences relating to Reactions Dialog
+ */
+var ufoExperiences = exports.ufoExperiences = {
+  /**
+   * Experience when a reaction dialog is opened
+   */
+  openDialog: _ufo.ReactionDialogOpened,
+  /**
+   * Experience when a reaction changed/fetched from inside the modal dialog
+   */
+  selectedReactionChangeInsideDialog: _ufo.ReactionDialogSelectedReactionChanged
+};
+
+/**
+ * Test id for wrapper Reactions div
+ */
+var RENDER_REACTIONS_TESTID = exports.RENDER_REACTIONS_TESTID = 'render-reactions';
+/**
+ * Test id for the view all reacted user to trigger the dialog
+ */
+var RENDER_VIEWALL_REACTED_USERS_DIALOG = exports.RENDER_VIEWALL_REACTED_USERS_DIALOG = 'viewall-reacted-users-dialog';
+
+/**
+ * Test id for summary view of reactions
+ */
+var RENDER_REACTIONS_SUMMARY_TESTID = exports.RENDER_REACTIONS_SUMMARY_TESTID = 'reaction-summary-view';
+/**
+ * Get content of the tooltip
+ */
+function getTooltip(status, errorMessage, tooltipContent) {
+  switch (status) {
+    case _types.ReactionStatus.error:
+      return errorMessage || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.unexpectedError);
+    // When reaction is not available don't show any tooltip (e.g. Archive page in Confluence)
+    case _types.ReactionStatus.disabled:
+      return null;
+    case _types.ReactionStatus.notLoaded:
+    case _types.ReactionStatus.loading:
+      return /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.loadingReactions);
+    case _types.ReactionStatus.ready:
+      return !!tooltipContent ? tooltipContent : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addReaction);
+  }
+}
+
+/**
+ * Renders list of reactions
+ */
+var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var _ref$flash = _ref.flash,
+    flash = _ref$flash === void 0 ? {} : _ref$flash,
+    _ref$particleEffectBy = _ref.particleEffectByEmoji,
+    particleEffectByEmoji = _ref$particleEffectBy === void 0 ? {} : _ref$particleEffectBy,
+    status = _ref.status,
+    errorMessage = _ref.errorMessage,
+    loadReaction = _ref.loadReaction,
+    quickReactionEmojis = _ref.quickReactionEmojis,
+    pickerQuickReactionEmojiIds = _ref.pickerQuickReactionEmojiIds,
+    _ref$getReactionDetai = _ref.getReactionDetails,
+    getReactionDetails = _ref$getReactionDetai === void 0 ? function () {} : _ref$getReactionDetai,
+    onSelection = _ref.onSelection,
+    _ref$reactions = _ref.reactions,
+    reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
+    emojiProvider = _ref.emojiProvider,
+    allowAllEmojis = _ref.allowAllEmojis,
+    onReactionClick = _ref.onReactionClick,
+    allowUserDialog = _ref.allowUserDialog,
+    _ref$onDialogOpenCall = _ref.onDialogOpenCallback,
+    onDialogOpenCallback = _ref$onDialogOpenCall === void 0 ? function () {} : _ref$onDialogOpenCall,
+    _ref$onDialogCloseCal = _ref.onDialogCloseCallback,
+    onDialogCloseCallback = _ref$onDialogCloseCal === void 0 ? function () {} : _ref$onDialogCloseCal,
+    _ref$onDialogSelectRe = _ref.onDialogSelectReactionCallback,
+    onDialogSelectReactionCallback = _ref$onDialogSelectRe === void 0 ? function () {} : _ref$onDialogSelectRe,
+    _ref$onDialogPageChan = _ref.onDialogPageChangeCallback,
+    onDialogPageChangeCallback = _ref$onDialogPageChan === void 0 ? function () {} : _ref$onDialogPageChan,
+    _ref$emojiPickerSize = _ref.emojiPickerSize,
+    emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize,
+    _ref$miniMode = _ref.miniMode,
+    miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode,
+    _ref$summaryViewEnabl = _ref.summaryViewEnabled,
+    summaryViewEnabled = _ref$summaryViewEnabl === void 0 ? false : _ref$summaryViewEnabl,
+    _ref$summaryViewThres = _ref.summaryViewThreshold,
+    summaryViewThreshold = _ref$summaryViewThres === void 0 ? 3 : _ref$summaryViewThres,
+    summaryViewPlacement = _ref.summaryViewPlacement,
+    _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$showAddReactionT = _ref.showAddReactionText,
+    showAddReactionText = _ref$showAddReactionT === void 0 ? false : _ref$showAddReactionT,
+    _ref$hideDefaultReact = _ref.hideDefaultReactions,
+    hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact,
+    ProfileCardWrapper = _ref.ProfileCardWrapper,
+    _ref$onlyRenderPicker = _ref.onlyRenderPicker,
+    onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker,
+    _ref$isViewOnly = _ref.isViewOnly,
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
+    reactionPickerAdditionalStyle = _ref.reactionPickerAdditionalStyle,
+    _ref$noWrap = _ref.noWrap,
+    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
+    _ref$noRelativeContai = _ref.noRelativeContainer,
+    noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai,
+    showSubtleDefaultReactions = _ref.showSubtleDefaultReactions,
+    reactionPickerTriggerToolipContent = _ref.reactionPickerTriggerToolipContent,
+    reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
+    _ref$allowSelectFromS = _ref.allowSelectFromSummaryView,
+    allowSelectFromSummaryView = _ref$allowSelectFromS === void 0 ? false : _ref$allowSelectFromS,
+    _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
+    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme;
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selectedEmojiId = _useState2[0],
+    setSelectedEmojiId = _useState2[1];
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var openTime = (0, _react.useRef)();
+  var renderTime = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    if (status === _types.ReactionStatus.notLoaded) {
+      loadReaction();
+    }
+  }, [status, loadReaction]);
+  (0, _react.useEffect)(function () {
+    if (status !== _types.ReactionStatus.ready) {
+      renderTime.current = Date.now();
+    } else {
+      var isSSR = process.env.REACT_SSR && (0, _platformFeatureFlags.fg)('platform_fix_analytics_error');
+      if ((0, _analytics.isSampled)(_constants.SAMPLING_RATE_REACTIONS_RENDERED_EXP) && !isSSR) {
+        var _renderTime$current;
+        (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionsRenderedEvent, (_renderTime$current = renderTime.current) !== null && _renderTime$current !== void 0 ? _renderTime$current : Date.now() //renderTime.current can be null during unit test cases
+        );
+      }
+      renderTime.current = undefined;
+    }
+  }, [createAnalyticsEvent, status]);
+  var handleReactionMouseEnter = (0, _react.useCallback)(function (emojiId) {
+    getReactionDetails(emojiId);
+  }, [getReactionDetails]);
+  var handleReactionFocused = (0, _react.useCallback)(function (emojiId) {
+    getReactionDetails(emojiId);
+  }, [getReactionDetails]);
+  var handlePickerOpen = (0, _react.useCallback)(function () {
+    openTime.current = Date.now();
+    (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createPickerButtonClickedEvent, reactions.length);
+  }, [createAnalyticsEvent, reactions]);
+  var handleOnCancel = (0, _react.useCallback)(function () {
+    (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createPickerCancelledEvent, openTime.current);
+    openTime.current = undefined;
+  }, [createAnalyticsEvent]);
+  var handleOnMore = (0, _react.useCallback)(function () {
+    (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createPickerMoreClickedEvent, openTime.current);
+  }, [createAnalyticsEvent]);
+  var handleOnSelection = (0, _react.useCallback)(function (emojiId, source) {
+    (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionSelectionEvent, source, emojiId, reactions.find(function (reaction) {
+      return reaction.emojiId === emojiId;
+    }), openTime.current);
+    openTime.current = undefined;
+    onSelection(emojiId);
+  }, [createAnalyticsEvent, onSelection, reactions]);
+  var handleCloseReactionsDialog = function handleCloseReactionsDialog(e, analyticsEvent) {
+    setSelectedEmojiId('');
+    onDialogCloseCallback(e, analyticsEvent);
+  };
+  var handleSelectReactionInDialog = function handleSelectReactionInDialog(emojiId) {
+    // ufo selected reaction inside the modal dialog
+    ufoExperiences.selectedReactionChangeInsideDialog.start();
+    handleReactionMouseEnter(emojiId);
+    setSelectedEmojiId(emojiId);
+    onDialogSelectReactionCallback(emojiId);
+
+    // ufo selected reaction inside the modal dialog success
+    ufoExperiences.selectedReactionChangeInsideDialog.success({
+      metadata: {
+        emojiId: emojiId,
+        source: 'Reactions',
+        reason: 'Selected Emoji changed'
+      }
+    });
+  };
+  var handlePaginationChange = (0, _react.useCallback)(function (emojiId, currentPage, maxPages) {
+    // fetch the latest active emoji from the new page
+    getReactionDetails(emojiId);
+    setSelectedEmojiId(emojiId);
+    onDialogPageChangeCallback(emojiId, currentPage, maxPages);
+  },
+  // Exclude unstable getReactionDetails to avoid extra re-renders
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [setSelectedEmojiId]);
+
+  /**
+   * Get the reactions that we want to render are any reactions with a count greater than zero as well as any default emoji not already shown
+   */
+  var memorizedReactions = (0, _react.useMemo)(function () {
+    //
+    /**
+     * If reactions not empty, don't show quick reactions Pre defined emoji or if its empty and default reactions not hidden => return the current list of reactions
+     */
+    if (reactions.length === 0 && hideDefaultReactions || reactions.length > 0 || !quickReactionEmojis) {
+      return reactions;
+    }
+
+    // add any missing default reactions
+    var ari = quickReactionEmojis.ari,
+      containerAri = quickReactionEmojis.containerAri,
+      emojiIds = quickReactionEmojis.emojiIds;
+    var items = emojiIds.filter(function (emojiId) {
+      return !reactions.some(function (reaction) {
+        return reaction.emojiId === emojiId;
+      });
+    }).map(function (emojiId) {
+      return {
+        ari: ari,
+        containerAri: containerAri,
+        emojiId: emojiId,
+        count: 0,
+        reacted: false
+      };
+    });
+    return reactions.concat(items);
+  }, [quickReactionEmojis, reactions, hideDefaultReactions]);
+  var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
+
+  // criteria to show Reactions Dialog
+  var hasEmojiWithFivePlusReactions = reactions.some(function (reaction) {
+    return reaction.count >= 5;
+  });
+  var sortedReactions = (0, _react.useMemo)(function () {
+    return (0, _toConsumableArray2.default)(memorizedReactions).sort(function (a, b) {
+      return (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count);
+    });
+  }, [memorizedReactions]);
+
+  /**
+   * event handler to open dialog with selected reaction
+   * @param emojiId initial emoji id to load dialog with
+   */
+  var _handleOpenReactionsDialog = function handleOpenReactionsDialog() {
+    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref2$emojiId = _ref2.emojiId,
+      emojiId = _ref2$emojiId === void 0 ? sortedReactions[0].emojiId : _ref2$emojiId,
+      _ref2$source = _ref2.source,
+      source = _ref2$source === void 0 ? 'endOfPageReactions' : _ref2$source;
+    // ufo start opening reaction dialog
+    ufoExperiences.openDialog.start();
+    getReactionDetails(emojiId);
+    setSelectedEmojiId(emojiId);
+    onDialogOpenCallback(emojiId, source);
+
+    // ufo opening reaction dialog success
+    ufoExperiences.openDialog.success({
+      metadata: {
+        emojiId: emojiId,
+        source: 'Reactions',
+        reason: 'Opening Reactions Dialog successfully'
+      }
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_segment.default, {
+    name: "reactions"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": RENDER_REACTIONS_TESTID,
+    className: (0, _runtime.ax)(["_2rkoo7ao _1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
+  }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
+  }, /*#__PURE__*/_react.default.createElement(_ReactionSummary.ReactionSummaryView, {
+    reactions: sortedReactions,
+    emojiProvider: emojiProvider,
+    flash: flash,
+    particleEffectByEmoji: particleEffectByEmoji,
+    onSelection: handleOnSelection,
+    onReactionClick: onReactionClick,
+    onReactionFocused: handleReactionFocused,
+    onReactionMouseEnter: handleReactionMouseEnter,
+    placement: summaryViewPlacement,
+    showOpaqueBackground: showOpaqueBackground,
+    subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+    handleOpenReactionsDialog: function handleOpenReactionsDialog() {
+      return _handleOpenReactionsDialog({
+        source: 'summaryView'
+      });
+    },
+    allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
+    isViewOnly: isViewOnly,
+    allowSelectFromSummaryView: allowSelectFromSummaryView,
+    disabled: status !== _types.ReactionStatus.ready,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
+    emojiPickerSize: emojiPickerSize,
+    onOpen: handlePickerOpen,
+    useButtonAlignmentStyling: useButtonAlignmentStyling
+  })) : memorizedReactions.map(function (reaction) {
+    return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
+      key: reaction.emojiId,
+      reaction: reaction,
+      emojiProvider: emojiProvider,
+      onClick: onReactionClick,
+      onMouseEnter: handleReactionMouseEnter,
+      onFocused: handleReactionFocused,
+      flash: flash[reaction.emojiId],
+      showParticleEffect: particleEffectByEmoji[reaction.emojiId],
+      showOpaqueBackground: showOpaqueBackground,
+      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
+      handleOpenReactionsDialog: _handleOpenReactionsDialog,
+      isViewOnly: isViewOnly,
+      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
+    });
+  })), isViewOnly || allowSelectFromSummaryView ? null : /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
+    emojiProvider: emojiProvider,
+    allowAllEmojis: allowAllEmojis,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    disabled: status !== _types.ReactionStatus.ready,
+    onSelection: handleOnSelection,
+    onOpen: handlePickerOpen,
+    onCancel: handleOnCancel,
+    onShowMore: handleOnMore,
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
+    emojiPickerSize: emojiPickerSize,
+    miniMode: miniMode,
+    showOpaqueBackground: showOpaqueBackground,
+    showAddReactionText: showAddReactionText,
+    subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    reactionPickerAdditionalStyle: reactionPickerAdditionalStyle,
+    useButtonAlignmentStyling: useButtonAlignmentStyling,
+    className: (0, _runtime.ax)(["_1e0c1o8l _19pk1b66"])
+  }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/_react.default.createElement(_segment.default, {
+    name: "reactions-dialog"
+  }, /*#__PURE__*/_react.default.createElement(_ReactionDialog.ReactionsDialog, {
+    selectedEmojiId: selectedEmojiId,
+    reactions: sortedReactions,
+    emojiProvider: emojiProvider,
+    handleCloseReactionsDialog: handleCloseReactionsDialog,
+    handleSelectReaction: handleSelectReactionInDialog,
+    handlePaginationChange: handlePaginationChange,
+    ProfileCardWrapper: ProfileCardWrapper
+  })))));
+});

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

@@ -0,0 +1,17 @@
+
+._19itglyw{border:none}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._18m915vq{overflow-y:hidden}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1e0c1txw{display:flex}
+._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
+._1reo15vq{overflow-x:hidden}
+._1ul914no{min-width:36px}
+._2lx2vrvc{flex-direction:row}
+._4cvr1y6m{align-items:flex-start}
+._4t3i1tcg{height:24px}
+._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}