@atlaskit/form 12.2.1 → 12.3.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/form
 
+## 12.3.0
+
+### Minor Changes
+
+- [`c247b696ec62a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c247b696ec62a) -
+  We are testing removing spread props for checkbox field behind a feature flag. If this fix is
+  successful it will be implemented in a later release.
+
+## 12.2.2
+
+### Patch Changes
+
+- [`543068f818b30`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/543068f818b30) -
+  Remove unused internal invariant for the field component.
+
 ## 12.2.1
 
 ### Patch Changes

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

@@ -502,6 +502,204 @@ const formElement = (
       `,
 		'should convert from function with multiple 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'} baz={{ qux: 'qux' }}>
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo={'bar'} baz={{ qux: 'qux' }}>
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} foo={'bar'} baz={{ qux: 'qux' }}>
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo={'bar'} baz={{ qux: 'qux' }}>
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form
+    onSubmit={() => {}}
+    formProps={{
+      foo: 'bar',
+      baz: { qux: 'qux' }
+    }}><input /></Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form
+      onSubmit={() => {}}
+      formProps={{
+        foo: 'bar',
+        baz: { qux: 'qux' }
+      }}><input /></Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form
+        onSubmit={() => {}}
+        formProps={{
+          foo: 'bar',
+          baz: { qux: 'qux' }
+        }}><input /></Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form
+    onSubmit={() => {}}
+    formProps={{
+      foo: 'bar',
+      baz: { qux: 'qux' }
+    }}><input /></Form>
+);
+      `,
+		'should convert from function with multiple expression container 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>
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo>
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} foo>
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo>
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => (
+  <Form
+    onSubmit={() => {}}
+    formProps={{
+      foo: true
+    }}><input /></Form>
+);
+
+const FormComponent2 = () => (
+  <>
+    <Form
+      onSubmit={() => {}}
+      formProps={{
+        foo: true
+      }}><input /></Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return (
+      <Form
+        onSubmit={() => {}}
+        formProps={{
+          foo: true
+        }}><input /></Form>
+    );
+  }
+}
+
+const formElement = (
+  <Form
+    onSubmit={() => {}}
+    formProps={{
+      foo: true
+    }}><input /></Form>
+);
+      `,
+		'should convert from function with boolean props on form',
+	);
 });
 
 describe('Do not migrate Form when anything more than `formProps` in child arg', () => {

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

@@ -4,7 +4,6 @@ import {
 	type JSCodeshift,
 	type JSXElement,
 	type Options,
-	type Property,
 } from 'jscodeshift';
 import { type Collection } from 'jscodeshift/src/Collection';
 
@@ -97,7 +96,8 @@ const convertToSimpleForm = (j: JSCodeshift, collection: Collection<any>) => {
 		// 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[] = [];
+		// We also have to use `any` here and below because typing in this SUCKS.
+		const nonFormPropsAttributes: any[] = [];
 		htmlForm?.openingElement?.attributes?.forEach((attr) => {
 			if (otherSpreadPropsSeen) {
 				return;
@@ -120,11 +120,13 @@ const convertToSimpleForm = (j: JSCodeshift, collection: Collection<any>) => {
 				return;
 			}
 
-			let value;
+			let value: any;
 			if (attr.value === null) {
-				value = j.nullLiteral();
+				value = j.booleanLiteral(true) as any;
+			} else if (attr.value.type === 'JSXExpressionContainer') {
+				value = attr.value.expression as any;
 			} else {
-				value = attr.value;
+				value = attr.value as any;
 			}
 
 			nonFormPropsAttributes.push(j.property('init', attr.name, value));

package/dist/cjs/checkbox-field.js

@@ -11,6 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _field = _interopRequireDefault(require("./field"));
 var _excluded = ["children", "defaultIsChecked", "isDisabled", "isRequired", "label", "name", "value"],
   _excluded2 = ["value"],
@@ -44,7 +45,7 @@ var CheckboxField = function CheckboxField(_ref) {
     var currentValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return defaultIsChecked && value !== undefined ? [].concat((0, _toConsumableArray2.default)(currentValue), [value]) : currentValue;
   }, [value, defaultIsChecked]);
-  return value !== undefined ? /*#__PURE__*/_react.default.createElement(_field.default, (0, _extends2.default)({}, rest, {
+  return value !== undefined ? /*#__PURE__*/_react.default.createElement(_field.default, (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform_design-system-team_checkbox-field-spread') ? {} : _objectSpread({}, rest), {
     defaultValue: defaultValue,
     isDisabled: isDisabled,
     isRequired: isRequired,
@@ -68,7 +69,7 @@ var CheckboxField = function CheckboxField(_ref) {
         value: value
       })
     }, others));
-  }) : /*#__PURE__*/_react.default.createElement(_field.default, (0, _extends2.default)({}, rest, {
+  }) : /*#__PURE__*/_react.default.createElement(_field.default, (0, _extends2.default)({}, (0, _platformFeatureFlags.fg)('platform_design-system-team_checkbox-field-spread') ? {} : _objectSpread({}, rest), {
     defaultValue: defaultIsChecked,
     isDisabled: isDisabled,
     isRequired: isRequired,

package/dist/cjs/field.js

@@ -14,7 +14,6 @@ var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _fieldIdContext = require("./field-id-context");
 var _form = require("./form");
@@ -118,9 +117,6 @@ function Field(props) {
     setState = _useState2[1];
   var latestStateRef = usePreviousRef(state);
   (0, _react.useEffect)(function () {
-    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !process.env.CI) {
-      (0, _tinyInvariant.default)(latestPropsRef.current.name, '@atlaskit/form: Field components have a required name prop');
-    }
     function fieldStateToMeta() {
       var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return {

package/dist/es2019/checkbox-field.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Field from './field';
 /**
  * __Checkbox field__
@@ -22,7 +23,9 @@ const CheckboxField = ({
 }) => {
   // Maintains a memoised list of the default values
   const defaultValue = useCallback((currentValue = []) => defaultIsChecked && value !== undefined ? [...currentValue, value] : currentValue, [value, defaultIsChecked]);
-  return value !== undefined ? /*#__PURE__*/React.createElement(Field, _extends({}, rest, {
+  return value !== undefined ? /*#__PURE__*/React.createElement(Field, _extends({}, fg('platform_design-system-team_checkbox-field-spread') ? {} : {
+    ...rest
+  }, {
     defaultValue: defaultValue,
     isDisabled: isDisabled,
     isRequired: isRequired,
@@ -42,7 +45,9 @@ const CheckboxField = ({
       value
     },
     ...others
-  })) : /*#__PURE__*/React.createElement(Field, _extends({}, rest, {
+  })) : /*#__PURE__*/React.createElement(Field, _extends({}, fg('platform_design-system-team_checkbox-field-spread') ? {} : {
+    ...rest
+  }, {
     defaultValue: defaultIsChecked,
     isDisabled: isDisabled,
     isRequired: isRequired,

package/dist/es2019/field.js

@@ -3,7 +3,6 @@ import "./field.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { FieldId } from './field-id-context';
 import { FormContext, IsDisabledContext } from './form';
@@ -102,9 +101,6 @@ export default function Field(props) {
   });
   const latestStateRef = usePreviousRef(state);
   useEffect(() => {
-    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !process.env.CI) {
-      invariant(latestPropsRef.current.name, '@atlaskit/form: Field components have a required name prop');
-    }
     function fieldStateToMeta(value = {}) {
       return {
         dirty: value.dirty || false,

package/dist/esm/checkbox-field.js

@@ -10,6 +10,7 @@ var _excluded = ["children", "defaultIsChecked", "isDisabled", "isRequired", "la
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Field from './field';
 /**
  * __Checkbox field__
@@ -35,7 +36,7 @@ var CheckboxField = function CheckboxField(_ref) {
     var currentValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return defaultIsChecked && value !== undefined ? [].concat(_toConsumableArray(currentValue), [value]) : currentValue;
   }, [value, defaultIsChecked]);
-  return value !== undefined ? /*#__PURE__*/React.createElement(Field, _extends({}, rest, {
+  return value !== undefined ? /*#__PURE__*/React.createElement(Field, _extends({}, fg('platform_design-system-team_checkbox-field-spread') ? {} : _objectSpread({}, rest), {
     defaultValue: defaultValue,
     isDisabled: isDisabled,
     isRequired: isRequired,
@@ -59,7 +60,7 @@ var CheckboxField = function CheckboxField(_ref) {
         value: value
       })
     }, others));
-  }) : /*#__PURE__*/React.createElement(Field, _extends({}, rest, {
+  }) : /*#__PURE__*/React.createElement(Field, _extends({}, fg('platform_design-system-team_checkbox-field-spread') ? {} : _objectSpread({}, rest), {
     defaultValue: defaultIsChecked,
     isDisabled: isDisabled,
     isRequired: isRequired,

package/dist/esm/field.js

@@ -8,7 +8,6 @@ import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { FieldId } from './field-id-context';
 import { FormContext, IsDisabledContext } from './form';
@@ -109,9 +108,6 @@ export default function Field(props) {
     setState = _useState2[1];
   var latestStateRef = usePreviousRef(state);
   useEffect(function () {
-    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !process.env.CI) {
-      invariant(latestPropsRef.current.name, '@atlaskit/form: Field components have a required name prop');
-    }
     function fieldStateToMeta() {
       var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return {

package/dist/types/range-field.d.ts

@@ -2,6 +2,9 @@ import React, { type ReactNode } from 'react';
 import { type FieldProps, type Meta } from './field';
 type RangeProps = Omit<FieldProps<number>, 'isInvalid' | 'isRequired'>;
 export interface RangeFieldProps {
+    /**
+     * Content to render in the range field. This function is called with props for the field component and other information about the field.
+     */
     children: (args: {
         fieldProps: RangeProps;
         error?: string;

package/dist/types-ts4.5/range-field.d.ts

@@ -2,6 +2,9 @@ import React, { type ReactNode } from 'react';
 import { type FieldProps, type Meta } from './field';
 type RangeProps = Omit<FieldProps<number>, 'isInvalid' | 'isRequired'>;
 export interface RangeFieldProps {
+    /**
+     * Content to render in the range field. This function is called with props for the field component and other information about the field.
+     */
     children: (args: {
         fieldProps: RangeProps;
         error?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/form",
-	"version": "12.2.1",
+	"version": "12.3.0",
 	"description": "A form allows users to input information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,8 +36,7 @@
 		"@babel/runtime": "^7.0.0",
 		"final-form": "^4.20.3",
 		"final-form-focus": "^1.1.2",
-		"lodash": "^4.17.21",
-		"tiny-invariant": "^1.2.0"
+		"lodash": "^4.17.21"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
@@ -55,7 +54,7 @@
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/lozenge": "^13.0.0",
 		"@atlaskit/modal-dialog": "^14.3.0",
-		"@atlaskit/radio": "^8.2.0",
+		"@atlaskit/radio": "^8.3.0",
 		"@atlaskit/range": "^9.2.0",
 		"@atlaskit/section-message": "^8.6.0",
 		"@atlaskit/select": "^21.2.0",
@@ -127,6 +126,9 @@
 		},
 		"platform_design-system-team_form-upgrade": {
 			"type": "boolean"
+		},
+		"platform_design-system-team_checkbox-field-spread": {
+			"type": "boolean"
 		}
 	}
 }