@atlaskit/link-picker 1.42.5 → 1.44.0

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/link-picker/search-results/link-search-list/index.js

@@ -6,9 +6,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef, Fragment, useCallback, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { defineMessages, FormattedMessage } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { MinHeightContainer } from '../../../../common/ui/min-height-container';
@@ -42,8 +43,8 @@ export const testIds = {
   searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
   tabsLoadingIndicator: 'link-picker.tabs-loading-indicator'
 };
-const emptyStateNoResultsWrapper = css({
-  minHeight: "var(--ds-space-200, 16px)"
+const emptyStateNoResultsWrapper = xcss({
+  minHeight: 'space.200'
 });
 export const LinkSearchList = /*#__PURE__*/forwardRef(({
   onChange,
@@ -62,6 +63,7 @@ export const LinkSearchList = /*#__PURE__*/forwardRef(({
   activePlugin,
   ...restProps
 }, ref) => {
+  var _activePlugin$uiOptio;
   let itemsContent;
   let loadingContent;
   const linkListTitle = hasSearchTerm ? messages.titleResults : messages.titleRecentlyViewed;
@@ -102,20 +104,19 @@ export const LinkSearchList = /*#__PURE__*/forwardRef(({
   }, [activeIndex, items, onKeyDown]);
   if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
     if (fg('platform.linking-platform.link-picker.enable-empty-state')) {
-      if (hasSearchTerm) {
-        return jsx(NoResults, null);
-      } else {
-        return (
-          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          jsx("div", {
-            css: emptyStateNoResultsWrapper
-          }, activePlugin !== null && activePlugin !== void 0 && activePlugin.emptyStateNoResults ? activePlugin.emptyStateNoResults() : null)
-        );
+      if (!hasSearchTerm) {
+        var _activePlugin$emptySt;
+        const emptyState = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$emptySt = activePlugin.emptyStateNoResults) === null || _activePlugin$emptySt === void 0 ? void 0 : _activePlugin$emptySt.call(activePlugin);
+        if (emptyState) {
+          return jsx(Box, {
+            xcss: emptyStateNoResultsWrapper
+          }, emptyState);
+        }
       }
-    } else {
-      return jsx(NoResults, null);
     }
+    return jsx(NoResults, null);
   }
+  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) {
     itemsContent = jsx(Fragment, null, jsx("div", {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -151,7 +152,8 @@ export const LinkSearchList = /*#__PURE__*/forwardRef(({
       onSelect: onSelect,
       key: item.objectId,
       tabIndex: getTabIndex(index),
-      ref: el => itemRefCallback(el, item.objectId)
+      ref: el => itemRefCallback(el, item.objectId),
+      nameMaxLines: listItemNameMaxLines
     }))));
   }
   if (isLoading) {

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

@@ -7,9 +7,10 @@ import { forwardRef, Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
+import { Text } from '@atlaskit/primitives';
 /* eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports */
 import { transformTimeStamp } from '../../../transformTimeStamp';
-import { composeListItemStyles, imgStyles, itemIconStyles, itemNameStyles, listItemContainerInnerStyles, listItemContainerStyles, listItemContextStyles, listItemNameStyles } from './styled';
+import { composeListItemStyles, imgStyles, itemIconStyles, itemNameStyles, listItemContainerInnerStyles, listItemContainerStyles, listItemContextStyles } from './styled';
 export const testIds = {
   searchResultItem: 'link-search-list-item',
   searchResultIcon: 'link-search-list-item-icon'
@@ -55,6 +56,37 @@ const ListItemIcon = props => {
     }))
   );
 };
+const ListItemSubtitle = ({
+  items: [firstItem, secondItem]
+}) => {
+  return /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */(
+    jsx("div", {
+      "data-testid": `${testIds.searchResultItem}-subtitle`,
+      css: listItemContextStyles
+    }, jsx("div", {
+      css: listItemContainerStyles
+    }, jsx("span", {
+      css: listItemContainerInnerStyles
+    }, firstItem)), secondItem && jsx("div", {
+      css: listItemContainerInnerStyles
+    }, jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(Fragment, null, secondItem)))
+  );
+  /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */
+};
+const getDefaultSubtitleItems = (item, intl) => {
+  const container = item.container;
+  const date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
+  if (container) {
+    if (date) {
+      return [container, date];
+    }
+    return [container];
+  }
+  if (date) {
+    return [date];
+  }
+  return undefined;
+};
 export const LinkSearchListItem = /*#__PURE__*/forwardRef(({
   item,
   selected,
@@ -63,12 +95,12 @@ export const LinkSearchListItem = /*#__PURE__*/forwardRef(({
   onSelect,
   tabIndex,
   onKeyDown,
-  onFocus
+  onFocus,
+  nameMaxLines = 1
 }, ref) => {
   const intl = useIntl();
   const handleSelect = () => onSelect(item.objectId);
-  const container = item.container || null;
-  const date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
+  const subtitleItems = item.subtitleItems || getDefaultSubtitleItems(item, intl);
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     css: composeListItemStyles(selected),
@@ -86,24 +118,12 @@ export const LinkSearchListItem = /*#__PURE__*/forwardRef(({
     intl: intl
   }), jsx("div", {
     css: itemNameStyles
-  }, jsx("div", {
-    "data-testid": `${testIds.searchResultItem}-title`
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: listItemNameStyles,
-    title: item.name
-  }, item.name), jsx("div", {
-    "data-testid": `${testIds.searchResultItem}-subtitle`,
-    css: listItemContextStyles
-  }, container &&
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: listItemContainerStyles
+  }, jsx(Text, {
+    maxLines: nameMaxLines
   }, jsx("span", {
-    css: listItemContainerInnerStyles
-  }, container)), date &&
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: listItemContainerInnerStyles
-  }, container && jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(Fragment, null, date)))));
+    "data-testid": `${testIds.searchResultItem}-title`,
+    title: item.name
+  }, item.name)), subtitleItems && jsx(ListItemSubtitle, {
+    items: subtitleItems
+  })));
 });

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

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { B100, B400, B50, N20, N200, N300, N800 } from '@atlaskit/theme/colors';
+import { B100, B400, B50, N20, N200, N300 } from '@atlaskit/theme/colors';
 import { fontSize, fontSizeSmall } from '@atlaskit/theme/constants';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -60,16 +60,8 @@ export const composeListItemStyles = (selected = false) => {
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const itemNameStyles = css({
   overflow: 'hidden',
-  alignContent: 'center'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const listItemNameStyles = css({
-  color: `var(--ds-text, ${N800})`,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  lineHeight: '20px'
+  alignContent: 'center',
+  width: '100%'
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

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.44.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/link-picker/search-results/link-search-list/index.js

@@ -11,9 +11,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { forwardRef, Fragment, useCallback, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { defineMessages, FormattedMessage } from 'react-intl-next';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { MinHeightContainer } from '../../../../common/ui/min-height-container';
@@ -45,10 +46,11 @@ export var testIds = _objectSpread(_objectSpread(_objectSpread({}, noResultsTest
   searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
   tabsLoadingIndicator: 'link-picker.tabs-loading-indicator'
 });
-var emptyStateNoResultsWrapper = css({
-  minHeight: "var(--ds-space-200, 16px)"
+var emptyStateNoResultsWrapper = xcss({
+  minHeight: 'space.200'
 });
 export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _activePlugin$uiOptio;
   var onChange = _ref.onChange,
     onSelect = _ref.onSelect,
     onKeyDown = _ref.onKeyDown,
@@ -104,20 +106,19 @@ export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [activeIndex, items, onKeyDown]);
   if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
     if (fg('platform.linking-platform.link-picker.enable-empty-state')) {
-      if (hasSearchTerm) {
-        return jsx(NoResults, null);
-      } else {
-        return (
-          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-          jsx("div", {
-            css: emptyStateNoResultsWrapper
-          }, activePlugin !== null && activePlugin !== void 0 && activePlugin.emptyStateNoResults ? activePlugin.emptyStateNoResults() : null)
-        );
+      if (!hasSearchTerm) {
+        var _activePlugin$emptySt;
+        var emptyState = activePlugin === null || activePlugin === void 0 || (_activePlugin$emptySt = activePlugin.emptyStateNoResults) === null || _activePlugin$emptySt === void 0 ? void 0 : _activePlugin$emptySt.call(activePlugin);
+        if (emptyState) {
+          return jsx(Box, {
+            xcss: emptyStateNoResultsWrapper
+          }, emptyState);
+        }
       }
-    } else {
-      return jsx(NoResults, null);
     }
+    return jsx(NoResults, null);
   }
+  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) {
     itemsContent = jsx(Fragment, null, jsx("div", {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -158,7 +159,8 @@ export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
         tabIndex: getTabIndex(index),
         ref: function ref(el) {
           return itemRefCallback(el, item.objectId);
-        }
+        },
+        nameMaxLines: listItemNameMaxLines
       });
     })));
   }