@atlaskit/reactions 26.4.2 → 26.5.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/reactions
 
+## 26.5.0
+
+### Minor Changes
+
+- [#119713](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119713)
+  [`d0beb32e29ba5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d0beb32e29ba5) -
+  [ux] Adds two new optional props to Reactions package to control subtle styling for default
+  reactions and update the Trigger UI/tooltip for the ... UI. Also exports the closeManager.
+
 ## 26.4.2
 
 ### 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 = "26.4.2";
+var packageVersion = "26.5.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Reaction/Reaction.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Reaction = exports.RENDER_REACTION_TESTID = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -40,6 +41,9 @@ var RENDER_REACTION_TESTID = exports.RENDER_REACTION_TESTID = 'render_reaction_w
 var containerStyles = (0, _primitives.xcss)({
   position: 'relative'
 });
+var borderlessStyle = (0, _primitives.xcss)({
+  border: 'none'
+});
 var reactedStyles = (0, _primitives.xcss)({
   backgroundColor: 'color.background.selected',
   borderColor: 'color.border.selected',
@@ -80,7 +84,8 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     allowUserDialog = _ref.allowUserDialog,
     handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
     _ref$isViewOnly = _ref.isViewOnly,
-    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly;
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
+    showSubtleStyle = _ref.showSubtleStyle;
   var intl = (0, _reactIntlNext.useIntl)();
   var hoverStart = (0, _react.useRef)();
   var focusStart = (0, _react.useRef)();
@@ -156,7 +161,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
   var dismissTooltip = function dismissTooltip() {
     setIsTooltipEnabled(false);
   };
-  var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
+  var buttonStyles = [].concat((0, _toConsumableArray2.default)(showOpaqueBackground ? [opaqueBackgroundStyles] : []), (0, _toConsumableArray2.default)(showSubtleStyle ? [borderlessStyle] : []));
   var emojiAndCount = (0, _react2.jsx)(_primitives.Inline, null, (0, _react2.jsx)("div", {
     css: [_styles.emojiStyle, reaction.count === 0 && _styles.emojiNoReactionStyle]
   }, (0, _react2.jsx)(_emoji.ResourcedEmoji, {

package/dist/cjs/components/ReactionPicker/ReactionPicker.js

@@ -99,7 +99,8 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     _props$showRoundTrigg = props.showRoundTrigger,
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     _props$reactionPicker = props.reactionPickerAdditionalStyle,
-    reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker;
+    reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker,
+    showMoreEmojiTriggerUI = props.showMoreEmojiTriggerUI;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -254,7 +255,8 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         showOpaqueBackground: showOpaqueBackground,
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        showRoundTrigger: showRoundTrigger
+        showRoundTrigger: showRoundTrigger,
+        showMoreEmojiTriggerUI: showMoreEmojiTriggerUI
       })
     );
   }), settings.isOpen && (0, _react2.jsx)(PopperWrapper, {

package/dist/cjs/components/ReactionTooltip/ReactionTooltip.js

@@ -36,6 +36,12 @@ var ReactionTooltip = exports.ReactionTooltip = function ReactionTooltip(_ref) {
     allowUserDialog = _ref.allowUserDialog,
     handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
     dismissTooltip = _ref.dismissTooltip;
+  var handleClick = function handleClick() {
+    if (allowUserDialog && handleOpenReactionsDialog) {
+      dismissTooltip();
+      handleOpenReactionsDialog();
+    }
+  };
   var content = !users || users.length === 0 || !isEnabled ? null :
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, jsx-a11y/no-noninteractive-tabindex -- Ignored via go/DSP-18766
   (0, _react2.jsx)("div", {
@@ -50,12 +56,8 @@ var ReactionTooltip = exports.ReactionTooltip = function ReactionTooltip(_ref) {
   }), (0, _react2.jsx)("li", {
     // 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: allowUserDialog ? [_styles.footerStyle, _styles.underlineStyle] : _styles.footerStyle,
-    onClick: function onClick() {
-      if (allowUserDialog && handleOpenReactionsDialog) {
-        dismissTooltip();
-        handleOpenReactionsDialog();
-      }
-    }
+    onMouseDown: handleClick,
+    onClick: handleClick
   }, users.length > maxReactions && (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.otherUsers, {
     values: {
       count: users.length - maxReactions

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

@@ -158,7 +158,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     _ref$noWrap = _ref.noWrap,
     noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
     _ref$noRelativeContai = _ref.noRelativeContainer,
-    noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai;
+    noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai,
+    showMoreEmojiTriggerUI = _ref.showMoreEmojiTriggerUI,
+    showSubtleDefaultReactions = _ref.showSubtleDefaultReactions;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -345,7 +347,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       showOpaqueBackground: showOpaqueBackground,
       allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
       handleOpenReactionsDialog: _handleOpenReactionsDialog,
-      isViewOnly: isViewOnly
+      isViewOnly: isViewOnly,
+      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
     });
   })), !isViewOnly && (0, _react2.jsx)(_ReactionPicker.ReactionPicker
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -366,6 +369,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     showRoundTrigger: showRoundTrigger,
+    showMoreEmojiTriggerUI: showMoreEmojiTriggerUI,
     reactionPickerAdditionalStyle: reactionPickerAdditionalStyle
   }), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_segment.default, {
     name: "reactions-dialog"

package/dist/cjs/components/Trigger/Trigger.js

@@ -12,6 +12,7 @@ var _react2 = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/core/migration/emoji-add"));
+var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
@@ -30,6 +31,11 @@ var i18n = (0, _reactIntlNext.defineMessages)({
     id: 'reaction-picker-trigger.add.reaction.message',
     description: 'Message displayed when there are no page reactions existing on the page.',
     defaultMessage: 'Add a reaction'
+  },
+  showMore: {
+    id: 'reaction-picker-trigger.more.emojis.message',
+    description: 'Message displayed on button to show more emojis.',
+    defaultMessage: 'More emojis'
   }
 });
 var triggerStyles = (0, _primitives.xcss)({
@@ -117,7 +123,8 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
     _props$showRoundTrigg = props.showRoundTrigger,
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
-    selectionStyle = props.selectionStyle;
+    selectionStyle = props.selectionStyle,
+    showMoreEmojiTriggerUI = props.showMoreEmojiTriggerUI;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -125,7 +132,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
   };
   return (0, _react2.jsx)(_tooltip.default, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
-    content: tooltipContent
+    content: showMoreEmojiTriggerUI ? formatMessage(i18n.showMore) : tooltipContent
   }, (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
     xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles,
@@ -134,7 +141,14 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref
-  }, ariaAttributes), (0, _react2.jsx)(_emojiAdd.default, {
+  }, ariaAttributes), showMoreEmojiTriggerUI ? (0, _react2.jsx)(_showMoreHorizontal.default, {
+    testId: "show-more-emojis-icon",
+    label: formatMessage(i18n.showMore),
+    color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)"
+  }) :
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-21007
+  (0, _react2.jsx)(_emojiAdd.default, {
+    testId: "emoji-add-icon",
     color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
     LEGACY_size: "small",
     label: "Add reaction"

package/dist/cjs/index.js

@@ -64,10 +64,17 @@ Object.defineProperty(exports, "Reactions", {
   }
 });
 exports.constants = exports.UFO = void 0;
+Object.defineProperty(exports, "useCloseManager", {
+  enumerable: true,
+  get: function get() {
+    return _useCloseManager.useCloseManager;
+  }
+});
 var _constants = require("./shared/constants");
 var _ufo = require("./ufo");
 var _client = require("./client");
 var _components = require("./components");
+var _useCloseManager = require("./hooks/useCloseManager");
 var _containers = require("./containers");
 var _store = require("./store");
 var _types = require("./types");

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

package/dist/es2019/components/Reaction/Reaction.js

@@ -25,6 +25,9 @@ export const RENDER_REACTION_TESTID = 'render_reaction_wrapper';
 const containerStyles = xcss({
   position: 'relative'
 });
+const borderlessStyle = xcss({
+  border: 'none'
+});
 const reactedStyles = xcss({
   backgroundColor: 'color.background.selected',
   borderColor: 'color.border.selected',
@@ -59,7 +62,8 @@ export const Reaction = ({
   showOpaqueBackground = false,
   allowUserDialog,
   handleOpenReactionsDialog,
-  isViewOnly = false
+  isViewOnly = false,
+  showSubtleStyle
 }) => {
   const intl = useIntl();
   const hoverStart = useRef();
@@ -120,7 +124,7 @@ export const Reaction = ({
   const dismissTooltip = () => {
     setIsTooltipEnabled(false);
   };
-  const buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
+  const buttonStyles = [...(showOpaqueBackground ? [opaqueBackgroundStyles] : []), ...(showSubtleStyle ? [borderlessStyle] : [])];
   const emojiAndCount = jsx(Inline, null, jsx("div", {
     css: [emojiStyle, reaction.count === 0 && emojiNoReactionStyle]
   }, jsx(ResourcedEmoji, {

package/dist/es2019/components/ReactionPicker/ReactionPicker.js

@@ -80,7 +80,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     subtleReactionsSummaryAndPicker = false,
     showAddReactionText = false,
     showRoundTrigger = false,
-    reactionPickerAdditionalStyle = undefined
+    reactionPickerAdditionalStyle = undefined,
+    showMoreEmojiTriggerUI
   } = props;
   const [triggerRef, setTriggerRef] = useState(null);
 
@@ -226,7 +227,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-    showRoundTrigger: showRoundTrigger
+    showRoundTrigger: showRoundTrigger,
+    showMoreEmojiTriggerUI: showMoreEmojiTriggerUI
   })), settings.isOpen && jsx(PopperWrapper, {
     settings: settings
   }, settings.showFullPicker ? jsx(EmojiPicker, {

package/dist/es2019/components/ReactionTooltip/ReactionTooltip.js

@@ -27,6 +27,12 @@ export const ReactionTooltip = ({
   handleOpenReactionsDialog,
   dismissTooltip
 }) => {
+  const handleClick = () => {
+    if (allowUserDialog && handleOpenReactionsDialog) {
+      dismissTooltip();
+      handleOpenReactionsDialog();
+    }
+  };
   const content = !users || users.length === 0 || !isEnabled ? null :
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, jsx-a11y/no-noninteractive-tabindex -- Ignored via go/DSP-18766
   jsx("div", {
@@ -41,12 +47,8 @@ export const ReactionTooltip = ({
   }), jsx("li", {
     // 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: allowUserDialog ? [footerStyle, underlineStyle] : footerStyle,
-    onClick: () => {
-      if (allowUserDialog && handleOpenReactionsDialog) {
-        dismissTooltip();
-        handleOpenReactionsDialog();
-      }
-    }
+    onMouseDown: handleClick,
+    onClick: handleClick
   }, users.length > maxReactions && jsx(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {
       count: users.length - maxReactions

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

@@ -121,7 +121,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
   isViewOnly = false,
   reactionPickerAdditionalStyle,
   noWrap = false,
-  noRelativeContainer = false
+  noRelativeContainer = false,
+  showMoreEmojiTriggerUI,
+  showSubtleDefaultReactions
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -294,7 +296,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
     showOpaqueBackground: showOpaqueBackground,
     allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
     handleOpenReactionsDialog: handleOpenReactionsDialog,
-    isViewOnly: isViewOnly
+    isViewOnly: isViewOnly,
+    showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
   }))), !isViewOnly && jsx(ReactionPicker
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   , {
@@ -314,6 +317,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     showRoundTrigger: showRoundTrigger,
+    showMoreEmojiTriggerUI: showMoreEmojiTriggerUI,
     reactionPickerAdditionalStyle: reactionPickerAdditionalStyle
   }), jsx(ModalTransition, null, !!selectedEmojiId && jsx(UFOSegment, {
     name: "reactions-dialog"

package/dist/es2019/components/Trigger/Trigger.js

@@ -10,6 +10,7 @@ import { jsx } from '@emotion/react';
 import { Pressable, Box, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import EmojiAddIcon from '@atlaskit/icon/core/migration/emoji-add';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { fg } from '@atlaskit/platform-feature-flags';
 
 /**
@@ -22,6 +23,11 @@ const i18n = defineMessages({
     id: 'reaction-picker-trigger.add.reaction.message',
     description: 'Message displayed when there are no page reactions existing on the page.',
     defaultMessage: 'Add a reaction'
+  },
+  showMore: {
+    id: 'reaction-picker-trigger.more.emojis.message',
+    description: 'Message displayed on button to show more emojis.',
+    defaultMessage: 'More emojis'
   }
 });
 const triggerStyles = xcss({
@@ -105,7 +111,8 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     showAddReactionText = false,
     subtleReactionsSummaryAndPicker = false,
     showRoundTrigger = false,
-    selectionStyle
+    selectionStyle,
+    showMoreEmojiTriggerUI
   } = props;
   const handleMouseDown = (e, analyticsEvent) => {
     if (onClick && !disabled) {
@@ -114,7 +121,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   return jsx(Tooltip, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
-    content: tooltipContent
+    content: showMoreEmojiTriggerUI ? formatMessage(i18n.showMore) : tooltipContent
   }, jsx(Pressable, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
     xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles,
@@ -123,7 +130,14 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref
-  }, ariaAttributes), jsx(EmojiAddIcon, {
+  }, ariaAttributes), showMoreEmojiTriggerUI ? jsx(ShowMoreHorizontalIcon, {
+    testId: "show-more-emojis-icon",
+    label: formatMessage(i18n.showMore),
+    color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)"
+  }) :
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-21007
+  jsx(EmojiAddIcon, {
+    testId: "emoji-add-icon",
     color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
     LEGACY_size: "small",
     label: "Add reaction"

package/dist/es2019/index.js

@@ -2,6 +2,7 @@ import { DefaultReactions, DefaultReactionsByShortName, ExtendedReactions, Exten
 import { ComponentName, ExperienceName, PickerRender, ReactionsAdd, ReactionDetailsFetch, ReactionDialogOpened, ReactionDialogSelectedReactionChanged, ReactionsRemove, ReactionsRendered, sampledReactionsRendered } from './ufo';
 export { ReactionServiceClient } from './client';
 export { Reaction, ReactionPicker, Reactions } from './components';
+export { useCloseManager } from './hooks/useCloseManager';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
 export { MemoryReactionsStore, ReactionConsumer } from './store';
 // TODO: Convert all calls for ReactionRequest to Request, RequestClient to Client and ReactionsStore to Store

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

package/dist/esm/components/Reaction/Reaction.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
@@ -28,6 +29,9 @@ export var RENDER_REACTION_TESTID = 'render_reaction_wrapper';
 var containerStyles = xcss({
   position: 'relative'
 });
+var borderlessStyle = xcss({
+  border: 'none'
+});
 var reactedStyles = xcss({
   backgroundColor: 'color.background.selected',
   borderColor: 'color.border.selected',
@@ -68,7 +72,8 @@ export var Reaction = function Reaction(_ref) {
     allowUserDialog = _ref.allowUserDialog,
     handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
     _ref$isViewOnly = _ref.isViewOnly,
-    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly;
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
+    showSubtleStyle = _ref.showSubtleStyle;
   var intl = useIntl();
   var hoverStart = useRef();
   var focusStart = useRef();
@@ -144,7 +149,7 @@ export var Reaction = function Reaction(_ref) {
   var dismissTooltip = function dismissTooltip() {
     setIsTooltipEnabled(false);
   };
-  var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
+  var buttonStyles = [].concat(_toConsumableArray(showOpaqueBackground ? [opaqueBackgroundStyles] : []), _toConsumableArray(showSubtleStyle ? [borderlessStyle] : []));
   var emojiAndCount = jsx(Inline, null, jsx("div", {
     css: [emojiStyle, reaction.count === 0 && emojiNoReactionStyle]
   }, jsx(ResourcedEmoji, {

package/dist/esm/components/ReactionPicker/ReactionPicker.js

@@ -92,7 +92,8 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     _props$showRoundTrigg = props.showRoundTrigger,
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     _props$reactionPicker = props.reactionPickerAdditionalStyle,
-    reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker;
+    reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker,
+    showMoreEmojiTriggerUI = props.showMoreEmojiTriggerUI;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -247,7 +248,8 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         showOpaqueBackground: showOpaqueBackground,
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-        showRoundTrigger: showRoundTrigger
+        showRoundTrigger: showRoundTrigger,
+        showMoreEmojiTriggerUI: showMoreEmojiTriggerUI
       })
     );
   }), settings.isOpen && jsx(PopperWrapper, {

package/dist/esm/components/ReactionTooltip/ReactionTooltip.js

@@ -27,6 +27,12 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
     allowUserDialog = _ref.allowUserDialog,
     handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
     dismissTooltip = _ref.dismissTooltip;
+  var handleClick = function handleClick() {
+    if (allowUserDialog && handleOpenReactionsDialog) {
+      dismissTooltip();
+      handleOpenReactionsDialog();
+    }
+  };
   var content = !users || users.length === 0 || !isEnabled ? null :
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, jsx-a11y/no-noninteractive-tabindex -- Ignored via go/DSP-18766
   jsx("div", {
@@ -41,12 +47,8 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
   }), jsx("li", {
     // 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: allowUserDialog ? [footerStyle, underlineStyle] : footerStyle,
-    onClick: function onClick() {
-      if (allowUserDialog && handleOpenReactionsDialog) {
-        dismissTooltip();
-        handleOpenReactionsDialog();
-      }
-    }
+    onMouseDown: handleClick,
+    onClick: handleClick
   }, users.length > maxReactions && jsx(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {
       count: users.length - maxReactions

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

@@ -144,7 +144,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     _ref$noWrap = _ref.noWrap,
     noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
     _ref$noRelativeContai = _ref.noRelativeContainer,
-    noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai;
+    noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai,
+    showMoreEmojiTriggerUI = _ref.showMoreEmojiTriggerUI,
+    showSubtleDefaultReactions = _ref.showSubtleDefaultReactions;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -331,7 +333,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       showOpaqueBackground: showOpaqueBackground,
       allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
       handleOpenReactionsDialog: _handleOpenReactionsDialog,
-      isViewOnly: isViewOnly
+      isViewOnly: isViewOnly,
+      showSubtleStyle: showSubtleDefaultReactions && reactions.length === 0
     });
   })), !isViewOnly && jsx(ReactionPicker
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -352,6 +355,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     showRoundTrigger: showRoundTrigger,
+    showMoreEmojiTriggerUI: showMoreEmojiTriggerUI,
     reactionPickerAdditionalStyle: reactionPickerAdditionalStyle
   }), jsx(ModalTransition, null, !!selectedEmojiId && jsx(UFOSegment, {
     name: "reactions-dialog"

package/dist/esm/components/Trigger/Trigger.js

@@ -10,6 +10,7 @@ import { jsx } from '@emotion/react';
 import { Pressable, Box, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import EmojiAddIcon from '@atlaskit/icon/core/migration/emoji-add';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { fg } from '@atlaskit/platform-feature-flags';
 
 /**
@@ -22,6 +23,11 @@ var i18n = defineMessages({
     id: 'reaction-picker-trigger.add.reaction.message',
     description: 'Message displayed when there are no page reactions existing on the page.',
     defaultMessage: 'Add a reaction'
+  },
+  showMore: {
+    id: 'reaction-picker-trigger.more.emojis.message',
+    description: 'Message displayed on button to show more emojis.',
+    defaultMessage: 'More emojis'
   }
 });
 var triggerStyles = xcss({
@@ -109,7 +115,8 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
     _props$showRoundTrigg = props.showRoundTrigger,
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
-    selectionStyle = props.selectionStyle;
+    selectionStyle = props.selectionStyle,
+    showMoreEmojiTriggerUI = props.showMoreEmojiTriggerUI;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -117,7 +124,7 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   return jsx(Tooltip, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
-    content: tooltipContent
+    content: showMoreEmojiTriggerUI ? formatMessage(i18n.showMore) : tooltipContent
   }, jsx(Pressable, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
     xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles,
@@ -126,7 +133,14 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref
-  }, ariaAttributes), jsx(EmojiAddIcon, {
+  }, ariaAttributes), showMoreEmojiTriggerUI ? jsx(ShowMoreHorizontalIcon, {
+    testId: "show-more-emojis-icon",
+    label: formatMessage(i18n.showMore),
+    color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)"
+  }) :
+  // TODO: https://product-fabric.atlassian.net/browse/DSP-21007
+  jsx(EmojiAddIcon, {
+    testId: "emoji-add-icon",
     color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
     LEGACY_size: "small",
     label: "Add reaction"

package/dist/esm/index.js

@@ -2,6 +2,7 @@ import { DefaultReactions, DefaultReactionsByShortName, ExtendedReactions, Exten
 import { ComponentName, ExperienceName, PickerRender, ReactionsAdd, ReactionDetailsFetch, ReactionDialogOpened, ReactionDialogSelectedReactionChanged, ReactionsRemove, ReactionsRendered, sampledReactionsRendered } from './ufo';
 export { ReactionServiceClient } from './client';
 export { Reaction, ReactionPicker, Reactions } from './components';
+export { useCloseManager } from './hooks/useCloseManager';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
 export { MemoryReactionsStore, ReactionConsumer } from './store';
 // TODO: Convert all calls for ReactionRequest to Request, RequestClient to Client and ReactionsStore to Store

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

@@ -52,8 +52,12 @@ export interface ReactionProps {
      * Optional prop for controlling if the reactions component is view only, disabling adding reactions
      */
     isViewOnly?: boolean;
+    /**
+     * Optional prop for controlling if the reaction displayed is a default one and should not have a border
+     */
+    showSubtleStyle?: boolean;
 }
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, isViewOnly, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, isViewOnly, showSubtleStyle, }: ReactionProps) => jsx.JSX.Element;

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

@@ -77,6 +77,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Option prop for controlling the reaction picker selection style
      */
     reactionPickerAdditionalStyle?: XCSS;
+    /**
+     * Optional prop for controlling if Trigger displays the ... show more emoji UI
+     */
+    showMoreEmojiTriggerUI?: boolean;
 }
 /**
  * Picker component for adding reactions

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

@@ -151,6 +151,14 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for using your own container for relative positioning for emoji picker popup
      */
     noRelativeContainer?: boolean;
+    /**
+     * Optional prop for controlling if Trigger displays the ... show more emoji UI
+     */
+    showMoreEmojiTriggerUI?: boolean;
+    /**
+     * Optional prop for controlling if default reactions are subtle
+     */
+    showSubtleDefaultReactions?: boolean;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -163,4 +171,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, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showMoreEmojiTriggerUI, showSubtleDefaultReactions, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -53,6 +53,10 @@ export interface TriggerProps {
      * Option prop for controlling the reaction picker selection style
      */
     selectionStyle?: XCSS;
+    /**
+     * Optional prop for controlling if Trigger displays the ... show more emoji UI
+     */
+    showMoreEmojiTriggerUI?: boolean;
 }
 /**
  * Render an emoji button to open the reactions select picker

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 import { ComponentName, ExperienceName } from './ufo';
 export { ReactionServiceClient } from './client';
 export { Reaction, ReactionPicker, Reactions } from './components';
+export { useCloseManager } from './hooks/useCloseManager';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
 export { MemoryReactionsStore, ReactionConsumer } from './store';
 export type { Client as ReactionClient, Request as ReactionRequest, Store as ReactionsStore, StorePropInput, State, } from './types';

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

@@ -52,8 +52,12 @@ export interface ReactionProps {
      * Optional prop for controlling if the reactions component is view only, disabling adding reactions
      */
     isViewOnly?: boolean;
+    /**
+     * Optional prop for controlling if the reaction displayed is a default one and should not have a border
+     */
+    showSubtleStyle?: boolean;
 }
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, isViewOnly, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, isViewOnly, showSubtleStyle, }: ReactionProps) => jsx.JSX.Element;

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

@@ -77,6 +77,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Option prop for controlling the reaction picker selection style
      */
     reactionPickerAdditionalStyle?: XCSS;
+    /**
+     * Optional prop for controlling if Trigger displays the ... show more emoji UI
+     */
+    showMoreEmojiTriggerUI?: boolean;
 }
 /**
  * Picker component for adding reactions

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

@@ -151,6 +151,14 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for using your own container for relative positioning for emoji picker popup
      */
     noRelativeContainer?: boolean;
+    /**
+     * Optional prop for controlling if Trigger displays the ... show more emoji UI
+     */
+    showMoreEmojiTriggerUI?: boolean;
+    /**
+     * Optional prop for controlling if default reactions are subtle
+     */
+    showSubtleDefaultReactions?: boolean;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -163,4 +171,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, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showMoreEmojiTriggerUI, showSubtleDefaultReactions, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -53,6 +53,10 @@ export interface TriggerProps {
      * Option prop for controlling the reaction picker selection style
      */
     selectionStyle?: XCSS;
+    /**
+     * Optional prop for controlling if Trigger displays the ... show more emoji UI
+     */
+    showMoreEmojiTriggerUI?: boolean;
 }
 /**
  * Render an emoji button to open the reactions select picker

package/dist/types-ts4.5/index.d.ts

@@ -1,6 +1,7 @@
 import { ComponentName, ExperienceName } from './ufo';
 export { ReactionServiceClient } from './client';
 export { Reaction, ReactionPicker, Reactions } from './components';
+export { useCloseManager } from './hooks/useCloseManager';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
 export { MemoryReactionsStore, ReactionConsumer } from './store';
 export type { Client as ReactionClient, Request as ReactionRequest, Store as ReactionsStore, StorePropInput, State, } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "26.4.2",
+	"version": "26.5.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"