@asgardeo/react 0.6.23 → 0.6.24

package/dist/components/presentation/auth/AuthOptionFactory.d.ts

@@ -25,7 +25,7 @@ export declare const renderSignInComponents: (components: EmbeddedFlowComponent[
     buttonClassName?: string;
     inputClassName?: string;
     onInputBlur?: (name: string) => void;
-    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
+    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;
     size?: "small" | "medium" | "large";
     variant?: any;
 }) => ReactElement[];
@@ -36,7 +36,7 @@ export declare const renderSignUpComponents: (components: EmbeddedFlowComponent[
     buttonClassName?: string;
     inputClassName?: string;
     onInputBlur?: (name: string) => void;
-    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
+    onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>, skipValidation?: boolean) => void;
     size?: "small" | "medium" | "large";
     variant?: any;
 }) => ReactElement[];

package/dist/index.js

@@ -6879,7 +6879,9 @@ import React from "react";
 import {
   AsgardeoRuntimeError as AsgardeoRuntimeError7,
   FieldType as FieldType7,
-  EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType
+  EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType,
+  EmbeddedFlowActionVariantV2 as EmbeddedFlowActionVariant,
+  EmbeddedFlowEventTypeV2 as EmbeddedFlowEventType
 } from "@asgardeo/browser";
 
 // src/components/adapters/SmsOtpButton.tsx
@@ -6944,9 +6946,12 @@ var getTypographyVariant = (variant) => {
   };
   return variantMap[variant] || "h3";
 };
-var matchesSocialProvider = (actionId, eventType, buttonText, provider, authType) => {
+var matchesSocialProvider = (actionId, eventType, buttonText, provider, authType, componentVariant) => {
   const providerId = `${provider}_auth`;
   const providerMatches = actionId === providerId || eventType === providerId;
+  if (componentVariant?.toUpperCase() === EmbeddedFlowActionVariant.Social) {
+    return buttonText.toLowerCase().includes(provider);
+  }
   if (authType === "signup") {
     return providerMatches || buttonText.toLowerCase().includes(provider);
   }
@@ -6981,6 +6986,11 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
       return React.cloneElement(field, { key });
     }
     case EmbeddedFlowComponentType.Action: {
+      const actionId = component.id;
+      const eventType = component.eventType || "";
+      const buttonText = component.label || "";
+      const componentVariant = component.variant || "";
+      const shouldSkipValidation = eventType.toUpperCase() === EmbeddedFlowEventType.Trigger;
       const handleClick = () => {
         if (options.onSubmit) {
           const formData = {};
@@ -6989,28 +6999,25 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
               formData[field] = formValues[field];
             }
           });
-          options.onSubmit(component, formData);
+          options.onSubmit(component, formData, shouldSkipValidation);
         }
       };
-      const actionId = component.id;
-      const eventType = component.eventType || "";
-      const buttonText = component.label || "";
-      if (matchesSocialProvider(actionId, eventType, buttonText, "google", authType)) {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "google", authType, componentVariant)) {
         return /* @__PURE__ */ jsx55(GoogleButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
-      if (matchesSocialProvider(actionId, eventType, buttonText, "github", authType)) {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "github", authType, componentVariant)) {
         return /* @__PURE__ */ jsx55(GitHubButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
-      if (matchesSocialProvider(actionId, eventType, buttonText, "facebook", authType)) {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "facebook", authType, componentVariant)) {
         return /* @__PURE__ */ jsx55(FacebookButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
-      if (matchesSocialProvider(actionId, eventType, buttonText, "microsoft", authType)) {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "microsoft", authType, componentVariant)) {
         return /* @__PURE__ */ jsx55(MicrosoftButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
-      if (matchesSocialProvider(actionId, eventType, buttonText, "linkedin", authType)) {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "linkedin", authType, componentVariant)) {
         return /* @__PURE__ */ jsx55(LinkedInButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
-      if (matchesSocialProvider(actionId, eventType, buttonText, "ethereum", authType)) {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "ethereum", authType, componentVariant)) {
         return /* @__PURE__ */ jsx55(SignInWithEthereumButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
       if (actionId === "prompt_mobile" || eventType === "prompt_mobile") {
@@ -7034,6 +7041,9 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
       const variant = getTypographyVariant(component.variant);
       return /* @__PURE__ */ jsx55(Typography_default, { variant, children: component.label || "" }, key);
     }
+    case EmbeddedFlowComponentType.Divider: {
+      return /* @__PURE__ */ jsx55(Divider_default, { children: component.label || "" }, key);
+    }
     case EmbeddedFlowComponentType.Block: {
       if (component.components && component.components.length > 0) {
         const blockComponents = component.components.map(
@@ -7052,7 +7062,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
             }
           )
         ).filter(Boolean);
-        return /* @__PURE__ */ jsx55("div", { children: blockComponents }, key);
+        return /* @__PURE__ */ jsx55("form", { id: component.id, children: blockComponents }, key);
       }
       return null;
     }
@@ -7348,11 +7358,13 @@ var BaseSignInContent2 = ({
   const handleInputBlur = (name) => {
     setFormTouched(name, true);
   };
-  const handleSubmit = async (component, data) => {
-    touchAllFields();
-    const validation = validateForm();
-    if (!validation.isValid) {
-      return;
+  const handleSubmit = async (component, data, skipValidation) => {
+    if (!skipValidation) {
+      touchAllFields();
+      const validation = validateForm();
+      if (!validation.isValid) {
+        return;
+      }
     }
     setIsSubmitting(true);
     clearMessages();
@@ -9150,10 +9162,17 @@ var BaseSignUpContent2 = ({
     setFormValue(name, value);
     setFormTouched(name, true);
   };
-  const handleSubmit = async (component, data) => {
+  const handleSubmit = async (component, data, skipValidation) => {
     if (!currentFlow) {
       return;
     }
+    if (!skipValidation) {
+      touchAllFields();
+      const validation = validateForm();
+      if (!validation.isValid) {
+        return;
+      }
+    }
     setIsLoading(true);
     clearMessages();
     try {