@atlaskit/form 8.3.1 → 8.4.3

package/dist/es2019/{Field.js → field.js}

@@ -1,8 +1,56 @@
+/** @jsx jsx */
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/core';
 import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
-import { FormContext, IsDisabledContext } from './Form';
-import FieldWrapper, { Label, RequiredIndicator } from './styled/Field';
+import { R400 } 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';
+import { token } from '@atlaskit/tokens';
+import { FormContext, IsDisabledContext } from './form';
+const gridSize = getGridSize();
+const fontFamily = getFontFamily();
+const fieldWrapperStyles = css({
+  marginTop: `${gridSize}px`
+});
+const labelStyles = css({
+  display: 'inline-block',
+  marginTop: 0,
+  marginBottom: `${gridSize * 0.5}px`,
+  fontFamily: `${fontFamily}`
+});
+const requiredIndicatorStyles = css({
+  paddingLeft: `${gridSize * 0.25}px`,
+  color: `${token('color.text.danger', R400)}`,
+  fontFamily: `${fontFamily}`
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const lightH200Styles = css(h200({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const darkH200Styles = css(h200({
+  theme: {
+    mode: 'dark'
+  }
+}));
+
+const Label = ({
+  children,
+  fieldId
+}) => {
+  const {
+    mode
+  } = useGlobalTheme();
+  return jsx("label", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
+    id: `${fieldId}-label`,
+    htmlFor: fieldId
+  }, children);
+};
 
 function isEvent(event) {
   return Boolean(event && event.target);
@@ -12,8 +60,11 @@ function isFunction(x) {
   return typeof x === 'function';
 }
 
-// Provides the id of the field to message components.
-// This links the message with the field for screen-readers.
+/**
+ * __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 const FieldId = /*#__PURE__*/React.createContext(undefined);
 
 function usePreviousRef(current) {
@@ -110,12 +161,18 @@ export default function Field(props) {
 
     const unregister = registerField(latestPropsRef.current.name, // @ts-ignore
     latestPropsRef.current.defaultValue, fieldState => {
-      /** Do not update dirtySinceLastSubmit until submission has finished. */
+      /**
+       * Do not update dirtySinceLastSubmit until submission has finished.
+       */
       const modifiedDirtySinceLastSubmit = fieldState.submitting ? latestStateRef.current.meta.dirtySinceLastSubmit : fieldState.dirtySinceLastSubmit;
-      /** Do not update submitFailed until submission has finished. */
+      /**
+       * Do not update submitFailed until submission has finished.
+       */
 
       const modifiedSubmitFailed = fieldState.submitting ? latestStateRef.current.meta.submitFailed : fieldState.submitFailed;
-      /** Do not use submitError if the value has changed. */
+      /**
+       * Do not use submitError if the value has changed.
+       */
 
       const modifiedSubmitError = modifiedDirtySinceLastSubmit && latestPropsRef.current.validate ? undefined : fieldState.submitError;
       const modifiedError = modifiedSubmitError || (fieldState.touched || fieldState.dirty) && fieldState.error;
@@ -192,7 +249,8 @@ export default function Field(props) {
     });
     return unregister;
   }, [latestPropsRef, latestStateRef, registerField, props.name, hasDefaultValueChanged]);
-  const fieldId = useMemo(() => props.id ? props.id : `${props.name}-${uid({
+  const fieldId = useMemo( // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  () => props.id ? props.id : `${props.name}-${uid({
     id: props.name
   })}`, [props.id, props.name]);
   const extendedFieldProps = { ...state.fieldProps,
@@ -204,12 +262,14 @@ export default function Field(props) {
     'aria-labelledby': `${fieldId}-label ${fieldId}-helper ${fieldId}-valid ${fieldId}-error`,
     id: fieldId
   };
-  return /*#__PURE__*/React.createElement(FieldWrapper, null, props.label && /*#__PURE__*/React.createElement(Label, {
-    id: `${fieldId}-label`,
-    htmlFor: fieldId
-  }, props.label, props.isRequired && /*#__PURE__*/React.createElement(RequiredIndicator, {
+  return jsx("div", {
+    css: fieldWrapperStyles
+  }, props.label && jsx(Label, {
+    fieldId: fieldId
+  }, props.label, props.isRequired && jsx("span", {
+    css: requiredIndicatorStyles,
     "aria-hidden": "true"
-  }, "*")), /*#__PURE__*/React.createElement(FieldId.Provider, {
+  }, "*")), jsx(FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/es2019/fieldset.js

@@ -0,0 +1,61 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { h200 } from '@atlaskit/theme/typography';
+const fontFamily = getFontFamily();
+const gridSize = getGridSize();
+const fieldsetLabelStyles = css({
+  display: 'inline-block',
+  marginTop: 0,
+  marginBottom: 0,
+  fontFamily: `${fontFamily}`
+});
+const fieldSetStyles = css({
+  marginTop: `${gridSize}px`
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const lightH200Styles = css(h200({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const darkH200Styles = css(h200({
+  theme: {
+    mode: 'dark'
+  }
+}));
+
+const FieldsetLabel = ({
+  children
+}) => {
+  const {
+    mode
+  } = useGlobalTheme();
+  return jsx("label", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
+  }, children);
+};
+/**
+ * __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)
+ */
+
+
+const Fieldset = ({
+  children,
+  legend
+}) => {
+  return jsx("fieldset", {
+    css: fieldSetStyles
+  }, legend && jsx("legend", null, jsx(FieldsetLabel, null, legend)), children);
+};
+
+export default Fieldset;

package/dist/es2019/form-footer.js

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+const gridSize = getGridSize();
+const formFooterWrapperStyles = css({
+  display: 'flex',
+  marginTop: `${gridSize * 3}px`,
+  justifyContent: 'flex-end'
+});
+const justifyContentStyles = css({
+  justifyContent: 'flex-start'
+});
+/**
+ * __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 = 'end',
+  children
+}) {
+  return jsx("footer", {
+    css: [formFooterWrapperStyles, align === 'start' && justifyContentStyles]
+  }, children);
+}

package/dist/es2019/form-header.js

@@ -0,0 +1,94 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { h700 } from '@atlaskit/theme/typography';
+const gridSize = getGridSize();
+const fontFamily = getFontFamily();
+const formHeaderContentStyles = css({
+  minWidth: '100%',
+  marginTop: `${gridSize}px`
+});
+const formHeaderDescriptionStyles = css({
+  marginTop: `${gridSize}px`
+});
+const formHeaderTitleStyles = css({
+  marginTop: 0,
+  marginRight: `${gridSize * 4}px`,
+  lineHeight: `${gridSize * 4}px`,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const formHeaderWrapperStyles = css({
+  fontFamily: `${fontFamily}`
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const darkH700Styles = css(h700({
+  theme: {
+    mode: 'dark'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const lightH700Styles = css(h700({
+  theme: {
+    mode: 'light'
+  }
+}));
+
+const FormHeaderContent = ({
+  children
+}) => {
+  return jsx("div", {
+    css: formHeaderContentStyles
+  }, children);
+};
+
+const FormHeaderDescription = ({
+  children
+}) => {
+  return jsx("div", {
+    css: formHeaderDescriptionStyles
+  }, children);
+};
+
+const FormHeaderTitle = ({
+  children
+}) => {
+  const {
+    mode
+  } = useGlobalTheme();
+  return jsx("h2", {
+    css: [mode === 'light' ? lightH700Styles : darkH700Styles, formHeaderTitleStyles]
+  }, children);
+};
+
+const FormHeaderWrapper = ({
+  children
+}) => {
+  return jsx("div", {
+    css: formHeaderWrapperStyles
+  }, children);
+};
+/**
+ * __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)
+ */
+
+
+const FormHeader = ({
+  children,
+  description,
+  title
+}) => {
+  return jsx(FormHeaderWrapper, null, title && jsx(FormHeaderTitle, null, title), description && jsx(FormHeaderDescription, null, description), jsx(FormHeaderContent, null, children));
+};
+
+export default FormHeader;
+export { FormHeaderContent, FormHeaderDescription, FormHeaderTitle };

package/dist/es2019/form-section.js

@@ -0,0 +1,81 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { h600 } from '@atlaskit/theme/typography';
+const gridSize = getGridSize();
+const formSectionDescriptionStyles = css({
+  marginTop: `${gridSize}px`
+});
+const formSectionTitleStyles = css({
+  marginTop: 0,
+  marginRight: `${gridSize * 4}px`,
+  lineHeight: `${gridSize * 4}px`,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+const formSectionWrapperStyles = css({
+  marginTop: `${gridSize * 3}px`
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const lightH600Styles = css(h600({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const darkH600Styles = css(h600({
+  theme: {
+    mode: 'dark'
+  }
+}));
+
+const FormSectionWrapper = ({
+  children
+}) => {
+  return jsx("div", {
+    css: formSectionWrapperStyles
+  }, children);
+};
+
+const FormSectionTitle = ({
+  children
+}) => {
+  const {
+    mode
+  } = useGlobalTheme();
+  return jsx("h3", {
+    css: [formSectionTitleStyles, mode === 'light' ? lightH600Styles : darkH600Styles]
+  }, children);
+};
+
+const FormSectionDescription = ({
+  children
+}) => {
+  return jsx("div", {
+    css: formSectionDescriptionStyles
+  }, children);
+};
+/**
+ * __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)
+ */
+
+
+const FormSection = ({
+  children,
+  description,
+  title
+}) => {
+  return jsx(FormSectionWrapper, null, title && jsx(FormSectionTitle, null, title), description && jsx(FormSectionDescription, null, description), children);
+};
+
+export default FormSection;

package/dist/es2019/{Form.js → form.js}

@@ -2,9 +2,21 @@ import React, { createContext, useCallback, useEffect, useRef, useState } from '
 import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
 import set from 'lodash/set';
+
+/**
+ * __Form context__
+ *
+ * A form context creates a context for the field values and allows them to be accessed by the children.
+ */
 export const FormContext = /*#__PURE__*/createContext(function () {
   return () => {};
 });
+/**
+ * __Is disabled context__
+ *
+ * An is disabled context creates the context for when a value is disabled.
+ */
+
 export const IsDisabledContext = /*#__PURE__*/createContext(false);
 export default function Form(props) {
   const formRef = useRef(null);

package/dist/es2019/index.js

@@ -1,9 +1,9 @@
-export { default } from './Form';
-export { default as FormHeader } from './FormHeader';
-export { default as FormFooter } from './FormFooter';
-export { default as FormSection } from './FormSection';
-export { default as Field } from './Field';
-export { default as CheckboxField } from './CheckboxField';
-export { default as RangeField } from './RangeField';
-export { HelperMessage, ErrorMessage, ValidMessage } from './Messages';
-export { default as Fieldset } from './Fieldset';
+export { default } 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 { default as CheckboxField } from './checkbox-field';
+export { default as RangeField } from './range-field';
+export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
+export { default as Fieldset } from './fieldset'; // eslint-disable-next-line import/no-unresolved

package/dist/es2019/messages.js

@@ -0,0 +1,122 @@
+/** @jsx jsx */
+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 { useGlobalTheme } from '@atlaskit/theme/components';
+import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { h200 } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
+import { FieldId } from './field';
+const gridSize = getGridSize();
+const fontFamily = getFontFamily(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const lightH200Styles = css(h200({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const darkH200Styles = css(h200({
+  theme: {
+    mode: 'dark'
+  }
+}));
+const messageErrorColorStyles = css({
+  color: token('color.text.danger', R400)
+});
+const messageNeutralColorStyles = css({
+  color: token('color.text.lowEmphasis', N200)
+});
+const messageValidColorStyles = css({
+  color: token('color.text.success', G400)
+});
+const messageStyles = css({
+  display: 'flex',
+  marginTop: `${gridSize * 0.5}px`,
+  justifyContent: 'baseline',
+  fontFamily: `${fontFamily}`,
+  fontWeight: 'normal'
+});
+const iconWrapperStyles = css({
+  display: 'flex'
+});
+
+const IconWrapper = ({
+  children
+}) => {
+  return jsx("span", {
+    css: iconWrapperStyles
+  }, children);
+};
+
+const Message = ({
+  children,
+  error,
+  valid,
+  fieldId,
+  testId
+}) => {
+  const {
+    mode
+  } = useGlobalTheme();
+  return jsx("div", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, error ? messageErrorColorStyles : valid ? messageValidColorStyles : messageNeutralColorStyles],
+    "data-testid": testId,
+    id: fieldId
+  }, children);
+};
+
+/**
+ * __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 const HelperMessage = ({
+  children,
+  testId
+}) => jsx(FieldId.Consumer, null, fieldId => jsx(Message, {
+  fieldId: fieldId ? `${fieldId}-helper` : undefined,
+  testId: testId
+}, children));
+/**
+ * __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 const ErrorMessage = ({
+  children,
+  testId
+}) => jsx(FieldId.Consumer, null, fieldId => jsx(Message, {
+  error: true,
+  fieldId: fieldId ? `${fieldId}-error` : undefined,
+  testId: testId
+}, jsx(IconWrapper, null, jsx(ErrorIcon, {
+  size: "small",
+  label: "error"
+})), children));
+/**
+ * __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 const ValidMessage = ({
+  children,
+  testId
+}) => jsx(FieldId.Consumer, null, fieldId => jsx(Message, {
+  fieldId: fieldId ? `${fieldId}-valid` : undefined,
+  testId: testId,
+  valid: true
+}, jsx(IconWrapper, null, jsx(SuccessIcon, {
+  size: "small",
+  label: "success"
+})), children));

package/dist/es2019/{RangeField.js → range-field.js}

@@ -1,7 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import Field from './Field';
+import Field from './field';
 
+/**
+ * __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)
+ */
 const RangeField = props => {
   const {
     children,

package/dist/es2019/version.json

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

package/dist/esm/{CheckboxField.js → checkbox-field.js}

@@ -8,8 +8,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import React, { useCallback } from 'react';
-import Field from './Field';
+import Field from './field';
 
+/**
+ * __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
+ */
 var CheckboxField = function CheckboxField(props) {
   var children = props.children,
       _props$defaultIsCheck = props.defaultIsChecked,

package/dist/esm/entry-points/checkbox-field.js

@@ -0,0 +1 @@
+export { default as CheckboxField } from '../checkbox-field';

package/dist/esm/entry-points/field.js

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

package/dist/esm/entry-points/fieldset.js

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

package/dist/esm/entry-points/form-footer.js

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

package/dist/esm/entry-points/form-header.js

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

package/dist/esm/entry-points/form-section.js

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

package/dist/esm/entry-points/form.js

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

package/dist/esm/entry-points/messages.js

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

package/dist/esm/entry-points/range-field.js

@@ -0,0 +1 @@
+export { default as RangeField } from '../range-field';