@atlaskit/reactions 22.10.1 → 22.10.3

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -32,6 +35,15 @@ const reactedStyles = xcss({
     backgroundColor: 'color.background.selected.pressed'
   }
 });
+const opaqueBackgroundStyles = xcss({
+  backgroundColor: 'elevation.surface',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered'
+  },
+  ':active': {
+    backgroundColor: 'elevation.surface.pressed'
+  }
+});
 
 /**
  * Render an emoji reaction button
@@ -45,7 +57,8 @@ export const Reaction = ({
   flash = false,
   showParticleEffect = false,
   handleUserListClick = () => {},
-  allowUserDialog
+  allowUserDialog,
+  showOpaqueBackground = false
 }) => {
   const intl = useIntl();
   const hoverStart = useRef();
@@ -104,6 +117,7 @@ export const Reaction = ({
     handleUserListClick(emojiId);
     setIsTooltipEnabled(false);
   };
+  const buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
   return jsx(Box, {
     xcss: containerStyles
   }, showParticleEffect && jsx(ReactionParticleEffect, {
@@ -118,7 +132,7 @@ export const Reaction = ({
   }, jsx(ReactionButton, {
     onClick: handleClick,
     flash: flash,
-    additionalStyles: reaction.reacted ? [reactedStyles] : [],
+    additionalStyles: reaction.reacted ? [reactedStyles] : buttonStyles,
     ariaLabel: intl.formatMessage(messages.reactWithEmoji, {
       emoji: emojiName
     }),

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

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { Pressable, xcss } from '@atlaskit/primitives';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/components/Reaction/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 { B50, B75, B300, N20, N40, N400, B100 } from '@atlaskit/theme/colors';

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

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx   jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useEffect, useState, useMemo } 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/ReactionDialog/ReactionsDialog.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useEffect, useState, useRef, useCallback, useMemo } 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/ReactionDialog/ReactionsList.js

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

package/dist/es2019/components/ReactionDialog/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 { B400, N500, N800 } from '@atlaskit/theme/colors';

package/dist/es2019/components/ReactionParticleEffect/ReactionParticleEffect.js

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

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -72,7 +75,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     onOpen = () => {},
     onCancel = () => {},
     tooltipContent = jsx(FormattedMessage, messages.addReaction),
-    emojiPickerSize
+    emojiPickerSize,
+    showOpaqueBackground = false
   } = props;
   const [triggerRef, setTriggerRef] = useState(null);
 
@@ -197,7 +201,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     onClick: onTriggerClick,
     miniMode: miniMode,
     disabled: disabled,
-    tooltipContent: settings.isOpen ? null : tooltipContent
+    tooltipContent: settings.isOpen ? null : tooltipContent,
+    showOpaqueBackground: showOpaqueBackground
   })), settings.isOpen && jsx(PopperWrapper, {
     settings: settings
   }, settings.showFullPicker ? jsx(EmojiPicker, {

package/dist/es2019/components/ReactionPicker/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 { borderRadius } from '@atlaskit/theme/constants';

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

@@ -15,6 +15,15 @@ const buttonStyle = xcss({
   paddingBottom: 'space.050',
   paddingLeft: 'space.100'
 });
+const opaqueBackgroundStyles = xcss({
+  backgroundColor: 'elevation.surface',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered'
+  },
+  ':active': {
+    backgroundColor: 'elevation.surface.pressed'
+  }
+});
 const containerStyle = xcss({
   position: 'relative'
 });
@@ -33,7 +42,8 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
   emojiProvider,
   reactions = [],
   emojisToShow = 3,
-  onClick
+  onClick,
+  showOpaqueBackground = false
 }, ref) => {
   const intl = useIntl();
 
@@ -47,6 +57,7 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
     }, 0);
   }, [reactions]);
   const topReactions = useMemo(() => getTopReactions(reactions, emojisToShow), [emojisToShow, reactions]);
+  const buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
   return /*#__PURE__*/React.createElement(Box, {
     xcss: containerStyle,
     ref: ref
@@ -54,15 +65,7 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
     onClick: onClick,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
     ariaLabel: intl.formatMessage(messages.summary),
-    additionalStyles: [xcss({
-      backgroundColor: 'elevation.surface',
-      ':hover': {
-        backgroundColor: 'elevation.surface.hovered'
-      },
-      ':active': {
-        backgroundColor: 'elevation.surface.pressed'
-      }
-    })]
+    additionalStyles: buttonStyles
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
     xcss: buttonStyle

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

@@ -23,7 +23,8 @@ export const ReactionSummaryView = ({
   placement = 'auto-start',
   onReactionClick,
   onReactionFocused,
-  onReactionMouseEnter
+  onReactionMouseEnter,
+  showOpaqueBackground = false
 }) => {
   const [isSummaryPopupOpen, setSummaryPopupOpen] = useState(false);
   const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), []);
@@ -52,7 +53,8 @@ export const ReactionSummaryView = ({
     trigger: triggerProps => /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {
       emojiProvider: emojiProvider,
       reactions: reactions,
-      onClick: handleSummaryClick
+      onClick: handleSummaryClick,
+      showOpaqueBackground: showOpaqueBackground
     }))
   });
 };

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

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

package/dist/es2019/components/ReactionTooltip/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, N800, N0 } from '@atlaskit/theme/colors';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -93,7 +96,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   miniMode = false,
   summaryViewEnabled = false,
   summaryViewThreshold = 3,
-  summaryViewPlacement
+  summaryViewPlacement,
+  showOpaqueBackground = false
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -259,7 +263,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
       onReactionClick: onReactionClick,
       onReactionFocused: handleReactionFocused,
       onReactionMouseEnter: handleReactionMouseEnter,
-      placement: summaryViewPlacement
+      placement: summaryViewPlacement,
+      showOpaqueBackground: showOpaqueBackground
     })) : memorizedReactions.map(reaction => jsx(Reaction, {
       key: reaction.emojiId,
       reaction: reaction,
@@ -270,7 +275,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
       flash: flash[reaction.emojiId],
       handleUserListClick: handleOpenReactionsDialog,
       allowUserDialog: allowUserDialog,
-      showParticleEffect: particleEffectByEmoji[reaction.emojiId]
+      showParticleEffect: particleEffectByEmoji[reaction.emojiId],
+      showOpaqueBackground: showOpaqueBackground
     })), jsx(ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     , {
@@ -285,7 +291,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
       onShowMore: handleOnMore,
       tooltipContent: getTooltip(status, errorMessage),
       emojiPickerSize: emojiPickerSize,
-      miniMode: miniMode
+      miniMode: miniMode,
+      showOpaqueBackground: showOpaqueBackground
     }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
       content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true

package/dist/es2019/components/Reactions/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';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/es2019/components/Selector/Selector.js

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

package/dist/es2019/components/Selector/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';
 

package/dist/es2019/components/ShowMore/ShowMore.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';
 import { FormattedMessage } from 'react-intl-next';

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

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -24,7 +27,7 @@ const triggerStyles = xcss({
   alignItems: 'center',
   lineHeight: '16px'
 });
-const enabledTriggerStyles = xcss({
+const transparentEnabledTriggerStyles = xcss({
   borderColor: 'color.border',
   backgroundColor: 'color.background.neutral.subtle',
   ':hover': {
@@ -34,6 +37,16 @@ const enabledTriggerStyles = xcss({
     backgroundColor: 'color.background.neutral.subtle.pressed'
   }
 });
+const opaqueEnabledTriggerStyles = xcss({
+  borderColor: 'color.border',
+  backgroundColor: 'elevation.surface',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered'
+  },
+  ':active': {
+    backgroundColor: 'elevation.surface.pressed'
+  }
+});
 const disabledTriggerStyles = xcss({
   borderColor: 'color.border.disabled',
   backgroundColor: 'color.background.disabled'
@@ -54,7 +67,8 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     miniMode,
     tooltipContent,
     disabled = false,
-    ariaAttributes = {}
+    ariaAttributes = {},
+    showOpaqueBackground = false
   } = props;
   const handleMouseDown = (e, analyticsEvent) => {
     if (onClick && !disabled) {
@@ -66,7 +80,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     content: tooltipContent
   }, jsx(Pressable, _extends({
     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/esm/analytics/index.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "22.10.1";
+var packageVersion = "22.10.3";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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';

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

@@ -1,7 +1,10 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -35,6 +38,15 @@ var reactedStyles = xcss({
     backgroundColor: 'color.background.selected.pressed'
   }
 });
+var opaqueBackgroundStyles = xcss({
+  backgroundColor: 'elevation.surface',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered'
+  },
+  ':active': {
+    backgroundColor: 'elevation.surface.pressed'
+  }
+});
 
 /**
  * Render an emoji reaction button
@@ -53,7 +65,9 @@ export var 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 = useIntl();
   var hoverStart = useRef();
   var focusStart = useRef();
@@ -129,6 +143,7 @@ export var Reaction = function Reaction(_ref) {
     handleUserListClick(emojiId);
     setIsTooltipEnabled(false);
   };
+  var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
   return jsx(Box, {
     xcss: containerStyles
   }, showParticleEffect && jsx(ReactionParticleEffect, {
@@ -143,7 +158,7 @@ export var Reaction = function Reaction(_ref) {
   }, jsx(ReactionButton, {
     onClick: handleClick,
     flash: flash,
-    additionalStyles: reaction.reacted ? [reactedStyles] : [],
+    additionalStyles: reaction.reacted ? [reactedStyles] : buttonStyles,
     ariaLabel: intl.formatMessage(messages.reactWithEmoji, {
       emoji: emojiName
     }),

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

@@ -1,6 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { Pressable, xcss } from '@atlaskit/primitives';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/esm/components/Reaction/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 { B50, B75, B300, N20, N40, N400, B100 } from '@atlaskit/theme/colors';

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

@@ -2,7 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-/** @jsx   jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useEffect, useState, useMemo } 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/esm/components/ReactionDialog/ReactionsDialog.js

@@ -1,5 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useEffect, useState, useRef, useCallback, useMemo } 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/esm/components/ReactionDialog/ReactionsList.js

@@ -1,5 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/** @jsx   jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useCallback, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

package/dist/esm/components/ReactionDialog/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 { B400, N500, N800 } from '@atlaskit/theme/colors';

package/dist/esm/components/ReactionParticleEffect/ReactionParticleEffect.js

@@ -1,5 +1,8 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { ResourcedEmoji } from '@atlaskit/emoji';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';

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

@@ -2,7 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _defineProperty(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 */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -79,7 +82,9 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     onCancel = _props$onCancel === void 0 ? function () {} : _props$onCancel,
     _props$tooltipContent = props.tooltipContent,
     tooltipContent = _props$tooltipContent === void 0 ? jsx(FormattedMessage, messages.addReaction) : _props$tooltipContent,
-    emojiPickerSize = props.emojiPickerSize;
+    emojiPickerSize = props.emojiPickerSize,
+    _props$showOpaqueBack = props.showOpaqueBackground,
+    showOpaqueBackground = _props$showOpaqueBack === void 0 ? false : _props$showOpaqueBack;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -210,7 +215,8 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         onClick: onTriggerClick,
         miniMode: miniMode,
         disabled: disabled,
-        tooltipContent: settings.isOpen ? null : tooltipContent
+        tooltipContent: settings.isOpen ? null : tooltipContent,
+        showOpaqueBackground: showOpaqueBackground
       })
     );
   }), settings.isOpen && jsx(PopperWrapper, {

package/dist/esm/components/ReactionPicker/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 { borderRadius } from '@atlaskit/theme/constants';