@atlaskit/form 10.5.11 → 10.6.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/form
 
+## 10.6.0
+
+### Minor Changes
+
+- [#168743](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168743)
+  [`b27dba8a5f3cd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b27dba8a5f3cd) -
+  Update types to improve compatibility with React 18.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.5.12
+
+### Patch Changes
+
+- [#165531](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165531)
+  [`57f451bda8919`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57f451bda8919) -
+  Adds side-effect config to support Compiled css extraction in third-party apps
+
 ## 10.5.11
 
 ### Patch Changes

package/CheckboxField/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/entry-points/checkbox-field.js",
   "module": "../dist/esm/entry-points/checkbox-field.js",
   "module:es2019": "../dist/es2019/entry-points/checkbox-field.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/entry-points/checkbox-field.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/Field/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/entry-points/field.js",
   "module": "../dist/esm/entry-points/field.js",
   "module:es2019": "../dist/es2019/entry-points/field.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/entry-points/field.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/Fieldset/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/entry-points/fieldset.js",
   "module": "../dist/esm/entry-points/fieldset.js",
   "module:es2019": "../dist/es2019/entry-points/fieldset.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/entry-points/fieldset.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/Form/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/entry-points/form.js",
   "module": "../dist/esm/entry-points/form.js",
   "module:es2019": "../dist/es2019/entry-points/form.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/entry-points/form.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/FormFooter/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/entry-points/form-footer.js",
   "module": "../dist/esm/entry-points/form-footer.js",
   "module:es2019": "../dist/es2019/entry-points/form-footer.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/entry-points/form-footer.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/FormHeader/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/entry-points/form-header.js",
   "module": "../dist/esm/entry-points/form-header.js",
   "module:es2019": "../dist/es2019/entry-points/form-header.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/entry-points/form-header.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/FormSection/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/entry-points/form-section.js",
   "module": "../dist/esm/entry-points/form-section.js",
   "module:es2019": "../dist/es2019/entry-points/form-section.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/entry-points/form-section.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/Label/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/entry-points/label.js",
   "module": "../dist/esm/entry-points/label.js",
   "module:es2019": "../dist/es2019/entry-points/label.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/entry-points/label.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/Messages/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/entry-points/messages.js",
   "module": "../dist/esm/entry-points/messages.js",
   "module:es2019": "../dist/es2019/entry-points/messages.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/entry-points/messages.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/RangeField/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/entry-points/range-field.js",
   "module": "../dist/esm/entry-points/range-field.js",
   "module:es2019": "../dist/es2019/entry-points/range-field.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/entry-points/range-field.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/dist/cjs/form.js

@@ -141,27 +141,33 @@ function Form(props) {
       subscribe: form.subscribe
     };
   }, [registerField, getCurrentValue, form.subscribe]);
+  var childrenContent = function () {
+    if (typeof children === 'function') {
+      var result = children.length > 0 ? children({
+        formProps: {
+          onSubmit: handleSubmit,
+          ref: formRef,
+          onKeyDown: handleKeyDown
+        },
+        dirty: dirty,
+        reset: handleReset,
+        submitting: submitting,
+        disabled: isDisabled,
+        getState: function getState() {
+          return form.getState();
+        },
+        getValues: function getValues() {
+          return form.getState().values;
+        },
+        setFieldValue: form.change
+      }) : children();
+      return result === undefined ? null : result;
+    }
+    return children;
+  }();
   return /*#__PURE__*/_react.default.createElement(FormContext.Provider, {
     value: FormContextValue
   }, /*#__PURE__*/_react.default.createElement(IsDisabledContext.Provider, {
     value: isDisabled
-  }, children({
-    formProps: {
-      onSubmit: handleSubmit,
-      ref: formRef,
-      onKeyDown: handleKeyDown
-    },
-    dirty: dirty,
-    reset: handleReset,
-    submitting: submitting,
-    disabled: isDisabled,
-    getState: function getState() {
-      return form.getState();
-    },
-    getValues: function getValues() {
-      return form.getState().values;
-    },
-    // TODO: deprecate
-    setFieldValue: form.change
-  })));
+  }, childrenContent));
 }

package/dist/es2019/form.js

@@ -119,23 +119,29 @@ export default function Form(props) {
       subscribe: form.subscribe
     };
   }, [registerField, getCurrentValue, form.subscribe]);
+  const childrenContent = (() => {
+    if (typeof children === 'function') {
+      const result = children.length > 0 ? children({
+        formProps: {
+          onSubmit: handleSubmit,
+          ref: formRef,
+          onKeyDown: handleKeyDown
+        },
+        dirty,
+        reset: handleReset,
+        submitting,
+        disabled: isDisabled,
+        getState: () => form.getState(),
+        getValues: () => form.getState().values,
+        setFieldValue: form.change
+      }) : children();
+      return result === undefined ? null : result;
+    }
+    return children;
+  })();
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: FormContextValue
   }, /*#__PURE__*/React.createElement(IsDisabledContext.Provider, {
     value: isDisabled
-  }, children({
-    formProps: {
-      onSubmit: handleSubmit,
-      ref: formRef,
-      onKeyDown: handleKeyDown
-    },
-    dirty,
-    reset: handleReset,
-    submitting,
-    disabled: isDisabled,
-    getState: () => form.getState(),
-    getValues: () => form.getState().values,
-    // TODO: deprecate
-    setFieldValue: form.change
-  })));
+  }, childrenContent));
 }

package/dist/esm/form.js

@@ -130,27 +130,33 @@ export default function Form(props) {
       subscribe: form.subscribe
     };
   }, [registerField, getCurrentValue, form.subscribe]);
+  var childrenContent = function () {
+    if (typeof children === 'function') {
+      var result = children.length > 0 ? children({
+        formProps: {
+          onSubmit: handleSubmit,
+          ref: formRef,
+          onKeyDown: handleKeyDown
+        },
+        dirty: dirty,
+        reset: handleReset,
+        submitting: submitting,
+        disabled: isDisabled,
+        getState: function getState() {
+          return form.getState();
+        },
+        getValues: function getValues() {
+          return form.getState().values;
+        },
+        setFieldValue: form.change
+      }) : children();
+      return result === undefined ? null : result;
+    }
+    return children;
+  }();
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: FormContextValue
   }, /*#__PURE__*/React.createElement(IsDisabledContext.Provider, {
     value: isDisabled
-  }, children({
-    formProps: {
-      onSubmit: handleSubmit,
-      ref: formRef,
-      onKeyDown: handleKeyDown
-    },
-    dirty: dirty,
-    reset: handleReset,
-    submitting: submitting,
-    disabled: isDisabled,
-    getState: function getState() {
-      return form.getState();
-    },
-    getValues: function getValues() {
-      return form.getState().values;
-    },
-    // TODO: deprecate
-    setFieldValue: form.change
-  })));
+  }, childrenContent));
 }

package/dist/types/form.d.ts

@@ -25,24 +25,22 @@ interface FormChildrenProps {
     onSubmit: (event?: React.FormEvent<HTMLFormElement> | React.SyntheticEvent<HTMLElement>) => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
 }
+type FormChildrenArgs<FormValues> = {
+    formProps: FormChildrenProps;
+    disabled: boolean;
+    dirty: boolean;
+    submitting: boolean;
+    getState: () => FormState<FormValues>;
+    getValues: () => FormValues;
+    setFieldValue: (name: string, value: any) => void;
+    reset: (initialValues?: FormValues) => void;
+};
 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: {
-        formProps: FormChildrenProps;
-        disabled: boolean;
-        dirty: boolean;
-        submitting: boolean;
-        getState: () => FormState<FormValues>;
-        /**
-         * @deprecated
-         */
-        getValues: () => FormValues;
-        setFieldValue: (name: string, value: any) => void;
-        reset: (initialValues?: FormValues) => void;
-    }) => ReactNode;
+    children: ((args: FormChildrenArgs<FormValues>) => ReactNode) | (() => void) | ReactNode;
     /**
      *   Event handler called when the form is submitted. Fields must be free of validation errors.
      */

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

@@ -25,24 +25,22 @@ interface FormChildrenProps {
     onSubmit: (event?: React.FormEvent<HTMLFormElement> | React.SyntheticEvent<HTMLElement>) => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
 }
+type FormChildrenArgs<FormValues> = {
+    formProps: FormChildrenProps;
+    disabled: boolean;
+    dirty: boolean;
+    submitting: boolean;
+    getState: () => FormState<FormValues>;
+    getValues: () => FormValues;
+    setFieldValue: (name: string, value: any) => void;
+    reset: (initialValues?: FormValues) => void;
+};
 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: {
-        formProps: FormChildrenProps;
-        disabled: boolean;
-        dirty: boolean;
-        submitting: boolean;
-        getState: () => FormState<FormValues>;
-        /**
-         * @deprecated
-         */
-        getValues: () => FormValues;
-        setFieldValue: (name: string, value: any) => void;
-        reset: (initialValues?: FormValues) => void;
-    }) => ReactNode;
+    children: ((args: FormChildrenArgs<FormValues>) => ReactNode) | (() => void) | ReactNode;
     /**
      *   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": "10.5.11",
+	"version": "10.6.0",
 	"description": "A form allows users to input information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -12,24 +12,26 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"sideEffects": false,
+	"sideEffects": [
+		"**/*.compiled.css"
+	],
 	"atlaskit:src": "src/index.tsx",
 	"atlaskit:designLink": "https://atlassian.design/guidelines/product/patterns/forms",
 	"atlassian": {
 		"team": "Design System Team",
 		"website": {
 			"name": "Form",
-			"category": "Components"
+			"category": "Forms and input"
 		},
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/ds-lib": "^3.2.0",
-		"@atlaskit/heading": "^3.0.0",
-		"@atlaskit/icon": "^22.24.0",
-		"@atlaskit/primitives": "^13.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
+		"@atlaskit/heading": "^3.1.0",
+		"@atlaskit/icon": "^22.27.0",
+		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"final-form": "^4.20.3",
@@ -44,15 +46,15 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/banner": "^12.5.0",
+		"@atlaskit/banner": "^12.6.0",
 		"@atlaskit/button": "^20.3.0",
-		"@atlaskit/checkbox": "^15.1.0",
+		"@atlaskit/checkbox": "^15.2.0",
 		"@atlaskit/modal-dialog": "^12.17.0",
-		"@atlaskit/radio": "^6.5.0",
+		"@atlaskit/radio": "^6.6.0",
 		"@atlaskit/range": "^7.4.0",
-		"@atlaskit/select": "^18.5.0",
+		"@atlaskit/select": "^18.6.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/textfield": "^6.5.0",
+		"@atlaskit/textfield": "^6.6.0",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/react": "^12.1.5",