@asgardeo/react 0.4.0 → 0.5.1

package/dist/components/actions/SignInButton/BaseSignInButton.d.ts

@@ -15,20 +15,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ButtonHTMLAttributes, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 import { WithPreferences } from '@asgardeo/browser';
+import { ButtonHTMLAttributes, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 /**
  * Common props shared by all {@link BaseSignInButton} components.
  */
 export interface CommonBaseSignInButtonProps {
-    /**
-     * Function to initiate the sign-in process
-     */
-    signIn: () => Promise<void>;
     /**
      * Loading state during sign-in process
      */
     isLoading?: boolean;
+    /**
+     * Function to initiate the sign-in process
+     */
+    signIn: () => Promise<void>;
 }
 /**
  * Props passed to the render function of {@link BaseSignInButton}

package/dist/components/actions/SignOutButton/BaseSignOutButton.d.ts

@@ -15,20 +15,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ForwardRefExoticComponent, ButtonHTMLAttributes, ReactNode, RefAttributes } from 'react';
 import { WithPreferences } from '@asgardeo/browser';
+import { ForwardRefExoticComponent, ButtonHTMLAttributes, ReactNode, RefAttributes } from 'react';
 /**
  * Common props shared by all {@link BaseSignOutButton} components.
  */
 export interface CommonBaseSignOutButtonProps {
-    /**
-     * Function to initiate the sign-out process
-     */
-    signOut: () => Promise<void>;
     /**
      * Loading state during sign-out process
      */
     isLoading?: boolean;
+    /**
+     * Function to initiate the sign-out process
+     */
+    signOut: () => Promise<void>;
 }
 /**
  * Props passed to the render function of {@link BaseSignOutButton}

package/dist/components/actions/SignUpButton/BaseSignUpButton.d.ts

@@ -15,20 +15,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ForwardRefExoticComponent, ButtonHTMLAttributes, ReactNode, RefAttributes } from 'react';
 import { WithPreferences } from '@asgardeo/browser';
+import { ForwardRefExoticComponent, ButtonHTMLAttributes, ReactNode, RefAttributes } from 'react';
 /**
  * Common props shared by all {@link BaseSignUpButton} components.
  */
 export interface CommonBaseSignUpButtonProps {
-    /**
-     * Function to initiate the sign-up process
-     */
-    signUp?: () => Promise<void>;
     /**
      * Loading state during sign-up process
      */
     isLoading?: boolean;
+    /**
+     * Function to initiate the sign-up process
+     */
+    signUp?: () => Promise<void>;
 }
 /**
  * Props passed to the render function of {@link BaseSignUpButton}

package/dist/components/control/AsgardeoLoading.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 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, PropsWithChildren, ReactNode } from 'react';
+/**
+ * Props for the Loading component.
+ */
+export interface AsgardeoLoadingProps {
+    /**
+     * Content to show when the user is not signed in.
+     */
+    fallback?: ReactNode;
+}
+/**
+ * A component that only renders its children when the Asgardeo is loading.
+ *
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
+ * @example
+ * ```tsx
+ * import { AsgardeoLoading } from '@asgardeo/auth-react';
+ *
+ * const App = () => {
+ *   return (
+ *     <AsgardeoLoading fallback={<p>Finished Loading...</p>}>
+ *       <p>Loading...</p>
+ *     </AsgardeoLoading>
+ *   );
+ * }
+ * ```
+ */
+declare const AsgardeoLoading: FC<PropsWithChildren<AsgardeoLoadingProps>>;
+export default AsgardeoLoading;

package/dist/components/control/SignedIn.d.ts

@@ -28,6 +28,8 @@ export interface SignedInProps {
 /**
  * A component that only renders its children when the user is signed in.
  *
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
  * @example
  * ```tsx
  * import { SignedIn } from '@asgardeo/auth-react';

package/dist/components/control/SignedOut.d.ts

@@ -28,6 +28,8 @@ export interface SignedOutProps {
 /**
  * A component that only renders its children when the user is signed out.
  *
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
  * @example
  * ```tsx
  * import { SignedOut } from '@asgardeo/auth-react';

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

@@ -22,9 +22,12 @@ import { FieldType } from '@asgardeo/browser';
  * Interface for field configuration.
  */
 export interface FieldConfig {
+    /**
+     * The name of the field.
+     */
     name: string;
     /**
-     * The field type based on ApplicationNativeAuthenticationAuthenticatorParamType.
+     * The field type.
      */
     type: FieldType;
     /**
@@ -68,20 +71,12 @@ export interface FieldConfig {
      */
     placeholder?: string;
 }
-/**
- * Utility function to parse multi-valued string into array
- */
-export declare const parseMultiValuedString: (value: string) => string[];
-/**
- * Utility function to format array into multi-valued string
- */
-export declare const formatMultiValuedString: (values: string[]) => string;
 /**
  * Utility function to validate field values based on type
  */
 export declare const validateFieldValue: (value: string, type: FieldType, required?: boolean, touched?: boolean) => string | null;
 /**
- * Factory function to create form fields based on the ApplicationNativeAuthenticationAuthenticatorParamType.
+ * Factory function to create form fields based on the EmbeddedSignInFlowAuthenticatorParamType.
  *
  * @param config - The field configuration
  * @returns The appropriate React component for the field type
@@ -90,7 +85,7 @@ export declare const validateFieldValue: (value: string, type: FieldType, requir
  * ```tsx
  * const field = createField({
  *   param: 'username',
- *   type: ApplicationNativeAuthenticationAuthenticatorParamType.String,
+ *   type: EmbeddedSignInFlowAuthenticatorParamType.String,
  *   label: 'Username',
  *   confidential: false,
  *   required: true,

package/dist/components/presentation/CreateOrganization/BaseCreateOrganization.d.ts

@@ -0,0 +1,53 @@
+/**
+ * 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 { CreateOrganizationPayload } from '@asgardeo/browser';
+import { CSSProperties, FC, ReactNode } from 'react';
+/**
+ * Interface for organization form data.
+ */
+export interface OrganizationFormData {
+    description: string;
+    handle: string;
+    name: string;
+}
+/**
+ * Props interface for the BaseCreateOrganization component.
+ */
+export interface BaseCreateOrganizationProps {
+    cardLayout?: boolean;
+    className?: string;
+    defaultParentId?: string;
+    error?: string | null;
+    initialValues?: Partial<OrganizationFormData>;
+    loading?: boolean;
+    mode?: 'inline' | 'popup';
+    onCancel?: () => void;
+    onOpenChange?: (open: boolean) => void;
+    onSubmit?: (payload: CreateOrganizationPayload) => void | Promise<void>;
+    onSuccess?: (organization: any) => void;
+    open?: boolean;
+    renderAdditionalFields?: () => ReactNode;
+    style?: CSSProperties;
+    title?: string;
+}
+/**
+ * BaseCreateOrganization component provides the core functionality for creating organizations.
+ * This component serves as the base for framework-specific implementations.
+ */
+export declare const BaseCreateOrganization: FC<BaseCreateOrganizationProps>;
+export default BaseCreateOrganization;

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

@@ -0,0 +1,67 @@
+/**
+ * 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 { BaseCreateOrganizationProps } from './BaseCreateOrganization';
+import { CreateOrganizationPayload } from '@asgardeo/browser';
+/**
+ * Props interface for the CreateOrganization component.
+ */
+export interface CreateOrganizationProps extends Omit<BaseCreateOrganizationProps, 'onSubmit' | 'loading' | 'error'> {
+    /**
+     * Fallback element to render when the user is not signed in.
+     */
+    fallback?: ReactElement;
+    /**
+     * Custom organization creation handler (will use default API if not provided).
+     */
+    onCreateOrganization?: (payload: CreateOrganizationPayload) => Promise<any>;
+}
+/**
+ * CreateOrganization component that provides organization creation functionality.
+ * This component automatically integrates with the Asgardeo and Organization contexts.
+ *
+ * @example
+ * ```tsx
+ * import { CreateOrganization } from '@asgardeo/react';
+ *
+ * // Basic usage - uses default API and contexts
+ * <CreateOrganization
+ *   onSuccess={(org) => console.log('Created:', org)}
+ *   onCancel={() => navigate('/organizations')}
+ * />
+ *
+ * // With custom organization creation handler
+ * <CreateOrganization
+ *   onCreateOrganization={async (payload) => {
+ *     const result = await myCustomAPI.createOrganization(payload);
+ *     return result;
+ *   }}
+ *   onSuccess={(org) => {
+ *     console.log('Organization created:', org.name);
+ *     // Custom success logic here
+ *   }}
+ * />
+ *
+ * // With fallback for unauthenticated users
+ * <CreateOrganization
+ *   fallback={<div>Please sign in to create an organization</div>}
+ * />
+ * ```
+ */
+export declare const CreateOrganization: FC<CreateOrganizationProps>;
+export default CreateOrganization;

package/dist/components/presentation/Organization/BaseOrganization.d.ts

@@ -0,0 +1,66 @@
+/**
+ * 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 { Organization as IOrganization } from '@asgardeo/browser';
+import { FC, ReactNode } from 'react';
+/**
+ * Props for the BaseOrganization component.
+ */
+export interface BaseOrganizationProps {
+    /**
+     * Render prop that takes the organization object and returns a ReactNode.
+     * @param organization - The organization object from Asgardeo.
+     * @returns A ReactNode to render.
+     */
+    children: (organization: IOrganization | null) => ReactNode;
+    /**
+     * Optional element to render when no organization is provided.
+     */
+    fallback?: ReactNode;
+    /**
+     * The organization object to display. If not provided, the component will render the fallback.
+     */
+    organization: IOrganization | null;
+}
+/**
+ * Base Organization component that provides the core functionality for displaying organization information.
+ * This component takes an organization object as a prop and uses render props to expose it.
+ *
+ * @remarks This is the base component that can be used in any context where you have
+ * an organization object available. For React applications, use the Organization component which
+ * automatically retrieves the current organization from Organization context.
+ *
+ * @example
+ * ```tsx
+ * import { BaseOrganization } from '@asgardeo/auth-react';
+ *
+ * const MyComponent = ({ organization }) => {
+ *   return (
+ *     <BaseOrganization organization={organization} fallback={<p>No organization data</p>}>
+ *       {(org) => (
+ *         <div>
+ *           <h1>Organization: {org.name}</h1>
+ *           <p>ID: {org.id}</p>
+ *         </div>
+ *       )}
+ *     </BaseOrganization>
+ *   );
+ * }
+ * ```
+ */
+declare const BaseOrganization: FC<BaseOrganizationProps>;
+export default BaseOrganization;

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

@@ -0,0 +1,66 @@
+/**
+ * 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 { Organization as IOrganization } from '@asgardeo/browser';
+import { FC, ReactNode } from 'react';
+import { BaseOrganizationProps } from './BaseOrganization';
+/**
+ * Props for the Organization component.
+ * Extends BaseOrganizationProps but makes the organization prop optional since it will be obtained from useOrganization
+ */
+export interface OrganizationProps extends Omit<BaseOrganizationProps, 'organization'> {
+    /**
+     * Render prop that takes the organization object and returns a ReactNode.
+     * @param organization - The current organization object from Organization context.
+     * @returns A ReactNode to render.
+     */
+    children: (organization: IOrganization | null) => ReactNode;
+    /**
+     * Optional element to render when no organization is selected.
+     */
+    fallback?: ReactNode;
+}
+/**
+ * A component that uses render props to expose the current organization object.
+ * This component automatically retrieves the current organization from Organization context.
+ *
+ * @remarks This component is only supported in browser based React applications (CSR).
+ *
+ * @example
+ * ```tsx
+ * import { Organization } from '@asgardeo/auth-react';
+ *
+ * const App = () => {
+ *   return (
+ *     <Organization fallback={<p>No organization selected</p>}>
+ *       {(organization) => (
+ *         <div>
+ *           <h1>Current Organization: {organization.name}!</h1>
+ *           <p>ID: {organization.id}</p>
+ *           <p>Role: {organization.role}</p>
+ *           {organization.memberCount && (
+ *             <p>Members: {organization.memberCount}</p>
+ *           )}
+ *         </div>
+ *       )}
+ *     </Organization>
+ *   );
+ * }
+ * ```
+ */
+declare const Organization: FC<OrganizationProps>;
+export default Organization;

package/dist/components/presentation/OrganizationList/BaseOrganizationList.d.ts

@@ -0,0 +1,117 @@
+/**
+ * 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, ReactNode } from 'react';
+import { OrganizationWithSwitchAccess } from '../../../contexts/Organization/OrganizationContext';
+/**
+ * Props interface for the BaseOrganizationList component.
+ */
+export interface BaseOrganizationListProps {
+    /**
+     * Additional CSS class names to apply to the container
+     */
+    className?: string;
+    /**
+     * List of organizations with switch access information
+     */
+    data: OrganizationWithSwitchAccess[];
+    /**
+     * Error message to display
+     */
+    error?: string | null;
+    /**
+     * Function called when "Load More" is clicked
+     */
+    fetchMore?: () => Promise<void>;
+    /**
+     * Whether there are more organizations to load
+     */
+    hasMore?: boolean;
+    /**
+     * Whether the initial data is loading
+     */
+    isLoading?: boolean;
+    /**
+     * Whether more data is being loaded
+     */
+    isLoadingMore?: boolean;
+    /**
+     * Function called when refresh is requested
+     */
+    onRefresh?: () => Promise<void>;
+    /**
+     * Custom renderer for when no organizations are found
+     */
+    renderEmpty?: () => ReactNode;
+    /**
+     * Custom renderer for the error state
+     */
+    renderError?: (error: string) => ReactNode;
+    /**
+     * Custom renderer for the load more button
+     */
+    renderLoadMore?: (onLoadMore: () => Promise<void>, isLoading: boolean) => ReactNode;
+    /**
+     * Custom renderer for the loading state
+     */
+    renderLoading?: () => ReactNode;
+    /**
+     * Custom renderer for each organization item
+     */
+    renderOrganization?: (organization: OrganizationWithSwitchAccess, index: number) => ReactNode;
+    /**
+     * Inline styles to apply to the container
+     */
+    style?: React.CSSProperties;
+    /**
+     * Total number of organizations
+     */
+    totalCount?: number;
+    /**
+     * Display mode: 'inline' for normal display, 'popup' for modal dialog
+     */
+    mode?: 'inline' | 'popup';
+    /**
+     * Function called when popup open state changes (only used in popup mode)
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the popup is open (only used in popup mode)
+     */
+    open?: boolean;
+    /**
+     * Title for the popup dialog (only used in popup mode)
+     */
+    title?: string;
+}
+/**
+ * BaseOrganizationList component displays a list of organizations with pagination support.
+ * This component serves as the base for framework-specific implementations.
+ *
+ * @example
+ * ```tsx
+ * <BaseOrganizationList
+ *   data={organizations}
+ *   isLoading={isLoading}
+ *   hasMore={hasMore}
+ *   fetchMore={fetchMore}
+ *   error={error}
+ * />
+ * ```
+ */
+export declare const BaseOrganizationList: FC<BaseOrganizationListProps>;
+export default BaseOrganizationList;

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

@@ -0,0 +1,93 @@
+/**
+ * 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 { BaseOrganizationListProps } from './BaseOrganizationList';
+import { OrganizationWithSwitchAccess } from '../../../contexts/Organization/OrganizationContext';
+/**
+ * Configuration options for the OrganizationList component.
+ */
+export interface OrganizationListConfig {
+    /**
+     * Whether to automatically fetch organizations on mount
+     */
+    autoFetch?: boolean;
+    /**
+     * Filter string for organizations
+     */
+    filter?: string;
+    /**
+     * Number of organizations to fetch per page
+     */
+    limit?: number;
+    /**
+     * Whether to include recursive organizations
+     */
+    recursive?: boolean;
+}
+/**
+ * Props interface for the OrganizationList component.
+ * Uses the enhanced OrganizationContext instead of the useOrganizations hook.
+ */
+export interface OrganizationListProps extends Omit<BaseOrganizationListProps, 'data' | 'error' | 'fetchMore' | 'hasMore' | 'isLoading' | 'isLoadingMore' | 'totalCount'>, OrganizationListConfig {
+    /**
+     * Function called when an organization is selected/clicked
+     */
+    onOrganizationSelect?: (organization: OrganizationWithSwitchAccess) => void;
+}
+/**
+ * OrganizationList component that provides organization listing functionality with pagination.
+ * This component uses the enhanced OrganizationContext, eliminating the polling issue and
+ * providing better integration with the existing context system.
+ *
+ * @example
+ * ```tsx
+ * import { OrganizationList } from '@asgardeo/react';
+ *
+ * // Basic usage
+ * <OrganizationList />
+ *
+ * // With custom limit and filter
+ * <OrganizationList
+ *   limit={20}
+ *   filter="active"
+ *   onOrganizationSelect={(org) => {
+ *     console.log('Selected organization:', org.name);
+ *   }}
+ * />
+ *
+ * // As a popup dialog
+ * <OrganizationList
+ *   mode="popup"
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="Select Organization"
+ * />
+ *
+ * // With custom organization renderer
+ * <OrganizationList
+ *   renderOrganization={(org) => (
+ *     <div key={org.id}>
+ *       <h3>{org.name}</h3>
+ *       <p>Can switch: {org.canSwitch ? 'Yes' : 'No'}</p>
+ *     </div>
+ *   )}
+ * />
+ * ```
+ */
+export declare const OrganizationList: FC<OrganizationListProps>;
+export default OrganizationList;