@wix/form-public 0.508.0 → 0.510.0

package/dist/index.cjs

@@ -43031,12 +43031,9 @@ var ScrollProvider = ({ children }) => {
       if (element && scrollViewRef.current) {
         const { top } = element.getBoundingClientRect();
         if (top < 0 || top > window.innerHeight) {
-          const headerHeight = getSiteHeaderHeight(scrollViewRef.current);
-          const wixAdHeight = getWixAdHeight();
-          const newTop = top + window.scrollY - 20 - headerHeight - wixAdHeight;
-          window.scrollTo({
-            top: newTop,
-            behavior: "smooth"
+          element.scrollIntoView({
+            behavior: "smooth",
+            block: "center"
           });
         }
       }
@@ -43055,18 +43052,6 @@ function useScroll() {
   }
   return context;
 }
-function getSiteHeaderHeight(formElement) {
-  const classicHeader = document.querySelector("#SITE_HEADER");
-  const potentialHeader = formElement.closest("main")?.previousElementSibling;
-  const studioHeader = potentialHeader?.tagName === "HEADER" ? potentialHeader : void 0;
-  const header = classicHeader || studioHeader;
-  const headerPosition = header && window.getComputedStyle(header).position;
-  return header && (headerPosition === "sticky" || headerPosition === "fixed") ? header.getBoundingClientRect().height : 0;
-}
-function getWixAdHeight() {
-  const ad = document.querySelector("#WIX_ADS");
-  return ad && window.getComputedStyle(ad).position === "fixed" ? ad.getBoundingClientRect().height : 0;
-}
 
 // ../form-fields/dist/esm/contexts/translation-context.js
 var TranslationContext = React172.createContext(void 0);
@@ -51745,15 +51730,6 @@ function r(r3, e, n) {
   }, d;
 }
 
-// ../form-fields/dist/esm/ui/options-layout/options-layout-constants.js
-var NUMBER_OF_COLUMNS = /* @__PURE__ */ (function(NUMBER_OF_COLUMNS2) {
-  NUMBER_OF_COLUMNS2[NUMBER_OF_COLUMNS2["FREE_FLOW"] = 0] = "FREE_FLOW";
-  NUMBER_OF_COLUMNS2[NUMBER_OF_COLUMNS2["ONE"] = 1] = "ONE";
-  NUMBER_OF_COLUMNS2[NUMBER_OF_COLUMNS2["TWO"] = 2] = "TWO";
-  NUMBER_OF_COLUMNS2[NUMBER_OF_COLUMNS2["THREE"] = 3] = "THREE";
-  return NUMBER_OF_COLUMNS2;
-})({});
-
 // ../form-fields/dist/esm/ui/checkbox-group-field/checkbox-group-field-utils.js
 var OTHER_ID = "Other";
 var getValueIncludesOther = (value, optionsNames) => value.some((_value) => !optionsNames.includes(_value));
@@ -51771,7 +51747,7 @@ var getOtherValue = (value, addOtherLabel) => {
 var getOptionsValues = (options) => options.map((option2) => option2.value ?? option2.label);
 
 // ../form-fields/dist/esm/ui/checkbox-group-field/checkbox-group-field-headless.js
-var CheckboxGroup = ({ children }) => {
+var CheckboxGroup = ({ children, className }) => {
   const props2 = useFieldPropsV2();
   const { id: id6, value, onChange, disabled, required, onBlur, onFocus, hasError, FieldLayout } = props2;
   const { inputId, labelId, ariaDescribedBy } = useFieldAttributes();
@@ -51798,6 +51774,7 @@ var CheckboxGroup = ({ children }) => {
       onBlur,
       onFocus
     }, /* @__PURE__ */ React172__default.default.createElement(reactAriaComponents.CheckboxGroup, {
+      className,
       "aria-labelledby": labelId,
       value: _value,
       onChange: handleChange,
@@ -51812,13 +51789,11 @@ var Options = ({ children, className }) => {
   const props2 = useFieldPropsV2();
   const { id: id6, options, addOther, addOtherLabel, numberOfColumns } = props2;
   const { t } = useTranslation2();
-  const { isMobile: isMobile2 } = useConfig();
   const optionElement = findChildOfType(children, Options.Option);
   const otherLabel = getOtherLabel(addOtherLabel, t);
-  const columns = isMobile2 ? NUMBER_OF_COLUMNS.ONE : numberOfColumns;
   return /* @__PURE__ */ React172__default.default.createElement("div", {
     className,
-    "data-columns": columns
+    "data-columns": numberOfColumns
   }, options?.map((option2, index2) => {
     const checkboxValue = option2.value ?? option2.label;
     return applyInternalProps(optionElement, {
@@ -55114,12 +55089,10 @@ var Control3 = ({ children, className, ...internal }) => {
 var Options2 = ({ children, className, ...internal }) => {
   const { productsById } = internal;
   const { options, numberOfColumns } = useFieldPropsV2();
-  const { isMobile: isMobile2 } = useConfig();
   const optionElement = findChildOfType(children, Options2.Option);
-  const columns = isMobile2 ? NUMBER_OF_COLUMNS.ONE : numberOfColumns;
   return /* @__PURE__ */ React172__default.default.createElement("div", {
     className,
-    "data-columns": columns
+    "data-columns": numberOfColumns
   }, options.map((option2) => {
     const product = productsById[option2.value];
     const price = product?.fixedPriceOptions?.price;
@@ -55537,7 +55510,7 @@ var getOtherValue2 = (value, addOtherLabel) => {
 };
 
 // ../form-fields/dist/esm/ui/radio-group-field/radio-group-field-headless.js
-var RadioGroup = ({ children }) => {
+var RadioGroup = ({ children, className }) => {
   const { id: id6, value, onChange, disabled, readOnly, required, onBlur, onFocus, hasError, FieldLayout, options } = useFieldPropsV2();
   const { inputId, labelId, ariaDescribedBy } = useFieldAttributes();
   const labelElement = findChildOfType(children, RadioGroup.Label);
@@ -55552,6 +55525,7 @@ var RadioGroup = ({ children }) => {
     }),
     renderInput: () => /* @__PURE__ */ React172__default.default.createElement(reactAriaComponents.RadioGroup, {
       id: inputId,
+      className,
       "aria-labelledby": labelId,
       "aria-describedby": ariaDescribedBy,
       value: groupValue,
@@ -55569,17 +55543,15 @@ var RadioGroup = ({ children }) => {
 var Options4 = ({ children, className }) => {
   const { options, addOther, addOtherLabel, id: id6, numberOfColumns, hasError } = useFieldPropsV2();
   const { t } = useTranslation2();
-  const { isMobile: isMobile2 } = useConfig();
   const optionElement = findChildOfType(children, RadioGroup.Option);
   const firstRadioRef = React172.useRef(null);
   const otherLabel = addOtherLabel || t("add-other.default-other-option-label") || OTHER_ID2;
-  const columns = isMobile2 ? NUMBER_OF_COLUMNS.ONE : numberOfColumns;
   useFocusFieldEvent(() => {
     firstRadioRef.current?.focus();
   }, id6);
   return /* @__PURE__ */ React172__default.default.createElement("div", {
     className,
-    "data-columns": columns,
+    "data-columns": numberOfColumns,
     "data-invalid": hasError
   }, options.map((option2, index2) => applyInternalProps(optionElement, {
     key: option2.value ?? option2.label,
@@ -56223,12 +56195,11 @@ FixedPayment.Amount = Amount;
 FixedPayment.Description = Description;
 FixedPayment.Error = Error2;
 var Options5 = ({ children, className }) => {
-  const { isMobile: isMobile2 } = useConfig();
   const { id: id6, options, numberOfColumns } = useFieldPropsV2();
   const optionElement = findChildOfType(children, Options5.Option);
   return /* @__PURE__ */ React172__default.default.createElement("div", {
     className,
-    "data-columns": isMobile2 ? 1 : numberOfColumns
+    "data-columns": numberOfColumns
   }, options?.map((option2, index2) => applyInternalProps(optionElement, {
     key: option2.id || option2.label,
     option: option2,
@@ -61763,6 +61734,15 @@ ButtonsContainer.NextButton = NextButton;
 ButtonsContainer.SubmitButton = SubmitButtonComponent;
 SubmitButton.SubmitButton = ButtonsContainer;
 
+// ../form-fields/dist/esm/ui/options-layout/options-layout-constants.js
+var NUMBER_OF_COLUMNS = /* @__PURE__ */ (function(NUMBER_OF_COLUMNS2) {
+  NUMBER_OF_COLUMNS2[NUMBER_OF_COLUMNS2["FREE_FLOW"] = 0] = "FREE_FLOW";
+  NUMBER_OF_COLUMNS2[NUMBER_OF_COLUMNS2["ONE"] = 1] = "ONE";
+  NUMBER_OF_COLUMNS2[NUMBER_OF_COLUMNS2["TWO"] = 2] = "TWO";
+  NUMBER_OF_COLUMNS2[NUMBER_OF_COLUMNS2["THREE"] = 3] = "THREE";
+  return NUMBER_OF_COLUMNS2;
+})({});
+
 // ../form-fields/dist/esm/ui/tags-field/tags-field-utils.js
 var OTHER_ID3 = "Other";
 var getOtherValue3 = (value, addOtherLabel) => {
@@ -61880,9 +61860,7 @@ var Option12 = ({ children, className, ...internal }) => {
 };
 var Options12 = ({ children, className }) => {
   const { options, addOther, addOtherLabel, numberOfColumns = NUMBER_OF_COLUMNS.FREE_FLOW } = useFieldPropsV2();
-  const { isMobile: isMobile2 } = useConfig();
   const { t } = useTranslation2();
-  const columns = isMobile2 && numberOfColumns !== NUMBER_OF_COLUMNS.FREE_FLOW ? NUMBER_OF_COLUMNS.ONE : numberOfColumns;
   const otherLabel = addOtherLabel || t("add-other.default-other-option-label") || OTHER_ID3;
   const optionElement = findChildOfType(children, Option12);
   const allOptions = React172.useMemo(() => {
@@ -61908,7 +61886,7 @@ var Options12 = ({ children, className }) => {
   }
   return /* @__PURE__ */ React172__default.default.createElement("div", {
     className,
-    "data-columns": columns
+    "data-columns": numberOfColumns
   }, allOptions.map((option2, index2) => {
     const optionValue = option2.value ?? option2.label;
     return applyInternalProps(optionElement, {