@atlaskit/form 9.0.1 → 9.0.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/form
 
+## 9.0.3
+
+### Patch Changes
+
+- [#59147](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59147) [`f12e489f23b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f12e489f23b0) - Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).
+
+## 9.0.2
+
+### Patch Changes
+
+- [#58458](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58458) [`536478cdcf0b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/536478cdcf0b) - Updated Form messages to have a small gap between the icon and message text.
+
 ## 9.0.1
 
 ### Patch Changes

package/dist/cjs/label.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Legend = exports.Label = void 0;
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
@@ -12,7 +13,7 @@ var _typography = require("@atlaskit/theme/typography");
 
 var fontFamily = (0, _constants.fontFamily)();
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var fieldsetLabelStyles = (0, _react.css)([(0, _typography.h200)({
+var fieldsetLabelStyles = (0, _react2.css)([(0, _typography.h200)({
   theme: {
     mode: 'light'
   }
@@ -37,12 +38,15 @@ var Label = exports.Label = function Label(_ref) {
     htmlFor = _ref.htmlFor,
     id = _ref.id,
     testId = _ref.testId;
-  return (0, _react.jsx)("label", {
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
+    hidden: true,
+    id: "label--".concat(id || htmlFor)
+  }, children), (0, _react2.jsx)("label", {
     css: fieldsetLabelStyles,
     id: id,
     htmlFor: htmlFor,
     "data-testid": testId
-  }, children);
+  }, children));
 };
 
 /**
@@ -52,7 +56,7 @@ var Label = exports.Label = function Label(_ref) {
  */
 var Legend = exports.Legend = function Legend(_ref2) {
   var children = _ref2.children;
-  return (0, _react.jsx)("legend", {
+  return (0, _react2.jsx)("legend", {
     css: fieldsetLabelStyles
   }, children);
 };

package/dist/cjs/messages.js

@@ -33,6 +33,7 @@ var lightH200Styles = (0, _react.css)((0, _typography.h200)({
 var messageStyles = (0, _react.css)({
   display: 'flex',
   justifyContent: 'baseline',
+  gap: "var(--ds-space-050, 4px)",
   fontFamily: "".concat(fontFamily),
   fontWeight: 'normal',
   marginBlockStart: "var(--ds-space-050, 4px)"

package/dist/es2019/label.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-
+import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
@@ -32,12 +32,15 @@ export const Label = ({
   id,
   testId
 }) => {
-  return jsx("label", {
+  return jsx(Fragment, null, jsx("span", {
+    hidden: true,
+    id: `label--${id || htmlFor}`
+  }, children), jsx("label", {
     css: fieldsetLabelStyles,
     id: id,
     htmlFor: htmlFor,
     "data-testid": testId
-  }, children);
+  }, children));
 };
 
 /**

package/dist/es2019/messages.js

@@ -27,6 +27,7 @@ const lightH200Styles = css(h200({
 const messageStyles = css({
   display: 'flex',
   justifyContent: 'baseline',
+  gap: "var(--ds-space-050, 4px)",
   fontFamily: `${fontFamily}`,
   fontWeight: 'normal',
   marginBlockStart: "var(--ds-space-050, 4px)"

package/dist/esm/label.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-
+import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
@@ -31,12 +31,15 @@ export var Label = function Label(_ref) {
     htmlFor = _ref.htmlFor,
     id = _ref.id,
     testId = _ref.testId;
-  return jsx("label", {
+  return jsx(Fragment, null, jsx("span", {
+    hidden: true,
+    id: "label--".concat(id || htmlFor)
+  }, children), jsx("label", {
     css: fieldsetLabelStyles,
     id: id,
     htmlFor: htmlFor,
     "data-testid": testId
-  }, children);
+  }, children));
 };
 
 /**

package/dist/esm/messages.js

@@ -27,6 +27,7 @@ var lightH200Styles = css(h200({
 var messageStyles = css({
   display: 'flex',
   justifyContent: 'baseline',
+  gap: "var(--ds-space-050, 4px)",
   fontFamily: "".concat(fontFamily),
   fontWeight: 'normal',
   marginBlockStart: "var(--ds-space-050, 4px)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "9.0.1",
+  "version": "9.0.3",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.29.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "final-form": "^4.20.1",
@@ -43,14 +43,15 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/button": "^16.16.0",
+    "@atlaskit/button": "^16.17.0",
     "@atlaskit/checkbox": "^13.0.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/select": "^17.0.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textfield": "^5.6.0",
+    "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/tmp/api-report-tmp.d.ts

@@ -1,265 +0,0 @@
-## 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 { jsx } from '@emotion/react';
-import { default as React_2 } from 'react';
-import { ReactNode } from 'react';
-
-// @public (undocumented)
-type Align = 'end' | 'start';
-
-// @public
-export const CheckboxField: FC<CheckboxProps>;
-
-// @public (undocumented)
-export interface CheckboxFieldProps extends FieldProps<string | undefined> {
-    // (undocumented)
-    isChecked: boolean;
-}
-
-// @public (undocumented)
-interface CheckboxProps {
-    children: (args: {
-        fieldProps: CheckboxFieldProps;
-        error?: string;
-        valid: boolean;
-        meta: Meta;
-    }) => ReactNode;
-    defaultIsChecked?: boolean;
-    isDisabled?: boolean;
-    isRequired?: boolean;
-    label?: ReactNode;
-    name: string;
-    value?: string;
-}
-
-// @public
-export const ErrorMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): jsx.JSX.Element;
-
-// @public (undocumented)
-interface FieldComponentProps<FieldValue, Element extends SupportedElements> {
-    children: (args: {
-        fieldProps: FieldProps<FieldValue, Element>;
-        error?: string;
-        valid: boolean;
-        meta: Meta;
-    }) => ReactNode;
-    defaultValue?: ((currentDefaultValue?: FieldValue) => FieldValue) | FieldValue;
-    elementAfterLabel?: ReactNode;
-    id?: string;
-    isDisabled?: boolean;
-    isRequired?: boolean;
-    label?: ReactNode;
-    name: string;
-    testId?: string;
-    transform?: (event: FieldValue | FormEvent<Element>, current: FieldValue) => FieldValue;
-    validate?: (value: FieldValue | undefined, formState: Object, fieldState: Meta) => Promise<string | void> | string | void;
-}
-
-// @public (undocumented)
-export interface FieldProps<FieldValue, Element extends SupportedElements = HTMLInputElement> {
-    // (undocumented)
-    'aria-invalid': 'false' | 'true';
-    // (undocumented)
-    'aria-labelledby': string;
-    // (undocumented)
-    id: string;
-    // (undocumented)
-    isDisabled: boolean;
-    // (undocumented)
-    isInvalid: boolean;
-    // (undocumented)
-    isRequired: boolean;
-    // (undocumented)
-    name: string;
-    // (undocumented)
-    onBlur: () => void;
-    // (undocumented)
-    onChange: (value: FieldValue | FormEvent<Element>) => void;
-    // (undocumented)
-    onFocus: () => void;
-    // (undocumented)
-    value: FieldValue;
-}
-
-// @public
-export const Fieldset: ({ children, legend }: FieldsetProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-interface FieldsetProps {
-    children: ReactNode;
-    legend?: ReactNode;
-}
-
-// @public (undocumented)
-function Form<FormValues extends Record<string, any> = {}>(props: FormProps<FormValues>): JSX.Element;
-export default Form;
-
-// @public (undocumented)
-export type FormApi<FormData> = FormApi_2<FormData>;
-
-// @public (undocumented)
-interface FormChildrenProps {
-    // (undocumented)
-    onKeyDown: (event: React_2.KeyboardEvent<HTMLElement>) => void;
-    // (undocumented)
-    onSubmit: (event?: React_2.FormEvent<HTMLFormElement> | React_2.SyntheticEvent<HTMLElement>) => void;
-    // (undocumented)
-    ref: React_2.RefObject<HTMLFormElement>;
-}
-
-// @public
-export function FormFooter({ align, children, }: FormFooterProps): jsx.JSX.Element;
-
-// @public (undocumented)
-interface FormFooterProps {
-    align?: Align;
-    children?: ReactNode;
-}
-
-// @public
-export const FormHeader: ({ children, description, title }: FormHeaderProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-interface FormHeaderProps {
-    children?: ReactNode;
-    description?: ReactNode;
-    title?: ReactNode;
-}
-
-// @public (undocumented)
-export interface FormProps<FormValues> {
-    children: (args: {
-        formProps: FormChildrenProps;
-        disabled: boolean;
-        dirty: boolean;
-        submitting: boolean;
-        getState: () => FormState<FormValues>;
-        getValues: () => FormValues;
-        setFieldValue: (name: string, value: any) => void;
-        reset: (initialValues?: FormValues) => void;
-    }) => ReactNode;
-    isDisabled?: boolean;
-    onSubmit: OnSubmitHandler<FormValues>;
-}
-
-// @public
-export const FormSection: ({ children, description, title }: FormSectionProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-interface FormSectionProps {
-    children?: ReactNode;
-    description?: ReactNode;
-    title?: ReactNode;
-}
-
-// @public
-export const HelperMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
-
-// @public
-interface InternalMessageProps {
-    appearance?: MessageAppearance;
-    children: ReactNode;
-    // (undocumented)
-    fieldId?: string;
-    testId?: string;
-}
-
-// @public
-export const Label: FC<LabelProps>;
-
-// @public (undocumented)
-export interface LabelProps {
-    // (undocumented)
-    children: ReactNode;
-    // (undocumented)
-    htmlFor: string;
-    // (undocumented)
-    id?: string;
-    // (undocumented)
-    testId?: string;
-}
-
-// @public
-export const Legend: FC<LegendProps>;
-
-// @public (undocumented)
-export interface LegendProps {
-    // (undocumented)
-    children: ReactNode;
-}
-
-// @public (undocumented)
-type MessageAppearance = 'default' | 'error' | 'valid';
-
-// @public
-type MessageProps = Pick<InternalMessageProps, 'children' | 'testId'>;
-
-// @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;
-    // (undocumented)
-    validating?: boolean;
-}
-
-// @public (undocumented)
-export type OnSubmitHandler<FormData> = (values: FormData, form: FormApi<FormData>, callback?: (errors?: Record<string, string>) => void) => Object | Promise<Object | void> | void;
-
-// @public
-export const RangeField: FC<RangeFieldProps>;
-
-// @public (undocumented)
-export interface RangeFieldProps {
-    // (undocumented)
-    children: (args: {
-        fieldProps: RangeProps;
-        error?: string;
-        meta: Meta;
-    }) => React_2.ReactNode;
-    defaultValue: ((currentDefaultValue?: number) => number) | number;
-    id?: string;
-    isDisabled?: boolean;
-    label?: ReactNode;
-    name: string;
-}
-
-// @public (undocumented)
-type RangeProps = Omit<FieldProps<number>, 'isInvalid' | 'isRequired'>;
-
-// @public (undocumented)
-export function RequiredAsterisk(): jsx.JSX.Element;
-
-// @public (undocumented)
-type SupportedElements = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-
-// @public
-export const ValidMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
-
-// (No @packageDocumentation comment for this package)
-
-```