@spscommerce/ds-react 6.2.0 → 6.3.0

package/lib/index.es.js

@@ -1215,8 +1215,9 @@ function useSpsForm(value, validatorMap) {
     return controlSet;
   }, []);
   const scheduledDispatch = useRef();
-  let currentValidatorMap = validatorMap;
+  const validatorMapRef = useRef(validatorMap);
   const reducer2 = useCallback$1((currentState, action) => {
+    var _a, _b, _c;
     let newValue;
     scheduledDispatch.current = null;
     if (action) {
@@ -1228,12 +1229,12 @@ function useSpsForm(value, validatorMap) {
             control.revealAllErrors = true;
           }
         } else if (action.newValidators) {
-          if (currentValidatorMap) {
+          if (validatorMapRef.current) {
             const controlPath = action.path.join(".");
-            const newValidatorMap = __spreadValues({}, currentValidatorMap);
-            newValidatorMap[controlPath] = action.newValidators;
-            currentValidatorMap = newValidatorMap;
-            updateValidators(currentState.formValue, currentState.formMeta, currentValidatorMap, true);
+            validatorMapRef.current = __spreadProps(__spreadValues({}, validatorMapRef.current), {
+              [controlPath]: action.newValidators
+            });
+            updateValidators(currentState.formValue, currentState.formMeta, validatorMapRef.current, true);
           }
         } else {
           newValue = cloneFormValue(currentState.formValue, action.path);
@@ -1243,6 +1244,10 @@ function useSpsForm(value, validatorMap) {
         newValue = action.value;
       }
     }
+    if ((_a = action.updateFormOptions) == null ? void 0 : _a.validators) {
+      validatorMapRef.current = __spreadValues(__spreadValues({}, validatorMapRef.current), action.updateFormOptions.validators);
+      updateValidators(currentState.formValue, currentState.formMeta, validatorMapRef.current, (_c = (_b = action.updateFormOptions) == null ? void 0 : _b.runValidators) != null ? _c : true);
+    }
     if (newValue) {
       deepFreeze(newValue);
       const valueDiff = diff(currentState.formValue, newValue);
@@ -1279,8 +1284,8 @@ function useSpsForm(value, validatorMap) {
           }
         }
       }
-      if (currentValidatorMap) {
-        updateValidators(newValue, currentState.formMeta, currentValidatorMap);
+      if (validatorMapRef.current) {
+        updateValidators(newValue, currentState.formMeta, validatorMapRef.current);
         const alreadyValidated = new Set();
         validatorMapForEach(currentState.formMeta, validatorMap, (control, validators) => {
           if (typeof validators === "function") {
@@ -1340,12 +1345,12 @@ function useSpsForm(value, validatorMap) {
       updateForm();
     }
   }
-  function updateForm(newValue) {
-    if (newValue) {
+  function updateForm(newValue, options) {
+    if (newValue || options) {
       if (scheduledDispatch.current) {
         window.clearTimeout(scheduledDispatch.current);
       }
-      const sd = window.setTimeout(dispatch, 0, { value: newValue });
+      const sd = window.setTimeout(dispatch, 0, { value: newValue, updateFormOptions: options });
       scheduledDispatch.current = sd;
     } else if (!scheduledDispatch.current) {
       const sd = window.setTimeout(dispatch, 0, {});
@@ -16725,7 +16730,7 @@ const SpsDateRangePickerExamples = {
                             <div className="sfg-row">
                                 <div className="sfg-col-3">
                                     <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>
-                                    <SpsDateRangePickerV2
+                                    <SpsDateRangePicker
                                         value={formValue.dateRange}
                                         formMeta={formMeta.fields.dateRange}
                                     />
@@ -16757,7 +16762,7 @@ const SpsDateRangePickerExamples = {
                             <div className="sfg-row">
                                 <div className="sfg-col-3">
                                     <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>
-                                    <SpsDateRangePickerV2
+                                    <SpsDateRangePicker
                                         value={formValue.dateRange}
                                         formMeta={formMeta.fields.dateRange}
                                         {...constraints.current}
@@ -16789,7 +16794,7 @@ const SpsDateRangePickerExamples = {
                             <div className="sfg-row">
                                 <div className="sfg-col-3">
                                     <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>
-                                    <SpsDateRangePickerV2
+                                    <SpsDateRangePicker
                                         value={formValue.dateRange}
                                         formMeta={formMeta.fields.dateRange}
                                         disabled
@@ -16837,7 +16842,7 @@ const SpsDateRangePickerExamples = {
                           <div className="sfg-row">
                             <div className="sfg-col-3">
                               <SpsLabel for={formMeta.fields.dateRange}>Date</SpsLabel>
-                              <SpsDateRangePickerV2
+                              <SpsDateRangePicker
                                 presets={presets.current}
                                 value={formValue.dateRange}
                                 formMeta={formMeta.fields.dateRange}
@@ -23826,7 +23831,7 @@ 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 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.")),
+    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 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`
@@ -23885,6 +23890,77 @@ const SpsFormExamples = {
       `
       }
     }
+  },
+  updating_validators: {
+    label: "Updating validators",
+    description: () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "The updateForm function supports a seconds argument (options) that allows modifying multiple field validators at once.")),
+    examples: {
+      basic: {
+        react: code`
+          function DemoComponent() {
+            const initValue = {
+                fieldA: "",
+                fieldB: "",
+            };
+
+            const { formValue, formMeta, updateForm } = useSpsForm(initValue, {
+                "fieldA": [SpsValidators.required],
+            });
+          
+            function handleSubmit() {
+                console.log("submit", formValue);
+            }
+
+            function reset() {
+                updateForm(initValue, { validators: { fieldA: [SpsValidators.required], fieldB: [] }});
+                formMeta.markAsPristine();
+            }
+
+            // This will make field A non required and field B required in a single operation
+            function updateValidators() {
+              updateForm(undefined, { validators: { fieldA: [], fieldB: [SpsValidators.required] }});
+            }
+          
+            return <>
+                <SpsForm formMeta={formMeta} onSubmit={handleSubmit}>                
+                    <div className="sfg-row">
+                        <div className="sfg-col-8">
+                            <SpsLabel
+                              for={formMeta.fields.fieldA}
+                            >
+                              Field A
+                            </SpsLabel>
+                            <SpsTextInput
+                                value={formValue.fieldA}
+                                formMeta={formMeta.fields.fieldA}
+                            />
+                        </div>
+                        <div className="sfg-col-8">
+                          <SpsLabel
+                            for={formMeta.fields.fieldB}
+                          >
+                            Field B
+                          </SpsLabel>
+                          <SpsTextInput
+                              value={formValue.fieldB}
+                              formMeta={formMeta.fields.fieldB}
+                          />
+                        </div>
+                    </div>
+          
+                    <div className="sfg-row">
+                        <div className="sfg-col-12">
+                            <SpsButton className="mr-1" onClick={reset}>Reset</SpsButton>
+                            <SpsButton className="mr-1" onClick={updateValidators}>Update Validators</SpsButton>
+                            <SpsButton type={ButtonType.SUBMIT} kind={ButtonKind.CONFIRM}>Submit</SpsButton>
+                        </div>
+                    </div>
+                </SpsForm>
+            </>;
+          }
+      `
+      }
+    }
   }
 };
 const SpsAddRemoveFormRowExamples = {
@@ -25610,7 +25686,7 @@ function SpsListActionBar(props2) {
       clearSelected();
     }
   };
-  const classes = clsx(unsafelyReplaceClassName || "sps-list-action-bar-container", "z-stratum-bar", className);
+  const classes = clsx(unsafelyReplaceClassName || "sps-list-action-bar-container", "z-stratum-actionbar", className);
   return !!itemsSelected && /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
     className: classes
   }, rest), {

package/package.json

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