@atlaskit/link-picker 1.42.5 → 1.44.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/link-picker
 
+## 1.44.0
+
+### Minor Changes
+
+- [#132649](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/132649)
+  [`b99bd2fb0aeeb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b99bd2fb0aeeb) -
+  Fixes support for plugin empty state behind ff. If successful will be made available in future
+  release.
+- [#131548](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131548)
+  [`282ddb3575504`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/282ddb3575504) -
+  [ux] Allow custom subtitle content in the link picker, and allow link item names to extend over
+  multiple lines. Both changes are opt-in via a LinkPickerPlugin, so these new features will only
+  appear if the plugin is changed to consume them.
+
+## 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/link-picker/search-results/link-search-list/index.js

@@ -12,6 +12,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _minHeightContainer = require("../../../../common/ui/min-height-container");
@@ -49,10 +50,11 @@ var testIds = exports.testIds = _objectSpread(_objectSpread(_objectSpread({}, _l
   searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
   tabsLoadingIndicator: 'link-picker.tabs-loading-indicator'
 });
-var emptyStateNoResultsWrapper = (0, _react2.css)({
-  minHeight: "var(--ds-space-200, 16px)"
+var emptyStateNoResultsWrapper = (0, _primitives.xcss)({
+  minHeight: 'space.200'
 });
 var LinkSearchList = exports.LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _activePlugin$uiOptio;
   var onChange = _ref.onChange,
     onSelect = _ref.onSelect,
     onKeyDown = _ref.onKeyDown,
@@ -108,20 +110,19 @@ var LinkSearchList = exports.LinkSearchList = /*#__PURE__*/(0, _react.forwardRef
   }, [activeIndex, items, onKeyDown]);
   if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
     if ((0, _platformFeatureFlags.fg)('platform.linking-platform.link-picker.enable-empty-state')) {
-      if (hasSearchTerm) {
-        return (0, _react2.jsx)(_linkSearchNoResults.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
-          (0, _react2.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 (0, _react2.jsx)(_primitives.Box, {
+            xcss: emptyStateNoResultsWrapper
+          }, emptyState);
+        }
       }
-    } else {
-      return (0, _react2.jsx)(_linkSearchNoResults.NoResults, null);
     }
+    return (0, _react2.jsx)(_linkSearchNoResults.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 = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.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
@@ -162,7 +163,8 @@ var LinkSearchList = exports.LinkSearchList = /*#__PURE__*/(0, _react.forwardRef
         tabIndex: getTabIndex(index),
         ref: function ref(el) {
           return itemRefCallback(el, item.objectId);
-        }
+        },
+        nameMaxLines: listItemNameMaxLines
       });
     })));
   }

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

@@ -1,12 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.testIds = exports.LinkSearchListItem = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _primitives = require("@atlaskit/primitives");
 var _transformTimeStamp = require("../../../transformTimeStamp");
 var _styled = require("./styled");
 /**
@@ -63,21 +66,54 @@ var ListItemIcon = function ListItemIcon(props) {
     }))
   );
 };
-var LinkSearchListItem = exports.LinkSearchListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var item = _ref.item,
-    selected = _ref.selected,
-    id = _ref.id,
-    role = _ref.role,
-    onSelect = _ref.onSelect,
-    tabIndex = _ref.tabIndex,
-    onKeyDown = _ref.onKeyDown,
-    onFocus = _ref.onFocus;
+var ListItemSubtitle = function ListItemSubtitle(_ref) {
+  var _ref$items = (0, _slicedToArray2.default)(_ref.items, 2),
+    firstItem = _ref$items[0],
+    secondItem = _ref$items[1];
+  return /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */(
+    (0, _react2.jsx)("div", {
+      "data-testid": "".concat(testIds.searchResultItem, "-subtitle"),
+      css: _styled.listItemContextStyles
+    }, (0, _react2.jsx)("div", {
+      css: _styled.listItemContainerStyles
+    }, (0, _react2.jsx)("span", {
+      css: _styled.listItemContainerInnerStyles
+    }, firstItem)), secondItem && (0, _react2.jsx)("div", {
+      css: _styled.listItemContainerInnerStyles
+    }, (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022\xA0 "), (0, _react2.jsx)(_react.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 */
+};
+var getDefaultSubtitleItems = function getDefaultSubtitleItems(item, intl) {
+  var container = item.container;
+  var date = (0, _transformTimeStamp.transformTimeStamp)(intl, item.lastViewedDate, item.lastUpdatedDate);
+  if (container) {
+    if (date) {
+      return [container, date];
+    }
+    return [container];
+  }
+  if (date) {
+    return [date];
+  }
+  return undefined;
+};
+var LinkSearchListItem = exports.LinkSearchListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var item = _ref2.item,
+    selected = _ref2.selected,
+    id = _ref2.id,
+    role = _ref2.role,
+    onSelect = _ref2.onSelect,
+    tabIndex = _ref2.tabIndex,
+    onKeyDown = _ref2.onKeyDown,
+    onFocus = _ref2.onFocus,
+    _ref2$nameMaxLines = _ref2.nameMaxLines,
+    nameMaxLines = _ref2$nameMaxLines === void 0 ? 1 : _ref2$nameMaxLines;
   var intl = (0, _reactIntlNext.useIntl)();
   var handleSelect = function handleSelect() {
     return onSelect(item.objectId);
   };
-  var container = item.container || null;
-  var date = (0, _transformTimeStamp.transformTimeStamp)(intl, item.lastViewedDate, item.lastUpdatedDate);
+  var subtitleItems = item.subtitleItems || getDefaultSubtitleItems(item, intl);
   return (0, _react2.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: (0, _styled.composeListItemStyles)(selected),
@@ -95,24 +131,12 @@ var LinkSearchListItem = exports.LinkSearchListItem = /*#__PURE__*/(0, _react.fo
     intl: intl
   }), (0, _react2.jsx)("div", {
     css: _styled.itemNameStyles
-  }, (0, _react2.jsx)("div", {
-    "data-testid": "".concat(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: _styled.listItemNameStyles,
-    title: item.name
-  }, item.name), (0, _react2.jsx)("div", {
-    "data-testid": "".concat(testIds.searchResultItem, "-subtitle"),
-    css: _styled.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
-  (0, _react2.jsx)("div", {
-    css: _styled.listItemContainerStyles
+  }, (0, _react2.jsx)(_primitives.Text, {
+    maxLines: nameMaxLines
   }, (0, _react2.jsx)("span", {
-    css: _styled.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
-  (0, _react2.jsx)("div", {
-    css: _styled.listItemContainerInnerStyles
-  }, container && (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022\xA0 "), (0, _react2.jsx)(_react.Fragment, null, date)))));
+    "data-testid": "".concat(testIds.searchResultItem, "-title"),
+    title: item.name
+  }, item.name)), subtitleItems && (0, _react2.jsx)(ListItemSubtitle, {
+    items: subtitleItems
+  })));
 });

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.relativeFontSizeToBase16 = exports.listItemNameStyles = exports.listItemContextStyles = exports.listItemContainerStyles = exports.listItemContainerInnerStyles = exports.itemNameStyles = exports.itemIconStyles = exports.imgStyles = exports.composeListItemStyles = void 0;
+exports.relativeFontSizeToBase16 = exports.listItemContextStyles = exports.listItemContainerStyles = exports.listItemContainerInnerStyles = exports.itemNameStyles = exports.itemIconStyles = exports.imgStyles = exports.composeListItemStyles = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
@@ -68,16 +68,8 @@ var composeListItemStyles = exports.composeListItemStyles = function composeList
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var itemNameStyles = exports.itemNameStyles = (0, _react.css)({
   overflow: 'hidden',
-  alignContent: 'center'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var listItemNameStyles = exports.listItemNameStyles = (0, _react.css)({
-  color: "var(--ds-text, ".concat(_colors.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/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.44.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));
+};