@cerebruminc/cerebellum 13.0.0 → 13.0.1

package/lib/cjs/Form.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormikContainer = require('./FormikContainer-d5d9c1d3.js');
+var FormikContainer = require('./FormikContainer-5bbc7b9d.js');
 var FormWrapper = require('./FormStyles-91ec9d95.js');
 var FormFieldTypeEnum = require('./FormFieldTypeEnum.cjs');
 require('./_tslib-955e611e.js');

package/lib/cjs/{FormikContainer-d5d9c1d3.js → FormikContainer-5bbc7b9d.js}

@@ -1087,7 +1087,7 @@ var CANCEL_BUTTON_TEXT_DEFAULT$1 = "Cancel";
 var CLEAR_FORM_BUTTON_TEXT = "Clear Form";
 var SUBMIT_BUTTON_TEXT_DEFAULT$1 = "Submit";
 var Form = function (_a) {
-    var addButtons = _a.addButtons, addButtonWidth = _a.addButtonWidth, _b = _a.cancelButtonText, cancelButtonText = _b === void 0 ? CANCEL_BUTTON_TEXT_DEFAULT$1 : _b, cancelButtonFunction = _a.cancelButtonFunction, clearFormButton = _a.clearFormButton, clearOnBottom = _a.clearOnBottom, configurableInputFieldActiveIds = _a.configurableInputFieldActiveIds, disableSubmit = _a.disableSubmit, disableSubmitUntilValid = _a.disableSubmitUntilValid, fields = _a.fields, formikProps = _a.formikProps, hasValues = _a.hasValues, hideSubmitButton = _a.hideSubmitButton, leftLabels = _a.leftLabels, _c = _a.leftLabelsRightGutter, leftLabelsRightGutter = _c === void 0 ? 200 : _c, _d = _a.leftLabelWidth, leftLabelWidth = _d === void 0 ? 200 : _d, loading = _a.loading, loadingFieldsNumber = _a.loadingFieldsNumber, maximumHeight = _a.maximumHeight, nextButton = _a.nextButton, observeScrollRef = _a.observeScrollRef, rowGap = _a.rowGap, stickyFooter = _a.stickyFooter, submitAttempt = _a.submitAttempt, submitButtonLoading = _a.submitButtonLoading, setConfigurableInputFieldActiveIds = _a.setConfigurableInputFieldActiveIds, setHasValues = _a.setHasValues, setSubmitAttempt = _a.setSubmitAttempt, submitButtonAlign = _a.submitButtonAlign, _e = _a.submitButtonText, submitButtonText = _e === void 0 ? SUBMIT_BUTTON_TEXT_DEFAULT$1 : _e, submitOnBlur = _a.submitOnBlur, title = _a.title, themeOverride = _a.themeOverride, thinStickyPadding = _a.thinStickyPadding;
+    var addButtons = _a.addButtons, addButtonWidth = _a.addButtonWidth, _b = _a.cancelButtonText, cancelButtonText = _b === void 0 ? CANCEL_BUTTON_TEXT_DEFAULT$1 : _b, cancelButtonFunction = _a.cancelButtonFunction, children = _a.children, clearFormButton = _a.clearFormButton, clearOnBottom = _a.clearOnBottom, configurableInputFieldActiveIds = _a.configurableInputFieldActiveIds, disableSubmit = _a.disableSubmit, disableSubmitUntilValid = _a.disableSubmitUntilValid, fields = _a.fields, formikProps = _a.formikProps, hasValues = _a.hasValues, hideSubmitButton = _a.hideSubmitButton, leftLabels = _a.leftLabels, _c = _a.leftLabelsRightGutter, leftLabelsRightGutter = _c === void 0 ? 200 : _c, _d = _a.leftLabelWidth, leftLabelWidth = _d === void 0 ? 200 : _d, loading = _a.loading, loadingFieldsNumber = _a.loadingFieldsNumber, maximumHeight = _a.maximumHeight, nextButton = _a.nextButton, observeScrollRef = _a.observeScrollRef, rowGap = _a.rowGap, stickyFooter = _a.stickyFooter, submitAttempt = _a.submitAttempt, submitButtonLoading = _a.submitButtonLoading, setConfigurableInputFieldActiveIds = _a.setConfigurableInputFieldActiveIds, setHasValues = _a.setHasValues, setSubmitAttempt = _a.setSubmitAttempt, submitButtonAlign = _a.submitButtonAlign, _e = _a.submitButtonText, submitButtonText = _e === void 0 ? SUBMIT_BUTTON_TEXT_DEFAULT$1 : _e, submitOnBlur = _a.submitOnBlur, title = _a.title, themeOverride = _a.themeOverride, thinStickyPadding = _a.thinStickyPadding;
     var _f = useMeasure.useMeasure(), targetRef = _f[0], targetMeasure = _f[1];
     var theme = styled.useTheme();
     var previousFields = usePrevious.usePrevious(fields);
@@ -1129,7 +1129,7 @@ var Form = function (_a) {
         resetForm();
         setHasValues(false);
     };
-    return loading ? (jsxRuntime.jsx(FormLoader, { leftLabels: Boolean(leftLabels), leftLabelsRightGutter: leftLabelsRightGutter, leftLabelWidth: leftLabelWidth, loadingFieldsNumber: loadingFieldsNumber !== null && loadingFieldsNumber !== void 0 ? loadingFieldsNumber : fields.length, rowGap: rowGap }, void 0)) : (jsxRuntime.jsxs(FormWrapper.FormGroup, _tslib.__assign({ ref: targetRef, "$maximumHeight": maximumHeight, "$stickyFooter": stickyFooter, "$themeOverride": themeOverride, "$thinStickyPadding": thinStickyPadding, as: Scroller.ShortScroller }, { children: [jsxRuntime.jsxs(FormWrapper.FormTitleGroup, { children: [jsxRuntime.jsx(FormWrapper.Title, _tslib.__assign({ "$themeOverride": themeOverride }, { children: title }), void 0), clearFormButton && !clearOnBottom && (jsxRuntime.jsx(FormWrapper.ClearFormButtonWrap, _tslib.__assign({ "$clickable": hasValues }, { children: jsxRuntime.jsx(TextLink.TextLink, { clickable: hasValues, fontSize: 12, onClick: clearForm, text: CLEAR_FORM_BUTTON_TEXT, textColorOverride: clearButtonColorFamily.main, textColorHoverOverride: clearButtonColorFamily.hover, textStyle: ButtonColorFamilyEnum.TextStyleEnum.Emphasis }, void 0) }), void 0))] }, void 0), fields.map(function (field, index) {
+    return loading ? (jsxRuntime.jsx(FormLoader, { leftLabels: Boolean(leftLabels), leftLabelsRightGutter: leftLabelsRightGutter, leftLabelWidth: leftLabelWidth, loadingFieldsNumber: loadingFieldsNumber !== null && loadingFieldsNumber !== void 0 ? loadingFieldsNumber : fields.length, rowGap: rowGap }, void 0)) : (jsxRuntime.jsxs(FormWrapper.FormGroup, _tslib.__assign({ ref: targetRef, "$maximumHeight": maximumHeight, "$stickyFooter": stickyFooter, "$themeOverride": themeOverride, "$thinStickyPadding": thinStickyPadding, as: Scroller.ShortScroller }, { children: [children, jsxRuntime.jsxs(FormWrapper.FormTitleGroup, { children: [jsxRuntime.jsx(FormWrapper.Title, _tslib.__assign({ "$themeOverride": themeOverride }, { children: title }), void 0), clearFormButton && !clearOnBottom && (jsxRuntime.jsx(FormWrapper.ClearFormButtonWrap, _tslib.__assign({ "$clickable": hasValues }, { children: jsxRuntime.jsx(TextLink.TextLink, { clickable: hasValues, fontSize: 12, onClick: clearForm, text: CLEAR_FORM_BUTTON_TEXT, textColorOverride: clearButtonColorFamily.main, textColorHoverOverride: clearButtonColorFamily.hover, textStyle: ButtonColorFamilyEnum.TextStyleEnum.Emphasis }, void 0) }), void 0))] }, void 0), fields.map(function (field, index) {
                 if (FormFieldTypeEnum.isSplitLine(field) && (!field.showIf || field.showIf({ values: values }))) {
                     var key = addOrRemoveById.makeIdString({ array: field.inlineFields, key: "fieldLabel" });
                     return (jsxRuntime.jsx(SplitLineField, { fade: FormWrapper.shouldFade({ isDeleting: isDeleting, index: index }), field: field, formikProps: formikProps, formWidth: targetMeasure === null || targetMeasure === void 0 ? void 0 : targetMeasure.width, observeScrollRef: observeScrollRef, rowGap: rowGap, setHasValues: setHasValues, setSubmitAttempt: setSubmitAttempt, submitAttempt: submitAttempt, submitOnBlur: submitOnBlur }, "".concat(key, "_").concat(index)));
@@ -1240,11 +1240,23 @@ Form.defaultProps = {
 
 var CANCEL_BUTTON_TEXT_DEFAULT = "Cancel";
 var SUBMIT_BUTTON_TEXT_DEFAULT = "Submit";
+var FormSubmitWatcher = function (_a) {
+    var setHasSubmitted = _a.setHasSubmitted;
+    var isValidating = formik.useFormikContext().isValidating;
+    React.useEffect(function () {
+        if (isValidating) {
+            setHasSubmitted(true);
+        }
+    }, [isValidating]);
+    return null; // This component does not render anything
+};
 var FormikContainer = function (props) {
     var disableSubmitUntilValid = props.disableSubmitUntilValid, enableReinitialize = props.enableReinitialize, fields = props.fields, innerRef = props.innerRef, resetOnSubmit = props.resetOnSubmit, submit = props.submit, _a = props.validateOnBlur, validateOnBlur = _a === void 0 ? false : _a;
     var _b = React.useState(false), submitAttempt = _b[0], setSubmitAttempt = _b[1];
     var _c = React.useState(false), hasValues = _c[0], setHasValues = _c[1];
     var _d = React.useState({}), configurableInputFieldActiveIds = _d[0], setConfigurableInputFieldActiveIds = _d[1];
+    // Track if the form has been submitted. If it has, we're going to validate on change and blur
+    var _e = React.useState(false), hasSubmitted = _e[0], setHasSubmitted = _e[1];
     return (jsxRuntime.jsx(formik.Formik, _tslib.__assign({ enableReinitialize: enableReinitialize, initialValues: FormWrapper.formatInitialValues(fields), innerRef: innerRef, onSubmit: function (values, formikHelpers) {
             var resetForm = formikHelpers.resetForm;
             setSubmitAttempt(false);
@@ -1253,8 +1265,8 @@ var FormikContainer = function (props) {
                 resetForm({});
                 setHasValues(false);
             }
-        }, validateOnBlur: validateOnBlur, validateOnMount: disableSubmitUntilValid, validationSchema: FormWrapper.formatValidation(fields, configurableInputFieldActiveIds) }, { children: function (formikProps) {
-            return (jsxRuntime.jsx(Form, _tslib.__assign({}, props, { formikProps: formikProps, hasValues: hasValues, submitAttempt: submitAttempt, setHasValues: setHasValues, setSubmitAttempt: setSubmitAttempt, configurableInputFieldActiveIds: configurableInputFieldActiveIds, setConfigurableInputFieldActiveIds: setConfigurableInputFieldActiveIds }), void 0));
+        }, validateOnBlur: validateOnBlur || hasSubmitted, validateOnChange: validateOnBlur || hasSubmitted, validateOnMount: disableSubmitUntilValid, validationSchema: FormWrapper.formatValidation(fields, configurableInputFieldActiveIds) }, { children: function (formikProps) {
+            return (jsxRuntime.jsx(Form, _tslib.__assign({}, props, { formikProps: formikProps, hasValues: hasValues, submitAttempt: submitAttempt, setHasValues: setHasValues, setSubmitAttempt: setSubmitAttempt, configurableInputFieldActiveIds: configurableInputFieldActiveIds, setConfigurableInputFieldActiveIds: setConfigurableInputFieldActiveIds }, { children: jsxRuntime.jsx(FormSubmitWatcher, { setHasSubmitted: setHasSubmitted }, void 0) }), void 0));
         } }), void 0));
 };
 FormikContainer.defaultProps = {
@@ -1269,4 +1281,4 @@ FormikContainer.defaultProps = {
 };
 
 exports.FormikContainer = FormikContainer;
-//# sourceMappingURL=FormikContainer-d5d9c1d3.js.map
+//# sourceMappingURL=FormikContainer-5bbc7b9d.js.map

package/lib/{esm/FormikContainer-23e9e82c.js.map → cjs/FormikContainer-5bbc7b9d.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormikContainer-23e9e82c.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FormikContainer-5bbc7b9d.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/index.cjs

@@ -46,7 +46,7 @@ var helpers = require('./helpers-b07f14f3.js');
 var DrawerDivider = require('./DrawerDivider-8f1e423f.js');
 var EmailInput = require('./EmailInput-a17bf950.js');
 var Footer = require('./Footer.cjs');
-var FormikContainer = require('./FormikContainer-d5d9c1d3.js');
+var FormikContainer = require('./FormikContainer-5bbc7b9d.js');
 var FormFieldTypeEnum = require('./FormFieldTypeEnum.cjs');
 var FiltersBar = require('./FiltersBar-0c09771a.js');
 var HorizontalTabMenu = require('./HorizontalTabMenu-64d6e3a1.js');

package/lib/esm/Form.js

@@ -1,4 +1,4 @@
-export { F as Form } from './FormikContainer-23e9e82c.js';
+export { F as Form } from './FormikContainer-420de28e.js';
 export { F as FormWrapper } from './FormStyles-6cb7c6ff.js';
 export { FormFieldTypeEnum, RemovableFieldTypeEnum } from './FormFieldTypeEnum.js';
 import './_tslib-1a4c929e.js';

package/lib/esm/{FormikContainer-23e9e82c.js → FormikContainer-420de28e.js}

@@ -1,7 +1,7 @@
 import { _ as __assign, f as __spreadArray } from './_tslib-1a4c929e.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Fragment, useState, useEffect, useCallback } from 'react';
-import { Formik } from 'formik';
+import { Formik, useFormikContext } from 'formik';
 import { useTheme } from 'styled-components';
 import { A as AddButton } from './AddButton-59c22abc.js';
 import './Button.js';
@@ -1085,7 +1085,7 @@ var CANCEL_BUTTON_TEXT_DEFAULT$1 = "Cancel";
 var CLEAR_FORM_BUTTON_TEXT = "Clear Form";
 var SUBMIT_BUTTON_TEXT_DEFAULT$1 = "Submit";
 var Form = function (_a) {
-    var addButtons = _a.addButtons, addButtonWidth = _a.addButtonWidth, _b = _a.cancelButtonText, cancelButtonText = _b === void 0 ? CANCEL_BUTTON_TEXT_DEFAULT$1 : _b, cancelButtonFunction = _a.cancelButtonFunction, clearFormButton = _a.clearFormButton, clearOnBottom = _a.clearOnBottom, configurableInputFieldActiveIds = _a.configurableInputFieldActiveIds, disableSubmit = _a.disableSubmit, disableSubmitUntilValid = _a.disableSubmitUntilValid, fields = _a.fields, formikProps = _a.formikProps, hasValues = _a.hasValues, hideSubmitButton = _a.hideSubmitButton, leftLabels = _a.leftLabels, _c = _a.leftLabelsRightGutter, leftLabelsRightGutter = _c === void 0 ? 200 : _c, _d = _a.leftLabelWidth, leftLabelWidth = _d === void 0 ? 200 : _d, loading = _a.loading, loadingFieldsNumber = _a.loadingFieldsNumber, maximumHeight = _a.maximumHeight, nextButton = _a.nextButton, observeScrollRef = _a.observeScrollRef, rowGap = _a.rowGap, stickyFooter = _a.stickyFooter, submitAttempt = _a.submitAttempt, submitButtonLoading = _a.submitButtonLoading, setConfigurableInputFieldActiveIds = _a.setConfigurableInputFieldActiveIds, setHasValues = _a.setHasValues, setSubmitAttempt = _a.setSubmitAttempt, submitButtonAlign = _a.submitButtonAlign, _e = _a.submitButtonText, submitButtonText = _e === void 0 ? SUBMIT_BUTTON_TEXT_DEFAULT$1 : _e, submitOnBlur = _a.submitOnBlur, title = _a.title, themeOverride = _a.themeOverride, thinStickyPadding = _a.thinStickyPadding;
+    var addButtons = _a.addButtons, addButtonWidth = _a.addButtonWidth, _b = _a.cancelButtonText, cancelButtonText = _b === void 0 ? CANCEL_BUTTON_TEXT_DEFAULT$1 : _b, cancelButtonFunction = _a.cancelButtonFunction, children = _a.children, clearFormButton = _a.clearFormButton, clearOnBottom = _a.clearOnBottom, configurableInputFieldActiveIds = _a.configurableInputFieldActiveIds, disableSubmit = _a.disableSubmit, disableSubmitUntilValid = _a.disableSubmitUntilValid, fields = _a.fields, formikProps = _a.formikProps, hasValues = _a.hasValues, hideSubmitButton = _a.hideSubmitButton, leftLabels = _a.leftLabels, _c = _a.leftLabelsRightGutter, leftLabelsRightGutter = _c === void 0 ? 200 : _c, _d = _a.leftLabelWidth, leftLabelWidth = _d === void 0 ? 200 : _d, loading = _a.loading, loadingFieldsNumber = _a.loadingFieldsNumber, maximumHeight = _a.maximumHeight, nextButton = _a.nextButton, observeScrollRef = _a.observeScrollRef, rowGap = _a.rowGap, stickyFooter = _a.stickyFooter, submitAttempt = _a.submitAttempt, submitButtonLoading = _a.submitButtonLoading, setConfigurableInputFieldActiveIds = _a.setConfigurableInputFieldActiveIds, setHasValues = _a.setHasValues, setSubmitAttempt = _a.setSubmitAttempt, submitButtonAlign = _a.submitButtonAlign, _e = _a.submitButtonText, submitButtonText = _e === void 0 ? SUBMIT_BUTTON_TEXT_DEFAULT$1 : _e, submitOnBlur = _a.submitOnBlur, title = _a.title, themeOverride = _a.themeOverride, thinStickyPadding = _a.thinStickyPadding;
     var _f = useMeasure(), targetRef = _f[0], targetMeasure = _f[1];
     var theme = useTheme();
     var previousFields = usePrevious(fields);
@@ -1127,7 +1127,7 @@ var Form = function (_a) {
         resetForm();
         setHasValues(false);
     };
-    return loading ? (jsx(FormLoader, { leftLabels: Boolean(leftLabels), leftLabelsRightGutter: leftLabelsRightGutter, leftLabelWidth: leftLabelWidth, loadingFieldsNumber: loadingFieldsNumber !== null && loadingFieldsNumber !== void 0 ? loadingFieldsNumber : fields.length, rowGap: rowGap }, void 0)) : (jsxs(FormGroup, __assign({ ref: targetRef, "$maximumHeight": maximumHeight, "$stickyFooter": stickyFooter, "$themeOverride": themeOverride, "$thinStickyPadding": thinStickyPadding, as: ShortScroller }, { children: [jsxs(FormTitleGroup, { children: [jsx(Title, __assign({ "$themeOverride": themeOverride }, { children: title }), void 0), clearFormButton && !clearOnBottom && (jsx(ClearFormButtonWrap, __assign({ "$clickable": hasValues }, { children: jsx(TextLink, { clickable: hasValues, fontSize: 12, onClick: clearForm, text: CLEAR_FORM_BUTTON_TEXT, textColorOverride: clearButtonColorFamily.main, textColorHoverOverride: clearButtonColorFamily.hover, textStyle: TextStyleEnum.Emphasis }, void 0) }), void 0))] }, void 0), fields.map(function (field, index) {
+    return loading ? (jsx(FormLoader, { leftLabels: Boolean(leftLabels), leftLabelsRightGutter: leftLabelsRightGutter, leftLabelWidth: leftLabelWidth, loadingFieldsNumber: loadingFieldsNumber !== null && loadingFieldsNumber !== void 0 ? loadingFieldsNumber : fields.length, rowGap: rowGap }, void 0)) : (jsxs(FormGroup, __assign({ ref: targetRef, "$maximumHeight": maximumHeight, "$stickyFooter": stickyFooter, "$themeOverride": themeOverride, "$thinStickyPadding": thinStickyPadding, as: ShortScroller }, { children: [children, jsxs(FormTitleGroup, { children: [jsx(Title, __assign({ "$themeOverride": themeOverride }, { children: title }), void 0), clearFormButton && !clearOnBottom && (jsx(ClearFormButtonWrap, __assign({ "$clickable": hasValues }, { children: jsx(TextLink, { clickable: hasValues, fontSize: 12, onClick: clearForm, text: CLEAR_FORM_BUTTON_TEXT, textColorOverride: clearButtonColorFamily.main, textColorHoverOverride: clearButtonColorFamily.hover, textStyle: TextStyleEnum.Emphasis }, void 0) }), void 0))] }, void 0), fields.map(function (field, index) {
                 if (isSplitLine(field) && (!field.showIf || field.showIf({ values: values }))) {
                     var key = makeIdString({ array: field.inlineFields, key: "fieldLabel" });
                     return (jsx(SplitLineField, { fade: shouldFade({ isDeleting: isDeleting, index: index }), field: field, formikProps: formikProps, formWidth: targetMeasure === null || targetMeasure === void 0 ? void 0 : targetMeasure.width, observeScrollRef: observeScrollRef, rowGap: rowGap, setHasValues: setHasValues, setSubmitAttempt: setSubmitAttempt, submitAttempt: submitAttempt, submitOnBlur: submitOnBlur }, "".concat(key, "_").concat(index)));
@@ -1238,11 +1238,23 @@ Form.defaultProps = {
 
 var CANCEL_BUTTON_TEXT_DEFAULT = "Cancel";
 var SUBMIT_BUTTON_TEXT_DEFAULT = "Submit";
+var FormSubmitWatcher = function (_a) {
+    var setHasSubmitted = _a.setHasSubmitted;
+    var isValidating = useFormikContext().isValidating;
+    useEffect(function () {
+        if (isValidating) {
+            setHasSubmitted(true);
+        }
+    }, [isValidating]);
+    return null; // This component does not render anything
+};
 var FormikContainer = function (props) {
     var disableSubmitUntilValid = props.disableSubmitUntilValid, enableReinitialize = props.enableReinitialize, fields = props.fields, innerRef = props.innerRef, resetOnSubmit = props.resetOnSubmit, submit = props.submit, _a = props.validateOnBlur, validateOnBlur = _a === void 0 ? false : _a;
     var _b = useState(false), submitAttempt = _b[0], setSubmitAttempt = _b[1];
     var _c = useState(false), hasValues = _c[0], setHasValues = _c[1];
     var _d = useState({}), configurableInputFieldActiveIds = _d[0], setConfigurableInputFieldActiveIds = _d[1];
+    // Track if the form has been submitted. If it has, we're going to validate on change and blur
+    var _e = useState(false), hasSubmitted = _e[0], setHasSubmitted = _e[1];
     return (jsx(Formik, __assign({ enableReinitialize: enableReinitialize, initialValues: formatInitialValues(fields), innerRef: innerRef, onSubmit: function (values, formikHelpers) {
             var resetForm = formikHelpers.resetForm;
             setSubmitAttempt(false);
@@ -1251,8 +1263,8 @@ var FormikContainer = function (props) {
                 resetForm({});
                 setHasValues(false);
             }
-        }, validateOnBlur: validateOnBlur, validateOnMount: disableSubmitUntilValid, validationSchema: formatValidation(fields, configurableInputFieldActiveIds) }, { children: function (formikProps) {
-            return (jsx(Form, __assign({}, props, { formikProps: formikProps, hasValues: hasValues, submitAttempt: submitAttempt, setHasValues: setHasValues, setSubmitAttempt: setSubmitAttempt, configurableInputFieldActiveIds: configurableInputFieldActiveIds, setConfigurableInputFieldActiveIds: setConfigurableInputFieldActiveIds }), void 0));
+        }, validateOnBlur: validateOnBlur || hasSubmitted, validateOnChange: validateOnBlur || hasSubmitted, validateOnMount: disableSubmitUntilValid, validationSchema: formatValidation(fields, configurableInputFieldActiveIds) }, { children: function (formikProps) {
+            return (jsx(Form, __assign({}, props, { formikProps: formikProps, hasValues: hasValues, submitAttempt: submitAttempt, setHasValues: setHasValues, setSubmitAttempt: setSubmitAttempt, configurableInputFieldActiveIds: configurableInputFieldActiveIds, setConfigurableInputFieldActiveIds: setConfigurableInputFieldActiveIds }, { children: jsx(FormSubmitWatcher, { setHasSubmitted: setHasSubmitted }, void 0) }), void 0));
         } }), void 0));
 };
 FormikContainer.defaultProps = {
@@ -1267,4 +1279,4 @@ FormikContainer.defaultProps = {
 };
 
 export { FormikContainer as F };
-//# sourceMappingURL=FormikContainer-23e9e82c.js.map
+//# sourceMappingURL=FormikContainer-420de28e.js.map

package/lib/{cjs/FormikContainer-d5d9c1d3.js.map → esm/FormikContainer-420de28e.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormikContainer-d5d9c1d3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FormikContainer-420de28e.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/index.js

@@ -47,7 +47,7 @@ import { A as ASTERISK_OFFSET_SPACE } from './helpers-e2f33583.js';
 export { D as DrawerDivider } from './DrawerDivider-5b10a31b.js';
 export { E as EmailInput } from './EmailInput-949cc132.js';
 export { Footer } from './Footer.js';
-export { F as Form } from './FormikContainer-23e9e82c.js';
+export { F as Form } from './FormikContainer-420de28e.js';
 export { FormFieldTypeEnum, RemovableFieldTypeEnum } from './FormFieldTypeEnum.js';
 export { F as FiltersBar } from './FiltersBar-a6dbd832.js';
 export { H as HorizontalTabMenu } from './HorizontalTabMenu-417ead69.js';

package/lib/types/src/components/Form/Form.d.ts

@@ -1,7 +1,7 @@
 import { InternalFormType } from "./types";
 export declare const CLEAR_FORM_BUTTON_TEXT = "Clear Form";
 export declare const Form: {
-    <T extends Record<string, any>>({ addButtons, addButtonWidth, cancelButtonText, cancelButtonFunction, clearFormButton, clearOnBottom, configurableInputFieldActiveIds, disableSubmit, disableSubmitUntilValid, fields, formikProps, hasValues, hideSubmitButton, leftLabels, leftLabelsRightGutter, leftLabelWidth, loading, loadingFieldsNumber, maximumHeight, nextButton, observeScrollRef, rowGap, stickyFooter, submitAttempt, submitButtonLoading, setConfigurableInputFieldActiveIds, setHasValues, setSubmitAttempt, submitButtonAlign, submitButtonText, submitOnBlur, title, themeOverride, thinStickyPadding, }: InternalFormType<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends Record<string, any>>({ addButtons, addButtonWidth, cancelButtonText, cancelButtonFunction, children, clearFormButton, clearOnBottom, configurableInputFieldActiveIds, disableSubmit, disableSubmitUntilValid, fields, formikProps, hasValues, hideSubmitButton, leftLabels, leftLabelsRightGutter, leftLabelWidth, loading, loadingFieldsNumber, maximumHeight, nextButton, observeScrollRef, rowGap, stickyFooter, submitAttempt, submitButtonLoading, setConfigurableInputFieldActiveIds, setHasValues, setSubmitAttempt, submitButtonAlign, submitButtonText, submitOnBlur, title, themeOverride, thinStickyPadding, }: InternalFormType<T>): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
         cancelButtonText: string;
         nextButton: boolean;

package/lib/types/src/components/Form/types.d.ts

@@ -74,6 +74,7 @@ export interface FormType<FormData extends Record<string, any> = Record<string,
     validateOnBlur?: boolean;
 }
 export interface InternalFormType<T extends Record<string, any> = Record<string, any>> extends FormType<T> {
+    children?: ReactNode;
     disableSubmitUntilValid?: boolean;
     formikProps: any;
     hasValues: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "13.0.0",
+  "version": "13.0.1",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "lib/cjs/index.cjs",