@atlaskit/form 8.11.1 → 8.11.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/form
 
+## 8.11.3
+
+### Patch Changes
+
+- [`e8dbb0a281b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e8dbb0a281b) - add a11y support for alert messages
+
+## 8.11.2
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
 ## 8.11.1
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -98,7 +98,8 @@ var Message = function Message(_ref2) {
   return (0, _react2.jsx)("div", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
-    id: fieldId
+    id: fieldId,
+    role: "alert"
   }, icon && (0, _react2.jsx)(IconWrapper, null, icon), content);
 };
 

package/dist/cjs/version.json

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

package/dist/es2019/messages.js

@@ -94,7 +94,8 @@ const Message = ({
   return jsx("div", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
-    id: fieldId
+    id: fieldId,
+    role: "alert"
   }, icon && jsx(IconWrapper, null, icon), content);
 };
 

package/dist/es2019/version.json

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

package/dist/esm/messages.js

@@ -92,7 +92,8 @@ var Message = function Message(_ref2) {
   return jsx("div", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
-    id: fieldId
+    id: fieldId,
+    role: "alert"
   }, icon && jsx(IconWrapper, null, icon), content);
 };
 

package/dist/esm/version.json

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

package/dist/types-ts4.5/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.5/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.5/entry-points/field.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/types-ts4.5/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.5/field.d.ts

@@ -0,0 +1,87 @@
+/** @jsx jsx */
+import { FormEvent, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+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>;
+    /**
+     * 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;
+}
+/**
+ * __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.5/fieldset.d.ts

@@ -0,0 +1,25 @@
+/** @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.5/form-footer.d.ts

@@ -0,0 +1,24 @@
+/** @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.5/form-header.d.ts

@@ -0,0 +1,38 @@
+/** @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<{
+    children: ReactNode;
+}>;
+declare const FormHeaderDescription: React.FC<{
+    children: ReactNode;
+}>;
+declare const FormHeaderTitle: React.FC<{
+    children: ReactNode;
+}>;
+/**
+ * __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.5/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.5/form.d.ts

@@ -0,0 +1,55 @@
+import React, { ReactNode } from 'react';
+import { FieldConfig, FieldSubscriber, FieldSubscription, FormState, Unsubscribe } from 'final-form';
+import { OnSubmitHandler } from './types';
+type DefaultValue<FieldValue> = (value?: FieldValue) => FieldValue;
+type RegisterField = <FieldValue>(name: string, defaultValue: FieldValue | DefaultValue<FieldValue>, subscriber: FieldSubscriber<FieldValue>, subscription: FieldSubscription, config: FieldConfig<FieldValue>) => Unsubscribe;
+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: RegisterField;
+    getCurrentValue: GetCurrentValue;
+}>;
+/**
+ * __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.5/index.d.ts

@@ -0,0 +1,17 @@
+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 { default as RequiredAsterisk } from './required-asterisk';
+export type { OnSubmitHandler, FormApi } from './types';

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

@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import { FC, ReactNode } from 'react';
+export interface LabelProps {
+    id?: string;
+    htmlFor: string;
+    children: ReactNode;
+    testId?: 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.5/messages.d.ts

@@ -0,0 +1,52 @@
+/** @jsx jsx */
+import React, { ReactNode } from 'react';
+type MessageAppearance = 'default' | 'error' | 'valid';
+/**
+ * API for the internal `<Message />` component. This is not public API.
+ */
+interface InternalMessageProps {
+    /**
+     * 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;
+    /**
+     * Determines the appearance of the message.
+     */
+    appearance?: MessageAppearance;
+    fieldId?: string;
+}
+/**
+ * Public API of the various message components.
+ */
+type MessageProps = Pick<InternalMessageProps, 'children' | 'testId'>;
+/**
+ * __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.5/range-field.d.ts

@@ -0,0 +1,41 @@
+import React, { FC, ReactNode } from 'react';
+import { FieldProps, Meta } from './field';
+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.5/required-asterisk.d.ts

@@ -0,0 +1,3 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export default function RequiredAsterisk(): jsx.JSX.Element;

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

@@ -0,0 +1,4 @@
+import { FormApi as FinalFormAPI } from 'final-form';
+export type Align = 'start' | 'end';
+export type FormApi<FormData> = FinalFormAPI<FormData>;
+export 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.11.1",
+  "version": "8.11.3",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -66,7 +66,7 @@
     "@atlaskit/checkbox": "^12.6.0",
     "@atlaskit/datetime-picker": "^12.5.0",
     "@atlaskit/docs": "^9.1.0",
-    "@atlaskit/dropdown-menu": "^11.8.0",
+    "@atlaskit/dropdown-menu": "^11.9.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/modal-dialog": "^12.5.0",