@atlaskit/form 8.6.0 → 8.7.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/form
 
+## 8.7.0
+
+### Minor Changes
+
+- [`500a96aa7de`](https://bitbucket.org/atlassian/atlassian-frontend/commits/500a96aa7de) - Add elementAfterLabel prop to form Field.
+
+### Patch Changes
+
+- [`001c650e983`](https://bitbucket.org/atlassian/atlassian-frontend/commits/001c650e983) - Add ds-lib devDependency. No behaviour change.
+
 ## 8.6.0
 
 ### Minor Changes

package/dist/cjs/field.js

@@ -274,7 +274,7 @@ function Field(props) {
   }, props.label, props.isRequired && (0, _react2.jsx)("span", {
     css: requiredIndicatorStyles,
     "aria-hidden": "true"
-  }, "*")), (0, _react2.jsx)(FieldId.Provider, {
+  }, "*"), props.elementAfterLabel), (0, _react2.jsx)(FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/cjs/version.json

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

package/dist/es2019/field.js

@@ -236,7 +236,7 @@ export default function Field(props) {
   }, props.label, props.isRequired && jsx("span", {
     css: requiredIndicatorStyles,
     "aria-hidden": "true"
-  }, "*")), jsx(FieldId.Provider, {
+  }, "*"), props.elementAfterLabel), jsx(FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/es2019/version.json

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

package/dist/esm/field.js

@@ -254,7 +254,7 @@ export default function Field(props) {
   }, props.label, props.isRequired && jsx("span", {
     css: requiredIndicatorStyles,
     "aria-hidden": "true"
-  }, "*")), jsx(FieldId.Provider, {
+  }, "*"), props.elementAfterLabel), jsx(FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/esm/version.json

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

package/dist/types/field.d.ts

@@ -56,6 +56,10 @@ export interface FieldComponentProps<FieldValue, Element extends SupportedElemen
      * 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.
      */

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

@@ -56,6 +56,10 @@ export interface FieldComponentProps<FieldValue, Element extends SupportedElemen
      * 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.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.6.0",
+  "version": "8.7.0",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,8 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
@@ -36,6 +37,7 @@
     ".": "./src/index.tsx"
   },
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -60,7 +62,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/calendar": "^12.4.0",
     "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/datetime-picker": "^12.3.0",
@@ -70,7 +72,7 @@
     "@atlaskit/ds-lib": "^2.1.1",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/radio": "^5.4.0",
-    "@atlaskit/range": "^6.1.0",
+    "@atlaskit/range": "^7.0.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/form".
+## API Report File for "@atlaskit/form"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -13,123 +17,63 @@ import { jsx } from '@emotion/react';
 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> {
+// @public (undocumented)
+type Align = 'start' | 'end';
+
+// @public
+export const CheckboxField: FC<CheckboxProps>;
+
+// @public (undocumented)
+export interface CheckboxFieldProps extends FieldProps<string | undefined> {
+  // (undocumented)
   isChecked: boolean;
 }
 
-declare interface CheckboxProps {
-  /**
-   * Content to render in the checkbox field. This is a function that is called with information about the field.
-   */
+// @public (undocumented)
+interface CheckboxProps {
   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.
-   */
+  isRequired?: boolean;
   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>;
+// @public
+export const ErrorMessage: React_2.FC<MessageProps>;
 
-export declare function Field<
+// @public (undocumented)
+export function Field<
   FieldValue = string,
   Element extends SupportedElements = HTMLInputElement
 >(props: FieldComponentProps<FieldValue, Element>): jsx.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.
-   */
+// @public (undocumented)
+interface FieldComponentProps<FieldValue, Element extends SupportedElements> {
   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.
-   */
+  isRequired?: boolean;
   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,
@@ -137,291 +81,197 @@ declare interface FieldComponentProps<
   ) => string | void | Promise<string | void>;
 }
 
-export declare interface FieldProps<
+// @public (undocumented)
+export interface FieldProps<
   FieldValue,
   Element extends SupportedElements = HTMLInputElement
 > {
+  // (undocumented)
+  'aria-invalid': 'true' | 'false';
+  // (undocumented)
+  'aria-labelledby': string;
+  // (undocumented)
   id: string;
-  isRequired: boolean;
+  // (undocumented)
   isDisabled: boolean;
+  // (undocumented)
   isInvalid: boolean;
-  onChange: (value: FormEvent<Element> | FieldValue) => void;
+  // (undocumented)
+  isRequired: boolean;
+  // (undocumented)
+  name: string;
+  // (undocumented)
   onBlur: () => void;
+  // (undocumented)
+  onChange: (value: FormEvent<Element> | FieldValue) => void;
+  // (undocumented)
   onFocus: () => void;
+  // (undocumented)
   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.JSX.Element;
+// @public
+export const Fieldset: ({ children, legend }: FieldsetProps) => jsx.JSX.Element;
 
-declare interface FieldsetProps {
-  /**
-   * Content to render in the fieldset.
-   */
+// @public (undocumented)
+interface FieldsetProps {
   children: ReactNode;
-  /**
-   * Label describing the contents of the fieldset.
-   */
   legend?: ReactNode;
 }
 
-declare function Form<FormValues extends Record<string, any> = {}>(
+// @public (undocumented)
+function Form<FormValues extends Record<string, any> = {}>(
   props: FormProps<FormValues>,
 ): JSX.Element;
 export default Form;
 
-export declare type FormApi<FormData> = FormApi_2<FormData>;
+// @public (undocumented)
+export type FormApi<FormData> = FormApi_2<FormData>;
 
-declare interface FormChildrenProps {
-  ref: React_2.RefObject<HTMLFormElement>;
+// @public (undocumented)
+interface FormChildrenProps {
+  // (undocumented)
+  onKeyDown: (event: React_2.KeyboardEvent<HTMLElement>) => void;
+  // (undocumented)
   onSubmit: (
     event?:
       | React_2.FormEvent<HTMLFormElement>
       | React_2.SyntheticEvent<HTMLElement>,
   ) => void;
-  onKeyDown: (event: React_2.KeyboardEvent<HTMLElement>) => void;
+  // (undocumented)
+  ref: React_2.RefObject<HTMLFormElement>;
 }
 
-/**
- * __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({
+// @public
+export function FormFooter({
   align,
   children,
 }: FormFooterProps): jsx.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.
-   */
+// @public (undocumented)
+interface FormFooterProps {
   align?: Align;
+  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)
- */
-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.
-   */
+// @public
+export const FormHeader: React.FC<FormHeaderProps>;
+
+// @public (undocumented)
+interface FormHeaderProps {
   children?: ReactNode;
+  description?: ReactNode;
+  title?: 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).
-   */
+// @public (undocumented)
+export interface FormProps<FormValues> {
   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;
+  onSubmit: OnSubmitHandler<FormValues>;
 }
 
-/**
- * __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.
-   */
+// @public
+export const FormSection: React_2.FC<FormSectionProps>;
+
+// @public (undocumented)
+interface FormSectionProps {
   children?: ReactNode;
-  /**
-   * Description of the contents of the section.
-   */
   description?: ReactNode;
+  title?: 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;
+// @public
+export const HelperMessage: React_2.FC<MessageProps>;
+
+// @public
+export const Label: FC<LabelProps>;
+
+// @public (undocumented)
+export interface LabelProps {
+  // (undocumented)
   htmlFor: string;
+  // (undocumented)
+  id?: string;
 }
 
-declare interface MessageProps {
-  /**
-   * The content of the message
-   */
+// @public (undocumented)
+interface MessageProps {
   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;
+  // (undocumented)
   fieldId?: string;
+  testId?: string;
+  valid?: boolean;
 }
 
-declare interface Meta {
+// @public (undocumented)
+interface Meta {
+  // (undocumented)
   dirty: boolean;
+  // (undocumented)
   dirtySinceLastSubmit: boolean;
+  // (undocumented)
+  error?: string;
+  // (undocumented)
+  submitError?: boolean;
+  // (undocumented)
   submitFailed: boolean;
+  // (undocumented)
   submitting: boolean;
+  // (undocumented)
   touched: boolean;
+  // (undocumented)
   valid: boolean;
-  error?: string;
-  submitError?: boolean;
+  // (undocumented)
   validating?: boolean;
 }
 
-export declare type OnSubmitHandler<FormData> = (
+// @public (undocumented)
+export 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 {
+// @public
+export const RangeField: FC<RangeFieldProps>;
+
+// @public (undocumented)
+export interface RangeFieldProps {
+  // (undocumented)
   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;
+  name: string;
 }
 
-declare type RangeProps = Omit<FieldProps<number>, 'isInvalid' | 'isRequired'>;
+// @public (undocumented)
+type RangeProps = Omit<FieldProps<number>, 'isInvalid' | 'isRequired'>;
 
-declare type SupportedElements =
+// @public (undocumented)
+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>;
+// @public
+export const ValidMessage: React_2.FC<MessageProps>;
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```