@atlaskit/link-picker 1.4.1 → 1.5.0

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

@@ -1,28 +1,15 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-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 _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 { PureComponent } from 'react';
+import { useCallback, useReducer } from 'react';
 import { jsx } from '@emotion/react';
-import { injectIntl } from 'react-intl-next';
-import Tabs, { Tab, TabList } from '@atlaskit/tabs';
+import { useIntl, FormattedMessage } from 'react-intl-next';
 import { messages } from './messages';
 import PanelTextInput from './text-input';
 import LinkSearchList from './link-search-list';
@@ -34,604 +21,318 @@ import Announcer from './/announcer';
 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';
 import LinkSearchNoResults from './link-search-no-results';
+import { usePlugins } from '../../services/use-plugins';
 export var RECENT_SEARCH_LIST_SIZE = 5;
+export var testIds = {
+  linkPicker: 'link-picker',
+  urlInputField: 'link-url',
+  textInputField: 'link-text',
+  searchIcon: 'link-picker-search-icon',
+  insertButton: 'link-picker-insert-button',
+  cancelButton: 'link-picker-cancel-button',
+  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'
+};
+var initState = {
+  url: '',
+  displayText: '',
+  activeIndex: -1,
+  selectedIndex: -1,
+  invalidUrl: false,
+  activeTab: 0
+};
+
+function reducer(state, payload) {
+  if (payload.url && state.url !== payload.url) {
+    return _objectSpread(_objectSpread({}, state), {}, {
+      invalidUrl: false,
+      selectedIndex: isSafeUrl(payload.url) && payload.url.length ? -1 : state.selectedIndex
+    }, payload);
+  }
 
-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), "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), "getTabs", function () {
-      if (_this.props.plugins && _this.props.plugins.length > 1) {
-        return _this.props.plugins.filter(function (plugin) {
-          return !!plugin.tabTitle;
-        }).map(function (plugin) {
-          return {
-            tabTitle: plugin.tabTitle
-          };
-        });
-      }
-
-      return [];
-    });
-
-    _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 _objectSpread(_objectSpread({}, state), payload);
+}
 
-      return false;
+function LinkPicker(_ref) {
+  var onSubmit = _ref.onSubmit,
+      onCancel = _ref.onCancel,
+      plugins = _ref.plugins,
+      initUrl = _ref.url,
+      initDisplayText = _ref.displayText;
+
+  var _useReducer = useReducer(reducer, _objectSpread(_objectSpread({}, initState), {}, {
+    url: normalizeUrl(initUrl) || '',
+    displayText: initDisplayText || ''
+  })),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var activeIndex = state.activeIndex,
+      selectedIndex = state.selectedIndex,
+      url = state.url,
+      displayText = state.displayText,
+      invalidUrl = state.invalidUrl;
+  var isEditing = !!initUrl;
+  var intl = useIntl();
+
+  var _usePlugins = usePlugins(state, plugins),
+      items = _usePlugins.items,
+      isLoading = _usePlugins.isLoading,
+      isSelectedItem = _usePlugins.isSelectedItem,
+      isActivePlugin = _usePlugins.isActivePlugin,
+      tabs = _usePlugins.tabs;
+
+  var handleChangeUrl = useCallback(function (url) {
+    dispatch({
+      url: url
     });
-
-    _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');
-      }
+  }, []);
+  var handleChangeText = useCallback(function (displayText) {
+    dispatch({
+      displayText: displayText
     });
+  }, []);
+  var handleKeyDown = useCallback(function (event) {
+    var keyCode = event.keyCode;
+    var KEY_CODE_ARROW_DOWN = 40;
+    var KEY_CODE_ARROW_UP = 38;
+
+    if (!items || !items.length) {
+      return;
+    }
 
-    _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;
+    var updatedIndex = activeIndex;
 
-      if (onSubmit) {
-        onSubmit(_objectSpread({
-          url: url,
-          displayText: displayText || null,
-          title: title || null,
-          meta: {
-            inputMethod: inputType
-          }
-        }, inputType === 'manual' ? {
-          rawUrl: rawUrl
-        } : {}));
-      }
-    });
+    switch (keyCode) {
+      case KEY_CODE_ARROW_DOWN:
+        // down
+        event.preventDefault();
+        updatedIndex = (activeIndex + 1) % items.length;
+        break;
 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseEnterResultItem", function (objectId) {
-      var items = _this.state.items;
-      var index = findIndex(items, function (item) {
-        return item.objectId === objectId;
-      });
+      case KEY_CODE_ARROW_UP:
+        // up
+        event.preventDefault();
+        updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
+        break;
+    }
 
-      _this.setState({
-        activeIndex: index
+    if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && items[updatedIndex]) {
+      dispatch({
+        activeIndex: updatedIndex,
+        selectedIndex: updatedIndex,
+        url: items[updatedIndex].url,
+        invalidUrl: false
       });
+    }
+  }, [activeIndex, items]);
+  var handleClear = useCallback(function (field) {
+    dispatch(_defineProperty({}, field, ''));
+  }, []);
+  var handleMouseEnterResultItem = useCallback(function (objectId) {
+    var index = findIndex(items, function (item) {
+      return item.objectId === objectId;
     });
-
-    _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
-        });
-      }
+    dispatch({
+      activeIndex: index
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function () {
-      var _this$state5 = _this.state,
-          url = _this$state5.url,
-          selectedIndex = _this$state5.selectedIndex,
-          items = _this$state5.items;
-      var intl = _this.props.intl;
-      var selectedItem = items[selectedIndex];
-
-      if (_this.isUrlPopulatedWithSelectedItem()) {
-        return _this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
-      }
-
-      var normalized = normalizeUrl(url);
-
-      if (normalized) {
-        return _this.handleInsert(normalized, null, 'manual');
-      }
-
-      return _this.setState({
-        invalidUrl: intl.formatMessage(messages.linkInvalid)
+  }, [items]);
+  var handleMouseLeaveResultItem = useCallback(function (objectId) {
+    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) {
+      dispatch({
+        activeIndex: -1
       });
-    });
-
-    _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();
+    }
+  }, [activeIndex, items]);
+  var handleInsert = useCallback(function (url, title, inputType) {
+    onSubmit(_objectSpread({
+      url: url,
+      displayText: displayText || null,
+      title: title || null,
+      meta: {
+        inputMethod: inputType
       }
+    }, inputType === 'manual' ? {
+      rawUrl: state.url
+    } : {}));
+  }, [displayText, onSubmit, state.url]);
+  var handleSelected = useCallback(function (objectId) {
+    var selectedItem = items.find(function (item) {
+      return item.objectId === objectId;
     });
 
-    _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,
-      activePlugin: 0
-    };
-    /* Cache functions */
-
-    _this.handleClearUrl = _this.createClearHandler('url');
-    _this.handleClearDisplayText = _this.createClearHandler('displayText');
-    return _this;
-  }
-
-  _createClass(LinkPicker, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.loadInitialLinkSearchResult();
+    if (selectedItem) {
+      var _url = selectedItem.url,
+          name = selectedItem.name;
+      handleInsert(_url, name, 'typeAhead');
     }
-  }, {
-    key: "loadInitialLinkSearchResult",
-    value: function loadInitialLinkSearchResult() {
-      var url = this.state.url;
+  }, [handleInsert, items]);
+  var handleSubmit = useCallback(function () {
+    var selectedItem = items[selectedIndex];
 
-      if (!url) {
-        this.updateResults();
-      }
-    }
-  }, {
-    key: "getActivePlugin",
-    value: function getActivePlugin() {
-      if (!this.props.plugins || this.props.plugins.length === 0) {
-        return null;
-      }
-
-      return this.props.plugins[this.state.activePlugin];
+    if (isSelectedItem) {
+      return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
-    /**
-     * Interface between link picker and plugins to update results
-     */
-
-  }, {
-    key: "updateResults",
-    value: function () {
-      var _updateResults = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var _this2 = this;
-
-        var queryVersion, activePlugin, updates, _loop, _ret;
-
-        return _regeneratorRuntime.wrap(function _callee2$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                queryVersion = ++this.queryVersion;
-                activePlugin = this.getActivePlugin();
-
-                if (activePlugin) {
-                  _context3.next = 4;
-                  break;
-                }
-
-                return _context3.abrupt("return");
-
-              case 4:
-                updates = activePlugin.resolve({
-                  query: this.state.url
-                });
-                this.setState({
-                  isLoading: true,
-                  items: []
-                });
-                _context3.prev = 6;
-                _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
-                  var done, value, _result$done, result;
-
-                  return _regeneratorRuntime.wrap(function _loop$(_context2) {
-                    while (1) {
-                      switch (_context2.prev = _context2.next) {
-                        case 0:
-                          done = false;
-                          value = void 0;
-
-                          if (!(updates instanceof Promise)) {
-                            _context2.next = 9;
-                            break;
-                          }
-
-                          done = true;
-                          _context2.next = 6;
-                          return updates;
-
-                        case 6:
-                          value = _context2.sent;
-                          _context2.next = 14;
-                          break;
 
-                        case 9:
-                          _context2.next = 11;
-                          return updates.next();
+    var normalized = normalizeUrl(url);
 
-                        case 11:
-                          result = _context2.sent;
-                          done = (_result$done = result.done) !== null && _result$done !== void 0 ? _result$done : false;
-                          value = result.value;
-
-                        case 14:
-                          if (!(queryVersion !== _this2.queryVersion)) {
-                            _context2.next = 16;
-                            break;
-                          }
-
-                          return _context2.abrupt("return", {
-                            v: void 0
-                          });
-
-                        case 16:
-                          _this2.setState(function (prev) {
-                            return {
-                              items: limit(value.data),
-                              isLoading: !done
-                            };
-                          });
-
-                          if (!done) {
-                            _context2.next = 19;
-                            break;
-                          }
-
-                          return _context2.abrupt("return", {
-                            v: void 0
-                          });
-
-                        case 19:
-                        case "end":
-                          return _context2.stop();
-                      }
-                    }
-                  }, _loop);
-                });
-
-              case 8:
-                if (!(queryVersion === this.queryVersion)) {
-                  _context3.next = 15;
-                  break;
-                }
-
-                return _context3.delegateYield(_loop(), "t0", 10);
-
-              case 10:
-                _ret = _context3.t0;
-
-                if (!(_typeof(_ret) === "object")) {
-                  _context3.next = 13;
-                  break;
-                }
-
-                return _context3.abrupt("return", _ret.v);
-
-              case 13:
-                _context3.next = 8;
-                break;
-
-              case 15:
-                _context3.next = 20;
-                break;
-
-              case 17:
-                _context3.prev = 17;
-                _context3.t1 = _context3["catch"](6);
-                this.setState({
-                  isLoading: false
-                });
-
-              case 20:
-              case "end":
-                return _context3.stop();
-            }
-          }
-        }, _callee2, this, [[6, 17]]);
-      }));
-
-      function updateResults() {
-        return _updateResults.apply(this, arguments);
-      }
-
-      return updateResults;
-    }()
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      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 tabs = this.getTabs();
-      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
+    if (normalized) {
+      return handleInsert(normalized, null, 'manual');
+    }
 
-      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",
-        css: rootContainerStyles
-      }, 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)
-      }), tabs.length > 0 && jsx(Tabs, {
-        id: "link-picker-tabs",
-        testId: "link-picker-tabs",
-        onChange: function onChange(activePlugin) {
-          return _this3.setState({
-            activePlugin: activePlugin
-          }, function () {
-            _this3.updateResults();
-          });
-        }
-      }, jsx(TabList, null, tabs.map(function (tab) {
-        var label = tab.tabTitle;
-        return jsx(Tab, {
-          key: label,
-          testId: "link-picker-tab"
-        }, label);
-      }))), !!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 dispatch({
+      invalidUrl: true
+    });
+  }, [handleInsert, isSelectedItem, items, selectedIndex, url]);
+  var linkPlaceHolder = isActivePlugin ? messages.placeholder : messages.linkPlaceholder;
+  var linkListTitle = url ? messages.titleResults : messages.titleRecentlyViewed;
+  var insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
+  var noResults = isActivePlugin && !isLoading && !items.length && !isSafeUrl(url);
+  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 && getScreenReaderText(items, selectedIndex, intl);
+  var searchIcon = isActivePlugin && jsx("span", {
+    css: searchIconStyles,
+    "data-testid": testIds.searchIcon
+  }, jsx(EditorSearchIcon, {
+    size: "medium",
+    label: ''
+  }));
+  return jsx("div", {
+    "data-testid": testIds.linkPicker,
+    css: rootContainerStyles
+  }, screenReaderText && jsx(Announcer, {
+    ariaLive: "assertive",
+    text: screenReaderText,
+    ariaRelevant: "additions",
+    delay: 250
+  }), jsx(VisuallyHidden, {
+    id: screenReaderDescriptionId
+  }, jsx(FormattedMessage, messages.searchLinkAriaDescription)), jsx(PanelTextInput, {
+    role: "combobox",
+    autoComplete: "off",
+    name: "url",
+    testId: testIds.urlInputField,
+    label: intl.formatMessage(messages.linkLabel),
+    placeholder: intl.formatMessage(linkPlaceHolder),
+    value: url,
+    autoFocus: true,
+    elemBeforeInput: searchIcon,
+    clearLabel: intl.formatMessage(messages.clearLink),
+    "aria-expanded": true,
+    "aria-autocomplete": "list",
+    "aria-controls": linkSearchListId,
+    "aria-activedescendant": ariaActiveDescendant,
+    "aria-describedby": screenReaderDescriptionId,
+    error: invalidUrl ? intl.formatMessage(messages.linkInvalid) : null,
+    onClear: handleClear,
+    onSubmit: handleSubmit,
+    onKeyDown: handleKeyDown,
+    onChange: handleChangeUrl
+  }), jsx(PanelTextInput, {
+    autoComplete: "off",
+    name: "displayText",
+    testId: testIds.textInputField,
+    value: displayText,
+    label: intl.formatMessage(messages.linkTextLabel),
+    placeholder: intl.formatMessage(messages.linkTextPlaceholder),
+    clearLabel: intl.formatMessage(messages.clearText),
+    "aria-label": intl.formatMessage(messages.linkAriaLabel),
+    onClear: handleClear,
+    onSubmit: handleSubmit,
+    onKeyDown: handleKeyDown,
+    onChange: handleChangeText
+  }), tabs.length > 0 && jsx(Tabs, {
+    id: testIds.tabList,
+    testId: testIds.tabList,
+    onChange: function onChange(activeTab) {
+      return dispatch({
+        selectedIndex: -1,
+        activeIndex: -1,
+        invalidUrl: false,
+        activeTab: activeTab
+      });
     }
-  }]);
+  }, jsx(TabList, null, tabs.map(function (tab) {
+    return jsx(Tab, {
+      key: tab.tabTitle,
+      testId: testIds.tabItem
+    }, tab.tabTitle);
+  }))), !!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
+    },
+    "aria-live": "polite",
+    "aria-atomic": "true"
+  }))), jsx(LinkSearchList, {
+    ariaLabelledBy: testIds.resultListTitle,
+    ariaControls: "fabric.smartcard.linkpicker.suggested.results",
+    id: linkSearchListId,
+    role: "listbox",
+    items: items,
+    isLoading: isLoading,
+    selectedIndex: selectedIndex,
+    activeIndex: activeIndex,
+    onSelect: handleSelected,
+    onMouseEnter: handleMouseEnterResultItem,
+    onMouseLeave: handleMouseLeaveResultItem
+  }), 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",
+    onClick: handleSubmit,
+    testId: testIds.insertButton
+  }, intl.formatMessage(insertButtonMsg)))));
+}
 
-  return LinkPicker;
-}(PureComponent);
+export default LinkPicker;
+
+function getScreenReaderText(items, selectedIndex, intl) {
+  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(', ');
+  }
+}
 
 function findIndex(array, predicate) {
   var index = -1;
@@ -644,10 +345,4 @@ function findIndex(array, predicate) {
     return false;
   });
   return index;
-}
-
-function limit(items) {
-  return items.slice(0, RECENT_SEARCH_LIST_SIZE);
-}
-
-export default injectIntl(LinkPicker);
+}