@atlaskit/link-picker 1.48.3 → 1.49.0

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

@@ -0,0 +1,435 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.testIds = exports.LinkPickerOld = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _uuid = _interopRequireDefault(require("uuid"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _url2 = require("@atlaskit/linking-common/url");
+var _userAgent = require("@atlaskit/linking-common/user-agent");
+var _primitives = require("@atlaskit/primitives");
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _analytics = require("../../../common/analytics");
+var _constants = require("../../../common/constants");
+var _analytics2 = _interopRequireDefault(require("../../../common/utils/analytics/analytics.codegen"));
+var _handleNavKeyDown = require("../../../common/utils/handleNavKeyDown");
+var _usePlugins2 = require("../../../services/use-plugins");
+var _useSearchQuery = require("../../../services/use-search-query");
+var _announcer = require("../announcer");
+var _formFooter = require("../form-footer");
+var _linkPickerSubmitButton = require("../form-footer/link-picker-submit-button");
+var _messages = require("../messages");
+var _searchResults = require("../search-results");
+var _textInput = require("../text-input");
+var _trackMount = require("../track-mount");
+var _utils = require("../utils");
+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) { (0, _defineProperty2.default)(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
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var rootContainerStyles = (0, _react2.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 = (0, _react2.css)({
+  marginTop: "var(--ds-space-200, 16px)"
+});
+var testIds = exports.testIds = _objectSpread(_objectSpread(_objectSpread({
+  linkPickerRoot: 'link-picker-root',
+  linkPicker: 'link-picker',
+  urlInputField: 'link-url',
+  textInputField: 'link-text'
+}, _searchResults.testIds), _formFooter.testIds), _textInput.testIds);
+var initState = {
+  url: '',
+  displayText: '',
+  activeIndex: -1,
+  selectedIndex: -1,
+  invalidUrl: false,
+  activeTab: 0,
+  preventHidingRecents: false
+};
+var FullWidthSubmitButtonStyles = (0, _primitives.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: (0, _url2.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 (0, _url2.isSafeUrl)(value) ? 'url' : 'text_string';
+};
+var LinkInputField = (0, _analytics.withInputFieldTracking)(_textInput.TextInput, 'link', function (event, attributes) {
+  return _objectSpread(_objectSpread({}, attributes), {}, {
+    linkFieldContent: getLinkFieldContent(event.currentTarget.value)
+  });
+});
+var DisplayTextInputField = (0, _analytics.withInputFieldTracking)(_textInput.TextInput, 'displayText');
+var LinkPickerOld = exports.LinkPickerOld = (0, _analytics.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0, _react.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 = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useReducer = (0, _react.useReducer)(reducer, _objectSpread(_objectSpread({}, initState), {}, {
+      url: (0, _url2.normalizeUrl)(initUrl) || '',
+      displayText: initDisplayText || ''
+    })),
+    _useReducer2 = (0, _slicedToArray2.default)(_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 = (0, _reactIntlNext.useIntl)();
+  var queryState = (0, _useSearchQuery.useSearchQuery)(state);
+  var _usePlugins = (0, _usePlugins2.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 = (0, _analytics.useLinkPickerAnalytics)(),
+    trackAttribute = _useLinkPickerAnalyti.trackAttribute,
+    getAttributes = _useLinkPickerAnalyti.getAttributes;
+  var submitMessageId = (0, _react.useMemo)(function () {
+    return (0, _uuid.default)();
+  }, []);
+  (0, _react.useLayoutEffect)(function () {
+    if (onContentResize) {
+      onContentResize();
+    }
+  }, [onContentResize, items, isLoadingResults, isActivePlugin, tabs]);
+  var handleChangeUrl = (0, _react.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 = (0, _react.useCallback)(function (e) {
+    dispatch({
+      displayText: e.currentTarget.value
+    });
+  }, [dispatch]);
+  var handleClear = (0, _react.useCallback)(function (field) {
+    dispatch((0, _defineProperty2.default)({
+      activeIndex: -1,
+      selectedIndex: -1
+    }, field, ''));
+  }, [dispatch]);
+  var handleUrlClear = (0, _react.useCallback)(function () {
+    if (isSubmitting) {
+      // Prevent clearing url while submitting
+      return;
+    }
+    trackAttribute('linkFieldContentInputSource', null);
+    handleClear('url');
+  }, [trackAttribute, handleClear, isSubmitting]);
+  var handleInsert = (0, _react.useCallback)(function (url, title, inputType, data) {
+    var event = createAnalyticsEvent((0, _analytics2.default)('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(_constants.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 = (0, _react.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', (0, _utils.getDataSource)(selectedItem, activePlugin));
+      handleInsert(_url, name, 'typeAhead', _objectSpread({}, selectedItem));
+    }
+  }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
+  var handleSubmit = (0, _react.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 = (0, _url2.normalizeUrl)(url);
+    if (normalized) {
+      return handleInsert(normalized, null, 'manual');
+    }
+    return dispatch({
+      invalidUrl: true
+    });
+  }, [dispatch, handleInsert, isSelectedItem, selectedItem, url, isSubmitting]);
+  var handleTabChange = (0, _react.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', (0, _utils.getDataSource)(item, activePlugin));
+        dispatch({
+          activeIndex: index,
+          selectedIndex: index,
+          url: item.url,
+          invalidUrl: false
+        });
+      }
+    }
+  };
+  var handleKeyDown = (0, _react.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 = (0, _handleNavKeyDown.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', (0, _utils.getDataSource)(item, activePlugin));
+      dispatch({
+        activeIndex: updatedIndex,
+        selectedIndex: updatedIndex,
+        url: item.url,
+        invalidUrl: false
+      });
+    }
+  }, [items, activeIndex, selectedItem, handleSelected, handleSubmit, trackAttribute, activePlugin]);
+  var messages = isActivePlugin ? _messages.searchMessages : _messages.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 = (0, _userAgent.browser)().safari && (0, _utils.getScreenReaderText)(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
+  var customSubmitButtonLabel = customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined;
+  return (0, _react2.jsx)("form", {
+    "data-testid": testIds.linkPicker,
+    css: rootContainerStyles
+    // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
+    ,
+    onSubmitCapture: handleSubmit
+  }, (0, _react2.jsx)(_trackMount.TrackMount, null), isActivePlugin && (0, _react2.jsx)(_react.Fragment, null, screenReaderText && (0, _react2.jsx)(_announcer.Announcer, {
+    ariaLive: "assertive",
+    text: screenReaderText,
+    ariaRelevant: "additions",
+    delay: 250
+  }), (0, _react2.jsx)(_visuallyHidden.default, {
+    id: screenReaderDescriptionId
+  }, customMessages !== null && customMessages !== void 0 && customMessages.linkAriaLabel ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, customMessages.linkAriaLabel) : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, messages.linkAriaLabel))), (0, _react2.jsx)(LinkInputField, (0, _extends2.default)({
+    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(_messages.formMessages.clearLink),
+    error: invalidUrl ? intl.formatMessage(_messages.formMessages.linkInvalid) : null,
+    spotlightTargetName: "link-picker-search-field-spotlight-target",
+    "aria-readonly": isSubmitting
+  }, a11yList, {
+    onClear: handleUrlClear,
+    onKeyDown: handleKeyDown,
+    onChange: handleChangeUrl
+  })), !hideDisplayText && (0, _react2.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(_messages.linkTextMessages.linkTextLabel),
+    placeholder: customMessages !== null && customMessages !== void 0 && customMessages.linkTextPlaceholder ? intl.formatMessage(customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkTextPlaceholder) : intl.formatMessage(_messages.linkTextMessages.linkTextPlaceholder),
+    clearLabel: intl.formatMessage(_messages.linkTextMessages.clearLinkText),
+    readOnly: isSubmitting,
+    onClear: handleClear,
+    onChange: handleChangeText
+  }), UNSAFE_moveSubmitButton && (0, _react2.jsx)(_primitives.Box, {
+    xcss: FullWidthSubmitButtonStyles
+  }, (0, _react2.jsx)(_linkPickerSubmitButton.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) && (0, _react2.jsx)(_searchResults.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
+  }), (0, _react2.jsx)(_formFooter.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/cjs/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/cjs/ui/link-picker/search-results/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,42 +6,36 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testIds = exports.SearchResults = void 0;
+exports.testIds = exports.SearchResultsNew = exports.SearchResults = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
 var _linkSearchError = require("./link-search-error");
 var _linkSearchList = require("./link-search-list");
+var _old = require("./old");
 var _scrollingTabs = require("./scrolling-tabs");
 var _searchResultsContainer = require("./search-results-container");
 var _trackTabViewed = require("./track-tab-viewed");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var tabsWrapperStyles = (0, _primitives.xcss)({
-  marginTop: 'space.150'
-});
-var spinnerContainerStyles = (0, _react2.css)({
-  minHeight: '80px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  alignSelf: 'center',
-  flexGrow: 1
-});
+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) { (0, _defineProperty2.default)(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; }
+var styles = {
+  tabsWrapper: "_19pkutpp"
+};
+var spinnerContainerStyles = null;
 var testIds = exports.testIds = _objectSpread(_objectSpread(_objectSpread({}, _linkSearchError.testIds), _linkSearchList.testIds), {}, {
   tabsLoadingIndicator: 'link-picker.tabs-loading-indicator',
   tabList: 'link-picker-tabs',
   tabItem: 'link-picker-tab'
 });
-var SearchResults = exports.SearchResults = function SearchResults(_ref) {
+var SearchResultsNew = exports.SearchResultsNew = function SearchResultsNew(_ref) {
   var _activePlugin$errorFa, _activePlugin$errorFa2;
   var tabs = _ref.tabs,
     activeTab = _ref.activeTab,
@@ -62,32 +57,32 @@ var SearchResults = exports.SearchResults = function SearchResults(_ref) {
     adaptiveHeight = _ref.adaptiveHeight,
     retry = _ref.retry;
   var isActivePlugin = !!activePlugin;
-  var tabList = (0, _react2.jsx)(_tabs.TabList, null, tabs.map(function (tab) {
-    return (0, _react2.jsx)(_tabs.Tab, {
+  var tabList = /*#__PURE__*/React.createElement(_tabs.TabList, null, tabs.map(function (tab) {
+    return /*#__PURE__*/React.createElement(_tabs.Tab, {
       key: tab.tabTitle,
       testId: testIds.tabItem
     }, tab.tabTitle);
   }));
-  return (0, _react2.jsx)(_searchResultsContainer.SearchResultsContainer, {
+  return /*#__PURE__*/React.createElement(_searchResultsContainer.SearchResultsContainer, {
     hasTabs: !!tabs.length || isLoadingPlugins,
     adaptiveHeight: adaptiveHeight,
     isLoadingResults: isLoadingResults
-  }, isLoadingPlugins && !!queryState && (0, _react2.jsx)("div", {
-    css: spinnerContainerStyles
-  }, (0, _react2.jsx)(_spinner.default, {
+  }, isLoadingPlugins && !!queryState && /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1tkeys9h _1e0c1txw _4cvr1h6o _1bah1h6o _1wpz1h6o _16jlkb7n"])
+  }, /*#__PURE__*/React.createElement(_spinner.default, {
     testId: testIds.tabsLoadingIndicator,
     interactionName: "link-picker-tabs-loading",
     size: "medium"
-  })), !isLoadingPlugins && isActivePlugin && !!queryState && (0, _react2.jsx)(_react.Fragment, null, tabs.length > 0 && (0, _react2.jsx)(_primitives.Box, {
-    xcss: tabsWrapperStyles
-  }, (0, _react2.jsx)(_tabs.default, {
+  })), !isLoadingPlugins && isActivePlugin && !!queryState && /*#__PURE__*/React.createElement(_react.Fragment, null, tabs.length > 0 && /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.tabsWrapper
+  }, /*#__PURE__*/React.createElement(_tabs.default, {
     id: testIds.tabList,
     testId: testIds.tabList,
     selected: activeTab,
     onChange: handleTabChange
-  }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? (0, _react2.jsx)(_scrollingTabs.ScrollingTabList, null, tabList) : tabList), (0, _react2.jsx)(_trackTabViewed.TrackTabViewed, {
+  }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? /*#__PURE__*/React.createElement(_scrollingTabs.ScrollingTabList, null, tabList) : tabList), /*#__PURE__*/React.createElement(_trackTabViewed.TrackTabViewed, {
     activePlugin: activePlugin
-  })), !error && (0, _react2.jsx)(_linkSearchList.LinkSearchList, {
+  })), !error && /*#__PURE__*/React.createElement(_linkSearchList.LinkSearchList, {
     id: linkSearchListId,
     role: "listbox",
     ariaReadOnly: isSubmitting,
@@ -101,5 +96,11 @@ var SearchResults = exports.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 : (0, _react2.jsx)(_linkSearchError.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.LinkSearchError, null) : null));
+};
+var SearchResults = exports.SearchResults = function SearchResults(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-picker-css')) {
+    return /*#__PURE__*/React.createElement(SearchResultsNew, props);
+  }
+  return /*#__PURE__*/React.createElement(_old.SearchResultsOld, props);
 };

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

@@ -6,18 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.testIds = exports.messages = exports.LinkSearchError = exports.CONTACT_SUPPORT_LINK_FEDRAMP = exports.CONTACT_SUPPORT_LINK = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _atlassianContext = require("@atlaskit/atlassian-context");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _genericErrorSvg = require("../../../../common/generic-error-svg");
 var _emptyState = require("../../../../common/ui/empty-state");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 var CONTACT_SUPPORT_LINK = exports.CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 var CONTACT_SUPPORT_LINK_FEDRAMP = exports.CONTACT_SUPPORT_LINK_FEDRAMP = 'https://gcs.atlassian-us-gov-mod.net/servicedesk/customer/portals';
 var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
@@ -37,13 +31,13 @@ var testIds = exports.testIds = {
 };
 var LinkSearchError = exports.LinkSearchError = function LinkSearchError() {
   var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _react.jsx)(_emptyState.EmptyState, {
+  return /*#__PURE__*/_react.default.createElement(_emptyState.EmptyState, {
     testId: testIds.searchError,
     header: intl.formatMessage(messages.searchErrorHeader),
-    description: (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.searchErrorDescription, {
+    description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.searchErrorDescription, {
       values: {
         a: function a(label) {
-          return (0, _react.jsx)(_button.default, {
+          return /*#__PURE__*/_react.default.createElement(_button.default, {
             appearance: "link",
             spacing: "none",
             href: (0, _atlassianContext.isFedRamp)() ? CONTACT_SUPPORT_LINK_FEDRAMP : CONTACT_SUPPORT_LINK,
@@ -54,7 +48,7 @@ var LinkSearchError = exports.LinkSearchError = function LinkSearchError() {
       }
     })),
     renderImage: function renderImage() {
-      return (0, _react.jsx)(_genericErrorSvg.GenericErrorSVG, null);
+      return /*#__PURE__*/_react.default.createElement(_genericErrorSvg.GenericErrorSVG, null);
     }
   });
 };

package/dist/cjs/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)}