@wix/form-public 0.513.0 → 0.514.0

package/dist/index.js

@@ -7,7 +7,7 @@ import ReactDOM from 'react-dom';
 import camelCase2 from 'lodash.camelcase';
 import mapKeys from 'lodash.mapkeys';
 import { jsx } from 'react/jsx-runtime';
-import { CheckboxField, CheckboxButton, TextField, Input, ListBoxItem, ListBox, Dialog, OverlayTriggerStateContext, ModalOverlay, Modal, SearchField, Group, RadioGroup as RadioGroup$1, Button, useSlottedContext, PopoverContext, Popover, Autocomplete, RadioField, RadioButton, CheckboxGroup as CheckboxGroup$1, I18nProvider, DatePicker as DatePicker$1, Select, NumberField, TimeField, SelectValue, CalendarCell, Calendar as Calendar$1, CalendarMonthPicker, CalendarYearPicker, CalendarGrid, DatePickerStateContext, DateInput as DateInput$1, DateSegment, TimeFieldStateContext, FileTrigger, DropZone as DropZone$1, Text as Text$1, ProgressBar, ComboBox, DialogTrigger, TextArea as TextArea$1, ComboBoxStateContext } from 'react-aria-components';
+import { CheckboxField, CheckboxButton, TextField, Input, ListBoxItem, ListBox, Dialog, OverlayTriggerStateContext, ModalOverlay, Modal, SearchField, Group, RadioGroup as RadioGroup$1, Button, useSlottedContext, PopoverContext, Popover, Autocomplete, RadioField, RadioButton, CheckboxGroup as CheckboxGroup$1, I18nProvider, DatePicker as DatePicker$1, Select, VisuallyHidden, NumberField, TimeField, SelectValue, CalendarCell, Calendar as Calendar$1, CalendarMonthPicker, CalendarYearPicker, CalendarGrid, DatePickerStateContext, DateInput as DateInput$1, DateSegment, TimeFieldStateContext, FileTrigger, DropZone as DropZone$1, Text as Text$1, ProgressBar, ComboBox, DialogTrigger, TextArea as TextArea$1, ComboBoxStateContext } from 'react-aria-components';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -55714,9 +55714,9 @@ function useFileUploadController({ valueSliderLimit, value, explanationText, tar
     setFormStatus,
     target
   ]);
-  const getExplanationText = useCallback(() => {
+  const getStatusText = useCallback(() => {
     if (!files.length) {
-      return explanationText;
+      return void 0;
     }
     const uploadingCount = files.filter((f) => f.state === "uploading").length;
     if (uploadingCount) {
@@ -55726,14 +55726,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 = 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 = useCallback(async (filesToUpload) => {
     await uploadFiles(filesToUpload, ({ file, uploadedFile }) => {
       setFiles((previousFiles) => previousFiles.map((f) => f.file === file ? {
@@ -55816,6 +55829,7 @@ function useFileUploadController({ valueSliderLimit, value, explanationText, tar
     limitError,
     hover,
     getExplanationText,
+    getStatusText,
     handleChange,
     handleDelete,
     accept,
@@ -55853,7 +55867,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);
@@ -55892,13 +55909,14 @@ var DropZoneTitle = ({ className, children }) => {
 };
 var DropZoneSubtitle = ({ className, children }) => {
   const { limitReached } = useFileUploadContext();
+  const { explanationText } = useFieldPropsV2();
   return /* @__PURE__ */ React172.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();
@@ -55932,7 +55950,9 @@ var DropZoneButton = ({ className, children, "aria-roledescription": roleDescrip
     isDisabled: disabled,
     className,
     onFocus,
-    onBlur: handleBlur
+    onBlur: handleBlur,
+    onHoverStart,
+    onHoverEnd
   }, children));
 };
 var DropZoneButtonText = ({ className }) => {
@@ -56045,13 +56065,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 = useRef(null);
   const fileRemoveButtonRefs = useRef({});
+  const pendingUploadButtonFocus = useRef(false);
   const handleFilesCleared = 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,
@@ -56073,6 +56099,14 @@ var FileUpload = ({ children }) => {
     _handleDelete,
     files
   ]);
+  useEffect(() => {
+    if (pendingUploadButtonFocus.current && buttonRef.current) {
+      pendingUploadButtonFocus.current = false;
+      buttonRef.current.focus();
+    }
+  }, [
+    files
+  ]);
   const multiple = valueSliderLimit > 1;
   const limitReached = files.length >= valueSliderLimit;
   const contextValue = useMemo(() => ({
@@ -56084,6 +56118,7 @@ var FileUpload = ({ children }) => {
     limitReached,
     multiple,
     getExplanationText,
+    getStatusText,
     hover,
     limitError,
     buttonRef,
@@ -56097,6 +56132,7 @@ var FileUpload = ({ children }) => {
     limitReached,
     multiple,
     getExplanationText,
+    getStatusText,
     hover,
     limitError
   ]);
@@ -56108,7 +56144,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.createElement(FileUploadContext.Provider, {
     value: contextValue
@@ -56119,13 +56159,19 @@ var FileUpload = ({ children }) => {
     renderDescription: () => /* @__PURE__ */ React172.createElement(React172.Fragment, null, applyInternalProps(errorElement, {
       hasError: Boolean(hasError || limitError),
       errorMessage: limitError ?? errorMessage
-    }), descriptionElement, explanationElement, filesElement)
+    }), /* @__PURE__ */ React172.createElement(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.createElement("p", {