@atlaskit/link-picker 1.31.0 → 1.32.1

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

@@ -24,6 +24,7 @@ export const SearchResults = ({
   activePlugin,
   isLoadingPlugins,
   isLoadingResults,
+  isSubmitting,
   handleTabChange,
   handleSearchListOnChange,
   featureFlags,
@@ -65,6 +66,7 @@ export const SearchResults = ({
   })), !error && jsx(LinkSearchList, {
     id: linkSearchListId,
     role: "listbox",
+    ariaReadOnly: isSubmitting,
     items: items,
     isLoading: isLoadingResults,
     selectedIndex: selectedIndex,

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

@@ -48,6 +48,7 @@ export const LinkSearchList = /*#__PURE__*/forwardRef(({
   isLoading,
   ariaControls,
   ariaLabelledBy,
+  ariaReadOnly,
   role,
   id,
   hasSearchTerm,
@@ -124,6 +125,7 @@ export const LinkSearchList = /*#__PURE__*/forwardRef(({
       css: listStyles,
       "aria-controls": "fabric.smartcard.linkpicker.suggested.results",
       "aria-labelledby": testIds.resultListTitle,
+      "aria-readonly": ariaReadOnly,
       "data-testid": testIds.searchResultList
     }, items.map((item, index) => jsx(LinkSearchListItem, {
       id: `${testIds.searchResultItem}-${index}`,

package/dist/es2019/ui/messages-provider/lazy-messages-provider/utils/fetch-messages-for-locale.js

@@ -1,5 +1,3 @@
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import messages from '../../../../i18n/en';
 export const fetchMessagesForLocale = async locale => {
   try {
     const messages = await import( /* webpackChunkName: "@atlaskit-internal_link-picker-i18n-[request]" */`../../../../i18n/${locale.replace('-', '_')}`);
@@ -14,12 +12,4 @@ export const fetchMessagesForLocale = async locale => {
   } catch (e) {
     // ignore
   }
-  if (getBooleanFF('platform.linking-platform.link-create.tmp-fix-translations')) {
-    return;
-  }
-
-  /**
-   * English bundled by default as this is the majority of users
-   */
-  return messages;
 };

package/dist/esm/ui/index.js

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

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

@@ -1,17 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isLoading", "error", "url", "queryState", "items", "isEditing", "onCancel", "action", "createFeatureDiscovery", "customSubmitButtonLabel"];
+var _excluded = ["isLoading", "isSubmitting", "error", "url", "queryState", "items", "isEditing", "onCancel", "action", "createFeatureDiscovery", "customSubmitButtonLabel"];
 /** @jsx jsx */
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { 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 EditorAddIcon from '@atlaskit/icon/glyph/editor/add';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { UnauthenticatedError } from '../../../common/utils/errors';
 import FeatureDiscovery from './feature-discovery';
 import { formFooterActionStyles, formFooterStyles } from './styled';
 import { checkSubmitDisabled } from './utils';
-var messages = defineMessages({
+export var messages = defineMessages({
   cancelButton: {
     id: 'fabric.linkPicker.button.cancel',
     defaultMessage: 'Cancel',
@@ -26,17 +29,25 @@ var messages = defineMessages({
     id: 'fabric.linkPicker.button.insert',
     defaultMessage: 'Insert',
     description: 'Button to insert searched or selected link'
+  },
+  submittingStatusMessage: {
+    id: 'fabric.linkPicker.status.submitting',
+    defaultMessage: 'Submitting',
+    description: 'Accessibility text to indicate the form has been submitted, and submission is in-progress'
   }
 });
 export var testIds = {
   insertButton: 'link-picker-insert-button',
   cancelButton: 'link-picker-cancel-button',
   actionButton: 'link-picker-action-button',
+  submitStatusA11yIndicator: 'link-picker-submit-status-a11y-indicator',
   /** Feature discovery for action button (css pulse) */
   actionButtonDiscovery: 'link-picker-action-button-discovery'
 };
 export var FormFooter = /*#__PURE__*/memo(function (_ref) {
   var isLoading = _ref.isLoading,
+    _ref$isSubmitting = _ref.isSubmitting,
+    isSubmitting = _ref$isSubmitting === void 0 ? false : _ref$isSubmitting,
     error = _ref.error,
     url = _ref.url,
     queryState = _ref.queryState,
@@ -49,10 +60,13 @@ export var FormFooter = /*#__PURE__*/memo(function (_ref) {
     customSubmitButtonLabel = _ref.customSubmitButtonLabel,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var intl = useIntl();
+  var submitMessageId = useMemo(function () {
+    return uuid();
+  }, []);
   if (error && error instanceof UnauthenticatedError) {
     return null;
   }
-  var isSubmitDisabled = checkSubmitDisabled(isLoading, error, url, queryState, items);
+  var isSubmitDisabled = checkSubmitDisabled(isLoading, isSubmitting, error, url, queryState, items);
   var insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
   var createButton = function createButton(pluginAction) {
     return jsx(Button, {
@@ -62,23 +76,33 @@ export var FormFooter = /*#__PURE__*/memo(function (_ref) {
       iconBefore: jsx(EditorAddIcon, {
         label: "",
         size: "medium"
-      })
+      }),
+      isDisabled: isSubmitting,
+      "aria-labelledby": isSubmitting ? submitMessageId : undefined
     }, typeof pluginAction.label === 'string' ? pluginAction.label : intl.formatMessage(pluginAction.label));
   };
   return jsx("footer", _extends({
     css: formFooterStyles
-  }, restProps), action && jsx("div", {
+  }, restProps), isSubmitting && jsx(VisuallyHidden, {
+    role: "status",
+    id: submitMessageId,
+    testId: testIds.submitStatusA11yIndicator
+  }, intl.formatMessage(messages.submittingStatusMessage)), action && jsx("div", {
     css: formFooterActionStyles
   }, createFeatureDiscovery ? jsx(FeatureDiscovery, {
     testId: testIds.actionButtonDiscovery
   }, createButton(action)) : createButton(action)), jsx(ButtonGroup, null, jsx(Button, {
     appearance: "subtle",
     onClick: onCancel,
-    testId: testIds.cancelButton
-  }, intl.formatMessage(messages.cancelButton)), jsx(Button, {
+    testId: testIds.cancelButton,
+    isDisabled: isSubmitting,
+    "aria-labelledby": isSubmitting ? submitMessageId : undefined
+  }, intl.formatMessage(messages.cancelButton)), jsx(LoadingButton, {
     type: "submit",
     appearance: "primary",
     testId: testIds.insertButton,
-    isDisabled: isSubmitDisabled
+    isDisabled: isSubmitDisabled,
+    "aria-labelledby": isSubmitting ? submitMessageId : undefined,
+    isLoading: isSubmitting
   }, customSubmitButtonLabel ? intl.formatMessage(customSubmitButtonLabel) : intl.formatMessage(insertButtonMsg))));
 });

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

@@ -1,5 +1,5 @@
 import { normalizeUrl } from '@atlaskit/linking-common/url';
-export var checkSubmitDisabled = function checkSubmitDisabled(isLoading, error, url, queryState, items) {
+export var checkSubmitDisabled = function checkSubmitDisabled(isLoading, isSubmitting, error, url, queryState, items) {
   /*
    * Enable insert when search term is a valid url and it can be normalized
    * Need to explicitly enable it here otherwise next condition could meet
@@ -7,6 +7,9 @@ export var checkSubmitDisabled = function checkSubmitDisabled(isLoading, error,
    * This should effectively be the validation function for the form, ie if the form
    * could be submitted, then it should not be disabled
    */
+  if (isSubmitting) {
+    return true;
+  }
   if (url && normalizeUrl(url)) {
     return false;
   }

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

@@ -80,7 +80,9 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     initDisplayText = _ref.displayText,
     hideDisplayText = _ref.hideDisplayText,
     featureFlags = _ref.featureFlags,
-    customMessages = _ref.customMessages;
+    customMessages = _ref.customMessages,
+    _ref$isSubmitting = _ref.isSubmitting,
+    isSubmitting = _ref$isSubmitting === void 0 ? false : _ref$isSubmitting;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useReducer = useReducer(reducer, _objectSpread(_objectSpread({}, initState), {}, {
@@ -120,6 +122,11 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     }
   }, [onContentResize, items, isLoadingResults, isActivePlugin, tabs]);
   var handleChangeUrl = useCallback(function (e) {
+    if (isSubmitting) {
+      // Prevent changing url while submitting
+      return;
+    }
+
     /** Any on change event is triggered by manual input or paste, so source is null */
     trackAttribute('linkFieldContentInputSource', null);
     dispatch({
@@ -127,7 +134,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
       // If the last action was changing tabs, make sure we're now allowing recents to be hidden
       preventHidingRecents: false
     });
-  }, [dispatch, trackAttribute]);
+  }, [dispatch, trackAttribute, isSubmitting]);
   var handleChangeText = useCallback(function (e) {
     dispatch({
       displayText: e.currentTarget.value
@@ -140,9 +147,13 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     }, field, ''));
   }, [dispatch]);
   var handleUrlClear = useCallback(function () {
+    if (isSubmitting) {
+      // Prevent clearing url while submitting
+      return;
+    }
     trackAttribute('linkFieldContentInputSource', null);
     handleClear('url');
-  }, [trackAttribute, handleClear]);
+  }, [trackAttribute, handleClear, isSubmitting]);
   var handleInsert = useCallback(function (url, title, inputType) {
     var event = createAnalyticsEvent(createEventPayload('ui.form.submitted.linkPicker', {}));
 
@@ -168,6 +179,10 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     } : {}), consumerEvent);
   }, [displayText, onSubmit, state.url, createAnalyticsEvent, getAttributes]);
   var handleSelected = useCallback(function (objectId) {
+    if (isSubmitting) {
+      // Prevent changing selection while submitting
+      return;
+    }
     var selectedItem = items === null || items === void 0 ? void 0 : items.find(function (item) {
       return item.objectId === objectId;
     });
@@ -183,9 +198,13 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
       trackAttribute('linkFieldContentInputSource', getDataSource(selectedItem, activePlugin));
       handleInsert(_url, name, 'typeAhead');
     }
-  }, [handleInsert, trackAttribute, items, activePlugin]);
+  }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
   var handleSubmit = useCallback(function (event) {
     event === null || event === void 0 || event.preventDefault();
+    if (isSubmitting) {
+      // Prevent submit while submitting
+      return;
+    }
     if (isSelectedItem && selectedItem) {
       return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
@@ -196,7 +215,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     return dispatch({
       invalidUrl: true
     });
-  }, [dispatch, handleInsert, isSelectedItem, selectedItem, url]);
+  }, [dispatch, handleInsert, isSelectedItem, selectedItem, url, isSubmitting]);
   var handleTabChange = useCallback(function (activeTab) {
     var _plugins$activeTab$ta, _plugins$activeTab;
     dispatch({
@@ -212,6 +231,10 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     trackAttribute('tab', (_plugins$activeTab$ta = plugins === null || plugins === void 0 || (_plugins$activeTab = plugins[activeTab]) === null || _plugins$activeTab === void 0 ? void 0 : _plugins$activeTab.tabKey) !== null && _plugins$activeTab$ta !== void 0 ? _plugins$activeTab$ta : null);
   }, [dispatch, plugins, trackAttribute]);
   var handleSearchListOnChange = function handleSearchListOnChange(id) {
+    if (isSubmitting) {
+      // Prevent changing item while submitting
+      return;
+    }
     var index = items === null || items === void 0 ? void 0 : items.findIndex(function (item) {
       return item.objectId === id;
     });
@@ -276,8 +299,11 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
   var screenReaderText = browser().safari && getScreenReaderText(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
   return jsx("form", {
     "data-testid": testIds.linkPicker,
-    css: rootContainerStyles,
-    onSubmit: handleSubmit
+    css: rootContainerStyles
+    // Use onSubmitCapture instead of onSubmit when FF enabled so that any possible parent form isn't submitted
+    ,
+    onSubmit: getBooleanFF('platform.linking-platform.link-picker.use-onsubmitcapture') ? undefined : handleSubmit,
+    onSubmitCapture: getBooleanFF('platform.linking-platform.link-picker.use-onsubmitcapture') ? handleSubmit : undefined
   }, jsx(TrackMount, null), screenReaderText && jsx(Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
@@ -300,6 +326,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     "aria-controls": linkSearchListId,
     "aria-activedescendant": ariaActiveDescendant,
     "aria-describedby": screenReaderDescriptionId,
+    "aria-readonly": isSubmitting,
     error: invalidUrl ? intl.formatMessage(formMessages.linkInvalid) : null,
     spotlightTargetName: "link-picker-search-field-spotlight-target",
     onClear: handleUrlClear,
@@ -313,6 +340,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     label: customMessages !== null && customMessages !== void 0 && customMessages.linkTextLabel ? intl.formatMessage(customMessages.linkTextLabel) : intl.formatMessage(linkTextMessages.linkTextLabel),
     placeholder: customMessages !== null && customMessages !== void 0 && customMessages.linkTextPlaceholder ? intl.formatMessage(customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkTextPlaceholder) : intl.formatMessage(linkTextMessages.linkTextPlaceholder),
     clearLabel: intl.formatMessage(linkTextMessages.clearLinkText),
+    readOnly: isSubmitting,
     onClear: handleClear,
     onChange: handleChangeText
   }), !!queryState && (isLoadingPlugins || isActivePlugin) && jsx(SearchResults, {
@@ -321,6 +349,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     activePlugin: activePlugin,
     isLoadingResults: isLoadingResults,
     isLoadingPlugins: isLoadingPlugins,
+    isSubmitting: isSubmitting,
     linkSearchListId: linkSearchListId,
     error: error,
     featureFlags: featureFlags,
@@ -338,6 +367,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     items: items
     /** If the results section appears to be loading, impact whether the submit button is disabled */,
     isLoading: isLoadingResults || !!isLoadingPlugins,
+    isSubmitting: isSubmitting,
     queryState: queryState,
     url: url,
     isEditing: isEditing,

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

@@ -26,6 +26,7 @@ export var SearchResults = function SearchResults(_ref) {
     activePlugin = _ref.activePlugin,
     isLoadingPlugins = _ref.isLoadingPlugins,
     isLoadingResults = _ref.isLoadingResults,
+    isSubmitting = _ref.isSubmitting,
     handleTabChange = _ref.handleTabChange,
     handleSearchListOnChange = _ref.handleSearchListOnChange,
     featureFlags = _ref.featureFlags,
@@ -67,6 +68,7 @@ export var SearchResults = function SearchResults(_ref) {
   })), !error && jsx(LinkSearchList, {
     id: linkSearchListId,
     role: "listbox",
+    ariaReadOnly: isSubmitting,
     items: items,
     isLoading: isLoadingResults,
     selectedIndex: selectedIndex,

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "role", "id", "hasSearchTerm", "activePlugin"];
+var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "ariaReadOnly", "role", "id", "hasSearchTerm", "activePlugin"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
@@ -51,6 +51,7 @@ export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isLoading = _ref.isLoading,
     ariaControls = _ref.ariaControls,
     ariaLabelledBy = _ref.ariaLabelledBy,
+    ariaReadOnly = _ref.ariaReadOnly,
     role = _ref.role,
     id = _ref.id,
     hasSearchTerm = _ref.hasSearchTerm,
@@ -126,6 +127,7 @@ export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
       css: listStyles,
       "aria-controls": "fabric.smartcard.linkpicker.suggested.results",
       "aria-labelledby": testIds.resultListTitle,
+      "aria-readonly": ariaReadOnly,
       "data-testid": testIds.searchResultList
     }, items.map(function (item, index) {
       return jsx(LinkSearchListItem, {

package/dist/esm/ui/messages-provider/lazy-messages-provider/utils/fetch-messages-for-locale.js

@@ -1,10 +1,8 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import messages from '../../../../i18n/en';
 export var fetchMessagesForLocale = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(locale) {
-    var _messages, parentLocale, _messages2;
+    var messages, parentLocale, _messages;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -12,8 +10,8 @@ export var fetchMessagesForLocale = /*#__PURE__*/function () {
           _context.next = 3;
           return import( /* webpackChunkName: "@atlaskit-internal_link-picker-i18n-[request]" */"../../../../i18n/".concat(locale.replace('-', '_')));
         case 3:
-          _messages = _context.sent;
-          return _context.abrupt("return", _messages.default);
+          messages = _context.sent;
+          return _context.abrupt("return", messages.default);
         case 7:
           _context.prev = 7;
           _context.t0 = _context["catch"](0);
@@ -23,20 +21,12 @@ export var fetchMessagesForLocale = /*#__PURE__*/function () {
           _context.next = 13;
           return import( /* webpackChunkName: "@atlaskit-internal_link-picker-i18n-[request]" */"../../../../i18n/".concat(parentLocale));
         case 13:
-          _messages2 = _context.sent;
-          return _context.abrupt("return", _messages2.default);
+          _messages = _context.sent;
+          return _context.abrupt("return", _messages.default);
         case 17:
           _context.prev = 17;
           _context.t1 = _context["catch"](9);
         case 19:
-          if (!getBooleanFF('platform.linking-platform.link-create.tmp-fix-translations')) {
-            _context.next = 21;
-            break;
-          }
-          return _context.abrupt("return");
-        case 21:
-          return _context.abrupt("return", messages);
-        case 22:
         case "end":
           return _context.stop();
       }

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

@@ -2,16 +2,41 @@
 import { jsx } from '@emotion/react';
 import { MessageDescriptor } from 'react-intl-next';
 import { LinkPickerPluginAction, LinkPickerState, LinkSearchListItemData } from '../../../common/types';
+export declare const messages: {
+    cancelButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    saveButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    insertButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    submittingStatusMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
 export declare const testIds: {
     readonly insertButton: "link-picker-insert-button";
     readonly cancelButton: "link-picker-cancel-button";
     readonly actionButton: "link-picker-action-button";
+    readonly submitStatusA11yIndicator: "link-picker-submit-status-a11y-indicator";
     /** Feature discovery for action button (css pulse) */
     readonly actionButtonDiscovery: "link-picker-action-button-discovery";
 };
 interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
     /** If the results section appears to be loading, impact whether the submit button is disabled */
     isLoading: boolean;
+    /** Controls showing a "submission in-progres" UX */
+    isSubmitting?: boolean;
     error: unknown | null;
     url: string;
     queryState: LinkPickerState | null;
@@ -22,5 +47,5 @@ interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
     createFeatureDiscovery?: boolean;
     customSubmitButtonLabel?: MessageDescriptor;
 }
-export declare const FormFooter: import("react").MemoExoticComponent<({ isLoading, 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, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
 export {};

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

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

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

@@ -8,6 +8,7 @@ export declare const testIds: {
     readonly insertButton: "link-picker-insert-button";
     readonly cancelButton: "link-picker-cancel-button";
     readonly actionButton: "link-picker-action-button";
+    readonly submitStatusA11yIndicator: "link-picker-submit-status-a11y-indicator";
     readonly actionButtonDiscovery: "link-picker-action-button-discovery";
     readonly tabsLoadingIndicator: string;
     readonly tabList: string;
@@ -81,6 +82,8 @@ export interface LinkPickerProps {
     /** Allows for customisation of text in the link picker. */
     customMessages?: CustomLinkPickerMessages;
     featureFlags?: Record<string, unknown>;
+    /** Controls showing a "submission in-progres" UX */
+    isSubmitting?: boolean;
 }
 type CustomLinkPickerMessages = {
     /** Label for the link input field */

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

@@ -21,6 +21,7 @@ export type SearchResultsProps = {
     }[];
     isLoadingPlugins?: boolean;
     isLoadingResults: boolean;
+    isSubmitting?: boolean;
     activeTab: number;
     handleTabChange: (activeTab: number) => void;
     handleSearchListOnChange: (id: string) => void;
@@ -37,4 +38,4 @@ export type SearchResultsProps = {
     error?: unknown;
     retry: () => void;
 };
-export declare const SearchResults: ({ tabs, activeTab, activePlugin, isLoadingPlugins, isLoadingResults, handleTabChange, handleSearchListOnChange, featureFlags, linkSearchListId, error, queryState, items, activeIndex, selectedIndex, handleSelected, handleKeyDown, retry, }: SearchResultsProps) => jsx.JSX.Element;
+export declare const SearchResults: ({ tabs, activeTab, activePlugin, isLoadingPlugins, isLoadingResults, isSubmitting, handleTabChange, handleSearchListOnChange, featureFlags, linkSearchListId, error, queryState, items, activeIndex, selectedIndex, handleSelected, handleKeyDown, retry, }: SearchResultsProps) => jsx.JSX.Element;

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

@@ -38,6 +38,7 @@ export interface LinkSearchListProps extends Omit<React.HTMLAttributes<LinkSearc
     onKeyDown?: (e: KeyboardEvent<LinkSearchListElement>) => void;
     ariaControls?: string;
     ariaLabelledBy?: string;
+    ariaReadOnly?: boolean;
     role?: string;
     id?: string;
     hasSearchTerm?: boolean;

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

@@ -2,16 +2,41 @@
 import { jsx } from '@emotion/react';
 import { MessageDescriptor } from 'react-intl-next';
 import { LinkPickerPluginAction, LinkPickerState, LinkSearchListItemData } from '../../../common/types';
+export declare const messages: {
+    cancelButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    saveButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    insertButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    submittingStatusMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
 export declare const testIds: {
     readonly insertButton: "link-picker-insert-button";
     readonly cancelButton: "link-picker-cancel-button";
     readonly actionButton: "link-picker-action-button";
+    readonly submitStatusA11yIndicator: "link-picker-submit-status-a11y-indicator";
     /** Feature discovery for action button (css pulse) */
     readonly actionButtonDiscovery: "link-picker-action-button-discovery";
 };
 interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
     /** If the results section appears to be loading, impact whether the submit button is disabled */
     isLoading: boolean;
+    /** Controls showing a "submission in-progres" UX */
+    isSubmitting?: boolean;
     error: unknown | null;
     url: string;
     queryState: LinkPickerState | null;
@@ -22,5 +47,5 @@ interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
     createFeatureDiscovery?: boolean;
     customSubmitButtonLabel?: MessageDescriptor;
 }
-export declare const FormFooter: import("react").MemoExoticComponent<({ isLoading, 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, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
 export {};

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

@@ -1,2 +1,2 @@
 import { LinkPickerState, LinkSearchListItemData } from '../../../common/types';
-export declare const checkSubmitDisabled: (isLoading: boolean, error: unknown | null, url: string, queryState: LinkPickerState | null, items: LinkSearchListItemData[] | null) => boolean;
+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/ui/link-picker/index.d.ts

@@ -8,6 +8,7 @@ export declare const testIds: {
     readonly insertButton: "link-picker-insert-button";
     readonly cancelButton: "link-picker-cancel-button";
     readonly actionButton: "link-picker-action-button";
+    readonly submitStatusA11yIndicator: "link-picker-submit-status-a11y-indicator";
     readonly actionButtonDiscovery: "link-picker-action-button-discovery";
     readonly tabsLoadingIndicator: string;
     readonly tabList: string;
@@ -81,6 +82,8 @@ export interface LinkPickerProps {
     /** Allows for customisation of text in the link picker. */
     customMessages?: CustomLinkPickerMessages;
     featureFlags?: Record<string, unknown>;
+    /** Controls showing a "submission in-progres" UX */
+    isSubmitting?: boolean;
 }
 type CustomLinkPickerMessages = {
     /** Label for the link input field */

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

@@ -21,6 +21,7 @@ export type SearchResultsProps = {
     }[];
     isLoadingPlugins?: boolean;
     isLoadingResults: boolean;
+    isSubmitting?: boolean;
     activeTab: number;
     handleTabChange: (activeTab: number) => void;
     handleSearchListOnChange: (id: string) => void;
@@ -37,4 +38,4 @@ export type SearchResultsProps = {
     error?: unknown;
     retry: () => void;
 };
-export declare const SearchResults: ({ tabs, activeTab, activePlugin, isLoadingPlugins, isLoadingResults, handleTabChange, handleSearchListOnChange, featureFlags, linkSearchListId, error, queryState, items, activeIndex, selectedIndex, handleSelected, handleKeyDown, retry, }: SearchResultsProps) => jsx.JSX.Element;
+export declare const SearchResults: ({ tabs, activeTab, activePlugin, isLoadingPlugins, isLoadingResults, isSubmitting, handleTabChange, handleSearchListOnChange, featureFlags, linkSearchListId, error, queryState, items, activeIndex, selectedIndex, handleSelected, handleKeyDown, retry, }: SearchResultsProps) => jsx.JSX.Element;

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

@@ -38,6 +38,7 @@ export interface LinkSearchListProps extends Omit<React.HTMLAttributes<LinkSearc
     onKeyDown?: (e: KeyboardEvent<LinkSearchListElement>) => void;
     ariaControls?: string;
     ariaLabelledBy?: string;
+    ariaReadOnly?: boolean;
     role?: string;
     id?: string;
     hasSearchTerm?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.31.0",
+  "version": "1.32.1",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -50,7 +50,7 @@
     "platform.linking-platform.link-picker.enable-jira-create": {
       "type": "boolean"
     },
-    "platform.linking-platform.link-create.tmp-fix-translations": {
+    "platform.linking-platform.link-picker.use-onsubmitcapture": {
       "type": "boolean"
     }
   },
@@ -96,7 +96,7 @@
     "@atlaskit/dropdown-menu": "^12.1.0",
     "@atlaskit/link-provider": "^1.6.0",
     "@atlaskit/link-test-helpers": "^6.2.0",
-    "@atlaskit/primitives": "^1.16.0",
+    "@atlaskit/primitives": "^1.17.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@atlassian/feature-flags-test-utils": "*",