@asgardeo/react 0.5.4 → 0.5.6

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

@@ -15,8 +15,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { AllOrganizationsApiResponse, Organization } from '@asgardeo/browser';
 import { FC, ReactNode } from 'react';
-import { OrganizationWithSwitchAccess } from '../../../contexts/Organization/OrganizationContext';
+export interface OrganizationWithSwitchAccess extends Organization {
+    canSwitch: boolean;
+}
 /**
  * Props interface for the BaseOrganizationList component.
  */
@@ -26,9 +29,13 @@ export interface BaseOrganizationListProps {
      */
     className?: string;
     /**
-     * List of organizations with switch access information
+     * List of organizations discoverable to the signed-in user.
+     */
+    allOrganizations: AllOrganizationsApiResponse;
+    /**
+     * List of organizations associated to the signed-in user.
      */
-    data: OrganizationWithSwitchAccess[];
+    myOrganizations: Organization[];
     /**
      * Error message to display
      */
@@ -74,13 +81,13 @@ export interface BaseOrganizationListProps {
      */
     renderOrganization?: (organization: OrganizationWithSwitchAccess, index: number) => ReactNode;
     /**
-     * Inline styles to apply to the container
+     * Function called when an organization is selected/clicked
      */
-    style?: React.CSSProperties;
+    onOrganizationSelect?: (organization: OrganizationWithSwitchAccess) => void;
     /**
-     * Total number of organizations
+     * Inline styles to apply to the container
      */
-    totalCount?: number;
+    style?: React.CSSProperties;
     /**
      * Display mode: 'inline' for normal display, 'popup' for modal dialog
      */
@@ -97,6 +104,10 @@ export interface BaseOrganizationListProps {
      * Title for the popup dialog (only used in popup mode)
      */
     title?: string;
+    /**
+     * Whether to show the organization status in the list
+     */
+    showStatus?: boolean;
 }
 /**
  * BaseOrganizationList component displays a list of organizations with pagination support.

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

@@ -16,8 +16,7 @@
  * under the License.
  */
 import { FC } from 'react';
-import { BaseOrganizationListProps } from './BaseOrganizationList';
-import { OrganizationWithSwitchAccess } from '../../../contexts/Organization/OrganizationContext';
+import { BaseOrganizationListProps, OrganizationWithSwitchAccess } from './BaseOrganizationList';
 /**
  * Configuration options for the OrganizationList component.
  */
@@ -43,7 +42,7 @@ export interface OrganizationListConfig {
  * 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 {
+export interface OrganizationListProps extends Omit<BaseOrganizationListProps, 'myOrganizations' | 'allOrganizations' | 'error' | 'fetchMore' | 'hasMore' | 'isLoading' | 'isLoadingMore' | 'myOrganizations'>, OrganizationListConfig {
     /**
      * Function called when an organization is selected/clicked
      */

package/dist/components/primitives/Logo/Logo.d.ts

@@ -0,0 +1,55 @@
+/**
+ * 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';
+/**
+ * Props for the Logo component.
+ */
+export interface LogoProps {
+    /**
+     * Custom CSS class name for the logo.
+     */
+    className?: string;
+    /**
+     * Custom logo URL to override theme logo.
+     */
+    src?: string;
+    /**
+     * Custom alt text for the logo.
+     */
+    alt?: string;
+    /**
+     * Custom title for the logo.
+     */
+    title?: string;
+    /**
+     * Size of the logo.
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Custom style object.
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Logo component that displays the brand logo from theme or custom source.
+ *
+ * @param props - The props for the Logo component.
+ * @returns The rendered Logo component.
+ */
+declare const Logo: FC<LogoProps>;
+export default Logo;

package/dist/contexts/Branding/BrandingContext.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 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 { BrandingPreference, Theme } from '@asgardeo/browser';
+export interface BrandingContextValue {
+    /**
+     * The raw branding preference data
+     */
+    brandingPreference: BrandingPreference | null;
+    /**
+     * The transformed theme object
+     */
+    theme: Theme | null;
+    /**
+     * The active theme mode from branding preference ('light' | 'dark')
+     */
+    activeTheme: 'light' | 'dark' | null;
+    /**
+     * Loading state
+     */
+    isLoading: boolean;
+    /**
+     * Error state
+     */
+    error: Error | null;
+    /**
+     * Function to manually fetch branding preference
+     */
+    fetchBranding: () => Promise<void>;
+    /**
+     * Function to refetch branding preference
+     * This bypasses the single-call restriction and forces a new API call
+     */
+    refetch: () => Promise<void>;
+}
+declare const BrandingContext: import("react").Context<BrandingContextValue>;
+export default BrandingContext;

package/dist/contexts/Branding/BrandingProvider.d.ts

@@ -0,0 +1,88 @@
+/**
+ * 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 } from 'react';
+import { BrandingPreference } from '@asgardeo/browser';
+/**
+ * Configuration options for the BrandingProvider
+ */
+export interface BrandingProviderProps {
+    /**
+     * The branding preference data passed from parent (typically AsgardeoProvider)
+     */
+    brandingPreference?: BrandingPreference | null;
+    /**
+     * Force a specific theme ('light' or 'dark')
+     * If not provided, will use the activeTheme from branding preference
+     */
+    forceTheme?: 'light' | 'dark';
+    /**
+     * Whether the branding provider is enabled
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Loading state passed from parent
+     */
+    isLoading?: boolean;
+    /**
+     * Error state passed from parent
+     */
+    error?: Error | null;
+    /**
+     * Function to refetch branding preference passed from parent
+     */
+    refetch?: () => Promise<void>;
+}
+/**
+ * BrandingProvider component that manages branding state and provides branding context to child components.
+ *
+ * This provider receives branding preferences from a parent component (typically AsgardeoProvider)
+ * and transforms them into theme objects, making them available to all child components.
+ *
+ * Features:
+ * - Receives branding preferences as props
+ * - Theme transformation from branding preferences
+ * - Loading and error states
+ * - Support for custom theme forcing
+ *
+ * @example
+ * Basic usage (typically used within AsgardeoProvider):
+ * ```tsx
+ * <BrandingProvider
+ *   brandingPreference={brandingData}
+ *   isLoading={isFetching}
+ *   error={fetchError}
+ * >
+ *   <App />
+ * </BrandingProvider>
+ * ```
+ *
+ * @example
+ * With custom theme forcing:
+ * ```tsx
+ * <BrandingProvider
+ *   brandingPreference={brandingData}
+ *   forceTheme="dark"
+ *   enabled={true}
+ * >
+ *   <App />
+ * </BrandingProvider>
+ * ```
+ */
+declare const BrandingProvider: FC<PropsWithChildren<BrandingProviderProps>>;
+export default BrandingProvider;

package/dist/contexts/Branding/useBrandingContext.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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 { BrandingContextValue } from './BrandingContext';
+/**
+ * Hook to access the branding context.
+ * This hook provides access to branding preferences, theme data, and loading states.
+ *
+ * @returns The branding context value containing branding preference data, theme, and control functions
+ * @throws Error if used outside of a BrandingProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { theme, activeTheme, isLoading, error } = useBrandingContext();
+ *
+ *   if (isLoading) return <div>Loading branding...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *
+ *   return (
+ *     <div style={{ color: theme?.colors?.primary?.main }}>
+ *       <p>Active theme mode: {activeTheme}</p>
+ *       <p>Styled with Asgardeo branding</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const useBrandingContext: () => BrandingContextValue;
+export default useBrandingContext;

package/dist/contexts/Organization/OrganizationContext.d.ts

@@ -15,57 +15,19 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Organization } from '@asgardeo/browser';
+import { AllOrganizationsApiResponse, Organization } from '@asgardeo/browser';
 import { Context } from 'react';
-/**
- * Interface for organizations with switch access information.
- */
-export interface OrganizationWithSwitchAccess extends Organization {
-    /**
-     * Whether the user has switch access to this organization
-     */
-    canSwitch: boolean;
-}
 /**
  * Props interface of {@link OrganizationContext}
  */
 export type OrganizationContextProps = {
     currentOrganization: Organization | null;
     error: string | null;
-    getOrganizations: () => Promise<Organization[]>;
     isLoading: boolean;
-    organizations: Organization[] | null;
-    revalidateOrganizations: () => Promise<void>;
+    myOrganizations: Organization[];
     switchOrganization: (organization: Organization) => Promise<void>;
-    /**
-     * Paginated organizations with switch access information
-     */
-    paginatedOrganizations: OrganizationWithSwitchAccess[];
-    /**
-     * Whether there are more organizations to load
-     */
-    hasMore: boolean;
-    /**
-     * Whether more data is being loaded
-     */
-    isLoadingMore: boolean;
-    /**
-     * Total number of organizations
-     */
-    totalCount: number;
-    /**
-     * Function to fetch more organizations (pagination)
-     */
-    fetchMore: () => Promise<void>;
-    /**
-     * Function to fetch paginated organizations with switch access
-     */
-    fetchPaginatedOrganizations: (config?: {
-        filter?: string;
-        limit?: number;
-        recursive?: boolean;
-        reset?: boolean;
-    }) => Promise<void>;
+    revalidateMyOrganizations: () => Promise<Organization[]>;
+    getAllOrganizations: () => Promise<AllOrganizationsApiResponse>;
 };
 /**
  * Context object for managing organization data and related operations.

package/dist/contexts/Organization/OrganizationProvider.d.ts

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Organization } from '@asgardeo/browser';
+import { Organization, AllOrganizationsApiResponse } from '@asgardeo/browser';
 import { FC, PropsWithChildren } from 'react';
 /**
  * Props interface of {@link OrganizationProvider}
@@ -30,9 +30,9 @@ export interface OrganizationProviderProps {
      */
     currentOrganization?: Organization | null;
     /**
-     * Function to fetch organizations
+     * List of organizations the signed-in user belongs to.
      */
-    getOrganizations: () => Promise<Organization[]>;
+    myOrganizations?: Organization[];
     /**
      * Callback function called when an error occurs
      */
@@ -44,7 +44,12 @@ export interface OrganizationProviderProps {
     /**
      * Initial list of organizations
      */
-    organizations?: Organization[] | null;
+    getAllOrganizations?: () => Promise<AllOrganizationsApiResponse>;
+    /**
+     * Refetch the my organizations list.
+     * @returns
+     */
+    revalidateMyOrganizations: () => Promise<Organization[]>;
 }
 /**
  * OrganizationProvider component that manages organization data and provides it through OrganizationContext.
@@ -54,7 +59,6 @@ export interface OrganizationProviderProps {
  * - Manages current organization state
  * - Provides functions for switching organizations and refreshing data
  * - Handles loading states and errors
- * - Accepts a custom getOrganizations function for flexible data fetching
  *
  * @example
  * ```tsx
@@ -63,11 +67,6 @@ export interface OrganizationProviderProps {
  *   <App />
  * </OrganizationProvider>
  *
- * // With custom getOrganizations function
- * <OrganizationProvider getOrganizations={async () => asgardeo.getOrganizations()}>
- *   <App />
- * </OrganizationProvider>
- *
  * // With custom error handling
  * <OrganizationProvider onError={(error) => console.error('Organization error:', error)}>
  *   <App />
@@ -80,7 +79,7 @@ export interface OrganizationProviderProps {
  *   <App />
  * </OrganizationProvider>
  *
- * // Disable auto-fetch (fetch manually using revalidateOrganizations)
+ * // Disable auto-fetch (fetch manually using revalidateMyOrganizations)
  * <OrganizationProvider autoFetch={false}>
  *   <App />
  * </OrganizationProvider>

package/dist/contexts/Organization/useOrganization.d.ts

@@ -38,7 +38,7 @@ import { OrganizationContextProps } from './OrganizationContext';
  *     organizations,
  *     currentOrganization,
  *     switchOrganization,
- *     revalidateOrganizations,
+ *     revalidateMyOrganizations,
  *     getOrganizations,
  *     isLoading,
  *     error
@@ -68,7 +68,7 @@ import { OrganizationContextProps } from './OrganizationContext';
  *           </option>
  *         ))}
  *       </select>
- *       <button onClick={revalidateOrganizations}>
+ *       <button onClick={revalidateMyOrganizations}>
  *         Refresh Organizations
  *       </button>
  *       <button onClick={async () => {

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

@@ -20,6 +20,18 @@ export interface ThemeContextValue {
     theme: Theme;
     colorScheme: 'light' | 'dark';
     toggleTheme: () => void;
+    /**
+     * Whether branding theme is currently loading
+     */
+    isBrandingLoading?: boolean;
+    /**
+     * Error from branding theme fetch, if any
+     */
+    brandingError?: Error | null;
+    /**
+     * Whether branding inheritance is enabled
+     */
+    inheritFromBranding?: boolean;
 }
 declare const ThemeContext: import("react").Context<ThemeContextValue>;
 export default ThemeContext;

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

@@ -16,7 +16,7 @@
  * under the License.
  */
 import { FC, PropsWithChildren } from 'react';
-import { ThemeConfig, ThemeMode, RecursivePartial, BrowserThemeDetection } from '@asgardeo/browser';
+import { ThemeConfig, ThemeMode, RecursivePartial, BrowserThemeDetection, ThemePreferences } from '@asgardeo/browser';
 export interface ThemeProviderProps {
     theme?: RecursivePartial<ThemeConfig>;
     /**
@@ -25,12 +25,64 @@ export interface ThemeProviderProps {
      * - 'dark': Always use dark theme
      * - 'system': Use system preference (prefers-color-scheme media query)
      * - 'class': Detect theme based on CSS classes on HTML element
+     * - 'branding': Use active theme from branding preference (requires inheritFromBranding=true)
      */
-    mode?: ThemeMode;
+    mode?: ThemeMode | 'branding';
     /**
      * Configuration for theme detection when using 'class' or 'system' mode
      */
     detection?: BrowserThemeDetection;
+    /**
+     * Configuration for branding integration
+     */
+    inheritFromBranding?: ThemePreferences['inheritFromBranding'];
 }
+/**
+ * ThemeProvider component that manages theme state and provides theme context to child components.
+ *
+ * This provider integrates with Asgardeo branding preferences to automatically apply
+ * organization-specific themes while allowing for custom theme overrides.
+ *
+ * Features:
+ * - Automatic theme mode detection (light/dark/system/class)
+ * - Integration with Asgardeo branding API through useBranding hook
+ * - Merging of branding themes with custom theme configurations
+ * - CSS variable injection for easy styling
+ * - Loading and error states for branding integration
+ *
+ * @example
+ * Basic usage with branding integration:
+ * ```tsx
+ * <ThemeProvider inheritFromBranding={true}>
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ *
+ * @example
+ * With custom theme overrides:
+ * ```tsx
+ * <ThemeProvider
+ *   theme={{
+ *     colors: {
+ *       primary: { main: '#custom-color' }
+ *     }
+ *   }}
+ *   inheritFromBranding={true}
+ * >
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ *
+ * @example
+ * With branding-driven theme mode:
+ * ```tsx
+ * <ThemeProvider
+ *   mode="branding"
+ *   inheritFromBranding={true}
+ * >
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
 declare const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>>;
 export default ThemeProvider;

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

@@ -64,7 +64,62 @@ export interface ThemeConfig {
     spacing: {
         unit: number;
     };
+    /**
+     * The prefix used for CSS variables.
+     * @default 'asgardeo' (from VendorConstants.VENDOR_PREFIX)
+     */
+    cssVarPrefix?: string;
+}
+export interface ThemeVars {
+    colors: {
+        primary: {
+            main: string;
+            contrastText: string;
+        };
+        secondary: {
+            main: string;
+            contrastText: string;
+        };
+        background: {
+            surface: string;
+            disabled: string;
+            body: {
+                main: string;
+            };
+        };
+        error: {
+            main: string;
+            contrastText: string;
+        };
+        success: {
+            main: string;
+            contrastText: string;
+        };
+        warning: {
+            main: string;
+            contrastText: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+        };
+        border: string;
+    };
+    spacing: {
+        unit: string;
+    };
+    borderRadius: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    shadows: {
+        small: string;
+        medium: string;
+        large: string;
+    };
 }
 export interface Theme extends ThemeConfig {
     cssVariables: Record<string, string>;
+    vars: ThemeVars;
 }