@atlaskit/reactions 30.0.0 → 30.0.2

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

@@ -0,0 +1,63 @@
+/* ReactionView.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ReactionView.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useMemo } from 'react';
+import { N500 } from '@atlaskit/theme/colors';
+import Avatar from '@atlaskit/avatar/Avatar';
+import Spinner from '@atlaskit/spinner';
+import { TabPanel } from '@atlaskit/tabs';
+import { Box, Flex } from '@atlaskit/primitives/compiled';
+const userListStyle = null;
+const userStyle = null;
+const styles = {
+  userDescriptionStyle: "_18u0utpp",
+  profileWrapperStyle: "_18u0ze3t",
+  reactionViewStyle: "_19pkutpp _1tke1mjv _1ul91deq",
+  centerSpinnerStyle: "_1e0c1txw _1bah1h6o _4cvr1h6o _4t3i1osq _19pk1ejb"
+};
+export const ReactionView = ({
+  reaction,
+  ProfileCardWrapper
+}) => {
+  const alphabeticalNames = useMemo(() => {
+    var _reactionObj$users;
+    const reactionObj = reaction;
+    return ((_reactionObj$users = reactionObj.users) === null || _reactionObj$users === void 0 ? void 0 : _reactionObj$users.sort((a, b) => a.displayName.localeCompare(b.displayName))) || [];
+  }, [reaction]);
+  return /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    xcss: styles.reactionViewStyle
+  }, alphabeticalNames.length === 0 ? /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.centerSpinnerStyle
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "large",
+    interactionName: "reactions-spinner"
+  })) : /*#__PURE__*/React.createElement("ul", {
+    className: ax(["_qtt8glyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkpxbi _y3gn1e5h _nccu2smr _thoc10s3"])
+  }, alphabeticalNames.map(user => {
+    var _user$profilePicture;
+    const profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;
+    return /*#__PURE__*/React.createElement("li", {
+      key: user.id,
+      className: ax(["_1e0c1txw _4cvr1h6o _ca0q1b66 _n3td1b66 _19bvidpf _u5f3idpf _24rcpxbi"])
+    }, ProfileCardWrapper && user.accountId ? /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.profileWrapperStyle
+    }, /*#__PURE__*/React.createElement(ProfileCardWrapper, {
+      userId: user.accountId,
+      isAnonymous: false,
+      canViewProfile: true,
+      position: "left-start"
+    }, /*#__PURE__*/React.createElement(Avatar, {
+      size: "medium",
+      src: profile,
+      testId: "profile"
+    }))) : /*#__PURE__*/React.createElement(Avatar, {
+      size: "medium",
+      src: profile,
+      testId: "profile"
+    }), /*#__PURE__*/React.createElement(Flex, {
+      xcss: styles.userDescriptionStyle
+    }, /*#__PURE__*/React.createElement("div", null, user.displayName)));
+  }))));
+};

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

@@ -13,9 +13,9 @@ import { messages } from '../../shared/i18n';
 import { ReactionStatus } from '../../types';
 import { ReactionDialogOpened, ReactionDialogSelectedReactionChanged } from '../../ufo';
 import { Reaction } from './Reaction';
-import { ReactionsDialog } from '../ReactionDialog';
-import { ReactionPicker } from '../ReactionPicker';
-import { ReactionSummaryView } from '../ReactionSummary/';
+import { ReactionsDialog } from './ReactionsDialog';
+import { ReactionPicker } from './ReactionPicker';
+import { ReactionSummaryView } from './ReactionSummaryView';
 const wrapperStyle = null;
 const noFlexWrapStyles = null;
 const noContainerPositionStyles = null;
@@ -108,7 +108,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
   allowSelectFromSummaryView = false,
   useButtonAlignmentStyling = false
 }) => {
-  const [selectedEmojiId, setSelectedEmojiId] = useState();
+  const [selectedEmojiId, setSelectedEmojiId] = useState('');
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();

package/dist/es2019/components/compiled/ReactionsDialog.compiled.css

@@ -0,0 +1,14 @@
+._18m915vq{overflow-y:hidden}
+._18postnw:after{position:absolute}
+._1bahv2br{justify-content:start}
+._1bqqidpf:after{z-index:0}
+._1dm8q5uf{scroll-behavior:smooth}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._1x88idpf:after{bottom:0}
+._1yd81osq:after{min-width:100%}
+._1ywu1ule:after{display:block}
+._4t3i1osq{height:100%}
+._aetrb3bt:after{content:""}
+._kqswh2mm{position:relative}
+._otyr1ejb{margin-bottom:var(--ds-space-300,24px)}

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

@@ -0,0 +1,99 @@
+/* ReactionsDialog.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ReactionsDialog.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useEffect, useState, useCallback, useMemo } from 'react';
+import Tabs from '@atlaskit/tabs';
+import Modal, { ModalBody } from '@atlaskit/modal-dialog';
+import { Box } from '@atlaskit/primitives/compiled';
+import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
+import { ReactionsList } from './ReactionsList';
+import { ReactionsDialogHeader } from './ReactionsDialogHeader';
+const styles = {
+  modalBodyStyle: "_otyr1ejb"
+};
+
+/* Reactions Container. Using pseudo Element :after to set border since with onClick of Reaction to higlight the
+border blue below the reaction. */
+const containerStyle = null;
+
+/**
+ * Test id for the Reactions modal dialog
+ */
+export const RENDER_MODAL_TESTID = 'render-reactions-modal';
+export const ReactionsDialog = ({
+  reactions = [],
+  handleCloseReactionsDialog = () => {},
+  emojiProvider,
+  selectedEmojiId,
+  handleSelectReaction = () => {},
+  handlePaginationChange = () => {},
+  ProfileCardWrapper
+}) => {
+  var _currentReactions$;
+  const [hasNavigatedPages, setHasNavigatedPages] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalReactionsCount = useMemo(() => {
+    return reactions.reduce((accum, current) => {
+      return accum += current === null || current === void 0 ? void 0 : current.count;
+    }, 0);
+  }, [reactions]);
+  const maxPages = Math.max(1, Math.ceil(reactions.length / NUMBER_OF_REACTIONS_TO_DISPLAY));
+  const currentReactions = useMemo(() => {
+    const start = (currentPage - 1) * NUMBER_OF_REACTIONS_TO_DISPLAY;
+    const end = start + NUMBER_OF_REACTIONS_TO_DISPLAY;
+    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 (hasNavigatedPages && firstEmojiOnPage) {
+      handlePaginationChange(firstEmojiOnPage, currentPage, maxPages);
+    }
+  }, [hasNavigatedPages, currentPage, maxPages, firstEmojiOnPage, handlePaginationChange]);
+  const selectedIndex = currentReactions.findIndex(reaction => reaction.emojiId === selectedEmojiId);
+  const onTabChange = useCallback(index => {
+    if (index === selectedIndex) {
+      return;
+    }
+    const emojiId = currentReactions[index].emojiId;
+    handleSelectReaction(emojiId);
+  }, [selectedIndex, currentReactions, handleSelectReaction]);
+  return /*#__PURE__*/React.createElement(Modal, {
+    onClose: handleCloseReactionsDialog,
+    height: 600,
+    testId: RENDER_MODAL_TESTID
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    ,
+    autoFocus: false
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    id: "reactions-dialog-tabs",
+    onChange: onTabChange,
+    selected: selectedIndex
+  }, /*#__PURE__*/React.createElement(ReactionsDialogHeader, {
+    totalReactionsCount: totalReactionsCount,
+    maxPages: maxPages,
+    handlePreviousPage: handlePreviousPage,
+    handleNextPage: handleNextPage,
+    currentPage: currentPage,
+    emojiProvider: emojiProvider,
+    currentReactions: currentReactions,
+    handleCloseReactionsDialog: handleCloseReactionsDialog
+  }), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.modalBodyStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1reo15vq _18m915vq _4t3i1osq _1e0c1txw _1bahv2br _kqswh2mm _1dm8q5uf _aetrb3bt _1bqqidpf _1ywu1ule _1yd81osq _1x88idpf _18postnw"])
+  }, /*#__PURE__*/React.createElement(ReactionsList, {
+    selectedEmojiId: selectedEmojiId,
+    reactions: currentReactions,
+    ProfileCardWrapper: ProfileCardWrapper
+  }))))));
+};

package/dist/es2019/components/compiled/ReactionsDialogHeader.compiled.css

@@ -0,0 +1,60 @@
+
+._j5n7hco4.disabled+._j5n7hco4.disabled:after{background:linear-gradient(90deg,rgba(34,39,43,.95) 40.23%,rgba(34,39,43,.55) 58.33%,rgba(34,39,43,0) 77.49%)}
+._j5n7ii5y.disabled+._j5n7ii5y.disabled:after{background:linear-gradient(90deg,hsla(0,0%,100%,.95) 40.23%,hsla(0,0%,100%,.55) 58.33%,hsla(0,0%,100%,0) 77.49%)}
+._nhkt1ts8.disabled:after{background:linear-gradient(270deg,rgba(34,39,43,.95) 40.23%,rgba(34,39,43,.55) 58.33%,rgba(34,39,43,0) 77.49%)}
+._nhktlyvf.disabled:after{background:linear-gradient(270deg,hsla(0,0%,100%,.95) 40.23%,hsla(0,0%,100%,.55) 58.33%,hsla(0,0%,100%,0) 77.49%)}
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}
+._80wau2gc div[role=tablist]{padding-inline:var(--ds-space-100,8px)}
+._n7zl1l7n{border-bottom:1px solid var(--ds-border,#ebecf0)}._10d67vkz>span{min-height:1pc}
+._141m1j28 div[role=tablist]:before{background-color:transparent}
+._18m91wug{overflow-y:auto}
+._18u01wug{margin-left:auto}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._19pkv77o{margin-top:var(--ds-space-025,2px)}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1cezgrf3 >div{padding-bottom:0!important}
+._1e0c1txw{display:flex}
+._1gbg8vuz.disabled:after{width:56px}
+._1ira1ylp.disabled+._1ira1ylp.disabled:after{height:40px}
+._1jzxidpf.disabled:after{z-index:0}
+._1ks28vuz.disabled+._1ks28vuz.disabled:after{width:56px}
+._1o9zidpf{flex-shrink:0}
+._1reo1wug{overflow-x:auto}
+._1ul98vuz{min-width:56px}
+._1wpzynz6{align-self:self-start}
+._1wqistnw.disabled+._1wqistnw.disabled:after{position:absolute}
+._1xogidpf.disabled:after{top:0}
+._1yfp1ylp >div{min-height:40px}
+._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
+._2lx21bp4{flex-direction:column}
+._2t1tb3bt.disabled:after{content:""}
+._4cvr1h6o{align-items:center}
+._4cvr1y6m{align-items:flex-start}
+._5e04idpf.disabled+._5e04idpf.disabled:after{left:0}
+._6kbe8vuz >div{min-width:56px}
+._6tingrf3 >div{padding-right:0!important}
+._85i5xy5q{padding-block-end:var(--ds-space-400,2pc)}
+._8bggidpf.disabled+._8bggidpf.disabled:after{z-index:0}
+._8hrz1nam{transform-origin:center center 0}
+._aezr7vkz>span{min-width:1pc}
+._axenidpf.disabled:after{left:0}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._c0nrb3bt.disabled+._c0nrb3bt.disabled:after{content:""}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._clnfidpf.disabled+._clnfidpf.disabled:after{top:0}
+._dzc21h6o >div{align-items:center}
+._kqswh2mm{position:relative}
+._m3zkgrf3 >div{padding-left:0!important}
+._mwnsstnw.disabled:after{position:absolute}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._ogwtgrf3 >div{padding-top:0!important}
+._rqy31ylp.disabled:after{height:40px}
+._s2c4kb7n div[role=tablist]{flex-grow:1}
+._tij01h6o >div{justify-content:center}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._vchhusvi{box-sizing:border-box}
+._y3gn1h6o{text-align:center}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}

package/dist/es2019/components/compiled/ReactionsDialogHeader.js

@@ -0,0 +1,172 @@
+/* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ReactionsDialogHeader.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useState } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { Tab, TabList } from '@atlaskit/tabs';
+import { Box, Flex, Inline, Stack } from '@atlaskit/primitives/compiled';
+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 CloseIcon from '@atlaskit/icon/core/close';
+import { ResourcedEmoji } from '@atlaskit/emoji/element';
+import { messages } from '../../shared/i18n';
+import { Counter } from './Counter';
+const styles = {
+  leftNavigationStyle: "_19pk1b66 _1wpzynz6 _19bvpxbi _n3tdutpp",
+  rightNavigationStyle: "_19pk1b66 _1wpzynz6 _18u01wug _2hwxu2gc",
+  fullWidthStyle: "_1bsb1osq _ca0q1ejb _19bv1ejb _u5f31ejb _85i5xy5q",
+  emoji: "_1rjc1b66 _8hrz1nam _bozgu2gc _y4ti1b66",
+  counterStyle: "_19pkv77o"
+};
+const REACTIONS_CONTAINER_WIDTH = 56;
+const REACTION_CONTAINER_HEIGHT = 40;
+const customTabListStyles = null;
+const customTabWrapper = {
+  base: "_1o9zidpf _1e0c1txw _2lx21bp4 _y3gn1h6o _4cvr1h6o _1bah1h6o _1ul98vuz _vchhusvi _kqswh2mm _ogwtgrf3 _6tingrf3 _1cezgrf3 _m3zkgrf3 _6kbe8vuz _1yfp1ylp _dzc21h6o _tij01h6o _nhktlyvf _2t1tb3bt _mwnsstnw _axenidpf _1xogidpf _1gbg8vuz _rqy31ylp _1jzxidpf _j5n7ii5y _c0nrb3bt _1wqistnw _5e04idpf _clnfidpf _1ks28vuz _1ira1ylp _8bggidpf _10d67vkz _aezr7vkz",
+  darkTheme: "_nhkt1ts8 _j5n7hco4"
+};
+const firstElement = null;
+const CloseButton = ({
+  handleCloseReactionsDialog
+}) => {
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement(IconButton, {
+    onClick: handleCloseReactionsDialog,
+    icon: CloseIcon,
+    label: intl.formatMessage(messages.closeReactionsDialog),
+    appearance: "subtle",
+    isTooltipDisabled: false
+  });
+};
+const LeftNavigationButton = ({
+  handlePreviousPage
+}) => {
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.leftNavigationStyle
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    spacing: "compact",
+    onClick: handlePreviousPage,
+    icon: ChevronLeftIcon,
+    label: intl.formatMessage(messages.leftNavigateLabel),
+    isTooltipDisabled: false
+  }));
+};
+const RightNavigationButton = ({
+  handleNextPage
+}) => {
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.rightNavigationStyle
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    spacing: "compact",
+    onClick: handleNextPage,
+    icon: ChevronRightIcon,
+    label: intl.formatMessage(messages.rightNavigateLabel),
+    isTooltipDisabled: false
+  }));
+};
+export const ReactionsDialogHeader = ({
+  totalReactionsCount,
+  handlePreviousPage,
+  handleNextPage,
+  currentPage,
+  maxPages,
+  currentReactions,
+  emojiProvider,
+  handleCloseReactionsDialog
+}) => {
+  const [cache, setCache] = useState({});
+  const {
+    titleId
+  } = useModal();
+  const intl = useIntl();
+  const {
+    colorMode
+  } = useThemeObserver();
+  const isSinglePage = maxPages === 1;
+  const isOnFirstPage = currentPage === 1;
+  const isOnLastPage = currentPage === maxPages;
+  const handleMouseEnter = reaction => {
+    const {
+      emojiId
+    } = reaction;
+    if (!emojiId || cache[emojiId]) {
+      return;
+    }
+    (async () => {
+      // Note: not a network request e.g. ReactedUsersQuery
+      const provider = await emojiProvider;
+      const emoji = await provider.findByEmojiId({
+        shortName: '',
+        id: emojiId
+      });
+      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());
+        setCache(prevCache => ({
+          ...prevCache,
+          [emojiId]: capitalizedName
+        }));
+      }
+    })();
+  };
+  return /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Flex, {
+    direction: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    xcss: styles.fullWidthStyle
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "medium",
+    id: titleId
+  }, intl.formatMessage(messages.reactionsCount, {
+    count: totalReactionsCount
+  })), /*#__PURE__*/React.createElement(CloseButton, {
+    handleCloseReactionsDialog: handleCloseReactionsDialog
+  })), /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("div", {
+    id: "reactions-dialog-tabs-list",
+    className: ax(["_1reo1wug _18m91wug _n7zl1l7n _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"])
+  }, !isSinglePage && !isOnFirstPage && /*#__PURE__*/React.createElement(LeftNavigationButton, {
+    handlePreviousPage: handlePreviousPage
+  }), /*#__PURE__*/React.createElement(TabList, null, currentReactions.map((reaction, index) => {
+    const emojiId = {
+      id: reaction.emojiId,
+      shortName: ''
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: ax([customTabWrapper.base, colorMode === 'dark' && customTabWrapper.darkTheme, index === 0 && "_19bvpxbi", "reaction-elements"]),
+      key: reaction.emojiId,
+      "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id,
+      onMouseEnter: () => {
+        handleMouseEnter(reaction);
+      }
+    }, /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement(Tooltip, {
+      content: cache[reaction.emojiId],
+      canAppear: () => !!cache[reaction.emojiId]
+    }, /*#__PURE__*/React.createElement(Flex, {
+      justifyContent: "center",
+      alignItems: "center",
+      direction: "row"
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.emoji
+    }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
+      emojiProvider: emojiProvider,
+      emojiId: emojiId,
+      fitToHeight: 16,
+      showTooltip: true
+    })), /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.counterStyle
+    }, /*#__PURE__*/React.createElement(Counter, {
+      value: reaction.count
+    }))))));
+  }), !isSinglePage && !isOnLastPage && /*#__PURE__*/React.createElement(RightNavigationButton, {
+    handleNextPage: handleNextPage
+  })))));
+};

package/dist/es2019/components/compiled/ReactionsDialogTrigger.compiled.css

@@ -0,0 +1,16 @@
+
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}._19bvze3t{padding-left:var(--ds-space-0,0)}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1ul9zwfg{min-width:2pc}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}

package/dist/es2019/components/compiled/ReactionsDialogTrigger.js

@@ -0,0 +1,30 @@
+/* ReactionsDialogTrigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ReactionsDialogTrigger.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Tooltip from '@atlaskit/tooltip';
+import { cx } from '@compiled/react';
+import { Pressable } from '@atlaskit/primitives/compiled';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../../shared/i18n';
+const styles = {
+  trigger: "_2rkoiti9 _2hwx1b66 _19pk1b66 _1ul9zwfg _4t3i1tcg _1e0c1txw _1bah1h6o _4cvr1h6o _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
+  transparentEnabledTrigger: "_1h6dmuej _irr3166n _1di61dty"
+};
+// Currently not in use due to Reactions Dialog trigger being moved to tooltip
+// Similar to platform/packages/elements/reactions/src/components/Trigger/Trigger.tsx
+export const ReactionsDialogTrigger = ({
+  onClick
+}) => {
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement(Pressable, {
+    xcss: cx(styles.trigger, styles.transparentEnabledTrigger),
+    onClick: onClick,
+    "aria-label": intl.formatMessage(messages.seeWhoReactedTooltip)
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: intl.formatMessage(messages.seeWhoReactedTooltip)
+  }, /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
+    label: intl.formatMessage(messages.seeWhoReacted)
+  })));
+};

package/dist/es2019/components/compiled/ReactionsList.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+import { ReactionView } from './ReactionView';
+export const ReactionsList = ({
+  reactions,
+  selectedEmojiId,
+  ProfileCardWrapper
+}) => {
+  return /*#__PURE__*/React.createElement(Box, null, reactions.map(reaction => {
+    if (reaction.emojiId === selectedEmojiId) {
+      return /*#__PURE__*/React.createElement(ReactionView, {
+        key: reaction.emojiId,
+        reaction: reaction,
+        ProfileCardWrapper: ProfileCardWrapper
+      });
+    } else {
+      return null;
+    }
+  }));
+};

package/dist/es2019/components/compiled/Selector.compiled.css

@@ -0,0 +1,14 @@
+
+._y44v8out{animation:k12q5x3s .15s ease-in-out forwards}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1e0c1o8l{display:inline-block}
+._1p3lnqa1{border-left-style:solid}
+._4t3i1tcg{height:24px}
+._5wramuej{border-left-color:var(--ds-border,#091e4224)}
+._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._t6vde4h9{border-left-width:var(--ds-border-width,1px)}
+._tzy4idpf{opacity:0}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+@keyframes k12q5x3s{0%{opacity:1;transform:scale(.5)}75%{transform:scale(1.25)}to{opacity:1;transform:scale(1)}}

package/dist/es2019/components/compiled/Selector.js

@@ -0,0 +1,69 @@
+/* Selector.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./Selector.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Fragment } from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import { DefaultReactions } from '../../shared/constants';
+import { EmojiButton } from './EmojiButton';
+import { ShowMore } from '../ShowMore';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
+const styles = {
+  container: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
+  separator: "_t6vde4h9 _5wramuej _1p3lnqa1 _ahbq1b66 _12l2u2gc _4t3i1tcg _1e0c1o8l"
+};
+const revealAnimation = null;
+const revealStyle = null;
+
+/**
+ * Test id for wrapper Selector div
+ */
+export const RENDER_SELECTOR_TESTID = 'render-selector';
+const Reveal = ({
+  children,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId,
+    className: ax(["_y44v8out _tzy4idpf"])
+  }, children);
+};
+
+/**
+ * Reactions picker panel part of the <ReactionPicker /> component
+ */
+export const Selector = ({
+  emojiProvider,
+  onMoreClick,
+  onSelection,
+  showMore,
+  pickerQuickReactionEmojiIds = DefaultReactions
+}) => {
+  /**
+   * Render the default emoji icon
+   * @param emoji emoji item
+   * @param index location of the emoji in the array
+   */
+  const renderEmoji = (emoji, index) => {
+    var _emoji$id;
+    return /*#__PURE__*/React.createElement(Reveal, {
+      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
+      testId: RENDER_SELECTOR_TESTID
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      content: emoji.shortName
+    }, /*#__PURE__*/React.createElement(EmojiButton, {
+      emojiId: emoji,
+      emojiProvider: emojiProvider,
+      onClick: onSelection
+    })));
+  };
+  return /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    xcss: styles.container
+  }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.separator
+  }), /*#__PURE__*/React.createElement(Reveal, null, /*#__PURE__*/React.createElement(ShowMore, {
+    key: "more",
+    onClick: onMoreClick
+  }))) : null);
+};

package/dist/es2019/components/compiled/StaticReaction.compiled.css

@@ -10,8 +10,10 @@
 ._2lx2vrvc{flex-direction:row}
 ._4cvr1y6m{align-items:flex-start}
 ._4t3i1tcg{height:24px}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
-._d0al73ad:hover{cursor:default}
+._d0al73ad:hover{cursor:default}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}

package/dist/es2019/components/compiled/StaticReaction.js

@@ -3,9 +3,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./StaticReaction.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Box } from '@atlaskit/primitives/compiled';
+import { Pressable } from '@atlaskit/primitives/compiled';
 const styles = {
-  staticReaction: "_1reo15vq _18m915vq _19itglyw _2rkoglpi _1e0c1txw _2lx2vrvc _4cvr1y6m _1ul914no _4t3i1tcg _syaz1gjq _1pfh1b66 _12l21b66 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _d0al73ad"
+  staticReaction: "_1reo15vq _18m915vq _19itglyw _2rkoglpi _1e0c1txw _2lx2vrvc _4cvr1y6m _1ul914no _4t3i1tcg _bfhksm61 _syaz1gjq _1pfh1b66 _12l21b66 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _d0al73ad _irr3166n"
 };
 export const StaticReaction = ({
   onMouseEnter,
@@ -14,11 +14,10 @@ export const StaticReaction = ({
   testId,
   dataAttributes = {}
 }) => {
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
     onMouseEnter: onMouseEnter,
     onFocus: onFocus,
     testId: testId,
-    xcss: styles.staticReaction,
-    backgroundColor: "color.background.neutral.subtle"
+    xcss: styles.staticReaction
   }, dataAttributes), children);
 };

package/dist/es2019/components/compiled/Trigger.compiled.css

@@ -0,0 +1,34 @@
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqoglyw{border-style:none}
+._1dqonqa1{border-style:solid}
+._1h6d13gt{border-color:var(--ds-border-disabled,#091e420f)}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1bsbviql{width:2rem}
+._1e0c1txw{display:flex}
+._1ul9146b{min-width:110px}
+._1ul91tcg{min-width:24px}
+._1ul9zwfg{min-width:2pc}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._4t3iviql{height:2rem}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._irr3108i:hover{background-color:var(--ds-surface-hovered,#f1f2f4)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
+._1di61ji5:active{background-color:var(--ds-surface-pressed,#dcdfe4)}