@multiplatform.one/forms 7.46.0 → 7.47.0

package/dist/esm/fields/FileUpload/index.native.js

@@ -3,7 +3,7 @@ import { transitionProps } from "@multiplatform.one/theme";
 import { useTouchSurface } from "@multiplatform.one/theme";
 import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useProps } from "tamagui";
+import { useMedia, useProps } from "tamagui";
 import { Image, isWeb, Text, XStack, YStack, styled } from "tamagui";
 import { Button } from "../../Button/index.native.js";
 import { Field, FieldLayout } from "../../fieldLayout.native.js";
@@ -91,8 +91,9 @@ var UploadTileGridFrame = styled(XStack, {
   flexWrap: "wrap"
 });
 function FileUpload(props) {
-  var _ref;
+  var _ref, _ref1, _ref2;
   var hydrationTouch = useTouchSurface();
+  var media = useMedia();
   var {
     defaultValue,
     form,
@@ -145,6 +146,31 @@ function FileUpload(props) {
   var tilePx = getFieldHeight(knobProps.sizeToken, 2, hydrationTouch);
   var tileRemoveInset = -Math.round(knobProps.nestedControl.px / 4);
   var [selectedFiles, setSelectedFiles] = useState([]);
+  var [replacing, setReplacing] = useState(false);
+  var [existingRemoved, setExistingRemoved] = useState(false);
+  var [pixelated, setPixelated] = useState(false);
+  var replaceRef = useRef(null);
+  var sourceRef = useRef(null);
+  var storedSrcRef = useRef(existing === null || existing === void 0 ? void 0 : existing.src);
+  var previousReplacing = useRef(replacing);
+  useEffect(function () {
+    if (storedSrcRef.current === (existing === null || existing === void 0 ? void 0 : existing.src)) return;
+    storedSrcRef.current = existing === null || existing === void 0 ? void 0 : existing.src;
+    var currentFiles = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+    if ((existing === null || existing === void 0 ? void 0 : existing.src) || !selectedFiles.every(function (file) {
+      return currentFiles.includes(file);
+    })) setSelectedFiles([]);
+    setExistingRemoved(false);
+    setReplacing(false);
+  }, [existing === null || existing === void 0 ? void 0 : existing.src]);
+  useEffect(function () {
+    var _target_current_querySelector, _target_current;
+    if (previousReplacing.current === replacing) return;
+    previousReplacing.current = replacing;
+    if (!isWeb) return;
+    var target = replacing ? sourceRef : replaceRef;
+    (_target_current = target.current) === null || _target_current === void 0 ? void 0 : (_target_current_querySelector = _target_current.querySelector('button, [role="button"]')) === null || _target_current_querySelector === void 0 ? void 0 : _target_current_querySelector.focus();
+  }, [replacing]);
   var [transfers, setTransfers] = useState([]);
   var [isDragOver, setIsDragOver] = useState(false);
   var [validationError, setValidationError] = useState();
@@ -256,13 +282,14 @@ function FileUpload(props) {
           return item.id !== id2;
         });
       });
+      setReplacing(false);
       setSelectedFiles(function (prev) {
         var nextFiles = multipleRef.current ? [...prev, file] : [file];
         syncFieldValue(nextFiles, emitFieldRef.current);
         return nextFiles;
       });
     } catch (err) {
-      if (controller.signal.aborted || _instanceof(err, DOMException) && err.name === "AbortError") {
+      if (controller.signal.aborted || _instanceof(err, Error) && err.name === "AbortError" || typeof DOMException !== "undefined" && _instanceof(err, DOMException) && err.name === "AbortError") {
         setTransfersAndRef(function (prev) {
           return prev.filter(function (item) {
             return item.id !== id2;
@@ -379,6 +406,7 @@ function FileUpload(props) {
           return startTransfer(file);
         });
       } else {
+        setReplacing(false);
         setSelectedFiles(function (prev) {
           var nextFiles = multiple ? [...prev, ...validFiles] : validFiles.slice(0, 1);
           syncFieldValue(nextFiles, onValueChange);
@@ -403,8 +431,11 @@ function FileUpload(props) {
       syncFieldValue(nextFiles, onValueChange);
       return nextFiles;
     });
+    if (fileInputRef.current) fileInputRef.current.value = "";
+    setReplacing(false);
+    if (!multiple) setExistingRemoved(true);
     onFileRemove === null || onFileRemove === void 0 ? void 0 : onFileRemove(fileToRemove);
-  }, [onFileRemove, syncFieldValue]);
+  }, [multiple, onFileRemove, syncFieldValue]);
   var dragDepthRef = useRef(0);
   var handleDragEnter = useCallback(function (e) {
     e.preventDefault();
@@ -524,7 +555,7 @@ function FileUpload(props) {
     return null;
   }, []);
   if (skeleton) {
-    var minHeightPx = getFieldHeight(fieldProps.size || knobProps.sizeToken, 5, hydrationTouch);
+    var minHeightPx = getFieldHeight(fieldProps.size || knobProps.sizeToken, 2, hydrationTouch);
     return /* @__PURE__ */_jsx(FieldLayout, {
       id,
       label: fieldProps.label,
@@ -538,8 +569,12 @@ function FileUpload(props) {
     });
   }
   var canInteract = !disabled && !readOnly;
-  var showExisting = Boolean(existing === null || existing === void 0 ? void 0 : existing.src) && selectedFiles.length === 0 && transfers.length === 0;
-  var existingName = (existing === null || existing === void 0 ? void 0 : existing.name) || fileNameFromSrc((_ref = existing === null || existing === void 0 ? void 0 : existing.src) !== null && _ref !== void 0 ? _ref : "");
+  var showExisting = Boolean(existing === null || existing === void 0 ? void 0 : existing.src) && !existingRemoved && selectedFiles.length === 0;
+  var singleFile = !multiple ? selectedFiles[0] : void 0;
+  var filled = !multiple && (showExisting || Boolean(singleFile));
+  var storedImage = (_ref = existing === null || existing === void 0 ? void 0 : existing.isImage) !== null && _ref !== void 0 ? _ref : /^(data:image\/)|\.(png|jpe?g|gif|webp|svg|avif|bmp)(?:[?#]|$)/i.test((_ref1 = existing === null || existing === void 0 ? void 0 : existing.src) !== null && _ref1 !== void 0 ? _ref1 : "");
+  var singlePreview = showPreview ? singleFile ? getFilePreview(singleFile) : storedImage ? existing === null || existing === void 0 ? void 0 : existing.src : void 0 : void 0;
+  var existingName = (existing === null || existing === void 0 ? void 0 : existing.name) || fileNameFromSrc((_ref2 = existing === null || existing === void 0 ? void 0 : existing.src) !== null && _ref2 !== void 0 ? _ref2 : "");
   var hasRows = selectedFiles.length > 0 || transfers.length > 0 || showExisting;
   var renderRemoveDisc = function renderRemoveDisc2(ariaLabel, onPress) {
     return canInteract ? /* @__PURE__ */_jsx(Button, {
@@ -640,20 +675,20 @@ function FileUpload(props) {
     }, `${file.name}-${file.size}-${file.lastModified}`);
   };
   var renderUploadArea = function renderUploadArea2(errorProp, onValueChange, onBlurHandler) {
-    var _knobProps_borderRadius_borderWidth, _knobProps_borderRadius_borderWidth1, _knobProps_borderRadius_borderWidth2;
+    var _knobProps_borderRadius_borderWidth, _knobProps_borderRadius_borderWidth1, _ref3, _ref12, _ref22, _knobProps_borderRadius_borderWidth2;
     emitFieldRef.current = onValueChange;
     var requestFiles = isWeb ? openFileDialog : function () {
       void openNativePicker(onValueChange, onBlurHandler);
     };
     var zoneInteractionProps = canInteract ? isWeb ? {
       // DROPZONE-FULL-TARGET: the entire surface is the click target.
-      role: "button",
-      tabIndex: 0,
+      role: filled ? "group" : "button",
+      tabIndex: filled ? void 0 : 0,
       onFocus: handleZoneFocus,
       onBlur: handleZoneBlur,
       cursor: "pointer",
-      onClick: handleZoneClick,
-      onKeyDown: handleZoneKeyDown,
+      onClick: filled ? void 0 : handleZoneClick,
+      onKeyDown: filled ? void 0 : handleZoneKeyDown,
       ...(dragDrop ? {
         onDragEnter: handleDragEnter,
         onDragOver: handleDragOver,
@@ -663,7 +698,7 @@ function FileUpload(props) {
           onBlurHandler === null || onBlurHandler === void 0 ? void 0 : onBlurHandler();
         }
       } : null)
-    } : {
+    } : filled ? {} : {
       role: "button",
       onPress: requestFiles
     } : {
@@ -708,10 +743,6 @@ function FileUpload(props) {
       } : void 0),
       elevation: knobProps.elevation,
       ...transitionProps(knobProps.motion.control),
-      // CONTRACT (boards media-01..03): the getFieldHeight floor sits on
-      // the FRAME, so the frame border-box measures 220 — hanging it on
-      // the inner stack painted 222, a number no token expresses.
-      minHeight: getFieldHeight(fieldProps.size || knobProps.sizeToken, 5, hydrationTouch),
       "aria-required": fieldProps.required || void 0,
       "aria-invalid": !!errorProp || void 0,
       "aria-readonly": readOnly || void 0,
@@ -736,7 +767,7 @@ function FileUpload(props) {
         backgroundColor: formInputColors.background.focus
       } : void 0,
       ...zoneInteractionProps,
-      ...(canInteract ?
+      ...(canInteract && !filled ?
       // Labeled fields get aria-labelledby auto-wired by the FieldLayout
       // Label (tamagui Label htmlFor → this id); the aria-label fallback
       // covers label-less usage, and is what a screen reader announces
@@ -777,33 +808,117 @@ function FileUpload(props) {
         })]
       }) : null, /* @__PURE__ */_jsxs(YStack, {
         ...knobProps.panelPadding,
-        flexGrow: 1,
         width: "100%",
         alignItems: "center",
         justifyContent: "center",
         ...knobProps.gap,
-        children: [/* @__PURE__ */_jsxs(XStack, {
+        children: [filled ? /* @__PURE__ */_jsxs(YStack, {
+          "data-file-upload": "preview",
+          width: "100%",
           alignItems: "center",
-          justifyContent: "center",
-          flexWrap: "wrap",
-          maxWidth: "100%",
+          ...knobProps.gap,
+          children: [/* @__PURE__ */_jsx(YStack, {
+            "data-file-upload": showExisting ? "existing" : "selected",
+            alignItems: "center",
+            width: "100%",
+            children: singlePreview ? /* @__PURE__ */_jsx(Image, {
+              src: singlePreview,
+              alt: (_ref3 = singleFile === null || singleFile === void 0 ? void 0 : singleFile.name) !== null && _ref3 !== void 0 ? _ref3 : existingName,
+              width: "$14",
+              height: "$14",
+              maxWidth: "100%",
+              objectFit: "contain",
+              onLoad: function onLoad(event) {
+                if (!isWeb) return;
+                var image = event.currentTarget;
+                setPixelated(image.naturalWidth > 0 && image.naturalWidth < image.width);
+              },
+              ...(isWeb && pixelated ? {
+                style: {
+                  imageRendering: "pixelated"
+                }
+              } : {})
+            }) : /* @__PURE__ */_jsxs(YStack, {
+              alignItems: "center",
+              ...knobProps.gap,
+              children: [/* @__PURE__ */_jsx(FileIcon, {
+                size: rowGlyphSize
+              }), /* @__PURE__ */_jsx(Text, {
+                ...knobProps.body,
+                textAlign: "center",
+                numberOfLines: 2,
+                children: (_ref12 = singleFile === null || singleFile === void 0 ? void 0 : singleFile.name) !== null && _ref12 !== void 0 ? _ref12 : existingName
+              })]
+            })
+          }), canInteract ? /* @__PURE__ */_jsxs(XStack, {
+            ref: replaceRef,
+            ...knobProps.gap,
+            justifyContent: "center",
+            flexWrap: "wrap",
+            children: [/* @__PURE__ */_jsx(Button, {
+              size: knobProps.sizeToken,
+              "aria-label": replacing ? t("Cancel replacement") : t("Replace"),
+              "aria-expanded": replacing,
+              onPress: function onPress(event) {
+                event.stopPropagation();
+                if (replacing) {
+                  var _replaceRef_current_querySelector, _replaceRef_current;
+                  transfersRef.current.forEach(function (item) {
+                    return item.controller.abort();
+                  });
+                  setTransfersAndRef(function () {
+                    return [];
+                  });
+                  if (fileInputRef.current) fileInputRef.current.value = "";
+                  if (isWeb) (_replaceRef_current = replaceRef.current) === null || _replaceRef_current === void 0 ? void 0 : (_replaceRef_current_querySelector = _replaceRef_current.querySelector('button, [role="button"]')) === null || _replaceRef_current_querySelector === void 0 ? void 0 : _replaceRef_current_querySelector.focus();
+                }
+                setReplacing(!replacing);
+              },
+              children: replacing ? t("Cancel") : t("Replace")
+            }), singleFile || onExistingRemove ? /* @__PURE__ */_jsx(Button, {
+              size: knobProps.sizeToken,
+              outlined: true,
+              "aria-label": t("Remove {{name}}", {
+                name: (_ref22 = singleFile === null || singleFile === void 0 ? void 0 : singleFile.name) !== null && _ref22 !== void 0 ? _ref22 : existingName
+              }),
+              onPress: function onPress(event) {
+                event.stopPropagation();
+                transfersRef.current.forEach(function (item) {
+                  return item.controller.abort();
+                });
+                setTransfersAndRef(function () {
+                  return [];
+                });
+                if (singleFile) handleFileRemove(singleFile, onValueChange);else onExistingRemove === null || onExistingRemove === void 0 ? void 0 : onExistingRemove();
+                setReplacing(false);
+              },
+              children: t("Remove")
+            }) : null]
+          }) : null]
+        }) : null, !filled || replacing ? /* @__PURE__ */_jsxs(XStack, {
+          ref: sourceRef,
+          "data-file-upload": "sources",
+          width: "100%",
+          flexDirection: media.xs ? "column" : "row",
+          alignItems: "stretch",
           ...knobProps.gap,
           children: [/* @__PURE__ */_jsx(Button, {
-            onPress: requestFiles,
+            alignSelf: "stretch",
+            flex: media.xs ? void 0 : 1,
+            onPress: function onPress(event) {
+              event.stopPropagation();
+              requestFiles();
+            },
             disabled: !canInteract,
             size: knobProps.sizeToken,
-            tabIndex: -1,
-            // BENTO-DERIVED (bento-pickers-measured.md §2/§4): NO standalone
-            // glyph exists — the upload mark rides INSIDE the CTA. Held at
-            // the house 44 control with the recipe's 16px icon (Bento draws
-            // 14 on its own 36/$3 button — ruled exception).
+            tabIndex: replacing ? 0 : -1,
             icon: UploadIcon,
             children: /* @__PURE__ */_jsx(Button.Text, {
               ...knobProps.body,
               children: buttonText
             })
           }), actions]
-        }), selectedFiles.length === 0 && transfers.length === 0 && !showExisting && /* @__PURE__ */_jsx(Text, {
+        }) : null, !hasRows && /* @__PURE__ */_jsx(Text, {
           color: formCommonColors.muted,
           textAlign: "center",
           ...knobProps.body,
@@ -823,11 +938,11 @@ function FileUpload(props) {
           },
           disabled: !canInteract
         }) : null]
-      }), hasRows && /* @__PURE__ */_jsxs(UploadFileListFrame, {
+      }), (multiple && hasRows || transfers.length > 0) && /* @__PURE__ */_jsxs(UploadFileListFrame, {
         "data-file-upload": "files",
         // The hairline tracks the frame edge's knob width — one dash voice.
         borderTopWidth: (_knobProps_borderRadius_borderWidth2 = knobProps.borderRadius.borderWidth) !== null && _knobProps_borderRadius_borderWidth2 !== void 0 ? _knobProps_borderRadius_borderWidth2 : 1,
-        children: [showExisting && existing ? /* @__PURE__ */_jsx(UploadTileGridFrame, {
+        children: [multiple && showExisting && existing ? /* @__PURE__ */_jsx(UploadTileGridFrame, {
           "data-file-upload": "tiles",
           ...knobProps.gap,
           ...knobProps.panelPadding,
@@ -854,7 +969,7 @@ function FileUpload(props) {
               }), onExistingRemove)
             }) : null]
           })
-        }) : null, imageTiles.length > 0 ? /* @__PURE__ */_jsx(UploadTileGridFrame, {
+        }) : null, multiple && imageTiles.length > 0 ? /* @__PURE__ */_jsx(UploadTileGridFrame, {
           "data-file-upload": "tiles",
           ...knobProps.gap,
           ...knobProps.panelPadding,
@@ -865,7 +980,7 @@ function FileUpload(props) {
             } = param;
             return renderImageTile(file, preview, onValueChange);
           })
-        }) : null, fileRows.map(function (param) {
+        }) : null, (multiple ? fileRows : []).map(function (param) {
           var {
             file,
             preview,
@@ -971,7 +1086,7 @@ function FileUpload(props) {
       // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
       // the sibling label/helper readable) — it needs the disabled state.
       disabled,
-      children: renderUploadArea(standaloneError, emitChange)
+      children: renderUploadArea(standaloneError, emitChange, fieldProps.onBlur)
     });
   }
   return /* @__PURE__ */_jsx(Field, {