@atlaskit/link-picker 1.4.1 → 1.6.0

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

@@ -7,19 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _react = require("react");
-
-var _react2 = require("@emotion/react");
+var _react = require("@emotion/react");
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
@@ -27,76 +15,60 @@ var _listItem = _interopRequireDefault(require("../list-item"));
 
 var _styled = require("./styled");
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
-
-var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(LinkSearchList, _PureComponent);
-
-  var _super = _createSuper(LinkSearchList);
-
-  function LinkSearchList() {
-    (0, _classCallCheck2.default)(this, LinkSearchList);
-    return _super.apply(this, arguments);
+var _ = require("../");
+
+/** @jsx jsx */
+var LinkSearchList = function LinkSearchList(_ref) {
+  var onSelect = _ref.onSelect,
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseLeave = _ref.onMouseLeave,
+      items = _ref.items,
+      activeIndex = _ref.activeIndex,
+      selectedIndex = _ref.selectedIndex,
+      isLoading = _ref.isLoading,
+      ariaControls = _ref.ariaControls,
+      ariaLabelledBy = _ref.ariaLabelledBy,
+      role = _ref.role,
+      id = _ref.id;
+  var itemsContent;
+  var loadingContent;
+
+  if (items && items.length > 0) {
+    itemsContent = (0, _react.jsx)("ul", {
+      id: id,
+      role: role,
+      css: _styled.listStyles,
+      "aria-controls": ariaControls,
+      "aria-labelledby": ariaLabelledBy,
+      "data-testid": _.testIds.searchResultList
+    }, items.map(function (item, index) {
+      return (0, _react.jsx)(_listItem.default, {
+        id: "".concat(_.testIds.searchResultItem, "-").concat(index),
+        role: role && 'option',
+        item: item,
+        selected: selectedIndex === index,
+        active: activeIndex === index,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onSelect: onSelect,
+        key: item.objectId
+      });
+    }));
   }
 
-  (0, _createClass2.default)(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 = (0, _react2.jsx)("ul", {
-          "data-testid": "link-search-list",
-          css: _styled.listStyles,
-          id: id,
-          role: role,
-          "aria-controls": ariaControls,
-          "aria-labelledby": ariaLabelledBy
-        }, items.map(function (item, index) {
-          return (0, _react2.jsx)(_listItem.default, {
-            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 = (0, _react2.jsx)("div", {
-          css: _styled.spinnerContainerStyles
-        }, (0, _react2.jsx)(_spinner.default, {
-          testId: "link-picker.results-loading-indicator",
-          size: "medium"
-        }));
-      }
+  if (isLoading) {
+    loadingContent = (0, _react.jsx)("div", {
+      css: _styled.spinnerContainerStyles
+    }, (0, _react.jsx)(_spinner.default, {
+      testId: _.testIds.searchResultLoadingIndicator,
+      size: "medium"
+    }));
+  }
 
-      return (0, _react2.jsx)("div", {
-        css: _styled.listContainerStyles
-      }, itemsContent, loadingContent);
-    }
-  }]);
-  return LinkSearchList;
-}(_react.PureComponent);
+  return (0, _react.jsx)("div", {
+    css: _styled.listContainerStyles
+  }, itemsContent, loadingContent);
+};
 
-exports.default = LinkSearchList;
+var _default = LinkSearchList;
+exports.default = _default;

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

@@ -15,6 +15,8 @@ var _transformTimeStamp = require("../transformTimeStamp");
 
 var _styled = require("./styled");
 
+var _ = require("../");
+
 /** @jsx jsx */
 var LinkSearchListItem = function LinkSearchListItem(_ref) {
   var item = _ref.item,
@@ -46,7 +48,7 @@ var LinkSearchListItem = function LinkSearchListItem(_ref) {
     role: role,
     id: id,
     "aria-selected": selected,
-    "data-testid": "link-search-list-item",
+    "data-testid": _.testIds.searchResultItem,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onClick: handleSelect
@@ -56,10 +58,10 @@ var LinkSearchListItem = function LinkSearchListItem(_ref) {
   }), (0, _react2.jsx)("div", {
     css: _styled.itemNameStyles
   }, (0, _react2.jsx)("div", {
-    "data-testid": "link-search-list-item-title",
+    "data-testid": "".concat(_.testIds.searchResultItem, "-title"),
     css: _styled.listItemNameStyles
   }, item.name), (0, _react2.jsx)("div", {
-    "data-testid": "link-search-list-item-subtitle",
+    "data-testid": "".concat(_.testIds.searchResultItem, "-subtitle"),
     css: _styled.listItemContextStyles
   }, container, container && date && (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022\xA0 "), date && (0, _react2.jsx)(_react.Fragment, null, formatDate(date)))));
 };

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.searchIconStyles = exports.rootContainerStylesForLoader = exports.rootContainerStyles = exports.listTitleStyles = void 0;
+exports.tabsWrapperStyles = exports.searchIconStyles = exports.rootContainerStylesForLoader = exports.rootContainerStyles = exports.listTitleStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,7 +19,7 @@ var _theme = require("@atlaskit/theme");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 var LINK_PICKER_WIDTH_IN_PX = 342;
 var LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
@@ -30,4 +30,6 @@ exports.rootContainerStylesForLoader = rootContainerStylesForLoader;
 var searchIconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon', _colors.N500));
 exports.searchIconStyles = searchIconStyles;
 var listTitleStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), _theme.typography.h100(), (0, _constants.gridSize)() / 2);
-exports.listTitleStyles = listTitleStyles;
+exports.listTitleStyles = listTitleStyles;
+var tabsWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: -", "px;\n  margin-right: -", "px;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)());
+exports.tabsWrapperStyles = tabsWrapperStyles;

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

@@ -27,6 +27,8 @@ var _utils = require("../utils");
 
 var _styled = require("./styled");
 
+var _ = require("../");
+
 var _excluded = ["name", "label", "autoFocus", "onSubmit", "onRedo", "onUndo", "onChange", "onKeyDown", "onClear", "clearLabel", "error"];
 
 var PanelTextInput = function PanelTextInput(props) {
@@ -80,15 +82,15 @@ var PanelTextInput = function PanelTextInput(props) {
   var handleClear = (0, _react.useCallback)(function () {
     if (inputRef.current && onClear) {
       inputRef.current.focus();
-      onClear();
+      onClear(name);
     }
-  }, [onClear]);
+  }, [name, onClear]);
   var clearText = restProps.value !== '' && (0, _react2.jsx)(_tooltip.default, {
     content: clearLabel
   }, (0, _react2.jsx)("button", {
     css: _styled.clearTextButtonStyles,
     onClick: handleClear,
-    "data-testid": "clear-text"
+    "data-testid": _.testIds.clearUrlButton
   }, (0, _react2.jsx)(_selectClear.default, {
     size: "medium",
     label: clearLabel || ''
@@ -107,7 +109,7 @@ var PanelTextInput = function PanelTextInput(props) {
       elemAfterInput: clearText,
       isInvalid: !!error
     })), error && (0, _react2.jsx)(_form.ErrorMessage, {
-      testId: "link-error"
+      testId: _.testIds.urlError
     }, error));
   }));
 };

package/dist/cjs/version.json

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

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

@@ -0,0 +1,122 @@
+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 { ...state,
+    ...payload
+  };
+}
+
+export function usePlugins(state, plugins) {
+  const [pluginState, dispatch] = useReducer(reducer, {
+    items: [],
+    isLoading: false
+  });
+  const {
+    url,
+    selectedIndex
+  } = state;
+  const {
+    items,
+    isLoading
+  } = pluginState;
+  const activePlugin = !plugins || plugins.length === 0 ? null : plugins[state.activeTab];
+  const queryVersion = useRef(0);
+  const pluginRef = useRef(activePlugin);
+  const selectedItem = items[selectedIndex];
+  const isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
+  useEffect(() => {
+    if (!activePlugin) {
+      return;
+    }
+
+    if (isSelectedItem) {
+      return;
+    }
+
+    if (isSafeUrl(url) && url.length) {
+      dispatch({
+        items: [],
+        isLoading: false
+      });
+      return;
+    }
+
+    const updates = activePlugin.resolve({
+      query: url
+    });
+
+    if (pluginRef.current !== activePlugin) {
+      dispatch({
+        items: [],
+        isLoading: true
+      });
+    } else {
+      dispatch({
+        isLoading: true
+      });
+    }
+
+    const newQuery = ++queryVersion.current;
+
+    const updateResults = async () => {
+      try {
+        while (newQuery === queryVersion.current) {
+          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 (newQuery !== queryVersion.current) {
+            return;
+          }
+
+          dispatch({
+            items: limit(value.data),
+            isLoading: !done
+          });
+
+          if (done) {
+            return;
+          }
+        }
+      } catch {
+        dispatch({
+          isLoading: false
+        });
+      }
+    };
+
+    updateResults();
+  }, [activePlugin, queryVersion, url, isSelectedItem]);
+  const tabs = useMemo(() => {
+    if (!plugins || plugins.length <= 1) {
+      return [];
+    }
+
+    return plugins.filter(plugin => !!plugin.tabTitle).map(plugin => ({
+      tabTitle: plugin.tabTitle
+    }));
+  }, [plugins]);
+  return {
+    tabs,
+    items,
+    isLoading,
+    isSelectedItem,
+    isActivePlugin: !!activePlugin
+  };
+}
+
+function limit(items) {
+  return items.slice(0, RECENT_SEARCH_LIST_SIZE);
+}