@asgardeo/react 0.4.0 → 0.5.1

package/dist/components/presentation/OrganizationProfile/BaseOrganizationProfile.d.ts

@@ -0,0 +1,153 @@
+/**
+ * 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 { OrganizationDetails } from '@asgardeo/browser';
+import { FC, ReactElement } from 'react';
+export interface BaseOrganizationProfileProps {
+    /**
+     * Callback fired when the cancel button is clicked (only used in editable mode).
+     */
+    cancelButtonText?: string;
+    /**
+     * Whether to display the profile in a card layout.
+     */
+    cardLayout?: boolean;
+    /**
+     * CSS class name for styling the component.
+     */
+    className?: string;
+    /**
+     * Whether the organization profile is editable.
+     */
+    editable?: boolean;
+    /**
+     * Component to render when no organization data is available.
+     */
+    fallback?: ReactElement;
+    /**
+     * Array of field configurations to display. Each field specifies what organization data to show.
+     */
+    fields?: Array<{
+        key: keyof OrganizationDetails | 'attributes';
+        label: string;
+        editable?: boolean;
+        render?: (value: any, organization: OrganizationDetails) => React.ReactNode;
+    }>;
+    /**
+     * Display mode for the component.
+     */
+    mode?: 'inline' | 'popup';
+    /**
+     * Callback fired when a field value changes.
+     */
+    onChange?: (field: string, value: any) => void;
+    /**
+     * Callback fired when the popup should be closed (only used in popup mode).
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback fired when the form is submitted (only used in editable mode).
+     */
+    onSubmit?: (data: any) => void;
+    /**
+     * Callback fired when the organization should be updated.
+     */
+    onUpdate?: (payload: any) => Promise<void>;
+    /**
+     * Whether the popup is open (only used in popup mode).
+     */
+    open?: boolean;
+    /**
+     * The organization details to display.
+     */
+    organization?: OrganizationDetails | null;
+    /**
+     * Text for the save button (only used in editable mode).
+     */
+    saveButtonText?: string;
+    /**
+     * Custom title for the profile.
+     */
+    title?: string;
+}
+/**
+ * BaseOrganizationProfile component displays organization information in a
+ * structured and styled format. It shows organization details such as name,
+ * description, status, and other available information with support for inline editing.
+ *
+ * This is the base component that can be used in any context where you have
+ * an organization object available. It provides editing capabilities similar to
+ * the UserProfile component, allowing users to modify organization fields directly.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <BaseOrganizationProfile organization={organizationData} />
+ *
+ * // With editing enabled and update handler
+ * <BaseOrganizationProfile
+ *   organization={organizationData}
+ *   editable={true}
+ *   onUpdate={async (payload) => {
+ *     await updateOrganizationAPI(orgId, payload);
+ *   }}
+ * />
+ *
+ * // With card layout and custom title
+ * <BaseOrganizationProfile
+ *   organization={organizationData}
+ *   cardLayout={true}
+ *   title="Organization Details"
+ *   fallback={<div>No organization data available</div>}
+ * />
+ *
+ * // With custom fields configuration
+ * <BaseOrganizationProfile
+ *   organization={organizationData}
+ *   fields={[
+ *     { key: 'id', label: 'Organization ID', editable: false },
+ *     { key: 'name', label: 'Organization Name', editable: true },
+ *     { key: 'description', label: 'Description', editable: true, render: (value) => value || 'No description' },
+ *     { key: 'created', label: 'Created Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
+ *     { key: 'attributes', label: 'Custom Attributes', editable: true }
+ *   ]}
+ *   onUpdate={handleUpdate}
+ * />
+ *
+ * // In popup mode
+ * <BaseOrganizationProfile
+ *   organization={organizationData}
+ *   mode="popup"
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="Edit Organization"
+ * />
+ * ```
+ * <BaseOrganizationProfile
+ *   organization={organizationData}
+ *   fields={[
+ *     { key: 'id', label: 'Organization ID' },
+ *     { key: 'name', label: 'Organization Name' },
+ *     { key: 'description', label: 'Description', render: (value) => value || 'No description' },
+ *     { key: 'created', label: 'Created Date', render: (value) => new Date(value).toLocaleDateString() },
+ *     { key: 'attributes', label: 'Custom Attributes' }
+ *   ]}
+ * />
+ * ```
+ */
+declare const BaseOrganizationProfile: FC<BaseOrganizationProfileProps>;
+export default BaseOrganizationProfile;

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

@@ -0,0 +1,119 @@
+/**
+ * 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, ReactElement } from 'react';
+import { BaseOrganizationProfileProps } from './BaseOrganizationProfile';
+/**
+ * Props for the OrganizationProfile component.
+ * Extends BaseOrganizationProfileProps but makes the organization prop optional
+ * since it will be fetched using the organizationId
+ */
+export type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organization' | 'mode'> & {
+    /**
+     * Component to show when there's an error loading organization data.
+     */
+    errorFallback?: ReactElement;
+    /**
+     * Component to show while loading organization data.
+     */
+    loadingFallback?: ReactElement;
+    /**
+     * Display mode for the component.
+     */
+    mode?: 'default' | 'popup';
+    /**
+     * Callback fired when the popup should be closed (only used in popup mode).
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback fired when the organization should be updated.
+     */
+    onUpdate?: (payload: any) => Promise<void>;
+    /**
+     * Whether the popup is open (only used in popup mode).
+     */
+    open?: boolean;
+    /**
+     * The ID of the organization to fetch and display.
+     */
+    organizationId: string;
+    /**
+     * Custom title for the popup dialog (only used in popup mode).
+     */
+    popupTitle?: string;
+};
+/**
+ * OrganizationProfile component displays organization information in a
+ * structured and styled format. It automatically fetches organization details
+ * using the provided organization ID and displays them using BaseOrganizationProfile.
+ *
+ * The component supports editing functionality, allowing users to modify organization
+ * fields inline. Updates are automatically synced with the backend via the SCIM2 API.
+ *
+ * This component is the React-specific implementation that automatically
+ * retrieves the organization data from Asgardeo API.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with editing enabled (default)
+ * <OrganizationProfile organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1" />
+ *
+ * // Read-only mode
+ * <OrganizationProfile
+ *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+ *   editable={false}
+ * />
+ *
+ * // With card layout and custom fallbacks
+ * <OrganizationProfile
+ *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+ *   cardLayout={true}
+ *   loadingFallback={<div>Loading organization...</div>}
+ *   errorFallback={<div>Failed to load organization</div>}
+ *   fallback={<div>No organization data available</div>}
+ * />
+ *
+ * // With custom fields configuration and update callback
+ * <OrganizationProfile
+ *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+ *   fields={[
+ *     { key: 'id', label: 'Organization ID', editable: false },
+ *     { key: 'name', label: 'Organization Name', editable: true },
+ *     { key: 'description', label: 'Description', editable: true, render: (value) => value || 'No description' },
+ *     { key: 'created', label: 'Created Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
+ *     { key: 'lastModified', label: 'Last Modified Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
+ *     { key: 'attributes', label: 'Custom Attributes', editable: true }
+ *   ]}
+ *   onUpdate={async (payload) => {
+ *     console.log('Organization updated:', payload);
+ *     // payload contains the updated field values
+ *     // The component automatically converts these to patch operations
+ *   }}
+ * />
+ *
+ * // In popup mode
+ * <OrganizationProfile
+ *   organizationId="0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1"
+ *   mode="popup"
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   popupTitle="Edit Organization Profile"
+ * />
+ * ```
+ */
+declare const OrganizationProfile: FC<OrganizationProfileProps>;
+export default OrganizationProfile;

package/dist/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.d.ts

@@ -0,0 +1,141 @@
+/**
+ * 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, ReactElement, ReactNode } from 'react';
+interface MenuItem {
+    href?: string;
+    icon?: ReactNode;
+    label: ReactNode;
+    onClick?: () => void;
+}
+/**
+ * Interface for organization data.
+ */
+export interface Organization {
+    /**
+     * Avatar URL for the organization.
+     */
+    avatar?: string;
+    /**
+     * Unique identifier for the organization.
+     */
+    id: string;
+    /**
+     * Number of members in the organization.
+     */
+    memberCount?: number;
+    /**
+     * Additional metadata for the organization.
+     */
+    metadata?: Record<string, any>;
+    /**
+     * Display name of the organization.
+     */
+    name: string;
+    /**
+     * User's role in the organization.
+     */
+    role?: 'owner' | 'admin' | 'member';
+    /**
+     * URL slug for the organization.
+     */
+    slug?: string;
+}
+/**
+ * Props interface for the BaseOrganizationSwitcher component.
+ */
+export interface BaseOrganizationSwitcherProps {
+    /**
+     * Optional size for the avatar
+     */
+    avatarSize?: number;
+    /**
+     * Custom class name for styling.
+     */
+    className?: string;
+    /**
+     * Currently selected organization.
+     */
+    currentOrganization?: Organization;
+    /**
+     * Error message to display.
+     */
+    error?: string;
+    /**
+     * Optional element to render when no organization is selected.
+     */
+    fallback?: ReactElement;
+    /**
+     * Whether the component is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Additional menu items to display at the bottom of the dropdown.
+     */
+    menuItems?: MenuItem[];
+    /**
+     * Handler for when an organization is selected.
+     */
+    onOrganizationSwitch: (organization: Organization) => void;
+    /**
+     * Handler for when the manage profile button is clicked.
+     */
+    onManageProfile?: () => void;
+    /**
+     * List of available organizations.
+     */
+    organizations: Organization[];
+    /**
+     * The HTML element ID where the portal should be mounted
+     */
+    portalId?: string;
+    /**
+     * Custom render function for the error state.
+     */
+    renderError?: (error: string) => ReactElement;
+    /**
+     * Custom render function for the loading state.
+     */
+    renderLoading?: () => ReactElement;
+    /**
+     * Custom render function for the organization item.
+     */
+    renderOrganization?: (organization: Organization, isSelected: boolean) => ReactElement;
+    /**
+     * Whether to show the member count.
+     */
+    showMemberCount?: boolean;
+    /**
+     * Whether to show the role badge.
+     */
+    showRole?: boolean;
+    /**
+     * Show organization name next to avatar in the trigger button
+     */
+    showTriggerLabel?: boolean;
+    /**
+     * Custom styles for the component.
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * BaseOrganizationSwitcher component displays an organization selector with a dropdown menu.
+ * When clicked, it shows a popover with available organizations to switch between.
+ * This component serves as the base for framework-specific implementations.
+ */
+export declare const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps>;
+export default BaseOrganizationSwitcher;

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

@@ -0,0 +1,70 @@
+/**
+ * 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, ReactElement } from 'react';
+import { BaseOrganizationSwitcherProps, Organization } from './BaseOrganizationSwitcher';
+/**
+ * Props interface for the OrganizationSwitcher component.
+ * Makes organizations optional since they'll be retrieved from OrganizationContext.
+ */
+export interface OrganizationSwitcherProps extends Omit<BaseOrganizationSwitcherProps, 'organizations' | 'currentOrganization' | 'onOrganizationSwitch'> {
+    /**
+     * Optional override for current organization (will use context if not provided)
+     */
+    currentOrganization?: Organization;
+    /**
+     * Fallback element to render when the user is not signed in.
+     */
+    fallback?: ReactElement;
+    /**
+     * Optional callback for organization switch (will use context if not provided)
+     */
+    onOrganizationSwitch?: (organization: Organization) => Promise<void> | void;
+    /**
+     * Optional override for organizations list (will use context if not provided)
+     */
+    organizations?: Organization[];
+}
+/**
+ * OrganizationSwitcher component that provides organization switching functionality.
+ * This component automatically retrieves organizations from the OrganizationContext.
+ * You can also override the organizations, currentOrganization, and onOrganizationSwitch
+ * by passing them as props.
+ *
+ * @example
+ * ```tsx
+ * import { OrganizationSwitcher } from '@asgardeo/react';
+ *
+ * // Basic usage - uses OrganizationContext
+ * <OrganizationSwitcher />
+ *
+ * // With custom organization switch handler
+ * <OrganizationSwitcher
+ *   onOrganizationSwitch={(org) => {
+ *     console.log('Switching to:', org.name);
+ *     // Custom logic here
+ *   }}
+ * />
+ *
+ * // With fallback for unauthenticated users
+ * <OrganizationSwitcher
+ *   fallback={<div>Please sign in to view organizations</div>}
+ * />
+ * ```
+ */
+export declare const OrganizationSwitcher: FC<OrganizationSwitcherProps>;
+export default OrganizationSwitcher;

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

@@ -15,40 +15,34 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ApplicationNativeAuthenticationInitiateResponse, ApplicationNativeAuthenticationHandleResponse } from '@asgardeo/browser';
+import { EmbeddedSignInFlowInitiateResponse, EmbeddedSignInFlowHandleResponse, EmbeddedSignInFlowHandleRequestPayload, EmbeddedFlowExecuteRequestConfig } from '@asgardeo/browser';
 import { FC } from 'react';
+import { CardProps } from '../../primitives/Card/Card';
 /**
  * Props for the BaseSignIn component.
  */
 export interface BaseSignInProps {
+    afterSignInUrl?: string;
     /**
-     * Function to initialize authentication flow.
-     * @returns Promise resolving to the initial authentication response.
+     * Custom CSS class name for the submit button.
      */
-    onInitialize: () => Promise<ApplicationNativeAuthenticationInitiateResponse>;
+    buttonClassName?: string;
     /**
-     * Function to handle authentication steps.
-     * @param payload - The authentication payload.
-     * @returns Promise resolving to the authentication response.
+     * Custom CSS class name for the form container.
      */
-    onSubmit: (flow: {
-        requestConfig?: {
-            method: string;
-            url: string;
-        };
-        payload: {
-            flowId: string;
-            selectedAuthenticator: {
-                authenticatorId: string;
-                params: Record<string, string>;
-            };
-        };
-    }) => Promise<ApplicationNativeAuthenticationHandleResponse>;
+    className?: string;
     /**
-     * Callback function called when authentication is successful.
-     * @param authData - The authentication data returned upon successful completion.
+     * Custom CSS class name for error messages.
      */
-    onSuccess?: (authData: Record<string, any>) => void;
+    errorClassName?: string;
+    /**
+     * Custom CSS class name for form inputs.
+     */
+    inputClassName?: string;
+    /**
+     * Custom CSS class name for info messages.
+     */
+    messageClassName?: string;
     /**
      * Callback function called when authentication fails.
      * @param error - The error that occurred during authentication.
@@ -58,27 +52,27 @@ export interface BaseSignInProps {
      * Callback function called when authentication flow status changes.
      * @param response - The current authentication response.
      */
-    onFlowChange?: (response: ApplicationNativeAuthenticationInitiateResponse | ApplicationNativeAuthenticationHandleResponse) => void;
+    onFlowChange?: (response: EmbeddedSignInFlowInitiateResponse | EmbeddedSignInFlowHandleResponse) => void;
     /**
-     * Custom CSS class name for the form container.
+     * Flag to determine the component is ready to be rendered.
      */
-    className?: string;
+    isLoading?: boolean;
     /**
-     * Custom CSS class name for form inputs.
-     */
-    inputClassName?: string;
-    /**
-     * Custom CSS class name for the submit button.
+     * Function to initialize authentication flow.
+     * @returns Promise resolving to the initial authentication response.
      */
-    buttonClassName?: string;
+    onInitialize?: () => Promise<EmbeddedSignInFlowInitiateResponse>;
     /**
-     * Custom CSS class name for error messages.
+     * Function to handle authentication steps.
+     * @param payload - The authentication payload.
+     * @returns Promise resolving to the authentication response.
      */
-    errorClassName?: string;
+    onSubmit?: (payload: EmbeddedSignInFlowHandleRequestPayload, request: EmbeddedFlowExecuteRequestConfig) => Promise<EmbeddedSignInFlowHandleResponse>;
     /**
-     * Custom CSS class name for info messages.
+     * Callback function called when authentication is successful.
+     * @param authData - The authentication data returned upon successful completion.
      */
-    messageClassName?: string;
+    onSuccess?: (authData: Record<string, any>) => void;
     /**
      * Size variant for the component.
      */
@@ -86,8 +80,7 @@ export interface BaseSignInProps {
     /**
      * Theme variant for the component.
      */
-    variant?: 'default' | 'outlined' | 'filled';
-    afterSignInUrl?: string;
+    variant?: CardProps['variant'];
 }
 /**
  * Base SignIn component that provides native authentication flow.

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

@@ -16,23 +16,12 @@
  * under the License.
  */
 import { FC } from 'react';
+import { BaseSignInProps } from './BaseSignIn';
 /**
  * Props for the SignIn component.
+ * Extends BaseSignInProps for full compatibility with the React BaseSignIn component
  */
-export interface SignInProps {
-    /**
-     * Additional CSS class names for customization.
-     */
-    className?: string;
-    /**
-     * Size variant for the component.
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Theme variant for the component.
-     */
-    variant?: 'default' | 'outlined' | 'filled';
-}
+export type SignInProps = Pick<BaseSignInProps, 'className' | 'onSuccess' | 'onError' | 'variant' | 'size'>;
 /**
  * A styled SignIn component that provides native authentication flow with pre-built styling.
  * This component handles the API calls for authentication and delegates UI logic to BaseSignIn.

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

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ApplicationNativeAuthenticationAuthenticator, WithPreferences } from '@asgardeo/browser';
+import { EmbeddedSignInFlowAuthenticator, WithPreferences } from '@asgardeo/browser';
 import { ReactElement } from 'react';
 /**
  * Base props that all sign-in option components share.
@@ -24,7 +24,7 @@ export interface BaseSignInOptionProps extends WithPreferences {
     /**
      * The authenticator configuration.
      */
-    authenticator: ApplicationNativeAuthenticationAuthenticator;
+    authenticator: EmbeddedSignInFlowAuthenticator;
     /**
      * Current form values.
      */
@@ -48,7 +48,7 @@ export interface BaseSignInOptionProps extends WithPreferences {
     /**
      * Callback function called when the option is submitted.
      */
-    onSubmit: (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => void;
+    onSubmit: (authenticator: EmbeddedSignInFlowAuthenticator, formData?: Record<string, string>) => void;
     /**
      * Custom CSS class name for form inputs.
      */
@@ -69,7 +69,7 @@ export declare const createSignInOption: (props: BaseSignInOptionProps) => React
 /**
  * Convenience function that creates the appropriate sign-in option component from an authenticator.
  */
-export declare const createSignInOptionFromAuthenticator: (authenticator: ApplicationNativeAuthenticationAuthenticator, formValues: Record<string, string>, touchedFields: Record<string, boolean>, isLoading: boolean, onInputChange: (param: string, value: string) => void, onSubmit: (authenticator: ApplicationNativeAuthenticationAuthenticator, formData?: Record<string, string>) => void, options?: {
+export declare const createSignInOptionFromAuthenticator: (authenticator: EmbeddedSignInFlowAuthenticator, formValues: Record<string, string>, touchedFields: Record<string, boolean>, isLoading: boolean, onInputChange: (param: string, value: string) => void, onSubmit: (authenticator: EmbeddedSignInFlowAuthenticator, formData?: Record<string, string>) => void, options?: {
     inputClassName?: string;
     buttonClassName?: string;
     error?: string | null;