@atlaskit/reactions 27.2.1 → 29.0.0

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

@@ -0,0 +1,362 @@
+/* Reactions.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./Reactions.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ModalTransition } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
+import UFOSegment from '@atlaskit/react-ufo/segment';
+import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../../analytics';
+import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../../shared/constants';
+import { messages } from '../../shared/i18n';
+import { ReactionStatus } from '../../types';
+import { ReactionDialogOpened, ReactionDialogSelectedReactionChanged } from '../../ufo';
+import { Reaction } from './Reaction';
+import { ReactionsDialog } from '../ReactionDialog';
+import { ReactionPicker } from '../ReactionPicker';
+import { ReactionSummaryView } from '../ReactionSummary/';
+var wrapperStyle = null;
+var noFlexWrapStyles = null;
+var noContainerPositionStyles = null;
+var reactionPickerStyle = null;
+
+/**
+ * Set of all available UFO experiences relating to Reactions Dialog
+ */
+export var ufoExperiences = {
+  /**
+   * Experience when a reaction dialog is opened
+   */
+  openDialog: ReactionDialogOpened,
+  /**
+   * Experience when a reaction changed/fetched from inside the modal dialog
+   */
+  selectedReactionChangeInsideDialog: ReactionDialogSelectedReactionChanged
+};
+
+/**
+ * Test id for wrapper Reactions div
+ */
+export var RENDER_REACTIONS_TESTID = 'render-reactions';
+/**
+ * Test id for the view all reacted user to trigger the dialog
+ */
+export var RENDER_VIEWALL_REACTED_USERS_DIALOG = 'viewall-reacted-users-dialog';
+
+/**
+ * Test id for summary view of reactions
+ */
+export var RENDER_REACTIONS_SUMMARY_TESTID = 'reaction-summary-view';
+/**
+ * Get content of the tooltip
+ */
+export function getTooltip(status, errorMessage, tooltipContent) {
+  switch (status) {
+    case ReactionStatus.error:
+      return errorMessage || /*#__PURE__*/React.createElement(FormattedMessage, messages.unexpectedError);
+    // When reaction is not available don't show any tooltip (e.g. Archive page in Confluence)
+    case ReactionStatus.disabled:
+      return null;
+    case ReactionStatus.notLoaded:
+    case ReactionStatus.loading:
+      return /*#__PURE__*/React.createElement(FormattedMessage, messages.loadingReactions);
+    case ReactionStatus.ready:
+      return !!tooltipContent ? tooltipContent : /*#__PURE__*/React.createElement(FormattedMessage, messages.addReaction);
+  }
+}
+
+/**
+ * Renders list of reactions
+ */
+export var Reactions = /*#__PURE__*/React.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 = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedEmojiId = _useState2[0],
+    setSelectedEmojiId = _useState2[1];
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var openTime = useRef();
+  var renderTime = useRef();
+  useEffect(function () {
+    if (status === ReactionStatus.notLoaded) {
+      loadReaction();
+    }
+  }, [status, loadReaction]);
+  useEffect(function () {
+    if (status !== ReactionStatus.ready) {
+      renderTime.current = Date.now();
+    } else {
+      var isSSR = process.env.REACT_SSR && fg('platform_fix_analytics_error');
+      if (isSampled(SAMPLING_RATE_REACTIONS_RENDERED_EXP) && !isSSR) {
+        var _renderTime$current;
+        createAndFireSafe(createAnalyticsEvent, 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 = useCallback(function (emojiId) {
+    getReactionDetails(emojiId);
+  }, [getReactionDetails]);
+  var handleReactionFocused = useCallback(function (emojiId) {
+    getReactionDetails(emojiId);
+  }, [getReactionDetails]);
+  var handlePickerOpen = useCallback(function () {
+    openTime.current = Date.now();
+    createAndFireSafe(createAnalyticsEvent, createPickerButtonClickedEvent, reactions.length);
+  }, [createAnalyticsEvent, reactions]);
+  var handleOnCancel = useCallback(function () {
+    createAndFireSafe(createAnalyticsEvent, createPickerCancelledEvent, openTime.current);
+    openTime.current = undefined;
+  }, [createAnalyticsEvent]);
+  var handleOnMore = useCallback(function () {
+    createAndFireSafe(createAnalyticsEvent, createPickerMoreClickedEvent, openTime.current);
+  }, [createAnalyticsEvent]);
+  var handleOnSelection = useCallback(function (emojiId, source) {
+    createAndFireSafe(createAnalyticsEvent, 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 = 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 = 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 = useMemo(function () {
+    return _toConsumableArray(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.createElement(UFOSegment, {
+    name: "reactions"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": RENDER_REACTIONS_TESTID,
+    className: ax(["_2rkoo7ao _1e0c1txw _1n261g80 _kqswh2mm _4cvr1h6o _19pkr5cr _13vtidpf", noWrap && "_1n261q9c", noRelativeContainer && "_kqswpfqs"])
+  }, !onlyRenderPicker && (shouldShowSummaryView ? /*#__PURE__*/React.createElement("div", {
+    "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
+  }, /*#__PURE__*/React.createElement(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 !== ReactionStatus.ready,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
+    emojiPickerSize: emojiPickerSize,
+    onOpen: handlePickerOpen,
+    useButtonAlignmentStyling: useButtonAlignmentStyling
+  })) : memorizedReactions.map(function (reaction) {
+    return /*#__PURE__*/React.createElement(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.createElement(ReactionPicker, {
+    emojiProvider: emojiProvider,
+    allowAllEmojis: allowAllEmojis,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    disabled: status !== 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: ax(["_1e0c1o8l _19pk1b66"])
+  }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
+    name: "reactions-dialog"
+  }, /*#__PURE__*/React.createElement(ReactionsDialog, {
+    selectedEmojiId: selectedEmojiId,
+    reactions: sortedReactions,
+    emojiProvider: emojiProvider,
+    handleCloseReactionsDialog: handleCloseReactionsDialog,
+    handleSelectReaction: handleSelectReactionInDialog,
+    handlePaginationChange: handlePaginationChange,
+    ProfileCardWrapper: ProfileCardWrapper
+  })))));
+});

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

@@ -0,0 +1,24 @@
+/* StaticReaction.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./StaticReaction.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  staticReaction: "_1reo15vq _18m915vq _19itglyw _2rkoglpi _1e0c1txw _2lx2vrvc _4cvr1y6m _1ul914no _4t3i1tcg _syaz1gjq _1pfh1b66 _12l21b66 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _d0al73ad"
+};
+export var 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(Box, _extends({
+    onMouseEnter: onMouseEnter,
+    onFocus: onFocus,
+    testId: testId,
+    xcss: styles.staticReaction,
+    backgroundColor: "color.background.neutral.subtle"
+  }, dataAttributes), children);
+};

package/dist/esm/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -7,9 +7,12 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import { Reactions, UfoErrorBoundary } from '../../components';
+import { UfoErrorBoundary } from '../../components';
+import { Reactions as EmotionReactions } from '../../components/Reactions';
+import { Reactions as CompiledReactions } from '../../components/compiled/Reactions';
 import { ufoExperiences } from '../../store';
 import { ReactionStatus } from '../../types';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 /**
  * State Props required for <Reactions />
@@ -211,7 +214,9 @@ export var ConnectedReactionsView = function ConnectedReactionsView(props) {
     }
   }, /*#__PURE__*/React.createElement(UfoErrorBoundary, {
     experiences: experienceInstance.current ? [experienceInstance.current] : []
-  }, stateData && dispatchData ? /*#__PURE__*/React.createElement(Reactions, _extends({
+  }, stateData && dispatchData && fg('platform_editor_css_migrate_reactions') ? /*#__PURE__*/React.createElement(CompiledReactions, _extends({
+    key: "".concat(containerAri, "|").concat(ari)
+  }, rest, dispatchData, stateData)) : null, stateData && dispatchData && !fg('platform_editor_css_migrate_reactions') ? /*#__PURE__*/React.createElement(EmotionReactions, _extends({
     key: "".concat(containerAri, "|").concat(ari)
   }, rest, dispatchData, stateData)) : null));
 };

package/dist/esm/index.js

@@ -1,7 +1,15 @@
 import { DefaultReactions, DefaultReactionsByShortName, ExtendedReactions, ExtendedReactionsByShortName, NUMBER_OF_REACTIONS_TO_DISPLAY, SAMPLING_RATE_REACTIONS_RENDERED_EXP, TOOLTIP_USERS_LIMIT } from './shared/constants';
 import { ComponentName, ExperienceName, PickerRender, ReactionsAdd, ReactionDetailsFetch, ReactionDialogOpened, ReactionDialogSelectedReactionChanged, ReactionsRemove, ReactionsRendered, sampledReactionsRendered } from './ufo';
+import { Reaction as EmotionReaction } from './components/Reaction';
+import { Reaction as CompiledReaction } from './components/compiled/Reaction';
+import { Reactions as EmotionReactions } from './components/Reactions';
+import { Reactions as CompiledReactions } from './components/compiled/Reactions';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+var Reaction = componentWithFG('platform_editor_css_migrate_reactions', CompiledReaction, EmotionReaction);
+var Reactions = componentWithFG('platform_editor_css_migrate_reactions', CompiledReactions, EmotionReactions);
 export { ReactionServiceClient } from './client';
-export { Reaction, ReactionPicker, Reactions } from './components';
+export { Reaction, Reactions };
+export { ReactionPicker } from './components/ReactionPicker/ReactionPicker';
 export { useCloseManager } from './hooks/useCloseManager';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
 export { MemoryReactionsStore, ReactionConsumer } from './store';

package/dist/types/components/ReactionPicker/ReactionPicker.d.ts

@@ -71,11 +71,7 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      */
     showAddReactionText?: boolean;
     /**
-     * Optional prop for controlling if the picker hover border will be rounded
-     */
-    showRoundTrigger?: boolean;
-    /**
-     * Optional prop for controlling the picker location, gets overrided by showRoundTrigger
+     * Optional prop for controlling the picker location
      */
     reactionPickerPlacement?: Placement;
     /**

package/dist/types/components/ReactionSummary/ReactionSummaryViewEmojiPicker.d.ts

@@ -1,6 +1,6 @@
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { type ReactionPickerProps } from '../ReactionPicker';
 interface ReactionSummaryViewEmojiPickerProps extends ReactionPickerProps {
 }
-export declare const ReactionSummaryViewEmojiPicker: ({ emojiProvider, onSelection, emojiPickerSize, disabled, reactionPickerTriggerIcon, tooltipContent, onOpen, }: ReactionSummaryViewEmojiPickerProps) => jsx.JSX.Element;
+export declare const ReactionSummaryViewEmojiPicker: ({ emojiProvider, onSelection, emojiPickerSize, disabled, reactionPickerTriggerIcon, tooltipContent, onOpen, }: ReactionSummaryViewEmojiPickerProps) => React.JSX.Element;
 export {};

package/dist/types/components/Reactions/Reactions.d.ts

@@ -139,11 +139,7 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      */
     onlyRenderPicker?: boolean;
     /**
-     * Optional prop for controlling if the picker hover border will be rounded
-     */
-    showRoundTrigger?: boolean;
-    /**
-     * Optional prop for controlling the placement of the reaction picker, is overriden by showRoundTrigger
+     * Optional prop for controlling the placement of the reaction picker
      */
     reactionPickerPlacement?: Placement;
     /**
@@ -187,4 +183,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, reactionPickerPlacement, reactionsPickerPreventOverflowOptions, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerToolipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, reactionPickerPlacement, reactionsPickerPreventOverflowOptions, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerToolipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, }: ReactionsProps) => jsx.JSX.Element>;

package/dist/types/components/Trigger/Trigger.d.ts

@@ -45,10 +45,6 @@ export interface TriggerProps {
      * Optional prop for applying subtle styling to reaction picker
      */
     subtleReactionsSummaryAndPicker?: boolean;
-    /**
-     * Optional prop for controlling if the picker hover border will be rounded
-     */
-    showRoundTrigger?: boolean;
     /**
      * Option prop for controlling the reaction picker selection style
      */

package/dist/types/components/compiled/Counter.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import { type Durations } from '@atlaskit/motion';
+/**
+ * Test id for component top level div
+ */
+export declare const RENDER_COMPONENT_WRAPPER = "counter-wrapper";
+/**
+ * Test id for wrapper div of the counter inside the slider
+ */
+export declare const RENDER_COUNTER_TESTID = "counter-container";
+/**
+ * Counter label value wrapper div
+ */
+export declare const RENDER_LABEL_TESTID = "counter_label_wrapper";
+export interface CounterProps {
+    /**
+     * Count of emoji been selected
+     */
+    value: number;
+    /**
+     * Has the emoji been selected by given user (defaults to false)
+     */
+    highlight?: boolean;
+    /**
+     * Max threshold of selections to show before having a label (defaults to 1000)
+     */
+    limit?: number;
+    /**
+     * Label to show when the value surpasses the limit value (defaults to "1k+")
+     */
+    overLimitLabel?: string;
+    /**
+     * Optional wrapper class name
+     */
+    className?: string;
+    /**
+     * Duration of how long the motion will take (defaults to "medium" from '@atlaskit/motion')
+     */
+    animationDuration?: Durations;
+    /**
+     * Optional prop to use a darker text color for the counter
+     */
+    useDarkerFont?: boolean;
+    /**
+     * Optional prop to show updated styling for counter
+     */
+    useUpdatedStyles?: boolean;
+}
+/**
+ * Display reaction count next to the emoji button
+ */
+export declare const Counter: ({ highlight, limit, overLimitLabel, className, value, animationDuration, useDarkerFont, useUpdatedStyles, }: CounterProps) => JSX.Element;

package/dist/types/components/compiled/FlashAnimation.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type PropsWithChildren } from 'react';
+export type FlashAnimationProps = PropsWithChildren<{
+    /**
+     * Optional wrapper div class anme
+     */
+    className?: string;
+    /**
+     * Show custom animation or render as standard without animation (defaults to false)
+     */
+    flash?: boolean;
+}>;
+/**
+ * Test id for wrapper FlashAnimation div
+ */
+export declare const RENDER_FLASHANIMATION_TESTID = "flash-animation";
+/**
+ * Flash animation background component. See Reaction component for usage.
+ */
+export declare const FlashAnimation: (props: FlashAnimationProps) => JSX.Element;

package/dist/types/components/compiled/Reaction.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+import { type EmojiProvider } from '@atlaskit/emoji';
+import { type ReactionSummary, type ReactionClick, type ReactionMouseEnter } from '../../types';
+import { type ReactionFocused } from '../../types/reaction';
+import { type OpenReactionsDialogOptions } from '../Reactions';
+/**
+ * Test id for Reaction item wrapper div
+ */
+export declare const RENDER_REACTION_TESTID = "render_reaction_wrapper";
+export interface ReactionProps {
+    /**
+     * Data for the reaction
+     */
+    reaction: ReactionSummary;
+    /**
+     * Provider for loading emojis
+     */
+    emojiProvider: Promise<EmojiProvider>;
+    /**
+     * event handler when the emoji button is clicked
+     */
+    onClick: ReactionClick;
+    /**
+     * Optional event when the mouse cursor hovers over the reaction
+     */
+    onMouseEnter?: ReactionMouseEnter;
+    /**
+     * Optional event when focused the reaction
+     */
+    onFocused?: ReactionFocused;
+    /**
+     * Show custom animation or render as standard without animation (defaults to false)
+     */
+    flash?: boolean;
+    /**
+     * Show a floating emoji particle effect (usually in response to a new reaction) (defaults to false)
+     */
+    showParticleEffect?: boolean;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for enabling the Reactions Dialog
+     */
+    allowUserDialog?: boolean;
+    /**
+     * Optional function when the user wants to open the Reactions Dialog
+     */
+    handleOpenReactionsDialog?: (options?: OpenReactionsDialogOptions) => void;
+    /**
+     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
+     */
+    isViewOnly?: boolean;
+    /**
+     * Optional prop for controlling if the reaction displayed is a default one and should not have a border
+     */
+    showSubtleStyle?: boolean;
+}
+/**
+ * Render an emoji reaction button
+ */
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, isViewOnly, showSubtleStyle, }: ReactionProps) => JSX.Element;

package/dist/types/components/compiled/ReactionButton.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { type ReactionProps } from './Reaction';
+interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+    ariaLabel: string;
+    ariaPressed?: boolean;
+    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    dataAttributes?: {
+        [key: string]: string;
+    };
+    testId?: string;
+    children?: React.ReactNode;
+    showSubtleStyle?: boolean;
+    showOpaqueBackground?: boolean;
+    reacted?: boolean;
+}
+export declare const ReactionButton: ({ onClick, flash, showSubtleStyle, showOpaqueBackground, reacted, ariaLabel, ariaPressed, onMouseEnter, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => JSX.Element;
+export {};