@atlaskit/link-picker 0.0.2 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,145 @@
 # @atlaskit/link-picker
 
+## 0.7.0
+
+### Minor Changes
+
+- [`9cabbe5e920`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9cabbe5e920) - Convert to @atlaskit scope
+
+## 0.6.2
+
+### Patch Changes
+
+- [`3fb9dbd9f4e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fb9dbd9f4e) - [ux] Add buttons at the bottom of the form
+
+## 0.6.1
+
+### Patch Changes
+
+- [`93a77354b58`](https://bitbucket.org/atlassian/atlassian-frontend/commits/93a77354b58) - Updated vr snapshots
+
+## 0.6.0
+
+### Minor Changes
+
+- [`91f2d091cfd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/91f2d091cfd) - Change link picker props and onSubmit API to better reflect intended usage and make breaking changes less likely.
+
+## 0.5.3
+
+### Patch Changes
+
+- [`3ef09836c04`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3ef09836c04) - [ux] Validates links within search text are not inserted
+
+## 0.5.2
+
+### Patch Changes
+
+- [`c1f3d82b994`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c1f3d82b994) - Update to use the new V3 recents API in the Atlassian plugin
+
+## 0.5.1
+
+### Patch Changes
+
+- [`d90f1f42589`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d90f1f42589) - [ux] Shows subtitle with recently viewed if there’s no search text and results otherwise
+
+## 0.5.0
+
+### Minor Changes
+
+- [`7abf8824fec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7abf8824fec) - Migrate link picker atlassian plugin from picker package.
+
+## 0.4.0
+
+### Minor Changes
+
+- [`c926a95160b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c926a95160b) - Removes onEscape prop from the link picker.
+
+## 0.3.2
+
+### Patch Changes
+
+- [`08195fc6e43`](https://bitbucket.org/atlassian/atlassian-frontend/commits/08195fc6e43) - [ux] Add field validation error message to link input field
+
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.3.0
+
+### Minor Changes
+
+- [`3b3a7800978`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3b3a7800978) - Export picker state and list item data types from picker package.
+
+## 0.2.4
+
+### Patch Changes
+
+- [`6d1dd7c5833`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6d1dd7c5833) - Increase test coverage
+
+## 0.2.3
+
+### Patch Changes
+
+- [`6f3a1f588e1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6f3a1f588e1) - Rewrites LinkSearchListItem as FC & Adds new Active state to support arrow navigation and Selected style
+
+## 0.2.2
+
+### Patch Changes
+
+- [`9598e13788a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9598e13788a) - [ux] Update token usage for better contrast
+
+## 0.2.1
+
+### Patch Changes
+
+- [`7fa34f27a1f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7fa34f27a1f) - Displays a search icon inside link-picker search input when there is an active Plugin
+
+## 0.2.0
+
+### Minor Changes
+
+- [`1cb59c97d35`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1cb59c97d35) - Adds AtlassianLinkPicker plugin and changes LinkPicker API to use plugins
+
+## 0.1.1
+
+### Patch Changes
+
+- [`df6e3bdd55f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/df6e3bdd55f) - EDM-3088/Rewrite PanelTextInput as functional component and take advante of Atlaskit Textfield out-of-the-box features
+
+## 0.1.0
+
+### Minor Changes
+
+- [`cb5997ed7af`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb5997ed7af) - [ux] EDM-2977/change UI for link and title input fields
+
+## 0.0.6
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- Updated dependencies
+
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.0.3
+
+### Patch Changes
+
+- [`7f49f72e074`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f49f72e074) - copy existing editor component into @atlassian/link-picker
+- Updated dependencies
+
 ## 0.0.2
 
 ### Patch Changes

package/README.md

@@ -1,9 +1,31 @@
-# LinkPicker
+# Link Picker @atlaskit/link-picker
 
-Standalone link picker
+> ⚠️ Currently under active development, use at your own risk ⚠️
 
-## Usage
+The standalone link picker component allows users to insert relevant links without having to leave their current context. 
 
-`import { LinkPicker } from '@atlaskit/link-picker';`
+### Usage
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/linking-platform/link-picker).
+```
+import { LinkPicker } from '@atlaskit/link-picker';
+
+const onSubmit = (href, title, displayText, inputMethod) => {...}
+
+<LinkPicker onSubmit={onSubmit} />
+
+```
+
+### Props
+
+```
+{
+  onSubmit?: (
+    href: string,
+    title: string | undefined,
+    displayText: string | undefined,
+    inputMethod: LinkInputType,
+  ) => void;
+  plugins?: [LinkPickerPlugin];
+  displayUrl?: string;
+}
+```

package/dist/cjs/browser.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.browser = void 0;
+var result = {
+  mac: false,
+  ie: false,
+  ie_version: 0,
+  gecko: false,
+  chrome: false,
+  chrome_version: 0,
+  android: false,
+  ios: false,
+  webkit: false,
+  safari: false,
+  supportsIntersectionObserver: false,
+  supportsResizeObserver: false
+};
+exports.browser = result;
+
+if (typeof navigator !== 'undefined') {
+  var ieEdge = /Edge\/(\d+)/.exec(navigator.userAgent);
+  var ieUpTo10 = /MSIE \d/.test(navigator.userAgent);
+  var ie11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent);
+  result.mac = /Mac/.test(navigator.platform);
+  var ie = result.ie = !!(ieUpTo10 || ie11up || ieEdge);
+  result.ie_version = ieUpTo10 ? document.documentMode || 6 : ie11up ? +ie11up[1] : ieEdge ? +ieEdge[1] : null;
+  result.gecko = !ie && /gecko\/\d/i.test(navigator.userAgent);
+  result.chrome = !ie && /Chrome\//.test(navigator.userAgent);
+  result.chrome_version = parseInt((navigator.userAgent.match(/Chrome\/(\d+)/) || [])[1], 10);
+  result.android = /Android \d/.test(navigator.userAgent);
+  result.ios = !ie && /AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent);
+  result.webkit = !ie && !!document.documentElement && 'WebkitAppearance' in document.documentElement.style;
+  result.safari = Boolean(navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && navigator.userAgent.indexOf('CriOS') === -1 && navigator.userAgent.indexOf('FxiOS') === -1);
+  result.supportsIntersectionObserver = typeof window !== 'undefined' && 'IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype;
+  result.supportsResizeObserver = typeof window !== 'undefined' && 'ResizeObserver' in window && 'ResizeObserverEntry' in window;
+}

package/dist/cjs/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "LinkPicker", {
   enumerable: true,
   get: function get() {
-    return _linkPicker.LinkPicker;
+    return _linkPicker.LinkPickerWithIntl;
   }
 });
 
-var _linkPicker = require("./link-picker");
+var _linkPicker = require("./ui/link-picker");

package/dist/cjs/messages.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+
+var _reactIntlNext = require("react-intl-next");
+
+var messages = (0, _reactIntlNext.defineMessages)({
+  placeholder: {
+    id: 'fabric.linkPicker.hyperlinkToolbarPlaceholder',
+    defaultMessage: 'Search or paste a link',
+    description: 'Search or paste a link'
+  },
+  linkPlaceholder: {
+    id: 'fabric.linkPicker.linkPlaceholder',
+    defaultMessage: 'Paste link',
+    description: 'Create a new link by pasting a URL.'
+  },
+  linkTextPlaceholder: {
+    id: 'fabric.linkPicker.linkTextPlaceholder',
+    defaultMessage: 'Add a description',
+    description: 'Text to display'
+  },
+  linkLabel: {
+    id: 'fabric.linkPicker.linkAddress',
+    defaultMessage: 'Link',
+    description: 'Link Label'
+  },
+  linkInvalid: {
+    id: 'fabric.linkPicker.linkInvalid',
+    defaultMessage: 'Enter a valid URL.',
+    description: 'Input Error the URL is invalid'
+  },
+  linkTextLabel: {
+    id: 'fabric.linkPicker.displayText',
+    defaultMessage: 'Link text',
+    description: 'Link text label'
+  },
+  clearText: {
+    id: 'fabric.linkPicker.clearLinkText',
+    defaultMessage: 'Clear text',
+    description: 'Clears text on the link toolbar'
+  },
+  clearLink: {
+    id: 'fabric.linkPicker.clearLink',
+    defaultMessage: 'Clear link',
+    description: 'Clears link in the link toolbar'
+  },
+  searchLinkAriaDescription: {
+    id: 'fabric.linkPicker.hyperlink.searchLinkAriaDescription',
+    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',
+    description: 'aria label for a link'
+  },
+  timeUpdated: {
+    id: 'fabric.linkPicker.time.updated',
+    defaultMessage: 'Updated',
+    description: 'Time last updated'
+  },
+  timeViewed: {
+    id: 'fabric.linkPicker.time.viewed',
+    defaultMessage: 'Viewed',
+    description: 'Time last viewed'
+  },
+  timeAgo: {
+    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.cancel.button',
+    defaultMessage: 'Cancel',
+    description: 'Button to cancel and dismiss the link picker'
+  },
+  insertButton: {
+    id: 'fabric.linkPicker.cancel.insert',
+    defaultMessage: 'Insert',
+    description: 'Button to insert searched or selected link'
+  }
+});
+exports.messages = messages;

package/dist/cjs/styles.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.recentListStyles = exports.SearchIconWrapper = exports.ListTitleStyles = exports.ListItemWrapper = exports.ListItemName = exports.ListItemContext = exports.ItemNameWrapper = exports.ItemIconWrapper = exports.ImgStyles = exports.FieldWrapper = exports.Container = exports.ClearText = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _tokens = require("@atlaskit/tokens");
+
+var _core = require("@emotion/core");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _utils = require("./utils");
+
+var _theme = require("@atlaskit/theme");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+var LINK_PICKER_WIDTH_IN_PX = 342;
+var recentListStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  background: ", ";\n"])), LINK_PICKER_WIDTH_IN_PX, (0, _tokens.token)('elevation.surface.overlay', _colors.N0));
+exports.recentListStyles = recentListStyles;
+
+var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n  width: 100%;\n  overflow: hidden;\n  line-height: initial;\n  box-sizing: border-box;\n"])), (0, _constants.gridSize)() * 2);
+
+exports.Container = Container;
+
+var ClearText = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (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.ClearText = ClearText;
+
+var FieldWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n"])), (0, _constants.gridSize)() * 2);
+
+exports.FieldWrapper = FieldWrapper;
+
+var SearchIconWrapper = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon', _colors.N500));
+
+exports.SearchIconWrapper = SearchIconWrapper;
+var ListTitleStyles = (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), _theme.typography.h100(), (0, _constants.gridSize)() / 2);
+exports.ListTitleStyles = ListTitleStyles;
+
+var ListItemWrapper = _styledComponents.default.li(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", "px ", "px;\n  margin: 0 -", "px;\n  cursor: pointer;\n  background-color: ", ";\n  box-shadow: inset 2px 0px 0px\n    ", ";\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, function (props) {
+  switch (true) {
+    case props.selected:
+      return (0, _tokens.token)('color.background.selected', _colors.B50);
+
+    case props.active:
+      return (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20);
+
+    default:
+      return 'transparent';
+  }
+}, function (props) {
+  switch (true) {
+    case props.active:
+    case props.selected:
+      return (0, _tokens.token)('color.border.selected', _colors.B400);
+
+    default:
+      return 'transparent';
+  }
+});
+
+exports.ListItemWrapper = ListItemWrapper;
+
+var ItemNameWrapper = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n"])));
+
+exports.ItemNameWrapper = ItemNameWrapper;
+
+var ListItemName = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), (0, _tokens.token)('color.text', _colors.N800));
+
+exports.ListItemName = ListItemName;
+
+var ListItemContext = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n"])), (0, _tokens.token)('color.text', _colors.N300), (0, _utils.relativeFontSizeToBase16)((0, _theme.fontSizeSmall)()), (0, _theme.fontSize)());
+
+exports.ListItemContext = ListItemContext;
+
+var ItemIconWrapper = _styledComponents.default.span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n  margin-top: 3px;\n  margin-right: 12px;\n"])), (0, _constants.gridSize)() * 2);
+
+exports.ItemIconWrapper = ItemIconWrapper;
+var ImgStyles = (0, _core.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: ", "px;\n"])), (0, _constants.gridSize)() * 2);
+exports.ImgStyles = ImgStyles;

package/dist/cjs/transformTimeStamp.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformTimeStamp = void 0;
+
+var _formatDistance = _interopRequireDefault(require("date-fns/formatDistance"));
+
+var _differenceInCalendarDays = _interopRequireDefault(require("date-fns/differenceInCalendarDays"));
+
+var _format = _interopRequireDefault(require("date-fns/format"));
+
+var _messages = require("./messages");
+
+var renderAbsoluteOrRelativeDate = function renderAbsoluteOrRelativeDate(timeStamp, pageAction, intl) {
+  var pageActionText = '';
+
+  switch (pageAction) {
+    case 'updated':
+      pageActionText = intl.formatMessage(_messages.messages.timeUpdated);
+      break;
+
+    case 'viewed':
+      pageActionText = intl.formatMessage(_messages.messages.timeViewed);
+      break;
+  }
+
+  if ((0, _differenceInCalendarDays.default)(timeStamp, Date.now()) < -7) {
+    return {
+      pageAction: pageActionText,
+      dateString: (0, _format.default)(timeStamp, 'MMMM dd, yyyy')
+    };
+  }
+
+  return {
+    pageAction: pageActionText,
+    dateString: (0, _formatDistance.default)(timeStamp, Date.now()),
+    timeSince: intl.formatMessage(_messages.messages.timeAgo)
+  };
+};
+
+var transformTimeStamp = function transformTimeStamp(intl, lastViewedDate, lastUpdatedDate) {
+  if (lastViewedDate) {
+    return renderAbsoluteOrRelativeDate(lastViewedDate, 'viewed', intl);
+  }
+
+  if (lastUpdatedDate) {
+    return renderAbsoluteOrRelativeDate(lastUpdatedDate, 'updated', intl);
+  }
+};
+
+exports.transformTimeStamp = transformTimeStamp;

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/LinkSearchList.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.List = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _LinkSearchListItem = _interopRequireDefault(require("./LinkSearchListItem"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var ListContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0;\n"])));
+
+var SpinnerContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
+
+var List = _styledComponents.default.ul(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  list-style: none;\n"])));
+
+exports.List = List;
+
+var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(LinkSearchList, _PureComponent);
+
+  var _super = _createSuper(LinkSearchList);
+
+  function LinkSearchList() {
+    (0, _classCallCheck2.default)(this, LinkSearchList);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(LinkSearchList, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          onSelect = _this$props.onSelect,
+          onMouseEnter = _this$props.onMouseEnter,
+          onMouseLeave = _this$props.onMouseLeave,
+          items = _this$props.items,
+          activeIndex = _this$props.activeIndex,
+          selectedIndex = _this$props.selectedIndex,
+          isLoading = _this$props.isLoading,
+          ariaControls = _this$props.ariaControls,
+          ariaLabelledBy = _this$props.ariaLabelledBy,
+          role = _this$props.role,
+          id = _this$props.id;
+      var itemsContent;
+      var loadingContent;
+
+      if (items && items.length > 0) {
+        itemsContent = /*#__PURE__*/_react.default.createElement(List, {
+          id: id,
+          role: role,
+          "aria-controls": ariaControls,
+          "aria-labelledby": ariaLabelledBy
+        }, items.map(function (item, index) {
+          return /*#__PURE__*/_react.default.createElement(_LinkSearchListItem.default, {
+            id: "link-search-list-item-".concat(index),
+            role: role && 'option',
+            item: item,
+            selected: selectedIndex === index,
+            active: activeIndex === index,
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave,
+            onSelect: onSelect,
+            key: item.objectId
+          });
+        }));
+      }
+
+      if (isLoading) {
+        loadingContent = /*#__PURE__*/_react.default.createElement(SpinnerContainer, null, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+          testId: "link-picker.results-loading-indicator",
+          size: "medium"
+        }));
+      }
+
+      return /*#__PURE__*/_react.default.createElement(ListContainer, null, itemsContent, loadingContent);
+    }
+  }]);
+  return LinkSearchList;
+}(_react.PureComponent);
+
+exports.default = LinkSearchList;