@atlaskit/link-picker 1.25.2 → 1.25.4

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testIds = exports.default = exports.RECENT_SEARCH_LIST_SIZE = void 0;
+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"));
@@ -13,42 +13,39 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
-var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
+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 = _interopRequireDefault(require("../../common/utils/analytics/analytics.codegen"));
+var _analytics = require("../../common/analytics");
 var _constants = require("../../common/constants");
-var _analytics2 = require("../../common/analytics");
-var _url2 = require("@atlaskit/linking-common/url");
-var _userAgent = require("@atlaskit/linking-common/user-agent");
+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 _useFixHeight = _interopRequireDefault(require("../../controllers/use-fix-height"));
+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 _textInput = _interopRequireWildcard(require("./text-input"));
-var _styled = require("./styled");
-var _announcer = _interopRequireDefault(require("./announcer"));
-var _scrollingTabs = _interopRequireDefault(require("../scrolling-tabs"));
-var _linkSearchList = _interopRequireWildcard(require("./link-search-list"));
-var _linkSearchError = _interopRequireWildcard(require("./link-search-error"));
-var _formFooter = _interopRequireWildcard(require("./form-footer"));
+var _scrollingTabs = require("./scrolling-tabs");
+var _styled2 = require("./styled");
+var _textInput = require("./text-input");
+var _trackMount = require("./track-mount");
+var _trackTabViewed = require("./track-tab-viewed");
 var _utils = require("./utils");
-var _trackTabViewed = _interopRequireDefault(require("./track-tab-viewed"));
-var _trackMount = _interopRequireDefault(require("./track-mount"));
-var _styled2 = require("./link-search-list/styled");
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
 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 RECENT_SEARCH_LIST_SIZE = 5;
-exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
 var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
-  textInputField: 'link-text',
-  searchIcon: 'link-picker-search-icon'
+  textInputField: 'link-text'
 }, _formFooter.testIds), _linkSearchError.testIds), _linkSearchList.testIds), _textInput.testIds), {}, {
   tabList: 'link-picker-tabs',
   tabItem: 'link-picker-tab'
@@ -83,13 +80,13 @@ var getLinkFieldContent = function getLinkFieldContent(value) {
   }
   return (0, _url2.isSafeUrl)(value) ? 'url' : 'text_string';
 };
-var LinkInputField = (0, _analytics2.withInputFieldTracking)(_textInput.default, 'link', function (event, attributes) {
+var LinkInputField = (0, _analytics.withInputFieldTracking)(_textInput.TextInput, 'link', function (event, attributes) {
   return _objectSpread(_objectSpread({}, attributes), {}, {
     linkFieldContent: getLinkFieldContent(event.currentTarget.value)
   });
 });
-var DisplayTextInputField = (0, _analytics2.withInputFieldTracking)(_textInput.default, 'displayText');
-function LinkPicker(_ref) {
+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,
@@ -126,11 +123,11 @@ function LinkPicker(_ref) {
     error = _usePlugins.error,
     retry = _usePlugins.retry,
     pluginAction = _usePlugins.pluginAction;
-  var fixListHeightProps = (0, _useFixHeight.default)(isLoadingResults);
+  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;
-  var _useLinkPickerAnalyti = (0, _analytics2.useLinkPickerAnalytics)(),
+  var _useLinkPickerAnalyti = (0, _analytics.useLinkPickerAnalytics)(),
     trackAttribute = _useLinkPickerAnalyti.trackAttribute,
     getAttributes = _useLinkPickerAnalyti.getAttributes;
   (0, _react.useLayoutEffect)(function () {
@@ -163,7 +160,7 @@ function LinkPicker(_ref) {
     handleClear('url');
   }, [trackAttribute, handleClear]);
   var handleInsert = (0, _react.useCallback)(function (url, title, inputType) {
-    var event = createAnalyticsEvent((0, _analytics.default)('ui.form.submitted.linkPicker', {}));
+    var event = createAnalyticsEvent((0, _analytics2.default)('ui.form.submitted.linkPicker', {}));
 
     // Clone the event so that it can be emitted for consumer usage
     // This must happen BEFORE the original event is fired!
@@ -266,7 +263,7 @@ function LinkPicker(_ref) {
         handleSubmit();
       }
     } else {
-      updatedIndex = (0, _utils.handleNavKeyDown)(event, items.length, activeIndex);
+      updatedIndex = (0, _handleNavKeyDown.handleNavKeyDown)(event, items.length, activeIndex);
     }
     var item = items[updatedIndex];
     if (['Enter', 'ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) && item) {
@@ -293,13 +290,6 @@ function LinkPicker(_ref) {
   // 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 searchIcon = isActivePlugin && (0, _react2.jsx)("span", {
-    css: _styled.searchIconStyles,
-    "data-testid": testIds.searchIcon
-  }, (0, _react2.jsx)(_search.default, {
-    size: "medium",
-    label: ''
-  }));
   var tabList = (0, _react2.jsx)(_tabs.TabList, null, tabs.map(function (tab) {
     return (0, _react2.jsx)(_tabs.Tab, {
       key: tab.tabTitle,
@@ -308,9 +298,9 @@ function LinkPicker(_ref) {
   }));
   return (0, _react2.jsx)("form", {
     "data-testid": testIds.linkPicker,
-    css: _styled.rootContainerStyles,
+    css: _styled2.rootContainerStyles,
     onSubmit: handleSubmit
-  }, (0, _react2.jsx)(_trackMount.default, null), screenReaderText && (0, _react2.jsx)(_announcer.default, {
+  }, (0, _react2.jsx)(_trackMount.TrackMount, null), screenReaderText && (0, _react2.jsx)(_announcer.Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
     ariaRelevant: "additions",
@@ -326,7 +316,6 @@ function LinkPicker(_ref) {
     placeholder: intl.formatMessage(messages.linkPlaceholder),
     value: url,
     autoFocus: true,
-    elemBeforeInput: searchIcon,
     clearLabel: intl.formatMessage(_messages.formMessages.clearLink),
     "aria-expanded": true,
     "aria-autocomplete": "list",
@@ -350,22 +339,22 @@ function LinkPicker(_ref) {
     onClear: handleClear,
     onChange: handleChangeText
   }), isLoadingPlugins && !!queryState && (0, _react2.jsx)("div", {
-    css: _styled2.spinnerContainerStyles
+    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
+    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.default, null, tabList) : tabList), (0, _react2.jsx)(_trackTabViewed.default, {
+  }, 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.default, {
+    css: _styled2.flexColumnStyles
+  }, fixListHeightProps), !error && (0, _react2.jsx)(_linkSearchList.LinkSearchList, {
     id: linkSearchListId,
     role: "listbox",
     items: items,
@@ -377,7 +366,7 @@ function LinkPicker(_ref) {
     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.default, null)))), (0, _react2.jsx)(_formFooter.default, {
+  }), 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, {
     error: error,
     items: items
     /** If the results section appears to be loading, impact whether the submit button is disabled */,
@@ -387,8 +376,7 @@ function LinkPicker(_ref) {
     isEditing: isEditing,
     onCancel: onCancel,
     action: pluginAction,
-    css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? _styled.formFooterMargin : undefined
+    css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? _styled2.formFooterMargin : undefined
   }));
-}
-var _default = (0, _analytics2.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0, _react.memo)(LinkPicker));
-exports.default = _default;
+}));
+exports.LinkPicker = LinkPicker;

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

@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testIds = exports.messages = exports.default = exports.CONTACT_SUPPORT_LINK = void 0;
+exports.testIds = exports.messages = exports.LinkSearchError = exports.CONTACT_SUPPORT_LINK = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 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 = _interopRequireDefault(require("../../../common/generic-error-svg"));
+var _genericErrorSvg = require("../../../common/generic-error-svg");
 /** @jsx jsx */
 
 var CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
@@ -51,9 +51,8 @@ var LinkSearchError = function LinkSearchError() {
       }
     })),
     renderImage: function renderImage() {
-      return (0, _react.jsx)(_genericErrorSvg.default, null);
+      return (0, _react.jsx)(_genericErrorSvg.GenericErrorSVG, null);
     }
   });
 };
-var _default = LinkSearchError;
-exports.default = _default;
+exports.LinkSearchError = LinkSearchError;

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

@@ -1,29 +1,26 @@
 "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.messages = exports.default = void 0;
+exports.testIds = exports.messages = exports.LinkSearchList = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 _listItem = _interopRequireDefault(require("../list-item"));
-var _styled = require("./styled");
-var _linkSearchNoResults = _interopRequireWildcard(require("./link-search-no-results"));
+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");
+var _styled2 = require("./styled");
 var _useTrackResultsShown = require("./use-track-results-shown");
-var _utils = require("../utils");
-var _styled2 = require("./link-search-no-results/styled");
 var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "role", "id", "hasSearchTerm", "activePlugin"];
-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 messages = (0, _reactIntlNext.defineMessages)({
@@ -44,9 +41,8 @@ var messages = (0, _reactIntlNext.defineMessages)({
   }
 });
 exports.messages = messages;
-var testIds = _objectSpread(_objectSpread({}, _linkSearchNoResults.testIds), {}, {
+var testIds = _objectSpread(_objectSpread(_objectSpread({}, _linkSearchNoResults.testIds), _listItem.testIds), {}, {
   resultListTitle: 'link-picker-list-title',
-  searchResultItem: 'link-search-list-item',
   searchResultList: 'link-search-list',
   searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
   tabsLoadingIndicator: 'link-picker.tabs-loading-indicator'
@@ -102,7 +98,7 @@ var LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (!(items !== null && items !== void 0 && items.length)) {
       return;
     }
-    updatedIndex = (0, _utils.handleNavKeyDown)(event, items.length, activeIndex);
+    updatedIndex = (0, _handleNavKeyDown.handleNavKeyDown)(event, items.length, activeIndex);
     var item = items === null || items === void 0 ? void 0 : items[updatedIndex];
     if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) && item) {
       onChange(item.objectId);
@@ -115,19 +111,19 @@ var LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.enable-empty-state')) {
       if (hasSearchTerm) {
-        return (0, _react2.jsx)(_linkSearchNoResults.default, null);
+        return (0, _react2.jsx)(_linkSearchNoResults.NoResults, null);
       } else {
         return (0, _react2.jsx)("div", {
-          css: _styled2.emptyStateNoResultsWrapper
+          css: _styled.emptyStateNoResultsWrapper
         }, activePlugin !== null && activePlugin !== void 0 && activePlugin.emptyStateNoResults ? activePlugin.emptyStateNoResults() : null);
       }
     } else {
-      return (0, _react2.jsx)(_linkSearchNoResults.default, null);
+      return (0, _react2.jsx)(_linkSearchNoResults.NoResults, null);
     }
   }
   if (items && items.length > 0) {
     itemsContent = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
-      css: _styled.listTitleStyles,
+      css: _styled2.listTitleStyles,
       id: testIds.resultListTitle,
       "data-testid": testIds.resultListTitle
     }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, linkListTitle)), (0, _react2.jsx)(_visuallyHidden.default, {
@@ -141,12 +137,12 @@ var LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }))), (0, _react2.jsx)("ul", {
       id: id,
       role: role,
-      css: _styled.listStyles,
+      css: _styled2.listStyles,
       "aria-controls": "fabric.smartcard.linkpicker.suggested.results",
       "aria-labelledby": testIds.resultListTitle,
       "data-testid": testIds.searchResultList
     }, items.map(function (item, index) {
-      return (0, _react2.jsx)(_listItem.default, {
+      return (0, _react2.jsx)(_listItem.LinkSearchListItem, {
         id: "".concat(testIds.searchResultItem, "-").concat(index),
         role: role && 'option',
         item: item,
@@ -165,7 +161,7 @@ var LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }
   if (isLoading) {
     loadingContent = (0, _react2.jsx)("div", {
-      css: _styled.spinnerContainerStyles
+      css: _styled2.spinnerContainerStyles
     }, (0, _react2.jsx)(_spinner.default, {
       testId: testIds.searchResultLoadingIndicator,
       size: "medium"
@@ -173,8 +169,7 @@ var LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     ref: ref,
-    css: _styled.listContainerStyles
+    css: _styled2.listContainerStyles
   }, restProps), itemsContent, loadingContent);
 });
-var _default = LinkSearchList;
-exports.default = _default;
+exports.LinkSearchList = LinkSearchList;

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

@@ -4,11 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testIds = exports.messages = exports.default = void 0;
+exports.testIds = exports.messages = exports.NoResults = void 0;
 var _react = require("@emotion/react");
-var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
 var _reactIntlNext = require("react-intl-next");
-var _noResultsSvg = _interopRequireDefault(require("./no-results-svg"));
+var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
+var _noResultsSvg = require("./no-results-svg");
 var _styled = require("./styled");
 /** @jsx jsx */
 
@@ -38,9 +38,8 @@ var NoResults = function NoResults() {
     header: intl.formatMessage(messages.noResults),
     description: intl.formatMessage(messages.noResultsDescription),
     renderImage: function renderImage() {
-      return (0, _react.jsx)(_noResultsSvg.default, null);
+      return (0, _react.jsx)(_noResultsSvg.NoResultsSVG, null);
     }
   }));
 };
-var _default = NoResults;
-exports.default = _default;
+exports.NoResults = NoResults;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.NoResultsSVG = void 0;
 var _react = require("@emotion/react");
 var _styled = require("./styled");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
@@ -61,5 +61,4 @@ var NoResultsSVG = function NoResultsSVG() {
     d: "M0 0h207.16v189.87H0z"
   }))));
 };
-var _default = NoResultsSVG;
-exports.default = _default;
+exports.NoResultsSVG = NoResultsSVG;

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

@@ -3,15 +3,54 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.testIds = exports.LinkSearchListItem = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _transformTimeStamp = require("../transformTimeStamp");
-var _styled = require("./styled");
-var _ = require("..");
 var _reactIntlNext = require("react-intl-next");
+var _transformTimeStamp = require("../../transformTimeStamp");
+var _styled = require("./styled");
 /** @jsx jsx */
 
+/* eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports */
+
+var testIds = {
+  searchResultItem: 'link-search-list-item',
+  searchResultIcon: 'link-search-list-item-icon'
+};
+exports.testIds = testIds;
+var isSVG = function isSVG(icon) {
+  return icon.startsWith('<svg') && icon.endsWith('</svg>');
+};
+var base64SVG = function base64SVG(icon) {
+  return "data:image/svg+xml;base64,".concat(Buffer.from(icon).toString('base64'));
+};
+var ListItemIcon = function ListItemIcon(props) {
+  var item = props.item,
+    intl = props.intl;
+  var icon = item.icon,
+    iconAlt = item.iconAlt;
+  if (!icon) {
+    return null;
+  }
+  var alt = typeof iconAlt === 'string' ? iconAlt : intl.formatMessage(iconAlt);
+  if (typeof icon !== 'string') {
+    var Glyph = icon;
+    return (0, _react2.jsx)("span", {
+      css: _styled.itemIconStyles
+    }, (0, _react2.jsx)(Glyph, {
+      alt: alt,
+      "data-testid": testIds.searchResultIcon
+    }));
+  }
+  return (0, _react2.jsx)("span", {
+    css: _styled.itemIconStyles
+  }, (0, _react2.jsx)("img", {
+    "data-testid": testIds.searchResultIcon,
+    src: isSVG(icon) ? base64SVG(icon) : icon,
+    alt: alt,
+    css: _styled.imgStyles
+  }));
+};
 var LinkSearchListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var item = _ref.item,
     selected = _ref.selected,
@@ -33,7 +72,7 @@ var LinkSearchListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
     role: role,
     id: id,
     "aria-selected": selected,
-    "data-testid": _.testIds.searchResultItem,
+    "data-testid": testIds.searchResultItem,
     onKeyDown: onKeyDown,
     onClick: handleSelect,
     onFocus: onFocus,
@@ -45,10 +84,10 @@ var LinkSearchListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
   }), (0, _react2.jsx)("div", {
     css: _styled.itemNameStyles
   }, (0, _react2.jsx)("div", {
-    "data-testid": "".concat(_.testIds.searchResultItem, "-title"),
+    "data-testid": "".concat(testIds.searchResultItem, "-title"),
     css: _styled.listItemNameStyles
   }, item.name), (0, _react2.jsx)("div", {
-    "data-testid": "".concat(_.testIds.searchResultItem, "-subtitle"),
+    "data-testid": "".concat(testIds.searchResultItem, "-subtitle"),
     css: _styled.listItemContextStyles
   }, container && (0, _react2.jsx)("div", {
     css: _styled.listItemContainerStyles
@@ -58,39 +97,4 @@ var LinkSearchListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
     css: _styled.listItemContainerInnerStyles
   }, container && (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022\xA0 "), (0, _react2.jsx)(_react.Fragment, null, date)))));
 });
-var _default = LinkSearchListItem;
-exports.default = _default;
-var isSVG = function isSVG(icon) {
-  return icon.startsWith('<svg') && icon.endsWith('</svg>');
-};
-var base64SVG = function base64SVG(icon) {
-  return "data:image/svg+xml;base64,".concat(Buffer.from(icon).toString('base64'));
-};
-var testId = 'link-search-list-item-icon';
-var ListItemIcon = function ListItemIcon(props) {
-  var item = props.item,
-    intl = props.intl;
-  var icon = item.icon,
-    iconAlt = item.iconAlt;
-  if (!icon) {
-    return null;
-  }
-  var alt = typeof iconAlt === 'string' ? iconAlt : intl.formatMessage(iconAlt);
-  if (typeof icon !== 'string') {
-    var Glyph = icon;
-    return (0, _react2.jsx)("span", {
-      css: _styled.itemIconStyles
-    }, (0, _react2.jsx)(Glyph, {
-      alt: alt,
-      "data-testid": testId
-    }));
-  }
-  return (0, _react2.jsx)("span", {
-    css: _styled.itemIconStyles
-  }, (0, _react2.jsx)("img", {
-    "data-testid": testId,
-    src: isSVG(icon) ? base64SVG(icon) : icon,
-    alt: alt,
-    css: _styled.imgStyles
-  }));
-};
+exports.LinkSearchListItem = LinkSearchListItem;

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

@@ -8,9 +8,11 @@ exports.relativeFontSizeToBase16 = exports.listItemNameStyles = exports.listItem
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _theme = require("@atlaskit/theme");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13; // AFP-2532 TODO: Fix automatic suppressions below
+var _constants = require("@atlaskit/theme/constants");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+// AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
 var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
   if (typeof px === 'string') {
     px = parseInt(px);
@@ -35,7 +37,7 @@ var itemNameStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0,
 exports.itemNameStyles = itemNameStyles;
 var listItemNameStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), "var(--ds-text, ".concat(_colors.N800, ")"));
 exports.listItemNameStyles = listItemNameStyles;
-var listItemContextStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n  display: flex;\n"])), "var(--ds-text, ".concat(_colors.N300, ")"), relativeFontSizeToBase16((0, _theme.fontSizeSmall)()), (0, _theme.fontSize)());
+var listItemContextStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n  display: flex;\n"])), "var(--ds-text, ".concat(_colors.N300, ")"), relativeFontSizeToBase16((0, _constants.fontSizeSmall)()), (0, _constants.fontSize)());
 exports.listItemContextStyles = listItemContextStyles;
 var listItemContainerStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 exports.listItemContainerStyles = listItemContainerStyles;

package/dist/cjs/ui/{scrolling-tabs → link-picker/scrolling-tabs}/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ScrollingTabList = void 0;
+exports.ScrollingTabList = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -29,6 +29,8 @@ var initialConditionalButtonsState = {
   back: false,
   forward: false
 };
+
+/* eslint-disable @repo/internal/dom-events/no-unsafe-event-listeners */
 var ScrollingTabList = function ScrollingTabList(props) {
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(initialConditionalButtonsState),
@@ -106,6 +108,7 @@ var ScrollingTabList = function ScrollingTabList(props) {
       }
       return function () {
         if (scrollingContainer) {
+          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
           scrollingContainer.removeEventListener('scroll', handleConditionalButtonsChange);
         }
         if (tabs.length) {
@@ -151,6 +154,4 @@ var ScrollingTabList = function ScrollingTabList(props) {
     }
   }))));
 };
-exports.ScrollingTabList = ScrollingTabList;
-var _default = ScrollingTabList;
-exports.default = _default;
+exports.ScrollingTabList = ScrollingTabList;

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

@@ -4,38 +4,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tabsWrapperStyles = exports.searchIconStyles = exports.rootContainerStylesForLoaderWithoutDisplaytext = exports.rootContainerStylesForLoaderWithDisplaytext = exports.rootContainerStyles = exports.formFooterMargin = exports.flexColumnStyles = void 0;
+exports.tabsWrapperStyles = exports.rootContainerStyles = exports.formFooterMargin = exports.flexColumnStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var LINK_PICKER_WIDTH_IN_PX = 342;
 
-// See lazy-load-height example to verify these
-var LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT = 142;
-var LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT = 220;
-
 /**
  * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
  */
 var rootContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  padding: ", " ", "\n    ", ";\n  box-sizing: border-box;\n  line-height: initial;\n"])), LINK_PICKER_WIDTH_IN_PX, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
-
-/** Styles for skeleton element when Link Picker loading */
 exports.rootContainerStyles = rootContainerStyles;
-var rootContainerStylesForLoader = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), rootContainerStyles);
-
-/** Link Picker loader / skeleton will be taller in height when displayText field is shown */
-var rootContainerStylesForLoaderWithDisplaytext = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  min-height: ", "px;\n"])), rootContainerStylesForLoader, LINK_PICKER_MIN_HEIGHT_IN_PX_WITH_DISPLAYTEXT);
-
-/** Link Picker loader / skeleton will be shorter in height when displayText field isn't shown */
-exports.rootContainerStylesForLoaderWithDisplaytext = rootContainerStylesForLoaderWithDisplaytext;
-var rootContainerStylesForLoaderWithoutDisplaytext = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  min-height: ", "px;\n"])), rootContainerStylesForLoader, LINK_PICKER_MIN_HEIGHT_IN_PX_WITHOUT_DISPLAYTEXT);
-exports.rootContainerStylesForLoaderWithoutDisplaytext = rootContainerStylesForLoaderWithoutDisplaytext;
-var searchIconStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", ";\n  color: ", ";\n  cursor: default;\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N500, ")"));
-exports.searchIconStyles = searchIconStyles;
-var tabsWrapperStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (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)");
+var tabsWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (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 flexColumnStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+var flexColumnStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
 exports.flexColumnStyles = flexColumnStyles;
-var formFooterMargin = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n"])), "var(--ds-space-200, 16px)");
+var formFooterMargin = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n"])), "var(--ds-space-200, 16px)");
 exports.formFooterMargin = formFooterMargin;