@atlaskit/reactions 22.2.3 → 22.2.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/reactions
 
+## 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/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.2.3"
+	"version": "22.2.4"
 }

package/dist/es2019/MockReactionsClient.js

@@ -24,8 +24,10 @@ const getReactionKey = (containerAri, ari) => {
 };
 const 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')];
 export const simpleMockData = {
-  [getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 999, false), getReactionSummary(':astonished:', 9, false), getReactionSummary(':heart:', 99, false)]
+  [getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 33, false), getReactionSummary(':astonished:', 99, false), getReactionSummary(':heart:', 44, false) // Widest character
+  ]
 };
+
 const extendedMockData = {
   [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/es2019/components/Counter/Counter.js

@@ -1,9 +1,9 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { jsx, css } from '@emotion/react';
 import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
 // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
-import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+
 import { utils } from '../../shared';
 import * as styles from './styles';
 
@@ -42,17 +42,21 @@ export const Counter = ({
       return utils.formatLargeNumber(value);
     }
   };
-  const previousValue = usePreviousValue(value);
+  const lastValue = useRef();
   const label = getLabel(value);
-  const increase = previousValue ? previousValue < value : false;
+  useEffect(() => {
+    lastValue.current = value;
+  }, [value]);
+  const isIncreasing = useMemo(() => {
+    return lastValue.current ? lastValue.current < value : false;
+  }, [value]);
   return jsx("div", {
     className: className,
     "data-testid": RENDER_COMPONENT_WRAPPER,
-    css: [styles.countStyle, {
-      width: label.length * 7
-    }]
+    css: styles.countStyle
   }, jsx(ExitingPersistence, null, jsx(SlideIn, {
-    enterFrom: increase ? 'bottom' : 'top',
+    enterFrom: isIncreasing ? 'top' : 'bottom',
+    exitTo: isIncreasing ? 'top' : 'bottom',
     key: value,
     duration: animationDuration
   }, (motion, direction) => {
@@ -63,9 +67,9 @@ export const Counter = ({
       })],
       className: motion.className,
       "data-testid": RENDER_COUNTER_TESTID
-    }, jsx("div", {
+    }, jsx("span", {
       "data-testid": RENDER_LABEL_TESTID,
-      css: highlight && styles.highlightStyle,
+      css: highlight ? [styles.counterLabelStyle, styles.highlightStyle] : styles.counterLabelStyle,
       key: value
     }, label));
   })));

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

@@ -9,11 +9,13 @@ export const countStyle = css({
   padding: '4px 8px 4px 0',
   lineHeight: '14px'
 });
-export const highlightStyle = css({
-  color: `var(--ds-text-selected, ${B400})`,
-  fontWeight: 600
-});
 export const containerStyle = css({
   display: 'flex',
   flexDirection: 'column'
+});
+export const highlightStyle = css({
+  color: `var(--ds-text-selected, ${B400})`
+});
+export const counterLabelStyle = css({
+  fontVariantNumeric: 'tabular-nums'
 });

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

@@ -41,7 +41,8 @@ export const reactionStyle = css({
     transitionDuration: '0s, 0.2s',
     // disabling browser focus outline
     outline: 'none'
-  }
+  },
+  overflow: 'hidden'
 });
 export const reactedStyle = css({
   backgroundColor: `var(--ds-background-selected, ${B50})`,

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.2.3"
+	"version": "22.2.4"
 }

package/dist/esm/MockReactionsClient.js

@@ -32,7 +32,9 @@ 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')];
-export var simpleMockData = _defineProperty({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 999, false), getReactionSummary(':astonished:', 9, false), getReactionSummary(':heart:', 99, false)]);
+export var simpleMockData = _defineProperty({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 33, false), getReactionSummary(':astonished:', 99, false), getReactionSummary(':heart:', 44, false) // Widest character
+]);
+
 var extendedMockData = _defineProperty({}, 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/esm/components/Counter/Counter.js

@@ -1,9 +1,9 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { jsx, css } from '@emotion/react';
 import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
 // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
-import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
+
 import { utils } from '../../shared';
 import * as styles from './styles';
 
@@ -43,17 +43,21 @@ export var Counter = function Counter(_ref) {
       return utils.formatLargeNumber(value);
     }
   };
-  var previousValue = usePreviousValue(value);
+  var lastValue = useRef();
   var label = getLabel(value);
-  var increase = previousValue ? previousValue < value : false;
+  useEffect(function () {
+    lastValue.current = value;
+  }, [value]);
+  var isIncreasing = useMemo(function () {
+    return lastValue.current ? lastValue.current < value : false;
+  }, [value]);
   return jsx("div", {
     className: className,
     "data-testid": RENDER_COMPONENT_WRAPPER,
-    css: [styles.countStyle, {
-      width: label.length * 7
-    }]
+    css: styles.countStyle
   }, jsx(ExitingPersistence, null, jsx(SlideIn, {
-    enterFrom: increase ? 'bottom' : 'top',
+    enterFrom: isIncreasing ? 'top' : 'bottom',
+    exitTo: isIncreasing ? 'top' : 'bottom',
     key: value,
     duration: animationDuration
   }, function (motion, direction) {
@@ -64,9 +68,9 @@ export var Counter = function Counter(_ref) {
       })],
       className: motion.className,
       "data-testid": RENDER_COUNTER_TESTID
-    }, jsx("div", {
+    }, jsx("span", {
       "data-testid": RENDER_LABEL_TESTID,
-      css: highlight && styles.highlightStyle,
+      css: highlight ? [styles.counterLabelStyle, styles.highlightStyle] : styles.counterLabelStyle,
       key: value
     }, label));
   })));

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

@@ -9,11 +9,13 @@ export var countStyle = css({
   padding: '4px 8px 4px 0',
   lineHeight: '14px'
 });
-export var highlightStyle = css({
-  color: "var(--ds-text-selected, ".concat(B400, ")"),
-  fontWeight: 600
-});
 export var containerStyle = css({
   display: 'flex',
   flexDirection: 'column'
+});
+export var highlightStyle = css({
+  color: "var(--ds-text-selected, ".concat(B400, ")")
+});
+export var counterLabelStyle = css({
+  fontVariantNumeric: 'tabular-nums'
 });

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

@@ -41,7 +41,8 @@ export var reactionStyle = css({
     transitionDuration: '0s, 0.2s',
     // disabling browser focus outline
     outline: 'none'
-  }
+  },
+  overflow: 'hidden'
 });
 export var reactedStyle = css({
   backgroundColor: "var(--ds-background-selected, ".concat(B50, ")"),

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.2.3"
+	"version": "22.2.4"
 }

package/dist/types/components/Counter/styles.d.ts

@@ -1,3 +1,4 @@
 export declare const countStyle: import("@emotion/react").SerializedStyles;
-export declare const highlightStyle: import("@emotion/react").SerializedStyles;
 export declare const containerStyle: import("@emotion/react").SerializedStyles;
+export declare const highlightStyle: import("@emotion/react").SerializedStyles;
+export declare const counterLabelStyle: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "22.2.3",
+  "version": "22.2.4",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,6 @@
     "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/button": "^16.5.0",
-    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/emoji": "^67.0.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/modal-dialog": "^12.2.0",