@atlaskit/reactions 30.0.0 → 30.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/reactions
 
+## 30.0.1
+
+### Patch Changes
+
+- [#131283](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131283)
+  [`8ee415b479d07`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8ee415b479d07) -
+  Migrates reactions dialog to compiled css
+
 ## 30.0.0
 
 ### Major Changes

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/reactions";
-var packageVersion = "30.0.0";
+var packageVersion = "30.0.1";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/compiled/ReactionView.compiled.css

@@ -0,0 +1,22 @@
+
+._nccu2smr li{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._qtt8glyw{list-style:none}._18u0utpp{margin-left:var(--ds-space-150,9pt)}
+._18u0ze3t{margin-left:var(--ds-space-0,0)}
+._19bvidpf{padding-left:0}
+._19pk1ejb{margin-top:var(--ds-space-300,24px)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._19pkutpp{margin-top:var(--ds-space-150,9pt)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tke1mjv{min-height:300px}
+._1ul91deq{min-width:550px}
+._24rcpxbi >span{margin-left:var(--ds-space-200,1pc)}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qidpf{padding-top:0}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._n3tdidpf{padding-bottom:0}
+._thoc15n8 li{color:var(--_1zdack)}
+._u5f3idpf{padding-right:0}
+._y3gn1e5h{text-align:left}

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

@@ -0,0 +1,77 @@
+/* ReactionView.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionView = void 0;
+require("./ReactionView.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _colors = require("@atlaskit/theme/colors");
+var _Avatar = _interopRequireDefault(require("@atlaskit/avatar/Avatar"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _tabs = require("@atlaskit/tabs");
+var _compiled = require("@atlaskit/primitives/compiled");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var userListStyle = null;
+var userStyle = null;
+var styles = {
+  userDescriptionStyle: "_18u0utpp",
+  profileWrapperStyle: "_18u0ze3t",
+  reactionViewStyle: "_19pkutpp _1tke1mjv _1ul91deq",
+  centerSpinnerStyle: "_1e0c1txw _1bah1h6o _4cvr1h6o _4t3i1osq _19pk1ejb"
+};
+var ReactionView = exports.ReactionView = function ReactionView(_ref) {
+  var reaction = _ref.reaction,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
+  var alphabeticalNames = (0, _react.useMemo)(function () {
+    var _reactionObj$users;
+    var reactionObj = reaction;
+    return ((_reactionObj$users = reactionObj.users) === null || _reactionObj$users === void 0 ? void 0 : _reactionObj$users.sort(function (a, b) {
+      return a.displayName.localeCompare(b.displayName);
+    })) || [];
+  }, [reaction]);
+  return /*#__PURE__*/React.createElement(_tabs.TabPanel, null, /*#__PURE__*/React.createElement(_compiled.Flex, {
+    direction: "column",
+    xcss: styles.reactionViewStyle
+  }, alphabeticalNames.length === 0 ? /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.centerSpinnerStyle
+  }, /*#__PURE__*/React.createElement(_spinner.default, {
+    size: "large",
+    interactionName: "reactions-spinner"
+  })) : /*#__PURE__*/React.createElement("ul", {
+    className: (0, _runtime.ax)(["_qtt8glyw _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _19pkpxbi _y3gn1e5h _nccu2smr _thoc15n8"]),
+    style: {
+      "--_1zdack": (0, _runtime.ix)("".concat("var(--ds-text, ".concat(_colors.N500, ")")))
+    }
+  }, alphabeticalNames.map(function (user) {
+    var _user$profilePicture;
+    var profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;
+    return /*#__PURE__*/React.createElement("li", {
+      key: user.id,
+      className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _ca0q1b66 _n3td1b66 _19bvidpf _u5f3idpf _24rcpxbi"])
+    }, ProfileCardWrapper && user.accountId ? /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: styles.profileWrapperStyle
+    }, /*#__PURE__*/React.createElement(ProfileCardWrapper, {
+      userId: user.accountId,
+      isAnonymous: false,
+      canViewProfile: true,
+      position: "left-start"
+    }, /*#__PURE__*/React.createElement(_Avatar.default, {
+      size: "medium",
+      src: profile,
+      testId: "profile"
+    }))) : /*#__PURE__*/React.createElement(_Avatar.default, {
+      size: "medium",
+      src: profile,
+      testId: "profile"
+    }), /*#__PURE__*/React.createElement(_compiled.Flex, {
+      xcss: styles.userDescriptionStyle
+    }, /*#__PURE__*/React.createElement("div", null, user.displayName)));
+  }))));
+};

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

@@ -25,7 +25,7 @@ var _i18n = require("../../shared/i18n");
 var _types = require("../../types");
 var _ufo = require("../../ufo");
 var _Reaction = require("./Reaction");
-var _ReactionDialog = require("../ReactionDialog");
+var _ReactionsDialog = require("./ReactionsDialog");
 var _ReactionPicker = require("../ReactionPicker");
 var _ReactionSummary = require("../ReactionSummary/");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -359,7 +359,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     className: (0, _runtime.ax)(["_1e0c1o8l _19pk1b66"])
   }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/_react.default.createElement(_segment.default, {
     name: "reactions-dialog"
-  }, /*#__PURE__*/_react.default.createElement(_ReactionDialog.ReactionsDialog, {
+  }, /*#__PURE__*/_react.default.createElement(_ReactionsDialog.ReactionsDialog, {
     selectedEmojiId: selectedEmojiId,
     reactions: sortedReactions,
     emojiProvider: emojiProvider,

package/dist/cjs/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/cjs/components/compiled/ReactionsDialog.js

@@ -0,0 +1,125 @@
+/* ReactionsDialog.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionsDialog = exports.RENDER_MODAL_TESTID = void 0;
+require("./ReactionsDialog.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _tabs = _interopRequireDefault(require("@atlaskit/tabs"));
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _constants = require("../../shared/constants");
+var _ReactionsList = require("./ReactionsList");
+var _ReactionsDialogHeader = require("./ReactionsDialogHeader");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var 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. */
+var containerStyle = null;
+
+/**
+ * Test id for the Reactions modal dialog
+ */
+var RENDER_MODAL_TESTID = exports.RENDER_MODAL_TESTID = 'render-reactions-modal';
+var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
+  var _currentReactions$;
+  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 = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasNavigatedPages = _useState2[0],
+    setHasNavigatedPages = _useState2[1];
+  var _useState3 = (0, _react.useState)(1),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    currentPage = _useState4[0],
+    setCurrentPage = _useState4[1];
+  var totalReactionsCount = (0, _react.useMemo)(function () {
+    return reactions.reduce(function (accum, current) {
+      return accum += current === null || current === void 0 ? void 0 : current.count;
+    }, 0);
+  }, [reactions]);
+  var maxPages = Math.max(1, Math.ceil(reactions.length / _constants.NUMBER_OF_REACTIONS_TO_DISPLAY));
+  var currentReactions = (0, _react.useMemo)(function () {
+    var start = (currentPage - 1) * _constants.NUMBER_OF_REACTIONS_TO_DISPLAY;
+    var end = start + _constants.NUMBER_OF_REACTIONS_TO_DISPLAY;
+    return reactions.slice(start, end);
+  }, [reactions, currentPage]);
+  var handleNextPage = function handleNextPage() {
+    setCurrentPage(function (prevPage) {
+      return Math.min(prevPage + 1, maxPages);
+    });
+    setHasNavigatedPages(true);
+  };
+  var handlePreviousPage = function handlePreviousPage() {
+    setCurrentPage(function (prevPage) {
+      return Math.max(prevPage - 1, 1);
+    });
+    setHasNavigatedPages(true);
+  };
+  var firstEmojiOnPage = (_currentReactions$ = currentReactions[0]) === null || _currentReactions$ === void 0 ? void 0 : _currentReactions$.emojiId;
+  (0, _react.useEffect)(function () {
+    // trigger the handler with the first emoji when the page changes
+    if (hasNavigatedPages && firstEmojiOnPage) {
+      handlePaginationChange(firstEmojiOnPage, currentPage, maxPages);
+    }
+  }, [hasNavigatedPages, currentPage, maxPages, firstEmojiOnPage, handlePaginationChange]);
+  var selectedIndex = currentReactions.findIndex(function (reaction) {
+    return reaction.emojiId === selectedEmojiId;
+  });
+  var onTabChange = (0, _react.useCallback)(function (index) {
+    if (index === selectedIndex) {
+      return;
+    }
+    var emojiId = currentReactions[index].emojiId;
+    handleSelectReaction(emojiId);
+  }, [selectedIndex, currentReactions, handleSelectReaction]);
+  return /*#__PURE__*/React.createElement(_modalDialog.default, {
+    onClose: handleCloseReactionsDialog,
+    height: 600,
+    testId: RENDER_MODAL_TESTID
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    ,
+    autoFocus: false
+  }, /*#__PURE__*/React.createElement(_tabs.default, {
+    id: "reactions-dialog-tabs",
+    onChange: onTabChange,
+    selected: selectedIndex
+  }, /*#__PURE__*/React.createElement(_ReactionsDialogHeader.ReactionsDialogHeader, {
+    totalReactionsCount: totalReactionsCount,
+    maxPages: maxPages,
+    handlePreviousPage: handlePreviousPage,
+    handleNextPage: handleNextPage,
+    currentPage: currentPage,
+    emojiProvider: emojiProvider,
+    currentReactions: currentReactions,
+    handleCloseReactionsDialog: handleCloseReactionsDialog
+  }), /*#__PURE__*/React.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.modalBodyStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _4t3i1osq _1e0c1txw _1bahv2br _kqswh2mm _1dm8q5uf _aetrb3bt _1bqqidpf _1ywu1ule _1yd81osq _1x88idpf _18postnw"])
+  }, /*#__PURE__*/React.createElement(_ReactionsList.ReactionsList, {
+    selectedEmojiId: selectedEmojiId,
+    reactions: currentReactions,
+    ProfileCardWrapper: ProfileCardWrapper
+  }))))));
+};

package/dist/cjs/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)}
+._n7zlfl6d{border-bottom:var(--_1wtzbnt)}._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/cjs/components/compiled/ReactionsDialogHeader.js

@@ -0,0 +1,203 @@
+/* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionsDialogHeader = void 0;
+require("./ReactionsDialogHeader.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactIntlNext = require("react-intl-next");
+var _tokens = require("@atlaskit/tokens");
+var _tabs = require("@atlaskit/tabs");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _new = require("@atlaskit/button/new");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _modalDialog = require("@atlaskit/modal-dialog");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-left"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-right"));
+var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
+var _element = require("@atlaskit/emoji/element");
+var _i18n = require("../../shared/i18n");
+var _Counter = require("./Counter");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var styles = {
+  leftNavigationStyle: "_19pk1b66 _1wpzynz6 _19bvpxbi _n3tdutpp",
+  rightNavigationStyle: "_19pk1b66 _1wpzynz6 _18u01wug _2hwxu2gc",
+  fullWidthStyle: "_1bsb1osq _ca0q1ejb _19bv1ejb _u5f31ejb _85i5xy5q",
+  emoji: "_1rjc1b66 _8hrz1nam _bozgu2gc _y4ti1b66",
+  counterStyle: "_19pkv77o"
+};
+var REACTIONS_CONTAINER_WIDTH = 56;
+var REACTION_CONTAINER_HEIGHT = 40;
+var customTabListStyles = null;
+var 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"
+};
+var firstElement = null;
+var CloseButton = function CloseButton(_ref) {
+  var handleCloseReactionsDialog = _ref.handleCloseReactionsDialog;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return /*#__PURE__*/React.createElement(_new.IconButton, {
+    onClick: handleCloseReactionsDialog,
+    icon: _close.default,
+    label: intl.formatMessage(_i18n.messages.closeReactionsDialog),
+    appearance: "subtle",
+    isTooltipDisabled: false
+  });
+};
+var LeftNavigationButton = function LeftNavigationButton(_ref2) {
+  var handlePreviousPage = _ref2.handlePreviousPage;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return /*#__PURE__*/React.createElement(_compiled.Flex, {
+    xcss: styles.leftNavigationStyle
+  }, /*#__PURE__*/React.createElement(_new.IconButton, {
+    spacing: "compact",
+    onClick: handlePreviousPage,
+    icon: _chevronLeft.default,
+    label: intl.formatMessage(_i18n.messages.leftNavigateLabel),
+    isTooltipDisabled: false
+  }));
+};
+var RightNavigationButton = function RightNavigationButton(_ref3) {
+  var handleNextPage = _ref3.handleNextPage;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return /*#__PURE__*/React.createElement(_compiled.Flex, {
+    xcss: styles.rightNavigationStyle
+  }, /*#__PURE__*/React.createElement(_new.IconButton, {
+    spacing: "compact",
+    onClick: handleNextPage,
+    icon: _chevronRight.default,
+    label: intl.formatMessage(_i18n.messages.rightNavigateLabel),
+    isTooltipDisabled: false
+  }));
+};
+var ReactionsDialogHeader = exports.ReactionsDialogHeader = function ReactionsDialogHeader(_ref4) {
+  var totalReactionsCount = _ref4.totalReactionsCount,
+    handlePreviousPage = _ref4.handlePreviousPage,
+    handleNextPage = _ref4.handleNextPage,
+    currentPage = _ref4.currentPage,
+    maxPages = _ref4.maxPages,
+    currentReactions = _ref4.currentReactions,
+    emojiProvider = _ref4.emojiProvider,
+    handleCloseReactionsDialog = _ref4.handleCloseReactionsDialog;
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    cache = _useState2[0],
+    setCache = _useState2[1];
+  var _useModal = (0, _modalDialog.useModal)(),
+    titleId = _useModal.titleId;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
+  var isSinglePage = maxPages === 1;
+  var isOnFirstPage = currentPage === 1;
+  var isOnLastPage = currentPage === maxPages;
+  var handleMouseEnter = function handleMouseEnter(reaction) {
+    var emojiId = reaction.emojiId;
+    if (!emojiId || cache[emojiId]) {
+      return;
+    }
+    (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var provider, emoji, capitalizedName;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return emojiProvider;
+          case 2:
+            provider = _context.sent;
+            _context.next = 5;
+            return provider.findByEmojiId({
+              shortName: '',
+              id: emojiId
+            });
+          case 5:
+            emoji = _context.sent;
+            if (emoji !== null && emoji !== void 0 && emoji.name) {
+              // capitalize first letter of each string
+              capitalizedName = emoji.name.replace(/\b\w/g, function (char) {
+                return char.toUpperCase();
+              });
+              setCache(function (prevCache) {
+                return _objectSpread(_objectSpread({}, prevCache), {}, (0, _defineProperty2.default)({}, emojiId, capitalizedName));
+              });
+            }
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))();
+  };
+  return /*#__PURE__*/React.createElement(_compiled.Stack, null, /*#__PURE__*/React.createElement(_compiled.Flex, {
+    direction: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    xcss: styles.fullWidthStyle
+  }, /*#__PURE__*/React.createElement(_heading.default, {
+    size: "medium",
+    id: titleId
+  }, intl.formatMessage(_i18n.messages.reactionsCount, {
+    count: totalReactionsCount
+  })), /*#__PURE__*/React.createElement(CloseButton, {
+    handleCloseReactionsDialog: handleCloseReactionsDialog
+  })), /*#__PURE__*/React.createElement(_compiled.Inline, null, /*#__PURE__*/React.createElement("div", {
+    id: "reactions-dialog-tabs-list",
+    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _n7zlfl6d _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"]),
+    style: {
+      "--_1wtzbnt": (0, _runtime.ix)("1px solid ".concat("var(--ds-border, #EBECF0)"))
+    }
+  }, !isSinglePage && !isOnFirstPage && /*#__PURE__*/React.createElement(LeftNavigationButton, {
+    handlePreviousPage: handlePreviousPage
+  }), /*#__PURE__*/React.createElement(_tabs.TabList, null, currentReactions.map(function (reaction, index) {
+    var 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: (0, _runtime.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: function onMouseEnter() {
+        handleMouseEnter(reaction);
+      }
+    }, /*#__PURE__*/React.createElement(_tabs.Tab, null, /*#__PURE__*/React.createElement(_tooltip.default, {
+      content: cache[reaction.emojiId],
+      canAppear: function canAppear() {
+        return !!cache[reaction.emojiId];
+      }
+    }, /*#__PURE__*/React.createElement(_compiled.Flex, {
+      justifyContent: "center",
+      alignItems: "center",
+      direction: "row"
+    }, /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: styles.emoji
+    }, /*#__PURE__*/React.createElement(_element.ResourcedEmoji, {
+      emojiProvider: emojiProvider,
+      emojiId: emojiId,
+      fitToHeight: 16,
+      showTooltip: true
+    })), /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: styles.counterStyle
+    }, /*#__PURE__*/React.createElement(_Counter.Counter, {
+      value: reaction.count
+    }))))));
+  }), !isSinglePage && !isOnLastPage && /*#__PURE__*/React.createElement(RightNavigationButton, {
+    handleNextPage: handleNextPage
+  })))));
+};

package/dist/cjs/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/cjs/components/compiled/ReactionsDialogTrigger.js

@@ -0,0 +1,39 @@
+/* ReactionsDialogTrigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionsDialogTrigger = void 0;
+require("./ReactionsDialogTrigger.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _react2 = require("@compiled/react");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+var _reactIntlNext = require("react-intl-next");
+var _i18n = require("../../shared/i18n");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var 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
+var ReactionsDialogTrigger = exports.ReactionsDialogTrigger = function ReactionsDialogTrigger(_ref) {
+  var onClick = _ref.onClick;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return /*#__PURE__*/React.createElement(_compiled.Pressable, {
+    xcss: (0, _react2.cx)(styles.trigger, styles.transparentEnabledTrigger),
+    onClick: onClick,
+    "aria-label": intl.formatMessage(_i18n.messages.seeWhoReactedTooltip)
+  }, /*#__PURE__*/React.createElement(_tooltip.default, {
+    content: intl.formatMessage(_i18n.messages.seeWhoReactedTooltip)
+  }, /*#__PURE__*/React.createElement(_showMoreHorizontal.default, {
+    label: intl.formatMessage(_i18n.messages.seeWhoReacted)
+  })));
+};

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

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionsList = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _ReactionView = require("./ReactionView");
+var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
+  var reactions = _ref.reactions,
+    selectedEmojiId = _ref.selectedEmojiId,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, null, reactions.map(function (reaction) {
+    if (reaction.emojiId === selectedEmojiId) {
+      return /*#__PURE__*/_react.default.createElement(_ReactionView.ReactionView, {
+        key: reaction.emojiId,
+        reaction: reaction,
+        ProfileCardWrapper: ProfileCardWrapper
+      });
+    } else {
+      return null;
+    }
+  }));
+};

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