@atlaskit/link-picker 0.0.2 → 0.8.1

package/dist/esm/messages.js

@@ -0,0 +1,93 @@
+import { defineMessages } from 'react-intl-next';
+export var 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/esm/styles.js

@@ -0,0 +1,46 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+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';
+var LINK_PICKER_WIDTH_IN_PX = 342;
+export var recentListStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX);
+export var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", "px;\n  width: 100%;\n  overflow: hidden;\n  line-height: initial;\n  box-sizing: border-box;\n"])), gridSize() * 2);
+export var ClearText = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin-right: ", "px;\n  color: ", ";\n  background: transparent;\n  border: none;\n  cursor: pointer;\n"])), gridSize() / 2, token('color.icon.subtle', N500));
+export var FieldWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-bottom: ", "px;\n"])), gridSize() * 2);
+export var SearchIconWrapper = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), gridSize() / 2, token('color.icon', N500));
+export var ListTitleStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);
+export var ListItemWrapper = styled.li(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: ", "px ", "px;\n  margin: 0 -", "px;\n  cursor: pointer;\n  background-color: ", ";\n  box-shadow: inset 2px 0px 0px\n    ", ";\n"])), gridSize(), gridSize() * 2, gridSize() * 2, function (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';
+  }
+}, function (props) {
+  switch (true) {
+    case props.active:
+    case props.selected:
+      return token('color.border.selected', B400);
+
+    default:
+      return 'transparent';
+  }
+});
+export var ItemNameWrapper = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
+export var ListItemName = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), token('color.text', N800));
+export var ListItemContext = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n"])), token('color.text', N300), relativeFontSizeToBase16(fontSizeSmall()), fontSize());
+export var ItemIconWrapper = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  min-width: ", "px;\n  margin-top: 3px;\n  margin-right: 12px;\n"])), gridSize() * 2);
+export var ImgStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  max-width: ", "px;\n"])), gridSize() * 2);

package/dist/esm/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';
+
+var renderAbsoluteOrRelativeDate = function renderAbsoluteOrRelativeDate(timeStamp, pageAction, intl) {
+  var 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 var transformTimeStamp = function transformTimeStamp(intl, lastViewedDate, lastUpdatedDate) {
+  if (lastViewedDate) {
+    return renderAbsoluteOrRelativeDate(lastViewedDate, 'viewed', intl);
+  }
+
+  if (lastUpdatedDate) {
+    return renderAbsoluteOrRelativeDate(lastUpdatedDate, 'updated', intl);
+  }
+};

package/dist/esm/types.js

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

package/dist/esm/ui/LinkSearchList.js

@@ -0,0 +1,87 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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; } }
+
+import React from 'react';
+import { PureComponent } from 'react';
+import Spinner from '@atlaskit/spinner';
+import styled from 'styled-components';
+import LinkSearchListItem from './LinkSearchListItem';
+var ListContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n"])));
+var SpinnerContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
+export var List = styled.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  list-style: none;\n"])));
+
+var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
+  _inherits(LinkSearchList, _PureComponent);
+
+  var _super = _createSuper(LinkSearchList);
+
+  function LinkSearchList() {
+    _classCallCheck(this, LinkSearchList);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(LinkSearchList, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          onSelect = _this$props.onSelect,
+          onMouseEnter = _this$props.onMouseEnter,
+          onMouseLeave = _this$props.onMouseLeave,
+          items = _this$props.items,
+          activeIndex = _this$props.activeIndex,
+          selectedIndex = _this$props.selectedIndex,
+          isLoading = _this$props.isLoading,
+          ariaControls = _this$props.ariaControls,
+          ariaLabelledBy = _this$props.ariaLabelledBy,
+          role = _this$props.role,
+          id = _this$props.id;
+      var itemsContent;
+      var loadingContent;
+
+      if (items && items.length > 0) {
+        itemsContent = /*#__PURE__*/React.createElement(List, {
+          id: id,
+          role: role,
+          "aria-controls": ariaControls,
+          "aria-labelledby": ariaLabelledBy
+        }, items.map(function (item, index) {
+          return /*#__PURE__*/React.createElement(LinkSearchListItem, {
+            id: "link-search-list-item-".concat(index),
+            role: role && 'option',
+            item: item,
+            selected: selectedIndex === index,
+            active: activeIndex === index,
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave,
+            onSelect: onSelect,
+            key: item.objectId
+          });
+        }));
+      }
+
+      if (isLoading) {
+        loadingContent = /*#__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);
+    }
+  }]);
+
+  return LinkSearchList;
+}(PureComponent);
+
+export { LinkSearchList as default };

package/dist/esm/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';
+
+var LinkSearchListItem = function LinkSearchListItem(_ref) {
+  var item = _ref.item,
+      selected = _ref.selected,
+      active = _ref.active,
+      id = _ref.id,
+      role = _ref.role,
+      intl = _ref.intl,
+      onSelect = _ref.onSelect,
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseLeave = _ref.onMouseLeave;
+
+  var handleSelect = function handleSelect() {
+    return onSelect(item.objectId);
+  };
+
+  var handleMouseEnter = function handleMouseEnter() {
+    return onMouseEnter(item.objectId);
+  };
+
+  var handleMouseLeave = function handleMouseLeave() {
+    return 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);
+
+var ItemTimeStamp = function ItemTimeStamp(props) {
+  var date = props.date;
+
+  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 || ''));
+};
+
+var ListItemIcon = function ListItemIcon(props) {
+  var item = props.item,
+      intl = props.intl;
+  var icon = item.icon,
+      iconAlt = item.iconAlt;
+
+  if (!icon) {
+    return null;
+  }
+
+  var alt = typeof iconAlt === 'string' ? iconAlt : intl.formatMessage(iconAlt);
+
+  if (typeof icon !== 'string') {
+    var Glyph = icon;
+    return jsx(ItemIconWrapper, null, jsx(Glyph, {
+      alt: alt
+    }));
+  }
+
+  return jsx(ItemIconWrapper, null, jsx("img", {
+    src: icon,
+    alt: alt,
+    css: ImgStyles
+  }));
+};

package/dist/esm/ui/PanelTextInput.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "label", "autoFocus", "onSubmit", "onRedo", "onUndo", "onChange", "onKeyDown", "onClear", "clearLabel", "error"];
+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';
+
+var PanelTextInput = function PanelTextInput(props) {
+  var name = props.name,
+      label = props.label,
+      autoFocus = props.autoFocus,
+      onSubmit = props.onSubmit,
+      onRedo = props.onRedo,
+      onUndo = props.onUndo,
+      onChange = props.onChange,
+      onKeyDown = props.onKeyDown,
+      onClear = props.onClear,
+      clearLabel = props.clearLabel,
+      error = props.error,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var inputRef = useRef(null);
+  var handleRef = useCallback(function (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]);
+  var handleChange = useCallback(function (e) {
+    onChange(e.currentTarget.value);
+  }, [onChange]);
+  var handleKeydown = useCallback(function (e) {
+    var 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]);
+  var handleClear = useCallback(function () {
+    if (inputRef.current && onClear) {
+      inputRef.current.focus();
+      onClear();
+    }
+  }, [onClear]);
+  var 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
+  }, function (_ref) {
+    var fieldProps = _ref.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/esm/ui/announcer.js

@@ -0,0 +1,51 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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
+var timer;
+var Announcer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$ariaAtomic = _ref.ariaAtomic,
+      ariaAtomic = _ref$ariaAtomic === void 0 ? 'true' : _ref$ariaAtomic,
+      _ref$ariaLive = _ref.ariaLive,
+      ariaLive = _ref$ariaLive === void 0 ? 'polite' : _ref$ariaLive,
+      _ref$ariaRelevant = _ref.ariaRelevant,
+      ariaRelevant = _ref$ariaRelevant === void 0 ? 'all' : _ref$ariaRelevant,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? 'status' : _ref$role,
+      _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text,
+      _ref$delay = _ref.delay,
+      delay = _ref$delay === void 0 ? 0 : _ref$delay;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      contentRendered = _useState2[0],
+      setContentRendered = _useState2[1];
+
+  useEffect(function () {
+    clearTimeout(timer);
+    setContentRendered(false);
+    timer = setTimeout(function () {
+      setContentRendered(true);
+    }, delay);
+    return function () {
+      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);