@atlaskit/link-picker 4.2.9 → 4.2.10

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/link-picker
 
+## 4.2.10
+
+### Patch Changes
+
+- [`0f1cfed063364`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0f1cfed063364) -
+  NAVX-3742 Refactoring link picker helper message for text fields to be read by screen readers for
+  a11y
+
 ## 4.2.9
 
 ### Patch Changes

package/dist/cjs/services/use-plugins/index.js

@@ -17,7 +17,7 @@ var _constants = require("../../common/constants");
 var _analytics2 = _interopRequireDefault(require("../../common/utils/analytics/analytics.codegen"));
 var _reducer = require("./reducer");
 var _utils = require("./utils");
-function usePlugins(state, activeTab, plugins, recentSearchListSize) {
+function usePlugins(state, activeTab, plugins, recentSearchListSize, alwaysShowTabs) {
   var _activePlugin$tabKey;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
@@ -114,7 +114,7 @@ function usePlugins(state, activeTab, plugins, recentSearchListSize) {
     return cancel;
   }, [activePlugin, state, retries, createAnalyticsEvent, dispatch, recentSearchListSize]);
   var tabs = (0, _react.useMemo)(function () {
-    if (!plugins || plugins.length <= 1) {
+    if (!plugins || !alwaysShowTabs && plugins.length <= 1) {
       return [];
     }
     return plugins.filter(function (plugin) {
@@ -124,7 +124,7 @@ function usePlugins(state, activeTab, plugins, recentSearchListSize) {
         tabTitle: plugin.tabTitle
       };
     });
-  }, [plugins]);
+  }, [plugins, alwaysShowTabs]);
   var handleRetry = (0, _react.useCallback)(function () {
     setRetries(function (prev) {
       return ++prev;

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

@@ -23,6 +23,7 @@ var _form = require("@atlaskit/form");
 var _linkProvider = require("@atlaskit/link-provider");
 var _url2 = require("@atlaskit/linking-common/url");
 var _userAgent = require("@atlaskit/linking-common/user-agent");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
 var _colors = require("@atlaskit/theme/colors");
@@ -56,8 +57,7 @@ var testIds = exports.testIds = _objectSpread(_objectSpread(_objectSpread({
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
-  textInputField: 'link-text',
-  linkHelperText: 'link-helper-text'
+  textInputField: 'link-text'
 }, _searchResults.testIds), _formFooter.testIds), _textInput.testIds);
 var initState = {
   url: '',
@@ -97,6 +97,7 @@ var LinkInputField = (0, _analytics.withInputFieldTracking)(_textInput.TextInput
 var DisplayTextInputField = (0, _analytics.withInputFieldTracking)(_textInput.TextInput, 'displayText');
 var client = new _linkProvider.CardClient();
 var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsContext)( /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var _customMessages$linkH;
   var onSubmit = _ref.onSubmit,
     onCancel = _ref.onCancel,
     onContentResize = _ref.onContentResize,
@@ -120,7 +121,8 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     _ref$submitOnInputCha = _ref.submitOnInputChange,
     submitOnInputChange = _ref$submitOnInputCha === void 0 ? false : _ref$submitOnInputCha,
     recentSearchListSize = _ref.recentSearchListSize,
-    shouldRenderNoResultsImage = _ref.shouldRenderNoResultsImage;
+    shouldRenderNoResultsImage = _ref.shouldRenderNoResultsImage,
+    alwaysShowTabs = _ref.alwaysShowTabs;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useReducer = (0, _react.useReducer)(reducer, _objectSpread(_objectSpread({}, initState), {}, {
@@ -139,7 +141,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     hasPreview = state.hasPreview;
   var intl = (0, _reactIntlNext.useIntl)();
   var queryState = (0, _useSearchQuery.useSearchQuery)(state);
-  var _usePlugins = (0, _usePlugins2.usePlugins)(queryState, activeTab, plugins, recentSearchListSize),
+  var _usePlugins = (0, _usePlugins2.usePlugins)(queryState, activeTab, plugins, recentSearchListSize, alwaysShowTabs),
     items = _usePlugins.items,
     isLoadingResults = _usePlugins.isLoading,
     isActivePlugin = _usePlugins.isActivePlugin,
@@ -461,7 +463,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     onChange: handleChangeUrl,
     inputRef: inputRef,
     isRequired: true
-  })), !hideDisplayText && /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(DisplayTextInputField, {
+  })), !hideDisplayText && /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(DisplayTextInputField, (0, _extends2.default)({
     autoComplete: "off",
     name: "displayText",
     testId: testIds.textInputField,
@@ -472,7 +474,9 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     readOnly: isSubmitting,
     onClear: handleClear,
     onChange: handleChangeText
-  }), /*#__PURE__*/React.createElement(_form.HelperMessage, {
+  }, (0, _platformFeatureFlags.fg)('navx-3742-refactoring-link-picker-helper-text-a11y') ? {
+    helperMessage: intl.formatMessage((_customMessages$linkH = customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkHelperTextLabel) !== null && _customMessages$linkH !== void 0 ? _customMessages$linkH : _messages.linkTextMessages.linkHelperTextLabel)
+  } : {})), !(0, _platformFeatureFlags.fg)('navx-3742-refactoring-link-picker-helper-text-a11y') && /*#__PURE__*/React.createElement(_form.HelperMessage, {
     testId: testIds.linkHelperText
   }, customMessages !== null && customMessages !== void 0 && customMessages.linkHelperTextLabel ? intl.formatMessage(customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkHelperTextLabel) : intl.formatMessage(_messages.linkTextMessages.linkHelperTextLabel))), moveSubmitButton && /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.fullWidthSubmitButton

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

@@ -15,12 +15,13 @@ var _react = _interopRequireWildcard(require("react"));
 var _useCallbackRef = require("use-callback-ref");
 var _form = require("@atlaskit/form");
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _conditionalSpotlightTargetWrapper = require("./conditional-spotlight-target-wrapper");
 var _utils = require("./utils");
-var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName", "inputRef", "isRequired"];
+var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName", "inputRef", "isRequired", "helperMessage"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   clearTextButton: "_19itglyw _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _2hwx1b66 _bfhksm61 _s7n4nkob",
@@ -42,7 +43,8 @@ var RequiredAsterisk = function RequiredAsterisk() {
 };
 var testIds = exports.testIds = {
   urlError: 'link-error',
-  clearUrlButton: 'clear-text'
+  clearUrlButton: 'clear-text',
+  linkHelperText: 'link-helper-text'
 };
 var TextInput = exports.TextInput = function TextInput(_ref) {
   var name = _ref.name,
@@ -58,6 +60,7 @@ var TextInput = exports.TextInput = function TextInput(_ref) {
     inputRefProp = _ref.inputRef,
     _ref$isRequired = _ref.isRequired,
     isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    helperMessage = _ref.helperMessage,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var inputRef = (0, _react.useRef)(null);
   var handleRef = (0, _react.useCallback)(function (input) {
@@ -120,8 +123,10 @@ var TextInput = exports.TextInput = function TextInput(_ref) {
       ref: textfieldRef,
       elemAfterInput: clearText,
       isInvalid: !!error,
-      "aria-describedby": "".concat(restProps['aria-describedby'], " ").concat(fieldProps.id, "-error")
-    })), error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
+      "aria-describedby": "".concat(restProps['aria-describedby'], " ").concat(fieldProps.id, "-error ").concat((0, _platformFeatureFlags.fg)('navx-3742-refactoring-link-picker-helper-text-a11y') ? "".concat(fieldProps.id, "-helper") : '')
+    })), helperMessage && (0, _platformFeatureFlags.fg)('navx-3742-refactoring-link-picker-helper-text-a11y') && /*#__PURE__*/_react.default.createElement(_form.HelperMessage, {
+      testId: testIds.linkHelperText
+    }, helperMessage), error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
       testId: testIds.urlError
     }, error)));
   }));

package/dist/cjs/ui/main.js

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

package/dist/es2019/services/use-plugins/index.js

@@ -7,7 +7,7 @@ import { ANALYTICS_CHANNEL, RECENT_SEARCH_LIST_SIZE } from '../../common/constan
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
 import { usePluginReducer } from './reducer';
 import { CancellationError, resolvePluginUpdates } from './utils';
-export function usePlugins(state, activeTab, plugins, recentSearchListSize) {
+export function usePlugins(state, activeTab, plugins, recentSearchListSize, alwaysShowTabs) {
   var _activePlugin$tabKey;
   const {
     createAnalyticsEvent
@@ -76,13 +76,13 @@ export function usePlugins(state, activeTab, plugins, recentSearchListSize) {
     return cancel;
   }, [activePlugin, state, retries, createAnalyticsEvent, dispatch, recentSearchListSize]);
   const tabs = useMemo(() => {
-    if (!plugins || plugins.length <= 1) {
+    if (!plugins || !alwaysShowTabs && plugins.length <= 1) {
       return [];
     }
     return plugins.filter(plugin => !!plugin.tabTitle).map(plugin => ({
       tabTitle: plugin.tabTitle
     }));
-  }, [plugins]);
+  }, [plugins, alwaysShowTabs]);
   const handleRetry = useCallback(() => {
     setRetries(prev => ++prev);
   }, []);

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

@@ -12,6 +12,7 @@ import { HelperMessage } from '@atlaskit/form';
 import { CardClient } from '@atlaskit/link-provider';
 import { isSafeUrl, normalizeUrl } from '@atlaskit/linking-common/url';
 import { browser } from '@atlaskit/linking-common/user-agent';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { N700 } from '@atlaskit/theme/colors';
@@ -43,7 +44,6 @@ export const testIds = {
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
   textInputField: 'link-text',
-  linkHelperText: 'link-helper-text',
   ...searchTestIds,
   ...formFooterTestIds,
   ...textFieldTestIds
@@ -108,8 +108,10 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   additionalError,
   submitOnInputChange = false,
   recentSearchListSize,
-  shouldRenderNoResultsImage
+  shouldRenderNoResultsImage,
+  alwaysShowTabs
 }) => {
+  var _customMessages$linkH;
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
@@ -138,7 +140,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     error,
     retry,
     pluginAction
-  } = usePlugins(queryState, activeTab, plugins, recentSearchListSize);
+  } = usePlugins(queryState, activeTab, plugins, recentSearchListSize, alwaysShowTabs);
   const isEditing = !!initUrl;
   const selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   const isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
@@ -266,7 +268,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
               hasPreview: false
             });
           }
-        } catch (error) {
+        } catch {
           return dispatch({
             invalidUrl: true
           });
@@ -416,7 +418,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     onChange: handleChangeUrl,
     inputRef: inputRef,
     isRequired: true
-  })), !hideDisplayText && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DisplayTextInputField, {
+  })), !hideDisplayText && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DisplayTextInputField, _extends({
     autoComplete: "off",
     name: "displayText",
     testId: testIds.textInputField,
@@ -427,7 +429,9 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     readOnly: isSubmitting,
     onClear: handleClear,
     onChange: handleChangeText
-  }), /*#__PURE__*/React.createElement(HelperMessage, {
+  }, fg('navx-3742-refactoring-link-picker-helper-text-a11y') ? {
+    helperMessage: intl.formatMessage((_customMessages$linkH = customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkHelperTextLabel) !== null && _customMessages$linkH !== void 0 ? _customMessages$linkH : linkTextMessages.linkHelperTextLabel)
+  } : {})), !fg('navx-3742-refactoring-link-picker-helper-text-a11y') && /*#__PURE__*/React.createElement(HelperMessage, {
     testId: testIds.linkHelperText
   }, customMessages !== null && customMessages !== void 0 && customMessages.linkHelperTextLabel ? intl.formatMessage(customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkHelperTextLabel) : intl.formatMessage(linkTextMessages.linkHelperTextLabel))), moveSubmitButton && /*#__PURE__*/React.createElement(Box, {
     xcss: styles.fullWidthSubmitButton

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

@@ -4,8 +4,9 @@ import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { Fragment, useCallback, useMemo, useRef } from 'react';
 import { useMergeRefs } from 'use-callback-ref';
-import { ErrorMessage, Field } from '@atlaskit/form';
+import { ErrorMessage, Field, HelperMessage } from '@atlaskit/form';
 import Selectclear from '@atlaskit/icon/core/cross-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Pressable } from '@atlaskit/primitives/compiled';
 import Textfield from '@atlaskit/textfield';
 import Tooltip from '@atlaskit/tooltip';
@@ -31,7 +32,8 @@ const RequiredAsterisk = () => {
 };
 export const testIds = {
   urlError: 'link-error',
-  clearUrlButton: 'clear-text'
+  clearUrlButton: 'clear-text',
+  linkHelperText: 'link-helper-text'
 };
 export const TextInput = ({
   name,
@@ -46,6 +48,7 @@ export const TextInput = ({
   spotlightTargetName,
   inputRef: inputRefProp,
   isRequired = false,
+  helperMessage,
   ...restProps
 }) => {
   const inputRef = useRef(null);
@@ -108,8 +111,10 @@ export const TextInput = ({
       ref: textfieldRef,
       elemAfterInput: clearText,
       isInvalid: !!error,
-      "aria-describedby": `${restProps['aria-describedby']} ${fieldProps.id}-error`
-    })), error && /*#__PURE__*/React.createElement(ErrorMessage, {
+      "aria-describedby": `${restProps['aria-describedby']} ${fieldProps.id}-error ${fg('navx-3742-refactoring-link-picker-helper-text-a11y') ? `${fieldProps.id}-helper` : ''}`
+    })), helperMessage && fg('navx-3742-refactoring-link-picker-helper-text-a11y') && /*#__PURE__*/React.createElement(HelperMessage, {
+      testId: testIds.linkHelperText
+    }, helperMessage), error && /*#__PURE__*/React.createElement(ErrorMessage, {
       testId: testIds.urlError
     }, error)));
   }));

package/dist/es2019/ui/main.js

@@ -15,7 +15,7 @@ export const testIds = {
 };
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "4.2.9" || '',
+  packageVersion: "0.0.0-development" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

package/dist/esm/services/use-plugins/index.js

@@ -10,7 +10,7 @@ import { ANALYTICS_CHANNEL, RECENT_SEARCH_LIST_SIZE } from '../../common/constan
 import createEventPayload from '../../common/utils/analytics/analytics.codegen';
 import { usePluginReducer } from './reducer';
 import { CancellationError, resolvePluginUpdates } from './utils';
-export function usePlugins(state, activeTab, plugins, recentSearchListSize) {
+export function usePlugins(state, activeTab, plugins, recentSearchListSize, alwaysShowTabs) {
   var _activePlugin$tabKey;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
@@ -107,7 +107,7 @@ export function usePlugins(state, activeTab, plugins, recentSearchListSize) {
     return cancel;
   }, [activePlugin, state, retries, createAnalyticsEvent, dispatch, recentSearchListSize]);
   var tabs = useMemo(function () {
-    if (!plugins || plugins.length <= 1) {
+    if (!plugins || !alwaysShowTabs && plugins.length <= 1) {
       return [];
     }
     return plugins.filter(function (plugin) {
@@ -117,7 +117,7 @@ export function usePlugins(state, activeTab, plugins, recentSearchListSize) {
         tabTitle: plugin.tabTitle
       };
     });
-  }, [plugins]);
+  }, [plugins, alwaysShowTabs]);
   var handleRetry = useCallback(function () {
     setRetries(function (prev) {
       return ++prev;

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

@@ -18,6 +18,7 @@ import { HelperMessage } from '@atlaskit/form';
 import { CardClient } from '@atlaskit/link-provider';
 import { isSafeUrl, normalizeUrl } from '@atlaskit/linking-common/url';
 import { browser } from '@atlaskit/linking-common/user-agent';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { N700 } from '@atlaskit/theme/colors';
@@ -48,8 +49,7 @@ export var testIds = _objectSpread(_objectSpread(_objectSpread({
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
-  textInputField: 'link-text',
-  linkHelperText: 'link-helper-text'
+  textInputField: 'link-text'
 }, searchTestIds), formFooterTestIds), textFieldTestIds);
 var initState = {
   url: '',
@@ -89,6 +89,7 @@ var LinkInputField = withInputFieldTracking(TextInput, 'link', function (event,
 var DisplayTextInputField = withInputFieldTracking(TextInput, 'displayText');
 var client = new CardClient();
 export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(function (_ref) {
+  var _customMessages$linkH;
   var onSubmit = _ref.onSubmit,
     onCancel = _ref.onCancel,
     onContentResize = _ref.onContentResize,
@@ -112,7 +113,8 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     _ref$submitOnInputCha = _ref.submitOnInputChange,
     submitOnInputChange = _ref$submitOnInputCha === void 0 ? false : _ref$submitOnInputCha,
     recentSearchListSize = _ref.recentSearchListSize,
-    shouldRenderNoResultsImage = _ref.shouldRenderNoResultsImage;
+    shouldRenderNoResultsImage = _ref.shouldRenderNoResultsImage,
+    alwaysShowTabs = _ref.alwaysShowTabs;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useReducer = useReducer(reducer, _objectSpread(_objectSpread({}, initState), {}, {
@@ -131,7 +133,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     hasPreview = state.hasPreview;
   var intl = useIntl();
   var queryState = useSearchQuery(state);
-  var _usePlugins = usePlugins(queryState, activeTab, plugins, recentSearchListSize),
+  var _usePlugins = usePlugins(queryState, activeTab, plugins, recentSearchListSize, alwaysShowTabs),
     items = _usePlugins.items,
     isLoadingResults = _usePlugins.isLoading,
     isActivePlugin = _usePlugins.isActivePlugin,
@@ -453,7 +455,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     onChange: handleChangeUrl,
     inputRef: inputRef,
     isRequired: true
-  })), !hideDisplayText && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DisplayTextInputField, {
+  })), !hideDisplayText && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DisplayTextInputField, _extends({
     autoComplete: "off",
     name: "displayText",
     testId: testIds.textInputField,
@@ -464,7 +466,9 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     readOnly: isSubmitting,
     onClear: handleClear,
     onChange: handleChangeText
-  }), /*#__PURE__*/React.createElement(HelperMessage, {
+  }, fg('navx-3742-refactoring-link-picker-helper-text-a11y') ? {
+    helperMessage: intl.formatMessage((_customMessages$linkH = customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkHelperTextLabel) !== null && _customMessages$linkH !== void 0 ? _customMessages$linkH : linkTextMessages.linkHelperTextLabel)
+  } : {})), !fg('navx-3742-refactoring-link-picker-helper-text-a11y') && /*#__PURE__*/React.createElement(HelperMessage, {
     testId: testIds.linkHelperText
   }, customMessages !== null && customMessages !== void 0 && customMessages.linkHelperTextLabel ? intl.formatMessage(customMessages === null || customMessages === void 0 ? void 0 : customMessages.linkHelperTextLabel) : intl.formatMessage(linkTextMessages.linkHelperTextLabel))), moveSubmitButton && /*#__PURE__*/React.createElement(Box, {
     xcss: styles.fullWidthSubmitButton

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

@@ -1,13 +1,14 @@
 /* index.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName", "inputRef", "isRequired"];
+var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error", "spotlightTargetName", "inputRef", "isRequired", "helperMessage"];
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { Fragment, useCallback, useMemo, useRef } from 'react';
 import { useMergeRefs } from 'use-callback-ref';
-import { ErrorMessage, Field } from '@atlaskit/form';
+import { ErrorMessage, Field, HelperMessage } from '@atlaskit/form';
 import Selectclear from '@atlaskit/icon/core/cross-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Pressable } from '@atlaskit/primitives/compiled';
 import Textfield from '@atlaskit/textfield';
 import Tooltip from '@atlaskit/tooltip';
@@ -33,7 +34,8 @@ var RequiredAsterisk = function RequiredAsterisk() {
 };
 export var testIds = {
   urlError: 'link-error',
-  clearUrlButton: 'clear-text'
+  clearUrlButton: 'clear-text',
+  linkHelperText: 'link-helper-text'
 };
 export var TextInput = function TextInput(_ref) {
   var name = _ref.name,
@@ -49,6 +51,7 @@ export var TextInput = function TextInput(_ref) {
     inputRefProp = _ref.inputRef,
     _ref$isRequired = _ref.isRequired,
     isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    helperMessage = _ref.helperMessage,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var inputRef = useRef(null);
   var handleRef = useCallback(function (input) {
@@ -111,8 +114,10 @@ export var TextInput = function TextInput(_ref) {
       ref: textfieldRef,
       elemAfterInput: clearText,
       isInvalid: !!error,
-      "aria-describedby": "".concat(restProps['aria-describedby'], " ").concat(fieldProps.id, "-error")
-    })), error && /*#__PURE__*/React.createElement(ErrorMessage, {
+      "aria-describedby": "".concat(restProps['aria-describedby'], " ").concat(fieldProps.id, "-error ").concat(fg('navx-3742-refactoring-link-picker-helper-text-a11y') ? "".concat(fieldProps.id, "-helper") : '')
+    })), helperMessage && fg('navx-3742-refactoring-link-picker-helper-text-a11y') && /*#__PURE__*/React.createElement(HelperMessage, {
+      testId: testIds.linkHelperText
+    }, helperMessage), error && /*#__PURE__*/React.createElement(ErrorMessage, {
       testId: testIds.urlError
     }, error)));
   }));

package/dist/esm/ui/main.js

@@ -16,7 +16,7 @@ export var testIds = {
 };
 export var PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "4.2.9" || '',
+  packageVersion: "0.0.0-development" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

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

@@ -174,6 +174,8 @@ export interface LinkPickerProps {
     recentSearchListSize?: number;
     /** Controls showing the image in the no results state */
     shouldRenderNoResultsImage?: boolean;
+    /** When true, tabs are displayed even if there is only one plugin. */
+    alwaysShowTabs?: boolean;
 }
 type CustomLinkPickerMessages = {
     /** Label for the link input field */

package/dist/types/services/use-plugins/index.d.ts

@@ -12,4 +12,4 @@ export interface LinkPickerPluginsService {
     errorFallback?: LinkPickerPluginErrorFallback;
     pluginAction?: LinkPickerPluginAction;
 }
-export declare function usePlugins(state: LinkPickerState | null, activeTab: number, plugins?: LinkPickerPlugin[], recentSearchListSize?: number): LinkPickerPluginsService;
+export declare function usePlugins(state: LinkPickerState | null, activeTab: number, plugins?: LinkPickerPlugin[], recentSearchListSize?: number, alwaysShowTabs?: boolean): LinkPickerPluginsService;

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

@@ -2,6 +2,7 @@ import type { LinkPickerProps } from '../../common/types';
 export declare const testIds: {
     readonly urlError: string;
     readonly clearUrlButton: string;
+    readonly linkHelperText: string;
     readonly insertButton: "link-picker-insert-button";
     readonly cancelButton: "link-picker-cancel-button";
     readonly actionButton: "link-picker-action-button";
@@ -20,6 +21,5 @@ export declare const testIds: {
     readonly linkPicker: "link-picker";
     readonly urlInputField: "link-url";
     readonly textInputField: "link-text";
-    readonly linkHelperText: "link-helper-text";
 };
 export declare const LinkPicker: import("react").ComponentType<LinkPickerProps>;

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

@@ -16,9 +16,11 @@ export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & Pick<Condi
     error?: React.ReactNode;
     /** Ref to the link picker search input. */
     inputRef?: Ref<HTMLInputElement>;
+    helperMessage?: string;
 };
 export declare const testIds: {
     urlError: string;
     clearUrlButton: string;
+    linkHelperText: string;
 };
-export declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, spotlightTargetName, inputRef: inputRefProp, isRequired, ...restProps }: TextInputProps) => JSX.Element;
+export declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, spotlightTargetName, inputRef: inputRefProp, isRequired, helperMessage, ...restProps }: TextInputProps) => JSX.Element;

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

@@ -177,6 +177,8 @@ export interface LinkPickerProps {
     recentSearchListSize?: number;
     /** Controls showing the image in the no results state */
     shouldRenderNoResultsImage?: boolean;
+    /** When true, tabs are displayed even if there is only one plugin. */
+    alwaysShowTabs?: boolean;
 }
 type CustomLinkPickerMessages = {
     /** Label for the link input field */

package/dist/types-ts4.5/services/use-plugins/index.d.ts

@@ -12,4 +12,4 @@ export interface LinkPickerPluginsService {
     errorFallback?: LinkPickerPluginErrorFallback;
     pluginAction?: LinkPickerPluginAction;
 }
-export declare function usePlugins(state: LinkPickerState | null, activeTab: number, plugins?: LinkPickerPlugin[], recentSearchListSize?: number): LinkPickerPluginsService;
+export declare function usePlugins(state: LinkPickerState | null, activeTab: number, plugins?: LinkPickerPlugin[], recentSearchListSize?: number, alwaysShowTabs?: boolean): LinkPickerPluginsService;

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

@@ -2,6 +2,7 @@ import type { LinkPickerProps } from '../../common/types';
 export declare const testIds: {
     readonly urlError: string;
     readonly clearUrlButton: string;
+    readonly linkHelperText: string;
     readonly insertButton: "link-picker-insert-button";
     readonly cancelButton: "link-picker-cancel-button";
     readonly actionButton: "link-picker-action-button";
@@ -20,6 +21,5 @@ export declare const testIds: {
     readonly linkPicker: "link-picker";
     readonly urlInputField: "link-url";
     readonly textInputField: "link-text";
-    readonly linkHelperText: "link-helper-text";
 };
 export declare const LinkPicker: import("react").ComponentType<LinkPickerProps>;

package/dist/types-ts4.5/ui/link-picker/text-input/index.d.ts

@@ -16,9 +16,11 @@ export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & Pick<Condi
     error?: React.ReactNode;
     /** Ref to the link picker search input. */
     inputRef?: Ref<HTMLInputElement>;
+    helperMessage?: string;
 };
 export declare const testIds: {
     urlError: string;
     clearUrlButton: string;
+    linkHelperText: string;
 };
-export declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, spotlightTargetName, inputRef: inputRefProp, isRequired, ...restProps }: TextInputProps) => JSX.Element;
+export declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, spotlightTargetName, inputRef: inputRefProp, isRequired, helperMessage, ...restProps }: TextInputProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "4.2.9",
+	"version": "4.2.10",
 	"description": "Standalone link picker",
 	"author": "Atlassian Pty Ltd",
 	"publishConfig": {
@@ -40,6 +40,9 @@
 		},
 		"navx-3332-update-link-picker-heading-levels": {
 			"type": "boolean"
+		},
+		"navx-3742-refactoring-link-picker-helper-text-a11y": {
+			"type": "boolean"
 		}
 	},
 	"scripts": {