@multiplatform.one/forms 7.66.0 → 7.68.0

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

@@ -32,6 +32,7 @@ var import_react2 = require("react");
 var import_tamagui = require("tamagui");
 var import_tamagui2 = require("tamagui");
 var import_Button = require("../../Button/index.cjs");
+var import_standardActions = require("../../standardActions.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_utils = require("../../shared/utils.cjs");
@@ -530,24 +531,63 @@ function FileUpload(props) {
   const singlePreview = showPreview ? singleFile ? getFilePreview(singleFile) : storedImage ? existing?.src : void 0 : void 0;
   const existingName = existing?.name || fileNameFromSrc(existing?.src ?? "");
   const hasRows = selectedFiles.length > 0 || transfers.length > 0 || showExisting;
-  const renderRemoveDisc = (ariaLabel, onPress) => canInteract ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+  const renderRemoveDisc = (ariaLabel, onPress, overMedia = false) => canInteract ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
     nested: true,
-    circular: true,
+    ...(overMedia ? {
+      plate: "media"
+    } : void 0),
     icon: import_react.XIcon,
     "aria-label": ariaLabel,
-    backgroundColor: import_colorRamps.formDropzoneColors.removeDisc.background.base,
-    color: import_colorRamps.formDropzoneColors.removeDisc.ink,
-    hoverStyle: {
-      backgroundColor: import_colorRamps.formDropzoneColors.removeDisc.background.hover
-    },
-    pressStyle: {
-      backgroundColor: import_colorRamps.formDropzoneColors.removeDisc.background.press
-    },
     onPress: e => {
       e.stopPropagation();
       onPress();
     }
   }) : null;
+  const previewActions = (overMedia, onValueChange) => {
+    const plate = overMedia ? {
+      plate: "media"
+    } : void 0;
+    const stop = event => event.stopPropagation();
+    if (replacing) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.IconButton, {
+      ...plate,
+      icon: import_standardActions.standardActions.cancel.icon,
+      "aria-label": (0, import_t.t)("Cancel replacement"),
+      "aria-expanded": true,
+      onPress: event => {
+        stop(event);
+        transfersRef.current.forEach(item => item.controller.abort());
+        setTransfersAndRef(() => []);
+        if (fileInputRef.current) fileInputRef.current.value = "";
+        if (import_tamagui2.isWeb) replaceRef.current?.querySelector('button, [role="button"]')?.focus();
+        setReplacing(false);
+      }
+    });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.IconButton, {
+        ...plate,
+        icon: import_standardActions.standardActions.replace.icon,
+        "aria-label": (0, import_t.t)("Replace"),
+        "aria-expanded": false,
+        onPress: event => {
+          stop(event);
+          setReplacing(true);
+        }
+      }), singleFile || onExistingRemove ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.IconButton, {
+        ...plate,
+        icon: import_standardActions.standardActions.remove.icon,
+        "aria-label": (0, import_t.t)("Remove {{name}}", {
+          name: singleFile?.name ?? existingName
+        }),
+        onPress: event => {
+          stop(event);
+          transfersRef.current.forEach(item => item.controller.abort());
+          setTransfersAndRef(() => []);
+          if (singleFile) handleFileRemove(singleFile, onValueChange);else onExistingRemove?.();
+          setReplacing(false);
+        }
+      }) : null]
+    });
+  };
   const renderFileMeta = (file, preview, extra) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
     flex: 1,
     gap: "$2",
@@ -603,7 +643,7 @@ function FileUpload(props) {
       zIndex: 1,
       children: renderRemoveDisc((0, import_t.t)("Remove {{name}}", {
         name: file.name
-      }), () => handleFileRemove(file, onValueChange))
+      }), () => handleFileRemove(file, onValueChange), true)
     }) : null]
   }, `${file.name}-${file.size}-${file.lastModified}`);
   const renderUploadArea = (errorProp, onValueChange, onBlurHandler) => {
@@ -726,23 +766,36 @@ function FileUpload(props) {
             "data-file-upload": showExisting ? "existing" : "selected",
             alignItems: "center",
             width: "100%",
-            children: singlePreview ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Image, {
-              src: singlePreview,
-              alt: singleFile?.name ?? existingName,
-              width: "$14",
-              height: "$14",
+            children: singlePreview ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+              position: "relative",
               maxWidth: "100%",
-              objectFit: "contain",
-              onLoad: event => {
-                if (!import_tamagui2.isWeb) return;
-                const image = event.currentTarget;
-                setPixelated(image.naturalWidth > 0 && image.naturalWidth < image.width);
-              },
-              ...(import_tamagui2.isWeb && pixelated ? {
-                style: {
-                  imageRendering: "pixelated"
-                }
-              } : {})
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Image, {
+                src: singlePreview,
+                alt: singleFile?.name ?? existingName,
+                width: "$14",
+                height: "$14",
+                maxWidth: "100%",
+                objectFit: "contain",
+                onLoad: event => {
+                  if (!import_tamagui2.isWeb) return;
+                  const image = event.currentTarget;
+                  setPixelated(image.naturalWidth > 0 && image.naturalWidth < image.width);
+                },
+                ...(import_tamagui2.isWeb && pixelated ? {
+                  style: {
+                    imageRendering: "pixelated"
+                  }
+                } : {})
+              }), canInteract ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
+                ref: replaceRef,
+                "data-file-upload": "preview-actions",
+                position: "absolute",
+                top: -tileRemoveInset,
+                right: -tileRemoveInset,
+                zIndex: 1,
+                ...knobProps.gap,
+                children: previewActions(true, onValueChange)
+              }) : null]
             }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
               alignItems: "center",
               ...knobProps.gap,
@@ -755,41 +808,11 @@ function FileUpload(props) {
                 children: singleFile?.name ?? existingName
               })]
             })
-          }), canInteract ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+          }), canInteract && !singlePreview ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(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: event => {
-                event.stopPropagation();
-                if (replacing) {
-                  transfersRef.current.forEach(item => item.controller.abort());
-                  setTransfersAndRef(() => []);
-                  if (fileInputRef.current) fileInputRef.current.value = "";
-                  if (import_tamagui2.isWeb) replaceRef.current?.querySelector('button, [role="button"]')?.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: singleFile?.name ?? existingName
-              }),
-              onPress: event => {
-                event.stopPropagation();
-                transfersRef.current.forEach(item => item.controller.abort());
-                setTransfersAndRef(() => []);
-                if (singleFile) handleFileRemove(singleFile, onValueChange);else onExistingRemove?.();
-                setReplacing(false);
-              },
-              children: (0, import_t.t)("Remove")
-            }) : null]
+            children: previewActions(false, onValueChange)
           }) : null]
         }) : null, !filled || replacing ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
           ref: sourceRef,
@@ -861,7 +884,7 @@ function FileUpload(props) {
               zIndex: 1,
               children: renderRemoveDisc((0, import_t.t)("Remove {{name}}", {
                 name: existingName
-              }), onExistingRemove)
+              }), onExistingRemove, true)
             }) : null]
           })
         }) : null, multiple && imageTiles.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(UploadTileGridFrame, {

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

@@ -35,6 +35,7 @@ var import_react2 = require("react");
 var import_tamagui = require("tamagui");
 var import_tamagui2 = require("tamagui");
 var import_Button = require("../../Button");
+var import_standardActions = require("../../standardActions.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_Skeleton = require("../../Skeleton");
 var import_utils = require("../../shared/utils.native.js");
@@ -606,29 +607,77 @@ function FileUpload(props) {
   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) {
+    var overMedia = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
     return canInteract ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-      // Bento remove: a filled $color12 disc with the inverse
-      // ✕ — painted at nestedControl (32) with hitSlop
-      // restoring the 44 floor via `nested` (held exception);
-      // the nested icon step lands the board's 14px ✕.
       nested: true,
-      circular: true,
+      ...(overMedia ? {
+        plate: "media"
+      } : void 0),
       icon: import_react.XIcon,
       "aria-label": ariaLabel,
-      backgroundColor: import_colorRamps.formDropzoneColors.removeDisc.background.base,
-      color: import_colorRamps.formDropzoneColors.removeDisc.ink,
-      hoverStyle: {
-        backgroundColor: import_colorRamps.formDropzoneColors.removeDisc.background.hover
-      },
-      pressStyle: {
-        backgroundColor: import_colorRamps.formDropzoneColors.removeDisc.background.press
-      },
       onPress: function onPress1(e) {
         e.stopPropagation();
         onPress();
       }
     }) : null;
   };
+  var previewActions = function previewActions2(overMedia, onValueChange) {
+    var _ref3;
+    var plate = overMedia ? {
+      plate: "media"
+    } : void 0;
+    var stop = function stop2(event) {
+      return event.stopPropagation();
+    };
+    if (replacing) return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.IconButton, {
+      ...plate,
+      icon: import_standardActions.standardActions.cancel.icon,
+      "aria-label": (0, import_t.t)("Cancel replacement"),
+      "aria-expanded": true,
+      onPress: function onPress(event) {
+        var _replaceRef_current_querySelector, _replaceRef_current;
+        stop(event);
+        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(false);
+      }
+    });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.IconButton, {
+        ...plate,
+        icon: import_standardActions.standardActions.replace.icon,
+        "aria-label": (0, import_t.t)("Replace"),
+        "aria-expanded": false,
+        onPress: function onPress(event) {
+          stop(event);
+          setReplacing(true);
+        }
+      }), singleFile || onExistingRemove ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.IconButton, {
+        ...plate,
+        icon: import_standardActions.standardActions.remove.icon,
+        "aria-label": (0, import_t.t)("Remove {{name}}", {
+          name: (_ref3 = singleFile === null || singleFile === void 0 ? void 0 : singleFile.name) !== null && _ref3 !== void 0 ? _ref3 : existingName
+        }),
+        onPress: function onPress(event) {
+          stop(event);
+          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);
+        }
+      }) : null]
+    });
+  };
   var renderFileMeta = function renderFileMeta2(file, preview, extra) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
       flex: 1,
@@ -699,12 +748,12 @@ function FileUpload(props) {
           name: file.name
         }), function () {
           return handleFileRemove(file, onValueChange);
-        })
+        }, true)
       }) : null]
     }, `${file.name}-${file.size}-${file.lastModified}`);
   };
   var renderUploadArea = function renderUploadArea2(errorProp, onValueChange, onBlurHandler) {
-    var _knobProps_borderRadius_borderWidth, _knobProps_borderRadius_borderWidth1, _ref3, _ref12, _ref22, _knobProps_borderRadius_borderWidth2;
+    var _knobProps_borderRadius_borderWidth, _knobProps_borderRadius_borderWidth1, _ref3, _ref12, _knobProps_borderRadius_borderWidth2;
     emitFieldRef.current = onValueChange;
     var requestFiles = import_tamagui2.isWeb ? openFileDialog : function () {
       void openNativePicker(onValueChange, onBlurHandler);
@@ -850,23 +899,36 @@ function FileUpload(props) {
             "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",
+            children: singlePreview ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+              position: "relative",
               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"
-                }
-              } : {})
+              children: [/* @__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"
+                  }
+                } : {})
+              }), canInteract ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
+                ref: replaceRef,
+                "data-file-upload": "preview-actions",
+                position: "absolute",
+                top: -tileRemoveInset,
+                right: -tileRemoveInset,
+                zIndex: 1,
+                ...knobProps.gap,
+                children: previewActions(true, onValueChange)
+              }) : null]
             }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
               alignItems: "center",
               ...knobProps.gap,
@@ -879,50 +941,11 @@ function FileUpload(props) {
                 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, {
+          }), canInteract && !singlePreview ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(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]
+            children: previewActions(false, onValueChange)
           }) : null]
         }) : null, !filled || replacing ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
           ref: sourceRef,
@@ -995,7 +1018,7 @@ function FileUpload(props) {
               zIndex: 1,
               children: renderRemoveDisc((0, import_t.t)("Remove {{name}}", {
                 name: existingName
-              }), onExistingRemove)
+              }), onExistingRemove, true)
             }) : null]
           })
         }) : null, multiple && imageTiles.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(UploadTileGridFrame, {