@atlaskit/popup 1.17.0 → 1.17.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

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/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,
@@ -54,6 +55,8 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     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, {
@@ -83,7 +86,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     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/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,
@@ -35,6 +36,8 @@ export const Popup = /*#__PURE__*/memo(({
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
   const getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
+  const generatedId = useUID();
+  const id = providedId || generatedId;
   const renderPopperWrapper = jsx(UNSAFE_LAYERING, {
     isDisabled: false
   }, jsx(PopperWrapper, {
@@ -65,7 +68,7 @@ export const Popup = /*#__PURE__*/memo(({
   }) => {
     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/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,
@@ -46,6 +47,8 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     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, {
@@ -75,7 +78,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     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/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/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/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/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.17.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/",