@asgardeo/react 0.5.33 → 0.6.1

package/dist/components/factories/FieldFactory.d.ts

@@ -46,6 +46,10 @@ export interface FieldConfig {
      * Callback function when the field value changes.
      */
     onChange: (value: string) => void;
+    /**
+     * Callback function when the field loses focus.
+     */
+    onBlur?: () => void;
     /**
      * Whether the field is disabled.
      */

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

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { FC } from 'react';
+import { BaseSignInProps as BaseSignInV1Props } from './non-component-driven/BaseSignIn';
+import { BaseSignInProps as BaseSignInV2Props } from './component-driven/BaseSignIn';
+/**
+ * Props for the BaseSignIn component.
+ * Extends BaseSignInV1Props & BaseSignInV2Props for full compatibility with both React BaseSignIn components.
+ */
+export type BaseSignInProps = BaseSignInV1Props | BaseSignInV2Props;
+declare const BaseSignIn: FC<BaseSignInProps>;
+export default BaseSignIn;

package/dist/components/presentation/SignIn/SignIn.d.ts

@@ -16,13 +16,13 @@
  * under the License.
  */
 import { FC, ReactElement } from 'react';
-import { BaseSignInProps } from './non-component-driven/BaseSignIn';
+import { BaseSignInProps as BaseSignInV1Props } from './non-component-driven/BaseSignIn';
 import { SignInRenderProps } from './component-driven/SignIn';
 /**
  * Props for the SignIn component.
  * Extends BaseSignInProps for full compatibility with the React BaseSignIn component
  */
-export type SignInProps = Pick<BaseSignInProps, 'className' | 'onSuccess' | 'onError' | 'variant' | 'size'> & {
+export type SignInProps = Pick<BaseSignInV1Props, 'className' | 'onSuccess' | 'onError' | 'variant' | 'size'> & {
     /**
      * Render function for custom UI (render props pattern).
      */

package/dist/components/presentation/SignIn/component-driven/SignInOptionFactory.d.ts

@@ -24,6 +24,7 @@ export declare const renderSignInComponents: (components: EmbeddedFlowComponent[
     buttonClassName?: string;
     error?: string | null;
     inputClassName?: string;
+    onInputBlur?: (name: string) => void;
     onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
     size?: "small" | "medium" | "large";
     variant?: any;

package/dist/components/presentation/SignUp/BaseSignUp.d.ts

@@ -16,8 +16,67 @@
  * under the License.
  */
 import { EmbeddedFlowExecuteRequestPayload, EmbeddedFlowExecuteResponse } from '@asgardeo/browser';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { CardProps } from '../../primitives/Card/Card';
+/**
+ * Render props for custom UI rendering
+ */
+export interface BaseSignUpRenderProps {
+    /**
+     * Form values
+     */
+    values: Record<string, string>;
+    /**
+     * Form errors
+     */
+    errors: Record<string, string>;
+    /**
+     * Touched fields
+     */
+    touched: Record<string, boolean>;
+    /**
+     * Whether the form is valid
+     */
+    isValid: boolean;
+    /**
+     * Loading state
+     */
+    isLoading: boolean;
+    /**
+     * Flow components
+     */
+    components: any[];
+    /**
+     * Function to handle input changes
+     */
+    handleInputChange: (name: string, value: string) => void;
+    /**
+     * Function to handle form submission
+     */
+    handleSubmit: (component: any, data?: Record<string, any>) => Promise<void>;
+    /**
+     * Function to validate the form
+     */
+    validateForm: () => {
+        isValid: boolean;
+        errors: Record<string, string>;
+    };
+    /**
+     * Flow title
+     */
+    title: string;
+    /**
+     * Flow subtitle
+     */
+    subtitle: string;
+    /**
+     * Flow messages
+     */
+    messages: Array<{
+        message: string;
+        type: string;
+    }>;
+}
 /**
  * Props for the BaseSignUp component.
  */
@@ -86,6 +145,10 @@ export interface BaseSignUpProps {
      *  Whether to redirect after sign-up.
      */
     shouldRedirectAfterSignUp?: boolean;
+    /**
+     * Render props function for custom UI
+     */
+    children?: (props: BaseSignUpRenderProps) => ReactNode;
 }
 /**
  * Base SignUp component that provides embedded sign-up flow.
@@ -93,6 +156,7 @@ export interface BaseSignUpProps {
  * It accepts API functions as props to maintain framework independence.
  *
  * @example
+ * // Default UI
  * ```tsx
  * import { BaseSignUp } from '@asgardeo/react';
  *
@@ -107,20 +171,41 @@ export interface BaseSignUpProps {
  *         // Your API call to handle sign-up
  *         return await handleSignUp(payload);
  *       }}
- *       onSuccess={(response) => {
- *         console.log('Success:', response);
- *       }}       *       onError={(error) => {
+ *       onError={(error) => {
  *         console.error('Error:', error);
  *       }}
- *       onComplete={(redirectUrl) => {
+ *       onComplete={(response) => {
  *         // Platform-specific redirect handling (e.g., Next.js router.push)
- *         router.push(redirectUrl); // or window.location.href = redirectUrl
+ *         router.push(response); // or window.location.href = redirectUrl
  *       }}
  *       className="max-w-md mx-auto"
  *     />
  *   );
  * };
  * ```
+ *
+ * @example
+ * // Custom UI with render props
+ * ```tsx
+ * <BaseSignUp onInitialize={initializeSignUp} onSubmit={handleSignUp}>
+ *   {({values, errors, handleInputChange, handleSubmit, isLoading, components}) => (
+ *     <div className="custom-form">
+ *       <input
+ *         name="username"
+ *         value={values.username || ''}
+ *         onChange={(e) => handleInputChange('username', e.target.value)}
+ *       />
+ *       {errors.username && <span>{errors.username}</span>}
+ *       <button
+ *         onClick={() => handleSubmit(components[0], values)}
+ *         disabled={isLoading}
+ *       >
+ *         Sign Up
+ *       </button>
+ *     </div>
+ *   )}
+ * </BaseSignUp>
+ * ```
  */
 declare const BaseSignUp: FC<BaseSignUpProps>;
 export default BaseSignUp;

package/dist/components/presentation/SignUp/SignUp.d.ts

@@ -15,17 +15,27 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FC } from 'react';
-import { BaseSignUpProps } from './BaseSignUp';
+import { FC, ReactNode } from 'react';
+import { BaseSignUpProps, BaseSignUpRenderProps } from './BaseSignUp';
+/**
+ * Render props function parameters (re-exported from BaseSignUp for convenience)
+ */
+export type SignUpRenderProps = BaseSignUpRenderProps;
 /**
  * Props for the SignUp component.
  */
-export type SignUpProps = BaseSignUpProps;
+export type SignUpProps = BaseSignUpProps & {
+    /**
+     * Render props function for custom UI
+     */
+    children?: (props: SignUpRenderProps) => ReactNode;
+};
 /**
  * A styled SignUp component that provides embedded sign-up flow with pre-built styling.
  * This component handles the API calls for sign-up and delegates UI logic to BaseSignUp.
  *
  * @example
+ * // Default UI
  * ```tsx
  * import { SignUp } from '@asgardeo/react';
  *
@@ -50,6 +60,45 @@ export type SignUpProps = BaseSignUpProps;
  *   );
  * };
  * ```
+ *
+ * @example
+ * // Custom UI with render props
+ * ```tsx
+ * import { SignUp } from '@asgardeo/react';
+ *
+ * const App = () => {
+ *   return (
+ *     <SignUp
+ *       onError={(error) => console.error('Error:', error)}
+ *       onComplete={(response) => console.log('Success:', response)}
+ *     >
+ *       {({values, errors, handleInputChange, handleSubmit, isLoading, components}) => (
+ *         <div className="custom-signup">
+ *           <h1>Custom Sign Up</h1>
+ *           {isLoading ? (
+ *             <p>Loading...</p>
+ *           ) : (
+ *             <form onSubmit={(e) => {
+ *               e.preventDefault();
+ *               handleSubmit(components[0], values);
+ *             }}>
+ *               <input
+ *                 name="username"
+ *                 value={values.username || ''}
+ *                 onChange={(e) => handleInputChange('username', e.target.value)}
+ *               />
+ *               {errors.username && <span>{errors.username}</span>}
+ *               <button type="submit" disabled={isLoading}>
+ *                 {isLoading ? 'Signing up...' : 'Sign Up'}
+ *               </button>
+ *             </form>
+ *           )}
+ *         </div>
+ *       )}
+ *     </SignUp>
+ *   );
+ * };
+ * ```
  */
 declare const SignUp: FC<SignUpProps>;
 export default SignUp;

package/dist/components/presentation/SignUp/SignUpOptionFactory.d.ts

@@ -29,10 +29,6 @@ export interface BaseSignUpOptionProps extends WithPreferences {
      * The component configuration from the flow response.
      */
     component: EmbeddedFlowComponent;
-    /**
-     * Global error message to display.
-     */
-    error?: string | null;
     /**
      * Form validation errors.
      */
@@ -80,7 +76,6 @@ export declare const createSignUpComponent: ({ component, onSubmit, ...rest }: B
  */
 export declare const createSignUpOptionFromComponent: (component: EmbeddedFlowComponent, formValues: Record<string, string>, touchedFields: Record<string, boolean>, formErrors: Record<string, string>, isLoading: boolean, isFormValid: boolean, onInputChange: (name: string, value: string) => void, options?: {
     buttonClassName?: string;
-    error?: string | null;
     inputClassName?: string;
     key?: string | number;
     onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
@@ -92,7 +87,6 @@ export declare const createSignUpOptionFromComponent: (component: EmbeddedFlowCo
  */
 export declare const renderSignUpComponents: (components: EmbeddedFlowComponent[], formValues: Record<string, string>, touchedFields: Record<string, boolean>, formErrors: Record<string, string>, isLoading: boolean, isFormValid: boolean, onInputChange: (name: string, value: string) => void, options?: {
     buttonClassName?: string;
-    error?: string | null;
     inputClassName?: string;
     onSubmit?: (component: EmbeddedFlowComponent, data?: Record<string, any>) => void;
     size?: "small" | "medium" | "large";

package/dist/components/presentation/SignUp/transformer.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { EmbeddedFlowComponent, EmbeddedSignUpFlowErrorResponseV2, EmbeddedFlowExecuteErrorResponse } from '@asgardeo/browser';
+import { UseTranslation } from '../../../hooks/useTranslation';
+/**
+ * Transform simple flow response to component-driven format
+ */
+export declare const transformSimpleToComponentDriven: (response: any, t: UseTranslation["t"]) => EmbeddedFlowComponent[];
+/**
+ * Extract error message from various error response formats.
+ *
+ * This function supports multiple error formats from different versions of Asgardeo APIs:
+ * - **AsgardeoV2 format**: Uses `failureReason` field from responses with `flowStatus: "ERROR"`
+ * - **AsgardeoV1 format**: Uses `description` or `message` fields from responses with error `code`
+ * - **AsgardeoAPIError**: Parses JSON from error messages to extract detailed error information
+ * - **Standard Error objects**: Falls back to the `message` property
+ * - **String errors**: Returns the string as-is
+ *
+ * @param error - The error object, which can be:
+ *   - AsgardeoV2 error response: `{ flowStatus: "ERROR", failureReason: string, ... }`
+ *   - AsgardeoV1 error response: `{ code: string, message?: string, description?: string, ... }`
+ *   - AsgardeoAPIError instance with JSON message
+ *   - Standard Error object
+ *   - String error message
+ * @param t - Translation function for fallback error messages
+ * @returns Localized error message extracted from the error object
+ *
+ * @example
+ * ```typescript
+ * // AsgardeoV2 error
+ * const v2Error = { flowStatus: "ERROR", failureReason: "User already exists" };
+ * const message = extractErrorMessage(v2Error, t); // "User already exists"
+ *
+ * // AsgardeoV1 error
+ * const v1Error = { code: "FEE-60005", description: "Error while provisioning user" };
+ * const message = extractErrorMessage(v1Error, t); // "Error while provisioning user"
+ *
+ * // AsgardeoAPIError
+ * const apiError = new AsgardeoAPIError('{"failureReason": "Invalid credentials"}');
+ * const message = extractErrorMessage(apiError, t); // "Invalid credentials"
+ * ```
+ */
+export declare const extractErrorMessage: (error: EmbeddedSignUpFlowErrorResponseV2 | EmbeddedFlowExecuteErrorResponse, t: UseTranslation["t"]) => string;
+/**
+ * Check if a response is an error response and extract the error message.
+ *
+ * This function serves as a guard to identify error responses from successful responses
+ * in both AsgardeoV1 and AsgardeoV2 API formats. It's particularly useful for flow
+ * normalization where error responses should be handled differently from success responses.
+ *
+ * **Supported Error Response Formats:**
+ * - **AsgardeoV2**: Responses with `flowStatus: "ERROR"` and `failureReason`
+ * - **AsgardeoV1**: Responses with error `code` and `message`/`description` fields
+ *
+ * @param response - The API response object to check for error indicators
+ * @param t - Translation function for extracting localized error messages
+ * @returns `null` if the response is not an error, or the extracted error message string if it is an error
+ *
+ * @example
+ * ```typescript
+ * // Success response
+ * const successResponse = { flowStatus: "INCOMPLETE", data: { components: [] } };
+ * const error = checkForErrorResponse(successResponse, t); // null
+ *
+ * // AsgardeoV2 error response
+ * const v2ErrorResponse = {
+ *   flowStatus: "ERROR",
+ *   failureReason: "User already exists with the provided username."
+ * };
+ * const error = checkForErrorResponse(v2ErrorResponse, t); // "User already exists with the provided username."
+ *
+ * // AsgardeoV1 error response
+ * const v1ErrorResponse = {
+ *   code: "FEE-60005",
+ *   message: "Error while provisioning user.",
+ *   description: "Error occurred while provisioning user in the request of flow id: ac57315c-6ca6-49dc-8664-fcdcff354f46"
+ * };
+ * const error = checkForErrorResponse(v1ErrorResponse, t); // "Error occurred while provisioning user in the request of flow id: ac57315c-6ca6-49dc-8664-fcdcff354f46"
+ * ```
+ */
+export declare const checkForErrorResponse: (response: any, t: UseTranslation["t"]) => string | null;
+/**
+ * Generic transformer that handles both simple and component-driven responses
+ * Also handles AsgardeoV2 error responses that should be thrown as errors
+ */
+export declare const normalizeFlowResponse: (response: any, t: UseTranslation["t"]) => {
+    flowId: string;
+    components: EmbeddedFlowComponent[];
+};

package/dist/contexts/Theme/ThemeContext.d.ts

@@ -19,6 +19,10 @@ import { Theme } from '@asgardeo/browser';
 export interface ThemeContextValue {
     theme: Theme;
     colorScheme: 'light' | 'dark';
+    /**
+     * The text direction for the UI.
+     */
+    direction: 'ltr' | 'rtl';
     toggleTheme: () => void;
     /**
      * Whether branding theme is currently loading

package/dist/contexts/Theme/types.d.ts

@@ -56,6 +56,11 @@ export interface ThemeConfig {
         small: string;
     };
     colors: ThemeColors;
+    /**
+     * The text direction for the UI.
+     * @default 'ltr'
+     */
+    direction?: 'ltr' | 'rtl';
     shadows: {
         large: string;
         medium: string;

package/dist/index.d.ts

@@ -83,8 +83,8 @@ export { default as SignedOut } from './components/control/SignedOut';
 export * from './components/control/SignedOut';
 export { default as Loading } from './components/control/Loading';
 export * from './components/control/Loading';
-export { default as BaseSignIn } from './components/presentation/SignIn/non-component-driven/BaseSignIn';
-export * from './components/presentation/SignIn/non-component-driven/BaseSignIn';
+export { default as BaseSignIn } from './components/presentation/SignIn/BaseSignIn';
+export * from './components/presentation/SignIn/BaseSignIn';
 export { default as SignIn } from './components/presentation/SignIn/SignIn';
 export * from './components/presentation/SignIn/SignIn';
 export { default as BaseSignUp } from './components/presentation/SignUp/BaseSignUp';