@wix/form-public 0.513.0 → 0.515.0

package/dist/index.cjs

@@ -55724,9 +55724,9 @@ function useFileUploadController({ valueSliderLimit, value, explanationText, tar
     setFormStatus,
     target
   ]);
-  const getExplanationText = React172.useCallback(() => {
+  const getStatusText = React172.useCallback(() => {
     if (!files.length) {
-      return explanationText;
+      return void 0;
     }
     const uploadingCount = files.filter((f) => f.state === "uploading").length;
     if (uploadingCount) {
@@ -55736,14 +55736,27 @@ function useFileUploadController({ valueSliderLimit, value, explanationText, tar
         count: Math.round(progress * 100)
       });
     }
-    return explanationText || t(`form.file-upload.explanation-text`, {
+    return t(`form.file-upload.explanation-text`, {
       count: files.length
     });
   }, [
     files,
-    explanationText,
     t
   ]);
+  const getExplanationText = React172.useCallback(() => {
+    if (!files.length) {
+      return explanationText;
+    }
+    const isUploading = files.some((f) => f.state === "uploading");
+    if (isUploading) {
+      return getStatusText();
+    }
+    return explanationText || getStatusText();
+  }, [
+    files,
+    explanationText,
+    getStatusText
+  ]);
   const _uploadFiles = React172.useCallback(async (filesToUpload) => {
     await uploadFiles(filesToUpload, ({ file, uploadedFile }) => {
       setFiles((previousFiles) => previousFiles.map((f) => f.file === file ? {
@@ -55826,6 +55839,7 @@ function useFileUploadController({ valueSliderLimit, value, explanationText, tar
     limitError,
     hover,
     getExplanationText,
+    getStatusText,
     handleChange,
     handleDelete,
     accept,
@@ -55863,7 +55877,10 @@ function useFileUploadContext() {
 var DropZone = ({ children, className }) => {
   const { ariaDescribedBy } = useFieldAttributes();
   const { disabled, hasError } = useFieldPropsV2();
-  const { handleFileChange } = useFileUploadContext();
+  const { handleFileChange, limitReached } = useFileUploadContext();
+  if (limitReached) {
+    return null;
+  }
   const titleElement = findChildOfType(children, DropZone.Title);
   const subtitleElement = findChildOfType(children, DropZone.Subtitle);
   const buttonElement = findChildOfType(children, DropZone.Button);
@@ -55902,13 +55919,14 @@ var DropZoneTitle = ({ className, children }) => {
 };
 var DropZoneSubtitle = ({ className, children }) => {
   const { limitReached } = useFileUploadContext();
+  const { explanationText } = useFieldPropsV2();
   return /* @__PURE__ */ React172__default.default.createElement("p", {
     className
-  }, children({
+  }, explanationText || children({
     limitReached
   }));
 };
-var DropZoneButton = ({ className, children, "aria-roledescription": roleDescription }) => {
+var DropZoneButton = ({ className, children, "aria-roledescription": roleDescription, onHoverStart, onHoverEnd }) => {
   const { ariaDescribedBy, inputId, labelId, errorId } = useFieldAttributes();
   const { disabled, required, onFocus, hasError, errorMessage } = useFieldPropsV2();
   const { handleFileChange, accept, multiple, buttonRef, handleBlur, limitError, files } = useFileUploadContext();
@@ -55942,7 +55960,9 @@ var DropZoneButton = ({ className, children, "aria-roledescription": roleDescrip
     isDisabled: disabled,
     className,
     onFocus,
-    onBlur: handleBlur
+    onBlur: handleBlur,
+    onHoverStart,
+    onHoverEnd
   }, children));
 };
 var DropZoneButtonText = ({ className }) => {
@@ -56055,13 +56075,19 @@ Files.File = File2;
 // ../form-fields/dist/esm/ui/file-upload/file-upload-headless/file-upload-headless.js
 var fileKey = (f) => f.file.name;
 var FileUpload = ({ children }) => {
+  const { t } = useTranslation2();
   const { id: id6, value, onChange, uploadFileFormats, valueSliderLimit, target, explanationText, onBlur, hasError, errorMessage, FieldLayout } = useFieldPropsV2();
   const buttonRef = React172.useRef(null);
   const fileRemoveButtonRefs = React172.useRef({});
+  const pendingUploadButtonFocus = React172.useRef(false);
   const handleFilesCleared = React172.useCallback(() => {
-    buttonRef.current?.focus();
+    if (buttonRef.current) {
+      buttonRef.current.focus();
+    } else {
+      pendingUploadButtonFocus.current = true;
+    }
   }, []);
-  const { files, limitError, hover, getExplanationText, handleBlur, handleChange, handleDelete: _handleDelete, accept } = useFileUploadController({
+  const { files, limitError, hover, getExplanationText, getStatusText, handleBlur, handleChange, handleDelete: _handleDelete, accept } = useFileUploadController({
     valueSliderLimit,
     value,
     explanationText,
@@ -56083,6 +56109,14 @@ var FileUpload = ({ children }) => {
     _handleDelete,
     files
   ]);
+  React172.useEffect(() => {
+    if (pendingUploadButtonFocus.current && buttonRef.current) {
+      pendingUploadButtonFocus.current = false;
+      buttonRef.current.focus();
+    }
+  }, [
+    files
+  ]);
   const multiple = valueSliderLimit > 1;
   const limitReached = files.length >= valueSliderLimit;
   const contextValue = React172.useMemo(() => ({
@@ -56094,6 +56128,7 @@ var FileUpload = ({ children }) => {
     limitReached,
     multiple,
     getExplanationText,
+    getStatusText,
     hover,
     limitError,
     buttonRef,
@@ -56107,6 +56142,7 @@ var FileUpload = ({ children }) => {
     limitReached,
     multiple,
     getExplanationText,
+    getStatusText,
     hover,
     limitError
   ]);
@@ -56118,7 +56154,11 @@ var FileUpload = ({ children }) => {
   const descriptionElement = findChildOfType(children, FileUpload.Description);
   const errorElement = findChildOfType(children, FileUpload.Error);
   useFocusFieldEvent(() => {
-    buttonRef.current?.focus();
+    if (buttonRef.current) {
+      buttonRef.current.focus();
+      return;
+    }
+    files.map((f) => fileRemoveButtonRefs.current[fileKey(f)]).find((ref) => ref?.current)?.current?.focus();
   }, id6);
   return /* @__PURE__ */ React172__default.default.createElement(FileUploadContext.Provider, {
     value: contextValue
@@ -56129,13 +56169,19 @@ var FileUpload = ({ children }) => {
     renderDescription: () => /* @__PURE__ */ React172__default.default.createElement(React172__default.default.Fragment, null, applyInternalProps(errorElement, {
       hasError: Boolean(hasError || limitError),
       errorMessage: limitError ?? errorMessage
-    }), descriptionElement, explanationElement, filesElement)
+    }), /* @__PURE__ */ React172__default.default.createElement(reactAriaComponents.VisuallyHidden, {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true"
+    }, t("form.file-upload.explanation-text", {
+      count: files.length
+    })), explanationElement, filesElement, descriptionElement)
   }));
 };
-var Explanation = ({ className }) => {
-  const { getExplanationText } = useFileUploadContext();
-  const displayText = getExplanationText();
-  if (!displayText) {
+var Explanation = ({ className, showUploadStatusOnly }) => {
+  const { files, getExplanationText, getStatusText } = useFileUploadContext();
+  const displayText = showUploadStatusOnly ? getStatusText() : getExplanationText();
+  if (files.length === 1 || !displayText) {
     return null;
   }
   return /* @__PURE__ */ React172__default.default.createElement("p", {
@@ -59244,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");
@@ -59286,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);
@@ -59446,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) {
@@ -59490,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;
@@ -60676,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) {
@@ -61586,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();
   }, [