@asgardeo/react 0.15.1 → 0.15.3

package/dist/index.d.ts

@@ -188,4 +188,4 @@ export { default as getSchemas, GetSchemasConfig } from './api/getSchemas';
 export { default as updateMeProfile, UpdateMeProfileConfig } from './api/updateMeProfile';
 export { default as getMeProfile } from './api/getScim2Me';
 export * from './api/getScim2Me';
-export { AsgardeoRuntimeError, http, getActiveTheme, navigate, EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType, EmbeddedFlowActionVariantV2 as EmbeddedFlowActionVariant, EmbeddedFlowTextVariantV2 as EmbeddedFlowTextVariant, EmbeddedFlowEventTypeV2 as EmbeddedFlowEventType, type EmbeddedFlowComponentV2 as EmbeddedFlowComponent, type EmbeddedFlowResponseDataV2 as EmbeddedFlowResponseData, type EmbeddedFlowExecuteRequestConfigV2 as EmbeddedFlowExecuteRequestConfig, EmbeddedSignInFlowStatusV2 as EmbeddedSignInFlowStatus, EmbeddedSignInFlowTypeV2 as EmbeddedSignInFlowType, type ExtendedEmbeddedSignInFlowResponseV2 as ExtendedEmbeddedSignInFlowResponse, type EmbeddedSignInFlowResponseV2 as EmbeddedSignInFlowResponse, type EmbeddedSignInFlowCompleteResponseV2 as EmbeddedSignInFlowCompleteResponse, type EmbeddedSignInFlowInitiateRequestV2 as EmbeddedSignInFlowInitiateRequest, type EmbeddedSignInFlowRequestV2 as EmbeddedSignInFlowRequest, type EmbeddedSignUpFlowStatusV2 as EmbeddedSignUpFlowStatus, type EmbeddedSignUpFlowTypeV2 as EmbeddedSignUpFlowType, type ExtendedEmbeddedSignUpFlowResponseV2 as ExtendedEmbeddedSignUpFlowResponse, type EmbeddedSignUpFlowResponseV2 as EmbeddedSignUpFlowResponse, type EmbeddedSignUpFlowCompleteResponseV2 as EmbeddedSignUpFlowCompleteResponse, type EmbeddedSignUpFlowInitiateRequestV2 as EmbeddedSignUpFlowInitiateRequest, type EmbeddedSignUpFlowRequestV2 as EmbeddedSignUpFlowRequest, type EmbeddedSignUpFlowErrorResponseV2 as EmbeddedSignUpFlowErrorResponse, } from '@asgardeo/browser';
+export { AsgardeoRuntimeError, http, getActiveTheme, navigate, resolveEmojiUrisInHtml, isEmojiUri, EMOJI_URI_SCHEME, extractEmojiFromUri, resolveMeta, resolveFlowTemplateLiterals, countryCodeToFlagEmoji, resolveLocaleDisplayName, resolveLocaleEmoji, EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType, EmbeddedFlowActionVariantV2 as EmbeddedFlowActionVariant, EmbeddedFlowTextVariantV2 as EmbeddedFlowTextVariant, EmbeddedFlowEventTypeV2 as EmbeddedFlowEventType, type EmbeddedFlowComponentV2 as EmbeddedFlowComponent, type EmbeddedFlowResponseDataV2 as EmbeddedFlowResponseData, type EmbeddedFlowExecuteRequestConfigV2 as EmbeddedFlowExecuteRequestConfig, EmbeddedSignInFlowStatusV2 as EmbeddedSignInFlowStatus, EmbeddedSignInFlowTypeV2 as EmbeddedSignInFlowType, type ExtendedEmbeddedSignInFlowResponseV2 as ExtendedEmbeddedSignInFlowResponse, type EmbeddedSignInFlowResponseV2 as EmbeddedSignInFlowResponse, type EmbeddedSignInFlowCompleteResponseV2 as EmbeddedSignInFlowCompleteResponse, type EmbeddedSignInFlowInitiateRequestV2 as EmbeddedSignInFlowInitiateRequest, type EmbeddedSignInFlowRequestV2 as EmbeddedSignInFlowRequest, type EmbeddedSignUpFlowStatusV2 as EmbeddedSignUpFlowStatus, type EmbeddedSignUpFlowTypeV2 as EmbeddedSignUpFlowType, type ExtendedEmbeddedSignUpFlowResponseV2 as ExtendedEmbeddedSignUpFlowResponse, type EmbeddedSignUpFlowResponseV2 as EmbeddedSignUpFlowResponse, type EmbeddedSignUpFlowCompleteResponseV2 as EmbeddedSignUpFlowCompleteResponse, type EmbeddedSignUpFlowInitiateRequestV2 as EmbeddedSignUpFlowInitiateRequest, type EmbeddedSignUpFlowRequestV2 as EmbeddedSignUpFlowRequest, type EmbeddedSignUpFlowErrorResponseV2 as EmbeddedSignUpFlowErrorResponse, } from '@asgardeo/browser';

package/dist/index.js

@@ -1106,13 +1106,7 @@ var FlowProvider_default = FlowProvider;
 // src/contexts/FlowMeta/FlowMetaProvider.tsx
 import { FlowMetaType, getFlowMetaV2 } from "@asgardeo/browser";
 import { TranslationBundleConstants } from "@asgardeo/i18n";
-import {
-  useCallback as useCallback3,
-  useContext as useContext2,
-  useEffect as useEffect2,
-  useRef,
-  useState as useState3
-} from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useRef, useState as useState3 } from "react";
 
 // src/contexts/FlowMeta/FlowMetaContext.ts
 import { createContext as createContext4 } from "react";
@@ -1150,6 +1144,19 @@ var useAsgardeo = () => {
 };
 var useAsgardeo_default = useAsgardeo;
 
+// src/contexts/I18n/useI18n.ts
+import { useContext as useContext2 } from "react";
+var useI18n = () => {
+  const context = useContext2(I18nContext_default);
+  if (!context) {
+    throw new Error(
+      "useI18n must be used within an I18nProvider. Make sure your component is wrapped with AsgardeoProvider which includes I18nProvider."
+    );
+  }
+  return context;
+};
+var useI18n_default = useI18n;
+
 // src/contexts/FlowMeta/FlowMetaProvider.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var FlowMetaProvider = ({
@@ -1157,7 +1164,7 @@ var FlowMetaProvider = ({
   enabled = true
 }) => {
   const { baseUrl, applicationId } = useAsgardeo_default();
-  const i18nContext = useContext2(I18nContext_default);
+  const i18nContext = useI18n_default();
   const [meta, setMeta] = useState3(null);
   const [isLoading, setIsLoading] = useState3(false);
   const [error, setError] = useState3(null);
@@ -1171,14 +1178,19 @@ var FlowMetaProvider = ({
     setIsLoading(true);
     setError(null);
     try {
-      const result = await getFlowMetaV2({ baseUrl, id: applicationId, type: FlowMetaType.App });
+      const result = await getFlowMetaV2({
+        baseUrl,
+        id: applicationId,
+        language: i18nContext?.currentLanguage,
+        type: FlowMetaType.App
+      });
       setMeta(result);
     } catch (err) {
       setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
       setIsLoading(false);
     }
-  }, [enabled, baseUrl, applicationId]);
+  }, [enabled, baseUrl, applicationId, i18nContext?.currentLanguage]);
   const switchLanguage = useCallback3(
     async (language) => {
       if (!enabled) return;
@@ -2491,23 +2503,10 @@ var useFlow = () => {
 };
 var useFlow_default = useFlow;
 
-// src/contexts/I18n/useI18n.ts
-import { useContext as useContext8 } from "react";
-var useI18n = () => {
-  const context = useContext8(I18nContext_default);
-  if (!context) {
-    throw new Error(
-      "useI18n must be used within an I18nProvider. Make sure your component is wrapped with AsgardeoProvider which includes I18nProvider."
-    );
-  }
-  return context;
-};
-var useI18n_default = useI18n;
-
 // src/contexts/Theme/useTheme.ts
-import { useContext as useContext9 } from "react";
+import { useContext as useContext8 } from "react";
 var useTheme = () => {
-  const context = useContext9(ThemeContext_default);
+  const context = useContext8(ThemeContext_default);
   if (!context) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -2518,7 +2517,7 @@ var useTheme_default = useTheme;
 // src/hooks/useTranslation.ts
 import { deepMerge as deepMerge2 } from "@asgardeo/browser";
 import { normalizeTranslations as normalizeTranslations2 } from "@asgardeo/i18n";
-import { useContext as useContext10, useMemo as useMemo8 } from "react";
+import { useContext as useContext9, useMemo as useMemo8 } from "react";
 
 // src/contexts/I18n/ComponentPreferencesContext.ts
 import { createContext as createContext9 } from "react";
@@ -2527,8 +2526,8 @@ var ComponentPreferencesContext_default = ComponentPreferencesContext;
 
 // src/hooks/useTranslation.ts
 var useTranslation = (componentPreferences) => {
-  const context = useContext10(I18nContext_default);
-  const componentPrefs = useContext10(ComponentPreferencesContext_default);
+  const context = useContext9(I18nContext_default);
+  const componentPrefs = useContext9(ComponentPreferencesContext_default);
   const contextPreferences = componentPrefs?.i18n;
   if (!context) {
     throw new Error(
@@ -3777,7 +3776,6 @@ var useStyles4 = (theme, colorScheme, helperTextAlign, helperTextMarginLeft, has
   const formControl = css4`
       text-align: start;
       font-family: ${theme.vars.typography.fontFamily};
-      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
   const helperText = css4`
       margin-top: calc(${theme.vars.spacing.unit} / 2);
@@ -6039,7 +6037,7 @@ import { cx as cx15 } from "@emotion/css";
 import {
   forwardRef as forwardRef8,
   createContext as createContext10,
-  useContext as useContext11
+  useContext as useContext10
 } from "react";
 
 // src/components/primitives/Alert/Alert.styles.ts
@@ -6226,7 +6224,7 @@ var getDefaultIcon = (variant) => {
   }
 };
 var AlertVariantContext = createContext10("info");
-var useAlertVariant = () => useContext11(AlertVariantContext);
+var useAlertVariant = () => useContext10(AlertVariantContext);
 var Alert = forwardRef8(({ variant = "info", showIcon = true, children, className, style, ...rest }, ref) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = Alert_styles_default(theme, colorScheme, variant);
@@ -7796,8 +7794,7 @@ import {
   EmbeddedFlowEventTypeV2 as EmbeddedFlowEventType,
   createPackageComponentLogger as createPackageComponentLogger5,
   resolveFlowTemplateLiterals as resolveFlowTemplateLiterals3,
-  extractEmojiFromUri as extractEmojiFromUri2,
-  isEmojiUri as isEmojiUri2
+  resolveEmojiUrisInHtml
 } from "@asgardeo/browser";
 import { css as css17 } from "@emotion/css";
 import DOMPurify from "dompurify";
@@ -8109,24 +8106,6 @@ var logger5 = createPackageComponentLogger5(
   "@asgardeo/react",
   "AuthOptionFactory"
 );
-var resolveEmojiUrisInHtml = (html) => {
-  const withEmojiImages = html.replace(
-    /<img([^>]*)src="(emoji:[^"]+)"([^>]*)\/?>/gi,
-    (_match, pre, src, post) => {
-      const emoji = extractEmojiFromUri2(src);
-      if (!emoji) {
-        return _match;
-      }
-      const altMatch = (pre + post).match(/alt="([^"]*)"/i);
-      const label = altMatch ? altMatch[1] : emoji;
-      return `<span role="img" aria-label="${label}">${emoji}</span>`;
-    }
-  );
-  return withEmojiImages.replace(
-    /emoji:([^\s"<>&]+)/g,
-    (_, rest) => isEmojiUri2(`emoji:${rest}`) ? rest : `emoji:${rest}`
-  );
-};
 var richTextClass = css17`
   overflow-wrap: anywhere;
   & * {
@@ -8194,6 +8173,7 @@ var matchesSocialProvider = (actionId, eventType, buttonText, provider, authType
   return providerMatches;
 };
 var createAuthComponentFromFlow = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, authType, options = {}) => {
+  const { theme } = useTheme_default();
   const key = options.key || component.id;
   const resolve = (text) => {
     if (!text || !options.t && !options.meta) {
@@ -8363,6 +8343,11 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
     }
     case EmbeddedFlowComponentType.Block: {
       if (component.components && component.components.length > 0) {
+        const formStyles = {
+          display: "flex",
+          flexDirection: "column",
+          gap: `calc(${theme.vars.spacing.unit} * 2)`
+        };
         const blockComponents = component.components.map(
           (childComponent, index) => createAuthComponentFromFlow(
             childComponent,
@@ -8379,7 +8364,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
             }
           )
         ).filter(Boolean);
-        return /* @__PURE__ */ jsx66("form", { id: component.id, children: blockComponents }, key);
+        return /* @__PURE__ */ jsx66("form", { id: component.id, style: formStyles, children: blockComponents }, key);
       }
       return null;
     }
@@ -12100,6 +12085,7 @@ var BaseAcceptInvite = ({
       delete newErrors[name];
       return newErrors;
     });
+    setIsFormValid(true);
   }, []);
   const handleInputBlur = useCallback15((name) => {
     setTouchedFields((prev) => ({ ...prev, [name]: true }));
@@ -12112,7 +12098,7 @@ var BaseAcceptInvite = ({
           if ((comp.type === "PASSWORD_INPUT" || comp.type === "TEXT_INPUT" || comp.type === "EMAIL_INPUT") && comp.required && comp.ref) {
             const value = formValues[comp.ref];
             if (!value || value.trim() === "") {
-              errors[comp.ref] = `${comp.label || comp.ref} is required`;
+              errors[comp.ref] = t("validations.required.field.error");
             }
           }
           if (comp.components && Array.isArray(comp.components)) {
@@ -12123,7 +12109,7 @@ var BaseAcceptInvite = ({
       validateComponents(components2);
       return { errors, isValid: Object.keys(errors).length === 0 };
     },
-    [formValues]
+    [formValues, t]
   );
   const handleSubmit = useCallback15(
     async (component, data) => {
@@ -12133,8 +12119,8 @@ var BaseAcceptInvite = ({
       const components2 = currentFlow.data?.components || [];
       const validation = validateForm(components2);
       if (!validation.isValid) {
-        setFormErrors(validation.errors);
         setIsFormValid(false);
+        setFormErrors(validation.errors);
         const touched = {};
         Object.keys(validation.errors).forEach((key) => {
           touched[key] = true;
@@ -12144,7 +12130,6 @@ var BaseAcceptInvite = ({
       }
       setIsLoading(true);
       setApiError(null);
-      setIsFormValid(true);
       try {
         const inputs = data || formValues;
         const payload = {
@@ -12184,7 +12169,6 @@ var BaseAcceptInvite = ({
           return;
         }
         setCurrentFlow(response);
-        setFormValues({});
         setFormErrors({});
         setTouchedFields({});
       } catch (err) {
@@ -12266,35 +12250,6 @@ var BaseAcceptInvite = ({
     ),
     []
   );
-  const renderComponents = useCallback15(
-    (components2) => renderInviteUserComponents(
-      components2,
-      formValues,
-      touchedFields,
-      formErrors,
-      isLoading,
-      isFormValid,
-      handleInputChange,
-      {
-        onInputBlur: handleInputBlur,
-        onSubmit: handleSubmit,
-        size,
-        variant
-      }
-    ),
-    [
-      formValues,
-      touchedFields,
-      formErrors,
-      isLoading,
-      isFormValid,
-      handleInputChange,
-      handleInputBlur,
-      handleSubmit,
-      size,
-      variant
-    ]
-  );
   const components = currentFlow?.data?.components || currentFlow?.data?.meta?.components || [];
   const { title, subtitle } = extractHeadings(components);
   const componentsWithoutHeadings = filterHeadings(components);
@@ -12358,7 +12313,21 @@ var BaseAcceptInvite = ({
     /* @__PURE__ */ jsxs34(Card_default.Content, { children: [
       apiError && /* @__PURE__ */ jsx85("div", { style: { marginBottom: "1rem" }, children: /* @__PURE__ */ jsx85(Alert_default, { variant: "error", children: /* @__PURE__ */ jsx85(Alert_default.Description, { children: apiError.message }) }) }),
       /* @__PURE__ */ jsxs34("div", { children: [
-        componentsWithoutHeadings && componentsWithoutHeadings.length > 0 ? renderComponents(componentsWithoutHeadings) : !isLoading && /* @__PURE__ */ jsx85(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx85(Typography_default, { variant: "body1", children: "No form components available" }) }),
+        componentsWithoutHeadings && componentsWithoutHeadings.length > 0 ? renderInviteUserComponents(
+          componentsWithoutHeadings,
+          formValues,
+          touchedFields,
+          formErrors,
+          isLoading,
+          isFormValid,
+          handleInputChange,
+          {
+            onInputBlur: handleInputBlur,
+            onSubmit: handleSubmit,
+            size,
+            variant
+          }
+        ) : !isLoading && /* @__PURE__ */ jsx85(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx85(Typography_default, { variant: "body1", children: "No form components available" }) }),
         isLoading && /* @__PURE__ */ jsx85("div", { style: { display: "flex", justifyContent: "center", padding: "1rem" }, children: /* @__PURE__ */ jsx85(Spinner_default, { size: "small" }) })
       ] }),
       onGoToSignIn && /* @__PURE__ */ jsx85("div", { style: { marginTop: "1.5rem", textAlign: "center" }, children: /* @__PURE__ */ jsxs34(Typography_default, { variant: "body2", children: [
@@ -13024,7 +12993,7 @@ import {
   createContext as createContext11,
   forwardRef as forwardRef10,
   isValidElement,
-  useContext as useContext12,
+  useContext as useContext11,
   useLayoutEffect,
   useMemo as useMemo33,
   useState as useState23
@@ -13226,7 +13195,7 @@ function useDialog({
 }
 var DialogContext = createContext11(null);
 var useDialogContext = () => {
-  const context = useContext12(DialogContext);
+  const context = useContext11(DialogContext);
   if (context == null) {
     throw new Error("Dialog components must be wrapped in <Dialog />");
   }
@@ -17435,12 +17404,12 @@ var BaseLanguageSwitcher_default = BaseLanguageSwitcher;
 
 // src/components/presentation/LanguageSwitcher/LanguageSwitcher.tsx
 import { resolveLocaleDisplayName, resolveLocaleEmoji } from "@asgardeo/browser";
-import { useMemo as useMemo44 } from "react";
+import { useEffect as useEffect26, useMemo as useMemo44 } from "react";
 
 // src/contexts/FlowMeta/useFlowMeta.ts
-import { useContext as useContext13 } from "react";
+import { useContext as useContext12 } from "react";
 var useFlowMeta = () => {
-  const context = useContext13(FlowMetaContext_default);
+  const context = useContext12(FlowMetaContext_default);
   if (!context) {
     throw new Error("useFlowMeta must be used within a FlowMetaProvider");
   }
@@ -17454,10 +17423,10 @@ var LanguageSwitcher = ({ children, className }) => {
   const { meta, switchLanguage, isLoading } = useFlowMeta_default();
   const { currentLanguage } = useTranslation_default();
   const availableLanguageCodes = meta?.i18n?.languages ?? [];
-  const effectiveLanguageCodes = useMemo44(() => {
-    const fallbackCodes = availableLanguageCodes.length > 0 ? availableLanguageCodes : [currentLanguage];
-    return Array.from(/* @__PURE__ */ new Set([currentLanguage, ...fallbackCodes]));
-  }, [availableLanguageCodes, currentLanguage]);
+  const effectiveLanguageCodes = useMemo44(
+    () => availableLanguageCodes.length > 0 ? availableLanguageCodes : [currentLanguage],
+    [availableLanguageCodes, currentLanguage]
+  );
   const languages = useMemo44(
     () => effectiveLanguageCodes.map((code) => ({
       code,
@@ -17467,6 +17436,11 @@ var LanguageSwitcher = ({ children, className }) => {
     })),
     [effectiveLanguageCodes]
   );
+  useEffect26(() => {
+    if (availableLanguageCodes.length > 0 && !availableLanguageCodes.includes(currentLanguage)) {
+      switchLanguage(availableLanguageCodes[0]);
+    }
+  }, [availableLanguageCodes, currentLanguage, switchLanguage]);
   const handleLanguageChange = (language) => {
     if (language !== currentLanguage) {
       switchLanguage(language);
@@ -17492,6 +17466,15 @@ import {
   http,
   getActiveTheme as getActiveTheme2,
   navigate as navigate5,
+  resolveEmojiUrisInHtml as resolveEmojiUrisInHtml2,
+  isEmojiUri as isEmojiUri2,
+  EMOJI_URI_SCHEME,
+  extractEmojiFromUri as extractEmojiFromUri2,
+  resolveMeta,
+  resolveFlowTemplateLiterals as resolveFlowTemplateLiterals4,
+  countryCodeToFlagEmoji,
+  resolveLocaleDisplayName as resolveLocaleDisplayName2,
+  resolveLocaleEmoji as resolveLocaleEmoji2,
   EmbeddedFlowComponentTypeV2,
   EmbeddedFlowActionVariantV2,
   EmbeddedFlowTextVariantV2,
@@ -17535,6 +17518,7 @@ export {
   CreateOrganization,
   DatePicker_default as DatePicker,
   Divider_default as Divider,
+  EMOJI_URI_SCHEME,
   EmailOtp_default as EmailOtp,
   EmbeddedFlowActionVariantV2 as EmbeddedFlowActionVariant,
   EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType,
@@ -17600,11 +17584,13 @@ export {
   UserProfile_default as UserProfile,
   UserProvider_default as UserProvider,
   UsernamePassword_default as UsernamePassword,
+  countryCodeToFlagEmoji,
   createField,
   createOrganization_default as createOrganization,
   createPatchOperations,
   createSignInOption,
   createSignInOptionFromAuthenticator,
+  extractEmojiFromUri2 as extractEmojiFromUri,
   getActiveTheme2 as getActiveTheme,
   getAllOrganizations_default as getAllOrganizations,
   getConsentOptionalKey,
@@ -17613,7 +17599,13 @@ export {
   getOrganization_default as getOrganization,
   getSchemas_default as getSchemas,
   http,
+  isEmojiUri2 as isEmojiUri,
   navigate5 as navigate,
+  resolveEmojiUrisInHtml2 as resolveEmojiUrisInHtml,
+  resolveFlowTemplateLiterals4 as resolveFlowTemplateLiterals,
+  resolveLocaleDisplayName2 as resolveLocaleDisplayName,
+  resolveLocaleEmoji2 as resolveLocaleEmoji,
+  resolveMeta,
   updateMeProfile_default as updateMeProfile,
   updateOrganization_default as updateOrganization,
   useAsgardeo_default as useAsgardeo,