@atlaskit/form 8.5.7 → 8.5.9

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/form
 
+## 8.5.9
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 8.5.8
+
+### Patch Changes
+
+- [`0fbb2840aba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0fbb2840aba) - Add isInvalid prop to `@atlastkit/Select`. The prop indicates whether if the component is in the error state. If true, it visually shows a red border around the input.
+
+  This replaces validationState to make Select more consistent like other components that uses isInvalid prop.
+
+- Updated dependencies
+
 ## 8.5.7
 
 ### Patch Changes

package/CheckboxField/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/checkbox-field.js",
   "module:es2019": "../dist/es2019/entry-points/checkbox-field.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/checkbox-field.d.ts"
+  "types": "../dist/types/entry-points/checkbox-field.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/checkbox-field.d.ts"
+      ]
+    }
+  }
 }

package/Field/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/field.js",
   "module:es2019": "../dist/es2019/entry-points/field.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/field.d.ts"
+  "types": "../dist/types/entry-points/field.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/field.d.ts"
+      ]
+    }
+  }
 }

package/Fieldset/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/fieldset.js",
   "module:es2019": "../dist/es2019/entry-points/fieldset.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/fieldset.d.ts"
+  "types": "../dist/types/entry-points/fieldset.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/fieldset.d.ts"
+      ]
+    }
+  }
 }

package/Form/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/form.js",
   "module:es2019": "../dist/es2019/entry-points/form.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/form.d.ts"
+  "types": "../dist/types/entry-points/form.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/form.d.ts"
+      ]
+    }
+  }
 }

package/FormFooter/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/form-footer.js",
   "module:es2019": "../dist/es2019/entry-points/form-footer.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/form-footer.d.ts"
+  "types": "../dist/types/entry-points/form-footer.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/form-footer.d.ts"
+      ]
+    }
+  }
 }

package/FormHeader/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/form-header.js",
   "module:es2019": "../dist/es2019/entry-points/form-header.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/form-header.d.ts"
+  "types": "../dist/types/entry-points/form-header.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/form-header.d.ts"
+      ]
+    }
+  }
 }

package/FormSection/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/form-section.js",
   "module:es2019": "../dist/es2019/entry-points/form-section.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/form-section.d.ts"
+  "types": "../dist/types/entry-points/form-section.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/form-section.d.ts"
+      ]
+    }
+  }
 }

package/Label/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/label.js",
   "module:es2019": "../dist/es2019/entry-points/label.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/label.d.ts"
+  "types": "../dist/types/entry-points/label.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/label.d.ts"
+      ]
+    }
+  }
 }

package/Messages/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/messages.js",
   "module:es2019": "../dist/es2019/entry-points/messages.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/messages.d.ts"
+  "types": "../dist/types/entry-points/messages.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/messages.d.ts"
+      ]
+    }
+  }
 }

package/RangeField/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/entry-points/range-field.js",
   "module:es2019": "../dist/es2019/entry-points/range-field.js",
   "sideEffects": false,
-  "types": "../dist/types/entry-points/range-field.d.ts"
+  "types": "../dist/types/entry-points/range-field.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/entry-points/range-field.d.ts"
+      ]
+    }
+  }
 }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.5.7",
+	"version": "8.5.9",
 	"sideEffects": false
 }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.5.7",
+	"version": "8.5.9",
 	"sideEffects": false
 }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.5.7",
+	"version": "8.5.9",
 	"sideEffects": false
 }

package/dist/types-ts4.0/checkbox-field.d.ts

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from 'react';
+import { FieldProps, Meta } from './field';
+export interface CheckboxFieldProps extends FieldProps<string | undefined> {
+    isChecked: boolean;
+}
+export interface CheckboxProps {
+    /**
+     * Content to render in the checkbox field. This is a function that is called with information about the field.
+     */
+    children: (args: {
+        fieldProps: CheckboxFieldProps;
+        error?: string;
+        valid: boolean;
+        meta: Meta;
+    }) => ReactNode;
+    /**
+     * Sets the default state of the checkbox as checked.
+     */
+    defaultIsChecked?: boolean;
+    /**
+     * Sets whether the field is required for submission. Required fields are marked with a red asterisk.
+     */
+    isRequired?: boolean;
+    /**
+     * Sets whether the field is disabled. Users cannot edit or focus on the fields. If the parent form component is disabled, then the field will always be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Label displayed beside the checkbox.
+     */
+    label?: ReactNode;
+    /**
+     * Specifies the name of the field. This is important for referencing the form data.
+     */
+    name: string;
+    /**
+     * The value of the checkbox. This is the value used in the form state when the checkbox is checked.
+     */
+    value?: string;
+}
+/**
+ * __Checkbox field__
+ *
+ * A checkbox field is a form field that lets users select an item. Users can check or uncheck the checkbox.
+ *
+ * - [Examples] https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#checkboxfield-reference
+ * - [Code] https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#checkboxfield-reference
+ * - [Usage] https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#checkboxfield-reference
+ */
+declare const CheckboxField: FC<CheckboxProps>;
+export default CheckboxField;

package/dist/types-ts4.0/entry-points/checkbox-field.d.ts

@@ -0,0 +1,2 @@
+export { default as CheckboxField } from '../checkbox-field';
+export type { CheckboxFieldProps } from '../checkbox-field';

package/dist/types-ts4.0/entry-points/field.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../field';
+export type { FieldProps, Meta } from '../field';

package/dist/types-ts4.0/entry-points/fieldset.d.ts

@@ -0,0 +1 @@
+export { default as Fieldset } from '../fieldset';

package/dist/types-ts4.0/entry-points/form-footer.d.ts

@@ -0,0 +1 @@
+export { default as FormFooter } from '../form-footer';

package/dist/types-ts4.0/entry-points/form-header.d.ts

@@ -0,0 +1 @@
+export { default as FormHeader } from '../form-header';

package/dist/types-ts4.0/entry-points/form-section.d.ts

@@ -0,0 +1 @@
+export { default as FormSection } from '../form-section';

package/dist/types-ts4.0/entry-points/form.d.ts

@@ -0,0 +1 @@
+export { default } from '../form';

package/dist/types-ts4.0/entry-points/label.d.ts

@@ -0,0 +1,2 @@
+export { default as Label } from '../label';
+export type { LabelProps } from '../label';

package/dist/types-ts4.0/entry-points/messages.d.ts

@@ -0,0 +1 @@
+export { HelperMessage, ErrorMessage, ValidMessage } from '../messages';

package/dist/types-ts4.0/entry-points/range-field.d.ts

@@ -0,0 +1,2 @@
+export { default as RangeField } from '../range-field';
+export type { RangeFieldProps } from '../range-field';

package/dist/types-ts4.0/field.d.ts

@@ -0,0 +1,78 @@
+/** @jsx jsx */
+import { FormEvent, ReactNode } from 'react';
+declare type SupportedElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+export interface FieldProps<FieldValue, Element extends SupportedElements = HTMLInputElement> {
+    id: string;
+    isRequired: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
+    onChange: (value: FormEvent<Element> | FieldValue) => void;
+    onBlur: () => void;
+    onFocus: () => void;
+    value: FieldValue;
+    name: string;
+    'aria-invalid': 'true' | 'false';
+    'aria-labelledby': string;
+}
+export interface Meta {
+    dirty: boolean;
+    dirtySinceLastSubmit: boolean;
+    submitFailed: boolean;
+    submitting: boolean;
+    touched: boolean;
+    valid: boolean;
+    error?: string;
+    submitError?: boolean;
+    validating?: boolean;
+}
+export interface FieldComponentProps<FieldValue, Element extends SupportedElements> {
+    /**
+     * Content to render in the field. This is a function that is called with props for the field component and other information about the field.
+     */
+    children: (args: {
+        fieldProps: FieldProps<FieldValue, Element>;
+        error?: string;
+        valid: boolean;
+        meta: Meta;
+    }) => ReactNode;
+    /**
+     * Sets the default value of the field. If a function is provided, it is called with the current default value of the field.
+     */
+    defaultValue?: FieldValue | ((currentDefaultValue?: FieldValue) => FieldValue);
+    /**
+     * Passed to the ID attribute of the field. This is randomly generated if it is not specified.
+     */
+    id?: string;
+    /**
+     * Sets whether the field is required for submission. Required fields are marked with a red asterisk.
+     */
+    isRequired?: boolean;
+    /**
+     * Sets whether the field is disabled. Users cannot edit or focus on the fields. If the parent form component is disabled, then the field will always be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Label displayed above the form field.
+     */
+    label?: ReactNode;
+    /**
+     * Specifies the name of the field. This is important for referencing the form data.
+     */
+    name: string;
+    /**
+     * Access the current field value and transform it to return a different field value.
+     */
+    transform?: (event: FormEvent<Element> | FieldValue, current: FieldValue) => FieldValue;
+    /**
+     * Checks whether the field input is valid. This is usually used to display a message relevant to the current value using `ErrorMessage`, `HelperMessage` or `ValidMessage`.
+     */
+    validate?: (value: FieldValue | undefined, formState: Object, fieldState: Meta) => string | void | Promise<string | void>;
+}
+/**
+ * __Field id__
+ *
+ * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
+ */
+export declare const FieldId: import("react").Context<string | undefined>;
+export default function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): JSX.Element;
+export {};

package/dist/types-ts4.0/fieldset.d.ts

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+export interface FieldsetProps {
+    /**
+     * Content to render in the fieldset.
+     */
+    children: ReactNode;
+    /**
+     * Label describing the contents of the fieldset.
+     */
+    legend?: ReactNode;
+}
+/**
+ * __Fieldset__
+ *
+ * A fieldset groups a number of fields together. For example, when multiple CheckboxFields share the same name,
+ * a fieldset can be used to group them together. This makes the form more accessible.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
+ */
+declare const Fieldset: ({ children, legend }: FieldsetProps) => JSX.Element;
+export default Fieldset;

package/dist/types-ts4.0/form-footer.d.ts

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { Align } from './types';
+export interface FormFooterProps {
+    /**
+     * Content to render in the footer of the form.
+     */
+    children?: ReactNode;
+    /**
+     * Sets the alignment of the footer contents. This is often a button. This should be left-aligned in single-page forms, flags, cards, and section messages.
+     */
+    align?: Align;
+}
+/**
+ * __Form footer__
+ *
+ * A form footer has the content to be shown at the bottom of the form. This is usually the submit button.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ */
+export default function FormFooter({ align, children, }: FormFooterProps): JSX.Element;

package/dist/types-ts4.0/form-header.d.ts

@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+export interface FormHeaderProps {
+    /**
+     * Title of the form. This is a header.
+     */
+    title?: ReactNode;
+    /**
+     * Description or subtitle of the form.
+     */
+    description?: ReactNode;
+    /**
+     * Child content to render in the form below the title and description.
+     */
+    children?: ReactNode;
+}
+declare const FormHeaderContent: React.FC;
+declare const FormHeaderDescription: React.FC;
+declare const FormHeaderTitle: React.FC;
+/**
+ * __Form header__
+ *
+ * A form header contains the form component's heading and subheadings. This provides the correct padding
+ * and styling for it.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ */
+declare const FormHeader: React.FC<FormHeaderProps>;
+export default FormHeader;
+export { FormHeaderContent, FormHeaderDescription, FormHeaderTitle };

package/dist/types-ts4.0/form-section.d.ts

@@ -0,0 +1,28 @@
+/** @jsx jsx */
+import React, { ReactNode } from 'react';
+export interface FormSectionProps {
+    /**
+     * Title of the form section.
+     */
+    title?: ReactNode;
+    /**
+     * Content or components to render after the description.
+     */
+    children?: ReactNode;
+    /**
+     * Description of the contents of the section.
+     */
+    description?: ReactNode;
+}
+/**
+ * __Form section__
+ *
+ * A form section is used to define a section of a form layout. This contains a section title, content
+ * and a description of the section.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ */
+declare const FormSection: React.FC<FormSectionProps>;
+export default FormSection;

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

@@ -0,0 +1,51 @@
+import React, { ReactNode } from 'react';
+import { FieldConfig, FieldSubscriber, FieldSubscription, FormState, Unsubscribe } from 'final-form';
+import { OnSubmitHandler } from './types';
+declare type DefaultValue<FieldValue> = (value?: FieldValue) => FieldValue;
+declare type RegisterField = <FieldValue>(name: string, defaultValue: FieldValue | DefaultValue<FieldValue>, subscriber: FieldSubscriber<FieldValue>, subscription: FieldSubscription, config: FieldConfig<FieldValue>) => Unsubscribe;
+/**
+ * __Form context__
+ *
+ * A form context creates a context for the field values and allows them to be accessed by the children.
+ */
+export declare const FormContext: React.Context<RegisterField>;
+/**
+ * __Is disabled context__
+ *
+ * An is disabled context creates the context for when a value is disabled.
+ */
+export declare const IsDisabledContext: React.Context<boolean>;
+interface FormChildrenProps {
+    ref: React.RefObject<HTMLFormElement>;
+    onSubmit: (event?: React.FormEvent<HTMLFormElement> | React.SyntheticEvent<HTMLElement>) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => 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;
+    /**
+     *   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.
+     */
+    isDisabled?: boolean;
+}
+export default function Form<FormValues extends Record<string, any> = {}>(props: FormProps<FormValues>): JSX.Element;
+export {};

package/dist/types-ts4.0/index.d.ts

@@ -0,0 +1,16 @@
+export { default } from './form';
+export type { FormProps } from './form';
+export { default as FormHeader } from './form-header';
+export { default as FormFooter } from './form-footer';
+export { default as FormSection } from './form-section';
+export { default as Field } from './field';
+export type { FieldProps } from './field';
+export { default as CheckboxField } from './checkbox-field';
+export type { CheckboxFieldProps } from './checkbox-field';
+export { default as RangeField } from './range-field';
+export type { RangeFieldProps } from './range-field';
+export { default as Label } from './label';
+export type { LabelProps } from './label';
+export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
+export { default as Fieldset } from './fieldset';
+export type { OnSubmitHandler, FormApi } from './types';

package/dist/types-ts4.0/label.d.ts

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { FC } from 'react';
+export interface LabelProps {
+    id?: string;
+    htmlFor: string;
+}
+/**
+ * __Label__
+ *
+ * A label represents a caption for an item in a user interface.
+ *
+ * It's recommended that a label has a `4px` spacing above its associated
+ * control element.
+ */
+declare const Label: FC<LabelProps>;
+export default Label;

package/dist/types-ts4.0/messages.d.ts

@@ -0,0 +1,48 @@
+/** @jsx jsx */
+import React, { ReactNode } from 'react';
+interface MessageProps {
+    /**
+     * The content of the message
+     */
+    children: ReactNode;
+    /**
+     * A testId prop is provided for specified elements, which is a unique string
+     *  that appears as a data attribute data-testid in the rendered code,
+     *  serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * Checks whether message input is invalid and should show an error.
+     */
+    error?: boolean;
+    /**
+     * Checks whether message input is valid.
+     */
+    valid?: boolean;
+    fieldId?: string;
+}
+/**
+ * __Helper message__
+ *
+ * A helper message tells the user what kind of input the field takes. For example, a helper message could be
+ * 'Password should be more than 4 characters'
+ *
+ */
+export declare const HelperMessage: React.FC<MessageProps>;
+/**
+ * __Error message__
+ *
+ * An error message is used to tell a user that the field input is invalid. For example, an error message could be
+ * 'Invalid username, needs to be more than 4 characters'.
+ *
+ */
+export declare const ErrorMessage: React.FC<MessageProps>;
+/**
+ * __Valid message__
+ *
+ * A valid message is used to tell a user that the field input is valid. For example,
+ * a helper message could be 'Nice one, this username is available'.
+ *
+ */
+export declare const ValidMessage: React.FC<MessageProps>;
+export {};

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

@@ -0,0 +1,41 @@
+import React, { FC, ReactNode } from 'react';
+import { FieldProps, Meta } from './field';
+declare type RangeProps = Omit<FieldProps<number>, 'isInvalid' | 'isRequired'>;
+export interface RangeFieldProps {
+    children: (args: {
+        fieldProps: RangeProps;
+        error?: string;
+        meta: Meta;
+    }) => React.ReactNode;
+    /**
+     * Specifies the name of the field. This is important for referencing the form data.
+     */
+    name: string;
+    /**
+     *  Sets the default value of the field. If a function is provided, it is called with the current default value of the field.
+     */
+    defaultValue: number | ((currentDefaultValue?: number) => number);
+    /**
+     * Value passed to the `id` attribute of the field. This is randomly generated if it is not specified.
+     */
+    id?: string;
+    /**
+     * Sets whether the field is disabled. Users cannot edit or focus on the fields. If the parent form component is disabled, then the field will always be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Displays a label above the range field and identifies the form fields.
+     */
+    label?: ReactNode;
+}
+/**
+ * __Range field__
+ *
+ * A range field is where a user can submit a range input as a part of a form.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#rangefield-reference)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#rangefield-reference)
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#rangefield-reference)
+ */
+declare const RangeField: FC<RangeFieldProps>;
+export default RangeField;

package/dist/types-ts4.0/types.d.ts

@@ -0,0 +1,4 @@
+import { FormApi as FinalFormAPI } from 'final-form';
+export declare type Align = 'start' | 'end';
+export declare type FormApi<FormData> = FinalFormAPI<FormData>;
+export declare type OnSubmitHandler<FormData> = (values: FormData, form: FormApi<FormData>, callback?: (errors?: Record<string, string>) => void) => void | Object | Promise<Object | void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.5.7",
+  "version": "8.5.9",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlaskit:designLink": "https://atlassian.design/guidelines/product/patterns/forms",
@@ -39,7 +46,7 @@
   "homepage": "https://atlassian.design/components/form/",
   "dependencies": {
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
@@ -54,33 +61,34 @@
   },
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/calendar": "^12.3.0",
+    "@atlaskit/calendar": "^12.4.0",
     "@atlaskit/checkbox": "^12.3.0",
-    "@atlaskit/datetime-picker": "^12.1.0",
+    "@atlaskit/datetime-picker": "^12.2.0",
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/dropdown-menu": "^11.3.0",
+    "@atlaskit/dropdown-menu": "^11.5.0",
     "@atlaskit/droplist": "^11.0.0",
-    "@atlaskit/modal-dialog": "^12.2.0",
-    "@atlaskit/radio": "^5.3.0",
+    "@atlaskit/ds-lib": "^2.1.1",
+    "@atlaskit/modal-dialog": "^12.3.0",
+    "@atlaskit/radio": "^5.4.0",
     "@atlaskit/range": "^6.0.0",
-    "@atlaskit/section-message": "^6.1.0",
-    "@atlaskit/select": "^15.6.0",
+    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/textarea": "^4.3.0",
-    "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/toggle": "^12.4.0",
+    "@atlaskit/textfield": "^5.2.0",
+    "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/react": "^12.1.5",
     "@types/final-form-focus": "^1.1.1",
     "enzyme": "^3.10.0",
     "react-dom": "^16.8.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-test-renderer": "^16.8.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "validator": "^9.4.1",
     "wait-for-expect": "^1.2.0"
   },