@usefillo/react 0.2.0 → 0.2.2

package/dist/index.js

@@ -2,7 +2,7 @@
 
 // src/FilloForm.tsx
 import { useEffect as useEffect6, useMemo, useRef as useRef4, useState as useState5 } from "react";
-import { FilloError as FilloError2 } from "@usefillo/core";
+import { FilloError as FilloError2, createClient } from "@usefillo/core";
 
 // src/context.ts
 import { allFields } from "@usefillo/core";
@@ -211,6 +211,7 @@ function FileUploadField({ field, value, error, setValue, api }) {
   const [dragOver, setDragOver] = useState3(false);
   const mountedRef = useRef3(true);
   const controllers = useRef3(/* @__PURE__ */ new Map());
+  const inFlightCount = useRef3(0);
   useEffect4(
     () => () => {
       mountedRef.current = false;
@@ -233,6 +234,7 @@ function FileUploadField({ field, value, error, setValue, api }) {
       return;
     }
     setInFlight((prev) => [...prev, { key, name: file.name, size: file.size, fraction: 0 }]);
+    inFlightCount.current += 1;
     api.setUploading(field.id, true);
     const controller = new AbortController();
     controllers.current.set(key, controller);
@@ -258,7 +260,8 @@ function FileUploadField({ field, value, error, setValue, api }) {
       }
     } finally {
       controllers.current.delete(key);
-      if (mountedRef.current) api.setUploading(field.id, false);
+      inFlightCount.current -= 1;
+      if (mountedRef.current && inFlightCount.current === 0) api.setUploading(field.id, false);
     }
   }
   function cancelUpload(key) {
@@ -892,7 +895,11 @@ function themeStyle(theme) {
   return style;
 }
 function FilloForm(props) {
-  const { form, client, formId } = props;
+  const { form, formId } = props;
+  const client = useMemo(
+    () => props.client ?? (formId ? createClient() : void 0),
+    [props.client, formId]
+  );
   const [fetched, setFetched] = useState5(null);
   const [fetchedTheme, setFetchedTheme] = useState5(null);
   const [loadError, setLoadError] = useState5(null);
@@ -949,7 +956,7 @@ function FilloForm(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx4(ResolvedForm, { ...props, schema, theme, formId: syncedFormId ?? formId });
+  return /* @__PURE__ */ jsx4(ResolvedForm, { ...props, client, schema, theme, formId: syncedFormId ?? formId });
 }
 function ResolvedForm(props) {
   const { schema, theme } = props;
@@ -1074,7 +1081,7 @@ function FilloProvider({ children, form, formId, client, ...options }) {
 
 // src/index.ts
 import {
-  createClient,
+  createClient as createClient2,
   FilloClient,
   FilloError as FilloError3
 } from "@usefillo/core";
@@ -1086,7 +1093,7 @@ export {
   FilloForm,
   FilloProvider,
   FormField,
-  createClient,
+  createClient2 as createClient,
   defineForm,
   useField,
   useFillo,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefillo/react",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Headless React components for embedding Fillo forms natively in your product.",
   "license": "MIT",
   "keywords": [
@@ -36,7 +36,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@usefillo/core": "^0.2.0"
+    "@usefillo/core": "^0.2.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",