@atlaskit/link-picker 1.4.1 → 1.6.0

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

@@ -1,504 +1,337 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { PureComponent } from 'react';
+import { useCallback, useLayoutEffect, useReducer } from 'react';
 import { jsx } from '@emotion/react';
-import { injectIntl } from 'react-intl-next';
+import { useIntl, FormattedMessage } from 'react-intl-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';
 import { messages } from './messages';
 import PanelTextInput from './text-input';
 import LinkSearchList from './link-search-list';
 import { normalizeUrl, isSafeUrl } from './url';
-import { rootContainerStyles, searchIconStyles, listTitleStyles } from './styled';
+import { rootContainerStyles, searchIconStyles, listTitleStyles, tabsWrapperStyles } 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 Announcer from './announcer';
 import LinkSearchNoResults from './link-search-no-results';
+import { usePlugins } from '../../services/use-plugins';
 export const RECENT_SEARCH_LIST_SIZE = 5;
+export const 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'
+};
+const initState = {
+  url: '',
+  displayText: '',
+  activeIndex: -1,
+  selectedIndex: -1,
+  invalidUrl: false,
+  activeTab: 0
+};
+
+function reducer(state, payload) {
+  if (payload.url && state.url !== payload.url) {
+    return { ...state,
+      invalidUrl: false,
+      selectedIndex: isSafeUrl(payload.url) && payload.url.length ? -1 : state.selectedIndex,
+      ...payload
+    };
+  }
 
-class LinkPicker extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "queryVersion", 0);
-
-    _defineProperty(this, "updateInput", async input => {
-      // If input is a valid URL, do not search or display link suggestions
-      if (input.length && isSafeUrl(input)) {
-        return this.setState({
-          url: input,
-          selectedIndex: -1,
-          items: [],
-          isLoading: false,
-          invalidUrl: null
-        });
-      }
-
-      return this.setState({
-        url: input,
-        // Unset selection on any input change
-        selectedIndex: -1,
-        invalidUrl: null
-      }, () => {
-        this.updateResults();
-      });
-    });
-
-    _defineProperty(this, "createClearHandler", field => {
-      return () => {
-        switch (field) {
-          case 'url':
-            {
-              this.updateInput('');
-              break;
-            }
-
-          case 'displayText':
-            {
-              this.setState({
-                [field]: ''
-              });
-            }
-        }
-      };
-    });
-
-    _defineProperty(this, "getScreenReaderText", () => {
-      const {
-        intl
-      } = this.props;
-      const {
-        items,
-        selectedIndex
-      } = this.state;
-
-      if (items.length && selectedIndex > -1) {
-        const {
-          name,
-          container,
-          lastUpdatedDate,
-          lastViewedDate
-        } = items[selectedIndex];
-        const date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
-        const 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(this, "getTabs", () => {
-      if (this.props.plugins && this.props.plugins.length > 1) {
-        return this.props.plugins.filter(plugin => !!plugin.tabTitle).map(plugin => ({
-          tabTitle: plugin.tabTitle
-        }));
-      }
+  return { ...state,
+    ...payload
+  };
+}
 
-      return [];
+function LinkPicker({
+  onSubmit,
+  onCancel,
+  onContentResize,
+  plugins,
+  url: initUrl,
+  displayText: initDisplayText
+}) {
+  const [state, dispatch] = useReducer(reducer, { ...initState,
+    url: normalizeUrl(initUrl) || '',
+    displayText: initDisplayText || ''
+  });
+  const {
+    activeIndex,
+    selectedIndex,
+    url,
+    displayText,
+    invalidUrl
+  } = state;
+  const isEditing = !!initUrl;
+  const intl = useIntl();
+  const {
+    items,
+    isLoading,
+    isSelectedItem,
+    isActivePlugin,
+    tabs
+  } = usePlugins(state, plugins);
+  useLayoutEffect(() => {
+    if (onContentResize) {
+      onContentResize();
+    }
+  }, [onContentResize, items, isLoading, isActivePlugin, tabs]);
+  const handleChangeUrl = useCallback(url => {
+    dispatch({
+      url
     });
-
-    _defineProperty(this, "isUrlPopulatedWithSelectedItem", () => {
-      /**
-       * 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
-       */
-      const {
-        items,
-        selectedIndex,
-        url
-      } = this.state;
-      const selectedItem = items[selectedIndex];
-
-      if (selectedItem && selectedItem.url === url) {
-        return true;
-      }
-
-      return false;
+  }, []);
+  const handleChangeText = useCallback(displayText => {
+    dispatch({
+      displayText
     });
+  }, []);
+  const handleKeyDown = useCallback(event => {
+    const {
+      keyCode
+    } = event;
+    const KEY_CODE_ARROW_DOWN = 40;
+    const KEY_CODE_ARROW_UP = 38;
 
-    _defineProperty(this, "handleSelected", objectId => {
-      const {
-        items
-      } = this.state;
-      const selectedItem = items.find(item => item.objectId === objectId);
+    if (!items || !items.length) {
+      return;
+    }
 
-      if (selectedItem) {
-        const {
-          url,
-          name
-        } = selectedItem;
-        this.handleInsert(url, name, 'typeAhead');
-      }
-    });
+    let updatedIndex = activeIndex;
 
-    _defineProperty(this, "handleInsert", (url, title, inputType) => {
-      const {
-        onSubmit
-      } = this.props;
-      const {
-        url: rawUrl,
-        displayText
-      } = this.state;
+    switch (keyCode) {
+      case KEY_CODE_ARROW_DOWN:
+        // down
+        event.preventDefault();
+        updatedIndex = (activeIndex + 1) % items.length;
+        break;
 
-      if (onSubmit) {
-        onSubmit({
-          url,
-          displayText: displayText || null,
-          title: title || null,
-          meta: {
-            inputMethod: inputType
-          },
-          ...(inputType === 'manual' ? {
-            rawUrl
-          } : {})
-        });
-      }
-    });
+      case KEY_CODE_ARROW_UP:
+        // up
+        event.preventDefault();
+        updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
+        break;
+    }
 
-    _defineProperty(this, "handleMouseEnterResultItem", objectId => {
-      const {
-        items
-      } = this.state;
-      const index = findIndex(items, item => item.objectId === objectId);
-      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]);
+  const handleClear = useCallback(field => {
+    dispatch({
+      [field]: ''
     });
-
-    _defineProperty(this, "handleMouseLeaveResultItem", objectId => {
-      const {
-        items,
-        activeIndex
-      } = this.state;
-      const index = findIndex(items, item => item.objectId === objectId); // This is to avoid updating index that was set by other mouseenter event
-
-      if (activeIndex === index) {
-        this.setState({
-          activeIndex: -1
-        });
-      }
+  }, []);
+  const handleMouseEnterResultItem = useCallback(objectId => {
+    const index = findIndex(items, item => item.objectId === objectId);
+    dispatch({
+      activeIndex: index
     });
+  }, [items]);
+  const handleMouseLeaveResultItem = useCallback(objectId => {
+    const index = findIndex(items, item => item.objectId === objectId); // This is to avoid updating index that was set by other mouseenter event
 
-    _defineProperty(this, "handleSubmit", () => {
-      const {
-        url,
-        selectedIndex,
-        items
-      } = this.state;
-      const {
-        intl
-      } = this.props;
-      const selectedItem = items[selectedIndex];
-
-      if (this.isUrlPopulatedWithSelectedItem()) {
-        return this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
-      }
-
-      const normalized = normalizeUrl(url);
-
-      if (normalized) {
-        return this.handleInsert(normalized, null, 'manual');
-      }
-
-      return this.setState({
-        invalidUrl: intl.formatMessage(messages.linkInvalid)
+    if (activeIndex === index) {
+      dispatch({
+        activeIndex: -1
       });
+    }
+  }, [activeIndex, items]);
+  const handleInsert = useCallback((url, title, inputType) => {
+    onSubmit({
+      url,
+      displayText: displayText || null,
+      title: title || null,
+      meta: {
+        inputMethod: inputType
+      },
+      ...(inputType === 'manual' ? {
+        rawUrl: state.url
+      } : {})
     });
+  }, [displayText, onSubmit, state.url]);
+  const handleSelected = useCallback(objectId => {
+    const selectedItem = items.find(item => item.objectId === objectId);
 
-    _defineProperty(this, "handleKeyDown", event => {
-      const {
-        items,
-        activeIndex
-      } = this.state;
-      const {
-        keyCode
-      } = event;
-      const KEY_CODE_ARROW_DOWN = 40;
-      const KEY_CODE_ARROW_UP = 38;
-
-      if (!items || !items.length) {
-        return;
-      }
-
-      let 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(this, "handleCancel", () => {
+    if (selectedItem) {
       const {
-        onCancel
-      } = this.props;
-
-      if (onCancel) {
-        onCancel();
-      }
-    });
-
-    _defineProperty(this, "updateTextInput", 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');
-  }
-
-  componentDidMount() {
-    this.loadInitialLinkSearchResult();
-  }
-
-  loadInitialLinkSearchResult() {
-    const {
-      url
-    } = this.state;
-
-    if (!url) {
-      this.updateResults();
+        url,
+        name
+      } = selectedItem;
+      handleInsert(url, name, 'typeAhead');
     }
-  }
+  }, [handleInsert, items]);
+  const handleSubmit = useCallback(() => {
+    const selectedItem = items[selectedIndex];
 
-  getActivePlugin() {
-    if (!this.props.plugins || this.props.plugins.length === 0) {
-      return null;
+    if (isSelectedItem) {
+      return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
 
-    return this.props.plugins[this.state.activePlugin];
-  }
-  /**
-   * Interface between link picker and plugins to update results
-   */
-
+    const normalized = normalizeUrl(url);
 
-  async updateResults() {
-    const queryVersion = ++this.queryVersion;
-    const activePlugin = this.getActivePlugin();
-
-    if (!activePlugin) {
-      return;
+    if (normalized) {
+      return handleInsert(normalized, null, 'manual');
     }
 
-    const updates = activePlugin.resolve({
-      query: this.state.url
+    return dispatch({
+      invalidUrl: true
     });
-    this.setState({
-      isLoading: true,
-      items: []
-    });
-
-    try {
-      while (queryVersion === this.queryVersion) {
-        let done = false;
-        let value;
-
-        if (updates instanceof Promise) {
-          done = true;
-          value = await updates;
-        } else {
-          var _result$done;
-
-          const result = await updates.next();
-          done = (_result$done = result.done) !== null && _result$done !== void 0 ? _result$done : false;
-          value = result.value;
-        }
-
-        if (queryVersion !== this.queryVersion) {
-          return;
-        }
+  }, [handleInsert, isSelectedItem, items, selectedIndex, url]);
+  const linkPlaceHolder = isActivePlugin ? messages.placeholder : messages.linkPlaceholder;
+  const linkListTitle = url ? messages.titleResults : messages.titleRecentlyViewed;
+  const insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
+  const noResults = isActivePlugin && !isLoading && !items.length && !isSafeUrl(url);
+  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
+  // as the Aria design pattern for combobox does not work in this case
+  // for details: https://a11y-internal.atlassian.net/browse/AK-740
+
+  const screenReaderText = browser.safari && getScreenReaderText(items, selectedIndex, intl);
+  const 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("div", {
+    css: tabsWrapperStyles
+  }, jsx(Tabs, {
+    id: testIds.tabList,
+    testId: testIds.tabList,
+    onChange: activeTab => dispatch({
+      selectedIndex: -1,
+      activeIndex: -1,
+      invalidUrl: false,
+      activeTab
+    })
+  }, jsx(TabList, null, tabs.map(tab => 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)))));
+}
 
-        this.setState(prev => ({
-          items: limit(value.data),
-          isLoading: !done
-        }));
+export default LinkPicker;
 
-        if (done) {
-          return;
-        }
-      }
-    } catch {
-      this.setState({
-        isLoading: false
-      });
-    }
-  }
-
-  render() {
+function getScreenReaderText(items, selectedIndex, intl) {
+  if (items.length && selectedIndex > -1) {
     const {
-      items,
-      isLoading,
-      isEditing,
-      activeIndex,
-      selectedIndex,
-      url,
-      displayText
-    } = this.state;
-    const {
-      intl: {
-        formatMessage
-      }
-    } = this.props;
-    const activePlugin = this.getActivePlugin();
-    const tabs = this.getTabs();
-    const linkPlaceHolder = formatMessage(activePlugin ? messages.placeholder : messages.linkPlaceholder);
-    const linkLabel = formatMessage(messages.linkLabel);
-    const linkTextLabel = formatMessage(messages.linkTextLabel);
-    const linkTextPlaceHolder = formatMessage(messages.linkTextPlaceholder);
-    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
-    // as the Aria design pattern for combobox does not work in this case
-    // for details: https://a11y-internal.atlassian.net/browse/AK-740
-
-    const screenReaderText = browser.safari && this.getScreenReaderText();
-    const searchIcon = activePlugin && jsx("span", {
-      css: searchIconStyles,
-      "data-testid": "link-picker-search-icon"
-    }, jsx(EditorSearchIcon, {
-      size: "medium",
-      label: ''
-    }));
-    const 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: activePlugin => this.setState({
-        activePlugin
-      }, () => {
-        this.updateResults();
-      })
-    }, jsx(TabList, null, tabs.map(tab => {
-      const 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)))));
+      name,
+      container,
+      lastUpdatedDate,
+      lastViewedDate
+    } = items[selectedIndex];
+    const date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
+    const 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) {
@@ -512,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);
+}