@atlaskit/reactions 26.3.1 → 26.4.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/reactions
 
+## 26.4.0
+
+### Minor Changes
+
+- [#117805](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/117805)
+  [`1eed800de1541`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1eed800de1541) -
+  added conditional styles for container wrap and positioning
+
+## 26.3.2
+
+### Patch Changes
+
+- [#118247](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118247)
+  [`e1a483946dc0d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e1a483946dc0d) -
+  [ux] Passing additional prop named reactionPickerAdditionalStyle to enable selected state on the
+  reaction picker
+
 ## 26.3.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 = "26.3.1";
+var packageVersion = "26.4.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -97,7 +97,9 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     _props$showAddReactio = props.showAddReactionText,
     showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
     _props$showRoundTrigg = props.showRoundTrigger,
-    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg;
+    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
+    _props$reactionPicker = props.reactionPickerAdditionalStyle,
+    reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -107,8 +109,12 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
    * Container <div /> reference (used by custom hook to detect click outside)
    */
   var wrapperRef = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(undefined),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    selectionStyle = _useState4[0],
+    setSelectionStyle = _useState4[1];
   var updatePopper = (0, _react.useRef)();
-  var _useState3 = (0, _react.useState)({
+  var _useState5 = (0, _react.useState)({
       /**
        * Show the picker floating panel
        */
@@ -122,9 +128,9 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
        */
       useLeftPopperPlacement: showRoundTrigger
     }),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    settings = _useState4[0],
-    setSettings = _useState4[1];
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    settings = _useState6[0],
+    setSettings = _useState6[1];
 
   /**
    * Custom hook triggers when user clicks outside the reactions picker
@@ -199,6 +205,15 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     // ufo reactions picker opened success
     _ufo.PickerRender.success();
   };
+  (0, _react.useEffect)(function () {
+    if (settings.isOpen) {
+      setSelectionStyle(reactionPickerAdditionalStyle);
+    }
+    return function () {
+      setSelectionStyle(undefined);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [settings.isOpen]);
   var wrapperClassName = " ".concat(settings.isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
   (0, _react.useLayoutEffect)(function () {
     var _updatePopper$current;
@@ -231,6 +246,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
             setTriggerRef(node);
           }
         },
+        selectionStyle: selectionStyle,
         onClick: onTriggerClick,
         miniMode: miniMode,
         disabled: disabled,
@@ -262,10 +278,10 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
 var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
   var settings = props.settings,
     children = props.children;
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    popupRef = _useState6[0],
-    setPopupRef = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    popupRef = _useState8[0],
+    setPopupRef = _useState8[1];
   /**
    * add focus lock to popup
    */

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

@@ -36,6 +36,25 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var wrapperStyle = (0, _react2.css)({
+  display: 'flex',
+  flexWrap: 'wrap',
+  position: 'relative',
+  alignItems: 'center',
+  borderRadius: '15px',
+  marginTop: "var(--ds-space-negative-050, -4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '> :first-of-type > :first-of-type': {
+    marginLeft: 0
+  }
+});
+var noFlexWrapStyles = (0, _react2.css)({
+  flexWrap: 'nowrap'
+});
+var noContainerPositionStyles = (0, _react2.css)({
+  position: 'initial'
+});
+
 /**
  * Set of all available UFO experiences relating to Reactions Dialog
  */
@@ -134,7 +153,12 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     _ref$showRoundTrigger = _ref.showRoundTrigger,
     showRoundTrigger = _ref$showRoundTrigger === void 0 ? false : _ref$showRoundTrigger,
     _ref$isViewOnly = _ref.isViewOnly,
-    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly;
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
+    reactionPickerAdditionalStyle = _ref.reactionPickerAdditionalStyle,
+    _ref$noWrap = _ref.noWrap,
+    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
+    _ref$noRelativeContai = _ref.noRelativeContainer,
+    noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -286,7 +310,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
   return (0, _react2.jsx)(_segment.default, {
     name: "reactions"
   }, (0, _react2.jsx)("div", {
-    css: _styles.wrapperStyle,
+    css: [wrapperStyle, noWrap && noFlexWrapStyles, noRelativeContainer && noContainerPositionStyles],
     "data-testid": RENDER_REACTIONS_TESTID
   }, !onlyRenderPicker && (shouldShowSummaryView ? (0, _react2.jsx)("div", {
     "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
@@ -341,7 +365,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-    showRoundTrigger: showRoundTrigger
+    showRoundTrigger: showRoundTrigger,
+    reactionPickerAdditionalStyle: reactionPickerAdditionalStyle
   }), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_segment.default, {
     name: "reactions-dialog"
   }, (0, _react2.jsx)(_ReactionDialog.ReactionsDialog, {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyle = exports.reactionPickerStyle = void 0;
+exports.reactionPickerStyle = void 0;
 var _react = require("@emotion/react");
 /**
  * @jsxRuntime classic
@@ -15,18 +15,4 @@ var _react = require("@emotion/react");
 var reactionPickerStyle = exports.reactionPickerStyle = (0, _react.css)({
   display: 'inline-block',
   marginTop: "var(--ds-space-050, 4px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var wrapperStyle = exports.wrapperStyle = (0, _react.css)({
-  display: 'flex',
-  flexWrap: 'wrap',
-  position: 'relative',
-  alignItems: 'center',
-  borderRadius: '15px',
-  marginTop: "var(--ds-space-negative-050, -4px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '> :first-of-type > :first-of-type': {
-    marginLeft: 0
-  }
 });

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

@@ -116,7 +116,8 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
     _props$showRoundTrigg = props.showRoundTrigger,
-    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg;
+    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
+    selectionStyle = props.selectionStyle;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -127,7 +128,9 @@ 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, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles],
+    xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    selectionStyle],
     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 = "26.3.1";
+const packageVersion = "26.4.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, useLayoutEffect, useRef, useState, useEffect } from 'react';
 // 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';
@@ -79,7 +79,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showOpaqueBackground = false,
     subtleReactionsSummaryAndPicker = false,
     showAddReactionText = false,
-    showRoundTrigger = false
+    showRoundTrigger = false,
+    reactionPickerAdditionalStyle = undefined
   } = props;
   const [triggerRef, setTriggerRef] = useState(null);
 
@@ -87,6 +88,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
    * Container <div /> reference (used by custom hook to detect click outside)
    */
   const wrapperRef = useRef(null);
+  const [selectionStyle, setSelectionStyle] = useState(undefined);
   const updatePopper = useRef();
   const [settings, setSettings] = useState({
     /**
@@ -175,6 +177,15 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     // ufo reactions picker opened success
     PickerRender.success();
   };
+  useEffect(() => {
+    if (settings.isOpen) {
+      setSelectionStyle(reactionPickerAdditionalStyle);
+    }
+    return () => {
+      setSelectionStyle(undefined);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [settings.isOpen]);
   const wrapperClassName = ` ${settings.isOpen ? 'isOpen' : ''} ${miniMode ? 'miniMode' : ''} ${className}`;
   useLayoutEffect(() => {
     var _updatePopper$current;
@@ -207,6 +218,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
         setTriggerRef(node);
       }
     },
+    selectionStyle: selectionStyle,
     onClick: onTriggerClick,
     miniMode: miniMode,
     disabled: disabled,

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

@@ -4,7 +4,7 @@
  */
 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';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
@@ -19,7 +19,25 @@ import { Reaction } from '../Reaction';
 import { ReactionsDialog } from '../ReactionDialog';
 import { ReactionPicker } from '../ReactionPicker';
 import { ReactionSummaryView } from '../ReactionSummary/';
-import { reactionPickerStyle, wrapperStyle } from './styles';
+import { reactionPickerStyle } from './styles';
+const wrapperStyle = css({
+  display: 'flex',
+  flexWrap: 'wrap',
+  position: 'relative',
+  alignItems: 'center',
+  borderRadius: '15px',
+  marginTop: "var(--ds-space-negative-050, -4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '> :first-of-type > :first-of-type': {
+    marginLeft: 0
+  }
+});
+const noFlexWrapStyles = css({
+  flexWrap: 'nowrap'
+});
+const noContainerPositionStyles = css({
+  position: 'initial'
+});
 
 /**
  * Set of all available UFO experiences relating to Reactions Dialog
@@ -100,7 +118,10 @@ export const Reactions = /*#__PURE__*/React.memo(({
   ProfileCardWrapper,
   onlyRenderPicker = false,
   showRoundTrigger = false,
-  isViewOnly = false
+  isViewOnly = false,
+  reactionPickerAdditionalStyle,
+  noWrap = false,
+  noRelativeContainer = false
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -241,7 +262,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
   return jsx(UFOSegment, {
     name: "reactions"
   }, jsx("div", {
-    css: wrapperStyle,
+    css: [wrapperStyle, noWrap && noFlexWrapStyles, noRelativeContainer && noContainerPositionStyles],
     "data-testid": RENDER_REACTIONS_TESTID
   }, !onlyRenderPicker && (shouldShowSummaryView ? jsx("div", {
     "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
@@ -292,7 +313,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-    showRoundTrigger: showRoundTrigger
+    showRoundTrigger: showRoundTrigger,
+    reactionPickerAdditionalStyle: reactionPickerAdditionalStyle
   }), jsx(ModalTransition, null, !!selectedEmojiId && jsx(UFOSegment, {
     name: "reactions-dialog"
   }, jsx(ReactionsDialog, {

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

@@ -8,18 +8,4 @@ import { css } from '@emotion/react';
 export const reactionPickerStyle = css({
   display: 'inline-block',
   marginTop: "var(--ds-space-050, 4px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const wrapperStyle = css({
-  display: 'flex',
-  flexWrap: 'wrap',
-  position: 'relative',
-  alignItems: 'center',
-  borderRadius: '15px',
-  marginTop: "var(--ds-space-negative-050, -4px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '> :first-of-type > :first-of-type': {
-    marginLeft: 0
-  }
 });

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

@@ -104,7 +104,8 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     showOpaqueBackground = false,
     showAddReactionText = false,
     subtleReactionsSummaryAndPicker = false,
-    showRoundTrigger = false
+    showRoundTrigger = false,
+    selectionStyle
   } = props;
   const handleMouseDown = (e, analyticsEvent) => {
     if (onClick && !disabled) {
@@ -116,7 +117,9 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     content: 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],
+    xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    selectionStyle],
     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 = "26.3.1";
+var packageVersion = "26.4.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -6,7 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, useLayoutEffect, useRef, useState, useEffect } from 'react';
 // 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';
@@ -90,7 +90,9 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     _props$showAddReactio = props.showAddReactionText,
     showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
     _props$showRoundTrigg = props.showRoundTrigger,
-    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg;
+    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
+    _props$reactionPicker = props.reactionPickerAdditionalStyle,
+    reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -100,8 +102,12 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
    * Container <div /> reference (used by custom hook to detect click outside)
    */
   var wrapperRef = useRef(null);
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectionStyle = _useState4[0],
+    setSelectionStyle = _useState4[1];
   var updatePopper = useRef();
-  var _useState3 = useState({
+  var _useState5 = useState({
       /**
        * Show the picker floating panel
        */
@@ -115,9 +121,9 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
        */
       useLeftPopperPlacement: showRoundTrigger
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    settings = _useState4[0],
-    setSettings = _useState4[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    settings = _useState6[0],
+    setSettings = _useState6[1];
 
   /**
    * Custom hook triggers when user clicks outside the reactions picker
@@ -192,6 +198,15 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     // ufo reactions picker opened success
     PickerRender.success();
   };
+  useEffect(function () {
+    if (settings.isOpen) {
+      setSelectionStyle(reactionPickerAdditionalStyle);
+    }
+    return function () {
+      setSelectionStyle(undefined);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [settings.isOpen]);
   var wrapperClassName = " ".concat(settings.isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
   useLayoutEffect(function () {
     var _updatePopper$current;
@@ -224,6 +239,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
             setTriggerRef(node);
           }
         },
+        selectionStyle: selectionStyle,
         onClick: onTriggerClick,
         miniMode: miniMode,
         disabled: disabled,
@@ -255,10 +271,10 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
 export var PopperWrapper = function PopperWrapper(props) {
   var settings = props.settings,
     children = props.children;
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    popupRef = _useState6[0],
-    setPopupRef = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    popupRef = _useState8[0],
+    setPopupRef = _useState8[1];
   /**
    * add focus lock to popup
    */

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

@@ -6,7 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 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';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
@@ -21,7 +21,25 @@ import { Reaction } from '../Reaction';
 import { ReactionsDialog } from '../ReactionDialog';
 import { ReactionPicker } from '../ReactionPicker';
 import { ReactionSummaryView } from '../ReactionSummary/';
-import { reactionPickerStyle, wrapperStyle } from './styles';
+import { reactionPickerStyle } from './styles';
+var wrapperStyle = css({
+  display: 'flex',
+  flexWrap: 'wrap',
+  position: 'relative',
+  alignItems: 'center',
+  borderRadius: '15px',
+  marginTop: "var(--ds-space-negative-050, -4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '> :first-of-type > :first-of-type': {
+    marginLeft: 0
+  }
+});
+var noFlexWrapStyles = css({
+  flexWrap: 'nowrap'
+});
+var noContainerPositionStyles = css({
+  position: 'initial'
+});
 
 /**
  * Set of all available UFO experiences relating to Reactions Dialog
@@ -121,7 +139,12 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     _ref$showRoundTrigger = _ref.showRoundTrigger,
     showRoundTrigger = _ref$showRoundTrigger === void 0 ? false : _ref$showRoundTrigger,
     _ref$isViewOnly = _ref.isViewOnly,
-    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly;
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
+    reactionPickerAdditionalStyle = _ref.reactionPickerAdditionalStyle,
+    _ref$noWrap = _ref.noWrap,
+    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
+    _ref$noRelativeContai = _ref.noRelativeContainer,
+    noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -273,7 +296,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
   return jsx(UFOSegment, {
     name: "reactions"
   }, jsx("div", {
-    css: wrapperStyle,
+    css: [wrapperStyle, noWrap && noFlexWrapStyles, noRelativeContainer && noContainerPositionStyles],
     "data-testid": RENDER_REACTIONS_TESTID
   }, !onlyRenderPicker && (shouldShowSummaryView ? jsx("div", {
     "data-testid": RENDER_REACTIONS_SUMMARY_TESTID
@@ -328,7 +351,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-    showRoundTrigger: showRoundTrigger
+    showRoundTrigger: showRoundTrigger,
+    reactionPickerAdditionalStyle: reactionPickerAdditionalStyle
   }), jsx(ModalTransition, null, !!selectedEmojiId && jsx(UFOSegment, {
     name: "reactions-dialog"
   }, jsx(ReactionsDialog, {

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

@@ -8,18 +8,4 @@ import { css } from '@emotion/react';
 export var reactionPickerStyle = css({
   display: 'inline-block',
   marginTop: "var(--ds-space-050, 4px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var wrapperStyle = css({
-  display: 'flex',
-  flexWrap: 'wrap',
-  position: 'relative',
-  alignItems: 'center',
-  borderRadius: '15px',
-  marginTop: "var(--ds-space-negative-050, -4px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '> :first-of-type > :first-of-type': {
-    marginLeft: 0
-  }
 });

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

@@ -108,7 +108,8 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
     _props$showRoundTrigg = props.showRoundTrigger,
-    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg;
+    showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
+    selectionStyle = props.selectionStyle;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -119,7 +120,9 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     content: 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],
+    xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles,
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    selectionStyle],
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref

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

@@ -5,6 +5,7 @@
 import React, { type PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 import { type PickerSize } from '@atlaskit/emoji/types';
+import { type XCSS } from '@atlaskit/primitives';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
 import { type ReactionSource } from '../../types';
 import { type SelectorProps } from '../Selector';
@@ -72,6 +73,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for controlling if the picker hover border will be rounded
      */
     showRoundTrigger?: boolean;
+    /**
+     * Option prop for controlling the reaction picker selection style
+     */
+    reactionPickerAdditionalStyle?: XCSS;
 }
 /**
  * Picker component for adding reactions

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

@@ -6,6 +6,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
 import { type Placement } from '@atlaskit/popper';
+import { type XCSS } from '@atlaskit/primitives';
 import { ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary, type ProfileCardWrapper } from '../../types';
 import { type ReactionPickerProps } from '../ReactionPicker';
 import { type SelectorProps } from '../Selector';
@@ -141,6 +142,15 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for controlling if the reactions component is view only, disabling adding reactions
      */
     isViewOnly?: boolean;
+    /**
+     * Option prop for controlling the reaction picker selection style
+     */
+    reactionPickerAdditionalStyle?: XCSS;
+    noWrap?: boolean;
+    /**
+     * Optional prop for using your own container for relative positioning for emoji picker popup
+     */
+    noRelativeContainer?: boolean;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -153,4 +163,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, }: 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, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -1,2 +1 @@
 export declare const reactionPickerStyle: import("@emotion/react").SerializedStyles;
-export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

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

@@ -4,6 +4,7 @@
  */
 import React, { type AriaAttributes } from 'react';
 import { type AnalyticsEvent } from '@atlaskit/analytics-next';
+import { type XCSS } from '@atlaskit/primitives';
 /**
  * Test id for the tooltip
  */
@@ -48,6 +49,10 @@ export interface TriggerProps {
      * Optional prop for controlling if the picker hover border will be rounded
      */
     showRoundTrigger?: boolean;
+    /**
+     * Option prop for controlling the reaction picker selection style
+     */
+    selectionStyle?: XCSS;
 }
 /**
  * Render an emoji button to open the reactions select picker

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

@@ -5,6 +5,7 @@
 import React, { type PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 import { type PickerSize } from '@atlaskit/emoji/types';
+import { type XCSS } from '@atlaskit/primitives';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
 import { type ReactionSource } from '../../types';
 import { type SelectorProps } from '../Selector';
@@ -72,6 +73,10 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for controlling if the picker hover border will be rounded
      */
     showRoundTrigger?: boolean;
+    /**
+     * Option prop for controlling the reaction picker selection style
+     */
+    reactionPickerAdditionalStyle?: XCSS;
 }
 /**
  * Picker component for adding reactions

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

@@ -6,6 +6,7 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { type OnCloseHandler } from '@atlaskit/modal-dialog';
 import { type Placement } from '@atlaskit/popper';
+import { type XCSS } from '@atlaskit/primitives';
 import { ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary, type ProfileCardWrapper } from '../../types';
 import { type ReactionPickerProps } from '../ReactionPicker';
 import { type SelectorProps } from '../Selector';
@@ -141,6 +142,15 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for controlling if the reactions component is view only, disabling adding reactions
      */
     isViewOnly?: boolean;
+    /**
+     * Option prop for controlling the reaction picker selection style
+     */
+    reactionPickerAdditionalStyle?: XCSS;
+    noWrap?: boolean;
+    /**
+     * Optional prop for using your own container for relative positioning for emoji picker popup
+     */
+    noRelativeContainer?: boolean;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -153,4 +163,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, }: 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, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -1,2 +1 @@
 export declare const reactionPickerStyle: import("@emotion/react").SerializedStyles;
-export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

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

@@ -4,6 +4,7 @@
  */
 import React, { type AriaAttributes } from 'react';
 import { type AnalyticsEvent } from '@atlaskit/analytics-next';
+import { type XCSS } from '@atlaskit/primitives';
 /**
  * Test id for the tooltip
  */
@@ -48,6 +49,10 @@ export interface TriggerProps {
      * Optional prop for controlling if the picker hover border will be rounded
      */
     showRoundTrigger?: boolean;
+    /**
+     * Option prop for controlling the reaction picker selection style
+     */
+    selectionStyle?: XCSS;
 }
 /**
  * Render an emoji button to open the reactions select picker

package/package.json

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