@atlaskit/link-picker 1.42.5 → 1.43.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/link-picker
 
+## 1.43.0
+
+### Minor Changes
+
+- [#131465](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131465)
+  [`df8ea6dec9bdc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/df8ea6dec9bdc) -
+  [ux] Added in a new temporary prop, UNSAFE_moveSubmitButton, to the LinkPicker. This prop moves
+  the submit button below the input field and is only to be used in an experiment being run within
+  Confluence.
+
 ## 1.42.5
 
 ### Patch Changes

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

@@ -11,16 +11,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
-var _uuid = _interopRequireDefault(require("uuid"));
 var _button = _interopRequireWildcard(require("@atlaskit/button"));
-var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
 var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
 var _add2 = _interopRequireDefault(require("@atlaskit/icon/utility/add"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _errors = require("../../../common/utils/errors");
 var _featureDiscovery = _interopRequireDefault(require("./feature-discovery"));
-var _utils = require("./utils");
-var _excluded = ["isLoading", "isSubmitting", "error", "url", "queryState", "items", "isEditing", "onCancel", "action", "createFeatureDiscovery", "customSubmitButtonLabel"];
+var _linkPickerSubmitButton = require("./link-picker-submit-button");
+var _excluded = ["isLoading", "isSubmitting", "error", "url", "queryState", "items", "isEditing", "onCancel", "action", "createFeatureDiscovery", "customSubmitButtonLabel", "submitMessageId", "hideSubmitButton"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -41,16 +39,6 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Cancel',
     description: 'Button to cancel and dismiss the link picker'
   },
-  saveButton: {
-    id: 'fabric.linkPicker.button.save',
-    defaultMessage: 'Save',
-    description: 'Button to save edited link'
-  },
-  insertButton: {
-    id: 'fabric.linkPicker.button.insert',
-    defaultMessage: 'Insert',
-    description: 'Button to insert searched or selected link'
-  },
   submittingStatusMessage: {
     id: 'fabric.linkPicker.status.submitting',
     defaultMessage: 'Submitting',
@@ -79,16 +67,13 @@ var FormFooter = exports.FormFooter = /*#__PURE__*/(0, _react.memo)(function (_r
     _ref$createFeatureDis = _ref.createFeatureDiscovery,
     createFeatureDiscovery = _ref$createFeatureDis === void 0 ? false : _ref$createFeatureDis,
     customSubmitButtonLabel = _ref.customSubmitButtonLabel,
+    submitMessageId = _ref.submitMessageId,
+    hideSubmitButton = _ref.hideSubmitButton,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var intl = (0, _reactIntlNext.useIntl)();
-  var submitMessageId = (0, _react.useMemo)(function () {
-    return (0, _uuid.default)();
-  }, []);
   if (error && error instanceof _errors.UnauthenticatedError) {
     return null;
   }
-  var isSubmitDisabled = (0, _utils.checkSubmitDisabled)(isLoading, isSubmitting, error, url, queryState, items);
-  var insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
   var createButton = function createButton(pluginAction) {
     return (0, _react2.jsx)(_button.default, {
       testId: testIds.actionButton,
@@ -120,12 +105,16 @@ var FormFooter = exports.FormFooter = /*#__PURE__*/(0, _react.memo)(function (_r
     testId: testIds.cancelButton,
     isDisabled: isSubmitting,
     "aria-labelledby": isSubmitting ? submitMessageId : undefined
-  }, intl.formatMessage(messages.cancelButton)), (0, _react2.jsx)(_loadingButton.default, {
-    type: "submit",
-    appearance: "primary",
+  }, intl.formatMessage(messages.cancelButton)), !hideSubmitButton && (0, _react2.jsx)(_linkPickerSubmitButton.LinkPickerSubmitButton, {
+    isEditing: isEditing,
+    isLoading: isLoading,
+    isSubmitting: isSubmitting,
+    customSubmitButtonLabel: customSubmitButtonLabel,
+    error: error,
+    items: items,
+    queryState: queryState,
+    submitMessageId: submitMessageId,
     testId: testIds.insertButton,
-    isDisabled: isSubmitDisabled,
-    "aria-labelledby": isSubmitting ? submitMessageId : undefined,
-    isLoading: isSubmitting
-  }, customSubmitButtonLabel ? intl.formatMessage(customSubmitButtonLabel) : intl.formatMessage(insertButtonMsg))));
+    url: url
+  })));
 });

package/dist/cjs/ui/link-picker/form-footer/link-picker-submit-button/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = exports.LinkPickerSubmitButton = void 0;
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
+var _utils = require("./utils");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  saveButton: {
+    id: 'fabric.linkPicker.button.save',
+    defaultMessage: 'Save',
+    description: 'Button to save edited link'
+  },
+  insertButton: {
+    id: 'fabric.linkPicker.button.insert',
+    defaultMessage: 'Insert',
+    description: 'Button to insert searched or selected link'
+  }
+});
+var LinkPickerSubmitButton = exports.LinkPickerSubmitButton = function LinkPickerSubmitButton(_ref) {
+  var isEditing = _ref.isEditing,
+    isLoading = _ref.isLoading,
+    isSubmitting = _ref.isSubmitting,
+    customSubmitButtonLabel = _ref.customSubmitButtonLabel,
+    error = _ref.error,
+    items = _ref.items,
+    queryState = _ref.queryState,
+    submitMessageId = _ref.submitMessageId,
+    testId = _ref.testId,
+    url = _ref.url;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
+  var isSubmitDisabled = (0, _utils.checkSubmitDisabled)(isLoading, isSubmitting, error, url, queryState, items);
+  return (0, _react.jsx)(_loadingButton.default, {
+    type: "submit",
+    appearance: "primary",
+    testId: testId,
+    isDisabled: isSubmitDisabled,
+    "aria-labelledby": isSubmitting ? submitMessageId : undefined,
+    isLoading: isSubmitting
+  }, customSubmitButtonLabel ? intl.formatMessage(customSubmitButtonLabel) : intl.formatMessage(insertButtonMsg));
+};

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

@@ -11,10 +11,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _uuid = _interopRequireDefault(require("uuid"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _url2 = require("@atlaskit/linking-common/url");
 var _userAgent = require("@atlaskit/linking-common/user-agent");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _analytics = require("../../common/analytics");
 var _constants = require("../../common/constants");
@@ -24,6 +26,7 @@ var _usePlugins2 = require("../../services/use-plugins");
 var _useSearchQuery = require("../../services/use-search-query");
 var _announcer = require("./announcer");
 var _formFooter = require("./form-footer");
+var _linkPickerSubmitButton = require("./form-footer/link-picker-submit-button");
 var _messages = require("./messages");
 var _searchResults = require("./search-results");
 var _styled = require("./styled");
@@ -52,6 +55,11 @@ var initState = {
   /** This only allows the feature discovery pulse - to be shown the ff must be on and active tab be Jira */
   allowCreateFeatureDiscovery: true
 };
+var FullWidthSubmitButtonStyles = (0, _primitives.xcss)({
+  marginTop: 'space.200',
+  display: 'flex',
+  flexDirection: 'column'
+});
 function reducer(state, payload) {
   if (payload.url && state.url !== payload.url) {
     return _objectSpread(_objectSpread({}, state), {}, {
@@ -92,7 +100,9 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     featureFlags = _ref.featureFlags,
     customMessages = _ref.customMessages,
     _ref$isSubmitting = _ref.isSubmitting,
-    isSubmitting = _ref$isSubmitting === void 0 ? false : _ref$isSubmitting;
+    isSubmitting = _ref$isSubmitting === void 0 ? false : _ref$isSubmitting,
+    _ref$UNSAFE_moveSubmi = _ref.UNSAFE_moveSubmitButton,
+    UNSAFE_moveSubmitButton = _ref$UNSAFE_moveSubmi === void 0 ? false : _ref$UNSAFE_moveSubmi;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useReducer = (0, _react.useReducer)(reducer, _objectSpread(_objectSpread({}, initState), {}, {
@@ -126,6 +136,9 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
   var _useLinkPickerAnalyti = (0, _analytics.useLinkPickerAnalytics)(),
     trackAttribute = _useLinkPickerAnalyti.trackAttribute,
     getAttributes = _useLinkPickerAnalyti.getAttributes;
+  var submitMessageId = (0, _react.useMemo)(function () {
+    return (0, _uuid.default)();
+  }, []);
   (0, _react.useLayoutEffect)(function () {
     if (onContentResize) {
       onContentResize();
@@ -316,6 +329,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
   // as the Aria design pattern for combobox does not work in this case
   // for details: https://a11y-internal.atlassian.net/browse/AK-740
   var screenReaderText = (0, _userAgent.browser)().safari && (0, _utils.getScreenReaderText)(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
+  var customSubmitButtonLabel = customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined;
   return (0, _react2.jsx)("form", {
     "data-testid": testIds.linkPicker
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -358,7 +372,20 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     readOnly: isSubmitting,
     onClear: handleClear,
     onChange: handleChangeText
-  }), !!queryState && (isLoadingPlugins || isActivePlugin) && (0, _react2.jsx)(_searchResults.SearchResults, {
+  }), UNSAFE_moveSubmitButton && (0, _react2.jsx)(_primitives.Box, {
+    xcss: FullWidthSubmitButtonStyles
+  }, (0, _react2.jsx)(_linkPickerSubmitButton.LinkPickerSubmitButton, {
+    isEditing: isEditing,
+    isLoading: isLoadingResults || !!isLoadingPlugins,
+    isSubmitting: isSubmitting,
+    customSubmitButtonLabel: customSubmitButtonLabel,
+    error: error,
+    items: items,
+    queryState: queryState,
+    submitMessageId: submitMessageId,
+    testId: testIds.insertButton,
+    url: url
+  })), !!queryState && (isLoadingPlugins || isActivePlugin) && (0, _react2.jsx)(_searchResults.SearchResults, {
     activeTab: activeTab,
     tabs: tabs,
     activePlugin: activePlugin,
@@ -394,6 +421,8 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     /* Show the feature discovery pulse when we're on the Jira tab, we haven't started typing a url and
           the feature flag is enabled */,
     createFeatureDiscovery: (activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.tabKey) === 'jira' && allowCreateFeatureDiscovery && (0, _platformFeatureFlags.fg)('platform.linking-platform.link-picker.enable-jira-create'),
-    customSubmitButtonLabel: customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined
+    customSubmitButtonLabel: customSubmitButtonLabel,
+    submitMessageId: submitMessageId,
+    hideSubmitButton: UNSAFE_moveSubmitButton
   }));
 }));

package/dist/cjs/ui/main.js

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

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

@@ -3,20 +3,18 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { defineMessages, useIntl } from 'react-intl-next';
-import uuid from 'uuid';
 import Button, { ButtonGroup } from '@atlaskit/button';
-import LoadingButton from '@atlaskit/button/loading-button';
 import EditorAddIconLegacy from '@atlaskit/icon/glyph/editor/add';
 import EditorAddIcon from '@atlaskit/icon/utility/add';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { UnauthenticatedError } from '../../../common/utils/errors';
 import FeatureDiscovery from './feature-discovery';
-import { checkSubmitDisabled } from './utils';
+import { LinkPickerSubmitButton } from './link-picker-submit-button';
 const formFooterStyles = css({
   display: 'flex',
   justifyContent: 'flex-end'
@@ -30,16 +28,6 @@ export const messages = defineMessages({
     defaultMessage: 'Cancel',
     description: 'Button to cancel and dismiss the link picker'
   },
-  saveButton: {
-    id: 'fabric.linkPicker.button.save',
-    defaultMessage: 'Save',
-    description: 'Button to save edited link'
-  },
-  insertButton: {
-    id: 'fabric.linkPicker.button.insert',
-    defaultMessage: 'Insert',
-    description: 'Button to insert searched or selected link'
-  },
   submittingStatusMessage: {
     id: 'fabric.linkPicker.status.submitting',
     defaultMessage: 'Submitting',
@@ -66,15 +54,14 @@ export const FormFooter = /*#__PURE__*/memo(({
   action,
   createFeatureDiscovery = false,
   customSubmitButtonLabel,
+  submitMessageId,
+  hideSubmitButton,
   ...restProps
 }) => {
   const intl = useIntl();
-  const submitMessageId = useMemo(() => uuid(), []);
   if (error && error instanceof UnauthenticatedError) {
     return null;
   }
-  const isSubmitDisabled = checkSubmitDisabled(isLoading, isSubmitting, error, url, queryState, items);
-  const insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
   const createButton = pluginAction => jsx(Button, {
     testId: testIds.actionButton,
     onClick: pluginAction.callback,
@@ -104,12 +91,16 @@ export const FormFooter = /*#__PURE__*/memo(({
     testId: testIds.cancelButton,
     isDisabled: isSubmitting,
     "aria-labelledby": isSubmitting ? submitMessageId : undefined
-  }, intl.formatMessage(messages.cancelButton)), jsx(LoadingButton, {
-    type: "submit",
-    appearance: "primary",
+  }, intl.formatMessage(messages.cancelButton)), !hideSubmitButton && jsx(LinkPickerSubmitButton, {
+    isEditing: isEditing,
+    isLoading: isLoading,
+    isSubmitting: isSubmitting,
+    customSubmitButtonLabel: customSubmitButtonLabel,
+    error: error,
+    items: items,
+    queryState: queryState,
+    submitMessageId: submitMessageId,
     testId: testIds.insertButton,
-    isDisabled: isSubmitDisabled,
-    "aria-labelledby": isSubmitting ? submitMessageId : undefined,
-    isLoading: isSubmitting
-  }, customSubmitButtonLabel ? intl.formatMessage(customSubmitButtonLabel) : intl.formatMessage(insertButtonMsg))));
+    url: url
+  })));
 });

package/dist/es2019/ui/link-picker/form-footer/link-picker-submit-button/index.js

@@ -0,0 +1,45 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { defineMessages, useIntl } from 'react-intl-next';
+import LoadingButton from '@atlaskit/button/loading-button';
+import { checkSubmitDisabled } from './utils';
+export const messages = defineMessages({
+  saveButton: {
+    id: 'fabric.linkPicker.button.save',
+    defaultMessage: 'Save',
+    description: 'Button to save edited link'
+  },
+  insertButton: {
+    id: 'fabric.linkPicker.button.insert',
+    defaultMessage: 'Insert',
+    description: 'Button to insert searched or selected link'
+  }
+});
+export const LinkPickerSubmitButton = ({
+  isEditing,
+  isLoading,
+  isSubmitting,
+  customSubmitButtonLabel,
+  error,
+  items,
+  queryState,
+  submitMessageId,
+  testId,
+  url
+}) => {
+  const intl = useIntl();
+  const insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
+  const isSubmitDisabled = checkSubmitDisabled(isLoading, isSubmitting, error, url, queryState, items);
+  return jsx(LoadingButton, {
+    type: "submit",
+    appearance: "primary",
+    testId: testId,
+    isDisabled: isSubmitDisabled,
+    "aria-labelledby": isSubmitting ? submitMessageId : undefined,
+    isLoading: isSubmitting
+  }, customSubmitButtonLabel ? intl.formatMessage(customSubmitButtonLabel) : intl.formatMessage(insertButtonMsg));
+};

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

@@ -3,15 +3,17 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Fragment, memo, useCallback, useLayoutEffect, useReducer } from 'react';
+import { Fragment, memo, useCallback, useLayoutEffect, useMemo, useReducer } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
+import uuid from 'uuid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 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, xcss } from '@atlaskit/primitives';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useLinkPickerAnalytics, withInputFieldTracking, withLinkPickerAnalyticsContext } from '../../common/analytics';
 import { ANALYTICS_CHANNEL } from '../../common/constants';
@@ -21,6 +23,7 @@ import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import { Announcer } from './announcer';
 import { FormFooter, testIds as formFooterTestIds } from './form-footer';
+import { LinkPickerSubmitButton } from './form-footer/link-picker-submit-button';
 import { formMessages, linkMessages, linkTextMessages, searchMessages } from './messages';
 import { SearchResults, testIds as searchTestIds } from './search-results';
 import { formFooterMargin, rootContainerStyles } from './styled';
@@ -47,6 +50,11 @@ const initState = {
   /** This only allows the feature discovery pulse - to be shown the ff must be on and active tab be Jira */
   allowCreateFeatureDiscovery: true
 };
+const FullWidthSubmitButtonStyles = xcss({
+  marginTop: 'space.200',
+  display: 'flex',
+  flexDirection: 'column'
+});
 function reducer(state, payload) {
   if (payload.url && state.url !== payload.url) {
     return {
@@ -90,7 +98,8 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   hideDisplayText,
   featureFlags,
   customMessages,
-  isSubmitting = false
+  isSubmitting = false,
+  UNSAFE_moveSubmitButton = false
 }) => {
   const {
     createAnalyticsEvent
@@ -128,6 +137,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     trackAttribute,
     getAttributes
   } = useLinkPickerAnalytics();
+  const submitMessageId = useMemo(() => uuid(), []);
   useLayoutEffect(() => {
     if (onContentResize) {
       onContentResize();
@@ -320,6 +330,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   // as the Aria design pattern for combobox does not work in this case
   // for details: https://a11y-internal.atlassian.net/browse/AK-740
   const screenReaderText = browser().safari && getScreenReaderText(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
+  const customSubmitButtonLabel = customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined;
   return jsx("form", {
     "data-testid": testIds.linkPicker
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -362,7 +373,20 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     readOnly: isSubmitting,
     onClear: handleClear,
     onChange: handleChangeText
-  }), !!queryState && (isLoadingPlugins || isActivePlugin) && jsx(SearchResults, {
+  }), UNSAFE_moveSubmitButton && jsx(Box, {
+    xcss: FullWidthSubmitButtonStyles
+  }, jsx(LinkPickerSubmitButton, {
+    isEditing: isEditing,
+    isLoading: isLoadingResults || !!isLoadingPlugins,
+    isSubmitting: isSubmitting,
+    customSubmitButtonLabel: customSubmitButtonLabel,
+    error: error,
+    items: items,
+    queryState: queryState,
+    submitMessageId: submitMessageId,
+    testId: testIds.insertButton,
+    url: url
+  })), !!queryState && (isLoadingPlugins || isActivePlugin) && jsx(SearchResults, {
     activeTab: activeTab,
     tabs: tabs,
     activePlugin: activePlugin,
@@ -398,6 +422,8 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     /* Show the feature discovery pulse when we're on the Jira tab, we haven't started typing a url and
           the feature flag is enabled */,
     createFeatureDiscovery: (activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.tabKey) === 'jira' && allowCreateFeatureDiscovery && fg('platform.linking-platform.link-picker.enable-jira-create'),
-    customSubmitButtonLabel: customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined
+    customSubmitButtonLabel: customSubmitButtonLabel,
+    submitMessageId: submitMessageId,
+    hideSubmitButton: UNSAFE_moveSubmitButton
   }));
 }));

package/dist/es2019/ui/main.js

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

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

@@ -1,24 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isLoading", "isSubmitting", "error", "url", "queryState", "items", "isEditing", "onCancel", "action", "createFeatureDiscovery", "customSubmitButtonLabel"];
+var _excluded = ["isLoading", "isSubmitting", "error", "url", "queryState", "items", "isEditing", "onCancel", "action", "createFeatureDiscovery", "customSubmitButtonLabel", "submitMessageId", "hideSubmitButton"];
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { defineMessages, useIntl } from 'react-intl-next';
-import uuid from 'uuid';
 import Button, { ButtonGroup } from '@atlaskit/button';
-import LoadingButton from '@atlaskit/button/loading-button';
 import EditorAddIconLegacy from '@atlaskit/icon/glyph/editor/add';
 import EditorAddIcon from '@atlaskit/icon/utility/add';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { UnauthenticatedError } from '../../../common/utils/errors';
 import FeatureDiscovery from './feature-discovery';
-import { checkSubmitDisabled } from './utils';
+import { LinkPickerSubmitButton } from './link-picker-submit-button';
 var formFooterStyles = css({
   display: 'flex',
   justifyContent: 'flex-end'
@@ -32,16 +30,6 @@ export var messages = defineMessages({
     defaultMessage: 'Cancel',
     description: 'Button to cancel and dismiss the link picker'
   },
-  saveButton: {
-    id: 'fabric.linkPicker.button.save',
-    defaultMessage: 'Save',
-    description: 'Button to save edited link'
-  },
-  insertButton: {
-    id: 'fabric.linkPicker.button.insert',
-    defaultMessage: 'Insert',
-    description: 'Button to insert searched or selected link'
-  },
   submittingStatusMessage: {
     id: 'fabric.linkPicker.status.submitting',
     defaultMessage: 'Submitting',
@@ -70,16 +58,13 @@ export var FormFooter = /*#__PURE__*/memo(function (_ref) {
     _ref$createFeatureDis = _ref.createFeatureDiscovery,
     createFeatureDiscovery = _ref$createFeatureDis === void 0 ? false : _ref$createFeatureDis,
     customSubmitButtonLabel = _ref.customSubmitButtonLabel,
+    submitMessageId = _ref.submitMessageId,
+    hideSubmitButton = _ref.hideSubmitButton,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var intl = useIntl();
-  var submitMessageId = useMemo(function () {
-    return uuid();
-  }, []);
   if (error && error instanceof UnauthenticatedError) {
     return null;
   }
-  var isSubmitDisabled = checkSubmitDisabled(isLoading, isSubmitting, error, url, queryState, items);
-  var insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
   var createButton = function createButton(pluginAction) {
     return jsx(Button, {
       testId: testIds.actionButton,
@@ -111,12 +96,16 @@ export var FormFooter = /*#__PURE__*/memo(function (_ref) {
     testId: testIds.cancelButton,
     isDisabled: isSubmitting,
     "aria-labelledby": isSubmitting ? submitMessageId : undefined
-  }, intl.formatMessage(messages.cancelButton)), jsx(LoadingButton, {
-    type: "submit",
-    appearance: "primary",
+  }, intl.formatMessage(messages.cancelButton)), !hideSubmitButton && jsx(LinkPickerSubmitButton, {
+    isEditing: isEditing,
+    isLoading: isLoading,
+    isSubmitting: isSubmitting,
+    customSubmitButtonLabel: customSubmitButtonLabel,
+    error: error,
+    items: items,
+    queryState: queryState,
+    submitMessageId: submitMessageId,
     testId: testIds.insertButton,
-    isDisabled: isSubmitDisabled,
-    "aria-labelledby": isSubmitting ? submitMessageId : undefined,
-    isLoading: isSubmitting
-  }, customSubmitButtonLabel ? intl.formatMessage(customSubmitButtonLabel) : intl.formatMessage(insertButtonMsg))));
+    url: url
+  })));
 });

package/dist/esm/ui/link-picker/form-footer/link-picker-submit-button/index.js

@@ -0,0 +1,44 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { defineMessages, useIntl } from 'react-intl-next';
+import LoadingButton from '@atlaskit/button/loading-button';
+import { checkSubmitDisabled } from './utils';
+export var messages = defineMessages({
+  saveButton: {
+    id: 'fabric.linkPicker.button.save',
+    defaultMessage: 'Save',
+    description: 'Button to save edited link'
+  },
+  insertButton: {
+    id: 'fabric.linkPicker.button.insert',
+    defaultMessage: 'Insert',
+    description: 'Button to insert searched or selected link'
+  }
+});
+export var LinkPickerSubmitButton = function LinkPickerSubmitButton(_ref) {
+  var isEditing = _ref.isEditing,
+    isLoading = _ref.isLoading,
+    isSubmitting = _ref.isSubmitting,
+    customSubmitButtonLabel = _ref.customSubmitButtonLabel,
+    error = _ref.error,
+    items = _ref.items,
+    queryState = _ref.queryState,
+    submitMessageId = _ref.submitMessageId,
+    testId = _ref.testId,
+    url = _ref.url;
+  var intl = useIntl();
+  var insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
+  var isSubmitDisabled = checkSubmitDisabled(isLoading, isSubmitting, error, url, queryState, items);
+  return jsx(LoadingButton, {
+    type: "submit",
+    appearance: "primary",
+    testId: testId,
+    isDisabled: isSubmitDisabled,
+    "aria-labelledby": isSubmitting ? submitMessageId : undefined,
+    isLoading: isSubmitting
+  }, customSubmitButtonLabel ? intl.formatMessage(customSubmitButtonLabel) : intl.formatMessage(insertButtonMsg));
+};

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

@@ -7,15 +7,17 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Fragment, memo, useCallback, useLayoutEffect, useReducer } from 'react';
+import { Fragment, memo, useCallback, useLayoutEffect, useMemo, useReducer } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
+import uuid from 'uuid';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 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, xcss } from '@atlaskit/primitives';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useLinkPickerAnalytics, withInputFieldTracking, withLinkPickerAnalyticsContext } from '../../common/analytics';
 import { ANALYTICS_CHANNEL } from '../../common/constants';
@@ -25,6 +27,7 @@ import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import { Announcer } from './announcer';
 import { FormFooter, testIds as formFooterTestIds } from './form-footer';
+import { LinkPickerSubmitButton } from './form-footer/link-picker-submit-button';
 import { formMessages, linkMessages, linkTextMessages, searchMessages } from './messages';
 import { SearchResults, testIds as searchTestIds } from './search-results';
 import { formFooterMargin, rootContainerStyles } from './styled';
@@ -48,6 +51,11 @@ var initState = {
   /** This only allows the feature discovery pulse - to be shown the ff must be on and active tab be Jira */
   allowCreateFeatureDiscovery: true
 };
+var FullWidthSubmitButtonStyles = xcss({
+  marginTop: 'space.200',
+  display: 'flex',
+  flexDirection: 'column'
+});
 function reducer(state, payload) {
   if (payload.url && state.url !== payload.url) {
     return _objectSpread(_objectSpread({}, state), {}, {
@@ -88,7 +96,9 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     featureFlags = _ref.featureFlags,
     customMessages = _ref.customMessages,
     _ref$isSubmitting = _ref.isSubmitting,
-    isSubmitting = _ref$isSubmitting === void 0 ? false : _ref$isSubmitting;
+    isSubmitting = _ref$isSubmitting === void 0 ? false : _ref$isSubmitting,
+    _ref$UNSAFE_moveSubmi = _ref.UNSAFE_moveSubmitButton,
+    UNSAFE_moveSubmitButton = _ref$UNSAFE_moveSubmi === void 0 ? false : _ref$UNSAFE_moveSubmi;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useReducer = useReducer(reducer, _objectSpread(_objectSpread({}, initState), {}, {
@@ -122,6 +132,9 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
   var _useLinkPickerAnalyti = useLinkPickerAnalytics(),
     trackAttribute = _useLinkPickerAnalyti.trackAttribute,
     getAttributes = _useLinkPickerAnalyti.getAttributes;
+  var submitMessageId = useMemo(function () {
+    return uuid();
+  }, []);
   useLayoutEffect(function () {
     if (onContentResize) {
       onContentResize();
@@ -312,6 +325,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
   // as the Aria design pattern for combobox does not work in this case
   // for details: https://a11y-internal.atlassian.net/browse/AK-740
   var screenReaderText = browser().safari && getScreenReaderText(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
+  var customSubmitButtonLabel = customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined;
   return jsx("form", {
     "data-testid": testIds.linkPicker
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -354,7 +368,20 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     readOnly: isSubmitting,
     onClear: handleClear,
     onChange: handleChangeText
-  }), !!queryState && (isLoadingPlugins || isActivePlugin) && jsx(SearchResults, {
+  }), UNSAFE_moveSubmitButton && jsx(Box, {
+    xcss: FullWidthSubmitButtonStyles
+  }, jsx(LinkPickerSubmitButton, {
+    isEditing: isEditing,
+    isLoading: isLoadingResults || !!isLoadingPlugins,
+    isSubmitting: isSubmitting,
+    customSubmitButtonLabel: customSubmitButtonLabel,
+    error: error,
+    items: items,
+    queryState: queryState,
+    submitMessageId: submitMessageId,
+    testId: testIds.insertButton,
+    url: url
+  })), !!queryState && (isLoadingPlugins || isActivePlugin) && jsx(SearchResults, {
     activeTab: activeTab,
     tabs: tabs,
     activePlugin: activePlugin,
@@ -390,6 +417,8 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     /* Show the feature discovery pulse when we're on the Jira tab, we haven't started typing a url and
           the feature flag is enabled */,
     createFeatureDiscovery: (activePlugin === null || activePlugin === void 0 ? void 0 : activePlugin.tabKey) === 'jira' && allowCreateFeatureDiscovery && fg('platform.linking-platform.link-picker.enable-jira-create'),
-    customSubmitButtonLabel: customMessages !== null && customMessages !== void 0 && customMessages.submitButtonLabel ? customMessages.submitButtonLabel : undefined
+    customSubmitButtonLabel: customSubmitButtonLabel,
+    submitMessageId: submitMessageId,
+    hideSubmitButton: UNSAFE_moveSubmitButton
   }));
 }));

package/dist/esm/ui/main.js

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

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

@@ -137,6 +137,12 @@ export interface LinkPickerProps {
     featureFlags?: Record<string, unknown>;
     /** Controls showing a "submission in-progres" UX */
     isSubmitting?: boolean;
+    /**
+     * Do not utilize this! This is a temporary prop that is being used for a specific experiment.
+     * This prop controls where the submit button appears. When true the submit button will move below the input field and be full width
+     * @internal
+     * */
+    UNSAFE_moveSubmitButton?: boolean;
 }
 type CustomLinkPickerMessages = {
     /** Label for the link input field */

package/dist/types/ui/link-picker/form-footer/index.d.ts

@@ -8,16 +8,6 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    saveButton: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    insertButton: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
     submittingStatusMessage: {
         id: string;
         defaultMessage: string;
@@ -46,6 +36,8 @@ interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
     action?: LinkPickerPluginAction;
     createFeatureDiscovery?: boolean;
     customSubmitButtonLabel?: MessageDescriptor;
+    submitMessageId?: string;
+    hideSubmitButton?: boolean;
 }
-export declare const FormFooter: import("react").MemoExoticComponent<({ isLoading, isSubmitting, error, url, queryState, items, isEditing, onCancel, action, createFeatureDiscovery, customSubmitButtonLabel, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
+export declare const FormFooter: import("react").MemoExoticComponent<({ isLoading, isSubmitting, error, url, queryState, items, isEditing, onCancel, action, createFeatureDiscovery, customSubmitButtonLabel, submitMessageId, hideSubmitButton, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
 export {};

package/dist/types/ui/link-picker/form-footer/link-picker-submit-button/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import { type MessageDescriptor } from 'react-intl-next';
+import type { LinkPickerState, LinkSearchListItemData } from '../../../../common/types';
+type LinkPickerButtonGroupProps = {
+    isEditing?: boolean;
+    isLoading: boolean;
+    isSubmitting: boolean;
+    customSubmitButtonLabel?: MessageDescriptor;
+    error: unknown | null;
+    items: LinkSearchListItemData[] | null;
+    queryState: LinkPickerState | null;
+    submitMessageId?: string;
+    testId?: string;
+    url: string;
+};
+export declare const messages: {
+    saveButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    insertButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const LinkPickerSubmitButton: ({ isEditing, isLoading, isSubmitting, customSubmitButtonLabel, error, items, queryState, submitMessageId, testId, url, }: LinkPickerButtonGroupProps) => jsx.JSX.Element;
+export {};

package/dist/{types-ts4.5/ui/link-picker/form-footer → types/ui/link-picker/form-footer/link-picker-submit-button}/utils.d.ts

@@ -1,2 +1,2 @@
-import { type LinkPickerState, type LinkSearchListItemData } from '../../../common/types';
+import { type LinkPickerState, type LinkSearchListItemData } from '../../../../common/types';
 export declare const checkSubmitDisabled: (isLoading: boolean, isSubmitting: boolean, error: unknown | null, url: string, queryState: LinkPickerState | null, items: LinkSearchListItemData[] | null) => boolean;

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

@@ -137,6 +137,12 @@ export interface LinkPickerProps {
     featureFlags?: Record<string, unknown>;
     /** Controls showing a "submission in-progres" UX */
     isSubmitting?: boolean;
+    /**
+     * Do not utilize this! This is a temporary prop that is being used for a specific experiment.
+     * This prop controls where the submit button appears. When true the submit button will move below the input field and be full width
+     * @internal
+     * */
+    UNSAFE_moveSubmitButton?: boolean;
 }
 type CustomLinkPickerMessages = {
     /** Label for the link input field */

package/dist/types-ts4.5/ui/link-picker/form-footer/index.d.ts

@@ -8,16 +8,6 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    saveButton: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    insertButton: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
     submittingStatusMessage: {
         id: string;
         defaultMessage: string;
@@ -46,6 +36,8 @@ interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
     action?: LinkPickerPluginAction;
     createFeatureDiscovery?: boolean;
     customSubmitButtonLabel?: MessageDescriptor;
+    submitMessageId?: string;
+    hideSubmitButton?: boolean;
 }
-export declare const FormFooter: import("react").MemoExoticComponent<({ isLoading, isSubmitting, error, url, queryState, items, isEditing, onCancel, action, createFeatureDiscovery, customSubmitButtonLabel, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
+export declare const FormFooter: import("react").MemoExoticComponent<({ isLoading, isSubmitting, error, url, queryState, items, isEditing, onCancel, action, createFeatureDiscovery, customSubmitButtonLabel, submitMessageId, hideSubmitButton, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
 export {};

package/dist/types-ts4.5/ui/link-picker/form-footer/link-picker-submit-button/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import { type MessageDescriptor } from 'react-intl-next';
+import type { LinkPickerState, LinkSearchListItemData } from '../../../../common/types';
+type LinkPickerButtonGroupProps = {
+    isEditing?: boolean;
+    isLoading: boolean;
+    isSubmitting: boolean;
+    customSubmitButtonLabel?: MessageDescriptor;
+    error: unknown | null;
+    items: LinkSearchListItemData[] | null;
+    queryState: LinkPickerState | null;
+    submitMessageId?: string;
+    testId?: string;
+    url: string;
+};
+export declare const messages: {
+    saveButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    insertButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const LinkPickerSubmitButton: ({ isEditing, isLoading, isSubmitting, customSubmitButtonLabel, error, items, queryState, submitMessageId, testId, url, }: LinkPickerButtonGroupProps) => jsx.JSX.Element;
+export {};

package/dist/{types/ui/link-picker/form-footer → types-ts4.5/ui/link-picker/form-footer/link-picker-submit-button}/utils.d.ts

@@ -1,2 +1,2 @@
-import { type LinkPickerState, type LinkSearchListItemData } from '../../../common/types';
+import { type LinkPickerState, type LinkSearchListItemData } from '../../../../common/types';
 export declare const checkSubmitDisabled: (isLoading: boolean, isSubmitting: boolean, error: unknown | null, url: string, queryState: LinkPickerState | null, items: LinkSearchListItemData[] | null) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.42.5",
+	"version": "1.43.0",
 	"description": "Standalone link picker",
 	"author": "Atlassian Pty Ltd",
 	"publishConfig": {