@multiplatform.one/forms 7.45.1 → 7.47.0

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

@@ -34,9 +34,9 @@ var import_react = require("@phosphor-icons/react");
 var import_react2 = require("react");
 var import_tamagui = require("tamagui");
 var import_tamagui2 = require("tamagui");
-var import_Button = require("../../Button/index.native.js");
+var import_Button = require("../../Button");
 var import_fieldLayout = require("../../fieldLayout.native.js");
-var import_Skeleton = require("../../Skeleton/index.native.js");
+var import_Skeleton = require("../../Skeleton");
 var import_utils = require("../../shared/utils.native.js");
 var import_theme3 = require("@multiplatform.one/theme");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
@@ -120,8 +120,9 @@ var UploadTileGridFrame = (0, import_tamagui2.styled)(import_tamagui2.XStack, {
   flexWrap: "wrap"
 });
 function FileUpload(props) {
-  var _ref;
+  var _ref, _ref1, _ref2;
   var hydrationTouch = (0, import_theme2.useTouchSurface)();
+  var media = (0, import_tamagui.useMedia)();
   var {
     defaultValue,
     form,
@@ -174,6 +175,31 @@ function FileUpload(props) {
   var tilePx = (0, import_utils.getFieldHeight)(knobProps.sizeToken, 2, hydrationTouch);
   var tileRemoveInset = -Math.round(knobProps.nestedControl.px / 4);
   var [selectedFiles, setSelectedFiles] = (0, import_react2.useState)([]);
+  var [replacing, setReplacing] = (0, import_react2.useState)(false);
+  var [existingRemoved, setExistingRemoved] = (0, import_react2.useState)(false);
+  var [pixelated, setPixelated] = (0, import_react2.useState)(false);
+  var replaceRef = (0, import_react2.useRef)(null);
+  var sourceRef = (0, import_react2.useRef)(null);
+  var storedSrcRef = (0, import_react2.useRef)(existing === null || existing === void 0 ? void 0 : existing.src);
+  var previousReplacing = (0, import_react2.useRef)(replacing);
+  (0, import_react2.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]);
+  (0, import_react2.useEffect)(function () {
+    var _target_current_querySelector, _target_current;
+    if (previousReplacing.current === replacing) return;
+    previousReplacing.current = replacing;
+    if (!import_tamagui2.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] = (0, import_react2.useState)([]);
   var [isDragOver, setIsDragOver] = (0, import_react2.useState)(false);
   var [validationError, setValidationError] = (0, import_react2.useState)();
@@ -285,13 +311,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;
@@ -408,6 +435,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);
@@ -432,8 +460,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 = (0, import_react2.useRef)(0);
   var handleDragEnter = (0, import_react2.useCallback)(function (e) {
     e.preventDefault();
@@ -553,7 +584,7 @@ function FileUpload(props) {
     return null;
   }, []);
   if (skeleton) {
-    var minHeightPx = (0, import_utils.getFieldHeight)(fieldProps.size || knobProps.sizeToken, 5, hydrationTouch);
+    var minHeightPx = (0, import_utils.getFieldHeight)(fieldProps.size || knobProps.sizeToken, 2, hydrationTouch);
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
       label: fieldProps.label,
@@ -567,8 +598,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__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
@@ -669,20 +704,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 = import_tamagui2.isWeb ? openFileDialog : function () {
       void openNativePicker(onValueChange, onBlurHandler);
     };
     var zoneInteractionProps = canInteract ? import_tamagui2.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,
@@ -692,7 +727,7 @@ function FileUpload(props) {
           onBlurHandler === null || onBlurHandler === void 0 ? void 0 : onBlurHandler();
         }
       } : null)
-    } : {
+    } : filled ? {} : {
       role: "button",
       onPress: requestFiles
     } : {
@@ -737,10 +772,6 @@ function FileUpload(props) {
       } : void 0),
       elevation: knobProps.elevation,
       ...(0, import_theme.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: (0, import_utils.getFieldHeight)(fieldProps.size || knobProps.sizeToken, 5, hydrationTouch),
       "aria-required": fieldProps.required || void 0,
       "aria-invalid": !!errorProp || void 0,
       "aria-readonly": readOnly || void 0,
@@ -765,7 +796,7 @@ function FileUpload(props) {
         backgroundColor: import_colorRamps.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
@@ -806,33 +837,117 @@ function FileUpload(props) {
         })]
       }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
         ...knobProps.panelPadding,
-        flexGrow: 1,
         width: "100%",
         alignItems: "center",
         justifyContent: "center",
         ...knobProps.gap,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+        children: [filled ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+          "data-file-upload": "preview",
+          width: "100%",
           alignItems: "center",
-          justifyContent: "center",
-          flexWrap: "wrap",
-          maxWidth: "100%",
+          ...knobProps.gap,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.YStack, {
+            "data-file-upload": showExisting ? "existing" : "selected",
+            alignItems: "center",
+            width: "100%",
+            children: singlePreview ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.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 (!import_tamagui2.isWeb) return;
+                var image = event.currentTarget;
+                setPixelated(image.naturalWidth > 0 && image.naturalWidth < image.width);
+              },
+              ...(import_tamagui2.isWeb && pixelated ? {
+                style: {
+                  imageRendering: "pixelated"
+                }
+              } : {})
+            }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+              alignItems: "center",
+              ...knobProps.gap,
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileIcon, {
+                size: rowGlyphSize
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.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__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+            ref: replaceRef,
+            ...knobProps.gap,
+            justifyContent: "center",
+            flexWrap: "wrap",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+              size: knobProps.sizeToken,
+              "aria-label": replacing ? (0, import_t.t)("Cancel replacement") : (0, import_t.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 (import_tamagui2.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 ? (0, import_t.t)("Cancel") : (0, import_t.t)("Replace")
+            }), singleFile || onExistingRemove ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+              size: knobProps.sizeToken,
+              outlined: true,
+              "aria-label": (0, import_t.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: (0, import_t.t)("Remove")
+            }) : null]
+          }) : null]
+        }) : null, !filled || replacing ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+          ref: sourceRef,
+          "data-file-upload": "sources",
+          width: "100%",
+          flexDirection: media.xs ? "column" : "row",
+          alignItems: "stretch",
           ...knobProps.gap,
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.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: import_react.UploadIcon,
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
               ...knobProps.body,
               children: buttonText
             })
           }), actions]
-        }), selectedFiles.length === 0 && transfers.length === 0 && !showExisting && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+        }) : null, !hasRows && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
           color: import_colorRamps.formCommonColors.muted,
           textAlign: "center",
           ...knobProps.body,
@@ -852,11 +967,11 @@ function FileUpload(props) {
           },
           disabled: !canInteract
         }) : null]
-      }), hasRows && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(UploadFileListFrame, {
+      }), (multiple && hasRows || transfers.length > 0) && /* @__PURE__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.jsx)(UploadTileGridFrame, {
+        children: [multiple && showExisting && existing ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(UploadTileGridFrame, {
           "data-file-upload": "tiles",
           ...knobProps.gap,
           ...knobProps.panelPadding,
@@ -883,7 +998,7 @@ function FileUpload(props) {
               }), onExistingRemove)
             }) : null]
           })
-        }) : null, imageTiles.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(UploadTileGridFrame, {
+        }) : null, multiple && imageTiles.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(UploadTileGridFrame, {
           "data-file-upload": "tiles",
           ...knobProps.gap,
           ...knobProps.panelPadding,
@@ -894,7 +1009,7 @@ function FileUpload(props) {
             } = param;
             return renderImageTile(file, preview, onValueChange);
           })
-        }) : null, fileRows.map(function (param) {
+        }) : null, (multiple ? fileRows : []).map(function (param) {
           var {
             file,
             preview,
@@ -1000,7 +1115,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__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {