@atlaskit/reactions 24.6.0 → 24.8.0

package/dist/esm/components/ReactionDialog/ReactionsList.js

@@ -1,106 +1,26 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useCallback, useState, useEffect } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { ResourcedEmoji } from '@atlaskit/emoji/element';
-import Tabs, { Tab, TabList } from '@atlaskit/tabs';
-import { useThemeObserver } from '@atlaskit/tokens';
-import { Box, Flex, xcss } from '@atlaskit/primitives';
-import { Counter } from '../Counter';
-import { customTabWrapper, customTabListStyles } from './styles';
 import { ReactionView } from './ReactionView';
-var emojiStyles = xcss({
-  minWidth: '36px'
-});
 export var ReactionsList = function ReactionsList(_ref) {
   var reactions = _ref.reactions,
-    initialEmojiId = _ref.initialEmojiId,
+    selectedEmojiId = _ref.selectedEmojiId,
     emojiProvider = _ref.emojiProvider,
-    onReactionChanged = _ref.onReactionChanged,
     ProfileCardWrapper = _ref.ProfileCardWrapper;
-  var _useState = useState(function () {
-      // Calculate this only on initialize the List of Tabs and each Reactions View collection
-      return {
-        index: reactions.findIndex(function (reaction) {
-          return reaction.emojiId === initialEmojiId;
-        }),
-        id: initialEmojiId
-      };
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedEmoji = _useState2[0],
-    setSelectedEmoji = _useState2[1];
-  var _useThemeObserver = useThemeObserver(),
-    colorMode = _useThemeObserver.colorMode;
-  useEffect(function () {
-    // select first emoji when navigating to a new page
-    var currentPageEmojis = reactions.map(function (reaction) {
-      return reaction.emojiId;
-    });
-    if (!currentPageEmojis.includes(selectedEmoji.id)) {
-      setSelectedEmoji({
-        index: 0,
-        id: initialEmojiId
+  return jsx("div", null, reactions.map(function (reaction) {
+    if (reaction.emojiId === selectedEmojiId) {
+      return jsx(ReactionView, {
+        key: reaction.emojiId,
+        reaction: reaction,
+        selectedEmojiId: selectedEmojiId,
+        emojiProvider: emojiProvider,
+        ProfileCardWrapper: ProfileCardWrapper
       });
+    } else {
+      return null;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [reactions, initialEmojiId]);
-  var onTabChange = useCallback(function (index, analyticsEvent) {
-    if (index === selectedEmoji.index) {
-      return;
-    }
-    var emojiId = reactions[index].emojiId;
-    setSelectedEmoji({
-      index: index,
-      id: emojiId
-    });
-    onReactionChanged(emojiId, analyticsEvent);
-  }, [selectedEmoji.index, reactions, onReactionChanged]);
-  return jsx(Tabs, {
-    id: "reactions-dialog-tabs",
-    onChange: onTabChange,
-    selected: selectedEmoji.index
-  }, jsx("div", {
-    css: customTabListStyles,
-    id: "reactions-dialog-tabs-list"
-  }, jsx(TabList, null, reactions.map(function (reaction) {
-    var emojiId = {
-      id: reaction.emojiId,
-      shortName: ''
-    };
-    return jsx("div", {
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      css: customTabWrapper((emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) === selectedEmoji.id, selectedEmoji.id, colorMode)
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: "reaction-elements",
-      key: reaction.emojiId,
-      "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id
-    }, jsx(Tab, null, jsx(Flex, {
-      justifyContent: "center",
-      alignItems: "center",
-      direction: "row"
-    }, jsx(Box, {
-      xcss: emojiStyles
-    }, jsx(ResourcedEmoji, {
-      emojiProvider: emojiProvider,
-      emojiId: emojiId,
-      fitToHeight: 16,
-      showTooltip: true
-    })), jsx(Counter, {
-      value: reaction.count
-    }))));
-  }))), reactions.map(function (reaction) {
-    return jsx(ReactionView, {
-      key: reaction.emojiId,
-      reaction: reaction,
-      selectedEmojiId: selectedEmoji.id,
-      emojiProvider: emojiProvider,
-      ProfileCardWrapper: ProfileCardWrapper
-    });
   }));
 };

package/dist/esm/components/ReactionDialog/styles.js

@@ -4,10 +4,7 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N500, N800 } from '@atlaskit/theme/colors';
-var REACTIONS_CONTAINER_WIDTH = 48;
-var REACTION_CONTAINER_HEIGHT = 40;
-
+import { N500 } from '@atlaskit/theme/colors';
 /*Reactions Container. Using pseudo Element :after to set border since with onClick of Reaction to higlight the
 border blue below the reaction. Setting Border Width based on number of reactions to make sure it shows up
 in case the container overflows */
@@ -32,55 +29,6 @@ export var containerStyle = function containerStyle(reactionsBorderWidth) {
     }
   });
 };
-var containerEdgeAngle = {
-  rightEdge: 270,
-  leftEdge: 90
-};
-var fadedCss = function fadedCss(edge, theme) {
-  return css({
-    content: '""',
-    position: 'absolute',
-    left: '0px',
-    top: '0px',
-    width: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
-    height: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
-    zIndex: 0,
-    background:
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    theme === 'dark' ? "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(34, 39, 43, 0.95) 40.23%, rgba(34, 39, 43, 0.55) 58.33%, rgba(34, 39, 43, 0) 77.49%)") : "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(255, 255, 255, 0.95) 40.23%, rgba(255, 255, 255, 0.55) 58.33%, rgba(255, 255, 255, 0) 77.49%)")
-  });
-};
-export var customTabWrapper = function customTabWrapper(isSelected, selectedEmojiId, theme) {
-  return css({
-    flexShrink: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    textAlign: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minWidth: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
-    boxSizing: 'border-box',
-    position: 'relative',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '> div': {
-      minWidth: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
-      minHeight: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      padding: '0px !important',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > span': {
-      minHeight: '16px',
-      minWidth: '16px'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    '&.disabled:after': fadedCss('rightEdge', theme),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    '&.disabled + &.disabled:after': fadedCss('leftEdge', theme)
-  });
-};
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var navigationContainerStyle = css({
@@ -94,26 +42,6 @@ export var navigationContainerStyle = css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var reactionViewStyle = css({
-  marginTop: "var(--ds-space-300, 24px)",
-  display: 'flex',
-  flexDirection: 'column',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  p: {
-    margin: 0,
-    color: "".concat("var(--ds-text, ".concat(N800, ")")),
-    font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-    fontWeight: "var(--ds-font-weight-semibold, 600)",
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '20px',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '> span': {
-      marginRight: "var(--ds-space-100, 8px)"
-    }
-  }
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var userListStyle = css({
   listStyle: 'none',
@@ -131,7 +59,7 @@ export var userListStyle = css({
 export var userStyle = css({
   display: 'flex',
   alignItems: 'center',
-  padding: "var(--ds-space-100, 8px)".concat(" 0px ", "var(--ds-space-100, 8px)", " 0px"),
+  padding: "var(--ds-space-050, 4px)".concat(" 0px ", "var(--ds-space-050, 4px)", " 0px"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> span': {
     marginLeft: "var(--ds-space-200, 16px)"
@@ -142,7 +70,6 @@ export var userStyle = css({
 export var customTabListStyles = css({
   overflow: 'auto',
   display: 'flex',
-  paddingBottom: "var(--ds-space-050, 4px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'div[role=tablist]': {
     flexGrow: 1,
@@ -156,5 +83,6 @@ export var centerSpinner = css({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  height: '100%'
+  height: '100%',
+  marginTop: "var(--ds-space-300, 24px)"
 });

package/dist/esm/components/ReactionSummary/ReactionSummaryView.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Popup from '@atlaskit/popup';
-import { Inline, Text, xcss } from '@atlaskit/primitives';
+import { Box, Inline, Text, xcss } from '@atlaskit/primitives';
 import Button from '@atlaskit/button/new';
 import { Reaction } from '../Reaction';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
@@ -13,6 +13,9 @@ var summaryPopupStyles = xcss({
   paddingTop: 'space.050',
   maxWidth: '325px'
 });
+var viewAllButtonStyling = xcss({
+  marginTop: 'space.050'
+});
 
 /**
  * Test id for the Reactions summary view popup
@@ -54,7 +57,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         xcss: summaryPopupStyles,
         testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
         space: "space.025",
-        shouldWrap: true
+        shouldWrap: true,
+        alignBlock: "center"
       }, reactions.map(function (reaction) {
         return /*#__PURE__*/React.createElement(Reaction, {
           key: reaction.emojiId,
@@ -66,15 +70,18 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
           flash: flash[reaction.emojiId],
           showParticleEffect: particleEffectByEmoji[reaction.emojiId]
         });
-      }), allowUserDialog && /*#__PURE__*/React.createElement(Button, {
+      }), allowUserDialog && /*#__PURE__*/React.createElement(Box, {
+        xcss: viewAllButtonStyling
+      }, /*#__PURE__*/React.createElement(Button, {
         appearance: "subtle",
         onClick: function onClick() {
           return handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 ? void 0 : handleOpenReactionsDialog(reactions[0].emojiId);
-        }
+        },
+        spacing: "compact"
       }, /*#__PURE__*/React.createElement(Text, {
         color: "color.text.subtlest",
         weight: "medium"
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.seeWhoReacted))));
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.seeWhoReacted)))));
     },
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * @jsxRuntime classic
@@ -9,8 +10,10 @@ import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
-import Button from '@atlaskit/button/standard-button';
+import Button from '@atlaskit/button/new';
 import Tooltip from '@atlaskit/tooltip';
+import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../../shared/constants';
 import { messages } from '../../shared/i18n';
@@ -20,7 +23,10 @@ import { Reaction } from '../Reaction';
 import { ReactionsDialog } from '../ReactionDialog';
 import { ReactionPicker } from '../ReactionPicker';
 import { ReactionSummaryView } from '../ReactionSummary/';
-import { reactionPickerStyle, seeWhoReactedStyle, wrapperStyle } from './styles';
+import { reactionPickerStyle, wrapperStyle } from './styles';
+var tooltipStyle = xcss({
+  paddingLeft: 'space.050'
+});
 
 /**
  * Set of all available UFO experiences relating to reactions dialog
@@ -136,7 +142,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     if (status !== ReactionStatus.ready) {
       renderTime.current = Date.now();
     } else {
-      if (isSampled(SAMPLING_RATE_REACTIONS_RENDERED_EXP)) {
+      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
         );
@@ -227,6 +234,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     // ufo selected reaction inside the modal dialog
     ufoExperiences.selectedReactionChangeInsideDialog.start();
     handleReactionMouseEnter(emojiId);
+    setSelectedEmojiId(emojiId);
     if (analyticsEvent) {
       onDialogSelectReactionCallback(emojiId, analyticsEvent);
     }
@@ -304,7 +312,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       showOpaqueBackground: showOpaqueBackground,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
       handleOpenReactionsDialog: handleOpenReactionsDialog,
-      allowUserDialog: allowUserDialog
+      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions
     })) : memorizedReactions.map(function (reaction) {
       return jsx(Reaction, {
         key: reaction.emojiId,
@@ -335,21 +343,19 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
-    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Tooltip, {
+    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Box, {
+      xcss: tooltipStyle
+    }, jsx(Tooltip, {
       content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true
-    }, jsx(Button
-    // TODO: (from codemod) "link" and "subtle-link" appearances are only available in LinkButton, please either provide a href prop then migrate to LinkButton, or remove the appearance from the default button.
-    // https://product-fabric.atlassian.net/browse/DSP-18982
-    , {
-      appearance: "subtle-link",
-      onClick: handleOpenAllReactionsDialog
-      // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: seeWhoReactedStyle,
-      testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
-    }, jsx(FormattedMessage, messages.seeWhoReacted))), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
+    }, function (tooltipProps) {
+      return jsx(Button, _extends({}, tooltipProps, {
+        appearance: "subtle",
+        spacing: "compact",
+        onClick: handleOpenAllReactionsDialog,
+        testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
+      }), jsx(FormattedMessage, messages.seeWhoReacted));
+    })), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
       selectedEmojiId: selectedEmojiId,
       reactions: memorizedReactions,
       emojiProvider: emojiProvider,

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

@@ -10,17 +10,6 @@ export var reactionPickerStyle = css({
   marginTop: "var(--ds-space-050, 4px)"
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var seeWhoReactedStyle = css({
-  height: '24px',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '24px',
-  paddingLeft: 0,
-  paddingRight: 0,
-  marginTop: "var(--ds-space-050, 4px)",
-  marginLeft: "var(--ds-space-050, 4px)"
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var wrapperStyle = css({
   display: 'flex',

package/dist/types/components/ReactionDialog/ReactionsDialogHeader.d.ts

@@ -0,0 +1,15 @@
+import { jsx } from '@emotion/react';
+import { type EmojiProvider } from '@atlaskit/emoji/resource';
+import { type ReactionSummary } from '../../types';
+interface ReactionsDialogModalHeaderProps {
+    totalReactionsCount: number;
+    handlePreviousPage: () => void;
+    handleNextPage: () => void;
+    currentPage: number;
+    maxPages: number;
+    emojiProvider: Promise<EmojiProvider>;
+    selectedEmojiId: string;
+    currentReactions: ReactionSummary[];
+}
+export declare const ReactionsDialogHeader: ({ totalReactionsCount, handlePreviousPage, handleNextPage, currentPage, maxPages, currentReactions, emojiProvider, selectedEmojiId, }: ReactionsDialogModalHeaderProps) => jsx.JSX.Element;
+export {};

package/dist/types/components/ReactionDialog/ReactionsList.d.ts

@@ -1,6 +1,10 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
-import { type onDialogSelectReactionChange, type ReactionSummary, type ProfileCardWrapper } from '../../types';
+import { type ReactionSummary, type ProfileCardWrapper } from '../../types';
 export interface ReactionsListProps {
     /**
      * Sorted list of reactions to render in list
@@ -9,18 +13,14 @@ export interface ReactionsListProps {
     /**
      * Current emoji selected in the reactions dialog
      */
-    initialEmojiId: string;
+    selectedEmojiId: string;
     /**
      * Provider for loading emojis
      */
     emojiProvider: Promise<EmojiProvider>;
-    /**
-     * Function to handle clicking on an emoji from the list
-     */
-    onReactionChanged: onDialogSelectReactionChange;
     /**
      * A functional component from Confluence to show a profile card on hover
      */
     ProfileCardWrapper?: ProfileCardWrapper;
 }
-export declare const ReactionsList: ({ reactions, initialEmojiId, emojiProvider, onReactionChanged, ProfileCardWrapper, }: ReactionsListProps) => jsx.JSX.Element;
+export declare const ReactionsList: ({ reactions, selectedEmojiId, emojiProvider, ProfileCardWrapper, }: ReactionsListProps) => jsx.JSX.Element;

package/dist/types/components/ReactionDialog/styles.d.ts

@@ -1,8 +1,5 @@
-import { type ThemeColorModes } from '@atlaskit/tokens';
 export declare const containerStyle: (reactionsBorderWidth: number) => import("@emotion/react").SerializedStyles;
-export declare const customTabWrapper: (isSelected: boolean, selectedEmojiId: string, theme?: ThemeColorModes) => import("@emotion/react").SerializedStyles;
 export declare const navigationContainerStyle: import("@emotion/react").SerializedStyles;
-export declare const reactionViewStyle: import("@emotion/react").SerializedStyles;
 export declare const userListStyle: import("@emotion/react").SerializedStyles;
 export declare const userStyle: import("@emotion/react").SerializedStyles;
 export declare const customTabListStyles: import("@emotion/react").SerializedStyles;

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

@@ -10,4 +10,4 @@ export type RepositionOnUpdateProps = {
         showFullPicker: boolean;
     };
 };
-export declare const RepositionOnUpdate: ({ children, update, settings, }: React.PropsWithChildren<RepositionOnUpdateProps>) => JSX.Element;
+export declare const RepositionOnUpdate: ({ children, update, settings, }: React.PropsWithChildren<RepositionOnUpdateProps>) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type Placement } from '@atlaskit/popper';
 import { type ReactionClick, type ReactionFocused, type ReactionMouseEnter } from '../../types';
 import { type ReactionsProps } from '../Reactions';
@@ -36,5 +36,5 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      */
     handleOpenReactionsDialog?: (emojiId: string) => void;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, handleOpenReactionsDialog, allowUserDialog, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, handleOpenReactionsDialog, allowUserDialog, }: ReactionSummaryViewProps) => React.JSX.Element;
 export {};

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

@@ -1,3 +1,2 @@
 export declare const reactionPickerStyle: import("@emotion/react").SerializedStyles;
-export declare const seeWhoReactedStyle: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

package/dist/types/containers/ConnectedReactionPicker/ConnectedReactionPicker.d.ts

@@ -20,4 +20,4 @@ export interface ConnectedReactionPickerProps extends Omit<ReactionPickerProps,
 /**
  * Reaction Picker component
  */
-export declare const ConnectedReactionPicker: (props: React.PropsWithChildren<ConnectedReactionPickerProps>) => JSX.Element;
+export declare const ConnectedReactionPicker: (props: React.PropsWithChildren<ConnectedReactionPickerProps>) => React.JSX.Element;

package/dist/types/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -53,4 +53,4 @@ export declare const mapDispatchToPropsHelper: (actions: Actions, containerAri:
     getReactionDetails: (emojiId: string) => void;
     onSelection: (emojiId: string) => void;
 };
-export declare const ConnectedReactionsView: (props: React.PropsWithChildren<ConnectedReactionsViewProps>) => JSX.Element;
+export declare const ConnectedReactionsView: (props: React.PropsWithChildren<ConnectedReactionsViewProps>) => React.JSX.Element;

package/dist/types-ts4.5/components/ReactionDialog/ReactionsDialogHeader.d.ts

@@ -0,0 +1,15 @@
+import { jsx } from '@emotion/react';
+import { type EmojiProvider } from '@atlaskit/emoji/resource';
+import { type ReactionSummary } from '../../types';
+interface ReactionsDialogModalHeaderProps {
+    totalReactionsCount: number;
+    handlePreviousPage: () => void;
+    handleNextPage: () => void;
+    currentPage: number;
+    maxPages: number;
+    emojiProvider: Promise<EmojiProvider>;
+    selectedEmojiId: string;
+    currentReactions: ReactionSummary[];
+}
+export declare const ReactionsDialogHeader: ({ totalReactionsCount, handlePreviousPage, handleNextPage, currentPage, maxPages, currentReactions, emojiProvider, selectedEmojiId, }: ReactionsDialogModalHeaderProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/components/ReactionDialog/ReactionsList.d.ts

@@ -1,6 +1,10 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
-import { type onDialogSelectReactionChange, type ReactionSummary, type ProfileCardWrapper } from '../../types';
+import { type ReactionSummary, type ProfileCardWrapper } from '../../types';
 export interface ReactionsListProps {
     /**
      * Sorted list of reactions to render in list
@@ -9,18 +13,14 @@ export interface ReactionsListProps {
     /**
      * Current emoji selected in the reactions dialog
      */
-    initialEmojiId: string;
+    selectedEmojiId: string;
     /**
      * Provider for loading emojis
      */
     emojiProvider: Promise<EmojiProvider>;
-    /**
-     * Function to handle clicking on an emoji from the list
-     */
-    onReactionChanged: onDialogSelectReactionChange;
     /**
      * A functional component from Confluence to show a profile card on hover
      */
     ProfileCardWrapper?: ProfileCardWrapper;
 }
-export declare const ReactionsList: ({ reactions, initialEmojiId, emojiProvider, onReactionChanged, ProfileCardWrapper, }: ReactionsListProps) => jsx.JSX.Element;
+export declare const ReactionsList: ({ reactions, selectedEmojiId, emojiProvider, ProfileCardWrapper, }: ReactionsListProps) => jsx.JSX.Element;

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

@@ -1,8 +1,5 @@
-import { type ThemeColorModes } from '@atlaskit/tokens';
 export declare const containerStyle: (reactionsBorderWidth: number) => import("@emotion/react").SerializedStyles;
-export declare const customTabWrapper: (isSelected: boolean, selectedEmojiId: string, theme?: ThemeColorModes) => import("@emotion/react").SerializedStyles;
 export declare const navigationContainerStyle: import("@emotion/react").SerializedStyles;
-export declare const reactionViewStyle: import("@emotion/react").SerializedStyles;
 export declare const userListStyle: import("@emotion/react").SerializedStyles;
 export declare const userStyle: import("@emotion/react").SerializedStyles;
 export declare const customTabListStyles: import("@emotion/react").SerializedStyles;

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

@@ -10,4 +10,4 @@ export type RepositionOnUpdateProps = {
         showFullPicker: boolean;
     };
 };
-export declare const RepositionOnUpdate: ({ children, update, settings, }: React.PropsWithChildren<RepositionOnUpdateProps>) => JSX.Element;
+export declare const RepositionOnUpdate: ({ children, update, settings, }: React.PropsWithChildren<RepositionOnUpdateProps>) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type Placement } from '@atlaskit/popper';
 import { type ReactionClick, type ReactionFocused, type ReactionMouseEnter } from '../../types';
 import { type ReactionsProps } from '../Reactions';
@@ -36,5 +36,5 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      */
     handleOpenReactionsDialog?: (emojiId: string) => void;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, handleOpenReactionsDialog, allowUserDialog, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, handleOpenReactionsDialog, allowUserDialog, }: ReactionSummaryViewProps) => React.JSX.Element;
 export {};

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

@@ -1,3 +1,2 @@
 export declare const reactionPickerStyle: import("@emotion/react").SerializedStyles;
-export declare const seeWhoReactedStyle: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/containers/ConnectedReactionPicker/ConnectedReactionPicker.d.ts

@@ -20,4 +20,4 @@ export interface ConnectedReactionPickerProps extends Omit<ReactionPickerProps,
 /**
  * Reaction Picker component
  */
-export declare const ConnectedReactionPicker: (props: React.PropsWithChildren<ConnectedReactionPickerProps>) => JSX.Element;
+export declare const ConnectedReactionPicker: (props: React.PropsWithChildren<ConnectedReactionPickerProps>) => React.JSX.Element;

package/dist/types-ts4.5/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -53,4 +53,4 @@ export declare const mapDispatchToPropsHelper: (actions: Actions, containerAri:
     getReactionDetails: (emojiId: string) => void;
     onSelection: (emojiId: string) => void;
 };
-export declare const ConnectedReactionsView: (props: React.PropsWithChildren<ConnectedReactionsViewProps>) => JSX.Element;
+export declare const ConnectedReactionsView: (props: React.PropsWithChildren<ConnectedReactionsViewProps>) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "24.6.0",
+	"version": "24.8.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,10 +36,10 @@
 		"@atlaskit/analytics-namespaced-context": "^6.13.0",
 		"@atlaskit/analytics-next": "^10.3.0",
 		"@atlaskit/avatar": "^21.18.0",
-		"@atlaskit/button": "^20.4.0",
+		"@atlaskit/button": "^20.5.0",
 		"@atlaskit/emoji": "^67.13.0",
 		"@atlaskit/heading": "^4.1.0",
-		"@atlaskit/icon": "^23.6.0",
+		"@atlaskit/icon": "^23.7.0",
 		"@atlaskit/modal-dialog": "^12.20.0",
 		"@atlaskit/motion": "^1.10.0",
 		"@atlaskit/platform-feature-flags": "^1.0.0",
@@ -114,6 +114,9 @@
 	"platform-feature-flags": {
 		"platform-component-visual-refresh": {
 			"type": "boolean"
+		},
+		"platform_fix_analytics_error": {
+			"type": "boolean"
 		}
 	}
 }