@atlaskit/link-picker 3.12.1 → 3.14.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/link-picker
 
+## 3.14.0
+
+### Minor Changes
+
+- [`d21c47b4f935f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d21c47b4f935f) -
+  [ux] New prop submitOnInputChange for link picker that removes the submit button and adds a submit
+  on input change
+
+## 3.13.0
+
+### Minor Changes
+
+- [`be449d28b1149`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/be449d28b1149) -
+  [ux] Adding optional props recentSearchListSize, and shouldRenderNoResultsImage for Link Picker to
+  allow for showing insert button on smaller screens. Additionally updating the hideLinkDisplayText
+  prop to be passed as a part of a new linkPickerOptions object instead of as a standalone variable.
+
 ## 3.12.1
 
 ### Patch Changes

package/dist/cjs/services/use-plugins/index.js

@@ -11,6 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _convertToError = require("@atlaskit/frontend-utilities/convert-to-error");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../../common/analytics");
 var _constants = require("../../common/constants");
 var _analytics2 = _interopRequireDefault(require("../../common/utils/analytics/analytics.codegen"));
@@ -21,6 +22,7 @@ var _utils = require("./utils");
 function usePlugins(state, activeTab, plugins) {
   var _activePlugin$tabKey;
   var thirdPartyTabExperimentEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var recentSearchListSize = arguments.length > 4 ? arguments[4] : undefined;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useState = (0, _react.useState)(0),
@@ -81,7 +83,7 @@ function usePlugins(state, activeTab, plugins) {
               dispatch({
                 type: 'SUCCESS',
                 payload: {
-                  items: limit(value.data),
+                  items: limit(value.data, (0, _platformFeatureFlags.fg)('aifc_create_enabled') ? recentSearchListSize : undefined),
                   isLoading: !done
                 }
               });
@@ -114,7 +116,7 @@ function usePlugins(state, activeTab, plugins) {
     }();
     updateResults();
     return cancel;
-  }, [activePlugin, state, retries, createAnalyticsEvent, dispatch]);
+  }, [activePlugin, state, retries, createAnalyticsEvent, dispatch, recentSearchListSize]);
   var tabs = (0, _react.useMemo)(function () {
     if (!plugins || plugins.length <= 1) {
       return [];
@@ -157,5 +159,6 @@ function usePlugins(state, activeTab, plugins) {
   };
 }
 function limit(items) {
-  return items.slice(0, _constants.RECENT_SEARCH_LIST_SIZE);
+  var recentSearchListSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.RECENT_SEARCH_LIST_SIZE;
+  return items.slice(0, recentSearchListSize);
 }

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _useDebounce3 = require("use-debounce");
+var _url = require("@atlaskit/linking-common/url");
+var AutoSubmitOnChange = function AutoSubmitOnChange(_ref) {
+  var url = _ref.url,
+    isSubmitting = _ref.isSubmitting,
+    isSelectedItem = _ref.isSelectedItem,
+    onSubmit = _ref.onSubmit,
+    onClearInvalidUrl = _ref.onClearInvalidUrl;
+  // Debounce the URL to avoid rapid successive submissions during typing
+  var _useDebounce = (0, _useDebounce3.useDebounce)(url, 300),
+    _useDebounce2 = (0, _slicedToArray2.default)(_useDebounce, 1),
+    debouncedUrl = _useDebounce2[0];
+  var isBlank = url === '';
+  // Auto-submit when URL changes
+  (0, _react.useEffect)(function () {
+    //prevents misalignment between url and debounced url when clear button is clicked
+    if (isBlank) {
+      onClearInvalidUrl();
+      return;
+    }
+    // Only auto-submit if debouncedUrl is not empty and not already submitting
+    if (debouncedUrl.trim() && !isSubmitting && !isSelectedItem) {
+      var normalized = (0, _url.normalizeUrl)(debouncedUrl);
+      if (normalized) {
+        onSubmit();
+      }
+    }
+    //onSubmit() left out to prevent infinite loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedUrl, isSubmitting, isSelectedItem, onClearInvalidUrl, isBlank]);
+
+  // This component renders nothing
+  return null;
+};
+var _default = exports.default = AutoSubmitOnChange;

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

@@ -36,6 +36,7 @@ var _handleNavKeyDown = require("../../common/utils/handleNavKeyDown");
 var _usePlugins2 = require("../../services/use-plugins");
 var _useSearchQuery = require("../../services/use-search-query");
 var _announcer = require("./announcer");
+var _autoSubmitOnChange = _interopRequireDefault(require("./autoSubmitOnChange"));
 var _formFooter = require("./form-footer");
 var _linkPickerSubmitButton = require("./form-footer/link-picker-submit-button");
 var _messages = require("./messages");
@@ -117,7 +118,11 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     inputRef = _ref.inputRef,
     _ref$previewableLinks = _ref.previewableLinksOnly,
     previewableLinksOnly = _ref$previewableLinks === void 0 ? false : _ref$previewableLinks,
-    additionalError = _ref.additionalError;
+    additionalError = _ref.additionalError,
+    _ref$submitOnInputCha = _ref.submitOnInputChange,
+    submitOnInputChange = _ref$submitOnInputCha === void 0 ? false : _ref$submitOnInputCha,
+    recentSearchListSize = _ref.recentSearchListSize,
+    shouldRenderNoResultsImage = _ref.shouldRenderNoResultsImage;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useReducer = (0, _react.useReducer)(reducer, _objectSpread(_objectSpread({}, initState), {}, {
@@ -143,7 +148,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
   var linkPicker3pOneDriveExperimentCohort = _featureGateJsClient.default.initializeCalled() ? _featureGateJsClient.default.getExperimentValue('link_picker_3p_onedrive_experiment', 'cohort', 'control') : 'control';
   var oneDriveTabExperimentEnabled = linkPicker3pOneDriveExperimentCohort === 'show_onedrive_tab';
   var thirdPartyTabExperimentEnabled = googleDriveTabExperimentEnabled || oneDriveTabExperimentEnabled;
-  var _usePlugins = (0, _usePlugins2.usePlugins)(queryState, activeTab, plugins, thirdPartyTabExperimentEnabled),
+  var _usePlugins = (0, _usePlugins2.usePlugins)(queryState, activeTab, plugins, thirdPartyTabExperimentEnabled, recentSearchListSize),
     items = _usePlugins.items,
     isLoadingResults = _usePlugins.isLoading,
     isActivePlugin = _usePlugins.isActivePlugin,
@@ -157,6 +162,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
   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 flaggedSubmitOnInputChange = (0, _platformFeatureFlags.fg)('platform-linking-link-picker-previewable-only') && submitOnInputChange;
   var _useLinkPickerAnalyti = (0, _analytics.useLinkPickerAnalytics)(),
     trackAttribute = _useLinkPickerAnalyti.trackAttribute,
     getAttributes = _useLinkPickerAnalyti.getAttributes;
@@ -247,6 +253,13 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
       handleInsert(_url, name, 'typeAhead', _objectSpread({}, selectedItem));
     }
   }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
+  var handleClearInvalidUrl = (0, _platformFeatureFlags.fg)('platform-linking-link-picker-previewable-only') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _react.useCallback)(function () {
+    dispatch({
+      invalidUrl: false
+    });
+  }, [dispatch]) : function () {};
   var handleSubmit = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(event) {
       var normalized, urlResponse, responseObject;
@@ -430,7 +443,13 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
     onSubmitCapture: handleSubmit,
     className: (0, _runtime.ax)(["_19bv164s _u5f31pah _ca0q1k79 _n3td1t3k _vchhusvi _1e0ctcjq"])
-  }, /*#__PURE__*/React.createElement(_trackMount.TrackMount, null), isActivePlugin && /*#__PURE__*/React.createElement(_react.Fragment, null, screenReaderText && /*#__PURE__*/React.createElement(_announcer.Announcer, {
+  }, /*#__PURE__*/React.createElement(_trackMount.TrackMount, null), flaggedSubmitOnInputChange && /*#__PURE__*/React.createElement(_autoSubmitOnChange.default, {
+    url: url,
+    isSubmitting: isSubmitting,
+    isSelectedItem: isSelectedItem,
+    onSubmit: handleSubmit,
+    onClearInvalidUrl: handleClearInvalidUrl
+  }), isActivePlugin && /*#__PURE__*/React.createElement(_react.Fragment, null, screenReaderText && /*#__PURE__*/React.createElement(_announcer.Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
     ariaRelevant: "additions",
@@ -500,7 +519,8 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     handleTabChange: handleTabChange,
     handleSearchListOnChange: handleSearchListOnChange,
     adaptiveHeight: adaptiveHeight,
-    retry: retry
+    retry: retry,
+    shouldRenderNoResultsImage: shouldRenderNoResultsImage
   }), /*#__PURE__*/React.createElement(_formFooter.FormFooter, {
     error: error,
     items: items
@@ -514,7 +534,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     action: pluginAction,
     customSubmitButtonLabel: customSubmitButtonLabel,
     submitMessageId: submitMessageId,
-    hideSubmitButton: moveSubmitButton,
+    hideSubmitButton: moveSubmitButton || flaggedSubmitOnInputChange,
     className: (0, _runtime.ax)([(!queryState || !(plugins !== null && plugins !== void 0 && plugins.length)) && "_19pkpxbi"])
   }));
 }));

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

@@ -53,7 +53,8 @@ var SearchResults = exports.SearchResults = function SearchResults(_ref) {
     handleSelected = _ref.handleSelected,
     handleKeyDown = _ref.handleKeyDown,
     adaptiveHeight = _ref.adaptiveHeight,
-    retry = _ref.retry;
+    retry = _ref.retry,
+    shouldRenderNoResultsImage = _ref.shouldRenderNoResultsImage;
   var isActivePlugin = !!activePlugin;
   // Experiment with new 3P tabs in link picker. For more info, please see: go/link-picker-3p-drive-one-pager.
   var linkPicker3pDriveExperimentCohort = _featureGateJsClient.default.initializeCalled() ? _featureGateJsClient.default.getExperimentValue('link_picker_3p_drive_experiment', 'cohort', 'control') : 'control';
@@ -101,7 +102,8 @@ var SearchResults = exports.SearchResults = function SearchResults(_ref) {
     hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
     activePlugin: activePlugin,
     adaptiveHeight: adaptiveHeight,
-    tabPanelId: "".concat(testIds.tabList, "-").concat(activeTab, "-tab")
+    tabPanelId: "".concat(testIds.tabList, "-").concat(activeTab, "-tab"),
+    shouldRenderNoResultsImage: shouldRenderNoResultsImage
   }), error ? (_activePlugin$errorFa = activePlugin === null || activePlugin === 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 : /*#__PURE__*/React.createElement(_linkSearchError.LinkSearchError, {
     onRetry: retry
   }) : null));

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

@@ -22,7 +22,7 @@ var _handleNavKeyDown = require("../../../../common/utils/handleNavKeyDown");
 var _linkSearchNoResults = require("./link-search-no-results");
 var _listItem = require("./list-item");
 var _useTrackResultsShown = require("./use-track-results-shown");
-var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "ariaReadOnly", "role", "id", "hasSearchTerm", "activePlugin", "adaptiveHeight", "className", "tabPanelId"];
+var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "ariaReadOnly", "role", "id", "hasSearchTerm", "activePlugin", "adaptiveHeight", "className", "tabPanelId", "shouldRenderNoResultsImage"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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) { (0, _defineProperty2.default)(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; }
@@ -76,6 +76,7 @@ var LinkSearchList = exports.LinkSearchList = /*#__PURE__*/(0, _react.forwardRef
     adaptiveHeight = _ref.adaptiveHeight,
     className = _ref.className,
     tabPanelId = _ref.tabPanelId,
+    shouldRenderNoResultsImage = _ref.shouldRenderNoResultsImage,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var itemsContent;
   var loadingContent;
@@ -128,7 +129,9 @@ var LinkSearchList = exports.LinkSearchList = /*#__PURE__*/(0, _react.forwardRef
     }
     return /*#__PURE__*/React.createElement("div", {
       id: tabPanelId
-    }, /*#__PURE__*/React.createElement(_linkSearchNoResults.NoResults, null));
+    }, /*#__PURE__*/React.createElement(_linkSearchNoResults.NoResults, {
+      shouldRenderImage: shouldRenderNoResultsImage
+    }));
   }
   var listItemNameMaxLines = activePlugin === null || activePlugin === void 0 || (_activePlugin$uiOptio = activePlugin.uiOptions) === null || _activePlugin$uiOptio === void 0 ? void 0 : _activePlugin$uiOptio.listItemNameMaxLines;
   if (items && items.length > 0) {

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.testIds = exports.messages = exports.NoResults = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _emptyState = require("../../../../../common/ui/empty-state");
 var _noResultsSvg = require("./no-results-svg");
 var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
@@ -24,13 +25,15 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
 var testIds = exports.testIds = {
   emptyResultPage: 'link-search-no-results'
 };
-var NoResults = exports.NoResults = function NoResults() {
+var NoResults = exports.NoResults = function NoResults(_ref) {
+  var _ref$shouldRenderImag = _ref.shouldRenderImage,
+    shouldRenderImage = _ref$shouldRenderImag === void 0 ? true : _ref$shouldRenderImag;
   var intl = (0, _reactIntlNext.useIntl)();
   return /*#__PURE__*/_react.default.createElement(_emptyState.EmptyState, {
     testId: testIds.emptyResultPage,
     header: intl.formatMessage(messages.noResults),
     description: intl.formatMessage(messages.noResultsDescription),
-    renderImage: function renderImage() {
+    renderImage: !shouldRenderImage && (0, _platformFeatureFlags.fg)('aifc_create_enabled') ? undefined : function () {
       return /*#__PURE__*/_react.default.createElement(_noResultsSvg.NoResultsSVG, null);
     }
   });

package/dist/cjs/ui/main.js

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

package/dist/es2019/services/use-plugins/index.js

@@ -2,12 +2,13 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { convertToError } from '@atlaskit/frontend-utilities/convert-to-error';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useLinkPickerAnalytics } from '../../common/analytics';
 import { ANALYTICS_CHANNEL, RECENT_SEARCH_LIST_SIZE } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
 import { usePluginReducer } from './reducer';
 import { CancellationError, resolvePluginUpdates } from './utils';
-export function usePlugins(state, activeTab, plugins, thirdPartyTabExperimentEnabled = false) {
+export function usePlugins(state, activeTab, plugins, thirdPartyTabExperimentEnabled = false, recentSearchListSize) {
   var _activePlugin$tabKey;
   const {
     createAnalyticsEvent
@@ -55,7 +56,7 @@ export function usePlugins(state, activeTab, plugins, thirdPartyTabExperimentEna
           dispatch({
             type: 'SUCCESS',
             payload: {
-              items: limit(value.data),
+              items: limit(value.data, fg('aifc_create_enabled') ? recentSearchListSize : undefined),
               isLoading: !done
             }
           });
@@ -74,7 +75,7 @@ export function usePlugins(state, activeTab, plugins, thirdPartyTabExperimentEna
     };
     updateResults();
     return cancel;
-  }, [activePlugin, state, retries, createAnalyticsEvent, dispatch]);
+  }, [activePlugin, state, retries, createAnalyticsEvent, dispatch, recentSearchListSize]);
   const tabs = useMemo(() => {
     if (!plugins || plugins.length <= 1) {
       return [];
@@ -110,6 +111,6 @@ export function usePlugins(state, activeTab, plugins, thirdPartyTabExperimentEna
     pluginBanner
   };
 }
-function limit(items) {
-  return items.slice(0, RECENT_SEARCH_LIST_SIZE);
+function limit(items, recentSearchListSize = RECENT_SEARCH_LIST_SIZE) {
+  return items.slice(0, recentSearchListSize);
 }

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

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { useDebounce } from 'use-debounce';
+import { normalizeUrl } from '@atlaskit/linking-common/url';
+const AutoSubmitOnChange = ({
+  url,
+  isSubmitting,
+  isSelectedItem,
+  onSubmit,
+  onClearInvalidUrl
+}) => {
+  // Debounce the URL to avoid rapid successive submissions during typing
+  const [debouncedUrl] = useDebounce(url, 300);
+  const isBlank = url === '';
+  // Auto-submit when URL changes
+  useEffect(() => {
+    //prevents misalignment between url and debounced url when clear button is clicked
+    if (isBlank) {
+      onClearInvalidUrl();
+      return;
+    }
+    // Only auto-submit if debouncedUrl is not empty and not already submitting
+    if (debouncedUrl.trim() && !isSubmitting && !isSelectedItem) {
+      const normalized = normalizeUrl(debouncedUrl);
+      if (normalized) {
+        onSubmit();
+      }
+    }
+    //onSubmit() left out to prevent infinite loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedUrl, isSubmitting, isSelectedItem, onClearInvalidUrl, isBlank]);
+
+  // This component renders nothing
+  return null;
+};
+export default AutoSubmitOnChange;

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

@@ -24,6 +24,7 @@ import { handleNavKeyDown } from '../../common/utils/handleNavKeyDown';
 import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import { Announcer } from './announcer';
+import AutoSubmitOnChange from './autoSubmitOnChange';
 import { FormFooter, testIds as formFooterTestIds } from './form-footer';
 import { LinkPickerSubmitButton } from './form-footer/link-picker-submit-button';
 import { formMessages, linkMessages, linkTextMessages, searchMessages } from './messages';
@@ -105,7 +106,10 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   moveSubmitButton = false,
   inputRef,
   previewableLinksOnly = false,
-  additionalError
+  additionalError,
+  submitOnInputChange = false,
+  recentSearchListSize,
+  shouldRenderNoResultsImage
 }) => {
   const {
     createAnalyticsEvent
@@ -143,11 +147,12 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     retry,
     pluginAction,
     pluginBanner
-  } = usePlugins(queryState, activeTab, plugins, thirdPartyTabExperimentEnabled);
+  } = usePlugins(queryState, activeTab, plugins, thirdPartyTabExperimentEnabled, recentSearchListSize);
   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 flaggedSubmitOnInputChange = fg('platform-linking-link-picker-previewable-only') && submitOnInputChange;
   const {
     trackAttribute,
     getAttributes
@@ -242,6 +247,13 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
       });
     }
   }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
+  const handleClearInvalidUrl = fg('platform-linking-link-picker-previewable-only') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useCallback(() => {
+    dispatch({
+      invalidUrl: false
+    });
+  }, [dispatch]) : () => {};
   const handleSubmit = useCallback(async event => {
     event === null || event === void 0 ? void 0 : event.preventDefault();
     if (isSubmitting) {
@@ -385,7 +397,13 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
     onSubmitCapture: handleSubmit,
     className: ax(["_19bv164s _u5f31pah _ca0q1k79 _n3td1t3k _vchhusvi _1e0ctcjq"])
-  }, /*#__PURE__*/React.createElement(TrackMount, null), isActivePlugin && /*#__PURE__*/React.createElement(Fragment, null, screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
+  }, /*#__PURE__*/React.createElement(TrackMount, null), flaggedSubmitOnInputChange && /*#__PURE__*/React.createElement(AutoSubmitOnChange, {
+    url: url,
+    isSubmitting: isSubmitting,
+    isSelectedItem: isSelectedItem,
+    onSubmit: handleSubmit,
+    onClearInvalidUrl: handleClearInvalidUrl
+  }), isActivePlugin && /*#__PURE__*/React.createElement(Fragment, null, screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
     ariaRelevant: "additions",
@@ -455,7 +473,8 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     handleTabChange: handleTabChange,
     handleSearchListOnChange: handleSearchListOnChange,
     adaptiveHeight: adaptiveHeight,
-    retry: retry
+    retry: retry,
+    shouldRenderNoResultsImage: shouldRenderNoResultsImage
   }), /*#__PURE__*/React.createElement(FormFooter, {
     error: error,
     items: items
@@ -469,7 +488,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     action: pluginAction,
     customSubmitButtonLabel: customSubmitButtonLabel,
     submitMessageId: submitMessageId,
-    hideSubmitButton: moveSubmitButton,
+    hideSubmitButton: moveSubmitButton || flaggedSubmitOnInputChange,
     className: ax([(!queryState || !(plugins !== null && plugins !== void 0 && plugins.length)) && "_19pkpxbi"])
   }));
 }));

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

@@ -42,7 +42,8 @@ export const SearchResults = ({
   handleSelected,
   handleKeyDown,
   adaptiveHeight,
-  retry
+  retry,
+  shouldRenderNoResultsImage
 }) => {
   var _activePlugin$errorFa, _activePlugin$errorFa2;
   const isActivePlugin = !!activePlugin;
@@ -90,7 +91,8 @@ export const SearchResults = ({
     hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
     activePlugin: activePlugin,
     adaptiveHeight: adaptiveHeight,
-    tabPanelId: `${testIds.tabList}-${activeTab}-tab`
+    tabPanelId: `${testIds.tabList}-${activeTab}-tab`,
+    shouldRenderNoResultsImage: shouldRenderNoResultsImage
   }), 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 : /*#__PURE__*/React.createElement(LinkSearchError, {
     onRetry: retry
   }) : null));

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

@@ -63,6 +63,7 @@ export const LinkSearchList = /*#__PURE__*/forwardRef(({
   adaptiveHeight,
   className,
   tabPanelId,
+  shouldRenderNoResultsImage,
   ...restProps
 }, ref) => {
   var _activePlugin$uiOptio;
@@ -117,7 +118,9 @@ export const LinkSearchList = /*#__PURE__*/forwardRef(({
     }
     return /*#__PURE__*/React.createElement("div", {
       id: tabPanelId
-    }, /*#__PURE__*/React.createElement(NoResults, null));
+    }, /*#__PURE__*/React.createElement(NoResults, {
+      shouldRenderImage: shouldRenderNoResultsImage
+    }));
   }
   const listItemNameMaxLines = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$uiOptio = activePlugin.uiOptions) === null || _activePlugin$uiOptio === void 0 ? void 0 : _activePlugin$uiOptio.listItemNameMaxLines;
   if (items && items.length > 0) {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { EmptyState } from '../../../../../common/ui/empty-state';
 import { NoResultsSVG } from './no-results-svg';
 export const messages = defineMessages({
@@ -17,12 +18,14 @@ export const messages = defineMessages({
 export const testIds = {
   emptyResultPage: 'link-search-no-results'
 };
-export const NoResults = () => {
+export const NoResults = ({
+  shouldRenderImage = true
+}) => {
   const intl = useIntl();
   return /*#__PURE__*/React.createElement(EmptyState, {
     testId: testIds.emptyResultPage,
     header: intl.formatMessage(messages.noResults),
     description: intl.formatMessage(messages.noResultsDescription),
-    renderImage: () => /*#__PURE__*/React.createElement(NoResultsSVG, null)
+    renderImage: !shouldRenderImage && fg('aifc_create_enabled') ? undefined : () => /*#__PURE__*/React.createElement(NoResultsSVG, null)
   });
 };

package/dist/es2019/ui/main.js

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

package/dist/esm/services/use-plugins/index.js

@@ -5,6 +5,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { convertToError } from '@atlaskit/frontend-utilities/convert-to-error';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useLinkPickerAnalytics } from '../../common/analytics';
 import { ANALYTICS_CHANNEL, RECENT_SEARCH_LIST_SIZE } from '../../common/constants';
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
@@ -13,6 +14,7 @@ import { CancellationError, resolvePluginUpdates } from './utils';
 export function usePlugins(state, activeTab, plugins) {
   var _activePlugin$tabKey;
   var thirdPartyTabExperimentEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var recentSearchListSize = arguments.length > 4 ? arguments[4] : undefined;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useState = useState(0),
@@ -73,7 +75,7 @@ export function usePlugins(state, activeTab, plugins) {
               dispatch({
                 type: 'SUCCESS',
                 payload: {
-                  items: limit(value.data),
+                  items: limit(value.data, fg('aifc_create_enabled') ? recentSearchListSize : undefined),
                   isLoading: !done
                 }
               });
@@ -106,7 +108,7 @@ export function usePlugins(state, activeTab, plugins) {
     }();
     updateResults();
     return cancel;
-  }, [activePlugin, state, retries, createAnalyticsEvent, dispatch]);
+  }, [activePlugin, state, retries, createAnalyticsEvent, dispatch, recentSearchListSize]);
   var tabs = useMemo(function () {
     if (!plugins || plugins.length <= 1) {
       return [];
@@ -149,5 +151,6 @@ export function usePlugins(state, activeTab, plugins) {
   };
 }
 function limit(items) {
-  return items.slice(0, RECENT_SEARCH_LIST_SIZE);
+  var recentSearchListSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : RECENT_SEARCH_LIST_SIZE;
+  return items.slice(0, recentSearchListSize);
 }

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

@@ -0,0 +1,37 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect } from 'react';
+import { useDebounce } from 'use-debounce';
+import { normalizeUrl } from '@atlaskit/linking-common/url';
+var AutoSubmitOnChange = function AutoSubmitOnChange(_ref) {
+  var url = _ref.url,
+    isSubmitting = _ref.isSubmitting,
+    isSelectedItem = _ref.isSelectedItem,
+    onSubmit = _ref.onSubmit,
+    onClearInvalidUrl = _ref.onClearInvalidUrl;
+  // Debounce the URL to avoid rapid successive submissions during typing
+  var _useDebounce = useDebounce(url, 300),
+    _useDebounce2 = _slicedToArray(_useDebounce, 1),
+    debouncedUrl = _useDebounce2[0];
+  var isBlank = url === '';
+  // Auto-submit when URL changes
+  useEffect(function () {
+    //prevents misalignment between url and debounced url when clear button is clicked
+    if (isBlank) {
+      onClearInvalidUrl();
+      return;
+    }
+    // Only auto-submit if debouncedUrl is not empty and not already submitting
+    if (debouncedUrl.trim() && !isSubmitting && !isSelectedItem) {
+      var normalized = normalizeUrl(debouncedUrl);
+      if (normalized) {
+        onSubmit();
+      }
+    }
+    //onSubmit() left out to prevent infinite loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedUrl, isSubmitting, isSelectedItem, onClearInvalidUrl, isBlank]);
+
+  // This component renders nothing
+  return null;
+};
+export default AutoSubmitOnChange;

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

@@ -30,6 +30,7 @@ import { handleNavKeyDown } from '../../common/utils/handleNavKeyDown';
 import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import { Announcer } from './announcer';
+import AutoSubmitOnChange from './autoSubmitOnChange';
 import { FormFooter, testIds as formFooterTestIds } from './form-footer';
 import { LinkPickerSubmitButton } from './form-footer/link-picker-submit-button';
 import { formMessages, linkMessages, linkTextMessages, searchMessages } from './messages';
@@ -108,7 +109,11 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     inputRef = _ref.inputRef,
     _ref$previewableLinks = _ref.previewableLinksOnly,
     previewableLinksOnly = _ref$previewableLinks === void 0 ? false : _ref$previewableLinks,
-    additionalError = _ref.additionalError;
+    additionalError = _ref.additionalError,
+    _ref$submitOnInputCha = _ref.submitOnInputChange,
+    submitOnInputChange = _ref$submitOnInputCha === void 0 ? false : _ref$submitOnInputCha,
+    recentSearchListSize = _ref.recentSearchListSize,
+    shouldRenderNoResultsImage = _ref.shouldRenderNoResultsImage;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useReducer = useReducer(reducer, _objectSpread(_objectSpread({}, initState), {}, {
@@ -134,7 +139,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
   var linkPicker3pOneDriveExperimentCohort = FeatureGates.initializeCalled() ? FeatureGates.getExperimentValue('link_picker_3p_onedrive_experiment', 'cohort', 'control') : 'control';
   var oneDriveTabExperimentEnabled = linkPicker3pOneDriveExperimentCohort === 'show_onedrive_tab';
   var thirdPartyTabExperimentEnabled = googleDriveTabExperimentEnabled || oneDriveTabExperimentEnabled;
-  var _usePlugins = usePlugins(queryState, activeTab, plugins, thirdPartyTabExperimentEnabled),
+  var _usePlugins = usePlugins(queryState, activeTab, plugins, thirdPartyTabExperimentEnabled, recentSearchListSize),
     items = _usePlugins.items,
     isLoadingResults = _usePlugins.isLoading,
     isActivePlugin = _usePlugins.isActivePlugin,
@@ -148,6 +153,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
   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 flaggedSubmitOnInputChange = fg('platform-linking-link-picker-previewable-only') && submitOnInputChange;
   var _useLinkPickerAnalyti = useLinkPickerAnalytics(),
     trackAttribute = _useLinkPickerAnalyti.trackAttribute,
     getAttributes = _useLinkPickerAnalyti.getAttributes;
@@ -238,6 +244,13 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
       handleInsert(_url, name, 'typeAhead', _objectSpread({}, selectedItem));
     }
   }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
+  var handleClearInvalidUrl = fg('platform-linking-link-picker-previewable-only') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useCallback(function () {
+    dispatch({
+      invalidUrl: false
+    });
+  }, [dispatch]) : function () {};
   var handleSubmit = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
       var normalized, urlResponse, responseObject;
@@ -421,7 +434,13 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
     onSubmitCapture: handleSubmit,
     className: ax(["_19bv164s _u5f31pah _ca0q1k79 _n3td1t3k _vchhusvi _1e0ctcjq"])
-  }, /*#__PURE__*/React.createElement(TrackMount, null), isActivePlugin && /*#__PURE__*/React.createElement(Fragment, null, screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
+  }, /*#__PURE__*/React.createElement(TrackMount, null), flaggedSubmitOnInputChange && /*#__PURE__*/React.createElement(AutoSubmitOnChange, {
+    url: url,
+    isSubmitting: isSubmitting,
+    isSelectedItem: isSelectedItem,
+    onSubmit: handleSubmit,
+    onClearInvalidUrl: handleClearInvalidUrl
+  }), isActivePlugin && /*#__PURE__*/React.createElement(Fragment, null, screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
     ariaRelevant: "additions",
@@ -491,7 +510,8 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     handleTabChange: handleTabChange,
     handleSearchListOnChange: handleSearchListOnChange,
     adaptiveHeight: adaptiveHeight,
-    retry: retry
+    retry: retry,
+    shouldRenderNoResultsImage: shouldRenderNoResultsImage
   }), /*#__PURE__*/React.createElement(FormFooter, {
     error: error,
     items: items
@@ -505,7 +525,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     action: pluginAction,
     customSubmitButtonLabel: customSubmitButtonLabel,
     submitMessageId: submitMessageId,
-    hideSubmitButton: moveSubmitButton,
+    hideSubmitButton: moveSubmitButton || flaggedSubmitOnInputChange,
     className: ax([(!queryState || !(plugins !== null && plugins !== void 0 && plugins.length)) && "_19pkpxbi"])
   }));
 }));

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

@@ -44,7 +44,8 @@ export var SearchResults = function SearchResults(_ref) {
     handleSelected = _ref.handleSelected,
     handleKeyDown = _ref.handleKeyDown,
     adaptiveHeight = _ref.adaptiveHeight,
-    retry = _ref.retry;
+    retry = _ref.retry,
+    shouldRenderNoResultsImage = _ref.shouldRenderNoResultsImage;
   var isActivePlugin = !!activePlugin;
   // Experiment with new 3P tabs in link picker. For more info, please see: go/link-picker-3p-drive-one-pager.
   var linkPicker3pDriveExperimentCohort = FeatureGates.initializeCalled() ? FeatureGates.getExperimentValue('link_picker_3p_drive_experiment', 'cohort', 'control') : 'control';
@@ -92,7 +93,8 @@ export var SearchResults = function SearchResults(_ref) {
     hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
     activePlugin: activePlugin,
     adaptiveHeight: adaptiveHeight,
-    tabPanelId: "".concat(testIds.tabList, "-").concat(activeTab, "-tab")
+    tabPanelId: "".concat(testIds.tabList, "-").concat(activeTab, "-tab"),
+    shouldRenderNoResultsImage: shouldRenderNoResultsImage
   }), error ? (_activePlugin$errorFa = activePlugin === null || activePlugin === 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 : /*#__PURE__*/React.createElement(LinkSearchError, {
     onRetry: retry
   }) : null));

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

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "ariaReadOnly", "role", "id", "hasSearchTerm", "activePlugin", "adaptiveHeight", "className", "tabPanelId"];
+var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "ariaReadOnly", "role", "id", "hasSearchTerm", "activePlugin", "adaptiveHeight", "className", "tabPanelId", "shouldRenderNoResultsImage"];
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -67,6 +67,7 @@ export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
     adaptiveHeight = _ref.adaptiveHeight,
     className = _ref.className,
     tabPanelId = _ref.tabPanelId,
+    shouldRenderNoResultsImage = _ref.shouldRenderNoResultsImage,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var itemsContent;
   var loadingContent;
@@ -119,7 +120,9 @@ export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
     return /*#__PURE__*/React.createElement("div", {
       id: tabPanelId
-    }, /*#__PURE__*/React.createElement(NoResults, null));
+    }, /*#__PURE__*/React.createElement(NoResults, {
+      shouldRenderImage: shouldRenderNoResultsImage
+    }));
   }
   var listItemNameMaxLines = activePlugin === null || activePlugin === void 0 || (_activePlugin$uiOptio = activePlugin.uiOptions) === null || _activePlugin$uiOptio === void 0 ? void 0 : _activePlugin$uiOptio.listItemNameMaxLines;
   if (items && items.length > 0) {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { EmptyState } from '../../../../../common/ui/empty-state';
 import { NoResultsSVG } from './no-results-svg';
 export var messages = defineMessages({
@@ -17,13 +18,15 @@ export var messages = defineMessages({
 export var testIds = {
   emptyResultPage: 'link-search-no-results'
 };
-export var NoResults = function NoResults() {
+export var NoResults = function NoResults(_ref) {
+  var _ref$shouldRenderImag = _ref.shouldRenderImage,
+    shouldRenderImage = _ref$shouldRenderImag === void 0 ? true : _ref$shouldRenderImag;
   var intl = useIntl();
   return /*#__PURE__*/React.createElement(EmptyState, {
     testId: testIds.emptyResultPage,
     header: intl.formatMessage(messages.noResults),
     description: intl.formatMessage(messages.noResultsDescription),
-    renderImage: function renderImage() {
+    renderImage: !shouldRenderImage && fg('aifc_create_enabled') ? undefined : function () {
       return /*#__PURE__*/React.createElement(NoResultsSVG, null);
     }
   });

package/dist/esm/ui/main.js

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

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

@@ -44,6 +44,14 @@ export interface ResolveResult {
 export interface LinkPickerUiOptions {
     /** Maximum number of lines to display for the item name */
     listItemNameMaxLines?: number;
+    /** Showing dynamic list size based on window height */
+    recentSearchListSize?: number;
+    /** Adaptive height */
+    adaptiveHeight?: boolean;
+    /** Hide display text */
+    hideDisplayText?: boolean;
+    /** Controls showing the image in the no results state */
+    shouldRenderNoResultsImage?: boolean;
 }
 export interface LinkPickerPlugin {
     resolve: (state: LinkPickerState) => Promise<ResolveResult> | AsyncGenerator<ResolveResult, ResolveResult>;
@@ -163,6 +171,12 @@ export interface LinkPickerProps {
     previewableLinksOnly?: boolean;
     /**This prop passes one additional error that is secondary to component errors */
     additionalError?: React.ReactNode;
+    /**This prop disables submit button and handles submit on input change */
+    submitOnInputChange?: boolean;
+    /** Showing dynamic list size based on window height */
+    recentSearchListSize?: number;
+    /** Controls showing the image in the no results state */
+    shouldRenderNoResultsImage?: boolean;
 }
 type CustomLinkPickerMessages = {
     /** Label for the link input field */

package/dist/types/services/use-plugins/index.d.ts

@@ -13,4 +13,4 @@ export interface LinkPickerPluginsService {
     pluginAction?: LinkPickerPluginAction;
     pluginBanner?: LinkPickerPluginBanner;
 }
-export declare function usePlugins(state: LinkPickerState | null, activeTab: number, plugins?: LinkPickerPlugin[], thirdPartyTabExperimentEnabled?: boolean): LinkPickerPluginsService;
+export declare function usePlugins(state: LinkPickerState | null, activeTab: number, plugins?: LinkPickerPlugin[], thirdPartyTabExperimentEnabled?: boolean, recentSearchListSize?: number): LinkPickerPluginsService;

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

@@ -0,0 +1,9 @@
+interface AutoSubmitOnChangeProps {
+    url: string;
+    isSubmitting: boolean;
+    isSelectedItem: boolean;
+    onSubmit: () => void;
+    onClearInvalidUrl: () => void;
+}
+declare const AutoSubmitOnChange: ({ url, isSubmitting, isSelectedItem, onSubmit, onClearInvalidUrl, }: AutoSubmitOnChangeProps) => null;
+export default AutoSubmitOnChange;

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

@@ -40,5 +40,6 @@ export type SearchResultsProps = {
     error?: unknown;
     adaptiveHeight: boolean;
     retry: () => void;
+    shouldRenderNoResultsImage?: boolean;
 };
-export declare const SearchResults: ({ tabs, activeTab, activePlugin, isLoadingPlugins, isLoadingResults, isSubmitting, handleTabChange, handleSearchListOnChange, featureFlags, linkSearchListId, error, queryState, items, activeIndex, selectedIndex, handleSelected, handleKeyDown, adaptiveHeight, retry, }: SearchResultsProps) => JSX.Element;
+export declare const SearchResults: ({ tabs, activeTab, activePlugin, isLoadingPlugins, isLoadingResults, isSubmitting, handleTabChange, handleSearchListOnChange, featureFlags, linkSearchListId, error, queryState, items, activeIndex, selectedIndex, handleSelected, handleKeyDown, adaptiveHeight, retry, shouldRenderNoResultsImage, }: SearchResultsProps) => JSX.Element;

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

@@ -49,6 +49,7 @@ export interface LinkSearchListProps extends Omit<React.HTMLAttributes<LinkSearc
     activePlugin?: LinkPickerPlugin;
     /** Because we don't use the DST TabPanels component, tabPanelId is needed to set the correct aria-controls for a11y. */
     tabPanelId?: string;
+    shouldRenderNoResultsImage?: boolean;
 }
 export declare const LinkSearchList: import("react").ForwardRefExoticComponent<LinkSearchListProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/types/ui/link-picker/search-results/link-search-list/link-search-no-results/index.d.ts

@@ -14,4 +14,6 @@ export declare const messages: {
 export declare const testIds: {
     emptyResultPage: string;
 };
-export declare const NoResults: () => React.JSX.Element;
+export declare const NoResults: ({ shouldRenderImage }: {
+    shouldRenderImage?: boolean;
+}) => React.JSX.Element;

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

@@ -47,6 +47,14 @@ export interface ResolveResult {
 export interface LinkPickerUiOptions {
     /** Maximum number of lines to display for the item name */
     listItemNameMaxLines?: number;
+    /** Showing dynamic list size based on window height */
+    recentSearchListSize?: number;
+    /** Adaptive height */
+    adaptiveHeight?: boolean;
+    /** Hide display text */
+    hideDisplayText?: boolean;
+    /** Controls showing the image in the no results state */
+    shouldRenderNoResultsImage?: boolean;
 }
 export interface LinkPickerPlugin {
     resolve: (state: LinkPickerState) => Promise<ResolveResult> | AsyncGenerator<ResolveResult, ResolveResult>;
@@ -166,6 +174,12 @@ export interface LinkPickerProps {
     previewableLinksOnly?: boolean;
     /**This prop passes one additional error that is secondary to component errors */
     additionalError?: React.ReactNode;
+    /**This prop disables submit button and handles submit on input change */
+    submitOnInputChange?: boolean;
+    /** Showing dynamic list size based on window height */
+    recentSearchListSize?: number;
+    /** Controls showing the image in the no results state */
+    shouldRenderNoResultsImage?: boolean;
 }
 type CustomLinkPickerMessages = {
     /** Label for the link input field */

package/dist/types-ts4.5/services/use-plugins/index.d.ts

@@ -13,4 +13,4 @@ export interface LinkPickerPluginsService {
     pluginAction?: LinkPickerPluginAction;
     pluginBanner?: LinkPickerPluginBanner;
 }
-export declare function usePlugins(state: LinkPickerState | null, activeTab: number, plugins?: LinkPickerPlugin[], thirdPartyTabExperimentEnabled?: boolean): LinkPickerPluginsService;
+export declare function usePlugins(state: LinkPickerState | null, activeTab: number, plugins?: LinkPickerPlugin[], thirdPartyTabExperimentEnabled?: boolean, recentSearchListSize?: number): LinkPickerPluginsService;

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

@@ -0,0 +1,9 @@
+interface AutoSubmitOnChangeProps {
+    url: string;
+    isSubmitting: boolean;
+    isSelectedItem: boolean;
+    onSubmit: () => void;
+    onClearInvalidUrl: () => void;
+}
+declare const AutoSubmitOnChange: ({ url, isSubmitting, isSelectedItem, onSubmit, onClearInvalidUrl, }: AutoSubmitOnChangeProps) => null;
+export default AutoSubmitOnChange;

package/dist/types-ts4.5/ui/link-picker/search-results/index.d.ts

@@ -40,5 +40,6 @@ export type SearchResultsProps = {
     error?: unknown;
     adaptiveHeight: boolean;
     retry: () => void;
+    shouldRenderNoResultsImage?: boolean;
 };
-export declare const SearchResults: ({ tabs, activeTab, activePlugin, isLoadingPlugins, isLoadingResults, isSubmitting, handleTabChange, handleSearchListOnChange, featureFlags, linkSearchListId, error, queryState, items, activeIndex, selectedIndex, handleSelected, handleKeyDown, adaptiveHeight, retry, }: SearchResultsProps) => JSX.Element;
+export declare const SearchResults: ({ tabs, activeTab, activePlugin, isLoadingPlugins, isLoadingResults, isSubmitting, handleTabChange, handleSearchListOnChange, featureFlags, linkSearchListId, error, queryState, items, activeIndex, selectedIndex, handleSelected, handleKeyDown, adaptiveHeight, retry, shouldRenderNoResultsImage, }: SearchResultsProps) => JSX.Element;

package/dist/types-ts4.5/ui/link-picker/search-results/link-search-list/index.d.ts

@@ -49,6 +49,7 @@ export interface LinkSearchListProps extends Omit<React.HTMLAttributes<LinkSearc
     activePlugin?: LinkPickerPlugin;
     /** Because we don't use the DST TabPanels component, tabPanelId is needed to set the correct aria-controls for a11y. */
     tabPanelId?: string;
+    shouldRenderNoResultsImage?: boolean;
 }
 export declare const LinkSearchList: import("react").ForwardRefExoticComponent<LinkSearchListProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/types-ts4.5/ui/link-picker/search-results/link-search-list/link-search-no-results/index.d.ts

@@ -14,4 +14,6 @@ export declare const messages: {
 export declare const testIds: {
     emptyResultPage: string;
 };
-export declare const NoResults: () => React.JSX.Element;
+export declare const NoResults: ({ shouldRenderImage }: {
+    shouldRenderImage?: boolean;
+}) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "3.12.1",
+	"version": "3.14.0",
 	"description": "Standalone link picker",
 	"author": "Atlassian Pty Ltd",
 	"publishConfig": {
@@ -43,6 +43,9 @@
 		},
 		"should-render-to-parent-should-be-true-linking-pla": {
 			"type": "boolean"
+		},
+		"aifc_create_enabled": {
+			"type": "boolean"
 		}
 	},
 	"scripts": {