@atlaskit/link-picker 1.48.2 → 1.49.0

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

@@ -0,0 +1,432 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/* 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';
+var 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'
+});
+var formFooterMargin = css({
+  marginTop: "var(--ds-space-200, 16px)"
+});
+export var testIds = _objectSpread(_objectSpread(_objectSpread({
+  linkPickerRoot: 'link-picker-root',
+  linkPicker: 'link-picker',
+  urlInputField: 'link-url',
+  textInputField: 'link-text'
+}, searchTestIds), formFooterTestIds), textFieldTestIds);
+var initState = {
+  url: '',
+  displayText: '',
+  activeIndex: -1,
+  selectedIndex: -1,
+  invalidUrl: false,
+  activeTab: 0,
+  preventHidingRecents: false
+};
+var FullWidthSubmitButtonStyles = xcss({
+  marginTop: 'space.200',
+  display: 'flex',
+  flexDirection: 'column'
+});
+function reducer(state, payload) {
+  if (payload.url && state.url !== payload.url) {
+    return _objectSpread(_objectSpread({}, state), {}, {
+      invalidUrl: false,
+      selectedIndex: isSafeUrl(payload.url) && payload.url.length ? -1 : state.selectedIndex
+    }, payload);
+  }
+  return _objectSpread(_objectSpread({}, state), payload);
+}
+
+/**
+ * Bind input fields to analytics tracking
+ */
+
+var getLinkFieldContent = function getLinkFieldContent(value) {
+  if (!Boolean(value)) {
+    return null;
+  }
+  return isSafeUrl(value) ? 'url' : 'text_string';
+};
+var LinkInputField = withInputFieldTracking(TextInput, 'link', function (event, attributes) {
+  return _objectSpread(_objectSpread({}, attributes), {}, {
+    linkFieldContent: getLinkFieldContent(event.currentTarget.value)
+  });
+});
+var DisplayTextInputField = withInputFieldTracking(TextInput, 'displayText');
+export var LinkPickerOld = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(function (_ref) {
+  var onSubmit = _ref.onSubmit,
+    onCancel = _ref.onCancel,
+    onContentResize = _ref.onContentResize,
+    plugins = _ref.plugins,
+    isLoadingPlugins = _ref.isLoadingPlugins,
+    initUrl = _ref.url,
+    initDisplayText = _ref.displayText,
+    hideDisplayText = _ref.hideDisplayText,
+    featureFlags = _ref.featureFlags,
+    customMessages = _ref.customMessages,
+    _ref$isSubmitting = _ref.isSubmitting,
+    isSubmitting = _ref$isSubmitting === void 0 ? false : _ref$isSubmitting,
+    _ref$adaptiveHeight = _ref.adaptiveHeight,
+    adaptiveHeight = _ref$adaptiveHeight === void 0 ? false : _ref$adaptiveHeight,
+    _ref$UNSAFE_moveSubmi = _ref.UNSAFE_moveSubmitButton,
+    UNSAFE_moveSubmitButton = _ref$UNSAFE_moveSubmi === void 0 ? false : _ref$UNSAFE_moveSubmi;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useReducer = useReducer(reducer, _objectSpread(_objectSpread({}, initState), {}, {
+      url: normalizeUrl(initUrl) || '',
+      displayText: initDisplayText || ''
+    })),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var activeIndex = state.activeIndex,
+    selectedIndex = state.selectedIndex,
+    url = state.url,
+    displayText = state.displayText,
+    invalidUrl = state.invalidUrl,
+    activeTab = state.activeTab;
+  var intl = useIntl();
+  var queryState = useSearchQuery(state);
+  var _usePlugins = usePlugins(queryState, activeTab, plugins),
+    items = _usePlugins.items,
+    isLoadingResults = _usePlugins.isLoading,
+    isActivePlugin = _usePlugins.isActivePlugin,
+    activePlugin = _usePlugins.activePlugin,
+    tabs = _usePlugins.tabs,
+    error = _usePlugins.error,
+    retry = _usePlugins.retry,
+    pluginAction = _usePlugins.pluginAction;
+  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;
+  var _useLinkPickerAnalyti = useLinkPickerAnalytics(),
+    trackAttribute = _useLinkPickerAnalyti.trackAttribute,
+    getAttributes = _useLinkPickerAnalyti.getAttributes;
+  var submitMessageId = useMemo(function () {
+    return uuid();
+  }, []);
+  useLayoutEffect(function () {
+    if (onContentResize) {
+      onContentResize();
+    }
+  }, [onContentResize, items, isLoadingResults, isActivePlugin, tabs]);
+  var handleChangeUrl = useCallback(function (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]);
+  var handleChangeText = useCallback(function (e) {
+    dispatch({
+      displayText: e.currentTarget.value
+    });
+  }, [dispatch]);
+  var handleClear = useCallback(function (field) {
+    dispatch(_defineProperty({
+      activeIndex: -1,
+      selectedIndex: -1
+    }, field, ''));
+  }, [dispatch]);
+  var handleUrlClear = useCallback(function () {
+    if (isSubmitting) {
+      // Prevent clearing url while submitting
+      return;
+    }
+    trackAttribute('linkFieldContentInputSource', null);
+    handleClear('url');
+  }, [trackAttribute, handleClear, isSubmitting]);
+  var handleInsert = useCallback(function (url, title, inputType, data) {
+    var 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!
+    var 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 || consumerEvent.update({
+      attributes: getAttributes()
+    });
+    // Dispatch the original event to our channel
+    event.fire(ANALYTICS_CHANNEL);
+    onSubmit(_objectSpread({
+      url: url,
+      displayText: displayText || null,
+      title: title || null,
+      meta: {
+        inputMethod: inputType
+      },
+      data: data
+    }, inputType === 'manual' ? {
+      rawUrl: state.url
+    } : {}), consumerEvent);
+  }, [displayText, onSubmit, state.url, createAnalyticsEvent, getAttributes]);
+  var handleSelected = useCallback(function (objectId) {
+    if (isSubmitting) {
+      // Prevent changing selection while submitting
+      return;
+    }
+    var selectedItem = items === null || items === void 0 ? void 0 : items.find(function (item) {
+      return item.objectId === objectId;
+    });
+    if (selectedItem) {
+      var _url = selectedItem.url,
+        name = selectedItem.name;
+      /**
+       * 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', _objectSpread({}, selectedItem));
+    }
+  }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
+  var handleSubmit = useCallback(function (event) {
+    event === null || event === void 0 || event.preventDefault();
+    if (isSubmitting) {
+      // Prevent submit while submitting
+      return;
+    }
+    if (isSelectedItem && selectedItem) {
+      return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
+    }
+    var normalized = normalizeUrl(url);
+    if (normalized) {
+      return handleInsert(normalized, null, 'manual');
+    }
+    return dispatch({
+      invalidUrl: true
+    });
+  }, [dispatch, handleInsert, isSelectedItem, selectedItem, url, isSubmitting]);
+  var handleTabChange = useCallback(function (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: activeTab
+    });
+    trackAttribute('tab', (_plugins$activeTab$ta = plugins === null || plugins === void 0 || (_plugins$activeTab = plugins[activeTab]) === null || _plugins$activeTab === void 0 ? void 0 : _plugins$activeTab.tabKey) !== null && _plugins$activeTab$ta !== void 0 ? _plugins$activeTab$ta : null);
+  }, [dispatch, plugins, trackAttribute]);
+  var handleSearchListOnChange = function handleSearchListOnChange(id) {
+    if (isSubmitting) {
+      // Prevent changing item while submitting
+      return;
+    }
+    var index = items === null || items === void 0 ? void 0 : items.findIndex(function (item) {
+      return item.objectId === id;
+    });
+    if (typeof index === 'number') {
+      var item = items === null || items === void 0 ? void 0 : items[index];
+      if (item) {
+        /**
+         * Manually track that the url has been updated using searchResult method
+         */
+        trackAttribute('linkFieldContent', getLinkFieldContent(item.url));
+        trackAttribute('linkFieldContentInputMethod', 'searchResult');
+        trackAttribute('linkFieldContentInputSource', getDataSource(item, activePlugin));
+        dispatch({
+          activeIndex: index,
+          selectedIndex: index,
+          url: item.url,
+          invalidUrl: false
+        });
+      }
+    }
+  };
+  var handleKeyDown = useCallback(function (event) {
+    if (!(items !== null && items !== void 0 && items.length)) {
+      return;
+    }
+    var updatedIndex = activeIndex;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (selectedItem) {
+        handleSelected(selectedItem.objectId);
+      } else {
+        // triggers validation error message
+        handleSubmit();
+      }
+    } else {
+      updatedIndex = handleNavKeyDown(event, items.length, activeIndex);
+    }
+    var item = items[updatedIndex];
+    if (['Enter', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) && item) {
+      /**
+       * Manually track that the url has been updated using searchResult method
+       */
+      trackAttribute('linkFieldContent', getLinkFieldContent(item.url));
+      trackAttribute('linkFieldContentInputMethod', 'searchResult');
+      trackAttribute('linkFieldContentInputSource', getDataSource(item, activePlugin));
+      dispatch({
+        activeIndex: updatedIndex,
+        selectedIndex: updatedIndex,
+        url: item.url,
+        invalidUrl: false
+      });
+    }
+  }, [items, activeIndex, selectedItem, handleSelected, handleSubmit, trackAttribute, activePlugin]);
+  var messages = isActivePlugin ? searchMessages : linkMessages;
+  var screenReaderDescriptionId = 'search-recent-links-field-description';
+  var linkSearchListId = 'link-picker-search-list';
+  var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : '';
+  var 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
+  var screenReaderText = browser().safari && getScreenReaderText(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
+  var 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/esm/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}

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

@@ -1,39 +1,31 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import { Fragment } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner/spinner';
 import Tabs, { Tab, TabList } from '@atlaskit/tabs';
 import { LinkSearchError, testIds as searchErrorTestIds } from './link-search-error';
 import { LinkSearchList, testIds as listTestIds } from './link-search-list';
+import { SearchResultsOld } from './old';
 import { ScrollingTabList } from './scrolling-tabs';
 import { SearchResultsContainer } from './search-results-container';
 import { TrackTabViewed } from './track-tab-viewed';
-var tabsWrapperStyles = xcss({
-  marginTop: 'space.150'
-});
-var spinnerContainerStyles = css({
-  minHeight: '80px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  alignSelf: 'center',
-  flexGrow: 1
-});
+var styles = {
+  tabsWrapper: "_19pkutpp"
+};
+var spinnerContainerStyles = null;
 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) {
+export var SearchResultsNew = function SearchResultsNew(_ref) {
   var _activePlugin$errorFa, _activePlugin$errorFa2;
   var tabs = _ref.tabs,
     activeTab = _ref.activeTab,
@@ -55,32 +47,32 @@ export var SearchResults = function SearchResults(_ref) {
     adaptiveHeight = _ref.adaptiveHeight,
     retry = _ref.retry;
   var isActivePlugin = !!activePlugin;
-  var tabList = jsx(TabList, null, tabs.map(function (tab) {
-    return jsx(Tab, {
+  var tabList = /*#__PURE__*/React.createElement(TabList, null, tabs.map(function (tab) {
+    return /*#__PURE__*/React.createElement(Tab, {
       key: tab.tabTitle,
       testId: testIds.tabItem
     }, tab.tabTitle);
   }));
-  return jsx(SearchResultsContainer, {
+  return /*#__PURE__*/React.createElement(SearchResultsContainer, {
     hasTabs: !!tabs.length || isLoadingPlugins,
     adaptiveHeight: adaptiveHeight,
     isLoadingResults: isLoadingResults
-  }, isLoadingPlugins && !!queryState && jsx("div", {
-    css: spinnerContainerStyles
-  }, jsx(Spinner, {
+  }, isLoadingPlugins && !!queryState && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1tkeys9h _1e0c1txw _4cvr1h6o _1bah1h6o _1wpz1h6o _16jlkb7n"])
+  }, /*#__PURE__*/React.createElement(Spinner, {
     testId: testIds.tabsLoadingIndicator,
     interactionName: "link-picker-tabs-loading",
     size: "medium"
-  })), !isLoadingPlugins && isActivePlugin && !!queryState && jsx(Fragment, null, tabs.length > 0 && jsx(Box, {
-    xcss: tabsWrapperStyles
-  }, jsx(Tabs, {
+  })), !isLoadingPlugins && isActivePlugin && !!queryState && /*#__PURE__*/React.createElement(Fragment, null, tabs.length > 0 && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.tabsWrapper
+  }, /*#__PURE__*/React.createElement(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, {
+  }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? /*#__PURE__*/React.createElement(ScrollingTabList, null, tabList) : tabList), /*#__PURE__*/React.createElement(TrackTabViewed, {
     activePlugin: activePlugin
-  })), !error && jsx(LinkSearchList, {
+  })), !error && /*#__PURE__*/React.createElement(LinkSearchList, {
     id: linkSearchListId,
     role: "listbox",
     ariaReadOnly: isSubmitting,
@@ -94,5 +86,11 @@ export var SearchResults = function SearchResults(_ref) {
     hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
     activePlugin: activePlugin,
     adaptiveHeight: adaptiveHeight
-  }), error ? (_activePlugin$errorFa = activePlugin === null || activePlugin === 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) : null));
+  }), error ? (_activePlugin$errorFa = activePlugin === null || activePlugin === 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 : /*#__PURE__*/React.createElement(LinkSearchError, null) : null));
+};
+export var SearchResults = function SearchResults(props) {
+  if (fg('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(SearchResultsNew, props);
+  }
+  return /*#__PURE__*/React.createElement(SearchResultsOld, props);
 };

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

@@ -1,10 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl-next';
 import { isFedRamp } from '@atlaskit/atlassian-context';
 import Button from '@atlaskit/button';
@@ -29,13 +24,13 @@ export var testIds = {
 };
 export var LinkSearchError = function LinkSearchError() {
   var intl = useIntl();
-  return jsx(EmptyState, {
+  return /*#__PURE__*/React.createElement(EmptyState, {
     testId: testIds.searchError,
     header: intl.formatMessage(messages.searchErrorHeader),
-    description: jsx(FormattedMessage, _extends({}, messages.searchErrorDescription, {
+    description: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.searchErrorDescription, {
       values: {
         a: function a(label) {
-          return jsx(Button, {
+          return /*#__PURE__*/React.createElement(Button, {
             appearance: "link",
             spacing: "none",
             href: isFedRamp() ? CONTACT_SUPPORT_LINK_FEDRAMP : CONTACT_SUPPORT_LINK,
@@ -46,7 +41,7 @@ export var LinkSearchError = function LinkSearchError() {
       }
     })),
     renderImage: function renderImage() {
-      return jsx(GenericErrorSVG, null);
+      return /*#__PURE__*/React.createElement(GenericErrorSVG, null);
     }
   });
 };

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

@@ -0,0 +1,23 @@
+._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._qtt8glyw{list-style:none}
+._16jlkb7n{flex-grow:1}
+._18u01mjz{margin-left:calc(var(--link-picker-padding-left)*-1)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1tkepxbi{min-height:var(--ds-space-200,1pc)}
+._1tkeys9h{min-height:5pc}
+._2hwxum63{margin-right:calc(var(--link-picker-padding-right)*-1)}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._ca0qidpf{padding-top:0}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._otyr1b66{margin-bottom:var(--ds-space-050,4px)}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}