@atlaskit/form 8.5.5 → 8.5.8

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/form
 
+## 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
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 8.5.6
+
+### Patch Changes
+
+- [`f2b8ca863a0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f2b8ca863a0) - [ux] Updates to slightly darken fallback colors for field messages
+
 ## 8.5.5
 
 ### Patch Changes

package/dist/cjs/form.js

@@ -69,7 +69,6 @@ function Form(props) {
             /* eslint-disable no-param-reassign */
 
 
-            /* eslint-disable no-param-reassign */
             (0, _set.default)(_initialValues, name, _value);
             (0, _set.default)(values, name, _value);
             /* eslint-enable */

package/dist/cjs/messages.js

@@ -41,13 +41,13 @@ var darkH200Styles = (0, _core.css)((0, _typography.h200)({
   }
 }));
 var messageErrorColorStyles = (0, _core.css)({
-  color: "var(--ds-text-danger, ".concat(_colors.R400, ")")
+  color: "var(--ds-text-danger, #AE2A19)"
 });
 var messageNeutralColorStyles = (0, _core.css)({
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
 });
 var messageValidColorStyles = (0, _core.css)({
-  color: "var(--ds-text-success, ".concat(_colors.G400, ")")
+  color: "var(--ds-text-success, #216E4E)"
 });
 var messageStyles = (0, _core.css)({
   display: 'flex',

package/dist/cjs/version.json

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

package/dist/es2019/messages.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/core';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
-import { G400, N200, R400 } from '@atlaskit/theme/colors';
+import { N200 } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
@@ -23,13 +23,13 @@ const darkH200Styles = css(h200({
   }
 }));
 const messageErrorColorStyles = css({
-  color: `var(--ds-text-danger, ${R400})`
+  color: "var(--ds-text-danger, #AE2A19)"
 });
 const messageNeutralColorStyles = css({
   color: `var(--ds-text-subtlest, ${N200})`
 });
 const messageValidColorStyles = css({
-  color: `var(--ds-text-success, ${G400})`
+  color: "var(--ds-text-success, #216E4E)"
 });
 const messageStyles = css({
   display: 'flex',

package/dist/es2019/version.json

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

package/dist/esm/form.js

@@ -46,7 +46,6 @@ export default function Form(props) {
             /* eslint-disable no-param-reassign */
 
 
-            /* eslint-disable no-param-reassign */
             set(_initialValues, name, _value);
             set(values, name, _value);
             /* eslint-enable */

package/dist/esm/messages.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/core';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
-import { G400, N200, R400 } from '@atlaskit/theme/colors';
+import { N200 } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
@@ -23,13 +23,13 @@ var darkH200Styles = css(h200({
   }
 }));
 var messageErrorColorStyles = css({
-  color: "var(--ds-text-danger, ".concat(R400, ")")
+  color: "var(--ds-text-danger, #AE2A19)"
 });
 var messageNeutralColorStyles = css({
   color: "var(--ds-text-subtlest, ".concat(N200, ")")
 });
 var messageValidColorStyles = css({
-  color: "var(--ds-text-success, ".concat(G400, ")")
+  color: "var(--ds-text-success, #216E4E)"
 });
 var messageStyles = css({
   display: 'flex',

package/dist/esm/version.json

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

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.5.5",
+  "version": "8.5.8",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -32,13 +32,14 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Form"
+      "name": "Form",
+      "category": "Components"
     }
   },
   "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",
@@ -53,21 +54,21 @@
   },
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/calendar": "^12.1.0",
+    "@atlaskit/calendar": "^12.4.0",
     "@atlaskit/checkbox": "^12.3.0",
-    "@atlaskit/datetime-picker": "^11.1.0",
+    "@atlaskit/datetime-picker": "^12.2.0",
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/dropdown-menu": "^11.1.0",
+    "@atlaskit/dropdown-menu": "^11.4.0",
     "@atlaskit/droplist": "^11.0.0",
-    "@atlaskit/modal-dialog": "^12.2.0",
-    "@atlaskit/radio": "^5.3.0",
+    "@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.2.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": "*",
@@ -79,7 +80,7 @@
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-test-renderer": "^16.8.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.5",
     "validator": "^9.4.1",
     "wait-for-expect": "^1.2.0"
   },
@@ -93,6 +94,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "analytics": "analytics-next",
       "theming": [
         "react-context",

package/report.api.md

@@ -0,0 +1,424 @@
+## API Report File for "@atlaskit/form"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { FC } from 'react';
+import { FormApi as FormApi_2 } from 'final-form';
+import { FormEvent } from 'react';
+import { FormState } from 'final-form';
+import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
+
+declare type Align = 'start' | 'end';
+
+/**
+ * __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
+ */
+export declare const CheckboxField: FC<CheckboxProps>;
+
+export declare interface CheckboxFieldProps
+  extends FieldProps<string | undefined> {
+  isChecked: boolean;
+}
+
+declare 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;
+}
+
+/**
+ * __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_2.FC<MessageProps>;
+
+export declare function Field<
+  FieldValue = string,
+  Element extends SupportedElements = HTMLInputElement
+>(props: FieldComponentProps<FieldValue, Element>): JSX.Element;
+
+declare 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>;
+}
+
+export declare 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;
+}
+
+/**
+ * __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)
+ */
+export declare const Fieldset: ({
+  children,
+  legend,
+}: FieldsetProps) => JSX.Element;
+
+declare interface FieldsetProps {
+  /**
+   * Content to render in the fieldset.
+   */
+  children: ReactNode;
+  /**
+   * Label describing the contents of the fieldset.
+   */
+  legend?: ReactNode;
+}
+
+declare function Form<FormValues extends Record<string, any> = {}>(
+  props: FormProps<FormValues>,
+): JSX.Element;
+export default Form;
+
+export declare type FormApi<FormData> = FormApi_2<FormData>;
+
+declare interface FormChildrenProps {
+  ref: React_2.RefObject<HTMLFormElement>;
+  onSubmit: (
+    event?:
+      | React_2.FormEvent<HTMLFormElement>
+      | React_2.SyntheticEvent<HTMLElement>,
+  ) => void;
+  onKeyDown: (event: React_2.KeyboardEvent<HTMLElement>) => void;
+}
+
+/**
+ * __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 declare function FormFooter({
+  align,
+  children,
+}: FormFooterProps): JSX.Element;
+
+declare 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 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)
+ */
+export declare const FormHeader: React.FC<FormHeaderProps>;
+
+declare 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;
+}
+
+export declare 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;
+}
+
+/**
+ * __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)
+ */
+export declare const FormSection: React_2.FC<FormSectionProps>;
+
+declare 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;
+}
+
+/**
+ * __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_2.FC<MessageProps>;
+
+/**
+ * __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.
+ */
+export declare const Label: FC<LabelProps>;
+
+export declare interface LabelProps {
+  id?: string;
+  htmlFor: string;
+}
+
+declare 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;
+}
+
+declare interface Meta {
+  dirty: boolean;
+  dirtySinceLastSubmit: boolean;
+  submitFailed: boolean;
+  submitting: boolean;
+  touched: boolean;
+  valid: boolean;
+  error?: string;
+  submitError?: boolean;
+  validating?: boolean;
+}
+
+export declare type OnSubmitHandler<FormData> = (
+  values: FormData,
+  form: FormApi<FormData>,
+  callback?: (errors?: Record<string, string>) => void,
+) => void | Object | Promise<Object | void>;
+
+/**
+ * __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)
+ */
+export declare const RangeField: FC<RangeFieldProps>;
+
+export declare interface RangeFieldProps {
+  children: (args: {
+    fieldProps: RangeProps;
+    error?: string;
+    meta: Meta;
+  }) => React_2.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;
+}
+
+declare type RangeProps = Omit<FieldProps<number>, 'isInvalid' | 'isRequired'>;
+
+declare type SupportedElements =
+  | HTMLInputElement
+  | HTMLTextAreaElement
+  | HTMLSelectElement;
+
+/**
+ * __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_2.FC<MessageProps>;
+
+export {};
+```