@atlaskit/link-picker 1.25.4 → 1.25.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-picker
 
+## 1.25.5
+
+### Patch Changes
+
+- [`27f7faa992f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27f7faa992f) - Minor internal refactor with no expected functional changes.
+
 ## 1.25.4
 
 ### Patch Changes

package/dist/cjs/common/constants.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RECENT_SEARCH_LIST_SIZE = exports.COMPONENT_NAME = exports.ANALYTICS_CHANNEL = void 0;
+exports.RECENT_SEARCH_LIST_SIZE = exports.LINK_PICKER_WIDTH_IN_PX = exports.COMPONENT_NAME = exports.ANALYTICS_CHANNEL = void 0;
 var ANALYTICS_CHANNEL = 'media';
 exports.ANALYTICS_CHANNEL = ANALYTICS_CHANNEL;
 var COMPONENT_NAME = 'linkPicker';
 exports.COMPONENT_NAME = COMPONENT_NAME;
 var RECENT_SEARCH_LIST_SIZE = 5;
-exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
+exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
+var LINK_PICKER_WIDTH_IN_PX = 342;
+exports.LINK_PICKER_WIDTH_IN_PX = LINK_PICKER_WIDTH_IN_PX;

package/dist/cjs/i18n/en.js

@@ -38,6 +38,7 @@ var _default = {
   'fabric.linkPicker.time.message.updated': 'Updated {time}',
   'fabric.linkPicker.time.message.viewed': 'Viewed {time}',
   'fabric.linkPicker.unhandledError.description': 'Try reloading the page.',
-  'fabric.linkPicker.unhandledError.heading': 'Something went wrong!'
+  'fabric.linkPicker.unhandledError.heading': 'Something went wrong!',
+  foo: 'Default string'
 };
 exports.default = _default;

package/dist/cjs/i18n/en_GB.js

@@ -38,6 +38,7 @@ var _default = {
   'fabric.linkPicker.time.message.updated': 'Updated {time}',
   'fabric.linkPicker.time.message.viewed': 'Viewed {time}',
   'fabric.linkPicker.unhandledError.description': 'Try reloading the page.',
-  'fabric.linkPicker.unhandledError.heading': 'Something went wrong!'
+  'fabric.linkPicker.unhandledError.heading': 'Something went wrong!',
+  foo: 'Default string'
 };
 exports.default = _default;

package/dist/cjs/i18n/en_ZZ.js

@@ -38,6 +38,7 @@ var _default = {
   'fabric.linkPicker.time.message.updated': '⁣⁢Updated {time}‌‍⁡؜؜⁠‌⁣⁤',
   'fabric.linkPicker.time.message.viewed': '⁣⁢Viewed {time}‌⁡؜‌‍‍؜؜⁠‍‍‌⁣⁤',
   'fabric.linkPicker.unhandledError.description': '⁣⁢Try reloading the page.‌‍⁡‌⁠‍⁠‍⁠⁠؜؜‍⁣⁤',
-  'fabric.linkPicker.unhandledError.heading': '⁣⁢Something went wrong!؜⁠‌⁠⁠‍⁠⁡⁠⁣⁤'
+  'fabric.linkPicker.unhandledError.heading': '⁣⁢Something went wrong!؜⁠‌⁠⁠‍⁠⁡⁠⁣⁤',
+  foo: '⁣⁢Default string⁡‍⁡⁠‍‍⁡‌⁠⁡⁡‌⁠⁣⁤'
 };
 exports.default = _default;

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

@@ -1,12 +1,10 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.testIds = exports.LinkPicker = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
@@ -15,41 +13,29 @@ var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _url2 = require("@atlaskit/linking-common/url");
 var _userAgent = require("@atlaskit/linking-common/user-agent");
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
-var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _analytics = require("../../common/analytics");
 var _constants = require("../../common/constants");
 var _analytics2 = _interopRequireDefault(require("../../common/utils/analytics/analytics.codegen"));
 var _handleNavKeyDown = require("../../common/utils/handleNavKeyDown");
-var _useFixHeight = require("../../controllers/use-fix-height");
 var _usePlugins2 = require("../../services/use-plugins");
 var _useSearchQuery = require("../../services/use-search-query");
 var _announcer = require("./announcer");
 var _formFooter = require("./form-footer");
-var _linkSearchError = require("./link-search-error");
-var _linkSearchList = require("./link-search-list");
-var _styled = require("./link-search-list/styled");
 var _messages = require("./messages");
-var _scrollingTabs = require("./scrolling-tabs");
-var _styled2 = require("./styled");
+var _searchResults = require("./search-results");
+var _styled = require("./styled");
 var _textInput = require("./text-input");
 var _trackMount = require("./track-mount");
-var _trackTabViewed = require("./track-tab-viewed");
 var _utils = require("./utils");
-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 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) { (0, _defineProperty2.default)(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; } /** @jsx jsx */
-var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+var testIds = _objectSpread(_objectSpread(_objectSpread({
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
   textInputField: 'link-text'
-}, _formFooter.testIds), _linkSearchError.testIds), _linkSearchList.testIds), _textInput.testIds), {}, {
-  tabList: 'link-picker-tabs',
-  tabItem: 'link-picker-tab'
-});
+}, _searchResults.testIds), _formFooter.testIds), _textInput.testIds);
 exports.testIds = testIds;
 var initState = {
   url: '',
@@ -87,7 +73,6 @@ var LinkInputField = (0, _analytics.withInputFieldTracking)(_textInput.TextInput
 });
 var DisplayTextInputField = (0, _analytics.withInputFieldTracking)(_textInput.TextInput, 'displayText');
 var LinkPicker = (0, _analytics.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var _activePlugin$errorFa, _activePlugin$errorFa2;
   var onSubmit = _ref.onSubmit,
     onCancel = _ref.onCancel,
     onContentResize = _ref.onContentResize,
@@ -123,7 +108,6 @@ var LinkPicker = (0, _analytics.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0
     error = _usePlugins.error,
     retry = _usePlugins.retry,
     pluginAction = _usePlugins.pluginAction;
-  var fixListHeightProps = (0, _useFixHeight.useFixHeight)(isLoadingResults);
   var isEditing = !!initUrl;
   var selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   var isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
@@ -290,15 +274,9 @@ var LinkPicker = (0, _analytics.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0
   // as the Aria design pattern for combobox does not work in this case
   // for details: https://a11y-internal.atlassian.net/browse/AK-740
   var screenReaderText = (0, _userAgent.browser)().safari && (0, _utils.getScreenReaderText)(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
-  var tabList = (0, _react2.jsx)(_tabs.TabList, null, tabs.map(function (tab) {
-    return (0, _react2.jsx)(_tabs.Tab, {
-      key: tab.tabTitle,
-      testId: testIds.tabItem
-    }, tab.tabTitle);
-  }));
   return (0, _react2.jsx)("form", {
     "data-testid": testIds.linkPicker,
-    css: _styled2.rootContainerStyles,
+    css: _styled.rootContainerStyles,
     onSubmit: handleSubmit
   }, (0, _react2.jsx)(_trackMount.TrackMount, null), screenReaderText && (0, _react2.jsx)(_announcer.Announcer, {
     ariaLive: "assertive",
@@ -338,35 +316,25 @@ var LinkPicker = (0, _analytics.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0
     "aria-label": intl.formatMessage(_messages.linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
     onChange: handleChangeText
-  }), isLoadingPlugins && !!queryState && (0, _react2.jsx)("div", {
-    css: _styled.spinnerContainerStyles
-  }, (0, _react2.jsx)(_spinner.default, {
-    testId: testIds.tabsLoadingIndicator,
-    size: "medium"
-  })), !isLoadingPlugins && isActivePlugin && !!queryState && (0, _react2.jsx)(_react.Fragment, null, tabs.length > 0 && (0, _react2.jsx)("div", {
-    css: _styled2.tabsWrapperStyles
-  }, (0, _react2.jsx)(_tabs.default, {
-    id: testIds.tabList,
-    testId: testIds.tabList,
-    selected: activeTab,
-    onChange: handleTabChange
-  }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? (0, _react2.jsx)(_scrollingTabs.ScrollingTabList, null, tabList) : tabList), (0, _react2.jsx)(_trackTabViewed.TrackTabViewed, {
-    activePlugin: activePlugin
-  })), (0, _react2.jsx)("div", (0, _extends2.default)({
-    css: _styled2.flexColumnStyles
-  }, fixListHeightProps), !error && (0, _react2.jsx)(_linkSearchList.LinkSearchList, {
-    id: linkSearchListId,
-    role: "listbox",
-    items: items,
-    isLoading: isLoadingResults,
-    selectedIndex: selectedIndex,
+  }), !!queryState && (0, _react2.jsx)(_searchResults.SearchResults, {
+    activeTab: activeTab,
+    tabs: tabs,
+    activePlugin: activePlugin,
+    isLoadingResults: isLoadingResults,
+    isLoadingPlugins: isLoadingPlugins,
+    linkSearchListId: linkSearchListId,
+    error: error,
+    featureFlags: featureFlags,
     activeIndex: activeIndex,
-    onSelect: handleSelected,
-    onChange: handleSearchListOnChange,
-    onKeyDown: handleKeyDown,
-    hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
-    activePlugin: activePlugin
-  }), error && ((_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : (0, _react2.jsx)(_linkSearchError.LinkSearchError, null)))), (0, _react2.jsx)(_formFooter.FormFooter, {
+    selectedIndex: selectedIndex,
+    items: items,
+    queryState: queryState,
+    handleKeyDown: handleKeyDown,
+    handleSelected: handleSelected,
+    handleTabChange: handleTabChange,
+    handleSearchListOnChange: handleSearchListOnChange,
+    retry: retry
+  }), (0, _react2.jsx)(_formFooter.FormFooter, {
     error: error,
     items: items
     /** If the results section appears to be loading, impact whether the submit button is disabled */,
@@ -376,7 +344,7 @@ var LinkPicker = (0, _analytics.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0
     isEditing: isEditing,
     onCancel: onCancel,
     action: pluginAction,
-    css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? _styled2.formFooterMargin : undefined
+    css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? _styled.formFooterMargin : undefined
   }));
 }));
 exports.LinkPicker = LinkPicker;

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

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.testIds = exports.SearchResults = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
+var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
+var _useFixHeight = require("../../../controllers/use-fix-height");
+var _linkSearchError = require("./link-search-error");
+var _linkSearchList = require("./link-search-list");
+var _scrollingTabs = require("./scrolling-tabs");
+var _styled = require("./styled");
+var _trackTabViewed = require("./track-tab-viewed");
+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 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) { (0, _defineProperty2.default)(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; } /** @jsx jsx */
+var testIds = _objectSpread(_objectSpread(_objectSpread({}, _linkSearchError.testIds), _linkSearchList.testIds), {}, {
+  tabsLoadingIndicator: 'link-picker.tabs-loading-indicator',
+  tabList: 'link-picker-tabs',
+  tabItem: 'link-picker-tab'
+});
+exports.testIds = testIds;
+var SearchResults = function SearchResults(_ref) {
+  var _activePlugin$errorFa, _activePlugin$errorFa2;
+  var tabs = _ref.tabs,
+    activeTab = _ref.activeTab,
+    activePlugin = _ref.activePlugin,
+    isLoadingPlugins = _ref.isLoadingPlugins,
+    isLoadingResults = _ref.isLoadingResults,
+    handleTabChange = _ref.handleTabChange,
+    handleSearchListOnChange = _ref.handleSearchListOnChange,
+    featureFlags = _ref.featureFlags,
+    linkSearchListId = _ref.linkSearchListId,
+    error = _ref.error,
+    queryState = _ref.queryState,
+    items = _ref.items,
+    activeIndex = _ref.activeIndex,
+    selectedIndex = _ref.selectedIndex,
+    handleSelected = _ref.handleSelected,
+    handleKeyDown = _ref.handleKeyDown,
+    retry = _ref.retry;
+  var isActivePlugin = !!activePlugin;
+
+  // This will be redundant if we move towards fixed height search results section
+  var fixListHeightProps = (0, _useFixHeight.useFixHeight)(isLoadingResults);
+  var tabList = (0, _react2.jsx)(_tabs.TabList, null, tabs.map(function (tab) {
+    return (0, _react2.jsx)(_tabs.Tab, {
+      key: tab.tabTitle,
+      testId: testIds.tabItem
+    }, tab.tabTitle);
+  }));
+  return (0, _react2.jsx)(_react.Fragment, null, isLoadingPlugins && !!queryState && (0, _react2.jsx)("div", {
+    css: _styled.spinnerContainerStyles
+  }, (0, _react2.jsx)(_spinner.default, {
+    testId: testIds.tabsLoadingIndicator,
+    size: "medium"
+  })), !isLoadingPlugins && isActivePlugin && !!queryState && (0, _react2.jsx)(_react.Fragment, null, tabs.length > 0 && (0, _react2.jsx)("div", {
+    css: _styled.tabsWrapperStyles
+  }, (0, _react2.jsx)(_tabs.default, {
+    id: testIds.tabList,
+    testId: testIds.tabList,
+    selected: activeTab,
+    onChange: handleTabChange
+  }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? (0, _react2.jsx)(_scrollingTabs.ScrollingTabList, null, tabList) : tabList), (0, _react2.jsx)(_trackTabViewed.TrackTabViewed, {
+    activePlugin: activePlugin
+  })), (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: _styled.flexColumnStyles
+  }, fixListHeightProps), !error && (0, _react2.jsx)(_linkSearchList.LinkSearchList, {
+    id: linkSearchListId,
+    role: "listbox",
+    items: items,
+    isLoading: isLoadingResults,
+    selectedIndex: selectedIndex,
+    activeIndex: activeIndex,
+    onSelect: handleSelected,
+    onChange: handleSearchListOnChange,
+    onKeyDown: handleKeyDown,
+    hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
+    activePlugin: activePlugin
+  }), error && ((_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : (0, _react2.jsx)(_linkSearchError.LinkSearchError, null)))));
+};
+exports.SearchResults = SearchResults;

package/dist/cjs/ui/link-picker/{link-search-error → search-results/link-search-error}/index.js

@@ -10,7 +10,7 @@ var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
-var _genericErrorSvg = require("../../../common/generic-error-svg");
+var _genericErrorSvg = require("../../../../common/generic-error-svg");
 /** @jsx jsx */
 
 var CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';

package/dist/cjs/ui/link-picker/{link-search-list → search-results/link-search-list}/index.js

@@ -14,7 +14,7 @@ var _reactIntlNext = require("react-intl-next");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
-var _handleNavKeyDown = require("../../../common/utils/handleNavKeyDown");
+var _handleNavKeyDown = require("../../../../common/utils/handleNavKeyDown");
 var _linkSearchNoResults = require("./link-search-no-results");
 var _styled = require("./link-search-no-results/styled");
 var _listItem = require("./list-item");

package/dist/cjs/ui/link-picker/{link-search-list → search-results/link-search-list}/list-item/index.js

@@ -7,7 +7,7 @@ exports.testIds = exports.LinkSearchListItem = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _transformTimeStamp = require("../../transformTimeStamp");
+var _transformTimeStamp = require("../../../transformTimeStamp");
 var _styled = require("./styled");
 /** @jsx jsx */
 
@@ -54,7 +54,6 @@ var ListItemIcon = function ListItemIcon(props) {
 var LinkSearchListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var item = _ref.item,
     selected = _ref.selected,
-    active = _ref.active,
     id = _ref.id,
     role = _ref.role,
     onSelect = _ref.onSelect,

package/dist/cjs/ui/link-picker/{link-search-list → search-results/link-search-list}/list-item/styled.js

@@ -23,7 +23,7 @@ var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
   return "".concat(px / 16, "rem");
 };
 exports.relativeFontSizeToBase16 = relativeFontSizeToBase16;
-var listItemBaseStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", " ", ";\n  margin: 0 calc(-1 * ", ");\n  cursor: pointer;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
+var listItemBaseStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", " ", ";\n  margin: 0;\n  cursor: pointer;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)");
 var listItemFocusStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", " inset;\n    text-decoration: none;\n  }\n"])), "var(--ds-border-focused, ".concat(_colors.B100, ")"));
 var listItemBoxShadow = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-border-selected, ".concat(_colors.B400, ")"));
 var listItemActive = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  &:hover {\n    background-color: ", ";\n    ", ";\n  }\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"), listItemBoxShadow);
@@ -43,7 +43,7 @@ var listItemContainerStyles = (0, _react.css)(_templateObject10 || (_templateObj
 exports.listItemContainerStyles = listItemContainerStyles;
 var listItemContainerInnerStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  white-space: nowrap;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.listItemContainerInnerStyles = listItemContainerInnerStyles;
 var itemIconStyles = (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", ";\n  margin-top: 3px;\n  margin-right: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-150, 12px)");
 exports.itemIconStyles = itemIconStyles;

package/dist/cjs/ui/link-picker/{link-search-list → search-results/link-search-list}/styled.js

@@ -14,7 +14,7 @@ var listContainerStyles = (0, _react.css)(_templateObject || (_templateObject =
 exports.listContainerStyles = listContainerStyles;
 var spinnerContainerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  min-height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n"])));
 exports.spinnerContainerStyles = spinnerContainerStyles;
-var listStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n"])));
+var listStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  margin: 0 calc(-1 * ", ");\n  list-style: none;\n"])), "var(--ds-space-200, 16px)");
 exports.listStyles = listStyles;
 var listTitleStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-top: 0;\n  margin-bottom: ", ";\n"])), _theme.typography.h100(), "var(--ds-space-050, 4px)");
 exports.listTitleStyles = listTitleStyles;

package/dist/cjs/ui/link-picker/{link-search-list → search-results/link-search-list}/use-track-results-shown/index.js

@@ -9,8 +9,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _useDebounce3 = require("use-debounce");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _constants = require("../../../../common/constants");
-var _analytics = _interopRequireDefault(require("../../../../common/utils/analytics/analytics.codegen"));
+var _constants = require("../../../../../common/constants");
+var _analytics = _interopRequireDefault(require("../../../../../common/utils/analytics/analytics.codegen"));
 var DEBOUNCE_MS = 400;
 var useTrackResultsShown = function useTrackResultsShown(isLoading, items, hasSearchTerm) {
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),

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

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tabsWrapperStyles = exports.spinnerContainerStyles = exports.flexColumnStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject, _templateObject2, _templateObject3;
+var tabsWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  margin-left: calc(-1 * ", ");\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+exports.tabsWrapperStyles = tabsWrapperStyles;
+var spinnerContainerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n"])));
+exports.spinnerContainerStyles = spinnerContainerStyles;
+var flexColumnStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+exports.flexColumnStyles = flexColumnStyles;

package/dist/cjs/ui/link-picker/{track-tab-viewed → search-results/track-tab-viewed}/index.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.TrackTabViewed = TrackTabViewed;
 var _react = require("react");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _constants = require("../../../common/constants");
-var _analytics = _interopRequireDefault(require("../../../common/utils/analytics/analytics.codegen"));
+var _constants = require("../../../../common/constants");
+var _analytics = _interopRequireDefault(require("../../../../common/utils/analytics/analytics.codegen"));
 /** @jsx jsx */
 
 function TrackTabViewed(_ref) {

package/dist/cjs/version.json

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

package/dist/es2019/common/constants.js

@@ -1,3 +1,4 @@
 export const ANALYTICS_CHANNEL = 'media';
 export const COMPONENT_NAME = 'linkPicker';
-export const RECENT_SEARCH_LIST_SIZE = 5;
+export const RECENT_SEARCH_LIST_SIZE = 5;
+export const LINK_PICKER_WIDTH_IN_PX = 342;

package/dist/es2019/i18n/en.js

@@ -32,5 +32,6 @@ export default {
   'fabric.linkPicker.time.message.updated': 'Updated {time}',
   'fabric.linkPicker.time.message.viewed': 'Viewed {time}',
   'fabric.linkPicker.unhandledError.description': 'Try reloading the page.',
-  'fabric.linkPicker.unhandledError.heading': 'Something went wrong!'
+  'fabric.linkPicker.unhandledError.heading': 'Something went wrong!',
+  foo: 'Default string'
 };

package/dist/es2019/i18n/en_GB.js

@@ -32,5 +32,6 @@ export default {
   'fabric.linkPicker.time.message.updated': 'Updated {time}',
   'fabric.linkPicker.time.message.viewed': 'Viewed {time}',
   'fabric.linkPicker.unhandledError.description': 'Try reloading the page.',
-  'fabric.linkPicker.unhandledError.heading': 'Something went wrong!'
+  'fabric.linkPicker.unhandledError.heading': 'Something went wrong!',
+  foo: 'Default string'
 };

package/dist/es2019/i18n/en_ZZ.js

@@ -32,5 +32,6 @@ export default {
   'fabric.linkPicker.time.message.updated': '⁣⁢Updated {time}‌‍⁡؜؜⁠‌⁣⁤',
   'fabric.linkPicker.time.message.viewed': '⁣⁢Viewed {time}‌⁡؜‌‍‍؜؜⁠‍‍‌⁣⁤',
   'fabric.linkPicker.unhandledError.description': '⁣⁢Try reloading the page.‌‍⁡‌⁠‍⁠‍⁠⁠؜؜‍⁣⁤',
-  'fabric.linkPicker.unhandledError.heading': '⁣⁢Something went wrong!؜⁠‌⁠⁠‍⁠⁡⁠⁣⁤'
+  'fabric.linkPicker.unhandledError.heading': '⁣⁢Something went wrong!؜⁠‌⁠⁠‍⁠⁡⁠⁣⁤',
+  foo: '⁣⁢Default string⁡‍⁡⁠‍‍⁡‌⁠⁡⁡‌⁠⁣⁤'
 };

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

@@ -1,44 +1,33 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { Fragment, memo, useCallback, useLayoutEffect, useReducer } from 'react';
+import { memo, useCallback, useLayoutEffect, useReducer } from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { isSafeUrl, normalizeUrl } from '@atlaskit/linking-common/url';
 import { browser } from '@atlaskit/linking-common/user-agent';
-import Spinner from '@atlaskit/spinner/spinner';
-import Tabs, { Tab, TabList } from '@atlaskit/tabs';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useLinkPickerAnalytics, withInputFieldTracking, withLinkPickerAnalyticsContext } from '../../common/analytics';
 import { ANALYTICS_CHANNEL } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
 import { handleNavKeyDown } from '../../common/utils/handleNavKeyDown';
-import { useFixHeight } from '../../controllers/use-fix-height';
 import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import { Announcer } from './announcer';
 import { FormFooter, testIds as formFooterTestIds } from './form-footer';
-import { LinkSearchError, testIds as searchErrorTestIds } from './link-search-error';
-import { LinkSearchList, testIds as listTestIds } from './link-search-list';
-import { spinnerContainerStyles } from './link-search-list/styled';
 import { formMessages, linkMessages, linkTextMessages, searchMessages } from './messages';
-import { ScrollingTabList } from './scrolling-tabs';
-import { flexColumnStyles, formFooterMargin, rootContainerStyles, tabsWrapperStyles } from './styled';
+import { SearchResults, testIds as searchTestIds } from './search-results';
+import { formFooterMargin, rootContainerStyles } from './styled';
 import { testIds as textFieldTestIds, TextInput } from './text-input';
 import { TrackMount } from './track-mount';
-import { TrackTabViewed } from './track-tab-viewed';
 import { getDataSource, getScreenReaderText } from './utils';
 export const testIds = {
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
   textInputField: 'link-text',
+  ...searchTestIds,
   ...formFooterTestIds,
-  ...searchErrorTestIds,
-  ...listTestIds,
-  ...textFieldTestIds,
-  tabList: 'link-picker-tabs',
-  tabItem: 'link-picker-tab'
+  ...textFieldTestIds
 };
 const initState = {
   url: '',
@@ -90,7 +79,6 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   hideDisplayText,
   featureFlags
 }) => {
-  var _activePlugin$errorFa, _activePlugin$errorFa2;
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
@@ -119,7 +107,6 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     retry,
     pluginAction
   } = usePlugins(queryState, activeTab, plugins);
-  const fixListHeightProps = useFixHeight(isLoadingResults);
   const isEditing = !!initUrl;
   const selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   const isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
@@ -287,10 +274,6 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   // as the Aria design pattern for combobox does not work in this case
   // for details: https://a11y-internal.atlassian.net/browse/AK-740
   const screenReaderText = browser().safari && getScreenReaderText(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
-  const tabList = jsx(TabList, null, tabs.map(tab => jsx(Tab, {
-    key: tab.tabTitle,
-    testId: testIds.tabItem
-  }, tab.tabTitle)));
   return jsx("form", {
     "data-testid": testIds.linkPicker,
     css: rootContainerStyles,
@@ -333,35 +316,25 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     "aria-label": intl.formatMessage(linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
     onChange: handleChangeText
-  }), isLoadingPlugins && !!queryState && jsx("div", {
-    css: spinnerContainerStyles
-  }, jsx(Spinner, {
-    testId: testIds.tabsLoadingIndicator,
-    size: "medium"
-  })), !isLoadingPlugins && isActivePlugin && !!queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
-    css: tabsWrapperStyles
-  }, jsx(Tabs, {
-    id: testIds.tabList,
-    testId: testIds.tabList,
-    selected: activeTab,
-    onChange: handleTabChange
-  }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? jsx(ScrollingTabList, null, tabList) : tabList), jsx(TrackTabViewed, {
-    activePlugin: activePlugin
-  })), jsx("div", _extends({
-    css: flexColumnStyles
-  }, fixListHeightProps), !error && jsx(LinkSearchList, {
-    id: linkSearchListId,
-    role: "listbox",
-    items: items,
-    isLoading: isLoadingResults,
-    selectedIndex: selectedIndex,
+  }), !!queryState && jsx(SearchResults, {
+    activeTab: activeTab,
+    tabs: tabs,
+    activePlugin: activePlugin,
+    isLoadingResults: isLoadingResults,
+    isLoadingPlugins: isLoadingPlugins,
+    linkSearchListId: linkSearchListId,
+    error: error,
+    featureFlags: featureFlags,
     activeIndex: activeIndex,
-    onSelect: handleSelected,
-    onChange: handleSearchListOnChange,
-    onKeyDown: handleKeyDown,
-    hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
-    activePlugin: activePlugin
-  }), error && ((_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : jsx(LinkSearchError, null)))), jsx(FormFooter, {
+    selectedIndex: selectedIndex,
+    items: items,
+    queryState: queryState,
+    handleKeyDown: handleKeyDown,
+    handleSelected: handleSelected,
+    handleTabChange: handleTabChange,
+    handleSearchListOnChange: handleSearchListOnChange,
+    retry: retry
+  }), jsx(FormFooter, {
     error: error,
     items: items
     /** If the results section appears to be loading, impact whether the submit button is disabled */,