@atlaskit/link-picker 1.4.1 → 1.6.0

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

@@ -1,60 +1,59 @@
 /** @jsx jsx */
-import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
 import LinkSearchListItem from '../list-item';
 import { listContainerStyles, spinnerContainerStyles, listStyles } from './styled';
-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;
+import { testIds } from '../';
 
-    if (items && items.length > 0) {
-      itemsContent = jsx("ul", {
-        "data-testid": "link-search-list",
-        css: listStyles,
-        id: id,
-        role: role,
-        "aria-controls": ariaControls,
-        "aria-labelledby": ariaLabelledBy
-      }, items.map((item, index) => jsx(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
-      })));
-    }
+const LinkSearchList = ({
+  onSelect,
+  onMouseEnter,
+  onMouseLeave,
+  items,
+  activeIndex,
+  selectedIndex,
+  isLoading,
+  ariaControls,
+  ariaLabelledBy,
+  role,
+  id
+}) => {
+  let itemsContent;
+  let loadingContent;
 
-    if (isLoading) {
-      loadingContent = jsx("div", {
-        css: spinnerContainerStyles
-      }, jsx(Spinner, {
-        testId: "link-picker.results-loading-indicator",
-        size: "medium"
-      }));
-    }
+  if (items && items.length > 0) {
+    itemsContent = jsx("ul", {
+      id: id,
+      role: role,
+      css: listStyles,
+      "aria-controls": ariaControls,
+      "aria-labelledby": ariaLabelledBy,
+      "data-testid": testIds.searchResultList
+    }, items.map((item, index) => jsx(LinkSearchListItem, {
+      id: `${testIds.searchResultItem}-${index}`,
+      role: role && 'option',
+      item: item,
+      selected: selectedIndex === index,
+      active: activeIndex === index,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onSelect: onSelect,
+      key: item.objectId
+    })));
+  }
 
-    return jsx("div", {
-      css: listContainerStyles
-    }, itemsContent, loadingContent);
+  if (isLoading) {
+    loadingContent = jsx("div", {
+      css: spinnerContainerStyles
+    }, jsx(Spinner, {
+      testId: testIds.searchResultLoadingIndicator,
+      size: "medium"
+    }));
   }
 
-}
+  return jsx("div", {
+    css: listContainerStyles
+  }, itemsContent, loadingContent);
+};
+
+export default LinkSearchList;

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

@@ -4,6 +4,7 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { transformTimeStamp } from '../transformTimeStamp';
 import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
+import { testIds } from '../';
 
 const LinkSearchListItem = ({
   item,
@@ -29,7 +30,7 @@ const LinkSearchListItem = ({
     role: role,
     id: id,
     "aria-selected": selected,
-    "data-testid": "link-search-list-item",
+    "data-testid": testIds.searchResultItem,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onClick: handleSelect
@@ -39,10 +40,10 @@ const LinkSearchListItem = ({
   }), jsx("div", {
     css: itemNameStyles
   }, jsx("div", {
-    "data-testid": "link-search-list-item-title",
+    "data-testid": `${testIds.searchResultItem}-title`,
     css: listItemNameStyles
   }, item.name), jsx("div", {
-    "data-testid": "link-search-list-item-subtitle",
+    "data-testid": `${testIds.searchResultItem}-subtitle`,
     css: listItemContextStyles
   }, container, container && date && jsx(Fragment, null, "\xA0 \u2022\xA0 "), date && jsx(Fragment, null, formatDate(date)))));
 };

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

@@ -29,4 +29,8 @@ export const listTitleStyles = css`
   ${typography.h100()}
   text-transform: uppercase;
   margin-bottom: ${gridSize() / 2}px;
+`;
+export const tabsWrapperStyles = css`
+  margin-left: -${gridSize()}px;
+  margin-right: -${gridSize()}px;
 `;

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

@@ -9,6 +9,7 @@ import Textfield from '@atlaskit/textfield';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
 import { isRedoEvent, isUndoEvent } from '../utils';
 import { clearTextButtonStyles, fieldStyles } from './styled';
+import { testIds } from '../';
 
 const PanelTextInput = props => {
   const {
@@ -63,15 +64,15 @@ const PanelTextInput = props => {
   const handleClear = useCallback(() => {
     if (inputRef.current && onClear) {
       inputRef.current.focus();
-      onClear();
+      onClear(name);
     }
-  }, [onClear]);
+  }, [name, onClear]);
   const clearText = restProps.value !== '' && jsx(Tooltip, {
     content: clearLabel
   }, jsx("button", {
     css: clearTextButtonStyles,
     onClick: handleClear,
-    "data-testid": "clear-text"
+    "data-testid": testIds.clearUrlButton
   }, jsx(Selectclear, {
     size: "medium",
     label: clearLabel || ''
@@ -91,7 +92,7 @@ const PanelTextInput = props => {
       elemAfterInput: clearText,
       isInvalid: !!error
     })), error && jsx(ErrorMessage, {
-      testId: "link-error"
+      testId: testIds.urlError
     }, error));
   }));
 };

package/dist/es2019/version.json

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

package/dist/esm/services/use-plugins/index.js

@@ -0,0 +1,187 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { useEffect, useRef, useReducer, useMemo } from 'react';
+import { RECENT_SEARCH_LIST_SIZE } from '../../ui/link-picker';
+import { isSafeUrl } from '../../ui/link-picker/url';
+
+function reducer(state, payload) {
+  return _objectSpread(_objectSpread({}, state), payload);
+}
+
+export function usePlugins(state, plugins) {
+  var _useReducer = useReducer(reducer, {
+    items: [],
+    isLoading: false
+  }),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      pluginState = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var url = state.url,
+      selectedIndex = state.selectedIndex;
+  var items = pluginState.items,
+      isLoading = pluginState.isLoading;
+  var activePlugin = !plugins || plugins.length === 0 ? null : plugins[state.activeTab];
+  var queryVersion = useRef(0);
+  var pluginRef = useRef(activePlugin);
+  var selectedItem = items[selectedIndex];
+  var isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
+  useEffect(function () {
+    if (!activePlugin) {
+      return;
+    }
+
+    if (isSelectedItem) {
+      return;
+    }
+
+    if (isSafeUrl(url) && url.length) {
+      dispatch({
+        items: [],
+        isLoading: false
+      });
+      return;
+    }
+
+    var updates = activePlugin.resolve({
+      query: url
+    });
+
+    if (pluginRef.current !== activePlugin) {
+      dispatch({
+        items: [],
+        isLoading: true
+      });
+    } else {
+      dispatch({
+        isLoading: true
+      });
+    }
+
+    var newQuery = ++queryVersion.current;
+
+    var updateResults = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var done, value, _result$done, result;
+
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.prev = 0;
+
+              case 1:
+                if (!(newQuery === queryVersion.current)) {
+                  _context.next = 23;
+                  break;
+                }
+
+                done = false;
+                value = void 0;
+
+                if (!(updates instanceof Promise)) {
+                  _context.next = 11;
+                  break;
+                }
+
+                done = true;
+                _context.next = 8;
+                return updates;
+
+              case 8:
+                value = _context.sent;
+                _context.next = 16;
+                break;
+
+              case 11:
+                _context.next = 13;
+                return updates.next();
+
+              case 13:
+                result = _context.sent;
+                done = (_result$done = result.done) !== null && _result$done !== void 0 ? _result$done : false;
+                value = result.value;
+
+              case 16:
+                if (!(newQuery !== queryVersion.current)) {
+                  _context.next = 18;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 18:
+                dispatch({
+                  items: limit(value.data),
+                  isLoading: !done
+                });
+
+                if (!done) {
+                  _context.next = 21;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 21:
+                _context.next = 1;
+                break;
+
+              case 23:
+                _context.next = 28;
+                break;
+
+              case 25:
+                _context.prev = 25;
+                _context.t0 = _context["catch"](0);
+                dispatch({
+                  isLoading: false
+                });
+
+              case 28:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[0, 25]]);
+      }));
+
+      return function updateResults() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    updateResults();
+  }, [activePlugin, queryVersion, url, isSelectedItem]);
+  var tabs = useMemo(function () {
+    if (!plugins || plugins.length <= 1) {
+      return [];
+    }
+
+    return plugins.filter(function (plugin) {
+      return !!plugin.tabTitle;
+    }).map(function (plugin) {
+      return {
+        tabTitle: plugin.tabTitle
+      };
+    });
+  }, [plugins]);
+  return {
+    tabs: tabs,
+    items: items,
+    isLoading: isLoading,
+    isSelectedItem: isSelectedItem,
+    isActivePlugin: !!activePlugin
+  };
+}
+
+function limit(items) {
+  return items.slice(0, RECENT_SEARCH_LIST_SIZE);
+}