@atlaskit/form 8.4.0 → 8.4.4

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/form
 
+## 8.4.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.4.3
+
+### Patch Changes
+
+- [`2cf338dd802`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2cf338dd802) - Added homepage to package.json
+
+## 8.4.2
+
+### Patch Changes
+
+- [`34282240102`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34282240102) - Adds explicit type to button usages components.
+
+## 8.4.1
+
+### Patch Changes
+
+- [`b9b3ab10494`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b9b3ab10494) - There was a bug in 8.4.0 where the props in FormSection were not recognized. This has now been fixed.
+
 ## 8.4.0
 
 ### Minor Changes

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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

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

@@ -4,17 +4,38 @@ 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;
 }
 /**

package/dist/types/field.d.ts

@@ -25,20 +25,47 @@ export interface Meta {
     submitError?: boolean;
     validating?: boolean;
 }
-interface FieldComponentProps<FieldValue, Element extends SupportedElements> {
+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;
     }) => React.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>;
 }
 /**

package/dist/types/fieldset.d.ts

@@ -1,12 +1,12 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
-interface FieldsetProps {
+export interface FieldsetProps {
     /**
-     * Children to be rendered in the fieldset.
+     * Content to render in the fieldset.
      */
     children: ReactNode;
     /**
-     * Legend of the the fieldset.
+     * Label describing the contents of the fieldset.
      */
     legend?: ReactNode;
 }

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

@@ -1,13 +1,13 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
 import { Align } from './types';
-interface FormFooterProps {
+export interface FormFooterProps {
     /**
-     * Children to be rendered in the footer.
+     * Content to render in the footer of the form.
      */
     children?: ReactNode;
     /**
-     * Footer contents should be left-aligned in single-page forms, flags, cards and section messages with the primary button on the left.
+     * 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;
 }
@@ -21,4 +21,3 @@ interface FormFooterProps {
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
 export default function FormFooter({ align, children, }: FormFooterProps): JSX.Element;
-export {};

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

@@ -1,16 +1,16 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
-interface FormHeaderProps {
+export interface FormHeaderProps {
     /**
-     * Title of form header
+     * Title of the form. This is a header.
      */
     title?: ReactNode;
     /**
-     * Subtitle or description of form header
+     * Description or subtitle of the form.
      */
     description?: ReactNode;
     /**
-     * Child content rendered below the description
+     * Child content to render in the form below the title and description.
      */
     children?: ReactNode;
 }

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

@@ -1,5 +1,19 @@
 /** @jsx jsx */
-import React from 'react';
+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__
  *
@@ -10,5 +24,5 @@ import React from 'react';
  * - [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;
+declare const FormSection: React.FC<FormSectionProps>;
 export default FormSection;

package/dist/types/form.d.ts

@@ -22,8 +22,8 @@ interface FormChildrenProps {
 }
 export interface FormProps<FormValues> {
     /**
-     *  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 here: https://final-form.org/docs/final-form/types/FormState.
+     *  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;
@@ -43,7 +43,7 @@ export interface FormProps<FormValues> {
      */
     onSubmit: OnSubmitHandler<FormValues>;
     /**
-     *   Sets the form and its fields as not mutable. User cannot edit or focus on the fields.
+     *   Sets the form and its fields as disabled. Users cannot edit or focus on the fields.
      */
     isDisabled?: boolean;
 }

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

@@ -7,10 +7,25 @@ export interface RangeFieldProps {
         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;
 }
 /**

package/extract-react-types/field-props.tsx

@@ -0,0 +1,5 @@
+import type { FieldComponentProps as Props } from '../src/field';
+
+export default function FieldProps(props: Props<any, any>) {
+  return null;
+}

package/extract-react-types/fieldset-props.tsx

@@ -0,0 +1,5 @@
+import type { FieldsetProps as Props } from '../src/fieldset';
+
+export default function FieldsetProps(props: Props) {
+  return null;
+}

package/extract-react-types/form-footer-props.tsx

@@ -0,0 +1,5 @@
+import type { FormFooterProps as Props } from '../src/form-footer';
+
+export default function FormFooterProps(props: Props) {
+  return null;
+}

package/extract-react-types/form-header-props.tsx

@@ -0,0 +1,5 @@
+import type { FormHeaderProps as Props } from '../src/form-header';
+
+export default function FormHeaderProps(props: Props) {
+  return null;
+}

package/extract-react-types/form-props.tsx

@@ -0,0 +1,5 @@
+import { FormProps } from '../src/form';
+
+export default function FormReactProps(props: FormProps<any>) {
+  return null;
+}

package/extract-react-types/form-section-props.tsx

@@ -0,0 +1,5 @@
+import type { FormSectionProps as Props } from '../src/form-section';
+
+export default function FormSectionProps(props: Props) {
+  return null;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.4.0",
-  "description": "Form package provides layout & validation for form fields",
+  "version": "8.4.4",
+  "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -35,10 +35,11 @@
       "name": "Form"
     }
   },
+  "homepage": "https://atlassian.design/components/form/",
   "dependencies": {
     "@atlaskit/icon": "^21.9.0",
     "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.2.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "final-form": "^4.20.1",
@@ -55,17 +56,15 @@
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/calendar": "^12.1.0",
     "@atlaskit/checkbox": "^12.3.0",
-    "@atlaskit/datetime-picker": "^11.0.0",
+    "@atlaskit/datetime-picker": "^11.1.0",
     "@atlaskit/docs": "^9.0.0",
     "@atlaskit/dropdown-menu": "^10.1.0",
     "@atlaskit/droplist": "^11.0.0",
-    "@atlaskit/modal-dialog": "^12.0.0",
-    "@atlaskit/multi-select": "^15.0.0",
+    "@atlaskit/modal-dialog": "^12.1.0",
     "@atlaskit/radio": "^5.3.0",
-    "@atlaskit/range": "^5.0.5",
+    "@atlaskit/range": "^5.1.0",
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/select": "^15.2.0",
-    "@atlaskit/single-select": "^10.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/textarea": "^4.2.0",
     "@atlaskit/textfield": "^5.1.0",
@@ -97,7 +96,7 @@
     "@repo/internal": {
       "analytics": "analytics-next",
       "theming": [
-        "new-theming-api",
+        "react-context",
         "tokens"
       ],
       "styling": "emotion",