@atlaskit/editor-plugin-mentions 4.3.2 → 4.3.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-mentions
 
+## 4.3.3
+
+### Patch Changes
+
+- [#138789](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/138789)
+  [`eeb167efe5e64`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eeb167efe5e64) -
+  Setup focus trap for profile card provider in vanilla mention version
+- Updated dependencies
+
 ## 4.3.2
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -26,7 +26,7 @@ var ACTIONS = exports.ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "4.3.2";
+var PACKAGE_VERSION = "4.3.3";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/cjs/ui/PopperWrapper.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Popup = Popup;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
+var _useFocusTrap = require("./useFocusTrap");
 /**
  * A popup wrapper to match the behaviour of `@atlaskit/popup`
  *
@@ -22,21 +24,35 @@ var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 function Popup(_ref) {
   var referenceElement = _ref.referenceElement,
     children = _ref.children;
+  var _React$useState = _react.default.useState(null),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    targetRef = _React$useState2[0],
+    setPopupRef = _React$useState2[1];
+  (0, _useFocusTrap.useFocusTrap)({
+    targetRef: targetRef
+  });
   return /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
     referenceElement: referenceElement,
     offset: [0, 8],
     placement: "bottom-end",
     strategy: "fixed"
   }, function (_ref2) {
-    var ref = _ref2.ref,
+    var _ref3 = _ref2.ref,
       style = _ref2.style;
-    return (
-      /*#__PURE__*/
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: function ref(node) {
+        if (node) {
+          if (typeof _ref3 === 'function') {
+            _ref3(node);
+          } else {
+            _ref3.current = node;
+          }
+          setPopupRef(node);
+        }
+      }
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      _react.default.createElement("div", {
-        ref: ref,
-        style: style
-      }, children)
-    );
+      ,
+      style: style
+    }, children);
   }));
 }

package/dist/cjs/ui/useFocusTrap.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusTrap = void 0;
+var _react = require("react");
+var _focusTrap = _interopRequireDefault(require("focus-trap"));
+/**
+ * Custom hook to add focus trap
+ * used for focus trap in ReactionPicker
+ * copied from useFocusManager in @atlaskit/popup
+ */
+
+var useFocusTrap = exports.useFocusTrap = function useFocusTrap(_ref) {
+  var targetRef = _ref.targetRef;
+  (0, _react.useEffect)(function () {
+    if (!targetRef) {
+      return;
+    }
+    var trapConfig = {
+      clickOutsideDeactivates: true,
+      escapeDeactivates: true,
+      initialFocus: targetRef,
+      fallbackFocus: targetRef,
+      returnFocusOnDeactivate: true
+    };
+    var focusTrap = (0, _focusTrap.default)(targetRef, trapConfig);
+
+    // wait for the popup to reposition itself before we focus
+    var frameId = requestAnimationFrame(function () {
+      frameId = null;
+      focusTrap.activate();
+    });
+    return function () {
+      if (frameId !== null) {
+        cancelAnimationFrame(frameId);
+        frameId = null;
+      }
+      focusTrap.deactivate();
+    };
+  }, [targetRef]);
+};

package/dist/es2019/pm-plugins/main.js

@@ -15,7 +15,7 @@ export const ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 const PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-const PACKAGE_VERSION = "4.3.2";
+const PACKAGE_VERSION = "4.3.3";
 const setProvider = provider => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(mentionPluginKey, {

package/dist/es2019/ui/PopperWrapper.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Popper as ReactPopper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
+import { useFocusTrap } from './useFocusTrap';
 /**
  * A popup wrapper to match the behaviour of `@atlaskit/popup`
  *
@@ -16,6 +17,10 @@ export function Popup({
   referenceElement,
   children
 }) {
+  const [targetRef, setPopupRef] = React.useState(null);
+  useFocusTrap({
+    targetRef: targetRef
+  });
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ReactPopper, {
     referenceElement: referenceElement,
     offset: [0, 8],
@@ -24,11 +29,19 @@ export function Popup({
   }, ({
     ref,
     style
-  }) =>
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-  React.createElement("div", {
-    ref: ref,
+  }) => /*#__PURE__*/React.createElement("div", {
+    ref: node => {
+      if (node) {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else {
+          ref.current = node;
+        }
+        setPopupRef(node);
+      }
+    }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
     style: style
   }, children)));
 }

package/dist/es2019/ui/useFocusTrap.js

@@ -0,0 +1,37 @@
+/**
+ * Custom hook to add focus trap
+ * used for focus trap in ReactionPicker
+ * copied from useFocusManager in @atlaskit/popup
+ */
+import { useEffect } from 'react';
+import createFocusTrap from 'focus-trap';
+export const useFocusTrap = ({
+  targetRef
+}) => {
+  useEffect(() => {
+    if (!targetRef) {
+      return;
+    }
+    const trapConfig = {
+      clickOutsideDeactivates: true,
+      escapeDeactivates: true,
+      initialFocus: targetRef,
+      fallbackFocus: targetRef,
+      returnFocusOnDeactivate: true
+    };
+    const focusTrap = createFocusTrap(targetRef, trapConfig);
+
+    // wait for the popup to reposition itself before we focus
+    let frameId = requestAnimationFrame(() => {
+      frameId = null;
+      focusTrap.activate();
+    });
+    return () => {
+      if (frameId !== null) {
+        cancelAnimationFrame(frameId);
+        frameId = null;
+      }
+      focusTrap.deactivate();
+    };
+  }, [targetRef]);
+};

package/dist/esm/pm-plugins/main.js

@@ -18,7 +18,7 @@ export var ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER'
 };
 var PACKAGE_NAME = "@atlaskit/editor-plugin-mentions";
-var PACKAGE_VERSION = "4.3.2";
+var PACKAGE_VERSION = "4.3.3";
 var setProvider = function setProvider(provider) {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/esm/ui/PopperWrapper.js

@@ -1,6 +1,8 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 import { Popper as ReactPopper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
+import { useFocusTrap } from './useFocusTrap';
 /**
  * A popup wrapper to match the behaviour of `@atlaskit/popup`
  *
@@ -15,21 +17,35 @@ import Portal from '@atlaskit/portal';
 export function Popup(_ref) {
   var referenceElement = _ref.referenceElement,
     children = _ref.children;
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    targetRef = _React$useState2[0],
+    setPopupRef = _React$useState2[1];
+  useFocusTrap({
+    targetRef: targetRef
+  });
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(ReactPopper, {
     referenceElement: referenceElement,
     offset: [0, 8],
     placement: "bottom-end",
     strategy: "fixed"
   }, function (_ref2) {
-    var ref = _ref2.ref,
+    var _ref3 = _ref2.ref,
       style = _ref2.style;
-    return (
-      /*#__PURE__*/
+    return /*#__PURE__*/React.createElement("div", {
+      ref: function ref(node) {
+        if (node) {
+          if (typeof _ref3 === 'function') {
+            _ref3(node);
+          } else {
+            _ref3.current = node;
+          }
+          setPopupRef(node);
+        }
+      }
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      React.createElement("div", {
-        ref: ref,
-        style: style
-      }, children)
-    );
+      ,
+      style: style
+    }, children);
   }));
 }

package/dist/esm/ui/useFocusTrap.js

@@ -0,0 +1,36 @@
+/**
+ * Custom hook to add focus trap
+ * used for focus trap in ReactionPicker
+ * copied from useFocusManager in @atlaskit/popup
+ */
+import { useEffect } from 'react';
+import createFocusTrap from 'focus-trap';
+export var useFocusTrap = function useFocusTrap(_ref) {
+  var targetRef = _ref.targetRef;
+  useEffect(function () {
+    if (!targetRef) {
+      return;
+    }
+    var trapConfig = {
+      clickOutsideDeactivates: true,
+      escapeDeactivates: true,
+      initialFocus: targetRef,
+      fallbackFocus: targetRef,
+      returnFocusOnDeactivate: true
+    };
+    var focusTrap = createFocusTrap(targetRef, trapConfig);
+
+    // wait for the popup to reposition itself before we focus
+    var frameId = requestAnimationFrame(function () {
+      frameId = null;
+      focusTrap.activate();
+    });
+    return function () {
+      if (frameId !== null) {
+        cancelAnimationFrame(frameId);
+        frameId = null;
+      }
+      focusTrap.deactivate();
+    };
+  }, [targetRef]);
+};

package/dist/types/ui/useFocusTrap.d.ts

@@ -0,0 +1,4 @@
+export type FocusManagerHook = {
+    targetRef: HTMLDivElement | null;
+};
+export declare const useFocusTrap: ({ targetRef }: FocusManagerHook) => void;

package/dist/types-ts4.5/ui/useFocusTrap.d.ts

@@ -0,0 +1,4 @@
+export type FocusManagerHook = {
+    targetRef: HTMLDivElement | null;
+};
+export declare const useFocusTrap: ({ targetRef }: FocusManagerHook) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-mentions",
-	"version": "4.3.2",
+	"version": "4.3.3",
 	"description": "Mentions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,7 +35,7 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/editor-common": "^103.0.0",
+		"@atlaskit/editor-common": "^103.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-base": "^2.3.0",
 		"@atlaskit/editor-plugin-context-identifier": "^2.0.0",
@@ -54,6 +54,7 @@
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"bind-event-listener": "^3.0.0",
+		"focus-trap": "^2.4.5",
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {