@wix/form-public 0.514.0 → 0.515.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { ErrorType, ValidationMode } from '@wix/ambassador-forms-v1-validation-result/types';
 import { DayOfWeek, InputFieldInputType, ValidationFormat, RequiredIndicator as RequiredIndicator$1, RequiredIndicatorPlacement as RequiredIndicatorPlacement$1, PriceType, InputFieldPaymentComponentType, InputFieldNumberComponentType, InputFieldStringComponentType, FieldFieldType, Format as Format$1, SubmitSuccessAction as SubmitSuccessAction$1, ContactAutofill as ContactAutofill$1, UrlTargetEnumTarget, ArrayItemsItemType, OverrideEntityType as OverrideEntityType$1 } from '@wix/ambassador-forms-v4-form-http/types';
-import React172, { createContext, useRef, Component, createRef, Suspense, useMemo, useCallback, useState, useEffect, useContext, Children, isValidElement, cloneElement, forwardRef, useImperativeHandle, Fragment, useLayoutEffect, createElement } from 'react';
+import React172, { createContext, useRef, Component, createRef, Suspense, useMemo, useCallback, useState, useEffect, useContext, Children, isValidElement, cloneElement, forwardRef, useImperativeHandle, Fragment, useLayoutEffect, createElement, useId } from 'react';
 import { initReactI18next } from 'react-i18next';
 import default2 from 'i18next';
 import ReactDOM from 'react-dom';
@@ -59280,11 +59280,11 @@ var PhoneInput = ({ children }) => {
   }));
 };
 var CountryButton = ({ children, className }) => {
-  const { inputId, labelId } = useFieldAttributes();
+  const { labelId } = useFieldAttributes();
   const { hasError, disabled, readOnly } = useFieldPropsV2();
   const { t } = useTranslation2();
   const { selectedCountryCode, countries } = usePhoneInputContext();
-  const buttonId = `${inputId}-country`;
+  const buttonId = useId();
   const selectedCountry = selectedCountryCode ? countries.find((c) => c.shortCountryCode === selectedCountryCode) : void 0;
   const dialingCode = selectedCountry ? getCallingCode2(selectedCountry.longCountryCode) || "" : "";
   const countryCodeLabel = t("field.phone.country-code.aria-label");
@@ -59322,9 +59322,12 @@ var CountryButtonEmptyState = ({ children, className }) => {
 CountryButton.Flag = CountryButtonFlag;
 CountryButton.EmptyState = CountryButtonEmptyState;
 var CountryOptions = ({ children, className, "aria-label": ariaLabel, placement, offset, ...internal }) => {
-  const { triggerRef, optionsRef, isForcedOpen } = internal;
+  const { triggerRef, optionsRef, isForcedOpen, isOpen } = internal;
   const { popoverContainer } = usePhoneInputContext();
   const searchElement = findChildOfType(children, CountryOptions.Search);
+  if (!isOpen) {
+    return null;
+  }
   const content = /* @__PURE__ */ React172.createElement(CountryOptionsContent, {
     isForcedOpen
   }, children);
@@ -59482,24 +59485,54 @@ var PhoneNumber2 = ({ className }) => {
     className
   });
 };
+var CountryPopover = ({ children, ...internal }) => {
+  const pickerProps = internal;
+  const { isForcedOpen } = pickerProps;
+  const { disabled, readOnly, required, hasError } = useFieldPropsV2();
+  const [isOpen, setIsOpen] = useState(false);
+  const { t } = useTranslation2();
+  const { selectedCountryCode, handleCountryCodeChange } = usePhoneInputContext();
+  const isPopoverOpen = isForcedOpen || isOpen && !disabled && !readOnly;
+  return /* @__PURE__ */ React172.createElement(Select, {
+    "aria-label": t("field.phone.country-code.aria-label"),
+    value: selectedCountryCode ?? null,
+    onChange: (key) => handleCountryCodeChange(key),
+    isDisabled: disabled || readOnly,
+    isInvalid: hasError,
+    isRequired: required,
+    placeholder: "",
+    isOpen: isPopoverOpen,
+    allowsEmptyCollection: true,
+    onOpenChange: isForcedOpen ? void 0 : setIsOpen
+  }, findChildOfType(children, PhoneInput.CountryButton), applyInternalProps(findChildOfType(children, PhoneInput.CountryOptions.Popover), {
+    ...pickerProps,
+    isOpen: isPopoverOpen
+  }));
+};
+var CountryDrawer = ({ children, ...internal }) => {
+  const pickerProps = internal;
+  return /* @__PURE__ */ React172.createElement(DialogTrigger, null, findChildOfType(children, PhoneInput.CountryButton), applyInternalProps(findChildOfType(children, PhoneInput.CountryOptions.Modal), pickerProps));
+};
 var Control7 = ({ children, className }) => {
   const controlRef = useRef(null);
   const optionsRef = useRef(null);
   const isFocused = useRef(false);
-  const { id: id6, disabled, readOnly, required, hasError, showFlag, onFocus, onBlur } = useFieldPropsV2();
-  const [isOpen, setIsOpen] = useState(false);
+  const { id: id6, disabled, hasError, showFlag, onFocus, onBlur } = useFieldPropsV2();
   const invokeBlur = useInvokeCallback(onBlur);
-  const { t } = useTranslation2();
-  const { selectedCountryCode, handleCountryCodeChange, countries } = usePhoneInputContext();
-  const countryButtonElement = findChildOfType(children, PhoneInput.CountryButton);
-  const modalElement = findChildOfType(children, PhoneInput.CountryOptions.Modal);
-  const countryOptionsElement = modalElement ?? findChildOfType(children, PhoneInput.CountryOptions.Popover);
+  const { countries } = usePhoneInputContext();
+  const drawerElement = findChildOfType(children, PhoneInput.CountryDrawer);
+  const popoverElement = findChildOfType(children, PhoneInput.CountryPopover);
   const phoneNumberElement = findChildOfType(children, PhoneInput.PhoneNumber);
   const hasCountryOptions2 = countries.length > 1;
-  const isForcedOpen = useIsForcedOpenDropdown(id6) && !modalElement && hasCountryOptions2;
+  const isForcedOpen = useIsForcedOpenDropdown(id6) && !!popoverElement && hasCountryOptions2;
   const controlClassName = typeof className === "function" ? className({
     hasCountryOptions: hasCountryOptions2
   }) : className;
+  const pickerProps = {
+    triggerRef: controlRef,
+    optionsRef,
+    isForcedOpen
+  };
   const focusHandlers = {
     onFocus: () => {
       if (!isFocused.current) {
@@ -59526,32 +59559,19 @@ var Control7 = ({ children, className }) => {
       longCountryCode: countries[0].longCountryCode
     }), phoneNumberElement);
   }
-  const selector = /* @__PURE__ */ React172.createElement(React172.Fragment, null, countryButtonElement, applyInternalProps(countryOptionsElement, {
-    triggerRef: controlRef,
-    optionsRef,
-    isForcedOpen
-  }));
   return /* @__PURE__ */ React172.createElement(Group, {
     ref: controlRef,
     className: controlClassName,
     isDisabled: disabled,
     isInvalid: hasError,
     ...focusHandlers
-  }, modalElement ? /* @__PURE__ */ React172.createElement(DialogTrigger, null, selector) : /* @__PURE__ */ React172.createElement(Select, {
-    "aria-label": t("field.phone.country-code.aria-label"),
-    value: selectedCountryCode ?? null,
-    onChange: (key) => handleCountryCodeChange(key),
-    isDisabled: disabled || readOnly,
-    isInvalid: hasError,
-    isRequired: required,
-    placeholder: "",
-    isOpen: isForcedOpen || isOpen && !disabled && !readOnly,
-    onOpenChange: isForcedOpen ? void 0 : setIsOpen
-  }, selector), phoneNumberElement);
+  }, !isForcedOpen && applyInternalProps(drawerElement, pickerProps), applyInternalProps(popoverElement, pickerProps), phoneNumberElement);
 };
 PhoneInput.Label = Label;
 PhoneInput.Control = Control7;
 PhoneInput.CountryButton = CountryButton;
+PhoneInput.CountryDrawer = CountryDrawer;
+PhoneInput.CountryPopover = CountryPopover;
 PhoneInput.CountryOptions = CountryOptions;
 PhoneInput.PhoneNumber = PhoneNumber2;
 PhoneInput.Description = Description;
@@ -60712,7 +60732,7 @@ var SignaturePad = class _SignaturePad extends SignatureEventTarget {
     return svg.outerHTML;
   }
 };
-var useId = typeof React172.useId === "function" ? React172.useId : () => useRef(generateUUID()).current;
+var useId2 = typeof React172.useId === "function" ? React172.useId : () => useRef(generateUUID()).current;
 
 // ../form-fields/dist/esm/ui/signature-field/signature-types.js
 var SignatureFormat = /* @__PURE__ */ (function(SignatureFormat2) {
@@ -61622,7 +61642,7 @@ var Upload = ({ children, className, imageAlt, ...internal }) => {
 var UploadButton = ({ children, className, ...internal }) => {
   const { fileInputRef, disabled, readOnly, onBlur, onFocus } = internal;
   const { inputId, ariaDescribedBy, labelId } = useFieldAttributes();
-  const textId = useId();
+  const textId = useId2();
   const handlePress = useCallback(() => {
     fileInputRef.current?.click();
   }, [