@atlaskit/link-picker 1.48.3 → 1.49.1

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

@@ -1,19 +1,16 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, memo, useCallback, useLayoutEffect, useMemo, useReducer } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import uuid from 'uuid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { isSafeUrl, normalizeUrl } from '@atlaskit/linking-common/url';
 import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useLinkPickerAnalytics, withInputFieldTracking, withLinkPickerAnalyticsContext } from '../../common/analytics';
 import { ANALYTICS_CHANNEL } from '../../common/constants';
@@ -25,24 +22,18 @@ import { Announcer } from './announcer';
 import { FormFooter, testIds as formFooterTestIds } from './form-footer';
 import { LinkPickerSubmitButton } from './form-footer/link-picker-submit-button';
 import { formMessages, linkMessages, linkTextMessages, searchMessages } from './messages';
+import { LinkPickerOld } from './old';
 import { SearchResults, testIds as searchTestIds } from './search-results';
 import { testIds as textFieldTestIds, TextInput } from './text-input';
 import { TrackMount } from './track-mount';
 import { getDataSource, getScreenReaderText } from './utils';
-const rootContainerStyles = css({
-  paddingLeft: 'var(--link-picker-padding-left)',
-  paddingRight: 'var(--link-picker-padding-right)',
-  paddingTop: 'var(--link-picker-padding-top)',
-  paddingBottom: 'var(--link-picker-padding-bottom)',
-  boxSizing: 'border-box',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 'initial',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-  display: 'block !important'
-});
-const formFooterMargin = css({
-  marginTop: "var(--ds-space-200, 16px)"
-});
+const styles = {
+  fullWidthSubmitButton: "_19pkpxbi _1e0c1txw _2lx21bp4"
+};
+const baseRootContainerStyles = null;
+// To be removed when platform-linking-visual-refresh-v1 is removed
+const oldRootContainerStyles = null;
+const formFooterMargin = null;
 export const testIds = {
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
@@ -59,23 +50,14 @@ const initState = {
   selectedIndex: -1,
   invalidUrl: false,
   activeTab: 0,
-  preventHidingRecents: false,
-  /** This only allows the feature discovery pulse - to be shown the ff must be on and active tab be Jira */
-  allowCreateFeatureDiscovery: true
+  preventHidingRecents: false
 };
-const FullWidthSubmitButtonStyles = xcss({
-  marginTop: 'space.200',
-  display: 'flex',
-  flexDirection: 'column'
-});
 function reducer(state, payload) {
   if (payload.url && state.url !== payload.url) {
     return {
       ...state,
       invalidUrl: false,
       selectedIndex: isSafeUrl(payload.url) && payload.url.length ? -1 : state.selectedIndex,
-      /** When the user starts entering a url, stop pulsing the create button */
-      allowCreateFeatureDiscovery: false,
       ...payload
     };
   }
@@ -88,7 +70,6 @@ function reducer(state, payload) {
 /**
  * Bind input fields to analytics tracking
  */
-
 const getLinkFieldContent = value => {
   if (!Boolean(value)) {
     return null;
@@ -100,7 +81,7 @@ const LinkInputField = withInputFieldTracking(TextInput, 'link', (event, attribu
   linkFieldContent: getLinkFieldContent(event.currentTarget.value)
 }));
 const DisplayTextInputField = withInputFieldTracking(TextInput, 'displayText');
-export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
+export const LinkPickerNew = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   onSubmit,
   onCancel,
   onContentResize,
@@ -129,8 +110,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     url,
     displayText,
     invalidUrl,
-    activeTab,
-    allowCreateFeatureDiscovery
+    activeTab
   } = state;
   const intl = useIntl();
   const queryState = useSearchQuery(state);
@@ -347,20 +327,19 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   // for details: https://a11y-internal.atlassian.net/browse/AK-740
   const screenReaderText = browser().safari && getScreenReaderText(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
   const customSubmitButtonLabel = customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined;
-  return jsx("form", {
+  return /*#__PURE__*/React.createElement("form", {
     "data-testid": testIds.linkPicker,
-    css: rootContainerStyles
     // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
-    ,
-    onSubmitCapture: handleSubmit
-  }, jsx(TrackMount, null), isActivePlugin && jsx(Fragment, null, screenReaderText && jsx(Announcer, {
+    onSubmitCapture: handleSubmit,
+    className: ax(["_19bv164s _u5f31pah _ca0q1k79 _n3td1t3k _vchhusvi _1e0ctcjq", !fg('platform-linking-visual-refresh-v1') && "_vwz44jg8"])
+  }, /*#__PURE__*/React.createElement(TrackMount, null), isActivePlugin && /*#__PURE__*/React.createElement(Fragment, null, screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
     ariaRelevant: "additions",
     delay: 250
-  }), jsx(VisuallyHidden, {
+  }), /*#__PURE__*/React.createElement(VisuallyHidden, {
     id: screenReaderDescriptionId
-  }, customMessages !== null && customMessages !== void 0 && customMessages.linkAriaLabel ? jsx(FormattedMessage, customMessages.linkAriaLabel) : jsx(FormattedMessage, messages.linkAriaLabel))), jsx(LinkInputField, _extends({
+  }, customMessages !== null && customMessages !== void 0 && customMessages.linkAriaLabel ? /*#__PURE__*/React.createElement(FormattedMessage, customMessages.linkAriaLabel) : /*#__PURE__*/React.createElement(FormattedMessage, messages.linkAriaLabel))), /*#__PURE__*/React.createElement(LinkInputField, _extends({
     name: "url",
     autoComplete: "off",
     testId: testIds.urlInputField,
@@ -376,7 +355,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     onClear: handleUrlClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
-  })), !hideDisplayText && jsx(DisplayTextInputField, {
+  })), !hideDisplayText && /*#__PURE__*/React.createElement(DisplayTextInputField, {
     autoComplete: "off",
     name: "displayText",
     testId: testIds.textInputField,
@@ -387,9 +366,9 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     readOnly: isSubmitting,
     onClear: handleClear,
     onChange: handleChangeText
-  }), UNSAFE_moveSubmitButton && jsx(Box, {
-    xcss: FullWidthSubmitButtonStyles
-  }, jsx(LinkPickerSubmitButton, {
+  }), UNSAFE_moveSubmitButton && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.fullWidthSubmitButton
+  }, /*#__PURE__*/React.createElement(LinkPickerSubmitButton, {
     isEditing: isEditing,
     isLoading: isLoadingResults || !!isLoadingPlugins,
     isSubmitting: isSubmitting,
@@ -400,7 +379,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     submitMessageId: submitMessageId,
     testId: testIds.insertButton,
     url: url
-  })), !!queryState && (isLoadingPlugins || isActivePlugin) && jsx(SearchResults, {
+  })), !!queryState && (isLoadingPlugins || isActivePlugin) && /*#__PURE__*/React.createElement(SearchResults, {
     activeTab: activeTab,
     tabs: tabs,
     activePlugin: activePlugin,
@@ -420,7 +399,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     handleSearchListOnChange: handleSearchListOnChange,
     adaptiveHeight: adaptiveHeight,
     retry: retry
-  }), jsx(FormFooter, {
+  }), /*#__PURE__*/React.createElement(FormFooter, {
     error: error,
     items: items
     /** If the results section appears to be loading, impact whether the submit button is disabled */,
@@ -430,15 +409,16 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     url: url,
     isEditing: isEditing,
     onCancel: onCancel,
-    action: pluginAction
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? formFooterMargin : undefined
-    /* Show the feature discovery pulse when we're on the Jira tab, we haven't started typing a url and
-          the feature flag is enabled */,
-    createFeatureDiscovery: (activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.tabKey) === 'jira' && allowCreateFeatureDiscovery && fg('platform.linking-platform.link-picker.enable-jira-create'),
+    action: pluginAction,
     customSubmitButtonLabel: customSubmitButtonLabel,
     submitMessageId: submitMessageId,
-    hideSubmitButton: UNSAFE_moveSubmitButton
+    hideSubmitButton: UNSAFE_moveSubmitButton,
+    className: ax([(!queryState || !(plugins !== null && plugins !== void 0 && plugins.length)) && "_19pkpxbi"])
   }));
-}));
+}));
+export const LinkPicker = props => {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(LinkPickerNew, props);
+  }
+  return /*#__PURE__*/React.createElement(LinkPickerOld, props);
+};

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

@@ -0,0 +1,436 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlassian/tangerine/import/no-parent-imports */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { Fragment, memo, useCallback, useLayoutEffect, useMemo, useReducer } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import uuid from 'uuid';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { isSafeUrl, normalizeUrl } from '@atlaskit/linking-common/url';
+import { browser } from '@atlaskit/linking-common/user-agent';
+import { Box, xcss } from '@atlaskit/primitives';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import { useLinkPickerAnalytics, withInputFieldTracking, withLinkPickerAnalyticsContext } from '../../../common/analytics';
+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 { Announcer } from '../announcer';
+import { FormFooter, testIds as formFooterTestIds } from '../form-footer';
+import { LinkPickerSubmitButton } from '../form-footer/link-picker-submit-button';
+import { formMessages, linkMessages, linkTextMessages, searchMessages } from '../messages';
+import { SearchResults, testIds as searchTestIds } from '../search-results';
+import { testIds as textFieldTestIds, TextInput } from '../text-input';
+import { TrackMount } from '../track-mount';
+import { getDataSource, getScreenReaderText } from '../utils';
+const rootContainerStyles = css({
+  paddingLeft: 'var(--link-picker-padding-left)',
+  paddingRight: 'var(--link-picker-padding-right)',
+  paddingTop: 'var(--link-picker-padding-top)',
+  paddingBottom: 'var(--link-picker-padding-bottom)',
+  boxSizing: 'border-box',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: 'initial',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  display: 'block !important'
+});
+const formFooterMargin = css({
+  marginTop: "var(--ds-space-200, 16px)"
+});
+export const testIds = {
+  linkPickerRoot: 'link-picker-root',
+  linkPicker: 'link-picker',
+  urlInputField: 'link-url',
+  textInputField: 'link-text',
+  ...searchTestIds,
+  ...formFooterTestIds,
+  ...textFieldTestIds
+};
+const initState = {
+  url: '',
+  displayText: '',
+  activeIndex: -1,
+  selectedIndex: -1,
+  invalidUrl: false,
+  activeTab: 0,
+  preventHidingRecents: false
+};
+const FullWidthSubmitButtonStyles = xcss({
+  marginTop: 'space.200',
+  display: 'flex',
+  flexDirection: 'column'
+});
+function reducer(state, payload) {
+  if (payload.url && state.url !== payload.url) {
+    return {
+      ...state,
+      invalidUrl: false,
+      selectedIndex: isSafeUrl(payload.url) && payload.url.length ? -1 : state.selectedIndex,
+      ...payload
+    };
+  }
+  return {
+    ...state,
+    ...payload
+  };
+}
+
+/**
+ * Bind input fields to analytics tracking
+ */
+
+const getLinkFieldContent = value => {
+  if (!Boolean(value)) {
+    return null;
+  }
+  return isSafeUrl(value) ? 'url' : 'text_string';
+};
+const LinkInputField = withInputFieldTracking(TextInput, 'link', (event, attributes) => ({
+  ...attributes,
+  linkFieldContent: getLinkFieldContent(event.currentTarget.value)
+}));
+const DisplayTextInputField = withInputFieldTracking(TextInput, 'displayText');
+export const LinkPickerOld = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
+  onSubmit,
+  onCancel,
+  onContentResize,
+  plugins,
+  isLoadingPlugins,
+  url: initUrl,
+  displayText: initDisplayText,
+  hideDisplayText,
+  featureFlags,
+  customMessages,
+  isSubmitting = false,
+  adaptiveHeight = false,
+  UNSAFE_moveSubmitButton = false
+}) => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const [state, dispatch] = useReducer(reducer, {
+    ...initState,
+    url: normalizeUrl(initUrl) || '',
+    displayText: initDisplayText || ''
+  });
+  const {
+    activeIndex,
+    selectedIndex,
+    url,
+    displayText,
+    invalidUrl,
+    activeTab
+  } = state;
+  const intl = useIntl();
+  const queryState = useSearchQuery(state);
+  const {
+    items,
+    isLoading: isLoadingResults,
+    isActivePlugin,
+    activePlugin,
+    tabs,
+    error,
+    retry,
+    pluginAction
+  } = usePlugins(queryState, activeTab, plugins);
+  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;
+  const {
+    trackAttribute,
+    getAttributes
+  } = useLinkPickerAnalytics();
+  const submitMessageId = useMemo(() => uuid(), []);
+  useLayoutEffect(() => {
+    if (onContentResize) {
+      onContentResize();
+    }
+  }, [onContentResize, items, isLoadingResults, isActivePlugin, tabs]);
+  const handleChangeUrl = useCallback(e => {
+    if (isSubmitting) {
+      // Prevent changing url while submitting
+      return;
+    }
+
+    /** Any on change event is triggered by manual input or paste, so source is null */
+    trackAttribute('linkFieldContentInputSource', null);
+    dispatch({
+      url: e.currentTarget.value,
+      // If the last action was changing tabs, make sure we're now allowing recents to be hidden
+      preventHidingRecents: false
+    });
+  }, [dispatch, trackAttribute, isSubmitting]);
+  const handleChangeText = useCallback(e => {
+    dispatch({
+      displayText: e.currentTarget.value
+    });
+  }, [dispatch]);
+  const handleClear = useCallback(field => {
+    dispatch({
+      activeIndex: -1,
+      selectedIndex: -1,
+      [field]: ''
+    });
+  }, [dispatch]);
+  const handleUrlClear = useCallback(() => {
+    if (isSubmitting) {
+      // Prevent clearing url while submitting
+      return;
+    }
+    trackAttribute('linkFieldContentInputSource', null);
+    handleClear('url');
+  }, [trackAttribute, handleClear, isSubmitting]);
+  const handleInsert = useCallback((url, title, inputType, data) => {
+    const event = createAnalyticsEvent(createEventPayload('ui.form.submitted.linkPicker', {}));
+
+    // Clone the event so that it can be emitted for consumer usage
+    // This must happen BEFORE the original event is fired!
+    const consumerEvent = event.clone();
+    // Cloned event doesnt have the attributes that are added by
+    // the analytics listener in the LinkPickerAnalyticsContext, add them here
+    consumerEvent === null || consumerEvent === void 0 ? void 0 : consumerEvent.update({
+      attributes: getAttributes()
+    });
+    // Dispatch the original event to our channel
+    event.fire(ANALYTICS_CHANNEL);
+    onSubmit({
+      url,
+      displayText: displayText || null,
+      title: title || null,
+      meta: {
+        inputMethod: inputType
+      },
+      data,
+      ...(inputType === 'manual' ? {
+        rawUrl: state.url
+      } : {})
+    }, consumerEvent);
+  }, [displayText, onSubmit, state.url, createAnalyticsEvent, getAttributes]);
+  const handleSelected = useCallback(objectId => {
+    if (isSubmitting) {
+      // Prevent changing selection while submitting
+      return;
+    }
+    const selectedItem = items === null || items === void 0 ? void 0 : items.find(item => item.objectId === objectId);
+    if (selectedItem) {
+      const {
+        url,
+        name
+      } = selectedItem;
+      /**
+       * Manually track that the url has been updated using searchResult method
+       */
+      dispatchEvent(new Event('submit'));
+      trackAttribute('linkFieldContent', getLinkFieldContent(url));
+      trackAttribute('linkFieldContentInputMethod', 'searchResult');
+      trackAttribute('linkFieldContentInputSource', getDataSource(selectedItem, activePlugin));
+      handleInsert(url, name, 'typeAhead', {
+        ...selectedItem
+      });
+    }
+  }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
+  const handleSubmit = useCallback(event => {
+    event === null || event === void 0 ? void 0 : event.preventDefault();
+    if (isSubmitting) {
+      // Prevent submit while submitting
+      return;
+    }
+    if (isSelectedItem && selectedItem) {
+      return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
+    }
+    const normalized = normalizeUrl(url);
+    if (normalized) {
+      return handleInsert(normalized, null, 'manual');
+    }
+    return dispatch({
+      invalidUrl: true
+    });
+  }, [dispatch, handleInsert, isSelectedItem, selectedItem, url, isSubmitting]);
+  const handleTabChange = useCallback(activeTab => {
+    var _plugins$activeTab$ta, _plugins$activeTab;
+    dispatch({
+      // We don't want any selection to exist after changing tab, as the selection
+      // wouldn't mean anything.
+      activeIndex: -1,
+      selectedIndex: -1,
+      // We don't want recents to be hidden, even though we don't have a selection
+      preventHidingRecents: true,
+      invalidUrl: false,
+      activeTab
+    });
+    trackAttribute('tab', (_plugins$activeTab$ta = plugins === null || plugins === void 0 ? void 0 : (_plugins$activeTab = plugins[activeTab]) === null || _plugins$activeTab === void 0 ? void 0 : _plugins$activeTab.tabKey) !== null && _plugins$activeTab$ta !== void 0 ? _plugins$activeTab$ta : null);
+  }, [dispatch, plugins, trackAttribute]);
+  const handleSearchListOnChange = id => {
+    if (isSubmitting) {
+      // Prevent changing item while submitting
+      return;
+    }
+    const index = items === null || items === void 0 ? void 0 : items.findIndex(item => item.objectId === id);
+    if (typeof index === 'number') {
+      const item = items === null || items === void 0 ? void 0 : items[index];
+      if (item) {
+        /**
+         * Manually track that the url has been updated using searchResult method
+         */
+        trackAttribute('linkFieldContent', getLinkFieldContent(item.url));
+        trackAttribute('linkFieldContentInputMethod', 'searchResult');
+        trackAttribute('linkFieldContentInputSource', getDataSource(item, activePlugin));
+        dispatch({
+          activeIndex: index,
+          selectedIndex: index,
+          url: item.url,
+          invalidUrl: false
+        });
+      }
+    }
+  };
+  const handleKeyDown = useCallback(event => {
+    if (!(items !== null && items !== void 0 && items.length)) {
+      return;
+    }
+    let updatedIndex = activeIndex;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (selectedItem) {
+        handleSelected(selectedItem.objectId);
+      } else {
+        // triggers validation error message
+        handleSubmit();
+      }
+    } else {
+      updatedIndex = handleNavKeyDown(event, items.length, activeIndex);
+    }
+    const item = items[updatedIndex];
+    if (['Enter', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) && item) {
+      /**
+       * Manually track that the url has been updated using searchResult method
+       */
+      trackAttribute('linkFieldContent', getLinkFieldContent(item.url));
+      trackAttribute('linkFieldContentInputMethod', 'searchResult');
+      trackAttribute('linkFieldContentInputSource', getDataSource(item, activePlugin));
+      dispatch({
+        activeIndex: updatedIndex,
+        selectedIndex: updatedIndex,
+        url: item.url,
+        invalidUrl: false
+      });
+    }
+  }, [items, activeIndex, selectedItem, handleSelected, handleSubmit, trackAttribute, activePlugin]);
+  const messages = isActivePlugin ? searchMessages : linkMessages;
+  const screenReaderDescriptionId = 'search-recent-links-field-description';
+  const linkSearchListId = 'link-picker-search-list';
+  const ariaActiveDescendant = selectedIndex > -1 ? `link-search-list-item-${selectedIndex}` : '';
+  const a11yList = isActivePlugin || isLoadingPlugins ? {
+    role: 'combobox',
+    // When a combobox popup is not visible, the element with role combobox has aria-expanded set to false
+    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded#combobox
+    'aria-expanded': !!(items !== null && items !== void 0 && items.length),
+    'aria-autocomplete': 'list',
+    'aria-controls': linkSearchListId,
+    'aria-activedescendant': ariaActiveDescendant,
+    'aria-describedby': screenReaderDescriptionId
+  } : undefined;
+
+  // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
+  // 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 customSubmitButtonLabel = customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined;
+  return jsx("form", {
+    "data-testid": testIds.linkPicker,
+    css: rootContainerStyles
+    // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
+    ,
+    onSubmitCapture: handleSubmit
+  }, jsx(TrackMount, null), isActivePlugin && jsx(Fragment, null, screenReaderText && jsx(Announcer, {
+    ariaLive: "assertive",
+    text: screenReaderText,
+    ariaRelevant: "additions",
+    delay: 250
+  }), jsx(VisuallyHidden, {
+    id: screenReaderDescriptionId
+  }, customMessages !== null && customMessages !== void 0 && customMessages.linkAriaLabel ? jsx(FormattedMessage, customMessages.linkAriaLabel) : jsx(FormattedMessage, messages.linkAriaLabel))), jsx(LinkInputField, _extends({
+    name: "url",
+    autoComplete: "off",
+    testId: testIds.urlInputField,
+    label: customMessages !== null && customMessages !== void 0 && customMessages.linkLabel ? intl.formatMessage(customMessages.linkLabel) : intl.formatMessage(messages.linkLabel),
+    placeholder: customMessages !== null && customMessages !== void 0 && customMessages.linkPlaceholder ? intl.formatMessage(customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkPlaceholder) : intl.formatMessage(messages.linkPlaceholder),
+    value: url,
+    autoFocus: true,
+    clearLabel: intl.formatMessage(formMessages.clearLink),
+    error: invalidUrl ? intl.formatMessage(formMessages.linkInvalid) : null,
+    spotlightTargetName: "link-picker-search-field-spotlight-target",
+    "aria-readonly": isSubmitting
+  }, a11yList, {
+    onClear: handleUrlClear,
+    onKeyDown: handleKeyDown,
+    onChange: handleChangeUrl
+  })), !hideDisplayText && jsx(DisplayTextInputField, {
+    autoComplete: "off",
+    name: "displayText",
+    testId: testIds.textInputField,
+    value: displayText,
+    label: customMessages !== null && customMessages !== void 0 && customMessages.linkTextLabel ? intl.formatMessage(customMessages.linkTextLabel) : intl.formatMessage(linkTextMessages.linkTextLabel),
+    placeholder: customMessages !== null && customMessages !== void 0 && customMessages.linkTextPlaceholder ? intl.formatMessage(customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkTextPlaceholder) : intl.formatMessage(linkTextMessages.linkTextPlaceholder),
+    clearLabel: intl.formatMessage(linkTextMessages.clearLinkText),
+    readOnly: isSubmitting,
+    onClear: handleClear,
+    onChange: handleChangeText
+  }), UNSAFE_moveSubmitButton && jsx(Box, {
+    xcss: FullWidthSubmitButtonStyles
+  }, jsx(LinkPickerSubmitButton, {
+    isEditing: isEditing,
+    isLoading: isLoadingResults || !!isLoadingPlugins,
+    isSubmitting: isSubmitting,
+    customSubmitButtonLabel: customSubmitButtonLabel,
+    error: error,
+    items: items,
+    queryState: queryState,
+    submitMessageId: submitMessageId,
+    testId: testIds.insertButton,
+    url: url
+  })), !!queryState && (isLoadingPlugins || isActivePlugin) && jsx(SearchResults, {
+    activeTab: activeTab,
+    tabs: tabs,
+    activePlugin: activePlugin,
+    isLoadingResults: isLoadingResults,
+    isLoadingPlugins: isLoadingPlugins,
+    isSubmitting: isSubmitting,
+    linkSearchListId: linkSearchListId,
+    error: error,
+    featureFlags: featureFlags,
+    activeIndex: activeIndex,
+    selectedIndex: selectedIndex,
+    items: items,
+    queryState: queryState,
+    handleKeyDown: handleKeyDown,
+    handleSelected: handleSelected,
+    handleTabChange: handleTabChange,
+    handleSearchListOnChange: handleSearchListOnChange,
+    adaptiveHeight: adaptiveHeight,
+    retry: retry
+  }), jsx(FormFooter, {
+    error: error,
+    items: items
+    /** If the results section appears to be loading, impact whether the submit button is disabled */,
+    isLoading: isLoadingResults || !!isLoadingPlugins,
+    isSubmitting: isSubmitting,
+    queryState: queryState,
+    url: url,
+    isEditing: isEditing,
+    onCancel: onCancel,
+    action: pluginAction
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
+    css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? formFooterMargin : undefined,
+    customSubmitButtonLabel: customSubmitButtonLabel,
+    submitMessageId: submitMessageId,
+    hideSubmitButton: UNSAFE_moveSubmitButton
+  }));
+}));

package/dist/es2019/ui/link-picker/search-results/index.compiled.css

@@ -0,0 +1,7 @@
+._16jlkb7n{flex-grow:1}
+._19pkutpp{margin-top:var(--ds-space-150,9pt)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tkeys9h{min-height:5pc}
+._1wpz1h6o{align-self:center}
+._4cvr1h6o{align-items:center}