@atlaskit/form 8.7.0 → 8.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/form
 
+## 8.8.0
+
+### Minor Changes
+
+- [`f2d39d67a70`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f2d39d67a70) - Fixed the issue where field's value was reset on the component re-mount.
+
+## 8.7.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.7.0
 
 ### Minor Changes

package/dist/cjs/field.js

@@ -93,9 +93,22 @@ function isShallowEqual(previousValue, currentValue) {
 }
 
 function Field(props) {
-  var registerField = (0, _react.useContext)(_form.FormContext);
+  var _getCurrentValue;
+
+  var _useContext = (0, _react.useContext)(_form.FormContext),
+      registerField = _useContext.registerField,
+      getCurrentValue = _useContext.getCurrentValue;
+
   var isDisabled = (0, _react.useContext)(_form.IsDisabledContext) || props.isDisabled || false;
   var defaultValue = isFunction(props.defaultValue) ? props.defaultValue() : props.defaultValue;
+  var latestPropsRef = usePreviousRef(props);
+  /**
+   * HACK: defaultValue can potentially be an array or object which cannot be
+   * passed directly into a `useEffect` dependency array, since it will trigger
+   * the hook every time.
+   */
+
+  var isDefaultValueChanged = !isShallowEqual(latestPropsRef.current.defaultValue, props.defaultValue);
 
   var _useState = (0, _react.useState)({
     fieldProps: {
@@ -108,9 +121,13 @@ function Field(props) {
        * prop types defined defaultValue as required, so inside the component it was not
        * valid for defaultValue to be undefined. We need to suppress the error
        * after changing defaultValue to explictly be an optional prop.
+       * If default value has changed we are using new default value.
+       * Otherwise we need to check if we already have value for this field
+       * (because we are using changing key prop to re-run field level validation, and that
+       * cause the component re-mounting) to not override the actual value with the default value.
        */
       // @ts-ignore
-      value: defaultValue
+      value: isDefaultValueChanged ? defaultValue : (_getCurrentValue = getCurrentValue(props.name)) !== null && _getCurrentValue !== void 0 ? _getCurrentValue : defaultValue
     },
     error: undefined,
     valid: false,
@@ -130,15 +147,7 @@ function Field(props) {
       state = _useState2[0],
       setState = _useState2[1];
 
-  var latestPropsRef = usePreviousRef(props);
   var latestStateRef = usePreviousRef(state);
-  /**
-   * HACK: defaultValue can potentially be an array or object which cannot be
-   * passed directly into a `useEffect` dependency array, since it will trigger
-   * the hook every time.
-   */
-
-  var hasDefaultValueChanged = isShallowEqual(latestPropsRef.current.defaultValue, props.defaultValue);
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
       (0, _tinyInvariant.default)(latestPropsRef.current.name, '@atlaskit/form: Field components have a required name prop');
@@ -159,8 +168,18 @@ function Field(props) {
       };
     }
 
-    var unregister = registerField(latestPropsRef.current.name, // @ts-ignore
-    latestPropsRef.current.defaultValue, function (fieldState) {
+    var unregister = registerField(latestPropsRef.current.name,
+    /**
+     * Similar as for setting initial state value.
+     * Additionally we are checking if the default value is a function,
+     * it is used in checkbox fields, where fields with same name and
+     * defaultIsChecked should create array of values. In this situation we can't
+     * override the default value on re-registering, but also we don't need to change
+     * the key prop to re-run validation.
+     */
+    // @ts-ignore
+    isDefaultValueChanged || // @ts-ignore
+    isFunction(latestPropsRef.current.defaultValue) ? latestPropsRef.current.defaultValue : latestStateRef.current.fieldProps.value, function (fieldState) {
       /**
        * Do not update dirtySinceLastSubmit until submission has finished.
        */
@@ -248,7 +267,7 @@ function Field(props) {
       }
     });
     return unregister;
-  }, [latestPropsRef, latestStateRef, registerField, props.name, hasDefaultValueChanged]);
+  }, [latestPropsRef, latestStateRef, registerField, props.name, isDefaultValueChanged]);
   var fieldId = (0, _react.useMemo)( // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
   function () {
     return props.id ? props.id : "".concat(props.name, "-").concat((0, _reactUid.uid)({

package/dist/cjs/form.js

@@ -29,8 +29,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  * A form context creates a context for the field values and allows them to be accessed by the children.
  */
-var FormContext = /*#__PURE__*/(0, _react.createContext)(function () {
-  return function () {};
+var FormContext = /*#__PURE__*/(0, _react.createContext)({
+  registerField: function registerField() {
+    return function () {};
+  },
+  getCurrentValue: function getCurrentValue() {
+    return undefined;
+  }
 });
 /**
  * __Is disabled context__
@@ -143,8 +148,23 @@ function Form(props) {
       children = props.children;
   var dirty = state.dirty,
       submitting = state.submitting;
+  /**
+   * This method is needed in FormContext to use it on the field level
+   * to check the current value of the field in case of the component re-mounting.
+   */
+
+  var getCurrentValue = (0, _react.useCallback)(function (name) {
+    var formState = form.getState();
+    return (formState === null || formState === void 0 ? void 0 : formState.values[name]) || undefined;
+  }, [form]);
+  var FormContextValue = (0, _react.useMemo)(function () {
+    return {
+      registerField: registerField,
+      getCurrentValue: getCurrentValue
+    };
+  }, [registerField, getCurrentValue]);
   return /*#__PURE__*/_react.default.createElement(FormContext.Provider, {
-    value: registerField
+    value: FormContextValue
   }, /*#__PURE__*/_react.default.createElement(IsDisabledContext.Provider, {
     value: isDisabled
   }, children({

package/dist/cjs/version.json

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

package/dist/es2019/field.js

@@ -65,9 +65,22 @@ function isShallowEqual(previousValue, currentValue) {
 }
 
 export default function Field(props) {
-  const registerField = useContext(FormContext);
+  var _getCurrentValue;
+
+  const {
+    registerField,
+    getCurrentValue
+  } = useContext(FormContext);
   const isDisabled = useContext(IsDisabledContext) || props.isDisabled || false;
   const defaultValue = isFunction(props.defaultValue) ? props.defaultValue() : props.defaultValue;
+  const latestPropsRef = usePreviousRef(props);
+  /**
+   * HACK: defaultValue can potentially be an array or object which cannot be
+   * passed directly into a `useEffect` dependency array, since it will trigger
+   * the hook every time.
+   */
+
+  const isDefaultValueChanged = !isShallowEqual(latestPropsRef.current.defaultValue, props.defaultValue);
   const [state, setState] = useState({
     fieldProps: {
       onChange: () => {},
@@ -79,9 +92,13 @@ export default function Field(props) {
        * prop types defined defaultValue as required, so inside the component it was not
        * valid for defaultValue to be undefined. We need to suppress the error
        * after changing defaultValue to explictly be an optional prop.
+       * If default value has changed we are using new default value.
+       * Otherwise we need to check if we already have value for this field
+       * (because we are using changing key prop to re-run field level validation, and that
+       * cause the component re-mounting) to not override the actual value with the default value.
        */
       // @ts-ignore
-      value: defaultValue
+      value: isDefaultValueChanged ? defaultValue : (_getCurrentValue = getCurrentValue(props.name)) !== null && _getCurrentValue !== void 0 ? _getCurrentValue : defaultValue
     },
     error: undefined,
     valid: false,
@@ -97,15 +114,7 @@ export default function Field(props) {
       submitError: undefined
     }
   });
-  const latestPropsRef = usePreviousRef(props);
   const latestStateRef = usePreviousRef(state);
-  /**
-   * HACK: defaultValue can potentially be an array or object which cannot be
-   * passed directly into a `useEffect` dependency array, since it will trigger
-   * the hook every time.
-   */
-
-  const hasDefaultValueChanged = isShallowEqual(latestPropsRef.current.defaultValue, props.defaultValue);
   useEffect(() => {
     if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
       invariant(latestPropsRef.current.name, '@atlaskit/form: Field components have a required name prop');
@@ -125,8 +134,18 @@ export default function Field(props) {
       };
     }
 
-    const unregister = registerField(latestPropsRef.current.name, // @ts-ignore
-    latestPropsRef.current.defaultValue, fieldState => {
+    const unregister = registerField(latestPropsRef.current.name,
+    /**
+     * Similar as for setting initial state value.
+     * Additionally we are checking if the default value is a function,
+     * it is used in checkbox fields, where fields with same name and
+     * defaultIsChecked should create array of values. In this situation we can't
+     * override the default value on re-registering, but also we don't need to change
+     * the key prop to re-run validation.
+     */
+    // @ts-ignore
+    isDefaultValueChanged || // @ts-ignore
+    isFunction(latestPropsRef.current.defaultValue) ? latestPropsRef.current.defaultValue : latestStateRef.current.fieldProps.value, fieldState => {
       /**
        * Do not update dirtySinceLastSubmit until submission has finished.
        */
@@ -214,7 +233,7 @@ export default function Field(props) {
       }
     });
     return unregister;
-  }, [latestPropsRef, latestStateRef, registerField, props.name, hasDefaultValueChanged]);
+  }, [latestPropsRef, latestStateRef, registerField, props.name, isDefaultValueChanged]);
   const fieldId = useMemo( // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
   () => props.id ? props.id : `${props.name}-${uid({
     id: props.name

package/dist/es2019/form.js

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useEffect, useRef, useState } from 'react';
+import React, { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
 import set from 'lodash/set';
@@ -8,8 +8,11 @@ import set from 'lodash/set';
  *
  * A form context creates a context for the field values and allows them to be accessed by the children.
  */
-export const FormContext = /*#__PURE__*/createContext(function () {
-  return () => {};
+export const FormContext = /*#__PURE__*/createContext({
+  registerField: function () {
+    return () => {};
+  },
+  getCurrentValue: () => undefined
 });
 /**
  * __Is disabled context__
@@ -105,8 +108,23 @@ export default function Form(props) {
     dirty,
     submitting
   } = state;
+  /**
+   * This method is needed in FormContext to use it on the field level
+   * to check the current value of the field in case of the component re-mounting.
+   */
+
+  const getCurrentValue = useCallback(name => {
+    const formState = form.getState();
+    return (formState === null || formState === void 0 ? void 0 : formState.values[name]) || undefined;
+  }, [form]);
+  const FormContextValue = useMemo(() => {
+    return {
+      registerField,
+      getCurrentValue
+    };
+  }, [registerField, getCurrentValue]);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
-    value: registerField
+    value: FormContextValue
   }, /*#__PURE__*/React.createElement(IsDisabledContext.Provider, {
     value: isDisabled
   }, children({

package/dist/es2019/version.json

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

package/dist/esm/field.js

@@ -73,9 +73,22 @@ function isShallowEqual(previousValue, currentValue) {
 }
 
 export default function Field(props) {
-  var registerField = useContext(FormContext);
+  var _getCurrentValue;
+
+  var _useContext = useContext(FormContext),
+      registerField = _useContext.registerField,
+      getCurrentValue = _useContext.getCurrentValue;
+
   var isDisabled = useContext(IsDisabledContext) || props.isDisabled || false;
   var defaultValue = isFunction(props.defaultValue) ? props.defaultValue() : props.defaultValue;
+  var latestPropsRef = usePreviousRef(props);
+  /**
+   * HACK: defaultValue can potentially be an array or object which cannot be
+   * passed directly into a `useEffect` dependency array, since it will trigger
+   * the hook every time.
+   */
+
+  var isDefaultValueChanged = !isShallowEqual(latestPropsRef.current.defaultValue, props.defaultValue);
 
   var _useState = useState({
     fieldProps: {
@@ -88,9 +101,13 @@ export default function Field(props) {
        * prop types defined defaultValue as required, so inside the component it was not
        * valid for defaultValue to be undefined. We need to suppress the error
        * after changing defaultValue to explictly be an optional prop.
+       * If default value has changed we are using new default value.
+       * Otherwise we need to check if we already have value for this field
+       * (because we are using changing key prop to re-run field level validation, and that
+       * cause the component re-mounting) to not override the actual value with the default value.
        */
       // @ts-ignore
-      value: defaultValue
+      value: isDefaultValueChanged ? defaultValue : (_getCurrentValue = getCurrentValue(props.name)) !== null && _getCurrentValue !== void 0 ? _getCurrentValue : defaultValue
     },
     error: undefined,
     valid: false,
@@ -110,15 +127,7 @@ export default function Field(props) {
       state = _useState2[0],
       setState = _useState2[1];
 
-  var latestPropsRef = usePreviousRef(props);
   var latestStateRef = usePreviousRef(state);
-  /**
-   * HACK: defaultValue can potentially be an array or object which cannot be
-   * passed directly into a `useEffect` dependency array, since it will trigger
-   * the hook every time.
-   */
-
-  var hasDefaultValueChanged = isShallowEqual(latestPropsRef.current.defaultValue, props.defaultValue);
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
       invariant(latestPropsRef.current.name, '@atlaskit/form: Field components have a required name prop');
@@ -139,8 +148,18 @@ export default function Field(props) {
       };
     }
 
-    var unregister = registerField(latestPropsRef.current.name, // @ts-ignore
-    latestPropsRef.current.defaultValue, function (fieldState) {
+    var unregister = registerField(latestPropsRef.current.name,
+    /**
+     * Similar as for setting initial state value.
+     * Additionally we are checking if the default value is a function,
+     * it is used in checkbox fields, where fields with same name and
+     * defaultIsChecked should create array of values. In this situation we can't
+     * override the default value on re-registering, but also we don't need to change
+     * the key prop to re-run validation.
+     */
+    // @ts-ignore
+    isDefaultValueChanged || // @ts-ignore
+    isFunction(latestPropsRef.current.defaultValue) ? latestPropsRef.current.defaultValue : latestStateRef.current.fieldProps.value, function (fieldState) {
       /**
        * Do not update dirtySinceLastSubmit until submission has finished.
        */
@@ -228,7 +247,7 @@ export default function Field(props) {
       }
     });
     return unregister;
-  }, [latestPropsRef, latestStateRef, registerField, props.name, hasDefaultValueChanged]);
+  }, [latestPropsRef, latestStateRef, registerField, props.name, isDefaultValueChanged]);
   var fieldId = useMemo( // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
   function () {
     return props.id ? props.id : "".concat(props.name, "-").concat(uid({

package/dist/esm/form.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { createContext, useCallback, useEffect, useRef, useState } from 'react';
+import React, { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
 import set from 'lodash/set';
@@ -9,8 +9,13 @@ import set from 'lodash/set';
  *
  * A form context creates a context for the field values and allows them to be accessed by the children.
  */
-export var FormContext = /*#__PURE__*/createContext(function () {
-  return function () {};
+export var FormContext = /*#__PURE__*/createContext({
+  registerField: function registerField() {
+    return function () {};
+  },
+  getCurrentValue: function getCurrentValue() {
+    return undefined;
+  }
 });
 /**
  * __Is disabled context__
@@ -120,8 +125,23 @@ export default function Form(props) {
       children = props.children;
   var dirty = state.dirty,
       submitting = state.submitting;
+  /**
+   * This method is needed in FormContext to use it on the field level
+   * to check the current value of the field in case of the component re-mounting.
+   */
+
+  var getCurrentValue = useCallback(function (name) {
+    var formState = form.getState();
+    return (formState === null || formState === void 0 ? void 0 : formState.values[name]) || undefined;
+  }, [form]);
+  var FormContextValue = useMemo(function () {
+    return {
+      registerField: registerField,
+      getCurrentValue: getCurrentValue
+    };
+  }, [registerField, getCurrentValue]);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
-    value: registerField
+    value: FormContextValue
   }, /*#__PURE__*/React.createElement(IsDisabledContext.Provider, {
     value: isDisabled
   }, children({

package/dist/esm/version.json

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

package/dist/types/form.d.ts

@@ -3,12 +3,16 @@ import { FieldConfig, FieldSubscriber, FieldSubscription, FormState, Unsubscribe
 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;
+declare type GetCurrentValue = <FormValues>(name: string) => FormValues[keyof FormValues] | undefined;
 /**
  * __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>;
+export declare const FormContext: React.Context<{
+    registerField: RegisterField;
+    getCurrentValue: GetCurrentValue;
+}>;
 /**
  * __Is disabled context__
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.7.0",
+  "version": "8.8.0",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "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/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlaskit:designLink": "https://atlassian.design/guidelines/product/patterns/forms",
@@ -49,7 +41,7 @@
   "dependencies": {
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "final-form": "^4.20.1",
@@ -62,7 +54,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.4.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/calendar": "^12.4.0",
     "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/datetime-picker": "^12.3.0",
@@ -74,7 +66,7 @@
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/range": "^7.0.0",
     "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/select": "^15.7.0",
+    "@atlaskit/select": "^16.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/textarea": "^4.5.0",
     "@atlaskit/textfield": "^5.3.0",

package/report.api.md

@@ -1,12 +1,17 @@
+<!-- API Report Version: 2.2 -->
+
 ## API Report File for "@atlaskit/form"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
 
-<!--
-	Generated API Report version: 2.0
--->
+- [Main Entry Types](#main-entry-types)
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 import { FC } from 'react';
@@ -18,7 +23,7 @@ import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 
 // @public (undocumented)
-type Align = 'start' | 'end';
+type Align = 'end' | 'start';
 
 // @public
 export const CheckboxField: FC<CheckboxProps>;
@@ -51,7 +56,7 @@ export const ErrorMessage: React_2.FC<MessageProps>;
 // @public (undocumented)
 export function Field<
   FieldValue = string,
-  Element extends SupportedElements = HTMLInputElement
+  Element extends SupportedElements = HTMLInputElement,
 >(props: FieldComponentProps<FieldValue, Element>): jsx.JSX.Element;
 
 // @public (undocumented)
@@ -63,31 +68,32 @@ interface FieldComponentProps<FieldValue, Element extends SupportedElements> {
     meta: Meta;
   }) => ReactNode;
   defaultValue?:
-    | FieldValue
-    | ((currentDefaultValue?: FieldValue) => FieldValue);
+    | ((currentDefaultValue?: FieldValue) => FieldValue)
+    | FieldValue;
+  elementAfterLabel?: ReactNode;
   id?: string;
   isDisabled?: boolean;
   isRequired?: boolean;
   label?: ReactNode;
   name: string;
   transform?: (
-    event: FormEvent<Element> | FieldValue,
+    event: FieldValue | FormEvent<Element>,
     current: FieldValue,
   ) => FieldValue;
   validate?: (
     value: FieldValue | undefined,
     formState: Object,
     fieldState: Meta,
-  ) => string | void | Promise<string | void>;
+  ) => Promise<string | void> | string | void;
 }
 
 // @public (undocumented)
 export interface FieldProps<
   FieldValue,
-  Element extends SupportedElements = HTMLInputElement
+  Element extends SupportedElements = HTMLInputElement,
 > {
   // (undocumented)
-  'aria-invalid': 'true' | 'false';
+  'aria-invalid': 'false' | 'true';
   // (undocumented)
   'aria-labelledby': string;
   // (undocumented)
@@ -103,7 +109,7 @@ export interface FieldProps<
   // (undocumented)
   onBlur: () => void;
   // (undocumented)
-  onChange: (value: FormEvent<Element> | FieldValue) => void;
+  onChange: (value: FieldValue | FormEvent<Element>) => void;
   // (undocumented)
   onFocus: () => void;
   // (undocumented)
@@ -241,7 +247,7 @@ export type OnSubmitHandler<FormData> = (
   values: FormData,
   form: FormApi<FormData>,
   callback?: (errors?: Record<string, string>) => void,
-) => void | Object | Promise<Object | void>;
+) => Object | Promise<Object | void> | void;
 
 // @public
 export const RangeField: FC<RangeFieldProps>;
@@ -254,7 +260,7 @@ export interface RangeFieldProps {
     error?: string;
     meta: Meta;
   }) => React_2.ReactNode;
-  defaultValue: number | ((currentDefaultValue?: number) => number);
+  defaultValue: ((currentDefaultValue?: number) => number) | number;
   id?: string;
   isDisabled?: boolean;
   label?: ReactNode;
@@ -267,11 +273,13 @@ type RangeProps = Omit<FieldProps<number>, 'isInvalid' | 'isRequired'>;
 // @public (undocumented)
 type SupportedElements =
   | HTMLInputElement
-  | HTMLTextAreaElement
-  | HTMLSelectElement;
+  | HTMLSelectElement
+  | HTMLTextAreaElement;
 
 // @public
 export const ValidMessage: React_2.FC<MessageProps>;
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

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

@@ -1,51 +0,0 @@
-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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,83 +0,0 @@
-/** @jsx jsx */
-import { FormEvent, ReactNode } from 'react';
-import { jsx } from '@emotion/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;
-    /**
-     * Element displayed after the label, and after the red asterisk if field is required.
-     */
-    elementAfterLabel?: 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.JSX.Element;
-export {};

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

@@ -1,25 +0,0 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-import { jsx } from '@emotion/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.JSX.Element;
-export default Fieldset;

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

@@ -1,24 +0,0 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-import { jsx } from '@emotion/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.JSX.Element;

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

@@ -1,32 +0,0 @@
-/** @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

@@ -1,28 +0,0 @@
-/** @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

@@ -1,51 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-/** @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

@@ -1,48 +0,0 @@
-/** @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

@@ -1,41 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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>;