@atlaskit/editor-common 108.6.0 → 108.6.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-common
 
+## 108.6.1
+
+### Patch Changes
+
+- [`1315abde398a6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1315abde398a6) -
+  [ux] a11y: make search result items focusable under insert link popup
+- [`c308a1fcb2292`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c308a1fcb2292) -
+  Fix codeblock block menu option text
+- Updated dependencies
+
 ## 108.6.0
 
 ### Minor Changes

package/dist/cjs/hooks/useSharedPluginState.js

@@ -43,7 +43,7 @@ function useStaticPlugins(plugins) {
 }
 /**
  *
- * NOTE: Generally you may want to use `usePluginStateSelector` over this which behaves similarly
+ * NOTE: Generally you want to use `usePluginStateWithSelector` over this which behaves similarly
  * but selects a slice of the state which is more performant.
  *
  * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️

package/dist/cjs/hooks/useSharedPluginStateSelector/useSharedPluginStateSelector.js

@@ -41,6 +41,9 @@ var _usePluginStateEffect = require("../usePluginStateEffect");
 
 /**
  *
+ * NOTE: Generally you want to use `usePluginStateWithSelector` over this which behaves similarly
+ * but selects a slice of the state which is more performant.
+ * 
  * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
  * If the plugins you are listening to generate multiple shared states while the user is typing,
  * your React Component will get only the last one.

package/dist/cjs/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -25,13 +25,14 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 var _ = _interopRequireDefault(require("@atlaskit/icon-object/glyph/page/16"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../../analytics");
 var _ui = require("../../../ui");
 var _utils = require("../../../utils");
-var _LinkSearchList = _interopRequireDefault(require("../../LinkSearch/LinkSearchList"));
+var _LinkSearchList = _interopRequireWildcard(require("../../LinkSearch/LinkSearchList"));
 var _ToolbarComponents = require("../../LinkSearch/ToolbarComponents");
 var _transformTimeStamp = require("../../LinkSearch/transformTimeStamp");
 var _utils2 = require("./utils");
@@ -170,6 +171,10 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
     (0, _defineProperty2.default)(_this, "urlInputContainer", null);
     (0, _defineProperty2.default)(_this, "displayTextInputContainer", null);
     (0, _defineProperty2.default)(_this, "wrapperRef", /*#__PURE__*/_react.default.createRef());
+    // introduced via ff platform_editor_a11y_insert_link_item_focus, remove this comment cleaning up
+    (0, _defineProperty2.default)(_this, "listItemRefs", {
+      current: {}
+    });
     (0, _defineProperty2.default)(_this, "quickSearchQueryVersion", 0);
     (0, _defineProperty2.default)(_this, "analyticSource", 'createLinkInlineDialog');
     (0, _defineProperty2.default)(_this, "quickSearch", /*#__PURE__*/function () {
@@ -418,6 +423,17 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         return "".concat(name, ", ").concat(_container, ", ").concat(date === null || date === void 0 ? void 0 : date.pageAction, " ").concat(date === null || date === void 0 ? void 0 : date.dateString, " ").concat((date === null || date === void 0 ? void 0 : date.timeSince) || '');
       }
     });
+    // introduced via ff platform_editor_a11y_insert_link_item_focus, remove this comment cleaning up
+    (0, _defineProperty2.default)(_this, "listItemRefCallback", function (el, id) {
+      if (!_this.listItemRefs.current) {
+        return;
+      }
+      if (el === null) {
+        delete _this.listItemRefs.current[id];
+      } else {
+        _this.listItemRefs.current[id] = el;
+      }
+    });
     (0, _defineProperty2.default)(_this, "isUrlPopulatedWithSelectedItem", function () {
       /**
        * When we use ArrowKey to navigate through result items,
@@ -530,6 +546,12 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         return;
       }
     });
+    // introduced via ff platform_editor_a11y_insert_link_item_focus, remove this comment cleaning up
+    (0, _defineProperty2.default)(_this, "handleListItemFocus", function (index) {
+      _this.setState({
+        selectedIndex: index
+      });
+    });
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (0, _defineProperty2.default)(_this, "handleKeyDown", function (event) {
@@ -566,6 +588,11 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         updatedIndex = selectedIndex > 0 ? selectedIndex - 1 : items.length - 1;
       }
       if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && items[updatedIndex]) {
+        // introduced via ff platform_editor_a11y_insert_link_item_focus, remove this comment cleaning up
+        if (_this.listItemRefs.current) {
+          var _this$listItemRefs$cu;
+          (_this$listItemRefs$cu = _this.listItemRefs.current[items[updatedIndex].objectId]) === null || _this$listItemRefs$cu === void 0 || _this$listItemRefs$cu.focus();
+        }
         _this.setState({
           selectedIndex: updatedIndex,
           displayUrl: items[updatedIndex].url
@@ -937,7 +964,20 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         id: "fabric.editor.hyperlink.suggested.results"
       }, displayUrl && formatMessage(messages.searchLinkResults, {
         count: items.length
-      })), (0, _react2.jsx)(_LinkSearchList.default, {
+      })), (0, _platformFeatureFlags.fg)('platform_editor_a11y_insert_link_item_focus') ? (0, _react2.jsx)(_LinkSearchList.LinkSearchListNext, {
+        ariaControls: "fabric.editor.hyperlink.suggested.results",
+        id: linkSearchListId,
+        role: "listbox",
+        items: items,
+        isLoading: isLoading,
+        selectedIndex: selectedIndex,
+        listItemRefCallback: this.listItemRefCallback,
+        onFocus: this.handleListItemFocus,
+        onKeyDown: this.handleKeyDown,
+        onSelect: this.handleSelected,
+        onMouseEnter: this.handleMouseEnterResultItem,
+        onMouseLeave: this.handleMouseLeaveResultItem
+      }) : (0, _react2.jsx)(_LinkSearchList.default, {
         ariaControls: "fabric.editor.hyperlink.suggested.results",
         id: linkSearchListId,
         role: "listbox",

package/dist/cjs/link/LinkSearch/LinkSearchList.js

@@ -1,10 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.linkSearchList = exports.default = void 0;
+exports.linkSearchList = exports.default = exports.LinkSearchListNext = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -13,7 +14,8 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-var _LinkSearchListItem = _interopRequireDefault(require("./LinkSearchListItem"));
+var _LinkSearchListItem = _interopRequireWildcard(require("./LinkSearchListItem"));
+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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
@@ -35,6 +37,68 @@ var linkSearchList = exports.linkSearchList = (0, _react2.css)({
   padding: 0,
   listStyle: 'none'
 });
+var LinkSearchListNext = exports.LinkSearchListNext = function LinkSearchListNext(_ref) {
+  var listItemRefCallback = _ref.listItemRefCallback,
+    _onFocus = _ref.onFocus,
+    onKeyDown = _ref.onKeyDown,
+    onSelect = _ref.onSelect,
+    onMouseMove = _ref.onMouseMove,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    items = _ref.items,
+    selectedIndex = _ref.selectedIndex,
+    isLoading = _ref.isLoading,
+    ariaControls = _ref.ariaControls,
+    role = _ref.role,
+    id = _ref.id;
+  var itemsContent;
+  var loadingContent;
+  if (items && items.length > 0) {
+    itemsContent = (0, _react2.jsx)("ul", {
+      css: linkSearchList,
+      id: id,
+      role: role,
+      "aria-controls": ariaControls,
+      "data-testid": "".concat(id, "--items")
+    }, items.map(function (item, index) {
+      return (0, _react2.jsx)(_LinkSearchListItem.ForwardedLinkSearchListItemNextWithIntl, {
+        id: "link-search-list-item-".concat(index),
+        item: item,
+        selected: selectedIndex === index,
+        onFocus: function onFocus() {
+          return _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(index);
+        },
+        onKeyDown: onKeyDown,
+        onMouseMove: onMouseMove,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onSelect: onSelect,
+        key: item.objectId,
+        ref: function ref(el) {
+          return listItemRefCallback === null || listItemRefCallback === void 0 ? void 0 : listItemRefCallback(el, item.objectId);
+        }
+      });
+    }));
+  }
+  if (isLoading) {
+    loadingContent = (0, _react2.jsx)("div", {
+      id: id,
+      "data-testid": "".concat(id, "--loading"),
+      css: spinnerContainer
+    }, (0, _react2.jsx)(_spinner.default, {
+      size: "medium",
+      interactionName: "link-search-spinner"
+    }));
+  }
+  return (0, _react2.jsx)("div", {
+    css: listContainer
+  }, itemsContent, loadingContent);
+};
+/**
+ * *Warning:* With `platform_editor_a11y_insert_link_item_focus` enabled this component is no longer used and is replaced with `<LinkSearchListNext />`.
+ *
+ * If making changes to this component please ensure to also update `<LinkSearchListNext />`.
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var LinkSearchList = exports.default = /*#__PURE__*/function (_PureComponent) {

package/dist/cjs/link/LinkSearch/LinkSearchListItem.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.nameStyle = exports.default = exports.containerSelected = exports.containerName = exports.container = void 0;
+exports.nameStyle = exports.default = exports.containerSelected = exports.containerName = exports.container = exports.ForwardedLinkSearchListItemNextWithIntl = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -70,6 +70,92 @@ var iconStyle = (0, _react2.css)({
     maxWidth: '16px'
   }
 });
+var LinkSearchListItemNext = function LinkSearchListItemNext(props, ref) {
+  var id = props.id,
+    item = props.item,
+    onFocus = props.onFocus,
+    onKeyDown = props.onKeyDown,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onMouseMove = props.onMouseMove,
+    onSelect = props.onSelect,
+    selected = props.selected,
+    intl = props.intl;
+  var handleSelect = (0, _react.useCallback)(function (e) {
+    e.preventDefault(); // don't let editor lose focus
+    onSelect(item.url, item.name);
+  }, [onSelect, item.url, item.name]);
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Enter') {
+      onSelect(item.url, item.name);
+    }
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+  }, [onSelect, onKeyDown, item.url, item.name]);
+  var handleMouseMove = (0, _react.useCallback)(function () {
+    onMouseMove === null || onMouseMove === void 0 || onMouseMove(item.objectId);
+  }, [onMouseMove, item.objectId]);
+  var handleMouseEnter = (0, _react.useCallback)(function () {
+    onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(item.objectId);
+  }, [onMouseEnter, item.objectId]);
+  var handleMouseLeave = (0, _react.useCallback)(function () {
+    onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(item.objectId);
+  }, [onMouseLeave, item.objectId]);
+  var renderIcon = function renderIcon() {
+    if (item.icon) {
+      return (0, _react2.jsx)("span", {
+        css: iconStyle
+      }, item.icon);
+    }
+    if (item.iconUrl) {
+      return (0, _react2.jsx)("span", {
+        css: iconStyle
+      }, (0, _react2.jsx)("img", {
+        src: item.iconUrl,
+        alt: (0, _listItemAlts.getCorrectAltByIconUrl)(item.iconUrl, intl)
+      }));
+    }
+    return null;
+  };
+  var renderTimeStamp = function renderTimeStamp() {
+    var date = (0, _transformTimeStamp.transformTimeStamp)(intl, item.lastViewedDate, item.lastUpdatedDate);
+    return date && (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022", (0, _react2.jsx)("span", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: "link-search-timestamp",
+      "data-testid": "link-search-timestamp"
+    }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));
+  };
+  return (0, _react2.jsx)("div", {
+    ref: ref,
+    css: [container, selected && containerSelected],
+    role: 'option',
+    tabIndex: 0,
+    id: id,
+    "aria-selected": selected,
+    "data-testid": "link-search-list-item",
+    onFocus: onFocus,
+    onKeyDown: handleKeyDown,
+    onMouseMove: handleMouseMove,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: handleSelect
+  }, renderIcon(), (0, _react2.jsx)("span", {
+    css: nameWrapper
+  }, (0, _react2.jsx)("div", {
+    css: nameStyle
+  }, item.name), (0, _react2.jsx)("div", {
+    "data-testid": "link-search-list-item-container",
+    css: containerName
+  }, item.container, renderTimeStamp())));
+};
+var ForwardedLinkSearchListItemNext = /*#__PURE__*/(0, _react.forwardRef)(LinkSearchListItemNext);
+var ForwardedLinkSearchListItemNextWithIntl = exports.ForwardedLinkSearchListItemNextWithIntl = (0, _reactIntlNext.injectIntl)(ForwardedLinkSearchListItemNext, {
+  forwardRef: true
+});
+/**
+ * *Warning:* With `platform_editor_a11y_insert_link_item_focus` enabled this component is no longer used and is replaced with `<LinkSearchListItemNext />`.
+ *
+ * If making changes to this component please ensure to also update `<LinkSearchListItemNext />`.
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {

package/dist/cjs/messages/block-menu.js

@@ -37,7 +37,7 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     description: 'Convert to a code block'
   },
   layout: {
-    id: 'fabric.editor.block.menu.code.block',
+    id: 'fabric.editor.block.menu.layout',
     defaultMessage: 'Layout',
     description: 'Convert to a layout node'
   }

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 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 = "0.0.0-development";
+var packageVersion = "108.6.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/preset/core-plugin/index.js

@@ -130,13 +130,24 @@ var corePlugin = exports.corePlugin = function corePlugin(_ref) {
         }
         return cb(view === null || view === void 0 ? void 0 : view.state.schema);
       },
-      getAnchorIdForNode: function getAnchorIdForNode(node) {
+      getAnchorIdForNode: function getAnchorIdForNode(node, pos) {
         var _config$getEditorView3;
         var view = (_config$getEditorView3 = config === null || config === void 0 ? void 0 : config.getEditorView()) !== null && _config$getEditorView3 !== void 0 ? _config$getEditorView3 : null;
         if (!view) {
           return undefined;
         }
-        return (0, _nodeAnchorProvider.getNodeIdProvider)(view).getIdForNode(node);
+        var cachedId = (0, _nodeAnchorProvider.getNodeIdProvider)(view).getIdForNode(node);
+        if (cachedId) {
+          return cachedId;
+        }
+        if (pos < 0) {
+          return undefined;
+        }
+        var nodeDOM = view.nodeDOM(pos);
+        if (nodeDOM instanceof HTMLElement) {
+          return nodeDOM.getAttribute('data-node-anchor') || undefined;
+        }
+        return undefined;
       }
     }
   };

package/dist/cjs/safe-plugin/index.js

@@ -26,7 +26,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * This function is useful for annotating DOM elements with metadata that describes the type and characteristics of the ProseMirror node.
  *
  *
- * @param {Object} params - The parameters for the function.
+ * @param {object} params - The parameters for the function.
  * @param {PMNode} params.node - The ProseMirror node from which to derive metadata.
  * @param {HTMLElement} params.dom - The DOM element to which the metadata attributes will be attached.
  */

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 = "0.0.0-development";
+var packageVersion = "108.6.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/es2019/hooks/useSharedPluginState.js

@@ -29,7 +29,7 @@ function useStaticPlugins(plugins) {
 }
 /**
  *
- * NOTE: Generally you may want to use `usePluginStateSelector` over this which behaves similarly
+ * NOTE: Generally you want to use `usePluginStateWithSelector` over this which behaves similarly
  * but selects a slice of the state which is more performant.
  *
  * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️

package/dist/es2019/hooks/useSharedPluginStateSelector/useSharedPluginStateSelector.js

@@ -32,6 +32,9 @@ import { usePluginStateEffect } from '../usePluginStateEffect';
 
 /**
  *
+ * NOTE: Generally you want to use `usePluginStateWithSelector` over this which behaves similarly
+ * but selects a slice of the state which is more performant.
+ * 
  * ⚠️⚠️⚠️ This is a debounced hook ⚠️⚠️⚠️
  * If the plugins you are listening to generate multiple shared states while the user is typing,
  * your React Component will get only the last one.

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -15,6 +15,7 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Pressable, xcss } from '@atlaskit/primitives';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -22,7 +23,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '../../../analytics';
 import { Announcer, PanelTextInput } from '../../../ui';
 import { browser, normalizeUrl } from '../../../utils';
-import LinkSearchList from '../../LinkSearch/LinkSearchList';
+import LinkSearchList, { LinkSearchListNext } from '../../LinkSearch/LinkSearchList';
 import { container, containerWithProvider, inputWrapper } from '../../LinkSearch/ToolbarComponents';
 import { transformTimeStamp } from '../../LinkSearch/transformTimeStamp';
 import { filterUniqueItems, mapContentTypeToIcon, sha1, wordCount } from './utils';
@@ -151,6 +152,10 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
     _defineProperty(this, "urlInputContainer", null);
     _defineProperty(this, "displayTextInputContainer", null);
     _defineProperty(this, "wrapperRef", /*#__PURE__*/React.createRef());
+    // introduced via ff platform_editor_a11y_insert_link_item_focus, remove this comment cleaning up
+    _defineProperty(this, "listItemRefs", {
+      current: {}
+    });
     _defineProperty(this, "quickSearchQueryVersion", 0);
     _defineProperty(this, "analyticSource", 'createLinkInlineDialog');
     _defineProperty(this, "quickSearch", async (input, items, quickSearchLimit) => {
@@ -331,6 +336,17 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
         return `${name}, ${container}, ${date === null || date === void 0 ? void 0 : date.pageAction} ${date === null || date === void 0 ? void 0 : date.dateString} ${(date === null || date === void 0 ? void 0 : date.timeSince) || ''}`;
       }
     });
+    // introduced via ff platform_editor_a11y_insert_link_item_focus, remove this comment cleaning up
+    _defineProperty(this, "listItemRefCallback", (el, id) => {
+      if (!this.listItemRefs.current) {
+        return;
+      }
+      if (el === null) {
+        delete this.listItemRefs.current[id];
+      } else {
+        this.listItemRefs.current[id] = el;
+      }
+    });
     _defineProperty(this, "isUrlPopulatedWithSelectedItem", () => {
       /**
        * When we use ArrowKey to navigate through result items,
@@ -449,6 +465,12 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
         return;
       }
     });
+    // introduced via ff platform_editor_a11y_insert_link_item_focus, remove this comment cleaning up
+    _defineProperty(this, "handleListItemFocus", index => {
+      this.setState({
+        selectedIndex: index
+      });
+    });
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     _defineProperty(this, "handleKeyDown", event => {
@@ -491,6 +513,11 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
         updatedIndex = selectedIndex > 0 ? selectedIndex - 1 : items.length - 1;
       }
       if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && items[updatedIndex]) {
+        // introduced via ff platform_editor_a11y_insert_link_item_focus, remove this comment cleaning up
+        if (this.listItemRefs.current) {
+          var _this$listItemRefs$cu;
+          (_this$listItemRefs$cu = this.listItemRefs.current[items[updatedIndex].objectId]) === null || _this$listItemRefs$cu === void 0 ? void 0 : _this$listItemRefs$cu.focus();
+        }
         this.setState({
           selectedIndex: updatedIndex,
           displayUrl: items[updatedIndex].url
@@ -785,7 +812,20 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       id: "fabric.editor.hyperlink.suggested.results"
     }, displayUrl && formatMessage(messages.searchLinkResults, {
       count: items.length
-    })), jsx(LinkSearchList, {
+    })), fg('platform_editor_a11y_insert_link_item_focus') ? jsx(LinkSearchListNext, {
+      ariaControls: "fabric.editor.hyperlink.suggested.results",
+      id: linkSearchListId,
+      role: "listbox",
+      items: items,
+      isLoading: isLoading,
+      selectedIndex: selectedIndex,
+      listItemRefCallback: this.listItemRefCallback,
+      onFocus: this.handleListItemFocus,
+      onKeyDown: this.handleKeyDown,
+      onSelect: this.handleSelected,
+      onMouseEnter: this.handleMouseEnterResultItem,
+      onMouseLeave: this.handleMouseLeaveResultItem
+    }) : jsx(LinkSearchList, {
       ariaControls: "fabric.editor.hyperlink.suggested.results",
       id: linkSearchListId,
       role: "listbox",

package/dist/es2019/link/LinkSearch/LinkSearchList.js

@@ -7,7 +7,7 @@ import { PureComponent } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
-import LinkSearchListItem from './LinkSearchListItem';
+import LinkSearchListItem, { ForwardedLinkSearchListItemNextWithIntl } from './LinkSearchListItem';
 const listContainer = css({
   paddingTop: 0,
   marginTop: "var(--ds-space-150, 12px)",
@@ -24,6 +24,63 @@ export const linkSearchList = css({
   padding: 0,
   listStyle: 'none'
 });
+export const LinkSearchListNext = ({
+  listItemRefCallback,
+  onFocus,
+  onKeyDown,
+  onSelect,
+  onMouseMove,
+  onMouseEnter,
+  onMouseLeave,
+  items,
+  selectedIndex,
+  isLoading,
+  ariaControls,
+  role,
+  id
+}) => {
+  let itemsContent;
+  let loadingContent;
+  if (items && items.length > 0) {
+    itemsContent = jsx("ul", {
+      css: linkSearchList,
+      id: id,
+      role: role,
+      "aria-controls": ariaControls,
+      "data-testid": `${id}--items`
+    }, items.map((item, index) => jsx(ForwardedLinkSearchListItemNextWithIntl, {
+      id: `link-search-list-item-${index}`,
+      item: item,
+      selected: selectedIndex === index,
+      onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(index),
+      onKeyDown: onKeyDown,
+      onMouseMove: onMouseMove,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onSelect: onSelect,
+      key: item.objectId,
+      ref: el => listItemRefCallback === null || listItemRefCallback === void 0 ? void 0 : listItemRefCallback(el, item.objectId)
+    })));
+  }
+  if (isLoading) {
+    loadingContent = jsx("div", {
+      id: id,
+      "data-testid": `${id}--loading`,
+      css: spinnerContainer
+    }, jsx(Spinner, {
+      size: "medium",
+      interactionName: "link-search-spinner"
+    }));
+  }
+  return jsx("div", {
+    css: listContainer
+  }, itemsContent, loadingContent);
+};
+/**
+ * *Warning:* With `platform_editor_a11y_insert_link_item_focus` enabled this component is no longer used and is replaced with `<LinkSearchListNext />`.
+ *
+ * If making changes to this component please ensure to also update `<LinkSearchListNext />`.
+ */
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export default class LinkSearchList extends PureComponent {