@atlaskit/form 14.0.0 → 14.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/form
 
+## 14.2.0
+
+### Minor Changes
+
+- [`10985771cb1e5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/10985771cb1e5) -
+  Add props to form component for more transparent prop application to underlying HTML form element.
+
+## 14.1.0
+
+### Minor Changes
+
+- [`ba5410321550c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ba5410321550c) -
+  Add new streamlined field implementation through the usage of the `component` prop and it's
+  associated `*Message` props. This accounts for the majority of field implementations in products
+  and will increase velocity in releasing accessibility improvements to all insteances using this
+  implementation.
+
 ## 14.0.0
 
 ### Major Changes

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

@@ -401,6 +401,282 @@ const formElement = (
 		'should convert from function with single prop on form',
 	);
 
+	describe('Migrate existing props', () => {
+		defineInlineTest(
+			{ default: transformer, parser: 'tsx' },
+			{},
+			`
+  import React from 'react';
+  import Form from '@atlaskit/form';
+
+  const FormComponent1 = () => (
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate>
+          <input />
+        </form>
+      )}
+    </Form>
+  );
+
+  const FormComponent2 = () => (
+    <>
+      <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate>
+            <input />
+          </form>
+        )}
+      </Form>
+    </>
+  );
+
+  class FormComponent3 extends React.Component {
+    render() {
+      return (
+        <Form onSubmit={() => {}}>
+          {({ formProps }) => (
+            <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate>
+              <input />
+            </form>
+          )}
+        </Form>
+      );
+    }
+  }
+
+  const formElement = (
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate>
+          <input />
+        </form>
+      )}
+    </Form>
+  );
+        `,
+			`
+  import React from 'react';
+  import Form from '@atlaskit/form';
+
+  const FormComponent1 = () => (
+    <Form onSubmit={() => {}} autocomplete="off" id="foo" name="bar" noValidate><input /></Form>
+  );
+
+  const FormComponent2 = () => (
+    <>
+      <Form onSubmit={() => {}} autocomplete="off" id="foo" name="bar" noValidate><input /></Form>
+    </>
+  );
+
+  class FormComponent3 extends React.Component {
+    render() {
+      return (<Form onSubmit={() => {}} autocomplete="off" id="foo" name="bar" noValidate><input /></Form>);
+    }
+  }
+
+  const formElement = (
+    <Form onSubmit={() => {}} autocomplete="off" id="foo" name="bar" noValidate><input /></Form>
+  );
+`,
+			'should migrate existing props on `form` into their respective props on `Form`',
+		);
+
+		defineInlineTest(
+			{ default: transformer, parser: 'tsx' },
+			{},
+			`
+  import React from 'react';
+  import Form from '@atlaskit/form';
+
+  const FormComponent1 = () => (
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} aria-label="foo" aria-labelledby="bar">
+          <input />
+        </form>
+      )}
+    </Form>
+  );
+
+  const FormComponent2 = () => (
+    <>
+      <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} aria-label="foo" aria-labelledby="bar">
+            <input />
+          </form>
+        )}
+      </Form>
+    </>
+  );
+
+  class FormComponent3 extends React.Component {
+    render() {
+      return (
+        <Form onSubmit={() => {}}>
+          {({ formProps }) => (
+            <form {...formProps} aria-label="foo" aria-labelledby="bar">
+              <input />
+            </form>
+          )}
+        </Form>
+      );
+    }
+  }
+
+  const formElement = (
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} aria-label="foo" aria-labelledby="bar">
+          <input />
+        </form>
+      )}
+    </Form>
+  );
+        `,
+			`
+  import React from 'react';
+  import Form from '@atlaskit/form';
+
+  const FormComponent1 = () => (
+    <Form onSubmit={() => {}} label="foo" labelId="bar"><input /></Form>
+  );
+
+  const FormComponent2 = () => (
+    <>
+      <Form onSubmit={() => {}} label="foo" labelId="bar"><input /></Form>
+    </>
+  );
+
+  class FormComponent3 extends React.Component {
+    render() {
+      return (<Form onSubmit={() => {}} label="foo" labelId="bar"><input /></Form>);
+    }
+  }
+
+  const formElement = (
+    <Form onSubmit={() => {}} label="foo" labelId="bar"><input /></Form>
+  );
+        `,
+			'should migrate existing props on `form` into different names',
+		);
+
+		defineInlineTest(
+			{ default: transformer, parser: 'tsx' },
+			{},
+			`
+  import React from 'react';
+  import Form from '@atlaskit/form';
+
+  const FormComponent1 = () => (
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate quu="qux">
+          <input />
+        </form>
+      )}
+    </Form>
+  );
+
+  const FormComponent2 = () => (
+    <>
+      <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate quu="qux">
+            <input />
+          </form>
+        )}
+      </Form>
+    </>
+  );
+
+  class FormComponent3 extends React.Component {
+    render() {
+      return (
+        <Form onSubmit={() => {}}>
+          {({ formProps }) => (
+            <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate quu="qux">
+              <input />
+            </form>
+          )}
+        </Form>
+      );
+    }
+  }
+
+  const formElement = (
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate quu="qux">
+          <input />
+        </form>
+      )}
+    </Form>
+  );
+        `,
+			`
+  import React from 'react';
+  import Form from '@atlaskit/form';
+
+  const FormComponent1 = () => (
+    <Form
+      onSubmit={() => {}}
+      formProps={{
+        quu: "qux"
+      }}
+      autocomplete="off"
+      id="foo"
+      name="bar"
+      noValidate><input /></Form>
+  );
+
+  const FormComponent2 = () => (
+    <>
+      <Form
+        onSubmit={() => {}}
+        formProps={{
+          quu: "qux"
+        }}
+        autocomplete="off"
+        id="foo"
+        name="bar"
+        noValidate><input /></Form>
+    </>
+  );
+
+  class FormComponent3 extends React.Component {
+    render() {
+      return (
+        <Form
+          onSubmit={() => {}}
+          formProps={{
+            quu: "qux"
+          }}
+          autocomplete="off"
+          id="foo"
+          name="bar"
+          noValidate><input /></Form>
+      );
+    }
+  }
+
+  const formElement = (
+    <Form
+      onSubmit={() => {}}
+      formProps={{
+        quu: "qux"
+      }}
+      autocomplete="off"
+      id="foo"
+      name="bar"
+      noValidate><input /></Form>
+  );
+        `,
+			'should migrate existing props on `form` into their respective props on `Form` and also use `formProps` if needed',
+		);
+	});
+
 	defineInlineTest(
 		{ default: transformer, parser: 'tsx' },
 		{},

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

@@ -2,6 +2,7 @@ import {
 	type API,
 	type FileInfo,
 	type JSCodeshift,
+	type JSXAttribute,
 	type JSXElement,
 	type Options,
 } from 'jscodeshift';
@@ -16,6 +17,14 @@ import {
 } from './utils/helpers';
 
 const importPath = '@atlaskit/form';
+const EXISTING_FORM_ATTRIBUTES: Record<string, any> = {
+	autocomplete: 'autocomplete',
+	id: 'id',
+	'aria-label': 'label',
+	'aria-labelledby': 'labelId',
+	name: 'name',
+	noValidate: 'noValidate',
+};
 
 const convertToSimpleForm = (j: JSCodeshift, collection: Collection<any>) => {
 	const importDeclarationCollection = getImportDeclarationCollection(j, collection, importPath);
@@ -98,6 +107,8 @@ const convertToSimpleForm = (j: JSCodeshift, collection: Collection<any>) => {
 		// We are required to do it this way instead of a map to make the types work correctly.
 		// We also have to use `any` here and below because typing in this SUCKS.
 		const nonFormPropsAttributes: any[] = [];
+		// These are the attributes that exist on `Form` that can migrate directly over.
+		const existingFormPropsAttributes: JSXAttribute[] = [];
 		htmlForm?.openingElement?.attributes?.forEach((attr) => {
 			if (otherSpreadPropsSeen) {
 				return;
@@ -112,7 +123,9 @@ const convertToSimpleForm = (j: JSCodeshift, collection: Collection<any>) => {
 				}
 			}
 
-			if (attr.name.type !== 'JSXIdentifier') {
+			const attrName = attr.name;
+
+			if (attrName.type !== 'JSXIdentifier') {
 				return;
 			}
 
@@ -120,6 +133,11 @@ const convertToSimpleForm = (j: JSCodeshift, collection: Collection<any>) => {
 				return;
 			}
 
+			if (Object.keys(EXISTING_FORM_ATTRIBUTES).includes(attrName.name)) {
+				existingFormPropsAttributes.push(attr);
+				return;
+			}
+
 			let value: any;
 			if (attr.value === null) {
 				value = j.booleanLiteral(true) as any;
@@ -129,7 +147,7 @@ const convertToSimpleForm = (j: JSCodeshift, collection: Collection<any>) => {
 				value = attr.value as any;
 			}
 
-			nonFormPropsAttributes.push(j.property('init', attr.name, value));
+			nonFormPropsAttributes.push(j.property('init', attrName, value));
 		});
 
 		// We don't know how to handle other spread props in the formProps object, so ignore it
@@ -145,6 +163,16 @@ const convertToSimpleForm = (j: JSCodeshift, collection: Collection<any>) => {
 			);
 			addJSXAttributeToJSXElement(j, jsxElementPath, formPropsAttr, 1);
 		}
+		existingFormPropsAttributes.forEach((attr) => {
+			// add existing props to new `Form`
+			const fromName = attr.name.name;
+			if (typeof fromName !== 'string') {
+				return;
+			}
+			const toName = EXISTING_FORM_ATTRIBUTES[fromName];
+			attr.name.name = toName;
+			addJSXAttributeToJSXElement(j, jsxElementPath, attr, 1);
+		});
 
 		// replace functional child with inner (all children of HTML `form`)
 		const htmlFormChildren = htmlForm.children?.filter((child) => child.type !== 'JSXText');

package/dist/cjs/field.js

@@ -14,7 +14,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
 var _useId = require("@atlaskit/ds-lib/use-id");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _fieldIdContext = require("./field-id-context");
 var _form = require("./form");
 var _label = require("./label");
@@ -263,7 +262,7 @@ function Field(props) {
     testId: props.testId && "".concat(props.testId, "--label")
   }, props.label, props.isRequired && /*#__PURE__*/_react.default.createElement(_requiredAsterisk.default, null), props.elementAfterLabel), /*#__PURE__*/_react.default.createElement(_fieldIdContext.FieldId.Provider, {
     value: fieldId
-  }, component && (0, _platformFeatureFlags.fg)('platform_design-system-team_field-upgrade') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, component && component({
+  }, component ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, component({
     fieldProps: extendedFieldProps
   }), /*#__PURE__*/_react.default.createElement(_messages.MessageWrapper, null, props.helperMessage && /*#__PURE__*/_react.default.createElement(_messages.HelperMessage, null, props.helperMessage), state.error && /*#__PURE__*/_react.default.createElement(_messages.ErrorMessage, null, props.errorMessage || state.error), state.meta.touched && state.valid && props.validMessage && /*#__PURE__*/_react.default.createElement(_messages.ValidMessage, null, props.validMessage))) : children({
     fieldProps: extendedFieldProps,

package/dist/cjs/form.js

@@ -5,8 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IsDisabledContext = exports.FormContext = void 0;
-exports.default = Form;
+exports.default = exports.IsDisabledContext = exports.FormContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -14,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _finalForm = require("final-form");
 var _finalFormFocus = _interopRequireDefault(require("final-form-focus"));
 var _set = _interopRequireDefault(require("lodash/set"));
+var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
+var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 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); }
@@ -42,10 +43,17 @@ var FormContext = exports.FormContext = /*#__PURE__*/(0, _react.createContext)({
  * An is disabled context creates the context for when a value is disabled.
  */
 var IsDisabledContext = exports.IsDisabledContext = /*#__PURE__*/(0, _react.createContext)(false);
-function Form(props) {
-  var userProvidedFormProps = props.formProps,
+var FormBase = function FormBase(props, ref) {
+  var autocomplete = props.autocomplete,
+    userProvidedFormProps = props.formProps,
+    id = props.id,
+    label = props.label,
+    labelId = props.labelId,
+    name = props.name,
+    noValidate = props.noValidate,
     onSubmit = props.onSubmit,
-    testId = props.testId;
+    testId = props.testId,
+    xcss = props.xcss;
   var formRef = (0, _react.useRef)(null);
   var onSubmitRef = (0, _react.useRef)(onSubmit);
   onSubmitRef.current = onSubmit;
@@ -146,14 +154,29 @@ function Form(props) {
       subscribe: form.subscribe
     };
   }, [registerField, getCurrentValue, form.subscribe]);
+  var conditionalFormProps = {
+    autocomplete: autocomplete,
+    className: xcss,
+    id: id,
+    'aria-label': label,
+    'aria-labelledby': labelId,
+    name: name,
+    noValidate: noValidate,
+    'data-testid': testId
+  };
 
   // Abstracting so we can use the same for both rendering patterns
-  var formProps = _objectSpread({
+  var formProps = {
     onKeyDown: handleKeyDown,
     onSubmit: handleSubmit,
-    ref: formRef
-  }, testId && {
-    'data-testid': testId
+    ref: ref ? (0, _mergeRefs.default)([ref, formRef]) : formRef
+  };
+
+  // We don't want to add undefined values to the component
+  Object.keys(conditionalFormProps).forEach(function (attr) {
+    if (conditionalFormProps[attr] !== undefined) {
+      formProps[attr] = conditionalFormProps[attr];
+    }
   });
   var childrenContent = function () {
     if (typeof children === 'function') {
@@ -183,4 +206,16 @@ function Form(props) {
   }, /*#__PURE__*/_react.default.createElement(IsDisabledContext.Provider, {
     value: isDisabled
   }, childrenContent));
-}
+};
+
+/**
+ * __Form__
+ *
+ * A form allows users to input information.
+ *
+ * - [Examples](https://atlassian.design/components/form/examples)
+ * - [Code](https://atlassian.design/components/form/code)
+ * - [Usage](https://atlassian.design/components/form/usage)
+ */
+var Form = (0, _forwardRefWithGeneric.default)(FormBase);
+var _default = exports.default = Form;

package/dist/es2019/field.js

@@ -3,7 +3,6 @@ import "./field.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { FieldId } from './field-id-context';
 import { FormContext, IsDisabledContext } from './form';
 import { Label } from './label';
@@ -246,7 +245,7 @@ export default function Field(props) {
     testId: props.testId && `${props.testId}--label`
   }, props.label, props.isRequired && /*#__PURE__*/React.createElement(RequiredAsterisk, null), props.elementAfterLabel), /*#__PURE__*/React.createElement(FieldId.Provider, {
     value: fieldId
-  }, component && fg('platform_design-system-team_field-upgrade') ? /*#__PURE__*/React.createElement(React.Fragment, null, component && component({
+  }, component ? /*#__PURE__*/React.createElement(React.Fragment, null, component({
     fieldProps: extendedFieldProps
   }), /*#__PURE__*/React.createElement(MessageWrapper, null, props.helperMessage && /*#__PURE__*/React.createElement(HelperMessage, null, props.helperMessage), state.error && /*#__PURE__*/React.createElement(ErrorMessage, null, props.errorMessage || state.error), state.meta.touched && state.valid && props.validMessage && /*#__PURE__*/React.createElement(ValidMessage, null, props.validMessage))) : children({
     fieldProps: extendedFieldProps,

package/dist/es2019/form.js

@@ -3,6 +3,8 @@ import React, { createContext, useCallback, useEffect, useMemo, useRef, useState
 import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
 import set from 'lodash/set';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getFirstErrorField } from './utils';
 /**
@@ -26,11 +28,18 @@ export const FormContext = /*#__PURE__*/createContext({
  * An is disabled context creates the context for when a value is disabled.
  */
 export const IsDisabledContext = /*#__PURE__*/createContext(false);
-export default function Form(props) {
+const FormBase = (props, ref) => {
   const {
+    autocomplete,
     formProps: userProvidedFormProps,
+    id,
+    label,
+    labelId,
+    name,
+    noValidate,
     onSubmit,
-    testId
+    testId,
+    xcss
   } = props;
   const formRef = useRef(null);
   const onSubmitRef = useRef(onSubmit);
@@ -124,16 +133,30 @@ export default function Form(props) {
       subscribe: form.subscribe
     };
   }, [registerField, getCurrentValue, form.subscribe]);
+  const conditionalFormProps = {
+    autocomplete,
+    className: xcss,
+    id,
+    'aria-label': label,
+    'aria-labelledby': labelId,
+    name,
+    noValidate,
+    'data-testid': testId
+  };
 
   // Abstracting so we can use the same for both rendering patterns
   const formProps = {
     onKeyDown: handleKeyDown,
     onSubmit: handleSubmit,
-    ref: formRef,
-    ...(testId && {
-      'data-testid': testId
-    })
+    ref: ref ? mergeRefs([ref, formRef]) : formRef
   };
+
+  // We don't want to add undefined values to the component
+  Object.keys(conditionalFormProps).forEach(attr => {
+    if (conditionalFormProps[attr] !== undefined) {
+      formProps[attr] = conditionalFormProps[attr];
+    }
+  });
   const childrenContent = (() => {
     if (typeof children === 'function') {
       const result = children.length > 0 ? children({
@@ -159,4 +182,16 @@ export default function Form(props) {
   }, /*#__PURE__*/React.createElement(IsDisabledContext.Provider, {
     value: isDisabled
   }, childrenContent));
-}
+};
+
+/**
+ * __Form__
+ *
+ * A form allows users to input information.
+ *
+ * - [Examples](https://atlassian.design/components/form/examples)
+ * - [Code](https://atlassian.design/components/form/code)
+ * - [Usage](https://atlassian.design/components/form/usage)
+ */
+const Form = forwardRefWithGeneric(FormBase);
+export default Form;

package/dist/esm/field.js

@@ -8,7 +8,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { FieldId } from './field-id-context';
 import { FormContext, IsDisabledContext } from './form';
 import { Label } from './label';
@@ -254,7 +253,7 @@ export default function Field(props) {
     testId: props.testId && "".concat(props.testId, "--label")
   }, props.label, props.isRequired && /*#__PURE__*/React.createElement(RequiredAsterisk, null), props.elementAfterLabel), /*#__PURE__*/React.createElement(FieldId.Provider, {
     value: fieldId
-  }, component && fg('platform_design-system-team_field-upgrade') ? /*#__PURE__*/React.createElement(React.Fragment, null, component && component({
+  }, component ? /*#__PURE__*/React.createElement(React.Fragment, null, component({
     fieldProps: extendedFieldProps
   }), /*#__PURE__*/React.createElement(MessageWrapper, null, props.helperMessage && /*#__PURE__*/React.createElement(HelperMessage, null, props.helperMessage), state.error && /*#__PURE__*/React.createElement(ErrorMessage, null, props.errorMessage || state.error), state.meta.touched && state.valid && props.validMessage && /*#__PURE__*/React.createElement(ValidMessage, null, props.validMessage))) : children({
     fieldProps: extendedFieldProps,

package/dist/esm/form.js

@@ -7,6 +7,8 @@ import React, { createContext, useCallback, useEffect, useMemo, useRef, useState
 import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
 import set from 'lodash/set';
+import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
+import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getFirstErrorField } from './utils';
 /**
@@ -32,10 +34,17 @@ export var FormContext = /*#__PURE__*/createContext({
  * An is disabled context creates the context for when a value is disabled.
  */
 export var IsDisabledContext = /*#__PURE__*/createContext(false);
-export default function Form(props) {
-  var userProvidedFormProps = props.formProps,
+var FormBase = function FormBase(props, ref) {
+  var autocomplete = props.autocomplete,
+    userProvidedFormProps = props.formProps,
+    id = props.id,
+    label = props.label,
+    labelId = props.labelId,
+    name = props.name,
+    noValidate = props.noValidate,
     onSubmit = props.onSubmit,
-    testId = props.testId;
+    testId = props.testId,
+    xcss = props.xcss;
   var formRef = useRef(null);
   var onSubmitRef = useRef(onSubmit);
   onSubmitRef.current = onSubmit;
@@ -136,14 +145,29 @@ export default function Form(props) {
       subscribe: form.subscribe
     };
   }, [registerField, getCurrentValue, form.subscribe]);
+  var conditionalFormProps = {
+    autocomplete: autocomplete,
+    className: xcss,
+    id: id,
+    'aria-label': label,
+    'aria-labelledby': labelId,
+    name: name,
+    noValidate: noValidate,
+    'data-testid': testId
+  };
 
   // Abstracting so we can use the same for both rendering patterns
-  var formProps = _objectSpread({
+  var formProps = {
     onKeyDown: handleKeyDown,
     onSubmit: handleSubmit,
-    ref: formRef
-  }, testId && {
-    'data-testid': testId
+    ref: ref ? mergeRefs([ref, formRef]) : formRef
+  };
+
+  // We don't want to add undefined values to the component
+  Object.keys(conditionalFormProps).forEach(function (attr) {
+    if (conditionalFormProps[attr] !== undefined) {
+      formProps[attr] = conditionalFormProps[attr];
+    }
   });
   var childrenContent = function () {
     if (typeof children === 'function') {
@@ -173,4 +197,16 @@ export default function Form(props) {
   }, /*#__PURE__*/React.createElement(IsDisabledContext.Provider, {
     value: isDisabled
   }, childrenContent));
-}
+};
+
+/**
+ * __Form__
+ *
+ * A form allows users to input information.
+ *
+ * - [Examples](https://atlassian.design/components/form/examples)
+ * - [Code](https://atlassian.design/components/form/code)
+ * - [Usage](https://atlassian.design/components/form/usage)
+ */
+var Form = forwardRefWithGeneric(FormBase);
+export default Form;

package/dist/types/form.d.ts

@@ -1,5 +1,6 @@
 import React, { type ReactNode } from 'react';
 import { type FieldConfig, type FieldSubscriber, type FieldSubscription, type FormApi, type FormState, type Unsubscribe } from 'final-form';
+import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css';
 import { type OnSubmitHandler } from './types';
 type DefaultValue<FieldValue> = (value?: FieldValue) => FieldValue;
 type RegisterField = <FieldValue>(name: string, defaultValue: FieldValue | DefaultValue<FieldValue>, subscriber: FieldSubscriber<FieldValue>, subscription: FieldSubscription, config: FieldConfig<FieldValue>) => Unsubscribe;
@@ -21,7 +22,7 @@ export declare const FormContext: React.Context<{
  */
 export declare const IsDisabledContext: React.Context<boolean>;
 interface FormChildrenProps {
-    ref: React.RefObject<HTMLFormElement>;
+    ref: React.RefObject<HTMLFormElement> | ((value: HTMLFormElement | null) => void);
     onSubmit: (event?: React.FormEvent<HTMLFormElement> | React.SyntheticEvent<HTMLElement>) => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
 }
@@ -37,11 +38,22 @@ type FormChildrenArgs<FormValues> = {
     reset: (initialValues?: FormValues) => void;
 };
 type ExcludeReservedFormProps = {
+    autocomplete?: never;
+    id?: never;
+    label?: never;
+    labelId?: never;
     onKeyDown?: never;
     onSubmit?: never;
+    name?: never;
+    noValidate?: never;
     ref?: never;
+    xcss?: never;
 };
 export interface FormProps<FormValues> {
+    /**
+     * Indicates whether the value of the form's controls can be automatically completed by the browser. It is `on` by default.
+     */
+    autocomplete?: 'off' | 'on';
     /**
      *  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).
@@ -56,17 +68,53 @@ export interface FormProps<FormValues> {
         [x: string]: any;
     } & ExcludeReservedFormProps;
     /**
-     *   Event handler called when the form is submitted. Fields must be free of validation errors.
+     * `id` attribute applied to the `form` element.
+     */
+    id?: string;
+    /**
+     * Accessible name to be applied to the form element. Maps to the `aria-label` attribute.
+     */
+    label?: string;
+    /**
+     * ID of the element that has the accessible name to be applied to the form element. Maps to the `aria-labelledby` attribute.
+     */
+    labelId?: string;
+    /**
+     * Event handler called when the form is submitted. Fields must be free of validation errors.
      */
     onSubmit: OnSubmitHandler<FormValues>;
     /**
-     *   Sets the form and its fields as disabled. Users cannot edit or focus on the fields.
+     * Sets the form and its fields as disabled. Users cannot edit or focus on the fields.
      */
     isDisabled?: boolean;
+    /**
+     * `name` attribute applied to the `form` element.
+     */
+    name?: string;
+    /**
+     * Indicates if the inputs within the form will bypass HTML5 constraint
+     * validation when submitted. This is not recommended to be used because it
+     * can cause experiences to be inaccessible. It is `false` by default but will
+     * be set to `true` in the future to increase accessibility, so it is **not recommended**.
+     */
+    noValidate?: boolean;
     /**
      * A test identifier for the form element. This will be applied as `data-testid` attribute.
      */
     testId?: string;
+    /**
+     * Apply a subset of permitted styles powered by Atlassian Design System design tokens.
+     */
+    xcss?: StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
 }
-export default function Form<FormValues extends Record<string, any> = {}>(props: FormProps<FormValues>): React.JSX.Element;
-export {};
+/**
+ * __Form__
+ *
+ * A form allows users to input information.
+ *
+ * - [Examples](https://atlassian.design/components/form/examples)
+ * - [Code](https://atlassian.design/components/form/code)
+ * - [Usage](https://atlassian.design/components/form/usage)
+ */
+declare const Form: <FormValues extends Record<string, any> = {}>(props: FormProps<FormValues> & React.RefAttributes<HTMLFormElement>) => React.ReactElement | null;
+export default Form;

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

@@ -1,5 +1,6 @@
 import React, { type ReactNode } from 'react';
 import { type FieldConfig, type FieldSubscriber, type FieldSubscription, type FormApi, type FormState, type Unsubscribe } from 'final-form';
+import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css';
 import { type OnSubmitHandler } from './types';
 type DefaultValue<FieldValue> = (value?: FieldValue) => FieldValue;
 type RegisterField = <FieldValue>(name: string, defaultValue: FieldValue | DefaultValue<FieldValue>, subscriber: FieldSubscriber<FieldValue>, subscription: FieldSubscription, config: FieldConfig<FieldValue>) => Unsubscribe;
@@ -21,7 +22,7 @@ export declare const FormContext: React.Context<{
  */
 export declare const IsDisabledContext: React.Context<boolean>;
 interface FormChildrenProps {
-    ref: React.RefObject<HTMLFormElement>;
+    ref: React.RefObject<HTMLFormElement> | ((value: HTMLFormElement | null) => void);
     onSubmit: (event?: React.FormEvent<HTMLFormElement> | React.SyntheticEvent<HTMLElement>) => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
 }
@@ -37,11 +38,22 @@ type FormChildrenArgs<FormValues> = {
     reset: (initialValues?: FormValues) => void;
 };
 type ExcludeReservedFormProps = {
+    autocomplete?: never;
+    id?: never;
+    label?: never;
+    labelId?: never;
     onKeyDown?: never;
     onSubmit?: never;
+    name?: never;
+    noValidate?: never;
     ref?: never;
+    xcss?: never;
 };
 export interface FormProps<FormValues> {
+    /**
+     * Indicates whether the value of the form's controls can be automatically completed by the browser. It is `on` by default.
+     */
+    autocomplete?: 'off' | 'on';
     /**
      *  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).
@@ -56,17 +68,53 @@ export interface FormProps<FormValues> {
         [x: string]: any;
     } & ExcludeReservedFormProps;
     /**
-     *   Event handler called when the form is submitted. Fields must be free of validation errors.
+     * `id` attribute applied to the `form` element.
+     */
+    id?: string;
+    /**
+     * Accessible name to be applied to the form element. Maps to the `aria-label` attribute.
+     */
+    label?: string;
+    /**
+     * ID of the element that has the accessible name to be applied to the form element. Maps to the `aria-labelledby` attribute.
+     */
+    labelId?: string;
+    /**
+     * Event handler called when the form is submitted. Fields must be free of validation errors.
      */
     onSubmit: OnSubmitHandler<FormValues>;
     /**
-     *   Sets the form and its fields as disabled. Users cannot edit or focus on the fields.
+     * Sets the form and its fields as disabled. Users cannot edit or focus on the fields.
      */
     isDisabled?: boolean;
+    /**
+     * `name` attribute applied to the `form` element.
+     */
+    name?: string;
+    /**
+     * Indicates if the inputs within the form will bypass HTML5 constraint
+     * validation when submitted. This is not recommended to be used because it
+     * can cause experiences to be inaccessible. It is `false` by default but will
+     * be set to `true` in the future to increase accessibility, so it is **not recommended**.
+     */
+    noValidate?: boolean;
     /**
      * A test identifier for the form element. This will be applied as `data-testid` attribute.
      */
     testId?: string;
+    /**
+     * Apply a subset of permitted styles powered by Atlassian Design System design tokens.
+     */
+    xcss?: StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
 }
-export default function Form<FormValues extends Record<string, any> = {}>(props: FormProps<FormValues>): React.JSX.Element;
-export {};
+/**
+ * __Form__
+ *
+ * A form allows users to input information.
+ *
+ * - [Examples](https://atlassian.design/components/form/examples)
+ * - [Code](https://atlassian.design/components/form/code)
+ * - [Usage](https://atlassian.design/components/form/usage)
+ */
+declare const Form: <FormValues extends Record<string, any> = {}>(props: FormProps<FormValues> & React.RefAttributes<HTMLFormElement>) => React.ReactElement | null;
+export default Form;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/form",
-	"version": "14.0.0",
+	"version": "14.2.0",
 	"description": "A form allows users to input information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/ds-lib": "^5.1.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^28.2.0",
+		"@atlaskit/icon": "^28.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.15.0",
 		"@atlaskit/tokens": "^6.3.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/docs": "^11.1.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/lozenge": "^13.0.0",
-		"@atlaskit/modal-dialog": "^14.3.0",
+		"@atlaskit/modal-dialog": "^14.4.0",
 		"@atlaskit/radio": "^8.3.0",
 		"@atlaskit/range": "^9.2.0",
 		"@atlaskit/section-message": "^8.7.0",
@@ -110,9 +110,6 @@
 		"platform_dst_form_screenreader_message_fix": {
 			"type": "boolean"
 		},
-		"platform_design-system-team_field-upgrade": {
-			"type": "boolean"
-		},
 		"platform-form-field-error-focus": {
 			"type": "boolean"
 		},