@atlaskit/link-picker 1.8.2 → 1.8.5

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

@@ -23,10 +23,6 @@ var _reactIntlNext = require("react-intl-next");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _button = _interopRequireWildcard(require("@atlaskit/button"));
-
-var _form = require("@atlaskit/form");
-
 var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
 
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
@@ -41,13 +37,15 @@ var _usePlugins2 = require("../../services/use-plugins");
 
 var _useSearchQuery = require("../../services/use-search-query");
 
+var _withLinkPickerAnalytics = require("../../services/with-link-picker-analytics");
+
 var _messages = require("./messages");
 
 var _textInput = _interopRequireDefault(require("./text-input"));
 
-var _linkSearchList = _interopRequireDefault(require("./link-search-list"));
+var _url2 = require("../../common/utils/url");
 
-var _url2 = require("./url");
+var _useFixHeight = _interopRequireDefault(require("../../controllers/use-fix-height"));
 
 var _styled = require("./styled");
 
@@ -55,11 +53,13 @@ var _browser = require("./browser");
 
 var _announcer = _interopRequireDefault(require("./announcer"));
 
-var _linkSearchNoResults = _interopRequireDefault(require("./link-search-no-results"));
-
 var _transformTimeStamp = require("./transformTimeStamp");
 
-var _linkSearchError = _interopRequireDefault(require("./link-search-error"));
+var _linkSearchList = _interopRequireWildcard(require("./link-search-list"));
+
+var _linkSearchError = _interopRequireWildcard(require("./link-search-error"));
+
+var _formFooter = _interopRequireWildcard(require("./form-footer"));
 
 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); }
 
@@ -73,24 +73,19 @@ var RECENT_SEARCH_LIST_SIZE = 5;
 exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
 var CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 exports.CONTACT_SUPPORT_LINK = CONTACT_SUPPORT_LINK;
-var testIds = {
+
+var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
   textInputField: 'link-text',
-  searchIcon: 'link-picker-search-icon',
-  insertButton: 'link-picker-insert-button',
-  cancelButton: 'link-picker-cancel-button',
+  searchIcon: 'link-picker-search-icon'
+}, _formFooter.testIds), _linkSearchError.testIds), _linkSearchList.testIds), {}, {
   clearUrlButton: 'clear-text',
-  resultListTitle: 'link-picker-list-title',
-  emptyResultPage: 'link-search-no-results',
-  searchResultList: 'link-search-list',
-  searchResultItem: 'link-search-list-item',
-  searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
   urlError: 'link-error',
   tabList: 'link-picker-tabs',
-  tabItem: 'link-picker-tab',
-  searchError: 'link-search-error'
-};
+  tabItem: 'link-picker-tab'
+});
+
 exports.testIds = testIds;
 var initState = {
   url: '',
@@ -113,7 +108,7 @@ function reducer(state, payload) {
 }
 
 function LinkPicker(_ref) {
-  var _queryState$query, _items$length, _errorFallback;
+  var _errorFallback;
 
   var onSubmit = _ref.onSubmit,
       onCancel = _ref.onCancel,
@@ -151,6 +146,7 @@ function LinkPicker(_ref) {
       retry = _usePlugins.retry,
       errorFallback = _usePlugins.errorFallback;
 
+  var fixListHeightProps = (0, _useFixHeight.default)(isLoading);
   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;
@@ -279,9 +275,6 @@ function LinkPicker(_ref) {
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
   var linkPlaceHolder = isActivePlugin ? _messages.messages.placeholder : _messages.messages.linkPlaceholder;
-  var linkListTitle = (queryState === null || queryState === void 0 ? void 0 : (_queryState$query = queryState.query) === null || _queryState$query === void 0 ? void 0 : _queryState$query.length) !== 0 ? _messages.messages.titleResults : _messages.messages.titleRecentlyViewed;
-  var insertButtonMsg = isEditing ? _messages.messages.saveButton : _messages.messages.insertButton;
-  var noResults = (items === null || items === void 0 ? void 0 : items.length) === 0 && !error;
   var screenReaderDescriptionId = 'search-recent-links-field-description';
   var linkSearchListId = 'link-picker-search-list';
   var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
@@ -339,7 +332,7 @@ function LinkPicker(_ref) {
     onClear: handleClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
-  }), queryState && (0, _react2.jsx)(_react.Fragment, null, tabs.length > 0 && (0, _react2.jsx)("div", {
+  }), 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,
@@ -357,64 +350,29 @@ function LinkPicker(_ref) {
       key: tab.tabTitle,
       testId: testIds.tabItem
     }, tab.tabTitle);
-  })))), !!(items !== null && items !== void 0 && items.length) && (0, _react2.jsx)("div", {
-    css: _styled.listTitleStyles,
-    id: testIds.resultListTitle,
-    "data-testid": testIds.resultListTitle
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, linkListTitle)), (0, _react2.jsx)(_visuallyHidden.default, {
-    id: "fabric.smartcard.linkpicker.suggested.results"
-  }, url && (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.searchLinkResults, {
-    values: {
-      count: (_items$length = items === null || items === void 0 ? void 0 : items.length) !== null && _items$length !== void 0 ? _items$length : 0
-    },
-    "aria-live": "polite",
-    "aria-atomic": "true"
-  }))), (0, _react2.jsx)(_linkSearchList.default, {
-    ariaLabelledBy: testIds.resultListTitle,
-    ariaControls: "fabric.smartcard.linkpicker.suggested.results",
+  })))), (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: _styled.flexColumnStyles
+  }, fixListHeightProps), !error && (0, _react2.jsx)(_linkSearchList.default, {
     id: linkSearchListId,
     role: "listbox",
-    items: items !== null && items !== void 0 ? items : [],
+    items: items,
     isLoading: isLoading,
     selectedIndex: selectedIndex,
     activeIndex: activeIndex,
     onSelect: handleSelected,
     onMouseEnter: handleMouseEnterResultItem,
-    onMouseLeave: handleMouseLeaveResultItem
-  }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : (0, _react2.jsx)(_linkSearchError.default, {
-    testId: testIds.searchError,
-    header: intl.formatMessage(_messages.messages.searchErrorHeader),
-    description: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.searchErrorDescription, {
-      values: {
-        a: function a(label) {
-          return (0, _react2.jsx)(_button.default, {
-            appearance: "link",
-            spacing: "none",
-            href: CONTACT_SUPPORT_LINK,
-            target: "_blank",
-            rel: "noopener noreferrer"
-          }, label);
-        }
-      }
-    }))
-  })), noResults && (0, _react2.jsx)(_linkSearchNoResults.default, {
-    testId: testIds.emptyResultPage,
-    header: intl.formatMessage(_messages.messages.noResults),
-    description: intl.formatMessage(_messages.messages.noResultsDescription)
-  })), (0, _react2.jsx)(_form.FormFooter, {
-    align: "end"
-  }, (0, _react2.jsx)(_button.ButtonGroup, null, (0, _react2.jsx)(_button.default, {
-    appearance: "default",
-    onClick: onCancel,
-    testId: testIds.cancelButton
-  }, intl.formatMessage(_messages.messages.cancelButton)), (0, _react2.jsx)(_button.default, {
-    type: "submit",
-    appearance: "primary",
-    testId: testIds.insertButton
-  }, intl.formatMessage(insertButtonMsg)))));
+    onMouseLeave: handleMouseLeaveResultItem,
+    error: error,
+    hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length)
+  }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : (0, _react2.jsx)(_linkSearchError.default, null)))), (0, _react2.jsx)(_formFooter.default, {
+    css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? _styled.formFooterMargin : undefined,
+    isEditing: isEditing,
+    onCancel: onCancel
+  }));
 }
 
-var _default = LinkPicker;
+var _default = (0, _withLinkPickerAnalytics.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0, _react.memo)(LinkPicker));
+
 exports.default = _default;
 
 function getScreenReaderText(items, selectedIndex, intl) {

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

@@ -5,22 +5,63 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.testIds = exports.messages = exports.default = exports.CONTACT_SUPPORT_LINK = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+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 LinkSearchError = function LinkSearchError(props) {
-  return /*#__PURE__*/_react.default.createElement(_emptyState.default, (0, _extends2.default)({}, props, {
+/** @jsx jsx */
+var CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
+exports.CONTACT_SUPPORT_LINK = CONTACT_SUPPORT_LINK;
+var messages = (0, _reactIntlNext.defineMessages)({
+  searchErrorHeader: {
+    id: 'fabric.linkPicker.search.error.heading',
+    defaultMessage: 'We’re having trouble loading data.',
+    description: 'Heading message shown when a search throws an error'
+  },
+  searchErrorDescription: {
+    id: 'fabric.linkPicker.search.error.description',
+    defaultMessage: 'Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.',
+    description: 'Describes possible actions when search throws an error'
+  }
+});
+exports.messages = messages;
+var testIds = {
+  searchError: 'link-search-error'
+};
+exports.testIds = testIds;
+
+var LinkSearchError = function LinkSearchError() {
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react.jsx)(_emptyState.default, {
+    testId: testIds.searchError,
+    header: intl.formatMessage(messages.searchErrorHeader),
+    description: (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.searchErrorDescription, {
+      values: {
+        a: function a(label) {
+          return (0, _react.jsx)(_button.default, {
+            appearance: "link",
+            spacing: "none",
+            href: CONTACT_SUPPORT_LINK,
+            target: "_blank",
+            rel: "noopener noreferrer"
+          }, label);
+        }
+      }
+    })),
     renderImage: function renderImage() {
-      return /*#__PURE__*/_react.default.createElement(_genericErrorSvg.default, null);
+      return (0, _react.jsx)(_genericErrorSvg.default, null);
     }
-  }));
+  });
 };
 
 var _default = LinkSearchError;

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

@@ -2,23 +2,73 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.testIds = exports.messages = exports.default = 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 _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+
 var _listItem = _interopRequireDefault(require("../list-item"));
 
 var _styled = require("./styled");
 
-var _ = require("../");
+var _linkSearchNoResults = _interopRequireWildcard(require("./link-search-no-results"));
+
+var _excluded = ["onSelect", "onMouseEnter", "onMouseLeave", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "role", "id", "hasSearchTerm"];
+
+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; }
 
-/** @jsx jsx */
-var LinkSearchList = function LinkSearchList(_ref) {
+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; }
+
+var messages = (0, _reactIntlNext.defineMessages)({
+  titleRecentlyViewed: {
+    id: 'fabric.linkPicker.listTitle.recentlyViewed',
+    defaultMessage: 'Recently Viewed',
+    description: 'Describes type of items shown in the list for screen-reader users'
+  },
+  titleResults: {
+    id: 'fabric.linkPicker.listTitle.results',
+    defaultMessage: 'Results',
+    description: 'Describes type of items shown in the list for screen-reader users'
+  },
+  searchLinkResults: {
+    id: 'fabric.linkPicker.hyperlink.searchLinkResults',
+    defaultMessage: '{count, plural, =0 {no results} one {# result} other {# results}} found',
+    description: 'Announce search results for screen-reader users.'
+  }
+});
+exports.messages = messages;
+
+var testIds = _objectSpread(_objectSpread({}, _linkSearchNoResults.testIds), {}, {
+  resultListTitle: 'link-picker-list-title',
+  searchResultItem: 'link-search-list-item',
+  searchResultList: 'link-search-list',
+  searchResultLoadingIndicator: 'link-picker.results-loading-indicator'
+});
+
+exports.testIds = testIds;
+var LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var onSelect = _ref.onSelect,
       onMouseEnter = _ref.onMouseEnter,
       onMouseLeave = _ref.onMouseLeave,
@@ -29,21 +79,40 @@ var LinkSearchList = function LinkSearchList(_ref) {
       ariaControls = _ref.ariaControls,
       ariaLabelledBy = _ref.ariaLabelledBy,
       role = _ref.role,
-      id = _ref.id;
+      id = _ref.id,
+      hasSearchTerm = _ref.hasSearchTerm,
+      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var itemsContent;
   var loadingContent;
+  var linkListTitle = hasSearchTerm ? messages.titleResults : messages.titleRecentlyViewed;
+
+  if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
+    return (0, _react2.jsx)(_linkSearchNoResults.default, null);
+  }
 
   if (items && items.length > 0) {
-    itemsContent = (0, _react.jsx)("ul", {
+    itemsContent = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
+      css: _styled.listTitleStyles,
+      id: testIds.resultListTitle,
+      "data-testid": testIds.resultListTitle
+    }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, linkListTitle)), (0, _react2.jsx)(_visuallyHidden.default, {
+      id: "fabric.smartcard.linkpicker.suggested.results"
+    }, hasSearchTerm && (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, messages.searchLinkResults, {
+      values: {
+        count: items.length
+      },
+      "aria-live": "polite",
+      "aria-atomic": "true"
+    }))), (0, _react2.jsx)("ul", {
       id: id,
       role: role,
       css: _styled.listStyles,
-      "aria-controls": ariaControls,
-      "aria-labelledby": ariaLabelledBy,
-      "data-testid": _.testIds.searchResultList
+      "aria-controls": "fabric.smartcard.linkpicker.suggested.results",
+      "aria-labelledby": testIds.resultListTitle,
+      "data-testid": testIds.searchResultList
     }, items.map(function (item, index) {
-      return (0, _react.jsx)(_listItem.default, {
-        id: "".concat(_.testIds.searchResultItem, "-").concat(index),
+      return (0, _react2.jsx)(_listItem.default, {
+        id: "".concat(testIds.searchResultItem, "-").concat(index),
         role: role && 'option',
         item: item,
         selected: selectedIndex === index,
@@ -53,22 +122,22 @@ var LinkSearchList = function LinkSearchList(_ref) {
         onSelect: onSelect,
         key: item.objectId
       });
-    }));
+    })));
   }
 
   if (isLoading) {
-    loadingContent = (0, _react.jsx)("div", {
+    loadingContent = (0, _react2.jsx)("div", {
       css: _styled.spinnerContainerStyles
-    }, (0, _react.jsx)(_spinner.default, {
-      testId: _.testIds.searchResultLoadingIndicator,
+    }, (0, _react2.jsx)(_spinner.default, {
+      testId: testIds.searchResultLoadingIndicator,
       size: "medium"
     }));
   }
 
-  return (0, _react.jsx)("div", {
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    ref: ref,
     css: _styled.listContainerStyles
-  }, itemsContent, loadingContent);
-};
-
+  }, restProps), itemsContent, loadingContent);
+});
 var _default = LinkSearchList;
 exports.default = _default;

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.testIds = exports.messages = exports.default = 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 _styled = require("./styled");
+
+/** @jsx jsx */
+var messages = (0, _reactIntlNext.defineMessages)({
+  noResults: {
+    id: 'fabric.linkPicker.search.noResults.heading',
+    defaultMessage: 'We couldn’t find anything matching your search.',
+    description: 'Heading message shown when a search has no results'
+  },
+  noResultsDescription: {
+    id: 'fabric.linkPicker.search.noResults.description',
+    defaultMessage: 'Try again with a different term.',
+    description: 'Describes possible action when a search returns no results'
+  }
+});
+exports.messages = messages;
+var testIds = {
+  emptyResultPage: 'link-search-no-results'
+};
+exports.testIds = testIds;
+
+var NoResults = function NoResults() {
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react.jsx)("div", {
+    css: _styled.emptyStateWrapperStyles
+  }, (0, _react.jsx)(_emptyState.default, {
+    testId: testIds.emptyResultPage,
+    header: intl.formatMessage(messages.noResults),
+    description: intl.formatMessage(messages.noResultsDescription),
+    renderImage: function renderImage() {
+      return (0, _react.jsx)(_noResultsSvg.default, null);
+    }
+  }));
+};
+
+var _default = NoResults;
+exports.default = _default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emptyStateWrapperStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _templateObject;
+
+var emptyStateWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & p {\n    margin: 0;\n  }\n"])));
+exports.emptyStateWrapperStyles = emptyStateWrapperStyles;

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

@@ -5,17 +5,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.spinnerContainerStyles = exports.listStyles = exports.listContainerStyles = void 0;
+exports.spinnerContainerStyles = exports.listTitleStyles = exports.listStyles = exports.listContainerStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = require("@emotion/react");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _theme = require("@atlaskit/theme");
 
-var listContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0;\n"])));
+var _constants = require("@atlaskit/theme/constants");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var gridSize = (0, _constants.gridSize)();
+var listContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0;\n  min-height: 80px;\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n"])), gridSize * 2, gridSize * 2);
 exports.listContainerStyles = listContainerStyles;
-var spinnerContainerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
+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  list-style: none;\n"])));
-exports.listStyles = listStyles;
+var listStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n"])));
+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: ", "px;\n"])), _theme.typography.h100(), gridSize / 2);
+exports.listTitleStyles = listTitleStyles;

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

@@ -53,11 +53,6 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Suggestions will appear below as you type into the field',
     description: 'Describes what the search field does for screen reader users.'
   },
-  searchLinkResults: {
-    id: 'fabric.linkPicker.hyperlink.searchLinkResults',
-    defaultMessage: '{count, plural, =0 {no results} one {# result} other {# results}} found',
-    description: 'Announce search results for screen-reader users.'
-  },
   linkAriaLabel: {
     id: 'fabric.linkPicker.hyperlink.linkAriaLabel',
     defaultMessage: 'Link label',
@@ -77,51 +72,6 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.linkPicker.time.ago',
     defaultMessage: 'ago',
     description: 'Some time ago'
-  },
-  titleRecentlyViewed: {
-    id: 'fabric.linkPicker.listTitle.recentlyViewed',
-    defaultMessage: 'Recently Viewed',
-    description: 'Describes type of items shown in the list for screen-reader users'
-  },
-  titleResults: {
-    id: 'fabric.linkPicker.listTitle.results',
-    defaultMessage: 'Results',
-    description: 'Describes type of items shown in the list for screen-reader users'
-  },
-  cancelButton: {
-    id: 'fabric.linkPicker.button.cancel',
-    defaultMessage: 'Cancel',
-    description: 'Button to cancel and dismiss the link picker'
-  },
-  insertButton: {
-    id: 'fabric.linkPicker.button.insert',
-    defaultMessage: 'Insert',
-    description: 'Button to insert searched or selected link'
-  },
-  noResults: {
-    id: 'fabric.linkPicker.search.noResults.heading',
-    defaultMessage: 'We couldn’t find anything matching your search.',
-    description: 'Heading message shown when a search has no results'
-  },
-  noResultsDescription: {
-    id: 'fabric.linkPicker.search.noResults.description',
-    defaultMessage: 'Try again with a different term.',
-    description: 'Describes possible action when a search returns no results'
-  },
-  saveButton: {
-    id: 'fabric.linkPicker.button.save',
-    defaultMessage: 'Save',
-    description: 'Button to save edited link'
-  },
-  searchErrorHeader: {
-    id: 'fabric.linkPicker.search.error.heading',
-    defaultMessage: 'We’re having trouble loading data.',
-    description: 'Heading message shown when a search throws an error'
-  },
-  searchErrorDescription: {
-    id: 'fabric.linkPicker.search.error.description',
-    defaultMessage: 'Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.',
-    description: 'Describes possible actions when search throws an error'
   }
 });
 exports.messages = messages;

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.tabsWrapperStyles = exports.searchIconStyles = exports.rootContainerStylesForLoader = exports.rootContainerStyles = exports.listTitleStyles = void 0;
+exports.tabsWrapperStyles = exports.searchIconStyles = exports.rootContainerStylesForLoader = exports.rootContainerStyles = exports.formFooterMargin = exports.flexColumnStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,21 +15,26 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _theme = require("@atlaskit/theme");
-
 var _constants = require("@atlaskit/theme/constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 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);
+var LINK_PICKER_MIN_HEIGHT_IN_PX = 220;
+var gridSize = (0, _constants.gridSize)();
+/**
+ * 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: ", "px ", "px ", "px;\n  box-sizing: border-box;\n  line-height: initial;\n  min-height: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX, gridSize, gridSize * 2, gridSize * 2, LINK_PICKER_MIN_HEIGHT_IN_PX);
 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);
 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));
+var searchIconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), gridSize / 2, (0, _tokens.token)('color.icon', _colors.N500));
 exports.searchIconStyles = searchIconStyles;
-var listTitleStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), _theme.typography.h100(), (0, _constants.gridSize)() / 2);
-exports.listTitleStyles = listTitleStyles;
-var tabsWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: -", "px;\n  margin-right: -", "px;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)());
-exports.tabsWrapperStyles = tabsWrapperStyles;
+var tabsWrapperStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  margin-left: -", "px;\n  margin-right: -", "px;\n"])), gridSize * 1.5, gridSize, gridSize);
+exports.tabsWrapperStyles = tabsWrapperStyles;
+var flexColumnStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+exports.flexColumnStyles = flexColumnStyles;
+var formFooterMargin = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n"])), gridSize * 2);
+exports.formFooterMargin = formFooterMargin;

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

@@ -21,5 +21,5 @@ var _templateObject, _templateObject2;
 
 var clearTextButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  margin-right: ", "px;\n  color: ", ";\n  background: transparent;\n  border: none;\n  cursor: pointer;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon.subtle', _colors.N500));
 exports.clearTextButtonStyles = clearTextButtonStyles;
-var fieldStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n"])), (0, _constants.gridSize)() * 2);
+var fieldStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  & + & {\n    margin-top: ", "px;\n  }\n"])), (0, _constants.gridSize)() * 2);
 exports.fieldStyles = fieldStyles;