@atlaskit/reactions 26.1.0 → 26.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/reactions
 
+## 26.2.0
+
+### Minor Changes
+
+- [#118541](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/118541)
+  [`40add733890e6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/40add733890e6) -
+  [ux] Uses showRoundTrigger to determine if Popper will be placed with 'left' positioning
+
+## 26.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 26.1.0
 
 ### Minor 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.1.0";
+var packageVersion = "26.2.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReactionPicker = exports.RENDER_REACTIONPICKER_TESTID = exports.RENDER_REACTIONPICKERPANEL_TESTID = void 0;
+exports.ReactionPicker = exports.RENDER_REACTIONPICKER_TESTID = exports.RENDER_REACTIONPICKERPANEL_TESTID = exports.PopperWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -116,7 +116,11 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
       /**
        * Show the full custom emoji list picker or the default list of emojis
        */
-      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
+      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
+      /**
+       * Use left placement for popper - using value based on showRoundTrigger for now since it needs the left placement
+       */
+      useLeftPopperPlacement: showRoundTrigger
     }),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     settings = _useState4[0],
@@ -161,10 +165,11 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     e.preventDefault();
     setSettings({
       isOpen: true,
-      showFullPicker: true
+      showFullPicker: true,
+      useLeftPopperPlacement: showRoundTrigger
     });
     onShowMore();
-  }, [onShowMore]);
+  }, [onShowMore, showRoundTrigger]);
 
   /**
    * Event callback when an emoji icon is selected
@@ -187,7 +192,8 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     _ufo.PickerRender.start();
     setSettings({
       isOpen: !settings.isOpen,
-      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
+      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
+      useLeftPopperPlacement: showRoundTrigger
     });
     onOpen();
     // ufo reactions picker opened success
@@ -253,7 +259,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
   })))));
 });
-var PopperWrapper = function PopperWrapper(props) {
+var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
   var settings = props.settings,
     children = props.children;
   var _useState5 = (0, _react.useState)(null),
@@ -268,7 +274,7 @@ var PopperWrapper = function PopperWrapper(props) {
     targetRef: popupRef
   });
   return (0, _react2.jsx)(_popper.Popper, {
-    placement: "bottom-start",
+    placement: settings.useLeftPopperPlacement ? "left" : "bottom-start",
     modifiers: popperModifiers,
     strategy: 'absolute'
   }, function (_ref3) {

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

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

@@ -96,7 +96,11 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     /**
      * Show the full custom emoji list picker or the default list of emojis
      */
-    showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
+    showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
+    /**
+     * Use left placement for popper - using value based on showRoundTrigger for now since it needs the left placement
+     */
+    useLeftPopperPlacement: showRoundTrigger
   });
 
   /**
@@ -137,10 +141,11 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     e.preventDefault();
     setSettings({
       isOpen: true,
-      showFullPicker: true
+      showFullPicker: true,
+      useLeftPopperPlacement: showRoundTrigger
     });
     onShowMore();
-  }, [onShowMore]);
+  }, [onShowMore, showRoundTrigger]);
 
   /**
    * Event callback when an emoji icon is selected
@@ -163,7 +168,8 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     PickerRender.start();
     setSettings({
       isOpen: !settings.isOpen,
-      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
+      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
+      useLeftPopperPlacement: showRoundTrigger
     });
     onOpen();
     // ufo reactions picker opened success
@@ -227,7 +233,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
   })))));
 });
-const PopperWrapper = props => {
+export const PopperWrapper = props => {
   const {
     settings,
     children
@@ -241,7 +247,7 @@ const PopperWrapper = props => {
     targetRef: popupRef
   });
   return jsx(Popper, {
-    placement: "bottom-start",
+    placement: settings.useLeftPopperPlacement ? "left" : "bottom-start",
     modifiers: popperModifiers,
     strategy: 'absolute'
   }, ({

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

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

@@ -109,7 +109,11 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       /**
        * Show the full custom emoji list picker or the default list of emojis
        */
-      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
+      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
+      /**
+       * Use left placement for popper - using value based on showRoundTrigger for now since it needs the left placement
+       */
+      useLeftPopperPlacement: showRoundTrigger
     }),
     _useState4 = _slicedToArray(_useState3, 2),
     settings = _useState4[0],
@@ -154,10 +158,11 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     e.preventDefault();
     setSettings({
       isOpen: true,
-      showFullPicker: true
+      showFullPicker: true,
+      useLeftPopperPlacement: showRoundTrigger
     });
     onShowMore();
-  }, [onShowMore]);
+  }, [onShowMore, showRoundTrigger]);
 
   /**
    * Event callback when an emoji icon is selected
@@ -180,7 +185,8 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     PickerRender.start();
     setSettings({
       isOpen: !settings.isOpen,
-      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
+      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
+      useLeftPopperPlacement: showRoundTrigger
     });
     onOpen();
     // ufo reactions picker opened success
@@ -246,7 +252,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
   })))));
 });
-var PopperWrapper = function PopperWrapper(props) {
+export var PopperWrapper = function PopperWrapper(props) {
   var settings = props.settings,
     children = props.children;
   var _useState5 = useState(null),
@@ -261,7 +267,7 @@ var PopperWrapper = function PopperWrapper(props) {
     targetRef: popupRef
   });
   return jsx(Popper, {
-    placement: "bottom-start",
+    placement: settings.useLeftPopperPlacement ? "left" : "bottom-start",
     modifiers: popperModifiers,
     strategy: 'absolute'
   }, function (_ref3) {

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React from 'react';
+import React, { type PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 import { type PickerSize } from '@atlaskit/emoji/types';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
@@ -77,3 +77,11 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
  * Picker component for adding reactions
  */
 export declare const ReactionPicker: React.MemoExoticComponent<(props: ReactionPickerProps) => jsx.JSX.Element>;
+export interface PopperWrapperProps {
+    settings: {
+        isOpen: boolean;
+        showFullPicker: boolean;
+        useLeftPopperPlacement: boolean;
+    };
+}
+export declare const PopperWrapper: (props: PropsWithChildren<PopperWrapperProps>) => jsx.JSX.Element;

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

@@ -8,6 +8,7 @@ export type RepositionOnUpdateProps = {
     settings: {
         isOpen: boolean;
         showFullPicker: boolean;
+        useLeftPopperPlacement: boolean;
     };
 };
 export declare const RepositionOnUpdate: ({ children, update, settings, }: React.PropsWithChildren<RepositionOnUpdateProps>) => React.JSX.Element;

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React from 'react';
+import React, { type PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 import { type PickerSize } from '@atlaskit/emoji/types';
 import { type EmojiProvider } from '@atlaskit/emoji/resource';
@@ -77,3 +77,11 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
  * Picker component for adding reactions
  */
 export declare const ReactionPicker: React.MemoExoticComponent<(props: ReactionPickerProps) => jsx.JSX.Element>;
+export interface PopperWrapperProps {
+    settings: {
+        isOpen: boolean;
+        showFullPicker: boolean;
+        useLeftPopperPlacement: boolean;
+    };
+}
+export declare const PopperWrapper: (props: PropsWithChildren<PopperWrapperProps>) => jsx.JSX.Element;

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

@@ -8,6 +8,7 @@ export type RepositionOnUpdateProps = {
     settings: {
         isOpen: boolean;
         showFullPicker: boolean;
+        useLeftPopperPlacement: boolean;
     };
 };
 export declare const RepositionOnUpdate: ({ children, update, settings, }: React.PropsWithChildren<RepositionOnUpdateProps>) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "26.1.0",
+	"version": "26.2.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,12 +41,12 @@
 		"@atlaskit/heading": "^5.1.0",
 		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/modal-dialog": "^13.0.0",
-		"@atlaskit/motion": "^4.0.0",
+		"@atlaskit/motion": "^5.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/popup": "2.0.0",
 		"@atlaskit/primitives": "^14.1.0",
-		"@atlaskit/react-ufo": "^3.0.0",
+		"@atlaskit/react-ufo": "^3.1.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.0.0",
 		"@atlaskit/theme": "^17.0.0",