@atlaskit/reactions 26.3.2 → 26.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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

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
  */
@@ -135,7 +154,11 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     showRoundTrigger = _ref$showRoundTrigger === void 0 ? false : _ref$showRoundTrigger,
     _ref$isViewOnly = _ref.isViewOnly,
     isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
-    reactionPickerAdditionalStyle = _ref.reactionPickerAdditionalStyle;
+    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],
@@ -287,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

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

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
@@ -101,7 +119,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
   onlyRenderPicker = false,
   showRoundTrigger = false,
   isViewOnly = false,
-  reactionPickerAdditionalStyle
+  reactionPickerAdditionalStyle,
+  noWrap = false,
+  noRelativeContainer = false
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -242,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

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

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
@@ -122,7 +140,11 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     showRoundTrigger = _ref$showRoundTrigger === void 0 ? false : _ref$showRoundTrigger,
     _ref$isViewOnly = _ref.isViewOnly,
     isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
-    reactionPickerAdditionalStyle = _ref.reactionPickerAdditionalStyle;
+    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],
@@ -274,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

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/types/components/Reactions/Reactions.d.ts

@@ -146,6 +146,11 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * 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;
@@ -158,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, reactionPickerAdditionalStyle, }: 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-ts4.5/components/Reactions/Reactions.d.ts

@@ -146,6 +146,11 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * 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;
@@ -158,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, reactionPickerAdditionalStyle, }: 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/package.json

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