@atlaskit/reactions 27.2.0 → 28.0.0

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,377 @@
+/* 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$showRoundTrigger = _ref.showRoundTrigger,
+    showRoundTrigger = _ref$showRoundTrigger === void 0 ? false : _ref$showRoundTrigger,
+    _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,
+    showRoundTrigger: showRoundTrigger,
+    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}

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

@@ -0,0 +1,34 @@
+/* StaticReaction.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.StaticReaction = void 0;
+require("./StaticReaction.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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 = {
+  staticReaction: "_1reo15vq _18m915vq _19itglyw _2rkoglpi _1e0c1txw _2lx2vrvc _4cvr1y6m _1ul914no _4t3i1tcg _syaz1gjq _1pfh1b66 _12l21b66 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _d0al73ad"
+};
+var StaticReaction = exports.StaticReaction = function StaticReaction(_ref) {
+  var onMouseEnter = _ref.onMouseEnter,
+    onFocus = _ref.onFocus,
+    children = _ref.children,
+    testId = _ref.testId,
+    _ref$dataAttributes = _ref.dataAttributes,
+    dataAttributes = _ref$dataAttributes === void 0 ? {} : _ref$dataAttributes;
+  return /*#__PURE__*/React.createElement(_compiled.Box, (0, _extends2.default)({
+    onMouseEnter: onMouseEnter,
+    onFocus: onFocus,
+    testId: testId,
+    xcss: styles.staticReaction,
+    backgroundColor: "color.background.neutral.subtle"
+  }, dataAttributes), children);
+};

package/dist/cjs/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -15,8 +15,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _components = require("../../components");
+var _Reactions = require("../../components/Reactions");
+var _Reactions2 = require("../../components/compiled/Reactions");
 var _store2 = require("../../store");
 var _types = require("../../types");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled", "onReactionSuccess"];
 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; }
@@ -220,7 +223,9 @@ var ConnectedReactionsView = exports.ConnectedReactionsView = function Connected
     }
   }, /*#__PURE__*/_react.default.createElement(_components.UfoErrorBoundary, {
     experiences: experienceInstance.current ? [experienceInstance.current] : []
-  }, stateData && dispatchData ? /*#__PURE__*/_react.default.createElement(_components.Reactions, (0, _extends2.default)({
+  }, stateData && dispatchData && (0, _platformFeatureFlags.fg)('platform_editor_css_migrate_reactions') ? /*#__PURE__*/_react.default.createElement(_Reactions2.Reactions, (0, _extends2.default)({
+    key: "".concat(containerAri, "|").concat(ari)
+  }, rest, dispatchData, stateData)) : null, stateData && dispatchData && !(0, _platformFeatureFlags.fg)('platform_editor_css_migrate_reactions') ? /*#__PURE__*/_react.default.createElement(_Reactions.Reactions, (0, _extends2.default)({
     key: "".concat(containerAri, "|").concat(ari)
   }, rest, dispatchData, stateData)) : null));
 };

package/dist/cjs/index.js

@@ -21,12 +21,7 @@ Object.defineProperty(exports, "MemoryReactionsStore", {
     return _store.MemoryReactionsStore;
   }
 });
-Object.defineProperty(exports, "Reaction", {
-  enumerable: true,
-  get: function get() {
-    return _components.Reaction;
-  }
-});
+exports.Reaction = void 0;
 Object.defineProperty(exports, "ReactionConsumer", {
   enumerable: true,
   get: function get() {
@@ -36,7 +31,7 @@ Object.defineProperty(exports, "ReactionConsumer", {
 Object.defineProperty(exports, "ReactionPicker", {
   enumerable: true,
   get: function get() {
-    return _components.ReactionPicker;
+    return _ReactionPicker.ReactionPicker;
   }
 });
 Object.defineProperty(exports, "ReactionServiceClient", {
@@ -57,13 +52,7 @@ Object.defineProperty(exports, "ReactionUpdateType", {
     return _types.ReactionUpdateType;
   }
 });
-Object.defineProperty(exports, "Reactions", {
-  enumerable: true,
-  get: function get() {
-    return _components.Reactions;
-  }
-});
-exports.constants = exports.UFO = void 0;
+exports.constants = exports.UFO = exports.Reactions = void 0;
 Object.defineProperty(exports, "useCloseManager", {
   enumerable: true,
   get: function get() {
@@ -72,12 +61,20 @@ Object.defineProperty(exports, "useCloseManager", {
 });
 var _constants = require("./shared/constants");
 var _ufo = require("./ufo");
+var _Reaction = require("./components/Reaction");
+var _Reaction2 = require("./components/compiled/Reaction");
+var _Reactions = require("./components/Reactions");
+var _Reactions2 = require("./components/compiled/Reactions");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _client = require("./client");
-var _components = require("./components");
+var _ReactionPicker = require("./components/ReactionPicker/ReactionPicker");
 var _useCloseManager = require("./hooks/useCloseManager");
 var _containers = require("./containers");
 var _store = require("./store");
 var _types = require("./types");
+var Reaction = exports.Reaction = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_reactions', _Reaction2.Reaction, _Reaction.Reaction);
+var Reactions = exports.Reactions = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_reactions', _Reactions2.Reactions, _Reactions.Reactions);
+
 // TODO: Convert all calls for ReactionRequest to Request, RequestClient to Client and ReactionsStore to Store
 
 var constants = exports.constants = {

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "27.2.0";
+const packageVersion = "28.0.0";
 /**
  * TODO: move to utility package?
  * A random sampling function