@atlaskit/popup 1.11.4 → 1.11.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [#40944](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40944) [`c6b7d977655`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c6b7d977655) - Memoize the Popup Trigger's ref to avoid unnecessary renders.
+
 ## 1.11.4
 
 ### 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/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 _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _layering = require("@atlaskit/layering");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
@@ -47,6 +48,33 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
+
+  /*
+   * Get a memoized functional ref for use within this Popup's Trigger.
+   * This is still very volatile to change as `prop.isOpen` will regularly change, but it's better than nothing.
+   * This is memoized within our component as to not be shared across all Popup instances, just this one.
+   *
+   * This is complex because the inputs are split across three different scopes:
+   *  - `props.isOpen`
+   *  - `useState.setTriggerRef`
+   *  - `renderProps.ref`
+   */
+  var _useState3 = (0, _react.useState)(function () {
+      return (0, _memoizeOne.default)(function (ref, setTriggerRef, isOpen) {
+        return function (node) {
+          if (node && isOpen) {
+            if (typeof ref === 'function') {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            setTriggerRef(node);
+          }
+        };
+      });
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+    getMergedTriggerRef = _useState4[0];
   var renderPopperWrapper = (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
     isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.layering_popup_1cnzt') ? false : true
   }, (0, _react2.jsx)(_popperWrapper.default, {
@@ -68,18 +96,9 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     triggerRef: triggerRef
   }));
   return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
-    var _ref3 = _ref2.ref;
+    var ref = _ref2.ref;
     return trigger({
-      ref: function ref(node) {
-        if (node && isOpen) {
-          if (typeof _ref3 === 'function') {
-            _ref3(node);
-          } else {
-            _ref3.current = node;
-          }
-          setTriggerRef(node);
-        }
-      },
+      ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
       'aria-controls': id,
       'aria-expanded': isOpen,
       'aria-haspopup': true

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/es2019/popup.js

@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
+import memoizeOne from 'memoize-one';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
@@ -29,6 +30,29 @@ export const Popup = /*#__PURE__*/memo(({
   shouldRenderToParent = false
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
+
+  /*
+   * Get a memoized functional ref for use within this Popup's Trigger.
+   * This is still very volatile to change as `prop.isOpen` will regularly change, but it's better than nothing.
+   * This is memoized within our component as to not be shared across all Popup instances, just this one.
+   *
+   * This is complex because the inputs are split across three different scopes:
+   *  - `props.isOpen`
+   *  - `useState.setTriggerRef`
+   *  - `renderProps.ref`
+   */
+  const [getMergedTriggerRef] = useState(() => memoizeOne((ref, setTriggerRef, isOpen) => {
+    return node => {
+      if (node && isOpen) {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+        setTriggerRef(node);
+      }
+    };
+  }));
   const renderPopperWrapper = jsx(UNSAFE_LAYERING, {
     isDisabled: getBooleanFF('platform.design-system-team.layering_popup_1cnzt') ? false : true
   }, jsx(PopperWrapper, {
@@ -53,16 +77,7 @@ export const Popup = /*#__PURE__*/memo(({
     ref
   }) => {
     return trigger({
-      ref: node => {
-        if (node && isOpen) {
-          if (typeof ref === 'function') {
-            ref(node);
-          } else {
-            ref.current = node;
-          }
-          setTriggerRef(node);
-        }
-      },
+      ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
       'aria-controls': id,
       'aria-expanded': isOpen,
       'aria-haspopup': true

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/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 memoizeOne from 'memoize-one';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
@@ -39,6 +40,33 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
+
+  /*
+   * Get a memoized functional ref for use within this Popup's Trigger.
+   * This is still very volatile to change as `prop.isOpen` will regularly change, but it's better than nothing.
+   * This is memoized within our component as to not be shared across all Popup instances, just this one.
+   *
+   * This is complex because the inputs are split across three different scopes:
+   *  - `props.isOpen`
+   *  - `useState.setTriggerRef`
+   *  - `renderProps.ref`
+   */
+  var _useState3 = useState(function () {
+      return memoizeOne(function (ref, setTriggerRef, isOpen) {
+        return function (node) {
+          if (node && isOpen) {
+            if (typeof ref === 'function') {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            setTriggerRef(node);
+          }
+        };
+      });
+    }),
+    _useState4 = _slicedToArray(_useState3, 1),
+    getMergedTriggerRef = _useState4[0];
   var renderPopperWrapper = jsx(UNSAFE_LAYERING, {
     isDisabled: getBooleanFF('platform.design-system-team.layering_popup_1cnzt') ? false : true
   }, jsx(PopperWrapper, {
@@ -60,18 +88,9 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     triggerRef: triggerRef
   }));
   return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
-    var _ref3 = _ref2.ref;
+    var ref = _ref2.ref;
     return trigger({
-      ref: function ref(node) {
-        if (node && isOpen) {
-          if (typeof _ref3 === 'function') {
-            _ref3(node);
-          } else {
-            _ref3.current = node;
-          }
-          setTriggerRef(node);
-        }
-      },
+      ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
       'aria-controls': id,
       'aria-expanded': isOpen,
       'aria-haspopup': true

package/dist/types/popup.d.ts

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.11.4",
+  "version": "1.11.6",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -44,11 +44,12 @@
     "@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",
-    "focus-trap": "^2.4.5"
+    "focus-trap": "^2.4.5",
+    "memoize-one": "^6.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.0",
@@ -57,8 +58,8 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/button": "^16.13.0",
-    "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/button": "^17.2.0",
+    "@atlaskit/icon": "^22.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -101,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)
-
-```