@atlaskit/reactions 22.2.6 → 22.2.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/reactions
 
+## 22.2.7
+
+### Patch Changes
+
+- [`419eaff2c03`](https://bitbucket.org/atlassian/atlassian-frontend/commits/419eaff2c03) - fix focus trap not deactivated issue in reaction picker
+- Updated dependencies
+
 ## 22.2.6
 
 ### Patch Changes

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

@@ -21,6 +21,7 @@ var _shared = require("../../shared");
 var _hooks = require("../../hooks");
 var styles = _interopRequireWildcard(require("./styles"));
 var _useFocusTrap = require("../../hooks/useFocusTrap");
+var _RepositionOnUpdate = require("./RepositionOnUpdate");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -92,16 +93,13 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    popupRef = _useState4[0],
-    setPopupRef = _useState4[1];
+
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
    */
   var wrapperRef = (0, _react.useRef)(null);
   var updatePopper = (0, _react.useRef)();
-  var _useState5 = (0, _react.useState)({
+  var _useState3 = (0, _react.useState)({
       /**
        * Show the picker floating panel
        */
@@ -111,9 +109,9 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
        */
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
     }),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    settings = _useState6[0],
-    setSettings = _useState6[1];
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    settings = _useState4[0],
+    setSettings = _useState4[1];
 
   /**
    * Custom hook triggers when user clicks outside the reactions picker
@@ -128,14 +126,6 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
     }
   }, true, settings.isOpen);
 
-  /**
-   * add focus lock to popup
-   */
-  (0, _useFocusTrap.useFocusTrap)({
-    initialFocusRef: null,
-    targetRef: popupRef
-  });
-
   /**
    * Event callback when the picker is closed
    * @param _id Optional id if an emoji button was selected or undefineed if was clicked outside the picker
@@ -229,14 +219,44 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
         tooltipContent: settings.isOpen ? null : tooltipContent
       })
     );
-  }), settings.isOpen && (0, _react2.jsx)(_popper.Popper, {
+  }), settings.isOpen && (0, _react2.jsx)(PopperWrapper, {
+    settings: settings
+  }, settings.showFullPicker ? (0, _react2.jsx)(_picker.EmojiPicker, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    size: emojiPickerSize
+  }) : (0, _react2.jsx)("div", {
+    css: styles.contentStyle
+  }, (0, _react2.jsx)(_Selector.Selector, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    showMore: allowAllEmojis,
+    onMoreClick: onSelectMoreClick,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
+  })))));
+});
+exports.ReactionPicker = ReactionPicker;
+var 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];
+  /**
+   * add focus lock to popup
+   */
+  (0, _useFocusTrap.useFocusTrap)({
+    initialFocusRef: null,
+    targetRef: popupRef
+  });
+  return (0, _react2.jsx)(_popper.Popper, {
     placement: "bottom-start",
     modifiers: popperModifiers
   }, function (_ref3) {
     var _ref4 = _ref3.ref,
       style = _ref3.style,
       update = _ref3.update;
-    updatePopper.current = update;
     return (0, _react2.jsx)("div", {
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
@@ -255,21 +275,11 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
       },
       css: styles.popupWrapperStyle,
       tabIndex: 0
+    }, (0, _react2.jsx)(_RepositionOnUpdate.RepositionOnUpdate, {
+      update: update,
+      settings: settings
     }, (0, _react2.jsx)("div", {
       css: styles.popupStyle
-    }, settings.showFullPicker ? (0, _react2.jsx)(_picker.EmojiPicker, {
-      emojiProvider: emojiProvider,
-      onSelection: onEmojiSelected,
-      size: emojiPickerSize
-    }) : (0, _react2.jsx)("div", {
-      css: styles.contentStyle
-    }, (0, _react2.jsx)(_Selector.Selector, {
-      emojiProvider: emojiProvider,
-      onSelection: onEmojiSelected,
-      showMore: allowAllEmojis,
-      onMoreClick: onSelectMoreClick,
-      pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
-    }))));
-  })));
-});
-exports.ReactionPicker = ReactionPicker;
+    }, children)));
+  });
+};

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RepositionOnUpdate = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * Copied from ADS popup component with some tweeks for our use
+ */
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var RepositionOnUpdate = function RepositionOnUpdate(_ref) {
+  var children = _ref.children,
+    update = _ref.update,
+    settings = _ref.settings;
+  // Ref used here to skip update on first render (when refs haven't been set)
+  var isFirstRenderRef = (0, _react.useRef)(true);
+  (0, _react.useLayoutEffect)(function () {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+    // callback function from popper that repositions pop-up on content Update
+    update();
+  }, [update, settings]);
+
+  // wrapping in fragment to make TS happy (known issue with FC returning children)
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children);
+};
+exports.RepositionOnUpdate = RepositionOnUpdate;

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.2.6"
+	"version": "22.2.7"
 }

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

@@ -12,6 +12,7 @@ import { i18n } from '../../shared';
 import { useCloseManager } from '../../hooks';
 import * as styles from './styles';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { RepositionOnUpdate } from './RepositionOnUpdate';
 
 /**
  * Test id for wrapper ReactionPicker div
@@ -73,7 +74,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     emojiPickerSize
   } = props;
   const [triggerRef, setTriggerRef] = useState(null);
-  const [popupRef, setPopupRef] = useState(null);
+
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
    */
@@ -101,14 +102,6 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     }
   }, true, settings.isOpen);
 
-  /**
-   * add focus lock to popup
-   */
-  useFocusTrap({
-    initialFocusRef: null,
-    targetRef: popupRef
-  });
-
   /**
    * Event callback when the picker is closed
    * @param _id Optional id if an emoji button was selected or undefineed if was clicked outside the picker
@@ -201,7 +194,36 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     miniMode: miniMode,
     disabled: disabled,
     tooltipContent: settings.isOpen ? null : tooltipContent
-  })), settings.isOpen && jsx(Popper, {
+  })), settings.isOpen && jsx(PopperWrapper, {
+    settings: settings
+  }, settings.showFullPicker ? jsx(EmojiPicker, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    size: emojiPickerSize
+  }) : jsx("div", {
+    css: styles.contentStyle
+  }, jsx(Selector, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    showMore: allowAllEmojis,
+    onMoreClick: onSelectMoreClick,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
+  })))));
+});
+const PopperWrapper = props => {
+  const {
+    settings,
+    children
+  } = props;
+  const [popupRef, setPopupRef] = useState(null);
+  /**
+   * add focus lock to popup
+   */
+  useFocusTrap({
+    initialFocusRef: null,
+    targetRef: popupRef
+  });
+  return jsx(Popper, {
     placement: "bottom-start",
     modifiers: popperModifiers
   }, ({
@@ -209,7 +231,6 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     style,
     update
   }) => {
-    updatePopper.current = update;
     return jsx("div", {
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
@@ -229,20 +250,11 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
       },
       css: styles.popupWrapperStyle,
       tabIndex: 0
+    }, jsx(RepositionOnUpdate, {
+      update: update,
+      settings: settings
     }, jsx("div", {
       css: styles.popupStyle
-    }, settings.showFullPicker ? jsx(EmojiPicker, {
-      emojiProvider: emojiProvider,
-      onSelection: onEmojiSelected,
-      size: emojiPickerSize
-    }) : jsx("div", {
-      css: styles.contentStyle
-    }, jsx(Selector, {
-      emojiProvider: emojiProvider,
-      onSelection: onEmojiSelected,
-      showMore: allowAllEmojis,
-      onMoreClick: onSelectMoreClick,
-      pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
-    }))));
-  })));
-});
+    }, children)));
+  });
+};

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

@@ -0,0 +1,24 @@
+/**
+ * Copied from ADS popup component with some tweeks for our use
+ */
+import React, { Fragment, useLayoutEffect, useRef } from 'react';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const RepositionOnUpdate = ({
+  children,
+  update,
+  settings
+}) => {
+  // Ref used here to skip update on first render (when refs haven't been set)
+  const isFirstRenderRef = useRef(true);
+  useLayoutEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+    // callback function from popper that repositions pop-up on content Update
+    update();
+  }, [update, settings]);
+
+  // wrapping in fragment to make TS happy (known issue with FC returning children)
+  return /*#__PURE__*/React.createElement(Fragment, null, children);
+};

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.2.6"
+	"version": "22.2.7"
 }

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

@@ -16,6 +16,7 @@ import { i18n } from '../../shared';
 import { useCloseManager } from '../../hooks';
 import * as styles from './styles';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { RepositionOnUpdate } from './RepositionOnUpdate';
 
 /**
  * Test id for wrapper ReactionPicker div
@@ -82,16 +83,13 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    popupRef = _useState4[0],
-    setPopupRef = _useState4[1];
+
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
    */
   var wrapperRef = useRef(null);
   var updatePopper = useRef();
-  var _useState5 = useState({
+  var _useState3 = useState({
       /**
        * Show the picker floating panel
        */
@@ -101,9 +99,9 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
        */
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    settings = _useState6[0],
-    setSettings = _useState6[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    settings = _useState4[0],
+    setSettings = _useState4[1];
 
   /**
    * Custom hook triggers when user clicks outside the reactions picker
@@ -118,14 +116,6 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     }
   }, true, settings.isOpen);
 
-  /**
-   * add focus lock to popup
-   */
-  useFocusTrap({
-    initialFocusRef: null,
-    targetRef: popupRef
-  });
-
   /**
    * Event callback when the picker is closed
    * @param _id Optional id if an emoji button was selected or undefineed if was clicked outside the picker
@@ -219,14 +209,43 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         tooltipContent: settings.isOpen ? null : tooltipContent
       })
     );
-  }), settings.isOpen && jsx(Popper, {
+  }), settings.isOpen && jsx(PopperWrapper, {
+    settings: settings
+  }, settings.showFullPicker ? jsx(EmojiPicker, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    size: emojiPickerSize
+  }) : jsx("div", {
+    css: styles.contentStyle
+  }, jsx(Selector, {
+    emojiProvider: emojiProvider,
+    onSelection: onEmojiSelected,
+    showMore: allowAllEmojis,
+    onMoreClick: onSelectMoreClick,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
+  })))));
+});
+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];
+  /**
+   * add focus lock to popup
+   */
+  useFocusTrap({
+    initialFocusRef: null,
+    targetRef: popupRef
+  });
+  return jsx(Popper, {
     placement: "bottom-start",
     modifiers: popperModifiers
   }, function (_ref3) {
     var _ref4 = _ref3.ref,
       style = _ref3.style,
       update = _ref3.update;
-    updatePopper.current = update;
     return jsx("div", {
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
@@ -245,20 +264,11 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       },
       css: styles.popupWrapperStyle,
       tabIndex: 0
+    }, jsx(RepositionOnUpdate, {
+      update: update,
+      settings: settings
     }, jsx("div", {
       css: styles.popupStyle
-    }, settings.showFullPicker ? jsx(EmojiPicker, {
-      emojiProvider: emojiProvider,
-      onSelection: onEmojiSelected,
-      size: emojiPickerSize
-    }) : jsx("div", {
-      css: styles.contentStyle
-    }, jsx(Selector, {
-      emojiProvider: emojiProvider,
-      onSelection: onEmojiSelected,
-      showMore: allowAllEmojis,
-      onMoreClick: onSelectMoreClick,
-      pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
-    }))));
-  })));
-});
+    }, children)));
+  });
+};

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

@@ -0,0 +1,23 @@
+/**
+ * Copied from ADS popup component with some tweeks for our use
+ */
+import React, { Fragment, useLayoutEffect, useRef } from 'react';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var RepositionOnUpdate = function RepositionOnUpdate(_ref) {
+  var children = _ref.children,
+    update = _ref.update,
+    settings = _ref.settings;
+  // Ref used here to skip update on first render (when refs haven't been set)
+  var isFirstRenderRef = useRef(true);
+  useLayoutEffect(function () {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+    // callback function from popper that repositions pop-up on content Update
+    update();
+  }, [update, settings]);
+
+  // wrapping in fragment to make TS happy (known issue with FC returning children)
+  return /*#__PURE__*/React.createElement(Fragment, null, children);
+};

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.2.6"
+	"version": "22.2.7"
 }

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

@@ -0,0 +1,13 @@
+/**
+ * Copied from ADS popup component with some tweeks for our use
+ */
+import { FC } from 'react';
+import { PopperChildrenProps } from '@atlaskit/popper';
+export declare type RepositionOnUpdateProps = {
+    update: PopperChildrenProps['update'];
+    settings: {
+        isOpen: boolean;
+        showFullPicker: boolean;
+    };
+};
+export declare const RepositionOnUpdate: FC<RepositionOnUpdateProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "22.2.6",
+  "version": "22.2.7",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
     "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/avatar": "^21.2.0",
     "@atlaskit/button": "^16.6.0",
-    "@atlaskit/emoji": "^67.2.0",
+    "@atlaskit/emoji": "^67.3.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/motion": "^1.3.0",
@@ -54,7 +54,7 @@
   "devDependencies": {
     "@atlaskit/analytics-viewer": "^0.4.5",
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/editor-test-helpers": "^18.1.0",
+    "@atlaskit/editor-test-helpers": "^18.2.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/tooltip": "^17.7.0",