@atlaskit/link-picker 0.11.0 → 1.1.1

package/dist/es2019/messages.js

@@ -1,93 +0,0 @@
-import { defineMessages } from 'react-intl-next';
-export const messages = 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'
-  }
-});

package/dist/es2019/transformTimeStamp.js

@@ -1,41 +0,0 @@
-import formatDistance from 'date-fns/formatDistance';
-import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
-import format from 'date-fns/format';
-import { messages } from './messages';
-
-const renderAbsoluteOrRelativeDate = (timeStamp, pageAction, intl) => {
-  let pageActionText = '';
-
-  switch (pageAction) {
-    case 'updated':
-      pageActionText = intl.formatMessage(messages.timeUpdated);
-      break;
-
-    case 'viewed':
-      pageActionText = intl.formatMessage(messages.timeViewed);
-      break;
-  }
-
-  if (differenceInCalendarDays(timeStamp, Date.now()) < -7) {
-    return {
-      pageAction: pageActionText,
-      dateString: format(timeStamp, 'MMMM dd, yyyy')
-    };
-  }
-
-  return {
-    pageAction: pageActionText,
-    dateString: formatDistance(timeStamp, Date.now()),
-    timeSince: intl.formatMessage(messages.timeAgo)
-  };
-};
-
-export const transformTimeStamp = (intl, lastViewedDate, lastUpdatedDate) => {
-  if (lastViewedDate) {
-    return renderAbsoluteOrRelativeDate(lastViewedDate, 'viewed', intl);
-  }
-
-  if (lastUpdatedDate) {
-    return renderAbsoluteOrRelativeDate(lastUpdatedDate, 'updated', intl);
-  }
-};

package/dist/es2019/types.js

@@ -1 +0,0 @@
-export {};

package/dist/es2019/ui/announcer.js

@@ -1,38 +0,0 @@
-import React, { forwardRef, memo, useState, useEffect } from 'react'; // How to use:
-// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Preferring_specialized_live_region_roles
-// Demo: https://dequeuniversity.com/library/aria/liveregion-playground
-// Important: Strongly recommend test your solution in all supported screen readers
-// if you use non default value of properties: ariaAtomic, ariaLive, ariaRelevant, role
-// Note: Text won't be announced if the text message doesn't change after the render.
-// For using a forced announcement in this case, set the 'key' attribute - key={Date.now()}
-
-// Note: Flag 'contentRendered' resolves bug with duplicates messages (NVDA + Firefox)
-// https://github.com/nvaccess/nvda/labels/bug%2Fdouble-speaking
-let timer;
-const Announcer = /*#__PURE__*/forwardRef(({
-  ariaAtomic = 'true',
-  ariaLive = 'polite',
-  ariaRelevant = 'all',
-  role = 'status',
-  text = '',
-  delay = 0
-}, ref) => {
-  const [contentRendered, setContentRendered] = useState(false);
-  useEffect(() => {
-    clearTimeout(timer);
-    setContentRendered(false);
-    timer = setTimeout(() => {
-      setContentRendered(true);
-    }, delay);
-    return () => clearTimeout(timer);
-  }, [text, delay]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "assistive",
-    ref: ref,
-    role: role,
-    "aria-atomic": ariaAtomic,
-    "aria-relevant": ariaRelevant,
-    "aria-live": ariaLive
-  }, contentRendered && /*#__PURE__*/React.createElement("span", null, text));
-});
-export default /*#__PURE__*/memo(Announcer);

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

@@ -1,493 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-/** @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';
-export const RECENT_SEARCH_LIST_SIZE = 5;
-
-class LinkPicker extends PureComponent {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "wrapperRef", /*#__PURE__*/React.createRef());
-
-    _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, "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;
-    });
-
-    _defineProperty(this, "handleSelected", objectId => {
-      const {
-        items
-      } = this.state;
-      const selectedItem = items.find(item => item.objectId === objectId);
-
-      if (selectedItem) {
-        const {
-          url,
-          name
-        } = selectedItem;
-        this.handleInsert(url, name, 'typeAhead');
-      }
-    });
-
-    _defineProperty(this, "handleInsert", (url, title, inputType) => {
-      const {
-        onSubmit
-      } = this.props;
-      const {
-        url: rawUrl,
-        displayText
-      } = this.state;
-
-      if (onSubmit) {
-        onSubmit({
-          url,
-          displayText: displayText || null,
-          title: title || null,
-          meta: {
-            inputMethod: inputType
-          },
-          ...(inputType === 'manual' ? {
-            rawUrl
-          } : {})
-        });
-      }
-    });
-
-    _defineProperty(this, "handleMouseEnterResultItem", objectId => {
-      const {
-        items
-      } = this.state;
-      const index = findIndex(items, item => item.objectId === objectId);
-      this.setState({
-        activeIndex: index
-      });
-    });
-
-    _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
-        });
-      }
-    });
-
-    _defineProperty(this, "handleSubmit", () => {
-      const {
-        url,
-        selectedIndex,
-        items
-      } = this.state;
-      const selectedItem = items[selectedIndex];
-
-      if (this.isUrlPopulatedWithSelectedItem()) {
-        this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
-      } else if (url.length > 0) {
-        const normalized = normalizeUrl(url);
-
-        if (normalized) {
-          this.handleInsert(normalized, null, 'manual');
-        } else {
-          const {
-            intl
-          } = this.props;
-          const linkInvalid = intl.formatMessage(messages.linkInvalid);
-          this.setState({
-            invalidUrl: linkInvalid
-          });
-        }
-      }
-    });
-
-    _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", () => {
-      const {
-        onCancel
-      } = this.props;
-
-      if (onCancel) {
-        onCancel();
-      }
-    });
-
-    _defineProperty(this, "updateTextInput", displayText => {
-      this.setState({
-        displayText: displayText
-      });
-    });
-
-    this.state = {
-      selectedIndex: -1,
-      activeIndex: -1,
-      isLoading: false,
-      url: normalizeUrl(props.url) || '',
-      displayText: props.displayText || '',
-      items: [],
-      invalidUrl: null
-    };
-    /* Cache functions */
-
-    this.handleClearUrl = this.createClearHandler('url');
-    this.handleClearDisplayText = this.createClearHandler('displayText');
-  }
-
-  componentDidMount() {
-    this.loadInitialLinkSearchResult();
-  }
-
-  loadInitialLinkSearchResult() {
-    const {
-      url
-    } = this.state;
-
-    if (!url) {
-      this.updateResults();
-    }
-  }
-
-  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
-   */
-
-
-  async updateResults() {
-    const queryVersion = ++this.queryVersion;
-    const activePlugin = this.getActivePlugin();
-
-    if (!activePlugin) {
-      return;
-    }
-
-    const updates = activePlugin.resolve({
-      query: this.state.url
-    });
-    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;
-        }
-
-        this.setState({
-          items: limit(value.data),
-          isLoading: !done
-        });
-
-        if (done) {
-          return;
-        }
-      }
-    } catch {
-      this.setState({
-        isLoading: false
-      });
-    }
-  }
-
-  render() {
-    const {
-      items,
-      isLoading,
-      activeIndex,
-      selectedIndex,
-      url,
-      displayText
-    } = this.state;
-    const {
-      intl: {
-        formatMessage
-      }
-    } = this.props;
-    const activePlugin = this.getActivePlugin();
-    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: ''
-    }));
-    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
-    }), 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(messages.insertButton))))));
-  }
-
-}
-
-function findIndex(array, predicate) {
-  let index = -1;
-  array.some((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 const LinkPickerWithIntl = injectIntl(LinkPicker);