@atlaskit/form 8.8.2 → 8.8.4

package/dist/esm/form.js

@@ -3,7 +3,6 @@ import React, { createContext, useCallback, useEffect, useMemo, useRef, useState
 import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
 import set from 'lodash/set';
-
 /**
  * __Form context__
  *
@@ -17,67 +16,62 @@ export var FormContext = /*#__PURE__*/createContext({
     return undefined;
   }
 });
+
 /**
  * __Is disabled context__
  *
  * An is disabled context creates the context for when a value is disabled.
  */
-
 export var IsDisabledContext = /*#__PURE__*/createContext(false);
 export default function Form(props) {
   var formRef = useRef(null);
   var onSubmitRef = useRef(props.onSubmit);
   onSubmitRef.current = props.onSubmit;
-
   var _useState = useState(function () {
-    // Types here would break the existing API
-    var finalForm = createForm({
-      onSubmit: function onSubmit() {
-        return onSubmitRef.current.apply(onSubmitRef, arguments);
-      },
-      destroyOnUnregister: true,
-      initialValues: {},
-      mutators: {
-        setDefaultValue: function setDefaultValue(_ref, state) {
-          var _ref2 = _slicedToArray(_ref, 2),
+      // Types here would break the existing API
+      var finalForm = createForm({
+        onSubmit: function onSubmit() {
+          return onSubmitRef.current.apply(onSubmitRef, arguments);
+        },
+        destroyOnUnregister: true,
+        initialValues: {},
+        mutators: {
+          setDefaultValue: function setDefaultValue(_ref, state) {
+            var _ref2 = _slicedToArray(_ref, 2),
               name = _ref2[0],
               defaultValue = _ref2[1];
-
-          if (state.formState.initialValues) {
-            var _initialValues = state.formState.initialValues;
-            var values = state.formState.values;
-
-            var _value = name && typeof defaultValue === 'function' ? defaultValue(_initialValues[name]) : defaultValue;
-            /* eslint-disable no-param-reassign */
-
-
-            set(_initialValues, name, _value);
-            set(values, name, _value);
-            /* eslint-enable */
+            if (state.formState.initialValues) {
+              var _initialValues = state.formState.initialValues;
+              var values = state.formState.values;
+              var _value = name && typeof defaultValue === 'function' ? defaultValue(_initialValues[name]) : defaultValue;
+
+              /* eslint-disable no-param-reassign */
+              set(_initialValues, name, _value);
+              set(values, name, _value);
+              /* eslint-enable */
+            }
           }
         }
-      }
-    });
-    createDecorator(function () {
-      return formRef.current ? Array.from(formRef.current.querySelectorAll('input')) : [];
-    })(finalForm);
-    return finalForm;
-  }),
-      _useState2 = _slicedToArray(_useState, 1),
-      form = _useState2[0];
+      });
 
+      createDecorator(function () {
+        return formRef.current ? Array.from(formRef.current.querySelectorAll('input')) : [];
+      })(finalForm);
+      return finalForm;
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    form = _useState2[0];
   var _useState3 = useState({
-    dirty: false,
-    submitting: false
-  }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      state = _useState4[0],
-      setState = _useState4[1];
-
+      dirty: false,
+      submitting: false
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    state = _useState4[0],
+    setState = _useState4[1];
   useEffect(function () {
     var unsubscribe = form.subscribe(function (_ref3) {
       var dirty = _ref3.dirty,
-          submitting = _ref3.submitting;
+        submitting = _ref3.submitting;
       setState({
         dirty: dirty,
         submitting: submitting
@@ -95,41 +89,34 @@ export default function Form(props) {
     form.resumeValidation();
     return unsubscribe;
   }, [form]);
-
   var handleSubmit = function handleSubmit(e) {
     if (e) {
       e.preventDefault();
     }
-
     form.submit();
   };
-
   var handleReset = function handleReset(initialValues) {
     form.reset(initialValues);
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter' && (e.ctrlKey || e.metaKey) && formRef.current) {
       var submitButton = formRef.current.querySelector('button:not([type]), button[type="submit"], input[type="submit"]');
-
       if (submitButton) {
         submitButton.click();
       }
-
       e.preventDefault();
     }
   };
-
   var _props$isDisabled = props.isDisabled,
-      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-      children = props.children;
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    children = props.children;
   var dirty = state.dirty,
-      submitting = state.submitting;
+    submitting = state.submitting;
+
   /**
    * This method is needed in FormContext to use it on the field level
    * to check the current value of the field in case of the component re-mounting.
    */
-
   var getCurrentValue = useCallback(function (name) {
     var formState = form.getState();
     return (formState === null || formState === void 0 ? void 0 : formState.values[name]) || undefined;

package/dist/esm/index.js

@@ -7,4 +7,5 @@ export { default as CheckboxField } from './checkbox-field';
 export { default as RangeField } from './range-field';
 export { default as Label } from './label';
 export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
-export { default as Fieldset } from './fieldset'; // eslint-disable-next-line import/no-unresolved
+export { default as Fieldset } from './fieldset';
+// eslint-disable-next-line import/no-unresolved

package/dist/esm/label.js

@@ -1,5 +1,7 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
+import { subtleHeading } 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';
@@ -10,19 +12,32 @@ var labelStyles = css({
   marginTop: 0,
   marginBottom: gridSize / 2,
   fontFamily: fontFamily
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
+
+/**
+ * TODO: Address duplication with packages/design-system/form/src/fieldset.tsx
+ * in https://product-fabric.atlassian.net/browse/DSP-7731
+ */
+var getFieldsetLabelDynamicStyles = function getFieldsetLabelDynamicStyles(mode) {
+  return css([h200({
+    theme: {
+      mode: mode
+    }
+  }), {
+    color: "var(--ds-text-subtle, ".concat(subtleHeading({
+      theme: {
+        mode: mode
+      }
+    }), ")")
+  }]);
+};
 
-var lightH200Styles = css(h200({
-  theme: {
-    mode: 'light'
-  }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var lightH200Styles = getFieldsetLabelDynamicStyles('light');
+
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 
-var darkH200Styles = css(h200({
-  theme: {
-    mode: 'dark'
-  }
-}));
 /**
  * __Label__
  *
@@ -31,20 +46,16 @@ var darkH200Styles = css(h200({
  * It's recommended that a label has a `4px` spacing above its associated
  * control element.
  */
-
 var Label = function Label(_ref) {
   var children = _ref.children,
-      htmlFor = _ref.htmlFor,
-      id = _ref.id;
-
+    htmlFor = _ref.htmlFor,
+    id = _ref.id;
   var _useGlobalTheme = useGlobalTheme(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return jsx("label", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
     id: id,
     htmlFor: htmlFor
   }, children);
 };
-
 export default Label;

package/dist/esm/messages.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
@@ -9,28 +10,20 @@ import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/
 import { h200 } from '@atlaskit/theme/typography';
 import { FieldId } from './field';
 var gridSize = getGridSize();
-var fontFamily = getFontFamily(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var fontFamily = getFontFamily();
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var lightH200Styles = css(h200({
   theme: {
     mode: 'light'
   }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
+}));
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var darkH200Styles = css(h200({
   theme: {
     mode: 'dark'
   }
 }));
-var messageErrorColorStyles = css({
-  color: "var(--ds-text-danger, #AE2A19)"
-});
-var messageNeutralColorStyles = css({
-  color: "var(--ds-text-subtlest, ".concat(N200, ")")
-});
-var messageValidColorStyles = css({
-  color: "var(--ds-text-success, #216E4E)"
-});
 var messageStyles = css({
   display: 'flex',
   marginTop: "".concat(gridSize * 0.5, "px"),
@@ -38,32 +31,60 @@ var messageStyles = css({
   fontFamily: "".concat(fontFamily),
   fontWeight: 'normal'
 });
+var messageAppearanceStyles = {
+  default: css({
+    color: "var(--ds-text-subtlest, ".concat(N200, ")")
+  }),
+  error: css({
+    color: "var(--ds-text-danger, #AE2A19)"
+  }),
+  valid: css({
+    color: "var(--ds-text-success, #216E4E)"
+  })
+};
 var iconWrapperStyles = css({
   display: 'flex'
 });
-
 var IconWrapper = function IconWrapper(_ref) {
   var children = _ref.children;
   return jsx("span", {
     css: iconWrapperStyles
   }, children);
 };
-
+var messageIcons = {
+  error: jsx(ErrorIcon, {
+    size: "small",
+    label: "error"
+  }),
+  valid: jsx(SuccessIcon, {
+    size: "small",
+    label: "success"
+  })
+};
 var Message = function Message(_ref2) {
   var children = _ref2.children,
-      error = _ref2.error,
-      valid = _ref2.valid,
-      fieldId = _ref2.fieldId,
-      testId = _ref2.testId;
-
+    _ref2$appearance = _ref2.appearance,
+    appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
+    fieldId = _ref2.fieldId,
+    testId = _ref2.testId;
   var _useGlobalTheme = useGlobalTheme(),
-      mode = _useGlobalTheme.mode;
+    mode = _useGlobalTheme.mode;
+  var icon = messageIcons[appearance];
 
+  /**
+   * The wrapping span is necessary to preserve spaces between children.
+   * Otherwise the flex layout of the message will remove any whitespace
+   * between children.
+   *
+   * If the child is just a string, this is not required and we can use one
+   * less DOM element.
+   */
+  var content = typeof children === 'string' ? children : jsx("span", null, children);
   return jsx("div", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, error ? messageErrorColorStyles : valid ? messageValidColorStyles : messageNeutralColorStyles],
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId
-  }, children);
+  }, icon && jsx(IconWrapper, null, icon), content);
 };
 
 /**
@@ -75,7 +96,7 @@ var Message = function Message(_ref2) {
  */
 export var HelperMessage = function HelperMessage(_ref3) {
   var children = _ref3.children,
-      testId = _ref3.testId;
+    testId = _ref3.testId;
   return jsx(FieldId.Consumer, null, function (fieldId) {
     return jsx(Message, {
       fieldId: fieldId ? "".concat(fieldId, "-helper") : undefined,
@@ -83,6 +104,7 @@ export var HelperMessage = function HelperMessage(_ref3) {
     }, children);
   });
 };
+
 /**
  * __Error message__
  *
@@ -90,21 +112,18 @@ export var HelperMessage = function HelperMessage(_ref3) {
  * 'Invalid username, needs to be more than 4 characters'.
  *
  */
-
 export var ErrorMessage = function ErrorMessage(_ref4) {
   var children = _ref4.children,
-      testId = _ref4.testId;
+    testId = _ref4.testId;
   return jsx(FieldId.Consumer, null, function (fieldId) {
     return jsx(Message, {
-      error: true,
+      appearance: "error",
       fieldId: fieldId ? "".concat(fieldId, "-error") : undefined,
       testId: testId
-    }, jsx(IconWrapper, null, jsx(ErrorIcon, {
-      size: "small",
-      label: "error"
-    })), children);
+    }, children);
   });
 };
+
 /**
  * __Valid message__
  *
@@ -112,18 +131,14 @@ export var ErrorMessage = function ErrorMessage(_ref4) {
  * a helper message could be 'Nice one, this username is available'.
  *
  */
-
 export var ValidMessage = function ValidMessage(_ref5) {
   var children = _ref5.children,
-      testId = _ref5.testId;
+    testId = _ref5.testId;
   return jsx(FieldId.Consumer, null, function (fieldId) {
     return jsx(Message, {
+      appearance: "valid",
       fieldId: fieldId ? "".concat(fieldId, "-valid") : undefined,
-      testId: testId,
-      valid: true
-    }, jsx(IconWrapper, null, jsx(SuccessIcon, {
-      size: "small",
-      label: "success"
-    })), children);
+      testId: testId
+    }, children);
   });
 };

package/dist/esm/range-field.js

@@ -2,16 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"],
-    _excluded2 = ["isInvalid", "isRequired"],
-    _excluded3 = ["fieldProps"];
-
+  _excluded2 = ["isInvalid", "isRequired"],
+  _excluded3 = ["fieldProps"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import Field from './field';
-
 /**
  * __Range field__
  *
@@ -23,9 +19,8 @@ import Field from './field';
  */
 var RangeField = function RangeField(props) {
   var children = props.children,
-      strippedProps = _objectWithoutProperties(props, _excluded); // isInvalid and isRequired are specifically invalid for range inputs
-
-
+    strippedProps = _objectWithoutProperties(props, _excluded);
+  // isInvalid and isRequired are specifically invalid for range inputs
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -33,16 +28,14 @@ var RangeField = function RangeField(props) {
       transform: Number
     }), function (_ref) {
       var _ref$fieldProps = _ref.fieldProps,
-          isInvalid = _ref$fieldProps.isInvalid,
-          isRequired = _ref$fieldProps.isRequired,
-          fieldProps = _objectWithoutProperties(_ref$fieldProps, _excluded2),
-          rest = _objectWithoutProperties(_ref, _excluded3);
-
+        isInvalid = _ref$fieldProps.isInvalid,
+        isRequired = _ref$fieldProps.isRequired,
+        fieldProps = _objectWithoutProperties(_ref$fieldProps, _excluded2),
+        rest = _objectWithoutProperties(_ref, _excluded3);
       return children(_objectSpread({
         fieldProps: fieldProps
       }, rest));
     })
   );
 };
-
 export default RangeField;

package/dist/esm/version.json

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

package/dist/types/messages.d.ts

@@ -1,6 +1,10 @@
 /** @jsx jsx */
 import React, { ReactNode } from 'react';
-interface MessageProps {
+declare type MessageAppearance = 'default' | 'error' | 'valid';
+/**
+ * API for the internal `<Message />` component. This is not public API.
+ */
+interface InternalMessageProps {
     /**
      * The content of the message
      */
@@ -12,15 +16,15 @@ interface MessageProps {
      */
     testId?: string;
     /**
-     * Checks whether message input is invalid and should show an error.
-     */
-    error?: boolean;
-    /**
-     * Checks whether message input is valid.
+     * Determines the appearance of the message.
      */
-    valid?: boolean;
+    appearance?: MessageAppearance;
     fieldId?: string;
 }
+/**
+ * Public API of the various message components.
+ */
+declare type MessageProps = Pick<InternalMessageProps, 'children' | 'testId'>;
 /**
  * __Helper message__
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.8.2",
+  "version": "8.8.4",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
   "dependencies": {
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "final-form": "^4.20.1",
@@ -55,18 +55,19 @@
   },
   "devDependencies": {
     "@atlaskit/button": "^16.5.0",
-    "@atlaskit/calendar": "^12.4.0",
+    "@atlaskit/calendar": "^13.0.0",
     "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/datetime-picker": "^12.3.0",
     "@atlaskit/docs": "^9.0.0",
     "@atlaskit/dropdown-menu": "^11.5.0",
     "@atlaskit/droplist": "^11.0.0",
     "@atlaskit/ds-lib": "^2.1.1",
+    "@atlaskit/lozenge": "^11.2.4",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/range": "^7.0.0",
     "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/select": "^16.0.0",
+    "@atlaskit/select": "^16.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/textarea": "^4.5.0",
     "@atlaskit/textfield": "^5.3.0",

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/form"
 
@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -199,6 +200,15 @@ interface FormSectionProps {
 // @public
 export const HelperMessage: React_2.FC<MessageProps>;
 
+// @public
+interface InternalMessageProps {
+  appearance?: MessageAppearance;
+  children: ReactNode;
+  // (undocumented)
+  fieldId?: string;
+  testId?: string;
+}
+
 // @public
 export const Label: FC<LabelProps>;
 
@@ -211,14 +221,10 @@ export interface LabelProps {
 }
 
 // @public (undocumented)
-interface MessageProps {
-  children: ReactNode;
-  error?: boolean;
-  // (undocumented)
-  fieldId?: string;
-  testId?: string;
-  valid?: boolean;
-}
+type MessageAppearance = 'default' | 'error' | 'valid';
+
+// @public
+type MessageProps = Pick<InternalMessageProps, 'children' | 'testId'>;
 
 // @public (undocumented)
 interface Meta {
@@ -283,3 +289,15 @@ export const ValidMessage: React_2.FC<MessageProps>;
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->