@atlaskit/reactions 22.10.1 → 22.10.3

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

@@ -16,6 +16,15 @@ var buttonStyle = xcss({
   paddingBottom: 'space.050',
   paddingLeft: 'space.100'
 });
+var opaqueBackgroundStyles = xcss({
+  backgroundColor: 'elevation.surface',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered'
+  },
+  ':active': {
+    backgroundColor: 'elevation.surface.pressed'
+  }
+});
 var containerStyle = xcss({
   position: 'relative'
 });
@@ -36,7 +45,9 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     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 = useIntl();
 
   // Helper function to sort reactions by count and return top N
@@ -53,6 +64,7 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
   var topReactions = useMemo(function () {
     return getTopReactions(reactions, emojisToShow);
   }, [emojisToShow, reactions]);
+  var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
   return /*#__PURE__*/React.createElement(Box, {
     xcss: containerStyle,
     ref: ref
@@ -60,15 +72,7 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     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/esm/components/ReactionSummary/ReactionSummaryView.js

@@ -28,7 +28,9 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -68,7 +70,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
       return /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {
         emojiProvider: emojiProvider,
         reactions: reactions,
-        onClick: handleSummaryClick
+        onClick: handleSummaryClick,
+        showOpaqueBackground: showOpaqueBackground
       }));
     }
   });

package/dist/esm/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/esm/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/esm/components/Reactions/Reactions.js

@@ -1,5 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/** @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';
@@ -106,7 +109,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     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 = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -277,7 +282,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       onReactionClick: onReactionClick,
       onReactionFocused: handleReactionFocused,
       onReactionMouseEnter: handleReactionMouseEnter,
-      placement: summaryViewPlacement
+      placement: summaryViewPlacement,
+      showOpaqueBackground: showOpaqueBackground
     })) : memorizedReactions.map(function (reaction) {
       return jsx(Reaction, {
         key: reaction.emojiId,
@@ -289,7 +295,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
         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
@@ -305,7 +312,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       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/esm/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/esm/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/esm/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/esm/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/esm/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 @@ var triggerStyles = xcss({
   alignItems: 'center',
   lineHeight: '16px'
 });
-var enabledTriggerStyles = xcss({
+var transparentEnabledTriggerStyles = xcss({
   borderColor: 'color.border',
   backgroundColor: 'color.background.neutral.subtle',
   ':hover': {
@@ -34,6 +37,16 @@ var enabledTriggerStyles = xcss({
     backgroundColor: 'color.background.neutral.subtle.pressed'
   }
 });
+var opaqueEnabledTriggerStyles = xcss({
+  borderColor: 'color.border',
+  backgroundColor: 'elevation.surface',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered'
+  },
+  ':active': {
+    backgroundColor: 'elevation.surface.pressed'
+  }
+});
 var disabledTriggerStyles = xcss({
   borderColor: 'color.border.disabled',
   backgroundColor: 'color.background.disabled'
@@ -55,7 +68,9 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _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);
@@ -66,7 +81,7 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (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/types/components/FlashAnimation/FlashAnimation.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 export type FlashAnimationProps = PropsWithChildren<{

package/dist/types/components/FlashAnimation/styles.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { keyframes } from '@emotion/react';
 export declare const flashAnimation: typeof keyframes;
 export declare const containerStyle: import("@emotion/react").SerializedStyles;

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

@@ -40,8 +40,12 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
      * Optional function when the user wants to see more users in a modal
      */
     handleUserListClick?: (emojiId: string) => void;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
 }
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, handleUserListClick, allowUserDialog, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, handleUserListClick, allowUserDialog, showOpaqueBackground, }: ReactionProps) => jsx.JSX.Element;

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { type XCSS } from '@atlaskit/primitives';
 import { jsx } from '@emotion/react';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type EmojiProvider, type EmojiId } from '@atlaskit/emoji';
 import { jsx } from '@emotion/react';
 export declare const PARTICLE_COUNT = 4;

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { type PickerSize } from '@atlaskit/emoji/types';
@@ -53,6 +56,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional emoji picker size to control the size of emoji picker
      */
     emojiPickerSize?: PickerSize;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
 }
 /**
  * Picker component for adding reactions

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

@@ -9,6 +9,10 @@ interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider
      * The number of emojis to show in the summary button
      */
     emojisToShow?: number;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
 }
 /**
  * Test id for summary reaction wrapper button

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

@@ -28,6 +28,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional event when focused a reaction inside the summary
      */
     onReactionFocused?: ReactionFocused;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, handleOpenReactionsDialog, allowUserDialog, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, handleOpenReactionsDialog, allowUserDialog, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 import { type ReactionSummary } from '../../types';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
@@ -107,6 +110,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop to change the placement of the summary popup reaction list
      */
     summaryViewPlacement?: Placement;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
 }
 /**
  * Get content of the tooltip
@@ -115,4 +122,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { type EmojiId, type OnEmojiEvent } from '@atlaskit/emoji/types';

package/dist/types/components/Selector/styles.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { keyframes } from '@emotion/react';
 export declare const revealAnimation: typeof keyframes;
 export declare const revealStyle: import("@emotion/react").SerializedStyles;

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

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 /**
  * Test id for wrapper button

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { type AriaAttributes } from 'react';
 import { type AnalyticsEvent } from '@atlaskit/analytics-next';
 /**
@@ -29,6 +32,10 @@ export interface TriggerProps {
      * Aria accessibility attributes that will be added to the button
      */
     ariaAttributes?: AriaAttributes;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
 }
 /**
  * Render an emoji button to open the reactions select picker

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 export type FlashAnimationProps = PropsWithChildren<{

package/dist/types-ts4.5/components/FlashAnimation/styles.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { keyframes } from '@emotion/react';
 export declare const flashAnimation: typeof keyframes;
 export declare const containerStyle: import("@emotion/react").SerializedStyles;

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

@@ -40,8 +40,12 @@ export interface ReactionProps extends Pick<ReactionTooltipProps, 'allowUserDial
      * Optional function when the user wants to see more users in a modal
      */
     handleUserListClick?: (emojiId: string) => void;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
 }
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, handleUserListClick, allowUserDialog, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, handleUserListClick, allowUserDialog, showOpaqueBackground, }: ReactionProps) => jsx.JSX.Element;

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { type XCSS } from '@atlaskit/primitives';
 import { jsx } from '@emotion/react';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type EmojiProvider, type EmojiId } from '@atlaskit/emoji';
 import { jsx } from '@emotion/react';
 export declare const PARTICLE_COUNT = 4;

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { type PickerSize } from '@atlaskit/emoji/types';
@@ -53,6 +56,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional emoji picker size to control the size of emoji picker
      */
     emojiPickerSize?: PickerSize;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
 }
 /**
  * Picker component for adding reactions

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

@@ -9,6 +9,10 @@ interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider
      * The number of emojis to show in the summary button
      */
     emojisToShow?: number;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
 }
 /**
  * Test id for summary reaction wrapper button

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

@@ -28,6 +28,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional event when focused a reaction inside the summary
      */
     onReactionFocused?: ReactionFocused;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, handleOpenReactionsDialog, allowUserDialog, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, handleOpenReactionsDialog, allowUserDialog, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 import { type ReactionSummary } from '../../types';

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
@@ -107,6 +110,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop to change the placement of the summary popup reaction list
      */
     summaryViewPlacement?: Placement;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
 }
 /**
  * Get content of the tooltip
@@ -115,4 +122,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { type EmojiId, type OnEmojiEvent } from '@atlaskit/emoji/types';

package/dist/types-ts4.5/components/Selector/styles.d.ts

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { keyframes } from '@emotion/react';
 export declare const revealAnimation: typeof keyframes;
 export declare const revealStyle: import("@emotion/react").SerializedStyles;

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

@@ -1,5 +1,8 @@
 /// <reference types="react" />
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 /**
  * Test id for wrapper button

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

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { type AriaAttributes } from 'react';
 import { type AnalyticsEvent } from '@atlaskit/analytics-next';
 /**
@@ -29,6 +32,10 @@ export interface TriggerProps {
      * Aria accessibility attributes that will be added to the button
      */
     ariaAttributes?: AriaAttributes;
+    /**
+     * Optional prop for using an opaque button background instead of a transparent background
+     */
+    showOpaqueBackground?: boolean;
 }
 /**
  * Render an emoji button to open the reactions select picker