@atlaskit/editor-common 128.0.1 → 128.2.0

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

@@ -1,16 +1,17 @@
 /* QuickInsertHoverPreview.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./QuickInsertHoverPreview.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useLayoutEffect, useState } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 // Viewport calculations and multiline clamping require styles outside @atlaskit/css's schema.
 
+import { bind } from 'bind-event-listener';
 import { useIntl } from 'react-intl';
-
 // Viewport clamping requires modifiers, which the top-layer adapter does not support.
 import { Popper } from '@atlaskit/popper/react-popper';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Inline } from '@atlaskit/primitives/compiled/inline';
 import { Text } from '@atlaskit/primitives/compiled/text';
 import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
 import { messages } from './messages';
@@ -38,25 +39,36 @@ const PREVIEW_MODIFIERS = [{
     rootBoundary: 'viewport'
   }
 }];
+const layoutStyles = {
+  titleRow: "_1ul9idpf",
+  titleIcon: "_4cvr1h6o _1e0c1txw _1o9zidpf _1bah1h6o",
+  attributionText: "_16jlkb7n _1o9zkb7n _i0dl1wug _1ul9idpf _1i4qfg65"
+};
 const styles = {
   positioner: "_c71lk6is _p12f1oec _1pby16oo",
   panel: "_2rko1qi0 _1reo15vq _18m915vq _1rjcutpp _18zrutpp _vchhusvi _bfhk1bhr _16qs130s _c71l1kw7 _p12f1osq _1bsbncxg",
   content: "_zulpu2gc _1e0c1txw _2lx21bp4",
-  title: "_11c81qyo _1reo15vq _18m915vq _syazazsu _1i4qfg65 _1e0ccj1k _sudp1e54 _1yyjcs5v",
+  title: "_11c81qyo _16jlkb7n _1o9zkb7n _i0dl1wug _1reo15vq _18m915vq _syazazsu _1ul9idpf _1i4qfg65 _1e0ccj1k _sudp1e54 _1yyjcs5v",
+  unclampedTitle: "_11c8fhey _16jlkb7n _1o9zkb7n _i0dl1wug _syazi7uo _k48pwu06 _1ul9idpf _1i4qfg65",
   description: "_11c8fhey _1reo15vq _18m915vq _syazi7uo _1e0ccj1k _1i4qfg65 _sudp1e54 _1yyjegat",
+  unclampedDescription: "_11c8fhey _syazi7uo _1i4qfg65",
   imageArea: "_2rko12b0 _1reo15vq _18m915vq _bfhkhfxm _4t3i68cl _6rthu2gc _p12f1osq _1bsbp3fh",
   image: "_1e0c1ule _4t3i1osq _5ral1f51 _1bsb1osq",
   imageHidden: "_3um015vq",
-  attribution: "_11c8wadc _zulp1b66 _4cvr1h6o _syazazsu _1e0c1txw _1i4qfg65",
+  attribution: "_zulp1b66 _4cvr1h6o _syazazsu _1e0c1txw _1i4qfg65",
+  compactAttribution: "_11c8wadc",
   attributionIcon: "_16jlidpf _1o9zidpf _i0dlexct _4cvr1h6o _1e0c1txw _4t3i7vkz _1bah1h6o _1bsb7vkz"
 };
 
 /** The selected item's description and attribution are announced through its aria-describedby. */
 export const QuickInsertHoverPreview = ({
   description,
+  icon,
   id,
   preview,
+  popupsMountPoint,
   referenceElement,
+  shouldClampText = true,
   title
 }) => {
   const {
@@ -64,10 +76,11 @@ export const QuickInsertHoverPreview = ({
   } = useThemeObserver();
   const imageUrl = preview.image ? colorMode === 'dark' && preview.image.dark ? preview.image.dark : preview.image.light : undefined;
   const hasAccessibleContent = Boolean(description || preview.attribution);
+  const portalTarget = popupsMountPoint !== null && popupsMountPoint !== void 0 ? popupsMountPoint : referenceElement.ownerDocument.body;
   return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Popper, {
     placement: "right-start",
     referenceElement: referenceElement,
-    strategy: "fixed",
+    strategy: popupsMountPoint ? 'absolute' : 'fixed',
     modifiers: PREVIEW_MODIFIERS
   }, ({
     ref,
@@ -79,20 +92,26 @@ export const QuickInsertHoverPreview = ({
     className: ax([styles.positioner])
   }, /*#__PURE__*/React.createElement(QuickInsertPreviewPanel, {
     description: description,
+    icon: icon,
     id: hasAccessibleContent ? id : undefined,
     imageUrl: imageUrl,
     preview: preview,
+    popupsMountPoint: popupsMountPoint,
     referenceElement: referenceElement,
+    shouldClampText: shouldClampText,
     title: title,
     update: update
-  }))), referenceElement.ownerDocument.body);
+  }))), portalTarget);
 };
 const QuickInsertPreviewPanel = ({
   description,
+  icon,
   id,
   imageUrl,
   preview,
+  popupsMountPoint,
   referenceElement,
+  shouldClampText,
   title,
   update
 }) => {
@@ -105,43 +124,69 @@ const QuickInsertPreviewPanel = ({
   const attributionName = (_preview$attribution2 = preview.attribution) === null || _preview$attribution2 === void 0 ? void 0 : _preview$attribution2.name;
   const formattedAttributionName = typeof attributionName === 'string' ? attributionName : attributionName ? formatMessage(attributionName) : '';
   useLayoutEffect(() => {
-    var _referenceElement$own;
+    var _ownerDocument$defaul;
     void update();
-    const ResizeObserverConstructor = (_referenceElement$own = referenceElement.ownerDocument.defaultView) === null || _referenceElement$own === void 0 ? void 0 : _referenceElement$own.ResizeObserver;
+    const {
+      ownerDocument
+    } = referenceElement;
+    const onScroll = () => void update();
+    const unbindScrollListener = bind(ownerDocument, {
+      type: 'scroll',
+      listener: onScroll,
+      options: true
+    });
+    const ResizeObserverConstructor = (_ownerDocument$defaul = ownerDocument.defaultView) === null || _ownerDocument$defaul === void 0 ? void 0 : _ownerDocument$defaul.ResizeObserver;
     if (!panelElement || !ResizeObserverConstructor) {
-      return;
+      return unbindScrollListener;
     }
     const observer = new ResizeObserverConstructor(() => void update());
     observer.observe(panelElement);
-    return () => observer.disconnect();
-  }, [panelElement, referenceElement, update]);
+    observer.observe(referenceElement);
+    if (popupsMountPoint) {
+      observer.observe(popupsMountPoint);
+    }
+    return () => {
+      unbindScrollListener();
+      observer.disconnect();
+    };
+  }, [panelElement, popupsMountPoint, referenceElement, update]);
   return /*#__PURE__*/React.createElement("div", {
     ref: setPanelElement,
     id: id,
     role: id ? 'tooltip' : undefined,
     "data-testid": "quick-insert-preview-panel",
     className: ax([styles.panel])
-  }, imageUrl && /*#__PURE__*/React.createElement(PreviewImage, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, imageUrl && /*#__PURE__*/React.createElement(PreviewImage, {
     key: imageUrl,
     imageUrl: imageUrl
   }), /*#__PURE__*/React.createElement("div", {
     className: ax([styles.content])
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    space: "space.100",
+    xcss: layoutStyles.titleRow,
+    "aria-hidden": "true"
+  }, icon && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
     "aria-hidden": "true",
-    className: ax([styles.title])
-  }, title), description && /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.description])
+    xcss: layoutStyles.titleIcon
+  }, icon), /*#__PURE__*/React.createElement("span", {
+    className: ax([shouldClampText && styles.title, !shouldClampText && styles.unclampedTitle])
+  }, title)), description && /*#__PURE__*/React.createElement("div", {
+    className: ax([shouldClampText && styles.description, !shouldClampText && styles.unclampedDescription])
   }, description), preview.attribution && /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.attribution])
+    className: ax([styles.attribution, shouldClampText && styles.compactAttribution])
   }, AttributionIcon && /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true",
     className: ax([styles.attributionIcon])
-  }, /*#__PURE__*/React.createElement(AttributionIcon, null)), /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(AttributionIcon, null)), /*#__PURE__*/React.createElement("span", {
+    className: ax([layoutStyles.attributionText])
+  }, /*#__PURE__*/React.createElement(Text, {
     size: "small",
     color: "color.text.subtle"
   }, AttributionIcon ? formattedAttributionName : formatMessage(messages.previewAttributionBy, {
     name: formattedAttributionName
-  })))));
+  })))))));
 };
 const PreviewImage = ({
   imageUrl

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

@@ -9,9 +9,12 @@ export const QuickInsertMenuItem = ({
   isDisabled,
   onSelect,
   preview,
+  previewIcon,
   previewImageUrls,
   shortcut,
+  titleContent,
   shouldShowPreview,
+  shouldClampPreview,
   shouldWrapIcon,
   title
 }) => {
@@ -25,6 +28,7 @@ export const QuickInsertMenuItem = ({
     isDisabled: isDisabled,
     onSelect: onSelect,
     shortcut: shortcut,
+    titleContent: titleContent,
     shouldWrapIcon: shouldWrapIcon,
     title: title
   }) : /*#__PURE__*/React.createElement(CompactQuickInsertMenuItem, {
@@ -34,9 +38,12 @@ export const QuickInsertMenuItem = ({
     isDisabled: isDisabled,
     onSelect: onSelect,
     preview: preview,
+    previewIcon: previewIcon,
     previewImageUrls: previewImageUrls,
     shortcut: shortcut,
+    titleContent: titleContent,
     shouldShowPreview: shouldShowPreview,
+    shouldClampPreview: shouldClampPreview,
     shouldWrapIcon: shouldWrapIcon,
     title: title
   });

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

@@ -0,0 +1,9 @@
+._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
+._1e0c1nu9{display:inline}
+._1i4qfg65{overflow-wrap:anywhere}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._mkrz1f6o{clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
+._mkrz1gdk{clip-path:polygon(0 0,100% 0,80% 100%,0 100%)}
+._o5724jg8{white-space:normal}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}

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

@@ -0,0 +1,35 @@
+/* SkillTag.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./SkillTag.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { cx } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Text } from '@atlaskit/primitives/compiled/text';
+const styles = {
+  highlight: "_bfhki8nm _16d9qvcn _1e0c1nu9",
+  start: "_bozg1b66 _y4ti1b66 _mkrz1f6o",
+  end: "_y4ti1b66 _mkrz1gdk",
+  wrapping: "_1i4qfg65 _o5724jg8",
+  text: "_1i4qfg65"
+};
+export const SkillTag = ({
+  slug,
+  isDisabled = false
+}) => /*#__PURE__*/React.createElement(Box, {
+  as: "span",
+  xcss: styles.wrapping
+}, /*#__PURE__*/React.createElement(Text, {
+  color: isDisabled ? 'color.text.disabled' : 'color.text',
+  xcss: styles.text
+}, /*#__PURE__*/React.createElement(Box, {
+  as: "span",
+  xcss: cx(styles.highlight, styles.start)
+}, /*#__PURE__*/React.createElement(Text, {
+  color: isDisabled ? 'color.text.disabled' : 'color.text.subtle'
+}, "/")), /*#__PURE__*/React.createElement(Box, {
+  as: "span",
+  xcss: styles.highlight
+}, slug.slice(0, -1)), slug && /*#__PURE__*/React.createElement(Box, {
+  as: "span",
+  xcss: cx(styles.highlight, styles.end)
+}, slug.slice(-1))));

package/dist/es2019/styles/shared/table.js

@@ -39,12 +39,10 @@ css`
  *
  * If you are updating this, please also update the above files.
  *
- * @deprecated This Emotion-based style function is being phased out as part of the
- * `platform_editor_core_static_css` experiment migration to Compiled CSS. While the experiment
- * is running, any changes here MUST also be reflected in `EditorContentContainer-compiled.tsx`
+ * @deprecated This Emotion-based style function is being phased out in favor of Compiled CSS.
+ * Any changes here MUST also be reflected in `EditorContentContainer-compiled.tsx`
  * (look for `tableSharedStyle`, `tableSharedStyle_with_*`, `tableSharedStyle_without_*` entries
- * in the `editorContentStyles` cssMap). Failure to do so will cause visual regressions when the
- * compiled version is active.
+ * in the `editorContentStyles` cssMap) to keep the shared styles consistent.
  */
 const tableSharedStyle = () => {
   const browser = getBrowserInfo();

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 = "128.0.0";
+const packageVersion = "128.1.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/esm/extensions/buildMenuItem.js

@@ -19,6 +19,7 @@ export function buildMenuItem(manifest, extensionModule) {
     }
   } : {}), {}, {
     key: key,
+    moduleKey: extensionModule.key,
     title: title,
     extensionType: manifest.type,
     extensionKey: manifest.key,

package/dist/esm/messages/syncBlock.js

@@ -420,6 +420,11 @@ export var syncBlockMessages = defineMessages({
     defaultMessage: 'Request access',
     description: 'Label shown in the synced location dropdown option when the sync block is not accessible to the user'
   },
+  syncedLocationDropdownRestrictedContent: {
+    id: 'fabric.editor.syncedLocationDropdownRestrictedContent',
+    defaultMessage: 'Restricted content',
+    description: 'Title shown in the synced location dropdown in place of a page or work item the user does not have permission to view'
+  },
   syncedLocationDropdownUntitledPage: {
     id: 'fabric.editor.syncedLocationDropdownUntitledPage',
     defaultMessage: 'Untitled',

package/dist/esm/monitoring/error.js

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

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

@@ -76,20 +76,26 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
     isDisabled = _ref.isDisabled,
     onSelect = _ref.onSelect,
     preview = _ref.preview,
+    previewIcon = _ref.previewIcon,
     previewImageUrls = _ref.previewImageUrls,
     shortcut = _ref.shortcut,
+    titleContent = _ref.titleContent,
     _ref$shouldShowPrevie = _ref.shouldShowPreview,
     shouldShowPreview = _ref$shouldShowPrevie === void 0 ? true : _ref$shouldShowPrevie,
+    shouldClampPreview = _ref.shouldClampPreview,
     _ref$shouldWrapIcon = _ref.shouldWrapIcon,
     shouldWrapIcon = _ref$shouldWrapIcon === void 0 ? true : _ref$shouldWrapIcon,
     title = _ref.title;
   var _useQuickInsertContex = useQuickInsertContext(),
-    item = _useQuickInsertContex.item;
+    item = _useQuickInsertContex.item,
+    popupsMountPoint = _useQuickInsertContex.popupsMountPoint;
   var _ref2 = item !== null && item !== void 0 ? item : {
       id: undefined,
+      isPreviewActive: undefined,
       isSelected: false
     },
     id = _ref2.id,
+    isPreviewActive = _ref2.isPreviewActive,
     isSelected = _ref2.isSelected;
   var resolvedDescription = description !== null && description !== void 0 ? description : item === null || item === void 0 ? void 0 : item.description;
   var previewId = useId();
@@ -103,7 +109,7 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
       image: previewImageUrls
     } : {};
   }, [preview, previewImageUrls]);
-  var shouldRenderPreview = shouldShowPreview && isSelected && !isDisabled;
+  var shouldRenderPreview = shouldShowPreview && (isPreviewActive !== null && isPreviewActive !== void 0 ? isPreviewActive : isSelected) && !isDisabled;
   var hasAccessiblePreview = Boolean(resolvedDescription || (resolvedPreview === null || resolvedPreview === void 0 ? void 0 : resolvedPreview.attribution));
   var previewAttributionName = (_resolvedPreview$attr = resolvedPreview.attribution) === null || _resolvedPreview$attr === void 0 ? void 0 : _resolvedPreview$attr.name;
   var previewAttributionKey = typeof previewAttributionName === 'string' ? previewAttributionName : previewAttributionName === null || previewAttributionName === void 0 ? void 0 : previewAttributionName.id;
@@ -126,7 +132,7 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
     alignBlock: "center",
     spread: "space-between",
     xcss: styles.content
-  }, /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
+  }, titleContent !== null && titleContent !== void 0 ? titleContent : /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.shortcut
   }, shortcut))), shouldRenderPreview && referenceElement && /*#__PURE__*/React.createElement(QuickInsertHoverPreview, {
@@ -134,7 +140,10 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
     id: previewId,
     description: resolvedDescription,
     preview: resolvedPreview,
+    popupsMountPoint: popupsMountPoint,
     referenceElement: referenceElement,
-    title: title
+    title: title,
+    icon: previewIcon,
+    shouldClampText: shouldClampPreview
   }));
 };

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

@@ -107,6 +107,7 @@ export var ElementBrowserQuickInsertMenuItem = function ElementBrowserQuickInser
     isDisabled = _ref.isDisabled,
     onSelect = _ref.onSelect,
     shortcut = _ref.shortcut,
+    titleContent = _ref.titleContent,
     _ref$shouldWrapIcon = _ref.shouldWrapIcon,
     shouldWrapIcon = _ref$shouldWrapIcon === void 0 ? true : _ref$shouldWrapIcon,
     title = _ref.title;
@@ -147,7 +148,7 @@ export var ElementBrowserQuickInsertMenuItem = function ElementBrowserQuickInser
     alignBlock: "center",
     spread: "space-between",
     space: "space.100"
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, titleContent !== null && titleContent !== void 0 ? titleContent : /*#__PURE__*/React.createElement(Text, {
     color: "color.text",
     maxLines: 1,
     size: "medium",

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

@@ -8,6 +8,7 @@
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1rjcutpp{padding-block:var(--ds-space-150,9pt)}
 ._16jlidpf{flex-grow:0}
+._16jlkb7n{flex-grow:1}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18m915vq{overflow-y:hidden}
 ._1bah1h6o{justify-content:center}
@@ -20,8 +21,10 @@
 ._1e0ccj1k{display:-webkit-box}
 ._1i4qfg65{overflow-wrap:anywhere}
 ._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
 ._1pby16oo{z-index:510}
 ._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
 ._1yyjcs5v{-webkit-line-clamp:2}
 ._1yyjegat{-webkit-line-clamp:4}
 ._2lx21bp4{flex-direction:column}
@@ -36,7 +39,9 @@
 ._bfhkhfxm{background-color:var(--ds-surface-sunken,#f8f8f8)}
 ._c71l1kw7{max-height:inherit}
 ._c71lk6is{max-height:calc(100vh - 1pc)}
+._i0dl1wug{flex-basis:auto}
 ._i0dlexct{flex-basis:16px}
+._k48pwu06{font-weight:var(--ds-font-weight-bold,653)}
 ._p12f1oec{max-width:calc(100vw - 1pc)}
 ._p12f1osq{max-width:100%}
 ._sudp1e54{-webkit-box-orient:vertical}

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

@@ -1,17 +1,18 @@
 /* QuickInsertHoverPreview.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./QuickInsertHoverPreview.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useLayoutEffect, useState } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 // Viewport calculations and multiline clamping require styles outside @atlaskit/css's schema.
 
+import { bind } from 'bind-event-listener';
 import { useIntl } from 'react-intl';
-
 // Viewport clamping requires modifiers, which the top-layer adapter does not support.
 import { Popper } from '@atlaskit/popper/react-popper';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Inline } from '@atlaskit/primitives/compiled/inline';
 import { Text } from '@atlaskit/primitives/compiled/text';
 import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
 import { messages } from './messages';
@@ -39,34 +40,47 @@ var PREVIEW_MODIFIERS = [{
     rootBoundary: 'viewport'
   }
 }];
+var layoutStyles = {
+  titleRow: "_1ul9idpf",
+  titleIcon: "_4cvr1h6o _1e0c1txw _1o9zidpf _1bah1h6o",
+  attributionText: "_16jlkb7n _1o9zkb7n _i0dl1wug _1ul9idpf _1i4qfg65"
+};
 var styles = {
   positioner: "_c71lk6is _p12f1oec _1pby16oo",
   panel: "_2rko1qi0 _1reo15vq _18m915vq _1rjcutpp _18zrutpp _vchhusvi _bfhk1bhr _16qs130s _c71l1kw7 _p12f1osq _1bsbncxg",
   content: "_zulpu2gc _1e0c1txw _2lx21bp4",
-  title: "_11c81qyo _1reo15vq _18m915vq _syazazsu _1i4qfg65 _1e0ccj1k _sudp1e54 _1yyjcs5v",
+  title: "_11c81qyo _16jlkb7n _1o9zkb7n _i0dl1wug _1reo15vq _18m915vq _syazazsu _1ul9idpf _1i4qfg65 _1e0ccj1k _sudp1e54 _1yyjcs5v",
+  unclampedTitle: "_11c8fhey _16jlkb7n _1o9zkb7n _i0dl1wug _syazi7uo _k48pwu06 _1ul9idpf _1i4qfg65",
   description: "_11c8fhey _1reo15vq _18m915vq _syazi7uo _1e0ccj1k _1i4qfg65 _sudp1e54 _1yyjegat",
+  unclampedDescription: "_11c8fhey _syazi7uo _1i4qfg65",
   imageArea: "_2rko12b0 _1reo15vq _18m915vq _bfhkhfxm _4t3i68cl _6rthu2gc _p12f1osq _1bsbp3fh",
   image: "_1e0c1ule _4t3i1osq _5ral1f51 _1bsb1osq",
   imageHidden: "_3um015vq",
-  attribution: "_11c8wadc _zulp1b66 _4cvr1h6o _syazazsu _1e0c1txw _1i4qfg65",
+  attribution: "_zulp1b66 _4cvr1h6o _syazazsu _1e0c1txw _1i4qfg65",
+  compactAttribution: "_11c8wadc",
   attributionIcon: "_16jlidpf _1o9zidpf _i0dlexct _4cvr1h6o _1e0c1txw _4t3i7vkz _1bah1h6o _1bsb7vkz"
 };
 
 /** The selected item's description and attribution are announced through its aria-describedby. */
 export var QuickInsertHoverPreview = function QuickInsertHoverPreview(_ref) {
   var description = _ref.description,
+    icon = _ref.icon,
     id = _ref.id,
     preview = _ref.preview,
+    popupsMountPoint = _ref.popupsMountPoint,
     referenceElement = _ref.referenceElement,
+    _ref$shouldClampText = _ref.shouldClampText,
+    shouldClampText = _ref$shouldClampText === void 0 ? true : _ref$shouldClampText,
     title = _ref.title;
   var _useThemeObserver = useThemeObserver(),
     colorMode = _useThemeObserver.colorMode;
   var imageUrl = preview.image ? colorMode === 'dark' && preview.image.dark ? preview.image.dark : preview.image.light : undefined;
   var hasAccessibleContent = Boolean(description || preview.attribution);
+  var portalTarget = popupsMountPoint !== null && popupsMountPoint !== void 0 ? popupsMountPoint : referenceElement.ownerDocument.body;
   return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Popper, {
     placement: "right-start",
     referenceElement: referenceElement,
-    strategy: "fixed",
+    strategy: popupsMountPoint ? 'absolute' : 'fixed',
     modifiers: PREVIEW_MODIFIERS
   }, function (_ref2) {
     var ref = _ref2.ref,
@@ -78,22 +92,28 @@ export var QuickInsertHoverPreview = function QuickInsertHoverPreview(_ref) {
       className: ax([styles.positioner])
     }, /*#__PURE__*/React.createElement(QuickInsertPreviewPanel, {
       description: description,
+      icon: icon,
       id: hasAccessibleContent ? id : undefined,
       imageUrl: imageUrl,
       preview: preview,
+      popupsMountPoint: popupsMountPoint,
       referenceElement: referenceElement,
+      shouldClampText: shouldClampText,
       title: title,
       update: update
     }));
-  }), referenceElement.ownerDocument.body);
+  }), portalTarget);
 };
 var QuickInsertPreviewPanel = function QuickInsertPreviewPanel(_ref3) {
   var _preview$attribution, _preview$attribution2;
   var description = _ref3.description,
+    icon = _ref3.icon,
     id = _ref3.id,
     imageUrl = _ref3.imageUrl,
     preview = _ref3.preview,
+    popupsMountPoint = _ref3.popupsMountPoint,
     referenceElement = _ref3.referenceElement,
+    shouldClampText = _ref3.shouldClampText,
     title = _ref3.title,
     update = _ref3.update;
   var _useIntl = useIntl(),
@@ -106,47 +126,71 @@ var QuickInsertPreviewPanel = function QuickInsertPreviewPanel(_ref3) {
   var attributionName = (_preview$attribution2 = preview.attribution) === null || _preview$attribution2 === void 0 ? void 0 : _preview$attribution2.name;
   var formattedAttributionName = typeof attributionName === 'string' ? attributionName : attributionName ? formatMessage(attributionName) : '';
   useLayoutEffect(function () {
-    var _referenceElement$own;
+    var _ownerDocument$defaul;
     void update();
-    var ResizeObserverConstructor = (_referenceElement$own = referenceElement.ownerDocument.defaultView) === null || _referenceElement$own === void 0 ? void 0 : _referenceElement$own.ResizeObserver;
+    var ownerDocument = referenceElement.ownerDocument;
+    var onScroll = function onScroll() {
+      return void update();
+    };
+    var unbindScrollListener = bind(ownerDocument, {
+      type: 'scroll',
+      listener: onScroll,
+      options: true
+    });
+    var ResizeObserverConstructor = (_ownerDocument$defaul = ownerDocument.defaultView) === null || _ownerDocument$defaul === void 0 ? void 0 : _ownerDocument$defaul.ResizeObserver;
     if (!panelElement || !ResizeObserverConstructor) {
-      return;
+      return unbindScrollListener;
     }
     var observer = new ResizeObserverConstructor(function () {
       return void update();
     });
     observer.observe(panelElement);
+    observer.observe(referenceElement);
+    if (popupsMountPoint) {
+      observer.observe(popupsMountPoint);
+    }
     return function () {
-      return observer.disconnect();
+      unbindScrollListener();
+      observer.disconnect();
     };
-  }, [panelElement, referenceElement, update]);
+  }, [panelElement, popupsMountPoint, referenceElement, update]);
   return /*#__PURE__*/React.createElement("div", {
     ref: setPanelElement,
     id: id,
     role: id ? 'tooltip' : undefined,
     "data-testid": "quick-insert-preview-panel",
     className: ax([styles.panel])
-  }, imageUrl && /*#__PURE__*/React.createElement(PreviewImage, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, imageUrl && /*#__PURE__*/React.createElement(PreviewImage, {
     key: imageUrl,
     imageUrl: imageUrl
   }), /*#__PURE__*/React.createElement("div", {
     className: ax([styles.content])
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    space: "space.100",
+    xcss: layoutStyles.titleRow,
+    "aria-hidden": "true"
+  }, icon && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
     "aria-hidden": "true",
-    className: ax([styles.title])
-  }, title), description && /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.description])
+    xcss: layoutStyles.titleIcon
+  }, icon), /*#__PURE__*/React.createElement("span", {
+    className: ax([shouldClampText && styles.title, !shouldClampText && styles.unclampedTitle])
+  }, title)), description && /*#__PURE__*/React.createElement("div", {
+    className: ax([shouldClampText && styles.description, !shouldClampText && styles.unclampedDescription])
   }, description), preview.attribution && /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.attribution])
+    className: ax([styles.attribution, shouldClampText && styles.compactAttribution])
   }, AttributionIcon && /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true",
     className: ax([styles.attributionIcon])
-  }, /*#__PURE__*/React.createElement(AttributionIcon, null)), /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(AttributionIcon, null)), /*#__PURE__*/React.createElement("span", {
+    className: ax([layoutStyles.attributionText])
+  }, /*#__PURE__*/React.createElement(Text, {
     size: "small",
     color: "color.text.subtle"
   }, AttributionIcon ? formattedAttributionName : formatMessage(messages.previewAttributionBy, {
     name: formattedAttributionName
-  })))));
+  })))))));
 };
 var PreviewImage = function PreviewImage(_ref4) {
   var imageUrl = _ref4.imageUrl;

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

@@ -9,9 +9,12 @@ export var QuickInsertMenuItem = function QuickInsertMenuItem(_ref) {
     isDisabled = _ref.isDisabled,
     onSelect = _ref.onSelect,
     preview = _ref.preview,
+    previewIcon = _ref.previewIcon,
     previewImageUrls = _ref.previewImageUrls,
     shortcut = _ref.shortcut,
+    titleContent = _ref.titleContent,
     shouldShowPreview = _ref.shouldShowPreview,
+    shouldClampPreview = _ref.shouldClampPreview,
     shouldWrapIcon = _ref.shouldWrapIcon,
     title = _ref.title;
   var _useQuickInsertContex = useQuickInsertContext(),
@@ -23,6 +26,7 @@ export var QuickInsertMenuItem = function QuickInsertMenuItem(_ref) {
     isDisabled: isDisabled,
     onSelect: onSelect,
     shortcut: shortcut,
+    titleContent: titleContent,
     shouldWrapIcon: shouldWrapIcon,
     title: title
   }) : /*#__PURE__*/React.createElement(CompactQuickInsertMenuItem, {
@@ -32,9 +36,12 @@ export var QuickInsertMenuItem = function QuickInsertMenuItem(_ref) {
     isDisabled: isDisabled,
     onSelect: onSelect,
     preview: preview,
+    previewIcon: previewIcon,
     previewImageUrls: previewImageUrls,
     shortcut: shortcut,
+    titleContent: titleContent,
     shouldShowPreview: shouldShowPreview,
+    shouldClampPreview: shouldClampPreview,
     shouldWrapIcon: shouldWrapIcon,
     title: title
   });

package/dist/esm/quick-insert/SkillTag.compiled.css

@@ -0,0 +1,9 @@
+._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
+._1e0c1nu9{display:inline}
+._1i4qfg65{overflow-wrap:anywhere}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._bozg1b66{padding-inline-start:var(--ds-space-050,4px)}
+._mkrz1f6o{clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
+._mkrz1gdk{clip-path:polygon(0 0,100% 0,80% 100%,0 100%)}
+._o5724jg8{white-space:normal}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}