@atlaskit/popup 1.9.0 → 1.9.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/popup
 
+## 1.9.2
+
+### Patch Changes
+
+- [`065da872439`](https://bitbucket.org/atlassian/atlassian-frontend/commits/065da872439) - Css changes for testing the feature flag `platform.design-system-team.render-popup-in-parent_f73ij`.
+
+## 1.9.1
+
+### Patch Changes
+
+- [`6a0a3c059ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6a0a3c059ba) - Remove unused argument from internal focus management function.
+
 ## 1.9.0
 
 ### Minor Changes

package/dist/cjs/popper-wrapper.js

@@ -9,6 +9,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
@@ -25,10 +26,11 @@ var popupStyles = (0, _react2.css)({
   backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
   borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
-  overflow: 'auto',
   ':focus': {
     outline: 'none'
   }
+}, !(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.render-popup-in-parent_f73ij') && {
+  overflow: 'auto'
 });
 var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)("div", (0, _extends2.default)({
@@ -66,8 +68,7 @@ function PopperWrapper(_ref) {
     setInitialFocusRef = _useState4[1];
   (0, _useFocusManager.useFocusManager)({
     initialFocusRef: initialFocusRef,
-    popupRef: popupRef,
-    autoFocus: autoFocus
+    popupRef: popupRef
   });
   (0, _useCloseManager.useCloseManager)({
     isOpen: isOpen,

package/dist/cjs/popup.js

@@ -46,25 +46,23 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _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
-    });
-  };
+  var renderPopperWrapper = (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({
@@ -82,11 +80,11 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       'aria-expanded': isOpen,
       'aria-haspopup': true
     });
-  }), isOpen && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent ? renderPopperWrapper() : (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, {
+  }, renderPopperWrapper) : (0, _react2.jsx)(_portal.default, {
     zIndex: zIndex
-  }, renderPopperWrapper())));
+  }, renderPopperWrapper)));
 });
 exports.Popup = Popup;
 var _default = Popup;

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

@@ -10,8 +10,7 @@ var _focusTrap = _interopRequireDefault(require("focus-trap"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var useFocusManager = function useFocusManager(_ref) {
   var popupRef = _ref.popupRef,
-    initialFocusRef = _ref.initialFocusRef,
-    autoFocus = _ref.autoFocus;
+    initialFocusRef = _ref.initialFocusRef;
   (0, _react.useEffect)(function () {
     if (!popupRef) {
       return _noop.default;
@@ -37,6 +36,6 @@ var useFocusManager = function useFocusManager(_ref) {
       }
       focusTrap.deactivate();
     };
-  }, [popupRef, initialFocusRef, autoFocus]);
+  }, [popupRef, initialFocusRef]);
 };
 exports.useFocusManager = useFocusManager;

package/dist/cjs/version.json

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

package/dist/es2019/popper-wrapper.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -16,10 +17,11 @@ const popupStyles = css({
   backgroundColor: `var(--ds-surface-overlay, ${N0})`,
   borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
-  overflow: 'auto',
   ':focus': {
     outline: 'none'
   }
+}, !getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') && {
+  overflow: 'auto'
 });
 const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => jsx("div", _extends({
   css: popupStyles
@@ -47,8 +49,7 @@ function PopperWrapper({
   const [initialFocusRef, setInitialFocusRef] = useState(null);
   useFocusManager({
     initialFocusRef,
-    popupRef,
-    autoFocus
+    popupRef
   });
   useCloseManager({
     isOpen,

package/dist/es2019/popup.js

@@ -28,7 +28,7 @@ export const Popup = /*#__PURE__*/memo(({
   shouldRenderToParent = false
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
-  const renderPopperWrapper = () => jsx(PopperWrapper, {
+  const renderPopperWrapper = jsx(PopperWrapper, {
     content: content,
     isOpen: isOpen,
     placement: placement,
@@ -63,10 +63,10 @@ export const Popup = /*#__PURE__*/memo(({
       'aria-expanded': isOpen,
       'aria-haspopup': true
     });
-  }), isOpen && (getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent ? renderPopperWrapper() : jsx(Portal, {
+  }), isOpen && (getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent ? renderPopperWrapper : jsx(Portal, {
     zIndex: zIndex
-  }, renderPopperWrapper()) : jsx(Portal, {
+  }, renderPopperWrapper) : jsx(Portal, {
     zIndex: zIndex
-  }, renderPopperWrapper())));
+  }, renderPopperWrapper)));
 });
 export default Popup;

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

@@ -3,8 +3,7 @@ import createFocusTrap from 'focus-trap';
 import noop from '@atlaskit/ds-lib/noop';
 export const useFocusManager = ({
   popupRef,
-  initialFocusRef,
-  autoFocus
+  initialFocusRef
 }) => {
   useEffect(() => {
     if (!popupRef) {
@@ -31,5 +30,5 @@ export const useFocusManager = ({
       }
       focusTrap.deactivate();
     };
-  }, [popupRef, initialFocusRef, autoFocus]);
+  }, [popupRef, initialFocusRef]);
 };

package/dist/es2019/version.json

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

package/dist/esm/popper-wrapper.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -17,10 +18,11 @@ var popupStyles = css({
   backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
   borderRadius: "var(--ds-border-radius, 3px)",
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
-  overflow: 'auto',
   ':focus': {
     outline: 'none'
   }
+}, !getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') && {
+  overflow: 'auto'
 });
 var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   return jsx("div", _extends({
@@ -58,8 +60,7 @@ function PopperWrapper(_ref) {
     setInitialFocusRef = _useState4[1];
   useFocusManager({
     initialFocusRef: initialFocusRef,
-    popupRef: popupRef,
-    autoFocus: autoFocus
+    popupRef: popupRef
   });
   useCloseManager({
     isOpen: isOpen,

package/dist/esm/popup.js

@@ -38,25 +38,23 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     _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
-    });
-  };
+  var 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, function (_ref2) {
     var _ref3 = _ref2.ref;
     return trigger({
@@ -74,10 +72,10 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
       'aria-expanded': isOpen,
       'aria-haspopup': true
     });
-  }), isOpen && (getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent ? renderPopperWrapper() : jsx(Portal, {
+  }), isOpen && (getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent ? renderPopperWrapper : jsx(Portal, {
     zIndex: zIndex
-  }, renderPopperWrapper()) : jsx(Portal, {
+  }, renderPopperWrapper) : jsx(Portal, {
     zIndex: zIndex
-  }, renderPopperWrapper())));
+  }, renderPopperWrapper)));
 });
 export default Popup;

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

@@ -3,8 +3,7 @@ import createFocusTrap from 'focus-trap';
 import noop from '@atlaskit/ds-lib/noop';
 export var useFocusManager = function useFocusManager(_ref) {
   var popupRef = _ref.popupRef,
-    initialFocusRef = _ref.initialFocusRef,
-    autoFocus = _ref.autoFocus;
+    initialFocusRef = _ref.initialFocusRef;
   useEffect(function () {
     if (!popupRef) {
       return noop;
@@ -30,5 +29,5 @@ export var useFocusManager = function useFocusManager(_ref) {
       }
       focusTrap.deactivate();
     };
-  }, [popupRef, initialFocusRef, autoFocus]);
+  }, [popupRef, initialFocusRef]);
 };

package/dist/esm/version.json

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

package/dist/types/types.d.ts

@@ -85,7 +85,8 @@ interface BaseProps {
     /**
      * Defines a list of placements to try.
      * When no space is available on the preferred placement,
-     * the modifier will test the ones provided in the list, and use the first useful one.
+     * the modifier will test the ones provided in the list, and use the first suitable one.
+     * If no fallback placements are suitable, it reverts back to the original placement.
      */
     fallbackPlacements?: Placement[];
     /**
@@ -164,7 +165,6 @@ export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
 export type FocusManagerHook = {
     popupRef: PopupRef;
     initialFocusRef: HTMLElement | null;
-    autoFocus: boolean;
 };
 export type RepositionOnUpdateProps = {
     update: PopperChildrenProps['update'];

package/dist/types/use-focus-manager.d.ts

@@ -1,2 +1,2 @@
 import { FocusManagerHook } from './types';
-export declare const useFocusManager: ({ popupRef, initialFocusRef, autoFocus, }: FocusManagerHook) => void;
+export declare const useFocusManager: ({ popupRef, initialFocusRef, }: FocusManagerHook) => void;

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

@@ -88,7 +88,8 @@ interface BaseProps {
     /**
      * Defines a list of placements to try.
      * When no space is available on the preferred placement,
-     * the modifier will test the ones provided in the list, and use the first useful one.
+     * the modifier will test the ones provided in the list, and use the first suitable one.
+     * If no fallback placements are suitable, it reverts back to the original placement.
      */
     fallbackPlacements?: Placement[];
     /**
@@ -167,7 +168,6 @@ export type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
 export type FocusManagerHook = {
     popupRef: PopupRef;
     initialFocusRef: HTMLElement | null;
-    autoFocus: boolean;
 };
 export type RepositionOnUpdateProps = {
     update: PopperChildrenProps['update'];

package/dist/types-ts4.5/use-focus-manager.d.ts

@@ -1,2 +1,2 @@
 import { FocusManagerHook } from './types';
-export declare const useFocusManager: ({ popupRef, initialFocusRef, autoFocus, }: FocusManagerHook) => void;
+export declare const useFocusManager: ({ popupRef, initialFocusRef, }: FocusManagerHook) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.9.0",
+  "version": "1.9.2",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.3.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.13.0",
+    "@atlaskit/tokens": "^1.14.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",