@asgardeo/react 0.14.4 → 0.15.1

package/dist/components/presentation/auth/SignIn/v2/BaseSignIn.d.ts

@@ -159,18 +159,6 @@ export interface BaseSignInProps {
      * taking precedence. Affects this component and all its descendants.
      */
     preferences?: Preferences;
-    /**
-     * Whether to show the logo.
-     */
-    showLogo?: boolean;
-    /**
-     * Whether to show the subtitle.
-     */
-    showSubtitle?: boolean;
-    /**
-     * Whether to show the title.
-     */
-    showTitle?: boolean;
     /**
      * Size variant for the component.
      */

package/dist/contexts/Asgardeo/AsgardeoContext.d.ts

@@ -112,11 +112,11 @@ export type AsgardeoContextProps = {
      * that come from the server (e.g. component labels, placeholders, headings).
      *
      * @example
-     * const {resolveVars} = useAsgardeo();
-     * resolveVars('{{ t(signin.heading.label) }}') // → 'Sign In'
-     * resolveVars('Login to {{ meta(application.name) }}') // → 'Login to My App'
+     * const {resolveFlowTemplateLiterals} = useAsgardeo();
+     * resolveFlowTemplateLiterals('{{ t(signin.heading.label) }}') // → 'Sign In'
+     * resolveFlowTemplateLiterals('Login to {{ meta(application.name) }}') // → 'Login to My App'
      */
-    resolveVars: (text: string | undefined) => string;
+    resolveFlowTemplateLiterals: (text: string | undefined) => string;
     /**
      * Sign-in function to initiate the authentication process.
      * @remark This is the programmatic version of the `SignInButton` component.

package/dist/index.js

@@ -39,7 +39,7 @@ var AsgardeoContext = createContext({
   organizationHandle: void 0,
   platform: void 0,
   reInitialize: null,
-  resolveVars: (text) => text ?? "",
+  resolveFlowTemplateLiterals: (text) => text ?? "",
   signIn: () => Promise.resolve({}),
   signInOptions: {},
   signInSilently: () => Promise.resolve({}),
@@ -1121,7 +1121,7 @@ FlowMetaContext.displayName = "FlowMetaContext";
 var FlowMetaContext_default = FlowMetaContext;
 
 // src/contexts/Asgardeo/useAsgardeo.ts
-import { resolveVars as resolveVarsUtil } from "@asgardeo/browser";
+import { resolveFlowTemplateLiterals } from "@asgardeo/browser";
 import { useContext } from "react";
 
 // src/contexts/I18n/I18nContext.ts
@@ -1142,7 +1142,7 @@ var useAsgardeo = () => {
   return {
     ...context,
     meta,
-    resolveVars: (text) => resolveVarsUtil(text, {
+    resolveFlowTemplateLiterals: (text) => resolveFlowTemplateLiterals(text, {
       meta,
       t: i18nContext?.t ?? ((key) => key)
     })
@@ -7659,19 +7659,18 @@ var BaseSignIn_default = BaseSignIn;
 
 // src/components/presentation/auth/SignIn/v2/BaseSignIn.tsx
 import {
-  withVendorCSSClassPrefix as withVendorCSSClassPrefix20,
-  resolveVars as resolveVars3
+  withVendorCSSClassPrefix as withVendorCSSClassPrefix20
 } from "@asgardeo/browser";
 import { cx as cx20 } from "@emotion/css";
 import { useState as useState17, useCallback as useCallback11 } from "react";
 
 // src/utils/v2/resolveTranslationsInObject.ts
-import { resolveVars } from "@asgardeo/browser";
+import { resolveFlowTemplateLiterals as resolveFlowTemplateLiterals2 } from "@asgardeo/browser";
 var resolveTranslationsInObject = (obj, t, properties = ["label", "placeholder", "text", "title", "subtitle"], meta) => {
   const resolved = { ...obj };
   properties.forEach((prop) => {
     if (resolved[prop] && typeof resolved[prop] === "string") {
-      resolved[prop] = resolveVars(resolved[prop], { meta, t });
+      resolved[prop] = resolveFlowTemplateLiterals2(resolved[prop], { meta, t });
     }
   });
   return resolved;
@@ -7790,73 +7789,15 @@ var normalizeFlowResponse = (response, t, options = {}, meta) => {
   };
 };
 
-// src/utils/v2/getAuthComponentHeadings.ts
-var getAuthComponentHeadings = (components, flowTitle, flowSubtitle, defaultTitle, defaultSubtitle) => {
-  let heading = null;
-  let subheading = null;
-  const findHeadings = (comps) => {
-    for (const component of comps) {
-      if (component.type === "TEXT" && component.variant && component.variant.startsWith("HEADING_")) {
-        if (!heading) {
-          heading = component;
-        } else if (!subheading) {
-          subheading = component;
-          break;
-        }
-      }
-      if (component.components && component.components.length > 0) {
-        findHeadings(component.components);
-        if (heading && subheading) break;
-      }
-    }
-  };
-  const filterComponents = (comps) => {
-    let foundHeadings = 0;
-    const maxHeadings = 2;
-    const filter = (items) => items.reduce((acc, component) => {
-      if (foundHeadings < maxHeadings && component.type === "TEXT" && component.variant && component.variant.startsWith("HEADING_")) {
-        foundHeadings += 1;
-        return acc;
-      }
-      if (component.components && component.components.length > 0) {
-        const filteredNestedComponents = filter(component.components);
-        if (filteredNestedComponents.length > 0) {
-          acc.push({
-            ...component,
-            components: filteredNestedComponents
-          });
-        }
-      } else {
-        acc.push(component);
-      }
-      return acc;
-    }, []);
-    return filter(comps);
-  };
-  const getComponentText = (component) => {
-    if (!component) return "";
-    return component.label || "";
-  };
-  findHeadings(components);
-  const headingText = getComponentText(heading);
-  const subheadingText = getComponentText(subheading);
-  const result = {
-    componentsWithoutHeadings: filterComponents(components),
-    headingComponents: { heading, subheading },
-    subtitle: flowSubtitle || subheadingText || defaultSubtitle || "",
-    title: flowTitle || headingText || defaultTitle || ""
-  };
-  return result;
-};
-var getAuthComponentHeadings_default = getAuthComponentHeadings;
-
 // src/components/presentation/auth/AuthOptionFactory.tsx
 import {
   FieldType as FieldType7,
   EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType,
   EmbeddedFlowEventTypeV2 as EmbeddedFlowEventType,
   createPackageComponentLogger as createPackageComponentLogger5,
-  resolveVars as resolveVars2
+  resolveFlowTemplateLiterals as resolveFlowTemplateLiterals3,
+  extractEmojiFromUri as extractEmojiFromUri2,
+  isEmojiUri as isEmojiUri2
 } from "@asgardeo/browser";
 import { css as css17 } from "@emotion/css";
 import DOMPurify from "dompurify";
@@ -8011,7 +7952,9 @@ var FlowTimer = ({
 var FlowTimer_default = FlowTimer;
 
 // src/components/adapters/ImageComponent.tsx
+import { extractEmojiFromUri, isEmojiUri } from "@asgardeo/browser";
 import { jsx as jsx62 } from "react/jsx-runtime";
+var DEFAULT_EMOJI_CONTAINER_HEIGHT = "4em";
 var ImageComponent = ({ component }) => {
   const { theme } = useTheme_default();
   const config = component.config || {};
@@ -8028,6 +7971,34 @@ var ImageComponent = ({ component }) => {
   if (!src) {
     return null;
   }
+  if (isEmojiUri(src)) {
+    const toCSSLength = (value) => /^\d+(\.\d+)?$/.test(value) ? `${value}px` : value;
+    const cssWidth = toCSSLength(width);
+    const cssHeight = toCSSLength(height);
+    const isConcrete = (v) => v !== "auto" && !v.endsWith("%");
+    let containerHeight;
+    if (isConcrete(cssHeight)) {
+      containerHeight = cssHeight;
+    } else if (isConcrete(cssWidth)) {
+      containerHeight = cssWidth;
+    } else {
+      containerHeight = DEFAULT_EMOJI_CONTAINER_HEIGHT;
+    }
+    return /* @__PURE__ */ jsx62("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx62(
+      "span",
+      {
+        style: {
+          ...imageStyle,
+          containerType: "size",
+          display: "inline-grid",
+          height: containerHeight,
+          placeItems: "center",
+          width: cssWidth
+        },
+        children: /* @__PURE__ */ jsx62("span", { "aria-label": alt, role: "img", style: { fontSize: "100cqmin", lineHeight: 1 }, children: extractEmojiFromUri(src) })
+      }
+    ) }, component.id);
+  }
   return /* @__PURE__ */ jsx62("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx62(
     "img",
     {
@@ -8138,12 +8109,49 @@ 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;
   & * {
     overflow-wrap: anywhere;
     word-break: break-word;
   }
+  & .rich-text-align-left {
+    text-align: left;
+  }
+  & .rich-text-align-center {
+    text-align: center;
+  }
+  & .rich-text-align-right {
+    text-align: right;
+  }
+  & .rich-text-align-justify {
+    text-align: justify;
+  }
+  & a,
+  & .rich-text-link {
+    text-decoration: underline;
+  }
+  & span[role='img'] {
+    display: inline-block;
+  }
 `;
 var getFieldType = (variant) => {
   switch (variant) {
@@ -8191,7 +8199,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
     if (!text || !options.t && !options.meta) {
       return text || "";
     }
-    return resolveVars2(text, { meta: options.meta, t: options.t || ((k) => k) });
+    return resolveFlowTemplateLiterals3(text, { meta: options.meta, t: options.t || ((k) => k) });
   };
   switch (component.type) {
     case EmbeddedFlowComponentType.TextInput:
@@ -8311,7 +8319,18 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
     }
     case EmbeddedFlowComponentType.Text: {
       const variant = getTypographyVariant(component.variant);
-      return /* @__PURE__ */ jsx66(Typography_default, { variant, children: resolve(component.label) }, key);
+      return /* @__PURE__ */ jsx66(
+        Typography_default,
+        {
+          variant,
+          style: {
+            marginBottom: 2,
+            textAlign: typeof component?.["align"] === "string" ? component["align"] : "left"
+          },
+          children: resolve(component.label)
+        },
+        key
+      );
     }
     case EmbeddedFlowComponentType.Divider: {
       return /* @__PURE__ */ jsx66(Divider_default, { children: resolve(component.label) || "" }, key);
@@ -8369,7 +8388,7 @@ var createAuthComponentFromFlow = (component, formValues, touchedFields, formErr
         "div",
         {
           className: richTextClass,
-          dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(resolve(component.label)) }
+          dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(resolveEmojiUrisInHtml(resolve(component.label))) }
         },
         key
       );
@@ -8528,8 +8547,6 @@ var BaseSignInContent2 = ({
   variant = "outlined",
   isLoading: externalIsLoading,
   children,
-  showTitle = true,
-  showSubtitle = true,
   additionalData = {},
   isTimeoutDisabled = false
 }) => {
@@ -8737,40 +8754,22 @@ var BaseSignInContent2 = ({
   if (!components || components.length === 0) {
     return /* @__PURE__ */ jsx67(Card_default, { className: cx20(containerClasses, styles.card), "data-testid": "asgardeo-signin", variant, children: /* @__PURE__ */ jsx67(Card_default.Content, { children: /* @__PURE__ */ jsx67(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx67(Typography_default, { variant: "body1", children: t("errors.signin.components.not.available") }) }) }) });
   }
-  const {
-    title: rawTitle,
-    subtitle: rawSubtitle,
-    componentsWithoutHeadings
-  } = getAuthComponentHeadings_default(components, flowTitle, flowSubtitle, void 0, void 0);
-  const title = resolveVars3(rawTitle, { meta, t });
-  const subtitle = resolveVars3(rawSubtitle, { meta, t });
-  return /* @__PURE__ */ jsxs30(Card_default, { className: cx20(containerClasses, styles.card), "data-testid": "asgardeo-signin", variant, children: [
-    (showTitle || showSubtitle) && /* @__PURE__ */ jsxs30(Card_default.Header, { className: styles.header, children: [
-      showTitle && /* @__PURE__ */ jsx67(Card_default.Title, { level: 2, className: styles.title, children: title }),
-      showSubtitle && /* @__PURE__ */ jsx67(Typography_default, { variant: "body1", className: styles.subtitle, children: subtitle })
-    ] }),
-    /* @__PURE__ */ jsxs30(Card_default.Content, { children: [
-      externalError && /* @__PURE__ */ jsx67("div", { className: styles.flowMessagesContainer, children: /* @__PURE__ */ jsx67(Alert_default, { variant: "error", className: cx20(styles.flowMessageItem, messageClasses), children: /* @__PURE__ */ jsx67(Alert_default.Description, { children: externalError.message }) }) }),
-      flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx67("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ jsx67(
-        Alert_default,
-        {
-          variant: message.type === "error" ? "error" : "info",
-          className: cx20(styles.flowMessageItem, messageClasses),
-          children: /* @__PURE__ */ jsx67(Alert_default.Description, { children: message.message })
-        },
-        index
-      )) }),
-      /* @__PURE__ */ jsx67("div", { className: styles.contentContainer, children: componentsWithoutHeadings && renderComponents(componentsWithoutHeadings) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx67(Card_default, { className: cx20(containerClasses, styles.card), "data-testid": "asgardeo-signin", variant, children: /* @__PURE__ */ jsxs30(Card_default.Content, { children: [
+    externalError && /* @__PURE__ */ jsx67("div", { className: styles.flowMessagesContainer, children: /* @__PURE__ */ jsx67(Alert_default, { variant: "error", className: cx20(styles.flowMessageItem, messageClasses), children: /* @__PURE__ */ jsx67(Alert_default.Description, { children: externalError.message }) }) }),
+    flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx67("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ jsx67(
+      Alert_default,
+      {
+        variant: message.type === "error" ? "error" : "info",
+        className: cx20(styles.flowMessageItem, messageClasses),
+        children: /* @__PURE__ */ jsx67(Alert_default.Description, { children: message.message })
+      },
+      index
+    )) }),
+    /* @__PURE__ */ jsx67("div", { className: styles.contentContainer, children: renderComponents(components) })
+  ] }) });
 };
-var BaseSignIn2 = ({ preferences, showLogo = true, ...rest }) => {
-  const { theme } = useTheme_default();
-  const styles = BaseSignIn_styles_default(theme, theme.vars.colors.text.primary);
-  const content = /* @__PURE__ */ jsxs30("div", { children: [
-    showLogo && /* @__PURE__ */ jsx67("div", { className: styles.logoContainer, children: /* @__PURE__ */ jsx67(Logo_default, { size: "large" }) }),
-    /* @__PURE__ */ jsx67(FlowProvider_default, { children: /* @__PURE__ */ jsx67(BaseSignInContent2, { showLogo, ...rest }) })
-  ] });
+var BaseSignIn2 = ({ preferences, ...rest }) => {
+  const content = /* @__PURE__ */ jsx67(FlowProvider_default, { children: /* @__PURE__ */ jsx67(BaseSignInContent2, { ...rest }) });
   if (!preferences) return content;
   return /* @__PURE__ */ jsx67(ComponentPreferencesContext_default.Provider, { value: preferences, children: content });
 };
@@ -10691,6 +10690,68 @@ import {
 } from "@asgardeo/browser";
 import { cx as cx22 } from "@emotion/css";
 import { useEffect as useEffect19, useState as useState20, useCallback as useCallback13, useRef as useRef9 } from "react";
+
+// src/utils/v2/getAuthComponentHeadings.ts
+var getAuthComponentHeadings = (components, flowTitle, flowSubtitle, defaultTitle, defaultSubtitle) => {
+  let heading = null;
+  let subheading = null;
+  const findHeadings = (comps) => {
+    for (const component of comps) {
+      if (component.type === "TEXT" && component.variant && component.variant.startsWith("HEADING_")) {
+        if (!heading) {
+          heading = component;
+        } else if (!subheading) {
+          subheading = component;
+          break;
+        }
+      }
+      if (component.components && component.components.length > 0) {
+        findHeadings(component.components);
+        if (heading && subheading) break;
+      }
+    }
+  };
+  const filterComponents = (comps) => {
+    let foundHeadings = 0;
+    const maxHeadings = 2;
+    const filter = (items) => items.reduce((acc, component) => {
+      if (foundHeadings < maxHeadings && component.type === "TEXT" && component.variant && component.variant.startsWith("HEADING_")) {
+        foundHeadings += 1;
+        return acc;
+      }
+      if (component.components && component.components.length > 0) {
+        const filteredNestedComponents = filter(component.components);
+        if (filteredNestedComponents.length > 0) {
+          acc.push({
+            ...component,
+            components: filteredNestedComponents
+          });
+        }
+      } else {
+        acc.push(component);
+      }
+      return acc;
+    }, []);
+    return filter(comps);
+  };
+  const getComponentText = (component) => {
+    if (!component) return "";
+    return component.label || "";
+  };
+  findHeadings(components);
+  const headingText = getComponentText(heading);
+  const subheadingText = getComponentText(subheading);
+  const result = {
+    componentsWithoutHeadings: filterComponents(components),
+    headingComponents: { heading, subheading },
+    subtitle: flowSubtitle || subheadingText || defaultSubtitle || "",
+    title: flowTitle || headingText || defaultTitle || ""
+  };
+  return result;
+};
+var getAuthComponentHeadings_default = getAuthComponentHeadings;
+
+// src/components/presentation/auth/SignUp/v2/BaseSignUp.tsx
 import { jsx as jsx78, jsxs as jsxs32 } from "react/jsx-runtime";
 var logger7 = createPackageComponentLogger7(
   "@asgardeo/react",
@@ -11370,7 +11431,6 @@ var SignUp2 = ({
       size,
       isInitialized,
       children,
-      showLogo: true,
       showTitle: true,
       showSubtitle: true,
       ...rest