@atlaskit/reactions 24.7.0 → 24.8.0

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

@@ -1,6 +1,5 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -9,22 +8,15 @@ import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { Flex, xcss } from '@atlaskit/primitives';
-import Button, { IconButton } from '@atlaskit/button/new';
-import Heading from '@atlaskit/heading';
-import Modal, { ModalBody, ModalFooter, useModal } from '@atlaskit/modal-dialog';
-import Tooltip from '@atlaskit/tooltip';
-import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
-import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
+import Tabs from '@atlaskit/tabs';
+import Button from '@atlaskit/button/new';
+import { Box, xcss } from '@atlaskit/primitives';
+import Modal, { ModalBody, ModalFooter } from '@atlaskit/modal-dialog';
 import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
 import { messages } from '../../shared/i18n';
 import { ReactionsList } from './ReactionsList';
+import { ReactionsDialogHeader } from './ReactionsDialogHeader';
 import { containerStyle } from './styles';
-var fullWidthStyle = xcss({
-  width: '100%',
-  padding: 'space.300',
-  paddingBlockEnd: 'space.400'
-});
 
 /**
  * Test id for the Reactions modal dialog
@@ -37,70 +29,22 @@ var getDimensions = function getDimensions(container) {
     scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
   };
 };
-var ReactionsDialogModalHeader = function ReactionsDialogModalHeader(_ref) {
-  var totalReactionsCount = _ref.totalReactionsCount,
-    handlePreviousPage = _ref.handlePreviousPage,
-    handleNextPage = _ref.handleNextPage,
-    currentPage = _ref.currentPage,
-    maxPages = _ref.maxPages;
-  var _useModal = useModal(),
-    titleId = _useModal.titleId;
-  var intl = useIntl();
-  var isSinglePage = maxPages === 1;
-  var isOnFirstPage = currentPage === 1;
-  var isOnLastPage = currentPage === maxPages;
-  return jsx(Flex, {
-    direction: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    xcss: fullWidthStyle
-  }, jsx(Heading, {
-    size: "medium",
-    id: titleId
-  }, intl.formatMessage(messages.reactionsCount, {
-    count: totalReactionsCount
-  })), !isSinglePage && jsx(Flex, {
-    alignItems: "center",
-    gap: "space.100"
-  }, jsx(Tooltip, {
-    content: intl.formatMessage(messages.leftNavigateLabel),
-    canAppear: function canAppear() {
-      return !isOnFirstPage;
-    }
-  }, function (tooltipProps) {
-    return jsx(IconButton, _extends({}, tooltipProps, {
-      isDisabled: isOnFirstPage,
-      onClick: handlePreviousPage,
-      icon: ChevronLeftIcon,
-      label: intl.formatMessage(messages.leftNavigateLabel)
-    }));
-  }), jsx(Tooltip, {
-    content: intl.formatMessage(messages.rightNavigateLabel),
-    canAppear: function canAppear() {
-      return !isOnLastPage;
-    }
-  }, function (tooltipProps) {
-    return jsx(IconButton, _extends({}, tooltipProps, {
-      onClick: handleNextPage,
-      isDisabled: isOnLastPage,
-      icon: ChevronRightIcon,
-      label: intl.formatMessage(messages.rightNavigateLabel)
-    }));
-  })));
-};
-export var ReactionsDialog = function ReactionsDialog(_ref2) {
+var footerStyle = xcss({
+  borderTop: "2px solid ".concat("var(--ds-border, rgba(11, 18, 14, 0.14))")
+});
+export var ReactionsDialog = function ReactionsDialog(_ref) {
   var _currentReactions$;
-  var _ref2$reactions = _ref2.reactions,
-    reactions = _ref2$reactions === void 0 ? [] : _ref2$reactions,
-    _ref2$handleCloseReac = _ref2.handleCloseReactionsDialog,
-    handleCloseReactionsDialog = _ref2$handleCloseReac === void 0 ? function () {} : _ref2$handleCloseReac,
-    emojiProvider = _ref2.emojiProvider,
-    selectedEmojiId = _ref2.selectedEmojiId,
-    _ref2$handleSelectRea = _ref2.handleSelectReaction,
-    handleSelectReaction = _ref2$handleSelectRea === void 0 ? function () {} : _ref2$handleSelectRea,
-    _ref2$handlePaginatio = _ref2.handlePaginationChange,
-    handlePaginationChange = _ref2$handlePaginatio === void 0 ? function () {} : _ref2$handlePaginatio,
-    ProfileCardWrapper = _ref2.ProfileCardWrapper;
+  var _ref$reactions = _ref.reactions,
+    reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
+    _ref$handleCloseReact = _ref.handleCloseReactionsDialog,
+    handleCloseReactionsDialog = _ref$handleCloseReact === void 0 ? function () {} : _ref$handleCloseReact,
+    emojiProvider = _ref.emojiProvider,
+    selectedEmojiId = _ref.selectedEmojiId,
+    _ref$handleSelectReac = _ref.handleSelectReaction,
+    handleSelectReaction = _ref$handleSelectReac === void 0 ? function () {} : _ref$handleSelectReac,
+    _ref$handlePagination = _ref.handlePaginationChange,
+    handlePaginationChange = _ref$handlePagination === void 0 ? function () {} : _ref$handlePagination,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     elementToScroll = _useState2[0],
@@ -221,6 +165,16 @@ export var ReactionsDialog = function ReactionsDialog(_ref2) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  var selectedIndex = currentReactions.findIndex(function (reaction) {
+    return reaction.emojiId === selectedEmojiId;
+  });
+  var onTabChange = useCallback(function (index, analyticsEvent) {
+    if (index === selectedIndex) {
+      return;
+    }
+    var emojiId = currentReactions[index].emojiId;
+    handleSelectReaction(emojiId, analyticsEvent);
+  }, [selectedIndex, currentReactions, handleSelectReaction]);
   return jsx(Modal, {
     onClose: handleCloseReactionsDialog,
     height: 600,
@@ -228,23 +182,31 @@ export var ReactionsDialog = function ReactionsDialog(_ref2) {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     ,
     autoFocus: false
-  }, jsx(ReactionsDialogModalHeader, {
+  }, jsx(Tabs, {
+    id: "reactions-dialog-tabs",
+    onChange: onTabChange,
+    selected: selectedIndex
+  }, jsx(ReactionsDialogHeader, {
     totalReactionsCount: totalReactionsCount,
     maxPages: maxPages,
     handlePreviousPage: handlePreviousPage,
     handleNextPage: handleNextPage,
-    currentPage: currentPage
+    currentPage: currentPage,
+    emojiProvider: emojiProvider,
+    selectedEmojiId: selectedEmojiId,
+    currentReactions: currentReactions
   }), jsx(ModalBody, null, jsx("div", {
     css: containerStyle(reactionsBorderWidth),
     ref: setRef
   }, jsx(ReactionsList, {
-    initialEmojiId: selectedEmojiId,
+    selectedEmojiId: selectedEmojiId,
     reactions: currentReactions,
     emojiProvider: emojiProvider,
-    onReactionChanged: handleSelectReaction,
     ProfileCardWrapper: ProfileCardWrapper
-  }))), jsx(ModalFooter, null, jsx(Button, {
+  })))), jsx(Box, {
+    xcss: footerStyle
+  }, jsx(ModalFooter, null, jsx(Button, {
     appearance: "subtle",
     onClick: handleCloseReactionsDialog
-  }, intl.formatMessage(messages.closeReactionsDialog))));
+  }, intl.formatMessage(messages.closeReactionsDialog)))));
 };

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

@@ -0,0 +1,196 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useIntl } from 'react-intl-next';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx, css } from '@emotion/react';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { Tab, TabList } from '@atlaskit/tabs';
+import { Box, Flex, xcss, Stack } from '@atlaskit/primitives';
+import { IconButton } from '@atlaskit/button/new';
+import Heading from '@atlaskit/heading';
+import { useModal } from '@atlaskit/modal-dialog';
+import Tooltip from '@atlaskit/tooltip';
+import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
+import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
+import { ResourcedEmoji } from '@atlaskit/emoji/element';
+import { messages } from '../../shared/i18n';
+import { Counter } from '../Counter';
+var REACTIONS_CONTAINER_WIDTH = 56;
+var REACTION_CONTAINER_HEIGHT = 40;
+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%)")
+  });
+};
+var customTabListStyles = css({
+  overflow: 'auto',
+  display: 'flex',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  'div[role=tablist]': {
+    flexGrow: 1,
+    // paddingInline exists to maintain styling prior to @atlaskit/tabs update that removed baked in horizontal padding
+    paddingInline: "var(--ds-space-100, 8px)"
+  }
+});
+var customTabWrapper = function customTabWrapper(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)
+  });
+};
+var firstElement = css({
+  paddingLeft: "var(--ds-space-200, 16px)"
+});
+var fullWidthStyle = xcss({
+  width: '100%',
+  padding: 'space.300',
+  paddingBlockEnd: 'space.400'
+});
+var emojiStyles = xcss({
+  transformOrigin: 'center center 0',
+  paddingInlineStart: 'space.100',
+  paddingBlock: 'space.050',
+  paddingInlineEnd: 'space.050'
+});
+var counterStyle = xcss({
+  marginTop: 'space.025'
+});
+var ReactionsTabs = function ReactionsTabs(_ref) {
+  var currentReactions = _ref.currentReactions,
+    emojiProvider = _ref.emojiProvider,
+    selectedEmojiId = _ref.selectedEmojiId;
+  var _useThemeObserver = useThemeObserver(),
+    colorMode = _useThemeObserver.colorMode;
+  return jsx("div", {
+    css: customTabListStyles,
+    id: "reactions-dialog-tabs-list"
+  }, jsx(TabList, null, currentReactions.map(function (reaction, index) {
+    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(colorMode), index === 0 ? firstElement : []]
+      // 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(Box, {
+      xcss: counterStyle
+    }, jsx(Counter, {
+      value: reaction.count
+    })))));
+  })));
+};
+export var ReactionsDialogHeader = function ReactionsDialogHeader(_ref2) {
+  var totalReactionsCount = _ref2.totalReactionsCount,
+    handlePreviousPage = _ref2.handlePreviousPage,
+    handleNextPage = _ref2.handleNextPage,
+    currentPage = _ref2.currentPage,
+    maxPages = _ref2.maxPages,
+    currentReactions = _ref2.currentReactions,
+    emojiProvider = _ref2.emojiProvider,
+    selectedEmojiId = _ref2.selectedEmojiId;
+  var _useModal = useModal(),
+    titleId = _useModal.titleId;
+  var intl = useIntl();
+  var isSinglePage = maxPages === 1;
+  var isOnFirstPage = currentPage === 1;
+  var isOnLastPage = currentPage === maxPages;
+  return jsx(Stack, null, jsx(Flex, {
+    direction: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    xcss: fullWidthStyle
+  }, jsx(Heading, {
+    size: "medium",
+    id: titleId
+  }, intl.formatMessage(messages.reactionsCount, {
+    count: totalReactionsCount
+  })), !isSinglePage && jsx(Flex, {
+    alignItems: "center",
+    gap: "space.100"
+  }, jsx(Tooltip, {
+    content: intl.formatMessage(messages.leftNavigateLabel),
+    canAppear: function canAppear() {
+      return !isOnFirstPage;
+    }
+  }, function (tooltipProps) {
+    return jsx(IconButton, _extends({}, tooltipProps, {
+      isDisabled: isOnFirstPage,
+      onClick: handlePreviousPage,
+      icon: ChevronLeftIcon,
+      label: intl.formatMessage(messages.leftNavigateLabel)
+    }));
+  }), jsx(Tooltip, {
+    content: intl.formatMessage(messages.rightNavigateLabel),
+    canAppear: function canAppear() {
+      return !isOnLastPage;
+    }
+  }, function (tooltipProps) {
+    return jsx(IconButton, _extends({}, tooltipProps, {
+      onClick: handleNextPage,
+      isDisabled: isOnLastPage,
+      icon: ChevronRightIcon,
+      label: intl.formatMessage(messages.rightNavigateLabel)
+    }));
+  }))), jsx(ReactionsTabs, {
+    currentReactions: currentReactions,
+    emojiProvider: emojiProvider,
+    selectedEmojiId: selectedEmojiId
+  }));
+};

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

@@ -1,114 +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({
-  transformOrigin: 'center center 0',
-  paddingInlineStart: 'space.100',
-  paddingBlock: 'space.050',
-  paddingInlineEnd: 'space.050'
-});
-var counterStyle = xcss({
-  marginTop: 'space.025'
-});
 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(Box, {
-      xcss: counterStyle
-    }, 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-heading-xsmall, normal 600 14px/16px 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',
@@ -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/Reactions/Reactions.js

@@ -13,6 +13,7 @@ import { ModalTransition } from '@atlaskit/modal-dialog';
 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';
@@ -141,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
         );
@@ -232,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);
     }
@@ -309,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,

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 {};