@atlaskit/popup 4.11.0 → 4.13.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/popup
 
+## 4.13.0
+
+### Minor Changes
+
+- [`dd02781bfb92f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dd02781bfb92f) -
+  Increases the height of the popup on viewports with appearance `UNSAFE_modal-below-sm`, i.e.
+  viewports below "sm" (mobile) from 50vh to 100vh. This change is behind the
+  `platform_dst_nav4_flyout_menu_slots_close_button` feature gate.
+
+## 4.12.0
+
+### Minor Changes
+
+- [`2f8e40fb0a94f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2f8e40fb0a94f) -
+  Popups using `shouldFitViewport` will now be scrollable even if they are rendered to parent using
+  `shouldRenderToParent`. Previously, only popups rendered in portals would be scrollable.
+
+  This change is behind the feature gate `platform_dst_nav4_flyoutmenuitem_render_to_parent`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.11.0
 
 ### Minor Changes

package/dist/cjs/popper-wrapper.compiled.css

@@ -12,6 +12,7 @@
 ._1reo1wug{overflow-x:auto}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
+._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
 ._c71ldtre{max-height:50vh}
 ._kqsw1n9t{position:fixed}
 ._syazi7uo{color:var(--ds-text,#292a2e)}

package/dist/cjs/popper-wrapper.js

@@ -21,7 +21,7 @@ var _popper = require("@atlaskit/popper");
 var _repositionOnUpdate = require("./reposition-on-update");
 var _useCloseManager = require("./use-close-manager");
 var _useFocusManager = require("./use-focus-manager");
-var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children", "appearance", "className", "isReferenceHidden"];
+var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children", "appearance", "className", "isReferenceHidden", "shouldFitViewport"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
 var fullWidthStyles = null;
@@ -32,6 +32,7 @@ var wrapperStyles = {
 var scrollableStyles = null;
 var blanketStyles = null;
 var modalStyles = null;
+var newModalStyles = null;
 var focusRingStyles = {
   root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
 };
@@ -42,10 +43,11 @@ var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     appearance = props.appearance,
     className = props.className,
     _isReferenceHidden = props.isReferenceHidden,
+    shouldFitViewport = props.shouldFitViewport,
     htmlAttributes = (0, _objectWithoutProperties2.default)(props, _excluded);
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: (0, _runtime.ax)([wrapperStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", !shouldRenderToParent && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
+    className: (0, _runtime.ax)([wrapperStyles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !(0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
   }, htmlAttributes, {
     ref: ref
   }), children);
@@ -172,6 +174,7 @@ function PopperWrapper(_ref) {
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer,
+      shouldFitViewport: shouldFitViewport,
       isReferenceHidden: isReferenceHidden
     }, /*#__PURE__*/React.createElement(_repositionOnUpdate.RepositionOnUpdate, {
       update: update

package/dist/es2019/popper-wrapper.compiled.css

@@ -12,6 +12,7 @@
 ._1reo1wug{overflow-x:auto}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
+._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
 ._c71ldtre{max-height:50vh}
 ._kqsw1n9t{position:fixed}
 ._syazi7uo{color:var(--ds-text,#292a2e)}

package/dist/es2019/popper-wrapper.js

@@ -19,6 +19,7 @@ const wrapperStyles = {
 const scrollableStyles = null;
 const blanketStyles = null;
 const modalStyles = null;
+const newModalStyles = null;
 const focusRingStyles = {
   root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
 };
@@ -30,11 +31,12 @@ const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
     appearance,
     className,
     isReferenceHidden: _isReferenceHidden,
+    shouldFitViewport,
     ...htmlAttributes
   } = props;
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", !shouldRenderToParent && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
+    className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
   }, htmlAttributes, {
     ref: ref
   }), children);
@@ -152,6 +154,7 @@ function PopperWrapper({
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer,
+      shouldFitViewport: shouldFitViewport,
       isReferenceHidden: isReferenceHidden
     }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
       update: update

package/dist/esm/popper-wrapper.compiled.css

@@ -12,6 +12,7 @@
 ._1reo1wug{overflow-x:auto}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
+._c71l1ei0{max-height:calc(100vh - var(--ds-space-050, 4px)*2)}
 ._c71ldtre{max-height:50vh}
 ._kqsw1n9t{position:fixed}
 ._syazi7uo{color:var(--ds-text,#292a2e)}

package/dist/esm/popper-wrapper.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children", "appearance", "className", "isReferenceHidden"];
+var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children", "appearance", "className", "isReferenceHidden", "shouldFitViewport"];
 import "./popper-wrapper.compiled.css";
 import * as React from 'react';
 import { forwardRef, Fragment, useMemo, useState } from 'react';
@@ -23,6 +23,7 @@ var wrapperStyles = {
 var scrollableStyles = null;
 var blanketStyles = null;
 var modalStyles = null;
+var newModalStyles = null;
 var focusRingStyles = {
   root: "_mizu194a _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y"
 };
@@ -33,10 +34,11 @@ var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     appearance = props.appearance,
     className = props.className,
     _isReferenceHidden = props.isReferenceHidden,
+    shouldFitViewport = props.shouldFitViewport,
     htmlAttributes = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", !shouldRenderToParent && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
+    className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
   }, htmlAttributes, {
     ref: ref
   }), children);
@@ -163,6 +165,7 @@ function PopperWrapper(_ref) {
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer,
+      shouldFitViewport: shouldFitViewport,
       isReferenceHidden: isReferenceHidden
     }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
       update: update

package/dist/types/types.d.ts

@@ -90,9 +90,16 @@ export interface PopupComponentProps {
      * The default is `false`.
      */
     shouldFitContainer?: boolean;
+    /**
+     * Determines if the popup will have a `max-width` and `max-height` set to
+     * constrain it to the viewport.
+     */
+    shouldFitViewport?: boolean;
     /**
      * The "default" appearance is used for standard popups.
      * The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".
+     * When the feature gate `platform_dst_nav4_flyout_menu_slots_close_button` is enabled, the appearance should only
+     * be set to "UNSAFE_modal-below-sm" if the provided popup includes a close button.
      */
     appearance?: 'default' | 'UNSAFE_modal-below-sm';
     /**

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

@@ -90,9 +90,16 @@ export interface PopupComponentProps {
      * The default is `false`.
      */
     shouldFitContainer?: boolean;
+    /**
+     * Determines if the popup will have a `max-width` and `max-height` set to
+     * constrain it to the viewport.
+     */
+    shouldFitViewport?: boolean;
     /**
      * The "default" appearance is used for standard popups.
      * The "UNSAFE_modal-below-sm" appearance makes the popup appear as a modal when the viewport is smaller than "sm".
+     * When the feature gate `platform_dst_nav4_flyout_menu_slots_close_button` is enabled, the appearance should only
+     * be set to "UNSAFE_modal-below-sm" if the provided popup includes a close button.
      */
     appearance?: 'default' | 'UNSAFE_modal-below-sm';
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.11.0",
+	"version": "4.13.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,12 +34,12 @@
 	"dependencies": {
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^5.3.0",
-		"@atlaskit/layering": "^3.5.0",
+		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/portal": "^5.1.0",
 		"@atlaskit/primitives": "^17.0.0",
-		"@atlaskit/tokens": "^9.0.0",
+		"@atlaskit/tokens": "^9.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
 		"bind-event-listener": "^3.0.0",
@@ -60,7 +60,7 @@
 		"@atlaskit/docs": "^11.2.0",
 		"@atlaskit/form": "^15.2.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^29.3.0",
+		"@atlaskit/icon": "^29.4.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/modal-dialog": "^14.9.0",
 		"@atlaskit/section-message": "^8.11.0",
@@ -119,6 +119,9 @@
 		},
 		"platform_dst_nav4_flyout_menu_slots_close_button": {
 			"type": "boolean"
+		},
+		"platform_dst_nav4_flyoutmenuitem_render_to_parent": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/popup/"