@atlaskit/link-picker 5.2.0 → 5.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-picker
 
+## 5.2.1
+
+### Patch Changes
+
+- [`c7fb2b6201353`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c7fb2b6201353) -
+  Wrap ErrorMessage/HelperMessage with MessageWrapper in linking-platform packages to improve
+  assistive technology support. Production code changes (link-datasource, link-picker, smart-card
+  source files) are gated behind feature flag `platform_navx_3298_message_wrapper`. The example file
+  `load-link-form.tsx` applies MessageWrapper unconditionally, as example files do not ship to
+  production and are not subject to feature-gating requirements.
+- Updated dependencies
+
 ## 5.2.0
 
 ### Minor Changes

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

@@ -15,6 +15,7 @@ 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"));
@@ -123,10 +124,14 @@ var TextInput = exports.TextInput = function TextInput(_ref) {
       elemAfterInput: clearText,
       isInvalid: !!error,
       "aria-describedby": "".concat(restProps['aria-describedby'], " ").concat(fieldProps.id, "-error ").concat(fieldProps.id, "-helper")
-    })), helperMessage && /*#__PURE__*/_react.default.createElement(_form.HelperMessage, {
+    })), (0, _platformFeatureFlags.fg)('platform_navx_3298_message_wrapper') ? /*#__PURE__*/_react.default.createElement(_form.MessageWrapper, null, helperMessage && /*#__PURE__*/_react.default.createElement(_form.HelperMessage, {
       testId: testIds.linkHelperText
     }, helperMessage), error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
       testId: testIds.urlError
-    }, error)));
+    }, error)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, helperMessage && /*#__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

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

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, HelperMessage } from '@atlaskit/form';
-import Selectclear from '@atlaskit/icon/core/cross-circle';
+import { ErrorMessage, Field, HelperMessage, MessageWrapper } from '@atlaskit/form';
+import CrossCircleIcon 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';
@@ -89,7 +90,7 @@ export const TextInput = ({
     xcss: styles.clearTextButton,
     onClick: handleClear,
     testId: testIds.clearUrlButton
-  }, /*#__PURE__*/React.createElement(Selectclear, {
+  }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
     label: clearLabel || '',
     color: "var(--ds-icon-subtle, #505258)",
     spacing: "spacious"
@@ -111,10 +112,14 @@ export const TextInput = ({
       elemAfterInput: clearText,
       isInvalid: !!error,
       "aria-describedby": `${restProps['aria-describedby']} ${fieldProps.id}-error ${fieldProps.id}-helper`
-    })), helperMessage && /*#__PURE__*/React.createElement(HelperMessage, {
+    })), fg('platform_navx_3298_message_wrapper') ? /*#__PURE__*/React.createElement(MessageWrapper, null, helperMessage && /*#__PURE__*/React.createElement(HelperMessage, {
       testId: testIds.linkHelperText
     }, helperMessage), error && /*#__PURE__*/React.createElement(ErrorMessage, {
       testId: testIds.urlError
-    }, error)));
+    }, error)) : /*#__PURE__*/React.createElement(React.Fragment, null, helperMessage && /*#__PURE__*/React.createElement(HelperMessage, {
+      testId: testIds.linkHelperText
+    }, helperMessage), error && /*#__PURE__*/React.createElement(ErrorMessage, {
+      testId: testIds.urlError
+    }, error))));
   }));
 };

package/dist/es2019/ui/main.js

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

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

@@ -6,8 +6,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, HelperMessage } from '@atlaskit/form';
-import Selectclear from '@atlaskit/icon/core/cross-circle';
+import { ErrorMessage, Field, HelperMessage, MessageWrapper } from '@atlaskit/form';
+import CrossCircleIcon 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';
@@ -93,7 +94,7 @@ export var TextInput = function TextInput(_ref) {
     xcss: styles.clearTextButton,
     onClick: handleClear,
     testId: testIds.clearUrlButton
-  }, /*#__PURE__*/React.createElement(Selectclear, {
+  }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
     label: clearLabel || '',
     color: "var(--ds-icon-subtle, #505258)",
     spacing: "spacious"
@@ -114,10 +115,14 @@ export var TextInput = function TextInput(_ref) {
       elemAfterInput: clearText,
       isInvalid: !!error,
       "aria-describedby": "".concat(restProps['aria-describedby'], " ").concat(fieldProps.id, "-error ").concat(fieldProps.id, "-helper")
-    })), helperMessage && /*#__PURE__*/React.createElement(HelperMessage, {
+    })), fg('platform_navx_3298_message_wrapper') ? /*#__PURE__*/React.createElement(MessageWrapper, null, helperMessage && /*#__PURE__*/React.createElement(HelperMessage, {
       testId: testIds.linkHelperText
     }, helperMessage), error && /*#__PURE__*/React.createElement(ErrorMessage, {
       testId: testIds.urlError
-    }, error)));
+    }, error)) : /*#__PURE__*/React.createElement(React.Fragment, null, helperMessage && /*#__PURE__*/React.createElement(HelperMessage, {
+      testId: testIds.linkHelperText
+    }, helperMessage), error && /*#__PURE__*/React.createElement(ErrorMessage, {
+      testId: testIds.urlError
+    }, error))));
   }));
 };

package/dist/esm/ui/main.js

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

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

@@ -1,6 +1,7 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag React.Fragment
  */
 import React, { type Ref } from 'react';
 import { type TextFieldProps } from '@atlaskit/textfield';
@@ -9,8 +10,8 @@ export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & Pick<Condi
     name: string;
     value: string;
     label?: string;
-    onUndo?: Function;
-    onRedo?: Function;
+    onUndo?: () => void;
+    onRedo?: () => void;
     onClear?: (name: string) => void;
     clearLabel?: string;
     error?: React.ReactNode;

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

@@ -1,6 +1,7 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag React.Fragment
  */
 import React, { type Ref } from 'react';
 import { type TextFieldProps } from '@atlaskit/textfield';
@@ -9,8 +10,8 @@ export type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & Pick<Condi
     name: string;
     value: string;
     label?: string;
-    onUndo?: Function;
-    onRedo?: Function;
+    onUndo?: () => void;
+    onRedo?: () => void;
     onClear?: (name: string) => void;
     clearLabel?: string;
     error?: React.ReactNode;

package/link-picker.docs.tsx

@@ -5,71 +5,73 @@
 
 import path from 'path';
 
-import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
 
 import packageJson from './package.json';
 
 const packagePath = path.resolve(__dirname);
 
-const documentation: ComponentStructuredContentSource[] = [
-	{
-		name: 'LinkPicker',
-		description:
-			'Standalone link picker UI that lets users search and select links to insert. Supports plugins for different data sources (recents, search, Jira, Confluence, etc.) and can be used in modals, popups, or inline.',
-		status: 'general-availability',
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'LinkPicker',
-			package: '@atlaskit/link-picker',
-			type: 'named',
-			packagePath,
-			packageJson,
-		},
-		usageGuidelines: [
-			'Use when the user needs to choose a link to insert (e.g. in an editor, form, or toolbar). Add plugins to define tabs and data sources; use SmartCardProvider above the picker so selected links resolve correctly.',
-		],
-		contentGuidelines: [],
-		accessibilityGuidelines: [
-			'Ensure the picker is focusable and has an accessible name (e.g. "Insert link"). Provide a keyboard-accessible way to open and close; ensure search and results are announced to screen readers.',
-		],
-		keywords: ['link-picker', 'link', 'picker', 'search', 'insert link', 'plugins'],
-		categories: ['linking', 'interaction', 'forms'],
-		examples: [
-			{
-				name: 'Link Picker (basic)',
-				description:
-					'Basic LinkPicker with URL input and submit. Requires plugins for search results.',
-				source: path.resolve(packagePath, './examples/00-basic.tsx'),
-			},
-			{
-				name: 'Link Picker (without plugins)',
-				description: 'LinkPicker without plugins — manual URL entry only.',
-				source: path.resolve(packagePath, './examples/20-without-plugins.tsx'),
+			description:
+				'Standalone link picker UI that lets users search and select links to insert. Supports plugins for different data sources (recents, search, Jira, Confluence, etc.) and can be used in modals, popups, or inline.',
+			status: 'general-availability',
+			import: {
+				name: 'LinkPicker',
+				package: '@atlaskit/link-picker',
+				type: 'named',
+				packagePath,
+				packageJson,
 			},
-		],
-	},
-	// Needs examples
-	// {
-	// 	name: 'LoaderFallback',
-	// 	description: 'Fallback UI shown while the LinkPicker (or its lazy-loaded parts) are loading.',
-	// 	status: 'general-availability',
-	// 	import: {
-	// 		name: 'LoaderFallback',
-	// 		package: '@atlaskit/link-picker',
-	// 		type: 'named',
-	// 		packagePath,
-	// 		packageJson,
-	// 	},
-	// 	usageGuidelines: [
-	// 		'Use when rendering LinkPicker lazily (e.g. via react-loosely-lazy) to show a consistent loading state until the picker is ready.',
-	// 	],
-	// 	contentGuidelines: [],
-	// 	accessibilityGuidelines: [
-	// 		'Ensure the fallback is announced as loading (e.g. aria-busy or live region) so screen reader users know content is pending.',
-	// 	],
-	// 	keywords: ['link-picker', 'loader', 'fallback', 'lazy'],
-	// 	categories: ['linking', 'interaction'],
-	// 	examples: [],
-	// },
-];
+			usageGuidelines: [
+				'Use when the user needs to choose a link to insert (e.g. in an editor, form, or toolbar). Add plugins to define tabs and data sources; use SmartCardProvider above the picker so selected links resolve correctly.',
+			],
+			contentGuidelines: [],
+			accessibilityGuidelines: [
+				'Ensure the picker is focusable and has an accessible name (e.g. "Insert link"). Provide a keyboard-accessible way to open and close; ensure search and results are announced to screen readers.',
+			],
+			keywords: ['link-picker', 'link', 'picker', 'search', 'insert link', 'plugins'],
+			categories: ['linking', 'interaction', 'forms'],
+			examples: [
+				{
+					name: 'Link Picker (basic)',
+					description:
+						'Basic LinkPicker with URL input and submit. Requires plugins for search results.',
+					source: path.resolve(packagePath, './examples/00-basic.tsx'),
+				},
+				{
+					name: 'Link Picker (without plugins)',
+					description: 'LinkPicker without plugins — manual URL entry only.',
+					source: path.resolve(packagePath, './examples/20-without-plugins.tsx'),
+				},
+			],
+		},
+		// Needs examples
+		// {
+		// 	name: 'LoaderFallback',
+		// 	description: 'Fallback UI shown while the LinkPicker (or its lazy-loaded parts) are loading.',
+		// 	status: 'general-availability',
+		// 	import: {
+		// 		name: 'LoaderFallback',
+		// 		package: '@atlaskit/link-picker',
+		// 		type: 'named',
+		// 		packagePath,
+		// 		packageJson,
+		// 	},
+		// 	usageGuidelines: [
+		// 		'Use when rendering LinkPicker lazily (e.g. via react-loosely-lazy) to show a consistent loading state until the picker is ready.',
+		// 	],
+		// 	contentGuidelines: [],
+		// 	accessibilityGuidelines: [
+		// 		'Ensure the fallback is announced as loading (e.g. aria-busy or live region) so screen reader users know content is pending.',
+		// 	],
+		// 	keywords: ['link-picker', 'loader', 'fallback', 'lazy'],
+		// 	categories: ['linking', 'interaction'],
+		// 	examples: [],
+		// },
+	],
+};
 
 export default documentation;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "5.2.0",
+	"version": "5.2.1",
 	"description": "Standalone link picker",
 	"author": "Atlassian Pty Ltd",
 	"publishConfig": {
@@ -39,6 +39,9 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"platform-feature-flags": {
+		"platform_navx_3298_message_wrapper": {
+			"type": "boolean"
+		},
 		"aifc_create_enabled": {
 			"type": "boolean"
 		}
@@ -55,20 +58,20 @@
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/frontend-utilities": "^3.3.0",
 		"@atlaskit/heading": "^5.4.0",
-		"@atlaskit/icon": "^35.0.0",
+		"@atlaskit/icon": "^35.1.0",
 		"@atlaskit/intl-messages-provider": "^3.3.0",
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/link-provider": "^4.4.0",
 		"@atlaskit/linking-common": "^9.11.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/smart-card": "^44.13.0",
+		"@atlaskit/smart-card": "^44.16.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/spotlight": "^0.14.0",
 		"@atlaskit/tabs": "^19.1.0",
 		"@atlaskit/textfield": "^8.3.0",
 		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/tooltip": "^22.2.0",
+		"@atlaskit/tooltip": "^22.3.0",
 		"@atlaskit/ufo": "^0.5.0",
 		"@atlaskit/visually-hidden": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -89,7 +92,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/dropdown-menu": "^16.9.0",
-		"@atlaskit/link-test-helpers": "^10.2.0",
+		"@atlaskit/link-test-helpers": "^10.3.0",
 		"@atlassian/a11y-jest-testing": "^0.11.0",
 		"@atlassian/a11y-playwright-testing": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
@@ -105,6 +108,7 @@
 		"mockdate": "^3.0.5",
 		"node-fetch": "^2.6.7",
 		"prettier": "^3.2.5",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^6.6.2",
 		"sinon": "^2.2.0"