@atlaskit/link-picker 1.25.3 → 1.25.5

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

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @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';
 const messages = defineMessages({
   cancelButton: {
     id: 'fabric.linkPicker.button.cancel',

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

@@ -1,46 +1,33 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @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 const RECENT_SEARCH_LIST_SIZE = 5;
+import { getDataSource, getScreenReaderText } from './utils';
 export const testIds = {
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
   textInputField: 'link-text',
-  searchIcon: 'link-picker-search-icon',
+  ...searchTestIds,
   ...formFooterTestIds,
-  ...searchErrorTestIds,
-  ...listTestIds,
-  ...textFieldTestIds,
-  tabList: 'link-picker-tabs',
-  tabItem: 'link-picker-tab'
+  ...textFieldTestIds
 };
 const initState = {
   url: '',
@@ -92,7 +79,6 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   hideDisplayText,
   featureFlags
 }) => {
-  var _activePlugin$errorFa, _activePlugin$errorFa2;
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
@@ -121,7 +107,6 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     retry,
     pluginAction
   } = usePlugins(queryState, activeTab, plugins);
-  const fixListHeightProps = useFixHeight(isLoadingResults);
   const isEditing = !!initUrl;
   const selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   const isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
@@ -289,17 +274,6 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   // as the Aria design pattern for combobox does not work in this case
   // for details: https://a11y-internal.atlassian.net/browse/AK-740
   const screenReaderText = browser().safari && getScreenReaderText(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
-  const searchIcon = isActivePlugin && jsx("span", {
-    css: searchIconStyles,
-    "data-testid": testIds.searchIcon
-  }, jsx(EditorSearchIcon, {
-    size: "medium",
-    label: ''
-  }));
-  const tabList = jsx(TabList, null, tabs.map(tab => jsx(Tab, {
-    key: tab.tabTitle,
-    testId: testIds.tabItem
-  }, tab.tabTitle)));
   return jsx("form", {
     "data-testid": testIds.linkPicker,
     css: rootContainerStyles,
@@ -320,7 +294,6 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     placeholder: intl.formatMessage(messages.linkPlaceholder),
     value: url,
     autoFocus: true,
-    elemBeforeInput: searchIcon,
     clearLabel: intl.formatMessage(formMessages.clearLink),
     "aria-expanded": true,
     "aria-autocomplete": "list",
@@ -343,35 +316,25 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     "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/es2019/ui/link-picker/search-results/index.js

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @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 const testIds = {
+  ...searchErrorTestIds,
+  ...listTestIds,
+  tabsLoadingIndicator: 'link-picker.tabs-loading-indicator',
+  tabList: 'link-picker-tabs',
+  tabItem: 'link-picker-tab'
+};
+export const SearchResults = ({
+  tabs,
+  activeTab,
+  activePlugin,
+  isLoadingPlugins,
+  isLoadingResults,
+  handleTabChange,
+  handleSearchListOnChange,
+  featureFlags,
+  linkSearchListId,
+  error,
+  queryState,
+  items,
+  activeIndex,
+  selectedIndex,
+  handleSelected,
+  handleKeyDown,
+  retry
+}) => {
+  var _activePlugin$errorFa, _activePlugin$errorFa2;
+  const isActivePlugin = !!activePlugin;
+
+  // This will be redundant if we move towards fixed height search results section
+  const fixListHeightProps = useFixHeight(isLoadingResults);
+  const tabList = jsx(TabList, null, tabs.map(tab => 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/es2019/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 const CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 export const messages = defineMessages({
   searchErrorHeader: {

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

@@ -2,16 +2,16 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @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 const messages = defineMessages({
   titleRecentlyViewed: {
     id: 'fabric.linkPicker.listTitle.recentlyViewed',

package/dist/es2019/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 const messages = defineMessages({

package/dist/es2019/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 const testIds = {
   searchResultItem: 'link-search-list-item',
   searchResultIcon: 'link-search-list-item-icon'
@@ -44,7 +45,6 @@ const ListItemIcon = props => {
 export const LinkSearchListItem = /*#__PURE__*/forwardRef(({
   item,
   selected,
-  active,
   id,
   role,
   onSelect,

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

@@ -1,8 +1,8 @@
 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 const relativeFontSizeToBase16 = px => {
   if (typeof px === 'string') {
     px = parseInt(px);
@@ -15,7 +15,7 @@ export const relativeFontSizeToBase16 = px => {
 const listItemBaseStyles = css`
   display: flex;
   padding: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-200, 16px)"};
-  margin: 0 calc(-1 * ${"var(--ds-space-200, 16px)"});
+  margin: 0;
   cursor: pointer;
 `;
 const listItemFocusStyles = css`
@@ -71,7 +71,7 @@ export const listItemContainerInnerStyles = css`
   white-space: nowrap;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const itemIconStyles = css`
   min-width: ${"var(--ds-space-200, 16px)"};
   margin-top: 3px;

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

@@ -1,4 +1,5 @@
 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';
@@ -21,7 +22,7 @@ export const spinnerContainerStyles = css`
 `;
 export const listStyles = css`
   padding: 0;
-  margin: 0;
+  margin: 0 calc(-1 * ${"var(--ds-space-200, 16px)"});
   list-style: none;
 `;
 export const listTitleStyles = css`

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

@@ -1,8 +1,8 @@
 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';
 const DEBOUNCE_MS = 400;
 export const useTrackResultsShown = (isLoading, items, hasSearchTerm) => {
   const {

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

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @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
@@ -16,6 +16,8 @@ const initialConditionalButtonsState = {
   back: false,
   forward: false
 };
+
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 export const ScrollingTabList = props => {
   const ref = useRef(null);
   const [conditionalButtons, setConditionalButtons] = useState(initialConditionalButtonsState);
@@ -75,6 +77,7 @@ export const ScrollingTabList = props => {
       }
       return () => {
         if (scrollingContainer) {
+          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
           scrollingContainer.removeEventListener('scroll', handleConditionalButtonsChange);
         }
         if (tabs.length) {

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

@@ -0,0 +1,17 @@
+import { css } from '@emotion/react';
+export const tabsWrapperStyles = css`
+  margin-top: ${"var(--ds-space-150, 12px)"};
+  margin-left: calc(-1 * ${"var(--ds-space-100, 8px)"});
+  margin-right: calc(-1 * ${"var(--ds-space-100, 8px)"});
+`;
+export const spinnerContainerStyles = css`
+  min-height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+`;
+export const flexColumnStyles = css`
+  display: flex;
+  flex-direction: column;
+`;

package/dist/es2019/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({
   activePlugin
 }) {

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

@@ -1,11 +1,6 @@
 import { css } from '@emotion/react';
-import { N500 } from '@atlaskit/theme/colors';
 const LINK_PICKER_WIDTH_IN_PX = 342;
 
-// See lazy-load-height example to verify these
-const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT = 142;
-const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT = 220;
-
 /**
  * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
  */
@@ -16,31 +11,6 @@ export const rootContainerStyles = css`
   box-sizing: border-box;
   line-height: initial;
 `;
-
-/** Styles for skeleton element when Link Picker loading */
-const rootContainerStylesForLoader = css`
-  ${rootContainerStyles}
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-/** Link Picker loader / skeleton will be taller in height when displayText field is shown */
-export const rootContainerStylesForLoaderWithDisplaytext = css`
-  ${rootContainerStylesForLoader}
-  min-height: ${LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT}px;
-`;
-
-/** Link Picker loader / skeleton will be shorter in height when displayText field isn't shown */
-export const rootContainerStylesForLoaderWithoutDisplaytext = css`
-  ${rootContainerStylesForLoader}
-  min-height: ${LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT}px;
-`;
-export const searchIconStyles = css`
-  margin-left: ${"var(--ds-space-050, 4px)"};
-  color: ${`var(--ds-icon, ${N500})`};
-  cursor: default;
-`;
 export const tabsWrapperStyles = css`
   margin-top: ${"var(--ds-space-150, 12px)"};
   margin-left: calc(-1 * ${"var(--ds-space-100, 8px)"});

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

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { useCallback, useRef, Fragment } from 'react';
+import { Fragment, useCallback, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { ErrorMessage, Field } from '@atlaskit/form';
-import Tooltip from '@atlaskit/tooltip';
-import Textfield from '@atlaskit/textfield';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
-import { ConditionalSpotlightTargetWrapper } from '../conditional-spotlight-target-wrapper';
-import { isRedoEvent, isUndoEvent } from '../utils';
+import Textfield from '@atlaskit/textfield';
+import Tooltip from '@atlaskit/tooltip';
+import { ConditionalSpotlightTargetWrapper } from './conditional-spotlight-target-wrapper';
 import { clearTextButtonStyles, fieldStyles } from './styled';
+import { isRedoEvent, isUndoEvent } from './utils';
 export const testIds = {
   urlError: 'link-error',
   clearUrlButton: 'clear-text'

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

@@ -0,0 +1,22 @@
+import { browser } from '@atlaskit/linking-common/user-agent';
+const KeyZCode = 90;
+const KeyYCode = 89;
+export const isUndoEvent = e => {
+  const {
+    mac
+  } = browser();
+  return e.keyCode === KeyZCode && (
+  // cmd + z for mac
+  mac && e.metaKey && !e.shiftKey ||
+  // ctrl + z for non-mac
+  !mac && e.ctrlKey);
+};
+export const isRedoEvent = e => {
+  const {
+    mac
+  } = browser();
+  return (
+    // ctrl + y for non-mac
+    !mac && e.ctrlKey && e.keyCode === KeyYCode || mac && e.metaKey && e.shiftKey && e.keyCode === KeyZCode || e.ctrlKey && e.shiftKey && e.keyCode === KeyZCode
+  );
+};

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

@@ -2,8 +2,8 @@
 import { useLayoutEffect } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { succeedUfoExperience, ufoExperience } from '../../../common/analytics/experiences';
-import createEventPayload from '../../../common/utils/analytics/analytics.codegen';
 import { ANALYTICS_CHANNEL } from '../../../common/constants';
+import createEventPayload from '../../../common/utils/analytics/analytics.codegen';
 import { useLinkPickerSessionId } from '../../../controllers/session-provider';
 
 /**

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

@@ -1,7 +1,7 @@
-import { timeMessages } from './messages';
+import isYesterday from 'date-fns/isYesterday';
 import { isMoreThanOneWeekAgo } from '../../common/utils/date';
 import { selectUnit } from '../../common/utils/dateUtils';
-import isYesterday from 'date-fns/isYesterday';
+import { timeMessages } from './messages';
 const formatTime = (timeStamp, intl) => {
   const isAbsolute = isMoreThanOneWeekAgo(timeStamp);
   if (isAbsolute) {

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

@@ -1,26 +1,4 @@
-import { browser } from '@atlaskit/linking-common/user-agent';
 import { transformTimeStamp } from './transformTimeStamp';
-const KeyZCode = 90;
-const KeyYCode = 89;
-export const isUndoEvent = e => {
-  const {
-    mac
-  } = browser();
-  return e.keyCode === KeyZCode && (
-  // cmd + z for mac
-  mac && e.metaKey && !e.shiftKey ||
-  // ctrl + z for non-mac
-  !mac && e.ctrlKey);
-};
-export const isRedoEvent = e => {
-  const {
-    mac
-  } = browser();
-  return (
-    // ctrl + y for non-mac
-    !mac && e.ctrlKey && e.keyCode === KeyYCode || mac && e.metaKey && e.shiftKey && e.keyCode === KeyZCode || e.ctrlKey && e.shiftKey && e.keyCode === KeyZCode
-  );
-};
 
 /**
  * Retrieve the data source for a link given the item and the plugin that resolved it
@@ -40,26 +18,4 @@ export function getScreenReaderText(items, selectedIndex, intl) {
     const date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
     return [name, container, date].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/ui/loader-fallback/index.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
-import { rootContainerStylesForLoaderWithDisplaytext, rootContainerStylesForLoaderWithoutDisplaytext } from '../link-picker/styled';
+import { rootContainerStylesForLoaderWithDisplaytext, rootContainerStylesForLoaderWithoutDisplaytext } from './styled';
 
 /**
  * Loader / skeleton for the Link Picker. Takes displayText prop - when no displayText is given the height of the skeleton

package/dist/es2019/ui/loader-fallback/styled.js

@@ -0,0 +1,25 @@
+import { css } from '@emotion/react';
+
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { rootContainerStyles } from '../link-picker/styled';
+
+/** Link Picker loader / skeleton will be taller in height when displayText field is shown */
+// See lazy-load-height example to verify these
+const LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT = 142;
+const LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT = 220;
+const rootContainerStylesForLoader = css`
+  ${rootContainerStyles}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const rootContainerStylesForLoaderWithDisplaytext = css`
+  ${rootContainerStylesForLoader}
+  min-height: ${LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT}px;
+`;
+
+/** Link Picker loader / skeleton will be shorter in height when displayText field isn't shown */
+export const rootContainerStylesForLoaderWithoutDisplaytext = css`
+  ${rootContainerStylesForLoader}
+  min-height: ${LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT}px;
+`;