@wix/form-public 0.134.0 → 0.136.0

package/dist/index.cjs

@@ -33432,7 +33432,8 @@ var CheckboxContainer = (_ref2) => {
     disabled,
     required,
     onBlur,
-    onFocus
+    onFocus,
+    hasError
   } = useFieldPropsV2();
   const {
     inputId,
@@ -33456,6 +33457,7 @@ var CheckboxContainer = (_ref2) => {
     onChange: handleChange,
     isDisabled: disabled,
     isRequired: required,
+    isInvalid: hasError,
     onBlur,
     onFocus,
     className
@@ -34049,7 +34051,8 @@ var Month = (_ref2) => {
   }, /* @__PURE__ */ React45__namespace.default.createElement(reactAriaComponents.Button, {
     ref: buttonRef,
     id: inputId,
-    "data-hook": SupportedDateParts.MONTH
+    "data-hook": SupportedDateParts.MONTH,
+    "data-invalid": partError
   }, /* @__PURE__ */ React45__namespace.default.createElement(reactAriaComponents.SelectValue, null)), optionsElement));
 };
 var MonthLabel = (_ref3) => {
@@ -35020,7 +35023,9 @@ var DatePicker = (_ref) => {
     required,
     onBlur,
     onFocus,
-    FieldLayout
+    FieldLayout,
+    hasError,
+    readOnly
   } = useFieldPropsV2();
   const handleChange = React45.useCallback((dateValue2) => {
     const stringValue = dateValueToString(dateValue2);
@@ -35039,6 +35044,8 @@ var DatePicker = (_ref) => {
       value: dateValue,
       onChange: handleChange,
       isDisabled: disabled,
+      isInvalid: hasError,
+      isReadOnly: readOnly,
       isRequired: required,
       onBlur,
       onFocus
@@ -35055,10 +35062,14 @@ var Control = (_ref2) => {
     inputId,
     ariaDescribedBy
   } = useFieldAttributes2();
+  const {
+    hasError
+  } = useFieldPropsV2();
   return /* @__PURE__ */ React45__namespace.default.createElement(reactAriaComponents.Group, {
     id: inputId,
     "aria-describedby": ariaDescribedBy,
-    className
+    className,
+    "data-invalid": hasError
   }, children);
 };
 var Input2 = (_ref3) => {
@@ -35257,7 +35268,8 @@ var Month2 = (_ref2) => {
   }, /* @__PURE__ */ React45__namespace.default.createElement(reactAriaComponents.Button, {
     ref: buttonRef,
     id: inputId,
-    "data-hook": SupportedDateParts.MONTH
+    "data-hook": SupportedDateParts.MONTH,
+    "data-invalid": partError
   }, /* @__PURE__ */ React45__namespace.default.createElement(reactAriaComponents.SelectValue, null)), optionsElement));
 };
 var MonthLabel2 = (_ref3) => {
@@ -35718,7 +35730,8 @@ var Dropdown = (_ref) => {
     required,
     onBlur,
     onFocus,
-    FieldLayout
+    FieldLayout,
+    hasError
   } = useFieldPropsV2();
   const handleChange = React45.useCallback((selectedValue) => {
     onChange(typeof selectedValue === "string" ? selectedValue : null);
@@ -35735,6 +35748,7 @@ var Dropdown = (_ref) => {
       value: value ?? null,
       onChange: handleChange,
       isDisabled: disabled,
+      isInvalid: hasError,
       isRequired: required,
       placeholder,
       onBlur,
@@ -35752,7 +35766,8 @@ var Trigger2 = (_ref2) => {
     ariaDescribedBy
   } = useFieldAttributes2();
   const {
-    id
+    id,
+    hasError
   } = useFieldPropsV2();
   const ref = React45.useRef(null);
   useFocusFieldEvent(() => {
@@ -35763,7 +35778,8 @@ var Trigger2 = (_ref2) => {
     ref,
     id: inputId,
     "aria-describedby": ariaDescribedBy,
-    className
+    className,
+    "data-invalid": hasError
   }, /* @__PURE__ */ React45__namespace.default.createElement(reactAriaComponents.SelectValue, null));
 };
 var Options2 = (_ref3) => {
@@ -35824,7 +35840,8 @@ var DropZone = (_ref) => {
     ariaDescribedBy
   } = useFieldAttributes2();
   const {
-    disabled
+    disabled,
+    hasError
   } = useFieldPropsV2();
   const {
     handleFileChange,
@@ -35836,6 +35853,7 @@ var DropZone = (_ref) => {
   return /* @__PURE__ */ React45__namespace.default.createElement(reactAriaComponents.DropZone, {
     "aria-describedby": ariaDescribedBy,
     className,
+    "data-invalid": hasError,
     isDisabled: disabled,
     onDrop: async (e2) => {
       const droppedFiles = [];
@@ -39459,7 +39477,8 @@ var CountryButton = (_ref3) => {
     labelId
   } = useFieldAttributes2();
   const {
-    id
+    id,
+    hasError
   } = useFieldPropsV2();
   const {
     t
@@ -39483,7 +39502,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) => {
@@ -39662,7 +39682,8 @@ var Control3 = (_ref10) => {
   } = _ref10;
   const {
     disabled,
-    required
+    required,
+    hasError
   } = useFieldPropsV2();
   const {
     selectedCountryCode,
@@ -39677,6 +39698,7 @@ var Control3 = (_ref10) => {
     value: selectedCountryCode ?? null,
     onChange: (key) => handleCountryCodeChange(key),
     isDisabled: disabled,
+    isInvalid: hasError,
     isRequired: required,
     placeholder: ""
   }, countryButtonElement, countryOptionsElement), phoneNumberElement);
@@ -39712,6 +39734,7 @@ var RadioGroup = (_ref) => {
     required,
     onBlur,
     onFocus,
+    hasError,
     FieldLayout
   } = useFieldPropsV2();
   const {
@@ -39736,6 +39759,7 @@ var RadioGroup = (_ref) => {
       onChange,
       isDisabled: disabled,
       isRequired: required,
+      isInvalid: hasError,
       onBlur,
       onFocus
     }, optionsElement),
@@ -39752,7 +39776,8 @@ var Options8 = (_ref2) => {
     addOther,
     addOtherLabel,
     id,
-    numberOfColumns
+    numberOfColumns,
+    hasError
   } = useFieldPropsV2();
   const {
     t
@@ -39766,7 +39791,8 @@ var Options8 = (_ref2) => {
   }, id);
   return /* @__PURE__ */ React45__namespace.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,
@@ -39924,7 +39950,8 @@ var Stars = (_ref2) => {
     className
   } = _ref2;
   const {
-    value
+    value,
+    hasError
   } = useFieldPropsV2();
   const {
     inputId,
@@ -39939,7 +39966,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,
@@ -40118,6 +40146,7 @@ var Control4 = (_ref5) => {
   const {
     addOther,
     addOtherLabel,
+    hasError,
     value: fieldValue
   } = useFieldPropsV2();
   const {
@@ -40133,7 +40162,8 @@ var Control4 = (_ref5) => {
     return fieldValue.some((val) => val === otherLabel || val.startsWith(`${otherLabel}:`));
   }, [addOther, fieldValue, otherLabel]);
   return /* @__PURE__ */ React45__namespace.default.createElement("div", {
-    className
+    className,
+    "data-invalid": hasError
   }, optionsElement, isOtherSelected && otherInputElement);
 };
 var Tags = (_ref6) => {
@@ -40145,8 +40175,16 @@ var Tags = (_ref6) => {
     value,
     onChange,
     addOtherLabel,
-    FieldLayout
+    FieldLayout,
+    required,
+    onBlur,
+    onFocus
   } = useFieldPropsV2();
+  const {
+    inputId,
+    labelId,
+    ariaDescribedBy
+  } = useFieldAttributes2();
   const {
     t
   } = useTranslation();
@@ -40181,11 +40219,18 @@ var Tags = (_ref6) => {
   return /* @__PURE__ */ React45__namespace.default.createElement(FieldLayout, {
     fieldId: id,
     renderLabel: () => labelElement,
-    renderInput: () => /* @__PURE__ */ React45__namespace.default.createElement(reactAriaComponents.TagGroup, {
+    renderInput: () => /* @__PURE__ */ React45__namespace.default.createElement(FieldsetHeadless, {
+      id: inputId,
+      ariaLabelledBy: labelId,
+      ariaDescribedBy,
+      required,
+      onBlur,
+      onFocus
+    }, /* @__PURE__ */ React45__namespace.default.createElement(reactAriaComponents.TagGroup, {
       selectionMode: "multiple",
       selectedKeys,
       onSelectionChange: handleSelectionChange
-    }, controlElement),
+    }, controlElement)),
     renderDescription: () => /* @__PURE__ */ React45__namespace.default.createElement(React45__namespace.default.Fragment, null, descriptionElement, errorElement)
   });
 };
@@ -40209,7 +40254,8 @@ var TextArea = (_ref) => {
     required,
     onBlur,
     onFocus,
-    FieldLayout
+    FieldLayout,
+    hasError
   } = useFieldPropsV2();
   const handleChange = React45.useCallback((newValue) => {
     onChange(newValue);
@@ -40226,6 +40272,7 @@ var TextArea = (_ref) => {
       onChange: handleChange,
       isDisabled: disabled,
       isRequired: required,
+      isInvalid: hasError,
       onBlur,
       onFocus
     }, inputElement),
@@ -40340,7 +40387,8 @@ var TimeInput2 = (_ref) => {
     onBlur,
     onFocus,
     use24HourFormat,
-    FieldLayout
+    FieldLayout,
+    hasError
   } = useFieldPropsV2();
   const {
     inputId,
@@ -40364,6 +40412,7 @@ var TimeInput2 = (_ref) => {
       value: timeValue,
       onChange: handleChange,
       isDisabled: disabled,
+      isInvalid: hasError,
       isRequired: required,
       onBlur,
       onFocus,
@@ -40377,11 +40426,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__namespace.default.createElement(reactAriaComponents.DateInput, {
-    className
+    className,
+    "data-invalid": hasError
   }, (segment) => {
     switch (segment.type) {
       case "hour":
@@ -41161,7 +41214,8 @@ var Donation = (_ref) => {
     validation,
     addOther,
     addOtherPlaceholder,
-    FieldLayout
+    FieldLayout,
+    hasError
   } = useFieldPropsV2();
   const {
     t
@@ -41223,6 +41277,7 @@ var Donation = (_ref) => {
       value: selectedValue,
       onChange: handleRadioChange,
       isDisabled: disabled,
+      isInvalid: hasError,
       isRequired: required,
       onBlur,
       onFocus
@@ -41257,10 +41312,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__namespace.default.createElement("div", {
-    className
+    className,
+    "data-invalid": hasError
   }, optionsElement ? applyInternalProps(optionsElement, {
     productsById,
     addOther,
@@ -41395,7 +41454,8 @@ var OtherInput3 = (_ref7) => {
     onFocusCustomInput
   } = internal;
   const {
-    disabled
+    disabled,
+    hasError
   } = useFieldPropsV2();
   const currencyElement = findChildOfType(children, OtherInput3.Currency);
   const valueElement = findChildOfType(children, OtherInput3.Value);
@@ -41416,6 +41476,7 @@ var OtherInput3 = (_ref7) => {
     onChange: handleChange,
     onFocus: handleFocus,
     isDisabled: disabled,
+    isInvalid: hasError,
     className,
     "data-selected": hasValue ? "true" : void 0
   }, customAmount && currency && currencyElement ? applyInternalProps(currencyElement, {
@@ -43152,7 +43213,8 @@ var Value2 = (_ref8) => {
   const {
     readOnly,
     onBlur,
-    onFocus
+    onFocus,
+    hasError
   } = useFieldPropsV2();
   const {
     t
@@ -43163,7 +43225,8 @@ var Value2 = (_ref8) => {
   return /* @__PURE__ */ React45__namespace.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,