@wix/form-public 0.521.0 → 0.522.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, Dialog, OverlayTriggerStateContext, ModalOverlay, Modal, SearchField, Group, RadioGroup as RadioGroup$1, Button, useSlottedContext, PopoverContext, Popover, CollectionRendererContext, DefaultCollectionRenderer, ListBox, 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';
+import { CheckboxField, CheckboxButton, TextField, Input, ListBoxItem, Dialog, OverlayTriggerStateContext, ModalOverlay, Modal, SearchField, Group, RadioGroup as RadioGroup$1, Button, DropZone as DropZone$1, FileTrigger, useSlottedContext, PopoverContext, Popover, CollectionRendererContext, DefaultCollectionRenderer, ListBox, 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, Text as Text$1, ProgressBar, ComboBox, DialogTrigger, TextArea as TextArea$1, ComboBoxStateContext } from 'react-aria-components';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -61265,6 +61265,18 @@ var SignaturePad = class _SignaturePad extends SignatureEventTarget {
   }
 };
 var useId2 = typeof React173.useId === "function" ? React173.useId : () => useRef(generateUUID()).current;
+var hasUploadTab = ({ properties }) => properties.uploadEnabled === true;
+var isForceableSignature = (field, mode) => field.fieldType === FIELD_TYPES.SIGNATURE && !field.properties.hidden && !field.properties.disabled && !field.properties.readOnly && (mode !== "upload" || hasUploadTab(field));
+var byLayoutPosition2 = (first2, second) => first2.layout.row - second.layout.row || first2.layout.column - second.layout.column;
+var useForcedSignatureMode = (fieldId) => {
+  const forcedMode = useElementProps().signatureContainer?.signatureMode;
+  const formView = useContext(FormViewContext);
+  const firstSignatureId = useMemo(() => formView && !formView.parentId && forcedMode ? formView.fields.filter((field) => isForceableSignature(field, forcedMode)).sort(byLayoutPosition2)[0]?.id : void 0, [
+    formView,
+    forcedMode
+  ]);
+  return firstSignatureId === fieldId ? forcedMode : void 0;
+};
 
 // ../form-fields/dist/esm/ui/signature-field/signature-types.js
 var SignatureFormat = /* @__PURE__ */ (function(SignatureFormat2) {
@@ -61795,8 +61807,14 @@ var Signature = ({ children }) => {
     renderDescription: () => /* @__PURE__ */ React173.createElement(React173.Fragment, null, errorElement, descriptionElement)
   });
 };
-var Input14 = ({ children }) => {
-  const { value, onChange, target, readOnly } = useFieldPropsV2();
+var VIEW_BY_FORCED_MODE = {
+  [SignatureMode.DRAW]: SignatureView.DRAW,
+  [SignatureMode.TYPE]: SignatureView.TYPE,
+  [SignatureMode.UPLOAD]: SignatureView.UPLOAD
+};
+var Input14 = ({ children, className }) => {
+  const { id: id6, value, onChange, target, readOnly } = useFieldPropsV2();
+  const forcedMode = useForcedSignatureMode(id6);
   const { signatureMode, setSignatureMode, handleClear, clearable, signatureView, signatureValueForView, handleChange, handleBeforeChange } = useSignatureField({
     target,
     value,
@@ -61805,16 +61823,19 @@ var Input14 = ({ children }) => {
   const headerElement = findChildOfType(children, Input14.Header);
   const valueElement = findChildOfType(children, Input14.Value);
   const internalProps = {
-    signatureMode,
+    signatureMode: forcedMode ?? signatureMode,
     setSignatureMode,
     handleClear,
     clearable,
-    signatureView,
-    signatureValueForView,
+    signatureView: forcedMode ? VIEW_BY_FORCED_MODE[forcedMode] : signatureView,
+    signatureValueForView: forcedMode ? void 0 : signatureValueForView,
     handleChange,
     handleBeforeChange
   };
-  return /* @__PURE__ */ React173.createElement(React173.Fragment, null, !readOnly && applyInternalProps(headerElement, internalProps), applyInternalProps(valueElement, internalProps));
+  return /* @__PURE__ */ React173.createElement("div", {
+    className,
+    "data-hook": "signature-container"
+  }, !readOnly && applyInternalProps(headerElement, internalProps), applyInternalProps(valueElement, internalProps));
 };
 var Header = ({ children, className, ...internal }) => {
   const { signatureMode, setSignatureMode, clearable, handleClear } = internal;
@@ -62117,51 +62138,67 @@ var TypeValue = ({ className, placeholder, ...internal }) => {
     className
   });
 };
-var HIDDEN_FILE_INPUT_STYLE = {
-  display: "none"
-};
-var Upload = ({ children, className, imageAlt, ...internal }) => {
+var Upload = ({ children, className, ...internal }) => {
   const { value, onChange, disabled, readOnly, onBlur, onFocus } = internal;
-  const { inputId } = useFieldAttributes();
-  const surfaceProps = useSurfaceProps();
+  const { labelId, ariaDescribedBy } = useFieldAttributes();
   const buttonElement = findChildOfType(children, Upload.Button);
-  const fileInputRef = useRef(null);
-  const handleFileChange = useCallback((event) => {
-    const files = event.target.files;
-    if (!files || files.length === 0) {
+  const previewElement = findChildOfType(children, Upload.Preview);
+  const handleFiles = useCallback((files) => {
+    const file = files[0];
+    if (!file) {
       onChange(null);
       return;
     }
-    const file = files[0];
     const fileReader = new FileReader();
-    fileReader.onload = function() {
-      onChange(dataUrlToWixFile(this.result, file.name));
+    fileReader.onload = () => {
+      onChange(dataUrlToWixFile(fileReader.result, file.name));
     };
     fileReader.readAsDataURL(file);
   }, [
     onChange
   ]);
   const hasUploadedImage = value && isExternalImage(value);
-  return /* @__PURE__ */ React173.createElement("div", {
+  if (hasUploadedImage) {
+    return applyInternalProps(previewElement, {
+      value
+    }) ?? null;
+  }
+  return /* @__PURE__ */ React173.createElement(DropZone$1, {
     className,
-    "data-has-value": hasUploadedImage || void 0,
-    ...surfaceProps
-  }, /* @__PURE__ */ React173.createElement("input", {
-    ref: fileInputRef,
-    type: "file",
-    accept: "image/*",
-    onChange: handleFileChange,
-    disabled: disabled || readOnly,
-    style: HIDDEN_FILE_INPUT_STYLE,
-    "aria-hidden": "true",
-    tabIndex: -1
-  }), !hasUploadedImage && applyInternalProps(buttonElement, {
-    fileInputRef,
+    isDisabled: disabled || readOnly,
+    "aria-labelledby": labelId,
+    "aria-describedby": ariaDescribedBy,
+    "data-hook": "signature-upload-drop-zone",
+    onDrop: async (event) => {
+      for (const item of event.items) {
+        if (item.kind === "file" && item.type.startsWith("image/")) {
+          const file = await item.getFile();
+          if (file) {
+            handleFiles([
+              file
+            ]);
+            return;
+          }
+        }
+      }
+    }
+  }, applyInternalProps(buttonElement, {
+    onSelectFiles: handleFiles,
     disabled,
     readOnly,
     onBlur,
     onFocus
-  }), hasUploadedImage && (value.url ? /* @__PURE__ */ React173.createElement("img", {
+  }));
+};
+var UploadPreview = ({ className, imageAlt, ...internal }) => {
+  const { value } = internal;
+  const { inputId } = useFieldAttributes();
+  const surfaceProps = useSurfaceProps();
+  return /* @__PURE__ */ React173.createElement("div", {
+    className,
+    "data-has-value": true,
+    ...surfaceProps
+  }, value.url ? /* @__PURE__ */ React173.createElement("img", {
     id: inputId,
     src: value.url,
     alt: value.displayName || imageAlt,
@@ -62169,30 +62206,44 @@ var Upload = ({ children, className, imageAlt, ...internal }) => {
   }) : /* @__PURE__ */ React173.createElement("span", {
     id: inputId,
     "data-hook": "signature-image"
-  }, value.displayName || imageAlt)));
+  }, value.displayName || imageAlt));
 };
-var UploadButton = ({ children, className, ...internal }) => {
-  const { fileInputRef, disabled, readOnly, onBlur, onFocus } = internal;
+var UploadButton = ({ children, className, onHoverStart, onHoverEnd, ...internal }) => {
+  const { onSelectFiles, disabled, readOnly, onBlur, onFocus } = internal;
   const { inputId, ariaDescribedBy, labelId } = useFieldAttributes();
   const textId = useId2();
-  const handlePress = useCallback(() => {
-    fileInputRef.current?.click();
-  }, [
-    fileInputRef
-  ]);
-  return /* @__PURE__ */ React173.createElement(Button, {
+  const hasTextElement = Boolean(findChildOfType(children, UploadButton.Text));
+  const content = hasTextElement ? Children.map(children, (child) => /* @__PURE__ */ isValidElement(child) && child.type === UploadButton.Text ? applyInternalProps(child, {
+    textId
+  }) : child) : /* @__PURE__ */ React173.createElement("span", {
+    id: textId
+  }, children);
+  return /* @__PURE__ */ React173.createElement(FileTrigger, {
+    acceptedFileTypes: [
+      "image/*"
+    ],
+    onSelect: (fileList) => {
+      onSelectFiles(fileList ? Array.from(fileList) : []);
+    }
+  }, /* @__PURE__ */ React173.createElement(Button, {
     id: inputId,
-    onPress: handlePress,
     onBlur,
     onFocus,
     isDisabled: disabled || readOnly,
     "aria-labelledby": `${labelId} ${textId}`,
     "aria-describedby": ariaDescribedBy,
     "data-hook": "signature-upload",
+    className,
+    onHoverStart,
+    onHoverEnd
+  }, content));
+};
+var UploadButtonText = ({ children, className, ...internal }) => {
+  const { textId } = internal;
+  return /* @__PURE__ */ React173.createElement("span", {
+    id: textId,
     className
-  }, /* @__PURE__ */ React173.createElement("span", {
-    id: textId
-  }, children));
+  }, children);
 };
 Signature.Label = Label;
 Signature.Input = Input14;
@@ -62209,7 +62260,9 @@ Value2.Canvas = Canvas;
 Value2.Type = Type4;
 Value2.Upload = Upload;
 Type4.Value = TypeValue;
+Upload.Preview = UploadPreview;
 Upload.Button = UploadButton;
+UploadButton.Text = UploadButtonText;
 function ProgressCircle(props2) {
   const strokeWidth = 4;
   const radius = `calc(50% - ${strokeWidth / 2}px)`;