@atlaskit/editor-common 125.2.1 → 125.4.0

package/dist/esm/quick-insert/confluence-attribution-icon.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { confluenceIcon } from '@atlaskit/logo/raw-icons';
+
+/** Decorative product icon accompanying the localized Confluence attribution name. */
+export var ConfluenceAttributionIcon = function ConfluenceAttributionIcon() {
+  return /*#__PURE__*/React.createElement("img", {
+    src: confluenceIcon,
+    alt: "",
+    width: 16,
+    height: 16
+  });
+};

package/dist/esm/quick-insert/jira-attribution-icon.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { jiraIcon } from '@atlaskit/logo/raw-icons';
+
+/** Decorative product icon accompanying the localized Jira attribution name. */
+export var JiraAttributionIcon = function JiraAttributionIcon() {
+  return /*#__PURE__*/React.createElement("img", {
+    src: jiraIcon,
+    alt: "",
+    width: 16,
+    height: 16
+  });
+};

package/dist/esm/quick-insert/messages.js

@@ -129,5 +129,35 @@ export var messages = defineMessages({
     id: 'editor-common.quick-insert.categoryOther',
     defaultMessage: 'Other',
     description: 'Other items in the Quick Insert menu.'
+  },
+  previewAttributionBy: {
+    id: 'editor-common.quick-insert.previewAttributionBy',
+    defaultMessage: 'By {name}',
+    description: 'Attribution shown in a Quick Insert item preview.'
+  },
+  previewAttributionAtlassian: {
+    id: 'editor-common.quick-insert.previewAttributionAtlassian.ai-non-final',
+    defaultMessage: 'Atlassian',
+    description: 'Atlassian company name shown as the creator in a slash-command preview attribution.'
+  },
+  previewAttributionAssets: {
+    id: 'editor-common.quick-insert.previewAttributionAssets.ai-non-final',
+    defaultMessage: 'Assets',
+    description: 'Assets product name shown as the creator in a slash-command preview attribution.'
+  },
+  previewAttributionConfluence: {
+    id: 'editor-common.quick-insert.previewAttributionConfluence.ai-non-final',
+    defaultMessage: 'Confluence',
+    description: 'Confluence product name shown as the creator in a slash-command preview attribution.'
+  },
+  previewAttributionJira: {
+    id: 'editor-common.quick-insert.previewAttributionJira.ai-non-final',
+    defaultMessage: 'Jira',
+    description: 'Jira product name shown as the creator in a slash-command preview attribution.'
+  },
+  previewAttributionMicrosoft: {
+    id: 'editor-common.quick-insert.previewAttributionMicrosoft.ai-non-final',
+    defaultMessage: 'Microsoft',
+    description: 'Microsoft company name shown as the creator in a slash-command preview attribution.'
   }
 });

package/dist/esm/quick-insert/preview.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/quick-insert/snippetPreviewImageUrls.js

@@ -1,109 +1,109 @@
-var DAM_ASSET_LINK = 'https://dam-cdn.atl.orangelogic.com/AssetLink';
+var DAM_CDN_LINK = 'https://dam-cdn.atl.orangelogic.com/CDNLink';
 var snippetPreviewImageUrlsByKey = {
   // Action items
   '019e5cd9-5ca1-7258-befd-4f50d491bb42': {
-    light: "".concat(DAM_ASSET_LINK, "/qq0503l11x2ub0506p2s046o2ep5gw1w.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/i77e8128ir0e34t8w11mar77ngq53o00.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVLE.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVJI.png")
   },
   // Bug report
   '019e5cd9-5ca1-7258-befd-1c3c59b0aa00': {
-    light: "".concat(DAM_ASSET_LINK, "/221f56s64c186314ka8a7uaj7m4di32l.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/1c86e0v3ygh5ct5600luum0w67unpa23.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVMN.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVJ6.png")
   },
   // Campaign brief
   '019e5cd9-5ca1-7258-befd-398bb4e40f15': {
-    light: "".concat(DAM_ASSET_LINK, "/55j1ie55ad1nal6t3awxxui52rp47wn1.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/36h5jgou0pw7v532411mbl501b8de4hm.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVMY.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVJE.png")
   },
   // Colorful layout
   '019e5cd9-5ca1-7258-befd-53b6eec19427': {
-    light: "".concat(DAM_ASSET_LINK, "/53j8kth40pkysk4rqs64038r4cw2i867.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/k7ofa1q6r10dydey04780514v75j3fvx.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVN6.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVIG.png")
   },
   // Colorful numbered table
   '019e5cd9-5ca1-7258-befd-70a282facf16': {
-    light: "".concat(DAM_ASSET_LINK, "/f02n6041opl0rqvbygs2hv162mt6jq3u.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/s63mw28263h0oi8we3x052m7rsw2o1k8.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVN7.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVJL.png")
   },
   // Colorful summary
   '019e5cd9-5ca1-7258-befd-7e200502de8e': {
-    light: "".concat(DAM_ASSET_LINK, "/242qv11f2p7y1u461v71glq85x76b5gp.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/jeaj3a8g7x61syy45d73c2223647b14j.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVN4.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVIE.png")
   },
   // Colorful table
   '019e5cd9-5ca1-7258-befd-5524d394ba0a': {
-    light: "".concat(DAM_ASSET_LINK, "/8w8571k707dlx556rxr3hs72gs5q4m42.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/wkt55v21i5q520pqxjh31x5g2j8upth4.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVMJ.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVJM.png")
   },
   // Competitive snapshot
   '019e5cd9-5ca1-7258-befd-40d1947b7b84': {
-    light: "".concat(DAM_ASSET_LINK, "/k5cm81s2h7i41d4d6832n67c2m767h6t.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/ks38nc26451n7384d52413lck2qhq4e6.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVMR.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVJC.png")
   },
   // Criteria rubric
   '019e5cd9-5ca1-7258-befd-84723a493931': {
-    light: "".concat(DAM_ASSET_LINK, "/n00f5ur678kbqdqjj5e13xpij6u3kkuq.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/54k2y2f7n2tpg2n12is326376102c3b5.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVMA.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVJ1.png")
   },
   // Customer quote
   '019e5cd9-5ca1-7258-befd-5fcf6165870f': {
-    light: "".concat(DAM_ASSET_LINK, "/k8q5l4htp63652mhw572ed6chren37mv.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/y0leijw14xp7mdpi3265xn0d5ymo5lfm.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVLF.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVJK.png")
   },
   // Decision log
   '019e5cd9-5ca1-7258-befd-30c6e8712ba4': {
-    light: "".concat(DAM_ASSET_LINK, "/4vuxracm3c33555h1u4ug65q55267574.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/5445044f626dcb58dbc7s6axr32e4ywl.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVMT.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVJ9.png")
   },
   // Launch checklist
   '019e5cd9-5ca1-7258-befd-3ce1c551015e': {
-    light: "".concat(DAM_ASSET_LINK, "/1o0gj47oprg341fe6iip8fdx8561t54n.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/lay6kpn21b264q2q8144h3s18uwjud0f.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVKW.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVHN.png")
   },
   // Meeting agenda
   '019e5cd9-5ca1-7258-befd-47559a8d7cfc': {
-    light: "".concat(DAM_ASSET_LINK, "/2hn6q5dt118vwyqi438725l141u70fb8.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/r4l0ydb7ujg4lms6n0wrrnsmsd1x65kw.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVMU.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVJD.png")
   },
   // Project status snapshot
   '019e5cd9-5ca1-7258-befd-2943939d1b79': {
-    light: "".concat(DAM_ASSET_LINK, "/qk6emfe0oa2260ldt11748672gs65y1l.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/tt36rsll4cmq4607ik7g2d10fxmysyt4.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVMO.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVJU.png")
   },
   // Pros and cons
   '019e5cd9-5ca1-7258-befd-6db9658d75f4': {
-    light: "".concat(DAM_ASSET_LINK, "/22078yl6viws8rc3au187m76x07xcu61.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/4tfd6w50y4yxfh4ks75w5ql04u17n7ub.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVN5.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVHY.png")
   },
   // Quick project update
   '019e5cd9-5ca1-7258-befd-820ce1acd7a0': {
-    light: "".concat(DAM_ASSET_LINK, "/i8cfkp8v6716121f0w054g85mkw15wgu.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/x7a25y5f33ok60871t31e1my5c7880cr.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVNA.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVI5.png")
   },
   // Risks and assumptions
   '019e5cd9-5ca1-7258-befd-2da95ce98772': {
-    light: "".concat(DAM_ASSET_LINK, "/yl7w10ms70ptlodhc703f6byo3wf7xty.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/mn14wqw150cu05w3s358w3f2f1vfgv7r.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVMQ.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVJ7.png")
   },
   // Roles and responsibilities matrix
   '019e5cd9-5ca1-7258-befd-37cd3a06776d': {
-    light: "".concat(DAM_ASSET_LINK, "/67hs5t8u4t63c4fepm6ho1c4d5u12bed.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/wj5s3dy5nvb810t87f7x45cie88783h6.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVM8.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVHG.png")
   },
   // Run sheet
   '019e5cd9-5ca1-7258-befd-4a9979f87235': {
-    light: "".concat(DAM_ASSET_LINK, "/tt0n285m6jl5lxb46c5v4fn856540351.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/qcrcqcs14753208xqw1j8r38mgs57w2f.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVMZ.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVJB.png")
   },
   // Started → Now
   '019e5cd9-5ca1-7258-befd-74fb1585da6f': {
-    light: "".concat(DAM_ASSET_LINK, "/5ggat8yryusxvaqj3o800t8v6hcyh22v.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/287u8yil1jb1j5p1fih0141h07k2f64w.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVN8.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVJQ.png")
   },
   // Weekly calendar
   '019e5cd9-5ca1-7258-befd-580c2c95a0a0': {
-    light: "".concat(DAM_ASSET_LINK, "/na153u604p852n54aji7aj1gf14431o7.png"),
-    dark: "".concat(DAM_ASSET_LINK, "/sw7m5s5ay718h025c6ed3gaq63orv4gu.png")
+    light: "".concat(DAM_CDN_LINK, "/AT12OVN2.png"),
+    dark: "".concat(DAM_CDN_LINK, "/AT12OVIJ.png")
   }
 };
 export var getSnippetPreviewImageUrls = function getSnippetPreviewImageUrls(snippetKey) {

package/dist/esm/quick-insert/use-menu-list-height.js

@@ -0,0 +1,51 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+/** Keep the list viewport in sync with measured rows, including short search results. */
+export function useMenuListHeight(cache, rowCount, rowKeySignature) {
+  var _useState = useState(function () {
+      return Array.from({
+        length: rowCount
+      }, function (_, index) {
+        return cache.rowHeight({
+          index: index
+        });
+      }).reduce(function (sum, value) {
+        return sum + value;
+      }, 0);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var frame = useRef();
+  var updateHeight = useCallback(function () {
+    if (frame.current !== undefined) {
+      cancelAnimationFrame(frame.current);
+    }
+    // CellMeasurer updates its cache during commit. Read it after all rows have measured.
+    frame.current = requestAnimationFrame(function () {
+      frame.current = undefined;
+      var total = Array.from({
+        length: rowCount
+      }, function (_, index) {
+        return cache.rowHeight({
+          index: index
+        });
+      }).reduce(function (sum, height) {
+        return sum + height;
+      }, 0);
+      setHeight(total);
+    });
+  }, [cache, rowCount]);
+  useLayoutEffect(function () {
+    updateHeight();
+    return function () {
+      if (frame.current !== undefined) {
+        cancelAnimationFrame(frame.current);
+      }
+    };
+  }, [rowKeySignature, updateHeight]);
+  return {
+    height: height,
+    updateHeight: updateHeight
+  };
+}

package/dist/esm/quick-insert/use-menu-popup-sizing.js

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useLayoutEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import rafSchedule from 'raf-schd';
+import { findOverflowScrollParent } from '../ui/Popup/utils';
+/** Constrain menu height to the available space; Popup chooses placement. */
+export function useMenuPopupSizing(_ref) {
+  var target = _ref.target,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement,
+    maxHeight = _ref.maxHeight,
+    offset = _ref.offset,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? true : _ref$isOpen;
+  var _useState = useState(maxHeight),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  useLayoutEffect(function () {
+    var view = target === null || target === void 0 ? void 0 : target.ownerDocument.defaultView;
+    if (!target || !view || !isOpen) {
+      return;
+    }
+    var boundary = boundariesElement || target.ownerDocument.body;
+    var scrollParent = scrollableElement || findOverflowScrollParent(target);
+    var update = function update() {
+      var rect = target.getBoundingClientRect();
+      var bounds = boundary.getBoundingClientRect();
+      var above = Math.max(0, rect.top - (bounds.top - boundary.scrollTop) - offset);
+      var below = Math.max(0, bounds.bottom - rect.bottom - offset);
+      var space = below >= maxHeight ? below : Math.max(above, below);
+      // Popup rounds its position up to a CSS pixel. Reserve that pixel at the edge.
+      var available = Math.max(0, Math.floor(space) - 1);
+      setHeight(Math.min(maxHeight, available));
+    };
+    var schedule = rafSchedule(update);
+    update();
+    var unbindResize = bind(view, {
+      type: 'resize',
+      listener: schedule
+    });
+    var unbindScroll = scrollParent ? bind(scrollParent, {
+      type: 'scroll',
+      listener: schedule
+    }) : undefined;
+    return function () {
+      unbindResize();
+      unbindScroll === null || unbindScroll === void 0 || unbindScroll();
+      schedule.cancel();
+    };
+  }, [target, boundariesElement, scrollableElement, maxHeight, offset, isOpen]);
+  return height;
+}

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.3.0";
 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
@@ -68,6 +51,7 @@ export default function MentionWithProfileCard(_ref) {
     ssrPlaceholderId = _ref.ssrPlaceholderId,
     userType = _ref.userType;
   var cloudId = profilecardProvider.cloudId,
+    renderAgentMentionCard = profilecardProvider.renderAgentMentionCard,
     renderUserMentionCard = profilecardProvider.renderUserMentionCard,
     resourceClient = profilecardProvider.resourceClient;
   var actions = useMemo(function () {
@@ -92,6 +76,13 @@ export default function MentionWithProfileCard(_ref) {
 
   // Agent mentions (userType 'APP') open the Rovo agent profile card on click.
   if (userType === 'APP' && cloudId && isExperimentEnabled('rovo_chat_mention_agents')) {
+    if (renderAgentMentionCard) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, renderAgentMentionCard({
+        accountId: id,
+        children: mention,
+        cloudId: cloudId
+      }));
+    }
     return /*#__PURE__*/React.createElement(AgentProfileCardTrigger, {
       agentId: id,
       agentIdType: isExperimentEnabled('platform_editor_comment_mention_card_fixes') ? 'identity' : undefined,

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;