@atlaskit/reactions 22.2.3 → 22.2.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/reactions
 
+## 22.2.5
+
+### Patch Changes
+
+- [`dfbecb4aa7c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dfbecb4aa7c) - [ux] [COLLAB-2263] allow `Enter` to open Show more to show emoji picker, allow `ESC` to close emoji picker / reaction selector.
+- Updated dependencies
+
+## 22.2.4
+
+### Patch Changes
+
+- [`c78b97a8b2b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c78b97a8b2b) - Remove explicit width from reaction counter container
+
 ## 22.2.3
 
 ### Patch Changes

package/dist/cjs/MockReactionsClient.js

@@ -43,7 +43,8 @@ var getReactionKey = function getReactionKey(containerAri, ari) {
   return "".concat(containerAri, "|").concat(ari);
 };
 var defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon'), getUser('bsmith', 'Bob Smith'), getUser('jdoe', 'Jane Doe'), getUser('mhomes', 'Mary Homes'), getUser('ckent', 'Clark Kent')];
-var simpleMockData = (0, _defineProperty2.default)({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 999, false), getReactionSummary(':astonished:', 9, false), getReactionSummary(':heart:', 99, false)]);
+var simpleMockData = (0, _defineProperty2.default)({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 33, false), getReactionSummary(':astonished:', 99, false), getReactionSummary(':heart:', 44, false) // Widest character
+]);
 exports.simpleMockData = simpleMockData;
 var extendedMockData = (0, _defineProperty2.default)({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true, true), getReactionSummary(':thumbsup:', 999, false, true), getReactionSummary(':astonished:', 9, false, true), getReactionSummary(':heart:', 99, false, true), getReactionSummary(':thinking:', 10, false, true), getReactionSummary(':clap:', 99, false, true), getReactionSummary(':thumbsdown:', 2, false, true), getReactionSummary(':bulb:', 16, false, true), getReactionSummary(':star:', 9999, false, true), getReactionSummary(':green_heart:', 9, false, true), getReactionSummary(':blue_heart:', 8392, false, true), getReactionSummary(':broken_heart:', 1, false, true), getReactionSummary(':grinning:', 10601, false, true), getReactionSummary(':slight_smile:', 99, false, true)]);
 

package/dist/cjs/components/Counter/Counter.js

@@ -1,15 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RENDER_LABEL_TESTID = exports.RENDER_COUNTER_TESTID = exports.RENDER_COMPONENT_WRAPPER = exports.Counter = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
-var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
 var _shared = require("../../shared");
 var styles = _interopRequireWildcard(require("./styles"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -57,17 +55,21 @@ var Counter = function Counter(_ref) {
       return _shared.utils.formatLargeNumber(value);
     }
   };
-  var previousValue = (0, _usePreviousValue.default)(value);
+  var lastValue = (0, _react.useRef)();
   var label = getLabel(value);
-  var increase = previousValue ? previousValue < value : false;
+  (0, _react.useEffect)(function () {
+    lastValue.current = value;
+  }, [value]);
+  var isIncreasing = (0, _react.useMemo)(function () {
+    return lastValue.current ? lastValue.current < value : false;
+  }, [value]);
   return (0, _react2.jsx)("div", {
     className: className,
     "data-testid": RENDER_COMPONENT_WRAPPER,
-    css: [styles.countStyle, {
-      width: label.length * 7
-    }]
+    css: styles.countStyle
   }, (0, _react2.jsx)(_motion.ExitingPersistence, null, (0, _react2.jsx)(_motion.SlideIn, {
-    enterFrom: increase ? 'bottom' : 'top',
+    enterFrom: isIncreasing ? 'top' : 'bottom',
+    exitTo: isIncreasing ? 'top' : 'bottom',
     key: value,
     duration: animationDuration
   }, function (motion, direction) {
@@ -78,9 +80,9 @@ var Counter = function Counter(_ref) {
       })],
       className: motion.className,
       "data-testid": RENDER_COUNTER_TESTID
-    }, (0, _react2.jsx)("div", {
+    }, (0, _react2.jsx)("span", {
       "data-testid": RENDER_LABEL_TESTID,
-      css: highlight && styles.highlightStyle,
+      css: highlight ? [styles.counterLabelStyle, styles.highlightStyle] : styles.counterLabelStyle,
       key: value
     }, label));
   })));

package/dist/cjs/components/Counter/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.highlightStyle = exports.countStyle = exports.containerStyle = void 0;
+exports.highlightStyle = exports.counterLabelStyle = exports.countStyle = exports.containerStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
@@ -17,13 +17,16 @@ var countStyle = (0, _react.css)({
   lineHeight: '14px'
 });
 exports.countStyle = countStyle;
-var highlightStyle = (0, _react.css)({
-  color: "var(--ds-text-selected, ".concat(_colors.B400, ")"),
-  fontWeight: 600
-});
-exports.highlightStyle = highlightStyle;
 var containerStyle = (0, _react.css)({
   display: 'flex',
   flexDirection: 'column'
 });
-exports.containerStyle = containerStyle;
+exports.containerStyle = containerStyle;
+var highlightStyle = (0, _react.css)({
+  color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
+});
+exports.highlightStyle = highlightStyle;
+var counterLabelStyle = (0, _react.css)({
+  fontVariantNumeric: 'tabular-nums'
+});
+exports.counterLabelStyle = counterLabelStyle;

package/dist/cjs/components/Reaction/styles.js

@@ -49,7 +49,8 @@ var reactionStyle = (0, _react.css)({
     transitionDuration: '0s, 0.2s',
     // disabling browser focus outline
     outline: 'none'
-  }
+  },
+  overflow: 'hidden'
 });
 exports.reactionStyle = reactionStyle;
 var reactedStyle = (0, _react.css)({

package/dist/cjs/components/ReactionPicker/ReactionPicker.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReactionPicker = exports.RENDER_REACTIONPICKER_TESTID = void 0;
+exports.ReactionPicker = exports.RENDER_REACTIONPICKER_TESTID = exports.RENDER_REACTIONPICKERPANEL_TESTID = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -30,9 +30,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
 
 /**
- * Emoji Picker Controller Id for Accessibility Labels
+ * Test id for ReactionPicker panel div
  */
 exports.RENDER_REACTIONPICKER_TESTID = RENDER_REACTIONPICKER_TESTID;
+var RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
+
+/**
+ * Emoji Picker Controller Id for Accessibility Labels
+ */
+exports.RENDER_REACTIONPICKERPANEL_TESTID = RENDER_REACTIONPICKERPANEL_TESTID;
 var PICKER_CONTROL_ID = 'emoji-picker';
 var popperModifiers = [
 /**
@@ -106,10 +112,10 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
   /**
    * Custom hook triggers when user clicks outside the reactions picker
    */
-  (0, _hooks.useClickAway)(wrapperRef, function () {
+  (0, _hooks.useCloseManager)(wrapperRef, function () {
     onCancel();
     close();
-  }, 'click', true, settings.isOpen);
+  }, true, settings.isOpen);
 
   /**
    * Event callback when the picker is closed
@@ -213,6 +219,7 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
     updatePopper.current = update;
     return (0, _react2.jsx)(_react.Fragment, null, settings.isOpen && (0, _react2.jsx)("div", {
       id: PICKER_CONTROL_ID,
+      "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
       style: _objectSpread({
         zIndex: _constants.layers.layer()
       }, style),

package/dist/cjs/components/ShowMore/ShowMore.js

@@ -50,7 +50,7 @@ var ShowMore = function ShowMore(_ref) {
       "aria-label": _shared.i18n.messages.moreEmoji.defaultMessage,
       type: "button",
       style: style.button,
-      onMouseDown: onClick,
+      onClick: onClick,
       "data-testid": RENDER_SHOWMORE_TESTID
     }, (0, _react2.jsx)(_more.default, {
       label: "More"

package/dist/cjs/hooks/index.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "useClickAway", {
+Object.defineProperty(exports, "useCloseManager", {
   enumerable: true,
   get: function get() {
-    return _useClickAway.useClickAway;
+    return _useCloseManager.useCloseManager;
   }
 });
-var _useClickAway = require("./useClickAway");
+var _useCloseManager = require("./useCloseManager");

package/dist/cjs/hooks/useCloseManager.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCloseManager = useCloseManager;
+var _react = require("react");
+/**
+ * Custom hook to detect when user action is outside given container ref or press escape key
+ * @param ref ref object to an html element
+ * @param callback event callback when detected a click outside the ref object or escape key is pressed
+ * @param useCapture (Optional) use capture phase of event. @default false
+ * @param enabled (Optional) enable/disable the outside click or escape key press handler. @default true
+ */
+function useCloseManager(ref, callback) {
+  var useCapture = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var enabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  (0, _react.useEffect)(function () {
+    if (!enabled) {
+      return;
+    }
+
+    /**
+     * Alert if clicked on outside of element
+     */
+    function handleClickOutside(event) {
+      if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) {
+        callback();
+      }
+    }
+    function handleKeydown(event) {
+      var key = event.key;
+      if (key === 'Escape' || key === 'Esc') {
+        callback();
+      }
+    }
+
+    // Bind the event listener
+    document.addEventListener('click', handleClickOutside, useCapture);
+    document.addEventListener('keydown', handleKeydown);
+    return function () {
+      // Unbind the event listener on clean up
+      document.removeEventListener('click', handleClickOutside, useCapture);
+      document.removeEventListener('keydown', handleKeydown);
+    };
+  }, [ref, callback, useCapture, enabled]);
+}

package/dist/cjs/i18n/cs.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -12,18 +13,18 @@ exports.default = void 0;
  */
 //Czech
 var _default = {
-  'fabric.reactions.add': 'Přidat reakci',
-  'fabric.reactions.error.unexpected': 'Reakce jsou dočasně nedostupné.',
-  'fabric.reactions.loading': 'Načítání...',
-  'fabric.reactions.more.emojis': 'Více smajlíků',
-  'fabric.reactions.more.info': 'Další informace',
-  'fabric.reactions.other.reacted.users': '{count, plural, one {a jeden další} few {a {count} další} many {a {count} dalšího} other {a {count} dalších}}',
-  'fabric.reactions.reactwithemoji': 'Reagovat pomocí smajlíku {emoji}',
-  'reactions.dialog.close': 'Zavřít',
-  'reactions.dialog.left.navigate': 'Navigace doleva',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reakce} few {{count,number} reakce} many {{count,number} reakce} other {{count,number} reakcí}}',
-  'reactions.dialog.right.navigate': 'Navigace doprava',
-  'reactions.dialog.viewall': 'Podívejte se, kdo reagoval',
-  'reactions.dialog.viewall.tooltip': 'Zobrazit všechny reakce uživatelů'
+  "fabric.reactions.add": "Přidat reakci",
+  "fabric.reactions.error.unexpected": "Reakce jsou dočasně nedostupné.",
+  "fabric.reactions.loading": "Načítání...",
+  "fabric.reactions.more.emojis": "Více smajlíků",
+  "fabric.reactions.more.info": "Další informace",
+  "fabric.reactions.other.reacted.users": "{count, plural, one {a jeden další} few {a {count} další} many {a {count} dalšího} other {a {count} dalších}}",
+  "fabric.reactions.reactwithemoji": "Reagovat pomocí smajlíku {emoji}",
+  "reactions.dialog.close": "Zavřít",
+  "reactions.dialog.left.navigate": "Navigace doleva",
+  "reactions.dialog.reactions.count": "{count, plural, one {{count,number} reakce} few {{count,number} reakce} many {{count,number} reakce} other {{count,number} reakcí}}",
+  "reactions.dialog.right.navigate": "Navigace doprava",
+  "reactions.dialog.viewall": "Podívejte se, kdo reagoval",
+  "reactions.dialog.viewall.tooltip": "Zobrazit všechny reakce uživatelů"
 };
 exports.default = _default;

package/dist/cjs/i18n/da.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -12,18 +13,18 @@ exports.default = void 0;
  */
 //Danish (Denmark)
 var _default = {
-  'fabric.reactions.add': 'Tilføj reaktion',
-  'fabric.reactions.error.unexpected': 'Reaktioner er midlertidigt utilgængelige',
-  'fabric.reactions.loading': 'Indlæser ...',
-  'fabric.reactions.more.emojis': 'Flere emojis',
-  'fabric.reactions.more.info': 'Flere oplysninger',
-  'fabric.reactions.other.reacted.users': '{count, plural, one {og én anden} other {og {count} andre}}',
-  'fabric.reactions.reactwithemoji': 'Reager med emojien {emoji}',
-  'reactions.dialog.close': 'Luk',
-  'reactions.dialog.left.navigate': 'Navigation til venstre',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reaktion} other {{count,number} reaktioner}}',
-  'reactions.dialog.right.navigate': 'Navigation til højre',
-  'reactions.dialog.viewall': 'Se, hvem der har reageret',
-  'reactions.dialog.viewall.tooltip': 'Se alle brugerreaktioner'
+  "fabric.reactions.add": "Tilføj reaktion",
+  "fabric.reactions.error.unexpected": "Reaktioner er midlertidigt utilgængelige",
+  "fabric.reactions.loading": "Indlæser ...",
+  "fabric.reactions.more.emojis": "Flere emojis",
+  "fabric.reactions.more.info": "Flere oplysninger",
+  "fabric.reactions.other.reacted.users": "{count, plural, one {og én anden} other {og {count} andre}}",
+  "fabric.reactions.reactwithemoji": "Reager med emojien {emoji}",
+  "reactions.dialog.close": "Luk",
+  "reactions.dialog.left.navigate": "Navigation til venstre",
+  "reactions.dialog.reactions.count": "{count, plural, one {{count,number} reaktion} other {{count,number} reaktioner}}",
+  "reactions.dialog.right.navigate": "Navigation til højre",
+  "reactions.dialog.viewall": "Se, hvem der har reageret",
+  "reactions.dialog.viewall.tooltip": "Se alle brugerreaktioner"
 };
 exports.default = _default;

package/dist/cjs/i18n/de.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -12,18 +13,18 @@ exports.default = void 0;
  */
 //German (Germany)
 var _default = {
-  'fabric.reactions.add': 'Reaktion hinzufügen',
-  'fabric.reactions.error.unexpected': 'Reaktionen sind vorübergehend nicht verfügbar.',
-  'fabric.reactions.loading': 'Wird geladen...',
-  'fabric.reactions.more.emojis': 'Mehr Emojis',
-  'fabric.reactions.more.info': 'Weitere Informationen',
-  'fabric.reactions.other.reacted.users': '{count, plural, one {und ein weiterer} other {und {count} weitere}}',
-  'fabric.reactions.reactwithemoji': 'Mit {emoji}-Emoji reagieren',
-  'reactions.dialog.close': 'Schließen',
-  'reactions.dialog.left.navigate': 'Nach links navigieren',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} Reaktion} other {{count,number} Reaktionen}}',
-  'reactions.dialog.right.navigate': 'Nach rechts navigieren',
-  'reactions.dialog.viewall': 'Reaktionen ansehen',
-  'reactions.dialog.viewall.tooltip': 'Alle Benutzerreaktionen anzeigen'
+  "fabric.reactions.add": "Reaktion hinzufügen",
+  "fabric.reactions.error.unexpected": "Reaktionen sind vorübergehend nicht verfügbar.",
+  "fabric.reactions.loading": "Wird geladen...",
+  "fabric.reactions.more.emojis": "Mehr Emojis",
+  "fabric.reactions.more.info": "Weitere Informationen",
+  "fabric.reactions.other.reacted.users": "{count, plural, one {und ein weiterer} other {und {count} weitere}}",
+  "fabric.reactions.reactwithemoji": "Mit {emoji}-Emoji reagieren",
+  "reactions.dialog.close": "Schließen",
+  "reactions.dialog.left.navigate": "Nach links navigieren",
+  "reactions.dialog.reactions.count": "{count, plural, one {{count,number} Reaktion} other {{count,number} Reaktionen}}",
+  "reactions.dialog.right.navigate": "Nach rechts navigieren",
+  "reactions.dialog.viewall": "Reaktionen ansehen",
+  "reactions.dialog.viewall.tooltip": "Alle Benutzerreaktionen anzeigen"
 };
 exports.default = _default;

package/dist/cjs/i18n/en.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -12,19 +13,19 @@ exports.default = void 0;
  */
 //
 var _default = {
-  'fabric.reactions.add': 'Add reaction',
-  'fabric.reactions.error.unexpected': 'Reactions are temporarily unavailable',
-  'fabric.reactions.loading': 'Loading...',
-  'fabric.reactions.more.emojis': 'More emojis',
-  'fabric.reactions.more.info': 'More info',
-  'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and {count} others}}',
-  'fabric.reactions.reactwithemoji': 'React with {emoji} emoji',
-  'reactions.dialog.close': 'Close',
-  'reactions.dialog.emoji.name': '{emojiName}',
-  'reactions.dialog.left.navigate': 'Left Navigate',
-  'reactions.dialog.reactions.count': '{count, plural, one {# reaction} other {# reactions} }',
-  'reactions.dialog.right.navigate': 'Right Navigate',
-  'reactions.dialog.viewall': 'See who reacted',
-  'reactions.dialog.viewall.tooltip': 'View all user reactions'
+  "fabric.reactions.add": "Add reaction",
+  "fabric.reactions.error.unexpected": "Reactions are temporarily unavailable",
+  "fabric.reactions.loading": "Loading...",
+  "fabric.reactions.more.emojis": "More emojis",
+  "fabric.reactions.more.info": "More info",
+  "fabric.reactions.other.reacted.users": "{count, plural, one {and one other} other {and {count} others}}",
+  "fabric.reactions.reactwithemoji": "React with {emoji} emoji",
+  "reactions.dialog.close": "Close",
+  "reactions.dialog.emoji.name": "{emojiName}",
+  "reactions.dialog.left.navigate": "Left Navigate",
+  "reactions.dialog.reactions.count": "{count, plural, one {# reaction} other {# reactions} }",
+  "reactions.dialog.right.navigate": "Right Navigate",
+  "reactions.dialog.viewall": "See who reacted",
+  "reactions.dialog.viewall.tooltip": "View all user reactions"
 };
 exports.default = _default;

package/dist/cjs/i18n/en_GB.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -12,19 +13,19 @@ exports.default = void 0;
  */
 //English (United Kingdom)
 var _default = {
-  'fabric.reactions.add': 'Add reaction',
-  'fabric.reactions.error.unexpected': 'Reactions are temporarily unavailable',
-  'fabric.reactions.loading': 'Loading...',
-  'fabric.reactions.more.emojis': 'More emojis',
-  'fabric.reactions.more.info': 'More info',
-  'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and {count} others}}',
-  'fabric.reactions.reactwithemoji': 'React with {emoji} emoji',
-  'reactions.dialog.close': 'Close',
-  'reactions.dialog.emoji.name': '{emojiName}',
-  'reactions.dialog.left.navigate': 'Left Navigate',
-  'reactions.dialog.reactions.count': '{count, plural, one {# reaction} other {# reactions} }',
-  'reactions.dialog.right.navigate': 'Right Navigate',
-  'reactions.dialog.viewall': 'See who reacted',
-  'reactions.dialog.viewall.tooltip': 'View all user reactions'
+  "fabric.reactions.add": "Add reaction",
+  "fabric.reactions.error.unexpected": "Reactions are temporarily unavailable",
+  "fabric.reactions.loading": "Loading...",
+  "fabric.reactions.more.emojis": "More emojis",
+  "fabric.reactions.more.info": "More info",
+  "fabric.reactions.other.reacted.users": "{count, plural, one {and one other} other {and {count} others}}",
+  "fabric.reactions.reactwithemoji": "React with {emoji} emoji",
+  "reactions.dialog.close": "Close",
+  "reactions.dialog.emoji.name": "{emojiName}",
+  "reactions.dialog.left.navigate": "Left Navigate",
+  "reactions.dialog.reactions.count": "{count, plural, one {# reaction} other {# reactions} }",
+  "reactions.dialog.right.navigate": "Right Navigate",
+  "reactions.dialog.viewall": "See who reacted",
+  "reactions.dialog.viewall.tooltip": "View all user reactions"
 };
 exports.default = _default;

package/dist/cjs/i18n/en_ZZ.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -12,19 +13,19 @@ exports.default = void 0;
  */
 //
 var _default = {
-  'fabric.reactions.add': '⁣⁢Add reaction⁡‌؜؜⁡‍⁠⁡⁠⁣⁤',
-  'fabric.reactions.error.unexpected': '⁣⁢Reactions are temporarily unavailable⁡‍‍؜‍⁡‌؜؜؜؜‍⁠‍⁣⁤',
-  'fabric.reactions.loading': '⁣⁢Loading...⁡؜؜؜‌⁣⁤',
-  'fabric.reactions.more.emojis': '⁣⁢More emojis‌‍⁠⁠‍؜‍⁡⁠⁡؜‌⁠⁣⁤',
-  'fabric.reactions.more.info': '⁣⁢More info؜؜؜‍⁠‍؜⁠؜⁠؜⁡⁣⁤',
-  'fabric.reactions.other.reacted.users': '{count, plural, one {⁣⁢and one other‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤} other {⁣⁢and {count} others‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤}}',
-  'fabric.reactions.reactwithemoji': '⁣⁢React with {emoji} emoji‌‍؜‍⁡⁠⁡⁣⁤',
-  'reactions.dialog.close': '⁣⁢Close‍⁡‌؜‍⁡‌‌⁣⁤',
-  'reactions.dialog.emoji.name': '⁣⁢{emojiName}⁡‌‌‍؜⁠⁡‍⁡؜⁠‌‌‍‍⁡⁣⁤',
-  'reactions.dialog.left.navigate': '⁣⁢Left Navigate؜‍‌؜⁠؜⁡‍⁠⁠⁡⁣⁤',
-  'reactions.dialog.reactions.count': '⁣⁢{reactionsCountFormatted} reactions‌‍‌‍⁠‍⁣⁤',
-  'reactions.dialog.right.navigate': '⁣⁢Right Navigate⁠؜؜⁠‌‌⁡‍‍⁠⁠⁣⁤',
-  'reactions.dialog.viewall': '⁣⁢See who reacted؜؜⁡‍‍‍⁣⁤',
-  'reactions.dialog.viewall.tooltip': '⁣⁢View all user reactions⁡‌؜؜⁡⁡‌‍؜؜⁣⁤'
+  "fabric.reactions.add": "⁣⁢Add reaction⁡‌؜؜⁡‍⁠⁡⁠⁣⁤",
+  "fabric.reactions.error.unexpected": "⁣⁢Reactions are temporarily unavailable⁡‍‍؜‍⁡‌؜؜؜؜‍⁠‍⁣⁤",
+  "fabric.reactions.loading": "⁣⁢Loading...⁡؜؜؜‌⁣⁤",
+  "fabric.reactions.more.emojis": "⁣⁢More emojis‌‍⁠⁠‍؜‍⁡⁠⁡؜‌⁠⁣⁤",
+  "fabric.reactions.more.info": "⁣⁢More info؜؜؜‍⁠‍؜⁠؜⁠؜⁡⁣⁤",
+  "fabric.reactions.other.reacted.users": "{count, plural, one {⁣⁢and one other‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤} other {⁣⁢and {count} others‍⁠؜⁠⁡‌⁠⁠⁠⁣⁤}}",
+  "fabric.reactions.reactwithemoji": "⁣⁢React with {emoji} emoji‌‍؜‍⁡⁠⁡⁣⁤",
+  "reactions.dialog.close": "⁣⁢Close‍⁡‌؜‍⁡‌‌⁣⁤",
+  "reactions.dialog.emoji.name": "⁣⁢{emojiName}⁡‌‌‍؜⁠⁡‍⁡؜⁠‌‌‍‍⁡⁣⁤",
+  "reactions.dialog.left.navigate": "⁣⁢Left Navigate؜‍‌؜⁠؜⁡‍⁠⁠⁡⁣⁤",
+  "reactions.dialog.reactions.count": "{count, plural, one {⁣⁢{count,number} reaction‌‍‍⁡‍‌⁡⁠‌‍⁠⁣⁤} other {⁣⁢{count,number} reactions‌‍‍⁡‍‌⁡⁠‌‍⁠⁣⁤}}",
+  "reactions.dialog.right.navigate": "⁣⁢Right Navigate⁠؜؜⁠‌‌⁡‍‍⁠⁠⁣⁤",
+  "reactions.dialog.viewall": "⁣⁢See who reacted؜؜⁡‍‍‍⁣⁤",
+  "reactions.dialog.viewall.tooltip": "⁣⁢View all user reactions⁡‌؜؜⁡⁡‌‍؜؜⁣⁤"
 };
 exports.default = _default;

package/dist/cjs/i18n/es.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -12,18 +13,18 @@ exports.default = void 0;
  */
 //Spanish (International)
 var _default = {
-  'fabric.reactions.add': 'Añadir reacción',
-  'fabric.reactions.error.unexpected': 'Las reacciones no están disponibles temporalmente',
-  'fabric.reactions.loading': 'Cargando...',
-  'fabric.reactions.more.emojis': 'Más emojis',
-  'fabric.reactions.more.info': 'Más información',
-  'fabric.reactions.other.reacted.users': '{count, plural, one {y 1 más} other {y {count} más}}',
-  'fabric.reactions.reactwithemoji': 'Reaccionar con el emoticono {emoji}',
-  'reactions.dialog.close': 'Cerrar',
-  'reactions.dialog.left.navigate': 'Desplazarse hacia la izquierda',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reacción} other {{count,number} reacciones}}',
-  'reactions.dialog.right.navigate': 'Desplazarse hacia la derecha',
-  'reactions.dialog.viewall': 'Ver quién ha reaccionado',
-  'reactions.dialog.viewall.tooltip': 'Ver todas las reacciones de los usuarios'
+  "fabric.reactions.add": "Añadir reacción",
+  "fabric.reactions.error.unexpected": "Las reacciones no están disponibles temporalmente",
+  "fabric.reactions.loading": "Cargando...",
+  "fabric.reactions.more.emojis": "Más emojis",
+  "fabric.reactions.more.info": "Más información",
+  "fabric.reactions.other.reacted.users": "{count, plural, one {y 1 más} other {y {count} más}}",
+  "fabric.reactions.reactwithemoji": "Reaccionar con el emoticono {emoji}",
+  "reactions.dialog.close": "Cerrar",
+  "reactions.dialog.left.navigate": "Desplazarse hacia la izquierda",
+  "reactions.dialog.reactions.count": "{count, plural, one {{count,number} reacción} other {{count,number} reacciones}}",
+  "reactions.dialog.right.navigate": "Desplazarse hacia la derecha",
+  "reactions.dialog.viewall": "Ver quién ha reaccionado",
+  "reactions.dialog.viewall.tooltip": "Ver todas las reacciones de los usuarios"
 };
 exports.default = _default;

package/dist/cjs/i18n/fi.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -12,18 +13,18 @@ exports.default = void 0;
  */
 //Finnish
 var _default = {
-  'fabric.reactions.add': 'Lisää reaktio',
-  'fabric.reactions.error.unexpected': 'Reaktiot ovat väliaikaisesti poissa käytöstä',
-  'fabric.reactions.loading': 'Ladataan...',
-  'fabric.reactions.more.emojis': 'Lisää emojeita',
-  'fabric.reactions.more.info': 'Lisätietoja',
-  'fabric.reactions.other.reacted.users': '{count, plural, one {ja yksi muu} other {ja {count} muuta}}',
-  'fabric.reactions.reactwithemoji': 'Reagoi emojilla {emoji}',
-  'reactions.dialog.close': 'Sulje',
-  'reactions.dialog.left.navigate': 'Navigointi vasemmalle',
-  'reactions.dialog.reactions.count': '{count, plural, one {{count,number} reaktio} other {{count,number} reaktiota}}',
-  'reactions.dialog.right.navigate': 'Navigointi oikealle',
-  'reactions.dialog.viewall': 'Katso, kuka on reagoinut',
-  'reactions.dialog.viewall.tooltip': 'Näytä kaikki käyttäjäreaktiot'
+  "fabric.reactions.add": "Lisää reaktio",
+  "fabric.reactions.error.unexpected": "Reaktiot ovat väliaikaisesti poissa käytöstä",
+  "fabric.reactions.loading": "Ladataan...",
+  "fabric.reactions.more.emojis": "Lisää emojeita",
+  "fabric.reactions.more.info": "Lisätietoja",
+  "fabric.reactions.other.reacted.users": "{count, plural, one {ja yksi muu} other {ja {count} muuta}}",
+  "fabric.reactions.reactwithemoji": "Reagoi emojilla {emoji}",
+  "reactions.dialog.close": "Sulje",
+  "reactions.dialog.left.navigate": "Navigointi vasemmalle",
+  "reactions.dialog.reactions.count": "{count, plural, one {{count,number} reaktio} other {{count,number} reaktiota}}",
+  "reactions.dialog.right.navigate": "Navigointi oikealle",
+  "reactions.dialog.viewall": "Katso, kuka on reagoinut",
+  "reactions.dialog.viewall.tooltip": "Näytä kaikki käyttäjäreaktiot"
 };
 exports.default = _default;