@atlaskit/reactions 22.8.5 → 22.10.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/reactions
 
+## 22.10.0
+
+### Minor Changes
+
+- [#120418](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120418)
+  [`a0121db0d5a1c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a0121db0d5a1c) -
+  [ux] Add support for quick reactions to summary view
+
+## 22.9.0
+
+### Minor Changes
+
+- [#120256](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120256)
+  [`2cbfadca64339`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2cbfadca64339) -
+  Added ability to adjust placement of Summarized Reactions Pop-up. Made the Summarized Reactions
+  button toggleable
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.8.5
 
 ### 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 = "22.8.5";
+var packageVersion = "22.10.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionSummary/ReactionSummaryButton.js

@@ -69,7 +69,16 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
   }, /*#__PURE__*/_react.default.createElement(_Reaction.ReactionButton, {
     onClick: onClick,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
-    ariaLabel: intl.formatMessage(_i18n.messages.summary)
+    ariaLabel: intl.formatMessage(_i18n.messages.summary),
+    additionalStyles: [(0, _primitives.xcss)({
+      backgroundColor: 'elevation.surface',
+      ':hover': {
+        backgroundColor: 'elevation.surface.hovered'
+      },
+      ':active': {
+        backgroundColor: 'elevation.surface.pressed'
+      }
+    })]
   }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     space: "space.050",
     xcss: buttonStyle

package/dist/cjs/components/ReactionSummary/ReactionSummaryView.js

@@ -47,8 +47,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     return setSummaryPopupOpen(false);
   }, []);
   var handleSummaryClick = (0, _react.useCallback)(function () {
-    return setSummaryPopupOpen(true);
-  }, []);
+    return setSummaryPopupOpen(!isSummaryPopupOpen);
+  }, [isSummaryPopupOpen]);
   return /*#__PURE__*/_react.default.createElement(_popup.default, {
     placement: placement,
     content: function content() {

package/dist/cjs/components/Reactions/Reactions.js

@@ -118,7 +118,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     _ref$summaryViewEnabl = _ref.summaryViewEnabled,
     summaryViewEnabled = _ref$summaryViewEnabl === void 0 ? false : _ref$summaryViewEnabl,
     _ref$summaryViewThres = _ref.summaryViewThreshold,
-    summaryViewThreshold = _ref$summaryViewThres === void 0 ? 3 : _ref$summaryViewThres;
+    summaryViewThreshold = _ref$summaryViewThres === void 0 ? 3 : _ref$summaryViewThres,
+    summaryViewPlacement = _ref.summaryViewPlacement;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -271,7 +272,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     });
     return reactions.concat(items);
   }, [quickReactionEmojis, reactions]);
-  var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && memorizedReactions.length > 0;
+  var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     (0, _react2.jsx)("div", {
@@ -288,7 +289,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       allowUserDialog: allowUserDialog,
       onReactionClick: onReactionClick,
       onReactionFocused: handleReactionFocused,
-      onReactionMouseEnter: handleReactionMouseEnter
+      onReactionMouseEnter: handleReactionMouseEnter,
+      placement: summaryViewPlacement
     })) : memorizedReactions.map(function (reaction) {
       return (0, _react2.jsx)(_Reaction.Reaction, {
         key: reaction.emojiId,

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

package/dist/es2019/components/ReactionSummary/ReactionSummaryButton.js

@@ -53,7 +53,16 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React.createElement(ReactionButton, {
     onClick: onClick,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
-    ariaLabel: intl.formatMessage(messages.summary)
+    ariaLabel: intl.formatMessage(messages.summary),
+    additionalStyles: [xcss({
+      backgroundColor: 'elevation.surface',
+      ':hover': {
+        backgroundColor: 'elevation.surface.hovered'
+      },
+      ':active': {
+        backgroundColor: 'elevation.surface.pressed'
+      }
+    })]
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
     xcss: buttonStyle

package/dist/es2019/components/ReactionSummary/ReactionSummaryView.js

@@ -27,7 +27,7 @@ export const ReactionSummaryView = ({
 }) => {
   const [isSummaryPopupOpen, setSummaryPopupOpen] = useState(false);
   const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), []);
-  const handleSummaryClick = useCallback(() => setSummaryPopupOpen(true), []);
+  const handleSummaryClick = useCallback(() => setSummaryPopupOpen(!isSummaryPopupOpen), [isSummaryPopupOpen]);
   return /*#__PURE__*/React.createElement(Popup, {
     placement: placement,
     content: () => /*#__PURE__*/React.createElement(Inline, {

package/dist/es2019/components/Reactions/Reactions.js

@@ -92,7 +92,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   emojiPickerSize = 'medium',
   miniMode = false,
   summaryViewEnabled = false,
-  summaryViewThreshold = 3
+  summaryViewThreshold = 3,
+  summaryViewPlacement
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -240,7 +241,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     });
     return reactions.concat(items);
   }, [quickReactionEmojis, reactions]);
-  const shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && memorizedReactions.length > 0;
+  const shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("div", {
@@ -257,7 +258,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
       allowUserDialog: allowUserDialog,
       onReactionClick: onReactionClick,
       onReactionFocused: handleReactionFocused,
-      onReactionMouseEnter: handleReactionMouseEnter
+      onReactionMouseEnter: handleReactionMouseEnter,
+      placement: summaryViewPlacement
     })) : memorizedReactions.map(reaction => jsx(Reaction, {
       key: reaction.emojiId,
       reaction: reaction,

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

package/dist/esm/components/ReactionSummary/ReactionSummaryButton.js

@@ -59,7 +59,16 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
   }, /*#__PURE__*/React.createElement(ReactionButton, {
     onClick: onClick,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
-    ariaLabel: intl.formatMessage(messages.summary)
+    ariaLabel: intl.formatMessage(messages.summary),
+    additionalStyles: [xcss({
+      backgroundColor: 'elevation.surface',
+      ':hover': {
+        backgroundColor: 'elevation.surface.hovered'
+      },
+      ':active': {
+        backgroundColor: 'elevation.surface.pressed'
+      }
+    })]
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
     xcss: buttonStyle

package/dist/esm/components/ReactionSummary/ReactionSummaryView.js

@@ -37,8 +37,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     return setSummaryPopupOpen(false);
   }, []);
   var handleSummaryClick = useCallback(function () {
-    return setSummaryPopupOpen(true);
-  }, []);
+    return setSummaryPopupOpen(!isSummaryPopupOpen);
+  }, [isSummaryPopupOpen]);
   return /*#__PURE__*/React.createElement(Popup, {
     placement: placement,
     content: function content() {

package/dist/esm/components/Reactions/Reactions.js

@@ -105,7 +105,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     _ref$summaryViewEnabl = _ref.summaryViewEnabled,
     summaryViewEnabled = _ref$summaryViewEnabl === void 0 ? false : _ref$summaryViewEnabl,
     _ref$summaryViewThres = _ref.summaryViewThreshold,
-    summaryViewThreshold = _ref$summaryViewThres === void 0 ? 3 : _ref$summaryViewThres;
+    summaryViewThreshold = _ref$summaryViewThres === void 0 ? 3 : _ref$summaryViewThres,
+    summaryViewPlacement = _ref.summaryViewPlacement;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -258,7 +259,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     });
     return reactions.concat(items);
   }, [quickReactionEmojis, reactions]);
-  var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && memorizedReactions.length > 0;
+  var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("div", {
@@ -275,7 +276,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       allowUserDialog: allowUserDialog,
       onReactionClick: onReactionClick,
       onReactionFocused: handleReactionFocused,
-      onReactionMouseEnter: handleReactionMouseEnter
+      onReactionMouseEnter: handleReactionMouseEnter,
+      placement: summaryViewPlacement
     })) : memorizedReactions.map(function (reaction) {
       return jsx(Reaction, {
         key: reaction.emojiId,

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

@@ -2,6 +2,7 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
+import { type Placement } from '@atlaskit/popper';
 import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary } from '../../types';
 import { type ReactionProps } from '../Reaction';
 import { type ReactionPickerProps } from '../ReactionPicker';
@@ -102,6 +103,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * The minimum number of reactions required to switch to the summary view when summaryViewEnabled is true. Defaults to 3 if not specified.
      */
     summaryViewThreshold?: number;
+    /**
+     * Optional prop to change the placement of the summary popup reaction list
+     */
+    summaryViewPlacement?: Placement;
 }
 /**
  * Get content of the tooltip
@@ -110,4 +115,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -2,6 +2,7 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
+import { type Placement } from '@atlaskit/popper';
 import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary } from '../../types';
 import { type ReactionProps } from '../Reaction';
 import { type ReactionPickerProps } from '../ReactionPicker';
@@ -102,6 +103,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * The minimum number of reactions required to switch to the summary view when summaryViewEnabled is true. Defaults to 3 if not specified.
      */
     summaryViewThreshold?: number;
+    /**
+     * Optional prop to change the placement of the summary popup reaction list
+     */
+    summaryViewPlacement?: Placement;
 }
 /**
  * Get content of the tooltip
@@ -110,4 +115,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, }: ReactionsProps) => jsx.JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.8.5",
+	"version": "22.10.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
 		"@atlaskit/analytics-namespaced-context": "^6.10.0",
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/avatar": "^21.11.0",
-		"@atlaskit/button": "^18.3.0",
+		"@atlaskit/button": "^18.4.0",
 		"@atlaskit/emoji": "^67.6.0",
 		"@atlaskit/icon": "^22.6.0",
 		"@atlaskit/modal-dialog": "^12.14.0",
@@ -46,9 +46,9 @@
 		"@atlaskit/popup": "1.20.1",
 		"@atlaskit/primitives": "^11.0.0",
 		"@atlaskit/spinner": "^16.2.0",
-		"@atlaskit/tabs": "^16.2.0",
+		"@atlaskit/tabs": "^16.3.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.53.0",
+		"@atlaskit/tokens": "^1.54.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@atlaskit/ufo": "^0.2.0",
 		"@atlaskit/util-service-support": "^6.2.0",