@asgardeo/react 0.3.0 → 0.5.0

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;

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 { FC, ReactElement } from 'react';
+import { OrganizationDetails } from '../../../api/scim2/getOrganization';
+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;