@atlaskit/link-picker 1.8.4 → 1.8.5

package/dist/cjs/ui/link-picker/messages.js

@@ -53,11 +53,6 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Suggestions will appear below as you type into the field',
     description: 'Describes what the search field does 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.'
-  },
   linkAriaLabel: {
     id: 'fabric.linkPicker.hyperlink.linkAriaLabel',
     defaultMessage: 'Link label',
@@ -77,51 +72,6 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.linkPicker.time.ago',
     defaultMessage: 'ago',
     description: 'Some time ago'
-  },
-  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'
-  },
-  cancelButton: {
-    id: 'fabric.linkPicker.button.cancel',
-    defaultMessage: 'Cancel',
-    description: 'Button to cancel and dismiss the link picker'
-  },
-  insertButton: {
-    id: 'fabric.linkPicker.button.insert',
-    defaultMessage: 'Insert',
-    description: 'Button to insert searched or selected link'
-  },
-  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'
-  },
-  saveButton: {
-    id: 'fabric.linkPicker.button.save',
-    defaultMessage: 'Save',
-    description: 'Button to save edited link'
-  },
-  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'
   }
 });
 exports.messages = messages;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tabsWrapperStyles = exports.searchIconStyles = exports.rootContainerStylesForLoader = exports.rootContainerStyles = exports.listTitleStyles = void 0;
+exports.tabsWrapperStyles = exports.searchIconStyles = exports.rootContainerStylesForLoader = exports.rootContainerStyles = exports.formFooterMargin = exports.flexColumnStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,21 +15,26 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _theme = require("@atlaskit/theme");
-
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 var LINK_PICKER_WIDTH_IN_PX = 342;
-var LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
-var rootContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  padding: ", "px;\n  box-sizing: border-box;\n  line-height: initial;\n  min-height: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX, (0, _constants.gridSize)() * 2, LINK_PICKER_MIN_HEIGHT_IN_PX);
+var LINK_PICKER_MIN_HEIGHT_IN_PX = 220;
+var gridSize = (0, _constants.gridSize)();
+/**
+ * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
+ */
+
+var rootContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  padding: ", "px ", "px ", "px;\n  box-sizing: border-box;\n  line-height: initial;\n  min-height: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX, gridSize, gridSize * 2, gridSize * 2, LINK_PICKER_MIN_HEIGHT_IN_PX);
 exports.rootContainerStyles = rootContainerStyles;
 var rootContainerStylesForLoader = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), rootContainerStyles);
 exports.rootContainerStylesForLoader = rootContainerStylesForLoader;
-var searchIconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon', _colors.N500));
+var searchIconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), gridSize / 2, (0, _tokens.token)('color.icon', _colors.N500));
 exports.searchIconStyles = searchIconStyles;
-var listTitleStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), _theme.typography.h100(), (0, _constants.gridSize)() / 2);
-exports.listTitleStyles = listTitleStyles;
-var tabsWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: -", "px;\n  margin-right: -", "px;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)());
-exports.tabsWrapperStyles = tabsWrapperStyles;
+var tabsWrapperStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  margin-left: -", "px;\n  margin-right: -", "px;\n"])), gridSize * 1.5, gridSize, gridSize);
+exports.tabsWrapperStyles = tabsWrapperStyles;
+var flexColumnStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+exports.flexColumnStyles = flexColumnStyles;
+var formFooterMargin = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n"])), gridSize * 2);
+exports.formFooterMargin = formFooterMargin;

package/dist/cjs/ui/link-picker/text-input/styled.js

@@ -21,5 +21,5 @@ var _templateObject, _templateObject2;
 
 var clearTextButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  margin-right: ", "px;\n  color: ", ";\n  background: transparent;\n  border: none;\n  cursor: pointer;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon.subtle', _colors.N500));
 exports.clearTextButtonStyles = clearTextButtonStyles;
-var fieldStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n"])), (0, _constants.gridSize)() * 2);
+var fieldStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  & + & {\n    margin-top: ", "px;\n  }\n"])), (0, _constants.gridSize)() * 2);
 exports.fieldStyles = fieldStyles;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.8.4",
+	"version": "1.8.5",
 	"sideEffects": false
 }

package/dist/es2019/controllers/use-fix-height/index.js

@@ -0,0 +1,19 @@
+import { useLayoutEffect, useRef } from 'react';
+
+const useFixHeight = shouldFixHeight => {
+  const ref = useRef(null);
+  const currentHeight = useRef(null);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      currentHeight.current = ref.current.getBoundingClientRect().height;
+    }
+  });
+  return {
+    ref,
+    style: shouldFixHeight ? {
+      minHeight: currentHeight.current || 'auto'
+    } : undefined
+  };
+};
+
+export default useFixHeight;

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

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
+const 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 const testIds = {
+  insertButton: 'link-picker-insert-button',
+  cancelButton: 'link-picker-cancel-button'
+};
+
+const FormFooter = ({
+  isEditing,
+  onCancel,
+  ...restProps
+}) => {
+  const intl = useIntl();
+  const 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/es2019/ui/link-picker/form-footer/styled.js

@@ -0,0 +1,5 @@
+import { css } from '@emotion/react';
+export const formFooterStyles = css`
+  display: flex;
+  justify-content: flex-end;
+`;

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

@@ -5,8 +5,6 @@ import { Fragment, useCallback, useEffect, useLayoutEffect, useReducer, memo } f
 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';
@@ -17,14 +15,15 @@ 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 '../../common/utils/url';
-import { rootContainerStyles, searchIconStyles, listTitleStyles, tabsWrapperStyles } from './styled';
+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 const RECENT_SEARCH_LIST_SIZE = 5;
 export const CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 export const testIds = {
@@ -32,18 +31,13 @@ export const testIds = {
   urlInputField: 'link-url',
   textInputField: 'link-text',
   searchIcon: 'link-picker-search-icon',
-  insertButton: 'link-picker-insert-button',
-  cancelButton: 'link-picker-cancel-button',
+  ...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'
 };
 const initState = {
   url: '',
@@ -76,7 +70,7 @@ function LinkPicker({
   url: initUrl,
   displayText: initDisplayText
 }) {
-  var _queryState$query, _items$length, _errorFallback;
+  var _errorFallback;
 
   const {
     createAnalyticsEvent
@@ -104,6 +98,7 @@ function LinkPicker({
     retry,
     errorFallback
   } = usePlugins(queryState, activeTab, plugins);
+  const fixListHeightProps = useFixHeight(isLoading);
   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;
@@ -233,9 +228,6 @@ function LinkPicker({
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
   const linkPlaceHolder = isActivePlugin ? messages.placeholder : messages.linkPlaceholder;
-  const 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;
-  const insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
-  const noResults = (items === null || items === void 0 ? void 0 : items.length) === 0 && !error;
   const screenReaderDescriptionId = 'search-recent-links-field-description';
   const linkSearchListId = 'link-picker-search-list';
   const ariaActiveDescendant = selectedIndex > -1 ? `link-search-list-item-${selectedIndex}` : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
@@ -293,7 +285,7 @@ function LinkPicker({
     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,
@@ -307,59 +299,25 @@ function LinkPicker({
   }, jsx(TabList, null, tabs.map(tab => jsx(Tab, {
     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",
+  }, tab.tabTitle))))), 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: label => 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 withLinkPickerAnalyticsContext( /*#__PURE__*/memo(LinkPicker));

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

@@ -1,10 +1,46 @@
 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 const CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
+export const 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 const testIds = {
+  searchError: 'link-search-error'
+};
 
-const LinkSearchError = props => /*#__PURE__*/React.createElement(EmptyState, _extends({}, props, {
-  renderImage: () => /*#__PURE__*/React.createElement(GenericErrorSVG, null)
-}));
+const LinkSearchError = () => {
+  const intl = useIntl();
+  return jsx(EmptyState, {
+    testId: testIds.searchError,
+    header: intl.formatMessage(messages.searchErrorHeader),
+    description: jsx(FormattedMessage, _extends({}, messages.searchErrorDescription, {
+      values: {
+        a: label => jsx(Button, {
+          appearance: "link",
+          spacing: "none",
+          href: CONTACT_SUPPORT_LINK,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, label)
+      }
+    })),
+    renderImage: () => jsx(GenericErrorSVG, null)
+  });
+};
 
 export default LinkSearchError;

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

@@ -1,11 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
+
 /** @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 '../';
-
-const LinkSearchList = ({
+import { listContainerStyles, spinnerContainerStyles, listStyles, listTitleStyles } from './styled';
+import LinkSearchNoResults, { testIds as noResultsTestIds } from './link-search-no-results';
+export const 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 const testIds = { ...noResultsTestIds,
+  resultListTitle: 'link-picker-list-title',
+  searchResultItem: 'link-search-list-item',
+  searchResultList: 'link-search-list',
+  searchResultLoadingIndicator: 'link-picker.results-loading-indicator'
+};
+const LinkSearchList = /*#__PURE__*/forwardRef(({
   onSelect,
   onMouseEnter,
   onMouseLeave,
@@ -16,18 +43,37 @@ const LinkSearchList = ({
   ariaControls,
   ariaLabelledBy,
   role,
-  id
-}) => {
+  id,
+  hasSearchTerm,
+  ...restProps
+}, ref) => {
   let itemsContent;
   let loadingContent;
+  const 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((item, index) => jsx(LinkSearchListItem, {
       id: `${testIds.searchResultItem}-${index}`,
@@ -39,7 +85,7 @@ const LinkSearchList = ({
       onMouseLeave: onMouseLeave,
       onSelect: onSelect,
       key: item.objectId
-    })));
+    }))));
   }
 
   if (isLoading) {
@@ -51,9 +97,9 @@ const LinkSearchList = ({
     }));
   }
 
-  return jsx("div", {
+  return jsx("div", _extends({
+    ref: ref,
     css: listContainerStyles
-  }, itemsContent, loadingContent);
-};
-
+  }, restProps), itemsContent, loadingContent);
+});
 export default LinkSearchList;

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

@@ -0,0 +1,35 @@
+/** @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 const 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 const testIds = {
+  emptyResultPage: 'link-search-no-results'
+};
+
+const NoResults = () => {
+  const intl = useIntl();
+  return jsx("div", {
+    css: emptyStateWrapperStyles
+  }, jsx(EmptyState, {
+    testId: testIds.emptyResultPage,
+    header: intl.formatMessage(messages.noResults),
+    description: intl.formatMessage(messages.noResultsDescription),
+    renderImage: () => jsx(NoResultsSVG, null)
+  }));
+};
+
+export default NoResults;

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

@@ -0,0 +1,6 @@
+import { css } from '@emotion/react';
+export const emptyStateWrapperStyles = css`
+  & p {
+    margin: 0;
+  }
+`;

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

@@ -1,13 +1,34 @@
-import { css } from '@emotion/react';
+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';
+const gridSize = getGridSize();
 export const listContainerStyles = css`
   padding-top: 0;
+  min-height: 80px;
+  margin-top: ${gridSize * 2}px;
+  margin-bottom: ${gridSize * 2}px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 `;
 export const spinnerContainerStyles = css`
   text-align: center;
   min-height: 80px;
-  margin-top: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
 `;
 export const listStyles = css`
   padding: 0;
+  margin: 0;
   list-style: none;
+`;
+export const listTitleStyles = css`
+  ${typography.h100()}
+  text-transform: uppercase;
+  margin-top: 0;
+  margin-bottom: ${gridSize / 2}px;
 `;