@atlaskit/form 12.5.3 → 12.6.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/form
 
+## 12.6.0
+
+### Minor Changes
+
+- [`27fa43b33e35e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/27fa43b33e35e) -
+  Add optional testId prop that applies a data-testid attribute to the underlying form element
+
+## 12.5.4
+
+### Patch Changes
+
+- [`281cc603f5925`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/281cc603f5925) -
+  Improve typing within checkbox field
+
 ## 12.5.3
 
 ### Patch Changes

package/codemods/__tests__/migrate-data-testid-to-testid-prop.test.tsx

@@ -0,0 +1,607 @@
+jest.autoMockOff();
+
+import transformer from '../migrate-data-testid-to-testid-prop';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+// Test: No transformation when no @atlaskit/form import
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import React from 'react';
+
+const MyComponent = () => (
+	<form data-testid="should-not-change">
+		<input type="text" />
+	</form>
+);`,
+	`import React from 'react';
+
+const MyComponent = () => (
+	<form data-testid="should-not-change">
+		<input type="text" />
+	</form>
+);`,
+	'should not transform if @atlaskit/form import is not present',
+);
+
+// Test: Basic transformation with default import as Form
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<form {...formProps} data-testid="my-form">
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit} testId="my-form">
+		{({ formProps }) => (
+			<form {...formProps}>
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	'should migrate string literal data-testid to testId prop with Form import',
+);
+
+// Test: Basic transformation with renamed default import
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import AkForm from '@atlaskit/form';
+
+const MyComponent = () => (
+	<AkForm onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<form {...formProps} data-testid="my-form">
+				<input type="text" />
+			</form>
+		)}
+	</AkForm>
+);`,
+	`import AkForm from '@atlaskit/form';
+
+const MyComponent = () => (
+	<AkForm onSubmit={handleSubmit} testId="my-form">
+		{({ formProps }) => (
+			<form {...formProps}>
+				<input type="text" />
+			</form>
+		)}
+	</AkForm>
+);`,
+	'should migrate with renamed default import (AkForm)',
+);
+
+// Test: Expression data-testid with variable
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form from '@atlaskit/form';
+
+const testId = 'dynamic-form';
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<form {...formProps} data-testid={testId}>
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	`import Form from '@atlaskit/form';
+
+const testId = 'dynamic-form';
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit} testId={testId}>
+		{({ formProps }) => (
+			<form {...formProps}>
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	'should migrate expression data-testid with variable',
+);
+
+// Test: Expression data-testid with function call
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form from '@atlaskit/form';
+
+const MyComponent = ({ id }) => (
+	<Form onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<form {...formProps} data-testid={getTestId(id)}>
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	`import Form from '@atlaskit/form';
+
+const MyComponent = ({ id }) => (
+	<Form onSubmit={handleSubmit} testId={getTestId(id)}>
+		{({ formProps }) => (
+			<form {...formProps}>
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	'should migrate expression data-testid with function call',
+);
+
+// Test: Multiple attributes on form element
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<form noValidate {...formProps} id="my-form" data-testid="my-form" className="custom-form">
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit} testId="my-form">
+		{({ formProps }) => (
+			<form noValidate {...formProps} id="my-form" className="custom-form">
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	'should migrate data-testid while preserving other attributes',
+);
+
+// Test: Renamed formProps parameter
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		{({ formProps: customProps }) => (
+			<form {...customProps} data-testid="my-form">
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit} testId="my-form">
+		{({ formProps: customProps }) => (
+			<form {...customProps}>
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	'should work with renamed formProps parameter',
+);
+
+// Test: Multiple destructured parameters
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		{({ formProps, submitting, dirty }) => (
+			<form {...formProps} data-testid="my-form">
+				<input type="text" />
+				<button type="submit" disabled={submitting}>
+					{dirty ? 'Save Changes' : 'Submit'}
+				</button>
+			</form>
+		)}
+	</Form>
+);`,
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit} testId="my-form">
+		{({ formProps, submitting, dirty }) => (
+			<form {...formProps}>
+				<input type="text" />
+				<button type="submit" disabled={submitting}>
+					{dirty ? 'Save Changes' : 'Submit'}
+				</button>
+			</form>
+		)}
+	</Form>
+);`,
+	'should work with multiple destructured parameters',
+);
+
+// Test: Nested form within wrapper div
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<div className="form-wrapper">
+				<form {...formProps} data-testid="nested-form">
+					<input type="text" />
+				</form>
+			</div>
+		)}
+	</Form>
+);`,
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit} testId="nested-form">
+		{({ formProps }) => (
+			<div className="form-wrapper">
+				<form {...formProps}>
+					<input type="text" />
+				</form>
+			</div>
+		)}
+	</Form>
+);`,
+	'should find form element nested within other elements',
+);
+
+// Test: Form with named imports and default import
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form, { Field, FormSection } from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<form {...formProps} data-testid="complete-form">
+				<FormSection>
+					<Field name="username">
+						{({ fieldProps }) => <input {...fieldProps} />}
+					</Field>
+				</FormSection>
+			</form>
+		)}
+	</Form>
+);`,
+	`import Form, { Field, FormSection } from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit} testId="complete-form">
+		{({ formProps }) => (
+			<form {...formProps}>
+				<FormSection>
+					<Field name="username">
+						{({ fieldProps }) => <input {...fieldProps} />}
+					</Field>
+				</FormSection>
+			</form>
+		)}
+	</Form>
+);`,
+	'should work with mixed default and named imports',
+);
+
+// Test: No transformation when testId already exists
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form testId="existing" onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<form {...formProps} data-testid="should-not-change">
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form testId="existing" onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<form {...formProps} data-testid="should-not-change">
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	'should not migrate when testId prop already exists',
+);
+
+// Test: No transformation when no data-testid present
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<form {...formProps} id="my-form">
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<form {...formProps} id="my-form">
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	'should not transform when no data-testid is present',
+);
+
+// Test: No transformation with JSX children (not function children)
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		<div>JSX children instead of function</div>
+	</Form>
+);`,
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		<div>JSX children instead of function</div>
+	</Form>
+);`,
+	'should not transform JSX children (non-function children)',
+);
+
+// Test: No transformation without formProps parameter
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		{({ submitting }) => (
+			<form data-testid="no-formprops">
+				<input type="text" />
+				<button disabled={submitting}>Submit</button>
+			</form>
+		)}
+	</Form>
+);`,
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		{({ submitting }) => (
+			<form data-testid="no-formprops">
+				<input type="text" />
+				<button disabled={submitting}>Submit</button>
+			</form>
+		)}
+	</Form>
+);`,
+	'should not transform when no formProps parameter exists',
+);
+
+// Test: No transformation when no form element found
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<div {...formProps} data-testid="not-a-form">
+				<input type="text" />
+			</div>
+		)}
+	</Form>
+);`,
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<div {...formProps} data-testid="not-a-form">
+				<input type="text" />
+			</div>
+		)}
+	</Form>
+);`,
+	'should not transform when no HTML form element is found',
+);
+
+// Test: No transformation with only named imports (no default)
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import { Field, FormSection } from '@atlaskit/form';
+
+const MyComponent = () => (
+	<div>
+		<Field name="test">
+			{({ fieldProps }) => <input {...fieldProps} />}
+		</Field>
+	</div>
+);`,
+	`import { Field, FormSection } from '@atlaskit/form';
+
+const MyComponent = () => (
+	<div>
+		<Field name="test">
+			{({ fieldProps }) => <input {...fieldProps} />}
+		</Field>
+	</div>
+);`,
+	'should not transform when only named imports exist (no default Form import)',
+);
+
+// Test: Multiple forms in same component - only transform the one with data-testid
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<div>
+		<Form onSubmit={handleSubmit1}>
+			{({ formProps }) => (
+				<form {...formProps} data-testid="first-form">
+					<input type="text" />
+				</form>
+			)}
+		</Form>
+		<Form onSubmit={handleSubmit2}>
+			{({ formProps }) => (
+				<form {...formProps} id="second-form">
+					<input type="text" />
+				</form>
+			)}
+		</Form>
+	</div>
+);`,
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<div>
+		<Form onSubmit={handleSubmit1} testId="first-form">
+			{({ formProps }) => (
+				<form {...formProps}>
+					<input type="text" />
+				</form>
+			)}
+		</Form>
+		<Form onSubmit={handleSubmit2}>
+			{({ formProps }) => (
+				<form {...formProps} id="second-form">
+					<input type="text" />
+				</form>
+			)}
+		</Form>
+	</div>
+);`,
+	'should only transform forms with data-testid, leave others unchanged',
+);
+
+// Test: Complex real-world example like select-scopes
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import AkForm from '@atlaskit/form';
+
+const MyComponent = () => (
+	<AkForm onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<form {...formProps} id="form-id" data-testid="my-test-id">
+				<input type="text" />
+			</form>
+		)}
+	</AkForm>
+);`,
+	`import AkForm from '@atlaskit/form';
+
+const MyComponent = () => (
+	<AkForm onSubmit={handleSubmit} testId="my-test-id">
+		{({ formProps }) => (
+			<form {...formProps} id="form-id">
+				<input type="text" />
+			</form>
+		)}
+	</AkForm>
+);`,
+	'should handle complex real-world example with AkForm and mixed attributes',
+);
+
+// Test: Different import styles from various packages should not transform
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import CustomForm from '@some/other-package';
+import { Form } from '@another/package';
+
+const MyComponent = () => (
+	<CustomForm onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<form {...formProps} data-testid="should-not-change">
+				<input type="text" />
+			</form>
+		)}
+	</CustomForm>
+);`,
+	`import CustomForm from '@some/other-package';
+import { Form } from '@another/package';
+
+const MyComponent = () => (
+	<CustomForm onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<form {...formProps} data-testid="should-not-change">
+				<input type="text" />
+			</form>
+		)}
+	</CustomForm>
+);`,
+	'should not transform forms from other packages',
+);
+
+// Test: Preserve attribute order when adding testId
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form isDisabled onSubmit={handleSubmit}>
+		{({ formProps }) => (
+			<form {...formProps} data-testid="ordered-form">
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	`import Form from '@atlaskit/form';
+
+const MyComponent = () => (
+	<Form isDisabled onSubmit={handleSubmit} testId="ordered-form">
+		{({ formProps }) => (
+			<form {...formProps}>
+				<input type="text" />
+			</form>
+		)}
+	</Form>
+);`,
+	'should preserve existing prop order when adding testId',
+);

package/codemods/migrate-data-testid-to-testid-prop.tsx

@@ -0,0 +1,160 @@
+import {
+	type API,
+	type FileInfo,
+	type JSCodeshift,
+	type JSXElement,
+	type Options,
+} from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import {
+	addJSXAttributeToJSXElement,
+	getImportDeclarationCollection,
+	getImportDefaultSpecifierCollection,
+	getImportDefaultSpecifierName,
+	hasImportDeclaration,
+} from './utils/helpers';
+
+const importPath = '@atlaskit/form';
+
+const migrateDataTestIdToTestIdProp = (j: JSCodeshift, collection: Collection<any>) => {
+	const importDeclarationCollection = getImportDeclarationCollection(j, collection, importPath);
+	const defaultImport = getImportDefaultSpecifierCollection(j, importDeclarationCollection);
+	const defaultImportName = getImportDefaultSpecifierName(defaultImport);
+
+	// if no default import is present, exit early
+	if (defaultImportName === null) {
+		return;
+	}
+
+	collection.findJSXElements(defaultImportName).forEach((jsxElementPath) => {
+		const node = jsxElementPath.node;
+
+		// If no children, exit early
+		if (!node.children || node.children.length === 0) {
+			return;
+		}
+
+		// Check if Form already has a testId prop - if so, skip to avoid conflicts
+		const existingTestIdProp = node.openingElement.attributes?.find(
+			(attr) => attr.type === 'JSXAttribute' && attr.name.name === 'testId',
+		);
+		if (existingTestIdProp) {
+			return;
+		}
+
+		// Find the function child
+		const children = node.children.filter((child) => child.type === 'JSXExpressionContainer');
+		if (children.length === 0 || children.length > 1) {
+			return;
+		}
+
+		const childFunction = children[0];
+		if (
+			childFunction.type !== 'JSXExpressionContainer' ||
+			childFunction.expression.type !== 'ArrowFunctionExpression'
+		) {
+			return;
+		}
+
+		// Check if function has formProps parameter
+		const args = childFunction.expression.params
+			.filter((arg) => arg.type === 'ObjectPattern' && 'properties' in arg)
+			.flatMap((arg) => arg.properties)
+			.filter((property) => property.type === 'ObjectProperty');
+
+		const formPropsArg = args.find(
+			(arg) => arg.key.type === 'Identifier' && arg.key.name === 'formProps',
+		);
+
+		if (!formPropsArg || formPropsArg.value.type !== 'Identifier') {
+			return;
+		}
+
+		// Find the HTML form element inside the child function
+		const body = childFunction.expression.body;
+		let htmlForm: JSXElement | null = null;
+		const q: any[] = [body];
+
+		while (q.length > 0) {
+			const child = q.pop();
+			if (!child || child.type !== 'JSXElement') {
+				continue;
+			}
+			child.children?.forEach((el: any) => q.push(el));
+
+			if (child.type === 'JSXElement' && child.openingElement.name.name === 'form') {
+				htmlForm = child;
+				break;
+			}
+		}
+
+		// if no HTML form, exit early
+		if (htmlForm === null) {
+			return;
+		}
+
+		// Look for data-testid attribute on the form element
+		let dataTestIdAttr: any = null;
+		let dataTestIdValue: any = null;
+
+		htmlForm.openingElement.attributes?.forEach((attr, index) => {
+			// Find data-testid attribute
+			if (
+				attr.type === 'JSXAttribute' &&
+				attr.name.type === 'JSXIdentifier' &&
+				attr.name.name === 'data-testid'
+			) {
+				dataTestIdAttr = attr;
+				dataTestIdValue = attr.value;
+			}
+		});
+
+		// If no data-testid found, exit early
+		if (!dataTestIdAttr || !dataTestIdValue) {
+			return;
+		}
+
+		// Extract the testId value
+		let testIdValue: any;
+		if (dataTestIdValue.type === 'StringLiteral' || dataTestIdValue.type === 'Literal') {
+			// String literal: data-testid="my-form"
+			testIdValue = dataTestIdValue;
+		} else if (dataTestIdValue.type === 'JSXExpressionContainer') {
+			// Expression: data-testid={someVariable}
+			testIdValue = j.jsxExpressionContainer(dataTestIdValue.expression);
+		} else {
+			// Unknown format, skip
+			return;
+		}
+
+		// Remove the data-testid attribute from the form element
+		const filteredAttributes = htmlForm.openingElement.attributes?.filter(
+			(attr) => attr !== dataTestIdAttr,
+		);
+		if (filteredAttributes) {
+			htmlForm.openingElement.attributes = filteredAttributes;
+		}
+
+		// Add testId prop to the Form component
+		const testIdProp = j.jsxAttribute(j.jsxIdentifier('testId'), testIdValue);
+		addJSXAttributeToJSXElement(j, jsxElementPath, testIdProp, 1);
+	});
+
+	return;
+};
+
+export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
+	const { source } = fileInfo;
+	const collection = j(source);
+
+	// If our component is not here, skip the file
+	if (!hasImportDeclaration(j, collection, importPath)) {
+		return source;
+	}
+
+	// Migrate data-testid to testId prop
+	migrateDataTestIdToTestIdProp(j, collection);
+
+	return collection.toSource(options.printOptions || { quote: 'single' });
+}

package/dist/cjs/checkbox-field.js

@@ -14,9 +14,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _field = _interopRequireDefault(require("./field"));
 var _excluded = ["children", "defaultIsChecked", "isDisabled", "isRequired", "label", "name", "value"],
-  _excluded2 = ["value"],
+  _excluded2 = ["value", "onChange"],
   _excluded3 = ["fieldProps"],
-  _excluded4 = ["value"],
+  _excluded4 = ["value", "onChange"],
   _excluded5 = ["fieldProps"];
 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); }
 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; }
@@ -45,46 +45,60 @@ var CheckboxField = function CheckboxField(_ref) {
     var currentValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return defaultIsChecked && value !== undefined ? [].concat((0, _toConsumableArray2.default)(currentValue), [value]) : currentValue;
   }, [value, defaultIsChecked]);
-  return value !== undefined ? /*#__PURE__*/_react.default.createElement(_field.default, (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform_design-system-team_checkbox-field-spread') ? {} : _objectSpread({}, rest), {
+  return value !== undefined ? /*#__PURE__*/_react.default.createElement(_field.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform_design-system-team_checkbox-field-spread') ? {} : _objectSpread({}, rest), {
     defaultValue: defaultValue,
     isDisabled: isDisabled,
     isRequired: isRequired,
     label: label,
     name: name,
     transform: function transform(event, currentValue) {
-      return event.currentTarget.checked && currentValue ? [].concat((0, _toConsumableArray2.default)(currentValue), [value]) : currentValue.filter(function (v) {
+      return !Array.isArray(event) && event.currentTarget.checked && currentValue ? [].concat((0, _toConsumableArray2.default)(currentValue), [value]) : currentValue.filter(function (v) {
         return v !== value;
       });
     }
   }), function (_ref2) {
     var _ref2$fieldProps = _ref2.fieldProps,
       fieldValue = _ref2$fieldProps.value,
+      _onChange = _ref2$fieldProps.onChange,
       otherFieldProps = (0, _objectWithoutProperties2.default)(_ref2$fieldProps, _excluded2),
       others = (0, _objectWithoutProperties2.default)(_ref2, _excluded3);
     return children(_objectSpread({
       fieldProps: _objectSpread(_objectSpread({}, otherFieldProps), {}, {
+        // Setting to any because it's typed weirdly at the field level
+        onChange: function onChange(v) {
+          return _onChange(v);
+        },
         isChecked: !!fieldValue.find(function (v) {
           return v === value;
         }),
         value: value
       })
     }, others));
-  }) : /*#__PURE__*/_react.default.createElement(_field.default, (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform_design-system-team_checkbox-field-spread') ? {} : _objectSpread({}, rest), {
+  }) : /*#__PURE__*/_react.default.createElement(_field.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform_design-system-team_checkbox-field-spread') ? {} : _objectSpread({}, rest), {
     defaultValue: defaultIsChecked,
     isDisabled: isDisabled,
     isRequired: isRequired,
     label: label,
     name: name,
     transform: function transform(event) {
-      return event.currentTarget.checked;
+      return typeof event === 'boolean' ? event : event.currentTarget.checked;
     }
   }), function (_ref3) {
     var _ref3$fieldProps = _ref3.fieldProps,
       fieldValue = _ref3$fieldProps.value,
+      _onChange2 = _ref3$fieldProps.onChange,
       otherFieldProps = (0, _objectWithoutProperties2.default)(_ref3$fieldProps, _excluded4),
       others = (0, _objectWithoutProperties2.default)(_ref3, _excluded5);
     return children(_objectSpread({
       fieldProps: _objectSpread(_objectSpread({}, otherFieldProps), {}, {
+        // Setting to any because it's typed weirdly at the field level
+        onChange: function onChange(v) {
+          return _onChange2(v);
+        },
         isChecked: fieldValue,
         value: value
       })

package/dist/cjs/form.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.IsDisabledContext = exports.FormContext = void 0;
 exports.default = Form;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _finalForm = require("final-form");
@@ -16,6 +17,8 @@ var _set = _interopRequireDefault(require("lodash/set"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("./utils");
 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); }
+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; }
 /**
  * __Form context__
  *
@@ -41,7 +44,8 @@ var FormContext = exports.FormContext = /*#__PURE__*/(0, _react.createContext)({
 var IsDisabledContext = exports.IsDisabledContext = /*#__PURE__*/(0, _react.createContext)(false);
 function Form(props) {
   var userProvidedFormProps = props.formProps,
-    onSubmit = props.onSubmit;
+    onSubmit = props.onSubmit,
+    testId = props.testId;
   var formRef = (0, _react.useRef)(null);
   var onSubmitRef = (0, _react.useRef)(onSubmit);
   onSubmitRef.current = onSubmit;
@@ -144,11 +148,13 @@ function Form(props) {
   }, [registerField, getCurrentValue, form.subscribe]);
 
   // Abstracting so we can use the same for both rendering patterns
-  var formProps = {
+  var formProps = _objectSpread({
     onKeyDown: handleKeyDown,
     onSubmit: handleSubmit,
     ref: formRef
-  };
+  }, testId && {
+    'data-testid': testId
+  });
   var childrenContent = function () {
     if (typeof children === 'function') {
       var result = children.length > 0 ? children({

package/dist/es2019/checkbox-field.js

@@ -23,7 +23,9 @@ const CheckboxField = ({
 }) => {
   // Maintains a memoised list of the default values
   const defaultValue = useCallback((currentValue = []) => defaultIsChecked && value !== undefined ? [...currentValue, value] : currentValue, [value, defaultIsChecked]);
-  return value !== undefined ? /*#__PURE__*/React.createElement(Field, _extends({}, fg('platform_design-system-team_checkbox-field-spread') ? {} : {
+  return value !== undefined ? /*#__PURE__*/React.createElement(Field
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, fg('platform_design-system-team_checkbox-field-spread') ? {} : {
     ...rest
   }, {
     defaultValue: defaultValue,
@@ -31,21 +33,26 @@ const CheckboxField = ({
     isRequired: isRequired,
     label: label,
     name: name,
-    transform: (event, currentValue) => event.currentTarget.checked && currentValue ? [...currentValue, value] : currentValue.filter(v => v !== value)
+    transform: (event, currentValue) => !Array.isArray(event) && event.currentTarget.checked && currentValue ? [...currentValue, value] : currentValue.filter(v => v !== value)
   }), ({
     fieldProps: {
       value: fieldValue,
+      onChange,
       ...otherFieldProps
     },
     ...others
   }) => children({
     fieldProps: {
       ...otherFieldProps,
+      // Setting to any because it's typed weirdly at the field level
+      onChange: v => onChange(v),
       isChecked: !!fieldValue.find(v => v === value),
       value
     },
     ...others
-  })) : /*#__PURE__*/React.createElement(Field, _extends({}, fg('platform_design-system-team_checkbox-field-spread') ? {} : {
+  })) : /*#__PURE__*/React.createElement(Field
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, fg('platform_design-system-team_checkbox-field-spread') ? {} : {
     ...rest
   }, {
     defaultValue: defaultIsChecked,
@@ -53,16 +60,19 @@ const CheckboxField = ({
     isRequired: isRequired,
     label: label,
     name: name,
-    transform: event => event.currentTarget.checked
+    transform: event => typeof event === 'boolean' ? event : event.currentTarget.checked
   }), ({
     fieldProps: {
       value: fieldValue,
+      onChange,
       ...otherFieldProps
     },
     ...others
   }) => children({
     fieldProps: {
       ...otherFieldProps,
+      // Setting to any because it's typed weirdly at the field level
+      onChange: v => onChange(v),
       isChecked: fieldValue,
       value
     },

package/dist/es2019/form.js

@@ -29,7 +29,8 @@ export const IsDisabledContext = /*#__PURE__*/createContext(false);
 export default function Form(props) {
   const {
     formProps: userProvidedFormProps,
-    onSubmit
+    onSubmit,
+    testId
   } = props;
   const formRef = useRef(null);
   const onSubmitRef = useRef(onSubmit);
@@ -128,7 +129,10 @@ export default function Form(props) {
   const formProps = {
     onKeyDown: handleKeyDown,
     onSubmit: handleSubmit,
-    ref: formRef
+    ref: formRef,
+    ...(testId && {
+      'data-testid': testId
+    })
   };
   const childrenContent = (() => {
     if (typeof children === 'function') {

package/dist/esm/checkbox-field.js

@@ -3,9 +3,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "defaultIsChecked", "isDisabled", "isRequired", "label", "name", "value"],
-  _excluded2 = ["value"],
+  _excluded2 = ["value", "onChange"],
   _excluded3 = ["fieldProps"],
-  _excluded4 = ["value"],
+  _excluded4 = ["value", "onChange"],
   _excluded5 = ["fieldProps"];
 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; }
@@ -36,46 +36,60 @@ var CheckboxField = function CheckboxField(_ref) {
     var currentValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return defaultIsChecked && value !== undefined ? [].concat(_toConsumableArray(currentValue), [value]) : currentValue;
   }, [value, defaultIsChecked]);
-  return value !== undefined ? /*#__PURE__*/React.createElement(Field, _extends({}, fg('platform_design-system-team_checkbox-field-spread') ? {} : _objectSpread({}, rest), {
+  return value !== undefined ? /*#__PURE__*/React.createElement(Field
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, fg('platform_design-system-team_checkbox-field-spread') ? {} : _objectSpread({}, rest), {
     defaultValue: defaultValue,
     isDisabled: isDisabled,
     isRequired: isRequired,
     label: label,
     name: name,
     transform: function transform(event, currentValue) {
-      return event.currentTarget.checked && currentValue ? [].concat(_toConsumableArray(currentValue), [value]) : currentValue.filter(function (v) {
+      return !Array.isArray(event) && event.currentTarget.checked && currentValue ? [].concat(_toConsumableArray(currentValue), [value]) : currentValue.filter(function (v) {
         return v !== value;
       });
     }
   }), function (_ref2) {
     var _ref2$fieldProps = _ref2.fieldProps,
       fieldValue = _ref2$fieldProps.value,
+      _onChange = _ref2$fieldProps.onChange,
       otherFieldProps = _objectWithoutProperties(_ref2$fieldProps, _excluded2),
       others = _objectWithoutProperties(_ref2, _excluded3);
     return children(_objectSpread({
       fieldProps: _objectSpread(_objectSpread({}, otherFieldProps), {}, {
+        // Setting to any because it's typed weirdly at the field level
+        onChange: function onChange(v) {
+          return _onChange(v);
+        },
         isChecked: !!fieldValue.find(function (v) {
           return v === value;
         }),
         value: value
       })
     }, others));
-  }) : /*#__PURE__*/React.createElement(Field, _extends({}, fg('platform_design-system-team_checkbox-field-spread') ? {} : _objectSpread({}, rest), {
+  }) : /*#__PURE__*/React.createElement(Field
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, fg('platform_design-system-team_checkbox-field-spread') ? {} : _objectSpread({}, rest), {
     defaultValue: defaultIsChecked,
     isDisabled: isDisabled,
     isRequired: isRequired,
     label: label,
     name: name,
     transform: function transform(event) {
-      return event.currentTarget.checked;
+      return typeof event === 'boolean' ? event : event.currentTarget.checked;
     }
   }), function (_ref3) {
     var _ref3$fieldProps = _ref3.fieldProps,
       fieldValue = _ref3$fieldProps.value,
+      _onChange2 = _ref3$fieldProps.onChange,
       otherFieldProps = _objectWithoutProperties(_ref3$fieldProps, _excluded4),
       others = _objectWithoutProperties(_ref3, _excluded5);
     return children(_objectSpread({
       fieldProps: _objectSpread(_objectSpread({}, otherFieldProps), {}, {
+        // Setting to any because it's typed weirdly at the field level
+        onChange: function onChange(v) {
+          return _onChange2(v);
+        },
         isChecked: fieldValue,
         value: value
       })

package/dist/esm/form.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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; }
 import React, { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
@@ -31,7 +34,8 @@ export var FormContext = /*#__PURE__*/createContext({
 export var IsDisabledContext = /*#__PURE__*/createContext(false);
 export default function Form(props) {
   var userProvidedFormProps = props.formProps,
-    onSubmit = props.onSubmit;
+    onSubmit = props.onSubmit,
+    testId = props.testId;
   var formRef = useRef(null);
   var onSubmitRef = useRef(onSubmit);
   onSubmitRef.current = onSubmit;
@@ -134,11 +138,13 @@ export default function Form(props) {
   }, [registerField, getCurrentValue, form.subscribe]);
 
   // Abstracting so we can use the same for both rendering patterns
-  var formProps = {
+  var formProps = _objectSpread({
     onKeyDown: handleKeyDown,
     onSubmit: handleSubmit,
     ref: formRef
-  };
+  }, testId && {
+    'data-testid': testId
+  });
   var childrenContent = function () {
     if (typeof children === 'function') {
       var result = children.length > 0 ? children({

package/dist/types/form.d.ts

@@ -62,6 +62,10 @@ export interface FormProps<FormValues> {
      *   Sets the form and its fields as disabled. Users cannot edit or focus on the fields.
      */
     isDisabled?: boolean;
+    /**
+     * A test identifier for the form element. This will be applied as `data-testid` attribute.
+     */
+    testId?: string;
 }
 export default function Form<FormValues extends Record<string, any> = {}>(props: FormProps<FormValues>): React.JSX.Element;
 export {};

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

@@ -62,6 +62,10 @@ export interface FormProps<FormValues> {
      *   Sets the form and its fields as disabled. Users cannot edit or focus on the fields.
      */
     isDisabled?: boolean;
+    /**
+     * A test identifier for the form element. This will be applied as `data-testid` attribute.
+     */
+    testId?: string;
 }
 export default function Form<FormValues extends Record<string, any> = {}>(props: FormProps<FormValues>): React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/form",
-	"version": "12.5.3",
+	"version": "12.6.0",
 	"description": "A form allows users to input information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"