@atlaskit/popup 1.11.5 → 1.11.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/popup
 
+## 1.11.6
+
+### Patch Changes
+
+- [#67435](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67435) [`7949bd7f5cb6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7949bd7f5cb6) - Support to disable pointer-events on iframe when popup is open to fix issue of clicking on iframe won't close popup
+
 ## 1.11.5
 
 ### Patch Changes

package/__perf__/closed.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Button from '@atlaskit/button';
+import Button from '@atlaskit/button/new';
 
 import Popup from '../src';
 

package/__perf__/open.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Button from '@atlaskit/button';
+import Button from '@atlaskit/button/new';
 
 import Popup from '../src';
 

package/dist/cjs/popper-wrapper.js

@@ -11,6 +11,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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 _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
@@ -35,6 +37,15 @@ var popupStyles = (0, _react2.css)((_css = {
 var popupOverflowStyles = (0, _react2.css)({
   overflow: 'auto'
 });
+
+// disables iframe pointer events while popup is open, except if iframe is nested inside popup
+// solves an issue of popup not being closed on iframe click
+var blockPointerEventsOnExternalIframeStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'iframe:not([data-ds--level] iframe)': {
+    pointerEvents: 'none'
+  }
+});
 var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var shouldRenderToParent = props.shouldRenderToParent,
     children = props.children,
@@ -84,6 +95,8 @@ function PopperWrapper(_ref) {
     triggerRef: triggerRef,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick
   });
+  var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
+    currentLevel = _UNSAFE_useLayering.currentLevel;
   var modifiers = (0, _react.useMemo)(function () {
     return [{
       name: 'flip',
@@ -106,6 +119,7 @@ function PopperWrapper(_ref) {
       update = _ref2.update;
     return (0, _react2.jsx)(PopupContainer, {
       id: id,
+      "data-ds--level": currentLevel,
       "data-placement": placement,
       "data-testid": testId,
       ref: function ref(node) {
@@ -124,7 +138,9 @@ function PopperWrapper(_ref) {
       ,
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent
-    }, (0, _react2.jsx)(_repositionOnUpdate.RepositionOnUpdate, {
+    }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.iframe_gojiv') && (0, _react2.jsx)(_react2.Global, {
+      styles: blockPointerEventsOnExternalIframeStyles
+    }), (0, _react2.jsx)(_repositionOnUpdate.RepositionOnUpdate, {
       update: update
     }, content({
       update: update,

package/dist/es2019/popper-wrapper.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef, useMemo, useState } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css, Global, jsx } from '@emotion/react';
+import { UNSAFE_useLayering } from '@atlaskit/layering';
+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';
@@ -25,6 +27,15 @@ const popupStyles = css({
 const popupOverflowStyles = css({
   overflow: 'auto'
 });
+
+// disables iframe pointer events while popup is open, except if iframe is nested inside popup
+// solves an issue of popup not being closed on iframe click
+const blockPointerEventsOnExternalIframeStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'iframe:not([data-ds--level] iframe)': {
+    pointerEvents: 'none'
+  }
+});
 const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     shouldRenderToParent,
@@ -68,6 +79,9 @@ function PopperWrapper({
     triggerRef,
     shouldUseCaptureOnOutsideClick
   });
+  const {
+    currentLevel
+  } = UNSAFE_useLayering();
   const modifiers = useMemo(() => [{
     name: 'flip',
     enabled: shouldFlip,
@@ -89,6 +103,7 @@ function PopperWrapper({
   }) => {
     return jsx(PopupContainer, {
       id: id,
+      "data-ds--level": currentLevel,
       "data-placement": placement,
       "data-testid": testId,
       ref: node => {
@@ -107,7 +122,9 @@ function PopperWrapper({
       ,
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent
-    }, jsx(RepositionOnUpdate, {
+    }, getBooleanFF('platform.design-system-team.iframe_gojiv') && jsx(Global, {
+      styles: blockPointerEventsOnExternalIframeStyles
+    }), jsx(RepositionOnUpdate, {
       update: update
     }, content({
       update,

package/dist/esm/popper-wrapper.js

@@ -6,7 +6,9 @@ var _excluded = ["shouldRenderToParent", "children"];
 var _css;
 /** @jsx jsx */
 import { forwardRef, useMemo, useState } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css, Global, jsx } from '@emotion/react';
+import { UNSAFE_useLayering } from '@atlaskit/layering';
+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';
@@ -28,6 +30,15 @@ var popupStyles = css((_css = {
 var popupOverflowStyles = css({
   overflow: 'auto'
 });
+
+// disables iframe pointer events while popup is open, except if iframe is nested inside popup
+// solves an issue of popup not being closed on iframe click
+var blockPointerEventsOnExternalIframeStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'iframe:not([data-ds--level] iframe)': {
+    pointerEvents: 'none'
+  }
+});
 var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var shouldRenderToParent = props.shouldRenderToParent,
     children = props.children,
@@ -77,6 +88,8 @@ function PopperWrapper(_ref) {
     triggerRef: triggerRef,
     shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick
   });
+  var _UNSAFE_useLayering = UNSAFE_useLayering(),
+    currentLevel = _UNSAFE_useLayering.currentLevel;
   var modifiers = useMemo(function () {
     return [{
       name: 'flip',
@@ -99,6 +112,7 @@ function PopperWrapper(_ref) {
       update = _ref2.update;
     return jsx(PopupContainer, {
       id: id,
+      "data-ds--level": currentLevel,
       "data-placement": placement,
       "data-testid": testId,
       ref: function ref(node) {
@@ -117,7 +131,9 @@ function PopperWrapper(_ref) {
       ,
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent
-    }, jsx(RepositionOnUpdate, {
+    }, getBooleanFF('platform.design-system-team.iframe_gojiv') && jsx(Global, {
+      styles: blockPointerEventsOnExternalIframeStyles
+    }), jsx(RepositionOnUpdate, {
       update: update
     }, content({
       update: update,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.11.5",
+  "version": "1.11.6",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.33.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -58,7 +58,7 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/button": "^16.17.0",
+    "@atlaskit/button": "^17.2.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -102,6 +102,9 @@
   "platform-feature-flags": {
     "platform.design-system-team.layering_popup_1cnzt": {
       "type": "boolean"
+    },
+    "platform.design-system-team.iframe_gojiv": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/popup/",

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

@@ -1,82 +0,0 @@
-## API Report File for "@atlaskit/popup"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { ComponentType } from 'react';
-import { CSSProperties } from 'react';
-import { Dispatch } from 'react';
-import { FC } from 'react';
-import { Placement } from '@atlaskit/popper';
-import { PopperChildrenProps } from '@atlaskit/popper';
-import { default as React_2 } from 'react';
-import { ReactNode } from 'react';
-import { Ref } from 'react';
-import { SetStateAction } from 'react';
-
-// @public (undocumented)
-interface BaseProps {
-    autoFocus?: boolean;
-    boundary?: 'clippingParents' | HTMLElement;
-    content: (props: ContentProps) => React_2.ReactNode;
-    fallbackPlacements?: Placement[];
-    id?: string;
-    isOpen: boolean;
-    offset?: [number, number];
-    onClose?(event: Event | React_2.KeyboardEvent | React_2.MouseEvent): void;
-    placement?: Placement;
-    popupComponent?: ComponentType<PopupComponentProps>;
-    rootBoundary?: 'document' | 'viewport';
-    shouldFlip?: boolean;
-    shouldRenderToParent?: boolean;
-    shouldUseCaptureOnOutsideClick?: boolean;
-    testId?: string;
-}
-
-// @public (undocumented)
-export interface ContentProps {
-    isOpen: boolean;
-    onClose?: BaseProps['onClose'];
-    setInitialFocusRef: Dispatch<SetStateAction<HTMLElement | null>>;
-    update: PopperChildrenProps['update'];
-}
-
-// @public (undocumented)
-const Popup: FC<PopupProps>;
-export { Popup }
-export default Popup;
-
-// @public (undocumented)
-export interface PopupComponentProps {
-    'data-placement': Placement;
-    'data-testid'?: string;
-    children: ReactNode;
-    id?: string;
-    ref: Ref<HTMLDivElement>;
-    shouldRenderToParent?: boolean;
-    style: CSSProperties;
-    tabIndex: number | undefined;
-}
-
-// @public (undocumented)
-export interface PopupProps extends BaseProps {
-    trigger: (props: TriggerProps) => React_2.ReactNode;
-    zIndex?: number;
-}
-
-// @public (undocumented)
-export interface TriggerProps {
-    // (undocumented)
-    'aria-controls'?: string;
-    // (undocumented)
-    'aria-expanded': boolean;
-    // (undocumented)
-    'aria-haspopup': boolean;
-    // (undocumented)
-    ref: Ref<any>;
-}
-
-// (No @packageDocumentation comment for this package)
-
-```