@atlaskit/form 12.1.1 → 12.2.1

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.
      */