@atlaskit/link-picker 1.31.0 → 1.32.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/link-picker
 
+## 1.32.1
+
+### Patch Changes
+
+- [#66404](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66404) [`61ac6afc1d89`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/61ac6afc1d89) - EDM-9025 Add onSubmitCapture behind feature flag
+
+## 1.32.0
+
+### Minor Changes
+
+- [#61981](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61981) [`0d7a20c43478`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0d7a20c43478) - [ux] Added a UI experience for when a submission is in progress
+
+### Patch Changes
+
+- [#64291](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64291) [`c44535acbea9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c44535acbea9) - remove platform.linking-platform.link-create.tmp-fix-translations to permanently return undefined in the loaderFn when dynamic import of locale messages fail.
+
 ## 1.31.0
 
 ### Minor Changes

package/dist/cjs/ui/index.js

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

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

@@ -5,23 +5,26 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testIds = exports.FormFooter = void 0;
+exports.testIds = exports.messages = exports.FormFooter = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 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 _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _errors = require("../../../common/utils/errors");
 var _featureDiscovery = _interopRequireDefault(require("./feature-discovery"));
 var _styled = require("./styled");
 var _utils = require("./utils");
-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 */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var messages = (0, _reactIntlNext.defineMessages)({
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   cancelButton: {
     id: 'fabric.linkPicker.button.cancel',
     defaultMessage: 'Cancel',
@@ -36,17 +39,25 @@ var messages = (0, _reactIntlNext.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'
   }
 });
 var testIds = exports.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'
 };
 var FormFooter = exports.FormFooter = /*#__PURE__*/(0, _react.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,
@@ -59,10 +70,13 @@ var FormFooter = exports.FormFooter = /*#__PURE__*/(0, _react.memo)(function (_r
     customSubmitButtonLabel = _ref.customSubmitButtonLabel,
     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, error, url, queryState, items);
+  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, {
@@ -72,23 +86,33 @@ var FormFooter = exports.FormFooter = /*#__PURE__*/(0, _react.memo)(function (_r
       iconBefore: (0, _react2.jsx)(_add.default, {
         label: "",
         size: "medium"
-      })
+      }),
+      isDisabled: isSubmitting,
+      "aria-labelledby": isSubmitting ? submitMessageId : undefined
     }, typeof pluginAction.label === 'string' ? pluginAction.label : intl.formatMessage(pluginAction.label));
   };
   return (0, _react2.jsx)("footer", (0, _extends2.default)({
     css: _styled.formFooterStyles
-  }, restProps), action && (0, _react2.jsx)("div", {
+  }, restProps), isSubmitting && (0, _react2.jsx)(_visuallyHidden.default, {
+    role: "status",
+    id: submitMessageId,
+    testId: testIds.submitStatusA11yIndicator
+  }, intl.formatMessage(messages.submittingStatusMessage)), action && (0, _react2.jsx)("div", {
     css: _styled.formFooterActionStyles
   }, createFeatureDiscovery ? (0, _react2.jsx)(_featureDiscovery.default, {
     testId: testIds.actionButtonDiscovery
   }, createButton(action)) : createButton(action)), (0, _react2.jsx)(_button.ButtonGroup, null, (0, _react2.jsx)(_button.default, {
     appearance: "subtle",
     onClick: onCancel,
-    testId: testIds.cancelButton
-  }, intl.formatMessage(messages.cancelButton)), (0, _react2.jsx)(_button.default, {
+    testId: testIds.cancelButton,
+    isDisabled: isSubmitting,
+    "aria-labelledby": isSubmitting ? submitMessageId : undefined
+  }, intl.formatMessage(messages.cancelButton)), (0, _react2.jsx)(_loadingButton.default, {
     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/cjs/ui/link-picker/form-footer/utils.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.checkSubmitDisabled = void 0;
 var _url = require("@atlaskit/linking-common/url");
-var checkSubmitDisabled = exports.checkSubmitDisabled = function checkSubmitDisabled(isLoading, error, url, queryState, items) {
+var checkSubmitDisabled = exports.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
@@ -13,6 +13,9 @@ var checkSubmitDisabled = exports.checkSubmitDisabled = function checkSubmitDisa
    * 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 && (0, _url.normalizeUrl)(url)) {
     return false;
   }

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

@@ -86,7 +86,9 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     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 = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useReducer = (0, _react.useReducer)(reducer, _objectSpread(_objectSpread({}, initState), {}, {
@@ -126,6 +128,11 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     }
   }, [onContentResize, items, isLoadingResults, isActivePlugin, tabs]);
   var handleChangeUrl = (0, _react.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({
@@ -133,7 +140,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
       // 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 = (0, _react.useCallback)(function (e) {
     dispatch({
       displayText: e.currentTarget.value
@@ -146,9 +153,13 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     }, field, ''));
   }, [dispatch]);
   var handleUrlClear = (0, _react.useCallback)(function () {
+    if (isSubmitting) {
+      // Prevent clearing url while submitting
+      return;
+    }
     trackAttribute('linkFieldContentInputSource', null);
     handleClear('url');
-  }, [trackAttribute, handleClear]);
+  }, [trackAttribute, handleClear, isSubmitting]);
   var handleInsert = (0, _react.useCallback)(function (url, title, inputType) {
     var event = createAnalyticsEvent((0, _analytics2.default)('ui.form.submitted.linkPicker', {}));
 
@@ -174,6 +185,10 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     } : {}), consumerEvent);
   }, [displayText, onSubmit, state.url, createAnalyticsEvent, getAttributes]);
   var handleSelected = (0, _react.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;
     });
@@ -189,9 +204,13 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
       trackAttribute('linkFieldContentInputSource', (0, _utils.getDataSource)(selectedItem, activePlugin));
       handleInsert(_url, name, 'typeAhead');
     }
-  }, [handleInsert, trackAttribute, items, activePlugin]);
+  }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
   var handleSubmit = (0, _react.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');
     }
@@ -202,7 +221,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     return dispatch({
       invalidUrl: true
     });
-  }, [dispatch, handleInsert, isSelectedItem, selectedItem, url]);
+  }, [dispatch, handleInsert, isSelectedItem, selectedItem, url, isSubmitting]);
   var handleTabChange = (0, _react.useCallback)(function (activeTab) {
     var _plugins$activeTab$ta, _plugins$activeTab;
     dispatch({
@@ -218,6 +237,10 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     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;
     });
@@ -282,8 +305,11 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
   var screenReaderText = (0, _userAgent.browser)().safari && (0, _utils.getScreenReaderText)(items !== null && items !== void 0 ? items : [], selectedIndex, intl);
   return (0, _react2.jsx)("form", {
     "data-testid": testIds.linkPicker,
-    css: _styled.rootContainerStyles,
-    onSubmit: handleSubmit
+    css: _styled.rootContainerStyles
+    // Use onSubmitCapture instead of onSubmit when FF enabled so that any possible parent form isn't submitted
+    ,
+    onSubmit: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.use-onsubmitcapture') ? undefined : handleSubmit,
+    onSubmitCapture: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.use-onsubmitcapture') ? handleSubmit : undefined
   }, (0, _react2.jsx)(_trackMount.TrackMount, null), screenReaderText && (0, _react2.jsx)(_announcer.Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
@@ -306,6 +332,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     "aria-controls": linkSearchListId,
     "aria-activedescendant": ariaActiveDescendant,
     "aria-describedby": screenReaderDescriptionId,
+    "aria-readonly": isSubmitting,
     error: invalidUrl ? intl.formatMessage(_messages.formMessages.linkInvalid) : null,
     spotlightTargetName: "link-picker-search-field-spotlight-target",
     onClear: handleUrlClear,
@@ -319,6 +346,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     label: customMessages !== null && customMessages !== void 0 && customMessages.linkTextLabel ? intl.formatMessage(customMessages.linkTextLabel) : intl.formatMessage(_messages.linkTextMessages.linkTextLabel),
     placeholder: customMessages !== null && customMessages !== void 0 && customMessages.linkTextPlaceholder ? intl.formatMessage(customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkTextPlaceholder) : intl.formatMessage(_messages.linkTextMessages.linkTextPlaceholder),
     clearLabel: intl.formatMessage(_messages.linkTextMessages.clearLinkText),
+    readOnly: isSubmitting,
     onClear: handleClear,
     onChange: handleChangeText
   }), !!queryState && (isLoadingPlugins || isActivePlugin) && (0, _react2.jsx)(_searchResults.SearchResults, {
@@ -327,6 +355,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     activePlugin: activePlugin,
     isLoadingResults: isLoadingResults,
     isLoadingPlugins: isLoadingPlugins,
+    isSubmitting: isSubmitting,
     linkSearchListId: linkSearchListId,
     error: error,
     featureFlags: featureFlags,
@@ -344,6 +373,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     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/cjs/ui/link-picker/search-results/index.js

@@ -35,6 +35,7 @@ var SearchResults = exports.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,
@@ -76,6 +77,7 @@ var SearchResults = exports.SearchResults = function SearchResults(_ref) {
   })), !error && (0, _react2.jsx)(_linkSearchList.LinkSearchList, {
     id: linkSearchListId,
     role: "listbox",
+    ariaReadOnly: isSubmitting,
     items: items,
     isLoading: isLoadingResults,
     selectedIndex: selectedIndex,

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

@@ -21,7 +21,7 @@ var _styled = require("./link-search-no-results/styled");
 var _listItem = require("./list-item");
 var _styled2 = require("./styled");
 var _useTrackResultsShown = require("./use-track-results-shown");
-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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
@@ -57,6 +57,7 @@ var LinkSearchList = exports.LinkSearchList = /*#__PURE__*/(0, _react.forwardRef
     isLoading = _ref.isLoading,
     ariaControls = _ref.ariaControls,
     ariaLabelledBy = _ref.ariaLabelledBy,
+    ariaReadOnly = _ref.ariaReadOnly,
     role = _ref.role,
     id = _ref.id,
     hasSearchTerm = _ref.hasSearchTerm,
@@ -132,6 +133,7 @@ var LinkSearchList = exports.LinkSearchList = /*#__PURE__*/(0, _react.forwardRef
       css: _styled2.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 (0, _react2.jsx)(_listItem.LinkSearchListItem, {

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

@@ -8,13 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.fetchMessagesForLocale = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _en = _interopRequireDefault(require("../../../../i18n/en"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var fetchMessagesForLocale = exports.fetchMessagesForLocale = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(locale) {
-    var _messages, parentLocale, _messages2;
+    var messages, parentLocale, _messages;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -28,8 +26,8 @@ var fetchMessagesForLocale = exports.fetchMessagesForLocale = /*#__PURE__*/funct
             });
           }( /* 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);
@@ -45,20 +43,12 @@ var fetchMessagesForLocale = exports.fetchMessagesForLocale = /*#__PURE__*/funct
             });
           }( /* 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 (!(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-create.tmp-fix-translations')) {
-            _context.next = 21;
-            break;
-          }
-          return _context.abrupt("return");
-        case 21:
-          return _context.abrupt("return", _en.default);
-        case 22:
         case "end":
           return _context.stop();
       }

package/dist/es2019/ui/index.js

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

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

@@ -1,15 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @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';
-const messages = defineMessages({
+export const messages = defineMessages({
   cancelButton: {
     id: 'fabric.linkPicker.button.cancel',
     defaultMessage: 'Cancel',
@@ -24,17 +27,24 @@ const 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 const 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 const FormFooter = /*#__PURE__*/memo(({
   isLoading,
+  isSubmitting = false,
   error,
   url,
   queryState,
@@ -47,10 +57,11 @@ export const FormFooter = /*#__PURE__*/memo(({
   ...restProps
 }) => {
   const intl = useIntl();
+  const submitMessageId = useMemo(() => uuid(), []);
   if (error && error instanceof UnauthenticatedError) {
     return null;
   }
-  const isSubmitDisabled = checkSubmitDisabled(isLoading, error, url, queryState, items);
+  const isSubmitDisabled = checkSubmitDisabled(isLoading, isSubmitting, error, url, queryState, items);
   const insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
   const createButton = pluginAction => jsx(Button, {
     testId: testIds.actionButton,
@@ -59,22 +70,32 @@ export const FormFooter = /*#__PURE__*/memo(({
     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/es2019/ui/link-picker/form-footer/utils.js

@@ -1,5 +1,5 @@
 import { normalizeUrl } from '@atlaskit/linking-common/url';
-export const checkSubmitDisabled = (isLoading, error, url, queryState, items) => {
+export const 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 const checkSubmitDisabled = (isLoading, error, url, queryState, items) =>
    * 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/es2019/ui/link-picker/index.js

@@ -83,7 +83,8 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   displayText: initDisplayText,
   hideDisplayText,
   featureFlags,
-  customMessages
+  customMessages,
+  isSubmitting = false
 }) => {
   const {
     createAnalyticsEvent
@@ -127,6 +128,11 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     }
   }, [onContentResize, items, isLoadingResults, isActivePlugin, tabs]);
   const handleChangeUrl = useCallback(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({
@@ -134,7 +140,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
       // If the last action was changing tabs, make sure we're now allowing recents to be hidden
       preventHidingRecents: false
     });
-  }, [dispatch, trackAttribute]);
+  }, [dispatch, trackAttribute, isSubmitting]);
   const handleChangeText = useCallback(e => {
     dispatch({
       displayText: e.currentTarget.value
@@ -148,9 +154,13 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     });
   }, [dispatch]);
   const handleUrlClear = useCallback(() => {
+    if (isSubmitting) {
+      // Prevent clearing url while submitting
+      return;
+    }
     trackAttribute('linkFieldContentInputSource', null);
     handleClear('url');
-  }, [trackAttribute, handleClear]);
+  }, [trackAttribute, handleClear, isSubmitting]);
   const handleInsert = useCallback((url, title, inputType) => {
     const event = createAnalyticsEvent(createEventPayload('ui.form.submitted.linkPicker', {}));
 
@@ -177,6 +187,10 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     }, consumerEvent);
   }, [displayText, onSubmit, state.url, createAnalyticsEvent, getAttributes]);
   const handleSelected = useCallback(objectId => {
+    if (isSubmitting) {
+      // Prevent changing selection while submitting
+      return;
+    }
     const selectedItem = items === null || items === void 0 ? void 0 : items.find(item => item.objectId === objectId);
     if (selectedItem) {
       const {
@@ -192,9 +206,13 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
       trackAttribute('linkFieldContentInputSource', getDataSource(selectedItem, activePlugin));
       handleInsert(url, name, 'typeAhead');
     }
-  }, [handleInsert, trackAttribute, items, activePlugin]);
+  }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
   const handleSubmit = useCallback(event => {
     event === null || event === void 0 ? void 0 : event.preventDefault();
+    if (isSubmitting) {
+      // Prevent submit while submitting
+      return;
+    }
     if (isSelectedItem && selectedItem) {
       return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
@@ -205,7 +223,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     return dispatch({
       invalidUrl: true
     });
-  }, [dispatch, handleInsert, isSelectedItem, selectedItem, url]);
+  }, [dispatch, handleInsert, isSelectedItem, selectedItem, url, isSubmitting]);
   const handleTabChange = useCallback(activeTab => {
     var _plugins$activeTab$ta, _plugins$activeTab;
     dispatch({
@@ -221,6 +239,10 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     trackAttribute('tab', (_plugins$activeTab$ta = plugins === null || plugins === void 0 ? 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]);
   const handleSearchListOnChange = id => {
+    if (isSubmitting) {
+      // Prevent changing item while submitting
+      return;
+    }
     const index = items === null || items === void 0 ? void 0 : items.findIndex(item => item.objectId === id);
     if (typeof index === 'number') {
       const item = items === null || items === void 0 ? void 0 : items[index];
@@ -283,8 +305,11 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   const 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,
@@ -307,6 +332,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     "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,
@@ -320,6 +346,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     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, {
@@ -328,6 +355,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     activePlugin: activePlugin,
     isLoadingResults: isLoadingResults,
     isLoadingPlugins: isLoadingPlugins,
+    isSubmitting: isSubmitting,
     linkSearchListId: linkSearchListId,
     error: error,
     featureFlags: featureFlags,
@@ -345,6 +373,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     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,