@multiplatform.one/forms 8.3.0 → 8.4.0

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

@@ -112,6 +112,10 @@ const UploadTileGridFrame = (0, import_tamagui2.styled)(import_tamagui2.XStack,
 function FileUpload(props) {
   const hydrationTouch = (0, import_theme2.useTouchSurface)();
   const media = (0, import_tamagui.useMedia)();
+  const {
+    ref: pickerRef,
+    trigger
+  } = props;
   const {
     defaultValue,
     form,
@@ -139,6 +143,8 @@ function FileUpload(props) {
     existing,
     onExistingRemove,
     id: idProp,
+    ref: _ref,
+    trigger: _trigger,
     ...fieldProps
   } = (0, import_tamagui.useProps)(props);
   const {
@@ -430,6 +436,10 @@ function FileUpload(props) {
     if (disabled || readOnly) return;
     fileInputRef.current?.click();
   }, [disabled, readOnly]);
+  const requestFilesRef = (0, import_react2.useRef)(openFileDialog);
+  (0, import_react2.useImperativeHandle)(pickerRef, () => ({
+    open: () => requestFilesRef.current()
+  }), []);
   const nativePickInFlightRef = (0, import_react2.useRef)(false);
   const openNativePicker = (0, import_react2.useCallback)(async (onValueChange, onBlurHandler) => {
     if (disabled || readOnly || nativePickInFlightRef.current) return;
@@ -649,6 +659,27 @@ function FileUpload(props) {
     const requestFiles = import_tamagui2.isWeb ? openFileDialog : () => {
       void openNativePicker(onValueChange, onBlurHandler);
     };
+    requestFilesRef.current = requestFiles;
+    const hiddenInput = import_tamagui2.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
+      ref: fileInputRef,
+      type: "file",
+      accept,
+      multiple,
+      tabIndex: -1,
+      onChange: e => {
+        handleFileSelect(e.target.files, onValueChange, e.target.files);
+        onBlurHandler?.();
+      },
+      style: {
+        display: "none"
+      },
+      disabled: !canInteract
+    }) : null;
+    if (trigger) return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+      "data-file-upload": "trigger",
+      alignItems: "flex-start",
+      children: [trigger(requestFiles), hiddenInput]
+    });
     const zoneInteractionProps = canInteract ? import_tamagui2.isWeb ? {
       // DROPZONE-FULL-TARGET: the entire surface is the click target.
       role: filled ? "group" : "button",
@@ -848,21 +879,7 @@ function FileUpload(props) {
           textAlign: "center",
           ...knobProps.body,
           children: placeholder
-        }), import_tamagui2.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
-          ref: fileInputRef,
-          type: "file",
-          accept,
-          multiple,
-          tabIndex: -1,
-          onChange: e => {
-            handleFileSelect(e.target.files, onValueChange, e.target.files);
-            onBlurHandler?.();
-          },
-          style: {
-            display: "none"
-          },
-          disabled: !canInteract
-        }) : null]
+        }), hiddenInput]
       }), (multiple && hasRows || transfers.length > 0) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(UploadFileListFrame, {
         "data-file-upload": "files",
         borderTopWidth: knobProps.borderRadius.borderWidth ?? 1,

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

@@ -124,6 +124,10 @@ function FileUpload(props) {
   var _ref, _ref1, _ref2;
   var hydrationTouch = (0, import_theme2.useTouchSurface)();
   var media = (0, import_tamagui.useMedia)();
+  var {
+    ref: pickerRef,
+    trigger
+  } = props;
   var {
     defaultValue,
     form,
@@ -151,6 +155,8 @@ function FileUpload(props) {
     existing,
     onExistingRemove,
     id: idProp,
+    ref: _ref3,
+    trigger: _trigger,
     ...fieldProps
   } = (0, import_tamagui.useProps)(props);
   var {
@@ -498,6 +504,14 @@ function FileUpload(props) {
     if (disabled || readOnly) return;
     (_fileInputRef_current = fileInputRef.current) === null || _fileInputRef_current === void 0 ? void 0 : _fileInputRef_current.click();
   }, [disabled, readOnly]);
+  var requestFilesRef = (0, import_react2.useRef)(openFileDialog);
+  (0, import_react2.useImperativeHandle)(pickerRef, function () {
+    return {
+      open: function open() {
+        return requestFilesRef.current();
+      }
+    };
+  }, []);
   var nativePickInFlightRef = (0, import_react2.useRef)(false);
   var openNativePicker = (0, import_react2.useCallback)(async function (onValueChange, onBlurHandler) {
     if (disabled || readOnly || nativePickInFlightRef.current) return;
@@ -620,7 +634,7 @@ function FileUpload(props) {
     }) : null;
   };
   var previewActions = function previewActions2(overMedia, onValueChange) {
-    var _ref3;
+    var _ref4;
     var plate = overMedia ? {
       plate: "media"
     } : void 0;
@@ -660,7 +674,7 @@ function FileUpload(props) {
         ...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
+          name: (_ref4 = singleFile === null || singleFile === void 0 ? void 0 : singleFile.name) !== null && _ref4 !== void 0 ? _ref4 : existingName
         }),
         onPress: function onPress(event) {
           stop(event);
@@ -751,11 +765,32 @@ function FileUpload(props) {
     }, `${file.name}-${file.size}-${file.lastModified}`);
   };
   var renderUploadArea = function renderUploadArea2(errorProp, onValueChange, onBlurHandler) {
-    var _knobProps_borderRadius_borderWidth, _knobProps_borderRadius_borderWidth1, _ref3, _ref12, _knobProps_borderRadius_borderWidth2;
+    var _knobProps_borderRadius_borderWidth, _knobProps_borderRadius_borderWidth1, _ref4, _ref12, _knobProps_borderRadius_borderWidth2;
     emitFieldRef.current = onValueChange;
     var requestFiles = import_tamagui2.isWeb ? openFileDialog : function () {
       void openNativePicker(onValueChange, onBlurHandler);
     };
+    requestFilesRef.current = requestFiles;
+    var hiddenInput = import_tamagui2.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
+      ref: fileInputRef,
+      type: "file",
+      accept,
+      multiple,
+      tabIndex: -1,
+      onChange: function onChange(e) {
+        handleFileSelect(e.target.files, onValueChange, e.target.files);
+        onBlurHandler === null || onBlurHandler === void 0 ? void 0 : onBlurHandler();
+      },
+      style: {
+        display: "none"
+      },
+      disabled: !canInteract
+    }) : null;
+    if (trigger) return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+      "data-file-upload": "trigger",
+      alignItems: "flex-start",
+      children: [trigger(requestFiles), hiddenInput]
+    });
     var zoneInteractionProps = canInteract ? import_tamagui2.isWeb ? {
       // DROPZONE-FULL-TARGET: the entire surface is the click target.
       role: filled ? "group" : "button",
@@ -908,7 +943,7 @@ function FileUpload(props) {
               backgroundColor: "$color5",
               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,
+                alt: (_ref4 = singleFile === null || singleFile === void 0 ? void 0 : singleFile.name) !== null && _ref4 !== void 0 ? _ref4 : existingName,
                 width: "100%",
                 height: "100%",
                 objectFit: "contain",
@@ -981,21 +1016,7 @@ function FileUpload(props) {
           textAlign: "center",
           ...knobProps.body,
           children: placeholder
-        }), import_tamagui2.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
-          ref: fileInputRef,
-          type: "file",
-          accept,
-          multiple,
-          tabIndex: -1,
-          onChange: function onChange(e) {
-            handleFileSelect(e.target.files, onValueChange, e.target.files);
-            onBlurHandler === null || onBlurHandler === void 0 ? void 0 : onBlurHandler();
-          },
-          style: {
-            display: "none"
-          },
-          disabled: !canInteract
-        }) : null]
+        }), hiddenInput]
       }), (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.