@atlaskit/link-picker 1.25.3 → 1.25.5

package/dist/es2019/version.json

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

package/dist/esm/common/analytics/context.js

@@ -5,8 +5,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 import React, { useCallback, useContext, useMemo, useRef, useState } from 'react';
 import { AnalyticsListener } from '@atlaskit/analytics-next';
-import { ANALYTICS_CHANNEL } from '../constants';
 import { normalizeUrl } from '@atlaskit/linking-common/url';
+import { ANALYTICS_CHANNEL } from '../constants';
 var DEFAULT_CONTEXT_ATTRIBUTES = {
   linkState: 'newLink',
   linkFieldContent: null,

package/dist/esm/common/analytics/input-field-tracking.js

@@ -3,9 +3,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
 import React, { useCallback, useRef } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ANALYTICS_CHANNEL } from '../constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
-import { useLinkPickerAnalytics } from '.';
+import { ANALYTICS_CHANNEL } from '../constants';
+import { useLinkPickerAnalytics } from './index';
 var isEventWithInputType = function isEventWithInputType(e) {
   return _typeof(e) === 'object' && e !== null && 'inputType' in e;
 };

package/dist/esm/common/constants.js

@@ -1,2 +1,4 @@
 export var ANALYTICS_CHANNEL = 'media';
-export var COMPONENT_NAME = 'linkPicker';
+export var COMPONENT_NAME = 'linkPicker';
+export var RECENT_SEARCH_LIST_SIZE = 5;
+export var LINK_PICKER_WIDTH_IN_PX = 342;

package/dist/esm/common/utils/handleNavKeyDown.js

@@ -0,0 +1,22 @@
+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/i18n/en.js

@@ -32,5 +32,6 @@ export default {
   'fabric.linkPicker.time.message.updated': 'Updated {time}',
   'fabric.linkPicker.time.message.viewed': 'Viewed {time}',
   'fabric.linkPicker.unhandledError.description': 'Try reloading the page.',
-  'fabric.linkPicker.unhandledError.heading': 'Something went wrong!'
+  'fabric.linkPicker.unhandledError.heading': 'Something went wrong!',
+  foo: 'Default string'
 };

package/dist/esm/i18n/en_GB.js

@@ -32,5 +32,6 @@ export default {
   'fabric.linkPicker.time.message.updated': 'Updated {time}',
   'fabric.linkPicker.time.message.viewed': 'Viewed {time}',
   'fabric.linkPicker.unhandledError.description': 'Try reloading the page.',
-  'fabric.linkPicker.unhandledError.heading': 'Something went wrong!'
+  'fabric.linkPicker.unhandledError.heading': 'Something went wrong!',
+  foo: 'Default string'
 };

package/dist/esm/i18n/en_ZZ.js

@@ -32,5 +32,6 @@ export default {
   'fabric.linkPicker.time.message.updated': '⁣⁢Updated {time}‌‍⁡؜؜⁠‌⁣⁤',
   'fabric.linkPicker.time.message.viewed': '⁣⁢Viewed {time}‌⁡؜‌‍‍؜؜⁠‍‍‌⁣⁤',
   'fabric.linkPicker.unhandledError.description': '⁣⁢Try reloading the page.‌‍⁡‌⁠‍⁠‍⁠⁠؜؜‍⁣⁤',
-  'fabric.linkPicker.unhandledError.heading': '⁣⁢Something went wrong!؜⁠‌⁠⁠‍⁠⁡⁠⁣⁤'
+  'fabric.linkPicker.unhandledError.heading': '⁣⁢Something went wrong!؜⁠‌⁠⁠‍⁠⁡⁠⁣⁤',
+  foo: '⁣⁢Default string⁡‍⁡⁠‍‍⁡‌⁠⁡⁡‌⁠⁣⁤'
 };

package/dist/esm/services/use-plugins/index.js

@@ -1,15 +1,14 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { useEffect, useMemo, useState, useCallback } from 'react';
-import { convertToError } from '@atlaskit/frontend-utilities/convert-to-error';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import { RECENT_SEARCH_LIST_SIZE } from '../../ui/link-picker';
+import { convertToError } from '@atlaskit/frontend-utilities/convert-to-error';
+import { useLinkPickerAnalytics } from '../../common/analytics';
+import { ANALYTICS_CHANNEL, RECENT_SEARCH_LIST_SIZE } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
-import { ANALYTICS_CHANNEL } from '../../common/constants';
-import { CancellationError, resolvePluginUpdates } from './utils';
 import { usePluginReducer } from './reducer';
-import { useLinkPickerAnalytics } from '../../common/analytics';
+import { CancellationError, resolvePluginUpdates } from './utils';
 export function usePlugins(state, activeTab, plugins) {
   var _activePlugin$tabKey;
   var _useAnalyticsEvents = useAnalyticsEvents(),

package/dist/esm/ui/error-boundary/error-boundary-fallback/index.js

@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import EmptyState from '@atlaskit/empty-state';
 import { defineMessages, useIntl } from 'react-intl-next';
+import EmptyState from '@atlaskit/empty-state';
 import { GenericErrorSVG } from '../../../common/generic-error-svg';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
 import { rootContainerStyles } from '../../link-picker/styled';
 var messages = defineMessages({
   heading: {

package/dist/esm/ui/error-boundary/index.js

@@ -1,11 +1,11 @@
 import React, { useCallback } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import createEventPayload from '../../common/utils/analytics/analytics.codegen';
-import { ANALYTICS_CHANNEL } from '../../common/constants';
 import { failUfoExperience, ufoExperience } from '../../common/analytics/experiences';
+import { ANALYTICS_CHANNEL } from '../../common/constants';
+import createEventPayload from '../../common/utils/analytics/analytics.codegen';
 import { useLinkPickerSessionId } from '../../controllers/session-provider';
-import { ErrorBoundaryFallback } from './error-boundary-fallback';
 import { BaseErrorBoundary } from './error-boundary-base';
+import { ErrorBoundaryFallback } from './error-boundary-fallback';
 export function ErrorBoundary(_ref) {
   var children = _ref.children;
   var _useAnalyticsEvents = useAnalyticsEvents(),

package/dist/esm/ui/index.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { AnalyticsContext } from '@atlaskit/analytics-next';
 import React, { memo } from 'react';
-import { LazySuspense, lazyForPaint } from 'react-loosely-lazy';
+import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { COMPONENT_NAME } from '../common/constants';
+import { LinkPickerSessionProvider } from '../controllers/session-provider';
 import { name as packageName, version as packageVersion } from '../version.json';
 import { ErrorBoundary } from './error-boundary';
 import { LoaderFallback } from './loader-fallback';
-import { LinkPickerSessionProvider } from '../controllers/session-provider';
 import { MessagesProvider } from './messages-provider';
 export var testIds = {
   linkPickerRoot: 'link-picker-root'

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

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { forwardRef, memo, useState, useEffect } from 'react';
+import React, { forwardRef, memo, useEffect, useState } from 'react';
 
 // How to use:
 // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles

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

@@ -2,14 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isLoading", "error", "url", "queryState", "items", "isEditing", "onCancel", "action"];
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
 import { memo } from 'react';
-import { useIntl, defineMessages } from 'react-intl-next';
+import { jsx } from '@emotion/react';
+import { defineMessages, useIntl } from 'react-intl-next';
 import Button, { ButtonGroup } from '@atlaskit/button';
 import EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
-import { formFooterStyles, formFooterActionStyles } from './styled';
-import { checkSubmitDisabled } from './utils';
 import { UnauthenticatedError } from '../../../common/utils/errors';
+import { formFooterActionStyles, formFooterStyles } from './styled';
+import { checkSubmitDisabled } from './utils';
 var messages = defineMessages({
   cancelButton: {
     id: 'fabric.linkPicker.button.cancel',

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

@@ -1,48 +1,35 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { Fragment, useCallback, useLayoutEffect, useReducer, memo } from 'react';
+import { memo, useCallback, useLayoutEffect, useReducer } from 'react';
 import { jsx } from '@emotion/react';
-import { useIntl, FormattedMessage } from 'react-intl-next';
+import { FormattedMessage, useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
-import Tabs, { Tab, TabList } from '@atlaskit/tabs';
+import { isSafeUrl, normalizeUrl } from '@atlaskit/linking-common/url';
+import { browser } from '@atlaskit/linking-common/user-agent';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import Spinner from '@atlaskit/spinner/spinner';
-import createEventPayload from '../../common/utils/analytics/analytics.codegen';
-import { ANALYTICS_CHANNEL } from '../../common/constants';
 import { useLinkPickerAnalytics, withInputFieldTracking, withLinkPickerAnalyticsContext } from '../../common/analytics';
-import { normalizeUrl, isSafeUrl } from '@atlaskit/linking-common/url';
-import { browser } from '@atlaskit/linking-common/user-agent';
+import { ANALYTICS_CHANNEL } from '../../common/constants';
+import createEventPayload from '../../common/utils/analytics/analytics.codegen';
+import { handleNavKeyDown } from '../../common/utils/handleNavKeyDown';
 import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
-import { useFixHeight } from '../../controllers/use-fix-height';
-import { searchMessages, linkMessages, formMessages, linkTextMessages } from './messages';
-import { TextInput, testIds as textFieldTestIds } from './text-input';
-import { rootContainerStyles, searchIconStyles, tabsWrapperStyles, flexColumnStyles, formFooterMargin } from './styled';
 import { Announcer } from './announcer';
-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, handleNavKeyDown } from './utils';
-import { TrackTabViewed } from './track-tab-viewed';
+import { formMessages, linkMessages, linkTextMessages, searchMessages } from './messages';
+import { SearchResults, testIds as searchTestIds } from './search-results';
+import { formFooterMargin, rootContainerStyles } from './styled';
+import { testIds as textFieldTestIds, TextInput } from './text-input';
 import { TrackMount } from './track-mount';
-import { spinnerContainerStyles } from './link-search-list/styled';
-export var RECENT_SEARCH_LIST_SIZE = 5;
-export var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+import { getDataSource, getScreenReaderText } from './utils';
+export var testIds = _objectSpread(_objectSpread(_objectSpread({
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
-  textInputField: 'link-text',
-  searchIcon: 'link-picker-search-icon'
-}, formFooterTestIds), searchErrorTestIds), listTestIds), textFieldTestIds), {}, {
-  tabList: 'link-picker-tabs',
-  tabItem: 'link-picker-tab'
-});
+  textInputField: 'link-text'
+}, searchTestIds), formFooterTestIds), textFieldTestIds);
 var initState = {
   url: '',
   displayText: '',
@@ -79,7 +66,6 @@ var LinkInputField = withInputFieldTracking(TextInput, 'link', function (event,
 });
 var DisplayTextInputField = withInputFieldTracking(TextInput, 'displayText');
 export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(function (_ref) {
-  var _activePlugin$errorFa, _activePlugin$errorFa2;
   var onSubmit = _ref.onSubmit,
     onCancel = _ref.onCancel,
     onContentResize = _ref.onContentResize,
@@ -115,7 +101,6 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     error = _usePlugins.error,
     retry = _usePlugins.retry,
     pluginAction = _usePlugins.pluginAction;
-  var fixListHeightProps = useFixHeight(isLoadingResults);
   var isEditing = !!initUrl;
   var selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   var isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
@@ -282,19 +267,6 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
   // as the Aria design pattern for combobox does not work in this case
   // for details: https://a11y-internal.atlassian.net/browse/AK-740
   var screenReaderText = browser().safari && getScreenReaderText(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
-  var searchIcon = isActivePlugin && jsx("span", {
-    css: searchIconStyles,
-    "data-testid": testIds.searchIcon
-  }, jsx(EditorSearchIcon, {
-    size: "medium",
-    label: ''
-  }));
-  var tabList = jsx(TabList, null, tabs.map(function (tab) {
-    return jsx(Tab, {
-      key: tab.tabTitle,
-      testId: testIds.tabItem
-    }, tab.tabTitle);
-  }));
   return jsx("form", {
     "data-testid": testIds.linkPicker,
     css: rootContainerStyles,
@@ -315,7 +287,6 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     placeholder: intl.formatMessage(messages.linkPlaceholder),
     value: url,
     autoFocus: true,
-    elemBeforeInput: searchIcon,
     clearLabel: intl.formatMessage(formMessages.clearLink),
     "aria-expanded": true,
     "aria-autocomplete": "list",
@@ -338,35 +309,25 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     "aria-label": intl.formatMessage(linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
     onChange: handleChangeText
-  }), isLoadingPlugins && !!queryState && jsx("div", {
-    css: spinnerContainerStyles
-  }, jsx(Spinner, {
-    testId: testIds.tabsLoadingIndicator,
-    size: "medium"
-  })), !isLoadingPlugins && isActivePlugin && !!queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
-    css: tabsWrapperStyles
-  }, jsx(Tabs, {
-    id: testIds.tabList,
-    testId: testIds.tabList,
-    selected: activeTab,
-    onChange: handleTabChange
-  }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? jsx(ScrollingTabList, null, tabList) : tabList), jsx(TrackTabViewed, {
-    activePlugin: activePlugin
-  })), jsx("div", _extends({
-    css: flexColumnStyles
-  }, fixListHeightProps), !error && jsx(LinkSearchList, {
-    id: linkSearchListId,
-    role: "listbox",
-    items: items,
-    isLoading: isLoadingResults,
-    selectedIndex: selectedIndex,
+  }), !!queryState && jsx(SearchResults, {
+    activeTab: activeTab,
+    tabs: tabs,
+    activePlugin: activePlugin,
+    isLoadingResults: isLoadingResults,
+    isLoadingPlugins: isLoadingPlugins,
+    linkSearchListId: linkSearchListId,
+    error: error,
+    featureFlags: featureFlags,
     activeIndex: activeIndex,
-    onSelect: handleSelected,
-    onChange: handleSearchListOnChange,
-    onKeyDown: handleKeyDown,
-    hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
-    activePlugin: activePlugin
-  }), error && ((_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : jsx(LinkSearchError, null)))), jsx(FormFooter, {
+    selectedIndex: selectedIndex,
+    items: items,
+    queryState: queryState,
+    handleKeyDown: handleKeyDown,
+    handleSelected: handleSelected,
+    handleTabChange: handleTabChange,
+    handleSearchListOnChange: handleSearchListOnChange,
+    retry: retry
+  }), jsx(FormFooter, {
     error: error,
     items: items
     /** If the results section appears to be loading, impact whether the submit button is disabled */,

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

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 { Fragment } from 'react';
+import { jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner/spinner';
+import Tabs, { Tab, TabList } from '@atlaskit/tabs';
+import { useFixHeight } from '../../../controllers/use-fix-height';
+import { LinkSearchError, testIds as searchErrorTestIds } from './link-search-error';
+import { LinkSearchList, testIds as listTestIds } from './link-search-list';
+import { ScrollingTabList } from './scrolling-tabs';
+import { flexColumnStyles, spinnerContainerStyles, tabsWrapperStyles } from './styled';
+import { TrackTabViewed } from './track-tab-viewed';
+export var testIds = _objectSpread(_objectSpread(_objectSpread({}, searchErrorTestIds), listTestIds), {}, {
+  tabsLoadingIndicator: 'link-picker.tabs-loading-indicator',
+  tabList: 'link-picker-tabs',
+  tabItem: 'link-picker-tab'
+});
+export var SearchResults = function SearchResults(_ref) {
+  var _activePlugin$errorFa, _activePlugin$errorFa2;
+  var tabs = _ref.tabs,
+    activeTab = _ref.activeTab,
+    activePlugin = _ref.activePlugin,
+    isLoadingPlugins = _ref.isLoadingPlugins,
+    isLoadingResults = _ref.isLoadingResults,
+    handleTabChange = _ref.handleTabChange,
+    handleSearchListOnChange = _ref.handleSearchListOnChange,
+    featureFlags = _ref.featureFlags,
+    linkSearchListId = _ref.linkSearchListId,
+    error = _ref.error,
+    queryState = _ref.queryState,
+    items = _ref.items,
+    activeIndex = _ref.activeIndex,
+    selectedIndex = _ref.selectedIndex,
+    handleSelected = _ref.handleSelected,
+    handleKeyDown = _ref.handleKeyDown,
+    retry = _ref.retry;
+  var isActivePlugin = !!activePlugin;
+
+  // This will be redundant if we move towards fixed height search results section
+  var fixListHeightProps = useFixHeight(isLoadingResults);
+  var tabList = jsx(TabList, null, tabs.map(function (tab) {
+    return jsx(Tab, {
+      key: tab.tabTitle,
+      testId: testIds.tabItem
+    }, tab.tabTitle);
+  }));
+  return jsx(Fragment, null, isLoadingPlugins && !!queryState && jsx("div", {
+    css: spinnerContainerStyles
+  }, jsx(Spinner, {
+    testId: testIds.tabsLoadingIndicator,
+    size: "medium"
+  })), !isLoadingPlugins && isActivePlugin && !!queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
+    css: tabsWrapperStyles
+  }, jsx(Tabs, {
+    id: testIds.tabList,
+    testId: testIds.tabList,
+    selected: activeTab,
+    onChange: handleTabChange
+  }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? jsx(ScrollingTabList, null, tabList) : tabList), jsx(TrackTabViewed, {
+    activePlugin: activePlugin
+  })), jsx("div", _extends({
+    css: flexColumnStyles
+  }, fixListHeightProps), !error && jsx(LinkSearchList, {
+    id: linkSearchListId,
+    role: "listbox",
+    items: items,
+    isLoading: isLoadingResults,
+    selectedIndex: selectedIndex,
+    activeIndex: activeIndex,
+    onSelect: handleSelected,
+    onChange: handleSearchListOnChange,
+    onKeyDown: handleKeyDown,
+    hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
+    activePlugin: activePlugin
+  }), error && ((_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : jsx(LinkSearchError, null)))));
+};

package/dist/esm/ui/link-picker/{link-search-error → search-results/link-search-error}/index.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { useIntl, FormattedMessage, defineMessages } from 'react-intl-next';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import EmptyState from '@atlaskit/empty-state';
-import { GenericErrorSVG } from '../../../common/generic-error-svg';
+import { GenericErrorSVG } from '../../../../common/generic-error-svg';
 export var CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 export var messages = defineMessages({
   searchErrorHeader: {

package/dist/esm/ui/link-picker/{link-search-list → search-results/link-search-list}/index.js

@@ -7,16 +7,16 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /** @jsx jsx */
 import { forwardRef, Fragment, useCallback, useRef } from 'react';
 import { jsx } from '@emotion/react';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { defineMessages, FormattedMessage } from 'react-intl-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-import { LinkSearchListItem, testIds as searchResultItemTestIds } from '../list-item';
-import { listContainerStyles, spinnerContainerStyles, listStyles, listTitleStyles } from './styled';
+import { handleNavKeyDown } from '../../../../common/utils/handleNavKeyDown';
 import { NoResults, testIds as noResultsTestIds } from './link-search-no-results';
-import { useTrackResultsShown } from './use-track-results-shown';
-import { handleNavKeyDown } from '../utils';
 import { emptyStateNoResultsWrapper } from './link-search-no-results/styled';
+import { LinkSearchListItem, testIds as searchResultItemTestIds } from './list-item';
+import { listContainerStyles, listStyles, listTitleStyles, spinnerContainerStyles } from './styled';
+import { useTrackResultsShown } from './use-track-results-shown';
 export var messages = defineMessages({
   titleRecentlyViewed: {
     id: 'fabric.linkPicker.listTitle.recentlyViewed',

package/dist/esm/ui/link-picker/{link-search-list → search-results/link-search-list}/link-search-no-results/index.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import { defineMessages, useIntl } from 'react-intl-next';
 import EmptyState from '@atlaskit/empty-state';
-import { useIntl, defineMessages } from 'react-intl-next';
 import { NoResultsSVG } from './no-results-svg';
 import { emptyStateWrapperStyles } from './styled';
 export var messages = defineMessages({

package/dist/esm/ui/link-picker/{list-item → search-results/link-search-list/list-item}/index.js

@@ -2,8 +2,9 @@
 import { forwardRef, Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
-import { transformTimeStamp } from '../transformTimeStamp';
-import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles, listItemContainerStyles, listItemContainerInnerStyles } from './styled';
+/* eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports */
+import { transformTimeStamp } from '../../../transformTimeStamp';
+import { composeListItemStyles, imgStyles, itemIconStyles, itemNameStyles, listItemContainerInnerStyles, listItemContainerStyles, listItemContextStyles, listItemNameStyles } from './styled';
 export var testIds = {
   searchResultItem: 'link-search-list-item',
   searchResultIcon: 'link-search-list-item-icon'
@@ -44,7 +45,6 @@ var ListItemIcon = function ListItemIcon(props) {
 export var LinkSearchListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var item = _ref.item,
     selected = _ref.selected,
-    active = _ref.active,
     id = _ref.id,
     role = _ref.role,
     onSelect = _ref.onSelect,

package/dist/esm/ui/link-picker/{list-item → search-results/link-search-list/list-item}/styled.js

@@ -1,10 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 import { css } from '@emotion/react';
-import { B50, N300, N800, N20, N200, B400, B100 } from '@atlaskit/theme/colors';
+import { B100, B400, B50, N20, N200, N300, N800 } from '@atlaskit/theme/colors';
+import { fontSize, fontSizeSmall } from '@atlaskit/theme/constants';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { fontSizeSmall, fontSize } from '@atlaskit/theme';
 export var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
   if (typeof px === 'string') {
     px = parseInt(px);
@@ -14,7 +14,7 @@ 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 listItemBaseStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: ", " ", ";\n  margin: 0;\n  cursor: pointer;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)");
 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);
@@ -29,6 +29,6 @@ export var listItemContextStyles = css(_templateObject9 || (_templateObject9 = _
 export var listItemContainerStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 export var listItemContainerInnerStyles = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  color: ", ";\n  white-space: nowrap;\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 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/{link-search-list → search-results/link-search-list}/styled.js

@@ -1,10 +1,11 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
+
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { typography } from '@atlaskit/theme';
 export var listContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n  min-height: 80px;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
 export var spinnerContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n"])));
-export var listStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n"])));
+export var listStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0 calc(-1 * ", ");\n  list-style: none;\n"])), "var(--ds-space-200, 16px)");
 export var listTitleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-top: 0;\n  margin-bottom: ", ";\n"])), typography.h100(), "var(--ds-space-050, 4px)");

package/dist/esm/ui/link-picker/{link-search-list → search-results/link-search-list}/use-track-results-shown/index.js

@@ -2,8 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useEffect, useMemo, useRef } from 'react';
 import { useDebounce } from 'use-debounce';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ANALYTICS_CHANNEL } from '../../../../common/constants';
-import createEventPayload from '../../../../common/utils/analytics/analytics.codegen';
+import { ANALYTICS_CHANNEL } from '../../../../../common/constants';
+import createEventPayload from '../../../../../common/utils/analytics/analytics.codegen';
 var DEBOUNCE_MS = 400;
 export var useTrackResultsShown = function useTrackResultsShown(isLoading, items, hasSearchTerm) {
   var _useAnalyticsEvents = useAnalyticsEvents(),

package/dist/esm/ui/{scrolling-tabs → link-picker/search-results/scrolling-tabs}/index.js

@@ -4,13 +4,13 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 /** @jsx jsx */
-import React, { useRef, useMemo, useState, useCallback } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button';
 import ChevronLeftIcon from '@atlaskit/icon/glyph/chevron-left';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
-import { scrollBack, scrollForward, calculateConditionalButtons, getTabList, createGhost } from './scrolling-tabs';
-import { containerStyles, scrollingContainerStyles, nextButtonStyles, backButtonStyles } from './styles';
+import { calculateConditionalButtons, createGhost, getTabList, scrollBack, scrollForward } from './scrolling-tabs';
+import { backButtonStyles, containerStyles, nextButtonStyles, scrollingContainerStyles } from './styles';
 function isTouchDevice() {
   return 'ontouchstart' in window ||
   // eslint-disable-next-line compat/compat
@@ -20,6 +20,8 @@ var initialConditionalButtonsState = {
   back: false,
   forward: false
 };
+
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 export var ScrollingTabList = function ScrollingTabList(props) {
   var ref = useRef(null);
   var _useState = useState(initialConditionalButtonsState),
@@ -97,6 +99,7 @@ export var ScrollingTabList = function ScrollingTabList(props) {
       }
       return function () {
         if (scrollingContainer) {
+          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
           scrollingContainer.removeEventListener('scroll', handleConditionalButtonsChange);
         }
         if (tabs.length) {

package/dist/esm/ui/link-picker/search-results/styled.js

@@ -0,0 +1,6 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { css } from '@emotion/react';
+export var tabsWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  margin-left: calc(-1 * ", ");\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+export var spinnerContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n"])));
+export var flexColumnStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));

package/dist/esm/ui/link-picker/{track-tab-viewed → search-results/track-tab-viewed}/index.js

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import { useLayoutEffect } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import createEventPayload from '../../../common/utils/analytics/analytics.codegen';
-import { ANALYTICS_CHANNEL } from '../../../common/constants';
+import { ANALYTICS_CHANNEL } from '../../../../common/constants';
+import createEventPayload from '../../../../common/utils/analytics/analytics.codegen';
 export function TrackTabViewed(_ref) {
   var activePlugin = _ref.activePlugin;
   var _useAnalyticsEvents = useAnalyticsEvents(),