@atlaskit/reactions 22.6.2 → 22.7.0

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

@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { OnCloseHandler } from '@atlaskit/modal-dialog';
-import { onDialogSelectReactionChange, ReactionStatus, ReactionClick, ReactionSummary, QuickReactionEmojiSummary } from '../../types';
-import { ReactionProps } from '../Reaction';
-import { ReactionPickerProps } from '../ReactionPicker';
-import { SelectorProps } from '../Selector';
+import { type OnCloseHandler } from '@atlaskit/modal-dialog';
+import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary } from '../../types';
+import { type ReactionProps } from '../Reaction';
+import { type ReactionPickerProps } from '../ReactionPicker';
+import { type SelectorProps } from '../Selector';
 /**
  * Set of all available UFO experiences relating to reactions dialog
  */
@@ -56,6 +56,11 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional emoji reactions list to show custom animation or render as standard (key => emoji string "id", value => true/false to show custom animation)
      */
     flash?: Record<string, boolean>;
+    /**
+     * Optional emoji reactions list to show floating emoji particle effect (key => emoji string "id", value => true/false to show the particle effect).
+     * Generally used for newly added reactions.
+     */
+    particleEffectByEmoji?: Record<string, boolean>;
     /**
      * Optional event to get reaction details for an emoji
      * @param emojiId current reaction emoji id
@@ -93,4 +98,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -1,8 +1,8 @@
 import { jsx } from '@emotion/react';
-import { EmojiProvider } from '@atlaskit/emoji';
-import { ReactionSummary, ReactionClick, ReactionMouseEnter } from '../../types';
-import { ReactionTooltipProps } from '../ReactionTooltip';
-import { ReactionFocused } from '../../types/reaction';
+import { type EmojiProvider } from '@atlaskit/emoji';
+import { type ReactionSummary, type ReactionClick, type ReactionMouseEnter } from '../../types';
+import { type ReactionTooltipProps } from '../ReactionTooltip';
+import { type ReactionFocused } from '../../types/reaction';
 /**
  * Test id for Reaction item wrapper div
  */
@@ -36,6 +36,10 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
      * 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 function when the user wants to see more users in a modal
      */
@@ -44,4 +48,4 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, className, flash, handleUserListClick, allowUserDialog, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, className, flash, showParticleEffect, handleUserListClick, allowUserDialog, }: ReactionProps) => jsx.JSX.Element;

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

@@ -3,8 +3,10 @@
  * Padding and line height are set within the child components
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
+export declare const containerStyle: import("@emotion/react").SerializedStyles;
 export declare const emojiStyle: import("@emotion/react").SerializedStyles;
 export declare const reactionStyle: import("@emotion/react").SerializedStyles;
 export declare const reactedStyle: import("@emotion/react").SerializedStyles;
 export declare const flashHeight: number;
 export declare const flashStyle: import("@emotion/react").SerializedStyles;
+export declare const emojiNoReactionStyle: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { type EmojiProvider, type EmojiId } from '@atlaskit/emoji';
+import { jsx } from '@emotion/react';
+export declare const PARTICLE_COUNT = 4;
+interface ReactionParticleEffectProps {
+    /**
+     * ID of the emoji to show within the particle effect
+     */
+    emojiId: EmojiId;
+    /**
+     * Provider for loading emojis
+     */
+    emojiProvider: Promise<EmojiProvider>;
+}
+export declare const ReactionParticleEffect: ({ emojiProvider, emojiId }: ReactionParticleEffectProps) => jsx.JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { ReactionParticleEffect } from './ReactionParticleEffect';

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

@@ -0,0 +1,2 @@
+export declare const containerStyle: import("@emotion/react").SerializedStyles;
+export declare const reactionParticleStyle: import("@emotion/react").SerializedStyles;

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

@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { OnCloseHandler } from '@atlaskit/modal-dialog';
-import { onDialogSelectReactionChange, ReactionStatus, ReactionClick, ReactionSummary, QuickReactionEmojiSummary } from '../../types';
-import { ReactionProps } from '../Reaction';
-import { ReactionPickerProps } from '../ReactionPicker';
-import { SelectorProps } from '../Selector';
+import { type OnCloseHandler } from '@atlaskit/modal-dialog';
+import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary } from '../../types';
+import { type ReactionProps } from '../Reaction';
+import { type ReactionPickerProps } from '../ReactionPicker';
+import { type SelectorProps } from '../Selector';
 /**
  * Set of all available UFO experiences relating to reactions dialog
  */
@@ -56,6 +56,11 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional emoji reactions list to show custom animation or render as standard (key => emoji string "id", value => true/false to show custom animation)
      */
     flash?: Record<string, boolean>;
+    /**
+     * Optional emoji reactions list to show floating emoji particle effect (key => emoji string "id", value => true/false to show the particle effect).
+     * Generally used for newly added reactions.
+     */
+    particleEffectByEmoji?: Record<string, boolean>;
     /**
      * Optional event to get reaction details for an emoji
      * @param emojiId current reaction emoji id
@@ -93,4 +98,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, }: ReactionsProps) => jsx.JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "22.6.2",
+  "version": "22.7.0",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -22,7 +22,7 @@
   },
   "atlaskit:src": "src/index.ts",
   "atlassian": {
-    "team": "Foundational Elements",
+    "team": "Editor: Collaboration",
     "releaseModel": "continuous",
     "website": {
       "name": "Reactions"
@@ -36,18 +36,18 @@
     "@atlaskit/analytics-gas-types": "^5.1.0",
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.3.0",
-    "@atlaskit/avatar": "^21.5.0",
+    "@atlaskit/avatar": "^21.6.0",
     "@atlaskit/button": "^17.14.0",
     "@atlaskit/emoji": "^67.6.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/modal-dialog": "^12.11.0",
+    "@atlaskit/modal-dialog": "^12.13.0",
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/popper": "^5.5.0",
-    "@atlaskit/spinner": "^16.0.0",
-    "@atlaskit/tabs": "^16.0.0",
+    "@atlaskit/spinner": "^16.1.0",
+    "@atlaskit/tabs": "^16.1.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.43.0",
-    "@atlaskit/tooltip": "^18.2.0",
+    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/tooltip": "^18.3.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/util-service-support": "^6.2.0",
     "@babel/runtime": "^7.0.0",