@atlaskit/reactions 33.0.0 → 33.0.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/reactions
 
+## 33.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 33.0.1
+
+### Patch Changes
+
+- [#168917](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/168917)
+  [`06e3a9a376da3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/06e3a9a376da3) -
+  [ux] Bug fix for wrong animation being rendered on the byline for page reactions
+
 ## 33.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 = "33.0.0";
+var packageVersion = "33.0.2";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionSummaryView.js

@@ -15,6 +15,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _picker = require("@atlaskit/emoji/picker");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useDelayedState3 = require("../hooks/useDelayedState");
 var _Reaction = require("./Reaction");
 var _Trigger = require("./Trigger");
@@ -248,6 +249,7 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         summaryButtonIconAfter: summaryButtonIconAfter,
         summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId
       }));
-    }
+    },
+    shouldRenderToParent: (0, _platformFeatureFlags.fg)('should-render-to-parent-should-be-true-editor-coll')
   });
 };

package/dist/cjs/components/Reactions.js

@@ -162,6 +162,13 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     summaryViewParticleEffectEmojiId = _useState4[0],
     setSummaryViewParticleEffectEmojiId = _useState4[1];
+
+  // if the reactions are empty, then set summaryViewParticleEffectEmojiId to null to clear the particle effect state
+  (0, _react.useEffect)(function () {
+    if (reactions.length === 0) {
+      setSummaryViewParticleEffectEmojiId(null);
+    }
+  }, [reactions]);
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var openTime = (0, _react.useRef)();

package/dist/cjs/components/ReactionsDialogHeader.js

@@ -15,6 +15,7 @@ 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _reactIntlNext = require("react-intl-next");
 var _tokens = require("@atlaskit/tokens");
 var _modalDialog = require("@atlaskit/modal-dialog");
@@ -23,8 +24,8 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _new = require("@atlaskit/button/new");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 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 _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
 var _close = _interopRequireDefault(require("@atlaskit/icon/core/close"));
 var _element = require("@atlaskit/emoji/element");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -68,7 +69,11 @@ var LeftNavigationButton = function LeftNavigationButton(_ref2) {
   }, /*#__PURE__*/React.createElement(_new.IconButton, {
     spacing: "compact",
     onClick: handlePreviousPage,
-    icon: _chevronLeft.default,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(_chevronLeft.default, (0, _extends2.default)({}, iconProps, {
+        size: "small"
+      }));
+    },
     label: intl.formatMessage(_i18n.messages.leftNavigateLabel),
     isTooltipDisabled: false
   }));
@@ -81,7 +86,11 @@ var RightNavigationButton = function RightNavigationButton(_ref3) {
   }, /*#__PURE__*/React.createElement(_new.IconButton, {
     spacing: "compact",
     onClick: handleNextPage,
-    icon: _chevronRight.default,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(_chevronRight.default, (0, _extends2.default)({}, iconProps, {
+        size: "small"
+      }));
+    },
     label: intl.formatMessage(_i18n.messages.rightNavigateLabel),
     isTooltipDisabled: false
   }));

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

package/dist/es2019/components/ReactionSummaryView.js

@@ -6,6 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useState } from 'react';
 import Popup from '@atlaskit/popup';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useDelayedState } from '../hooks/useDelayedState';
 import { Reaction } from './Reaction';
 import { Trigger as EmojiPickerTrigger } from './Trigger';
@@ -210,6 +211,7 @@ export const ReactionSummaryView = ({
       summaryGetOptimisticImageURL: summaryGetOptimisticImageURL,
       summaryButtonIconAfter: summaryButtonIconAfter,
       summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId
-    }))
+    })),
+    shouldRenderToParent: fg('should-render-to-parent-should-be-true-editor-coll')
   });
 };

package/dist/es2019/components/Reactions.js

@@ -119,6 +119,13 @@ export const Reactions = /*#__PURE__*/React.memo(({
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState('');
   const [summaryViewParticleEffectEmojiId, setSummaryViewParticleEffectEmojiId] = useState(null);
+
+  // if the reactions are empty, then set summaryViewParticleEffectEmojiId to null to clear the particle effect state
+  useEffect(() => {
+    if (reactions.length === 0) {
+      setSummaryViewParticleEffectEmojiId(null);
+    }
+  }, [reactions]);
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();

package/dist/es2019/components/ReactionsDialogHeader.js

@@ -1,4 +1,5 @@
 /* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionsDialogHeader.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -12,8 +13,8 @@ import { IconButton } from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
 import { useModal } from '@atlaskit/modal-dialog';
 import Tooltip from '@atlaskit/tooltip';
-import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
-import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import ChevronLeftIcon from '@atlaskit/icon/core/chevron-left';
 import CloseIcon from '@atlaskit/icon/core/close';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -56,7 +57,9 @@ const LeftNavigationButton = ({
   }, /*#__PURE__*/React.createElement(IconButton, {
     spacing: "compact",
     onClick: handlePreviousPage,
-    icon: ChevronLeftIcon,
+    icon: iconProps => /*#__PURE__*/React.createElement(ChevronLeftIcon, _extends({}, iconProps, {
+      size: "small"
+    })),
     label: intl.formatMessage(messages.leftNavigateLabel),
     isTooltipDisabled: false
   }));
@@ -70,7 +73,9 @@ const RightNavigationButton = ({
   }, /*#__PURE__*/React.createElement(IconButton, {
     spacing: "compact",
     onClick: handleNextPage,
-    icon: ChevronRightIcon,
+    icon: iconProps => /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({}, iconProps, {
+      size: "small"
+    })),
     label: intl.formatMessage(messages.rightNavigateLabel),
     isTooltipDisabled: false
   }));

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

package/dist/esm/components/ReactionSummaryView.js

@@ -7,6 +7,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useState } from 'react';
 import Popup from '@atlaskit/popup';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useDelayedState } from '../hooks/useDelayedState';
 import { Reaction } from './Reaction';
 import { Trigger as EmojiPickerTrigger } from './Trigger';
@@ -239,6 +240,7 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         summaryButtonIconAfter: summaryButtonIconAfter,
         summaryViewParticleEffectEmojiId: summaryViewParticleEffectEmojiId
       }));
-    }
+    },
+    shouldRenderToParent: fg('should-render-to-parent-should-be-true-editor-coll')
   });
 };

package/dist/esm/components/Reactions.js

@@ -151,6 +151,13 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     summaryViewParticleEffectEmojiId = _useState4[0],
     setSummaryViewParticleEffectEmojiId = _useState4[1];
+
+  // if the reactions are empty, then set summaryViewParticleEffectEmojiId to null to clear the particle effect state
+  useEffect(function () {
+    if (reactions.length === 0) {
+      setSummaryViewParticleEffectEmojiId(null);
+    }
+  }, [reactions]);
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var openTime = useRef();

package/dist/esm/components/ReactionsDialogHeader.js

@@ -2,6 +2,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionsDialogHeader.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -18,8 +19,8 @@ import { IconButton } from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
 import { useModal } from '@atlaskit/modal-dialog';
 import Tooltip from '@atlaskit/tooltip';
-import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
-import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import ChevronLeftIcon from '@atlaskit/icon/core/chevron-left';
 import CloseIcon from '@atlaskit/icon/core/close';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -60,7 +61,11 @@ var LeftNavigationButton = function LeftNavigationButton(_ref2) {
   }, /*#__PURE__*/React.createElement(IconButton, {
     spacing: "compact",
     onClick: handlePreviousPage,
-    icon: ChevronLeftIcon,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(ChevronLeftIcon, _extends({}, iconProps, {
+        size: "small"
+      }));
+    },
     label: intl.formatMessage(messages.leftNavigateLabel),
     isTooltipDisabled: false
   }));
@@ -73,7 +78,11 @@ var RightNavigationButton = function RightNavigationButton(_ref3) {
   }, /*#__PURE__*/React.createElement(IconButton, {
     spacing: "compact",
     onClick: handleNextPage,
-    icon: ChevronRightIcon,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({}, iconProps, {
+        size: "small"
+      }));
+    },
     label: intl.formatMessage(messages.rightNavigateLabel),
     isTooltipDisabled: false
   }));

package/dist/types/components/ReactionSummaryView.d.ts

@@ -45,9 +45,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
     /**
      * Optional function when the user wants to open the Reactions Dialog
      */
-    handleOpenReactionsDialog?: (options?: OpenReactionsDialogOptions) => void /**
+    handleOpenReactionsDialog?: (options?: OpenReactionsDialogOptions) => void;
+    /**
      * Optional prop for controlling if the reactions component is view only, disabling adding reactions
-     */;
+     */
     isViewOnly?: boolean;
     /**
      * Optional event handler when the emoji picker is opened

package/dist/types-ts4.5/components/ReactionSummaryView.d.ts

@@ -45,9 +45,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
     /**
      * Optional function when the user wants to open the Reactions Dialog
      */
-    handleOpenReactionsDialog?: (options?: OpenReactionsDialogOptions) => void /**
+    handleOpenReactionsDialog?: (options?: OpenReactionsDialogOptions) => void;
+    /**
      * Optional prop for controlling if the reactions component is view only, disabling adding reactions
-     */;
+     */
     isViewOnly?: boolean;
     /**
      * Optional event handler when the emoji picker is opened

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "33.0.0",
+	"version": "33.0.2",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/emoji": "^69.3.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^26.4.0",
+		"@atlaskit/icon": "^27.0.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/modal-dialog": "^14.2.0",
 		"@atlaskit/motion": "^5.1.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.1.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^5.1.0",
+		"@atlaskit/tokens": "^5.2.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.3.0",
@@ -134,6 +134,9 @@
 		},
 		"dst-a11y__replace-anchor-with-link__editor-collabo": {
 			"type": "boolean"
+		},
+		"should-render-to-parent-should-be-true-editor-coll": {
+			"type": "boolean"
 		}
 	},
 	"sideEffects": [