@wix/form-public 0.134.0 → 0.136.0

package/dist/index.js

@@ -33406,7 +33406,8 @@ var CheckboxContainer = (_ref2) => {
     disabled,
     required,
     onBlur,
-    onFocus
+    onFocus,
+    hasError
   } = useFieldPropsV2();
   const {
     inputId,
@@ -33430,6 +33431,7 @@ var CheckboxContainer = (_ref2) => {
     onChange: handleChange,
     isDisabled: disabled,
     isRequired: required,
+    isInvalid: hasError,
     onBlur,
     onFocus,
     className
@@ -34023,7 +34025,8 @@ var Month = (_ref2) => {
   }, /* @__PURE__ */ React45__default.createElement(Button, {
     ref: buttonRef,
     id: inputId,
-    "data-hook": SupportedDateParts.MONTH
+    "data-hook": SupportedDateParts.MONTH,
+    "data-invalid": partError
   }, /* @__PURE__ */ React45__default.createElement(SelectValue, null)), optionsElement));
 };
 var MonthLabel = (_ref3) => {
@@ -34994,7 +34997,9 @@ var DatePicker = (_ref) => {
     required,
     onBlur,
     onFocus,
-    FieldLayout
+    FieldLayout,
+    hasError,
+    readOnly
   } = useFieldPropsV2();
   const handleChange = useCallback((dateValue2) => {
     const stringValue = dateValueToString(dateValue2);
@@ -35013,6 +35018,8 @@ var DatePicker = (_ref) => {
       value: dateValue,
       onChange: handleChange,
       isDisabled: disabled,
+      isInvalid: hasError,
+      isReadOnly: readOnly,
       isRequired: required,
       onBlur,
       onFocus
@@ -35029,10 +35036,14 @@ var Control = (_ref2) => {
     inputId,
     ariaDescribedBy
   } = useFieldAttributes2();
+  const {
+    hasError
+  } = useFieldPropsV2();
   return /* @__PURE__ */ React45__default.createElement(Group, {
     id: inputId,
     "aria-describedby": ariaDescribedBy,
-    className
+    className,
+    "data-invalid": hasError
   }, children);
 };
 var Input2 = (_ref3) => {
@@ -35231,7 +35242,8 @@ var Month2 = (_ref2) => {
   }, /* @__PURE__ */ React45__default.createElement(Button, {
     ref: buttonRef,
     id: inputId,
-    "data-hook": SupportedDateParts.MONTH
+    "data-hook": SupportedDateParts.MONTH,
+    "data-invalid": partError
   }, /* @__PURE__ */ React45__default.createElement(SelectValue, null)), optionsElement));
 };
 var MonthLabel2 = (_ref3) => {
@@ -35692,7 +35704,8 @@ var Dropdown = (_ref) => {
     required,
     onBlur,
     onFocus,
-    FieldLayout
+    FieldLayout,
+    hasError
   } = useFieldPropsV2();
   const handleChange = useCallback((selectedValue) => {
     onChange(typeof selectedValue === "string" ? selectedValue : null);
@@ -35709,6 +35722,7 @@ var Dropdown = (_ref) => {
       value: value ?? null,
       onChange: handleChange,
       isDisabled: disabled,
+      isInvalid: hasError,
       isRequired: required,
       placeholder,
       onBlur,
@@ -35726,7 +35740,8 @@ var Trigger2 = (_ref2) => {
     ariaDescribedBy
   } = useFieldAttributes2();
   const {
-    id
+    id,
+    hasError
   } = useFieldPropsV2();
   const ref = useRef(null);
   useFocusFieldEvent(() => {
@@ -35737,7 +35752,8 @@ var Trigger2 = (_ref2) => {
     ref,
     id: inputId,
     "aria-describedby": ariaDescribedBy,
-    className
+    className,
+    "data-invalid": hasError
   }, /* @__PURE__ */ React45__default.createElement(SelectValue, null));
 };
 var Options2 = (_ref3) => {
@@ -35798,7 +35814,8 @@ var DropZone = (_ref) => {
     ariaDescribedBy
   } = useFieldAttributes2();
   const {
-    disabled
+    disabled,
+    hasError
   } = useFieldPropsV2();
   const {
     handleFileChange,
@@ -35810,6 +35827,7 @@ var DropZone = (_ref) => {
   return /* @__PURE__ */ React45__default.createElement(DropZone$1, {
     "aria-describedby": ariaDescribedBy,
     className,
+    "data-invalid": hasError,
     isDisabled: disabled,
     onDrop: async (e2) => {
       const droppedFiles = [];
@@ -39433,7 +39451,8 @@ var CountryButton = (_ref3) => {
     labelId
   } = useFieldAttributes2();
   const {
-    id
+    id,
+    hasError
   } = useFieldPropsV2();
   const {
     t
@@ -39457,7 +39476,8 @@ var CountryButton = (_ref3) => {
     id: buttonId,
     "aria-label": ariaLabel,
     "aria-labelledby": labelId ? `${labelId} ${buttonId}` : void 0,
-    className
+    className,
+    "data-invalid": hasError
   }, children);
 };
 var CountryButtonFlag = (_ref4) => {
@@ -39636,7 +39656,8 @@ var Control3 = (_ref10) => {
   } = _ref10;
   const {
     disabled,
-    required
+    required,
+    hasError
   } = useFieldPropsV2();
   const {
     selectedCountryCode,
@@ -39651,6 +39672,7 @@ var Control3 = (_ref10) => {
     value: selectedCountryCode ?? null,
     onChange: (key) => handleCountryCodeChange(key),
     isDisabled: disabled,
+    isInvalid: hasError,
     isRequired: required,
     placeholder: ""
   }, countryButtonElement, countryOptionsElement), phoneNumberElement);
@@ -39686,6 +39708,7 @@ var RadioGroup = (_ref) => {
     required,
     onBlur,
     onFocus,
+    hasError,
     FieldLayout
   } = useFieldPropsV2();
   const {
@@ -39710,6 +39733,7 @@ var RadioGroup = (_ref) => {
       onChange,
       isDisabled: disabled,
       isRequired: required,
+      isInvalid: hasError,
       onBlur,
       onFocus
     }, optionsElement),
@@ -39726,7 +39750,8 @@ var Options8 = (_ref2) => {
     addOther,
     addOtherLabel,
     id,
-    numberOfColumns
+    numberOfColumns,
+    hasError
   } = useFieldPropsV2();
   const {
     t
@@ -39740,7 +39765,8 @@ var Options8 = (_ref2) => {
   }, id);
   return /* @__PURE__ */ React45__default.createElement("div", {
     className,
-    "data-columns": numberOfColumns
+    "data-columns": numberOfColumns,
+    "data-invalid": hasError
   }, options.map((option, index) => applyInternalProps(optionElement, {
     key: option.value ?? option.label,
     value: option.value ?? option.label,
@@ -39898,7 +39924,8 @@ var Stars = (_ref2) => {
     className
   } = _ref2;
   const {
-    value
+    value,
+    hasError
   } = useFieldPropsV2();
   const {
     inputId,
@@ -39913,7 +39940,8 @@ var Stars = (_ref2) => {
     ref: containerRef,
     id: inputId,
     "aria-describedby": ariaDescribedBy,
-    className
+    className,
+    "data-invalid": hasError
   }, starValues.map((starValue) => applyInternalProps(starElement, {
     key: starValue,
     value: starValue,
@@ -40092,6 +40120,7 @@ var Control4 = (_ref5) => {
   const {
     addOther,
     addOtherLabel,
+    hasError,
     value: fieldValue
   } = useFieldPropsV2();
   const {
@@ -40107,7 +40136,8 @@ var Control4 = (_ref5) => {
     return fieldValue.some((val) => val === otherLabel || val.startsWith(`${otherLabel}:`));
   }, [addOther, fieldValue, otherLabel]);
   return /* @__PURE__ */ React45__default.createElement("div", {
-    className
+    className,
+    "data-invalid": hasError
   }, optionsElement, isOtherSelected && otherInputElement);
 };
 var Tags = (_ref6) => {
@@ -40119,8 +40149,16 @@ var Tags = (_ref6) => {
     value,
     onChange,
     addOtherLabel,
-    FieldLayout
+    FieldLayout,
+    required,
+    onBlur,
+    onFocus
   } = useFieldPropsV2();
+  const {
+    inputId,
+    labelId,
+    ariaDescribedBy
+  } = useFieldAttributes2();
   const {
     t
   } = useTranslation();
@@ -40155,11 +40193,18 @@ var Tags = (_ref6) => {
   return /* @__PURE__ */ React45__default.createElement(FieldLayout, {
     fieldId: id,
     renderLabel: () => labelElement,
-    renderInput: () => /* @__PURE__ */ React45__default.createElement(TagGroup, {
+    renderInput: () => /* @__PURE__ */ React45__default.createElement(FieldsetHeadless, {
+      id: inputId,
+      ariaLabelledBy: labelId,
+      ariaDescribedBy,
+      required,
+      onBlur,
+      onFocus
+    }, /* @__PURE__ */ React45__default.createElement(TagGroup, {
       selectionMode: "multiple",
       selectedKeys,
       onSelectionChange: handleSelectionChange
-    }, controlElement),
+    }, controlElement)),
     renderDescription: () => /* @__PURE__ */ React45__default.createElement(React45__default.Fragment, null, descriptionElement, errorElement)
   });
 };
@@ -40183,7 +40228,8 @@ var TextArea = (_ref) => {
     required,
     onBlur,
     onFocus,
-    FieldLayout
+    FieldLayout,
+    hasError
   } = useFieldPropsV2();
   const handleChange = useCallback((newValue) => {
     onChange(newValue);
@@ -40200,6 +40246,7 @@ var TextArea = (_ref) => {
       onChange: handleChange,
       isDisabled: disabled,
       isRequired: required,
+      isInvalid: hasError,
       onBlur,
       onFocus
     }, inputElement),
@@ -40314,7 +40361,8 @@ var TimeInput2 = (_ref) => {
     onBlur,
     onFocus,
     use24HourFormat,
-    FieldLayout
+    FieldLayout,
+    hasError
   } = useFieldPropsV2();
   const {
     inputId,
@@ -40338,6 +40386,7 @@ var TimeInput2 = (_ref) => {
       value: timeValue,
       onChange: handleChange,
       isDisabled: disabled,
+      isInvalid: hasError,
       isRequired: required,
       onBlur,
       onFocus,
@@ -40351,11 +40400,15 @@ var Time2 = (_ref2) => {
     children,
     className
   } = _ref2;
+  const {
+    hasError
+  } = useFieldPropsV2();
   const hourElement = findChildOfType(children, Time2.Hour);
   const minuteElement = findChildOfType(children, Time2.Minute);
   const periodElement = findChildOfType(children, Time2.Period);
   return /* @__PURE__ */ React45__default.createElement(DateInput$1, {
-    className
+    className,
+    "data-invalid": hasError
   }, (segment) => {
     switch (segment.type) {
       case "hour":
@@ -41135,7 +41188,8 @@ var Donation = (_ref) => {
     validation,
     addOther,
     addOtherPlaceholder,
-    FieldLayout
+    FieldLayout,
+    hasError
   } = useFieldPropsV2();
   const {
     t
@@ -41197,6 +41251,7 @@ var Donation = (_ref) => {
       value: selectedValue,
       onChange: handleRadioChange,
       isDisabled: disabled,
+      isInvalid: hasError,
       isRequired: required,
       onBlur,
       onFocus
@@ -41231,10 +41286,14 @@ var Control5 = (_ref2) => {
     customAmountProductId,
     onFocusCustomInput
   } = internal;
+  const {
+    hasError
+  } = useFieldPropsV2();
   const optionsElement = findChildOfType(children, Donation.Options);
   const otherInputElement = findChildOfType(children, Donation.OtherInput);
   return /* @__PURE__ */ React45__default.createElement("div", {
-    className
+    className,
+    "data-invalid": hasError
   }, optionsElement ? applyInternalProps(optionsElement, {
     productsById,
     addOther,
@@ -41369,7 +41428,8 @@ var OtherInput3 = (_ref7) => {
     onFocusCustomInput
   } = internal;
   const {
-    disabled
+    disabled,
+    hasError
   } = useFieldPropsV2();
   const currencyElement = findChildOfType(children, OtherInput3.Currency);
   const valueElement = findChildOfType(children, OtherInput3.Value);
@@ -41390,6 +41450,7 @@ var OtherInput3 = (_ref7) => {
     onChange: handleChange,
     onFocus: handleFocus,
     isDisabled: disabled,
+    isInvalid: hasError,
     className,
     "data-selected": hasValue ? "true" : void 0
   }, customAmount && currency && currencyElement ? applyInternalProps(currencyElement, {
@@ -43126,7 +43187,8 @@ var Value2 = (_ref8) => {
   const {
     readOnly,
     onBlur,
-    onFocus
+    onFocus,
+    hasError
   } = useFieldPropsV2();
   const {
     t
@@ -43137,7 +43199,8 @@ var Value2 = (_ref8) => {
   return /* @__PURE__ */ React45__default.createElement("div", {
     className,
     role: "region",
-    "aria-label": t("field.signature.input-area") || "Signature input area"
+    "aria-label": t("field.signature.input-area") || "Signature input area",
+    "data-invalid": hasError
   }, signatureView === SignatureView.DRAW && applyInternalProps(canvasElement, {
     value: signatureValueForView,
     onChange: handleChange,