@spscommerce/ds-react 5.12.3 → 5.13.1

package/lib/index.es.js

@@ -256,6 +256,7 @@ const SpsForm = React.forwardRef((props2, ref2) => {
     if (formMeta) {
       formMeta.markAsDirty();
       formMeta.markAsBlurred();
+      formMeta.markAsSubmitted();
     }
     onSubmit(event);
   }
@@ -637,6 +638,19 @@ var lodash_isplainobject = isPlainObject$1;
 const OnBlurErrorKeys = new Set();
 const AsTypingErrorKeys = new Set();
 const PreventativeErrorKeys = new Set();
+const OnSubmitErrorKeys = new Set();
+function addOnChangeErrorKey(errorKey) {
+  if (OnBlurErrorKeys.has(errorKey) || PreventativeErrorKeys.has(errorKey) || OnSubmitErrorKeys.has(errorKey)) {
+    return;
+  }
+  AsTypingErrorKeys.add(errorKey);
+}
+function addOnSubmitErrorKey(errorKey) {
+  if (OnBlurErrorKeys.has(errorKey) || PreventativeErrorKeys.has(errorKey) || AsTypingErrorKeys.has(errorKey)) {
+    return;
+  }
+  OnSubmitErrorKeys.add(errorKey);
+}
 const moment$5 = moment$6.default || moment$6;
 const FORMAT = "MM/DD/YYYY";
 const FORMAT_PATTERN = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
@@ -900,6 +914,7 @@ class SpsFormMetaBase {
     this.errors = null;
     this.revealAllErrors = false;
     this.preventativeErrors = [];
+    this.submitted = false;
   }
   setValidators(newValidators) {
     this.update(this.path, null, null, newValidators);
@@ -925,7 +940,7 @@ class SpsFormMetaBase {
     return !!this.errors;
   }
   isVisibilyInvalid() {
-    return this.errors && (this.revealAllErrors || !this.isPristine() && Object.keys(this.errors).some((key) => AsTypingErrorKeys.has(key)));
+    return this.errors && (this.revealAllErrors && !Object.keys(this.errors).some((key) => OnSubmitErrorKeys.has(key)) || this.revealAllErrors && Object.keys(this.errors).some((key) => OnSubmitErrorKeys.has(key)) && this.isSubmitted() || !this.isPristine() && Object.keys(this.errors).some((key) => AsTypingErrorKeys.has(key)));
   }
   hasError(errorKey) {
     return this.errors && Object.prototype.hasOwnProperty.call(this.errors, errorKey);
@@ -939,6 +954,9 @@ class SpsFormMetaBase {
   isRequired() {
     return this.validators && this.validators.indexOf(SpsValidators.required) > -1;
   }
+  isSubmitted() {
+    return this.submitted;
+  }
   onFocus() {
   }
   onBlur() {
@@ -999,6 +1017,11 @@ class SpsFormFieldMeta extends SpsFormMetaBase {
     this.preventativeErrors = [];
     return this;
   }
+  markAsSubmitted() {
+    this.submitted = true;
+    this.update(null);
+    return this;
+  }
 }
 class SpsFormSetMeta extends SpsFormFieldMeta {
   constructor(inferValOrPath, pathOrUpdate, updateWhenInferring) {
@@ -1051,6 +1074,13 @@ class SpsFormSetMeta extends SpsFormFieldMeta {
     }
     return this;
   }
+  markAsSubmitted() {
+    super.markAsSubmitted();
+    for (const key of Object.keys(this.fields)) {
+      this.fields[key].markAsSubmitted();
+    }
+    return this;
+  }
 }
 class SpsFormGroupMeta extends SpsFormSetMeta {
   inferMembers(inferFromValue) {
@@ -1241,6 +1271,11 @@ function useSpsForm(value, validatorMap) {
                 const childMeta = meta.fields[key];
                 if (!alreadyValidated.has(childMeta)) {
                   meta.fields[key].validate(newSubValue[key]);
+                  if (dType === DiffChange.ADDITION && childMeta.fields) {
+                    for (const [fieldKey, field] of Object.entries(childMeta.fields)) {
+                      field.validate(newSubValue[key][fieldKey]);
+                    }
+                  }
                 }
               }
             }
@@ -23787,6 +23822,22 @@ function useServerSideValidation(formControl2, initialState = null) {
   }, [status]);
   return [status, setStatus];
 }
+var ValidationMode;
+(function(ValidationMode2) {
+  ValidationMode2[ValidationMode2["ON_CHANGE"] = 0] = "ON_CHANGE";
+  ValidationMode2[ValidationMode2["ON_BLUR"] = 1] = "ON_BLUR";
+  ValidationMode2[ValidationMode2["ON_SUBMIT"] = 2] = "ON_SUBMIT";
+})(ValidationMode || (ValidationMode = {}));
+function useCustomValidator(validator, validatorConfig = {}, dependencies = []) {
+  for (const [key, validateOption] of Object.entries(validatorConfig)) {
+    if (validateOption === 0) {
+      addOnChangeErrorKey(key);
+    } else if (validateOption === 2) {
+      addOnSubmitErrorKey(key);
+    }
+  }
+  return React.useCallback(validator, dependencies);
+}
 const SpsFormExamples = {
   a_basic: {
     label: "Basic Usage",
@@ -24178,6 +24229,68 @@ const SpsFormExamples = {
       `
       }
     }
+  },
+  custom_errors: {
+    label: "Custom errors",
+    description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "When using custom validators you can specify when to show the errors - on Change, on Blur or on Submit.", /* @__PURE__ */ React.createElement("br", null), "On Blur is the the default behavior. If you want to change that behavior you can use ", /* @__PURE__ */ React.createElement("b", null, "useCustomValidator hook"), ". It takes validation function as first argument, validator configuration (object containing errorKey as key and ValidationMode as value) as second argument and dependencies as third argument. useCustomValidator returns a React callback of the validation function with the given dependencies."), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("b", null, "!Note:"), " useCustomValidator hook will make changes to the global scope and once you set a custom error key you can't change it.")),
+    examples: {
+      basic: {
+        react: code`
+          function DemoComponent() {
+
+            const customValidator = useCustomValidator(
+              (value) => value < 3 ? null : { customErrorKey: true },
+              { customErrorKey: ValidationMode.ON_CHANGE }
+              // or { customErrorKey: ValidationMode.ON_SUBMIT }
+            );         
+
+            const initValue = {
+                customErrorField: "",
+            };
+
+            const { formValue, formMeta, updateForm } = useSpsForm(initValue, {
+                "customErrorField": [customValidator],
+            });
+          
+            function handleSubmit() {
+                console.log("submit", formValue);
+            }
+
+            function reset() {
+                updateForm(initValue);
+                formMeta.markAsPristine();
+            }
+          
+            return <>
+                <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>                
+                    <div className="sfg-row">
+                        <div className="sfg-col-8">
+                            <SpsLabel
+                            for={formMeta.fields.customErrorField}
+                            errors={() => formMeta.fields.customErrorField.hasError("customErrorKey")
+                                && "Custom error description"}
+                            >
+                              Custom Error
+                            </SpsLabel>
+                            <SpsTextInput
+                                value={formValue.customErrorField}
+                                formMeta={formMeta.fields.customErrorField}
+                            />
+                        </div>
+                    </div>
+          
+                    <div className="sfg-row">
+                        <div className="sfg-col-12">
+                            <SpsButton className="mr-1" onClick={reset}>Reset</SpsButton>
+                            <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>
+                        </div>
+                    </div>
+                </SpsForm>
+            </>;
+          }
+      `
+      }
+    }
   }
 };
 const SpsAddRemoveFormRowExamples = {
@@ -38524,4 +38637,4 @@ Object.assign(SpsVr, {
   propTypes,
   displayName: "SpsDescriptionListTerm / SpsDt"
 });
-export { AsTypingErrorKeys, ContentOrderExample, DEFAULT_PRESETS, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, PortalContext, PreventativeErrorKeys, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, SpsAutocomplete, SpsAutocompleteExamples, SpsButton, SpsButtonExamples, SpsButtonGroup, SpsCard, SpsCardExamples, SpsCardTabbedPane, SpsCardV2, SpsCardV2Footer, SpsCardV2Header, SpsCardV2Title, SpsCheckbox, SpsCheckboxDropdown, SpsCheckboxExamples, SpsClickableTag, SpsClickableTagExamples, SpsColumnChooser, SpsColumnChooserColumn, SpsColumnChooserExamples, SpsConditionalField, SpsConditionalFieldExamples, SpsContentRow, SpsContentRowCol, SpsContentRowExamples, SpsContentRowExpansion, SpsCurrencyInput, SpsCurrencyInputExamples, SpsDateRangePicker, SpsDateRangePickerExamples, SpsDateRangePickerV2, SpsDateTime, SpsDatepicker, SpsDatepickerExamples, SpsDatepickerV2, SpsDatetimeExamples, SpsDd, SpsDescriptionList, SpsDescriptionListDefinition, SpsDescriptionListExamples, SpsDescriptionListTerm, SpsDl, SpsDropdown, SpsDropdownExamples, SpsDt, SpsFeedbackBlock, SpsFeedbackBlockExamples, SpsFieldset, SpsFieldsetExamples, SpsFilterPanel, SpsFilterPanelCap, SpsFilterPanelExamples, SpsFilterPanelFilterBox, SpsFilterPanelSection, SpsFilterTile, SpsFilterTileList, SpsFilterTileListExamples, SpsFocusedTask, SpsFocusedTaskActions, SpsFocusedTaskExamples, SpsForm, SpsFormArrayMeta, SpsFormComponentWrapper, SpsFormExamples, SpsFormFieldMeta, SpsFormGroupMeta, SpsFormMetaBase, SpsFormSetMeta, SpsGrowler, SpsGrowlerExamples, SpsI, SpsIconButtonPanel, SpsIncrementor, SpsIncrementorExamples, SpsInputGroup, SpsInsightTile, SpsInsights, SpsKeyValueList, SpsKeyValueListExamples, SpsKeyValueListItem, SpsKeyValueTag, SpsKeyValueTagExamples, SpsLabel, SpsLabelExamples, SpsListActionBar, SpsListActionBarExamples, SpsListToolbar, SpsListToolbarExamples, SpsListToolbarSearch, SpsListToolbarSearchInfo, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalAction, SpsModalBody, SpsModalExamples, SpsModalFooter, SpsModalHeader, SpsModalOverlay, SpsModalV2, SpsModalV2Footer, SpsMultiSelect, SpsMultiSelectExamples, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSearchResultsBarV2, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, SpsSortingHeader, SpsSortingHeaderCell, SpsSortingHeaderExamples, SpsSpinner, SpsSpinnerExamples, SpsSplitButton, SpsSplitButtonExamples, SpsSteppedProgressBar, SpsSteppedProgressBarExamples, SpsSummaryListColumn, SpsSummaryListExamples, SpsSummaryListExpansion, SpsSummaryListRow, SpsTab, SpsTabPanel, SpsTable, SpsTableBody, SpsTableCell, SpsTableExamples, SpsTableHead, SpsTableHeader, SpsTableRow, SpsTabsV2, SpsTag, SpsTagExamples, SpsTaskQueue, SpsTaskQueueExamples, SpsTbody, SpsTd, SpsTextInput, SpsTextInputExamples, SpsTextarea, SpsTextareaExamples, SpsTh, SpsThead, SpsTile, SpsTileList, SpsTileListExamples, SpsToggle, SpsToggleExamples, SpsTooltip, SpsTooltipExamples, SpsTooltipTitle, SpsTr, SpsValidators, SpsVerticalRule, SpsVr, SpsWf, SpsWfDoc, SpsWfDs, SpsWfStep, SpsWizardExamples, SpsWizardSidebar, SpsWizardSubstep, SpsWorkflow, SpsWorkflowDocument, SpsWorkflowDocumentStatus, SpsWorkflowExamples, SpsWorkflowStep, SpsZeroState, SpsZeroStateExamples, TooltipVisibility, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, validate, weekOfMonth };
+export { AsTypingErrorKeys, ContentOrderExample, DEFAULT_PRESETS, FauxChangeEvent, I18nContext, MANIFEST, OnBlurErrorKeys, OnSubmitErrorKeys, PortalContext, PreventativeErrorKeys, SimpleDateUtils, SpsAddRemoveFormRowExamples, SpsAdvancedSearch, SpsAdvancedSearchExamples, SpsAutocomplete, SpsAutocompleteExamples, SpsButton, SpsButtonExamples, SpsButtonGroup, SpsCard, SpsCardExamples, SpsCardTabbedPane, SpsCardV2, SpsCardV2Footer, SpsCardV2Header, SpsCardV2Title, SpsCheckbox, SpsCheckboxDropdown, SpsCheckboxExamples, SpsClickableTag, SpsClickableTagExamples, SpsColumnChooser, SpsColumnChooserColumn, SpsColumnChooserExamples, SpsConditionalField, SpsConditionalFieldExamples, SpsContentRow, SpsContentRowCol, SpsContentRowExamples, SpsContentRowExpansion, SpsCurrencyInput, SpsCurrencyInputExamples, SpsDateRangePicker, SpsDateRangePickerExamples, SpsDateRangePickerV2, SpsDateTime, SpsDatepicker, SpsDatepickerExamples, SpsDatepickerV2, SpsDatetimeExamples, SpsDd, SpsDescriptionList, SpsDescriptionListDefinition, SpsDescriptionListExamples, SpsDescriptionListTerm, SpsDl, SpsDropdown, SpsDropdownExamples, SpsDt, SpsFeedbackBlock, SpsFeedbackBlockExamples, SpsFieldset, SpsFieldsetExamples, SpsFilterPanel, SpsFilterPanelCap, SpsFilterPanelExamples, SpsFilterPanelFilterBox, SpsFilterPanelSection, SpsFilterTile, SpsFilterTileList, SpsFilterTileListExamples, SpsFocusedTask, SpsFocusedTaskActions, SpsFocusedTaskExamples, SpsForm, SpsFormArrayMeta, SpsFormComponentWrapper, SpsFormExamples, SpsFormFieldMeta, SpsFormGroupMeta, SpsFormMetaBase, SpsFormSetMeta, SpsGrowler, SpsGrowlerExamples, SpsI, SpsIconButtonPanel, SpsIncrementor, SpsIncrementorExamples, SpsInputGroup, SpsInsightTile, SpsInsights, SpsKeyValueList, SpsKeyValueListExamples, SpsKeyValueListItem, SpsKeyValueTag, SpsKeyValueTagExamples, SpsLabel, SpsLabelExamples, SpsListActionBar, SpsListActionBarExamples, SpsListToolbar, SpsListToolbarExamples, SpsListToolbarSearch, SpsListToolbarSearchInfo, SpsMicroBlock, SpsMicroBlockExamples, SpsMicroZeroState, SpsModal, SpsModalAction, SpsModalBody, SpsModalExamples, SpsModalFooter, SpsModalHeader, SpsModalOverlay, SpsModalV2, SpsModalV2Footer, SpsMultiSelect, SpsMultiSelectExamples, SpsPageSelector, SpsPageSubtitle, SpsPageTitle, SpsPageTitleExamples, SpsPagination, SpsPaginationExamples, SpsProductBar, SpsProductBarExamples, SpsProductBarTab, SpsProgressBar, SpsProgressBarExamples, SpsProgressRing, SpsRadioButton, SpsRadioButtonExamples, SpsScrollableContainer, SpsScrollableContainerExamples, SpsSearchResultsBar, SpsSearchResultsBarExamples, SpsSearchResultsBarV2, SpsSelect, SpsSelectExamples, SpsSideNav, SpsSideNavExamples, SpsSlackLink, SpsSlackLinkExamples, SpsSortingHeader, SpsSortingHeaderCell, SpsSortingHeaderExamples, SpsSpinner, SpsSpinnerExamples, SpsSplitButton, SpsSplitButtonExamples, SpsSteppedProgressBar, SpsSteppedProgressBarExamples, SpsSummaryListColumn, SpsSummaryListExamples, SpsSummaryListExpansion, SpsSummaryListRow, SpsTab, SpsTabPanel, SpsTable, SpsTableBody, SpsTableCell, SpsTableExamples, SpsTableHead, SpsTableHeader, SpsTableRow, SpsTabsV2, SpsTag, SpsTagExamples, SpsTaskQueue, SpsTaskQueueExamples, SpsTbody, SpsTd, SpsTextInput, SpsTextInputExamples, SpsTextarea, SpsTextareaExamples, SpsTh, SpsThead, SpsTile, SpsTileList, SpsTileListExamples, SpsToggle, SpsToggleExamples, SpsTooltip, SpsTooltipExamples, SpsTooltipTitle, SpsTr, SpsValidators, SpsVerticalRule, SpsVr, SpsWf, SpsWfDoc, SpsWfDs, SpsWfStep, SpsWizardExamples, SpsWizardSidebar, SpsWizardSubstep, SpsWorkflow, SpsWorkflowDocument, SpsWorkflowDocumentStatus, SpsWorkflowExamples, SpsWorkflowStep, SpsZeroState, SpsZeroStateExamples, TooltipVisibility, ValidationMode, addOnChangeErrorKey, addOnSubmitErrorKey, contentOf, date, dateConstraint, dateRange, findParentBranches, flipPosition, formArray, formControl, formGroup, getMember, getPosition, selectChildren, toggleTooltipState, useCheckDeprecatedProps, useCustomValidator, useDidUpdateEffect, useDocumentEventListener, useElementId, useForm, useGrowlers, useInputPopup, usePatchReducer, usePortal, useServerSideValidation, useSpsAction, useSpsForm, validate, weekOfMonth };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "5.12.3",
+  "version": "5.13.1",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react",
@@ -28,10 +28,10 @@
   },
   "peerDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.12.3",
-    "@spscommerce/ds-shared": "5.12.3",
-    "@spscommerce/positioning": "5.12.3",
-    "@spscommerce/utils": "5.12.3",
+    "@spscommerce/ds-colors": "5.13.1",
+    "@spscommerce/ds-shared": "5.13.1",
+    "@spscommerce/positioning": "5.13.1",
+    "@spscommerce/utils": "5.13.1",
     "moment": "^2.25.3",
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
@@ -39,10 +39,10 @@
   },
   "devDependencies": {
     "@react-stately/collections": "^3.3.3",
-    "@spscommerce/ds-colors": "5.12.3",
-    "@spscommerce/ds-shared": "5.12.3",
-    "@spscommerce/positioning": "5.12.3",
-    "@spscommerce/utils": "5.12.3",
+    "@spscommerce/ds-colors": "5.13.1",
+    "@spscommerce/ds-shared": "5.13.1",
+    "@spscommerce/positioning": "5.13.1",
+    "@spscommerce/utils": "5.13.1",
     "@testing-library/react": "^9.3.2",
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.9.0",