@atlaskit/popup 1.6.4 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/popup
 
+## 1.8.0
+
+### Minor Changes
+
+- [`ac5a05f5929`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac5a05f5929) - We are testing an upgrade to the `focus-trap` dependency behind a feature flag. If this fix is successful it will be available in a later release.
+
+## 1.7.0
+
+### Minor Changes
+
+- [`eca89633804`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eca89633804) - Add a new prop `shouldRenderToParent` to allow render popup into a DOM node within the parent DOM hierarchy instead of React portal.
+
 ## 1.6.4
 
 ### Patch Changes

package/dist/cjs/popup.js

@@ -8,6 +8,7 @@ exports.default = exports.Popup = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
@@ -38,11 +39,32 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
     _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
-    shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture;
+    shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
+    _ref$shouldRenderToPa = _ref.shouldRenderToParent,
+    shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
+  var renderPopperWrapper = function renderPopperWrapper() {
+    return (0, _react2.jsx)(_popperWrapper.default, {
+      content: content,
+      isOpen: isOpen,
+      placement: placement,
+      fallbackPlacements: fallbackPlacements,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      shouldFlip: shouldFlip,
+      offset: offset,
+      popupComponent: PopupContainer,
+      id: id,
+      testId: testId,
+      onClose: onClose,
+      autoFocus: autoFocus,
+      shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+      triggerRef: triggerRef
+    });
+  };
   return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
     var _ref3 = _ref2.ref;
     return trigger({
@@ -60,25 +82,11 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       'aria-expanded': isOpen,
       'aria-haspopup': true
     });
-  }), isOpen && (0, _react2.jsx)(_portal.default, {
+  }), isOpen && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent ? renderPopperWrapper() : (0, _react2.jsx)(_portal.default, {
+    zIndex: zIndex
+  }, renderPopperWrapper()) : (0, _react2.jsx)(_portal.default, {
     zIndex: zIndex
-  }, (0, _react2.jsx)(_popperWrapper.default, {
-    content: content,
-    isOpen: isOpen,
-    placement: placement,
-    fallbackPlacements: fallbackPlacements,
-    boundary: boundary,
-    rootBoundary: rootBoundary,
-    shouldFlip: shouldFlip,
-    offset: offset,
-    popupComponent: PopupContainer,
-    id: id,
-    testId: testId,
-    onClose: onClose,
-    autoFocus: autoFocus,
-    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
-    triggerRef: triggerRef
-  })));
+  }, renderPopperWrapper())));
 });
 exports.Popup = Popup;
 var _default = Popup;

package/dist/cjs/use-focus-manager.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFocusManager = void 0;
 var _react = require("react");
-var _focusTrap = _interopRequireDefault(require("focus-trap"));
+var _focusTrap = require("focus-trap");
+var _focusTrapV = _interopRequireDefault(require("focus-trap-v2"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var useFocusManager = function useFocusManager(_ref) {
   var popupRef = _ref.popupRef,
     initialFocusRef = _ref.initialFocusRef;
@@ -22,7 +24,12 @@ var useFocusManager = function useFocusManager(_ref) {
       fallbackFocus: popupRef,
       returnFocusOnDeactivate: true
     };
-    var focusTrap = (0, _focusTrap.default)(popupRef, trapConfig);
+    var focusTrap;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.focus-trap-upgrade_p2cei')) {
+      focusTrap = (0, _focusTrap.createFocusTrap)(popupRef, trapConfig);
+    } else {
+      focusTrap = (0, _focusTrapV.default)(popupRef, trapConfig);
+    }
 
     // wait for the popup to reposition itself before we focus
     var frameId = requestAnimationFrame(function () {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.6.4",
+	"version": "1.8.0",
 	"sideEffects": false
 }

package/dist/es2019/popup.js

@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
@@ -23,9 +24,27 @@ export const Popup = /*#__PURE__*/memo(({
   popupComponent: PopupContainer,
   autoFocus = true,
   zIndex = defaultLayer,
-  shouldUseCaptureOnOutsideClick = false
+  shouldUseCaptureOnOutsideClick = false,
+  shouldRenderToParent = false
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
+  const renderPopperWrapper = () => jsx(PopperWrapper, {
+    content: content,
+    isOpen: isOpen,
+    placement: placement,
+    fallbackPlacements: fallbackPlacements,
+    boundary: boundary,
+    rootBoundary: rootBoundary,
+    shouldFlip: shouldFlip,
+    offset: offset,
+    popupComponent: PopupContainer,
+    id: id,
+    testId: testId,
+    onClose: onClose,
+    autoFocus: autoFocus,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    triggerRef: triggerRef
+  });
   return jsx(Manager, null, jsx(Reference, null, ({
     ref
   }) => {
@@ -44,24 +63,10 @@ export const Popup = /*#__PURE__*/memo(({
       'aria-expanded': isOpen,
       'aria-haspopup': true
     });
-  }), isOpen && jsx(Portal, {
+  }), isOpen && (getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent ? renderPopperWrapper() : jsx(Portal, {
     zIndex: zIndex
-  }, jsx(PopperWrapper, {
-    content: content,
-    isOpen: isOpen,
-    placement: placement,
-    fallbackPlacements: fallbackPlacements,
-    boundary: boundary,
-    rootBoundary: rootBoundary,
-    shouldFlip: shouldFlip,
-    offset: offset,
-    popupComponent: PopupContainer,
-    id: id,
-    testId: testId,
-    onClose: onClose,
-    autoFocus: autoFocus,
-    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
-    triggerRef: triggerRef
-  })));
+  }, renderPopperWrapper()) : jsx(Portal, {
+    zIndex: zIndex
+  }, renderPopperWrapper())));
 });
 export default Popup;

package/dist/es2019/use-focus-manager.js

@@ -1,6 +1,8 @@
 import { useEffect } from 'react';
-import createFocusTrap from 'focus-trap';
+import { createFocusTrap } from 'focus-trap';
+import createFocusTrapV2 from 'focus-trap-v2';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const useFocusManager = ({
   popupRef,
   initialFocusRef
@@ -16,7 +18,12 @@ export const useFocusManager = ({
       fallbackFocus: popupRef,
       returnFocusOnDeactivate: true
     };
-    const focusTrap = createFocusTrap(popupRef, trapConfig);
+    let focusTrap;
+    if (getBooleanFF('platform.design-system-team.focus-trap-upgrade_p2cei')) {
+      focusTrap = createFocusTrap(popupRef, trapConfig);
+    } else {
+      focusTrap = createFocusTrapV2(popupRef, trapConfig);
+    }
 
     // wait for the popup to reposition itself before we focus
     let frameId = requestAnimationFrame(() => {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.6.4",
+	"version": "1.8.0",
 	"sideEffects": false
 }

package/dist/esm/popup.js

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
@@ -30,11 +31,32 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
     _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
-    shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture;
+    shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
+    _ref$shouldRenderToPa = _ref.shouldRenderToParent,
+    shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
+  var renderPopperWrapper = function renderPopperWrapper() {
+    return jsx(PopperWrapper, {
+      content: content,
+      isOpen: isOpen,
+      placement: placement,
+      fallbackPlacements: fallbackPlacements,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      shouldFlip: shouldFlip,
+      offset: offset,
+      popupComponent: PopupContainer,
+      id: id,
+      testId: testId,
+      onClose: onClose,
+      autoFocus: autoFocus,
+      shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+      triggerRef: triggerRef
+    });
+  };
   return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
     var _ref3 = _ref2.ref;
     return trigger({
@@ -52,24 +74,10 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
       'aria-expanded': isOpen,
       'aria-haspopup': true
     });
-  }), isOpen && jsx(Portal, {
+  }), isOpen && (getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent ? renderPopperWrapper() : jsx(Portal, {
+    zIndex: zIndex
+  }, renderPopperWrapper()) : jsx(Portal, {
     zIndex: zIndex
-  }, jsx(PopperWrapper, {
-    content: content,
-    isOpen: isOpen,
-    placement: placement,
-    fallbackPlacements: fallbackPlacements,
-    boundary: boundary,
-    rootBoundary: rootBoundary,
-    shouldFlip: shouldFlip,
-    offset: offset,
-    popupComponent: PopupContainer,
-    id: id,
-    testId: testId,
-    onClose: onClose,
-    autoFocus: autoFocus,
-    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
-    triggerRef: triggerRef
-  })));
+  }, renderPopperWrapper())));
 });
 export default Popup;

package/dist/esm/use-focus-manager.js

@@ -1,6 +1,8 @@
 import { useEffect } from 'react';
-import createFocusTrap from 'focus-trap';
+import { createFocusTrap } from 'focus-trap';
+import createFocusTrapV2 from 'focus-trap-v2';
 import noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var useFocusManager = function useFocusManager(_ref) {
   var popupRef = _ref.popupRef,
     initialFocusRef = _ref.initialFocusRef;
@@ -15,7 +17,12 @@ export var useFocusManager = function useFocusManager(_ref) {
       fallbackFocus: popupRef,
       returnFocusOnDeactivate: true
     };
-    var focusTrap = createFocusTrap(popupRef, trapConfig);
+    var focusTrap;
+    if (getBooleanFF('platform.design-system-team.focus-trap-upgrade_p2cei')) {
+      focusTrap = createFocusTrap(popupRef, trapConfig);
+    } else {
+      focusTrap = createFocusTrapV2(popupRef, trapConfig);
+    }
 
     // wait for the popup to reposition itself before we focus
     var frameId = requestAnimationFrame(function () {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.6.4",
+	"version": "1.8.0",
 	"sideEffects": false
 }

package/dist/types/types.d.ts

@@ -147,6 +147,11 @@ export interface PopupProps extends BaseProps {
      * Defaults to `layers.layer()` from `@atlaskit/theme`.
      */
     zIndex?: number;
+    /**
+     * The root element where the popup should be rendered.
+     * Defaults to `false`.
+     */
+    shouldRenderToParent?: boolean;
 }
 export interface PopperWrapperProps extends BaseProps {
     triggerRef: TriggerRef;

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

@@ -150,6 +150,11 @@ export interface PopupProps extends BaseProps {
      * Defaults to `layers.layer()` from `@atlaskit/theme`.
      */
     zIndex?: number;
+    /**
+     * The root element where the popup should be rendered.
+     * Defaults to `false`.
+     */
+    shouldRenderToParent?: boolean;
 }
 export interface PopperWrapperProps extends BaseProps {
     triggerRef: TriggerRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.6.4",
+  "version": "1.8.0",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,24 +36,26 @@
   },
   "dependencies": {
     "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.3.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.5.0",
+    "@atlaskit/tokens": "^1.9.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
-    "focus-trap": "^2.4.5"
+    "focus-trap": "^7.0.0",
+    "focus-trap-v2": "npm:focus-trap@^2.4.5"
   },
   "peerDependencies": {
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/button": "^16.8.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/menu": "^1.7.0",
+    "@atlaskit/menu": "^1.8.0",
     "@atlaskit/radio": "^5.6.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/select": "^16.5.0",
@@ -61,7 +63,9 @@
     "@atlaskit/textfield": "^5.5.0",
     "@atlaskit/toggle": "^12.6.0",
     "@atlaskit/visual-regression": "*",
+    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
     "ast-types": "^0.13.3",
@@ -99,5 +103,13 @@
     }
   },
   "homepage": "https://atlassian.design/components/popup/",
+  "platform-feature-flags": {
+    "platform.design-system-team.render-popup-in-parent_f73ij": {
+      "type": "boolean"
+    },
+    "platform.design-system-team.focus-trap-upgrade_p2cei": {
+      "type": "boolean"
+    }
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/report.api.md

@@ -70,6 +70,7 @@ export interface PopupComponentProps {
 
 // @public (undocumented)
 export interface PopupProps extends BaseProps {
+  shouldRenderToParent?: boolean;
   trigger: (props: TriggerProps) => React_2.ReactNode;
   zIndex?: number;
 }

package/tmp/api-report-tmp.d.ts

@@ -59,6 +59,7 @@ export interface PopupComponentProps {
 
 // @public (undocumented)
 export interface PopupProps extends BaseProps {
+    shouldRenderToParent?: boolean;
     trigger: (props: TriggerProps) => React_2.ReactNode;
     zIndex?: number;
 }

package/extract-react-types/popup-attributes.tsx

@@ -1,5 +0,0 @@
-import { PopupProps } from '../src/types';
-
-export default function PopupAttributesFunction(props: PopupProps) {
-  return null;
-}