@atlaskit/form 8.8.2 → 8.8.4

package/dist/esm/field.js

@@ -1,11 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
-
 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; }
-
 /** @jsx jsx */
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -25,114 +22,101 @@ var requiredIndicatorStyles = css({
   color: "var(--ds-text-danger, ".concat(R400, ")"),
   fontFamily: 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 var FieldId = /*#__PURE__*/createContext(undefined);
-
 function usePreviousRef(current) {
-  var ref = useRef(current); // will be updated on the next render
+  var ref = useRef(current);
 
+  // will be updated on the next render
   useEffect(function () {
     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;
-
   var _useContext = useContext(FormContext),
-      registerField = _useContext.registerField,
-      getCurrentValue = _useContext.getCurrentValue;
-
+    registerField = _useContext.registerField,
+    getCurrentValue = _useContext.getCurrentValue;
   var isDisabled = useContext(IsDisabledContext) || props.isDisabled || false;
   var defaultValue = isFunction(props.defaultValue) ? props.defaultValue() : props.defaultValue;
   var 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.
    */
-
   var isDefaultValueChanged = !isShallowEqual(latestPropsRef.current.defaultValue, props.defaultValue);
-
   var _useState = useState({
-    fieldProps: {
-      onChange: function onChange() {},
-      onBlur: function onBlur() {},
-      onFocus: function 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
-       * valid for defaultValue to be undefined. We need to suppress the error
-       * after changing defaultValue to explictly be an optional prop.
-       * If default value has changed we are using new default value.
-       * Otherwise we need to check if we already have value for this field
-       * (because we are using changing key prop to re-run field level validation, and that
-       * cause the component re-mounting) to not override the actual value with the default value.
-       */
-      // @ts-ignore
-      value: isDefaultValueChanged ? defaultValue : (_getCurrentValue = getCurrentValue(props.name)) !== null && _getCurrentValue !== void 0 ? _getCurrentValue : defaultValue
-    },
-    error: undefined,
-    valid: false,
-    meta: {
-      dirty: false,
-      dirtySinceLastSubmit: false,
-      touched: false,
-      valid: false,
-      validating: false,
-      submitting: false,
-      submitFailed: false,
+      fieldProps: {
+        onChange: function onChange() {},
+        onBlur: function onBlur() {},
+        onFocus: function 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
+         * valid for defaultValue to be undefined. We need to suppress the error
+         * after changing defaultValue to explictly be an optional prop.
+         * If default value has changed we are using new default value.
+         * Otherwise we need to check if we already have value for this field
+         * (because we are using changing key prop to re-run field level validation, and that
+         * cause the component re-mounting) to not override the actual value with the default value.
+         */
+        // @ts-ignore
+        value: isDefaultValueChanged ? defaultValue : (_getCurrentValue = getCurrentValue(props.name)) !== null && _getCurrentValue !== void 0 ? _getCurrentValue : defaultValue
+      },
       error: undefined,
-      submitError: undefined
-    }
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
+      valid: false,
+      meta: {
+        dirty: false,
+        dirtySinceLastSubmit: false,
+        touched: false,
+        valid: false,
+        validating: false,
+        submitting: false,
+        submitFailed: false,
+        error: undefined,
+        submitError: undefined
+      }
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
   var latestStateRef = usePreviousRef(state);
   useEffect(function () {
     if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
       invariant(latestPropsRef.current.name, '@atlaskit/form: Field components have a required name prop');
     }
-
     function fieldStateToMeta() {
       var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return {
@@ -147,7 +131,6 @@ export default function Field(props) {
         validating: !!value.validating
       };
     }
-
     var unregister = registerField(latestPropsRef.current.name,
     /**
      * Similar as for setting initial state value.
@@ -158,45 +141,42 @@ 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, function (fieldState) {
       /**
        * Do not update dirtySinceLastSubmit until submission has finished.
        */
       var modifiedDirtySinceLastSubmit = fieldState.submitting ? latestStateRef.current.meta.dirtySinceLastSubmit : fieldState.dirtySinceLastSubmit;
+
       /**
        * Do not update submitFailed until submission has finished.
        */
-
       var modifiedSubmitFailed = fieldState.submitting ? latestStateRef.current.meta.submitFailed : fieldState.submitFailed;
+
       /**
        * Do not use submitError if the value has changed.
        */
-
       var modifiedSubmitError = modifiedDirtySinceLastSubmit && latestPropsRef.current.validate ? undefined : fieldState.submitError;
       var 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.
        */
-
       var modifiedValid = modifiedSubmitFailed ? modifiedError === undefined : fieldState.valid;
-
       function getTransform(eventOrValue, currentValue) {
         if (latestPropsRef.current.transform) {
           return latestPropsRef.current.transform(eventOrValue, currentValue);
         }
-
         if (isEvent(eventOrValue)) {
           var currentTarget = eventOrValue.currentTarget;
-
           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;
@@ -205,7 +185,6 @@ export default function Field(props) {
           return eventOrValue;
         }
       }
-
       setState({
         fieldProps: {
           onChange: function onChange(e) {
@@ -216,7 +195,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.
@@ -239,7 +217,6 @@ export default function Field(props) {
       getValidator: function getValidator() {
         return function validate(value, formState, fieldState) {
           var supplied = latestPropsRef.current.validate;
-
           if (supplied && fieldState) {
             return supplied(value, formState, fieldStateToMeta(fieldState));
           }
@@ -248,13 +225,13 @@ export default function Field(props) {
     });
     return unregister;
   }, [latestPropsRef, latestStateRef, registerField, props.name, isDefaultValueChanged]);
-  var fieldId = useMemo( // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  var fieldId = useMemo(
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
   function () {
     return props.id ? props.id : "".concat(props.name, "-").concat(uid({
       id: props.name
     }));
   }, [props.id, props.name]);
-
   var extendedFieldProps = _objectSpread(_objectSpread({}, state.fieldProps), {}, {
     name: props.name,
     isDisabled: isDisabled,
@@ -264,7 +241,6 @@ export default function Field(props) {
     'aria-labelledby': "".concat(fieldId, "-label ").concat(fieldId, "-helper ").concat(fieldId, "-valid ").concat(fieldId, "-error"),
     id: fieldId
   });
-
   return jsx("div", {
     css: fieldWrapperStyles
   }, props.label && jsx(Label, {

package/dist/esm/fieldset.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';
@@ -13,30 +15,40 @@ var fieldsetLabelStyles = css({
 });
 var fieldSetStyles = css({
   marginTop: "".concat(gridSize, "px")
-}); // 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
+/**
+ * TODO: Address duplication with packages/design-system/form/src/label.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 darkH200Styles = css(h200({
-  theme: {
-    mode: 'dark'
-  }
-}));
+// 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 FieldsetLabel = function FieldsetLabel(_ref) {
   var children = _ref.children;
-
   var _useGlobalTheme = useGlobalTheme(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return jsx("label", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
   }, children);
 };
+
 /**
  * __Fieldset__
  *
@@ -47,14 +59,11 @@ var FieldsetLabel = function FieldsetLabel(_ref) {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
  */
-
-
 var Fieldset = function Fieldset(_ref2) {
   var children = _ref2.children,
-      legend = _ref2.legend;
+    legend = _ref2.legend;
   return jsx("fieldset", {
     css: fieldSetStyles
   }, legend && jsx("legend", null, jsx(FieldsetLabel, null, legend)), children);
 };
-
 export default Fieldset;

package/dist/esm/form-footer.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();
@@ -10,6 +11,7 @@ var formFooterWrapperStyles = css({
 var justifyContentStyles = css({
   justifyContent: 'flex-start'
 });
+
 /**
  * __Form footer__
  *
@@ -19,11 +21,10 @@ var 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(_ref) {
   var _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'end' : _ref$align,
-      children = _ref.children;
+    align = _ref$align === void 0 ? 'end' : _ref$align,
+    children = _ref.children;
   return jsx("footer", {
     css: [formFooterWrapperStyles, align === 'start' && justifyContentStyles]
   }, children);

package/dist/esm/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,51 +23,47 @@ var formHeaderTitleStyles = css({
 });
 var formHeaderWrapperStyles = css({
   fontFamily: "".concat(fontFamily)
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var 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
 var lightH700Styles = css(h700({
   theme: {
     mode: 'light'
   }
 }));
-
 var FormHeaderContent = function FormHeaderContent(_ref) {
   var children = _ref.children;
   return jsx("div", {
     css: formHeaderContentStyles
   }, children);
 };
-
 var FormHeaderDescription = function FormHeaderDescription(_ref2) {
   var children = _ref2.children;
   return jsx("div", {
     css: formHeaderDescriptionStyles
   }, children);
 };
-
 var FormHeaderTitle = function FormHeaderTitle(_ref3) {
   var children = _ref3.children;
-
   var _useGlobalTheme = useGlobalTheme(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return jsx("h2", {
     css: [mode === 'light' ? lightH700Styles : darkH700Styles, formHeaderTitleStyles]
   }, children);
 };
-
 var FormHeaderWrapper = function FormHeaderWrapper(_ref4) {
   var children = _ref4.children;
   return jsx("div", {
     css: formHeaderWrapperStyles
   }, children);
 };
+
 /**
  * __Form header__
  *
@@ -77,14 +74,11 @@ var FormHeaderWrapper = function FormHeaderWrapper(_ref4) {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-
-
 var FormHeader = function FormHeader(_ref5) {
   var children = _ref5.children,
-      description = _ref5.description,
-      title = _ref5.title;
+    description = _ref5.description,
+    title = _ref5.title;
   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/esm/form-section.js

@@ -18,44 +18,41 @@ var formSectionTitleStyles = css({
 });
 var formSectionWrapperStyles = css({
   marginTop: "".concat(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
 var 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
 var darkH600Styles = css(h600({
   theme: {
     mode: 'dark'
   }
 }));
-
 var FormSectionWrapper = function FormSectionWrapper(_ref) {
   var children = _ref.children;
   return jsx("div", {
     css: formSectionWrapperStyles
   }, children);
 };
-
 var FormSectionTitle = function FormSectionTitle(_ref2) {
   var children = _ref2.children;
-
   var _useGlobalTheme = useGlobalTheme(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return jsx("h3", {
     css: [formSectionTitleStyles, mode === 'light' ? lightH600Styles : darkH600Styles]
   }, children);
 };
-
 var FormSectionDescription = function FormSectionDescription(_ref3) {
   var children = _ref3.children;
   return jsx("div", {
     css: formSectionDescriptionStyles
   }, children);
 };
+
 /**
  * __Form section__
  *
@@ -66,13 +63,10 @@ var FormSectionDescription = function FormSectionDescription(_ref3) {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-
-
 var FormSection = function FormSection(_ref4) {
   var children = _ref4.children,
-      description = _ref4.description,
-      title = _ref4.title;
+    description = _ref4.description,
+    title = _ref4.title;
   return jsx(FormSectionWrapper, null, title && jsx(FormSectionTitle, null, title), description && jsx(FormSectionDescription, null, description), children);
 };
-
 export default FormSection;