@atlaskit/link-picker 1.2.1 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/link-picker
 
+## 1.4.1
+
+### Patch Changes
+
+- [`140453ba9f6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/140453ba9f6) - [ux] Move tabs to be below input fields
+
+## 1.4.0
+
+### Minor Changes
+
+- [`3b5e61f9b3b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3b5e61f9b3b) - [ux] Adds in TAB UI support for Link Picker
+
+## 1.3.0
+
+### Minor Changes
+
+- [`0ddad39a369`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ddad39a369) - [ux] Lazy load the link-picker instead. The lazily loaded picker is now the default that's exported
+
 ## 1.2.1
 
 ### Patch Changes

package/dist/cjs/ui/index.js

@@ -1,25 +1,29 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ComposedLinkPicker = void 0;
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
+var _reactLooselyLazy = require("react-loosely-lazy");
+
 var _version = require("../version.json");
 
 var _errorBoundaryFallback = require("./error-boundary-fallback");
 
-var _linkPicker = require("./link-picker");
+var _loaderFallback = require("./loader-fallback");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var COMPONENT_NAME = 'LinkPicker';
 var ANALYTICS_CHANNEL = 'media';
@@ -28,11 +32,18 @@ var PACKAGE_DATA = {
   packageVersion: _version.version,
   componentName: COMPONENT_NAME
 };
+var LazyLinkPicker = (0, _reactLooselyLazy.lazyForPaint)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./link-picker'));
+  });
+});
 var ComposedLinkPicker = /*#__PURE__*/(0, _react.memo)(function (props) {
   return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsErrorBoundary, {
     channel: ANALYTICS_CHANNEL,
     data: PACKAGE_DATA,
     ErrorComponent: _errorBoundaryFallback.ErrorBoundaryFallback
-  }, /*#__PURE__*/_react.default.createElement(_linkPicker.LinkPickerWithIntl, props));
+  }, /*#__PURE__*/_react.default.createElement(_reactLooselyLazy.LazySuspense, {
+    fallback: _loaderFallback.LoaderFallback
+  }, /*#__PURE__*/_react.default.createElement(LazyLinkPicker, props)));
 });
 exports.ComposedLinkPicker = ComposedLinkPicker;

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

@@ -2,15 +2,17 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RECENT_SEARCH_LIST_SIZE = exports.LinkPickerWithIntl = void 0;
+exports.default = exports.RECENT_SEARCH_LIST_SIZE = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -33,6 +35,8 @@ var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
+var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
+
 var _messages = require("./messages");
 
 var _textInput = _interopRequireDefault(require("./text-input"));
@@ -61,7 +65,7 @@ var _linkSearchNoResults = _interopRequireDefault(require("./link-search-no-resu
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 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; }
 
@@ -160,6 +164,19 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         return [name, container, formattedDate].filter(Boolean).join(', ');
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getTabs", function () {
+      if (_this.props.plugins && _this.props.plugins.length > 1) {
+        return _this.props.plugins.filter(function (plugin) {
+          return !!plugin.tabTitle;
+        }).map(function (plugin) {
+          return {
+            tabTitle: plugin.tabTitle
+          };
+        });
+      }
+
+      return [];
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isUrlPopulatedWithSelectedItem", function () {
       /**
        * When we use ArrowKey to navigate through result items,
@@ -317,7 +334,8 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
       url: (0, _url.normalizeUrl)(props.url) || '',
       displayText: props.displayText || '',
       items: [],
-      invalidUrl: null
+      invalidUrl: null,
+      activePlugin: 0
     };
     /* Cache functions */
 
@@ -347,7 +365,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      return this.props.plugins[0];
+      return this.props.plugins[this.state.activePlugin];
     }
     /**
      * Interface between link picker and plugins to update results
@@ -357,21 +375,23 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
     key: "updateResults",
     value: function () {
       var _updateResults = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var queryVersion, activePlugin, updates, done, value, _result$done, result;
+        var _this2 = this;
+
+        var queryVersion, activePlugin, updates, _loop, _ret;
 
-        return _regenerator.default.wrap(function _callee2$(_context2) {
+        return _regenerator.default.wrap(function _callee2$(_context3) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
                 queryVersion = ++this.queryVersion;
                 activePlugin = this.getActivePlugin();
 
                 if (activePlugin) {
-                  _context2.next = 4;
+                  _context3.next = 4;
                   break;
                 }
 
-                return _context2.abrupt("return");
+                return _context3.abrupt("return");
 
               case 4:
                 updates = activePlugin.resolve({
@@ -381,82 +401,114 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
                   isLoading: true,
                   items: []
                 });
-                _context2.prev = 6;
+                _context3.prev = 6;
+                _loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
+                  var done, value, _result$done, result;
+
+                  return _regenerator.default.wrap(function _loop$(_context2) {
+                    while (1) {
+                      switch (_context2.prev = _context2.next) {
+                        case 0:
+                          done = false;
+                          value = void 0;
+
+                          if (!(updates instanceof Promise)) {
+                            _context2.next = 9;
+                            break;
+                          }
+
+                          done = true;
+                          _context2.next = 6;
+                          return updates;
+
+                        case 6:
+                          value = _context2.sent;
+                          _context2.next = 14;
+                          break;
+
+                        case 9:
+                          _context2.next = 11;
+                          return updates.next();
+
+                        case 11:
+                          result = _context2.sent;
+                          done = (_result$done = result.done) !== null && _result$done !== void 0 ? _result$done : false;
+                          value = result.value;
+
+                        case 14:
+                          if (!(queryVersion !== _this2.queryVersion)) {
+                            _context2.next = 16;
+                            break;
+                          }
+
+                          return _context2.abrupt("return", {
+                            v: void 0
+                          });
+
+                        case 16:
+                          _this2.setState(function (prev) {
+                            return {
+                              items: limit(value.data),
+                              isLoading: !done
+                            };
+                          });
+
+                          if (!done) {
+                            _context2.next = 19;
+                            break;
+                          }
+
+                          return _context2.abrupt("return", {
+                            v: void 0
+                          });
+
+                        case 19:
+                        case "end":
+                          return _context2.stop();
+                      }
+                    }
+                  }, _loop);
+                });
 
-              case 7:
+              case 8:
                 if (!(queryVersion === this.queryVersion)) {
-                  _context2.next = 29;
+                  _context3.next = 15;
                   break;
                 }
 
-                done = false;
-                value = void 0;
-
-                if (!(updates instanceof Promise)) {
-                  _context2.next = 17;
-                  break;
-                }
+                return _context3.delegateYield(_loop(), "t0", 10);
 
-                done = true;
-                _context2.next = 14;
-                return updates;
+              case 10:
+                _ret = _context3.t0;
 
-              case 14:
-                value = _context2.sent;
-                _context2.next = 22;
-                break;
-
-              case 17:
-                _context2.next = 19;
-                return updates.next();
-
-              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 = 24;
+                if (!((0, _typeof2.default)(_ret) === "object")) {
+                  _context3.next = 13;
                   break;
                 }
 
-                return _context2.abrupt("return");
+                return _context3.abrupt("return", _ret.v);
 
-              case 24:
-                this.setState({
-                  items: limit(value.data),
-                  isLoading: !done
-                });
-
-                if (!done) {
-                  _context2.next = 27;
-                  break;
-                }
-
-                return _context2.abrupt("return");
-
-              case 27:
-                _context2.next = 7;
+              case 13:
+                _context3.next = 8;
                 break;
 
-              case 29:
-                _context2.next = 34;
+              case 15:
+                _context3.next = 20;
                 break;
 
-              case 31:
-                _context2.prev = 31;
-                _context2.t0 = _context2["catch"](6);
+              case 17:
+                _context3.prev = 17;
+                _context3.t1 = _context3["catch"](6);
                 this.setState({
                   isLoading: false
                 });
 
-              case 34:
+              case 20:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2, this, [[6, 31]]);
+        }, _callee2, this, [[6, 17]]);
       }));
 
       function updateResults() {
@@ -468,6 +520,8 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
+      var _this3 = this;
+
       var _this$state7 = this.state,
           items = _this$state7.items,
           isLoading = _this$state7.isLoading,
@@ -478,6 +532,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
           displayText = _this$state7.displayText;
       var formatMessage = this.props.intl.formatMessage;
       var activePlugin = this.getActivePlugin();
+      var tabs = this.getTabs();
       var linkPlaceHolder = formatMessage(activePlugin ? _messages.messages.placeholder : _messages.messages.linkPlaceholder);
       var linkLabel = formatMessage(_messages.messages.linkLabel);
       var linkTextLabel = formatMessage(_messages.messages.linkTextLabel);
@@ -542,7 +597,23 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         onChange: this.updateTextInput,
         onClear: this.handleClearDisplayText,
         clearLabel: formatMessage(_messages.messages.clearText)
-      }), !!items.length && (0, _react2.jsx)("div", {
+      }), tabs.length > 0 && (0, _react2.jsx)(_tabs.default, {
+        id: "link-picker-tabs",
+        testId: "link-picker-tabs",
+        onChange: function onChange(activePlugin) {
+          return _this3.setState({
+            activePlugin: activePlugin
+          }, function () {
+            _this3.updateResults();
+          });
+        }
+      }, (0, _react2.jsx)(_tabs.TabList, null, tabs.map(function (tab) {
+        var label = tab.tabTitle;
+        return (0, _react2.jsx)(_tabs.Tab, {
+          key: label,
+          testId: "link-picker-tab"
+        }, label);
+      }))), !!items.length && (0, _react2.jsx)("div", {
         css: _styled.listTitleStyles,
         id: "link-picker-list-title",
         "data-testid": "link-picker-list-title"
@@ -602,5 +673,6 @@ function limit(items) {
   return items.slice(0, RECENT_SEARCH_LIST_SIZE);
 }
 
-var LinkPickerWithIntl = (0, _reactIntlNext.injectIntl)(LinkPicker);
-exports.LinkPickerWithIntl = LinkPickerWithIntl;
+var _default = (0, _reactIntlNext.injectIntl)(LinkPicker);
+
+exports.default = _default;

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.rootContainerStyles = exports.listTitleStyles = void 0;
+exports.searchIconStyles = exports.rootContainerStylesForLoader = exports.rootContainerStyles = exports.listTitleStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -19,13 +19,15 @@ var _theme = require("@atlaskit/theme");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var LINK_PICKER_WIDTH_IN_PX = 342;
 var LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
 var rootContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  padding: ", "px;\n  box-sizing: border-box;\n  line-height: initial;\n  min-height: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX, (0, _constants.gridSize)() * 2, LINK_PICKER_MIN_HEIGHT_IN_PX);
 exports.rootContainerStyles = rootContainerStyles;
-var searchIconStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon', _colors.N500));
+var rootContainerStylesForLoader = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), rootContainerStyles);
+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)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), _theme.typography.h100(), (0, _constants.gridSize)() / 2);
+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;

package/dist/cjs/ui/loader-fallback/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoaderFallback = void 0;
+
+var _react = require("@emotion/react");
+
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+
+var _styled = require("../link-picker/styled");
+
+/** @jsx jsx */
+var LoaderFallback = (0, _react.jsx)("div", {
+  css: _styled.rootContainerStylesForLoader,
+  "data-testid": "link-picker-root-loader-boundary-ui"
+}, (0, _react.jsx)(_spinner.default, {
+  testId: "link-picker.component-loading-indicator",
+  size: "medium"
+}));
+exports.LoaderFallback = LoaderFallback;

package/dist/cjs/version.json

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

package/dist/es2019/ui/index.js

@@ -1,8 +1,9 @@
 import React, { memo } from 'react';
 import { AnalyticsErrorBoundary } from '@atlaskit/analytics-next';
+import { LazySuspense, lazyForPaint } from 'react-loosely-lazy';
 import { name as packageName, version as packageVersion } from '../version.json';
 import { ErrorBoundaryFallback } from './error-boundary-fallback';
-import { LinkPickerWithIntl } from './link-picker';
+import { LoaderFallback } from './loader-fallback';
 const COMPONENT_NAME = 'LinkPicker';
 const ANALYTICS_CHANNEL = 'media';
 const PACKAGE_DATA = {
@@ -10,8 +11,13 @@ const PACKAGE_DATA = {
   packageVersion,
   componentName: COMPONENT_NAME
 };
+const LazyLinkPicker = lazyForPaint(() => import(
+/* webpackChunkName: "@atlaskit-internal_link-picker" */
+'./link-picker'));
 export const ComposedLinkPicker = /*#__PURE__*/memo(props => /*#__PURE__*/React.createElement(AnalyticsErrorBoundary, {
   channel: ANALYTICS_CHANNEL,
   data: PACKAGE_DATA,
   ErrorComponent: ErrorBoundaryFallback
-}, /*#__PURE__*/React.createElement(LinkPickerWithIntl, props)));
+}, /*#__PURE__*/React.createElement(LazySuspense, {
+  fallback: LoaderFallback
+}, /*#__PURE__*/React.createElement(LazyLinkPicker, props))));

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

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
+import Tabs, { Tab, TabList } from '@atlaskit/tabs';
 import { messages } from './messages';
 import PanelTextInput from './text-input';
 import LinkSearchList from './link-search-list';
@@ -88,6 +89,16 @@ class LinkPicker extends PureComponent {
       }
     });
 
+    _defineProperty(this, "getTabs", () => {
+      if (this.props.plugins && this.props.plugins.length > 1) {
+        return this.props.plugins.filter(plugin => !!plugin.tabTitle).map(plugin => ({
+          tabTitle: plugin.tabTitle
+        }));
+      }
+
+      return [];
+    });
+
     _defineProperty(this, "isUrlPopulatedWithSelectedItem", () => {
       /**
        * When we use ArrowKey to navigate through result items,
@@ -266,7 +277,8 @@ class LinkPicker extends PureComponent {
       url: normalizeUrl(props.url) || '',
       displayText: props.displayText || '',
       items: [],
-      invalidUrl: null
+      invalidUrl: null,
+      activePlugin: 0
     };
     /* Cache functions */
 
@@ -293,7 +305,7 @@ class LinkPicker extends PureComponent {
       return null;
     }
 
-    return this.props.plugins[0];
+    return this.props.plugins[this.state.activePlugin];
   }
   /**
    * Interface between link picker and plugins to update results
@@ -336,10 +348,10 @@ class LinkPicker extends PureComponent {
           return;
         }
 
-        this.setState({
+        this.setState(prev => ({
           items: limit(value.data),
           isLoading: !done
-        });
+        }));
 
         if (done) {
           return;
@@ -368,6 +380,7 @@ class LinkPicker extends PureComponent {
       }
     } = this.props;
     const activePlugin = this.getActivePlugin();
+    const tabs = this.getTabs();
     const linkPlaceHolder = formatMessage(activePlugin ? messages.placeholder : messages.linkPlaceholder);
     const linkLabel = formatMessage(messages.linkLabel);
     const linkTextLabel = formatMessage(messages.linkTextLabel);
@@ -432,7 +445,21 @@ class LinkPicker extends PureComponent {
       onChange: this.updateTextInput,
       onClear: this.handleClearDisplayText,
       clearLabel: formatMessage(messages.clearText)
-    }), !!items.length && jsx("div", {
+    }), tabs.length > 0 && jsx(Tabs, {
+      id: "link-picker-tabs",
+      testId: "link-picker-tabs",
+      onChange: activePlugin => this.setState({
+        activePlugin
+      }, () => {
+        this.updateResults();
+      })
+    }, jsx(TabList, null, tabs.map(tab => {
+      const label = tab.tabTitle;
+      return jsx(Tab, {
+        key: label,
+        testId: "link-picker-tab"
+      }, label);
+    }))), !!items.length && jsx("div", {
       css: listTitleStyles,
       id: "link-picker-list-title",
       "data-testid": "link-picker-list-title"
@@ -491,4 +518,4 @@ function limit(items) {
   return items.slice(0, RECENT_SEARCH_LIST_SIZE);
 }
 
-export const LinkPickerWithIntl = injectIntl(LinkPicker);
+export default injectIntl(LinkPicker);

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

@@ -14,6 +14,12 @@ export const rootContainerStyles = css`
   line-height: initial;
   min-height: ${LINK_PICKER_MIN_HEIGHT_IN_PX}px;
 `;
+export const rootContainerStylesForLoader = css`
+  ${rootContainerStyles}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
 export const searchIconStyles = css`
   margin-left: ${gridSize() / 2}px;
   color: ${token('color.icon', N500)};

package/dist/es2019/ui/loader-fallback/index.js

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+import { rootContainerStylesForLoader } from '../link-picker/styled';
+export const LoaderFallback = jsx("div", {
+  css: rootContainerStylesForLoader,
+  "data-testid": "link-picker-root-loader-boundary-ui"
+}, jsx(Spinner, {
+  testId: "link-picker.component-loading-indicator",
+  size: "medium"
+}));

package/dist/es2019/version.json

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

package/dist/esm/ui/index.js

@@ -1,8 +1,9 @@
 import React, { memo } from 'react';
 import { AnalyticsErrorBoundary } from '@atlaskit/analytics-next';
+import { LazySuspense, lazyForPaint } from 'react-loosely-lazy';
 import { name as packageName, version as packageVersion } from '../version.json';
 import { ErrorBoundaryFallback } from './error-boundary-fallback';
-import { LinkPickerWithIntl } from './link-picker';
+import { LoaderFallback } from './loader-fallback';
 var COMPONENT_NAME = 'LinkPicker';
 var ANALYTICS_CHANNEL = 'media';
 var PACKAGE_DATA = {
@@ -10,10 +11,17 @@ var PACKAGE_DATA = {
   packageVersion: packageVersion,
   componentName: COMPONENT_NAME
 };
+var LazyLinkPicker = lazyForPaint(function () {
+  return import(
+  /* webpackChunkName: "@atlaskit-internal_link-picker" */
+  './link-picker');
+});
 export var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
   return /*#__PURE__*/React.createElement(AnalyticsErrorBoundary, {
     channel: ANALYTICS_CHANNEL,
     data: PACKAGE_DATA,
     ErrorComponent: ErrorBoundaryFallback
-  }, /*#__PURE__*/React.createElement(LinkPickerWithIntl, props));
+  }, /*#__PURE__*/React.createElement(LazySuspense, {
+    fallback: LoaderFallback
+  }, /*#__PURE__*/React.createElement(LazyLinkPicker, props)));
 });

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

@@ -1,3 +1,4 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -21,6 +22,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
+import Tabs, { Tab, TabList } from '@atlaskit/tabs';
 import { messages } from './messages';
 import PanelTextInput from './text-input';
 import LinkSearchList from './link-search-list';
@@ -128,6 +130,20 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "getTabs", function () {
+      if (_this.props.plugins && _this.props.plugins.length > 1) {
+        return _this.props.plugins.filter(function (plugin) {
+          return !!plugin.tabTitle;
+        }).map(function (plugin) {
+          return {
+            tabTitle: plugin.tabTitle
+          };
+        });
+      }
+
+      return [];
+    });
+
     _defineProperty(_assertThisInitialized(_this), "isUrlPopulatedWithSelectedItem", function () {
       /**
        * When we use ArrowKey to navigate through result items,
@@ -294,7 +310,8 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
       url: normalizeUrl(props.url) || '',
       displayText: props.displayText || '',
       items: [],
-      invalidUrl: null
+      invalidUrl: null,
+      activePlugin: 0
     };
     /* Cache functions */
 
@@ -324,7 +341,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      return this.props.plugins[0];
+      return this.props.plugins[this.state.activePlugin];
     }
     /**
      * Interface between link picker and plugins to update results
@@ -334,21 +351,23 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
     key: "updateResults",
     value: function () {
       var _updateResults = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var queryVersion, activePlugin, updates, done, value, _result$done, result;
+        var _this2 = this;
+
+        var queryVersion, activePlugin, updates, _loop, _ret;
 
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context3) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
                 queryVersion = ++this.queryVersion;
                 activePlugin = this.getActivePlugin();
 
                 if (activePlugin) {
-                  _context2.next = 4;
+                  _context3.next = 4;
                   break;
                 }
 
-                return _context2.abrupt("return");
+                return _context3.abrupt("return");
 
               case 4:
                 updates = activePlugin.resolve({
@@ -358,82 +377,114 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
                   isLoading: true,
                   items: []
                 });
-                _context2.prev = 6;
+                _context3.prev = 6;
+                _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
+                  var done, value, _result$done, result;
+
+                  return _regeneratorRuntime.wrap(function _loop$(_context2) {
+                    while (1) {
+                      switch (_context2.prev = _context2.next) {
+                        case 0:
+                          done = false;
+                          value = void 0;
+
+                          if (!(updates instanceof Promise)) {
+                            _context2.next = 9;
+                            break;
+                          }
+
+                          done = true;
+                          _context2.next = 6;
+                          return updates;
+
+                        case 6:
+                          value = _context2.sent;
+                          _context2.next = 14;
+                          break;
+
+                        case 9:
+                          _context2.next = 11;
+                          return updates.next();
+
+                        case 11:
+                          result = _context2.sent;
+                          done = (_result$done = result.done) !== null && _result$done !== void 0 ? _result$done : false;
+                          value = result.value;
+
+                        case 14:
+                          if (!(queryVersion !== _this2.queryVersion)) {
+                            _context2.next = 16;
+                            break;
+                          }
+
+                          return _context2.abrupt("return", {
+                            v: void 0
+                          });
+
+                        case 16:
+                          _this2.setState(function (prev) {
+                            return {
+                              items: limit(value.data),
+                              isLoading: !done
+                            };
+                          });
+
+                          if (!done) {
+                            _context2.next = 19;
+                            break;
+                          }
+
+                          return _context2.abrupt("return", {
+                            v: void 0
+                          });
+
+                        case 19:
+                        case "end":
+                          return _context2.stop();
+                      }
+                    }
+                  }, _loop);
+                });
 
-              case 7:
+              case 8:
                 if (!(queryVersion === this.queryVersion)) {
-                  _context2.next = 29;
+                  _context3.next = 15;
                   break;
                 }
 
-                done = false;
-                value = void 0;
+                return _context3.delegateYield(_loop(), "t0", 10);
 
-                if (!(updates instanceof Promise)) {
-                  _context2.next = 17;
-                  break;
-                }
-
-                done = true;
-                _context2.next = 14;
-                return updates;
+              case 10:
+                _ret = _context3.t0;
 
-              case 14:
-                value = _context2.sent;
-                _context2.next = 22;
-                break;
-
-              case 17:
-                _context2.next = 19;
-                return updates.next();
-
-              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 = 24;
-                  break;
-                }
-
-                return _context2.abrupt("return");
-
-              case 24:
-                this.setState({
-                  items: limit(value.data),
-                  isLoading: !done
-                });
-
-                if (!done) {
-                  _context2.next = 27;
+                if (!(_typeof(_ret) === "object")) {
+                  _context3.next = 13;
                   break;
                 }
 
-                return _context2.abrupt("return");
+                return _context3.abrupt("return", _ret.v);
 
-              case 27:
-                _context2.next = 7;
+              case 13:
+                _context3.next = 8;
                 break;
 
-              case 29:
-                _context2.next = 34;
+              case 15:
+                _context3.next = 20;
                 break;
 
-              case 31:
-                _context2.prev = 31;
-                _context2.t0 = _context2["catch"](6);
+              case 17:
+                _context3.prev = 17;
+                _context3.t1 = _context3["catch"](6);
                 this.setState({
                   isLoading: false
                 });
 
-              case 34:
+              case 20:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2, this, [[6, 31]]);
+        }, _callee2, this, [[6, 17]]);
       }));
 
       function updateResults() {
@@ -445,6 +496,8 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
+      var _this3 = this;
+
       var _this$state7 = this.state,
           items = _this$state7.items,
           isLoading = _this$state7.isLoading,
@@ -455,6 +508,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
           displayText = _this$state7.displayText;
       var formatMessage = this.props.intl.formatMessage;
       var activePlugin = this.getActivePlugin();
+      var tabs = this.getTabs();
       var linkPlaceHolder = formatMessage(activePlugin ? messages.placeholder : messages.linkPlaceholder);
       var linkLabel = formatMessage(messages.linkLabel);
       var linkTextLabel = formatMessage(messages.linkTextLabel);
@@ -519,7 +573,23 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         onChange: this.updateTextInput,
         onClear: this.handleClearDisplayText,
         clearLabel: formatMessage(messages.clearText)
-      }), !!items.length && jsx("div", {
+      }), tabs.length > 0 && jsx(Tabs, {
+        id: "link-picker-tabs",
+        testId: "link-picker-tabs",
+        onChange: function onChange(activePlugin) {
+          return _this3.setState({
+            activePlugin: activePlugin
+          }, function () {
+            _this3.updateResults();
+          });
+        }
+      }, jsx(TabList, null, tabs.map(function (tab) {
+        var label = tab.tabTitle;
+        return jsx(Tab, {
+          key: label,
+          testId: "link-picker-tab"
+        }, label);
+      }))), !!items.length && jsx("div", {
         css: listTitleStyles,
         id: "link-picker-list-title",
         "data-testid": "link-picker-list-title"
@@ -580,4 +650,4 @@ function limit(items) {
   return items.slice(0, RECENT_SEARCH_LIST_SIZE);
 }
 
-export var LinkPickerWithIntl = injectIntl(LinkPicker);
+export default injectIntl(LinkPicker);

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

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
@@ -12,5 +12,6 @@ import { gridSize } from '@atlaskit/theme/constants';
 var LINK_PICKER_WIDTH_IN_PX = 342;
 var LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
 export var rootContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  padding: ", "px;\n  box-sizing: border-box;\n  line-height: initial;\n  min-height: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX, gridSize() * 2, LINK_PICKER_MIN_HEIGHT_IN_PX);
-export var searchIconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), gridSize() / 2, token('color.icon', N500));
-export var listTitleStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);
+export var rootContainerStylesForLoader = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), rootContainerStyles);
+export var searchIconStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), gridSize() / 2, token('color.icon', N500));
+export var listTitleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);

package/dist/esm/ui/loader-fallback/index.js

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+import { rootContainerStylesForLoader } from '../link-picker/styled';
+export var LoaderFallback = jsx("div", {
+  css: rootContainerStylesForLoader,
+  "data-testid": "link-picker-root-loader-boundary-ui"
+}, jsx(Spinner, {
+  testId: "link-picker.component-loading-indicator",
+  size: "medium"
+}));

package/dist/esm/version.json

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

package/dist/types/ui/link-picker/index.d.ts

@@ -44,8 +44,9 @@ export interface State {
     isEditing: boolean;
     displayText: string;
     invalidUrl: string | null;
+    activePlugin: number;
 }
-export declare const LinkPickerWithIntl: import("react").FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & LinkPickerProps>> & {
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & LinkPickerProps>> & {
     WrappedComponent: import("react").ComponentType<WrappedComponentProps<"intl"> & LinkPickerProps>;
 };
-export {};
+export default _default;

package/dist/types/ui/link-picker/styled.d.ts

@@ -1,3 +1,4 @@
 export declare const rootContainerStyles: import("@emotion/react").SerializedStyles;
+export declare const rootContainerStylesForLoader: import("@emotion/react").SerializedStyles;
 export declare const searchIconStyles: import("@emotion/react").SerializedStyles;
 export declare const listTitleStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/loader-fallback/index.d.ts

@@ -0,0 +1,3 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const LoaderFallback: jsx.JSX.Element;

package/dist/types/ui/types.d.ts

@@ -36,5 +36,9 @@ export interface ResolveResult {
     data: LinkSearchListItemData[];
 }
 export interface LinkPickerPlugin {
+    /** Uniquely identify the tab */
+    tabKey?: string;
+    /** Human-readable label for the plugin */
+    tabTitle?: string;
     resolve: (state: LinkPickerState) => Promise<ResolveResult> | AsyncGenerator<ResolveResult, ResolveResult>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.2.1",
+  "version": "1.4.1",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -35,6 +35,7 @@
     "@atlaskit/form": "^8.5.1",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/spinner": "^15.1.0",
+    "@atlaskit/tabs": "^13.2.11",
     "@atlaskit/textfield": "^5.1.7",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
@@ -43,7 +44,8 @@
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
-    "linkify-it": "^2.0.3"
+    "linkify-it": "^2.0.3",
+    "react-loosely-lazy": "^0.5.0"
   },
   "peerDependencies": {
     "react": "^16.8.0",
@@ -52,16 +54,19 @@
   "devDependencies": {
     "@atlaskit/activity-provider": "^2.3.2",
     "@atlaskit/docs": "*",
-    "@atlaskit/link-test-helpers": "^1.1.0",
+    "@atlaskit/link-test-helpers": "^1.3.0",
     "@atlaskit/popup": "^1.3.5",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
-    "@atlassian/link-picker-atlassian-plugin": "^12.0.0",
+    "@atlassian/link-picker-atlassian-plugin": "^14.0.0",
+    "@atlassian/link-picker-plugins": "^1.0.0",
     "@atlassian/search-provider": "^2.3.0",
     "@testing-library/dom": "^7.7.3",
+    "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^8.0.1",
+    "@testing-library/user-event": "10.4.0",
     "enzyme": "^3.10.0",
     "fetch-mock": "^8.0.0",
     "mockdate": "^3.0.2",