@atlaskit/form 8.8.3 → 8.8.4

package/dist/cjs/range-field.js

@@ -1,30 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _field = _interopRequireDefault(require("./field"));
-
 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) { (0, _defineProperty2.default)(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; }
-
 /**
  * __Range field__
  *
@@ -36,8 +26,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var RangeField = function RangeField(props) {
   var children = props.children,
-      strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded); // isInvalid and isRequired are specifically invalid for range inputs
-
+    strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  // isInvalid and isRequired are specifically invalid for range inputs
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -45,16 +35,15 @@ var RangeField = function RangeField(props) {
       transform: Number
     }), function (_ref) {
       var _ref$fieldProps = _ref.fieldProps,
-          isInvalid = _ref$fieldProps.isInvalid,
-          isRequired = _ref$fieldProps.isRequired,
-          fieldProps = (0, _objectWithoutProperties2.default)(_ref$fieldProps, _excluded2),
-          rest = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
+        isInvalid = _ref$fieldProps.isInvalid,
+        isRequired = _ref$fieldProps.isRequired,
+        fieldProps = (0, _objectWithoutProperties2.default)(_ref$fieldProps, _excluded2),
+        rest = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
       return children(_objectSpread({
         fieldProps: fieldProps
       }, rest));
     })
   );
 };
-
 var _default = RangeField;
 exports.default = _default;

package/dist/cjs/version.json

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

package/dist/es2019/checkbox-field.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import Field from './field';
-
 /**
  * __Checkbox field__
  *
@@ -17,8 +16,9 @@ const CheckboxField = props => {
     defaultIsChecked = false,
     value,
     ...rest
-  } = props; // Maintains a memoised list of the default values
+  } = props;
 
+  // Maintains a memoised list of the default values
   const defaultValue = useCallback((currentValue = []) => defaultIsChecked && value !== undefined ? [...currentValue, value] : currentValue, [value, defaultIsChecked]);
   return value !== undefined ? /*#__PURE__*/React.createElement(Field, _extends({}, rest, {
     defaultValue: defaultValue,
@@ -30,7 +30,8 @@ const CheckboxField = props => {
     },
     ...others
   }) => children({
-    fieldProps: { ...otherFieldProps,
+    fieldProps: {
+      ...otherFieldProps,
       isChecked: !!fieldValue.find(v => v === value),
       value
     },
@@ -45,14 +46,14 @@ const CheckboxField = props => {
     },
     ...others
   }) => children({
-    fieldProps: { ...otherFieldProps,
+    fieldProps: {
+      ...otherFieldProps,
       isChecked: fieldValue,
       value
     },
     ...others
   }));
 };
-
 CheckboxField.defaultProps = {
   defaultIsChecked: false
 };

package/dist/es2019/field.js

@@ -17,56 +17,48 @@ const requiredIndicatorStyles = css({
   color: `var(--ds-text-danger, ${R400})`,
   fontFamily
 });
-
 function isEvent(event) {
   return Boolean(event && event.target);
 }
-
 function isFunction(x) {
   return typeof x === 'function';
 }
-
 /**
  * __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__*/createContext(undefined);
-
 function usePreviousRef(current) {
-  const ref = useRef(current); // will be updated on the next render
+  const ref = useRef(current);
 
+  // will be updated on the next render
   useEffect(() => {
     ref.current = current;
-  }); // return the existing current (pre render)
+  });
 
+  // return the existing current (pre render)
   return ref;
 }
-
 function isShallowEqual(previousValue, currentValue) {
   if (previousValue === currentValue) {
     return true;
-  } // not checking functions
-
+  }
 
+  // not checking functions
   if (typeof previousValue === 'function' && typeof currentValue === 'function') {
     return true;
   }
-
   if (Array.isArray(previousValue) && Array.isArray(currentValue)) {
     return JSON.stringify(previousValue) === JSON.stringify(currentValue);
   }
-
   if (typeof previousValue === 'object' && typeof currentValue === 'object') {
     return JSON.stringify(previousValue) === JSON.stringify(currentValue);
   }
-
   return false;
 }
-
 export default function Field(props) {
   var _getCurrentValue;
-
   const {
     registerField,
     getCurrentValue
@@ -74,19 +66,18 @@ export default function Field(props) {
   const isDisabled = useContext(IsDisabledContext) || props.isDisabled || false;
   const defaultValue = isFunction(props.defaultValue) ? props.defaultValue() : props.defaultValue;
   const latestPropsRef = usePreviousRef(props);
+
   /**
    * HACK: defaultValue can potentially be an array or object which cannot be
    * passed directly into a `useEffect` dependency array, since it will trigger
    * the hook every time.
    */
-
   const isDefaultValueChanged = !isShallowEqual(latestPropsRef.current.defaultValue, props.defaultValue);
   const [state, setState] = useState({
     fieldProps: {
       onChange: () => {},
       onBlur: () => {},
       onFocus: () => {},
-
       /* Previously, defaultValue was being set as undefined in Field.defaultProps, which
        * effectively made it an optional prop to external consumers of Field. However the
        * prop types defined defaultValue as required, so inside the component it was not
@@ -119,7 +110,6 @@ export default function Field(props) {
     if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
       invariant(latestPropsRef.current.name, '@atlaskit/form: Field components have a required name prop');
     }
-
     function fieldStateToMeta(value = {}) {
       return {
         dirty: value.dirty || false,
@@ -133,7 +123,6 @@ export default function Field(props) {
         validating: !!value.validating
       };
     }
-
     const unregister = registerField(latestPropsRef.current.name,
     /**
      * Similar as for setting initial state value.
@@ -144,47 +133,44 @@ export default function Field(props) {
      * the key prop to re-run validation.
      */
     // @ts-ignore
-    isDefaultValueChanged || // @ts-ignore
+    isDefaultValueChanged ||
+    // @ts-ignore
     isFunction(latestPropsRef.current.defaultValue) ? latestPropsRef.current.defaultValue : latestStateRef.current.fieldProps.value, fieldState => {
       /**
        * 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.
        */
-
       const modifiedSubmitFailed = fieldState.submitting ? latestStateRef.current.meta.submitFailed : fieldState.submitFailed;
+
       /**
        * 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;
+
       /**
        * If there has been a submit error, then use logic in modifiedError to determine validity,
        * so we can determine when there is a submit error which we do not want to display
        * because the value has been changed.
        */
-
       const modifiedValid = modifiedSubmitFailed ? modifiedError === undefined : fieldState.valid;
-
       function getTransform(eventOrValue, currentValue) {
         if (latestPropsRef.current.transform) {
           return latestPropsRef.current.transform(eventOrValue, currentValue);
         }
-
         if (isEvent(eventOrValue)) {
           const {
             currentTarget
           } = eventOrValue;
-
           if (currentTarget.type === 'checkbox') {
             //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
             if (currentTarget.checked) {
               return currentTarget.value || true;
             }
-
             return currentTarget.value ? undefined : false;
           } else if (currentTarget) {
             return currentTarget.value;
@@ -193,7 +179,6 @@ export default function Field(props) {
           return eventOrValue;
         }
       }
-
       setState({
         fieldProps: {
           onChange: e => {
@@ -204,7 +189,6 @@ export default function Field(props) {
           value: fieldState.value
         },
         error: modifiedError || undefined,
-
         /**
          * The following parameters are optionally typed in final-form to indicate that not all parameters need
          * to be subscribed to. We cast them as booleans (using || false), since this is what they are semantically.
@@ -226,7 +210,6 @@ export default function Field(props) {
     }, {
       getValidator: () => function validate(value, formState, fieldState) {
         const supplied = latestPropsRef.current.validate;
-
         if (supplied && fieldState) {
           return supplied(value, formState, fieldStateToMeta(fieldState));
         }
@@ -234,11 +217,13 @@ export default function Field(props) {
     });
     return unregister;
   }, [latestPropsRef, latestStateRef, registerField, props.name, isDefaultValueChanged]);
-  const fieldId = useMemo( // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  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,
+  const extendedFieldProps = {
+    ...state.fieldProps,
     name: props.name,
     isDisabled,
     isInvalid: Boolean(state.error),

package/dist/es2019/fieldset.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { subtleHeading } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
@@ -15,11 +16,11 @@ const fieldsetLabelStyles = css({
 const fieldSetStyles = css({
   marginTop: `${gridSize}px`
 });
+
 /**
  * TODO: Address duplication with packages/design-system/form/src/label.tsx
  * in https://product-fabric.atlassian.net/browse/DSP-7731
  */
-
 const getFieldsetLabelDynamicStyles = mode => css([h200({
   theme: {
     mode
@@ -30,13 +31,13 @@ const getFieldsetLabelDynamicStyles = mode => css([h200({
       mode
     }
   })})`
-}]); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+}]);
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+const lightH200Styles = getFieldsetLabelDynamicStyles('light');
 
-const lightH200Styles = getFieldsetLabelDynamicStyles('light'); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const darkH200Styles = getFieldsetLabelDynamicStyles('dark');
-
 const FieldsetLabel = ({
   children
 }) => {
@@ -47,6 +48,7 @@ const FieldsetLabel = ({
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
   }, children);
 };
+
 /**
  * __Fieldset__
  *
@@ -57,8 +59,6 @@ const FieldsetLabel = ({
  * - [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
@@ -67,5 +67,4 @@ const Fieldset = ({
     css: fieldSetStyles
   }, legend && jsx("legend", null, jsx(FieldsetLabel, null, legend)), children);
 };
-
 export default Fieldset;

package/dist/es2019/form-footer.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();
@@ -10,6 +11,7 @@ const formFooterWrapperStyles = css({
 const justifyContentStyles = css({
   justifyContent: 'flex-start'
 });
+
 /**
  * __Form footer__
  *
@@ -19,7 +21,6 @@ const justifyContentStyles = css({
  * - [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

package/dist/es2019/form-header.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
@@ -22,20 +23,20 @@ const formHeaderTitleStyles = css({
 });
 const formHeaderWrapperStyles = css({
   fontFamily: `${fontFamily}`
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
 
+// 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
-
+}));
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const lightH700Styles = css(h700({
   theme: {
     mode: 'light'
   }
 }));
-
 const FormHeaderContent = ({
   children
 }) => {
@@ -43,7 +44,6 @@ const FormHeaderContent = ({
     css: formHeaderContentStyles
   }, children);
 };
-
 const FormHeaderDescription = ({
   children
 }) => {
@@ -51,7 +51,6 @@ const FormHeaderDescription = ({
     css: formHeaderDescriptionStyles
   }, children);
 };
-
 const FormHeaderTitle = ({
   children
 }) => {
@@ -62,7 +61,6 @@ const FormHeaderTitle = ({
     css: [mode === 'light' ? lightH700Styles : darkH700Styles, formHeaderTitleStyles]
   }, children);
 };
-
 const FormHeaderWrapper = ({
   children
 }) => {
@@ -70,6 +68,7 @@ const FormHeaderWrapper = ({
     css: formHeaderWrapperStyles
   }, children);
 };
+
 /**
  * __Form header__
  *
@@ -80,8 +79,6 @@ const FormHeaderWrapper = ({
  * - [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,
@@ -89,6 +86,5 @@ const FormHeader = ({
 }) => {
   return jsx(FormHeaderWrapper, null, title && jsx(FormHeaderTitle, null, title), description && jsx(FormHeaderDescription, null, description), children && jsx(FormHeaderContent, null, children));
 };
-
 export default FormHeader;
 export { FormHeaderContent, FormHeaderDescription, FormHeaderTitle };

package/dist/es2019/form-section.js

@@ -18,20 +18,20 @@ const formSectionTitleStyles = css({
 });
 const formSectionWrapperStyles = css({
   marginTop: `${gridSize * 3}px`
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
 
+// 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
-
+}));
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const darkH600Styles = css(h600({
   theme: {
     mode: 'dark'
   }
 }));
-
 const FormSectionWrapper = ({
   children
 }) => {
@@ -39,7 +39,6 @@ const FormSectionWrapper = ({
     css: formSectionWrapperStyles
   }, children);
 };
-
 const FormSectionTitle = ({
   children
 }) => {
@@ -50,7 +49,6 @@ const FormSectionTitle = ({
     css: [formSectionTitleStyles, mode === 'light' ? lightH600Styles : darkH600Styles]
   }, children);
 };
-
 const FormSectionDescription = ({
   children
 }) => {
@@ -58,6 +56,7 @@ const FormSectionDescription = ({
     css: formSectionDescriptionStyles
   }, children);
 };
+
 /**
  * __Form section__
  *
@@ -68,8 +67,6 @@ const FormSectionDescription = ({
  * - [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,
@@ -77,5 +74,4 @@ const FormSection = ({
 }) => {
   return jsx(FormSectionWrapper, null, title && jsx(FormSectionTitle, null, title), description && jsx(FormSectionDescription, null, description), children);
 };
-
 export default FormSection;

package/dist/es2019/form.js

@@ -2,7 +2,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__
  *
@@ -14,12 +13,12 @@ export const FormContext = /*#__PURE__*/createContext({
   },
   getCurrentValue: () => undefined
 });
+
 /**
  * __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);
@@ -37,8 +36,8 @@ export default function Form(props) {
             const initialValues = state.formState.initialValues;
             const values = state.formState.values;
             const value = name && typeof defaultValue === 'function' ? defaultValue(initialValues[name]) : defaultValue;
-            /* eslint-disable no-param-reassign */
 
+            /* eslint-disable no-param-reassign */
             set(initialValues, name, value);
             set(values, name, value);
             /* eslint-enable */
@@ -46,6 +45,7 @@ export default function Form(props) {
         }
       }
     });
+
     createDecorator(() => formRef.current ? Array.from(formRef.current.querySelectorAll('input')) : [])(finalForm);
     return finalForm;
   });
@@ -75,31 +75,24 @@ export default function Form(props) {
     form.resumeValidation();
     return unsubscribe;
   }, [form]);
-
   const handleSubmit = e => {
     if (e) {
       e.preventDefault();
     }
-
     form.submit();
   };
-
   const handleReset = initialValues => {
     form.reset(initialValues);
   };
-
   const handleKeyDown = e => {
     if (e.key === 'Enter' && (e.ctrlKey || e.metaKey) && formRef.current) {
       const submitButton = formRef.current.querySelector('button:not([type]), button[type="submit"], input[type="submit"]');
-
       if (submitButton) {
         submitButton.click();
       }
-
       e.preventDefault();
     }
   };
-
   const {
     isDisabled = false,
     children
@@ -108,11 +101,11 @@ export default function Form(props) {
     dirty,
     submitting
   } = state;
+
   /**
    * 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.
    */
-
   const getCurrentValue = useCallback(name => {
     const formState = form.getState();
     return (formState === null || formState === void 0 ? void 0 : formState.values[name]) || undefined;

package/dist/es2019/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/es2019/label.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { subtleHeading } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
@@ -12,11 +13,11 @@ const labelStyles = css({
   marginBottom: gridSize / 2,
   fontFamily: fontFamily
 });
+
 /**
  * TODO: Address duplication with packages/design-system/form/src/fieldset.tsx
  * in https://product-fabric.atlassian.net/browse/DSP-7731
  */
-
 const getFieldsetLabelDynamicStyles = mode => css([h200({
   theme: {
     mode
@@ -27,12 +28,14 @@ const getFieldsetLabelDynamicStyles = mode => css([h200({
       mode
     }
   })})`
-}]); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
+}]);
 
-const lightH200Styles = getFieldsetLabelDynamicStyles('light'); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+const lightH200Styles = getFieldsetLabelDynamicStyles('light');
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 const darkH200Styles = getFieldsetLabelDynamicStyles('dark');
+
 /**
  * __Label__
  *
@@ -41,7 +44,6 @@ const darkH200Styles = getFieldsetLabelDynamicStyles('dark');
  * It's recommended that a label has a `4px` spacing above its associated
  * control element.
  */
-
 const Label = ({
   children,
   htmlFor,
@@ -56,5 +58,4 @@ const Label = ({
     htmlFor: htmlFor
   }, children);
 };
-
 export default Label;