@wix/form-public 0.514.0 → 0.515.0

package/dist/index.cjs

@@ -59290,11 +59290,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 = React172.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");
@@ -59332,9 +59332,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__default.default.createElement(CountryOptionsContent, {
     isForcedOpen
   }, children);
@@ -59492,24 +59495,54 @@ var PhoneNumber2 = ({ className }) => {
     className
   });
 };
+var CountryPopover = ({ children, ...internal }) => {
+  const pickerProps = internal;
+  const { isForcedOpen } = pickerProps;
+  const { disabled, readOnly, required, hasError } = useFieldPropsV2();
+  const [isOpen, setIsOpen] = React172.useState(false);
+  const { t } = useTranslation2();
+  const { selectedCountryCode, handleCountryCodeChange } = usePhoneInputContext();
+  const isPopoverOpen = isForcedOpen || isOpen && !disabled && !readOnly;
+  return /* @__PURE__ */ React172__default.default.createElement(reactAriaComponents.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__default.default.createElement(reactAriaComponents.DialogTrigger, null, findChildOfType(children, PhoneInput.CountryButton), applyInternalProps(findChildOfType(children, PhoneInput.CountryOptions.Modal), pickerProps));
+};
 var Control7 = ({ children, className }) => {
   const controlRef = React172.useRef(null);
   const optionsRef = React172.useRef(null);
   const isFocused = React172.useRef(false);
-  const { id: id6, disabled, readOnly, required, hasError, showFlag, onFocus, onBlur } = useFieldPropsV2();
-  const [isOpen, setIsOpen] = React172.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) {
@@ -59536,32 +59569,19 @@ var Control7 = ({ children, className }) => {
       longCountryCode: countries[0].longCountryCode
     }), phoneNumberElement);
   }
-  const selector = /* @__PURE__ */ React172__default.default.createElement(React172__default.default.Fragment, null, countryButtonElement, applyInternalProps(countryOptionsElement, {
-    triggerRef: controlRef,
-    optionsRef,
-    isForcedOpen
-  }));
   return /* @__PURE__ */ React172__default.default.createElement(reactAriaComponents.Group, {
     ref: controlRef,
     className: controlClassName,
     isDisabled: disabled,
     isInvalid: hasError,
     ...focusHandlers
-  }, modalElement ? /* @__PURE__ */ React172__default.default.createElement(reactAriaComponents.DialogTrigger, null, selector) : /* @__PURE__ */ React172__default.default.createElement(reactAriaComponents.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;
@@ -60722,7 +60742,7 @@ var SignaturePad = class _SignaturePad extends SignatureEventTarget {
     return svg.outerHTML;
   }
 };
-var useId = typeof React172__default.default.useId === "function" ? React172__default.default.useId : () => React172.useRef(generateUUID()).current;
+var useId2 = typeof React172__default.default.useId === "function" ? React172__default.default.useId : () => React172.useRef(generateUUID()).current;
 
 // ../form-fields/dist/esm/ui/signature-field/signature-types.js
 var SignatureFormat = /* @__PURE__ */ (function(SignatureFormat2) {
@@ -61632,7 +61652,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 = React172.useCallback(() => {
     fileInputRef.current?.click();
   }, [