@atlaskit/reactions 27.1.4 → 27.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/reactions
 
+## 27.2.0
+
+### Minor Changes
+
+- [#127089](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127089)
+  [`ec78c2756240e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ec78c2756240e) -
+  Adding an optional placement and overflow control for reactions popper
+
+### Patch Changes
+
+- Updated dependencies
+
+## 27.1.5
+
+### Patch Changes
+
+- [#126792](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126792)
+  [`ac38e3b73e5ab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ac38e3b73e5ab) -
+  add interactionName to Spinner
+- Updated dependencies
+
 ## 27.1.4
 
 ### 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 = "27.1.4";
+var packageVersion = "27.2.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -53,7 +53,8 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
   }, alphabeticalNames.length === 0 ? (0, _react2.jsx)(_primitives.Box, {
     xcss: centerSpinnerStyle
   }, (0, _react2.jsx)(_spinner.default, {
-    size: "large"
+    size: "large",
+    interactionName: "reactions-spinner"
   })) :
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   (0, _react2.jsx)("ul", {

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

@@ -43,33 +43,6 @@ var RENDER_REACTIONPICKERPANEL_TESTID = exports.RENDER_REACTIONPICKERPANEL_TESTI
  * Emoji Picker Controller Id for Accessibility Labels
  */
 var PICKER_CONTROL_ID = 'emoji-picker';
-var popperModifiers = [
-/**
-  Removing this applyStyle modifier as it throws client errors ref:
- https://popper.js.org/docs/v1/#modifiers
- https://popper.js.org/docs/v1/#modifiers..applyStyle
- { name: 'applyStyle', enabled: false },
-  */
-{
-  name: 'hide',
-  enabled: false
-}, {
-  name: 'offset',
-  enabled: true,
-  options: {
-    offset: [0, 0]
-  }
-}, {
-  name: 'flip',
-  enabled: true,
-  options: {
-    flipVariations: true,
-    boundariesElement: 'scrollParent'
-  }
-}, {
-  name: 'preventOverflow',
-  enabled: true
-}];
 /**
  * Picker component for adding reactions
  */
@@ -101,7 +74,9 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     _props$reactionPicker = props.reactionPickerAdditionalStyle,
     reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker,
     reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
-    useButtonAlignmentStyling = props.useButtonAlignmentStyling;
+    useButtonAlignmentStyling = props.useButtonAlignmentStyling,
+    reactionPickerPlacement = props.reactionPickerPlacement,
+    reactionsPickerPreventOverflowOptions = props.reactionsPickerPreventOverflowOptions;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -116,6 +91,36 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     selectionStyle = _useState4[0],
     setSelectionStyle = _useState4[1];
   var updatePopper = (0, _react.useRef)();
+  var popperPlacement = showRoundTrigger ? 'left' : reactionPickerPlacement || 'bottom-start';
+  var popperModifiers = [
+  /**
+    Removing this applyStyle modifier as it throws client errors ref:
+   https://popper.js.org/docs/v1/#modifiers
+   https://popper.js.org/docs/v1/#modifiers..applyStyle
+   { name: 'applyStyle', enabled: false },
+    */
+  {
+    name: 'hide',
+    enabled: false
+  }, {
+    name: 'offset',
+    enabled: true,
+    options: {
+      offset: [0, 0]
+    }
+  }, {
+    name: 'flip',
+    enabled: true,
+    options: {
+      flipVariations: true,
+      boundariesElement: 'scrollParent'
+    }
+  }, _objectSpread({
+    name: 'preventOverflow',
+    enabled: true
+  }, reactionsPickerPreventOverflowOptions && {
+    options: reactionsPickerPreventOverflowOptions
+  })];
   var _useState5 = (0, _react.useState)({
       /**
        * Show the picker floating panel
@@ -128,7 +133,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
       /**
        * Use left placement for popper - using value based on showRoundTrigger for now since it needs the left placement
        */
-      useLeftPopperPlacement: showRoundTrigger
+      popperPlacement: popperPlacement
     }),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     settings = _useState6[0],
@@ -174,10 +179,10 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     setSettings({
       isOpen: true,
       showFullPicker: true,
-      useLeftPopperPlacement: showRoundTrigger
+      popperPlacement: popperPlacement
     });
     onShowMore();
-  }, [onShowMore, showRoundTrigger]);
+  }, [onShowMore, popperPlacement]);
 
   /**
    * Event callback when an emoji icon is selected
@@ -201,7 +206,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     setSettings({
       isOpen: !settings.isOpen,
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
-      useLeftPopperPlacement: showRoundTrigger
+      popperPlacement: popperPlacement
     });
     onOpen();
     // ufo reactions picker opened success
@@ -262,7 +267,8 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
       })
     );
   }), settings.isOpen && (0, _react2.jsx)(PopperWrapper, {
-    settings: settings
+    settings: settings,
+    popperModifiers: popperModifiers
   }, settings.showFullPicker ? (0, _react2.jsx)(_picker.EmojiPicker, {
     emojiProvider: emojiProvider,
     onSelection: onEmojiSelected,
@@ -281,7 +287,8 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
 });
 var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
   var settings = props.settings,
-    children = props.children;
+    children = props.children,
+    popperModifiers = props.popperModifiers;
   var _useState7 = (0, _react.useState)(null),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     popupRef = _useState8[0],
@@ -294,9 +301,9 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
     targetRef: popupRef
   });
   return (0, _react2.jsx)(_popper.Popper, {
-    placement: settings.useLeftPopperPlacement ? 'left' : 'bottom-start',
+    placement: settings.popperPlacement,
     modifiers: popperModifiers,
-    strategy: 'absolute'
+    strategy: "absolute"
   }, function (_ref3) {
     var _ref4 = _ref3.ref,
       style = _ref3.style,

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

@@ -152,6 +152,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker,
     _ref$showRoundTrigger = _ref.showRoundTrigger,
     showRoundTrigger = _ref$showRoundTrigger === void 0 ? false : _ref$showRoundTrigger,
+    reactionPickerPlacement = _ref.reactionPickerPlacement,
+    reactionsPickerPreventOverflowOptions = _ref.reactionsPickerPreventOverflowOptions,
     _ref$isViewOnly = _ref.isViewOnly,
     isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
     reactionPickerAdditionalStyle = _ref.reactionPickerAdditionalStyle,
@@ -384,7 +386,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     showRoundTrigger: showRoundTrigger,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerAdditionalStyle: reactionPickerAdditionalStyle,
-    useButtonAlignmentStyling: useButtonAlignmentStyling
+    useButtonAlignmentStyling: useButtonAlignmentStyling,
+    reactionPickerPlacement: reactionPickerPlacement,
+    reactionsPickerPreventOverflowOptions: reactionsPickerPreventOverflowOptions
   }), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_segment.default, {
     name: "reactions-dialog"
   }, (0, _react2.jsx)(_ReactionDialog.ReactionsDialog, {

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

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

@@ -43,7 +43,8 @@ export const ReactionView = ({
   }, alphabeticalNames.length === 0 ? jsx(Box, {
     xcss: centerSpinnerStyle
   }, jsx(Spinner, {
-    size: "large"
+    size: "large",
+    interactionName: "reactions-spinner"
   })) :
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   jsx("ul", {

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

@@ -32,33 +32,6 @@ export const RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
  * Emoji Picker Controller Id for Accessibility Labels
  */
 const PICKER_CONTROL_ID = 'emoji-picker';
-const popperModifiers = [
-/**
-  Removing this applyStyle modifier as it throws client errors ref:
- https://popper.js.org/docs/v1/#modifiers
- https://popper.js.org/docs/v1/#modifiers..applyStyle
- { name: 'applyStyle', enabled: false },
-  */
-{
-  name: 'hide',
-  enabled: false
-}, {
-  name: 'offset',
-  enabled: true,
-  options: {
-    offset: [0, 0]
-  }
-}, {
-  name: 'flip',
-  enabled: true,
-  options: {
-    flipVariations: true,
-    boundariesElement: 'scrollParent'
-  }
-}, {
-  name: 'preventOverflow',
-  enabled: true
-}];
 /**
  * Picker component for adding reactions
  */
@@ -82,7 +55,9 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showRoundTrigger = false,
     reactionPickerAdditionalStyle = undefined,
     reactionPickerTriggerIcon,
-    useButtonAlignmentStyling
+    useButtonAlignmentStyling,
+    reactionPickerPlacement,
+    reactionsPickerPreventOverflowOptions
   } = props;
   const [triggerRef, setTriggerRef] = useState(null);
 
@@ -92,6 +67,37 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
   const wrapperRef = useRef(null);
   const [selectionStyle, setSelectionStyle] = useState(undefined);
   const updatePopper = useRef();
+  const popperPlacement = showRoundTrigger ? 'left' : reactionPickerPlacement || 'bottom-start';
+  const popperModifiers = [
+  /**
+    Removing this applyStyle modifier as it throws client errors ref:
+   https://popper.js.org/docs/v1/#modifiers
+   https://popper.js.org/docs/v1/#modifiers..applyStyle
+   { name: 'applyStyle', enabled: false },
+    */
+  {
+    name: 'hide',
+    enabled: false
+  }, {
+    name: 'offset',
+    enabled: true,
+    options: {
+      offset: [0, 0]
+    }
+  }, {
+    name: 'flip',
+    enabled: true,
+    options: {
+      flipVariations: true,
+      boundariesElement: 'scrollParent'
+    }
+  }, {
+    name: 'preventOverflow',
+    enabled: true,
+    ...(reactionsPickerPreventOverflowOptions && {
+      options: reactionsPickerPreventOverflowOptions
+    })
+  }];
   const [settings, setSettings] = useState({
     /**
      * Show the picker floating panel
@@ -104,7 +110,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     /**
      * Use left placement for popper - using value based on showRoundTrigger for now since it needs the left placement
      */
-    useLeftPopperPlacement: showRoundTrigger
+    popperPlacement
   });
 
   /**
@@ -146,10 +152,10 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     setSettings({
       isOpen: true,
       showFullPicker: true,
-      useLeftPopperPlacement: showRoundTrigger
+      popperPlacement
     });
     onShowMore();
-  }, [onShowMore, showRoundTrigger]);
+  }, [onShowMore, popperPlacement]);
 
   /**
    * Event callback when an emoji icon is selected
@@ -173,7 +179,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     setSettings({
       isOpen: !settings.isOpen,
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
-      useLeftPopperPlacement: showRoundTrigger
+      popperPlacement
     });
     onOpen();
     // ufo reactions picker opened success
@@ -232,7 +238,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     useButtonAlignmentStyling: useButtonAlignmentStyling
   })), settings.isOpen && jsx(PopperWrapper, {
-    settings: settings
+    settings: settings,
+    popperModifiers: popperModifiers
   }, settings.showFullPicker ? jsx(EmojiPicker, {
     emojiProvider: emojiProvider,
     onSelection: onEmojiSelected,
@@ -252,7 +259,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
 export const PopperWrapper = props => {
   const {
     settings,
-    children
+    children,
+    popperModifiers
   } = props;
   const [popupRef, setPopupRef] = useState(null);
   /**
@@ -263,9 +271,9 @@ export const PopperWrapper = props => {
     targetRef: popupRef
   });
   return jsx(Popper, {
-    placement: settings.useLeftPopperPlacement ? 'left' : 'bottom-start',
+    placement: settings.popperPlacement,
     modifiers: popperModifiers,
-    strategy: 'absolute'
+    strategy: "absolute"
   }, ({
     ref,
     style,

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

@@ -118,6 +118,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   ProfileCardWrapper,
   onlyRenderPicker = false,
   showRoundTrigger = false,
+  reactionPickerPlacement,
+  reactionsPickerPreventOverflowOptions,
   isViewOnly = false,
   reactionPickerAdditionalStyle,
   noWrap = false,
@@ -330,7 +332,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
     showRoundTrigger: showRoundTrigger,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerAdditionalStyle: reactionPickerAdditionalStyle,
-    useButtonAlignmentStyling: useButtonAlignmentStyling
+    useButtonAlignmentStyling: useButtonAlignmentStyling,
+    reactionPickerPlacement: reactionPickerPlacement,
+    reactionsPickerPreventOverflowOptions: reactionsPickerPreventOverflowOptions
   }), jsx(ModalTransition, null, !!selectedEmojiId && jsx(UFOSegment, {
     name: "reactions-dialog"
   }, jsx(ReactionsDialog, {

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

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

@@ -44,7 +44,8 @@ export var ReactionView = function ReactionView(_ref) {
   }, alphabeticalNames.length === 0 ? jsx(Box, {
     xcss: centerSpinnerStyle
   }, jsx(Spinner, {
-    size: "large"
+    size: "large",
+    interactionName: "reactions-spinner"
   })) :
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   jsx("ul", {

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

@@ -36,33 +36,6 @@ export var RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
  * Emoji Picker Controller Id for Accessibility Labels
  */
 var PICKER_CONTROL_ID = 'emoji-picker';
-var popperModifiers = [
-/**
-  Removing this applyStyle modifier as it throws client errors ref:
- https://popper.js.org/docs/v1/#modifiers
- https://popper.js.org/docs/v1/#modifiers..applyStyle
- { name: 'applyStyle', enabled: false },
-  */
-{
-  name: 'hide',
-  enabled: false
-}, {
-  name: 'offset',
-  enabled: true,
-  options: {
-    offset: [0, 0]
-  }
-}, {
-  name: 'flip',
-  enabled: true,
-  options: {
-    flipVariations: true,
-    boundariesElement: 'scrollParent'
-  }
-}, {
-  name: 'preventOverflow',
-  enabled: true
-}];
 /**
  * Picker component for adding reactions
  */
@@ -94,7 +67,9 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     _props$reactionPicker = props.reactionPickerAdditionalStyle,
     reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker,
     reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
-    useButtonAlignmentStyling = props.useButtonAlignmentStyling;
+    useButtonAlignmentStyling = props.useButtonAlignmentStyling,
+    reactionPickerPlacement = props.reactionPickerPlacement,
+    reactionsPickerPreventOverflowOptions = props.reactionsPickerPreventOverflowOptions;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -109,6 +84,36 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     selectionStyle = _useState4[0],
     setSelectionStyle = _useState4[1];
   var updatePopper = useRef();
+  var popperPlacement = showRoundTrigger ? 'left' : reactionPickerPlacement || 'bottom-start';
+  var popperModifiers = [
+  /**
+    Removing this applyStyle modifier as it throws client errors ref:
+   https://popper.js.org/docs/v1/#modifiers
+   https://popper.js.org/docs/v1/#modifiers..applyStyle
+   { name: 'applyStyle', enabled: false },
+    */
+  {
+    name: 'hide',
+    enabled: false
+  }, {
+    name: 'offset',
+    enabled: true,
+    options: {
+      offset: [0, 0]
+    }
+  }, {
+    name: 'flip',
+    enabled: true,
+    options: {
+      flipVariations: true,
+      boundariesElement: 'scrollParent'
+    }
+  }, _objectSpread({
+    name: 'preventOverflow',
+    enabled: true
+  }, reactionsPickerPreventOverflowOptions && {
+    options: reactionsPickerPreventOverflowOptions
+  })];
   var _useState5 = useState({
       /**
        * Show the picker floating panel
@@ -121,7 +126,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       /**
        * Use left placement for popper - using value based on showRoundTrigger for now since it needs the left placement
        */
-      useLeftPopperPlacement: showRoundTrigger
+      popperPlacement: popperPlacement
     }),
     _useState6 = _slicedToArray(_useState5, 2),
     settings = _useState6[0],
@@ -167,10 +172,10 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     setSettings({
       isOpen: true,
       showFullPicker: true,
-      useLeftPopperPlacement: showRoundTrigger
+      popperPlacement: popperPlacement
     });
     onShowMore();
-  }, [onShowMore, showRoundTrigger]);
+  }, [onShowMore, popperPlacement]);
 
   /**
    * Event callback when an emoji icon is selected
@@ -194,7 +199,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     setSettings({
       isOpen: !settings.isOpen,
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
-      useLeftPopperPlacement: showRoundTrigger
+      popperPlacement: popperPlacement
     });
     onOpen();
     // ufo reactions picker opened success
@@ -255,7 +260,8 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       })
     );
   }), settings.isOpen && jsx(PopperWrapper, {
-    settings: settings
+    settings: settings,
+    popperModifiers: popperModifiers
   }, settings.showFullPicker ? jsx(EmojiPicker, {
     emojiProvider: emojiProvider,
     onSelection: onEmojiSelected,
@@ -274,7 +280,8 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
 });
 export var PopperWrapper = function PopperWrapper(props) {
   var settings = props.settings,
-    children = props.children;
+    children = props.children,
+    popperModifiers = props.popperModifiers;
   var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
     popupRef = _useState8[0],
@@ -287,9 +294,9 @@ export var PopperWrapper = function PopperWrapper(props) {
     targetRef: popupRef
   });
   return jsx(Popper, {
-    placement: settings.useLeftPopperPlacement ? 'left' : 'bottom-start',
+    placement: settings.popperPlacement,
     modifiers: popperModifiers,
-    strategy: 'absolute'
+    strategy: "absolute"
   }, function (_ref3) {
     var _ref4 = _ref3.ref,
       style = _ref3.style,

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

@@ -138,6 +138,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     onlyRenderPicker = _ref$onlyRenderPicker === void 0 ? false : _ref$onlyRenderPicker,
     _ref$showRoundTrigger = _ref.showRoundTrigger,
     showRoundTrigger = _ref$showRoundTrigger === void 0 ? false : _ref$showRoundTrigger,
+    reactionPickerPlacement = _ref.reactionPickerPlacement,
+    reactionsPickerPreventOverflowOptions = _ref.reactionsPickerPreventOverflowOptions,
     _ref$isViewOnly = _ref.isViewOnly,
     isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
     reactionPickerAdditionalStyle = _ref.reactionPickerAdditionalStyle,
@@ -370,7 +372,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     showRoundTrigger: showRoundTrigger,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerAdditionalStyle: reactionPickerAdditionalStyle,
-    useButtonAlignmentStyling: useButtonAlignmentStyling
+    useButtonAlignmentStyling: useButtonAlignmentStyling,
+    reactionPickerPlacement: reactionPickerPlacement,
+    reactionsPickerPreventOverflowOptions: reactionsPickerPreventOverflowOptions
   }), jsx(ModalTransition, null, !!selectedEmojiId && jsx(UFOSegment, {
     name: "reactions-dialog"
   }, jsx(ReactionsDialog, {

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

@@ -7,6 +7,7 @@ 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 PopperProps, type Placement } from '@atlaskit/popper';
 import { type ReactionSource } from '../../types';
 import { type SelectorProps } from '../Selector';
 import { type TriggerProps } from '../Trigger';
@@ -73,6 +74,14 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for controlling if the picker hover border will be rounded
      */
     showRoundTrigger?: boolean;
+    /**
+     * Optional prop for controlling the picker location, gets overrided by showRoundTrigger
+     */
+    reactionPickerPlacement?: Placement;
+    /**
+     * Optional prop for controlling the overflow of the reaction picker
+     */
+    reactionsPickerPreventOverflowOptions?: Record<string, any>;
     /**
      * Option prop for controlling the reaction picker selection style
      */
@@ -91,7 +100,8 @@ export interface PopperWrapperProps {
     settings: {
         isOpen: boolean;
         showFullPicker: boolean;
-        useLeftPopperPlacement: boolean;
+        popperPlacement: Placement;
     };
+    popperModifiers?: PopperProps<{}>['modifiers'];
 }
 export declare const PopperWrapper: (props: PropsWithChildren<PopperWrapperProps>) => jsx.JSX.Element;

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

@@ -2,13 +2,13 @@
  * Copied from ADS popup component with some tweeks for our use
  */
 import React from 'react';
-import { type PopperChildrenProps } from '@atlaskit/popper';
+import { type PopperChildrenProps, type Placement } from '@atlaskit/popper';
 export type RepositionOnUpdateProps = {
     update: PopperChildrenProps['update'];
     settings: {
         isOpen: boolean;
         showFullPicker: boolean;
-        useLeftPopperPlacement: boolean;
+        popperPlacement: Placement;
     };
 };
 export declare const RepositionOnUpdate: ({ children, update, settings, }: React.PropsWithChildren<RepositionOnUpdateProps>) => React.JSX.Element;

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

@@ -142,6 +142,14 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for controlling if the picker hover border will be rounded
      */
     showRoundTrigger?: boolean;
+    /**
+     * Optional prop for controlling the placement of the reaction picker, is overriden by showRoundTrigger
+     */
+    reactionPickerPlacement?: Placement;
+    /**
+     * Optional prop for controlling the overflow of the reaction picker
+     */
+    reactionsPickerPreventOverflowOptions?: Record<string, any>;
     /**
      * Optional prop for controlling if the reactions component is view only, disabling adding reactions
      */
@@ -179,4 +187,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerToolipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, }: 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, reactionPickerPlacement, reactionsPickerPreventOverflowOptions, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerToolipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -7,6 +7,7 @@ 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 PopperProps, type Placement } from '@atlaskit/popper';
 import { type ReactionSource } from '../../types';
 import { type SelectorProps } from '../Selector';
 import { type TriggerProps } from '../Trigger';
@@ -73,6 +74,14 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for controlling if the picker hover border will be rounded
      */
     showRoundTrigger?: boolean;
+    /**
+     * Optional prop for controlling the picker location, gets overrided by showRoundTrigger
+     */
+    reactionPickerPlacement?: Placement;
+    /**
+     * Optional prop for controlling the overflow of the reaction picker
+     */
+    reactionsPickerPreventOverflowOptions?: Record<string, any>;
     /**
      * Option prop for controlling the reaction picker selection style
      */
@@ -91,7 +100,8 @@ export interface PopperWrapperProps {
     settings: {
         isOpen: boolean;
         showFullPicker: boolean;
-        useLeftPopperPlacement: boolean;
+        popperPlacement: Placement;
     };
+    popperModifiers?: PopperProps<{}>['modifiers'];
 }
 export declare const PopperWrapper: (props: PropsWithChildren<PopperWrapperProps>) => jsx.JSX.Element;

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

@@ -2,13 +2,13 @@
  * Copied from ADS popup component with some tweeks for our use
  */
 import React from 'react';
-import { type PopperChildrenProps } from '@atlaskit/popper';
+import { type PopperChildrenProps, type Placement } from '@atlaskit/popper';
 export type RepositionOnUpdateProps = {
     update: PopperChildrenProps['update'];
     settings: {
         isOpen: boolean;
         showFullPicker: boolean;
-        useLeftPopperPlacement: boolean;
+        popperPlacement: Placement;
     };
 };
 export declare const RepositionOnUpdate: ({ children, update, settings, }: React.PropsWithChildren<RepositionOnUpdateProps>) => React.JSX.Element;

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

@@ -142,6 +142,14 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for controlling if the picker hover border will be rounded
      */
     showRoundTrigger?: boolean;
+    /**
+     * Optional prop for controlling the placement of the reaction picker, is overriden by showRoundTrigger
+     */
+    reactionPickerPlacement?: Placement;
+    /**
+     * Optional prop for controlling the overflow of the reaction picker
+     */
+    reactionsPickerPreventOverflowOptions?: Record<string, any>;
     /**
      * Optional prop for controlling if the reactions component is view only, disabling adding reactions
      */
@@ -179,4 +187,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerToolipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, }: 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, reactionPickerPlacement, reactionsPickerPreventOverflowOptions, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerToolipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, }: ReactionsProps) => jsx.JSX.Element>;

package/package.json

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