@wix/form-public 0.99.0 → 0.100.0

package/dist/index.js

@@ -37041,10 +37041,6 @@ var PhoneInput = (_ref2) => {
     id,
     value,
     onChange,
-    disabled,
-    required,
-    onBlur,
-    onFocus,
     FieldLayout,
     defaultCountry,
     validation
@@ -37065,9 +37061,7 @@ var PhoneInput = (_ref2) => {
     onChange
   });
   const labelElement = findChildOfType(children, PhoneInput.Label);
-  const countryButtonElement = findChildOfType(children, PhoneInput.CountryButton);
-  const countryOptionsElement = findChildOfType(children, PhoneInput.CountryOptions);
-  const phoneNumberElement = findChildOfType(children, PhoneInput.PhoneNumber);
+  const controlElement = findChildOfType(children, PhoneInput.Control);
   const descriptionElement = findChildOfType(children, PhoneInput.Description);
   const errorElement = findChildOfType(children, PhoneInput.Error);
   const contextValue = {
@@ -37083,19 +37077,7 @@ var PhoneInput = (_ref2) => {
   }, /* @__PURE__ */ React40__default.createElement(FieldLayout, {
     fieldId: id,
     renderLabel: () => labelElement,
-    renderInput: () => /* @__PURE__ */ React40__default.createElement("div", {
-      style: {
-        display: "flex",
-        gap: "8px"
-      }
-    }, /* @__PURE__ */ React40__default.createElement(Select, {
-      value: selectedCountryCode ?? null,
-      onChange: (key) => handleCountryCodeChange(key),
-      isDisabled: disabled,
-      isRequired: required,
-      onBlur,
-      onFocus
-    }, countryButtonElement, countryOptionsElement), phoneNumberElement),
+    renderInput: () => controlElement,
     renderDescription: () => /* @__PURE__ */ React40__default.createElement(React40__default.Fragment, null, descriptionElement, errorElement)
   }));
 };
@@ -37270,23 +37252,52 @@ var PhoneNumber2 = (_ref1) => {
     var _ref$current2;
     (_ref$current2 = ref.current) == null || _ref$current2.focus();
   }, id);
-  return /* @__PURE__ */ React40__default.createElement(TextField, {
-    value: currentValue,
-    onChange: handlePhoneChange,
-    isDisabled: disabled,
-    isRequired: required,
-    onBlur,
-    onFocus
-  }, /* @__PURE__ */ React40__default.createElement(Input$1, {
+  return /* @__PURE__ */ React40__default.createElement(Input$1, {
     ref,
     id: inputId,
     type: "tel",
+    value: currentValue,
+    onChange: (e2) => handlePhoneChange(e2.target.value),
+    disabled,
+    required,
+    onBlur,
+    onFocus,
     "aria-describedby": ariaDescribedBy,
     placeholder,
     className
-  }));
+  });
+};
+var Control3 = (_ref10) => {
+  let {
+    children,
+    className
+  } = _ref10;
+  const {
+    disabled,
+    required,
+    onBlur,
+    onFocus
+  } = useFieldPropsV2();
+  const {
+    selectedCountryCode,
+    handleCountryCodeChange
+  } = usePhoneInputContext();
+  const countryButtonElement = findChildOfType(children, PhoneInput.CountryButton);
+  const countryOptionsElement = findChildOfType(children, PhoneInput.CountryOptions);
+  const phoneNumberElement = findChildOfType(children, PhoneInput.PhoneNumber);
+  return /* @__PURE__ */ React40__default.createElement("div", {
+    className
+  }, /* @__PURE__ */ React40__default.createElement(Select, {
+    value: selectedCountryCode ?? null,
+    onChange: (key) => handleCountryCodeChange(key),
+    isDisabled: disabled,
+    isRequired: required,
+    onBlur,
+    onFocus
+  }, countryButtonElement, countryOptionsElement), phoneNumberElement);
 };
 PhoneInput.Label = Label;
+PhoneInput.Control = Control3;
 PhoneInput.CountryButton = CountryButton;
 PhoneInput.CountryOptions = CountryOptions;
 PhoneInput.PhoneNumber = PhoneNumber2;