@atlaskit/link-picker 0.0.2 → 0.8.1

package/dist/cjs/utils.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.relativeFontSizeToBase16 = exports.isUndoEvent = exports.isRedoEvent = void 0;
+
+var _browser = require("./browser");
+
+var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
+  if (typeof px === 'string') {
+    px = parseInt(px);
+  }
+
+  if (isNaN(px)) {
+    throw new Error("Invalid font size: '".concat(px, "'"));
+  }
+
+  return "".concat(px / 16, "rem");
+};
+
+exports.relativeFontSizeToBase16 = relativeFontSizeToBase16;
+var KeyZCode = 90;
+var KeyYCode = 89;
+
+var isUndoEvent = function isUndoEvent(e) {
+  return e.keyCode === KeyZCode && ( // cmd + z for mac
+  _browser.browser.mac && e.metaKey && !e.shiftKey || // ctrl + z for non-mac
+  !_browser.browser.mac && e.ctrlKey);
+};
+
+exports.isUndoEvent = isUndoEvent;
+
+var isRedoEvent = function isRedoEvent(e) {
+  return (// ctrl + y for non-mac
+    !_browser.browser.mac && e.ctrlKey && e.keyCode === KeyYCode || _browser.browser.mac && e.metaKey && e.shiftKey && e.keyCode === KeyZCode || e.ctrlKey && e.shiftKey && e.keyCode === KeyZCode
+  );
+};
+
+exports.isRedoEvent = isRedoEvent;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "0.0.2",
+	"version": "0.8.1",
 	"sideEffects": false
 }

package/dist/es2019/browser.js

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

package/dist/es2019/index.js

@@ -1 +1 @@
-export { LinkPicker } from './link-picker';
+export { LinkPickerWithIntl as LinkPicker } from './ui/link-picker';

package/dist/es2019/messages.js

@@ -0,0 +1,93 @@
+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/styles.js

@@ -0,0 +1,93 @@
+import styled from 'styled-components';
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/core';
+import { N500, B50, N300, N800, N20, B400 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants';
+import { relativeFontSizeToBase16 } from './utils'; // AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+import { fontSizeSmall, fontSize, typography } from '@atlaskit/theme';
+const LINK_PICKER_WIDTH_IN_PX = 342;
+export const recentListStyles = css`
+  width: ${LINK_PICKER_WIDTH_IN_PX}px;
+`;
+export const Container = styled.div`
+  padding: ${gridSize() * 2}px;
+  width: 100%;
+  overflow: hidden;
+  line-height: initial;
+  box-sizing: border-box;
+`;
+export const ClearText = styled.button`
+  padding: 0;
+  margin-right: ${gridSize() / 2}px;
+  color: ${token('color.icon.subtle', N500)};
+  background: transparent;
+  border: none;
+  cursor: pointer;
+`;
+export const FieldWrapper = styled.div`
+  margin-bottom: ${gridSize() * 2}px;
+`;
+export const SearchIconWrapper = styled.span`
+  margin-left: ${gridSize() / 2}px;
+  color: ${token('color.icon', N500)};
+  cursor: default;
+`;
+export const ListTitleStyles = css`
+  ${typography.h100()}
+  text-transform: uppercase;
+  margin-bottom: ${gridSize() / 2}px;
+`;
+export const ListItemWrapper = styled.li`
+  display: flex;
+  padding: ${gridSize()}px ${gridSize() * 2}px;
+  margin: 0 -${gridSize() * 2}px;
+  cursor: pointer;
+  background-color: ${props => {
+  switch (true) {
+    case props.selected:
+      return token('color.background.selected', B50);
+
+    case props.active:
+      return token('color.background.neutral.subtle.hovered', N20);
+
+    default:
+      return 'transparent';
+  }
+}};
+  box-shadow: inset 2px 0px 0px
+    ${props => {
+  switch (true) {
+    case props.active:
+    case props.selected:
+      return token('color.border.selected', B400);
+
+    default:
+      return 'transparent';
+  }
+}};
+`;
+export const ItemNameWrapper = styled.span`
+  overflow: hidden;
+`;
+export const ListItemName = styled.div`
+  color: ${token('color.text', N800)};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 20px;
+`;
+export const ListItemContext = styled.div`
+  color: ${token('color.text', N300)};
+  font-size: ${relativeFontSizeToBase16(fontSizeSmall())};
+  line-height: ${fontSize()}px;
+`;
+export const ItemIconWrapper = styled.span`
+  min-width: ${gridSize() * 2}px;
+  margin-top: 3px;
+  margin-right: 12px;
+`;
+export const ImgStyles = css`
+  max-width: ${gridSize() * 2}px;
+`;

package/dist/es2019/transformTimeStamp.js

@@ -0,0 +1,41 @@
+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

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

package/dist/es2019/ui/LinkSearchList.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { PureComponent } from 'react';
+import Spinner from '@atlaskit/spinner';
+import styled from 'styled-components';
+import LinkSearchListItem from './LinkSearchListItem';
+const ListContainer = styled.div`
+  padding-top: 0;
+`;
+const SpinnerContainer = styled.div`
+  text-align: center;
+  min-height: 80px;
+  margin-top: 30px;
+`;
+export const List = styled.ul`
+  padding: 0;
+  list-style: none;
+`;
+export default class LinkSearchList extends PureComponent {
+  render() {
+    const {
+      onSelect,
+      onMouseEnter,
+      onMouseLeave,
+      items,
+      activeIndex,
+      selectedIndex,
+      isLoading,
+      ariaControls,
+      ariaLabelledBy,
+      role,
+      id
+    } = this.props;
+    let itemsContent;
+    let loadingContent;
+
+    if (items && items.length > 0) {
+      itemsContent = /*#__PURE__*/React.createElement(List, {
+        id: id,
+        role: role,
+        "aria-controls": ariaControls,
+        "aria-labelledby": ariaLabelledBy
+      }, items.map((item, index) => /*#__PURE__*/React.createElement(LinkSearchListItem, {
+        id: `link-search-list-item-${index}`,
+        role: role && 'option',
+        item: item,
+        selected: selectedIndex === index,
+        active: activeIndex === index,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onSelect: onSelect,
+        key: item.objectId
+      })));
+    }
+
+    if (isLoading) {
+      loadingContent = /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, {
+        testId: "link-picker.results-loading-indicator",
+        size: "medium"
+      }));
+    }
+
+    return /*#__PURE__*/React.createElement(ListContainer, null, itemsContent, loadingContent);
+  }
+
+}

package/dist/es2019/ui/LinkSearchListItem.js

@@ -0,0 +1,88 @@
+/** @jsx jsx */
+import { Fragment } from 'react';
+import { jsx } from '@emotion/core';
+import { injectIntl } from 'react-intl-next';
+import { transformTimeStamp } from '../transformTimeStamp';
+import { ItemNameWrapper, ItemIconWrapper, ListItemContext, ListItemName, ListItemWrapper, ImgStyles } from '../styles';
+
+const LinkSearchListItem = ({
+  item,
+  selected,
+  active,
+  id,
+  role,
+  intl,
+  onSelect,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const handleSelect = () => onSelect(item.objectId);
+
+  const handleMouseEnter = () => onMouseEnter(item.objectId);
+
+  const handleMouseLeave = () => onMouseLeave(item.objectId);
+
+  return jsx(ListItemWrapper, {
+    role: role,
+    id: id,
+    "aria-selected": selected,
+    "data-testid": "link-search-list-item",
+    selected: selected,
+    active: active,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: handleSelect
+  }, jsx(ListItemIcon, {
+    item: item,
+    intl: intl
+  }), jsx(ItemNameWrapper, null, jsx(ListItemName, null, item.name), jsx(ListItemContext, null, item.container, jsx(ItemTimeStamp, {
+    date: transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate)
+  }))));
+};
+
+export default injectIntl(LinkSearchListItem);
+
+const ItemTimeStamp = props => {
+  const {
+    date
+  } = props;
+
+  if (!date) {
+    return null;
+  }
+
+  return jsx(Fragment, null, "\xA0 \u2022", jsx("span", {
+    className: "link-search-timestamp",
+    "data-test-id": "link-search-timestamp"
+  }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));
+};
+
+const ListItemIcon = props => {
+  const {
+    item,
+    intl
+  } = props;
+  const {
+    icon,
+    iconAlt
+  } = item;
+
+  if (!icon) {
+    return null;
+  }
+
+  const alt = typeof iconAlt === 'string' ? iconAlt : intl.formatMessage(iconAlt);
+
+  if (typeof icon !== 'string') {
+    const Glyph = icon;
+    return jsx(ItemIconWrapper, null, jsx(Glyph, {
+      alt: alt
+    }));
+  }
+
+  return jsx(ItemIconWrapper, null, jsx("img", {
+    src: icon,
+    alt: alt,
+    css: ImgStyles
+  }));
+};

package/dist/es2019/ui/PanelTextInput.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useRef } from 'react';
+import { ErrorMessage, Field } from '@atlaskit/form';
+import Tooltip from '@atlaskit/tooltip';
+import Textfield from '@atlaskit/textfield';
+import Selectclear from '@atlaskit/icon/glyph/select-clear';
+import { ClearText, FieldWrapper } from '../styles';
+import { isRedoEvent, isUndoEvent } from '../utils';
+
+const PanelTextInput = props => {
+  const {
+    name,
+    label,
+    autoFocus,
+    onSubmit,
+    onRedo,
+    onUndo,
+    onChange,
+    onKeyDown,
+    onClear,
+    clearLabel,
+    error,
+    ...restProps
+  } = props;
+  const inputRef = useRef(null);
+  const handleRef = useCallback(input => {
+    if (input) {
+      inputRef.current = input;
+
+      if (autoFocus) {
+        // Need this to prevent jumping when we render TextInput inside Portal @see ED-2992
+        input.focus({
+          preventScroll: true
+        });
+      }
+    }
+  }, [autoFocus]);
+  const handleChange = useCallback(e => {
+    onChange(e.currentTarget.value);
+  }, [onChange]);
+  const handleKeydown = useCallback(e => {
+    const value = e.currentTarget.value;
+
+    if (e.keyCode === 13 && onSubmit) {
+      e.preventDefault(); // Prevent from submitting if an editor is inside a form.
+
+      onSubmit(value);
+    } else if (typeof onUndo === 'function' && isUndoEvent(e)) {
+      e.preventDefault();
+      onUndo();
+    } else if (typeof onRedo === 'function' && isRedoEvent(e)) {
+      e.preventDefault();
+      onRedo();
+    }
+
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+  }, [onSubmit, onUndo, onRedo, onKeyDown]);
+  const handleClear = useCallback(() => {
+    if (inputRef.current && onClear) {
+      inputRef.current.focus();
+      onClear();
+    }
+  }, [onClear]);
+  const clearText = restProps.value !== '' && /*#__PURE__*/React.createElement(Tooltip, {
+    content: clearLabel
+  }, /*#__PURE__*/React.createElement(ClearText, {
+    onClick: handleClear,
+    "data-testid": "clear-text"
+  }, /*#__PURE__*/React.createElement(Selectclear, {
+    size: "medium",
+    label: clearLabel || ''
+  })));
+  return /*#__PURE__*/React.createElement(FieldWrapper, null, /*#__PURE__*/React.createElement(Field, {
+    label: label,
+    name: name
+  }, ({
+    fieldProps
+  }) => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textfield, _extends({}, fieldProps, restProps, {
+      onKeyDown: handleKeydown,
+      onChange: handleChange,
+      ref: handleRef,
+      elemAfterInput: clearText,
+      isInvalid: !!error
+    })), error && /*#__PURE__*/React.createElement(ErrorMessage, {
+      testId: "link-error"
+    }, error));
+  }));
+};
+
+export default PanelTextInput;

package/dist/es2019/ui/announcer.js

@@ -0,0 +1,38 @@
+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);