@atlaskit/reactions 34.0.1 → 34.0.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/reactions
 
+## 34.0.2
+
+### Patch Changes
+
+- [`64e0668502293`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/64e0668502293) -
+  Add getOptimisticImageURL prop to Reactions and optimisticImageURL prop to Reaction and
+  ReactionParticleEffect components, enabling reaction emoji to render immediately without waiting
+  for the catalogue to load
+
 ## 34.0.1
 
 ### Patch Changes

package/dist/cjs/components/Reaction.js

@@ -62,7 +62,8 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
     _ref$isViewOnly = _ref.isViewOnly,
     isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
-    showSubtleStyle = _ref.showSubtleStyle;
+    showSubtleStyle = _ref.showSubtleStyle,
+    optimisticImageURL = _ref.optimisticImageURL;
   var intl = (0, _reactIntl.useIntl)();
   var hoverStart = (0, _react.useRef)();
   var focusStart = (0, _react.useRef)();
@@ -143,7 +144,8 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
   }, /*#__PURE__*/React.createElement(_emoji.ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
-    fitToHeight: _constants.RESOURCED_EMOJI_COMPACT_HEIGHT
+    fitToHeight: _constants.RESOURCED_EMOJI_COMPACT_HEIGHT,
+    optimisticImageURL: optimisticImageURL
   })), /*#__PURE__*/React.createElement(_Counter.Counter, {
     value: reaction.count,
     highlight: !isViewOnly && reaction.reacted
@@ -162,7 +164,8 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     as: (0, _platformFeatureFlags.fg)('jfp_a11y_team_comment_actions_semantic') ? 'li' : undefined
   }, showParticleEffect && /*#__PURE__*/React.createElement(_ReactionParticleEffect.ReactionParticleEffect, {
     emojiId: emojiId,
-    emojiProvider: emojiProvider
+    emojiProvider: emojiProvider,
+    optimisticImageURL: optimisticImageURL
   }), /*#__PURE__*/React.createElement(_ReactionTooltip.ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction,

package/dist/cjs/components/ReactionParticleEffect.js

@@ -20,7 +20,8 @@ var reactionParticleStyle = null;
 var PARTICLE_COUNT = exports.PARTICLE_COUNT = 4;
 var ReactionParticleEffect = exports.ReactionParticleEffect = function ReactionParticleEffect(_ref) {
   var emojiProvider = _ref.emojiProvider,
-    emojiId = _ref.emojiId;
+    emojiId = _ref.emojiId,
+    optimisticImageURL = _ref.optimisticImageURL;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_kqswh2mm _1ltvftgi _1pbyifev _m602idpf"])
   }, (0, _toConsumableArray2.default)(Array(PARTICLE_COUNT)).map(function (_, index) {
@@ -30,7 +31,8 @@ var ReactionParticleEffect = exports.ReactionParticleEffect = function ReactionP
     }, /*#__PURE__*/React.createElement(_emoji.ResourcedEmoji, {
       emojiProvider: emojiProvider,
       emojiId: emojiId,
-      fitToHeight: _constants2.RESOURCED_EMOJI_COMPACT_HEIGHT
+      fitToHeight: _constants2.RESOURCED_EMOJI_COMPACT_HEIGHT,
+      optimisticImageURL: optimisticImageURL
     }));
   }));
 };

package/dist/cjs/components/Reactions.js

@@ -149,6 +149,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     _ref$isListItem = _ref.isListItem,
     isListItem = _ref$isListItem === void 0 ? false : _ref$isListItem,
     summaryGetOptimisticImageURL = _ref.summaryGetOptimisticImageURL,
+    getOptimisticImageURL = _ref.getOptimisticImageURL,
     reactionPickerPlacement = _ref.reactionPickerPlacement,
     summaryButtonIconAfter = _ref.summaryButtonIconAfter,
     _ref$renderParticleEf = _ref.renderParticleEffectOnSummaryView,
@@ -388,7 +389,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
       handleOpenReactionsDialog: _handleOpenReactionsDialog,
       isViewOnly: isViewOnly,
-      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
+      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
+      optimisticImageURL: (0, _platformFeatureFlags.fg)('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
     });
   })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, memorizedReactions.map(function (reaction) {
     return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
@@ -404,7 +406,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
       handleOpenReactionsDialog: _handleOpenReactionsDialog,
       isViewOnly: isViewOnly,
-      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
+      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
+      optimisticImageURL: (0, _platformFeatureFlags.fg)('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
     });
   }))), shouldShowPicker && /*#__PURE__*/_react.default.createElement(_ReactionPicker.ReactionPicker, {
     emojiProvider: emojiProvider,

package/dist/es2019/components/Reaction.js

@@ -44,7 +44,8 @@ export const Reaction = ({
   allowUserDialog,
   handleOpenReactionsDialog,
   isViewOnly = false,
-  showSubtleStyle
+  showSubtleStyle,
+  optimisticImageURL
 }) => {
   const intl = useIntl();
   const hoverStart = useRef();
@@ -110,7 +111,8 @@ export const Reaction = ({
   }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
-    fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT
+    fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT,
+    optimisticImageURL: optimisticImageURL
   })), /*#__PURE__*/React.createElement(Counter, {
     value: reaction.count,
     highlight: !isViewOnly && reaction.reacted
@@ -129,7 +131,8 @@ export const Reaction = ({
     as: fg('jfp_a11y_team_comment_actions_semantic') ? 'li' : undefined
   }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
     emojiId: emojiId,
-    emojiProvider: emojiProvider
+    emojiProvider: emojiProvider,
+    optimisticImageURL: optimisticImageURL
   }), /*#__PURE__*/React.createElement(ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction,

package/dist/es2019/components/ReactionParticleEffect.js

@@ -10,7 +10,8 @@ const reactionParticleStyle = null;
 export const PARTICLE_COUNT = 4;
 export const ReactionParticleEffect = ({
   emojiProvider,
-  emojiId
+  emojiId,
+  optimisticImageURL
 }) => /*#__PURE__*/React.createElement("div", {
   className: ax(["_kqswh2mm _1ltvftgi _1pbyifev _m602idpf"])
 }, [...Array(PARTICLE_COUNT)].map((_, index) => {
@@ -20,6 +21,7 @@ export const ReactionParticleEffect = ({
   }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
-    fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT
+    fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT,
+    optimisticImageURL: optimisticImageURL
   }));
 }));

package/dist/es2019/components/Reactions.js

@@ -112,6 +112,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
   hoverableSummaryView = false,
   isListItem = false,
   summaryGetOptimisticImageURL,
+  getOptimisticImageURL,
   reactionPickerPlacement,
   summaryButtonIconAfter,
   renderParticleEffectOnSummaryView = false,
@@ -331,7 +332,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
     allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
     handleOpenReactionsDialog: handleOpenReactionsDialog,
     isViewOnly: isViewOnly,
-    showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
+    showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
+    optimisticImageURL: fg('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
   }))) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
     key: reaction.emojiId,
     reaction: reaction,
@@ -345,7 +347,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
     allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
     handleOpenReactionsDialog: handleOpenReactionsDialog,
     isViewOnly: isViewOnly,
-    showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
+    showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
+    optimisticImageURL: fg('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
   })))), shouldShowPicker && /*#__PURE__*/React.createElement(ReactionPicker, {
     emojiProvider: emojiProvider,
     allowAllEmojis: allowAllEmojis,

package/dist/esm/components/Reaction.js

@@ -53,7 +53,8 @@ export var Reaction = function Reaction(_ref) {
     handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
     _ref$isViewOnly = _ref.isViewOnly,
     isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
-    showSubtleStyle = _ref.showSubtleStyle;
+    showSubtleStyle = _ref.showSubtleStyle,
+    optimisticImageURL = _ref.optimisticImageURL;
   var intl = useIntl();
   var hoverStart = useRef();
   var focusStart = useRef();
@@ -134,7 +135,8 @@ export var Reaction = function Reaction(_ref) {
   }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
-    fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT
+    fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT,
+    optimisticImageURL: optimisticImageURL
   })), /*#__PURE__*/React.createElement(Counter, {
     value: reaction.count,
     highlight: !isViewOnly && reaction.reacted
@@ -153,7 +155,8 @@ export var Reaction = function Reaction(_ref) {
     as: fg('jfp_a11y_team_comment_actions_semantic') ? 'li' : undefined
   }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
     emojiId: emojiId,
-    emojiProvider: emojiProvider
+    emojiProvider: emojiProvider,
+    optimisticImageURL: optimisticImageURL
   }), /*#__PURE__*/React.createElement(ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction,

package/dist/esm/components/ReactionParticleEffect.js

@@ -11,7 +11,8 @@ var reactionParticleStyle = null;
 export var PARTICLE_COUNT = 4;
 export var ReactionParticleEffect = function ReactionParticleEffect(_ref) {
   var emojiProvider = _ref.emojiProvider,
-    emojiId = _ref.emojiId;
+    emojiId = _ref.emojiId,
+    optimisticImageURL = _ref.optimisticImageURL;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_kqswh2mm _1ltvftgi _1pbyifev _m602idpf"])
   }, _toConsumableArray(Array(PARTICLE_COUNT)).map(function (_, index) {
@@ -21,7 +22,8 @@ export var ReactionParticleEffect = function ReactionParticleEffect(_ref) {
     }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
       emojiProvider: emojiProvider,
       emojiId: emojiId,
-      fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT
+      fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT,
+      optimisticImageURL: optimisticImageURL
     }));
   }));
 };

package/dist/esm/components/Reactions.js

@@ -138,6 +138,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     _ref$isListItem = _ref.isListItem,
     isListItem = _ref$isListItem === void 0 ? false : _ref$isListItem,
     summaryGetOptimisticImageURL = _ref.summaryGetOptimisticImageURL,
+    getOptimisticImageURL = _ref.getOptimisticImageURL,
     reactionPickerPlacement = _ref.reactionPickerPlacement,
     summaryButtonIconAfter = _ref.summaryButtonIconAfter,
     _ref$renderParticleEf = _ref.renderParticleEffectOnSummaryView,
@@ -377,7 +378,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
       handleOpenReactionsDialog: _handleOpenReactionsDialog,
       isViewOnly: isViewOnly,
-      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
+      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
+      optimisticImageURL: fg('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
     });
   })) : /*#__PURE__*/React.createElement(React.Fragment, null, memorizedReactions.map(function (reaction) {
     return /*#__PURE__*/React.createElement(Reaction, {
@@ -393,7 +395,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
       handleOpenReactionsDialog: _handleOpenReactionsDialog,
       isViewOnly: isViewOnly,
-      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
+      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0,
+      optimisticImageURL: fg('platform_reactions_optimistic_url') ? getOptimisticImageURL === null || getOptimisticImageURL === void 0 ? void 0 : getOptimisticImageURL(reaction.emojiId) : undefined
     });
   }))), shouldShowPicker && /*#__PURE__*/React.createElement(ReactionPicker, {
     emojiProvider: emojiProvider,

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

@@ -55,8 +55,13 @@ export interface ReactionProps {
      * Optional prop for controlling if the reaction displayed is a default one and should not have a border
      */
     showSubtleStyle?: boolean;
+    /**
+     * Optional URL to optimistically render the emoji image before the catalogue arrives.
+     * When provided, the emoji will render immediately without waiting for the emoji provider to resolve.
+     */
+    optimisticImageURL?: string;
 }
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, isViewOnly, showSubtleStyle, }: ReactionProps) => JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, isViewOnly, showSubtleStyle, optimisticImageURL, }: ReactionProps) => JSX.Element;

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

@@ -13,6 +13,10 @@ interface ReactionParticleEffectProps {
      * Provider for loading emojis
      */
     emojiProvider: Promise<EmojiProvider>;
+    /**
+     * Optional URL to optimistically render the emoji image before the catalogue arrives.
+     */
+    optimisticImageURL?: string;
 }
-export declare const ReactionParticleEffect: ({ emojiProvider, emojiId, }: ReactionParticleEffectProps) => JSX.Element;
+export declare const ReactionParticleEffect: ({ emojiProvider, emojiId, optimisticImageURL, }: ReactionParticleEffectProps) => JSX.Element;
 export {};

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

@@ -171,6 +171,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop to optimistically render the image URL for a given emoji id. Typically used in SSR before the emoji Provider resolves & the real image is loaded.
      */
     summaryGetOptimisticImageURL?: (emojiId: string) => string;
+    /**
+     * Optional function to get an optimistic image URL for a reaction emoji, used to render immediately without waiting for the catalogue.
+     */
+    getOptimisticImageURL?: (emojiId: string) => string;
     /**
      * Enables a summary view for displaying reactions. If enabled and the number of reactions meets or exceeds the summaryViewThreshold, reactions will be shown in a more aggregated format.
      */
@@ -199,4 +203,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, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, isListItem, summaryGetOptimisticImageURL, reactionPickerPlacement, summaryButtonIconAfter, renderParticleEffectOnSummaryView, reactionPickerPopperZIndex, }: ReactionsProps) => 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, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, isListItem, summaryGetOptimisticImageURL, getOptimisticImageURL, reactionPickerPlacement, summaryButtonIconAfter, renderParticleEffectOnSummaryView, reactionPickerPopperZIndex, }: ReactionsProps) => JSX.Element>;

package/dist/types-ts4.5/components/Reaction.d.ts

@@ -55,8 +55,13 @@ export interface ReactionProps {
      * Optional prop for controlling if the reaction displayed is a default one and should not have a border
      */
     showSubtleStyle?: boolean;
+    /**
+     * Optional URL to optimistically render the emoji image before the catalogue arrives.
+     * When provided, the emoji will render immediately without waiting for the emoji provider to resolve.
+     */
+    optimisticImageURL?: string;
 }
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, isViewOnly, showSubtleStyle, }: ReactionProps) => JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, isViewOnly, showSubtleStyle, optimisticImageURL, }: ReactionProps) => JSX.Element;

package/dist/types-ts4.5/components/ReactionParticleEffect.d.ts

@@ -13,6 +13,10 @@ interface ReactionParticleEffectProps {
      * Provider for loading emojis
      */
     emojiProvider: Promise<EmojiProvider>;
+    /**
+     * Optional URL to optimistically render the emoji image before the catalogue arrives.
+     */
+    optimisticImageURL?: string;
 }
-export declare const ReactionParticleEffect: ({ emojiProvider, emojiId, }: ReactionParticleEffectProps) => JSX.Element;
+export declare const ReactionParticleEffect: ({ emojiProvider, emojiId, optimisticImageURL, }: ReactionParticleEffectProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/components/Reactions.d.ts

@@ -171,6 +171,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop to optimistically render the image URL for a given emoji id. Typically used in SSR before the emoji Provider resolves & the real image is loaded.
      */
     summaryGetOptimisticImageURL?: (emojiId: string) => string;
+    /**
+     * Optional function to get an optimistic image URL for a reaction emoji, used to render immediately without waiting for the catalogue.
+     */
+    getOptimisticImageURL?: (emojiId: string) => string;
     /**
      * Enables a summary view for displaying reactions. If enabled and the number of reactions meets or exceeds the summaryViewThreshold, reactions will be shown in a more aggregated format.
      */
@@ -199,4 +203,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, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, isListItem, summaryGetOptimisticImageURL, reactionPickerPlacement, summaryButtonIconAfter, renderParticleEffectOnSummaryView, reactionPickerPopperZIndex, }: ReactionsProps) => 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, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, isListItem, summaryGetOptimisticImageURL, getOptimisticImageURL, reactionPickerPlacement, summaryButtonIconAfter, renderParticleEffectOnSummaryView, reactionPickerPopperZIndex, }: ReactionsProps) => JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "34.0.1",
+	"version": "34.0.2",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -114,6 +114,9 @@
 		"start:edge": "cd ../../ && PROXY_TARGET_ENV=edge yarn start:webpack reactions --proxy ./packages/elements/reactions/proxy.ts"
 	},
 	"platform-feature-flags": {
+		"platform_reactions_optimistic_url": {
+			"type": "boolean"
+		},
 		"platform-component-visual-refresh": {
 			"type": "boolean"
 		},