@atlaskit/reactions 33.2.12 → 33.2.13

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/reactions
 
+## 33.2.13
+
+### Patch Changes
+
+- [`0fdcb6f2f96fd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0fdcb6f2f96fd) -
+  Sorted type and interface props to improve Atlaskit docs
+- Updated dependencies
+
 ## 33.2.12
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -3,9 +3,9 @@
 	"compilerOptions": {
 		"declaration": true,
 		"target": "es5",
-		"composite": true,
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__reactions",
-		"rootDir": "../"
+		"rootDir": "../",
+		"composite": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/reactions";
-var packageVersion = "33.2.11";
+var packageVersion = "33.2.12";
 /**
  * TODO: move to utility package?
  * A random sampling function

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 = "33.2.11";
+const packageVersion = "33.2.12";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/analytics/index.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "33.2.11";
+var packageVersion = "33.2.12";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -13,9 +13,13 @@ export declare const RENDER_COUNTER_TESTID = "counter-container";
 export declare const RENDER_LABEL_TESTID = "counter_label_wrapper";
 export interface CounterProps {
     /**
-     * Count of emoji been selected
+     * Duration of how long the motion will take (defaults to "medium" from '@atlaskit/motion')
      */
-    value: number;
+    animationDuration?: Durations;
+    /**
+     * Optional wrapper class name
+     */
+    className?: string;
     /**
      * Has the emoji been selected by given user (defaults to false)
      */
@@ -28,14 +32,6 @@ export interface CounterProps {
      * 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
      */
@@ -44,6 +40,10 @@ export interface CounterProps {
      * Optional prop to show updated styling for counter
      */
     useUpdatedStyles?: boolean;
+    /**
+     * Count of emoji been selected
+     */
+    value: number;
 }
 /**
  * Display reaction count next to the emoji button

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

@@ -9,14 +9,14 @@ export interface EmojiButtonProps {
      * Async provider to fetch the emoji
      */
     emojiProvider: Promise<EmojiProvider>;
-    /**
-     * Event handler when a new emoji is selected
-     */
-    onClick: OnEmojiEvent;
     /**
      * Optional prop for hoverable reaction picker selector emoji
      */
     hoverableReactionPickerSelectorEmoji?: boolean;
+    /**
+     * Event handler when a new emoji is selected
+     */
+    onClick: OnEmojiEvent;
 }
 /**
  * custom button to render the custom emoji selector inside the reaction picker

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

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

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

@@ -1,21 +1,21 @@
 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;
-    onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+    className?: string;
     dataAttributes?: {
         [key: string]: string;
     };
-    testId?: string;
-    children?: React.ReactNode;
-    showSubtleStyle?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    reacted?: boolean;
     showOpaqueBackground?: boolean;
+    showSubtleStyle?: boolean;
+    testId?: string;
     useCompactStyles?: boolean;
-    reacted?: boolean;
 }
 export declare const ReactionButton: ({ onClick, flash, showSubtleStyle, showOpaqueBackground, useCompactStyles, reacted, ariaLabel, ariaPressed, onMouseEnter, onMouseLeave, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => JSX.Element;
 export {};

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

@@ -19,55 +19,55 @@ export declare const RENDER_REACTIONPICKER_TESTID = "reactionPicker-testid";
 export declare const RENDER_REACTIONPICKERPANEL_TESTID = "reactionPickerPanel-testid";
 export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickReactionEmojiIds'>, Partial<Pick<TriggerProps, 'tooltipContent' | 'miniMode'>> {
     /**
-     * Provider for loading emojis
-     */
-    emojiProvider: Promise<EmojiProvider>;
-    /**
-     * Event callback when an emoji button is selected
-     * @param emojiId emoji unique id
-     * @param source source where the reaction was picked (either the initial default reactions or the custom reactions picker)
+     * Optional Show the "more emoji" selector icon for choosing emoji beyond the default list of emojis (defaults to false)
      */
-    onSelection: (emojiId: string, source: ReactionSource) => void;
+    allowAllEmojis?: boolean;
     /**
      * Optional class name
      */
     className?: string;
-    /**
-     * Optional Show the "more emoji" selector icon for choosing emoji beyond the default list of emojis (defaults to false)
-     */
-    allowAllEmojis?: boolean;
     /**
      * Enable/Disable the button to be clickable (defaults to false)
      */
     disabled?: boolean;
     /**
-     * Optional event handler when the emoji picker is opened
+     * Optional emoji picker size to control the size of emoji picker
      */
-    onOpen?: () => void;
+    emojiPickerSize?: PickerSize;
     /**
-     * Optional event handler when the emoji picker is clicked outside and closed
+     * Provider for loading emojis
      */
-    onCancel?: () => void;
+    emojiProvider: Promise<EmojiProvider>;
     /**
-     * Optional event handler when the custom emoji picker icon is selected
+     * Optional prop for hoverable reaction picker
      */
-    onShowMore?: () => void;
+    hoverableReactionPicker?: boolean;
     /**
-     * Optional emoji picker size to control the size of emoji picker
+     * Optional prop to set a delay for the reaction picker when it opens/closes on hover
      */
-    emojiPickerSize?: PickerSize;
+    hoverableReactionPickerDelay?: number;
     /**
-     * Optional prop for using an opaque button background instead of a transparent background
+     * Optional prop to say if the reactions component is in a list
      */
-    showOpaqueBackground?: boolean;
+    isListItem?: boolean;
     /**
-     * Optional prop for applying subtle styling to reaction summary and picker
+     * Optional event handler when the emoji picker is clicked outside and closed
      */
-    subtleReactionsSummaryAndPicker?: boolean;
+    onCancel?: () => void;
     /**
-     * Optional prop for displaying text to add a reaction
+     * Optional event handler when the emoji picker is opened
      */
-    showAddReactionText?: boolean;
+    onOpen?: () => void;
+    /**
+     * Event callback when an emoji button is selected
+     * @param emojiId emoji unique id
+     * @param source source where the reaction was picked (either the initial default reactions or the custom reactions picker)
+     */
+    onSelection: (emojiId: string, source: ReactionSource) => void;
+    /**
+     * Optional event handler when the custom emoji picker icon is selected
+     */
+    onShowMore?: () => void;
     /**
      * Optional prop for controlling the picker location
      */
@@ -81,27 +81,27 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      */
     reactionPickerTriggerText?: string;
     /**
-     * Optional prop to say if the reactions component is in a list
+     * Optional prop for displaying text to add a reaction
      */
-    isListItem?: boolean;
+    showAddReactionText?: boolean;
     /**
-     * Optional prop for hoverable reaction picker
+     * Optional prop for using an opaque button background instead of a transparent background
      */
-    hoverableReactionPicker?: boolean;
+    showOpaqueBackground?: boolean;
     /**
-     * Optional prop to set a delay for the reaction picker when it opens/closes on hover
+     * Optional prop for applying subtle styling to reaction summary and picker
      */
-    hoverableReactionPickerDelay?: number;
+    subtleReactionsSummaryAndPicker?: boolean;
 }
 /**
  * Picker component for adding reactions
  */
 export declare const ReactionPicker: React.MemoExoticComponent<(props: ReactionPickerProps) => JSX.Element>;
 export interface PopperWrapperProps {
+    popperModifiers?: PopperProps<{}>['modifiers'];
     settings: {
-        showFullPicker: boolean;
         popperPlacement: Placement;
+        showFullPicker: boolean;
     };
-    popperModifiers?: PopperProps<{}>['modifiers'];
 }
 export declare const PopperWrapper: (props: PropsWithChildren<PopperWrapperProps>) => JSX.Element;

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

@@ -19,59 +19,63 @@ export declare const RENDER_REACTIONPICKER_TESTID = "reactionPicker-testid";
 export declare const RENDER_REACTIONPICKERPANEL_TESTID = "reactionPickerPanel-testid";
 export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickReactionEmojiIds'>, Partial<Pick<TriggerProps, 'tooltipContent' | 'miniMode'>> {
     /**
-     * Provider for loading emojis
-     */
-    emojiProvider: Promise<EmojiProvider>;
-    /**
-     * Event callback when an emoji button is selected
-     * @param emojiId emoji unique id
-     * @param source source where the reaction was picked (either the initial default reactions or the custom reactions picker)
+     * Optional Show the "more emoji" selector icon for choosing emoji beyond the default list of emojis (defaults to false)
      */
-    onSelection: (emojiId: string, source: ReactionSource) => void;
+    allowAllEmojis?: boolean;
     /**
      * Optional class name
      */
     className?: string;
-    /**
-     * Optional Show the "more emoji" selector icon for choosing emoji beyond the default list of emojis (defaults to false)
-     */
-    allowAllEmojis?: boolean;
     /**
      * Enable/Disable the button to be clickable (defaults to false)
      */
     disabled?: boolean;
     /**
-     * Optional event handler when the emoji picker is opened
+     * Optional emoji picker size to control the size of emoji picker
      */
-    onOpen?: () => void;
+    emojiPickerSize?: PickerSize;
     /**
-     * Optional event handler when the emoji picker is clicked outside and closed
+     * Provider for loading emojis
      */
-    onCancel?: () => void;
+    emojiProvider: Promise<EmojiProvider>;
     /**
-     * Optional event handler when the custom emoji picker icon is selected
+     * Optional prop for hoverable reaction picker
      */
-    onShowMore?: () => void;
+    hoverableReactionPicker?: boolean;
     /**
-     * Optional emoji picker size to control the size of emoji picker
+     * Optional prop to set a delay for the reaction picker when it opens/closes on hover
      */
-    emojiPickerSize?: PickerSize;
+    hoverableReactionPickerDelay?: number;
     /**
-     * Optional prop for using an opaque button background instead of a transparent background
+     * Optional prop to say if the reactions component is in a list
      */
-    showOpaqueBackground?: boolean;
+    isListItem?: boolean;
     /**
-     * Optional prop for applying subtle styling to reaction summary and picker
+     * Optional event handler when the emoji picker is clicked outside and closed
      */
-    subtleReactionsSummaryAndPicker?: boolean;
+    onCancel?: () => void;
     /**
-     * Optional prop for displaying text to add a reaction
+     * Optional event handler when the emoji picker is opened
      */
-    showAddReactionText?: boolean;
+    onOpen?: () => void;
+    /**
+     * Event callback when an emoji button is selected
+     * @param emojiId emoji unique id
+     * @param source source where the reaction was picked (either the initial default reactions or the custom reactions picker)
+     */
+    onSelection: (emojiId: string, source: ReactionSource) => void;
+    /**
+     * Optional event handler when the custom emoji picker icon is selected
+     */
+    onShowMore?: () => void;
     /**
      * Optional prop for controlling the picker location
      */
     reactionPickerPlacement?: Placement;
+    /**
+     * Optional prop to set the strategy of the reaction picker popup
+     */
+    reactionPickerStrategy?: PopperProps<{}>['strategy'];
     /**
      * Optional prop for controlling icon inside Trigger
      */
@@ -81,34 +85,30 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      */
     reactionPickerTriggerText?: string;
     /**
-     * Optional prop to say if the reactions component is in a list
-     */
-    isListItem?: boolean;
-    /**
-     * Optional prop for hoverable reaction picker
+     * Optional prop for displaying text to add a reaction
      */
-    hoverableReactionPicker?: boolean;
+    showAddReactionText?: boolean;
     /**
-     * Optional prop to set a delay for the reaction picker when it opens/closes on hover
+     * Optional prop for using an opaque button background instead of a transparent background
      */
-    hoverableReactionPickerDelay?: number;
+    showOpaqueBackground?: boolean;
     /**
-     * Optional prop to set the strategy of the reaction picker popup
+     * Optional prop for applying subtle styling to reaction summary and picker
      */
-    reactionPickerStrategy?: PopperProps<{}>['strategy'];
+    subtleReactionsSummaryAndPicker?: boolean;
 }
 /**
  * Picker component for adding reactions
  */
 export declare const ReactionPicker: React.MemoExoticComponent<(props: ReactionPickerProps) => JSX.Element>;
 export interface PopperWrapperProps {
-    triggerRef: HTMLDivElement | HTMLButtonElement | null;
-    settings: {
-        showFullPicker: boolean;
-        popperPlacement: Placement;
-    };
     isOpen: boolean;
     onClose: () => void;
     popperModifiers?: PopperProps<{}>['modifiers'];
+    settings: {
+        popperPlacement: Placement;
+        showFullPicker: boolean;
+    };
+    triggerRef: HTMLDivElement | HTMLButtonElement | null;
 }
 export declare const PopperWrapper: (props: PropsWithChildren<PopperWrapperProps>) => JSX.Element;

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

@@ -1,21 +1,13 @@
 import { type ReactionsProps } from './Reactions';
 interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'useButtonAlignmentStyling'> {
-    /**
-     * event handler when the summary button is clicked to view all reactions
-     */
-    onClick: () => void;
     /**
      * The number of emojis to show in the summary button
      */
     emojisToShow?: number;
     /**
-     * Optional prop for using an opaque button background instead of a transparent background
-     */
-    showOpaqueBackground?: boolean;
-    /**
-     * Optional prop for applying subtle styling to reaction summary button
+     * event handler when the summary button is clicked to view all reactions
      */
-    subtleReactionsSummaryAndPicker?: boolean;
+    onClick: () => void;
     /**
      * Optional event handler when mouse enters the button
      */
@@ -25,13 +17,21 @@ interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider
      */
     onMouseLeave?: () => void;
     /**
-     * Optional prop for the optimistic image URL
+     * Optional prop for using an opaque button background instead of a transparent background
      */
-    summaryGetOptimisticImageURL?: (emojiId: string) => string;
+    showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for applying subtle styling to reaction summary button
+     */
+    subtleReactionsSummaryAndPicker?: boolean;
     /**
      * Optional prop to add an icon to the end of the summary button
      */
     summaryButtonIconAfter?: React.ReactNode;
+    /**
+     * Optional prop for the optimistic image URL
+     */
+    summaryGetOptimisticImageURL?: (emojiId: string) => string;
     /**
      * Optional prop to set the most recently clicked emoji id
      */

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

@@ -8,67 +8,67 @@ import { type TriggerProps } from './Trigger';
 export declare const RENDER_SUMMARY_VIEW_POPUP_TESTID = "render-summary-view-popup";
 interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji' | 'allowUserDialog' | 'allowSelectFromSummaryView' | 'emojiPickerSize' | 'useButtonAlignmentStyling' | 'reactionPickerTriggerText'>, Pick<TriggerProps, 'tooltipContent' | 'reactionPickerTriggerIcon' | 'disabled'> {
     /**
-     * Optional prop to change the placement of the summary popup reaction list
-     */
-    placement?: Placement;
-    /**
-     * event handler when a a reaction button is clicked inside the summary
+     * Optional prop for enabling the Reactions Dialog
      */
-    onReactionClick: ReactionClick;
+    allowUserDialog?: boolean;
     /**
-     * Event callback when an emoji button is selected
-     * @param emojiId emoji unique id
-     * @param source source where the reaction was picked (either the initial default reactions or the custom reactions picker)
+     * Optional function when the user wants to open the Reactions Dialog
      */
-    onSelection: (emojiId: string, source: ReactionSource) => void;
+    handleOpenReactionsDialog?: (options?: OpenReactionsDialogOptions) => void;
     /**
-     * Optional event when the mouse cursor hovers over a reaction button inside the summary
+     * Optional prop to make the summary view open on hover
      */
-    onReactionMouseEnter?: ReactionMouseEnter;
+    hoverableSummaryView?: boolean;
     /**
-     * Optional event when focused a reaction inside the summary
+     * Optional prop to set a delay for the summary view when it opens/closes on hover
      */
-    onReactionFocused?: ReactionFocused;
+    hoverableSummaryViewDelay?: number;
     /**
-     * Optional prop for using an opaque button background instead of a transparent background
+     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
      */
-    showOpaqueBackground?: boolean;
+    isViewOnly?: boolean;
     /**
-     * Optional prop for applying subtle styling to reaction picker
+     * Optional event handler when the emoji picker is opened
      */
-    subtleReactionsSummaryAndPicker?: boolean;
+    onOpen?: () => void;
     /**
-     * Optional prop for enabling the Reactions Dialog
+     * event handler when a a reaction button is clicked inside the summary
      */
-    allowUserDialog?: boolean;
+    onReactionClick: ReactionClick;
     /**
-     * Optional function when the user wants to open the Reactions Dialog
+     * Optional event when focused a reaction inside the summary
      */
-    handleOpenReactionsDialog?: (options?: OpenReactionsDialogOptions) => void;
+    onReactionFocused?: ReactionFocused;
     /**
-     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
+     * Optional event when the mouse cursor hovers over a reaction button inside the summary
      */
-    isViewOnly?: boolean;
+    onReactionMouseEnter?: ReactionMouseEnter;
     /**
-     * Optional event handler when the emoji picker is opened
+     * Event callback when an emoji button is selected
+     * @param emojiId emoji unique id
+     * @param source source where the reaction was picked (either the initial default reactions or the custom reactions picker)
      */
-    onOpen?: () => void;
+    onSelection: (emojiId: string, source: ReactionSource) => void;
     /**
-     * Optional prop to make the summary view open on hover
+     * Optional prop to change the placement of the summary popup reaction list
      */
-    hoverableSummaryView?: boolean;
+    placement?: Placement;
     /**
-     * Optional prop to set a delay for the summary view when it opens/closes on hover
+     * Optional prop for using an opaque button background instead of a transparent background
      */
-    hoverableSummaryViewDelay?: number;
+    showOpaqueBackground?: boolean;
     /**
-     * Optional prop for the optimistic image URL
+     * Optional prop for applying subtle styling to reaction picker
      */
-    summaryGetOptimisticImageURL?: (emojiId: string) => string;
+    subtleReactionsSummaryAndPicker?: boolean;
     /**
      * Optional prop to control if the side picker is shown
      */
     summaryButtonIconAfter?: React.ReactNode;
+    /**
+     * Optional prop for the optimistic image URL
+     */
+    summaryGetOptimisticImageURL?: (emojiId: string) => string;
     /**
      * Optional prop to set the most recently clicked id
      */