@atlaskit/reactions 31.5.1 → 31.5.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/reactions
 
+## 31.5.2
+
+### Patch Changes
+
+- [#148201](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148201)
+  [`8e811f1840de7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e811f1840de7) -
+  Either actively or pre-emptively fixes a bug with keyframe animations in CJS and ESM distribution
+  targets for packages using Compiled CSS-in-JS. This may not affect this package, but the change
+  was made so a future migration does not accidentally break it.
+- Updated dependencies
+
 ## 31.5.1
 
 ### Patch 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 = "31.5.1";
+var packageVersion = "31.5.2";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -1,3 +1,6 @@
-
-._y44vt91o{animation:var(--_770km1)}._1bsb1osq{width:100%}
-._4t3i1osq{height:100%}
+._1bsb1osq{width:100%}
+._1pgl1ytf{animation-timing-function:ease-in-out}
+._4t3i1osq{height:100%}
+._5sagolkx{animation-duration:var(--_gwerdd)}
+._j7hq1x5b{animation-name:kfhns1k}
+@keyframes kfhns1k{20%{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}75%{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}to{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}0%{background-color:transparent}}

package/dist/cjs/components/FlashAnimation.js

@@ -26,10 +26,12 @@ var RENDER_FLASHANIMATION_TESTID = exports.RENDER_FLASHANIMATION_TESTID = 'flash
 var FlashAnimation = exports.FlashAnimation = function FlashAnimation(props) {
   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)(["_1bsb1osq _4t3i1osq", props.flash && "_y44vt91o", props.className]),
+    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_j7hq1x5b _5sagolkx _1pgl1ytf", props.className]),
     "data-testid": RENDER_FLASHANIMATION_TESTID,
     style: {
-      "--_770km1": (0, _runtime.ix)("".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out"))
+      "--_17s7zfd": (0, _runtime.ix)("var(--ds-background-selected-pressed, ".concat(_colors.B75, ")")),
+      "--_8ijx7f": (0, _runtime.ix)("var(--ds-border-selected, ".concat(_colors.B300, ")")),
+      "--_gwerdd": (0, _runtime.ix)("".concat(flashTime, "ms"))
     }
   }, props.children);
 };

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

@@ -1,13 +1,17 @@
-
-._y44vlcmg{animation:var(--_1m4wxxu)}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1o8l{display:inline-block}
+._1o51q7pw{animation-fill-mode:forwards}
 ._1p3lnqa1{border-left-style:solid}
+._1pgl1ytf{animation-timing-function:ease-in-out}
 ._4t3i1tcg{height:24px}
+._5sag6ebc{animation-duration:.15s}
 ._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)}
+._j7hqordv{animation-name:k12q5x3s}
 ._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)}
+._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/cjs/components/Selector.js

@@ -34,10 +34,7 @@ var Reveal = function Reveal(_ref) {
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: (0, _runtime.ax)(["_y44vlcmg _tzy4idpf"]),
-    style: {
-      "--_1m4wxxu": (0, _runtime.ix)("".concat(revealAnimation, " 150ms ease-in-out forwards"))
-    }
+    className: (0, _runtime.ax)(["_j7hqordv _5sag6ebc _1pgl1ytf _1o51q7pw _tzy4idpf"])
   }, children);
 };
 

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

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

@@ -1,4 +1,6 @@
-
-._y44v1li1{animation:k1qrjcqm .7s ease-in-out}._1bsb1osq{width:100%}
+._1bsb1osq{width:100%}
+._1pgl1ytf{animation-timing-function:ease-in-out}
 ._4t3i1osq{height:100%}
+._5sagpwmj{animation-duration:.7s}
+._j7hqdjji{animation-name:k1qrjcqm}
 @keyframes k1qrjcqm{20%{border-color:var(--ds-border-selected,#0065ff);background-color:var(--ds-background-selected-pressed,#b3d4ff)}75%{border-color:var(--ds-border-selected,#0065ff);background-color:var(--ds-background-selected-pressed,#b3d4ff)}to{border-color:var(--ds-border-selected,#0065ff);background-color:var(--ds-background-selected-pressed,#b3d4ff)}0%{background-color:transparent}}

package/dist/es2019/components/FlashAnimation.js

@@ -16,6 +16,6 @@ export const RENDER_FLASHANIMATION_TESTID = 'flash-animation';
  */
 export const FlashAnimation = props => /*#__PURE__*/React.createElement("div", {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  className: ax(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_y44v1li1", props.className]),
+  className: ax(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_j7hqdjji _5sagpwmj _1pgl1ytf", props.className]),
   "data-testid": RENDER_FLASHANIMATION_TESTID
 }, props.children);

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

@@ -1,12 +1,15 @@
-
-._y44v8out{animation:k12q5x3s .15s ease-in-out forwards}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1o8l{display:inline-block}
+._1o51q7pw{animation-fill-mode:forwards}
 ._1p3lnqa1{border-left-style:solid}
+._1pgl1ytf{animation-timing-function:ease-in-out}
 ._4t3i1tcg{height:24px}
+._5sag6ebc{animation-duration:.15s}
 ._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)}
+._j7hqordv{animation-name:k12q5x3s}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._t6vde4h9{border-left-width:var(--ds-border-width,1px)}
 ._tzy4idpf{opacity:0}

package/dist/es2019/components/Selector.js

@@ -25,7 +25,7 @@ const Reveal = ({
 }) => {
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: ax(["_y44v8out _tzy4idpf"])
+    className: ax(["_j7hqordv _5sag6ebc _1pgl1ytf _1o51q7pw _tzy4idpf"])
   }, children);
 };
 

package/dist/esm/analytics/index.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "31.5.1";
+var packageVersion = "31.5.2";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/FlashAnimation.compiled.css

@@ -1,3 +1,6 @@
-
-._y44vt91o{animation:var(--_770km1)}._1bsb1osq{width:100%}
-._4t3i1osq{height:100%}
+._1bsb1osq{width:100%}
+._1pgl1ytf{animation-timing-function:ease-in-out}
+._4t3i1osq{height:100%}
+._5sagolkx{animation-duration:var(--_gwerdd)}
+._j7hq1x5b{animation-name:kfhns1k}
+@keyframes kfhns1k{20%{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}75%{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}to{border-color:var(--_8ijx7f);background-color:var(--_17s7zfd)}0%{background-color:transparent}}

package/dist/esm/components/FlashAnimation.js

@@ -17,10 +17,12 @@ export var RENDER_FLASHANIMATION_TESTID = 'flash-animation';
 export var FlashAnimation = function FlashAnimation(props) {
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: ax(["_1bsb1osq _4t3i1osq", props.flash && "_y44vt91o", props.className]),
+    className: ax(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_j7hq1x5b _5sagolkx _1pgl1ytf", props.className]),
     "data-testid": RENDER_FLASHANIMATION_TESTID,
     style: {
-      "--_770km1": ix("".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out"))
+      "--_17s7zfd": ix("var(--ds-background-selected-pressed, ".concat(B75, ")")),
+      "--_8ijx7f": ix("var(--ds-border-selected, ".concat(B300, ")")),
+      "--_gwerdd": ix("".concat(flashTime, "ms"))
     }
   }, props.children);
 };

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

@@ -1,13 +1,17 @@
-
-._y44vlcmg{animation:var(--_1m4wxxu)}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1o8l{display:inline-block}
+._1o51q7pw{animation-fill-mode:forwards}
 ._1p3lnqa1{border-left-style:solid}
+._1pgl1ytf{animation-timing-function:ease-in-out}
 ._4t3i1tcg{height:24px}
+._5sag6ebc{animation-duration:.15s}
 ._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)}
+._j7hqordv{animation-name:k12q5x3s}
 ._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)}
+._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/esm/components/Selector.js

@@ -24,10 +24,7 @@ var Reveal = function Reveal(_ref) {
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    className: ax(["_y44vlcmg _tzy4idpf"]),
-    style: {
-      "--_1m4wxxu": ix("".concat(revealAnimation, " 150ms ease-in-out forwards"))
-    }
+    className: ax(["_j7hqordv _5sag6ebc _1pgl1ytf _1o51q7pw _tzy4idpf"])
   }, children);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "31.5.1",
+	"version": "31.5.2",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/popup": "^4.1.0",
 		"@atlaskit/primitives": "^14.4.0",
-		"@atlaskit/react-ufo": "^3.6.0",
+		"@atlaskit/react-ufo": "^3.9.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
@@ -66,9 +66,9 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {
-		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/editor-test-helpers": "^22.1.0",
-		"@atlaskit/elements-test-helpers": "^0.9.0",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/editor-test-helpers": "workspace:^",
+		"@atlaskit/elements-test-helpers": "workspace:^",
 		"@atlaskit/util-data-test": "^18.0.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@testing-library/dom": "^10.1.0",