@atlaskit/reactions 24.5.0 → 24.6.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/reactions
 
+## 24.6.0
+
+### Minor Changes
+
+- [#108823](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108823)
+  [`2789da849cf6c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2789da849cf6c) -
+  [ux] Add reactions dialog entrypoint into ReactionSummaryView primarily for live pages
+
+## 24.5.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.5.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 = "24.5.0";
+var packageVersion = "24.6.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -9,10 +9,13 @@ exports.ReactionSummaryView = exports.RENDER_SUMMARY_VIEW_POPUP_TESTID = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _primitives = require("@atlaskit/primitives");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _Reaction = require("../Reaction");
 var _ReactionSummaryButton = require("./ReactionSummaryButton");
+var _i18n = require("../../shared/i18n");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var summaryPopupStyles = (0, _primitives.xcss)({
@@ -41,7 +44,9 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
     showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
     _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
-    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS;
+    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
+    allowUserDialog = _ref.allowUserDialog;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -71,7 +76,15 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
           flash: flash[reaction.emojiId],
           showParticleEffect: particleEffectByEmoji[reaction.emojiId]
         });
-      }));
+      }), allowUserDialog && /*#__PURE__*/_react.default.createElement(_new.default, {
+        appearance: "subtle",
+        onClick: function onClick() {
+          return handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 ? void 0 : handleOpenReactionsDialog(reactions[0].emojiId);
+        }
+      }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+        color: "color.text.subtlest",
+        weight: "medium"
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReacted))));
     },
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,

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

@@ -183,6 +183,25 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     onSelection(emojiId);
   }, [createAnalyticsEvent, onSelection, reactions]);
 
+  /**
+   * event handler to open selected reaction from tooltip
+   * @param emojiId selected emoji id
+   */
+  var handleOpenReactionsDialog = function handleOpenReactionsDialog(emojiId) {
+    // ufo start opening reaction dialog
+    ufoExperiences.openDialog.start();
+    setSelectedEmojiId(emojiId);
+    onDialogOpenCallback(emojiId, 'tooltip');
+    // ufo opening reaction dialog success
+    ufoExperiences.openDialog.success({
+      metadata: {
+        emojiId: emojiId,
+        source: 'Reactions',
+        reason: 'Opening dialog from emoji tooltip link successfully'
+      }
+    });
+  };
+
   /**
    * Event handler to oepn all reactions link button
    */
@@ -296,7 +315,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       onReactionMouseEnter: handleReactionMouseEnter,
       placement: summaryViewPlacement,
       showOpaqueBackground: showOpaqueBackground,
-      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+      handleOpenReactionsDialog: handleOpenReactionsDialog,
+      allowUserDialog: allowUserDialog
     })) : memorizedReactions.map(function (reaction) {
       return (0, _react2.jsx)(_Reaction.Reaction, {
         key: reaction.emojiId,
@@ -327,7 +348,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
-    }), allowUserDialog && hasEmojiWithFivePlusReactions && (0, _react2.jsx)(_tooltip.default, {
+    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && (0, _react2.jsx)(_tooltip.default, {
       content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true
     }, (0, _react2.jsx)(_standardButton.default

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

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

@@ -1,9 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useState } from 'react';
+import { FormattedMessage } from 'react-intl-next';
 import Popup from '@atlaskit/popup';
-import { Inline, xcss } from '@atlaskit/primitives';
+import { Inline, Text, xcss } from '@atlaskit/primitives';
+import Button from '@atlaskit/button/new';
 import { Reaction } from '../Reaction';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
+import { messages } from '../../shared/i18n';
 const summaryPopupStyles = xcss({
   padding: 'space.100',
   paddingTop: 'space.050',
@@ -24,7 +27,9 @@ export const ReactionSummaryView = ({
   onReactionFocused,
   onReactionMouseEnter,
   showOpaqueBackground = false,
-  subtleReactionsSummaryAndPicker = false
+  subtleReactionsSummaryAndPicker = false,
+  handleOpenReactionsDialog,
+  allowUserDialog
 }) => {
   const [isSummaryPopupOpen, setSummaryPopupOpen] = useState(false);
   const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), []);
@@ -45,7 +50,13 @@ export const ReactionSummaryView = ({
       onMouseEnter: onReactionMouseEnter,
       flash: flash[reaction.emojiId],
       showParticleEffect: particleEffectByEmoji[reaction.emojiId]
-    }))),
+    })), allowUserDialog && /*#__PURE__*/React.createElement(Button, {
+      appearance: "subtle",
+      onClick: () => handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 ? void 0 : handleOpenReactionsDialog(reactions[0].emojiId)
+    }, /*#__PURE__*/React.createElement(Text, {
+      color: "color.text.subtlest",
+      weight: "medium"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.seeWhoReacted)))),
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,
     trigger: triggerProps => /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {

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

@@ -150,6 +150,25 @@ export const Reactions = /*#__PURE__*/React.memo(({
     onSelection(emojiId);
   }, [createAnalyticsEvent, onSelection, reactions]);
 
+  /**
+   * event handler to open selected reaction from tooltip
+   * @param emojiId selected emoji id
+   */
+  const handleOpenReactionsDialog = emojiId => {
+    // ufo start opening reaction dialog
+    ufoExperiences.openDialog.start();
+    setSelectedEmojiId(emojiId);
+    onDialogOpenCallback(emojiId, 'tooltip');
+    // ufo opening reaction dialog success
+    ufoExperiences.openDialog.success({
+      metadata: {
+        emojiId,
+        source: 'Reactions',
+        reason: 'Opening dialog from emoji tooltip link successfully'
+      }
+    });
+  };
+
   /**
    * Event handler to oepn all reactions link button
    */
@@ -259,7 +278,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
       onReactionMouseEnter: handleReactionMouseEnter,
       placement: summaryViewPlacement,
       showOpaqueBackground: showOpaqueBackground,
-      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+      handleOpenReactionsDialog: handleOpenReactionsDialog,
+      allowUserDialog: allowUserDialog
     })) : memorizedReactions.map(reaction => jsx(Reaction, {
       key: reaction.emojiId,
       reaction: reaction,
@@ -288,7 +309,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
-    }), allowUserDialog && hasEmojiWithFivePlusReactions && jsx(Tooltip, {
+    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Tooltip, {
       content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true
     }, jsx(Button

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

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

@@ -1,10 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useState } from 'react';
+import { FormattedMessage } from 'react-intl-next';
 import Popup from '@atlaskit/popup';
-import { Inline, xcss } from '@atlaskit/primitives';
+import { Inline, Text, xcss } from '@atlaskit/primitives';
+import Button from '@atlaskit/button/new';
 import { Reaction } from '../Reaction';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
+import { messages } from '../../shared/i18n';
 var summaryPopupStyles = xcss({
   padding: 'space.100',
   paddingTop: 'space.050',
@@ -31,7 +34,9 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
     showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
     _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
-    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS;
+    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
+    allowUserDialog = _ref.allowUserDialog;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -61,7 +66,15 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
           flash: flash[reaction.emojiId],
           showParticleEffect: particleEffectByEmoji[reaction.emojiId]
         });
-      }));
+      }), allowUserDialog && /*#__PURE__*/React.createElement(Button, {
+        appearance: "subtle",
+        onClick: function onClick() {
+          return handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 ? void 0 : handleOpenReactionsDialog(reactions[0].emojiId);
+        }
+      }, /*#__PURE__*/React.createElement(Text, {
+        color: "color.text.subtlest",
+        weight: "medium"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.seeWhoReacted))));
     },
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,

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

@@ -170,6 +170,25 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     onSelection(emojiId);
   }, [createAnalyticsEvent, onSelection, reactions]);
 
+  /**
+   * event handler to open selected reaction from tooltip
+   * @param emojiId selected emoji id
+   */
+  var handleOpenReactionsDialog = function handleOpenReactionsDialog(emojiId) {
+    // ufo start opening reaction dialog
+    ufoExperiences.openDialog.start();
+    setSelectedEmojiId(emojiId);
+    onDialogOpenCallback(emojiId, 'tooltip');
+    // ufo opening reaction dialog success
+    ufoExperiences.openDialog.success({
+      metadata: {
+        emojiId: emojiId,
+        source: 'Reactions',
+        reason: 'Opening dialog from emoji tooltip link successfully'
+      }
+    });
+  };
+
   /**
    * Event handler to oepn all reactions link button
    */
@@ -283,7 +302,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       onReactionMouseEnter: handleReactionMouseEnter,
       placement: summaryViewPlacement,
       showOpaqueBackground: showOpaqueBackground,
-      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
+      handleOpenReactionsDialog: handleOpenReactionsDialog,
+      allowUserDialog: allowUserDialog
     })) : memorizedReactions.map(function (reaction) {
       return jsx(Reaction, {
         key: reaction.emojiId,
@@ -314,7 +335,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
-    }), allowUserDialog && hasEmojiWithFivePlusReactions && jsx(Tooltip, {
+    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Tooltip, {
       content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true
     }, jsx(Button

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

@@ -6,7 +6,7 @@ import { type ReactionsProps } from '../Reactions';
  * Test id for the Reactions summary view popup
  */
 export declare const RENDER_SUMMARY_VIEW_POPUP_TESTID = "render-summary-view-popup";
-interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji'> {
+interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji' | 'allowUserDialog'> {
     /**
      * Optional prop to change the placement of the summary popup reaction list
      */
@@ -31,6 +31,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional prop for applying subtle styling to reaction picker
      */
     subtleReactionsSummaryAndPicker?: boolean;
+    /**
+     * Optional function when the user wants to see more users in a modal
+     */
+    handleOpenReactionsDialog?: (emojiId: string) => void;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, handleOpenReactionsDialog, allowUserDialog, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

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

@@ -6,7 +6,7 @@ import { type ReactionsProps } from '../Reactions';
  * Test id for the Reactions summary view popup
  */
 export declare const RENDER_SUMMARY_VIEW_POPUP_TESTID = "render-summary-view-popup";
-interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji'> {
+interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider' | 'reactions' | 'flash' | 'particleEffectByEmoji' | 'allowUserDialog'> {
     /**
      * Optional prop to change the placement of the summary popup reaction list
      */
@@ -31,6 +31,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional prop for applying subtle styling to reaction picker
      */
     subtleReactionsSummaryAndPicker?: boolean;
+    /**
+     * Optional function when the user wants to see more users in a modal
+     */
+    handleOpenReactionsDialog?: (emojiId: string) => void;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, handleOpenReactionsDialog, allowUserDialog, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "24.5.0",
+	"version": "24.6.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -42,9 +42,9 @@
 		"@atlaskit/icon": "^23.6.0",
 		"@atlaskit/modal-dialog": "^12.20.0",
 		"@atlaskit/motion": "^1.10.0",
-		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/platform-feature-flags": "^1.0.0",
 		"@atlaskit/popper": "^6.4.0",
-		"@atlaskit/popup": "1.31.0",
+		"@atlaskit/popup": "1.31.1",
 		"@atlaskit/primitives": "^13.4.0",
 		"@atlaskit/spinner": "^17.1.0",
 		"@atlaskit/tabs": "^17.2.0",