@orderingstack/front-components-product-configurator 1.0.2 → 1.0.4

package/dist/index.es.js

@@ -2651,7 +2651,7 @@ var I18n = function(_EventEmitter) {
         if (usedLng && usedLng.toLowerCase() === "cimode")
           return usedCallback();
         var toLoad = [];
-        var append = function append2(lng) {
+        var append2 = function append3(lng) {
           if (!lng)
             return;
           var lngs = _this3.services.languageUtils.toResolveHierarchy(lng);
@@ -2663,14 +2663,14 @@ var I18n = function(_EventEmitter) {
         if (!usedLng) {
           var fallbacks = this.services.languageUtils.getFallbackCodes(this.options.fallbackLng);
           fallbacks.forEach(function(l2) {
-            return append(l2);
+            return append2(l2);
           });
         } else {
-          append(usedLng);
+          append2(usedLng);
         }
         if (this.options.preload) {
           this.options.preload.forEach(function(l2) {
-            return append(l2);
+            return append2(l2);
           });
         }
         this.services.backendConnector.load(toLoad, this.options.ns, function(e2) {
@@ -3077,6 +3077,7 @@ var shouldRenderFormState = (formStateData, _proxyFormState, isRoot) => {
   return isEmptyObject(formState) || Object.keys(formState).length >= Object.keys(_proxyFormState).length || Object.keys(formState).find((key) => _proxyFormState[key] === (!isRoot || VALIDATION_MODE.all));
 };
 var convertToArrayPayload = (value) => Array.isArray(value) ? value : [value];
+var shouldSubscribeByName = (name, signalName, exact) => exact && signalName ? name === signalName : !name || !signalName || name === signalName || convertToArrayPayload(name).some((currentName) => currentName && (currentName.startsWith(signalName) || signalName.startsWith(currentName)));
 function useSubscribe(props) {
   const _props = React.useRef(props);
   _props.current = props;
@@ -3089,6 +3090,45 @@ function useSubscribe(props) {
     };
   }, [props.disabled]);
 }
+function useFormState(props) {
+  const methods = useFormContext();
+  const { control = methods.control, disabled, name, exact } = props || {};
+  const [formState, updateFormState] = React.useState(control._formState);
+  const _mounted = React.useRef(true);
+  const _localProxyFormState = React.useRef({
+    isDirty: false,
+    isLoading: false,
+    dirtyFields: false,
+    touchedFields: false,
+    isValidating: false,
+    isValid: false,
+    errors: false
+  });
+  const _name = React.useRef(name);
+  _name.current = name;
+  useSubscribe({
+    disabled,
+    next: (value) => _mounted.current && shouldSubscribeByName(_name.current, value.name, exact) && shouldRenderFormState(value, _localProxyFormState.current) && updateFormState({
+      ...control._formState,
+      ...value
+    }),
+    subject: control._subjects.state
+  });
+  React.useEffect(() => {
+    _mounted.current = true;
+    const isDirty = control._proxyFormState.isDirty && control._getDirty();
+    if (isDirty !== control._formState.isDirty) {
+      control._subjects.state.next({
+        isDirty
+      });
+    }
+    control._updateValid();
+    return () => {
+      _mounted.current = false;
+    };
+  }, [control]);
+  return getProxyFormState(formState, control, _localProxyFormState.current, false);
+}
 var isString = (value) => typeof value === "string";
 var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
   if (isString(names)) {
@@ -3127,6 +3167,107 @@ function cloneObject(data) {
   }
   return copy2;
 }
+function useWatch(props) {
+  const methods = useFormContext();
+  const { control = methods.control, name, defaultValue, disabled, exact } = props || {};
+  const _name = React.useRef(name);
+  _name.current = name;
+  useSubscribe({
+    disabled,
+    subject: control._subjects.watch,
+    next: (formState) => {
+      if (shouldSubscribeByName(_name.current, formState.name, exact)) {
+        updateValue(cloneObject(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, defaultValue)));
+      }
+    }
+  });
+  const [value, updateValue] = React.useState(control._getWatch(name, defaultValue));
+  React.useEffect(() => control._removeUnmounted());
+  return value;
+}
+function useController(props) {
+  const methods = useFormContext();
+  const { name, control = methods.control, shouldUnregister } = props;
+  const isArrayField = isNameInFieldArray(control._names.array, name);
+  const value = useWatch({
+    control,
+    name,
+    defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
+    exact: true
+  });
+  const formState = useFormState({
+    control,
+    name
+  });
+  const _registerProps = React.useRef(control.register(name, {
+    ...props.rules,
+    value
+  }));
+  React.useEffect(() => {
+    const updateMounted = (name2, value2) => {
+      const field = get(control._fields, name2);
+      if (field) {
+        field._f.mount = value2;
+      }
+    };
+    updateMounted(name, true);
+    return () => {
+      const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
+      (isArrayField ? _shouldUnregisterField && !control._stateFlags.action : _shouldUnregisterField) ? control.unregister(name) : updateMounted(name, false);
+    };
+  }, [name, control, isArrayField, shouldUnregister]);
+  return {
+    field: {
+      name,
+      value,
+      onChange: React.useCallback((event) => _registerProps.current.onChange({
+        target: {
+          value: getEventValue(event),
+          name
+        },
+        type: EVENTS.CHANGE
+      }), [name]),
+      onBlur: React.useCallback(() => _registerProps.current.onBlur({
+        target: {
+          value: get(control._formValues, name),
+          name
+        },
+        type: EVENTS.BLUR
+      }), [name, control]),
+      ref: (elm) => {
+        const field = get(control._fields, name);
+        if (field && elm) {
+          field._f.ref = {
+            focus: () => elm.focus(),
+            select: () => elm.select(),
+            setCustomValidity: (message) => elm.setCustomValidity(message),
+            reportValidity: () => elm.reportValidity()
+          };
+        }
+      }
+    },
+    formState,
+    fieldState: Object.defineProperties({}, {
+      invalid: {
+        enumerable: true,
+        get: () => !!get(formState.errors, name)
+      },
+      isDirty: {
+        enumerable: true,
+        get: () => !!get(formState.dirtyFields, name)
+      },
+      isTouched: {
+        enumerable: true,
+        get: () => !!get(formState.touchedFields, name)
+      },
+      error: {
+        enumerable: true,
+        get: () => get(formState.errors, name)
+      }
+    })
+  };
+}
+const Controller = (props) => props.render(useController(props));
 var appendErrors = (name, validateAllFieldCriteria, errors, type, message) => validateAllFieldCriteria ? {
   ...errors[name],
   types: {
@@ -3172,6 +3313,14 @@ const focusFieldBy = (fields, callback, fieldsNames) => {
     }
   }
 };
+var generateId = () => {
+  const d2 = typeof performance === "undefined" ? Date.now() : performance.now() * 1e3;
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r2 = (Math.random() * 16 + d2) % 16 | 0;
+    return (c == "x" ? r2 : r2 & 3 | 8).toString(16);
+  });
+};
+var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || isUndefined$2(options.shouldFocus) ? options.focusName || `${name}.${isUndefined$2(options.focusIndex) ? index : options.focusIndex}.` : "";
 var getValidationModes = (mode) => ({
   isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
   isOnBlur: mode === VALIDATION_MODE.onBlur,
@@ -3384,6 +3533,43 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
   setCustomValidity(true);
   return error2;
 };
+function append(data, value) {
+  return [...data, ...convertToArrayPayload(value)];
+}
+var fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => void 0) : void 0;
+function insert(data, index, value) {
+  return [
+    ...data.slice(0, index),
+    ...convertToArrayPayload(value),
+    ...data.slice(index)
+  ];
+}
+var moveArrayAt = (data, from, to) => {
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  if (isUndefined$2(data[to])) {
+    data[to] = void 0;
+  }
+  data.splice(to, 0, data.splice(from, 1)[0]);
+  return data;
+};
+function prepend(data, value) {
+  return [...convertToArrayPayload(value), ...convertToArrayPayload(data)];
+}
+function removeAtIndexes(data, indexes) {
+  let i2 = 0;
+  const temp = [...data];
+  for (const index of indexes) {
+    temp.splice(index - i2, 1);
+    i2++;
+  }
+  return compact(temp).length ? temp : [];
+}
+var removeArrayAt = (data, index) => isUndefined$2(index) ? [] : removeAtIndexes(data, convertToArrayPayload(index).sort((a2, b) => a2 - b));
+var swapArrayAt = (data, indexA, indexB) => {
+  data[indexA] = [data[indexB], data[indexB] = data[indexA]][0];
+};
 function baseGet(object, updatePath) {
   const length = updatePath.slice(0, -1).length;
   let index = 0;
@@ -3427,6 +3613,174 @@ function unset(object, path2) {
   }
   return object;
 }
+var updateAt = (fieldValues, index, value) => {
+  fieldValues[index] = value;
+  return fieldValues;
+};
+function useFieldArray(props) {
+  const methods = useFormContext();
+  const { control = methods.control, name, keyName = "id", shouldUnregister } = props;
+  const [fields, setFields] = React.useState(control._getFieldArray(name));
+  const ids = React.useRef(control._getFieldArray(name).map(generateId));
+  const _fieldIds = React.useRef(fields);
+  const _name = React.useRef(name);
+  const _actioned = React.useRef(false);
+  _name.current = name;
+  _fieldIds.current = fields;
+  control._names.array.add(name);
+  props.rules && control.register(name, props.rules);
+  useSubscribe({
+    next: ({ values, name: fieldArrayName }) => {
+      if (fieldArrayName === _name.current || !fieldArrayName) {
+        const fieldValues = get(values, _name.current);
+        if (Array.isArray(fieldValues)) {
+          setFields(fieldValues);
+          ids.current = fieldValues.map(generateId);
+        }
+      }
+    },
+    subject: control._subjects.array
+  });
+  const updateValues = React.useCallback((updatedFieldArrayValues) => {
+    _actioned.current = true;
+    control._updateFieldArray(name, updatedFieldArrayValues);
+  }, [control, name]);
+  const append$1 = (value, options) => {
+    const appendValue = convertToArrayPayload(cloneObject(value));
+    const updatedFieldArrayValues = append(control._getFieldArray(name), appendValue);
+    control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
+    ids.current = append(ids.current, appendValue.map(generateId));
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._updateFieldArray(name, updatedFieldArrayValues, append, {
+      argA: fillEmptyArray(value)
+    });
+  };
+  const prepend$1 = (value, options) => {
+    const prependValue = convertToArrayPayload(cloneObject(value));
+    const updatedFieldArrayValues = prepend(control._getFieldArray(name), prependValue);
+    control._names.focus = getFocusFieldName(name, 0, options);
+    ids.current = prepend(ids.current, prependValue.map(generateId));
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._updateFieldArray(name, updatedFieldArrayValues, prepend, {
+      argA: fillEmptyArray(value)
+    });
+  };
+  const remove2 = (index) => {
+    const updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
+    ids.current = removeArrayAt(ids.current, index);
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._updateFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
+      argA: index
+    });
+  };
+  const insert$1 = (index, value, options) => {
+    const insertValue = convertToArrayPayload(cloneObject(value));
+    const updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
+    control._names.focus = getFocusFieldName(name, index, options);
+    ids.current = insert(ids.current, index, insertValue.map(generateId));
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._updateFieldArray(name, updatedFieldArrayValues, insert, {
+      argA: index,
+      argB: fillEmptyArray(value)
+    });
+  };
+  const swap = (indexA, indexB) => {
+    const updatedFieldArrayValues = control._getFieldArray(name);
+    swapArrayAt(updatedFieldArrayValues, indexA, indexB);
+    swapArrayAt(ids.current, indexA, indexB);
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._updateFieldArray(name, updatedFieldArrayValues, swapArrayAt, {
+      argA: indexA,
+      argB: indexB
+    }, false);
+  };
+  const move = (from, to) => {
+    const updatedFieldArrayValues = control._getFieldArray(name);
+    moveArrayAt(updatedFieldArrayValues, from, to);
+    moveArrayAt(ids.current, from, to);
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._updateFieldArray(name, updatedFieldArrayValues, moveArrayAt, {
+      argA: from,
+      argB: to
+    }, false);
+  };
+  const update = (index, value) => {
+    const updateValue = cloneObject(value);
+    const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, updateValue);
+    ids.current = [...updatedFieldArrayValues].map((item, i2) => !item || i2 === index ? generateId() : ids.current[i2]);
+    updateValues(updatedFieldArrayValues);
+    setFields([...updatedFieldArrayValues]);
+    control._updateFieldArray(name, updatedFieldArrayValues, updateAt, {
+      argA: index,
+      argB: updateValue
+    }, true, false);
+  };
+  const replace = (value) => {
+    const updatedFieldArrayValues = convertToArrayPayload(cloneObject(value));
+    ids.current = updatedFieldArrayValues.map(generateId);
+    updateValues([...updatedFieldArrayValues]);
+    setFields([...updatedFieldArrayValues]);
+    control._updateFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
+  };
+  React.useEffect(() => {
+    control._stateFlags.action = false;
+    isWatched(name, control._names) && control._subjects.state.next({});
+    if (_actioned.current && (!getValidationModes(control._options.mode).isOnSubmit || control._formState.isSubmitted)) {
+      if (control._options.resolver) {
+        control._executeSchema([name]).then((result) => {
+          const error2 = get(result.errors, name);
+          const existingError = get(control._formState.errors, name);
+          if (existingError ? !error2 && existingError.type : error2 && error2.type) {
+            error2 ? set(control._formState.errors, name, error2) : unset(control._formState.errors, name);
+            control._subjects.state.next({
+              errors: control._formState.errors
+            });
+          }
+        });
+      } else {
+        const field = get(control._fields, name);
+        if (field && field._f) {
+          validateField(field, get(control._formValues, name), control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error2) => !isEmptyObject(error2) && control._subjects.state.next({
+            errors: updateFieldArrayRootError(control._formState.errors, error2, name)
+          }));
+        }
+      }
+    }
+    control._subjects.watch.next({
+      name,
+      values: control._formValues
+    });
+    control._names.focus && focusFieldBy(control._fields, (key) => !!key && key.startsWith(control._names.focus || ""));
+    control._names.focus = "";
+    control._proxyFormState.isValid && control._updateValid();
+  }, [fields, name, control]);
+  React.useEffect(() => {
+    !get(control._formValues, name) && control._updateFieldArray(name);
+    return () => {
+      (control._options.shouldUnregister || shouldUnregister) && control.unregister(name);
+    };
+  }, [name, control, keyName, shouldUnregister]);
+  return {
+    swap: React.useCallback(swap, [updateValues, name, control]),
+    move: React.useCallback(move, [updateValues, name, control]),
+    prepend: React.useCallback(prepend$1, [updateValues, name, control]),
+    append: React.useCallback(append$1, [updateValues, name, control]),
+    remove: React.useCallback(remove2, [updateValues, name, control]),
+    insert: React.useCallback(insert$1, [updateValues, name, control]),
+    update: React.useCallback(update, [updateValues, name, control]),
+    replace: React.useCallback(replace, [updateValues, name, control]),
+    fields: React.useMemo(() => fields.map((field, index) => ({
+      ...field,
+      [keyName]: ids.current[index] || generateId()
+    })), [fields, keyName])
+  };
+}
 function createSubject() {
   let _observers = [];
   const next = (value) => {
@@ -4355,6 +4709,20 @@ function useForm(props = {}) {
   _formControl.current.formState = getProxyFormState(formState, control);
   return _formControl.current;
 }
+var index_esm = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Controller,
+  FormProvider,
+  appendErrors,
+  get,
+  set,
+  useController,
+  useFieldArray,
+  useForm,
+  useFormContext,
+  useFormState,
+  useWatch
+}, Symbol.toStringTag, { value: "Module" }));
 var MainView = /* @__PURE__ */ ((MainView2) => {
   MainView2["FULL_PAGE"] = "FULL_PAGE";
   MainView2["MODAL"] = "MODAL";
@@ -7958,7 +8326,7 @@ function useMenuProduct(product, parentAttrs) {
   const isRadio = parentSelMin === "1" && parentSelMax === "1";
   const isCheckbox = !isRadio;
   const isCounter = isApiBooleanTrue(parentAllowMultiple);
-  const isDecrementEnabled = valueNumber > 1;
+  const isDecrementEnabled = valueNumber > (isRadio ? 1 : 0);
   const isIncrementEnabled = isInputCounterIncrementEnabled2(product, selected) && (isInputEnabled2(product) || valueNumber);
   const isChecked = Number(((_a = selected == null ? void 0 : selected[selCtx]) == null ? void 0 : _a[id]) || 0) > 0;
   const isCheckboxEnabled = isInputEnabled2(product) || valueNumber;
@@ -7974,6 +8342,9 @@ function useMenuProduct(product, parentAttrs) {
   const handleCounterDecrementQty = () => {
     const decrementedValue = valueNumber - 1;
     setValue(`selected.${selCtx}.${id}`, `${decrementedValue}`);
+    if (isCheckbox && decrementedValue === 0) {
+      setValue(`selected.${selCtx}.${id}`, false);
+    }
   };
   const handleOnInputChange = (e2) => {
     const {
@@ -9330,7 +9701,7 @@ let Pe = "div", ie = S$1.RenderStrategy, oe = C$1(function(e$12, s2) {
   let n2 = useContext(A) !== null, m2 = s$3() !== null;
   return React.createElement(React.Fragment, null, !n2 && m2 ? React.createElement(J, { ref: s2, ...e2 }) : React.createElement(oe, { ref: s2, ...e2 }));
 }), Je = Object.assign(J, { Child: ye, Root: J });
-function ModalView(props) {
+function Modal(props) {
   const {
     children,
     isOpen,
@@ -9348,7 +9719,7 @@ function ModalView(props) {
       as: Fragment$1,
       children: /* @__PURE__ */ jsx(mt, {
         as: "div",
-        className: "overflow-y-auto fixed inset-0 z-10",
+        className: "fixed inset-0 z-10 overflow-y-auto",
         style: {
           backgroundColor: "rgba(0,0,0,.75)"
         },
@@ -9382,7 +9753,7 @@ function ModalView(props) {
               id: "modal-content",
               className: `inline-block overflow-hidden sm:rounded-2xl align-middle transition-all bg-white sm:shadow-xl h-[100vh] sm:h-auto sm:max-h-[90vh]  w-full sm:w-[640px]`,
               children: [/* @__PURE__ */ jsx("div", {
-                className: "flex sticky top-0 z-10 items-center px-3 w-full h-14 text-lg font-medium leading-6 text-gray-900 bg-white modal-header",
+                className: "sticky top-0 z-10 flex items-center w-full px-3 text-lg font-medium leading-6 text-gray-900 bg-white h-14 modal-header",
                 children: /* @__PURE__ */ jsx("div", {
                   className: "",
                   children: /* @__PURE__ */ jsxs("svg", {
@@ -9431,7 +9802,7 @@ function ModalView(props) {
     })
   });
 }
-function MenuProductRootDefaultShitUI(props) {
+function MenuProductRootDefaultUI(props) {
   var _a, _b, _c, _d;
   const {
     product,
@@ -9537,7 +9908,7 @@ function MenuProductRootDefaultShitUI(props) {
   const style2 = {
     "--mobile-submit-row-top": `${windowHeight - 64 - 80}px`
   };
-  return /* @__PURE__ */ jsx(ModalView, {
+  return /* @__PURE__ */ jsx(Modal, {
     isOpen: Boolean(isOpen),
     handleClose: handleGoBack,
     children: /* @__PURE__ */ jsxs("div", {
@@ -9588,7 +9959,7 @@ const MenuProductRoot = (props) => {
       children: MenuItemsDispatcherWrapper
     });
   }
-  return /* @__PURE__ */ jsx(MenuProductRootDefaultShitUI, {
+  return /* @__PURE__ */ jsx(MenuProductRootDefaultUI, {
     ...props,
     children: MenuItemsDispatcherWrapper
   });
@@ -9671,7 +10042,6 @@ function ProductConfigurator(props) {
       children: /* @__PURE__ */ jsx(FormProvider, {
         ...methods,
         children: /* @__PURE__ */ jsxs("form", {
-          onSubmit: handleSubmit(onSubmit),
           children: [showDebugState && /* @__PURE__ */ jsx("div", {
             className: "hidden",
             children: /* @__PURE__ */ jsx(DisplayState, {})
@@ -9694,5 +10064,5 @@ function ProductConfigurator(props) {
     })
   });
 }
-export { ContextType, MainView, ProductConfigurator, ProductKinds, ProductTypes, SelMinSelMaxStatus };
+export { ContextType, MainView, ProductConfigurator, ProductKinds, ProductTypes, SelMinSelMaxStatus, index_esm as hookForm };
 //# sourceMappingURL=index.es.js.map