@atlaskit/link-picker 1.18.2 → 1.18.4

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { forwardRef, Fragment } from 'react';
+import { forwardRef, Fragment, useCallback, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { defineMessages, FormattedMessage } from 'react-intl-next';
 import Spinner from '@atlaskit/spinner';
@@ -9,6 +9,7 @@ import LinkSearchListItem from '../list-item';
 import { listContainerStyles, spinnerContainerStyles, listStyles, listTitleStyles } from './styled';
 import LinkSearchNoResults, { testIds as noResultsTestIds } from './link-search-no-results';
 import { useTrackResultsShown } from './use-track-results-shown';
+import { handleNavKeyDown } from '../utils';
 export const messages = defineMessages({
   titleRecentlyViewed: {
     id: 'fabric.linkPicker.listTitle.recentlyViewed',
@@ -34,9 +35,9 @@ export const testIds = {
   searchResultLoadingIndicator: 'link-picker.results-loading-indicator'
 };
 const LinkSearchList = /*#__PURE__*/forwardRef(({
+  onChange,
   onSelect,
-  onMouseEnter,
-  onMouseLeave,
+  onKeyDown,
   items,
   activeIndex,
   selectedIndex,
@@ -52,6 +53,47 @@ const LinkSearchList = /*#__PURE__*/forwardRef(({
   let loadingContent;
   const linkListTitle = hasSearchTerm ? messages.titleResults : messages.titleRecentlyViewed;
   useTrackResultsShown(isLoading, items, hasSearchTerm);
+  const itemRefs = useRef({});
+  const itemRefCallback = useCallback((el, id) => {
+    if (el === null) {
+      delete itemRefs.current[id];
+    } else {
+      itemRefs.current[id] = el;
+    }
+  }, []);
+  const getTabIndex = useCallback(index => {
+    if (selectedIndex > -1) {
+      return selectedIndex === index ? 0 : -1;
+    }
+    if (index === 0) {
+      return 0;
+    }
+    return -1;
+  }, [selectedIndex]);
+  const handleOnFocus = () => {
+    if (items && items.length > 0 && selectedIndex === -1) {
+      const item = items[0];
+      onChange(item.objectId);
+    }
+  };
+  const handleKeyDown = useCallback(event => {
+    let updatedIndex = activeIndex;
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+    if (!(items !== null && items !== void 0 && items.length)) {
+      return;
+    }
+    updatedIndex = handleNavKeyDown(event, items.length, activeIndex);
+    const 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 jsx(LinkSearchNoResults, null);
   }
@@ -81,10 +123,12 @@ const LinkSearchList = /*#__PURE__*/forwardRef(({
       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: el => itemRefCallback(el, item.objectId)
     }))));
   }
   if (isLoading) {

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

@@ -1,35 +1,36 @@
 /** @jsx jsx */
-import { Fragment } from 'react';
+import { forwardRef, Fragment } from 'react';
 import { jsx } from '@emotion/react';
-import { injectIntl } from 'react-intl-next';
 import { transformTimeStamp } from '../transformTimeStamp';
 import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles, listItemContainerStyles, listItemContainerInnerStyles } from './styled';
 import { testIds } from '..';
-const LinkSearchListItem = ({
+import { useIntl } from 'react-intl-next';
+const LinkSearchListItem = /*#__PURE__*/forwardRef(({
   item,
   selected,
   active,
   id,
   role,
-  intl,
   onSelect,
-  onMouseEnter,
-  onMouseLeave
-}) => {
+  tabIndex,
+  onKeyDown,
+  onFocus
+}, ref) => {
+  const intl = useIntl();
   const handleSelect = () => onSelect(item.objectId);
-  const handleMouseEnter = () => onMouseEnter(item.objectId);
-  const handleMouseLeave = () => onMouseLeave(item.objectId);
   const container = item.container || null;
   const date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
   return jsx("div", {
-    css: composeListItemStyles(active, selected),
+    css: 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
   }, jsx(ListItemIcon, {
     item: item,
     intl: intl
@@ -48,8 +49,8 @@ const LinkSearchListItem = ({
   }, container)), date && jsx("div", {
     css: listItemContainerInnerStyles
   }, container && jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(Fragment, null, formatDate(date))))));
-};
-export default injectIntl(LinkSearchListItem);
+});
+export default LinkSearchListItem;
 const formatDate = date => {
   return [date.pageAction, date.dateString, date.timeSince].filter(Boolean).join(' ');
 };

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { B50, N300, N800, N20, B400 } from '@atlaskit/theme/colors';
+import { B50, N300, N800, N20, B400, B100 } from '@atlaskit/theme/colors';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { fontSizeSmall, fontSize } from '@atlaskit/theme';
@@ -18,22 +18,32 @@ const listItemBaseStyles = css`
   margin: 0 calc(-1 * ${"var(--ds-space-200, 16px)"});
   cursor: pointer;
 `;
+const listItemFocusStyles = css`
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px ${`var(--ds-border-focused, ${B100})`} inset;
+    text-decoration: none;
+  }
+`;
 const listItemBoxShadow = css`
   box-shadow: inset 2px 0px 0px ${`var(--ds-border-selected, ${B400})`};
 `;
 const listItemActive = css`
-  background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N20})`};
+  &:hover {
+    background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N20})`};
+    ${listItemBoxShadow};
+  }
 `;
 const listItemSelected = css`
   background-color: ${`var(--ds-background-selected, ${B50})`};
+  ${listItemBoxShadow};
 `;
-export const composeListItemStyles = (active = false, selected = false) => {
-  const hasShadow = active || selected;
+export const composeListItemStyles = (selected = false) => {
   return css`
     ${listItemBaseStyles};
-    ${active && listItemActive};
+    ${!selected && listItemActive};
     ${selected && listItemSelected};
-    ${hasShadow && listItemBoxShadow};
+    ${listItemFocusStyles};
   `;
 };
 export const itemNameStyles = css`

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

@@ -41,4 +41,26 @@ export function getScreenReaderText(items, selectedIndex, intl) {
     const 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(', ');
   }
-}
+}
+export const handleNavKeyDown = (event, itemsLength, activeIndex) => {
+  let 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;
+};

package/dist/es2019/version.json

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

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

@@ -29,7 +29,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 var RECENT_SEARCH_LIST_SIZE = 5;
@@ -141,68 +141,16 @@ function LinkPicker(_ref) {
       displayText: e.currentTarget.value
     });
   }, [dispatch]);
-  var handleKeyDown = 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', getDataSource(item, activePlugin));
-      dispatch({
-        activeIndex: updatedIndex,
-        selectedIndex: updatedIndex,
-        url: item.url,
-        invalidUrl: false
-      });
-    }
-  }, [dispatch, activeIndex, items, trackAttribute, activePlugin]);
   var handleClear = useCallback(function (field) {
-    dispatch(_defineProperty({}, field, ''));
+    dispatch(_defineProperty({
+      activeIndex: -1,
+      selectedIndex: -1
+    }, field, ''));
   }, [dispatch]);
   var handleUrlClear = useCallback(function () {
     trackAttribute('linkFieldContentInputSource', null);
     handleClear('url');
   }, [trackAttribute, handleClear]);
-  var handleMouseEnterResultItem = 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 = 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 = useCallback(function (url, title, inputType) {
     var event = createAnalyticsEvent(createEventPayload('ui.form.submitted.linkPicker', {}));
 
@@ -245,7 +193,7 @@ function LinkPicker(_ref) {
     }
   }, [handleInsert, trackAttribute, items, activePlugin]);
   var handleSubmit = useCallback(function (event) {
-    event.preventDefault();
+    event === null || event === void 0 ? void 0 : event.preventDefault();
     if (isSelectedItem && selectedItem) {
       return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
@@ -271,6 +219,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', getDataSource(item, activePlugin));
+        dispatch({
+          activeIndex: index,
+          selectedIndex: index,
+          url: item.url,
+          invalidUrl: false
+        });
+      }
+    }
+  };
+  var handleKeyDown = 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 = 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', getDataSource(item, activePlugin));
+      dispatch({
+        activeIndex: updatedIndex,
+        selectedIndex: updatedIndex,
+        url: item.url,
+        invalidUrl: false
+      });
+    }
+  }, [items, activeIndex, selectedItem, handleSelected, handleSubmit, trackAttribute, activePlugin]);
   var messages = isActivePlugin ? searchMessages : linkMessages;
   var screenReaderDescriptionId = 'search-recent-links-field-description';
   var linkSearchListId = 'link-picker-search-list';
@@ -334,7 +336,6 @@ function LinkPicker(_ref) {
     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
@@ -355,8 +356,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 : jsx(LinkSearchError, null)))), jsx(FormFooter, {
     error: error,

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

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["onSelect", "onMouseEnter", "onMouseLeave", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "role", "id", "hasSearchTerm"];
+var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "role", "id", "hasSearchTerm"];
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
-import { forwardRef, Fragment } from 'react';
+import { forwardRef, Fragment, useCallback, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { defineMessages, FormattedMessage } from 'react-intl-next';
 import Spinner from '@atlaskit/spinner';
@@ -14,6 +14,7 @@ import LinkSearchListItem from '../list-item';
 import { listContainerStyles, spinnerContainerStyles, listStyles, listTitleStyles } from './styled';
 import LinkSearchNoResults, { testIds as noResultsTestIds } from './link-search-no-results';
 import { useTrackResultsShown } from './use-track-results-shown';
+import { handleNavKeyDown } from '../utils';
 export var messages = defineMessages({
   titleRecentlyViewed: {
     id: 'fabric.linkPicker.listTitle.recentlyViewed',
@@ -38,9 +39,9 @@ export var testIds = _objectSpread(_objectSpread({}, noResultsTestIds), {}, {
   searchResultLoadingIndicator: 'link-picker.results-loading-indicator'
 });
 var LinkSearchList = /*#__PURE__*/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,
@@ -55,6 +56,47 @@ var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var loadingContent;
   var linkListTitle = hasSearchTerm ? messages.titleResults : messages.titleRecentlyViewed;
   useTrackResultsShown(isLoading, items, hasSearchTerm);
+  var itemRefs = useRef({});
+  var itemRefCallback = useCallback(function (el, id) {
+    if (el === null) {
+      delete itemRefs.current[id];
+    } else {
+      itemRefs.current[id] = el;
+    }
+  }, []);
+  var getTabIndex = 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 = useCallback(function (event) {
+    var updatedIndex = activeIndex;
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+    if (!(items !== null && items !== void 0 && items.length)) {
+      return;
+    }
+    updatedIndex = 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 jsx(LinkSearchNoResults, null);
   }
@@ -85,10 +127,14 @@ var LinkSearchList = /*#__PURE__*/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/esm/ui/link-picker/list-item/index.js

@@ -1,40 +1,37 @@
 /** @jsx jsx */
-import { Fragment } from 'react';
+import { forwardRef, Fragment } from 'react';
 import { jsx } from '@emotion/react';
-import { injectIntl } from 'react-intl-next';
 import { transformTimeStamp } from '../transformTimeStamp';
 import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles, listItemContainerStyles, listItemContainerInnerStyles } from './styled';
 import { testIds } from '..';
-var LinkSearchListItem = function LinkSearchListItem(_ref) {
+import { useIntl } from 'react-intl-next';
+var LinkSearchListItem = /*#__PURE__*/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 = 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 = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
   return jsx("div", {
-    css: composeListItemStyles(active, selected),
+    css: 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
   }, jsx(ListItemIcon, {
     item: item,
     intl: intl
@@ -53,8 +50,8 @@ var LinkSearchListItem = function LinkSearchListItem(_ref) {
   }, container)), date && jsx("div", {
     css: listItemContainerInnerStyles
   }, container && jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(Fragment, null, formatDate(date))))));
-};
-export default injectIntl(LinkSearchListItem);
+});
+export default LinkSearchListItem;
 var formatDate = function formatDate(date) {
   return [date.pageAction, date.dateString, date.timeSince].filter(Boolean).join(' ');
 };

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

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 import { css } from '@emotion/react';
-import { B50, N300, N800, N20, B400 } from '@atlaskit/theme/colors';
+import { B50, N300, N800, N20, B400, B100 } from '@atlaskit/theme/colors';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { fontSizeSmall, fontSize } from '@atlaskit/theme';
@@ -15,19 +15,18 @@ export var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
   return "".concat(px / 16, "rem");
 };
 var listItemBaseStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-border-selected, ".concat(B400, ")"));
-var listItemActive = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"));
-var listItemSelected = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), "var(--ds-background-selected, ".concat(B50, ")"));
+var listItemFocusStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", " inset;\n    text-decoration: none;\n  }\n"])), "var(--ds-border-focused, ".concat(B100, ")"));
+var listItemBoxShadow = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-border-selected, ".concat(B400, ")"));
+var listItemActive = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &:hover {\n    background-color: ", ";\n    ", ";\n  }\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"), listItemBoxShadow);
+var listItemSelected = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  ", ";\n"])), "var(--ds-background-selected, ".concat(B50, ")"), listItemBoxShadow);
 export 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 css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  "])), listItemBaseStyles, active && listItemActive, selected && listItemSelected, hasShadow && listItemBoxShadow);
+  var selected = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  "])), listItemBaseStyles, !selected && listItemActive, selected && listItemSelected, listItemFocusStyles);
 };
-export var itemNameStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
-export var listItemNameStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), "var(--ds-text, ".concat(N800, ")"));
-export var listItemContextStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n  display: flex;\n"])), "var(--ds-text, ".concat(N300, ")"), relativeFontSizeToBase16(fontSizeSmall()), fontSize());
-export var listItemContainerStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-export var listItemContainerInnerStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n"])));
-export var itemIconStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  min-width: ", ";\n  margin-top: 3px;\n  margin-right: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-150, 12px)");
-export var imgStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  max-width: ", ";\n"])), "var(--ds-space-200, 16px)");
+export var itemNameStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
+export var listItemNameStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), "var(--ds-text, ".concat(N800, ")"));
+export var listItemContextStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n  display: flex;\n"])), "var(--ds-text, ".concat(N300, ")"), relativeFontSizeToBase16(fontSizeSmall()), fontSize());
+export var listItemContainerStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+export var listItemContainerInnerStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  white-space: nowrap;\n"])));
+export var itemIconStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  min-width: ", ";\n  margin-top: 3px;\n  margin-right: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-150, 12px)");
+export var imgStyles = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  max-width: ", ";\n"])), "var(--ds-space-200, 16px)");

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

@@ -38,4 +38,26 @@ export 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(', ');
   }
-}
+}
+export 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;
+};

package/dist/esm/version.json

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