@atlaskit/reactions 24.8.0 → 24.9.0

package/dist/cjs/i18n/ko.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': '반응을 일시적으로 사용할 수 없습니다',
   'fabric.reactions.loading': '로드 중…',
   'fabric.reactions.more.emojis': '이모지 더 보기',
-  'fabric.reactions.more.info': '자세한 정보',
   'fabric.reactions.other.reacted.users': '{count, plural, other {및 그 외 {count}명}}',
   'fabric.reactions.reactwithemoji': '{emoji} 이모지로 반응',
   'fabric.reactions.summary': '사용자 반응 모두 보기',
@@ -25,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': '닫기',
   'reactions.dialog.left.navigate': '왼쪽 탐색',
   'reactions.dialog.people-who-reacted.subheader': '{emojiShortName} 이모지로 반응한 사용자',
-  'reactions.dialog.reactions.count': '{count, plural, other {반응 {count,number}개}}',
   'reactions.dialog.right.navigate': '오른쪽 탐색',
   'reactions.dialog.viewall': '모두 보기',
   'reactions.dialog.viewall.tooltip': '사용자 반응 모두 보기'

package/dist/cjs/i18n/nb.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Reaksjoner er midlertidig utilgjengelige',
   'fabric.reactions.loading': 'Laster inn …',
   'fabric.reactions.more.emojis': 'Flere emojier',
-  'fabric.reactions.more.info': 'Mer informasjon',
   'fabric.reactions.other.reacted.users': '{count, plural, one {og én annen} other {og {count} andre}}',
   'fabric.reactions.reactwithemoji': 'Reager med emojien {emoji}',
   'fabric.reactions.summary': 'Se alle brukerreaksjoner',
@@ -25,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Lukk',
   'reactions.dialog.left.navigate': 'Naviger til venstre',
   'reactions.dialog.people-who-reacted.subheader': 'Personer som reagerte med {emojiShortName}',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reaksjon} other {{count,number} reaksjoner}}',
   'reactions.dialog.right.navigate': 'Naviger til høyre',
   'reactions.dialog.viewall': 'Vis alle',
   'reactions.dialog.viewall.tooltip': 'Se alle brukerreaksjoner'

package/dist/cjs/i18n/nl.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Reacties zijn tijdelijk niet beschikbaar',
   'fabric.reactions.loading': 'Bezig met laden…',
   'fabric.reactions.more.emojis': "Meer emoji's",
-  'fabric.reactions.more.info': 'Meer info',
   'fabric.reactions.other.reacted.users': '{count, plural, one {en één andere} other {en {count} andere}}',
   'fabric.reactions.reactwithemoji': 'Reageren met emoticon {emoji}',
   'fabric.reactions.summary': 'Alle reacties van gebruikers bekijken',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Navigeer naar links',
   'reactions.dialog.people-who-reacted.subheader': 'Mensen die {emojiShortName} hebben gereageerd',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reactie} other {{count,number} reacties}}',
   'reactions.dialog.right.navigate': 'Navigeer naar rechts',
   'reactions.dialog.viewall': 'Alles bekijken',
   'reactions.dialog.viewall.tooltip': 'Alle reacties van gebruikers bekijken'

package/dist/cjs/i18n/pl.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Reakcje są tymczasowo niedostępne',
   'fabric.reactions.loading': 'Ładowanie...',
   'fabric.reactions.more.emojis': 'Więcej emoji',
-  'fabric.reactions.more.info': 'Więcej informacji',
   'fabric.reactions.other.reacted.users': '{count, plural, one {i jeszcze 1} few {i jeszcze {count}} many {i jeszcze {count}} other {i jeszcze {count}}}',
   'fabric.reactions.reactwithemoji': 'Zareaguj za pomocą emoji {emoji}',
   'fabric.reactions.summary': 'Wyświetl wszystkie reakcje użytkowników',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Przejdź w lewo',
   'reactions.dialog.people-who-reacted.subheader': 'Osoby, które zareagowały, przesyłając emoji {emojiShortName}',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reakcja} few {{count,number} reakcje} many {{count,number} reakcji} other {{count,number} reakcji}}',
   'reactions.dialog.right.navigate': 'Przejdź w prawo',
   'reactions.dialog.viewall': 'Wyświetl wszystkich',
   'reactions.dialog.viewall.tooltip': 'Wyświetl wszystkie reakcje użytkowników'

package/dist/cjs/i18n/pt_BR.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'As reações estão indisponíveis no momento',
   'fabric.reactions.loading': 'Carregando...',
   'fabric.reactions.more.emojis': 'Mais emojis',
-  'fabric.reactions.more.info': 'Mais informações',
   'fabric.reactions.other.reacted.users': '{count, plural, one {e mais um} other {e mais {count}}}',
   'fabric.reactions.reactwithemoji': 'Reaja com um emoji {emoji}',
   'fabric.reactions.summary': 'Veja todas as reações de usuários',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Navegar para a esquerda',
   'reactions.dialog.people-who-reacted.subheader': 'Pessoas que reagiram com {emojiShortName}',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reação} other {{count,number} reações}}',
   'reactions.dialog.right.navigate': 'Navegar para a direita',
   'reactions.dialog.viewall': 'Ver tudo',
   'reactions.dialog.viewall.tooltip': 'Veja todas as reações de usuários'

package/dist/cjs/i18n/ru.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Реакции временно недоступны',
   'fabric.reactions.loading': 'Загрузка…',
   'fabric.reactions.more.emojis': 'Другие эмодзи',
-  'fabric.reactions.more.info': 'Подробнее',
   'fabric.reactions.other.reacted.users': '{count, plural, one {и еще один} few {и еще {count}} many {и еще {count}} other {и еще {count}}}',
   'fabric.reactions.reactwithemoji': 'Отреагировать с помощью эмодзи {emoji}',
   'fabric.reactions.summary': 'Посмотреть все реакции пользователей',
@@ -25,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': 'Закрыть',
   'reactions.dialog.left.navigate': 'Навигация влево',
   'reactions.dialog.people-who-reacted.subheader': 'Люди, которые оставили реакцию {emojiShortName}',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} реакция} few {{count,number} реакции} many {{count,number} реакций} other {{count,number} реакции}}',
   'reactions.dialog.right.navigate': 'Навигация вправо',
   'reactions.dialog.viewall': 'Просмотреть все',
   'reactions.dialog.viewall.tooltip': 'Посмотреть все реакции пользователей'

package/dist/cjs/i18n/sv.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Reaktioner är inte tillgängliga just nu',
   'fabric.reactions.loading': 'Läser in ...',
   'fabric.reactions.more.emojis': 'Fler emojis',
-  'fabric.reactions.more.info': 'Mer info',
   'fabric.reactions.other.reacted.users': '{count, plural, one {och en annan} other {och {count} andra}}',
   'fabric.reactions.reactwithemoji': 'Reagera med emojin {emoji}',
   'fabric.reactions.summary': 'Visa alla reaktioner från användare',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Vänster navigering',
   'reactions.dialog.people-who-reacted.subheader': 'Personer som reagerade med {emojiShortName}',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reaktion} other {{count,number} reaktioner}}',
   'reactions.dialog.right.navigate': 'Höger navigering',
   'reactions.dialog.viewall': 'Visa alla',
   'reactions.dialog.viewall.tooltip': 'Visa alla reaktioner från användare'

package/dist/cjs/i18n/th.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'การแสดงปฏิกิริยาไม่สามารถใช้งานได้ชั่วคราว',
   'fabric.reactions.loading': 'กำลังโหลด...',
   'fabric.reactions.more.emojis': 'เอโมจิเพิ่มเติม',
-  'fabric.reactions.more.info': 'ข้อมูลเพิ่มเติม',
   'fabric.reactions.other.reacted.users': '{count, plural, other {และคนอื่น ๆ อีก {count} คน}}',
   'fabric.reactions.reactwithemoji': 'แสดงปฏิกิริยาด้วยเอโมจิ {emoji}',
   'fabric.reactions.summary': 'ดูการโต้ตอบของผู้ใช้ทั้งหมด',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'นำทางไปทางซ้าย',
   'reactions.dialog.people-who-reacted.subheader': 'ผู้ที่แสดงปฏิกิริยาด้วยเอโมจิ {emojiShortName}',
-  'reactions.dialog.reactions.count': '{count, plural, other {{count,number} การโต้ตอบ}}',
   'reactions.dialog.right.navigate': 'นำทางไปทางขวา',
   'reactions.dialog.viewall': 'ดูทั้งหมด',
   'reactions.dialog.viewall.tooltip': 'ดูผู้ใช้ที่ตอบสนองทั้งหมด'

package/dist/cjs/i18n/tr.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Tepkiler geçici olarak kullanılamıyor',
   'fabric.reactions.loading': 'Yükleniyor...',
   'fabric.reactions.more.emojis': 'Daha fazla emoji',
-  'fabric.reactions.more.info': 'Daha fazla bilgi',
   'fabric.reactions.other.reacted.users': '{count, plural, one {ve bir kişi daha} other {ve {count} kişi daha}}',
   'fabric.reactions.reactwithemoji': "{emoji} emoji'siyle tepki verin",
   'fabric.reactions.summary': 'Tüm kullanıcı tepkilerini görüntüleyin',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Sol Gezinme',
   'reactions.dialog.people-who-reacted.subheader': '{emojiShortName} ile tepki veren kişiler',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} tepki} other {{count,number} tepki}}',
   'reactions.dialog.right.navigate': 'Sağ Gezinme',
   'reactions.dialog.viewall': 'Tümünü göster',
   'reactions.dialog.viewall.tooltip': 'Tüm kullanıcı tepkilerini görüntüleyin'

package/dist/cjs/i18n/uk.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Реакції тимчасово недоступні',
   'fabric.reactions.loading': 'Завантаження...',
   'fabric.reactions.more.emojis': 'Інші емодзі',
-  'fabric.reactions.more.info': 'Докладніше',
   'fabric.reactions.other.reacted.users': '{count, plural, one {і ще {count} особа} few {і ще {count} особи} many {і ще {count} осіб} other {і ще {count} особи}}',
   'fabric.reactions.reactwithemoji': 'Вставити емодзі {emoji}',
   'fabric.reactions.summary': 'Переглянути всі реакції користувачів',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Перейти вліво',
   'reactions.dialog.people-who-reacted.subheader': 'Люди, що додали реакцію {emojiShortName}',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} реакція} few {{count,number} реакції} many {{count,number} реакцій} other {{count,number} реакції}}',
   'reactions.dialog.right.navigate': 'Перейти вправо',
   'reactions.dialog.viewall': 'Переглянути все',
   'reactions.dialog.viewall.tooltip': 'Переглянути всі реакції користувачів'

package/dist/cjs/i18n/vi.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': 'Tính năng tương tác tạm thời không hỗ trợ',
   'fabric.reactions.loading': 'Đang tải...',
   'fabric.reactions.more.emojis': 'Biểu tượng cảm xúc khác',
-  'fabric.reactions.more.info': 'Xem thêm thông tin',
   'fabric.reactions.other.reacted.users': '{count, plural, other {và {count} người khác}}',
   'fabric.reactions.reactwithemoji': 'Bày tỏ biểu tượng cảm xúc {emoji}',
   'fabric.reactions.summary': 'Xem tất cả tương tác của người dùng',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': 'Sang trái',
   'reactions.dialog.people-who-reacted.subheader': 'Những người đã tương tác bằng {emojiShortName}',
-  'reactions.dialog.reactions.count': '{count, plural, other {{count,number} tương tác}}',
   'reactions.dialog.right.navigate': 'Sang phải',
   'reactions.dialog.viewall': 'Xem tất cả',
   'reactions.dialog.viewall.tooltip': 'Xem tất cả tương tác của người dùng'

package/dist/cjs/i18n/zh.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': '反应暂时不可用',
   'fabric.reactions.loading': '正在加载...',
   'fabric.reactions.more.emojis': '更多表情',
-  'fabric.reactions.more.info': '更多信息',
   'fabric.reactions.other.reacted.users': '{count, plural, other {以及其他 {count} 个人}}',
   'fabric.reactions.reactwithemoji': '使用 {emoji} 表情回应',
   'fabric.reactions.summary': '查看所有用户回应',
@@ -26,7 +25,6 @@ var _default = exports.default = {
   'reactions.dialog.emoji.name': '{emojiName}',
   'reactions.dialog.left.navigate': '向左导航',
   'reactions.dialog.people-who-reacted.subheader': '使用 {emojiShortName} 回应的人员',
-  'reactions.dialog.reactions.count': '{count, plural, other {{count,number} 条反应}}',
   'reactions.dialog.right.navigate': '向右导航',
   'reactions.dialog.viewall': '查看全部',
   'reactions.dialog.viewall.tooltip': '查看所有用户反应'

package/dist/cjs/i18n/zh_TW.js

@@ -17,7 +17,6 @@ var _default = exports.default = {
   'fabric.reactions.error.unexpected': '暫時無法使用回覆功能',
   'fabric.reactions.loading': '正在載入...',
   'fabric.reactions.more.emojis': '更多表情符號',
-  'fabric.reactions.more.info': '更多資訊',
   'fabric.reactions.other.reacted.users': '{count, plural, other {還有其他 {count} 個}}',
   'fabric.reactions.reactwithemoji': '使用 {emoji} 表情符號回應',
   'fabric.reactions.summary': '檢視所有使用者的回應',
@@ -25,7 +24,6 @@ var _default = exports.default = {
   'reactions.dialog.close': '關閉',
   'reactions.dialog.left.navigate': '左側導覽',
   'reactions.dialog.people-who-reacted.subheader': '使用 {emojiShortName} 回應的人',
-  'reactions.dialog.reactions.count': '{count, plural, other {{count,number} 個回應}}',
   'reactions.dialog.right.navigate': '右側導覽',
   'reactions.dialog.viewall': '查看全部',
   'reactions.dialog.viewall.tooltip': '檢視所有使用者的回應'

package/dist/cjs/index.js

@@ -85,6 +85,7 @@ var UFO = exports.UFO = {
   ReactionDialogClosed: _ufo.ReactionDialogClosed,
   ReactionDialogOpened: _ufo.ReactionDialogOpened,
   ReactionDialogSelectedReactionChanged: _ufo.ReactionDialogSelectedReactionChanged,
+  ReactionDialogPageNavigation: _ufo.ReactionDialogPageNavigation,
   ReactionsRemove: _ufo.ReactionsRemove,
   ReactionsRendered: _ufo.ReactionsRendered,
   sampledReactionsRendered: _ufo.sampledReactionsRendered

package/dist/cjs/types/reaction.js

@@ -7,11 +7,6 @@ exports.ReactionUpdateType = exports.ReactionStatus = void 0;
 /**
  * Collection of reactions as object (key is unique id from containerAri and ari combined)
  */
-/**
- * Event handler when reactions dialog selected emoji is clicked
- * @param emojiId selected emoji
- * @param analyticsEvent Optional analytics event emitted from @atlaskit/tabs component
- */
 /**
  * MetaData for Reaction object
  */

package/dist/cjs/ufo/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sampledReactionsRendered = exports.ReactionsRendered = exports.ReactionsRemove = exports.ReactionsAdd = exports.ReactionDialogSelectedReactionChanged = exports.ReactionDialogOpened = exports.ReactionDialogClosed = exports.ReactionDetailsFetch = exports.PickerRender = exports.ExperienceName = exports.ComponentName = void 0;
+exports.sampledReactionsRendered = exports.ReactionsRendered = exports.ReactionsRemove = exports.ReactionsAdd = exports.ReactionDialogSelectedReactionChanged = exports.ReactionDialogPageNavigation = exports.ReactionDialogOpened = exports.ReactionDialogClosed = exports.ReactionDetailsFetch = exports.PickerRender = exports.ExperienceName = exports.ComponentName = void 0;
 var _ufo = require("@atlaskit/ufo");
 var _emoji = require("@atlaskit/emoji");
 /**
@@ -36,6 +36,7 @@ var ExperienceName = exports.ExperienceName = /*#__PURE__*/function (ExperienceN
   ExperienceName["REACTION_DIALOG_OPENED"] = "reaction-dialog-opened";
   ExperienceName["REACTION_DIALOG_CLOSED"] = "reaction-dialog-closed";
   ExperienceName["REACTION_DIALOG_SELECTED_REACTION_CHANGED"] = "reaction-dialog-selected-reaction-changed";
+  ExperienceName["REACTION_DIALOG_PAGE_NAVIGATION"] = "reaction-dialog-page-navigation";
   return ExperienceName;
 }({});
 /**
@@ -78,6 +79,11 @@ var ReactionDialogClosed = exports.ReactionDialogClosed = new _ufo.UFOExperience
  */
 var ReactionDialogSelectedReactionChanged = exports.ReactionDialogSelectedReactionChanged = new _ufo.UFOExperience(ExperienceName.REACTION_DIALOG_SELECTED_REACTION_CHANGED, createExperienceConfig(ComponentName.REACTION_DIALOG, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
 
+/**
+ * Experience when a user switches to another page of emojis
+ */
+var ReactionDialogPageNavigation = exports.ReactionDialogPageNavigation = new _ufo.UFOExperience(ExperienceName.REACTION_DIALOG_PAGE_NAVIGATION, createExperienceConfig(ComponentName.REACTION_DIALOG, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
+
 /**
  * Experience when a reaction details gets fetched
  */

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

package/dist/es2019/components/ReactionDialog/ReactionView.js

@@ -14,7 +14,7 @@ import { TabPanel } from '@atlaskit/tabs';
 import { Box, Flex, xcss, Inline } from '@atlaskit/primitives';
 import Heading from '@atlaskit/heading';
 import { messages } from '../../shared/i18n';
-import { userListStyle, userStyle, centerSpinner } from './styles';
+import { userListStyle, userStyle } from './styles';
 const userDescriptionStyle = xcss({
   marginLeft: 'space.150'
 });
@@ -22,6 +22,15 @@ const profileWrapperStyle = xcss({
   marginLeft: 'space.0'
 });
 const reactionViewStyle = xcss({
+  marginTop: 'space.300',
+  minHeight: '300px',
+  minWidth: '550px'
+});
+const centerSpinnerStyle = xcss({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
   marginTop: 'space.300'
 });
 const headerStyle = xcss({
@@ -36,7 +45,7 @@ export const ReactionView = ({
   reaction,
   ProfileCardWrapper
 }) => {
-  const [emojiShortName, setEmojiShortName] = useState('');
+  const [emojiName, setEmojiName] = useState('');
   useEffect(() => {
     (async () => {
       const provider = await emojiProvider;
@@ -44,9 +53,10 @@ export const ReactionView = ({
         shortName: '',
         id: selectedEmojiId
       });
-      if (emoji !== null && emoji !== void 0 && emoji.shortName) {
-        const shortNameWithoutColons = emoji.shortName.replace(/:/g, '');
-        setEmojiShortName(shortNameWithoutColons);
+      if (emoji !== null && emoji !== void 0 && emoji.name) {
+        // capitalize first letter of each string
+        const capitalizedName = emoji.name.replace(/\b\w/g, char => char.toUpperCase());
+        setEmojiName(capitalizedName);
       }
     })();
   }, [emojiProvider, selectedEmojiId, reaction]);
@@ -64,7 +74,7 @@ export const ReactionView = ({
     size: "xsmall"
   }, jsx(FormattedMessage, _extends({}, messages.peopleWhoReactedSubheading, {
     values: {
-      emojiShortName
+      emojiShortName: emojiName
     }
   }))), jsx(Box, {
     as: "span",
@@ -78,8 +88,8 @@ export const ReactionView = ({
     fitToHeight: 24
   }))), alphabeticalNames.length === 0 ?
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: centerSpinner
+  jsx(Box, {
+    xcss: centerSpinnerStyle
   }, jsx(Spinner, {
     size: "large"
   })) :

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

@@ -42,6 +42,10 @@ export const ReactionsDialog = ({
   var _currentReactions$;
   const [elementToScroll, setElementToScroll] = useState();
   const [reactionsContainerRef, setReactionsContainerRef] = useState(null);
+
+  // prevents accidental triggering of handlePaginationChange on initial load
+  const [hasNavigatedPages, setHasNavigatedPages] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
   const reactionElementsRef = useRef();
   const observerRef = useRef();
   const intl = useIntl();
@@ -51,29 +55,27 @@ export const ReactionsDialog = ({
       return accum += current === null || current === void 0 ? void 0 : current.count;
     }, 0);
   }, [reactions]);
-  const sortedReactions = useMemo(() => {
-    return [...reactions].sort((a, b) => (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count));
-  }, [reactions]);
   const maxPages = Math.max(1, Math.ceil(reactions.length / NUMBER_OF_REACTIONS_TO_DISPLAY));
-  const [currentPage, setCurrentPage] = useState(1);
   const currentReactions = useMemo(() => {
     const start = (currentPage - 1) * NUMBER_OF_REACTIONS_TO_DISPLAY;
     const end = start + NUMBER_OF_REACTIONS_TO_DISPLAY;
-    return sortedReactions.slice(start, end);
-  }, [sortedReactions, currentPage]);
+    return reactions.slice(start, end);
+  }, [reactions, currentPage]);
   const handleNextPage = () => {
     setCurrentPage(prevPage => Math.min(prevPage + 1, maxPages));
+    setHasNavigatedPages(true);
   };
   const handlePreviousPage = () => {
     setCurrentPage(prevPage => Math.max(prevPage - 1, 1));
+    setHasNavigatedPages(true);
   };
   const firstEmojiOnPage = (_currentReactions$ = currentReactions[0]) === null || _currentReactions$ === void 0 ? void 0 : _currentReactions$.emojiId;
   useEffect(() => {
     // trigger the handler with the first emoji when the page changes
-    if (firstEmojiOnPage) {
-      handlePaginationChange(firstEmojiOnPage);
+    if (hasNavigatedPages && firstEmojiOnPage) {
+      handlePaginationChange(firstEmojiOnPage, currentPage, maxPages);
     }
-  }, [currentPage, firstEmojiOnPage, handlePaginationChange]);
+  }, [hasNavigatedPages, currentPage, maxPages, firstEmojiOnPage, handlePaginationChange]);
 
   /* set Reactions Border Width , 8 Number of reactions to display*/
   const reactionsBorderWidth = useMemo(() => {
@@ -147,12 +149,12 @@ export const ReactionsDialog = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const selectedIndex = currentReactions.findIndex(reaction => reaction.emojiId === selectedEmojiId);
-  const onTabChange = useCallback((index, analyticsEvent) => {
+  const onTabChange = useCallback(index => {
     if (index === selectedIndex) {
       return;
     }
     const emojiId = currentReactions[index].emojiId;
-    handleSelectReaction(emojiId, analyticsEvent);
+    handleSelectReaction(emojiId);
   }, [selectedIndex, currentReactions, handleSelectReaction]);
   return jsx(Modal, {
     onClose: handleCloseReactionsDialog,

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

@@ -74,13 +74,4 @@ export const customTabListStyles = css({
     // paddingInline exists to maintain styling prior to @atlaskit/tabs update that removed baked in horizontal padding
     paddingInline: "var(--ds-space-100, 8px)"
   }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const centerSpinner = css({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  height: '100%',
-  marginTop: "var(--ds-space-300, 24px)"
 });

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

@@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl-next';
 import Popup from '@atlaskit/popup';
 import { Box, Inline, Text, xcss } from '@atlaskit/primitives';
 import Button from '@atlaskit/button/new';
+import Tooltip from '@atlaskit/tooltip';
 import { Reaction } from '../Reaction';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
 import { messages } from '../../shared/i18n';
@@ -56,14 +57,20 @@ export const ReactionSummaryView = ({
       showParticleEffect: particleEffectByEmoji[reaction.emojiId]
     })), allowUserDialog && /*#__PURE__*/React.createElement(Box, {
       xcss: viewAllButtonStyling
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.seeWhoReactedTooltip),
+      hideTooltipOnClick: true
+    }, tooltipProps => /*#__PURE__*/React.createElement(Button, _extends({}, tooltipProps, {
       appearance: "subtle",
-      onClick: () => handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 ? void 0 : handleOpenReactionsDialog(reactions[0].emojiId),
-      spacing: "compact"
-    }, /*#__PURE__*/React.createElement(Text, {
+      spacing: "compact",
+      onClick: () => {
+        handlePopupClose();
+        handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 ? void 0 : handleOpenReactionsDialog(reactions[0].emojiId);
+      }
+    }), /*#__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,
     trigger: triggerProps => /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {

package/dist/es2019/components/Reactions/Reactions.js

@@ -11,28 +11,25 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
 import Button from '@atlaskit/button/new';
 import Tooltip from '@atlaskit/tooltip';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } 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';
 import { ReactionStatus } from '../../types';
-import { ReactionDialogClosed, ReactionDialogOpened, ReactionDialogSelectedReactionChanged } from '../../ufo';
+import { ReactionDialogClosed, ReactionDialogOpened, ReactionDialogSelectedReactionChanged, ReactionDialogPageNavigation } from '../../ufo';
 import { Reaction } from '../Reaction';
 import { ReactionsDialog } from '../ReactionDialog';
 import { ReactionPicker } from '../ReactionPicker';
 import { ReactionSummaryView } from '../ReactionSummary/';
 import { reactionPickerStyle, wrapperStyle } from './styles';
-const tooltipStyle = xcss({
-  paddingLeft: 'space.050'
-});
 
 /**
- * Set of all available UFO experiences relating to reactions dialog
+ * Set of all available UFO experiences relating to Reactions Dialog
  */
 export const ufoExperiences = {
   /**
-   * Expeirence when a reaction dialog is opened
+   * Experience when a reaction dialog is opened
    */
   openDialog: ReactionDialogOpened,
   /**
@@ -42,7 +39,8 @@ export const ufoExperiences = {
   /**
    * Experience when a reaction changed/fetched from inside the modal dialog
    */
-  selectedReactionChangeInsideDialog: ReactionDialogSelectedReactionChanged
+  selectedReactionChangeInsideDialog: ReactionDialogSelectedReactionChanged,
+  pageNavigated: ReactionDialogPageNavigation
 };
 
 /**
@@ -98,6 +96,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
   onDialogOpenCallback = () => {},
   onDialogCloseCallback = () => {},
   onDialogSelectReactionCallback = () => {},
+  onDialogPageChangeCallback = () => {},
   emojiPickerSize = 'medium',
   miniMode = false,
   summaryViewEnabled = false,
@@ -158,31 +157,12 @@ export const Reactions = /*#__PURE__*/React.memo(({
   }, [createAnalyticsEvent, onSelection, reactions]);
 
   /**
-   * event handler to open selected reaction from tooltip
+   * event handler to open dialog with selected reaction
    * @param emojiId selected emoji id
    */
   const handleOpenReactionsDialog = emojiId => {
     // ufo start opening reaction dialog
     ufoExperiences.openDialog.start();
-    setSelectedEmojiId(emojiId);
-    onDialogOpenCallback(emojiId, 'tooltip');
-    // ufo opening reaction dialog success
-    ufoExperiences.openDialog.success({
-      metadata: {
-        emojiId,
-        source: 'Reactions',
-        reason: 'Opening dialog from emoji tooltip link successfully'
-      }
-    });
-  };
-
-  /**
-   * Event handler to oepn all reactions link button
-   */
-  const handleOpenAllReactionsDialog = () => {
-    // ufo start opening reaction dialog
-    ufoExperiences.openDialog.start();
-    const emojiId = reactions[0].emojiId;
     getReactionDetails(emojiId);
     setSelectedEmojiId(emojiId);
     onDialogOpenCallback(emojiId, 'button');
@@ -192,7 +172,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
       metadata: {
         emojiId,
         source: 'Reactions',
-        reason: 'Opening all reactions dialog link successfully'
+        reason: 'Opening Reactions Dialog successfully'
       }
     });
   };
@@ -210,14 +190,12 @@ export const Reactions = /*#__PURE__*/React.memo(({
       }
     });
   };
-  const handleSelectReactionInDialog = (emojiId, analyticsEvent) => {
+  const handleSelectReactionInDialog = emojiId => {
     // ufo selected reaction inside the modal dialog
     ufoExperiences.selectedReactionChangeInsideDialog.start();
     handleReactionMouseEnter(emojiId);
     setSelectedEmojiId(emojiId);
-    if (analyticsEvent) {
-      onDialogSelectReactionCallback(emojiId, analyticsEvent);
-    }
+    onDialogSelectReactionCallback(emojiId);
 
     // ufo selected reaction inside the modal dialog success
     ufoExperiences.selectedReactionChangeInsideDialog.success({
@@ -228,9 +206,20 @@ export const Reactions = /*#__PURE__*/React.memo(({
       }
     });
   };
-  const handlePaginationChange = useCallback(emojiId => {
+  const handlePaginationChange = useCallback((emojiId, currentPage, maxPages) => {
+    ufoExperiences.pageNavigated.start();
+
+    // fetch the latest active emoji from the new page
     getReactionDetails(emojiId);
     setSelectedEmojiId(emojiId);
+    onDialogPageChangeCallback(emojiId, currentPage, maxPages);
+    ufoExperiences.pageNavigated.success({
+      metadata: {
+        emojiId,
+        source: 'Reactions Dialog',
+        reason: 'Navigated to new page'
+      }
+    });
   },
   // Exclude unstable getReactionDetails to avoid extra re-renders
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -269,6 +258,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
 
   // criteria to show Reactions Dialog
   const hasEmojiWithFivePlusReactions = reactions.some(reaction => reaction.count >= 5);
+  const sortedReactions = useMemo(() => {
+    return [...memorizedReactions].sort((a, b) => (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count));
+  }, [memorizedReactions]);
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("div", {
@@ -277,7 +269,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     }, shouldShowSummaryView ? jsx("div", {
       "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
     }, jsx(ReactionSummaryView, {
-      reactions: memorizedReactions,
+      reactions: sortedReactions,
       emojiProvider: emojiProvider,
       flash: flash,
       particleEffectByEmoji: particleEffectByEmoji,
@@ -317,19 +309,17 @@ export const Reactions = /*#__PURE__*/React.memo(({
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
-    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Box, {
-      xcss: tooltipStyle
-    }, jsx(Tooltip, {
+    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Box, null, jsx(Tooltip, {
       content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true
     }, tooltipProps => jsx(Button, _extends({}, tooltipProps, {
       appearance: "subtle",
       spacing: "compact",
-      onClick: handleOpenAllReactionsDialog,
+      onClick: () => handleOpenReactionsDialog(sortedReactions[0].emojiId),
       testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
     }), jsx(FormattedMessage, messages.seeWhoReacted)))), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
       selectedEmojiId: selectedEmojiId,
-      reactions: memorizedReactions,
+      reactions: sortedReactions,
       emojiProvider: emojiProvider,
       handleCloseReactionsDialog: handleCloseReactionsDialog,
       handleSelectReaction: handleSelectReactionInDialog,