@atlaskit/reactions 22.10.1 → 22.10.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/reactions
 
+## 22.10.3
+
+### Patch Changes
+
+- [#124009](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124009)
+  [`1b172cc669c8e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1b172cc669c8e) -
+  [ux] add support for opaque backgrounds in pre-existing reaction buttons while in summary view
+- Updated dependencies
+
+## 22.10.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.10.1
 
 ### 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.10.1";
+var packageVersion = "22.10.3";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Counter/Counter.js

@@ -9,7 +9,10 @@ var _react2 = require("@emotion/react");
 var _motion = require("@atlaskit/motion");
 var _utils = require("../../shared/utils");
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.highlightStyle = exports.counterLabelStyle = exports.countStyle = exports.containerStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/cjs/components/EmojiButton/EmojiButton.js

@@ -12,7 +12,10 @@ var _emoji = require("@atlaskit/emoji");
 var _primitives = require("@atlaskit/primitives");
 var _i18n = require("../../shared/i18n");
 var _utils = require("../../shared/utils");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/components/FlashAnimation/FlashAnimation.js

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.RENDER_FLASHANIMATION_TESTID = exports.FlashAnimation = void 0;
 var _react = require("@emotion/react");
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.flashStyle = exports.flashAnimation = exports.containerStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var flashTime = 700;

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

@@ -25,7 +25,10 @@ var _styles = require("./styles");
 var _ReactionButton = require("./ReactionButton");
 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 && Object.prototype.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; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -46,6 +49,15 @@ var reactedStyles = (0, _primitives.xcss)({
     backgroundColor: 'color.background.selected.pressed'
   }
 });
+var opaqueBackgroundStyles = (0, _primitives.xcss)({
+  backgroundColor: 'elevation.surface',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered'
+  },
+  ':active': {
+    backgroundColor: 'elevation.surface.pressed'
+  }
+});
 
 /**
  * Render an emoji reaction button
@@ -64,7 +76,9 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     showParticleEffect = _ref$showParticleEffe === void 0 ? false : _ref$showParticleEffe,
     _ref$handleUserListCl = _ref.handleUserListClick,
     handleUserListClick = _ref$handleUserListCl === void 0 ? function () {} : _ref$handleUserListCl,
-    allowUserDialog = _ref.allowUserDialog;
+    allowUserDialog = _ref.allowUserDialog,
+    _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr;
   var intl = (0, _reactIntlNext.useIntl)();
   var hoverStart = (0, _react.useRef)();
   var focusStart = (0, _react.useRef)();
@@ -140,6 +154,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     handleUserListClick(emojiId);
     setIsTooltipEnabled(false);
   };
+  var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
   return (0, _react2.jsx)(_primitives.Box, {
     xcss: containerStyles
   }, showParticleEffect && (0, _react2.jsx)(_ReactionParticleEffect.ReactionParticleEffect, {
@@ -154,7 +169,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
   }, (0, _react2.jsx)(_ReactionButton.ReactionButton, {
     onClick: handleClick,
     flash: flash,
-    additionalStyles: reaction.reacted ? [reactedStyles] : [],
+    additionalStyles: reaction.reacted ? [reactedStyles] : buttonStyles,
     ariaLabel: intl.formatMessage(_i18n.messages.reactWithEmoji, {
       emoji: emojiName
     }),

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

@@ -12,7 +12,10 @@ var _primitives = require("@atlaskit/primitives");
 var _react2 = require("@emotion/react");
 var _FlashAnimation = require("../FlashAnimation");
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.reactionStyle = exports.reactedStyle = exports.flashStyle = exports.flashHeight = exports.emojiStyle = exports.emojiNoReactionStyle = exports.containerStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 /**

package/dist/cjs/components/ReactionDialog/ReactionView.js

@@ -18,7 +18,10 @@ var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _tabs = require("@atlaskit/tabs");
 var _i18n = require("../../shared/i18n");
 var _styles = require("./styles");
-/** @jsx   jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/components/ReactionDialog/ReactionsDialog.js

@@ -18,7 +18,10 @@ var _ReactionsList = require("./ReactionsList");
 var _styles = require("./styles");
 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 && Object.prototype.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; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/components/ReactionDialog/ReactionsList.js

@@ -17,7 +17,10 @@ var _styles = require("./styles");
 var _ReactionView = require("./ReactionView");
 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 && Object.prototype.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; }
-/** @jsx   jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -7,7 +7,10 @@ exports.userStyle = exports.userListStyle = exports.titleStyle = exports.reactio
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../shared/constants");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var REACTIONS_CONTAINER_WIDTH = 48;

package/dist/cjs/components/ReactionParticleEffect/ReactionParticleEffect.js

@@ -9,7 +9,10 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _emoji = require("@atlaskit/emoji");
 var _react = require("@emotion/react");
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -25,7 +25,10 @@ var _RepositionOnUpdate = require("./RepositionOnUpdate");
 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 && Object.prototype.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; }
 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; } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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; } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 /**
  * Test id for wrapper ReactionPicker div
  */
@@ -86,7 +89,9 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     onCancel = _props$onCancel === void 0 ? function () {} : _props$onCancel,
     _props$tooltipContent = props.tooltipContent,
     tooltipContent = _props$tooltipContent === void 0 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addReaction) : _props$tooltipContent,
-    emojiPickerSize = props.emojiPickerSize;
+    emojiPickerSize = props.emojiPickerSize,
+    _props$showOpaqueBack = props.showOpaqueBackground,
+    showOpaqueBackground = _props$showOpaqueBack === void 0 ? false : _props$showOpaqueBack;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -217,7 +222,8 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         onClick: onTriggerClick,
         miniMode: miniMode,
         disabled: disabled,
-        tooltipContent: settings.isOpen ? null : tooltipContent
+        tooltipContent: settings.isOpen ? null : tooltipContent,
+        showOpaqueBackground: showOpaqueBackground
       })
     );
   }), settings.isOpen && (0, _react2.jsx)(PopperWrapper, {

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

@@ -7,7 +7,10 @@ exports.popupWrapperStyle = exports.popupStyle = exports.pickerStyle = exports.c
 var _react = require("@emotion/react");
 var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

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

@@ -26,6 +26,15 @@ var buttonStyle = (0, _primitives.xcss)({
   paddingBottom: 'space.050',
   paddingLeft: 'space.100'
 });
+var opaqueBackgroundStyles = (0, _primitives.xcss)({
+  backgroundColor: 'elevation.surface',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered'
+  },
+  ':active': {
+    backgroundColor: 'elevation.surface.pressed'
+  }
+});
 var containerStyle = (0, _primitives.xcss)({
   position: 'relative'
 });
@@ -46,7 +55,9 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
     _ref$emojisToShow = _ref.emojisToShow,
     emojisToShow = _ref$emojisToShow === void 0 ? 3 : _ref$emojisToShow,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr;
   var intl = (0, _reactIntlNext.useIntl)();
 
   // Helper function to sort reactions by count and return top N
@@ -63,6 +74,7 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
   var topReactions = (0, _react.useMemo)(function () {
     return getTopReactions(reactions, emojisToShow);
   }, [emojisToShow, reactions]);
+  var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: containerStyle,
     ref: ref
@@ -70,15 +82,7 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     onClick: onClick,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
     ariaLabel: intl.formatMessage(_i18n.messages.summary),
-    additionalStyles: [(0, _primitives.xcss)({
-      backgroundColor: 'elevation.surface',
-      ':hover': {
-        backgroundColor: 'elevation.surface.hovered'
-      },
-      ':active': {
-        backgroundColor: 'elevation.surface.pressed'
-      }
-    })]
+    additionalStyles: buttonStyles
   }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     space: "space.050",
     xcss: buttonStyle

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

@@ -38,7 +38,9 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     placement = _ref$placement === void 0 ? 'auto-start' : _ref$placement,
     onReactionClick = _ref.onReactionClick,
     onReactionFocused = _ref.onReactionFocused,
-    onReactionMouseEnter = _ref.onReactionMouseEnter;
+    onReactionMouseEnter = _ref.onReactionMouseEnter,
+    _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -78,7 +80,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
       return /*#__PURE__*/_react.default.createElement(_ReactionSummaryButton.ReactionSummaryButton, (0, _extends2.default)({}, triggerProps, {
         emojiProvider: emojiProvider,
         reactions: reactions,
-        onClick: handleSummaryClick
+        onClick: handleSummaryClick,
+        showOpaqueBackground: showOpaqueBackground
       }));
     }
   });

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

@@ -13,7 +13,10 @@ var _reactIntlNext = require("react-intl-next");
 var _constants = require("../../shared/constants");
 var _i18n = require("../../shared/i18n");
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.verticalMargin = exports.underlineStyle = exports.tooltipStyle = exports.footerStyle = exports.emojiNameStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var verticalMargin = exports.verticalMargin = 5;

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

@@ -28,7 +28,10 @@ var _styles = require("./styles");
 var _ReactionSummary = require("../ReactionSummary/");
 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 && Object.prototype.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; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -119,7 +122,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     summaryViewEnabled = _ref$summaryViewEnabl === void 0 ? false : _ref$summaryViewEnabl,
     _ref$summaryViewThres = _ref.summaryViewThreshold,
     summaryViewThreshold = _ref$summaryViewThres === void 0 ? 3 : _ref$summaryViewThres,
-    summaryViewPlacement = _ref.summaryViewPlacement;
+    summaryViewPlacement = _ref.summaryViewPlacement,
+    _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -290,7 +295,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       onReactionClick: onReactionClick,
       onReactionFocused: handleReactionFocused,
       onReactionMouseEnter: handleReactionMouseEnter,
-      placement: summaryViewPlacement
+      placement: summaryViewPlacement,
+      showOpaqueBackground: showOpaqueBackground
     })) : memorizedReactions.map(function (reaction) {
       return (0, _react2.jsx)(_Reaction.Reaction, {
         key: reaction.emojiId,
@@ -302,7 +308,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
         flash: flash[reaction.emojiId],
         handleUserListClick: handleOpenReactionsDialog,
         allowUserDialog: allowUserDialog,
-        showParticleEffect: particleEffectByEmoji[reaction.emojiId]
+        showParticleEffect: particleEffectByEmoji[reaction.emojiId],
+        showOpaqueBackground: showOpaqueBackground
       });
     }), (0, _react2.jsx)(_ReactionPicker.ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -318,7 +325,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       onShowMore: handleOnMore,
       tooltipContent: getTooltip(status, errorMessage),
       emojiPickerSize: emojiPickerSize,
-      miniMode: miniMode
+      miniMode: miniMode,
+      showOpaqueBackground: showOpaqueBackground
     }), allowUserDialog && reactions.length > 0 && (0, _react2.jsx)(_tooltip.default, {
       content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true

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

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.wrapperStyle = exports.seeWhoReactedStyle = exports.reactionPickerStyle = void 0;
 var _react = require("@emotion/react");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

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

@@ -16,7 +16,10 @@ var _ShowMore = require("../ShowMore");
 var _styles = require("./styles");
 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 && Object.prototype.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; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.revealStyle = exports.revealAnimation = void 0;
 var _react = require("@emotion/react");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/cjs/components/ShowMore/ShowMore.js

@@ -11,7 +11,10 @@ var _new = require("@atlaskit/button/new");
 var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/more"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _i18n = require("../../shared/i18n");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 /**

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

@@ -11,7 +11,10 @@ var _react2 = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji-add"));
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -32,7 +35,7 @@ var triggerStyles = (0, _primitives.xcss)({
   alignItems: 'center',
   lineHeight: '16px'
 });
-var enabledTriggerStyles = (0, _primitives.xcss)({
+var transparentEnabledTriggerStyles = (0, _primitives.xcss)({
   borderColor: 'color.border',
   backgroundColor: 'color.background.neutral.subtle',
   ':hover': {
@@ -42,6 +45,16 @@ var enabledTriggerStyles = (0, _primitives.xcss)({
     backgroundColor: 'color.background.neutral.subtle.pressed'
   }
 });
+var opaqueEnabledTriggerStyles = (0, _primitives.xcss)({
+  borderColor: 'color.border',
+  backgroundColor: 'elevation.surface',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered'
+  },
+  ':active': {
+    backgroundColor: 'elevation.surface.pressed'
+  }
+});
 var disabledTriggerStyles = (0, _primitives.xcss)({
   borderColor: 'color.border.disabled',
   backgroundColor: 'color.background.disabled'
@@ -63,7 +76,9 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     _props$ariaAttributes = props.ariaAttributes,
-    ariaAttributes = _props$ariaAttributes === void 0 ? {} : _props$ariaAttributes;
+    ariaAttributes = _props$ariaAttributes === void 0 ? {} : _props$ariaAttributes,
+    _props$showOpaqueBack = props.showOpaqueBackground,
+    showOpaqueBackground = _props$showOpaqueBack === void 0 ? false : _props$showOpaqueBack;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -74,7 +89,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     content: tooltipContent
   }, (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    xcss: [triggerStyles, disabled ? disabledTriggerStyles : enabledTriggerStyles, miniMode && miniModeStyles],
+    xcss: [triggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles],
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref

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

package/dist/es2019/components/Counter/Counter.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useEffect, useMemo, useRef } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { N90, B400 } from '@atlaskit/theme/colors';

package/dist/es2019/components/EmojiButton/EmojiButton.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/components/FlashAnimation/FlashAnimation.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, keyframes } from '@emotion/react';
 import { B75, B300 } from '@atlaskit/theme/colors';