@atlaskit/popup 4.10.0 → 4.12.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/popup
 
+## 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
+
+- [`6f95ec25daa67`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6f95ec25daa67) -
+  Fixes to accessibility issues for the flyout menu.
+
+  This includes changing the `aria-haspopup` value from `"true"` to `"dialog"`, setting the `role`
+  of the popup container to `"dialog"`, adding an `aria-labelledby` to the popup container to
+  reference the `id` of the title in the header slot, and ensuring that escape dismisses the dialog
+  and places focus back on the trigger.
+
 ## 4.10.0
 
 ### Minor Changes

package/dist/cjs/compositional/popup.js

@@ -13,6 +13,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _layering = require("@atlaskit/layering");
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _popperWrapper = _interopRequireDefault(require("../popper-wrapper"));
@@ -24,6 +25,7 @@ var IdContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 var TriggerRefContext = /*#__PURE__*/(0, _react.createContext)(null);
 var SetTriggerRefContext = /*#__PURE__*/(0, _react.createContext)(_noop.default);
 var EnsureIsInsidePopupContext = /*#__PURE__*/(0, _react.createContext)(false);
+var RoleContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 
 // Used to ensure popup sub-components are used within a Popup
 // and provide a useful error message if not.
@@ -54,14 +56,17 @@ var Popup = exports.Popup = function Popup(_ref) {
   var children = _ref.children,
     providedId = _ref.id,
     _ref$isOpen = _ref.isOpen,
-    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen;
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    role = _ref.role;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
   var generatedId = (0, _useId.useId)();
   var id = providedId || generatedId;
-  return /*#__PURE__*/_react.default.createElement(EnsureIsInsidePopupContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(RoleContext.Provider, {
+    value: role
+  }, /*#__PURE__*/_react.default.createElement(EnsureIsInsidePopupContext.Provider, {
     value: true
   }, /*#__PURE__*/_react.default.createElement(IdContext.Provider, {
     value: id
@@ -71,7 +76,7 @@ var Popup = exports.Popup = function Popup(_ref) {
     value: setTriggerRef
   }, /*#__PURE__*/_react.default.createElement(IsOpenContext.Provider, {
     value: isOpen
-  }, /*#__PURE__*/_react.default.createElement(_popper.Manager, null, children))))));
+  }, /*#__PURE__*/_react.default.createElement(_popper.Manager, null, children)))))));
 };
 /**
  * __Popup trigger__
@@ -87,13 +92,14 @@ var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref2) {
   var setTriggerRef = (0, _react.useContext)(SetTriggerRefContext);
   var isOpen = (0, _react.useContext)(IsOpenContext);
   var getMergedTriggerRef = (0, _useGetMemoizedMergedTriggerRefNew.useGetMemoizedMergedTriggerRefNew)();
+  var role = (0, _react.useContext)(RoleContext);
   return /*#__PURE__*/_react.default.createElement(_popper.Reference, null, function (_ref3) {
     var ref = _ref3.ref;
     return children({
       ref: getMergedTriggerRef(ref, setTriggerRef),
       'aria-controls': id,
       'aria-expanded': isOpen,
-      'aria-haspopup': true
+      'aria-haspopup': role === 'dialog' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true
     });
   });
 };
@@ -148,7 +154,9 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref4) {
     shouldFitContainer = _ref4.shouldFitContainer,
     shouldFitViewport = _ref4.shouldFitViewport,
     _ref4$shouldDisableGp = _ref4.shouldDisableGpuAcceleration,
-    shouldDisableGpuAcceleration = _ref4$shouldDisableGp === void 0 ? false : _ref4$shouldDisableGp;
+    shouldDisableGpuAcceleration = _ref4$shouldDisableGp === void 0 ? false : _ref4$shouldDisableGp,
+    role = _ref4.role,
+    titleId = _ref4.titleId;
   useEnsureIsInsidePopup();
   var isOpen = (0, _react.useContext)(IsOpenContext);
   var id = (0, _react.useContext)(IdContext);
@@ -195,7 +203,9 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref4) {
     triggerRef: triggerRef,
     strategy: strategy,
     shouldFitViewport: shouldFitViewport,
-    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined
+    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined,
+    role: role,
+    titleId: titleId
   }));
   if (shouldRenderToParent) {
     return popperWrapper;

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;
@@ -42,10 +42,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' && "_dk5d1b66 _c71ldtre _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 +173,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/compositional/popup.js

@@ -4,6 +4,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { Layering } from '@atlaskit/layering';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import PopperWrapper from '../popper-wrapper';
@@ -14,6 +15,7 @@ const IdContext = /*#__PURE__*/createContext(undefined);
 const TriggerRefContext = /*#__PURE__*/createContext(null);
 const SetTriggerRefContext = /*#__PURE__*/createContext(noop);
 const EnsureIsInsidePopupContext = /*#__PURE__*/createContext(false);
+const RoleContext = /*#__PURE__*/createContext(undefined);
 
 // Used to ensure popup sub-components are used within a Popup
 // and provide a useful error message if not.
@@ -43,12 +45,15 @@ const useEnsureIsInsidePopup = () => {
 export const Popup = ({
   children,
   id: providedId,
-  isOpen = false
+  isOpen = false,
+  role
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
   const generatedId = useId();
   const id = providedId || generatedId;
-  return /*#__PURE__*/React.createElement(EnsureIsInsidePopupContext.Provider, {
+  return /*#__PURE__*/React.createElement(RoleContext.Provider, {
+    value: role
+  }, /*#__PURE__*/React.createElement(EnsureIsInsidePopupContext.Provider, {
     value: true
   }, /*#__PURE__*/React.createElement(IdContext.Provider, {
     value: id
@@ -58,7 +63,7 @@ export const Popup = ({
     value: setTriggerRef
   }, /*#__PURE__*/React.createElement(IsOpenContext.Provider, {
     value: isOpen
-  }, /*#__PURE__*/React.createElement(Manager, null, children))))));
+  }, /*#__PURE__*/React.createElement(Manager, null, children)))))));
 };
 /**
  * __Popup trigger__
@@ -75,13 +80,14 @@ export const PopupTrigger = ({
   const setTriggerRef = useContext(SetTriggerRefContext);
   const isOpen = useContext(IsOpenContext);
   const getMergedTriggerRef = useGetMemoizedMergedTriggerRefNew();
+  const role = useContext(RoleContext);
   return /*#__PURE__*/React.createElement(Reference, null, ({
     ref
   }) => children({
     ref: getMergedTriggerRef(ref, setTriggerRef),
     'aria-controls': id,
     'aria-expanded': isOpen,
-    'aria-haspopup': true
+    'aria-haspopup': role === 'dialog' && fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true
   }));
 };
 const defaultLayer = 400;
@@ -126,7 +132,9 @@ export const PopupContent = ({
   shouldDisableFocusLock = false,
   shouldFitContainer,
   shouldFitViewport,
-  shouldDisableGpuAcceleration = false
+  shouldDisableGpuAcceleration = false,
+  role,
+  titleId
 }) => {
   useEnsureIsInsidePopup();
   const isOpen = useContext(IsOpenContext);
@@ -175,7 +183,9 @@ export const PopupContent = ({
     triggerRef: triggerRef,
     strategy: strategy,
     shouldFitViewport: shouldFitViewport,
-    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined
+    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined,
+    role: role,
+    titleId: titleId
   }));
   if (shouldRenderToParent) {
     return popperWrapper;

package/dist/es2019/popper-wrapper.js

@@ -30,11 +30,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' && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
   }, htmlAttributes, {
     ref: ref
   }), children);
@@ -152,6 +153,7 @@ function PopperWrapper({
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer,
+      shouldFitViewport: shouldFitViewport,
       isReferenceHidden: isReferenceHidden
     }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
       update: update

package/dist/esm/compositional/popup.js

@@ -5,6 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { Layering } from '@atlaskit/layering';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import PopperWrapper from '../popper-wrapper';
@@ -15,6 +16,7 @@ var IdContext = /*#__PURE__*/createContext(undefined);
 var TriggerRefContext = /*#__PURE__*/createContext(null);
 var SetTriggerRefContext = /*#__PURE__*/createContext(noop);
 var EnsureIsInsidePopupContext = /*#__PURE__*/createContext(false);
+var RoleContext = /*#__PURE__*/createContext(undefined);
 
 // Used to ensure popup sub-components are used within a Popup
 // and provide a useful error message if not.
@@ -45,14 +47,17 @@ export var Popup = function Popup(_ref) {
   var children = _ref.children,
     providedId = _ref.id,
     _ref$isOpen = _ref.isOpen,
-    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen;
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+    role = _ref.role;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
   var generatedId = useId();
   var id = providedId || generatedId;
-  return /*#__PURE__*/React.createElement(EnsureIsInsidePopupContext.Provider, {
+  return /*#__PURE__*/React.createElement(RoleContext.Provider, {
+    value: role
+  }, /*#__PURE__*/React.createElement(EnsureIsInsidePopupContext.Provider, {
     value: true
   }, /*#__PURE__*/React.createElement(IdContext.Provider, {
     value: id
@@ -62,7 +67,7 @@ export var Popup = function Popup(_ref) {
     value: setTriggerRef
   }, /*#__PURE__*/React.createElement(IsOpenContext.Provider, {
     value: isOpen
-  }, /*#__PURE__*/React.createElement(Manager, null, children))))));
+  }, /*#__PURE__*/React.createElement(Manager, null, children)))))));
 };
 /**
  * __Popup trigger__
@@ -78,13 +83,14 @@ export var PopupTrigger = function PopupTrigger(_ref2) {
   var setTriggerRef = useContext(SetTriggerRefContext);
   var isOpen = useContext(IsOpenContext);
   var getMergedTriggerRef = useGetMemoizedMergedTriggerRefNew();
+  var role = useContext(RoleContext);
   return /*#__PURE__*/React.createElement(Reference, null, function (_ref3) {
     var ref = _ref3.ref;
     return children({
       ref: getMergedTriggerRef(ref, setTriggerRef),
       'aria-controls': id,
       'aria-expanded': isOpen,
-      'aria-haspopup': true
+      'aria-haspopup': role === 'dialog' && fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true
     });
   });
 };
@@ -139,7 +145,9 @@ export var PopupContent = function PopupContent(_ref4) {
     shouldFitContainer = _ref4.shouldFitContainer,
     shouldFitViewport = _ref4.shouldFitViewport,
     _ref4$shouldDisableGp = _ref4.shouldDisableGpuAcceleration,
-    shouldDisableGpuAcceleration = _ref4$shouldDisableGp === void 0 ? false : _ref4$shouldDisableGp;
+    shouldDisableGpuAcceleration = _ref4$shouldDisableGp === void 0 ? false : _ref4$shouldDisableGp,
+    role = _ref4.role,
+    titleId = _ref4.titleId;
   useEnsureIsInsidePopup();
   var isOpen = useContext(IsOpenContext);
   var id = useContext(IdContext);
@@ -186,7 +194,9 @@ export var PopupContent = function PopupContent(_ref4) {
     triggerRef: triggerRef,
     strategy: strategy,
     shouldFitViewport: shouldFitViewport,
-    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined
+    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined,
+    role: role,
+    titleId: titleId
   }));
   if (shouldRenderToParent) {
     return popperWrapper;

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';
@@ -33,10 +33,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' && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport && fg('platform_dst_nav4_flyoutmenuitem_render_to_parent')) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
   }, htmlAttributes, {
     ref: ref
   }), children);
@@ -163,6 +164,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/compositional/popup.d.ts

@@ -4,6 +4,7 @@ export type PopupProps = {
     children: React.ReactNode;
     isOpen?: boolean;
     id?: string;
+    role?: 'dialog';
 };
 /**
  * __Popup__
@@ -24,7 +25,7 @@ export type PopupProps = {
  * </Popup>
  * ```
  */
-export declare const Popup: ({ children, id: providedId, isOpen, }: PopupProps) => React.JSX.Element;
+export declare const Popup: ({ children, id: providedId, isOpen, role }: PopupProps) => React.JSX.Element;
 export type PopupTriggerProps = {
     children: (props: TriggerProps) => React.ReactNode;
 };
@@ -36,7 +37,7 @@ export type PopupTriggerProps = {
  * It must be a child of the Popup component.
  */
 export declare const PopupTrigger: ({ children }: PopupTriggerProps) => React.JSX.Element;
-type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport'> & {
+type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'titleId'> & {
     children: (props: ContentProps) => React.ReactNode;
     /**
      * ___Use with caution___
@@ -67,5 +68,5 @@ export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPo
  *
  * It must be a child of the Popup component.
  */
-export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, }: PopupContentProps) => React.JSX.Element | null;
+export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, titleId }: PopupContentProps) => React.JSX.Element | null;
 export {};

package/dist/types/types.d.ts

@@ -90,6 +90,11 @@ 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".

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

@@ -4,6 +4,7 @@ export type PopupProps = {
     children: React.ReactNode;
     isOpen?: boolean;
     id?: string;
+    role?: 'dialog';
 };
 /**
  * __Popup__
@@ -24,7 +25,7 @@ export type PopupProps = {
  * </Popup>
  * ```
  */
-export declare const Popup: ({ children, id: providedId, isOpen, }: PopupProps) => React.JSX.Element;
+export declare const Popup: ({ children, id: providedId, isOpen, role }: PopupProps) => React.JSX.Element;
 export type PopupTriggerProps = {
     children: (props: TriggerProps) => React.ReactNode;
 };
@@ -36,7 +37,7 @@ export type PopupTriggerProps = {
  * It must be a child of the Popup component.
  */
 export declare const PopupTrigger: ({ children }: PopupTriggerProps) => React.JSX.Element;
-type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport'> & {
+type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'titleId'> & {
     children: (props: ContentProps) => React.ReactNode;
     /**
      * ___Use with caution___
@@ -67,5 +68,5 @@ export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPo
  *
  * It must be a child of the Popup component.
  */
-export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, }: PopupContentProps) => React.JSX.Element | null;
+export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, titleId }: PopupContentProps) => React.JSX.Element | null;
 export {};

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

@@ -90,6 +90,11 @@ 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".

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.10.0",
+	"version": "4.12.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",
@@ -61,7 +61,7 @@
 		"@atlaskit/form": "^15.2.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^29.3.0",
-		"@atlaskit/link": "^3.2.0",
+		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/modal-dialog": "^14.9.0",
 		"@atlaskit/section-message": "^8.11.0",
 		"@atlaskit/textfield": "^8.2.0",
@@ -116,6 +116,12 @@
 		},
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"
+		},
+		"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/"