@forms.expert/sdk 0.2.7 → 0.2.9

package/dist/react/index.cjs

@@ -400,24 +400,25 @@ function useForm(options) {
   const [values, setValues] = (0, import_react.useState)({});
   const [error, setError] = (0, import_react.useState)(null);
   const [uploadProgress, setUploadProgress] = (0, import_react.useState)(null);
+  const { slug, trackViews, lang, autoInit, onSuccess, onError, onValidationError } = options;
   const initialize = (0, import_react.useCallback)(async () => {
     setIsInitializing(true);
     try {
-      const formConfig = await sdk.isActive(options.slug, options.lang);
+      const formConfig = await sdk.isActive(slug, lang);
       setConfig(formConfig);
-      if (options.trackViews) {
-        sdk.trackView(options.slug);
+      if (trackViews) {
+        void sdk.trackView(slug);
       }
       return formConfig;
     } finally {
       setIsInitializing(false);
     }
-  }, [sdk, options.slug, options.trackViews, options.lang]);
+  }, [sdk, slug, trackViews, lang]);
   (0, import_react.useEffect)(() => {
-    if (options.autoInit !== false) {
+    if (autoInit !== false) {
       initialize();
     }
-  }, [initialize, options.autoInit]);
+  }, [initialize, autoInit]);
   const setValue = (0, import_react.useCallback)((name, value) => {
     setValues((prev) => ({ ...prev, [name]: value }));
     setErrors((prev) => {
@@ -432,7 +433,7 @@ function useForm(options) {
     setValues((prev) => ({ ...prev, ...newValues }));
   }, []);
   const validate = (0, import_react.useCallback)(async () => {
-    const result = await sdk.validate(options.slug, values);
+    const result = await sdk.validate(slug, values);
     if (!result.valid) {
       const errorMap = result.errors.reduce(
         (acc, err) => ({ ...acc, [err.field]: err.message }),
@@ -441,7 +442,7 @@ function useForm(options) {
       setErrors(errorMap);
     }
     return result.valid;
-  }, [sdk, options.slug, values]);
+  }, [sdk, slug, values]);
   const submit = (0, import_react.useCallback)(
     async (captchaToken) => {
       setIsLoading(true);
@@ -451,12 +452,12 @@ function useForm(options) {
       setUploadProgress(null);
       try {
         const submitData = config?.settings?.honeypot ? { ...values, _hp: "" } : values;
-        const response = await sdk.submit(options.slug, submitData, {
+        const response = await sdk.submit(slug, submitData, {
           captchaToken,
           onProgress: setUploadProgress
         });
         setIsSubmitted(true);
-        options.onSuccess?.(response);
+        onSuccess?.(response);
         return response;
       } catch (err) {
         if (err instanceof FormValidationError) {
@@ -465,10 +466,10 @@ function useForm(options) {
             {}
           );
           setErrors(errorMap);
-          options.onValidationError?.(err.errors);
+          onValidationError?.(err.errors);
         } else {
           setError(err);
-          options.onError?.(err);
+          onError?.(err);
         }
         return null;
       } finally {
@@ -476,7 +477,7 @@ function useForm(options) {
         setUploadProgress(null);
       }
     },
-    [sdk, options, values]
+    [sdk, slug, values, config?.settings?.honeypot, onSuccess, onError, onValidationError]
   );
   const reset = (0, import_react.useCallback)(() => {
     setValues({});
@@ -697,7 +698,7 @@ function getParagraphSize(size) {
 function FormsExpertForm({
   config,
   slug,
-  trackViews,
+  trackViews = true,
   submitText = "Submit",
   onSuccess,
   onError,
@@ -990,6 +991,14 @@ function FormsExpertForm({
         form[data-fe-scope="${formScopeId}"] button[type="submit"]:active:not(:disabled) { filter: brightness(0.85); transform: scale(0.98); }
         form[data-fe-scope="${formScopeId}"] a[href]:hover { filter: brightness(0.9); }
         form[data-fe-scope="${formScopeId}"] a[href]:active { filter: brightness(0.85); }
+        form[data-fe-scope="${formScopeId}"] input:focus,
+        form[data-fe-scope="${formScopeId}"] textarea:focus,
+        form[data-fe-scope="${formScopeId}"] select:focus {
+          outline: none !important;
+          border-color: ${styling.primaryColor || "#3b82f6"} !important;
+          box-shadow: 0 0 0 2px ${styling.primaryColor || "#3b82f6"}33 !important;
+          -webkit-appearance: none;
+        }
       ` } }),
         styling.logoUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: {
           textAlign: styling.logoPosition === "top-left" ? "left" : styling.logoPosition === "top-right" ? "right" : "center",