@atlaskit/link-picker 1.18.2 → 1.18.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/link-picker
 
+## 1.18.4
+
+### Patch Changes
+
+- [`2e01c9c74b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e01c9c74b5) - DUMMY remove before merging to master; dupe adf-schema via adf-utils
+- Updated dependencies
+
+## 1.18.3
+
+### Patch Changes
+
+- [`ee4573b4721`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee4573b4721) - [ux] Handle keyboard navigation as a listbox
+  Updates focus style of link picker listbox
+
 ## 1.18.2
 
 ### Patch Changes

package/dist/cjs/ui/link-picker/index.js

@@ -152,68 +152,16 @@ function LinkPicker(_ref) {
       displayText: e.currentTarget.value
     });
   }, [dispatch]);
-  var handleKeyDown = (0, _react.useCallback)(function (event) {
-    var key = event.key;
-    var KEY_ARROW_DOWN = 'ArrowDown';
-    var KEY_ARROW_UP = 'ArrowUp';
-    if (!items || !items.length) {
-      return;
-    }
-    var updatedIndex = activeIndex;
-    switch (key) {
-      case KEY_ARROW_DOWN:
-        // down
-        event.preventDefault();
-        updatedIndex = (activeIndex + 1) % items.length;
-        break;
-      case KEY_ARROW_UP:
-        // up
-        event.preventDefault();
-        updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
-        break;
-    }
-    var item = items[updatedIndex];
-    if ([KEY_ARROW_DOWN, KEY_ARROW_UP].includes(key) && item) {
-      /**
-       * Manually track that the url has been updated using searchResult method
-       */
-      trackAttribute('linkFieldContent', getLinkFieldContent(item.url));
-      trackAttribute('linkFieldContentInputMethod', 'searchResult');
-      trackAttribute('linkFieldContentInputSource', (0, _utils.getDataSource)(item, activePlugin));
-      dispatch({
-        activeIndex: updatedIndex,
-        selectedIndex: updatedIndex,
-        url: item.url,
-        invalidUrl: false
-      });
-    }
-  }, [dispatch, activeIndex, items, trackAttribute, activePlugin]);
   var handleClear = (0, _react.useCallback)(function (field) {
-    dispatch((0, _defineProperty2.default)({}, field, ''));
+    dispatch((0, _defineProperty2.default)({
+      activeIndex: -1,
+      selectedIndex: -1
+    }, field, ''));
   }, [dispatch]);
   var handleUrlClear = (0, _react.useCallback)(function () {
     trackAttribute('linkFieldContentInputSource', null);
     handleClear('url');
   }, [trackAttribute, handleClear]);
-  var handleMouseEnterResultItem = (0, _react.useCallback)(function (objectId) {
-    var index = items === null || items === void 0 ? void 0 : items.findIndex(function (item) {
-      return item.objectId === objectId;
-    });
-    dispatch({
-      activeIndex: index !== null && index !== void 0 ? index : -1
-    });
-  }, [dispatch, items]);
-  var handleMouseLeaveResultItem = (0, _react.useCallback)(function (objectId) {
-    var index = items === null || items === void 0 ? void 0 : items.findIndex(function (item) {
-      return item.objectId === objectId;
-    });
-    // This is to avoid updating index that was set by other mouseenter event
-    if (activeIndex === index) {
-      dispatch({
-        activeIndex: -1
-      });
-    }
-  }, [dispatch, activeIndex, items]);
   var handleInsert = (0, _react.useCallback)(function (url, title, inputType) {
     var event = createAnalyticsEvent((0, _analytics.default)('ui.form.submitted.linkPicker', {}));
 
@@ -256,7 +204,7 @@ function LinkPicker(_ref) {
     }
   }, [handleInsert, trackAttribute, items, activePlugin]);
   var handleSubmit = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.preventDefault();
     if (isSelectedItem && selectedItem) {
       return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
@@ -282,6 +230,60 @@ function LinkPicker(_ref) {
     });
     trackAttribute('tab', (_plugins$activeTab$ta = plugins === null || plugins === void 0 ? void 0 : (_plugins$activeTab = plugins[activeTab]) === null || _plugins$activeTab === void 0 ? void 0 : _plugins$activeTab.tabKey) !== null && _plugins$activeTab$ta !== void 0 ? _plugins$activeTab$ta : null);
   }, [dispatch, plugins, trackAttribute]);
+  var handleSearchListOnChange = function handleSearchListOnChange(id) {
+    var index = items === null || items === void 0 ? void 0 : items.findIndex(function (item) {
+      return item.objectId === id;
+    });
+    if (typeof index === 'number') {
+      var item = items === null || items === void 0 ? void 0 : items[index];
+      if (item) {
+        /**
+         * Manually track that the url has been updated using searchResult method
+         */
+        trackAttribute('linkFieldContent', getLinkFieldContent(item.url));
+        trackAttribute('linkFieldContentInputMethod', 'searchResult');
+        trackAttribute('linkFieldContentInputSource', (0, _utils.getDataSource)(item, activePlugin));
+        dispatch({
+          activeIndex: index,
+          selectedIndex: index,
+          url: item.url,
+          invalidUrl: false
+        });
+      }
+    }
+  };
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if (!(items !== null && items !== void 0 && items.length)) {
+      return;
+    }
+    var updatedIndex = activeIndex;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (selectedItem) {
+        handleSelected(selectedItem.objectId);
+      } else {
+        // triggers validation error message
+        handleSubmit();
+      }
+    } else {
+      updatedIndex = (0, _utils.handleNavKeyDown)(event, items.length, activeIndex);
+    }
+    var item = items[updatedIndex];
+    if (['Enter', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) && item) {
+      /**
+       * Manually track that the url has been updated using searchResult method
+       */
+      trackAttribute('linkFieldContent', getLinkFieldContent(item.url));
+      trackAttribute('linkFieldContentInputMethod', 'searchResult');
+      trackAttribute('linkFieldContentInputSource', (0, _utils.getDataSource)(item, activePlugin));
+      dispatch({
+        activeIndex: updatedIndex,
+        selectedIndex: updatedIndex,
+        url: item.url,
+        invalidUrl: false
+      });
+    }
+  }, [items, activeIndex, selectedItem, handleSelected, handleSubmit, trackAttribute, activePlugin]);
   var messages = isActivePlugin ? _messages.searchMessages : _messages.linkMessages;
   var screenReaderDescriptionId = 'search-recent-links-field-description';
   var linkSearchListId = 'link-picker-search-list';
@@ -345,7 +347,6 @@ function LinkPicker(_ref) {
     clearLabel: intl.formatMessage(_messages.linkTextMessages.clearLinkText),
     "aria-label": intl.formatMessage(_messages.linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
-    onKeyDown: handleKeyDown,
     onChange: handleChangeText
   }), isActivePlugin && !!queryState && (0, _react2.jsx)(_react.Fragment, null, tabs.length > 0 && (0, _react2.jsx)("div", {
     css: _styled.tabsWrapperStyles
@@ -366,8 +367,8 @@ function LinkPicker(_ref) {
     selectedIndex: selectedIndex,
     activeIndex: activeIndex,
     onSelect: handleSelected,
-    onMouseEnter: handleMouseEnterResultItem,
-    onMouseLeave: handleMouseLeaveResultItem,
+    onChange: handleSearchListOnChange,
+    onKeyDown: handleKeyDown,
     hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length)
   }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : (0, _react2.jsx)(_linkSearchError.default, null)))), (0, _react2.jsx)(_formFooter.default, {
     error: error,

package/dist/cjs/ui/link-picker/link-search-list/index.js

@@ -18,7 +18,8 @@ var _listItem = _interopRequireDefault(require("../list-item"));
 var _styled = require("./styled");
 var _linkSearchNoResults = _interopRequireWildcard(require("./link-search-no-results"));
 var _useTrackResultsShown = require("./use-track-results-shown");
-var _excluded = ["onSelect", "onMouseEnter", "onMouseLeave", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "role", "id", "hasSearchTerm"];
+var _utils = require("../utils");
+var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "role", "id", "hasSearchTerm"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -49,9 +50,9 @@ var testIds = _objectSpread(_objectSpread({}, _linkSearchNoResults.testIds), {},
 });
 exports.testIds = testIds;
 var LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var onSelect = _ref.onSelect,
-    onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave,
+  var onChange = _ref.onChange,
+    onSelect = _ref.onSelect,
+    onKeyDown = _ref.onKeyDown,
     items = _ref.items,
     activeIndex = _ref.activeIndex,
     selectedIndex = _ref.selectedIndex,
@@ -66,6 +67,47 @@ var LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var loadingContent;
   var linkListTitle = hasSearchTerm ? messages.titleResults : messages.titleRecentlyViewed;
   (0, _useTrackResultsShown.useTrackResultsShown)(isLoading, items, hasSearchTerm);
+  var itemRefs = (0, _react.useRef)({});
+  var itemRefCallback = (0, _react.useCallback)(function (el, id) {
+    if (el === null) {
+      delete itemRefs.current[id];
+    } else {
+      itemRefs.current[id] = el;
+    }
+  }, []);
+  var getTabIndex = (0, _react.useCallback)(function (index) {
+    if (selectedIndex > -1) {
+      return selectedIndex === index ? 0 : -1;
+    }
+    if (index === 0) {
+      return 0;
+    }
+    return -1;
+  }, [selectedIndex]);
+  var handleOnFocus = function handleOnFocus() {
+    if (items && items.length > 0 && selectedIndex === -1) {
+      var item = items[0];
+      onChange(item.objectId);
+    }
+  };
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    var updatedIndex = activeIndex;
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+    if (!(items !== null && items !== void 0 && items.length)) {
+      return;
+    }
+    updatedIndex = (0, _utils.handleNavKeyDown)(event, items.length, activeIndex);
+    var item = items === null || items === void 0 ? void 0 : items[updatedIndex];
+    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) && item) {
+      onChange(item.objectId);
+      if (itemRefs.current) {
+        var _itemRefs$current$ite;
+        (_itemRefs$current$ite = itemRefs.current[item.objectId]) === null || _itemRefs$current$ite === void 0 ? void 0 : _itemRefs$current$ite.focus();
+      }
+    }
+  }, [activeIndex, items, onChange, onKeyDown]);
   if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
     return (0, _react2.jsx)(_linkSearchNoResults.default, null);
   }
@@ -96,10 +138,14 @@ var LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         item: item,
         selected: selectedIndex === index,
         active: activeIndex === index,
-        onMouseEnter: onMouseEnter,
-        onMouseLeave: onMouseLeave,
+        onFocus: handleOnFocus,
+        onKeyDown: handleKeyDown,
         onSelect: onSelect,
-        key: item.objectId
+        key: item.objectId,
+        tabIndex: getTabIndex(index),
+        ref: function ref(el) {
+          return itemRefCallback(el, item.objectId);
+        }
       });
     })));
   }

package/dist/cjs/ui/link-picker/list-item/index.js

@@ -6,42 +6,39 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _reactIntlNext = require("react-intl-next");
 var _transformTimeStamp = require("../transformTimeStamp");
 var _styled = require("./styled");
 var _ = require("..");
+var _reactIntlNext = require("react-intl-next");
 /** @jsx jsx */
 
-var LinkSearchListItem = function LinkSearchListItem(_ref) {
+var LinkSearchListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var item = _ref.item,
     selected = _ref.selected,
     active = _ref.active,
     id = _ref.id,
     role = _ref.role,
-    intl = _ref.intl,
     onSelect = _ref.onSelect,
-    onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave;
+    tabIndex = _ref.tabIndex,
+    onKeyDown = _ref.onKeyDown,
+    onFocus = _ref.onFocus;
+  var intl = (0, _reactIntlNext.useIntl)();
   var handleSelect = function handleSelect() {
     return onSelect(item.objectId);
   };
-  var handleMouseEnter = function handleMouseEnter() {
-    return onMouseEnter(item.objectId);
-  };
-  var handleMouseLeave = function handleMouseLeave() {
-    return onMouseLeave(item.objectId);
-  };
   var container = item.container || null;
   var date = (0, _transformTimeStamp.transformTimeStamp)(intl, item.lastViewedDate, item.lastUpdatedDate);
   return (0, _react2.jsx)("div", {
-    css: (0, _styled.composeListItemStyles)(active, selected),
+    css: (0, _styled.composeListItemStyles)(selected),
     role: role,
     id: id,
     "aria-selected": selected,
     "data-testid": _.testIds.searchResultItem,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onClick: handleSelect
+    onKeyDown: onKeyDown,
+    onClick: handleSelect,
+    onFocus: onFocus,
+    tabIndex: tabIndex,
+    ref: ref
   }, (0, _react2.jsx)(ListItemIcon, {
     item: item,
     intl: intl
@@ -60,8 +57,8 @@ var LinkSearchListItem = function LinkSearchListItem(_ref) {
   }, container)), date && (0, _react2.jsx)("div", {
     css: _styled.listItemContainerInnerStyles
   }, container && (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022\xA0 "), (0, _react2.jsx)(_react.Fragment, null, formatDate(date))))));
-};
-var _default = (0, _reactIntlNext.injectIntl)(LinkSearchListItem);
+});
+var _default = LinkSearchListItem;
 exports.default = _default;
 var formatDate = function formatDate(date) {
   return [date.pageAction, date.dateString, date.timeSince].filter(Boolean).join(' ');

package/dist/cjs/ui/link-picker/list-item/styled.js

@@ -9,7 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _theme = require("@atlaskit/theme");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12; // AFP-2532 TODO: Fix automatic suppressions below
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
   if (typeof px === 'string') {
@@ -22,27 +22,26 @@ var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
 };
 exports.relativeFontSizeToBase16 = relativeFontSizeToBase16;
 var listItemBaseStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", " ", ";\n  margin: 0 calc(-1 * ", ");\n  cursor: pointer;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
-var listItemBoxShadow = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-border-selected, ".concat(_colors.B400, ")"));
-var listItemActive = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"));
-var listItemSelected = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), "var(--ds-background-selected, ".concat(_colors.B50, ")"));
+var listItemFocusStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", " inset;\n    text-decoration: none;\n  }\n"])), "var(--ds-border-focused, ".concat(_colors.B100, ")"));
+var listItemBoxShadow = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-border-selected, ".concat(_colors.B400, ")"));
+var listItemActive = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  &:hover {\n    background-color: ", ";\n    ", ";\n  }\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"), listItemBoxShadow);
+var listItemSelected = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  ", ";\n"])), "var(--ds-background-selected, ".concat(_colors.B50, ")"), listItemBoxShadow);
 var composeListItemStyles = function composeListItemStyles() {
-  var active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  var selected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var hasShadow = active || selected;
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  "])), listItemBaseStyles, active && listItemActive, selected && listItemSelected, hasShadow && listItemBoxShadow);
+  var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  "])), listItemBaseStyles, !selected && listItemActive, selected && listItemSelected, listItemFocusStyles);
 };
 exports.composeListItemStyles = composeListItemStyles;
-var itemNameStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n"])));
+var itemNameStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n"])));
 exports.itemNameStyles = itemNameStyles;
-var listItemNameStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), "var(--ds-text, ".concat(_colors.N800, ")"));
+var listItemNameStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), "var(--ds-text, ".concat(_colors.N800, ")"));
 exports.listItemNameStyles = listItemNameStyles;
-var listItemContextStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n  display: flex;\n"])), "var(--ds-text, ".concat(_colors.N300, ")"), relativeFontSizeToBase16((0, _theme.fontSizeSmall)()), (0, _theme.fontSize)());
+var listItemContextStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n  display: flex;\n"])), "var(--ds-text, ".concat(_colors.N300, ")"), relativeFontSizeToBase16((0, _theme.fontSizeSmall)()), (0, _theme.fontSize)());
 exports.listItemContextStyles = listItemContextStyles;
-var listItemContainerStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+var listItemContainerStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 exports.listItemContainerStyles = listItemContainerStyles;
-var listItemContainerInnerStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: nowrap;\n"])));
+var listItemContainerInnerStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: nowrap;\n"])));
 exports.listItemContainerInnerStyles = listItemContainerInnerStyles;
-var itemIconStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", ";\n  margin-top: 3px;\n  margin-right: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-150, 12px)");
+var itemIconStyles = (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", ";\n  margin-top: 3px;\n  margin-right: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-150, 12px)");
 exports.itemIconStyles = itemIconStyles;
-var imgStyles = (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: ", ";\n"])), "var(--ds-space-200, 16px)");
+var imgStyles = (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: ", ";\n"])), "var(--ds-space-200, 16px)");
 exports.imgStyles = imgStyles;

package/dist/cjs/ui/link-picker/utils.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getDataSource = void 0;
 exports.getScreenReaderText = getScreenReaderText;
-exports.isUndoEvent = exports.isRedoEvent = void 0;
+exports.isUndoEvent = exports.isRedoEvent = exports.handleNavKeyDown = void 0;
 var _userAgent = require("@atlaskit/linking-common/user-agent");
 var _transformTimeStamp = require("./transformTimeStamp");
 var KeyZCode = 90;
@@ -49,4 +49,27 @@ function getScreenReaderText(items, selectedIndex, intl) {
     var formattedDate = [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].filter(Boolean).join(' ');
     return [name, container, formattedDate].filter(Boolean).join(', ');
   }
-}
+}
+var handleNavKeyDown = function handleNavKeyDown(event, itemsLength, activeIndex) {
+  var updatedIndex = activeIndex;
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault();
+      updatedIndex = (activeIndex + 1) % itemsLength;
+      break;
+    case 'ArrowUp':
+      event.preventDefault();
+      updatedIndex = activeIndex > 0 ? activeIndex - 1 : itemsLength - 1;
+      break;
+    case 'Home':
+      event.preventDefault();
+      updatedIndex = 0;
+      break;
+    case 'End':
+      event.preventDefault();
+      updatedIndex = itemsLength - 1;
+      break;
+  }
+  return updatedIndex;
+};
+exports.handleNavKeyDown = handleNavKeyDown;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.18.2",
+	"version": "1.18.4",
 	"sideEffects": false
 }

package/dist/es2019/ui/link-picker/index.js

@@ -23,7 +23,7 @@ import ScrollingTabList from '../scrolling-tabs';
 import LinkSearchList, { testIds as listTestIds } from './link-search-list';
 import LinkSearchError, { testIds as searchErrorTestIds } from './link-search-error';
 import FormFooter, { testIds as formFooterTestIds } from './form-footer';
-import { getDataSource, getScreenReaderText } from './utils';
+import { getDataSource, getScreenReaderText, handleNavKeyDown } from './utils';
 import TrackTabViewed from './track-tab-viewed';
 import TrackMount from './track-mount';
 export const RECENT_SEARCH_LIST_SIZE = 5;
@@ -146,46 +146,10 @@ function LinkPicker({
       displayText: e.currentTarget.value
     });
   }, [dispatch]);
-  const handleKeyDown = useCallback(event => {
-    const {
-      key
-    } = event;
-    const KEY_ARROW_DOWN = 'ArrowDown';
-    const KEY_ARROW_UP = 'ArrowUp';
-    if (!items || !items.length) {
-      return;
-    }
-    let updatedIndex = activeIndex;
-    switch (key) {
-      case KEY_ARROW_DOWN:
-        // down
-        event.preventDefault();
-        updatedIndex = (activeIndex + 1) % items.length;
-        break;
-      case KEY_ARROW_UP:
-        // up
-        event.preventDefault();
-        updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
-        break;
-    }
-    const item = items[updatedIndex];
-    if ([KEY_ARROW_DOWN, KEY_ARROW_UP].includes(key) && item) {
-      /**
-       * Manually track that the url has been updated using searchResult method
-       */
-      trackAttribute('linkFieldContent', getLinkFieldContent(item.url));
-      trackAttribute('linkFieldContentInputMethod', 'searchResult');
-      trackAttribute('linkFieldContentInputSource', getDataSource(item, activePlugin));
-      dispatch({
-        activeIndex: updatedIndex,
-        selectedIndex: updatedIndex,
-        url: item.url,
-        invalidUrl: false
-      });
-    }
-  }, [dispatch, activeIndex, items, trackAttribute, activePlugin]);
   const handleClear = useCallback(field => {
     dispatch({
+      activeIndex: -1,
+      selectedIndex: -1,
       [field]: ''
     });
   }, [dispatch]);
@@ -193,21 +157,6 @@ function LinkPicker({
     trackAttribute('linkFieldContentInputSource', null);
     handleClear('url');
   }, [trackAttribute, handleClear]);
-  const handleMouseEnterResultItem = useCallback(objectId => {
-    const index = items === null || items === void 0 ? void 0 : items.findIndex(item => item.objectId === objectId);
-    dispatch({
-      activeIndex: index !== null && index !== void 0 ? index : -1
-    });
-  }, [dispatch, items]);
-  const handleMouseLeaveResultItem = useCallback(objectId => {
-    const index = items === null || items === void 0 ? void 0 : items.findIndex(item => item.objectId === objectId);
-    // This is to avoid updating index that was set by other mouseenter event
-    if (activeIndex === index) {
-      dispatch({
-        activeIndex: -1
-      });
-    }
-  }, [dispatch, activeIndex, items]);
   const handleInsert = useCallback((url, title, inputType) => {
     const event = createAnalyticsEvent(createEventPayload('ui.form.submitted.linkPicker', {}));
 
@@ -251,7 +200,7 @@ function LinkPicker({
     }
   }, [handleInsert, trackAttribute, items, activePlugin]);
   const handleSubmit = useCallback(event => {
-    event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.preventDefault();
     if (isSelectedItem && selectedItem) {
       return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
@@ -277,6 +226,58 @@ function LinkPicker({
     });
     trackAttribute('tab', (_plugins$activeTab$ta = plugins === null || plugins === void 0 ? void 0 : (_plugins$activeTab = plugins[activeTab]) === null || _plugins$activeTab === void 0 ? void 0 : _plugins$activeTab.tabKey) !== null && _plugins$activeTab$ta !== void 0 ? _plugins$activeTab$ta : null);
   }, [dispatch, plugins, trackAttribute]);
+  const handleSearchListOnChange = id => {
+    const index = items === null || items === void 0 ? void 0 : items.findIndex(item => item.objectId === id);
+    if (typeof index === 'number') {
+      const item = items === null || items === void 0 ? void 0 : items[index];
+      if (item) {
+        /**
+         * Manually track that the url has been updated using searchResult method
+         */
+        trackAttribute('linkFieldContent', getLinkFieldContent(item.url));
+        trackAttribute('linkFieldContentInputMethod', 'searchResult');
+        trackAttribute('linkFieldContentInputSource', getDataSource(item, activePlugin));
+        dispatch({
+          activeIndex: index,
+          selectedIndex: index,
+          url: item.url,
+          invalidUrl: false
+        });
+      }
+    }
+  };
+  const handleKeyDown = useCallback(event => {
+    if (!(items !== null && items !== void 0 && items.length)) {
+      return;
+    }
+    let updatedIndex = activeIndex;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (selectedItem) {
+        handleSelected(selectedItem.objectId);
+      } else {
+        // triggers validation error message
+        handleSubmit();
+      }
+    } else {
+      updatedIndex = handleNavKeyDown(event, items.length, activeIndex);
+    }
+    const item = items[updatedIndex];
+    if (['Enter', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) && item) {
+      /**
+       * Manually track that the url has been updated using searchResult method
+       */
+      trackAttribute('linkFieldContent', getLinkFieldContent(item.url));
+      trackAttribute('linkFieldContentInputMethod', 'searchResult');
+      trackAttribute('linkFieldContentInputSource', getDataSource(item, activePlugin));
+      dispatch({
+        activeIndex: updatedIndex,
+        selectedIndex: updatedIndex,
+        url: item.url,
+        invalidUrl: false
+      });
+    }
+  }, [items, activeIndex, selectedItem, handleSelected, handleSubmit, trackAttribute, activePlugin]);
   const messages = isActivePlugin ? searchMessages : linkMessages;
   const screenReaderDescriptionId = 'search-recent-links-field-description';
   const linkSearchListId = 'link-picker-search-list';
@@ -338,7 +339,6 @@ function LinkPicker({
     clearLabel: intl.formatMessage(linkTextMessages.clearLinkText),
     "aria-label": intl.formatMessage(linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
-    onKeyDown: handleKeyDown,
     onChange: handleChangeText
   }), isActivePlugin && !!queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
     css: tabsWrapperStyles
@@ -359,8 +359,8 @@ function LinkPicker({
     selectedIndex: selectedIndex,
     activeIndex: activeIndex,
     onSelect: handleSelected,
-    onMouseEnter: handleMouseEnterResultItem,
-    onMouseLeave: handleMouseLeaveResultItem,
+    onChange: handleSearchListOnChange,
+    onKeyDown: handleKeyDown,
     hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length)
   }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : jsx(LinkSearchError, null)))), jsx(FormFooter, {
     error: error,