@atlaskit/link-picker 1.8.2 → 1.8.5

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

@@ -0,0 +1,111 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _wrapNativeSuper from "@babel/runtime/helpers/wrapNativeSuper";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+export var CancellationError = /*#__PURE__*/function (_Error) {
+  _inherits(CancellationError, _Error);
+
+  var _super = _createSuper(CancellationError);
+
+  function CancellationError() {
+    _classCallCheck(this, CancellationError);
+
+    return _super.apply(this, arguments);
+  }
+
+  return _createClass(CancellationError);
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+export var cancellable = function cancellable(promise) {
+  var reject;
+  return {
+    promise: new Promise(function (resolve, _reject) {
+      reject = _reject;
+      promise.then(resolve, reject);
+    }),
+    cancel: function cancel() {
+      reject(new CancellationError('Promise cancelled'));
+    }
+  };
+};
+/**
+ * Wraps the resolve with a cancellation wrapper and makes promise + generator plugin resolves more compatible
+ * Calling cancel for generator plugin prevents it from yielding any further updates
+ */
+
+export var resolvePluginUpdates = function resolvePluginUpdates(plugin, state) {
+  var updates = plugin.resolve(state); // Promise plugin
+
+  if (updates instanceof Promise) {
+    var _cancellable = cancellable(updates),
+        promise = _cancellable.promise,
+        cancel = _cancellable.cancel;
+
+    return {
+      cancel: cancel,
+      next: function () {
+        var _next = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return promise;
+
+                case 2:
+                  _context.t0 = _context.sent;
+                  return _context.abrupt("return", {
+                    value: _context.t0,
+                    done: true
+                  });
+
+                case 4:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }));
+
+        function next() {
+          return _next.apply(this, arguments);
+        }
+
+        return next;
+      }()
+    };
+  } // Generator plugin
+
+
+  var cancellationCallbacks = [];
+  var cancelled = false;
+  return {
+    cancel: function cancel() {
+      cancelled = true;
+      cancellationCallbacks.forEach(function (cb) {
+        return cb();
+      });
+    },
+    next: function next() {
+      var _cancellable2 = cancellable(updates.next()),
+          promise = _cancellable2.promise,
+          cancel = _cancellable2.cancel;
+
+      if (cancelled) {
+        cancel();
+      } else {
+        cancellationCallbacks.push(cancel);
+      }
+
+      return promise;
+    }
+  };
+};

package/dist/esm/services/use-search-query/index.js

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { isSafeUrl } from '../../ui/link-picker/url';
+import { isSafeUrl } from '../../common/utils/url';
 export function useSearchQuery(state) {
   var _queryState$current;
 

package/dist/esm/services/with-link-picker-analytics/index.js

@@ -0,0 +1,17 @@
+import React, { useMemo } from 'react';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { normalizeUrl } from '../../common/utils/url';
+export function withLinkPickerAnalyticsContext(WrappedComponent) {
+  return function (props) {
+    var data = useMemo(function () {
+      return {
+        attributes: {
+          linkState: normalizeUrl(props.url) ? 'editLink' : 'newLink'
+        }
+      };
+    }, [props.url]);
+    return /*#__PURE__*/React.createElement(AnalyticsContext, {
+      data: data
+    }, /*#__PURE__*/React.createElement(WrappedComponent, props));
+  };
+}

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

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isEditing", "onCancel"];
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useIntl, defineMessages } from 'react-intl-next';
+import Button, { ButtonGroup } from '@atlaskit/button';
+import { formFooterStyles } from './styled';
+import { memo } from 'react';
+var messages = defineMessages({
+  cancelButton: {
+    id: 'fabric.linkPicker.button.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Button to cancel and dismiss the link picker'
+  },
+  saveButton: {
+    id: 'fabric.linkPicker.button.save',
+    defaultMessage: 'Save',
+    description: 'Button to save edited link'
+  },
+  insertButton: {
+    id: 'fabric.linkPicker.button.insert',
+    defaultMessage: 'Insert',
+    description: 'Button to insert searched or selected link'
+  }
+});
+export var testIds = {
+  insertButton: 'link-picker-insert-button',
+  cancelButton: 'link-picker-cancel-button'
+};
+
+var FormFooter = function FormFooter(_ref) {
+  var isEditing = _ref.isEditing,
+      onCancel = _ref.onCancel,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var intl = useIntl();
+  var insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
+  return jsx("footer", _extends({
+    css: formFooterStyles
+  }, restProps), jsx(ButtonGroup, null, jsx(Button, {
+    appearance: "default",
+    onClick: onCancel,
+    testId: testIds.cancelButton
+  }, intl.formatMessage(messages.cancelButton)), jsx(Button, {
+    type: "submit",
+    appearance: "primary",
+    testId: testIds.insertButton
+  }, intl.formatMessage(insertButtonMsg))));
+};
+
+export default /*#__PURE__*/memo(FormFooter);

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

@@ -0,0 +1,6 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+export var formFooterStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n"])));

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

@@ -7,12 +7,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { Fragment, useCallback, useEffect, useLayoutEffect, useReducer } from 'react';
+import { Fragment, useCallback, useEffect, useLayoutEffect, useReducer, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import Button, { ButtonGroup } from '@atlaskit/button';
-import { FormFooter } from '@atlaskit/form';
 import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
 import Tabs, { Tab, TabList } from '@atlaskit/tabs';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -20,36 +18,31 @@ import createEventPayload from '../../analytics.codegen';
 import { ANALYTICS_CHANNEL } from '../../common/constants';
 import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
+import { withLinkPickerAnalyticsContext } from '../../services/with-link-picker-analytics';
 import { messages } from './messages';
 import PanelTextInput from './text-input';
-import LinkSearchList from './link-search-list';
-import { normalizeUrl, isSafeUrl } from './url';
-import { rootContainerStyles, searchIconStyles, listTitleStyles, tabsWrapperStyles } from './styled';
+import { normalizeUrl, isSafeUrl } from '../../common/utils/url';
+import useFixHeight from '../../controllers/use-fix-height';
+import { rootContainerStyles, searchIconStyles, tabsWrapperStyles, flexColumnStyles, formFooterMargin } from './styled';
 import { browser } from './browser';
 import Announcer from './announcer';
-import LinkSearchNoResults from './link-search-no-results';
 import { transformTimeStamp } from './transformTimeStamp';
-import LinkSearchError from './link-search-error';
+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';
 export var RECENT_SEARCH_LIST_SIZE = 5;
 export var CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
-export var testIds = {
+export var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
   textInputField: 'link-text',
-  searchIcon: 'link-picker-search-icon',
-  insertButton: 'link-picker-insert-button',
-  cancelButton: 'link-picker-cancel-button',
+  searchIcon: 'link-picker-search-icon'
+}, formFooterTestIds), searchErrorTestIds), listTestIds), {}, {
   clearUrlButton: 'clear-text',
-  resultListTitle: 'link-picker-list-title',
-  emptyResultPage: 'link-search-no-results',
-  searchResultList: 'link-search-list',
-  searchResultItem: 'link-search-list-item',
-  searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
   urlError: 'link-error',
   tabList: 'link-picker-tabs',
-  tabItem: 'link-picker-tab',
-  searchError: 'link-search-error'
-};
+  tabItem: 'link-picker-tab'
+});
 var initState = {
   url: '',
   displayText: '',
@@ -71,7 +64,7 @@ function reducer(state, payload) {
 }
 
 function LinkPicker(_ref) {
-  var _queryState$query, _items$length, _errorFallback;
+  var _errorFallback;
 
   var onSubmit = _ref.onSubmit,
       onCancel = _ref.onCancel,
@@ -109,6 +102,7 @@ function LinkPicker(_ref) {
       retry = _usePlugins.retry,
       errorFallback = _usePlugins.errorFallback;
 
+  var fixListHeightProps = useFixHeight(isLoading);
   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;
@@ -237,9 +231,6 @@ function LinkPicker(_ref) {
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
   var linkPlaceHolder = isActivePlugin ? messages.placeholder : messages.linkPlaceholder;
-  var linkListTitle = (queryState === null || queryState === void 0 ? void 0 : (_queryState$query = queryState.query) === null || _queryState$query === void 0 ? void 0 : _queryState$query.length) !== 0 ? messages.titleResults : messages.titleRecentlyViewed;
-  var insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
-  var noResults = (items === null || items === void 0 ? void 0 : items.length) === 0 && !error;
   var screenReaderDescriptionId = 'search-recent-links-field-description';
   var linkSearchListId = 'link-picker-search-list';
   var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
@@ -297,7 +288,7 @@ function LinkPicker(_ref) {
     onClear: handleClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
-  }), queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
+  }), isActivePlugin && !!queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
     css: tabsWrapperStyles
   }, jsx(Tabs, {
     id: testIds.tabList,
@@ -315,64 +306,28 @@ function LinkPicker(_ref) {
       key: tab.tabTitle,
       testId: testIds.tabItem
     }, tab.tabTitle);
-  })))), !!(items !== null && items !== void 0 && items.length) && jsx("div", {
-    css: listTitleStyles,
-    id: testIds.resultListTitle,
-    "data-testid": testIds.resultListTitle
-  }, jsx(FormattedMessage, linkListTitle)), jsx(VisuallyHidden, {
-    id: "fabric.smartcard.linkpicker.suggested.results"
-  }, url && jsx(FormattedMessage, _extends({}, messages.searchLinkResults, {
-    values: {
-      count: (_items$length = items === null || items === void 0 ? void 0 : items.length) !== null && _items$length !== void 0 ? _items$length : 0
-    },
-    "aria-live": "polite",
-    "aria-atomic": "true"
-  }))), jsx(LinkSearchList, {
-    ariaLabelledBy: testIds.resultListTitle,
-    ariaControls: "fabric.smartcard.linkpicker.suggested.results",
+  })))), jsx("div", _extends({
+    css: flexColumnStyles
+  }, fixListHeightProps), !error && jsx(LinkSearchList, {
     id: linkSearchListId,
     role: "listbox",
-    items: items !== null && items !== void 0 ? items : [],
+    items: items,
     isLoading: isLoading,
     selectedIndex: selectedIndex,
     activeIndex: activeIndex,
     onSelect: handleSelected,
     onMouseEnter: handleMouseEnterResultItem,
-    onMouseLeave: handleMouseLeaveResultItem
-  }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : jsx(LinkSearchError, {
-    testId: testIds.searchError,
-    header: intl.formatMessage(messages.searchErrorHeader),
-    description: jsx(FormattedMessage, _extends({}, messages.searchErrorDescription, {
-      values: {
-        a: function a(label) {
-          return jsx(Button, {
-            appearance: "link",
-            spacing: "none",
-            href: CONTACT_SUPPORT_LINK,
-            target: "_blank",
-            rel: "noopener noreferrer"
-          }, label);
-        }
-      }
-    }))
-  })), noResults && jsx(LinkSearchNoResults, {
-    testId: testIds.emptyResultPage,
-    header: intl.formatMessage(messages.noResults),
-    description: intl.formatMessage(messages.noResultsDescription)
-  })), jsx(FormFooter, {
-    align: "end"
-  }, jsx(ButtonGroup, null, jsx(Button, {
-    appearance: "default",
-    onClick: onCancel,
-    testId: testIds.cancelButton
-  }, intl.formatMessage(messages.cancelButton)), jsx(Button, {
-    type: "submit",
-    appearance: "primary",
-    testId: testIds.insertButton
-  }, intl.formatMessage(insertButtonMsg)))));
+    onMouseLeave: handleMouseLeaveResultItem,
+    error: error,
+    hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length)
+  }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : jsx(LinkSearchError, null)))), jsx(FormFooter, {
+    css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? formFooterMargin : undefined,
+    isEditing: isEditing,
+    onCancel: onCancel
+  }));
 }
 
-export default LinkPicker;
+export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(LinkPicker));
 
 function getScreenReaderText(items, selectedIndex, intl) {
   if (items.length && selectedIndex > -1) {

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

@@ -1,14 +1,50 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useIntl, FormattedMessage, defineMessages } from 'react-intl-next';
+import Button from '@atlaskit/button';
+export var CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
+export var messages = defineMessages({
+  searchErrorHeader: {
+    id: 'fabric.linkPicker.search.error.heading',
+    defaultMessage: 'We’re having trouble loading data.',
+    description: 'Heading message shown when a search throws an error'
+  },
+  searchErrorDescription: {
+    id: 'fabric.linkPicker.search.error.description',
+    defaultMessage: 'Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.',
+    description: 'Describes possible actions when search throws an error'
+  }
+});
 import EmptyState from '@atlaskit/empty-state';
 import GenericErrorSVG from '../../../common/generic-error-svg';
+export var testIds = {
+  searchError: 'link-search-error'
+};
 
-var LinkSearchError = function LinkSearchError(props) {
-  return /*#__PURE__*/React.createElement(EmptyState, _extends({}, props, {
+var LinkSearchError = function LinkSearchError() {
+  var intl = useIntl();
+  return jsx(EmptyState, {
+    testId: testIds.searchError,
+    header: intl.formatMessage(messages.searchErrorHeader),
+    description: jsx(FormattedMessage, _extends({}, messages.searchErrorDescription, {
+      values: {
+        a: function a(label) {
+          return jsx(Button, {
+            appearance: "link",
+            spacing: "none",
+            href: CONTACT_SUPPORT_LINK,
+            target: "_blank",
+            rel: "noopener noreferrer"
+          }, label);
+        }
+      }
+    })),
     renderImage: function renderImage() {
-      return /*#__PURE__*/React.createElement(GenericErrorSVG, null);
+      return jsx(GenericErrorSVG, null);
     }
-  }));
+  });
 };
 
 export default LinkSearchError;

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

@@ -1,11 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["onSelect", "onMouseEnter", "onMouseLeave", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "role", "id", "hasSearchTerm"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 /** @jsx jsx */
+import { forwardRef, Fragment } from 'react';
 import { jsx } from '@emotion/react';
+import { defineMessages, FormattedMessage } from 'react-intl-next';
 import Spinner from '@atlaskit/spinner';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import LinkSearchListItem from '../list-item';
-import { listContainerStyles, spinnerContainerStyles, listStyles } from './styled';
-import { testIds } from '../';
-
-var LinkSearchList = function LinkSearchList(_ref) {
+import { listContainerStyles, spinnerContainerStyles, listStyles, listTitleStyles } from './styled';
+import LinkSearchNoResults, { testIds as noResultsTestIds } from './link-search-no-results';
+export var messages = defineMessages({
+  titleRecentlyViewed: {
+    id: 'fabric.linkPicker.listTitle.recentlyViewed',
+    defaultMessage: 'Recently Viewed',
+    description: 'Describes type of items shown in the list for screen-reader users'
+  },
+  titleResults: {
+    id: 'fabric.linkPicker.listTitle.results',
+    defaultMessage: 'Results',
+    description: 'Describes type of items shown in the list for screen-reader users'
+  },
+  searchLinkResults: {
+    id: 'fabric.linkPicker.hyperlink.searchLinkResults',
+    defaultMessage: '{count, plural, =0 {no results} one {# result} other {# results}} found',
+    description: 'Announce search results for screen-reader users.'
+  }
+});
+export var testIds = _objectSpread(_objectSpread({}, noResultsTestIds), {}, {
+  resultListTitle: 'link-picker-list-title',
+  searchResultItem: 'link-search-list-item',
+  searchResultList: 'link-search-list',
+  searchResultLoadingIndicator: 'link-picker.results-loading-indicator'
+});
+var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onSelect = _ref.onSelect,
       onMouseEnter = _ref.onMouseEnter,
       onMouseLeave = _ref.onMouseLeave,
@@ -16,17 +50,37 @@ var LinkSearchList = function LinkSearchList(_ref) {
       ariaControls = _ref.ariaControls,
       ariaLabelledBy = _ref.ariaLabelledBy,
       role = _ref.role,
-      id = _ref.id;
+      id = _ref.id,
+      hasSearchTerm = _ref.hasSearchTerm,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
   var itemsContent;
   var loadingContent;
+  var linkListTitle = hasSearchTerm ? messages.titleResults : messages.titleRecentlyViewed;
+
+  if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
+    return jsx(LinkSearchNoResults, null);
+  }
 
   if (items && items.length > 0) {
-    itemsContent = jsx("ul", {
+    itemsContent = jsx(Fragment, null, jsx("div", {
+      css: listTitleStyles,
+      id: testIds.resultListTitle,
+      "data-testid": testIds.resultListTitle
+    }, jsx(FormattedMessage, linkListTitle)), jsx(VisuallyHidden, {
+      id: "fabric.smartcard.linkpicker.suggested.results"
+    }, hasSearchTerm && jsx(FormattedMessage, _extends({}, messages.searchLinkResults, {
+      values: {
+        count: items.length
+      },
+      "aria-live": "polite",
+      "aria-atomic": "true"
+    }))), jsx("ul", {
       id: id,
       role: role,
       css: listStyles,
-      "aria-controls": ariaControls,
-      "aria-labelledby": ariaLabelledBy,
+      "aria-controls": "fabric.smartcard.linkpicker.suggested.results",
+      "aria-labelledby": testIds.resultListTitle,
       "data-testid": testIds.searchResultList
     }, items.map(function (item, index) {
       return jsx(LinkSearchListItem, {
@@ -40,7 +94,7 @@ var LinkSearchList = function LinkSearchList(_ref) {
         onSelect: onSelect,
         key: item.objectId
       });
-    }));
+    })));
   }
 
   if (isLoading) {
@@ -52,9 +106,9 @@ var LinkSearchList = function LinkSearchList(_ref) {
     }));
   }
 
-  return jsx("div", {
+  return jsx("div", _extends({
+    ref: ref,
     css: listContainerStyles
-  }, itemsContent, loadingContent);
-};
-
+  }, restProps), itemsContent, loadingContent);
+});
 export default LinkSearchList;

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

@@ -0,0 +1,37 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import EmptyState from '@atlaskit/empty-state';
+import { useIntl, defineMessages } from 'react-intl-next';
+import NoResultsSVG from './no-results-svg';
+import { emptyStateWrapperStyles } from './styled';
+export var messages = defineMessages({
+  noResults: {
+    id: 'fabric.linkPicker.search.noResults.heading',
+    defaultMessage: 'We couldn’t find anything matching your search.',
+    description: 'Heading message shown when a search has no results'
+  },
+  noResultsDescription: {
+    id: 'fabric.linkPicker.search.noResults.description',
+    defaultMessage: 'Try again with a different term.',
+    description: 'Describes possible action when a search returns no results'
+  }
+});
+export var testIds = {
+  emptyResultPage: 'link-search-no-results'
+};
+
+var NoResults = function NoResults() {
+  var intl = useIntl();
+  return jsx("div", {
+    css: emptyStateWrapperStyles
+  }, jsx(EmptyState, {
+    testId: testIds.emptyResultPage,
+    header: intl.formatMessage(messages.noResults),
+    description: intl.formatMessage(messages.noResultsDescription),
+    renderImage: function renderImage() {
+      return jsx(NoResultsSVG, null);
+    }
+  }));
+};
+
+export default NoResults;

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

@@ -0,0 +1,6 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+export var emptyStateWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & p {\n    margin: 0;\n  }\n"])));

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

@@ -1,8 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import { css } from '@emotion/react';
-export var listContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n"])));
-export var spinnerContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
-export var listStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  list-style: none;\n"])));
+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';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+var gridSize = getGridSize();
+export var listContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n  min-height: 80px;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n"])), gridSize * 2, gridSize * 2);
+export var spinnerContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n"])));
+export var listStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n"])));
+export var listTitleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-top: 0;\n  margin-bottom: ", "px;\n"])), typography.h100(), gridSize / 2);