@atlaskit/link-picker 3.2.4 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/link-picker
 
+## 3.3.0
+
+### Minor Changes
+
+- [#152919](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152919)
+  [`c64fbd4c5d651`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c64fbd4c5d651) -
+  [ux] New prop previewableLinksOnly for link picker that prevents link picker from submitting a URL
+  that does not have a preview available and gives an error message
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.2.4
 
 ### Patch Changes

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

@@ -11,17 +11,21 @@ require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _reactIntlNext = require("react-intl-next");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _form = require("@atlaskit/form");
+var _linkProvider = require("@atlaskit/link-provider");
 var _url2 = require("@atlaskit/linking-common/url");
 var _userAgent = require("@atlaskit/linking-common/user-agent");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
 var _colors = require("@atlaskit/theme/colors");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _analytics = require("../../common/analytics");
@@ -65,12 +69,14 @@ var initState = {
   selectedIndex: -1,
   invalidUrl: false,
   activeTab: 0,
-  preventHidingRecents: false
+  preventHidingRecents: false,
+  hasPreview: true
 };
 function reducer(state, payload) {
   if (payload.url && state.url !== payload.url) {
     return _objectSpread(_objectSpread({}, state), {}, {
       invalidUrl: false,
+      hasPreview: true,
       selectedIndex: (0, _url2.isSafeUrl)(payload.url) && payload.url.length ? -1 : state.selectedIndex
     }, payload);
   }
@@ -92,6 +98,7 @@ var LinkInputField = (0, _analytics.withInputFieldTracking)(_textInput.TextInput
   });
 });
 var DisplayTextInputField = (0, _analytics.withInputFieldTracking)(_textInput.TextInput, 'displayText');
+var client = new _linkProvider.CardClient();
 var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var onSubmit = _ref.onSubmit,
     onCancel = _ref.onCancel,
@@ -109,7 +116,9 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     adaptiveHeight = _ref$adaptiveHeight === void 0 ? false : _ref$adaptiveHeight,
     _ref$moveSubmitButton = _ref.moveSubmitButton,
     moveSubmitButton = _ref$moveSubmitButton === void 0 ? false : _ref$moveSubmitButton,
-    inputRef = _ref.inputRef;
+    inputRef = _ref.inputRef,
+    _ref$previewableLinks = _ref.previewableLinksOnly,
+    previewableLinksOnly = _ref$previewableLinks === void 0 ? false : _ref$previewableLinks;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useReducer = (0, _react.useReducer)(reducer, _objectSpread(_objectSpread({}, initState), {}, {
@@ -124,7 +133,8 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     url = state.url,
     displayText = state.displayText,
     invalidUrl = state.invalidUrl,
-    activeTab = state.activeTab;
+    activeTab = state.activeTab,
+    hasPreview = state.hasPreview;
   var intl = (0, _reactIntlNext.useIntl)();
   var queryState = (0, _useSearchQuery.useSearchQuery)(state);
   var _usePlugins = (0, _usePlugins2.usePlugins)(queryState, activeTab, plugins),
@@ -139,6 +149,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
   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 previewableOnly = (0, _platformFeatureFlags.fg)('platform-linking-link-picker-previewable-only') && previewableLinksOnly;
   var _useLinkPickerAnalyti = (0, _analytics.useLinkPickerAnalytics)(),
     trackAttribute = _useLinkPickerAnalyti.trackAttribute,
     getAttributes = _useLinkPickerAnalyti.getAttributes;
@@ -170,10 +181,10 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     });
   }, [dispatch]);
   var handleClear = (0, _react.useCallback)(function (field) {
-    dispatch((0, _defineProperty2.default)({
+    dispatch((0, _defineProperty2.default)((0, _defineProperty2.default)({
       activeIndex: -1,
       selectedIndex: -1
-    }, field, ''));
+    }, field, ''), "hasPreview", true));
   }, [dispatch]);
   var handleUrlClear = (0, _react.useCallback)(function () {
     if (isSubmitting) {
@@ -229,23 +240,78 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
       handleInsert(_url, name, 'typeAhead', _objectSpread({}, selectedItem));
     }
   }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
-  var handleSubmit = (0, _react.useCallback)(function (event) {
-    event === null || event === void 0 || event.preventDefault();
-    if (isSubmitting) {
-      // Prevent submit while submitting
-      return;
-    }
-    if (isSelectedItem && selectedItem) {
-      return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
-    }
-    var normalized = (0, _url2.normalizeUrl)(url);
-    if (normalized) {
-      return handleInsert(normalized, null, 'manual');
-    }
-    return dispatch({
-      invalidUrl: true
-    });
-  }, [dispatch, handleInsert, isSelectedItem, selectedItem, url, isSubmitting]);
+  var handleSubmit = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(event) {
+      var normalized, urlResponse, responseObject;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            event === null || event === void 0 || event.preventDefault();
+            if (!isSubmitting) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            if (!(isSelectedItem && selectedItem)) {
+              _context.next = 5;
+              break;
+            }
+            return _context.abrupt("return", handleInsert(selectedItem.url, selectedItem.name, 'typeAhead'));
+          case 5:
+            normalized = (0, _url2.normalizeUrl)(url);
+            if (!normalized) {
+              _context.next = 26;
+              break;
+            }
+            if (!previewableOnly) {
+              _context.next = 25;
+              break;
+            }
+            _context.prev = 8;
+            _context.next = 11;
+            return client.fetchData(normalized);
+          case 11:
+            urlResponse = _context.sent;
+            responseObject = urlResponse === null || urlResponse === void 0 ? void 0 : urlResponse.data;
+            if (!(responseObject && 'preview' in responseObject)) {
+              _context.next = 17;
+              break;
+            }
+            return _context.abrupt("return", handleInsert(normalized, null, 'manual'));
+          case 17:
+            return _context.abrupt("return", dispatch({
+              invalidUrl: true,
+              hasPreview: false
+            }));
+          case 18:
+            _context.next = 23;
+            break;
+          case 20:
+            _context.prev = 20;
+            _context.t0 = _context["catch"](8);
+            return _context.abrupt("return", dispatch({
+              invalidUrl: true
+            }));
+          case 23:
+            _context.next = 26;
+            break;
+          case 25:
+            return _context.abrupt("return", handleInsert(normalized, null, 'manual'));
+          case 26:
+            return _context.abrupt("return", dispatch({
+              invalidUrl: true
+            }));
+          case 27:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[8, 20]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [dispatch, handleInsert, isSelectedItem, selectedItem, url, isSubmitting, previewableOnly]);
   var handleTabChange = (0, _react.useCallback)(function (activeTab) {
     var _plugins$activeTab$ta, _plugins$activeTab;
     dispatch({
@@ -256,6 +322,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
       // We don't want recents to be hidden, even though we don't have a selection
       preventHidingRecents: true,
       invalidUrl: false,
+      hasPreview: true,
       activeTab: activeTab
     });
     trackAttribute('tab', (_plugins$activeTab$ta = plugins === null || plugins === void 0 || (_plugins$activeTab = plugins[activeTab]) === null || _plugins$activeTab === void 0 ? void 0 : _plugins$activeTab.tabKey) !== null && _plugins$activeTab$ta !== void 0 ? _plugins$activeTab$ta : null);
@@ -281,7 +348,8 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
           activeIndex: index,
           selectedIndex: index,
           url: item.url,
-          invalidUrl: false
+          invalidUrl: false,
+          hasPreview: true
         });
       }
     }
@@ -314,7 +382,8 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
         activeIndex: updatedIndex,
         selectedIndex: updatedIndex,
         url: item.url,
-        invalidUrl: false
+        invalidUrl: false,
+        hasPreview: true
       });
     }
   }, [items, activeIndex, selectedItem, handleSelected, handleSubmit, trackAttribute, activePlugin]);
@@ -338,6 +407,15 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
   // 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 customSubmitButtonLabel = customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined;
+  var errorMessage = invalidUrl ? previewableOnly && !hasPreview ? /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.formMessages.noEmbedAvailable, {
+    values: {
+      a: function a(chunk) {
+        return /*#__PURE__*/React.createElement(_linkUrl.default, {
+          href: "https://support.atlassian.com/platform-experiences/docs/smart-links-from-jira-and-other-products/"
+        }, chunk);
+      }
+    }
+  })) : intl.formatMessage(_messages.formMessages.linkInvalid) : null;
   return /*#__PURE__*/React.createElement("form", {
     "data-testid": testIds.linkPicker,
     // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
@@ -359,7 +437,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     value: url,
     autoFocus: true,
     clearLabel: intl.formatMessage(_messages.formMessages.clearLink),
-    error: invalidUrl ? intl.formatMessage(_messages.formMessages.linkInvalid) : null,
+    error: errorMessage,
     spotlightTargetName: "link-picker-search-field-spotlight-target",
     "aria-readonly": isSubmitting
   }, a11yList, {

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

@@ -49,6 +49,11 @@ var formMessages = exports.formMessages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.linkPicker.clearLink',
     defaultMessage: 'Clear',
     description: 'Tooltip message for link input clear button'
+  },
+  noEmbedAvailable: {
+    id: 'fabric.linkPicker.noEmbed',
+    defaultMessage: "Embed view isn't supported for this link. <a>More about why some Smart Links don't display content.</a>",
+    description: 'Error message shown for links without embeds'
   }
 });
 var linkTextMessages = exports.linkTextMessages = (0, _reactIntlNext.defineMessages)({

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

@@ -8,11 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.testIds = exports.TextInput = void 0;
 require("./index.compiled.css");
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
 var _useCallbackRef = require("use-callback-ref");
 var _form = require("@atlaskit/form");
 var _crossCircleSelectClear = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle--select-clear"));
@@ -94,33 +93,33 @@ var TextInput = exports.TextInput = function TextInput(_ref) {
     onClear === null || onClear === void 0 || onClear(name);
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
   }, [name, onClear]);
-  var clearText = restProps.value !== '' && /*#__PURE__*/React.createElement(_tooltip.default, {
+  var clearText = restProps.value !== '' && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: clearLabel
-  }, /*#__PURE__*/React.createElement(_compiled.Pressable, {
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     xcss: styles.clearTextButton,
     onClick: handleClear,
     testId: testIds.clearUrlButton
-  }, /*#__PURE__*/React.createElement(_crossCircleSelectClear.default, {
+  }, /*#__PURE__*/_react.default.createElement(_crossCircleSelectClear.default, {
     LEGACY_size: "medium",
     label: clearLabel || '',
     color: "var(--ds-icon-subtle, #626F86)",
     spacing: "spacious"
   })));
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)(["_7yjtidpf _onzypxbi", (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_11c81vhk"])
-  }, /*#__PURE__*/React.createElement(_form.Field, {
+  }, /*#__PURE__*/_react.default.createElement(_form.Field, {
     label: label,
     name: name
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps;
-    return /*#__PURE__*/React.createElement(_conditionalSpotlightTargetWrapper.ConditionalSpotlightTargetWrapper, {
+    return /*#__PURE__*/_react.default.createElement(_conditionalSpotlightTargetWrapper.ConditionalSpotlightTargetWrapper, {
       spotlightTargetName: spotlightTargetName
-    }, /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_textfield.default, (0, _extends2.default)({}, fieldProps, restProps, {
+    }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, fieldProps, restProps, {
       onKeyDown: handleKeydown,
       ref: textfieldRef,
       elemAfterInput: clearText,
       isInvalid: !!error
-    })), error && /*#__PURE__*/React.createElement(_form.ErrorMessage, {
+    })), error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
       testId: testIds.urlError
     }, error)));
   }));

package/dist/cjs/ui/main.js

@@ -26,7 +26,7 @@ var testIds = exports.testIds = {
 };
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "3.2.4" || '',
+  packageVersion: "3.3.0" || '',
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };

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

@@ -8,10 +8,12 @@ import { FormattedMessage, useIntl } from 'react-intl-next';
 import uuid from 'uuid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { HelperMessage } from '@atlaskit/form';
+import { CardClient } from '@atlaskit/link-provider';
 import { isSafeUrl, normalizeUrl } from '@atlaskit/linking-common/url';
 import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
+import LinkUrl from '@atlaskit/smart-card/link-url';
 import { N700 } from '@atlaskit/theme/colors';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useLinkPickerAnalytics, withInputFieldTracking, withLinkPickerAnalyticsContext } from '../../common/analytics';
@@ -54,13 +56,15 @@ const initState = {
   selectedIndex: -1,
   invalidUrl: false,
   activeTab: 0,
-  preventHidingRecents: false
+  preventHidingRecents: false,
+  hasPreview: true
 };
 function reducer(state, payload) {
   if (payload.url && state.url !== payload.url) {
     return {
       ...state,
       invalidUrl: false,
+      hasPreview: true,
       selectedIndex: isSafeUrl(payload.url) && payload.url.length ? -1 : state.selectedIndex,
       ...payload
     };
@@ -85,6 +89,7 @@ const LinkInputField = withInputFieldTracking(TextInput, 'link', (event, attribu
   linkFieldContent: getLinkFieldContent(event.currentTarget.value)
 }));
 const DisplayTextInputField = withInputFieldTracking(TextInput, 'displayText');
+const client = new CardClient();
 export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   onSubmit,
   onCancel,
@@ -99,7 +104,8 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   isSubmitting = false,
   adaptiveHeight = false,
   moveSubmitButton = false,
-  inputRef
+  inputRef,
+  previewableLinksOnly = false
 }) => {
   const {
     createAnalyticsEvent
@@ -115,7 +121,8 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     url,
     displayText,
     invalidUrl,
-    activeTab
+    activeTab,
+    hasPreview
   } = state;
   const intl = useIntl();
   const queryState = useSearchQuery(state);
@@ -132,6 +139,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   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;
+  const previewableOnly = fg('platform-linking-link-picker-previewable-only') && previewableLinksOnly;
   const {
     trackAttribute,
     getAttributes
@@ -165,7 +173,8 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     dispatch({
       activeIndex: -1,
       selectedIndex: -1,
-      [field]: ''
+      [field]: '',
+      hasPreview: true
     });
   }, [dispatch]);
   const handleUrlClear = useCallback(() => {
@@ -225,7 +234,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
       });
     }
   }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
-  const handleSubmit = useCallback(event => {
+  const handleSubmit = useCallback(async event => {
     event === null || event === void 0 ? void 0 : event.preventDefault();
     if (isSubmitting) {
       // Prevent submit while submitting
@@ -236,12 +245,31 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     }
     const normalized = normalizeUrl(url);
     if (normalized) {
-      return handleInsert(normalized, null, 'manual');
+      if (previewableOnly) {
+        try {
+          const urlResponse = await client.fetchData(normalized);
+          const responseObject = urlResponse === null || urlResponse === void 0 ? void 0 : urlResponse.data;
+          if (responseObject && 'preview' in responseObject) {
+            return handleInsert(normalized, null, 'manual');
+          } else {
+            return dispatch({
+              invalidUrl: true,
+              hasPreview: false
+            });
+          }
+        } catch (error) {
+          return dispatch({
+            invalidUrl: true
+          });
+        }
+      } else {
+        return handleInsert(normalized, null, 'manual');
+      }
     }
     return dispatch({
       invalidUrl: true
     });
-  }, [dispatch, handleInsert, isSelectedItem, selectedItem, url, isSubmitting]);
+  }, [dispatch, handleInsert, isSelectedItem, selectedItem, url, isSubmitting, previewableOnly]);
   const handleTabChange = useCallback(activeTab => {
     var _plugins$activeTab$ta, _plugins$activeTab;
     dispatch({
@@ -252,6 +280,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
       // We don't want recents to be hidden, even though we don't have a selection
       preventHidingRecents: true,
       invalidUrl: false,
+      hasPreview: true,
       activeTab
     });
     trackAttribute('tab', (_plugins$activeTab$ta = plugins === null || plugins === void 0 ? void 0 : (_plugins$activeTab = plugins[activeTab]) === null || _plugins$activeTab === void 0 ? void 0 : _plugins$activeTab.tabKey) !== null && _plugins$activeTab$ta !== void 0 ? _plugins$activeTab$ta : null);
@@ -275,7 +304,8 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
           activeIndex: index,
           selectedIndex: index,
           url: item.url,
-          invalidUrl: false
+          invalidUrl: false,
+          hasPreview: true
         });
       }
     }
@@ -308,7 +338,8 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
         activeIndex: updatedIndex,
         selectedIndex: updatedIndex,
         url: item.url,
-        invalidUrl: false
+        invalidUrl: false,
+        hasPreview: true
       });
     }
   }, [items, activeIndex, selectedItem, handleSelected, handleSubmit, trackAttribute, activePlugin]);
@@ -332,6 +363,13 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   // for details: https://a11y-internal.atlassian.net/browse/AK-740
   const screenReaderText = browser().safari && getScreenReaderText(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
   const customSubmitButtonLabel = customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined;
+  const errorMessage = invalidUrl ? previewableOnly && !hasPreview ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, formMessages.noEmbedAvailable, {
+    values: {
+      a: chunk => /*#__PURE__*/React.createElement(LinkUrl, {
+        href: "https://support.atlassian.com/platform-experiences/docs/smart-links-from-jira-and-other-products/"
+      }, chunk)
+    }
+  })) : intl.formatMessage(formMessages.linkInvalid) : null;
   return /*#__PURE__*/React.createElement("form", {
     "data-testid": testIds.linkPicker,
     // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
@@ -353,7 +391,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     value: url,
     autoFocus: true,
     clearLabel: intl.formatMessage(formMessages.clearLink),
-    error: invalidUrl ? intl.formatMessage(formMessages.linkInvalid) : null,
+    error: errorMessage,
     spotlightTargetName: "link-picker-search-field-spotlight-target",
     "aria-readonly": isSubmitting
   }, a11yList, {

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

@@ -43,6 +43,11 @@ export const formMessages = defineMessages({
     id: 'fabric.linkPicker.clearLink',
     defaultMessage: 'Clear',
     description: 'Tooltip message for link input clear button'
+  },
+  noEmbedAvailable: {
+    id: 'fabric.linkPicker.noEmbed',
+    defaultMessage: "Embed view isn't supported for this link. <a>More about why some Smart Links don't display content.</a>",
+    description: 'Error message shown for links without embeds'
   }
 });
 export const linkTextMessages = defineMessages({

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

@@ -1,9 +1,8 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Fragment, useCallback, useMemo, useRef } from 'react';
+import React, { Fragment, useCallback, useMemo, useRef } from 'react';
 import { useMergeRefs } from 'use-callback-ref';
 import { ErrorMessage, Field } from '@atlaskit/form';
 import Selectclear from '@atlaskit/icon/core/migration/cross-circle--select-clear';

package/dist/es2019/ui/main.js

@@ -15,7 +15,7 @@ export const testIds = {
 };
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "3.2.4" || '',
+  packageVersion: "3.3.0" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

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

@@ -1,10 +1,12 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Fragment, memo, useCallback, useLayoutEffect, useMemo, useReducer } from 'react';
@@ -12,10 +14,12 @@ import { FormattedMessage, useIntl } from 'react-intl-next';
 import uuid from 'uuid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { HelperMessage } from '@atlaskit/form';
+import { CardClient } from '@atlaskit/link-provider';
 import { isSafeUrl, normalizeUrl } from '@atlaskit/linking-common/url';
 import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
+import LinkUrl from '@atlaskit/smart-card/link-url';
 import { N700 } from '@atlaskit/theme/colors';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useLinkPickerAnalytics, withInputFieldTracking, withLinkPickerAnalyticsContext } from '../../common/analytics';
@@ -55,12 +59,14 @@ var initState = {
   selectedIndex: -1,
   invalidUrl: false,
   activeTab: 0,
-  preventHidingRecents: false
+  preventHidingRecents: false,
+  hasPreview: true
 };
 function reducer(state, payload) {
   if (payload.url && state.url !== payload.url) {
     return _objectSpread(_objectSpread({}, state), {}, {
       invalidUrl: false,
+      hasPreview: true,
       selectedIndex: isSafeUrl(payload.url) && payload.url.length ? -1 : state.selectedIndex
     }, payload);
   }
@@ -82,6 +88,7 @@ var LinkInputField = withInputFieldTracking(TextInput, 'link', function (event,
   });
 });
 var DisplayTextInputField = withInputFieldTracking(TextInput, 'displayText');
+var client = new CardClient();
 export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(function (_ref) {
   var onSubmit = _ref.onSubmit,
     onCancel = _ref.onCancel,
@@ -99,7 +106,9 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     adaptiveHeight = _ref$adaptiveHeight === void 0 ? false : _ref$adaptiveHeight,
     _ref$moveSubmitButton = _ref.moveSubmitButton,
     moveSubmitButton = _ref$moveSubmitButton === void 0 ? false : _ref$moveSubmitButton,
-    inputRef = _ref.inputRef;
+    inputRef = _ref.inputRef,
+    _ref$previewableLinks = _ref.previewableLinksOnly,
+    previewableLinksOnly = _ref$previewableLinks === void 0 ? false : _ref$previewableLinks;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useReducer = useReducer(reducer, _objectSpread(_objectSpread({}, initState), {}, {
@@ -114,7 +123,8 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     url = state.url,
     displayText = state.displayText,
     invalidUrl = state.invalidUrl,
-    activeTab = state.activeTab;
+    activeTab = state.activeTab,
+    hasPreview = state.hasPreview;
   var intl = useIntl();
   var queryState = useSearchQuery(state);
   var _usePlugins = usePlugins(queryState, activeTab, plugins),
@@ -129,6 +139,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
   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 previewableOnly = fg('platform-linking-link-picker-previewable-only') && previewableLinksOnly;
   var _useLinkPickerAnalyti = useLinkPickerAnalytics(),
     trackAttribute = _useLinkPickerAnalyti.trackAttribute,
     getAttributes = _useLinkPickerAnalyti.getAttributes;
@@ -160,10 +171,10 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     });
   }, [dispatch]);
   var handleClear = useCallback(function (field) {
-    dispatch(_defineProperty({
+    dispatch(_defineProperty(_defineProperty({
       activeIndex: -1,
       selectedIndex: -1
-    }, field, ''));
+    }, field, ''), "hasPreview", true));
   }, [dispatch]);
   var handleUrlClear = useCallback(function () {
     if (isSubmitting) {
@@ -219,23 +230,78 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
       handleInsert(_url, name, 'typeAhead', _objectSpread({}, selectedItem));
     }
   }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
-  var handleSubmit = useCallback(function (event) {
-    event === null || event === void 0 || event.preventDefault();
-    if (isSubmitting) {
-      // Prevent submit while submitting
-      return;
-    }
-    if (isSelectedItem && selectedItem) {
-      return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
-    }
-    var normalized = normalizeUrl(url);
-    if (normalized) {
-      return handleInsert(normalized, null, 'manual');
-    }
-    return dispatch({
-      invalidUrl: true
-    });
-  }, [dispatch, handleInsert, isSelectedItem, selectedItem, url, isSubmitting]);
+  var handleSubmit = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
+      var normalized, urlResponse, responseObject;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            event === null || event === void 0 || event.preventDefault();
+            if (!isSubmitting) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            if (!(isSelectedItem && selectedItem)) {
+              _context.next = 5;
+              break;
+            }
+            return _context.abrupt("return", handleInsert(selectedItem.url, selectedItem.name, 'typeAhead'));
+          case 5:
+            normalized = normalizeUrl(url);
+            if (!normalized) {
+              _context.next = 26;
+              break;
+            }
+            if (!previewableOnly) {
+              _context.next = 25;
+              break;
+            }
+            _context.prev = 8;
+            _context.next = 11;
+            return client.fetchData(normalized);
+          case 11:
+            urlResponse = _context.sent;
+            responseObject = urlResponse === null || urlResponse === void 0 ? void 0 : urlResponse.data;
+            if (!(responseObject && 'preview' in responseObject)) {
+              _context.next = 17;
+              break;
+            }
+            return _context.abrupt("return", handleInsert(normalized, null, 'manual'));
+          case 17:
+            return _context.abrupt("return", dispatch({
+              invalidUrl: true,
+              hasPreview: false
+            }));
+          case 18:
+            _context.next = 23;
+            break;
+          case 20:
+            _context.prev = 20;
+            _context.t0 = _context["catch"](8);
+            return _context.abrupt("return", dispatch({
+              invalidUrl: true
+            }));
+          case 23:
+            _context.next = 26;
+            break;
+          case 25:
+            return _context.abrupt("return", handleInsert(normalized, null, 'manual'));
+          case 26:
+            return _context.abrupt("return", dispatch({
+              invalidUrl: true
+            }));
+          case 27:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[8, 20]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [dispatch, handleInsert, isSelectedItem, selectedItem, url, isSubmitting, previewableOnly]);
   var handleTabChange = useCallback(function (activeTab) {
     var _plugins$activeTab$ta, _plugins$activeTab;
     dispatch({
@@ -246,6 +312,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
       // We don't want recents to be hidden, even though we don't have a selection
       preventHidingRecents: true,
       invalidUrl: false,
+      hasPreview: true,
       activeTab: activeTab
     });
     trackAttribute('tab', (_plugins$activeTab$ta = plugins === null || plugins === void 0 || (_plugins$activeTab = plugins[activeTab]) === null || _plugins$activeTab === void 0 ? void 0 : _plugins$activeTab.tabKey) !== null && _plugins$activeTab$ta !== void 0 ? _plugins$activeTab$ta : null);
@@ -271,7 +338,8 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
           activeIndex: index,
           selectedIndex: index,
           url: item.url,
-          invalidUrl: false
+          invalidUrl: false,
+          hasPreview: true
         });
       }
     }
@@ -304,7 +372,8 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
         activeIndex: updatedIndex,
         selectedIndex: updatedIndex,
         url: item.url,
-        invalidUrl: false
+        invalidUrl: false,
+        hasPreview: true
       });
     }
   }, [items, activeIndex, selectedItem, handleSelected, handleSubmit, trackAttribute, activePlugin]);
@@ -328,6 +397,15 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
   // for details: https://a11y-internal.atlassian.net/browse/AK-740
   var screenReaderText = browser().safari && getScreenReaderText(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
   var customSubmitButtonLabel = customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined;
+  var errorMessage = invalidUrl ? previewableOnly && !hasPreview ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, formMessages.noEmbedAvailable, {
+    values: {
+      a: function a(chunk) {
+        return /*#__PURE__*/React.createElement(LinkUrl, {
+          href: "https://support.atlassian.com/platform-experiences/docs/smart-links-from-jira-and-other-products/"
+        }, chunk);
+      }
+    }
+  })) : intl.formatMessage(formMessages.linkInvalid) : null;
   return /*#__PURE__*/React.createElement("form", {
     "data-testid": testIds.linkPicker,
     // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
@@ -349,7 +427,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     value: url,
     autoFocus: true,
     clearLabel: intl.formatMessage(formMessages.clearLink),
-    error: invalidUrl ? intl.formatMessage(formMessages.linkInvalid) : null,
+    error: errorMessage,
     spotlightTargetName: "link-picker-search-field-spotlight-target",
     "aria-readonly": isSubmitting
   }, a11yList, {

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

@@ -43,6 +43,11 @@ export var formMessages = defineMessages({
     id: 'fabric.linkPicker.clearLink',
     defaultMessage: 'Clear',
     description: 'Tooltip message for link input clear button'
+  },
+  noEmbedAvailable: {
+    id: 'fabric.linkPicker.noEmbed',
+    defaultMessage: "Embed view isn't supported for this link. <a>More about why some Smart Links don't display content.</a>",
+    description: 'Error message shown for links without embeds'
   }
 });
 export var linkTextMessages = defineMessages({

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

@@ -3,9 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName", "inputRef"];
 import "./index.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Fragment, useCallback, useMemo, useRef } from 'react';
+import React, { Fragment, useCallback, useMemo, useRef } from 'react';
 import { useMergeRefs } from 'use-callback-ref';
 import { ErrorMessage, Field } from '@atlaskit/form';
 import Selectclear from '@atlaskit/icon/core/migration/cross-circle--select-clear';

package/dist/esm/ui/main.js

@@ -16,7 +16,7 @@ export var testIds = {
 };
 export var PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "3.2.4" || '',
+  packageVersion: "3.3.0" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/dist/types/common/types.d.ts

@@ -82,6 +82,7 @@ export interface PickerState {
     activeTab: number;
     /** When true, even if the selected index is -1, don't hide the recents. */
     preventHidingRecents: boolean;
+    hasPreview: boolean;
 }
 interface Meta {
     /** Indicates how the link was picked. */
@@ -155,6 +156,8 @@ export interface LinkPickerProps {
     moveSubmitButton?: boolean;
     /** Ref to the link picker search input. */
     inputRef?: Ref<HTMLInputElement>;
+    /**Disables URLs that do not have an embeddable preview */
+    previewableLinksOnly?: boolean;
 }
 type CustomLinkPickerMessages = {
     /** Label for the link input field */

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

@@ -43,6 +43,11 @@ export declare const formMessages: {
         defaultMessage: string;
         description: string;
     };
+    noEmbedAvailable: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export declare const linkTextMessages: {
     linkTextLabel: {

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type Ref } from 'react';
+import React, { type Ref } from 'react';
 import { type TextFieldProps } from '@atlaskit/textfield';
 import { type ConditionalSpotlightTargetWrapperProps } from './conditional-spotlight-target-wrapper';
 export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & Pick<ConditionalSpotlightTargetWrapperProps, 'spotlightTargetName'> & {
@@ -13,7 +13,7 @@ export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & Pick<Condi
     onRedo?: Function;
     onClear?: (name: string) => void;
     clearLabel?: string;
-    error?: string | null;
+    error?: React.ReactNode;
     /** Ref to the link picker search input. */
     inputRef?: Ref<HTMLInputElement>;
 };

package/dist/types-ts4.5/common/types.d.ts

@@ -85,6 +85,7 @@ export interface PickerState {
     activeTab: number;
     /** When true, even if the selected index is -1, don't hide the recents. */
     preventHidingRecents: boolean;
+    hasPreview: boolean;
 }
 interface Meta {
     /** Indicates how the link was picked. */
@@ -158,6 +159,8 @@ export interface LinkPickerProps {
     moveSubmitButton?: boolean;
     /** Ref to the link picker search input. */
     inputRef?: Ref<HTMLInputElement>;
+    /**Disables URLs that do not have an embeddable preview */
+    previewableLinksOnly?: boolean;
 }
 type CustomLinkPickerMessages = {
     /** Label for the link input field */

package/dist/types-ts4.5/ui/link-picker/messages.d.ts

@@ -43,6 +43,11 @@ export declare const formMessages: {
         defaultMessage: string;
         description: string;
     };
+    noEmbedAvailable: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export declare const linkTextMessages: {
     linkTextLabel: {

package/dist/types-ts4.5/ui/link-picker/text-input/index.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type Ref } from 'react';
+import React, { type Ref } from 'react';
 import { type TextFieldProps } from '@atlaskit/textfield';
 import { type ConditionalSpotlightTargetWrapperProps } from './conditional-spotlight-target-wrapper';
 export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & Pick<ConditionalSpotlightTargetWrapperProps, 'spotlightTargetName'> & {
@@ -13,7 +13,7 @@ export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & Pick<Condi
     onRedo?: Function;
     onClear?: (name: string) => void;
     clearLabel?: string;
-    error?: string | null;
+    error?: React.ReactNode;
     /** Ref to the link picker search input. */
     inputRef?: Ref<HTMLInputElement>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "3.2.4",
+	"version": "3.3.0",
 	"description": "Standalone link picker",
 	"author": "Atlassian Pty Ltd",
 	"publishConfig": {
@@ -40,6 +40,9 @@
 		"platform-linking-visual-refresh-v1": {
 			"type": "boolean"
 		},
+		"platform-linking-link-picker-previewable-only": {
+			"type": "boolean"
+		},
 		"bandicoots-a11y-link-picker-styling": {
 			"type": "boolean"
 		},
@@ -76,10 +79,12 @@
 		"@atlaskit/icon": "^26.0.0",
 		"@atlaskit/intl-messages-provider": "^2.0.0",
 		"@atlaskit/link": "^3.1.0",
+		"@atlaskit/link-provider": "^3.0.0",
 		"@atlaskit/linking-common": "^9.0.0",
-		"@atlaskit/onboarding": "^14.0.0",
+		"@atlaskit/onboarding": "^14.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.7.0",
+		"@atlaskit/smart-card": "^38.1.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.0.0",
 		"@atlaskit/textfield": "^8.0.0",
@@ -105,8 +110,7 @@
 		"@af/analytics-codegen": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/dropdown-menu": "^14.1.0",
-		"@atlaskit/link-provider": "^3.0.0",
+		"@atlaskit/dropdown-menu": "^14.2.0",
 		"@atlaskit/link-test-helpers": "^8.0.0",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",