@atlaskit/editor-common 125.2.1 → 125.4.0

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

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

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

@@ -0,0 +1,37 @@
+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) {
+  const [height, setHeight] = useState(() => Array.from({
+    length: rowCount
+  }, (_, index) => cache.rowHeight({
+    index
+  })).reduce((sum, value) => sum + value, 0));
+  const frame = useRef();
+  const updateHeight = useCallback(() => {
+    if (frame.current !== undefined) {
+      cancelAnimationFrame(frame.current);
+    }
+    // CellMeasurer updates its cache during commit. Read it after all rows have measured.
+    frame.current = requestAnimationFrame(() => {
+      frame.current = undefined;
+      const total = Array.from({
+        length: rowCount
+      }, (_, index) => cache.rowHeight({
+        index
+      })).reduce((sum, height) => sum + height, 0);
+      setHeight(total);
+    });
+  }, [cache, rowCount]);
+  useLayoutEffect(() => {
+    updateHeight();
+    return () => {
+      if (frame.current !== undefined) {
+        cancelAnimationFrame(frame.current);
+      }
+    };
+  }, [rowKeySignature, updateHeight]);
+  return {
+    height,
+    updateHeight
+  };
+}

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

@@ -0,0 +1,49 @@
+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({
+  target,
+  boundariesElement,
+  scrollableElement,
+  maxHeight,
+  offset,
+  isOpen = true
+}) {
+  const [height, setHeight] = useState(maxHeight);
+  useLayoutEffect(() => {
+    const view = target === null || target === void 0 ? void 0 : target.ownerDocument.defaultView;
+    if (!target || !view || !isOpen) {
+      return;
+    }
+    const boundary = boundariesElement || target.ownerDocument.body;
+    const scrollParent = scrollableElement || findOverflowScrollParent(target);
+    const update = () => {
+      const rect = target.getBoundingClientRect();
+      const bounds = boundary.getBoundingClientRect();
+      const above = Math.max(0, rect.top - (bounds.top - boundary.scrollTop) - offset);
+      const below = Math.max(0, bounds.bottom - rect.bottom - offset);
+      const space = below >= maxHeight ? below : Math.max(above, below);
+      // Popup rounds its position up to a CSS pixel. Reserve that pixel at the edge.
+      const available = Math.max(0, Math.floor(space) - 1);
+      setHeight(Math.min(maxHeight, available));
+    };
+    const schedule = rafSchedule(update);
+    update();
+    const unbindResize = bind(view, {
+      type: 'resize',
+      listener: schedule
+    });
+    const unbindScroll = scrollParent ? bind(scrollParent, {
+      type: 'scroll',
+      listener: schedule
+    }) : undefined;
+    return () => {
+      unbindResize();
+      unbindScroll === null || unbindScroll === void 0 ? void 0 : unbindScroll();
+      schedule.cancel();
+    };
+  }, [target, boundariesElement, scrollableElement, maxHeight, offset, isOpen]);
+  return height;
+}

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

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

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

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

package/dist/es2019/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,21 +11,12 @@ 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.
-const loadAgentProfileCardTrigger = () => import( /* webpackChunkName: "@atlaskit-internal_profilecard/agent-profile-card-trigger" */
-'@atlaskit/profilecard/agent-profile-card-trigger').then(mod => mod.AgentProfileCardTrigger);
-const AgentProfileCardTriggerLazy = lazy(() => import( /* webpackChunkName: "@atlaskit-internal_profilecard/agent-profile-card-trigger" */
-'@atlaskit/profilecard/agent-profile-card-trigger').then(mod => mod.AgentProfileCardTrigger));
-AgentProfileCardTriggerLazy.displayName = 'lazy(AgentProfileCardTrigger)';
-const AgentProfileCardTriggerLoadable = Loadable({
-  loader: loadAgentProfileCardTrigger,
+// Uses react-loadable to match editor-common's code-splitting factory (see src/icons/index.ts).
+const AgentProfileCardTrigger = Loadable({
+  loader: () => import( /* webpackChunkName: "@atlaskit-internal_profilecard/agent-profile-card-trigger" */
+  '@atlaskit/profilecard/agent-profile-card-trigger').then(mod => mod.AgentProfileCardTrigger),
   loading: () => null
 });
-const AgentProfileCardTrigger = props => 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
@@ -58,6 +47,7 @@ export default function MentionWithProfileCard({
 }) {
   const {
     cloudId,
+    renderAgentMentionCard,
     renderUserMentionCard,
     resourceClient
   } = profilecardProvider;
@@ -81,6 +71,13 @@ export default function MentionWithProfileCard({
 
   // 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
+      }));
+    }
     return /*#__PURE__*/React.createElement(AgentProfileCardTrigger, {
       agentId: id,
       agentIdType: isExperimentEnabled('platform_editor_comment_mention_card_fixes') ? 'identity' : undefined,

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

@@ -5,6 +5,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, findOverflowScrollParent } from './utils';
 import { validatePosition } from './validatePosition';
 // Ignored via go/ees005
@@ -15,10 +16,45 @@ export default class Popup extends React.Component {
     super(...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", 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 ? void 0 : _this$focusTrap.pause();
+          this.setState({
+            targetVisible
+          });
+          return;
+        }
+
+        // Reveal the popup before consumers restore focus to its contents.
+        this.setState({
+          targetVisible
+        }, () => {
+          if (this.props.focusTrap) {
+            var _this$focusTrap2;
+            (_this$focusTrap2 = this.focusTrap) === null || _this$focusTrap2 === void 0 ? void 0 : _this$focusTrap2.unpause();
+          }
+          this.reportTargetVisibility(targetVisible);
+        });
+        return;
+      }
+      this.reportTargetVisibility(targetVisible);
+    });
+    _defineProperty(this, "reportTargetVisibility", 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 ? void 0 : _this$props$onTargetV.call(_this$props, targetVisible);
+      }
+    });
     _defineProperty(this, "handleRef", popup => {
       if (!popup) {
         return;
@@ -137,6 +173,38 @@ export default class Popup extends React.Component {
       });
     }
   }
+  initTargetVisibilityObserver() {
+    var _this$targetVisibilit, _observedTarget$owner;
+    const {
+      hideWhenTargetOutOfView,
+      target,
+      visibilityTarget
+    } = this.props;
+    const observedTarget = visibilityTarget !== null && visibilityTarget !== void 0 ? visibilityTarget : target;
+    (_this$targetVisibilit = this.targetVisibilityObserver) === null || _this$targetVisibilit === void 0 ? 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;
+    const IntersectionObserverConstructor = observedTarget === null || observedTarget === void 0 ? 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(entries => {
+      var _entry$isIntersecting;
+      const entry = entries[entries.length - 1];
+      this.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);
+  }
   cannotSetPopup(popup, target, overflowScrollParent) {
     /**
      * Check whether:
@@ -199,9 +267,9 @@ export default class Popup extends React.Component {
    * Deactivates the focus trap if it exists
    */
   destroyFocusTrap() {
-    var _this$focusTrap;
+    var _this$focusTrap3;
     this.initFocusTrap.cancel();
-    (_this$focusTrap = this.focusTrap) === null || _this$focusTrap === void 0 ? void 0 : _this$focusTrap.deactivate();
+    (_this$focusTrap3 = this.focusTrap) === null || _this$focusTrap3 === void 0 ? void 0 : _this$focusTrap3.deactivate();
   }
 
   /**
@@ -211,8 +279,8 @@ export default class Popup extends 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
@@ -259,6 +327,11 @@ export default class Popup extends 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);
     }
@@ -268,12 +341,16 @@ export default class Popup extends 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();
+    }
   }
   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 ? void 0 : _this$targetVisibilit2.disconnect();
     (_this$unbindScroll2 = this.unbindScroll) === null || _this$unbindScroll2 === void 0 ? void 0 : _this$unbindScroll2.call(this);
     if (this.scrollElement) {
       // Ignored via go/ees005
@@ -293,7 +370,8 @@ export default class Popup extends React.Component {
   renderPopup() {
     var _this$props$ariaLabel;
     const {
-      position
+      position,
+      targetVisible
     } = this.state;
     const {
       shouldRenderPopup
@@ -327,7 +405,11 @@ export default class Popup extends React.Component {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ...position,
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        ...this.props.style
+        ...this.props.style,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Runtime visibility follows the target's scroll position.
+        ...(this.props.hideWhenTargetOutOfView && isExperimentEnabled('platform_editor_popup_target_visibility') && !targetVisible && {
+          visibility: 'hidden'
+        })
       },
       role: getRole(),
       "aria-label": ariaLabel,

package/dist/esm/element-browser/components/ElementBrowserLoader.js

@@ -7,11 +7,6 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Loadable from 'react-loadable';
-// oxlint-disable-next-line @atlassian/no-restricted-imports
-import { lazy, LazySuspense } from 'react-loosely-lazy';
-
-// oxlint-disable-next-line @atlassian/no-restricted-imports
-import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import Spinner from '@atlaskit/spinner/spinner';
 var spinnerContainer = css({
   display: 'flex',
@@ -20,19 +15,12 @@ var spinnerContainer = css({
   height: '100%',
   width: '100%'
 });
-var loadElementBrowser = function loadElementBrowser() {
-  return import( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser').then(function (module) {
-    return module.default;
-  });
-};
-var ElementBrowserLazy = lazy(function () {
-  return import( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser').then(function (module) {
-    return module.default;
-  });
-});
-ElementBrowserLazy.displayName = 'lazy(ElementBrowser)';
-var ElementBrowserLoadable = Loadable({
-  loader: loadElementBrowser,
+var ElementBrowserLoader = Loadable({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser').then(function (module) {
+      return module.default;
+    });
+  },
   loading: function loading() {
     return jsx("div", {
       css: spinnerContainer
@@ -42,14 +30,4 @@ var ElementBrowserLoadable = Loadable({
     }));
   }
 });
-var ElementBrowserLoader = function ElementBrowserLoader(props) {
-  return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? jsx(LazySuspense, {
-    fallback: null
-  }, jsx(ElementBrowserLazy, props)) :
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  jsx(ElementBrowserLoadable, props);
-};
-ElementBrowserLoader.preload = function () {
-  return isExperimentEnabled('platform_editor_loosely_lazy_migration') ? ElementBrowserLazy.preload() : ElementBrowserLoadable.preload();
-};
 export default ElementBrowserLoader;

package/dist/esm/extensions/buildMenuItem.js

@@ -4,15 +4,16 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { buildAction } from './manifest-helpers';
 export function buildMenuItem(manifest, extensionModule) {
-  var _extensionModule$cate, _ref, _extensionModule$app;
+  var _extensionModule$prev, _extensionModule$cate, _ref, _extensionModule$app;
   var title = extensionModule.title || manifest.title;
   var key = "".concat(manifest.key, ":").concat(extensionModule.key);
   var node = buildAction(extensionModule.action, manifest);
+  var preview = (_extensionModule$prev = extensionModule.preview) !== null && _extensionModule$prev !== void 0 ? _extensionModule$prev : manifest.preview;
   var category = isExperimentEnabled('platform_editor_slash_command') ? (_extensionModule$cate = extensionModule.category) !== null && _extensionModule$cate !== void 0 ? _extensionModule$cate : manifest.category : undefined;
   if (!node) {
     throw new Error("Couldn't find any action for ".concat(title, " (").concat(key, ")"));
   }
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, isExperimentEnabled('platform_editor_slash_app_category_analytics') || isExperimentEnabled('platform_editor_slash_command') ? {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, isExperimentEnabled('platform_editor_slash_app_category_analytics') || isExperimentEnabled('platform_editor_slash_command') ? {
     app: (_ref = (_extensionModule$app = extensionModule.app) !== null && _extensionModule$app !== void 0 ? _extensionModule$app : manifest.app) !== null && _ref !== void 0 ? _ref : {
       key: manifest.key
     }
@@ -31,7 +32,9 @@ export function buildMenuItem(manifest, extensionModule) {
     summary: manifest.summary,
     documentationUrl: manifest.documentationUrl,
     priority: extensionModule.priority
-  }, extensionModule.lozenge != null && {
+  }, preview != null && {
+    preview: preview
+  }), extensionModule.lozenge != null && {
     lozenge: extensionModule.lozenge
   }), {}, {
     icon: extensionModule.icon || manifest.icons['48'],