@atlaskit/popup 1.20.1 → 1.20.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/popup
 
+## 1.20.3
+
+### Patch Changes
+
+- [#123803](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/123803)
+  [`741dadf4fa8f9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/741dadf4fa8f9) -
+  Added modifiers prop to the popup
+
+## 1.20.2
+
+### Patch Changes
+
+- [#122722](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122722)
+  [`512798d699bd1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/512798d699bd1) -
+  Disable onClick event if popup is a disabled layer
+
 ## 1.20.1
 
 ### Patch Changes

package/__perf__/default.tsx

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/cjs/popper-wrapper.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -24,8 +25,8 @@ var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children"];
 var _css;
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var popupFullWidthStyles = (0, _react2.css)({
   width: '100%'
@@ -89,7 +90,8 @@ function PopperWrapper(_ref) {
     strategy = _ref.strategy,
     role = _ref.role,
     label = _ref.label,
-    titleId = _ref.titleId;
+    titleId = _ref.titleId,
+    modifiers = _ref.modifiers;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     popupRef = _useState2[0],
@@ -117,7 +119,7 @@ function PopperWrapper(_ref) {
   });
   var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
     currentLevel = _UNSAFE_useLayering.currentLevel;
-  var modifiers = (0, _react.useMemo)(function () {
+  var mergedModifiers = (0, _react.useMemo)(function () {
     return [{
       name: 'flip',
       enabled: shouldFlip,
@@ -126,12 +128,12 @@ function PopperWrapper(_ref) {
         boundary: boundary,
         fallbackPlacements: fallbackPlacements
       }
-    }];
-  }, [shouldFlip, rootBoundary, boundary, fallbackPlacements]);
+    }].concat((0, _toConsumableArray2.default)(modifiers || []));
+  }, [shouldFlip, rootBoundary, boundary, fallbackPlacements, modifiers]);
   return (0, _react2.jsx)(_popper.Popper, {
     placement: placement,
     offset: offset,
-    modifiers: modifiers,
+    modifiers: mergedModifiers,
     strategy: strategy
   }, function (_ref2) {
     var _ref3 = _ref2.ref,
@@ -165,7 +167,7 @@ function PopperWrapper(_ref) {
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer
-    }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.iframe_gojiv') && (0, _react2.jsx)(_react2.Global, {
+    }, (0, _platformFeatureFlags.fg)('platform.design-system-team.iframe_gojiv') && (0, _react2.jsx)(_react2.Global, {
       styles: blockPointerEventsOnExternalIframeStyles
     }), (0, _react2.jsx)(_repositionOnUpdate.RepositionOnUpdate, {
       update: update

package/dist/cjs/popup.js

@@ -19,8 +19,8 @@ var _useGetMemoizedMergedTriggerRef = require("./use-get-memoized-merged-trigger
 /* eslint-disable @repo/internal/react/require-jsdoc */
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -60,7 +60,8 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     strategy = _ref.strategy,
     role = _ref.role,
     label = _ref.label,
-    titleId = _ref.titleId;
+    titleId = _ref.titleId,
+    modifiers = _ref.modifiers;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -92,7 +93,8 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
     label: label,
-    titleId: titleId
+    titleId: titleId,
+    modifiers: modifiers
   }));
   var popupContent = (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
     var ref = _ref2.ref;

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

@@ -9,7 +9,6 @@ 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) {
@@ -45,7 +44,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       if (!doesDomNodeExist) {
         return;
       }
-      if (isLayerDisabled() && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.iframe-layering_p3eb8')) {
+      if (isLayerDisabled()) {
         //if it is a disabled layer, we need to disable its click listener.
         return;
       }
@@ -77,20 +76,18 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
 
     // 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);
-          }
+    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();

package/dist/es2019/popper-wrapper.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { forwardRef, useMemo, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -69,6 +69,7 @@ function PopperWrapper({
   rootBoundary,
   shouldFlip,
   placement = 'auto',
+  // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
   popupComponent: PopupContainer = DefaultPopupComponent,
   autoFocus = true,
   triggerRef,
@@ -79,7 +80,8 @@ function PopperWrapper({
   strategy,
   role,
   label,
-  titleId
+  titleId,
+  modifiers
 }) {
   const [popupRef, setPopupRef] = useState(null);
   const [initialFocusRef, setInitialFocusRef] = useState(null);
@@ -103,7 +105,7 @@ function PopperWrapper({
   const {
     currentLevel
   } = UNSAFE_useLayering();
-  const modifiers = useMemo(() => [{
+  const mergedModifiers = useMemo(() => [{
     name: 'flip',
     enabled: shouldFlip,
     options: {
@@ -111,11 +113,11 @@ function PopperWrapper({
       boundary,
       fallbackPlacements
     }
-  }], [shouldFlip, rootBoundary, boundary, fallbackPlacements]);
+  }, ...(modifiers || [])], [shouldFlip, rootBoundary, boundary, fallbackPlacements, modifiers]);
   return jsx(Popper, {
     placement: placement,
     offset: offset,
-    modifiers: modifiers,
+    modifiers: mergedModifiers,
     strategy: strategy
   }, ({
     ref,
@@ -150,7 +152,7 @@ function PopperWrapper({
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer
-    }, getBooleanFF('platform.design-system-team.iframe_gojiv') && jsx(Global, {
+    }, fg('platform.design-system-team.iframe_gojiv') && jsx(Global, {
       styles: blockPointerEventsOnExternalIframeStyles
     }), jsx(RepositionOnUpdate, {
       update: update

package/dist/es2019/popup.js

@@ -1,8 +1,8 @@
 /* eslint-disable @repo/internal/react/require-jsdoc */
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { memo, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -42,7 +42,8 @@ export const Popup = /*#__PURE__*/memo(({
   strategy,
   role,
   label,
-  titleId
+  titleId,
+  modifiers
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
   const getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
@@ -72,7 +73,8 @@ export const Popup = /*#__PURE__*/memo(({
     strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
     label: label,
-    titleId: titleId
+    titleId: titleId,
+    modifiers: modifiers
   }));
   const popupContent = jsx(Manager, null, jsx(Reference, null, ({
     ref

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

@@ -3,7 +3,6 @@ import { useEffect } from 'react';
 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,
@@ -41,7 +40,7 @@ export const useCloseManager = ({
       if (!doesDomNodeExist) {
         return;
       }
-      if (isLayerDisabled() && getBooleanFF('platform.design-system-team.iframe-layering_p3eb8')) {
+      if (isLayerDisabled()) {
         //if it is a disabled layer, we need to disable its click listener.
         return;
       }
@@ -75,20 +74,18 @@ export const useCloseManager = ({
 
     // 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);
-          }
+    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();

package/dist/esm/popper-wrapper.js

@@ -1,3 +1,4 @@
+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";
@@ -6,14 +7,14 @@ var _excluded = ["shouldRenderToParent", "shouldFitContainer", "children"];
 var _css;
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { forwardRef, useMemo, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { UNSAFE_useLayering } from '@atlaskit/layering';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
@@ -83,7 +84,8 @@ function PopperWrapper(_ref) {
     strategy = _ref.strategy,
     role = _ref.role,
     label = _ref.label,
-    titleId = _ref.titleId;
+    titleId = _ref.titleId,
+    modifiers = _ref.modifiers;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     popupRef = _useState2[0],
@@ -111,7 +113,7 @@ function PopperWrapper(_ref) {
   });
   var _UNSAFE_useLayering = UNSAFE_useLayering(),
     currentLevel = _UNSAFE_useLayering.currentLevel;
-  var modifiers = useMemo(function () {
+  var mergedModifiers = useMemo(function () {
     return [{
       name: 'flip',
       enabled: shouldFlip,
@@ -120,12 +122,12 @@ function PopperWrapper(_ref) {
         boundary: boundary,
         fallbackPlacements: fallbackPlacements
       }
-    }];
-  }, [shouldFlip, rootBoundary, boundary, fallbackPlacements]);
+    }].concat(_toConsumableArray(modifiers || []));
+  }, [shouldFlip, rootBoundary, boundary, fallbackPlacements, modifiers]);
   return jsx(Popper, {
     placement: placement,
     offset: offset,
-    modifiers: modifiers,
+    modifiers: mergedModifiers,
     strategy: strategy
   }, function (_ref2) {
     var _ref3 = _ref2.ref,
@@ -159,7 +161,7 @@ function PopperWrapper(_ref) {
       tabIndex: autoFocus ? 0 : undefined,
       shouldRenderToParent: shouldRenderToParent,
       shouldFitContainer: shouldFitContainer
-    }, getBooleanFF('platform.design-system-team.iframe_gojiv') && jsx(Global, {
+    }, fg('platform.design-system-team.iframe_gojiv') && jsx(Global, {
       styles: blockPointerEventsOnExternalIframeStyles
     }), jsx(RepositionOnUpdate, {
       update: update

package/dist/esm/popup.js

@@ -2,8 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable @repo/internal/react/require-jsdoc */
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { memo, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -52,7 +52,8 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     strategy = _ref.strategy,
     role = _ref.role,
     label = _ref.label,
-    titleId = _ref.titleId;
+    titleId = _ref.titleId,
+    modifiers = _ref.modifiers;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -84,7 +85,8 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
     label: label,
-    titleId: titleId
+    titleId: titleId,
+    modifiers: modifiers
   }));
   var popupContent = jsx(Manager, null, jsx(Reference, null, function (_ref2) {
     var ref = _ref2.ref;

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

@@ -3,7 +3,6 @@ import { useEffect } from 'react';
 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,
@@ -37,7 +36,7 @@ export var useCloseManager = function useCloseManager(_ref) {
       if (!doesDomNodeExist) {
         return;
       }
-      if (isLayerDisabled() && getBooleanFF('platform.design-system-team.iframe-layering_p3eb8')) {
+      if (isLayerDisabled()) {
         //if it is a disabled layer, we need to disable its click listener.
         return;
       }
@@ -69,20 +68,18 @@ export var useCloseManager = function useCloseManager(_ref) {
 
     // 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);
-          }
+    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();

package/dist/types/popper-wrapper.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { type PopperWrapperProps } from './types';
-declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, strategy, role, label, titleId, }: PopperWrapperProps): jsx.JSX.Element;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, strategy, role, label, titleId, modifiers, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

package/dist/types/popup.d.ts

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

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType, type CSSProperties, type Dispatch, type PropsWithChildren, type default as React, type ReactNode, type Ref, type SetStateAction } from 'react';
-import { type Placement, type PopperChildrenProps } from '@atlaskit/popper';
+import { type Modifier, type Placement, type PopperChildrenProps } from '@atlaskit/popper';
 export interface TriggerProps {
     ref: Ref<any>;
     'aria-controls'?: string;
@@ -189,6 +189,11 @@ interface BaseProps {
      * Usage of either this, or the `label` attribute is strongly recommended.
      */
     titleId?: string;
+    /**
+     * Additional modifiers and modifier overwrites.
+     * for more details - https://popper.js.org/docs/v1/#modifiers
+     */
+    modifiers?: Partial<Modifier<string, object>>[];
 }
 interface InternalPopupProps extends BaseProps {
     /**

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

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import { type PopperWrapperProps } from './types';
-declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, strategy, role, label, titleId, }: PopperWrapperProps): jsx.JSX.Element;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldFitContainer, shouldDisableFocusLock, strategy, role, label, titleId, modifiers, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

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

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

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

@@ -1,5 +1,5 @@
 import { type ComponentType, type CSSProperties, type Dispatch, type PropsWithChildren, type default as React, type ReactNode, type Ref, type SetStateAction } from 'react';
-import { type Placement, type PopperChildrenProps } from '@atlaskit/popper';
+import { type Modifier, type Placement, type PopperChildrenProps } from '@atlaskit/popper';
 export interface TriggerProps {
     ref: Ref<any>;
     'aria-controls'?: string;
@@ -192,6 +192,11 @@ interface BaseProps {
      * Usage of either this, or the `label` attribute is strongly recommended.
      */
     titleId?: string;
+    /**
+     * Additional modifiers and modifier overwrites.
+     * for more details - https://popper.js.org/docs/v1/#modifiers
+     */
+    modifiers?: Partial<Modifier<string, object>>[];
 }
 interface InternalPopupProps extends BaseProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.20.1",
+	"version": "1.20.3",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -45,9 +45,9 @@
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.1.0",
 		"@atlaskit/portal": "^4.6.0",
-		"@atlaskit/primitives": "^11.0.0",
+		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.53.0",
+		"@atlaskit/tokens": "^1.56.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -63,8 +63,8 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/button": "^18.3.0",
-		"@atlaskit/icon": "^22.6.0",
+		"@atlaskit/button": "^19.1.0",
+		"@atlaskit/icon": "^22.9.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.4.0",
 		"@atlaskit/toggle": "^13.2.0",
@@ -109,9 +109,6 @@
 	"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/"