@atlaskit/reactions 22.8.0 → 22.8.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/reactions
 
+## 22.8.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 22.8.1
+
+### Patch Changes
+
+- [#115247](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115247)
+  [`f0dec2710f268`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f0dec2710f268) -
+  [ux] Removes selected reaction animation. The previous version 22.7.4 unintentionally
+  re-introduced an animation of selected reactions which already existed but was previously broken.
+  It was decided to remove this animation instead. The delay between selecting a reaction and
+  closing the selection popup was removed as this was only delayed to accomodate the animation.
+
 ## 22.8.0
 
 ### Minor 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 = "22.8.0";
+var packageVersion = "22.8.2";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Selector/Selector.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Selector = exports.RENDER_SELECTOR_TESTID = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
@@ -44,9 +43,12 @@ var separatorStyles = (0, _primitives.xcss)({
 });
 var Reveal = function Reveal(_ref) {
   var children = _ref.children,
-    delay = _ref.delay;
+    delay = _ref.delay,
+    testId = _ref.testId;
   return (0, _react2.jsx)("div", {
+    "data-testid": testId
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+    ,
     css: _styles.revealStyle
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
@@ -66,38 +68,6 @@ var Selector = exports.Selector = function Selector(_ref2) {
     showMore = _ref2.showMore,
     _ref2$pickerQuickReac = _ref2.pickerQuickReactionEmojiIds,
     pickerQuickReactionEmojiIds = _ref2$pickerQuickReac === void 0 ? _constants.DefaultReactions : _ref2$pickerQuickReac;
-  var _useState = (0, _react.useState)(),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    selection = _useState2[0],
-    setSelection = _useState2[1];
-  /**
-   * Collection of global DOM timeout ids when user selects emojis for animation display
-   */
-  var timeoutIds = (0, _react.useRef)([]);
-
-  /**
-   * Clear the timeouts for the selected emojis when the component unmounts
-   */
-  (0, _react.useEffect)(function () {
-    var timeoutValues = timeoutIds.current;
-    return function cleanup() {
-      timeoutValues.forEach(clearTimeout);
-    };
-  }, []);
-
-  /**
-   * event handler when an emoji gets selected
-   * @param item selected emoji
-   * @param description depth detail of the selected emoji
-   * @param event Dom event data
-   */
-  var onSelected = function onSelected(item, description, event) {
-    timeoutIds.current.push(window.setTimeout(function () {
-      onSelection(item, description, event);
-    }, 250));
-    setSelection(item);
-  };
-
   /**
    * Render the default emoji icon
    * @param emoji emoji item
@@ -107,21 +77,15 @@ var Selector = exports.Selector = function Selector(_ref2) {
     var _emoji$id;
     return (0, _react2.jsx)(Reveal, {
       delay: index * REVEAL_DELAY,
-      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName
-    }, (0, _react2.jsx)("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: emoji === selection ? 'selected' : undefined
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: _styles.emojiStyle,
-      "data-testid": RENDER_SELECTOR_TESTID
+      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
+      testId: RENDER_SELECTOR_TESTID
     }, (0, _react2.jsx)(_tooltip.default, {
       content: emoji.shortName
     }, (0, _react2.jsx)(_EmojiButton.EmojiButton, {
       emojiId: emoji,
       emojiProvider: emojiProvider,
-      onClick: onSelected
-    }))));
+      onClick: onSelection
+    })));
   };
   return (0, _react2.jsx)(_primitives.Inline, {
     alignBlock: "center",

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

@@ -3,21 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.revealStyle = exports.revealAnimation = exports.emojiStyle = void 0;
+exports.revealStyle = exports.revealAnimation = void 0;
 var _react = require("@emotion/react");
 /** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
-var emojiStyle = exports.emojiStyle = (0, _react.css)({
-  display: 'inline-block',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.selected': {
-    transition: 'transform 200ms ease-in-out',
-    transform: 'translateY(-48px) scale(2.667)'
-  }
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-keyframes -- Ignored via go/DSP-18766
 var revealAnimation = exports.revealAnimation = (0, _react.keyframes)({
   '0%': {

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

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { Fragment, useEffect, useRef, useState } from 'react';
+import React, { Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { Box, Inline, xcss } from '@atlaskit/primitives';
@@ -7,7 +7,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { DefaultReactions } from '../../shared/constants';
 import { EmojiButton } from '../EmojiButton';
 import { ShowMore } from '../ShowMore';
-import { emojiStyle, revealStyle } from './styles';
+import { revealStyle } from './styles';
 
 /**
  * Test id for wrapper Selector div
@@ -32,10 +32,13 @@ const separatorStyles = xcss({
 });
 const Reveal = ({
   children,
-  delay
+  delay,
+  testId
 }) => {
   return jsx("div", {
+    "data-testid": testId
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+    ,
     css: revealStyle
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
@@ -55,35 +58,6 @@ export const Selector = ({
   showMore,
   pickerQuickReactionEmojiIds = DefaultReactions
 }) => {
-  const [selection, setSelection] = useState();
-  /**
-   * Collection of global DOM timeout ids when user selects emojis for animation display
-   */
-  const timeoutIds = useRef([]);
-
-  /**
-   * Clear the timeouts for the selected emojis when the component unmounts
-   */
-  useEffect(() => {
-    const timeoutValues = timeoutIds.current;
-    return function cleanup() {
-      timeoutValues.forEach(clearTimeout);
-    };
-  }, []);
-
-  /**
-   * event handler when an emoji gets selected
-   * @param item selected emoji
-   * @param description depth detail of the selected emoji
-   * @param event Dom event data
-   */
-  const onSelected = (item, description, event) => {
-    timeoutIds.current.push(window.setTimeout(() => {
-      onSelection(item, description, event);
-    }, 250));
-    setSelection(item);
-  };
-
   /**
    * Render the default emoji icon
    * @param emoji emoji item
@@ -93,21 +67,15 @@ export const Selector = ({
     var _emoji$id;
     return jsx(Reveal, {
       delay: index * REVEAL_DELAY,
-      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName
-    }, jsx("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: emoji === selection ? 'selected' : undefined
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: emojiStyle,
-      "data-testid": RENDER_SELECTOR_TESTID
+      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
+      testId: RENDER_SELECTOR_TESTID
     }, jsx(Tooltip, {
       content: emoji.shortName
     }, jsx(EmojiButton, {
       emojiId: emoji,
       emojiProvider: emojiProvider,
-      onClick: onSelected
-    }))));
+      onClick: onSelection
+    })));
   };
   return jsx(Inline, {
     alignBlock: "center",

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

@@ -2,16 +2,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, keyframes } from '@emotion/react';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
-export const emojiStyle = css({
-  display: 'inline-block',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.selected': {
-    transition: 'transform 200ms ease-in-out',
-    transform: 'translateY(-48px) scale(2.667)'
-  }
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-keyframes -- Ignored via go/DSP-18766
 export const revealAnimation = keyframes({
   '0%': {

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

package/dist/esm/components/Selector/Selector.js

@@ -1,6 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
-import React, { Fragment, useEffect, useRef, useState } from 'react';
+import React, { Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { Box, Inline, xcss } from '@atlaskit/primitives';
@@ -8,7 +7,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { DefaultReactions } from '../../shared/constants';
 import { EmojiButton } from '../EmojiButton';
 import { ShowMore } from '../ShowMore';
-import { emojiStyle, revealStyle } from './styles';
+import { revealStyle } from './styles';
 
 /**
  * Test id for wrapper Selector div
@@ -33,9 +32,12 @@ var separatorStyles = xcss({
 });
 var Reveal = function Reveal(_ref) {
   var children = _ref.children,
-    delay = _ref.delay;
+    delay = _ref.delay,
+    testId = _ref.testId;
   return jsx("div", {
+    "data-testid": testId
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+    ,
     css: revealStyle
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
@@ -55,38 +57,6 @@ export var Selector = function Selector(_ref2) {
     showMore = _ref2.showMore,
     _ref2$pickerQuickReac = _ref2.pickerQuickReactionEmojiIds,
     pickerQuickReactionEmojiIds = _ref2$pickerQuickReac === void 0 ? DefaultReactions : _ref2$pickerQuickReac;
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    selection = _useState2[0],
-    setSelection = _useState2[1];
-  /**
-   * Collection of global DOM timeout ids when user selects emojis for animation display
-   */
-  var timeoutIds = useRef([]);
-
-  /**
-   * Clear the timeouts for the selected emojis when the component unmounts
-   */
-  useEffect(function () {
-    var timeoutValues = timeoutIds.current;
-    return function cleanup() {
-      timeoutValues.forEach(clearTimeout);
-    };
-  }, []);
-
-  /**
-   * event handler when an emoji gets selected
-   * @param item selected emoji
-   * @param description depth detail of the selected emoji
-   * @param event Dom event data
-   */
-  var onSelected = function onSelected(item, description, event) {
-    timeoutIds.current.push(window.setTimeout(function () {
-      onSelection(item, description, event);
-    }, 250));
-    setSelection(item);
-  };
-
   /**
    * Render the default emoji icon
    * @param emoji emoji item
@@ -96,21 +66,15 @@ export var Selector = function Selector(_ref2) {
     var _emoji$id;
     return jsx(Reveal, {
       delay: index * REVEAL_DELAY,
-      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName
-    }, jsx("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: emoji === selection ? 'selected' : undefined
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: emojiStyle,
-      "data-testid": RENDER_SELECTOR_TESTID
+      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
+      testId: RENDER_SELECTOR_TESTID
     }, jsx(Tooltip, {
       content: emoji.shortName
     }, jsx(EmojiButton, {
       emojiId: emoji,
       emojiProvider: emojiProvider,
-      onClick: onSelected
-    }))));
+      onClick: onSelection
+    })));
   };
   return jsx(Inline, {
     alignBlock: "center",

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

@@ -2,16 +2,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, keyframes } from '@emotion/react';
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
-export var emojiStyle = css({
-  display: 'inline-block',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&.selected': {
-    transition: 'transform 200ms ease-in-out',
-    transform: 'translateY(-48px) scale(2.667)'
-  }
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-keyframes -- Ignored via go/DSP-18766
 export var revealAnimation = keyframes({
   '0%': {

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

@@ -1,5 +1,4 @@
 /** @jsx jsx */
 import { keyframes } from '@emotion/react';
-export declare const emojiStyle: import("@emotion/react").SerializedStyles;
 export declare const revealAnimation: typeof keyframes;
 export declare const revealStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/components/Selector/styles.d.ts

@@ -1,5 +1,4 @@
 /** @jsx jsx */
 import { keyframes } from '@emotion/react';
-export declare const emojiStyle: import("@emotion/react").SerializedStyles;
 export declare const revealAnimation: typeof keyframes;
 export declare const revealStyle: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.8.0",
+	"version": "22.8.2",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,8 +43,8 @@
 		"@atlaskit/modal-dialog": "^12.14.0",
 		"@atlaskit/motion": "^1.7.0",
 		"@atlaskit/popper": "^6.1.0",
-		"@atlaskit/popup": "1.19.3",
-		"@atlaskit/primitives": "^9.0.0",
+		"@atlaskit/popup": "1.19.4",
+		"@atlaskit/primitives": "^10.0.0",
 		"@atlaskit/spinner": "^16.2.0",
 		"@atlaskit/tabs": "^16.2.0",
 		"@atlaskit/theme": "^12.11.0",