@atlaskit/editor-plugin-type-ahead 22.0.3 → 22.1.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-type-ahead
 
+## 22.1.1
+
+### Patch Changes
+
+- [`7306003a7565b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7306003a7565b) -
+  Fix modal dismissal, category spacing, measured list height, and viewport-aware menu placement
+  under platform_editor_slash_command.
+- Updated dependencies
+
+## 22.1.0
+
+### Minor Changes
+
+- [`4c2cee2609bfd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4c2cee2609bfd) -
+  Render Rovo skill quick-insert items as a slash-command tag (`/slug`) in the editor, behind the
+  display_skill_lozenge_in_editor experiment.
+
+### Patch Changes
+
+- [`4af80d911cc15`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4af80d911cc15) -
+  Refresh open slash-command menus when Skills and other provider items load under
+  platform_editor_slash_command.
+
 ## 22.0.3
 
 ### Patch Changes

package/dist/cjs/ui/ListRow.js

@@ -24,6 +24,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var ListRow = exports.ListRow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     measure = _ref.measure,
+    onMeasured = _ref.onMeasured,
     index = _ref.index,
     style = _ref.style,
     isVisible = _ref.isVisible,
@@ -36,13 +37,14 @@ var ListRow = exports.ListRow = /*#__PURE__*/(0, _react.forwardRef)(function (_r
       return;
     }
     var observer = new ResizeObserver(function () {
-      return measure();
+      measure();
+      onMeasured === null || onMeasured === void 0 || onMeasured();
     });
     observer.observe(childElementRef.current);
     return function () {
       return observer.disconnect();
     };
-  }, [isScrolling, isVisible, measure]);
+  }, [isScrolling, isVisible, measure, onMeasured]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/cjs/ui/SkillTagLabel.compiled.css

@@ -0,0 +1,19 @@
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1e0c1nu9{display:inline}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._syaz16jw{color:var(--ds-text-accent-blue,#1558bc)}
+._syaz17qg{color:var(--ds-text-accent-teal,#206a83)}
+._syaz1s8m{color:var(--ds-text-accent-magenta,#943d73)}
+._syaz1sqi{color:var(--ds-text-accent-gray,#505258)}
+._syaz1tco{color:var(--ds-text-accent-lime,#4c6b1f)}
+._syaz9lu1{color:var(--ds-text-accent-red,#ae2e24)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._syazfb2s{color:var(--ds-text-accent-yellow,#7f5f01)}
+._syazh55r{color:var(--ds-text-accent-green,#216e4e)}
+._syazp1lv{color:var(--ds-text-accent-orange,#9e4c00)}
+._syazqmo9{color:var(--ds-text-accent-purple,#803fa5)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._vchhusvi{box-sizing:border-box}

package/dist/cjs/ui/SkillTagLabel.js

@@ -0,0 +1,88 @@
+/* SkillTagLabel.tsx generated by @compiled/babel-plugin v3.0.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseSkillTagTitle = exports.SkillTagLabel = void 0;
+require("./SkillTagLabel.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+var _css = require("@atlaskit/css");
+var _box = require("@atlaskit/primitives/compiled/box");
+var _text = require("@atlaskit/primitives/compiled/text");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var SKILL_TITLE_PREFIX = 'skill::';
+/**
+ * Parses a quick-insert item title of the form `skill::{COLOR}::{SLUG}::{NAME}`, produced by the
+ * Rovo skills quick-insert manifest when `display_skill_lozenge_in_editor` is enabled. Returns
+ * undefined for any title that isn't in this format.
+ */
+var parseSkillTagTitle = exports.parseSkillTagTitle = function parseSkillTagTitle(title) {
+  if (!title.startsWith(SKILL_TITLE_PREFIX)) {
+    return undefined;
+  }
+  var _title$split = title.split('::'),
+    _title$split2 = (0, _toArray2.default)(_title$split),
+    color = _title$split2[1],
+    slug = _title$split2[2],
+    nameParts = _arrayLikeToArray(_title$split2).slice(3);
+  var name = nameParts.join('::');
+  if (!slug || !name) {
+    return undefined;
+  }
+  return {
+    color: color || undefined,
+    slug: slug,
+    name: name
+  };
+};
+var styles = {
+  tag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
+  slash: "_1e0c1nu9 _2hwx1b66"
+};
+
+// Slash accent colors for a Rovo skill, mirroring the enum used by the inserted skill chip
+// (@atlassian/rovo-platform-ui-components/skills/skill-colors). Duplicated here — rather than
+// imported — so this shared, product-agnostic editor package doesn't take on a dependency on an
+// ai-mate/Rovo UI package. Modelled as a finite cssMap (rather than a runtime style override) so
+// each color resolves to a static, ratcheted style.
+var accentColorStyles = {
+  LIME: "_syaz1tco",
+  RED: "_syaz9lu1",
+  ORANGE: "_syazp1lv",
+  YELLOW: "_syazfb2s",
+  GREEN: "_syazh55r",
+  TEAL: "_syaz17qg",
+  BLUE: "_syaz16jw",
+  PURPLE: "_syazqmo9",
+  MAGENTA: "_syaz1s8m",
+  GRAY: "_syaz1sqi",
+  DEFAULT: "_syazazsu"
+};
+var isAccentColor = function isAccentColor(color) {
+  return Boolean(color && color in accentColorStyles);
+};
+/**
+ * Renders a skill as a tag/chip label in the quick-insert typeahead list, instead of plain text,
+ * mirroring the "/" + slug layout of the inserted skill chip (SkillTag). Never shows a hovercard
+ * — this is a lightweight label for the list row, not the inserted chip.
+ */
+var SkillTagLabel = exports.SkillTagLabel = function SkillTagLabel(_ref) {
+  var color = _ref.color,
+    slug = _ref.slug;
+  var accentColor = isAccentColor(color) ? color : 'DEFAULT';
+  return /*#__PURE__*/React.createElement(_box.Box, {
+    as: "span",
+    xcss: styles.tag
+  }, /*#__PURE__*/React.createElement(_box.Box, {
+    as: "span",
+    xcss: (0, _css.cx)(styles.slash, accentColorStyles[accentColor])
+  }, "/"), /*#__PURE__*/React.createElement(_text.Text, {
+    as: "span"
+  }, slug));
+};

package/dist/cjs/ui/TypeAheadListItem.js

@@ -20,6 +20,7 @@ var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
+var _SkillTagLabel = require("./SkillTagLabel");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /**
  * @jsxRuntime classic
@@ -161,6 +162,7 @@ var CustomItemComponentWrapper = /*#__PURE__*/_react.default.memo(function (prop
   })));
 });
 var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var _skillTag$name;
   var item = _ref.item,
     itemsLength = _ref.itemsLength,
     selectedIndex = _ref.selectedIndex,
@@ -206,6 +208,9 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
   var icon = item.icon,
     title = item.title,
     customRenderItem = item.render;
+  var skillTag = (0, _react.useMemo)(function () {
+    return (0, _isExperimentEnabled.isExperimentEnabled)('display_skill_lozenge_in_editor') ? (0, _SkillTagLabel.parseSkillTagTitle)(title) : undefined;
+  }, [title]);
   var elementIcon = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)("div", {
       css: [itemIcon, moreElementsInQuickInsertViewEnabled && itemIconSizeUpdated]
@@ -264,7 +269,7 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
       iconBefore: elementIcon,
       isSelected: isSelected,
       "aria-selected": isSelected,
-      "aria-label": title,
+      "aria-label": (_skillTag$name = skillTag === null || skillTag === void 0 ? void 0 : skillTag.name) !== null && _skillTag$name !== void 0 ? _skillTag$name : title,
       "aria-describedby": descriptionText || shortcutText ? descriptionId : undefined,
       "aria-setsize": itemsLength,
       "aria-posinset": itemIndex + 1,
@@ -283,7 +288,10 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
       css: itemBody
     }, (0, _react2.jsx)("div", {
       css: [itemTitle, moreElementsInQuickInsertViewEnabled && itemTitleOverride, itemIsDisabled && disabledStyle, item.lozenge && titleWithLozengeStyle]
-    }, item.title, item.lozenge && (0, _react2.jsx)("span", {
+    }, skillTag ? (0, _react2.jsx)(_SkillTagLabel.SkillTagLabel, {
+      color: skillTag.color,
+      slug: skillTag.slug
+    }) : item.title, item.lozenge && (0, _react2.jsx)("span", {
       css: lozengeWrapperStyle
     }, item.lozenge)), (0, _react2.jsx)("div", {
       css: itemAfter

package/dist/cjs/ui/registered-menu/RegisteredTypeAheadMenu.compiled.css

@@ -1,7 +1,8 @@
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._1rjc1b66{padding-block:var(--ds-space-050,4px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18m915vq{overflow-y:hidden}
 ._1bsbnklw{width:20pc}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
 ._1reo15vq{overflow-x:hidden}
+._85i512x7{padding-block-end:var(--ds-space-075,6px)}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._vchhusvi{box-sizing:border-box}

package/dist/cjs/ui/registered-menu/RegisteredTypeAheadMenu.js

@@ -14,6 +14,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _registeredMenuModel = require("@atlaskit/editor-common/quick-insert/registered-menu-model");
+var _useMenuPopupSizing = require("@atlaskit/editor-common/quick-insert/use-menu-popup-sizing");
 var _typeAheadIsSectionOverflowItemKey = require("@atlaskit/editor-common/type-ahead-is-section-overflow-item-key");
 var _typeAheadSurfaceContext = require("@atlaskit/editor-common/type-ahead-surface-context");
 var _ui = require("@atlaskit/editor-common/ui");
@@ -28,13 +29,18 @@ var _TypeAheadMenuRenderer = require("./TypeAheadMenuRenderer");
 var _TypeAheadProvider = require("./TypeAheadProvider");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  menu: "_2rko12b0 _1reo15vq _18m915vq _1rjc1b66 _bfhk1bhr _vchhusvi _16qs130s _1bsbnklw"
+  menu: "_2rko1mok _1reo15vq _18m915vq _bfhk1bhr _vchhusvi _16qs130s _1q51u2gc _85i512x7 _1bsbnklw"
 };
 var DEFAULT_MENU_MAX_HEIGHT = 480;
-var MENU_VERTICAL_PADDING = 8;
+var MENU_VERTICAL_PADDING = 14;
 var MENU_WIDTH = 320;
 var POPUP_OFFSET = [0, 8];
+var EMPTY_COMPONENTS = [];
+var subscribeToNothing = function subscribeToNothing() {
+  return function () {};
+};
 var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
+  var _api$uiControlRegistr2, _api$uiControlRegistr3;
   var anchorElement = _ref.anchorElement,
     api = _ref.api,
     cancel = _ref.cancel,
@@ -52,6 +58,13 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
     setQuery = _ref.setQuery,
     surface = _ref.surface,
     triggerHandler = _ref.triggerHandler;
+  var menuHeight = (0, _useMenuPopupSizing.useMenuPopupSizing)({
+    target: anchorElement,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    maxHeight: maxHeight,
+    offset: POPUP_OFFSET[1]
+  });
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var generatedId = (0, _react.useId)();
@@ -71,10 +84,12 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     selectedItemIndex = _useState4[0],
     setSelectedItemIndex = _useState4[1];
-  var components = (0, _react.useMemo)(function () {
-    var _api$uiControlRegistr, _api$uiControlRegistr2;
-    return (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(surface.root.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+  var getComponents = (0, _react.useCallback)(function () {
+    var _api$uiControlRegistr;
+    var components = api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.getComponents(surface.root.key);
+    return components !== null && components !== void 0 && components.length ? components : EMPTY_COMPONENTS;
   }, [api, surface.root.key]);
+  var components = (0, _react.useSyncExternalStore)((_api$uiControlRegistr2 = api === null || api === void 0 || (_api$uiControlRegistr3 = api.uiControlRegistry) === null || _api$uiControlRegistr3 === void 0 ? void 0 : _api$uiControlRegistr3.actions.subscribe) !== null && _api$uiControlRegistr2 !== void 0 ? _api$uiControlRegistr2 : subscribeToNothing, getComponents, getComponents);
   var isSlashCommandEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command');
   var hasSectionOverflowItems = (0, _react.useMemo)(function () {
     return components.some(function (_ref2) {
@@ -165,7 +180,7 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
   }), /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     ariaLabel: null,
     boundariesElement: popupsBoundariesElement,
-    fitHeight: maxHeight,
+    fitHeight: menuHeight,
     fitWidth: MENU_WIDTH,
     mountTo: popupsMountPoint,
     offset: POPUP_OFFSET,
@@ -184,7 +199,7 @@ var RegisteredTypeAheadMenu = exports.RegisteredTypeAheadMenu = function Registe
     Item: surface.Item,
     listLabel: surface.listLabel,
     listId: listId,
-    maxHeight: Math.max(0, maxHeight - MENU_VERTICAL_PADDING),
+    maxHeight: Math.max(0, menuHeight - MENU_VERTICAL_PADDING),
     model: menuModel,
     onItemHover: setSelectedItemIndex,
     selectedItemIndex: selectedItemIndex

package/dist/cjs/ui/registered-menu/TypeAheadMenuRenderer.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
 var _List = require("react-virtualized/dist/commonjs/List");
+var _useMenuListHeight2 = require("@atlaskit/editor-common/quick-insert/use-menu-list-height");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _createTypeAheadRowRenderer = require("./createTypeAheadRowRenderer");
@@ -24,7 +25,8 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var LIST_WIDTH = 320;
 var ESTIMATED_ROW_HEIGHT = 56;
-var MENU_FOOTER_HEIGHT = 48;
+// 40px item + 8px block padding + 1px separator.
+var MENU_FOOTER_HEIGHT = 49;
 var TypeAheadMenuRenderer = exports.TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
   var _model$root$component;
   var Item = _ref.Item,
@@ -82,6 +84,9 @@ var TypeAheadMenuRenderer = exports.TypeAheadMenuRenderer = function TypeAheadMe
       return "".concat(type, ":").concat(key);
     }).join('\0');
   }, [rows]);
+  var _useMenuListHeight = (0, _useMenuListHeight2.useMenuListHeight)(cache, rows.length, rowKeySignature),
+    measuredHeight = _useMenuListHeight.height,
+    updateHeight = _useMenuListHeight.updateHeight;
   (0, _react.useLayoutEffect)(function () {
     var _listRef$current, _listRef$current2;
     cache.clearAll();
@@ -96,6 +101,7 @@ var TypeAheadMenuRenderer = exports.TypeAheadMenuRenderer = function TypeAheadMe
   }, [selectedRowIndex]);
   var renderRow = (0, _createTypeAheadRowRenderer.createTypeAheadRowRenderer)({
     cache: cache,
+    onMeasured: updateHeight,
     itemIndexByRowIndex: itemIndexByRowIndex,
     Item: Item,
     listId: listId,
@@ -119,7 +125,8 @@ var TypeAheadMenuRenderer = exports.TypeAheadMenuRenderer = function TypeAheadMe
     role: hasListboxContent ? 'listbox' : undefined
   }, rows.length > 0 ? /*#__PURE__*/_react.default.createElement(_List.List, {
     containerRole: "presentation",
-    height: Math.min(rows.length * ESTIMATED_ROW_HEIGHT, listMaxHeight),
+    height: Math.min(measuredHeight, listMaxHeight),
+    onRowsRendered: updateHeight,
     overscanRowCount: 3,
     ref: listRef,
     role: "presentation",

package/dist/cjs/ui/registered-menu/createTypeAheadRowRenderer.js

@@ -13,6 +13,7 @@ var _TypeAheadSectionRow = require("./TypeAheadSectionRow");
 var noOp = function noOp() {};
 var createTypeAheadRowRenderer = exports.createTypeAheadRowRenderer = function createTypeAheadRowRenderer(_ref) {
   var cache = _ref.cache,
+    onMeasured = _ref.onMeasured,
     itemIndexByRowIndex = _ref.itemIndexByRowIndex,
     Item = _ref.Item,
     listId = _ref.listId,
@@ -44,6 +45,7 @@ var createTypeAheadRowRenderer = exports.createTypeAheadRowRenderer = function c
         isScrolling: isScrolling,
         isVisible: isVisible,
         measure: measure,
+        onMeasured: onMeasured,
         onMouseMove: noOp,
         style: style
       }, registration.type === 'menu-section' ? /*#__PURE__*/_react.default.createElement(_TypeAheadSectionRow.TypeAheadSectionRow, {

package/dist/es2019/ui/ListRow.js

@@ -16,6 +16,7 @@ import React, { useEffect, useRef, forwardRef } from 'react';
 export const ListRow = /*#__PURE__*/forwardRef(({
   children,
   measure,
+  onMeasured,
   index,
   style,
   isVisible,
@@ -28,10 +29,13 @@ export const ListRow = /*#__PURE__*/forwardRef(({
     if (!childElementRef.current || !isVisible || isScrolling) {
       return;
     }
-    const observer = new ResizeObserver(() => measure());
+    const observer = new ResizeObserver(() => {
+      measure();
+      onMeasured === null || onMeasured === void 0 ? void 0 : onMeasured();
+    });
     observer.observe(childElementRef.current);
     return () => observer.disconnect();
-  }, [isScrolling, isVisible, measure]);
+  }, [isScrolling, isVisible, measure, onMeasured]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/es2019/ui/SkillTagLabel.compiled.css

@@ -0,0 +1,19 @@
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1e0c1nu9{display:inline}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._syaz16jw{color:var(--ds-text-accent-blue,#1558bc)}
+._syaz17qg{color:var(--ds-text-accent-teal,#206a83)}
+._syaz1s8m{color:var(--ds-text-accent-magenta,#943d73)}
+._syaz1sqi{color:var(--ds-text-accent-gray,#505258)}
+._syaz1tco{color:var(--ds-text-accent-lime,#4c6b1f)}
+._syaz9lu1{color:var(--ds-text-accent-red,#ae2e24)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._syazfb2s{color:var(--ds-text-accent-yellow,#7f5f01)}
+._syazh55r{color:var(--ds-text-accent-green,#216e4e)}
+._syazp1lv{color:var(--ds-text-accent-orange,#9e4c00)}
+._syazqmo9{color:var(--ds-text-accent-purple,#803fa5)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._vchhusvi{box-sizing:border-box}

package/dist/es2019/ui/SkillTagLabel.js

@@ -0,0 +1,72 @@
+/* SkillTagLabel.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./SkillTagLabel.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { cx } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Text } from '@atlaskit/primitives/compiled/text';
+const SKILL_TITLE_PREFIX = 'skill::';
+/**
+ * Parses a quick-insert item title of the form `skill::{COLOR}::{SLUG}::{NAME}`, produced by the
+ * Rovo skills quick-insert manifest when `display_skill_lozenge_in_editor` is enabled. Returns
+ * undefined for any title that isn't in this format.
+ */
+export const parseSkillTagTitle = title => {
+  if (!title.startsWith(SKILL_TITLE_PREFIX)) {
+    return undefined;
+  }
+  const [, color, slug, ...nameParts] = title.split('::');
+  const name = nameParts.join('::');
+  if (!slug || !name) {
+    return undefined;
+  }
+  return {
+    color: color || undefined,
+    slug,
+    name
+  };
+};
+const styles = {
+  tag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
+  slash: "_1e0c1nu9 _2hwx1b66"
+};
+
+// Slash accent colors for a Rovo skill, mirroring the enum used by the inserted skill chip
+// (@atlassian/rovo-platform-ui-components/skills/skill-colors). Duplicated here — rather than
+// imported — so this shared, product-agnostic editor package doesn't take on a dependency on an
+// ai-mate/Rovo UI package. Modelled as a finite cssMap (rather than a runtime style override) so
+// each color resolves to a static, ratcheted style.
+const accentColorStyles = {
+  LIME: "_syaz1tco",
+  RED: "_syaz9lu1",
+  ORANGE: "_syazp1lv",
+  YELLOW: "_syazfb2s",
+  GREEN: "_syazh55r",
+  TEAL: "_syaz17qg",
+  BLUE: "_syaz16jw",
+  PURPLE: "_syazqmo9",
+  MAGENTA: "_syaz1s8m",
+  GRAY: "_syaz1sqi",
+  DEFAULT: "_syazazsu"
+};
+const isAccentColor = color => Boolean(color && color in accentColorStyles);
+/**
+ * Renders a skill as a tag/chip label in the quick-insert typeahead list, instead of plain text,
+ * mirroring the "/" + slug layout of the inserted skill chip (SkillTag). Never shows a hovercard
+ * — this is a lightweight label for the list row, not the inserted chip.
+ */
+export const SkillTagLabel = ({
+  color,
+  slug
+}) => {
+  const accentColor = isAccentColor(color) ? color : 'DEFAULT';
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.tag
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: cx(styles.slash, accentColorStyles[accentColor])
+  }, "/"), /*#__PURE__*/React.createElement(Text, {
+    as: "span"
+  }, slug));
+};

package/dist/es2019/ui/TypeAheadListItem.js

@@ -17,6 +17,8 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import ButtonItem from '@atlaskit/menu/button-item';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
+import { parseSkillTagTitle, SkillTagLabel } from './SkillTagLabel';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const itemIcon = css({
   width: "var(--ds-space-500, 40px)",
@@ -181,6 +183,7 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
   firstOnlineSupportedIndex,
   lastInputMethodRef
 }) => {
+  var _skillTag$name;
   const isSafari = getBrowserInfo().safari;
   const {
     connectivityMode
@@ -219,6 +222,7 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
     title,
     render: customRenderItem
   } = item;
+  const skillTag = useMemo(() => isExperimentEnabled('display_skill_lozenge_in_editor') ? parseSkillTagTitle(title) : undefined, [title]);
   const elementIcon = useMemo(() => {
     return jsx("div", {
       css: [itemIcon, moreElementsInQuickInsertViewEnabled && itemIconSizeUpdated]
@@ -277,7 +281,7 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
       iconBefore: elementIcon,
       isSelected: isSelected,
       "aria-selected": isSelected,
-      "aria-label": title,
+      "aria-label": (_skillTag$name = skillTag === null || skillTag === void 0 ? void 0 : skillTag.name) !== null && _skillTag$name !== void 0 ? _skillTag$name : title,
       "aria-describedby": descriptionText || shortcutText ? descriptionId : undefined,
       "aria-setsize": itemsLength,
       "aria-posinset": itemIndex + 1,
@@ -296,7 +300,10 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
       css: itemBody
     }, jsx("div", {
       css: [itemTitle, moreElementsInQuickInsertViewEnabled && itemTitleOverride, itemIsDisabled && disabledStyle, item.lozenge && titleWithLozengeStyle]
-    }, item.title, item.lozenge && jsx("span", {
+    }, skillTag ? jsx(SkillTagLabel, {
+      color: skillTag.color,
+      slug: skillTag.slug
+    }) : item.title, item.lozenge && jsx("span", {
       css: lozengeWrapperStyle
     }, item.lozenge)), jsx("div", {
       css: itemAfter

package/dist/es2019/ui/registered-menu/RegisteredTypeAheadMenu.compiled.css

@@ -1,7 +1,8 @@
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._1rjc1b66{padding-block:var(--ds-space-050,4px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18m915vq{overflow-y:hidden}
 ._1bsbnklw{width:20pc}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
 ._1reo15vq{overflow-x:hidden}
+._85i512x7{padding-block-end:var(--ds-space-075,6px)}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._vchhusvi{box-sizing:border-box}

package/dist/es2019/ui/registered-menu/RegisteredTypeAheadMenu.js

@@ -1,9 +1,10 @@
 /* RegisteredTypeAheadMenu.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./RegisteredTypeAheadMenu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { useIntl } from 'react-intl';
 import { buildQuickInsertMenuModel, getMatchingQuickInsertComponents, selectQuickInsertCategoryItems } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
+import { useMenuPopupSizing } from '@atlaskit/editor-common/quick-insert/use-menu-popup-sizing';
 import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
 import { TYPE_AHEAD_SURFACE_CONTEXT } from '@atlaskit/editor-common/type-ahead-surface-context';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -17,12 +18,14 @@ import { getTypeAheadItemId } from './getTypeAheadItemId';
 import { TypeAheadMenuRenderer } from './TypeAheadMenuRenderer';
 import { TypeAheadProvider } from './TypeAheadProvider';
 const styles = {
-  menu: "_2rko12b0 _1reo15vq _18m915vq _1rjc1b66 _bfhk1bhr _vchhusvi _16qs130s _1bsbnklw"
+  menu: "_2rko1mok _1reo15vq _18m915vq _bfhk1bhr _vchhusvi _16qs130s _1q51u2gc _85i512x7 _1bsbnklw"
 };
 const DEFAULT_MENU_MAX_HEIGHT = 480;
-const MENU_VERTICAL_PADDING = 8;
+const MENU_VERTICAL_PADDING = 14;
 const MENU_WIDTH = 320;
 const POPUP_OFFSET = [0, 8];
+const EMPTY_COMPONENTS = [];
+const subscribeToNothing = () => () => {};
 export const RegisteredTypeAheadMenu = ({
   anchorElement,
   api,
@@ -41,6 +44,14 @@ export const RegisteredTypeAheadMenu = ({
   surface,
   triggerHandler
 }) => {
+  var _api$uiControlRegistr2, _api$uiControlRegistr3;
+  const menuHeight = useMenuPopupSizing({
+    target: anchorElement,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    maxHeight,
+    offset: POPUP_OFFSET[1]
+  });
   const {
     formatMessage
   } = useIntl();
@@ -52,10 +63,12 @@ export const RegisteredTypeAheadMenu = ({
   }));
   const surfaceContext = useMemo(() => createSurfaceContext(TYPE_AHEAD_SURFACE_CONTEXT, typeAheadSurfaceContext), [typeAheadSurfaceContext]);
   const [selectedItemIndex, setSelectedItemIndex] = useState(0);
-  const components = useMemo(() => {
-    var _api$uiControlRegistr, _api$uiControlRegistr2;
-    return (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(surface.root.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+  const getComponents = useCallback(() => {
+    var _api$uiControlRegistr;
+    const components = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.getComponents(surface.root.key);
+    return components !== null && components !== void 0 && components.length ? components : EMPTY_COMPONENTS;
   }, [api, surface.root.key]);
+  const components = useSyncExternalStore((_api$uiControlRegistr2 = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr3 = api.uiControlRegistry) === null || _api$uiControlRegistr3 === void 0 ? void 0 : _api$uiControlRegistr3.actions.subscribe) !== null && _api$uiControlRegistr2 !== void 0 ? _api$uiControlRegistr2 : subscribeToNothing, getComponents, getComponents);
   const isSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
   const hasSectionOverflowItems = useMemo(() => components.some(({
     key
@@ -135,7 +148,7 @@ export const RegisteredTypeAheadMenu = ({
   }), /*#__PURE__*/React.createElement(Popup, {
     ariaLabel: null,
     boundariesElement: popupsBoundariesElement,
-    fitHeight: maxHeight,
+    fitHeight: menuHeight,
     fitWidth: MENU_WIDTH,
     mountTo: popupsMountPoint,
     offset: POPUP_OFFSET,
@@ -154,7 +167,7 @@ export const RegisteredTypeAheadMenu = ({
     Item: surface.Item,
     listLabel: surface.listLabel,
     listId: listId,
-    maxHeight: Math.max(0, maxHeight - MENU_VERTICAL_PADDING),
+    maxHeight: Math.max(0, menuHeight - MENU_VERTICAL_PADDING),
     model: menuModel,
     onItemHover: setSelectedItemIndex,
     selectedItemIndex: selectedItemIndex

package/dist/es2019/ui/registered-menu/TypeAheadMenuRenderer.js

@@ -2,6 +2,7 @@ import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
 import { List } from 'react-virtualized/dist/commonjs/List';
+import { useMenuListHeight } from '@atlaskit/editor-common/quick-insert/use-menu-list-height';
 import { typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { Box, Text } from '@atlaskit/primitives/compiled';
 import { createTypeAheadRowRenderer } from './createTypeAheadRowRenderer';
@@ -10,7 +11,8 @@ import { PassThrough } from './PassThrough';
 import { TypeAheadMenuFooter } from './TypeAheadMenuFooter';
 const LIST_WIDTH = 320;
 const ESTIMATED_ROW_HEIGHT = 56;
-const MENU_FOOTER_HEIGHT = 48;
+// 40px item + 8px block padding + 1px separator.
+const MENU_FOOTER_HEIGHT = 49;
 export const TypeAheadMenuRenderer = ({
   Item,
   listLabel,
@@ -53,6 +55,10 @@ export const TypeAheadMenuRenderer = ({
     key,
     type
   }) => `${type}:${key}`).join('\0'), [rows]);
+  const {
+    height: measuredHeight,
+    updateHeight
+  } = useMenuListHeight(cache, rows.length, rowKeySignature);
   useLayoutEffect(() => {
     var _listRef$current, _listRef$current2;
     cache.clearAll();
@@ -67,6 +73,7 @@ export const TypeAheadMenuRenderer = ({
   }, [selectedRowIndex]);
   const renderRow = createTypeAheadRowRenderer({
     cache,
+    onMeasured: updateHeight,
     itemIndexByRowIndex,
     Item,
     listId,
@@ -88,7 +95,8 @@ export const TypeAheadMenuRenderer = ({
     role: hasListboxContent ? 'listbox' : undefined
   }, rows.length > 0 ? /*#__PURE__*/React.createElement(List, {
     containerRole: "presentation",
-    height: Math.min(rows.length * ESTIMATED_ROW_HEIGHT, listMaxHeight),
+    height: Math.min(measuredHeight, listMaxHeight),
+    onRowsRendered: updateHeight,
     overscanRowCount: 3,
     ref: listRef,
     role: "presentation",

package/dist/es2019/ui/registered-menu/createTypeAheadRowRenderer.js

@@ -6,6 +6,7 @@ import { TypeAheadSectionRow } from './TypeAheadSectionRow';
 const noOp = () => {};
 export const createTypeAheadRowRenderer = ({
   cache,
+  onMeasured,
   itemIndexByRowIndex,
   Item,
   listId,
@@ -38,6 +39,7 @@ export const createTypeAheadRowRenderer = ({
     isScrolling: isScrolling,
     isVisible: isVisible,
     measure: measure,
+    onMeasured: onMeasured,
     onMouseMove: noOp,
     style: style
   }, registration.type === 'menu-section' ? /*#__PURE__*/React.createElement(TypeAheadSectionRow, {

package/dist/esm/ui/ListRow.js

@@ -16,6 +16,7 @@ import React, { useEffect, useRef, forwardRef } from 'react';
 export var ListRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     measure = _ref.measure,
+    onMeasured = _ref.onMeasured,
     index = _ref.index,
     style = _ref.style,
     isVisible = _ref.isVisible,
@@ -28,13 +29,14 @@ export var ListRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
       return;
     }
     var observer = new ResizeObserver(function () {
-      return measure();
+      measure();
+      onMeasured === null || onMeasured === void 0 || onMeasured();
     });
     observer.observe(childElementRef.current);
     return function () {
       return observer.disconnect();
     };
-  }, [isScrolling, isVisible, measure]);
+  }, [isScrolling, isVisible, measure, onMeasured]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop

package/dist/esm/ui/SkillTagLabel.compiled.css

@@ -0,0 +1,19 @@
+._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1e0c1nu9{display:inline}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._syaz16jw{color:var(--ds-text-accent-blue,#1558bc)}
+._syaz17qg{color:var(--ds-text-accent-teal,#206a83)}
+._syaz1s8m{color:var(--ds-text-accent-magenta,#943d73)}
+._syaz1sqi{color:var(--ds-text-accent-gray,#505258)}
+._syaz1tco{color:var(--ds-text-accent-lime,#4c6b1f)}
+._syaz9lu1{color:var(--ds-text-accent-red,#ae2e24)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._syazfb2s{color:var(--ds-text-accent-yellow,#7f5f01)}
+._syazh55r{color:var(--ds-text-accent-green,#216e4e)}
+._syazp1lv{color:var(--ds-text-accent-orange,#9e4c00)}
+._syazqmo9{color:var(--ds-text-accent-purple,#803fa5)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._vchhusvi{box-sizing:border-box}

package/dist/esm/ui/SkillTagLabel.js

@@ -0,0 +1,79 @@
+/* SkillTagLabel.tsx generated by @compiled/babel-plugin v3.0.2 */
+import _toArray from "@babel/runtime/helpers/toArray";
+import "./SkillTagLabel.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { cx } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Text } from '@atlaskit/primitives/compiled/text';
+var SKILL_TITLE_PREFIX = 'skill::';
+/**
+ * Parses a quick-insert item title of the form `skill::{COLOR}::{SLUG}::{NAME}`, produced by the
+ * Rovo skills quick-insert manifest when `display_skill_lozenge_in_editor` is enabled. Returns
+ * undefined for any title that isn't in this format.
+ */
+export var parseSkillTagTitle = function parseSkillTagTitle(title) {
+  if (!title.startsWith(SKILL_TITLE_PREFIX)) {
+    return undefined;
+  }
+  var _title$split = title.split('::'),
+    _title$split2 = _toArray(_title$split),
+    color = _title$split2[1],
+    slug = _title$split2[2],
+    nameParts = _arrayLikeToArray(_title$split2).slice(3);
+  var name = nameParts.join('::');
+  if (!slug || !name) {
+    return undefined;
+  }
+  return {
+    color: color || undefined,
+    slug: slug,
+    name: name
+  };
+};
+var styles = {
+  tag: "_2rkolb4i _1e0c1nu9 _16d9qvcn _vchhusvi _18u01b66 _19bv1b66 _u5f31b66 _bfhki8nm",
+  slash: "_1e0c1nu9 _2hwx1b66"
+};
+
+// Slash accent colors for a Rovo skill, mirroring the enum used by the inserted skill chip
+// (@atlassian/rovo-platform-ui-components/skills/skill-colors). Duplicated here — rather than
+// imported — so this shared, product-agnostic editor package doesn't take on a dependency on an
+// ai-mate/Rovo UI package. Modelled as a finite cssMap (rather than a runtime style override) so
+// each color resolves to a static, ratcheted style.
+var accentColorStyles = {
+  LIME: "_syaz1tco",
+  RED: "_syaz9lu1",
+  ORANGE: "_syazp1lv",
+  YELLOW: "_syazfb2s",
+  GREEN: "_syazh55r",
+  TEAL: "_syaz17qg",
+  BLUE: "_syaz16jw",
+  PURPLE: "_syazqmo9",
+  MAGENTA: "_syaz1s8m",
+  GRAY: "_syaz1sqi",
+  DEFAULT: "_syazazsu"
+};
+var isAccentColor = function isAccentColor(color) {
+  return Boolean(color && color in accentColorStyles);
+};
+/**
+ * Renders a skill as a tag/chip label in the quick-insert typeahead list, instead of plain text,
+ * mirroring the "/" + slug layout of the inserted skill chip (SkillTag). Never shows a hovercard
+ * — this is a lightweight label for the list row, not the inserted chip.
+ */
+export var SkillTagLabel = function SkillTagLabel(_ref) {
+  var color = _ref.color,
+    slug = _ref.slug;
+  var accentColor = isAccentColor(color) ? color : 'DEFAULT';
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.tag
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: cx(styles.slash, accentColorStyles[accentColor])
+  }, "/"), /*#__PURE__*/React.createElement(Text, {
+    as: "span"
+  }, slug));
+};

package/dist/esm/ui/TypeAheadListItem.js

@@ -19,6 +19,8 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import ButtonItem from '@atlaskit/menu/button-item';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
+import { parseSkillTagTitle, SkillTagLabel } from './SkillTagLabel';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var itemIcon = css({
   width: "var(--ds-space-500, 40px)",
@@ -153,6 +155,7 @@ var CustomItemComponentWrapper = /*#__PURE__*/React.memo(function (props) {
   })));
 });
 export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref) {
+  var _skillTag$name;
   var item = _ref.item,
     itemsLength = _ref.itemsLength,
     selectedIndex = _ref.selectedIndex,
@@ -198,6 +201,9 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref) {
   var icon = item.icon,
     title = item.title,
     customRenderItem = item.render;
+  var skillTag = useMemo(function () {
+    return isExperimentEnabled('display_skill_lozenge_in_editor') ? parseSkillTagTitle(title) : undefined;
+  }, [title]);
   var elementIcon = useMemo(function () {
     return jsx("div", {
       css: [itemIcon, moreElementsInQuickInsertViewEnabled && itemIconSizeUpdated]
@@ -256,7 +262,7 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref) {
       iconBefore: elementIcon,
       isSelected: isSelected,
       "aria-selected": isSelected,
-      "aria-label": title,
+      "aria-label": (_skillTag$name = skillTag === null || skillTag === void 0 ? void 0 : skillTag.name) !== null && _skillTag$name !== void 0 ? _skillTag$name : title,
       "aria-describedby": descriptionText || shortcutText ? descriptionId : undefined,
       "aria-setsize": itemsLength,
       "aria-posinset": itemIndex + 1,
@@ -275,7 +281,10 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref) {
       css: itemBody
     }, jsx("div", {
       css: [itemTitle, moreElementsInQuickInsertViewEnabled && itemTitleOverride, itemIsDisabled && disabledStyle, item.lozenge && titleWithLozengeStyle]
-    }, item.title, item.lozenge && jsx("span", {
+    }, skillTag ? jsx(SkillTagLabel, {
+      color: skillTag.color,
+      slug: skillTag.slug
+    }) : item.title, item.lozenge && jsx("span", {
       css: lozengeWrapperStyle
     }, item.lozenge)), jsx("div", {
       css: itemAfter

package/dist/esm/ui/registered-menu/RegisteredTypeAheadMenu.compiled.css

@@ -1,7 +1,8 @@
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._1rjc1b66{padding-block:var(--ds-space-050,4px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._2rko1mok{border-radius:var(--ds-radius-large,8px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18m915vq{overflow-y:hidden}
 ._1bsbnklw{width:20pc}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
 ._1reo15vq{overflow-x:hidden}
+._85i512x7{padding-block-end:var(--ds-space-075,6px)}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
 ._vchhusvi{box-sizing:border-box}

package/dist/esm/ui/registered-menu/RegisteredTypeAheadMenu.js

@@ -3,9 +3,10 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./RegisteredTypeAheadMenu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { useIntl } from 'react-intl';
 import { buildQuickInsertMenuModel, getMatchingQuickInsertComponents, selectQuickInsertCategoryItems } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
+import { useMenuPopupSizing } from '@atlaskit/editor-common/quick-insert/use-menu-popup-sizing';
 import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
 import { TYPE_AHEAD_SURFACE_CONTEXT } from '@atlaskit/editor-common/type-ahead-surface-context';
 import { Popup } from '@atlaskit/editor-common/ui';
@@ -19,13 +20,18 @@ import { getTypeAheadItemId } from './getTypeAheadItemId';
 import { TypeAheadMenuRenderer } from './TypeAheadMenuRenderer';
 import { TypeAheadProvider } from './TypeAheadProvider';
 var styles = {
-  menu: "_2rko12b0 _1reo15vq _18m915vq _1rjc1b66 _bfhk1bhr _vchhusvi _16qs130s _1bsbnklw"
+  menu: "_2rko1mok _1reo15vq _18m915vq _bfhk1bhr _vchhusvi _16qs130s _1q51u2gc _85i512x7 _1bsbnklw"
 };
 var DEFAULT_MENU_MAX_HEIGHT = 480;
-var MENU_VERTICAL_PADDING = 8;
+var MENU_VERTICAL_PADDING = 14;
 var MENU_WIDTH = 320;
 var POPUP_OFFSET = [0, 8];
+var EMPTY_COMPONENTS = [];
+var subscribeToNothing = function subscribeToNothing() {
+  return function () {};
+};
 export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
+  var _api$uiControlRegistr2, _api$uiControlRegistr3;
   var anchorElement = _ref.anchorElement,
     api = _ref.api,
     cancel = _ref.cancel,
@@ -43,6 +49,13 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
     setQuery = _ref.setQuery,
     surface = _ref.surface,
     triggerHandler = _ref.triggerHandler;
+  var menuHeight = useMenuPopupSizing({
+    target: anchorElement,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    maxHeight: maxHeight,
+    offset: POPUP_OFFSET[1]
+  });
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var generatedId = useId();
@@ -62,10 +75,12 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     selectedItemIndex = _useState4[0],
     setSelectedItemIndex = _useState4[1];
-  var components = useMemo(function () {
-    var _api$uiControlRegistr, _api$uiControlRegistr2;
-    return (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(surface.root.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+  var getComponents = useCallback(function () {
+    var _api$uiControlRegistr;
+    var components = api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.getComponents(surface.root.key);
+    return components !== null && components !== void 0 && components.length ? components : EMPTY_COMPONENTS;
   }, [api, surface.root.key]);
+  var components = useSyncExternalStore((_api$uiControlRegistr2 = api === null || api === void 0 || (_api$uiControlRegistr3 = api.uiControlRegistry) === null || _api$uiControlRegistr3 === void 0 ? void 0 : _api$uiControlRegistr3.actions.subscribe) !== null && _api$uiControlRegistr2 !== void 0 ? _api$uiControlRegistr2 : subscribeToNothing, getComponents, getComponents);
   var isSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
   var hasSectionOverflowItems = useMemo(function () {
     return components.some(function (_ref2) {
@@ -156,7 +171,7 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
   }), /*#__PURE__*/React.createElement(Popup, {
     ariaLabel: null,
     boundariesElement: popupsBoundariesElement,
-    fitHeight: maxHeight,
+    fitHeight: menuHeight,
     fitWidth: MENU_WIDTH,
     mountTo: popupsMountPoint,
     offset: POPUP_OFFSET,
@@ -175,7 +190,7 @@ export var RegisteredTypeAheadMenu = function RegisteredTypeAheadMenu(_ref) {
     Item: surface.Item,
     listLabel: surface.listLabel,
     listId: listId,
-    maxHeight: Math.max(0, maxHeight - MENU_VERTICAL_PADDING),
+    maxHeight: Math.max(0, menuHeight - MENU_VERTICAL_PADDING),
     model: menuModel,
     onItemHover: setSelectedItemIndex,
     selectedItemIndex: selectedItemIndex

package/dist/esm/ui/registered-menu/TypeAheadMenuRenderer.js

@@ -7,6 +7,7 @@ import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
 import { List } from 'react-virtualized/dist/commonjs/List';
+import { useMenuListHeight } from '@atlaskit/editor-common/quick-insert/use-menu-list-height';
 import { typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
 import { Box, Text } from '@atlaskit/primitives/compiled';
 import { createTypeAheadRowRenderer } from './createTypeAheadRowRenderer';
@@ -15,7 +16,8 @@ import { PassThrough } from './PassThrough';
 import { TypeAheadMenuFooter } from './TypeAheadMenuFooter';
 var LIST_WIDTH = 320;
 var ESTIMATED_ROW_HEIGHT = 56;
-var MENU_FOOTER_HEIGHT = 48;
+// 40px item + 8px block padding + 1px separator.
+var MENU_FOOTER_HEIGHT = 49;
 export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
   var _model$root$component;
   var Item = _ref.Item,
@@ -73,6 +75,9 @@ export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
       return "".concat(type, ":").concat(key);
     }).join('\0');
   }, [rows]);
+  var _useMenuListHeight = useMenuListHeight(cache, rows.length, rowKeySignature),
+    measuredHeight = _useMenuListHeight.height,
+    updateHeight = _useMenuListHeight.updateHeight;
   useLayoutEffect(function () {
     var _listRef$current, _listRef$current2;
     cache.clearAll();
@@ -87,6 +92,7 @@ export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
   }, [selectedRowIndex]);
   var renderRow = createTypeAheadRowRenderer({
     cache: cache,
+    onMeasured: updateHeight,
     itemIndexByRowIndex: itemIndexByRowIndex,
     Item: Item,
     listId: listId,
@@ -110,7 +116,8 @@ export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
     role: hasListboxContent ? 'listbox' : undefined
   }, rows.length > 0 ? /*#__PURE__*/React.createElement(List, {
     containerRole: "presentation",
-    height: Math.min(rows.length * ESTIMATED_ROW_HEIGHT, listMaxHeight),
+    height: Math.min(measuredHeight, listMaxHeight),
+    onRowsRendered: updateHeight,
     overscanRowCount: 3,
     ref: listRef,
     role: "presentation",

package/dist/esm/ui/registered-menu/createTypeAheadRowRenderer.js

@@ -6,6 +6,7 @@ import { TypeAheadSectionRow } from './TypeAheadSectionRow';
 var noOp = function noOp() {};
 export var createTypeAheadRowRenderer = function createTypeAheadRowRenderer(_ref) {
   var cache = _ref.cache,
+    onMeasured = _ref.onMeasured,
     itemIndexByRowIndex = _ref.itemIndexByRowIndex,
     Item = _ref.Item,
     listId = _ref.listId,
@@ -37,6 +38,7 @@ export var createTypeAheadRowRenderer = function createTypeAheadRowRenderer(_ref
         isScrolling: isScrolling,
         isVisible: isVisible,
         measure: measure,
+        onMeasured: onMeasured,
         onMouseMove: noOp,
         style: style
       }, registration.type === 'menu-section' ? /*#__PURE__*/React.createElement(TypeAheadSectionRow, {

package/dist/types/ui/ListRow.d.ts

@@ -17,5 +17,6 @@ import type { ListRowProps } from 'react-virtualized';
 export declare const ListRow: React.ForwardRefExoticComponent<{
     children: ReactNode;
     measure: () => void;
+    onMeasured?: () => void;
     onMouseMove: MouseEventHandler<HTMLDivElement>;
 } & Pick<ListRowProps, 'index' | 'isScrolling' | 'isVisible' | 'style'> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/ui/SkillTagLabel.d.ts

@@ -0,0 +1,21 @@
+export type ParsedSkillTag = {
+    color?: string;
+    name: string;
+    slug: string;
+};
+/**
+ * Parses a quick-insert item title of the form `skill::{COLOR}::{SLUG}::{NAME}`, produced by the
+ * Rovo skills quick-insert manifest when `display_skill_lozenge_in_editor` is enabled. Returns
+ * undefined for any title that isn't in this format.
+ */
+export declare const parseSkillTagTitle: (title: string) => ParsedSkillTag | undefined;
+export type SkillTagLabelProps = {
+    color?: string;
+    slug: string;
+};
+/**
+ * Renders a skill as a tag/chip label in the quick-insert typeahead list, instead of plain text,
+ * mirroring the "/" + slug layout of the inserted skill chip (SkillTag). Never shows a hovercard
+ * — this is a lightweight label for the list row, not the inserted chip.
+ */
+export declare const SkillTagLabel: ({ color, slug }: SkillTagLabelProps) => JSX.Element;

package/dist/types/ui/registered-menu/createTypeAheadRowRenderer.d.ts

@@ -2,12 +2,13 @@ import type { CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeas
 import type { ListRowRenderer } from 'react-virtualized/dist/commonjs/List';
 import type { RegisterMenuItem, RegisterMenuSection } from '@atlaskit/editor-ui-control-model/types';
 import type { TypeAheadItemComponent } from './typeAheadMenuTypes';
-export declare const createTypeAheadRowRenderer: ({ cache, itemIndexByRowIndex, Item, listId, onItemHover, rows, selectedItemIndex, }: {
+export declare const createTypeAheadRowRenderer: ({ cache, onMeasured, itemIndexByRowIndex, Item, listId, onItemHover, rows, selectedItemIndex, }: {
     cache: CellMeasurerCache;
     Item: TypeAheadItemComponent;
     itemIndexByRowIndex: Map<number, number>;
     listId: string;
     onItemHover: (itemIndex: number) => void;
+    onMeasured: () => void;
     rows: Array<RegisterMenuItem | RegisterMenuSection>;
     selectedItemIndex: number;
 }) => ListRowRenderer;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-type-ahead",
-	"version": "22.0.3",
+	"version": "22.1.1",
 	"description": "Type-ahead plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -42,7 +42,7 @@
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/prosemirror-history": "^1.2.0",
 		"@atlaskit/prosemirror-input-rules": "^4.1.0",
-		"@atlaskit/tmp-editor-statsig": "^208.0.0",
+		"@atlaskit/tmp-editor-statsig": "^209.0.0",
 		"@atlaskit/tokens": "^20.0.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -54,7 +54,7 @@
 		"w3c-keyname": "^2.1.8"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^125.2.0",
+		"@atlaskit/editor-common": "^125.4.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"