@asgardeo/react 0.5.33 → 0.6.0

package/dist/index.js

@@ -63,7 +63,8 @@ import {
   navigate,
   getRedirectBasedSignUpUrl,
   Platform,
-  isEmpty
+  isEmpty,
+  executeEmbeddedSignUpFlowV2
 } from "@asgardeo/browser";
 
 // src/__temp__/api.ts
@@ -778,16 +779,22 @@ var AsgardeoReactClient = class extends AsgardeoBrowserClient {
     return Promise.resolve(String(response));
   }
   async signUp(...args) {
-    const configData = await this.asgardeo.getConfigData();
+    const config = await this.asgardeo.getConfigData();
     const firstArg = args[0];
+    const baseUrl = config?.baseUrl;
+    if (config.platform === Platform.AsgardeoV2) {
+      return executeEmbeddedSignUpFlowV2({
+        baseUrl,
+        payload: firstArg
+      });
+    }
     if (typeof firstArg === "object" && "flowType" in firstArg) {
-      const baseUrl = configData?.baseUrl;
       return executeEmbeddedSignUpFlow({
         baseUrl,
         payload: firstArg
       });
     }
-    navigate(getRedirectBasedSignUpUrl(configData));
+    navigate(getRedirectBasedSignUpUrl(config));
   }
   async request(requestConfig) {
     return this.asgardeo.httpRequest(requestConfig);
@@ -1283,6 +1290,7 @@ var ThemeProvider = ({
     };
   }, [inheritFromBranding, brandingTheme, themeConfig]);
   const theme = useMemo4(() => createTheme(finalThemeConfig, colorScheme === "dark"), [finalThemeConfig, colorScheme]);
+  const direction = finalThemeConfig?.direction || "ltr";
   const handleThemeChange = useCallback4((isDark) => {
     setColorScheme(isDark ? "dark" : "light");
   }, []);
@@ -1321,9 +1329,15 @@ var ThemeProvider = ({
   useEffect2(() => {
     applyThemeToDOM(theme);
   }, [theme]);
+  useEffect2(() => {
+    if (typeof document !== "undefined") {
+      document.documentElement.dir = direction;
+    }
+  }, [direction]);
   const value = {
     theme,
     colorScheme,
+    direction,
     toggleTheme,
     isBrandingLoading,
     brandingError,
@@ -1785,7 +1799,10 @@ var AsgardeoProvider = ({
         ThemeProvider_default,
         {
           inheritFromBranding: preferences?.theme?.inheritFromBranding,
-          theme: preferences?.theme?.overrides,
+          theme: {
+            ...preferences?.theme?.overrides,
+            direction: preferences?.theme?.direction
+          },
           mode: getActiveTheme(preferences?.theme?.mode),
           children: /* @__PURE__ */ jsx7(FlowProvider_default, { children: /* @__PURE__ */ jsx7(UserProvider_default, { profile: userProfile, onUpdateProfile: handleProfileUpdate, children: /* @__PURE__ */ jsx7(
             OrganizationProvider_default,
@@ -3288,13 +3305,13 @@ import { useMemo as useMemo11 } from "react";
 var useStyles4 = (theme, colorScheme, helperTextAlign, helperTextMarginLeft, hasError) => {
   return useMemo11(() => {
     const formControl = css4`
-      text-align: left;
+      text-align: start;
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
     const helperText = css4`
       margin-top: calc(${theme.vars.spacing.unit} / 2);
-      text-align: ${helperTextAlign};
-      ${helperTextMarginLeft && `margin-left: ${helperTextMarginLeft};`}
+      text-align: ${helperTextAlign === "left" ? "start" : helperTextAlign};
+      ${helperTextMarginLeft && `margin-inline-start: ${helperTextMarginLeft};`}
     `;
     const helperTextError = css4`
       color: ${theme.vars.colors.error.main};
@@ -3428,8 +3445,8 @@ import { css as css6 } from "@emotion/css";
 import { useMemo as useMemo13 } from "react";
 var useStyles6 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon) => {
   return useMemo13(() => {
-    const leftPadding = hasStartIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
-    const rightPadding = hasEndIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
+    const inlineStartPadding = hasStartIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
+    const inlineEndPadding = hasEndIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
     const inputContainer = css6`
       position: relative;
       display: flex;
@@ -3437,7 +3454,9 @@ var useStyles6 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIc
     `;
     const input = css6`
       width: 100%;
-      padding: ${theme.vars.spacing.unit} ${rightPadding} ${theme.vars.spacing.unit} ${leftPadding};
+      padding-block: ${theme.vars.spacing.unit};
+      padding-inline-start: ${inlineStartPadding};
+      padding-inline-end: ${inlineEndPadding};
       border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
       border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
       font-size: ${theme.vars.typography.fontSizes.md};
@@ -3508,11 +3527,11 @@ var useStyles6 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIc
     `;
     const startIcon = css6`
       ${icon};
-      left: ${theme.vars.spacing.unit};
+      inset-inline-start: ${theme.vars.spacing.unit};
     `;
     const endIcon = css6`
       ${icon};
-      right: ${theme.vars.spacing.unit};
+      inset-inline-end: ${theme.vars.spacing.unit};
     `;
     return {
       inputContainer,
@@ -4227,7 +4246,7 @@ var useStyles11 = (theme, colorScheme, hasError, required) => {
     const inputStyles = css11`
       width: calc(${theme.vars.spacing.unit} * 2.5);
       height: calc(${theme.vars.spacing.unit} * 2.5);
-      margin-right: ${theme.vars.spacing.unit};
+      margin-inline-end: ${theme.vars.spacing.unit};
       accent-color: ${theme.vars.colors.primary.main};
       cursor: pointer;
 
@@ -5748,8 +5767,9 @@ var useStyles14 = (theme, colorScheme, orientation, variant, color, hasChildren)
       height: 100%;
       min-height: calc(${theme.vars.spacing.unit} * 2);
       width: 1px;
-      border-left: 1px ${borderStyle} ${baseColor};
-      margin: 0 calc(${theme.vars.spacing.unit} * 1);
+      border-inline-start: 1px ${borderStyle} ${baseColor};
+      margin-block: 0;
+      margin-inline: calc(${theme.vars.spacing.unit} * 1);
     `;
     const horizontalDivider = css14`
       display: flex;
@@ -7638,7 +7658,7 @@ var SignIn_default2 = SignIn2;
 // src/components/presentation/SignUp/BaseSignUp.tsx
 import {
   EmbeddedFlowStatus,
-  EmbeddedFlowComponentType as EmbeddedFlowComponentType4,
+  EmbeddedFlowComponentType as EmbeddedFlowComponentType5,
   EmbeddedFlowResponseType,
   withVendorCSSClassPrefix as withVendorCSSClassPrefix21,
   AsgardeoAPIError as AsgardeoAPIError3
@@ -8154,6 +8174,110 @@ var renderSignUpComponents = (components, formValues, touchedFields, formErrors,
   )
 ).filter(Boolean);
 
+// src/components/presentation/SignUp/transformer.ts
+import { EmbeddedFlowComponentType as EmbeddedFlowComponentType4 } from "@asgardeo/browser";
+var generateId2 = (prefix) => {
+  const suffix = Math.random().toString(36).substring(2, 6);
+  return `${prefix}_${suffix}`;
+};
+var getInputVariant2 = (type) => {
+  switch (type.toLowerCase()) {
+    case "email":
+      return "EMAIL";
+    case "password":
+      return "PASSWORD";
+    default:
+      return "TEXT";
+  }
+};
+var getInputLabel2 = (name, type, t) => {
+  const i18nKey = `elements.fields.${name}`;
+  const label = t(i18nKey);
+  if (label === i18nKey || !label) {
+    return name.charAt(0).toUpperCase() + name.slice(1);
+  }
+  return label;
+};
+var getInputPlaceholder2 = (name, type, t) => {
+  const label = getInputLabel2(name, type, t);
+  const placeholder = t("elements.fields.placeholder", { field: label });
+  if (!placeholder || placeholder === "elements.fields.placeholder") {
+    return `Enter your ${label}`;
+  }
+  return placeholder;
+};
+var convertSimpleInputToComponent2 = (input, t) => {
+  const variant = getInputVariant2(input.type);
+  const label = getInputLabel2(input.name, input.type, t);
+  const placeholder = getInputPlaceholder2(input.name, input.type, t);
+  return {
+    id: generateId2("input"),
+    type: EmbeddedFlowComponentType4.Input,
+    variant,
+    config: {
+      type: input.type === "string" ? "text" : input.type,
+      label,
+      placeholder,
+      required: input.required,
+      identifier: input.name,
+      hint: ""
+    },
+    components: []
+  };
+};
+var convertActionToComponent2 = (action, t) => {
+  const i18nKey = `elements.buttons.${action.id}`;
+  let text = t(i18nKey);
+  if (!text || text === i18nKey) {
+    text = action.id.replace(/_/g, " ");
+    text = text.charAt(0).toUpperCase() + text.slice(1);
+  }
+  return {
+    id: generateId2("action"),
+    type: EmbeddedFlowComponentType4.Button,
+    variant: "SECONDARY",
+    config: {
+      type: "button",
+      text,
+      actionId: action.id,
+      actionType: action.type
+    },
+    components: []
+  };
+};
+var transformSimpleToComponentDriven2 = (response, t) => {
+  const inputComponents = response?.data?.inputs?.map((input) => convertSimpleInputToComponent2(input, t)) || [];
+  const actionComponents = response?.data?.actions?.map((action) => convertActionToComponent2(action, t)) || [];
+  const submitButton = inputComponents.length > 0 ? {
+    id: generateId2("button"),
+    type: EmbeddedFlowComponentType4.Button,
+    variant: "PRIMARY",
+    config: {
+      type: "submit",
+      text: t("elements.buttons.signUp")
+    },
+    components: []
+  } : null;
+  const formComponents = [];
+  if (inputComponents.length > 0) {
+    formComponents.push(...inputComponents);
+    if (submitButton) formComponents.push(submitButton);
+  }
+  const result = [];
+  if (formComponents.length > 0) {
+    result.push({
+      id: generateId2("form"),
+      type: EmbeddedFlowComponentType4.Form,
+      config: {},
+      components: formComponents
+    });
+  }
+  if (actionComponents.length > 0) {
+    result.push(...actionComponents);
+  }
+  return result;
+};
+
 // src/components/presentation/SignUp/BaseSignUp.styles.ts
 import { css as css18 } from "@emotion/css";
 import { useMemo as useMemo25 } from "react";
@@ -8319,7 +8443,8 @@ var BaseSignUpContent = ({
   messageClassName = "",
   size = "medium",
   variant = "outlined",
-  isInitialized
+  isInitialized,
+  children
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const { t } = useTranslation_default();
@@ -8331,12 +8456,31 @@ var BaseSignUpContent = ({
   const [error, setError] = useState17(null);
   const [formData, setFormData] = useState17({});
   const initializationAttemptedRef = useRef5(false);
+  const normalizeFlowResponse2 = useCallback11(
+    (response) => {
+      if (response?.data?.components && Array.isArray(response.data.components)) {
+        return response;
+      }
+      if (response?.data && (response.data.inputs || response.data.actions)) {
+        const transformedComponents = transformSimpleToComponentDriven2(response, t);
+        return {
+          ...response,
+          data: {
+            ...response.data,
+            components: transformedComponents
+          }
+        };
+      }
+      return response;
+    },
+    [t]
+  );
   const extractFormFields = useCallback11(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
         comps.forEach((component) => {
-          if (component.type === EmbeddedFlowComponentType4.Input) {
+          if (component.type === EmbeddedFlowComponentType5.Input) {
             const config = component.config || {};
             fields.push({
               name: config.name || component.id,
@@ -8426,7 +8570,8 @@ var BaseSignUpContent = ({
         inputs: filteredInputs,
         actionId: component.id
       };
-      const response = await onSubmit(payload);
+      const rawResponse = await onSubmit(payload);
+      const response = normalizeFlowResponse2(rawResponse);
       onFlowChange?.(response);
       if (response.flowStatus === EmbeddedFlowStatus.Complete) {
         onComplete?.(response);
@@ -8628,7 +8773,8 @@ var BaseSignUpContent = ({
         setIsLoading(true);
         setError(null);
         try {
-          const response = await onInitialize();
+          const rawResponse = await onInitialize();
+          const response = normalizeFlowResponse2(rawResponse);
           setCurrentFlow(response);
           setIsFlowInitialized(true);
           onFlowChange?.(response);
@@ -8656,9 +8802,28 @@ var BaseSignUpContent = ({
     onError,
     onFlowChange,
     setupFormFields,
+    normalizeFlowResponse2,
     afterSignUpUrl,
     t
   ]);
+  if (children) {
+    const renderProps = {
+      values: formValues,
+      errors: formErrors,
+      touched: touchedFields,
+      isValid: isFormValid,
+      isLoading,
+      error,
+      components: currentFlow?.data?.components || [],
+      handleInputChange,
+      handleSubmit,
+      validateForm,
+      title: flowTitle || t("signup.title"),
+      subtitle: flowSubtitle || t("signup.subtitle"),
+      messages: flowMessages || []
+    };
+    return /* @__PURE__ */ jsx66("div", { className: containerClasses, children: children(renderProps) });
+  }
   if (!isFlowInitialized && isLoading) {
     return /* @__PURE__ */ jsx66(Card_default, { className: cx21(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx66(Card_default.Content, { children: /* @__PURE__ */ jsx66("div", { className: styles.loadingContainer, children: /* @__PURE__ */ jsx66(Spinner_default, { size: "medium" }) }) }) });
   }
@@ -8692,7 +8857,8 @@ var BaseSignUp_default = BaseSignUp;
 // src/components/presentation/SignUp/SignUp.tsx
 import {
   EmbeddedFlowResponseType as EmbeddedFlowResponseType2,
-  EmbeddedFlowType as EmbeddedFlowType2
+  EmbeddedFlowType as EmbeddedFlowType2,
+  Platform as Platform4
 } from "@asgardeo/browser";
 import { jsx as jsx67 } from "react/jsx-runtime";
 var SignUp = ({
@@ -8702,14 +8868,17 @@ var SignUp = ({
   onError,
   onComplete,
   shouldRedirectAfterSignUp = true,
+  children,
   ...rest
 }) => {
-  const { signUp, isInitialized } = useAsgardeo_default();
-  const handleInitialize = async (payload) => await signUp(
-    payload || {
-      flowType: EmbeddedFlowType2.Registration
-    }
-  );
+  const { signUp, isInitialized, applicationId, platform } = useAsgardeo_default();
+  const handleInitialize = async (payload) => {
+    const initialPayload = payload || {
+      flowType: EmbeddedFlowType2.Registration,
+      ...platform === Platform4.AsgardeoV2 && applicationId && { applicationId }
+    };
+    return await signUp(initialPayload);
+  };
   const handleOnSubmit = async (payload) => await signUp(payload);
   const handleComplete = (response) => {
     onComplete?.(response);
@@ -8732,6 +8901,7 @@ var SignUp = ({
       className,
       size,
       isInitialized,
+      children,
       ...rest
     }
   );
@@ -9592,7 +9762,7 @@ var useStyles22 = (theme, colorScheme) => {
     display: flex;
     gap: calc(${theme.vars.spacing.unit} / 2);
     align-items: center;
-    margin-left: calc(${theme.vars.spacing.unit} * 4);
+    margin-inline-start: calc(${theme.vars.spacing.unit} * 4);
   `;
   const complexTextarea = css22`
     min-height: 60px;
@@ -9659,7 +9829,7 @@ var useStyles22 = (theme, colorScheme) => {
       width: 120px;
       flex-shrink: 0;
       line-height: 28px;
-      text-align: left;
+      text-align: start;
     `;
     const value = css22`
       color: ${theme.vars.colors.text.primary};
@@ -9674,7 +9844,7 @@ var useStyles22 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
       max-width: 350px;
-      text-align: left;
+      text-align: start;
 
       .${withVendorCSSClassPrefix25("form-control")} {
         margin-bottom: 0;
@@ -10324,7 +10494,7 @@ var useStyles23 = (theme, colorScheme) => {
       border: none;
       cursor: pointer;
       font-size: 0.875rem;
-      text-align: left;
+      text-align: start;
       border-radius: ${theme.vars.borderRadius.medium};
       transition: none;
       box-shadow: none;
@@ -10353,7 +10523,7 @@ var useStyles23 = (theme, colorScheme) => {
       background: none;
       cursor: pointer;
       font-size: 0.875rem;
-      text-align: left;
+      text-align: start;
       border-radius: ${theme.vars.borderRadius.medium};
       transition: background-color 0.15s ease-in-out;
 
@@ -10838,7 +11008,7 @@ var useStyles24 = (theme, colorScheme) => {
     `;
     const manageButton = css24`
       min-width: auto;
-      margin-left: auto;
+      margin-inline-start: auto;
     `;
     const menu = css24`
       display: flex;
@@ -10858,7 +11028,7 @@ var useStyles24 = (theme, colorScheme) => {
       background-color: transparent;
       cursor: pointer;
       font-size: 0.875rem;
-      text-align: left;
+      text-align: start;
       border-radius: ${theme.vars.borderRadius.medium};
       transition: background-color 0.15s ease-in-out;
 
@@ -10996,11 +11166,12 @@ var BaseOrganizationSwitcher = ({
   avatarSize = 24,
   fallback = null
 }) => {
-  const { theme, colorScheme } = useTheme_default();
+  const { theme, colorScheme, direction } = useTheme_default();
   const styles = BaseOrganizationSwitcher_styles_default(theme, colorScheme);
   const [isOpen, setIsOpen] = useState23(false);
   const [hoveredItemIndex, setHoveredItemIndex] = useState23(null);
   const { t } = useTranslation_default();
+  const isRTL = direction === "rtl";
   const { refs, floatingStyles, context } = useFloating3({
     open: isOpen,
     onOpenChange: setIsOpen,
@@ -11082,7 +11253,7 @@ var BaseOrganizationSwitcher = ({
             /* @__PURE__ */ jsx86(Building_default, { width: avatarSize, height: avatarSize }),
             showTriggerLabel && /* @__PURE__ */ jsx86(Typography_default, { variant: "body2", className: cx27(styles.triggerLabel), children: t("organization.switcher.select.organization") })
           ] }),
-          /* @__PURE__ */ jsx86(ChevronDown_default, { width: "16", height: "16" })
+          /* @__PURE__ */ jsx86("span", { style: { transform: isRTL ? "scaleX(-1)" : "none", display: "inline-flex" }, children: /* @__PURE__ */ jsx86(ChevronDown_default, { width: "16", height: "16" }) })
         ]
       }
     ),
@@ -12974,10 +13145,7 @@ var useStyles29 = (theme, colorScheme) => {
 
       &__loading-overlay {
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        inset: 0;
         background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
         display: flex;
         align-items: center;
@@ -13002,10 +13170,7 @@ var useStyles29 = (theme, colorScheme) => {
       `,
       loadingOverlay: css29`
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        inset: 0;
         background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
         display: flex;
         align-items: center;