@wix/form-public 0.34.0 → 0.36.0

package/dist/index.js

@@ -20483,8 +20483,6 @@ var Breakpoint = /* @__PURE__ */ (function(Breakpoint2) {
   return Breakpoint2;
 })({});
 var DEFAULT_BREAKPOINT = Breakpoint.LARGE;
-var FieldValidationContext = /* @__PURE__ */ createContext(null);
-var useFieldValidation = () => useContext(FieldValidationContext) || {};
 var FORM_STATUS = {
   BUSY: "BUSY",
   READY: "READY"
@@ -24427,6 +24425,10 @@ function formFieldFocus(params) {
 function formErrorAppearedDissapeared(params) {
   return { evid: 1006, src: 156, endpoint: "forms-platform-uou", params };
 }
+var FieldValidationContext = /* @__PURE__ */ createContext(null);
+var useFieldValidation = () => useContext(FieldValidationContext) || {};
+
+// ../form-fields/dist/esm/ui/form/components/form/input-field.js
 var InputField = (_ref) => {
   let {
     field,
@@ -24748,17 +24750,25 @@ var createFormFields = (_ref) => {
     errors,
     values,
     onFieldChange,
-    FieldLayout
+    FieldLayout,
+    formSchema,
+    validateFields: validateFields2
   } = _ref;
   return form.fields.map((formField) => {
-    const component = /* @__PURE__ */ React32__default.createElement(FormField, {
+    const component = /* @__PURE__ */ React32__default.createElement(FormContext.Provider, {
+      value: formSchema
+    }, /* @__PURE__ */ React32__default.createElement(FieldValidationContext.Provider, {
+      value: {
+        validateFields: validateFields2
+      }
+    }, /* @__PURE__ */ React32__default.createElement(FormField, {
       key: formField.id,
       field: formField,
       values,
       errors,
       onFieldChange,
       FieldLayout
-    });
+    })));
     return {
       id: formField.id,
       fieldType: formField.fieldType,
@@ -24826,9 +24836,8 @@ var Grid = (_ref) => {
   return /* @__PURE__ */ React32__default.createElement("div", {
     className: grid_module_default.container,
     dir: isRTL ? "rtl" : ""
-  }, reactElementsByRow.map((elements, index) => {
-    var _elements$;
-    const fieldId = (_elements$ = elements[0]) == null || (_elements$ = _elements$.props) == null || (_elements$ = _elements$.field) == null ? void 0 : _elements$.id;
+  }, reactElementsByRow.map((rowData, index) => {
+    const fieldId = rowData.firstFieldId;
     const key = isMobile && fieldId || index;
     return /* @__PURE__ */ React32__default.createElement(Focusable, {
       key: fieldId,
@@ -24841,7 +24850,7 @@ var Grid = (_ref) => {
       className: (0, import_classnames4.default)(grid_module_default.grid, grid_module_default.column, {
         [grid_animations_module_default.animations]: enableAnimations
       })
-    }, elements));
+    }, rowData.elements));
   }));
 };
 function getReactElementsByRow(items) {
@@ -24851,9 +24860,12 @@ function getReactElementsByRow(items) {
       key: item.id
     });
     if (result2[row]) {
-      result2[row].push(element);
+      result2[row].elements.push(element);
     } else {
-      result2[row] = [element];
+      result2[row] = {
+        elements: [element],
+        firstFieldId: item.id
+      };
     }
     return result2;
   }, []);
@@ -24935,7 +24947,9 @@ var FormRoot = (_ref) => {
     form,
     values,
     onFieldChange,
-    errors
+    errors,
+    formSchema,
+    validateFields: validateFields2
   } = _ref;
   const {
     isRTL
@@ -24945,7 +24959,9 @@ var FormRoot = (_ref) => {
     values,
     onFieldChange,
     errors,
-    FieldLayout: DefaultFieldLayout
+    FieldLayout: DefaultFieldLayout,
+    formSchema,
+    validateFields: validateFields2
   });
   return /* @__PURE__ */ React32__default.createElement(Grid, {
     isRTL,
@@ -26113,6 +26129,8 @@ function resolveArrayComponent(arrayComponent) {
   switch (arrayComponent.componentType) {
     case ComponentType3.CHECKBOX_GROUP:
       return takeCheckboxGroupViewProperties(arrayComponent.checkboxGroupOptions);
+    case ComponentType3.TAGS:
+      return takeTagsViewProperties(arrayComponent.tagsOptions);
     default:
       throw new Error(`Unknown array component type: ${arrayComponent.componentType}`);
   }
@@ -26136,6 +26154,25 @@ function takeCheckboxGroupViewProperties(checkboxGroup) {
     }
   };
 }
+function takeTagsViewProperties(tags) {
+  return {
+    [HideLabelKey]: !tags.showLabel,
+    [AddOtherKey]: tags.customOption != null,
+    [OptionsKey]: tags.options.map((option) => makeOptionView(option)),
+    [NumberOfColumnsKey]: numericNumberOfColumns(tags.numberOfColumns ?? NumberOfColumns3.ONE),
+    [DefaultValueKey]: tags.options.filter((option) => option.default).map((option) => option.value),
+    ...tags.description && {
+      [DescriptionKey]: tags.description
+    },
+    ...tags.label && {
+      [LabelKey]: tags.label
+    },
+    ...tags.customOption && {
+      [AddOtherLabelKey]: tags.customOption.label,
+      [AddOtherPlaceholderKey]: tags.customOption.placeholder
+    }
+  };
+}
 function takeProductCheckboxGroupViewProperties(checkboxGroup) {
   return {
     [HideLabelKey]: !checkboxGroup.showLabel,
@@ -26386,6 +26423,10 @@ function resolvePaymentComponent(paymentComponent) {
       return takeProductCheckboxGroupViewProperties(paymentComponent.checkboxGroupOptions);
     case PaymentComponentType3.DONATION_INPUT:
       return takeDonationsInputViewProperties(paymentComponent.donationInputOptions);
+    case PaymentComponentType3.FIXED_PAYMENT:
+      return takeFixedPaymentViewProperties(paymentComponent.fixedPaymentOptions);
+    case PaymentComponentType3.PAYMENT_INPUT:
+      return takePaymentInputViewProperties(paymentComponent.paymentInputOptions);
     default:
       throw new Error(`Unknown payment component type: ${paymentComponent.componentType}`);
   }
@@ -26510,6 +26551,31 @@ function takeDonationsInputViewProperties(donationInput) {
     }
   };
 }
+function takeFixedPaymentViewProperties(fixedPayment) {
+  return {
+    [HideLabelKey]: !fixedPayment.showLabel,
+    ...fixedPayment.label && {
+      [LabelKey]: fixedPayment.label
+    },
+    ...fixedPayment.description && {
+      [DescriptionKey]: fixedPayment.description
+    }
+  };
+}
+function takePaymentInputViewProperties(paymentInput) {
+  return {
+    [HideLabelKey]: !paymentInput.showLabel,
+    ...paymentInput.label && {
+      [LabelKey]: paymentInput.label
+    },
+    ...paymentInput.description && {
+      [DescriptionKey]: paymentInput.description
+    },
+    ...paymentInput.placeholder && {
+      [PlaceholderKey]: paymentInput.placeholder
+    }
+  };
+}
 function makeOptionView(option) {
   return {
     [LabelKey]: option.label,
@@ -29522,23 +29588,17 @@ var FormRoot2 = ({
     return null;
   }
   return React32__default.createElement(
-    FieldValidationContext.Provider,
-    { value: {
-      validateFields: handleFieldValidation
-    } },
+    FieldActionsContext.Provider,
+    { value: fieldActions },
     React32__default.createElement(
-      FieldActionsContext.Provider,
-      { value: fieldActions },
+      FormStatusProvider,
+      { onStatusChange },
       React32__default.createElement(
-        FormStatusProvider,
-        { onStatusChange },
-        React32__default.createElement(
-          "div",
-          { "data-hook": DATA_HOOKS.FORM_ROOT },
-          React32__default.createElement(Form, { form: currentView, values: normalizedValues, onFieldChange, errors, dataHook: DATA_HOOKS.FORM_ROOT }),
-          React32__default.createElement(StepTitleA11y, { total: formWithOverrides.steps?.length, index: currentStep }),
-          React32__default.createElement(SubmitStatusMessage, null)
-        )
+        "div",
+        { "data-hook": DATA_HOOKS.FORM_ROOT },
+        React32__default.createElement(Form, { formSchema: formWithOverrides, form: currentView, values: normalizedValues, onFieldChange, errors, dataHook: DATA_HOOKS.FORM_ROOT, validateFields: handleFieldValidation }),
+        React32__default.createElement(StepTitleA11y, { total: formWithOverrides.steps?.length, index: currentStep }),
+        React32__default.createElement(SubmitStatusMessage, null)
       )
     )
   );