@atlaskit/popup 1.10.0 → 1.10.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/popup
 
+## 1.10.1
+
+### Patch Changes
+
+- [`a54578d2ea9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a54578d2ea9) - This removes the feature flag for the `shouldRenderToParent` prop. The prop is available for use.
+
 ## 1.10.0
 
 ### Minor Changes

package/dist/cjs/popper-wrapper.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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");
@@ -30,12 +29,14 @@ var popupStyles = (0, _react2.css)((_css = {
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
 }, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, ':focus', {
   outline: 'none'
-}), _css), !(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.render-popup-in-parent_f73ij') && {
+}), _css));
+var popupOverflowStyles = (0, _react2.css)({
   overflow: 'auto'
 });
 var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var shouldRenderToParent = props.shouldRenderToParent;
   return (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: popupStyles
+    css: [popupStyles, !shouldRenderToParent && popupOverflowStyles]
   }, props, {
     ref: ref
   }));
@@ -58,7 +59,8 @@ function PopperWrapper(_ref) {
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
     triggerRef = _ref.triggerRef,
-    shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick;
+    shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
+    shouldRenderToParent = _ref.shouldRenderToParent;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     popupRef = _useState2[0],
@@ -116,7 +118,8 @@ function PopperWrapper(_ref) {
       // using tabIndex={-1} would cause a bug where Safari focuses
       // first on the browser address bar when using keyboard
       ,
-      tabIndex: autoFocus ? 0 : undefined
+      tabIndex: autoFocus ? 0 : undefined,
+      shouldRenderToParent: shouldRenderToParent
     }, (0, _react2.jsx)(_repositionOnUpdate.RepositionOnUpdate, {
       update: update
     }, content({

package/dist/cjs/popup.js

@@ -9,7 +9,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _layering = require("@atlaskit/layering");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
@@ -62,6 +61,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     onClose: onClose,
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldRenderToParent: shouldRenderToParent,
     triggerRef: triggerRef
   }));
   return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
@@ -81,9 +81,7 @@ 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, {
-    zIndex: zIndex
-  }, renderPopperWrapper) : (0, _react2.jsx)(_portal.default, {
+  }), isOpen && (shouldRenderToParent ? renderPopperWrapper : (0, _react2.jsx)(_portal.default, {
     zIndex: zIndex
   }, renderPopperWrapper)));
 });

package/dist/es2019/popper-wrapper.js

@@ -2,7 +2,6 @@ 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';
@@ -22,14 +21,20 @@ const popupStyles = css({
   ':focus': {
     outline: 'none'
   }
-}, !getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') && {
+});
+const popupOverflowStyles = css({
   overflow: 'auto'
 });
-const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => jsx("div", _extends({
-  css: popupStyles
-}, props, {
-  ref: ref
-})));
+const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    shouldRenderToParent
+  } = props;
+  return jsx("div", _extends({
+    css: [popupStyles, !shouldRenderToParent && popupOverflowStyles]
+  }, props, {
+    ref: ref
+  }));
+});
 function PopperWrapper({
   isOpen,
   id,
@@ -45,7 +50,8 @@ function PopperWrapper({
   popupComponent: PopupContainer = DefaultPopupComponent,
   autoFocus = true,
   triggerRef,
-  shouldUseCaptureOnOutsideClick
+  shouldUseCaptureOnOutsideClick,
+  shouldRenderToParent
 }) {
   const [popupRef, setPopupRef] = useState(null);
   const [initialFocusRef, setInitialFocusRef] = useState(null);
@@ -97,7 +103,8 @@ function PopperWrapper({
       // using tabIndex={-1} would cause a bug where Safari focuses
       // first on the browser address bar when using keyboard
       ,
-      tabIndex: autoFocus ? 0 : undefined
+      tabIndex: autoFocus ? 0 : undefined,
+      shouldRenderToParent: shouldRenderToParent
     }, jsx(RepositionOnUpdate, {
       update: update
     }, content({

package/dist/es2019/popup.js

@@ -3,7 +3,6 @@
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
@@ -44,6 +43,7 @@ export const Popup = /*#__PURE__*/memo(({
     onClose: onClose,
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldRenderToParent: shouldRenderToParent,
     triggerRef: triggerRef
   }));
   return jsx(Manager, null, jsx(Reference, null, ({
@@ -64,9 +64,7 @@ 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, {
-    zIndex: zIndex
-  }, renderPopperWrapper) : jsx(Portal, {
+  }), isOpen && (shouldRenderToParent ? renderPopperWrapper : jsx(Portal, {
     zIndex: zIndex
   }, renderPopperWrapper)));
 });

package/dist/esm/popper-wrapper.js

@@ -5,7 +5,6 @@ var _css;
 /** @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';
@@ -23,12 +22,14 @@ var popupStyles = css((_css = {
   boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
 }, _defineProperty(_css, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_css, ':focus', {
   outline: 'none'
-}), _css), !getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') && {
+}), _css));
+var popupOverflowStyles = css({
   overflow: 'auto'
 });
 var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
+  var shouldRenderToParent = props.shouldRenderToParent;
   return jsx("div", _extends({
-    css: popupStyles
+    css: [popupStyles, !shouldRenderToParent && popupOverflowStyles]
   }, props, {
     ref: ref
   }));
@@ -51,7 +52,8 @@ function PopperWrapper(_ref) {
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
     triggerRef = _ref.triggerRef,
-    shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick;
+    shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
+    shouldRenderToParent = _ref.shouldRenderToParent;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     popupRef = _useState2[0],
@@ -109,7 +111,8 @@ function PopperWrapper(_ref) {
       // using tabIndex={-1} would cause a bug where Safari focuses
       // first on the browser address bar when using keyboard
       ,
-      tabIndex: autoFocus ? 0 : undefined
+      tabIndex: autoFocus ? 0 : undefined,
+      shouldRenderToParent: shouldRenderToParent
     }, jsx(RepositionOnUpdate, {
       update: update
     }, content({

package/dist/esm/popup.js

@@ -4,7 +4,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
@@ -54,6 +53,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     onClose: onClose,
     autoFocus: autoFocus,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldRenderToParent: shouldRenderToParent,
     triggerRef: triggerRef
   }));
   return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
@@ -73,9 +73,7 @@ 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, {
-    zIndex: zIndex
-  }, renderPopperWrapper) : jsx(Portal, {
+  }), isOpen && (shouldRenderToParent ? renderPopperWrapper : jsx(Portal, {
     zIndex: zIndex
   }, renderPopperWrapper)));
 });

package/dist/types/popper-wrapper.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { PopperWrapperProps } from './types';
-declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, }: PopperWrapperProps): jsx.JSX.Element;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

package/dist/types/types.d.ts

@@ -56,6 +56,11 @@ export interface PopupComponentProps {
      * Tab index passed through by the parent popup.
      */
     tabIndex: number | undefined;
+    /**
+     * The root element where the popup should be rendered.
+     * Defaults to `false`.
+     */
+    shouldRenderToParent?: boolean;
 }
 interface BaseProps {
     /**
@@ -134,6 +139,11 @@ interface BaseProps {
      *  `capture: true`.
      */
     shouldUseCaptureOnOutsideClick?: boolean;
+    /**
+     * The root element where the popup should be rendered.
+     * Defaults to `false`.
+     */
+    shouldRenderToParent?: boolean;
 }
 export interface PopupProps extends BaseProps {
     /**
@@ -148,11 +158,6 @@ 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/popper-wrapper.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { PopperWrapperProps } from './types';
-declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, }: PopperWrapperProps): jsx.JSX.Element;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

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

@@ -56,6 +56,11 @@ export interface PopupComponentProps {
      * Tab index passed through by the parent popup.
      */
     tabIndex: number | undefined;
+    /**
+     * The root element where the popup should be rendered.
+     * Defaults to `false`.
+     */
+    shouldRenderToParent?: boolean;
 }
 interface BaseProps {
     /**
@@ -137,6 +142,11 @@ interface BaseProps {
      *  `capture: true`.
      */
     shouldUseCaptureOnOutsideClick?: boolean;
+    /**
+     * The root element where the popup should be rendered.
+     * Defaults to `false`.
+     */
+    shouldRenderToParent?: boolean;
 }
 export interface PopupProps extends BaseProps {
     /**
@@ -151,11 +161,6 @@ 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.10.0",
+  "version": "1.10.1",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,6 @@
   "dependencies": {
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/layering": "^0.2.0",
-    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.3.0",
     "@atlaskit/theme": "^12.6.0",
@@ -59,7 +58,6 @@
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@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",
@@ -96,10 +94,5 @@
     }
   },
   "homepage": "https://atlassian.design/components/popup/",
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
-  "platform-feature-flags": {
-    "platform.design-system-team.render-popup-in-parent_f73ij": {
-      "type": "boolean"
-    }
-  }
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/report.api.md

@@ -40,6 +40,7 @@ interface BaseProps {
   popupComponent?: ComponentType<PopupComponentProps>;
   rootBoundary?: 'document' | 'viewport';
   shouldFlip?: boolean;
+  shouldRenderToParent?: boolean;
   shouldUseCaptureOnOutsideClick?: boolean;
   testId?: string;
 }
@@ -64,13 +65,13 @@ export interface PopupComponentProps {
   children: ReactNode;
   id?: string;
   ref: Ref<HTMLDivElement>;
+  shouldRenderToParent?: boolean;
   style: CSSProperties;
   tabIndex: number | undefined;
 }
 
 // @public (undocumented)
 export interface PopupProps extends BaseProps {
-  shouldRenderToParent?: boolean;
   trigger: (props: TriggerProps) => React_2.ReactNode;
   zIndex?: number;
 }

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

@@ -29,6 +29,7 @@ interface BaseProps {
     popupComponent?: ComponentType<PopupComponentProps>;
     rootBoundary?: 'document' | 'viewport';
     shouldFlip?: boolean;
+    shouldRenderToParent?: boolean;
     shouldUseCaptureOnOutsideClick?: boolean;
     testId?: string;
 }
@@ -53,13 +54,13 @@ export interface PopupComponentProps {
     children: ReactNode;
     id?: string;
     ref: Ref<HTMLDivElement>;
+    shouldRenderToParent?: boolean;
     style: CSSProperties;
     tabIndex: number | undefined;
 }
 
 // @public (undocumented)
 export interface PopupProps extends BaseProps {
-    shouldRenderToParent?: boolean;
     trigger: (props: TriggerProps) => React_2.ReactNode;
     zIndex?: number;
 }