@atlaskit/link-picker 1.1.1 → 1.1.4

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

@@ -0,0 +1,591 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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; }
+
+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; } }
+
+/** @jsx jsx */
+import React, { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { messages } from '../messages';
+import PanelTextInput from './text-input';
+import LinkSearchList from './link-search-list';
+import { normalizeUrl, isSafeUrl } from '../url';
+import { recentListStyles, containerStyles, searchIconStyles, listTitleStyles } from './styled';
+import { browser } from '../browser';
+import { transformTimeStamp } from '../transformTimeStamp';
+import Announcer from './announcer';
+import Button, { ButtonGroup } from '@atlaskit/button';
+import { FormFooter } from '@atlaskit/form';
+import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
+import VisuallyHidden from '@atlaskit/visually-hidden';
+import LinkSearchNoResults from './link-search-no-results';
+export var RECENT_SEARCH_LIST_SIZE = 5;
+
+var LinkPicker = /*#__PURE__*/function (_PureComponent) {
+  _inherits(LinkPicker, _PureComponent);
+
+  var _super = _createSuper(LinkPicker);
+
+  function LinkPicker(props) {
+    var _this;
+
+    _classCallCheck(this, LinkPicker);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "wrapperRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "queryVersion", 0);
+
+    _defineProperty(_assertThisInitialized(_this), "updateInput", /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(input) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!(input.length && isSafeUrl(input))) {
+                  _context.next = 2;
+                  break;
+                }
+
+                return _context.abrupt("return", _this.setState({
+                  url: input,
+                  selectedIndex: -1,
+                  items: [],
+                  isLoading: false,
+                  invalidUrl: null
+                }));
+
+              case 2:
+                return _context.abrupt("return", _this.setState({
+                  url: input,
+                  // Unset selection on any input change
+                  selectedIndex: -1,
+                  invalidUrl: null
+                }, function () {
+                  _this.updateResults();
+                }));
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+
+    _defineProperty(_assertThisInitialized(_this), "createClearHandler", function (field) {
+      return function () {
+        switch (field) {
+          case 'url':
+            {
+              _this.updateInput('');
+
+              break;
+            }
+
+          case 'displayText':
+            {
+              _this.setState(_defineProperty({}, field, ''));
+            }
+        }
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getScreenReaderText", function () {
+      var intl = _this.props.intl;
+      var _this$state = _this.state,
+          items = _this$state.items,
+          selectedIndex = _this$state.selectedIndex;
+
+      if (items.length && selectedIndex > -1) {
+        var _items$selectedIndex = items[selectedIndex],
+            name = _items$selectedIndex.name,
+            container = _items$selectedIndex.container,
+            lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
+            lastViewedDate = _items$selectedIndex.lastViewedDate;
+        var date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
+        var formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
+        return [name, container, formattedDate].filter(Boolean).join(', ');
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isUrlPopulatedWithSelectedItem", function () {
+      /**
+       * When we use ArrowKey to navigate through result items,
+       * the URL field will be populated with the content of
+       * selected item.
+       * This function will check if the URL field is populated
+       * with selected item.
+       * It can be useful to detect whether we want to insert a
+       * smartlink or a hyperlink with customized title
+       */
+      var _this$state2 = _this.state,
+          items = _this$state2.items,
+          selectedIndex = _this$state2.selectedIndex,
+          url = _this$state2.url;
+      var selectedItem = items[selectedIndex];
+
+      if (selectedItem && selectedItem.url === url) {
+        return true;
+      }
+
+      return false;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSelected", function (objectId) {
+      var items = _this.state.items;
+      var selectedItem = items.find(function (item) {
+        return item.objectId === objectId;
+      });
+
+      if (selectedItem) {
+        var url = selectedItem.url,
+            name = selectedItem.name;
+
+        _this.handleInsert(url, name, 'typeAhead');
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleInsert", function (url, title, inputType) {
+      var onSubmit = _this.props.onSubmit;
+      var _this$state3 = _this.state,
+          rawUrl = _this$state3.url,
+          displayText = _this$state3.displayText;
+
+      if (onSubmit) {
+        onSubmit(_objectSpread({
+          url: url,
+          displayText: displayText || null,
+          title: title || null,
+          meta: {
+            inputMethod: inputType
+          }
+        }, inputType === 'manual' ? {
+          rawUrl: rawUrl
+        } : {}));
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseEnterResultItem", function (objectId) {
+      var items = _this.state.items;
+      var index = findIndex(items, function (item) {
+        return item.objectId === objectId;
+      });
+
+      _this.setState({
+        activeIndex: index
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMouseLeaveResultItem", function (objectId) {
+      var _this$state4 = _this.state,
+          items = _this$state4.items,
+          activeIndex = _this$state4.activeIndex;
+      var index = findIndex(items, function (item) {
+        return item.objectId === objectId;
+      }); // This is to avoid updating index that was set by other mouseenter event
+
+      if (activeIndex === index) {
+        _this.setState({
+          activeIndex: -1
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function () {
+      var _this$state5 = _this.state,
+          url = _this$state5.url,
+          selectedIndex = _this$state5.selectedIndex,
+          items = _this$state5.items;
+      var selectedItem = items[selectedIndex];
+
+      if (_this.isUrlPopulatedWithSelectedItem()) {
+        _this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
+      } else if (url.length > 0) {
+        var normalized = normalizeUrl(url);
+
+        if (normalized) {
+          _this.handleInsert(normalized, null, 'manual');
+        } else {
+          var intl = _this.props.intl;
+          var linkInvalid = intl.formatMessage(messages.linkInvalid);
+
+          _this.setState({
+            invalidUrl: linkInvalid
+          });
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
+      var _this$state6 = _this.state,
+          items = _this$state6.items,
+          activeIndex = _this$state6.activeIndex;
+      var keyCode = event.keyCode;
+      var KEY_CODE_ARROW_DOWN = 40;
+      var KEY_CODE_ARROW_UP = 38;
+
+      if (!items || !items.length) {
+        return;
+      }
+
+      var updatedIndex = activeIndex;
+
+      switch (keyCode) {
+        case KEY_CODE_ARROW_DOWN:
+          // down
+          event.preventDefault();
+          updatedIndex = (activeIndex + 1) % items.length;
+          break;
+
+        case KEY_CODE_ARROW_UP:
+          // up
+          event.preventDefault();
+          updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
+          break;
+      }
+
+      if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && items[updatedIndex]) {
+        _this.setState({
+          activeIndex: updatedIndex,
+          selectedIndex: updatedIndex,
+          url: items[updatedIndex].url,
+          invalidUrl: null
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleCancel", function () {
+      var onCancel = _this.props.onCancel;
+
+      if (onCancel) {
+        onCancel();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updateTextInput", function (displayText) {
+      _this.setState({
+        displayText: displayText
+      });
+    });
+
+    _this.state = {
+      selectedIndex: -1,
+      activeIndex: -1,
+      isLoading: false,
+      isEditing: !!props.url,
+      url: normalizeUrl(props.url) || '',
+      displayText: props.displayText || '',
+      items: [],
+      invalidUrl: null
+    };
+    /* Cache functions */
+
+    _this.handleClearUrl = _this.createClearHandler('url');
+    _this.handleClearDisplayText = _this.createClearHandler('displayText');
+    return _this;
+  }
+
+  _createClass(LinkPicker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.loadInitialLinkSearchResult();
+    }
+  }, {
+    key: "loadInitialLinkSearchResult",
+    value: function loadInitialLinkSearchResult() {
+      var url = this.state.url;
+
+      if (!url) {
+        this.updateResults();
+      }
+    }
+  }, {
+    key: "getActivePlugin",
+    value: function getActivePlugin() {
+      if (!this.props.plugins || this.props.plugins.length === 0) {
+        return null;
+      }
+
+      return this.props.plugins[0];
+    }
+    /**
+     * Interface between link picker and plugins to update results
+     */
+
+  }, {
+    key: "updateResults",
+    value: function () {
+      var _updateResults = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var queryVersion, activePlugin, updates, done, value, _result$done, result;
+
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                queryVersion = ++this.queryVersion;
+                activePlugin = this.getActivePlugin();
+
+                if (activePlugin) {
+                  _context2.next = 4;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 4:
+                updates = activePlugin.resolve({
+                  query: this.state.url
+                });
+                this.setState({
+                  isLoading: true,
+                  items: []
+                });
+                _context2.prev = 6;
+
+              case 7:
+                if (!(queryVersion === this.queryVersion)) {
+                  _context2.next = 29;
+                  break;
+                }
+
+                done = false;
+                value = void 0;
+
+                if (!(updates instanceof Promise)) {
+                  _context2.next = 17;
+                  break;
+                }
+
+                done = true;
+                _context2.next = 14;
+                return updates;
+
+              case 14:
+                value = _context2.sent;
+                _context2.next = 22;
+                break;
+
+              case 17:
+                _context2.next = 19;
+                return updates.next();
+
+              case 19:
+                result = _context2.sent;
+                done = (_result$done = result.done) !== null && _result$done !== void 0 ? _result$done : false;
+                value = result.value;
+
+              case 22:
+                if (!(queryVersion !== this.queryVersion)) {
+                  _context2.next = 24;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 24:
+                this.setState({
+                  items: limit(value.data),
+                  isLoading: !done
+                });
+
+                if (!done) {
+                  _context2.next = 27;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 27:
+                _context2.next = 7;
+                break;
+
+              case 29:
+                _context2.next = 34;
+                break;
+
+              case 31:
+                _context2.prev = 31;
+                _context2.t0 = _context2["catch"](6);
+                this.setState({
+                  isLoading: false
+                });
+
+              case 34:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this, [[6, 31]]);
+      }));
+
+      function updateResults() {
+        return _updateResults.apply(this, arguments);
+      }
+
+      return updateResults;
+    }()
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state7 = this.state,
+          items = _this$state7.items,
+          isLoading = _this$state7.isLoading,
+          isEditing = _this$state7.isEditing,
+          activeIndex = _this$state7.activeIndex,
+          selectedIndex = _this$state7.selectedIndex,
+          url = _this$state7.url,
+          displayText = _this$state7.displayText;
+      var formatMessage = this.props.intl.formatMessage;
+      var activePlugin = this.getActivePlugin();
+      var linkPlaceHolder = formatMessage(activePlugin ? messages.placeholder : messages.linkPlaceholder);
+      var linkLabel = formatMessage(messages.linkLabel);
+      var linkTextLabel = formatMessage(messages.linkTextLabel);
+      var linkTextPlaceHolder = formatMessage(messages.linkTextPlaceholder);
+      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
+      // as the Aria design pattern for combobox does not work in this case
+      // for details: https://a11y-internal.atlassian.net/browse/AK-740
+
+      var screenReaderText = browser.safari && this.getScreenReaderText();
+      var searchIcon = activePlugin && jsx("span", {
+        css: searchIconStyles,
+        "data-testid": "link-picker-search-icon"
+      }, jsx(EditorSearchIcon, {
+        size: "medium",
+        label: ''
+      }));
+      var noResults = activePlugin && !isLoading && !items.length && !isSafeUrl(url);
+      return jsx("div", {
+        "data-testid": "link-picker",
+        className: "recent-list",
+        css: recentListStyles
+      }, jsx("div", {
+        css: containerStyles,
+        ref: this.wrapperRef
+      }, screenReaderText && jsx(Announcer, {
+        ariaLive: "assertive",
+        text: screenReaderText,
+        ariaRelevant: "additions",
+        delay: 250
+      }), jsx(VisuallyHidden, null, jsx("span", {
+        "aria-hidden": "true",
+        id: screenReaderDescriptionId
+      }, formatMessage(messages.searchLinkAriaDescription))), jsx(PanelTextInput, {
+        name: "link",
+        testId: "link-url",
+        role: "combobox",
+        label: linkLabel,
+        placeholder: linkPlaceHolder,
+        value: url,
+        autoFocus: true,
+        autoComplete: "off",
+        elemBeforeInput: searchIcon,
+        onSubmit: this.handleSubmit,
+        onChange: this.updateInput,
+        onKeyDown: this.handleKeyDown,
+        onClear: this.handleClearUrl,
+        error: this.state.invalidUrl,
+        clearLabel: formatMessage(messages.clearLink),
+        "aria-controls": linkSearchListId,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": ariaActiveDescendant,
+        "aria-describedby": screenReaderDescriptionId,
+        "aria-expanded": true
+      }), jsx(PanelTextInput, {
+        name: "link-text",
+        testId: "link-text",
+        autoComplete: "off",
+        label: linkTextLabel,
+        placeholder: linkTextPlaceHolder,
+        "aria-label": formatMessage(messages.linkAriaLabel),
+        value: displayText,
+        onSubmit: this.handleSubmit,
+        onKeyDown: this.handleKeyDown,
+        onChange: this.updateTextInput,
+        onClear: this.handleClearDisplayText,
+        clearLabel: formatMessage(messages.clearText)
+      }), !!items.length && jsx("div", {
+        css: listTitleStyles,
+        id: "link-picker-list-title",
+        "data-testid": "link-picker-list-title"
+      }, formatMessage(this.state.url ? messages.titleResults : messages.titleRecentlyViewed)), jsx(VisuallyHidden, null, jsx("span", {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        id: "fabric.smartcard.linkpicker.suggested.results"
+      }, url && formatMessage(messages.searchLinkResults, {
+        count: items.length
+      }))), jsx(LinkSearchList, {
+        ariaLabelledBy: "link-picker-list-title",
+        ariaControls: "fabric.smartcard.linkpicker.suggested.results",
+        id: linkSearchListId,
+        role: "listbox",
+        items: items,
+        isLoading: isLoading,
+        selectedIndex: selectedIndex,
+        activeIndex: activeIndex,
+        onSelect: this.handleSelected,
+        onMouseEnter: this.handleMouseEnterResultItem,
+        onMouseLeave: this.handleMouseLeaveResultItem
+      }), noResults && jsx(LinkSearchNoResults, {
+        testId: "link-search-no-results",
+        header: formatMessage(messages.noResults),
+        description: formatMessage(messages.noResultsDescription)
+      }), jsx(FormFooter, {
+        align: "end"
+      }, jsx(ButtonGroup, null, jsx(Button, {
+        appearance: "default",
+        onClick: this.handleCancel,
+        testId: "link-picker-cancel-button"
+      }, formatMessage(messages.cancelButton)), jsx(Button, {
+        type: "submit",
+        appearance: "primary",
+        onClick: this.handleSubmit,
+        testId: "link-picker-insert-button"
+      }, formatMessage(isEditing ? messages.saveButton : messages.insertButton))))));
+    }
+  }]);
+
+  return LinkPicker;
+}(PureComponent);
+
+function findIndex(array, predicate) {
+  var index = -1;
+  array.some(function (item, i) {
+    if (predicate(item)) {
+      index = i;
+      return true;
+    }
+
+    return false;
+  });
+  return index;
+}
+
+function limit(items) {
+  return items.slice(0, RECENT_SEARCH_LIST_SIZE);
+}
+
+export var LinkPickerWithIntl = injectIntl(LinkPicker);

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

@@ -0,0 +1,88 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+
+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; } }
+
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+import LinkSearchListItem from '../list-item';
+import { listContainerStyles, spinnerContainerStyles, listStyles } from './styled';
+
+var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
+  _inherits(LinkSearchList, _PureComponent);
+
+  var _super = _createSuper(LinkSearchList);
+
+  function LinkSearchList() {
+    _classCallCheck(this, LinkSearchList);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(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 = jsx("ul", {
+          "data-testid": "link-search-list",
+          css: listStyles,
+          id: id,
+          role: role,
+          "aria-controls": ariaControls,
+          "aria-labelledby": ariaLabelledBy
+        }, items.map(function (item, index) {
+          return jsx(LinkSearchListItem, {
+            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 = jsx("div", {
+          css: spinnerContainerStyles
+        }, jsx(Spinner, {
+          testId: "link-picker.results-loading-indicator",
+          size: "medium"
+        }));
+      }
+
+      return jsx("div", {
+        css: listContainerStyles
+      }, itemsContent, loadingContent);
+    }
+  }]);
+
+  return LinkSearchList;
+}(PureComponent);
+
+export { LinkSearchList as default };

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

@@ -0,0 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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"])));

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

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import EmptyState from '@atlaskit/empty-state';
+import NoResultsSVG from './no-results-svg';
+
+var NoResults = function NoResults(props) {
+  return /*#__PURE__*/React.createElement(EmptyState, _extends({}, props, {
+    renderImage: function renderImage() {
+      return /*#__PURE__*/React.createElement(NoResultsSVG, null);
+    }
+  }));
+};
+
+export default NoResults;