@atlaskit/editor-common 125.2.1 → 125.3.0

package/dist/esm/toolbar-flag-check.js

@@ -1,4 +1,4 @@
-import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
 export var areToolbarFlagsEnabled = function areToolbarFlagsEnabled(isNewToolbarEnabled) {
-  return Boolean(expValEqualsNoExposure('platform_editor_controls', 'cohort', 'variant1') || isNewToolbarEnabled);
+  return Boolean(editorExperiment('platform_editor_controls', 'variant1') || isNewToolbarEnabled);
 };

package/dist/esm/ui/DropList/index.js

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "125.2.0";
+var packageVersion = "125.2.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

package/dist/esm/ui/Mention/mention-with-profilecard.js

@@ -1,7 +1,5 @@
 import React, { useMemo } from 'react';
 import Loadable from 'react-loadable';
-// oxlint-disable-next-line @atlassian/no-restricted-imports
-import { lazy, LazySuspense } from 'react-loosely-lazy';
 import ResourcedMention from '@atlaskit/mention/resourced-mention';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
@@ -13,33 +11,18 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 // Lazy-loaded so the agent profile card chunk (and its `@atlaskit/rovo-agent-components`
 // dependency) stays off the critical path — it is only fetched when an agent mention
 // (`userType === 'APP'`) actually renders, never for person mentions.
-var loadAgentProfileCardTrigger = function loadAgentProfileCardTrigger() {
-  return import( /* webpackChunkName: "@atlaskit-internal_profilecard/agent-profile-card-trigger" */
-  '@atlaskit/profilecard/agent-profile-card-trigger').then(function (mod) {
-    return mod.AgentProfileCardTrigger;
-  });
-};
-var AgentProfileCardTriggerLazy = lazy(function () {
-  return import( /* webpackChunkName: "@atlaskit-internal_profilecard/agent-profile-card-trigger" */
-  '@atlaskit/profilecard/agent-profile-card-trigger').then(function (mod) {
-    return mod.AgentProfileCardTrigger;
-  });
-});
-AgentProfileCardTriggerLazy.displayName = 'lazy(AgentProfileCardTrigger)';
-var AgentProfileCardTriggerLoadable = Loadable({
-  loader: loadAgentProfileCardTrigger,
+// Uses react-loadable to match editor-common's code-splitting factory (see src/icons/index.ts).
+var AgentProfileCardTrigger = Loadable({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_profilecard/agent-profile-card-trigger" */
+    '@atlaskit/profilecard/agent-profile-card-trigger').then(function (mod) {
+      return mod.AgentProfileCardTrigger;
+    });
+  },
   loading: function loading() {
     return null;
   }
 });
-var AgentProfileCardTrigger = function AgentProfileCardTrigger(props) {
-  return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? /*#__PURE__*/React.createElement(LazySuspense, {
-    fallback: null
-  }, /*#__PURE__*/React.createElement(AgentProfileCardTriggerLazy, props)) :
-  /*#__PURE__*/
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  React.createElement(AgentProfileCardTriggerLoadable, props);
-};
 
 // Ignored via go/ees005
 // eslint-disable-next-line require-unicode-regexp

package/dist/esm/ui/Popup/index.js

@@ -14,6 +14,7 @@ import { bind } from 'bind-event-listener';
 import createFocusTrap from 'focus-trap';
 import rafSchedule from 'raf-schd';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { calculatePlacement, calculatePosition as _calculatePosition, findOverflowScrollParent } from './utils';
 import { validatePosition } from './validatePosition';
 // Ignored via go/ees005
@@ -29,10 +30,45 @@ var Popup = /*#__PURE__*/function (_React$Component) {
     _this = _callSuper(this, Popup, [].concat(args));
     _defineProperty(_this, "rafIds", new Set());
     _defineProperty(_this, "state", {
+      targetVisible: true,
       validPosition: true
     });
     _defineProperty(_this, "popupRef", /*#__PURE__*/React.createRef());
     _defineProperty(_this, "placement", ['', '']);
+    _defineProperty(_this, "setTargetVisibility", function (targetVisible) {
+      if (targetVisible !== _this.state.targetVisible) {
+        if (!targetVisible) {
+          var _this$focusTrap;
+          // Let consumers preserve focus before the popup becomes hidden.
+          _this.reportTargetVisibility(targetVisible);
+          (_this$focusTrap = _this.focusTrap) === null || _this$focusTrap === void 0 || _this$focusTrap.pause();
+          _this.setState({
+            targetVisible: targetVisible
+          });
+          return;
+        }
+
+        // Reveal the popup before consumers restore focus to its contents.
+        _this.setState({
+          targetVisible: targetVisible
+        }, function () {
+          if (_this.props.focusTrap) {
+            var _this$focusTrap2;
+            (_this$focusTrap2 = _this.focusTrap) === null || _this$focusTrap2 === void 0 || _this$focusTrap2.unpause();
+          }
+          _this.reportTargetVisibility(targetVisible);
+        });
+        return;
+      }
+      _this.reportTargetVisibility(targetVisible);
+    });
+    _defineProperty(_this, "reportTargetVisibility", function (targetVisible) {
+      if (targetVisible !== _this.reportedTargetVisibility) {
+        var _this$props$onTargetV, _this$props;
+        _this.reportedTargetVisibility = targetVisible;
+        (_this$props$onTargetV = (_this$props = _this.props).onTargetVisibilityChanged) === null || _this$props$onTargetV === void 0 || _this$props$onTargetV.call(_this$props, targetVisible);
+      }
+    });
     _defineProperty(_this, "handleRef", function (popup) {
       if (!popup) {
         return;
@@ -155,6 +191,41 @@ var Popup = /*#__PURE__*/function (_React$Component) {
         });
       }
     }
+  }, {
+    key: "initTargetVisibilityObserver",
+    value: function initTargetVisibilityObserver() {
+      var _this$targetVisibilit,
+        _observedTarget$owner,
+        _this3 = this;
+      var _this$props2 = this.props,
+        hideWhenTargetOutOfView = _this$props2.hideWhenTargetOutOfView,
+        target = _this$props2.target,
+        visibilityTarget = _this$props2.visibilityTarget;
+      var observedTarget = visibilityTarget !== null && visibilityTarget !== void 0 ? visibilityTarget : target;
+      (_this$targetVisibilit = this.targetVisibilityObserver) === null || _this$targetVisibilit === void 0 || _this$targetVisibilit.disconnect();
+      this.targetVisibilityObserver = undefined;
+      if (!hideWhenTargetOutOfView || !isExperimentEnabled('platform_editor_popup_target_visibility')) {
+        if (!this.state.targetVisible) {
+          this.setTargetVisibility(true);
+        }
+        return;
+      }
+      this.reportedTargetVisibility = undefined;
+      var IntersectionObserverConstructor = observedTarget === null || observedTarget === void 0 || (_observedTarget$owner = observedTarget.ownerDocument.defaultView) === null || _observedTarget$owner === void 0 ? void 0 : _observedTarget$owner.IntersectionObserver;
+      if (!IntersectionObserverConstructor || !observedTarget) {
+        this.setTargetVisibility(true);
+        return;
+      }
+      this.targetVisibilityObserver = new IntersectionObserverConstructor(function (entries) {
+        var _entry$isIntersecting;
+        var entry = entries[entries.length - 1];
+        _this3.setTargetVisibility((_entry$isIntersecting = entry === null || entry === void 0 ? void 0 : entry.isIntersecting) !== null && _entry$isIntersecting !== void 0 ? _entry$isIntersecting : true);
+      }, {
+        root: null
+      });
+      this.targetVisibilityObserver.observe(observedTarget);
+      this.setTargetVisibility(true);
+    }
   }, {
     key: "cannotSetPopup",
     value: function cannotSetPopup(popup, target, overflowScrollParent) {
@@ -222,9 +293,9 @@ var Popup = /*#__PURE__*/function (_React$Component) {
      * Deactivates the focus trap if it exists
      */
     function destroyFocusTrap() {
-      var _this$focusTrap;
+      var _this$focusTrap3;
       this.initFocusTrap.cancel();
-      (_this$focusTrap = this.focusTrap) === null || _this$focusTrap === void 0 || _this$focusTrap.deactivate();
+      (_this$focusTrap3 = this.focusTrap) === null || _this$focusTrap3 === void 0 || _this$focusTrap3.deactivate();
     }
 
     /**
@@ -236,8 +307,8 @@ var Popup = /*#__PURE__*/function (_React$Component) {
       if (prevProps.focusTrap !== this.props.focusTrap) {
         // If currently set to disable, then pause the trap if it exists
         if (!this.props.focusTrap) {
-          var _this$focusTrap2;
-          return (_this$focusTrap2 = this.focusTrap) === null || _this$focusTrap2 === void 0 ? void 0 : _this$focusTrap2.pause();
+          var _this$focusTrap4;
+          return (_this$focusTrap4 = this.focusTrap) === null || _this$focusTrap4 === void 0 ? void 0 : _this$focusTrap4.pause();
         }
 
         // If set to enabled and trap already exists, unpause
@@ -258,10 +329,10 @@ var Popup = /*#__PURE__*/function (_React$Component) {
     key: "initScrollElement",
     value: function initScrollElement() {
       var _this$unbindScroll;
-      var _this$props = this.props,
-        stick = _this$props.stick,
-        target = _this$props.target,
-        scrollableElement = _this$props.scrollableElement;
+      var _this$props3 = this.props,
+        stick = _this$props3.stick,
+        target = _this$props3.target,
+        scrollableElement = _this$props3.scrollableElement;
       (_this$unbindScroll = this.unbindScroll) === null || _this$unbindScroll === void 0 || _this$unbindScroll.call(this);
       if (this.scrollElement && this.resizeObserver) {
         this.resizeObserver.unobserve(this.scrollElement);
@@ -287,6 +358,11 @@ var Popup = /*#__PURE__*/function (_React$Component) {
       if (prevProps.scrollableElement !== this.props.scrollableElement) {
         this.initScrollElement();
       }
+      // Reconfigure while enabled, or once after disabling to clean up the existing observer.
+      // A different target must be observed again.
+      if ((prevProps.hideWhenTargetOutOfView || this.props.hideWhenTargetOutOfView) && (prevProps.hideWhenTargetOutOfView !== this.props.hideWhenTargetOutOfView || prevProps.target !== this.props.target || prevProps.visibilityTarget !== this.props.visibilityTarget)) {
+        this.initTargetVisibilityObserver();
+      }
       if (this.props !== prevProps) {
         this.scheduledUpdatePosition(prevProps);
       }
@@ -298,14 +374,18 @@ var Popup = /*#__PURE__*/function (_React$Component) {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       window.addEventListener('resize', this.onResize);
       this.initScrollElement();
+      if (this.props.hideWhenTargetOutOfView) {
+        this.initTargetVisibilityObserver();
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$unbindScroll2, _this$resizeObserver3;
+      var _this$targetVisibilit2, _this$unbindScroll2, _this$resizeObserver3;
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       window.removeEventListener('resize', this.onResize);
+      (_this$targetVisibilit2 = this.targetVisibilityObserver) === null || _this$targetVisibilit2 === void 0 || _this$targetVisibilit2.disconnect();
       (_this$unbindScroll2 = this.unbindScroll) === null || _this$unbindScroll2 === void 0 || _this$unbindScroll2.call(this);
       if (this.scrollElement) {
         // Ignored via go/ees005
@@ -324,8 +404,10 @@ var Popup = /*#__PURE__*/function (_React$Component) {
     key: "renderPopup",
     value: function renderPopup() {
       var _this$props$ariaLabel,
-        _this3 = this;
-      var position = this.state.position;
+        _this4 = this;
+      var _this$state = this.state,
+        position = _this$state.position,
+        targetVisible = _this$state.targetVisible;
       var shouldRenderPopup = this.props.shouldRenderPopup;
       if (shouldRenderPopup && !shouldRenderPopup(position || {})) {
         return null;
@@ -342,18 +424,20 @@ var Popup = /*#__PURE__*/function (_React$Component) {
         // use role = dialog as default role, as dialog role itself is not a parent role that requires specific children to function as some other ARIA roles(menu) do
         // if set default role to menu, tons of integration tests will fail as many of our popup usages do not have children that satisfy menu role requirements
         if (ariaLabel) {
-          return _this3.props.role || 'dialog';
+          return _this4.props.role || 'dialog';
         }
         return undefined;
       };
       return /*#__PURE__*/React.createElement("div", {
         ref: this.handleRef,
-        style: _objectSpread(_objectSpread({
+        style: _objectSpread(_objectSpread(_objectSpread({
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           position: 'absolute',
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           zIndex: this.props.zIndex || akEditorFloatingPanelZIndex
-        }, position), this.props.style),
+        }, position), this.props.style), this.props.hideWhenTargetOutOfView && isExperimentEnabled('platform_editor_popup_target_visibility') && !targetVisible && {
+          visibility: 'hidden'
+        }),
         role: getRole(),
         "aria-label": ariaLabel,
         "data-testid": "popup-wrapper"
@@ -365,9 +449,9 @@ var Popup = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        target = _this$props2.target,
-        mountTo = _this$props2.mountTo;
+      var _this$props4 = this.props,
+        target = _this$props4.target,
+        mountTo = _this$props4.mountTo;
       var validPosition = this.state.validPosition;
       if (!target || !validPosition) {
         return null;

package/dist/types/icons/index.d.ts

@@ -1,4 +1,5 @@
-import React from 'react';
+import type React from 'react';
+import Loadable from 'react-loadable';
 import type { IconProps } from '../types';
 export { PanelInfoIcon } from './shared/PanelInfoIcon';
 export { PanelWarningIcon } from './shared/PanelWarningIcon';
@@ -8,7 +9,4 @@ export { PanelNoteIcon } from './shared/PanelNoteIcon';
 export { BorderIcon } from './shared/BorderIcon';
 export { SteppedRainbowIconDecoration, rainbow, disabledRainbow, } from './shared/SteppedRainbowIconDecoration';
 export { DynamicStrokeIconDecoration } from './shared/DynamicStrokeIconDecoration';
-export declare const IconTable: {
-    (props: React.PropsWithChildren<IconProps>): React.ReactElement;
-    preload: () => void;
-};
+export declare const IconTable: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;

package/dist/types/quick-insert/assets/index.d.ts

@@ -1,41 +1,39 @@
 import React from 'react';
+import Loadable from 'react-loadable';
 import type { HeadingLevels, IconProps } from '../../types';
-type PreloadableComponent<Props extends object> = React.ComponentType<Props> & {
-    preload: () => unknown;
-};
-export declare const IconAction: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconCode: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconDate: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconDecision: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconDivider: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconEmoji: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconImages: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconLayout: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconLink: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconListNumber: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconList: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconMention: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconPanelError: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconPanelNote: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconPanelSuccess: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconPanelWarning: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconPanel: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconQuote: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconStatus: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconOneColumnLayout: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconTwoColumnLayout: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconThreeColumnLayout: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconFourColumnLayout: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconFiveColumnLayout: PreloadableComponent<React.PropsWithChildren<IconProps>>;
+export declare const IconAction: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconCode: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconDate: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconDecision: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconDivider: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconEmoji: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconImages: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconLayout: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconLink: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconListNumber: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconList: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconMention: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconPanelError: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconPanelNote: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconPanelSuccess: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconPanelWarning: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconPanel: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconQuote: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconStatus: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconOneColumnLayout: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconTwoColumnLayout: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconThreeColumnLayout: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconFourColumnLayout: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconFiveColumnLayout: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
 type HeadingProps = IconProps & {
     level: HeadingLevels;
 };
 export declare const IconHeading: ({ level, label, }: Pick<HeadingProps, 'level' | 'label'>) => React.JSX.Element;
-export declare const IconFeedback: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconExpand: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconDatasourceJiraIssue: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconDatasourceAssetsObjects: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconDatasourceConfluenceSearch: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconLoom: PreloadableComponent<React.PropsWithChildren<IconProps>>;
-export declare const IconSyncBlock: PreloadableComponent<React.PropsWithChildren<IconProps>>;
+export declare const IconFeedback: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconExpand: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconDatasourceJiraIssue: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconDatasourceAssetsObjects: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconDatasourceConfluenceSearch: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconLoom: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
+export declare const IconSyncBlock: React.ComponentType<React.PropsWithChildren<IconProps>> & Loadable.LoadableComponent;
 export {};

package/dist/types/ui/Popup/index.d.ts

@@ -15,11 +15,14 @@ export interface Props {
     /** Enable focus trap to contain the user's focus within the popup */
     focusTrap?: boolean | FocusTrapOptions;
     forcePlacement?: boolean;
+    /** Hide the popup while its visibility target is fully outside the visible viewport. */
+    hideWhenTargetOutOfView?: boolean;
     minPopupMargin?: number;
     mountTo?: HTMLElement;
     offset?: number[];
     onPlacementChanged?: (placement: [string, string]) => void;
     onPositionCalculated?: (position: Position) => Position;
+    onTargetVisibilityChanged?: (isVisible: boolean) => void;
     onUnmount?: () => void;
     preventOverflow?: boolean;
     rect?: DOMRect;
@@ -29,16 +32,21 @@ export interface Props {
     stick?: boolean;
     style?: React.CSSProperties;
     target?: HTMLElement;
+    /** Element whose viewport visibility controls the popup. Defaults to `target`. */
+    visibilityTarget?: HTMLElement;
     zIndex?: number;
 }
 export interface State {
     popup?: HTMLElement;
     position?: Position;
+    targetVisible: boolean;
     validPosition: boolean;
 }
 export default class Popup extends React.Component<Props, State> {
     scrollElement: undefined | false | HTMLElement;
+    private reportedTargetVisibility?;
     private unbindScroll?;
+    private targetVisibilityObserver?;
     rafIds: Set<number>;
     static defaultProps: {
         allowOutOfBound: boolean;
@@ -53,6 +61,9 @@ export default class Popup extends React.Component<Props, State> {
      */
     private calculatePosition;
     private updatePosition;
+    private setTargetVisibility;
+    private reportTargetVisibility;
+    private initTargetVisibilityObserver;
     private cannotSetPopup;
     /**
      * Popup initialization.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "125.2.1",
+	"version": "125.3.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -47,7 +47,7 @@
 		"@atlaskit/editor-prosemirror": "^9.0.0",
 		"@atlaskit/editor-shared-styles": "^4.3.0",
 		"@atlaskit/editor-tables": "^3.2.0",
-		"@atlaskit/editor-toolbar": "^2.7.0",
+		"@atlaskit/editor-toolbar": "^2.8.0",
 		"@atlaskit/editor-toolbar-model": "^1.2.0",
 		"@atlaskit/editor-ui-control-model": "^2.10.0",
 		"@atlaskit/emoji": "^72.4.0",
@@ -78,7 +78,7 @@
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-ufo": "^8.0.0",
 		"@atlaskit/section-message": "^10.2.0",
-		"@atlaskit/smart-card": "^46.0.0",
+		"@atlaskit/smart-card": "^46.1.0",
 		"@atlaskit/smart-user-picker": "^12.0.0",
 		"@atlaskit/spinner": "^20.4.0",
 		"@atlaskit/task-decision": "^21.10.0",
@@ -112,7 +112,6 @@
 		"re-resizable": "6.0.0",
 		"react-focus-lock": "^2.9.5",
 		"react-loadable": "^5.1.0",
-		"react-loosely-lazy": "^1.0.0",
 		"react-virtualized": "^9.22.6",
 		"rusha": "^0.8.13",
 		"uuid": "^11.1.1",