@atlaskit/popup 1.16.0 → 1.17.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/popup
 
+## 1.17.1
+
+### Patch Changes
+
+-   [#97895](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97895)
+    [`4f26610d9fbc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4f26610d9fbc) -
+    Adds auto-generated ID to popup and popup triggers for better coverage of assistive technologies
+    and `aria-controls`..
+
+## 1.17.0
+
+### Minor Changes
+
+-   [#91673](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91673)
+    [`e757c83a22ee`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e757c83a22ee) -
+    Add new props for improving accessibility: `role`, `label` and `titleId`.
+
 ## 1.16.0
 
 ### Minor Changes

package/dist/cjs/compositional/popup.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.PopupTrigger = exports.PopupContent = exports.Popup = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactUid = require("react-uid");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _layering = require("@atlaskit/layering");
@@ -51,13 +52,15 @@ var useEnsureIsInsidePopup = function useEnsureIsInsidePopup() {
  */
 var Popup = exports.Popup = function Popup(_ref) {
   var children = _ref.children,
-    id = _ref.id,
+    providedId = _ref.id,
     _ref$isOpen = _ref.isOpen,
     isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
+  var generatedId = (0, _reactUid.useUID)();
+  var id = providedId || generatedId;
   return /*#__PURE__*/_react.default.createElement(EnsureIsInsidePopupContext.Provider, {
     value: true
   }, /*#__PURE__*/_react.default.createElement(IdContext.Provider, {

package/dist/cjs/popper-wrapper.js

@@ -77,7 +77,10 @@ function PopperWrapper(_ref) {
     shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
     shouldRenderToParent = _ref.shouldRenderToParent,
     shouldDisableFocusLock = _ref.shouldDisableFocusLock,
-    strategy = _ref.strategy;
+    strategy = _ref.strategy,
+    role = _ref.role,
+    label = _ref.label,
+    titleId = _ref.titleId;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     popupRef = _useState2[0],
@@ -131,6 +134,9 @@ function PopperWrapper(_ref) {
       "data-ds--level": currentLevel,
       "data-placement": placement,
       "data-testid": testId,
+      role: role,
+      "aria-label": label,
+      "aria-labelledby": titleId,
       ref: function ref(node) {
         if (node) {
           if (typeof _ref3 === 'function') {

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 _reactUid = require("react-uid");
 var _layering = require("@atlaskit/layering");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
@@ -20,7 +21,7 @@ var _useGetMemoizedMergedTriggerRef = require("./use-get-memoized-merged-trigger
 var defaultLayer = _constants.layers.layer();
 var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var isOpen = _ref.isOpen,
-    id = _ref.id,
+    providedId = _ref.id,
     offset = _ref.offset,
     testId = _ref.testId,
     trigger = _ref.trigger,
@@ -45,12 +46,17 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
     _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
     shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
-    strategy = _ref.strategy;
+    strategy = _ref.strategy,
+    role = _ref.role,
+    label = _ref.label,
+    titleId = _ref.titleId;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
   var getMergedTriggerRef = (0, _useGetMemoizedMergedTriggerRef.useGetMemoizedMergedTriggerRef)();
+  var generatedId = (0, _reactUid.useUID)();
+  var id = providedId || generatedId;
   var renderPopperWrapper = (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
     isDisabled: false
   }, (0, _react2.jsx)(_popperWrapper.default, {
@@ -71,13 +77,16 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,
-    strategy: strategy
+    strategy: strategy,
+    role: role,
+    label: label,
+    titleId: titleId
   }));
   return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
     var ref = _ref2.ref;
     return trigger({
       ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
-      'aria-controls': id,
+      'aria-controls': isOpen ? id : undefined,
       'aria-expanded': isOpen,
       'aria-haspopup': true
     });

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

@@ -9,6 +9,9 @@ var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _layering = require("@atlaskit/layering");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+
 var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
@@ -17,7 +20,8 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
     capture = _ref.shouldUseCaptureOnOutsideClick,
     shouldCloseOnTab = _ref.shouldCloseOnTab;
   var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
-    isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
+    isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled,
+    currentLevel = _UNSAFE_useLayering.currentLevel;
   (0, _react.useEffect)(function () {
     if (!isOpen || !popupRef) {
       return _noop.default;
@@ -41,6 +45,10 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       if (!doesDomNodeExist) {
         return;
       }
+      if (isLayerDisabled() && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.iframe-layering_p3eb8')) {
+        //if it is a disabled layer, we need to disable its click listener.
+        return;
+      }
       var isClickOnPopup = popupRef && popupRef.contains(target);
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);
       if (!isClickOnPopup && !isClickOnTrigger) {
@@ -66,6 +74,26 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       type: 'keydown',
       listener: onKeyDown
     }]);
-    return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab]);
+
+    // bind onBlur event listener to fix popup not close when clicking on iframe outside
+    var unbindBlur = _noop.default;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.iframe-layering_p3eb8')) {
+      unbindBlur = (0, _bindEventListener.bind)(window, {
+        type: 'blur',
+        listener: function onBlur(e) {
+          if (isLayerDisabled() || !(document.activeElement instanceof HTMLIFrameElement)) {
+            return;
+          }
+          var wrapper = document.activeElement.closest('[data-ds--level]');
+          if (!wrapper || currentLevel > Number(wrapper.getAttribute('data-ds--level'))) {
+            closePopup(e);
+          }
+        }
+      });
+    }
+    return function () {
+      unbind();
+      unbindBlur();
+    };
+  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab, currentLevel]);
 };

package/dist/es2019/compositional/popup.js

@@ -1,4 +1,5 @@
 import React, { createContext, useContext, useState } from 'react';
+import { useUID } from 'react-uid';
 import invariant from 'tiny-invariant';
 import noop from '@atlaskit/ds-lib/noop';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
@@ -40,10 +41,12 @@ const useEnsureIsInsidePopup = () => {
  */
 export const Popup = ({
   children,
-  id,
+  id: providedId,
   isOpen = false
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
+  const generatedId = useUID();
+  const id = providedId || generatedId;
   return /*#__PURE__*/React.createElement(EnsureIsInsidePopupContext.Provider, {
     value: true
   }, /*#__PURE__*/React.createElement(IdContext.Provider, {

package/dist/es2019/popper-wrapper.js

@@ -66,7 +66,10 @@ function PopperWrapper({
   shouldUseCaptureOnOutsideClick,
   shouldRenderToParent,
   shouldDisableFocusLock,
-  strategy
+  strategy,
+  role,
+  label,
+  titleId
 }) {
   const [popupRef, setPopupRef] = useState(null);
   const [initialFocusRef, setInitialFocusRef] = useState(null);
@@ -115,6 +118,9 @@ function PopperWrapper({
       "data-ds--level": currentLevel,
       "data-placement": placement,
       "data-testid": testId,
+      role: role,
+      "aria-label": label,
+      "aria-labelledby": titleId,
       ref: node => {
         if (node) {
           if (typeof ref === 'function') {

package/dist/es2019/popup.js

@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
+import { useUID } from 'react-uid';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
@@ -11,7 +12,7 @@ import { useGetMemoizedMergedTriggerRef } from './use-get-memoized-merged-trigge
 const defaultLayer = layers.layer();
 export const Popup = /*#__PURE__*/memo(({
   isOpen,
-  id,
+  id: providedId,
   offset,
   testId,
   trigger,
@@ -28,10 +29,15 @@ export const Popup = /*#__PURE__*/memo(({
   shouldUseCaptureOnOutsideClick = false,
   shouldRenderToParent = false,
   shouldDisableFocusLock = false,
-  strategy
+  strategy,
+  role,
+  label,
+  titleId
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
   const getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
+  const generatedId = useUID();
+  const id = providedId || generatedId;
   const renderPopperWrapper = jsx(UNSAFE_LAYERING, {
     isDisabled: false
   }, jsx(PopperWrapper, {
@@ -52,14 +58,17 @@ export const Popup = /*#__PURE__*/memo(({
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,
-    strategy: strategy
+    strategy: strategy,
+    role: role,
+    label: label,
+    titleId: titleId
   }));
   return jsx(Manager, null, jsx(Reference, null, ({
     ref
   }) => {
     return trigger({
       ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
-      'aria-controls': id,
+      'aria-controls': isOpen ? id : undefined,
       'aria-expanded': isOpen,
       'aria-haspopup': true
     });

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

@@ -1,7 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import { useEffect } from 'react';
-import { bindAll } from 'bind-event-listener';
+import { bind, bindAll } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const useCloseManager = ({
   isOpen,
   onClose,
@@ -11,7 +13,8 @@ export const useCloseManager = ({
   shouldCloseOnTab
 }) => {
   const {
-    isLayerDisabled
+    isLayerDisabled,
+    currentLevel
   } = UNSAFE_useLayering();
   useEffect(() => {
     if (!isOpen || !popupRef) {
@@ -38,6 +41,10 @@ export const useCloseManager = ({
       if (!doesDomNodeExist) {
         return;
       }
+      if (isLayerDisabled() && getBooleanFF('platform.design-system-team.iframe-layering_p3eb8')) {
+        //if it is a disabled layer, we need to disable its click listener.
+        return;
+      }
       const isClickOnPopup = popupRef && popupRef.contains(target);
       const isClickOnTrigger = triggerRef && triggerRef.contains(target);
       if (!isClickOnPopup && !isClickOnTrigger) {
@@ -65,6 +72,26 @@ export const useCloseManager = ({
       type: 'keydown',
       listener: onKeyDown
     }]);
-    return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab]);
+
+    // bind onBlur event listener to fix popup not close when clicking on iframe outside
+    let unbindBlur = noop;
+    if (getBooleanFF('platform.design-system-team.iframe-layering_p3eb8')) {
+      unbindBlur = bind(window, {
+        type: 'blur',
+        listener: function onBlur(e) {
+          if (isLayerDisabled() || !(document.activeElement instanceof HTMLIFrameElement)) {
+            return;
+          }
+          const wrapper = document.activeElement.closest('[data-ds--level]');
+          if (!wrapper || currentLevel > Number(wrapper.getAttribute('data-ds--level'))) {
+            closePopup(e);
+          }
+        }
+      });
+    }
+    return () => {
+      unbind();
+      unbindBlur();
+    };
+  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab, currentLevel]);
 };

package/dist/esm/compositional/popup.js

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { createContext, useContext, useState } from 'react';
+import { useUID } from 'react-uid';
 import invariant from 'tiny-invariant';
 import noop from '@atlaskit/ds-lib/noop';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
@@ -41,13 +42,15 @@ var useEnsureIsInsidePopup = function useEnsureIsInsidePopup() {
  */
 export var Popup = function Popup(_ref) {
   var children = _ref.children,
-    id = _ref.id,
+    providedId = _ref.id,
     _ref$isOpen = _ref.isOpen,
     isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
+  var generatedId = useUID();
+  var id = providedId || generatedId;
   return /*#__PURE__*/React.createElement(EnsureIsInsidePopupContext.Provider, {
     value: true
   }, /*#__PURE__*/React.createElement(IdContext.Provider, {

package/dist/esm/popper-wrapper.js

@@ -70,7 +70,10 @@ function PopperWrapper(_ref) {
     shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
     shouldRenderToParent = _ref.shouldRenderToParent,
     shouldDisableFocusLock = _ref.shouldDisableFocusLock,
-    strategy = _ref.strategy;
+    strategy = _ref.strategy,
+    role = _ref.role,
+    label = _ref.label,
+    titleId = _ref.titleId;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     popupRef = _useState2[0],
@@ -124,6 +127,9 @@ function PopperWrapper(_ref) {
       "data-ds--level": currentLevel,
       "data-placement": placement,
       "data-testid": testId,
+      role: role,
+      "aria-label": label,
+      "aria-labelledby": titleId,
       ref: function ref(node) {
         if (node) {
           if (typeof _ref3 === 'function') {

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 { useUID } from 'react-uid';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
@@ -12,7 +13,7 @@ import { useGetMemoizedMergedTriggerRef } from './use-get-memoized-merged-trigge
 var defaultLayer = layers.layer();
 export var Popup = /*#__PURE__*/memo(function (_ref) {
   var isOpen = _ref.isOpen,
-    id = _ref.id,
+    providedId = _ref.id,
     offset = _ref.offset,
     testId = _ref.testId,
     trigger = _ref.trigger,
@@ -37,12 +38,17 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
     _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
     shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
-    strategy = _ref.strategy;
+    strategy = _ref.strategy,
+    role = _ref.role,
+    label = _ref.label,
+    titleId = _ref.titleId;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
   var getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
+  var generatedId = useUID();
+  var id = providedId || generatedId;
   var renderPopperWrapper = jsx(UNSAFE_LAYERING, {
     isDisabled: false
   }, jsx(PopperWrapper, {
@@ -63,13 +69,16 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     shouldRenderToParent: shouldRenderToParent,
     shouldDisableFocusLock: shouldDisableFocusLock,
     triggerRef: triggerRef,
-    strategy: strategy
+    strategy: strategy,
+    role: role,
+    label: label,
+    titleId: titleId
   }));
   return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
     var ref = _ref2.ref;
     return trigger({
       ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
-      'aria-controls': id,
+      'aria-controls': isOpen ? id : undefined,
       'aria-expanded': isOpen,
       'aria-haspopup': true
     });

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

@@ -1,7 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import { useEffect } from 'react';
-import { bindAll } from 'bind-event-listener';
+import { bind, bindAll } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var useCloseManager = function useCloseManager(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
@@ -10,7 +12,8 @@ export var useCloseManager = function useCloseManager(_ref) {
     capture = _ref.shouldUseCaptureOnOutsideClick,
     shouldCloseOnTab = _ref.shouldCloseOnTab;
   var _UNSAFE_useLayering = UNSAFE_useLayering(),
-    isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
+    isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled,
+    currentLevel = _UNSAFE_useLayering.currentLevel;
   useEffect(function () {
     if (!isOpen || !popupRef) {
       return noop;
@@ -34,6 +37,10 @@ export var useCloseManager = function useCloseManager(_ref) {
       if (!doesDomNodeExist) {
         return;
       }
+      if (isLayerDisabled() && getBooleanFF('platform.design-system-team.iframe-layering_p3eb8')) {
+        //if it is a disabled layer, we need to disable its click listener.
+        return;
+      }
       var isClickOnPopup = popupRef && popupRef.contains(target);
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);
       if (!isClickOnPopup && !isClickOnTrigger) {
@@ -59,6 +66,26 @@ export var useCloseManager = function useCloseManager(_ref) {
       type: 'keydown',
       listener: onKeyDown
     }]);
-    return unbind;
-  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab]);
+
+    // bind onBlur event listener to fix popup not close when clicking on iframe outside
+    var unbindBlur = noop;
+    if (getBooleanFF('platform.design-system-team.iframe-layering_p3eb8')) {
+      unbindBlur = bind(window, {
+        type: 'blur',
+        listener: function onBlur(e) {
+          if (isLayerDisabled() || !(document.activeElement instanceof HTMLIFrameElement)) {
+            return;
+          }
+          var wrapper = document.activeElement.closest('[data-ds--level]');
+          if (!wrapper || currentLevel > Number(wrapper.getAttribute('data-ds--level'))) {
+            closePopup(e);
+          }
+        }
+      });
+    }
+    return function () {
+      unbind();
+      unbindBlur();
+    };
+  }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled, shouldCloseOnTab, currentLevel]);
 };

package/dist/types/compositional/popup.d.ts

@@ -24,7 +24,7 @@ export type PopupProps = {
  * </Popup>
  * ```
  */
-export declare const Popup: ({ children, id, isOpen }: PopupProps) => JSX.Element;
+export declare const Popup: ({ children, id: providedId, isOpen, }: PopupProps) => JSX.Element;
 export type PopupTriggerProps = {
     children: (props: TriggerProps) => React.ReactNode;
 };

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, shouldRenderToParent, shouldDisableFocusLock, strategy, }: PopperWrapperProps): jsx.JSX.Element;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, strategy, role, label, titleId, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

package/dist/types/popup.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
 import { type FC } from 'react';
-import { PopupProps } from './types';
+import { type PopupProps } from './types';
 export declare const Popup: FC<PopupProps>;
 export default Popup;

package/dist/types/types.d.ts

@@ -61,6 +61,11 @@ export interface PopupComponentProps {
      * The default is `false`.
      */
     shouldRenderToParent?: boolean;
+    /**
+     * Use this to set the accessibility role for the popup.
+     * We strongly recommend using only `menu` or `dialog`.
+     */
+    role?: string;
 }
 interface BaseProps {
     /**
@@ -145,7 +150,7 @@ interface BaseProps {
      */
     shouldRenderToParent?: boolean;
     /**
-     * This allows the Popup disable focus lock. It will only work when `shouldRenderToParent` is `true`.
+     * This allows the popup disable focus lock. It will only work when `shouldRenderToParent` is `true`.
      * The default is `false`.
      */
     shouldDisableFocusLock?: boolean;
@@ -154,6 +159,22 @@ interface BaseProps {
      * The default is `fixed`.
      */
     strategy?: 'absolute' | 'fixed';
+    /**
+     * Use this to set the accessibility role for the popup.
+     * We strongly recommend using only `menu` or `dialog`.
+     * Must be used along with `label` or `titleId`.
+     */
+    role?: string;
+    /**
+     * Refers to an `aria-label` attribute. Sets an accessible name for the popup to announce it to users of assistive technology.
+     * Usage of either this, or the `titleId` attribute is strongly recommended.
+     */
+    label?: string;
+    /**
+     * Id referenced by the popup `aria-labelledby` attribute.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
 }
 export interface PopupProps extends BaseProps {
     /**

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

@@ -1,2 +1,2 @@
-import { CloseManagerHook } from './types';
+import { type CloseManagerHook } from './types';
 export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, shouldCloseOnTab, }: CloseManagerHook) => void;

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

@@ -24,7 +24,7 @@ export type PopupProps = {
  * </Popup>
  * ```
  */
-export declare const Popup: ({ children, id, isOpen }: PopupProps) => JSX.Element;
+export declare const Popup: ({ children, id: providedId, isOpen, }: PopupProps) => JSX.Element;
 export type PopupTriggerProps = {
     children: (props: TriggerProps) => React.ReactNode;
 };

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, shouldRenderToParent, shouldDisableFocusLock, strategy, }: PopperWrapperProps): jsx.JSX.Element;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, strategy, role, label, titleId, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
 import { type FC } from 'react';
-import { PopupProps } from './types';
+import { type PopupProps } from './types';
 export declare const Popup: FC<PopupProps>;
 export default Popup;

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

@@ -61,6 +61,11 @@ export interface PopupComponentProps {
      * The default is `false`.
      */
     shouldRenderToParent?: boolean;
+    /**
+     * Use this to set the accessibility role for the popup.
+     * We strongly recommend using only `menu` or `dialog`.
+     */
+    role?: string;
 }
 interface BaseProps {
     /**
@@ -148,7 +153,7 @@ interface BaseProps {
      */
     shouldRenderToParent?: boolean;
     /**
-     * This allows the Popup disable focus lock. It will only work when `shouldRenderToParent` is `true`.
+     * This allows the popup disable focus lock. It will only work when `shouldRenderToParent` is `true`.
      * The default is `false`.
      */
     shouldDisableFocusLock?: boolean;
@@ -157,6 +162,22 @@ interface BaseProps {
      * The default is `fixed`.
      */
     strategy?: 'absolute' | 'fixed';
+    /**
+     * Use this to set the accessibility role for the popup.
+     * We strongly recommend using only `menu` or `dialog`.
+     * Must be used along with `label` or `titleId`.
+     */
+    role?: string;
+    /**
+     * Refers to an `aria-label` attribute. Sets an accessible name for the popup to announce it to users of assistive technology.
+     * Usage of either this, or the `titleId` attribute is strongly recommended.
+     */
+    label?: string;
+    /**
+     * Id referenced by the popup `aria-labelledby` attribute.
+     * Usage of either this, or the `label` attribute is strongly recommended.
+     */
+    titleId?: string;
 }
 export interface PopupProps extends BaseProps {
     /**

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

@@ -1,2 +1,2 @@
-import { CloseManagerHook } from './types';
+import { type CloseManagerHook } from './types';
 export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, shouldCloseOnTab, }: CloseManagerHook) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.16.0",
+  "version": "1.17.1",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,15 +43,16 @@
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/layering": "^0.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/popper": "^5.5.0",
-    "@atlaskit/portal": "^4.4.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/popper": "^5.6.0",
+    "@atlaskit/portal": "^4.5.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^3.0.0",
     "focus-trap": "^2.4.5",
     "memoize-one": "^6.0.0",
+    "react-uid": "^2.2.0",
     "tiny-invariant": "^1.2.0"
   },
   "peerDependencies": {
@@ -61,10 +62,11 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/button": "^17.14.0",
-    "@atlaskit/icon": "^22.1.0",
+    "@atlaskit/button": "^17.15.0",
+    "@atlaskit/icon": "^22.3.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/toggle": "^13.0.0",
+    "@atlaskit/textfield": "^6.3.0",
+    "@atlaskit/toggle": "^13.1.0",
     "@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": "*",
@@ -107,6 +109,9 @@
   "platform-feature-flags": {
     "platform.design-system-team.iframe_gojiv": {
       "type": "boolean"
+    },
+    "platform.design-system-team.iframe-layering_p3eb8": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/popup/",