@atlaskit/form 12.1.1 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/form
 
+## 12.2.0
+
+### Minor Changes
+
+- [`07de46497864a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/07de46497864a) -
+  We are testing a new way to render the Form component behind a feature flag. Rendering a `Form`
+  component with direct JSX elements instead of a function as `children` will render an HTML `form`
+  element internally, reducing the boilerplate required for most use cases. If this fix is
+  successful it will be available in a later release.
+
 ## 12.1.1
 
 ### Patch Changes

package/codemods/__tests__/not-yet-migrate-to-simplified-form.test.tsx

@@ -0,0 +1,613 @@
+jest.autoMockOff();
+
+import transformer from '../not-yet-migrate-to-simplified-form';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`import React from 'react';`,
+	`import React from 'react';`,
+	'should not transform if imports are not present',
+);
+
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`
+    import React from 'react';
+    import { Field } from '@atlaskit/form';
+
+    const Component1 = () => <Field />;
+
+    const Component2 = () => <><Field /></>;
+
+    class Component3 extends React.Component { render() { return <Field />; } }
+
+    const element = <Field />;
+    `,
+	`
+    import React from 'react';
+    import { Field } from '@atlaskit/form';
+
+    const Component1 = () => <Field />;
+
+    const Component2 = () => <><Field /></>;
+
+    class Component3 extends React.Component { render() { return <Field />; } }
+
+    const element = <Field />;
+    `,
+	'should not transform if default import is not preset',
+);
+
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`
+    import React from 'react';
+    import Form from '@atlaskit/form';
+
+    const Component1 = () => <Form />;
+
+    const Component2 = () => <><Form /></>;
+
+    class Component3 extends React.Component { render() { return <Form />; } }
+
+    const element = <Form />;
+    `,
+	`
+    import React from 'react';
+    import Form from '@atlaskit/form';
+
+    const Component1 = () => <Form />;
+
+    const Component2 = () => <><Form /></>;
+
+    class Component3 extends React.Component { render() { return <Form />; } }
+
+    const element = <Form />;
+    `,
+	'should not transform if children are not preset',
+);
+
+defineInlineTest(
+	{ default: transformer, parser: 'tsx' },
+	{},
+	`
+    import React from 'react';
+    import Form from '@atlaskit/code';
+
+    const Component1 = () => (
+      <Form onSubmit={() => {}}>
+        <p>Test</p>
+      </Form>
+    );
+
+    const Component2 = () => (
+      <Form onSubmit={() => {}}>
+        <p>Test</p>
+      </Form>
+    );
+
+    class Component3 extends React.Component {
+      render() {
+        return (
+          <Form onSubmit={() => {}}>
+            <p>Test</p>
+          </Form>
+        );
+      }
+    }
+
+    const element = (
+      <Form onSubmit={() => {}}>
+        <p>Test</p>
+      </Form>
+    );
+  `,
+	`
+    import React from 'react';
+    import Form from '@atlaskit/code';
+
+    const Component1 = () => (
+      <Form onSubmit={() => {}}>
+        <p>Test</p>
+      </Form>
+    );
+
+    const Component2 = () => (
+      <Form onSubmit={() => {}}>
+        <p>Test</p>
+      </Form>
+    );
+
+    class Component3 extends React.Component {
+      render() {
+        return (
+          <Form onSubmit={() => {}}>
+            <p>Test</p>
+          </Form>
+        );
+      }
+    }
+
+    const element = (
+      <Form onSubmit={() => {}}>
+        <p>Test</p>
+      </Form>
+    );
+  `,
+	'should not transform if children is not a function',
+);
+
+describe('Migrate <Form> to simplified version if only `formProps` in child arg ', () => {
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps}>
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps}>
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps}>
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps}>
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}><input /></Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}><input /></Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (<Form onSubmit={() => {}}><input /></Form>);
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}><input /></Form>
+);
+      `,
+		'should convert from function with no props on form',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}>
+    {({ formProps: renamed }) => (
+      <form {...renamed}>
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps: renamed }) => (
+        <form {...renamed}>
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form onSubmit={() => {}}>
+        {({ formProps: renamed }) => (
+          <form {...renamed}>
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}>
+    {({ formProps: renamed }) => (
+      <form {...renamed}>
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}><input /></Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}><input /></Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (<Form onSubmit={() => {}}><input /></Form>);
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}><input /></Form>
+);
+      `,
+		'should convert from function with no props on form',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo="bar">
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} foo="bar">
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form
+    onSubmit={() => {}}
+    formProps={{
+      foo: "bar"
+    }}><input /></Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form
+      onSubmit={() => {}}
+      formProps={{
+        foo: "bar"
+      }}><input /></Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form
+        onSubmit={() => {}}
+        formProps={{
+          foo: "bar"
+        }}><input /></Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form
+    onSubmit={() => {}}
+    formProps={{
+      foo: "bar"
+    }}><input /></Form>
+);
+      `,
+		'should convert from function with single prop on form',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar" baz="qux">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo="bar" baz="qux">
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} foo="bar" baz="qux">
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar" baz="qux">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form
+    onSubmit={() => {}}
+    formProps={{
+      foo: "bar",
+      baz: "qux"
+    }}><input /></Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form
+      onSubmit={() => {}}
+      formProps={{
+        foo: "bar",
+        baz: "qux"
+      }}><input /></Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form
+        onSubmit={() => {}}
+        formProps={{
+          foo: "bar",
+          baz: "qux"
+        }}><input /></Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form
+    onSubmit={() => {}}
+    formProps={{
+      foo: "bar",
+      baz: "qux"
+    }}><input /></Form>
+);
+      `,
+		'should convert from function with multiple props on form',
+	);
+});
+
+describe('Do not migrate Form when anything more than `formProps` in child arg', () => {
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}>
+    {({ formProps, submitting }) => (
+      <form {...formProps} foo="bar" baz="qux">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps, submitting }) => (
+        <form {...formProps} foo="bar" baz="qux">
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form onSubmit={() => {}}>
+        {({ formProps, submitting }) => (
+          <form {...formProps} foo="bar" baz="qux">
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}>
+    {({ formProps, submitting }) => (
+      <form {...formProps} foo="bar" baz="qux">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form onSubmit={() => {}}>
+    {({ formProps, submitting }) => (
+      <form {...formProps} foo="bar" baz="qux">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps, submitting }) => (
+        <form {...formProps} foo="bar" baz="qux">
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form onSubmit={() => {}}>
+        {({ formProps, submitting }) => (
+          <form {...formProps} foo="bar" baz="qux">
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}>
+    {({ formProps, submitting }) => (
+      <form {...formProps} foo="bar" baz="qux">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		'should not migrate when anything other than `formProps` is an arg in child function',
+	);
+});

package/codemods/not-yet-migrate-to-simplified-form.tsx

@@ -0,0 +1,173 @@
+import {
+	type API,
+	type FileInfo,
+	type JSCodeshift,
+	type JSXElement,
+	type Options,
+	type Property,
+} from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import {
+	addJSXAttributeToJSXElement,
+	getImportDeclarationCollection,
+	getImportDefaultSpecifierCollection,
+	getImportDefaultSpecifierName,
+	hasImportDeclaration,
+} from './utils/helpers';
+
+const importPath = '@atlaskit/form';
+
+const convertToSimpleForm = (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;
+		}
+
+		// if component but child is not a function, exit early
+		const children = node.children.filter((child) => child.type === 'JSXExpressionContainer');
+		if (children.length === 0 || children.length > 1) {
+			return;
+		}
+
+		// If expression child is not a function, exit early
+		const childFunction = children[0];
+		if (
+			childFunction.type !== 'JSXExpressionContainer' ||
+			childFunction.expression.type !== 'ArrowFunctionExpression'
+		) {
+			return;
+		}
+
+		// if function child but more than just `fieldProps`, exit early
+		const args = childFunction.expression.params
+			.filter((arg) => arg.type === 'ObjectPattern' && 'properties' in arg)
+			.flatMap((arg) => arg.properties)
+			.filter((property) => property.type === 'ObjectProperty');
+		if (
+			args.length !== 1 ||
+			args[0].key.type !== 'Identifier' ||
+			args[0].value.type !== 'Identifier'
+		) {
+			return;
+		}
+		if (args[0].key.name !== 'formProps') {
+			return;
+		}
+
+		// This is the name that is used within, e.g. if something like
+		// `{({ formProps: fooBar }) => ()}` is used, this will be `fooBar`
+		const argName = args[0].value.name;
+
+		// get HTML form inside the child function
+		const body = childFunction.expression.body;
+		let htmlForm: JSXElement | null = null;
+		const q: any[] = [body];
+		while (q.length > 0) {
+			// pop child from end of q
+			const child = q.pop();
+			// if children, add children to q
+			if (!child || child.type !== 'JSXElement') {
+				continue;
+			}
+			child.children?.forEach((el: any) => q.push(el));
+			// if child is a JSXElement with an openingElement of `form`, save to htmlForm and exit loop
+			if (child.type === 'JSXElement' && child.openingElement.name.name === 'form') {
+				htmlForm = child;
+				break;
+			}
+		}
+
+		// if no HTML form, exit early
+		if (htmlForm === null) {
+			return;
+		}
+
+		// make new object and add each attribute on HTML `form` that is not a spread of `formProps` to new object
+		let otherSpreadPropsSeen = false;
+		// We are required to do it this way instead of a map to make the types work correctly.
+		const nonFormPropsAttributes: Property[] = [];
+		htmlForm?.openingElement?.attributes?.forEach((attr) => {
+			if (otherSpreadPropsSeen) {
+				return;
+			}
+
+			if (attr.type === 'JSXSpreadAttribute') {
+				if (attr.argument.type === 'Identifier' && attr.argument.name === argName) {
+					return;
+				} else {
+					otherSpreadPropsSeen = true;
+					return;
+				}
+			}
+
+			if (attr.name.type !== 'JSXIdentifier') {
+				return;
+			}
+
+			if (attr.value === undefined) {
+				return;
+			}
+
+			let value;
+			if (attr.value === null) {
+				value = j.nullLiteral();
+			} else {
+				value = attr.value;
+			}
+
+			nonFormPropsAttributes.push(j.property('init', attr.name, value));
+		});
+
+		// We don't know how to handle other spread props in the formProps object, so ignore it
+		if (otherSpreadPropsSeen) {
+			return;
+		}
+
+		if (nonFormPropsAttributes.length !== 0) {
+			// make new attribute for parent `Form` default import called `formProps` and set new attribute to new object
+			const formPropsAttr = j.jsxAttribute(
+				j.jsxIdentifier('formProps'),
+				j.jsxExpressionContainer(j.objectExpression(nonFormPropsAttributes.filter(Boolean))),
+			);
+			addJSXAttributeToJSXElement(j, jsxElementPath, formPropsAttr, 1);
+		}
+
+		// replace functional child with inner (all children of HTML `form`)
+		const htmlFormChildren = htmlForm.children?.filter((child) => child.type !== 'JSXText');
+		if (!htmlFormChildren) {
+			return;
+		}
+
+		node.children.splice(0);
+		node.children.splice(0, 0, ...htmlFormChildren);
+	});
+
+	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;
+	}
+
+	// Convert form if possible
+	convertToSimpleForm(j, collection);
+
+	return collection.toSource(options.printOptions || { quote: 'single' });
+}

package/codemods/utils/helpers.tsx

@@ -0,0 +1,327 @@
+import type {
+	ASTPath,
+	CallExpression,
+	default as core,
+	Identifier,
+	ImportDeclaration,
+	ImportDefaultSpecifier,
+	ImportSpecifier,
+	JSCodeshift,
+	JSXAttribute,
+	JSXElement,
+	ObjectProperty,
+	StringLiteral,
+} from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { addCommentToStartOfFile, getNamedSpecifier } from '@atlaskit/codemod-utils';
+
+export function hasImportDeclaration(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	importPath: string,
+) {
+	return getImportDeclarationCollection(j, collection, importPath).length > 0;
+}
+
+export function getImportDeclarationCollection(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	importPath: string,
+) {
+	return collection
+		.find(j.ImportDeclaration)
+		.filter((importDeclarationPath) => importDeclarationPath.node.source.value === importPath);
+}
+
+export function hasDynamicImport(j: JSCodeshift, collection: Collection<any>, importPath: string) {
+	return getDynamicImportCollection(j, collection, importPath).length > 0;
+}
+
+export function getDynamicImportCollection(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	importPath: string,
+) {
+	return collection.find(j.CallExpression).filter((callExpressionPath) => {
+		const { callee, arguments: callExpressionArguments } = callExpressionPath.node;
+
+		return !!(
+			isCallExpressionCalleeImportType(callee) &&
+			isCallExpressionArgumentStringLiteralType(callExpressionArguments) &&
+			isCallExpressionArgumentValueMatches(callExpressionArguments[0], j, importPath)
+		);
+	});
+}
+function isCallExpressionCalleeImportType(callee: CallExpression['callee']) {
+	return callee && callee.type === 'Import';
+}
+function isCallExpressionArgumentStringLiteralType(
+	callExpressionArguments: CallExpression['arguments'],
+) {
+	return (
+		callExpressionArguments &&
+		callExpressionArguments.length &&
+		callExpressionArguments[0].type === 'StringLiteral'
+	);
+}
+function isCallExpressionArgumentValueMatches(
+	callExpressionArgument: CallExpression['arguments'][0],
+	j: JSCodeshift,
+	value: string,
+) {
+	return j(callExpressionArgument).some((path) => path.node.value === value);
+}
+
+export function getImportDefaultSpecifierCollection(
+	j: JSCodeshift,
+	importDeclarationCollection: Collection<ImportDeclaration>,
+) {
+	return importDeclarationCollection.find(j.ImportDefaultSpecifier);
+}
+
+export function getImportSpecifierCollection(
+	j: JSCodeshift,
+	importDeclarationCollection: Collection<ImportDeclaration>,
+	importName: string,
+) {
+	return importDeclarationCollection
+		.find(j.ImportSpecifier)
+		.filter((importSpecifierPath) => importSpecifierPath.node.imported.name === importName);
+}
+
+export function getImportDefaultSpecifierName(
+	importSpecifierCollection: Collection<ImportDefaultSpecifier>,
+) {
+	if (importSpecifierCollection.length === 0) {
+		return null;
+	}
+
+	return importSpecifierCollection.nodes()[0]!.local!.name;
+}
+
+export function getImportSpecifierName(importSpecifierCollection: Collection<ImportSpecifier>) {
+	if (importSpecifierCollection.length === 0) {
+		return null;
+	}
+
+	return importSpecifierCollection.nodes()[0]!.local!.name;
+}
+
+export function isVariableDeclaratorIdentifierPresent(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	variableName: string,
+) {
+	return collection
+		.find(j.VariableDeclaration)
+		.find(j.VariableDeclarator)
+		.some((variableDeclaratorPath) => {
+			const { id } = variableDeclaratorPath.node;
+
+			return !!(id && id.type === 'Identifier' && (id as Identifier).name === variableName);
+		});
+}
+
+export function isFunctionDeclarationIdentifierPresent(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	variableName: string,
+) {
+	return collection.find(j.FunctionDeclaration).some((functionDeclarationPath) => {
+		const { id } = functionDeclarationPath.node;
+
+		return !!(id && id.type === 'Identifier' && (id as Identifier).name === variableName);
+	});
+}
+
+export function isClassDeclarationIdentifierPresent(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	variableName: string,
+) {
+	return collection.find(j.ClassDeclaration).some((classDeclarationPath) => {
+		const { id } = classDeclarationPath.node;
+
+		return !!(id && id.type === 'Identifier' && (id as Identifier).name === variableName);
+	});
+}
+
+export function isImportDeclarationIdentifierPresent(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	variableName: string,
+) {
+	return collection
+		.find(j.ImportDeclaration)
+		.find(j.Identifier)
+		.some((identifierPath) => identifierPath.node.name === variableName);
+}
+
+export function getJSXAttributesByName(
+	j: JSCodeshift,
+	jsxElementPath: ASTPath<JSXElement>,
+	attributeName: string,
+): Collection<JSXAttribute> {
+	return j(jsxElementPath)
+		.find(j.JSXOpeningElement)
+		.find(j.JSXAttribute)
+		.filter((jsxAttributePath) =>
+			j(jsxAttributePath)
+				.find(j.JSXIdentifier)
+				.some((jsxIdentifierPath) => jsxIdentifierPath.node.name === attributeName),
+		);
+}
+
+export function getJSXSpreadIdentifierAttributesByName(
+	j: JSCodeshift,
+	collection: Collection<any>,
+	jsxElementPath: ASTPath<JSXElement>,
+	attributeName: string,
+): Collection<ObjectProperty> | null {
+	const identifierCollection = j(jsxElementPath)
+		.find(j.JSXOpeningElement)
+		.find(j.JSXSpreadAttribute)
+		.filter((jsxSpreadAttributePath) => jsxSpreadAttributePath.node.argument.type === 'Identifier')
+		.find(j.Identifier);
+
+	if (identifierCollection.length === 0) {
+		return null;
+	}
+
+	return collection
+		.find(j.VariableDeclarator)
+		.filter((variableDeclaratorPath) => {
+			const { id } = variableDeclaratorPath.node;
+
+			return (
+				id.type === 'Identifier' &&
+				identifierCollection.some((identifierPath) => identifierPath.node.name === id.name)
+			);
+		})
+		.find(j.ObjectExpression)
+		.find(j.ObjectProperty)
+		.filter((objectPropertyPath) =>
+			j(objectPropertyPath)
+				.find(j.Identifier)
+				.some((identifierPath) => identifierPath.node.name === attributeName),
+		);
+}
+
+export function getJSXSpreadObjectExpressionAttributesByName(
+	j: JSCodeshift,
+	jsxElementPath: ASTPath<JSXElement>,
+	attributeName: string,
+) {
+	return j(jsxElementPath)
+		.find(j.JSXOpeningElement)
+		.find(j.JSXSpreadAttribute)
+		.find(j.ObjectExpression)
+		.find(j.ObjectProperty)
+		.filter((objectPropertyPath) =>
+			j(objectPropertyPath)
+				.find(j.Identifier)
+				.some((identifierPath) => identifierPath.node.name === attributeName),
+		);
+}
+
+export const createRemoveFuncFor =
+	(component: string, importName: string, prop: string, comment?: string) =>
+	(j: core.JSCodeshift, source: Collection<Node>) => {
+		const specifier = getNamedSpecifier(j, source, component, importName);
+
+		if (!specifier) {
+			return;
+		}
+
+		source.findJSXElements(specifier).forEach((element) => {
+			getJSXAttributesByName(j, element, prop).forEach((attribute: any) => {
+				j(attribute).remove();
+				if (comment) {
+					addCommentToStartOfFile({ j, base: source, message: comment });
+				}
+			});
+		});
+	};
+
+export const getJSXAttributeByName = (
+	j: JSCodeshift,
+	jsxElementPath: ASTPath<JSXElement>,
+	attributeName: string,
+): JSXAttribute | undefined => {
+	const attributes: JSXAttribute[] = j(jsxElementPath).find(j.JSXAttribute).nodes();
+
+	return attributes?.find((attr) => attr.name && attr.name.name === attributeName);
+};
+
+export const addJSXAttributeToJSXElement = (
+	j: JSCodeshift,
+	jsxElementPath: ASTPath<JSXElement>,
+	jsxAttribute: JSXAttribute,
+	limit?: number,
+) => {
+	j(jsxElementPath)
+		.find(j.JSXOpeningElement)
+		.forEach((openingElement, i) => {
+			if (!limit || i < limit) {
+				openingElement.node.attributes?.push(jsxAttribute);
+			}
+		});
+};
+
+export const removeJSXAttributeByName = (
+	j: JSCodeshift,
+	jsxElementPath: ASTPath<JSXElement>,
+	attrName: string,
+) => {
+	const attributes = getJSXAttributes(jsxElementPath);
+	const attr = getJSXAttributeByName(j, jsxElementPath, attrName);
+	if (attr) {
+		attributes?.splice(attributes.indexOf(attr), 1);
+	}
+};
+
+export const getJSXAttributes = (jsxElementPath: ASTPath<JSXElement>) =>
+	jsxElementPath.node.openingElement.attributes as JSXAttribute[];
+
+export const removeJSXAttributeObjectPropertyByName = (
+	j: JSCodeshift,
+	jsxElementPath: ASTPath<JSXElement>,
+	attrName: string,
+	propertyToRemove: string,
+) => {
+	const attr = getJSXAttributeByName(j, jsxElementPath, attrName);
+
+	if (!attr) {
+		return;
+	}
+
+	const attrCollection = getJSXAttributesByName(j, jsxElementPath, attrName);
+
+	const removeMatchingNodes = (p: ASTPath<Identifier | StringLiteral>) => {
+		const name = p.node.type === 'Identifier' ? p.node?.name : p.node?.value;
+		// Need to account for quoted properties
+		const nameMatches = propertyToRemove.match(new RegExp(`['"]?${name}['"]?`));
+		// This will otherwise try to remove values of properties since they are literals
+		const isKey = p.parent.value?.type === 'ObjectProperty';
+		// Sorry about all the parents. This is the easiest way to get the name
+		// of the attribute name. And I always know the depth of the object
+		// property here.
+		const parentNameMatches = attrName === p.parent.parent.parent.parent.node?.name?.name;
+		if (isKey && nameMatches && parentNameMatches) {
+			j(p.parent).remove();
+		}
+	};
+
+	// Remove all the now migrated object properties
+	const objectProperties = attrCollection.find(j.ObjectProperty);
+	objectProperties.find(j.Identifier).forEach(removeMatchingNodes);
+	objectProperties.find(j.StringLiteral).forEach(removeMatchingNodes);
+
+	// @ts-ignore -- Property 'expression' does not exist on type 'LiteralKind | JSXElement | JSXExpressionContainer | JSXFragment'. Property 'expression' does not exist on type 'Literal'.
+	const attrProperties = attr.value?.expression.properties;
+
+	if (attrProperties && attrProperties?.length === 0) {
+		removeJSXAttributeByName(j, jsxElementPath, attrName);
+	}
+};

package/dist/cjs/form.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.IsDisabledContext = exports.FormContext = void 0;
 exports.default = Form;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _finalForm = require("final-form");
 var _finalFormFocus = _interopRequireDefault(require("final-form-focus"));
 var _set = _interopRequireDefault(require("lodash/set"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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); }
 /**
  * __Form context__
@@ -37,9 +39,11 @@ 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;
   var formRef = (0, _react.useRef)(null);
-  var onSubmitRef = (0, _react.useRef)(props.onSubmit);
-  onSubmitRef.current = props.onSubmit;
+  var onSubmitRef = (0, _react.useRef)(onSubmit);
+  onSubmitRef.current = onSubmit;
   var _useState = (0, _react.useState)(function () {
       // Types here would break the existing API
       var finalForm = (0, _finalForm.createForm)({
@@ -137,14 +141,17 @@ function Form(props) {
       subscribe: form.subscribe
     };
   }, [registerField, getCurrentValue, form.subscribe]);
+
+  // Abstracting so we can use the same for both rendering patterns
+  var formProps = {
+    onKeyDown: handleKeyDown,
+    onSubmit: handleSubmit,
+    ref: formRef
+  };
   var childrenContent = function () {
     if (typeof children === 'function') {
       var result = children.length > 0 ? children({
-        formProps: {
-          onSubmit: handleSubmit,
-          ref: formRef,
-          onKeyDown: handleKeyDown
-        },
+        formProps: formProps,
         dirty: dirty,
         reset: handleReset,
         submitting: submitting,
@@ -158,8 +165,9 @@ function Form(props) {
         setFieldValue: form.change
       }) : children();
       return result === undefined ? null : result;
+    } else {
+      return (0, _platformFeatureFlags.fg)('platform_design-system-team_form-upgrade') ? /*#__PURE__*/_react.default.createElement("form", (0, _extends2.default)({}, formProps, userProvidedFormProps), children) : children;
     }
-    return children;
   }();
   return /*#__PURE__*/_react.default.createElement(FormContext.Provider, {
     value: FormContextValue

package/dist/es2019/form.js

@@ -1,7 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
 import set from 'lodash/set';
+import { fg } from '@atlaskit/platform-feature-flags';
 /**
  * __Form context__
  *
@@ -24,9 +26,13 @@ export const FormContext = /*#__PURE__*/createContext({
  */
 export const IsDisabledContext = /*#__PURE__*/createContext(false);
 export default function Form(props) {
+  const {
+    formProps: userProvidedFormProps,
+    onSubmit
+  } = props;
   const formRef = useRef(null);
-  const onSubmitRef = useRef(props.onSubmit);
-  onSubmitRef.current = props.onSubmit;
+  const onSubmitRef = useRef(onSubmit);
+  onSubmitRef.current = onSubmit;
   const [form] = useState(() => {
     // Types here would break the existing API
     const finalForm = createForm({
@@ -116,14 +122,17 @@ export default function Form(props) {
       subscribe: form.subscribe
     };
   }, [registerField, getCurrentValue, form.subscribe]);
+
+  // Abstracting so we can use the same for both rendering patterns
+  const formProps = {
+    onKeyDown: handleKeyDown,
+    onSubmit: handleSubmit,
+    ref: formRef
+  };
   const childrenContent = (() => {
     if (typeof children === 'function') {
       const result = children.length > 0 ? children({
-        formProps: {
-          onSubmit: handleSubmit,
-          ref: formRef,
-          onKeyDown: handleKeyDown
-        },
+        formProps,
         dirty,
         reset: handleReset,
         submitting,
@@ -133,8 +142,9 @@ export default function Form(props) {
         setFieldValue: form.change
       }) : children();
       return result === undefined ? null : result;
+    } else {
+      return fg('platform_design-system-team_form-upgrade') ? /*#__PURE__*/React.createElement("form", _extends({}, formProps, userProvidedFormProps), children) : children;
     }
-    return children;
   })();
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: FormContextValue

package/dist/esm/form.js

@@ -1,8 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
 import set from 'lodash/set';
+import { fg } from '@atlaskit/platform-feature-flags';
 /**
  * __Form context__
  *
@@ -27,9 +29,11 @@ export var FormContext = /*#__PURE__*/createContext({
  */
 export var IsDisabledContext = /*#__PURE__*/createContext(false);
 export default function Form(props) {
+  var userProvidedFormProps = props.formProps,
+    onSubmit = props.onSubmit;
   var formRef = useRef(null);
-  var onSubmitRef = useRef(props.onSubmit);
-  onSubmitRef.current = props.onSubmit;
+  var onSubmitRef = useRef(onSubmit);
+  onSubmitRef.current = onSubmit;
   var _useState = useState(function () {
       // Types here would break the existing API
       var finalForm = createForm({
@@ -127,14 +131,17 @@ export default function Form(props) {
       subscribe: form.subscribe
     };
   }, [registerField, getCurrentValue, form.subscribe]);
+
+  // Abstracting so we can use the same for both rendering patterns
+  var formProps = {
+    onKeyDown: handleKeyDown,
+    onSubmit: handleSubmit,
+    ref: formRef
+  };
   var childrenContent = function () {
     if (typeof children === 'function') {
       var result = children.length > 0 ? children({
-        formProps: {
-          onSubmit: handleSubmit,
-          ref: formRef,
-          onKeyDown: handleKeyDown
-        },
+        formProps: formProps,
         dirty: dirty,
         reset: handleReset,
         submitting: submitting,
@@ -148,8 +155,9 @@ export default function Form(props) {
         setFieldValue: form.change
       }) : children();
       return result === undefined ? null : result;
+    } else {
+      return fg('platform_design-system-team_form-upgrade') ? /*#__PURE__*/React.createElement("form", _extends({}, formProps, userProvidedFormProps), children) : children;
     }
-    return children;
   }();
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: FormContextValue

package/dist/types/form.d.ts

@@ -35,12 +35,25 @@ type FormChildrenArgs<FormValues> = {
     setFieldValue: (name: string, value: any) => void;
     reset: (initialValues?: FormValues) => void;
 };
+type ExcludeReservedFormProps = {
+    onKeyDown?: never;
+    onSubmit?: never;
+    ref?: never;
+};
 export interface FormProps<FormValues> {
     /**
      *  The contents rendered inside of the form. This is a function where the props will be passed from the form. The function props you can access are `dirty`, `submitting` and `disabled`.
      *  You can read more about these props in [react-final form documentation](https://final-form.org/docs/final-form/types/FormState).
      */
     children: ((args: FormChildrenArgs<FormValues>) => ReactNode) | (() => void) | ReactNode;
+    /**
+     * When `Form` renders JSX children directly and not using a function to
+     * spread `formProps` manually, the properties in this `formProps` prop will
+     * be spread on an internally rendered  HTML `form` element.
+     */
+    formProps?: {
+        [x: string]: any;
+    } & ExcludeReservedFormProps;
     /**
      *   Event handler called when the form is submitted. Fields must be free of validation errors.
      */

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

@@ -35,12 +35,25 @@ type FormChildrenArgs<FormValues> = {
     setFieldValue: (name: string, value: any) => void;
     reset: (initialValues?: FormValues) => void;
 };
+type ExcludeReservedFormProps = {
+    onKeyDown?: never;
+    onSubmit?: never;
+    ref?: never;
+};
 export interface FormProps<FormValues> {
     /**
      *  The contents rendered inside of the form. This is a function where the props will be passed from the form. The function props you can access are `dirty`, `submitting` and `disabled`.
      *  You can read more about these props in [react-final form documentation](https://final-form.org/docs/final-form/types/FormState).
      */
     children: ((args: FormChildrenArgs<FormValues>) => ReactNode) | (() => void) | ReactNode;
+    /**
+     * When `Form` renders JSX children directly and not using a function to
+     * spread `formProps` manually, the properties in this `formProps` prop will
+     * be spread on an internally rendered  HTML `form` element.
+     */
+    formProps?: {
+        [x: string]: any;
+    } & ExcludeReservedFormProps;
     /**
      *   Event handler called when the form is submitted. Fields must be free of validation errors.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/form",
-	"version": "12.1.1",
+	"version": "12.2.0",
 	"description": "A form allows users to input information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -49,6 +49,7 @@
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/checkbox": "^17.1.0",
+		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/datetime-picker": "^17.0.0",
 		"@atlaskit/docs": "^11.0.0",
 		"@atlaskit/link": "^3.2.0",
@@ -63,12 +64,13 @@
 		"@atlaskit/toggle": "^15.1.0",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
-		"@atlassian/ssr-tests": "^0.2.0",
+		"@atlassian/ssr-tests": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/final-form-focus": "^1.1.1",
 		"jest-in-case": "^1.0.2",
+		"jscodeshift": "^17.0.0",
 		"react-dom": "^18.2.0"
 	},
 	"keywords": [
@@ -123,6 +125,9 @@
 	"platform-feature-flags": {
 		"platform_dst_form_screenreader_message_fix": {
 			"type": "boolean"
+		},
+		"platform_design-system-team_form-upgrade": {
+			"type": "boolean"
 		}
 	}
 }