@atlaskit/editor-common 125.3.0 → 125.4.0

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

@@ -4,112 +4,112 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSnippetPreviewImageUrls = void 0;
-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")
   }
 };
 var getSnippetPreviewImageUrls = exports.getSnippetPreviewImageUrls = function getSnippetPreviewImageUrls(snippetKey) {

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuListHeight = useMenuListHeight;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+/** Keep the list viewport in sync with measured rows, including short search results. */
+function useMenuListHeight(cache, rowCount, rowKeySignature) {
+  var _useState = (0, _react.useState)(function () {
+      return Array.from({
+        length: rowCount
+      }, function (_, index) {
+        return cache.rowHeight({
+          index: index
+        });
+      }).reduce(function (sum, value) {
+        return sum + value;
+      }, 0);
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var frame = (0, _react.useRef)();
+  var updateHeight = (0, _react.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]);
+  (0, _react.useLayoutEffect)(function () {
+    updateHeight();
+    return function () {
+      if (frame.current !== undefined) {
+        cancelAnimationFrame(frame.current);
+      }
+    };
+  }, [rowKeySignature, updateHeight]);
+  return {
+    height: height,
+    updateHeight: updateHeight
+  };
+}

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuPopupSizing = useMenuPopupSizing;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _bindEventListener = require("bind-event-listener");
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _utils = require("../ui/Popup/utils");
+/** Constrain menu height to the available space; Popup chooses placement. */
+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 = (0, _react.useState)(maxHeight),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  (0, _react.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 || (0, _utils.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 = (0, _rafSchd.default)(update);
+    update();
+    var unbindResize = (0, _bindEventListener.bind)(view, {
+      type: 'resize',
+      listener: schedule
+    });
+    var unbindScroll = scrollParent ? (0, _bindEventListener.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/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "125.2.1";
+var packageVersion = "125.3.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

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

@@ -61,6 +61,7 @@ function MentionWithProfileCard(_ref) {
     ssrPlaceholderId = _ref.ssrPlaceholderId,
     userType = _ref.userType;
   var cloudId = profilecardProvider.cloudId,
+    renderAgentMentionCard = profilecardProvider.renderAgentMentionCard,
     renderUserMentionCard = profilecardProvider.renderUserMentionCard,
     resourceClient = profilecardProvider.resourceClient;
   var actions = (0, _react.useMemo)(function () {
@@ -85,6 +86,13 @@ function MentionWithProfileCard(_ref) {
 
   // Agent mentions (userType 'APP') open the Rovo agent profile card on click.
   if (userType === 'APP' && cloudId && (0, _isExperimentEnabled.isExperimentEnabled)('rovo_chat_mention_agents')) {
+    if (renderAgentMentionCard) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderAgentMentionCard({
+        accountId: id,
+        children: mention,
+        cloudId: cloudId
+      }));
+    }
     return /*#__PURE__*/_react.default.createElement(AgentProfileCardTrigger, {
       agentId: id,
       agentIdType: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_comment_mention_card_fixes') ? 'identity' : undefined,

package/dist/es2019/extensions/buildMenuItem.js

@@ -1,10 +1,11 @@
 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;
   const title = extensionModule.title || manifest.title;
   const key = `${manifest.key}:${extensionModule.key}`;
   const node = buildAction(extensionModule.action, manifest);
+  const preview = (_extensionModule$prev = extensionModule.preview) !== null && _extensionModule$prev !== void 0 ? _extensionModule$prev : manifest.preview;
   const 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 ${title} (${key})`);
@@ -31,6 +32,9 @@ export function buildMenuItem(manifest, extensionModule) {
     summary: manifest.summary,
     documentationUrl: manifest.documentationUrl,
     priority: extensionModule.priority,
+    ...(preview != null && {
+      preview
+    }),
     ...(extensionModule.lozenge != null && {
       lozenge: extensionModule.lozenge
     }),

package/dist/es2019/monitoring/error.js

@@ -13,7 +13,7 @@ const NETWORK_FAILURE_REGEX = /^network failure/i;
 const RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "125.2.1";
+const packageVersion = "125.3.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/quick-insert/CompactQuickInsertMenuItem.compiled.css

@@ -1,7 +1,6 @@
 ._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}
-._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._18zr1b66{padding-inline:var(--ds-space-050,4px)}
 ._1dqonqa1{border-style:solid}

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

@@ -1,9 +1,7 @@
 /* CompactQuickInsertMenuItem.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./CompactQuickInsertMenuItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useState } from 'react';
-import ButtonItem from '@atlaskit/menu/button-item';
-import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import React, { useId, useMemo, useState } from 'react';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- Compiled primitives do not provide Pressable.
 import { Pressable, xcss } from '@atlaskit/primitives';
 import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
@@ -13,7 +11,6 @@ import { useQuickInsertContext } from './useQuickInsertContext';
 const styles = {
   iconContainer: "_4cvr1h6o _1e0c1txw _1o9zidpf _1bah1h6o _1tke1tcg _1ul91tcg",
   content: "_16jlkb7n _1o9zkb7n _i0dlidpf _1ul9idpf",
-  icon: "_2rko1qi0 _1reo15vq _18m915vq _1h6d1l7x _1dqonqa1 _189ee4h9 _4cvr1h6o _bfhk1bhr _1e0c1txw _4t3izwfg _1bah1h6o _1bsbzwfg",
   iconLarge: "_2rko1mok _1reo15vq _18m915vq _1h6d1l7x _1dqonqa1 _189ee4h9 _4cvr1h6o _bfhk1bhr _1e0c1txw _4t3izwfg _1bah1h6o _1bsbzwfg",
   shortcut: "_2rko12b0 _11c8wadc _1rjcv77o _18zr1b66 _bfhki8nm _syazazsu"
 };
@@ -72,14 +69,18 @@ const disabledItemStyles = xcss({
 });
 export const CompactQuickInsertMenuItem = ({
   ariaLabel,
+  description,
   iconBefore,
   isDisabled,
   onSelect,
+  preview,
   previewImageUrls,
   shortcut,
+  shouldShowPreview = true,
   shouldWrapIcon = true,
   title
 }) => {
+  var _ref, _resolvedPreview$imag, _resolvedPreview$imag2, _resolvedPreview$attr;
   const {
     item
   } = useQuickInsertContext();
@@ -90,35 +91,22 @@ export const CompactQuickInsertMenuItem = ({
     id: undefined,
     isSelected: false
   };
+  const resolvedDescription = description !== null && description !== void 0 ? description : item === null || item === void 0 ? void 0 : item.description;
+  const previewId = useId();
   const handleClick = useQuickInsertMenuItemSelection(onSelect);
   const [referenceElement, setReferenceElement] = useState(null);
-  if (!isExperimentEnabled('platform_editor_slash_command')) {
-    const wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
-      xcss: styles.icon
-    }, iconBefore) : iconBefore;
-    return /*#__PURE__*/React.createElement(ButtonItem, {
-      "aria-label": ariaLabel,
-      "aria-selected": isSelected,
-      iconBefore: wrappedIcon,
-      id: id,
-      isDisabled: isDisabled,
-      isSelected: isSelected,
-      onClick: handleClick,
-      role: "option"
-    }, /*#__PURE__*/React.createElement(Inline, {
-      alignBlock: "center",
-      spread: "space-between"
-    }, /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: styles.shortcut
-    }, shortcut)));
-  }
+  const resolvedPreview = useMemo(() => preview !== null && preview !== void 0 ? preview : previewImageUrls ? {
+    image: previewImageUrls
+  } : {}, [preview, previewImageUrls]);
+  const shouldRenderPreview = shouldShowPreview && isSelected && !isDisabled;
+  const hasAccessiblePreview = Boolean(resolvedDescription || (resolvedPreview === null || resolvedPreview === void 0 ? void 0 : resolvedPreview.attribution));
   const wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
     xcss: styles.iconLarge
   }, iconBefore) : iconBefore;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
     ref: setReferenceElement,
     "aria-label": ariaLabel,
+    "aria-describedby": shouldRenderPreview && hasAccessiblePreview ? previewId : undefined,
     "aria-selected": isSelected,
     id: id,
     isDisabled: isDisabled,
@@ -134,9 +122,12 @@ export const CompactQuickInsertMenuItem = ({
   }, /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.shortcut
-  }, shortcut))), isSelected && !isDisabled && (previewImageUrls === null || previewImageUrls === void 0 ? void 0 : previewImageUrls.light) && referenceElement && /*#__PURE__*/React.createElement(QuickInsertHoverPreview, {
-    key: previewImageUrls.light,
-    previewImageUrls: previewImageUrls,
-    referenceElement: referenceElement
+  }, shortcut))), shouldRenderPreview && referenceElement && /*#__PURE__*/React.createElement(QuickInsertHoverPreview, {
+    key: (_ref = (_resolvedPreview$imag = (_resolvedPreview$imag2 = resolvedPreview.image) === null || _resolvedPreview$imag2 === void 0 ? void 0 : _resolvedPreview$imag2.light) !== null && _resolvedPreview$imag !== void 0 ? _resolvedPreview$imag : (_resolvedPreview$attr = resolvedPreview.attribution) === null || _resolvedPreview$attr === void 0 ? void 0 : _resolvedPreview$attr.name) !== null && _ref !== void 0 ? _ref : title,
+    id: previewId,
+    description: resolvedDescription,
+    preview: resolvedPreview,
+    referenceElement: referenceElement,
+    title: title
   }));
 };

package/dist/es2019/quick-insert/QuickInsertHoverPreview.compiled.css

@@ -1,4 +1,45 @@
+._11c81qyo{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._11c8wadc{font:var(--ds-font-body-small,normal 400 9pt/1pc "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}
+._16jlidpf{flex-grow:0}
+._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._18m915vq{overflow-y:hidden}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bsb7vkz{width:1pc}
+._1bsbncxg{width:264px}
+._1bsbp3fh{width:15pc}
+._1e0c1txw{display:flex}
 ._1e0c1ule{display:block}
+._1e0ccj1k{display:-webkit-box}
+._1i4qfg65{overflow-wrap:anywhere}
+._1o9zidpf{flex-shrink:0}
 ._1pby16oo{z-index:510}
+._1reo15vq{overflow-x:hidden}
+._1yyjcs5v{-webkit-line-clamp:2}
+._1yyjegat{-webkit-line-clamp:4}
+._2lx21bp4{flex-direction:column}
 ._3um015vq{visibility:hidden}
-._3um0ewfl{visibility:visible}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i68cl{height:90pt}
+._4t3i7vkz{height:1pc}
+._5ral1f51{object-fit:contain}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
+._c71l1kw7{max-height:inherit}
+._c71lk6is{max-height:calc(100vh - 1pc)}
+._i0dlexct{flex-basis:16px}
+._p12f1oec{max-width:calc(100vw - 1pc)}
+._p12f1osq{max-width:100%}
+._sudp1e54{-webkit-box-orient:vertical}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
+._vchhusvi{box-sizing:border-box}