@atlaskit/reactions 30.0.1 → 30.0.2

package/dist/types-ts4.5/components/compiled/ReactionPicker.d.ts

@@ -0,0 +1,100 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { type PropsWithChildren } from 'react';
+import { type PickerSize } from '@atlaskit/emoji/types';
+import { type EmojiProvider } from '@atlaskit/emoji/resource';
+import { type PopperProps, type Placement } from '@atlaskit/popper';
+import { type ReactionSource } from '../../types';
+import { type SelectorProps } from './Selector';
+import { type TriggerProps } from './Trigger';
+/**
+ * Test id for wrapper ReactionPicker div
+ */
+export declare const RENDER_REACTIONPICKER_TESTID = "reactionPicker-testid";
+/**
+ * Test id for ReactionPicker panel div
+ */
+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)
+     */
+    onSelection: (emojiId: string, source: ReactionSource) => void;
+    /**
+     * 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
+     */
+    onOpen?: () => void;
+    /**
+     * Optional event handler when the emoji picker is clicked outside and closed
+     */
+    onCancel?: () => void;
+    /**
+     * Optional event handler when the custom emoji picker icon is selected
+     */
+    onShowMore?: () => void;
+    /**
+     * Optional emoji picker size to control the size of emoji picker
+     */
+    emojiPickerSize?: PickerSize;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for applying subtle styling to reaction summary and picker
+     */
+    subtleReactionsSummaryAndPicker?: boolean;
+    /**
+     * Optional prop for displaying text to add a reaction
+     */
+    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
+     */
+    reactionPickerPlacement?: Placement;
+    /**
+     * Optional prop for controlling the overflow of the reaction picker
+     */
+    reactionsPickerPreventOverflowOptions?: Record<string, any>;
+    /**
+     * Optional prop for controlling icon inside Trigger
+     */
+    reactionPickerTriggerIcon?: React.ReactNode;
+}
+/**
+ * Picker component for adding reactions
+ */
+export declare const ReactionPicker: React.MemoExoticComponent<(props: ReactionPickerProps) => JSX.Element>;
+export interface PopperWrapperProps {
+    settings: {
+        isOpen: boolean;
+        showFullPicker: boolean;
+        popperPlacement: Placement;
+    };
+    popperModifiers?: PopperProps<{}>['modifiers'];
+}
+export declare const PopperWrapper: (props: PropsWithChildren<PopperWrapperProps>) => JSX.Element;

package/dist/types-ts4.5/components/compiled/ReactionSummaryButton.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+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
+     */
+    subtleReactionsSummaryAndPicker?: boolean;
+    /**
+     * Optional prop to apply compact styling
+     */
+    useCompactStyles?: boolean;
+}
+/**
+ * Test id for summary reaction wrapper button
+ */
+export declare const RENDER_SUMMARY_BUTTON_TESTID = "reaction-summary-button";
+/**
+ * Test id for emojis displayed inside summary button. All emoji's in the summary button will have this test id
+ */
+export declare const RENDER_SUMMARY_EMOJI_TESTID = "summary-emoji-display";
+export declare const ReactionSummaryButton: import("react").ForwardRefExoticComponent<ReactionSummaryButtonProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types-ts4.5/components/compiled/ReactionSummaryView.d.ts

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+import { type Placement } from '@atlaskit/popper';
+import { type ReactionClick, type ReactionFocused, type ReactionMouseEnter, type ReactionSource } from '../../types';
+import { type ReactionsProps, type OpenReactionsDialogOptions } from './Reactions';
+import { type TriggerProps } from './Trigger';
+/**
+ * Test id for the Reactions summary view popup
+ */
+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'>, 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
+     */
+    onReactionClick: ReactionClick;
+    /**
+     * 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 when the mouse cursor hovers over a reaction button inside the summary
+     */
+    onReactionMouseEnter?: ReactionMouseEnter;
+    /**
+     * Optional event when focused a reaction inside the summary
+     */
+    onReactionFocused?: ReactionFocused;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for applying subtle styling to reaction picker
+     */
+    subtleReactionsSummaryAndPicker?: 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 event handler when the emoji picker is opened
+     */
+    onOpen?: () => void;
+}
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, }: ReactionSummaryViewProps) => JSX.Element;
+export {};

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

@@ -6,8 +6,8 @@ import React from 'react';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
 import { type Placement } from '@atlaskit/popper';
 import { ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary, type ProfileCardWrapper } from '../../types';
-import { type ReactionPickerProps } from '../ReactionPicker';
-import { type SelectorProps } from '../Selector';
+import { type ReactionPickerProps } from './ReactionPicker';
+import { type SelectorProps } from './Selector';
 /**
  * Set of all available UFO experiences relating to Reactions Dialog
  */

package/dist/types-ts4.5/components/compiled/Selector.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { type EmojiId, type OnEmojiEvent } from '@atlaskit/emoji/types';
+import { type EmojiProvider } from '@atlaskit/emoji/resource';
+/**
+ * Test id for wrapper Selector div
+ */
+export declare const RENDER_SELECTOR_TESTID = "render-selector";
+export interface SelectorProps {
+    /**
+     * Provider for loading emojis
+     */
+    emojiProvider: Promise<EmojiProvider>;
+    /**
+     * Event handler when an emoji gets selected
+     */
+    onSelection: OnEmojiEvent;
+    /**
+     * Enable/Disable selection of extra custom emoji beyond default list (defaults to false)
+     */
+    showMore?: boolean;
+    /**
+     * Optional event when extra custom emojis icon is selected
+     */
+    onMoreClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * Optional emojis shown for user to select from when the reaction add button is clicked (defaults to pre-defined list of emojis {@link DefaultReactions})
+     */
+    pickerQuickReactionEmojiIds?: EmojiId[];
+}
+/**
+ * Reactions picker panel part of the <ReactionPicker /> component
+ */
+export declare const Selector: ({ emojiProvider, onMoreClick, onSelection, showMore, pickerQuickReactionEmojiIds, }: SelectorProps) => JSX.Element;

package/dist/types-ts4.5/components/compiled/Trigger.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type AriaAttributes } from 'react';
+import { type AnalyticsEvent } from '@atlaskit/analytics-next';
+import React from 'react';
+/**
+ * Test id for the tooltip
+ */
+export declare const RENDER_TOOLTIP_TRIGGER_TESTID = "render-tooltip-trigger";
+export declare const RENDER_TRIGGER_BUTTON_TESTID = "render-trigger-button";
+export interface TriggerProps {
+    /**
+     * Optional Event handler when the button to open the picker is clicked
+     * @param e Mouse Dom event
+     * @param analyticsEvent atlaskit analytics event payload of the button
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: AnalyticsEvent) => void;
+    /**
+     * apply "miniMode" className to the button
+     */
+    miniMode?: boolean;
+    /**
+     * Enable/Disable the button to be clickable (defaults to false)
+     */
+    disabled?: boolean;
+    /**
+     * Tooltip content for trigger button
+     */
+    tooltipContent: React.ReactNode;
+    /**
+     * Aria accessibility attributes that will be added to the button
+     */
+    ariaAttributes?: AriaAttributes;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for displaying text to add a reaction
+     */
+    showAddReactionText?: boolean;
+    /**
+     * 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;
+    /**
+     * Optional prop for controlling icon inside Trigger
+     */
+    reactionPickerTriggerIcon?: React.ReactNode;
+    /**
+     * Optional prop for controlling if reaction picker is opened
+     */
+    isSelected?: boolean;
+}
+/**
+ * Render an emoji button to open the reactions select picker
+ */
+export declare const Trigger: React.ForwardRefExoticComponent<TriggerProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -2,9 +2,11 @@
 import { ComponentName, ExperienceName } from './ufo';
 declare const Reaction: import("react").FC<import("./components/compiled/Reaction").ReactionProps & import("./components/Reaction").ReactionProps>;
 declare const Reactions: import("react").FC<import("./components/compiled/Reactions").ReactionsProps & import("./components/Reactions").ReactionsProps>;
+declare const ReactionPicker: import("react").FC<import("./components/ReactionPicker/ReactionPicker").ReactionPickerProps>;
 export { ReactionServiceClient } from './client';
-export { Reaction, Reactions };
-export { ReactionPicker } from './components/ReactionPicker/ReactionPicker';
+export { Reaction };
+export { Reactions };
+export { ReactionPicker };
 export { useCloseManager } from './hooks/useCloseManager';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
 export { MemoryReactionsStore, ReactionConsumer } from './store';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "30.0.1",
+	"version": "30.0.2",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,6 +37,7 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/avatar": "^25.0.0",
 		"@atlaskit/button": "^21.1.0",
+		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/emoji": "^69.0.0",
 		"@atlaskit/heading": "^5.1.0",
 		"@atlaskit/icon": "^25.1.0",