@atlaskit/link-picker 0.9.0 → 1.0.0

package/dist/cjs/utils.js

@@ -3,23 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.relativeFontSizeToBase16 = exports.isUndoEvent = exports.isRedoEvent = void 0;
+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;
 

package/dist/cjs/version.json

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

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

@@ -2,13 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import React, { PureComponent } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { messages } from '../messages';
-import PanelTextInput from './PanelTextInput';
-import LinkSearchList from './LinkSearchList';
+import PanelTextInput from './text-input';
+import LinkSearchList from './link-search-list';
 import { normalizeUrl, isSafeUrl } from '../url';
-import { recentListStyles, Container, SearchIconWrapper, ListTitleStyles } from '../styles';
+import { recentListStyles, containerStyles, searchIconStyles, listTitleStyles } from './styled';
 import { browser } from '../browser';
 import { transformTimeStamp } from '../transformTimeStamp';
 import Announcer from './announcer';
@@ -319,17 +319,26 @@ class LinkPicker extends PureComponent {
 
     try {
       while (queryVersion === this.queryVersion) {
-        const {
-          done,
-          value
-        } = await updates.next();
+        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),
+          items: limit(value.data),
           isLoading: !done
         });
 
@@ -370,7 +379,8 @@ class LinkPicker extends PureComponent {
     // for details: https://a11y-internal.atlassian.net/browse/AK-740
 
     const screenReaderText = browser.safari && this.getScreenReaderText();
-    const searchIcon = activePlugin && jsx(SearchIconWrapper, {
+    const searchIcon = activePlugin && jsx("span", {
+      css: searchIconStyles,
       "data-testid": "link-picker-search-icon"
     }, jsx(EditorSearchIcon, {
       size: "medium",
@@ -380,8 +390,9 @@ class LinkPicker extends PureComponent {
       "data-testid": "link-picker",
       className: "recent-list",
       css: recentListStyles
-    }, jsx(Container, {
-      innerRef: this.wrapperRef
+    }, jsx("div", {
+      css: containerStyles,
+      ref: this.wrapperRef
     }, screenReaderText && jsx(Announcer, {
       ariaLive: "assertive",
       text: screenReaderText,
@@ -425,7 +436,7 @@ class LinkPicker extends PureComponent {
       onClear: this.handleClearDisplayText,
       clearLabel: formatMessage(messages.clearText)
     }), !!items.length && jsx("div", {
-      css: ListTitleStyles,
+      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", {

package/dist/es2019/ui/{LinkSearchList.js → link-search-list/index.js}

@@ -1,20 +1,9 @@
-import React from 'react';
+/** @jsx jsx */
 import { PureComponent } from 'react';
+import { jsx } from '@emotion/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;
-`;
+import LinkSearchListItem from '../list-item';
+import { listContainerStyles, spinnerContainerStyles, listStyles } from './styled';
 export default class LinkSearchList extends PureComponent {
   render() {
     const {
@@ -34,12 +23,14 @@ export default class LinkSearchList extends PureComponent {
     let loadingContent;
 
     if (items && items.length > 0) {
-      itemsContent = /*#__PURE__*/React.createElement(List, {
+      itemsContent = jsx("ul", {
+        "data-testid": "link-search-list",
+        css: listStyles,
         id: id,
         role: role,
         "aria-controls": ariaControls,
         "aria-labelledby": ariaLabelledBy
-      }, items.map((item, index) => /*#__PURE__*/React.createElement(LinkSearchListItem, {
+      }, items.map((item, index) => jsx(LinkSearchListItem, {
         id: `link-search-list-item-${index}`,
         role: role && 'option',
         item: item,
@@ -53,13 +44,17 @@ export default class LinkSearchList extends PureComponent {
     }
 
     if (isLoading) {
-      loadingContent = /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, {
+      loadingContent = jsx("div", {
+        css: spinnerContainerStyles
+      }, jsx(Spinner, {
         testId: "link-picker.results-loading-indicator",
         size: "medium"
       }));
     }
 
-    return /*#__PURE__*/React.createElement(ListContainer, null, itemsContent, loadingContent);
+    return jsx("div", {
+      css: listContainerStyles
+    }, itemsContent, loadingContent);
   }
 
 }

package/dist/es2019/ui/link-search-list/styled.js

@@ -0,0 +1,13 @@
+import { css } from '@emotion/react';
+export const listContainerStyles = css`
+  padding-top: 0;
+`;
+export const spinnerContainerStyles = css`
+  text-align: center;
+  min-height: 80px;
+  margin-top: 30px;
+`;
+export const listStyles = css`
+  padding: 0;
+  list-style: none;
+`;

package/dist/es2019/ui/list-item/index.js

@@ -0,0 +1,88 @@
+/** @jsx jsx */
+import { Fragment } from 'react';
+import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { transformTimeStamp } from '../../transformTimeStamp';
+import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
+
+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);
+
+  const container = item.container || null;
+  const date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
+  return jsx("div", {
+    css: composeListItemStyles(active, selected),
+    role: role,
+    id: id,
+    "aria-selected": selected,
+    "data-testid": "link-search-list-item",
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: handleSelect
+  }, jsx(ListItemIcon, {
+    item: item,
+    intl: intl
+  }), jsx("div", {
+    css: itemNameStyles
+  }, jsx("div", {
+    "data-testid": "link-search-list-item-title",
+    css: listItemNameStyles
+  }, item.name), jsx("div", {
+    "data-testid": "link-search-list-item-subtitle",
+    css: listItemContextStyles
+  }, container, container && date && jsx(Fragment, null, "\xA0 \u2022\xA0 "), date && jsx(Fragment, null, formatDate(date)))));
+};
+
+export default injectIntl(LinkSearchListItem);
+
+const formatDate = date => {
+  return [date.pageAction, date.dateString, date.timeSince].filter(Boolean).join(' ');
+};
+
+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("span", {
+      css: itemIconStyles
+    }, jsx(Glyph, {
+      alt: alt
+    }));
+  }
+
+  return jsx("span", {
+    css: itemIconStyles
+  }, jsx("img", {
+    src: icon,
+    alt: alt,
+    css: imgStyles
+  }));
+};

package/dist/es2019/ui/list-item/styled.js

@@ -0,0 +1,65 @@
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/react';
+import { B50, N300, N800, N20, B400 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants'; // AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+import { fontSizeSmall, fontSize } from '@atlaskit/theme';
+export const relativeFontSizeToBase16 = px => {
+  if (typeof px === 'string') {
+    px = parseInt(px);
+  }
+
+  if (isNaN(px)) {
+    throw new Error(`Invalid font size: '${px}'`);
+  }
+
+  return `${px / 16}rem`;
+};
+const listItemBaseStyles = css`
+  display: flex;
+  padding: ${gridSize()}px ${gridSize() * 2}px;
+  margin: 0 -${gridSize() * 2}px;
+  cursor: pointer;
+`;
+const listItemBoxShadow = css`
+  box-shadow: inset 2px 0px 0px ${token('color.border.selected', B400)};
+`;
+const listItemActive = css`
+  background-color: ${token('color.background.neutral.subtle.hovered', N20)};
+`;
+const listItemSelected = css`
+  background-color: ${token('color.background.selected', B50)};
+`;
+export const composeListItemStyles = (active = false, selected = false) => {
+  const hasShadow = active || selected;
+  return css`
+    ${listItemBaseStyles};
+    ${active && listItemActive};
+    ${selected && listItemSelected};
+    ${hasShadow && listItemBoxShadow};
+  `;
+};
+export const itemNameStyles = css`
+  overflow: hidden;
+`;
+export const listItemNameStyles = css`
+  color: ${token('color.text', N800)};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 20px;
+`;
+export const listItemContextStyles = css`
+  color: ${token('color.text', N300)};
+  font-size: ${relativeFontSizeToBase16(fontSizeSmall())};
+  line-height: ${fontSize()}px;
+`;
+export const itemIconStyles = css`
+  min-width: ${gridSize() * 2}px;
+  margin-top: 3px;
+  margin-right: 12px;
+`;
+export const imgStyles = css`
+  max-width: ${gridSize() * 2}px;
+`;

package/dist/es2019/ui/styled.js

@@ -0,0 +1,28 @@
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/react';
+import { N500 } from '@atlaskit/theme/colors'; // AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+import { typography } from '@atlaskit/theme';
+import { gridSize } from '@atlaskit/theme/constants';
+const LINK_PICKER_WIDTH_IN_PX = 342;
+export const recentListStyles = css`
+  width: ${LINK_PICKER_WIDTH_IN_PX}px;
+`;
+export const containerStyles = css`
+  padding: ${gridSize() * 2}px;
+  width: 100%;
+  overflow: hidden;
+  line-height: initial;
+  box-sizing: border-box;
+`;
+export const searchIconStyles = css`
+  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;
+`;

package/dist/es2019/ui/{PanelTextInput.js → text-input/index.js}

@@ -1,11 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useRef } from 'react';
+
+/** @jsx jsx */
+import { useCallback, useRef, Fragment } from 'react';
+import { jsx } from '@emotion/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';
+import { isRedoEvent, isUndoEvent } from '../../utils';
+import { clearTextButtonStyles, fieldStyles } from './styled';
 
 const PanelTextInput = props => {
   const {
@@ -63,28 +66,31 @@ const PanelTextInput = props => {
       onClear();
     }
   }, [onClear]);
-  const clearText = restProps.value !== '' && /*#__PURE__*/React.createElement(Tooltip, {
+  const clearText = restProps.value !== '' && jsx(Tooltip, {
     content: clearLabel
-  }, /*#__PURE__*/React.createElement(ClearText, {
+  }, jsx("button", {
+    css: clearTextButtonStyles,
     onClick: handleClear,
     "data-testid": "clear-text"
-  }, /*#__PURE__*/React.createElement(Selectclear, {
+  }, jsx(Selectclear, {
     size: "medium",
     label: clearLabel || ''
   })));
-  return /*#__PURE__*/React.createElement(FieldWrapper, null, /*#__PURE__*/React.createElement(Field, {
+  return jsx("div", {
+    css: fieldStyles
+  }, jsx(Field, {
     label: label,
     name: name
   }, ({
     fieldProps
   }) => {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textfield, _extends({}, fieldProps, restProps, {
+    return jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, restProps, {
       onKeyDown: handleKeydown,
       onChange: handleChange,
       ref: handleRef,
       elemAfterInput: clearText,
       isInvalid: !!error
-    })), error && /*#__PURE__*/React.createElement(ErrorMessage, {
+    })), error && jsx(ErrorMessage, {
       testId: "link-error"
     }, error));
   }));

package/dist/es2019/ui/text-input/styled.js

@@ -0,0 +1,15 @@
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/react';
+import { N500 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants';
+export const clearTextButtonStyles = css`
+  padding: 0;
+  margin-right: ${gridSize() / 2}px;
+  color: ${token('color.icon.subtle', N500)};
+  background: transparent;
+  border: none;
+  cursor: pointer;
+`;
+export const fieldStyles = css`
+  margin-bottom: ${gridSize() * 2}px;
+`;

package/dist/es2019/utils.js

@@ -1,15 +1,4 @@
 import { browser } from './browser';
-export const relativeFontSizeToBase16 = px => {
-  if (typeof px === 'string') {
-    px = parseInt(px);
-  }
-
-  if (isNaN(px)) {
-    throw new Error(`Invalid font size: '${px}'`);
-  }
-
-  return `${px / 16}rem`;
-};
 const KeyZCode = 90;
 const KeyYCode = 89;
 export const isUndoEvent = e => {

package/dist/es2019/version.json

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

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

@@ -18,13 +18,13 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @jsx jsx */
 import React, { PureComponent } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { messages } from '../messages';
-import PanelTextInput from './PanelTextInput';
-import LinkSearchList from './LinkSearchList';
+import PanelTextInput from './text-input';
+import LinkSearchList from './link-search-list';
 import { normalizeUrl, isSafeUrl } from '../url';
-import { recentListStyles, Container, SearchIconWrapper, ListTitleStyles } from '../styles';
+import { recentListStyles, containerStyles, searchIconStyles, listTitleStyles } from './styled';
 import { browser } from '../browser';
 import { transformTimeStamp } from '../transformTimeStamp';
 import Announcer from './announcer';
@@ -335,7 +335,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
     key: "updateResults",
     value: function () {
       var _updateResults = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var queryVersion, activePlugin, updates, _yield$updates$next, done, value;
+        var queryVersion, activePlugin, updates, done, value, _result$done, result;
 
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) {
@@ -363,59 +363,78 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
 
               case 7:
                 if (!(queryVersion === this.queryVersion)) {
-                  _context2.next = 20;
+                  _context2.next = 29;
                   break;
                 }
 
-                _context2.next = 10;
+                done = false;
+                value = void 0;
+
+                if (!(updates instanceof Promise)) {
+                  _context2.next = 17;
+                  break;
+                }
+
+                done = true;
+                _context2.next = 14;
+                return updates;
+
+              case 14:
+                value = _context2.sent;
+                _context2.next = 22;
+                break;
+
+              case 17:
+                _context2.next = 19;
                 return updates.next();
 
-              case 10:
-                _yield$updates$next = _context2.sent;
-                done = _yield$updates$next.done;
-                value = _yield$updates$next.value;
+              case 19:
+                result = _context2.sent;
+                done = (_result$done = result.done) !== null && _result$done !== void 0 ? _result$done : false;
+                value = result.value;
 
+              case 22:
                 if (!(queryVersion !== this.queryVersion)) {
-                  _context2.next = 15;
+                  _context2.next = 24;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 15:
+              case 24:
                 this.setState({
-                  items: limit(value),
+                  items: limit(value.data),
                   isLoading: !done
                 });
 
                 if (!done) {
-                  _context2.next = 18;
+                  _context2.next = 27;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 18:
+              case 27:
                 _context2.next = 7;
                 break;
 
-              case 20:
-                _context2.next = 25;
+              case 29:
+                _context2.next = 34;
                 break;
 
-              case 22:
-                _context2.prev = 22;
+              case 31:
+                _context2.prev = 31;
                 _context2.t0 = _context2["catch"](6);
                 this.setState({
                   isLoading: false
                 });
 
-              case 25:
+              case 34:
               case "end":
                 return _context2.stop();
             }
           }
-        }, _callee2, this, [[6, 22]]);
+        }, _callee2, this, [[6, 31]]);
       }));
 
       function updateResults() {
@@ -447,7 +466,8 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
       // for details: https://a11y-internal.atlassian.net/browse/AK-740
 
       var screenReaderText = browser.safari && this.getScreenReaderText();
-      var searchIcon = activePlugin && jsx(SearchIconWrapper, {
+      var searchIcon = activePlugin && jsx("span", {
+        css: searchIconStyles,
         "data-testid": "link-picker-search-icon"
       }, jsx(EditorSearchIcon, {
         size: "medium",
@@ -457,8 +477,9 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         "data-testid": "link-picker",
         className: "recent-list",
         css: recentListStyles
-      }, jsx(Container, {
-        innerRef: this.wrapperRef
+      }, jsx("div", {
+        css: containerStyles,
+        ref: this.wrapperRef
       }, screenReaderText && jsx(Announcer, {
         ariaLive: "assertive",
         text: screenReaderText,
@@ -502,7 +523,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         onClear: this.handleClearDisplayText,
         clearLabel: formatMessage(messages.clearText)
       }), !!items.length && jsx("div", {
-        css: ListTitleStyles,
+        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", {