@wix/form-public 0.513.0 → 0.514.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", {