@thunderid/react 0.1.0 → 0.2.0

package/dist/cjs/components/presentation/LanguageSwitcher/LanguageSwitcher.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSwitcher.cjs","names":["LanguageSwitcher: FC<LanguageSwitcherProps>","useFlowMeta","useTranslation","availableLanguageCodes: string[]","effectiveLanguageCodes: string[]","languages: LanguageOption[]","BaseLanguageSwitcher"],"sources":["../../../../../src/components/presentation/LanguageSwitcher/LanguageSwitcher.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {resolveLocaleDisplayName, resolveLocaleEmoji} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useEffect, useMemo} from 'react';\nimport BaseLanguageSwitcher, {LanguageOption, LanguageSwitcherRenderProps} from './BaseLanguageSwitcher';\nimport useFlowMeta from '../../../contexts/FlowMeta/useFlowMeta';\nimport useTranslation from '../../../hooks/useTranslation';\n\nexport type {LanguageOption, LanguageSwitcherRenderProps};\n\nexport interface LanguageSwitcherProps {\n  /**\n   * Render-props callback for fully custom UI.\n   *\n   * @example\n   * ```tsx\n   * <LanguageSwitcher>\n   *   {({languages, currentLanguage, onLanguageChange, isLoading}) => (\n   *     <select\n   *       value={currentLanguage}\n   *       disabled={isLoading}\n   *       onChange={e => onLanguageChange(e.target.value)}\n   *     >\n   *       {languages.map(l => (\n   *         <option key={l.code} value={l.code}>{l.emoji} {l.displayName}</option>\n   *       ))}\n   *     </select>\n   *   )}\n   * </LanguageSwitcher>\n   * ```\n   */\n  children?: (props: LanguageSwitcherRenderProps) => ReactNode;\n  /** Additional CSS class for the root element (default UI only) */\n  className?: string;\n}\n\n/**\n * A v2 LanguageSwitcher component that reads available languages from `FlowMetaContext`\n * and switches both the UI language (via `I18nContext`) and the flow metadata translations\n * (by re-fetching `GET /flow/meta` with the new language).\n *\n * Must be rendered inside a `FlowMetaProvider`.\n *\n * @example\n * ```tsx\n * // Default dropdown UI\n * <LanguageSwitcher />\n *\n * // Custom UI with render props\n * <LanguageSwitcher>\n *   {({languages, currentLanguage, onLanguageChange}) => (\n *     <div>\n *       {languages.map(lang => (\n *         <button\n *           key={lang.code}\n *           onClick={() => onLanguageChange(lang.code)}\n *           style={{fontWeight: lang.code === currentLanguage ? 'bold' : 'normal'}}\n *         >\n *           {lang.emoji} {lang.displayName}\n *         </button>\n *       ))}\n *     </div>\n *   )}\n * </LanguageSwitcher>\n * ```\n */\nconst LanguageSwitcher: FC<LanguageSwitcherProps> = ({children, className}: LanguageSwitcherProps): ReactElement => {\n  const {meta, switchLanguage, isLoading} = useFlowMeta();\n  const {currentLanguage} = useTranslation();\n\n  const availableLanguageCodes: string[] = meta?.i18n?.languages ?? [];\n  // Only fall back to the detected browser language when the server returns no configured languages.\n  // Do NOT inject currentLanguage unconditionally — a browser locale like \"en-GB\" must not appear\n  // in the picker when the server only supports \"en-US\".\n  const effectiveLanguageCodes: string[] = useMemo(\n    () => (availableLanguageCodes.length > 0 ? availableLanguageCodes : [currentLanguage]),\n    [availableLanguageCodes, currentLanguage],\n  );\n\n  const languages: LanguageOption[] = useMemo(\n    () =>\n      effectiveLanguageCodes.map((code: string) => ({\n        code,\n        // Resolve each label in its own locale so option names stay stable across UI language switches.\n        displayName: resolveLocaleDisplayName(code, code) || code,\n        emoji: resolveLocaleEmoji(code),\n      })),\n    [effectiveLanguageCodes],\n  );\n\n  // If the detected language isn't supported by the server, fall back to the first available language.\n  useEffect(() => {\n    if (availableLanguageCodes.length > 0 && !availableLanguageCodes.includes(currentLanguage)) {\n      switchLanguage(availableLanguageCodes[0]);\n    }\n  }, [availableLanguageCodes, currentLanguage, switchLanguage]);\n\n  const handleLanguageChange = (language: string): void => {\n    if (language !== currentLanguage) {\n      switchLanguage(language);\n    }\n  };\n\n  return (\n    <BaseLanguageSwitcher\n      currentLanguage={currentLanguage}\n      isLoading={isLoading}\n      languages={languages}\n      onLanguageChange={handleLanguageChange}\n      className={className}\n    >\n      {children}\n    </BaseLanguageSwitcher>\n  );\n};\n\nexport default LanguageSwitcher;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,MAAMA,oBAA+C,EAAC,UAAU,gBAAoD;CAClH,MAAM,EAAC,MAAM,gBAAgB,cAAaC,6BAAa;CACvD,MAAM,EAAC,oBAAmBC,gCAAgB;CAE1C,MAAMC,yBAAmC,MAAM,MAAM,aAAa,EAAE;CAIpE,MAAMC,kDACG,uBAAuB,SAAS,IAAI,yBAAyB,CAAC,gBAAgB,EACrF,CAAC,wBAAwB,gBAAgB,CAC1C;CAED,MAAMC,qCAEF,uBAAuB,KAAK,UAAkB;EAC5C;EAEA,+DAAsC,MAAM,KAAK,IAAI;EACrD,mDAA0B,KAAK;EAChC,EAAE,EACL,CAAC,uBAAuB,CACzB;AAGD,4BAAgB;AACd,MAAI,uBAAuB,SAAS,KAAK,CAAC,uBAAuB,SAAS,gBAAgB,CACxF,gBAAe,uBAAuB,GAAG;IAE1C;EAAC;EAAwB;EAAiB;EAAe,CAAC;CAE7D,MAAM,wBAAwB,aAA2B;AACvD,MAAI,aAAa,gBACf,gBAAe,SAAS;;AAI5B,QACE,2CAACC;EACkB;EACN;EACA;EACX,kBAAkB;EACP;EAEV;GACoB;;AAI3B,+BAAe"}

package/dist/cjs/components/presentation/Organization/BaseOrganization.cjs

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/presentation/Organization/BaseOrganization.tsx
+/**
+* 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 '@thunderid/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>
+*   );
+* }
+* ```
+*/
+const BaseOrganization = ({ children, fallback = null, organization }) => {
+	if (!organization) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: fallback });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children(organization) });
+};
+BaseOrganization.displayName = "BaseOrganization";
+var BaseOrganization_default = BaseOrganization;
+
+//#endregion
+exports.default = BaseOrganization_default;
+//# sourceMappingURL=BaseOrganization.cjs.map

package/dist/cjs/components/presentation/Organization/BaseOrganization.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganization.cjs","names":["BaseOrganization: FC<BaseOrganizationProps>"],"sources":["../../../../../src/components/presentation/Organization/BaseOrganization.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {Organization as IOrganization} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode} from 'react';\n\n/**\n * Props for the BaseOrganization component.\n */\nexport interface BaseOrganizationProps {\n  /**\n   * Render prop that takes the organization object and returns a ReactNode.\n   * @param organization - The organization object from ThunderID.\n   * @returns A ReactNode to render.\n   */\n  children: (organization: IOrganization | null) => ReactNode;\n\n  /**\n   * Optional element to render when no organization is provided.\n   */\n  fallback?: ReactNode;\n\n  /**\n   * The organization object to display. If not provided, the component will render the fallback.\n   */\n  organization: IOrganization | null;\n}\n\n/**\n * Base Organization component that provides the core functionality for displaying organization information.\n * This component takes an organization object as a prop and uses render props to expose it.\n *\n * @remarks This is the base component that can be used in any context where you have\n * an organization object available. For React applications, use the Organization component which\n * automatically retrieves the current organization from Organization context.\n *\n * @example\n * ```tsx\n * import { BaseOrganization } from '@thunderid/auth-react';\n *\n * const MyComponent = ({ organization }) => {\n *   return (\n *     <BaseOrganization organization={organization} fallback={<p>No organization data</p>}>\n *       {(org) => (\n *         <div>\n *           <h1>Organization: {org.name}</h1>\n *           <p>ID: {org.id}</p>\n *         </div>\n *       )}\n *     </BaseOrganization>\n *   );\n * }\n * ```\n */\nconst BaseOrganization: FC<BaseOrganizationProps> = ({\n  children,\n  fallback = null,\n  organization,\n}: BaseOrganizationProps): ReactElement => {\n  if (!organization) {\n    return <>{fallback}</>;\n  }\n\n  return <>{children(organization)}</>;\n};\n\nBaseOrganization.displayName = 'BaseOrganization';\n\nexport default BaseOrganization;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAMA,oBAA+C,EACnD,UACA,WAAW,MACX,mBACyC;AACzC,KAAI,CAAC,aACH,QAAO,mFAAG,WAAY;AAGxB,QAAO,mFAAG,SAAS,aAAa,GAAI;;AAGtC,iBAAiB,cAAc;AAE/B,+BAAe"}

package/dist/cjs/components/presentation/Organization/Organization.cjs

@@ -0,0 +1,49 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useOrganization = require('../../../contexts/Organization/useOrganization.cjs');
+const require_BaseOrganization = require('./BaseOrganization.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/components/presentation/Organization/Organization.tsx
+/**
+* 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 '@thunderid/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>
+*   );
+* }
+* ```
+*/
+const Organization = ({ children, fallback = null }) => {
+	const { currentOrganization } = require_useOrganization.default();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseOrganization.default, {
+		organization: currentOrganization,
+		fallback,
+		children
+	});
+};
+Organization.displayName = "Organization";
+var Organization_default = Organization;
+
+//#endregion
+exports.default = Organization_default;
+//# sourceMappingURL=Organization.cjs.map

package/dist/cjs/components/presentation/Organization/Organization.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Organization.cjs","names":["Organization: FC<OrganizationProps>","useOrganization","BaseOrganization"],"sources":["../../../../../src/components/presentation/Organization/Organization.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {Organization as IOrganization} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode} from 'react';\nimport BaseOrganization, {BaseOrganizationProps} from './BaseOrganization';\nimport useOrganization from '../../../contexts/Organization/useOrganization';\n\n/**\n * Props for the Organization component.\n * Extends BaseOrganizationProps but makes the organization prop optional since it will be obtained from useOrganization\n */\nexport interface OrganizationProps extends Omit<BaseOrganizationProps, 'organization'> {\n  /**\n   * Render prop that takes the organization object and returns a ReactNode.\n   * @param organization - The current organization object from Organization context.\n   * @returns A ReactNode to render.\n   */\n  children: (organization: IOrganization | null) => ReactNode;\n\n  /**\n   * Optional element to render when no organization is selected.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * A component that uses render props to expose the current organization object.\n * This component automatically retrieves the current organization from Organization context.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example\n * ```tsx\n * import { Organization } from '@thunderid/auth-react';\n *\n * const App = () => {\n *   return (\n *     <Organization fallback={<p>No organization selected</p>}>\n *       {(organization) => (\n *         <div>\n *           <h1>Current Organization: {organization.name}!</h1>\n *           <p>ID: {organization.id}</p>\n *           <p>Role: {organization.role}</p>\n *           {organization.memberCount && (\n *             <p>Members: {organization.memberCount}</p>\n *           )}\n *         </div>\n *       )}\n *     </Organization>\n *   );\n * }\n * ```\n */\nconst Organization: FC<OrganizationProps> = ({children, fallback = null}: OrganizationProps): ReactElement => {\n  const {currentOrganization} = useOrganization();\n\n  return (\n    <BaseOrganization organization={currentOrganization} fallback={fallback}>\n      {children}\n    </BaseOrganization>\n  );\n};\n\nOrganization.displayName = 'Organization';\n\nexport default Organization;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAMA,gBAAuC,EAAC,UAAU,WAAW,WAA2C;CAC5G,MAAM,EAAC,wBAAuBC,iCAAiB;AAE/C,QACE,2CAACC;EAAiB,cAAc;EAA+B;EAC5D;GACgB;;AAIvB,aAAa,cAAc;AAE3B,2BAAe"}

package/dist/cjs/components/presentation/OrganizationList/BaseOrganizationList.cjs

@@ -0,0 +1,257 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_Spinner = require('../../primitives/Spinner/Spinner.cjs');
+const require_Button = require('../../primitives/Button/Button.cjs');
+const require_Typography = require('../../primitives/Typography/Typography.cjs');
+const require_Avatar = require('../../primitives/Avatar/Avatar.cjs');
+const require_Dialog = require('../../primitives/Dialog/Dialog.cjs');
+const require_BaseOrganizationList_styles = require('./BaseOrganizationList.styles.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/presentation/OrganizationList/BaseOrganizationList.tsx
+/**
+* Default organization item renderer
+*/
+const defaultRenderOrganization = (organization, styles, t, onOrganizationSelect, showStatus) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: (0, __emotion_css.cx)(styles.organizationItem),
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, __emotion_css.cx)(styles.organizationContent),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Avatar.Avatar, {
+			variant: "square",
+			name: organization.name,
+			size: 48,
+			alt: `${organization.name} logo`
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, __emotion_css.cx)(styles.organizationInfo),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+					variant: "h6",
+					className: (0, __emotion_css.cx)(styles.organizationName),
+					children: organization.name
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography.default, {
+					variant: "body2",
+					color: "textSecondary",
+					className: (0, __emotion_css.cx)(styles.organizationHandle),
+					children: ["@", organization.orgHandle]
+				}),
+				showStatus && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography.default, {
+					variant: "body2",
+					color: "textSecondary",
+					className: (0, __emotion_css.cx)(styles.organizationStatus),
+					children: [
+						t("organization.switcher.status.label"),
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: (0, __emotion_css.cx)(styles.statusText, organization.status === "ACTIVE" ? styles.statusTextActive : styles.statusTextInactive),
+							children: organization.status
+						})
+					]
+				})
+			]
+		})]
+	}), organization.canSwitch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, __emotion_css.cx)(styles.organizationActions),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+			onClick: (e) => {
+				e.stopPropagation();
+				onOrganizationSelect?.(organization);
+			},
+			type: "button",
+			size: "small",
+			children: t("organization.switcher.buttons.switch.text")
+		})
+	})]
+}, organization.id);
+/**
+* Default loading renderer
+*/
+const defaultRenderLoading = (t, styles) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: (0, __emotion_css.cx)(styles.loadingContainer),
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.default, { size: "medium" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+		variant: "body1",
+		color: "textSecondary",
+		className: (0, __emotion_css.cx)(styles.loadingText),
+		children: t("organization.switcher.loading.placeholder.organizations")
+	})]
+});
+/**
+* Default error renderer
+*/
+const defaultRenderError = (errorMessage, t, styles) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, __emotion_css.cx)(styles.errorContainer),
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography.default, {
+		variant: "body1",
+		color: "error",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: t("organization.switcher.error.prefix") }),
+			" ",
+			errorMessage
+		]
+	})
+});
+/**
+* Default load more button renderer
+*/
+const defaultRenderLoadMore = (onLoadMore, isLoadingMore, t, styles) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+	onClick: onLoadMore,
+	disabled: isLoadingMore,
+	className: (0, __emotion_css.cx)(styles.loadMoreButton),
+	type: "button",
+	fullWidth: true,
+	children: isLoadingMore ? t("organization.switcher.loading.more") : t("organization.switcher.buttons.load_more.text")
+});
+/**
+* Default empty state renderer
+*/
+const defaultRenderEmpty = (t, styles) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, __emotion_css.cx)(styles.emptyContainer),
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+		variant: "body1",
+		color: "textSecondary",
+		className: (0, __emotion_css.cx)(styles.emptyText),
+		children: t("organization.switcher.no.organizations")
+	})
+});
+/**
+* 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}
+* />
+* ```
+*/
+const BaseOrganizationList = ({ className = "", allOrganizations, myOrganizations, error, fetchMore, hasMore = false, isLoading = false, isLoadingMore = false, mode = "inline", onOpenChange, onOrganizationSelect, onRefresh, open = false, renderEmpty, renderError, renderLoading, renderLoadMore, renderOrganization, style, title = "Organizations", showStatus, preferences }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const styles = require_BaseOrganizationList_styles.default(theme, colorScheme);
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const organizationsWithSwitchAccess = (0, react.useMemo)(() => {
+		if (!allOrganizations?.organizations) return [];
+		const myOrgIds = new Set(myOrganizations?.map((org) => org.id) || []);
+		return allOrganizations.organizations.map((org) => ({
+			...org,
+			canSwitch: myOrgIds.has(org.id)
+		}));
+	}, [allOrganizations?.organizations, myOrganizations]);
+	const renderLoadingWithStyles = renderLoading || (() => defaultRenderLoading(t, styles));
+	const renderErrorWithStyles = renderError || ((errorMsg) => defaultRenderError(errorMsg, t, styles));
+	const renderEmptyWithStyles = renderEmpty || (() => defaultRenderEmpty(t, styles));
+	const renderLoadMoreWithStyles = renderLoadMore || ((onLoadMore, loadingMore) => defaultRenderLoadMore(onLoadMore, loadingMore, t, styles));
+	const renderOrganizationWithStyles = renderOrganization || ((org) => defaultRenderOrganization(org, styles, t, onOrganizationSelect, showStatus));
+	if (isLoading && organizationsWithSwitchAccess?.length === 0) {
+		const loadingContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, __emotion_css.cx)(styles["root"], className),
+			style,
+			children: renderLoadingWithStyles()
+		});
+		if (mode === "popup") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default, {
+			open,
+			onOpenChange,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Dialog.default.Content, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default.Heading, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, __emotion_css.cx)(styles["popupContent"]),
+				children: loadingContent
+			})] })
+		});
+		return loadingContent;
+	}
+	if (error && organizationsWithSwitchAccess?.length === 0) {
+		const errorContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, __emotion_css.cx)(styles["root"], className),
+			style,
+			children: renderErrorWithStyles(error)
+		});
+		if (mode === "popup") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default, {
+			open,
+			onOpenChange,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Dialog.default.Content, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default.Heading, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, __emotion_css.cx)(styles["popupContent"]),
+				children: errorContent
+			})] })
+		});
+		return errorContent;
+	}
+	if (!isLoading && organizationsWithSwitchAccess?.length === 0) {
+		const emptyContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, __emotion_css.cx)(styles["root"], className),
+			style,
+			children: renderEmptyWithStyles()
+		});
+		if (mode === "popup") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default, {
+			open,
+			onOpenChange,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Dialog.default.Content, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default.Heading, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, __emotion_css.cx)(styles["popupContent"]),
+				children: emptyContent
+			})] })
+		});
+		return emptyContent;
+	}
+	const organizationListContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, __emotion_css.cx)(styles["root"], className),
+		style,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, __emotion_css.cx)(styles["header"]),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, __emotion_css.cx)(styles["headerInfo"]),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+						variant: "body2",
+						color: "textSecondary",
+						className: (0, __emotion_css.cx)(styles["subtitle"]),
+						children: t("organization.switcher.showing.count", {
+							showing: organizationsWithSwitchAccess?.length,
+							total: allOrganizations?.organizations?.length || 0
+						})
+					})
+				}), onRefresh && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+					onClick: onRefresh,
+					className: (0, __emotion_css.cx)(styles["refreshButton"]),
+					type: "button",
+					variant: "outline",
+					size: "small",
+					children: t("organization.switcher.buttons.refresh.text")
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, __emotion_css.cx)(styles["listContainer"]),
+				children: organizationsWithSwitchAccess?.map((organization, index) => renderOrganizationWithStyles(organization, index))
+			}),
+			error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, __emotion_css.cx)(styles["errorMargin"]),
+				children: renderErrorWithStyles(error)
+			}),
+			hasMore && fetchMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, __emotion_css.cx)(styles["loadMoreMargin"]),
+				children: renderLoadMoreWithStyles(fetchMore, isLoadingMore)
+			})
+		]
+	});
+	if (mode === "popup") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Dialog.default.Content, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default.Heading, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, __emotion_css.cx)(styles["popupContent"]),
+			children: organizationListContent
+		})] })
+	});
+	return organizationListContent;
+};
+var BaseOrganizationList_default = BaseOrganizationList;
+
+//#endregion
+exports.BaseOrganizationList = BaseOrganizationList;
+exports.default = BaseOrganizationList_default;
+//# sourceMappingURL=BaseOrganizationList.cjs.map

package/dist/cjs/components/presentation/OrganizationList/BaseOrganizationList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationList.cjs","names":["AvatarPrimitive","Typography","Button","Spinner","BaseOrganizationList: FC<BaseOrganizationListProps>","useTheme","styles: ReturnType<typeof useStyles>","useStyles","useTranslation","organizationsWithSwitchAccess: OrganizationWithSwitchAccess[]","renderLoadingWithStyles: () => ReactNode","renderErrorWithStyles: (errorMsg: string) => ReactNode","renderEmptyWithStyles: () => ReactNode","renderLoadMoreWithStyles: (onLoadMore: () => Promise<void>, loadingMore: boolean) => ReactNode","renderOrganizationWithStyles: (org: OrganizationWithSwitchAccess, index: number) => ReactNode","loadingContent: ReactElement","DialogPrimitive","errorContent: ReactElement","emptyContent: ReactElement","organizationListContent: ReactElement"],"sources":["../../../../../src/components/presentation/OrganizationList/BaseOrganizationList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {AllOrganizationsApiResponse, Organization, Preferences} from '@thunderid/browser';\nimport {CSSProperties, FC, MouseEvent, ReactElement, ReactNode, useMemo} from 'react';\nimport useStyles from './BaseOrganizationList.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {Avatar as AvatarPrimitive} from '../../primitives/Avatar/Avatar';\nimport Button from '../../primitives/Button/Button';\nimport DialogPrimitive from '../../primitives/Dialog/Dialog';\nimport Spinner from '../../primitives/Spinner/Spinner';\nimport Typography from '../../primitives/Typography/Typography';\n\nexport interface OrganizationWithSwitchAccess extends Organization {\n  canSwitch: boolean;\n}\n\n/**\n * Props interface for the BaseOrganizationList component.\n */\nexport interface BaseOrganizationListProps {\n  /**\n   * List of organizations discoverable to the signed-in user.\n   */\n  allOrganizations: AllOrganizationsApiResponse;\n  /**\n   * Additional CSS class names to apply to the container\n   */\n  className?: string;\n  /**\n   * Error message to display\n   */\n  error?: string | null;\n  /**\n   * Function called when \"Load More\" is clicked\n   */\n  fetchMore?: () => Promise<void>;\n  /**\n   * Whether there are more organizations to load\n   */\n  hasMore?: boolean;\n  /**\n   * Whether the initial data is loading\n   */\n  isLoading?: boolean;\n  /**\n   * Whether more data is being loaded\n   */\n  isLoadingMore?: boolean;\n  /**\n   * Display mode: 'inline' for normal display, 'popup' for modal dialog\n   */\n  mode?: 'inline' | 'popup';\n  /**\n   * List of organizations associated to the signed-in user.\n   */\n  myOrganizations: Organization[];\n  /**\n   * Function called when popup open state changes (only used in popup mode)\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Function called when an organization is selected/clicked\n   */\n  onOrganizationSelect?: (organization: OrganizationWithSwitchAccess) => void;\n  /**\n   * Function called when refresh is requested\n   */\n  onRefresh?: () => Promise<void>;\n  /**\n   * Whether the popup is open (only used in popup mode)\n   */\n  open?: boolean;\n  /**\n   * Component-level preferences to override global i18n and theme settings.\n   * Preferences are deep-merged with global ones, with component preferences\n   * taking precedence. Affects this component and all its descendants.\n   */\n  preferences?: Preferences;\n  /**\n   * Custom renderer for when no organizations are found\n   */\n  renderEmpty?: () => ReactNode;\n  /**\n   * Custom renderer for the error state\n   */\n  renderError?: (error: string) => ReactNode;\n  /**\n   * Custom renderer for the load more button\n   */\n  renderLoadMore?: (onLoadMore: () => Promise<void>, isLoading: boolean) => ReactNode;\n  /**\n   * Custom renderer for the loading state\n   */\n  renderLoading?: () => ReactNode;\n  /**\n   * Custom renderer for each organization item\n   */\n  renderOrganization?: (organization: OrganizationWithSwitchAccess, index: number) => ReactNode;\n  /**\n   * Whether to show the organization status in the list\n   */\n  showStatus?: boolean;\n  /**\n   * Inline styles to apply to the container\n   */\n  style?: CSSProperties;\n\n  /**\n   * Title for the popup dialog (only used in popup mode)\n   */\n  title?: string;\n}\n\n/**\n * Default organization item renderer\n */\nconst defaultRenderOrganization = (\n  organization: OrganizationWithSwitchAccess,\n  styles: any,\n  t: (key: string, params?: Record<string, string | number>) => string,\n  onOrganizationSelect?: (organization: OrganizationWithSwitchAccess) => void,\n  showStatus?: boolean,\n): ReactNode => (\n  <div key={organization.id} className={cx(styles.organizationItem)}>\n    <div className={cx(styles.organizationContent)}>\n      <AvatarPrimitive variant=\"square\" name={organization.name} size={48} alt={`${organization.name} logo`} />\n      <div className={cx(styles.organizationInfo)}>\n        <Typography variant=\"h6\" className={cx(styles.organizationName)}>\n          {organization.name}\n        </Typography>\n        <Typography variant=\"body2\" color=\"textSecondary\" className={cx(styles.organizationHandle)}>\n          @{organization.orgHandle}\n        </Typography>\n        {showStatus && (\n          <Typography variant=\"body2\" color=\"textSecondary\" className={cx(styles.organizationStatus)}>\n            {t('organization.switcher.status.label')}{' '}\n            <span\n              className={cx(\n                styles.statusText,\n                organization.status === 'ACTIVE' ? styles.statusTextActive : styles.statusTextInactive,\n              )}\n            >\n              {organization.status}\n            </span>\n          </Typography>\n        )}\n      </div>\n    </div>\n    {organization.canSwitch && (\n      <div className={cx(styles.organizationActions)}>\n        <Button\n          onClick={(e: MouseEvent<HTMLButtonElement>): void => {\n            e.stopPropagation();\n            onOrganizationSelect?.(organization);\n          }}\n          type=\"button\"\n          size=\"small\"\n        >\n          {t('organization.switcher.buttons.switch.text')}\n        </Button>\n      </div>\n    )}\n  </div>\n);\n\n/**\n * Default loading renderer\n */\nconst defaultRenderLoading = (\n  t: (key: string, params?: Record<string, string | number>) => string,\n  styles: any,\n): ReactNode => (\n  <div className={cx(styles.loadingContainer)}>\n    <Spinner size=\"medium\" />\n    <Typography variant=\"body1\" color=\"textSecondary\" className={cx(styles.loadingText)}>\n      {t('organization.switcher.loading.placeholder.organizations')}\n    </Typography>\n  </div>\n);\n\n/**\n * Default error renderer\n */\nconst defaultRenderError = (\n  errorMessage: string,\n  t: (key: string, params?: Record<string, string | number>) => string,\n  styles: any,\n): ReactNode => (\n  <div className={cx(styles.errorContainer)}>\n    <Typography variant=\"body1\" color=\"error\">\n      <strong>{t('organization.switcher.error.prefix')}</strong> {errorMessage}\n    </Typography>\n  </div>\n);\n\n/**\n * Default load more button renderer\n */\nconst defaultRenderLoadMore = (\n  onLoadMore: () => Promise<void>,\n  isLoadingMore: boolean,\n  t: (key: string, params?: Record<string, string | number>) => string,\n  styles: any,\n): ReactNode => (\n  <Button onClick={onLoadMore} disabled={isLoadingMore} className={cx(styles.loadMoreButton)} type=\"button\" fullWidth>\n    {isLoadingMore ? t('organization.switcher.loading.more') : t('organization.switcher.buttons.load_more.text')}\n  </Button>\n);\n\n/**\n * Default empty state renderer\n */\nconst defaultRenderEmpty = (\n  t: (key: string, params?: Record<string, string | number>) => string,\n  styles: any,\n): ReactNode => (\n  <div className={cx(styles.emptyContainer)}>\n    <Typography variant=\"body1\" color=\"textSecondary\" className={cx(styles.emptyText)}>\n      {t('organization.switcher.no.organizations')}\n    </Typography>\n  </div>\n);\n\n/**\n * BaseOrganizationList component displays a list of organizations with pagination support.\n * This component serves as the base for framework-specific implementations.\n *\n * @example\n * ```tsx\n * <BaseOrganizationList\n *   data={organizations}\n *   isLoading={isLoading}\n *   hasMore={hasMore}\n *   fetchMore={fetchMore}\n *   error={error}\n * />\n * ```\n */\nexport const BaseOrganizationList: FC<BaseOrganizationListProps> = ({\n  className = '',\n  allOrganizations,\n  myOrganizations,\n  error,\n  fetchMore,\n  hasMore = false,\n  isLoading = false,\n  isLoadingMore = false,\n  mode = 'inline',\n  onOpenChange,\n  onOrganizationSelect,\n  onRefresh,\n  open = false,\n  renderEmpty,\n  renderError,\n  renderLoading,\n  renderLoadMore,\n  renderOrganization,\n  style,\n  title = 'Organizations',\n  showStatus,\n  preferences,\n}: BaseOrganizationListProps): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme);\n  const {t} = useTranslation(preferences?.i18n);\n\n  const organizationsWithSwitchAccess: OrganizationWithSwitchAccess[] = useMemo(() => {\n    if (!allOrganizations?.organizations) {\n      return [];\n    }\n\n    const myOrgIds = new Set<string>(myOrganizations?.map((org: Organization) => org.id) || []);\n\n    return allOrganizations.organizations.map((org: Organization) => ({\n      ...org,\n      canSwitch: myOrgIds.has(org.id),\n    }));\n  }, [allOrganizations?.organizations, myOrganizations]);\n\n  const renderLoadingWithStyles: () => ReactNode = renderLoading || ((): ReactNode => defaultRenderLoading(t, styles));\n  const renderErrorWithStyles: (errorMsg: string) => ReactNode =\n    renderError || ((errorMsg: string): ReactNode => defaultRenderError(errorMsg, t, styles));\n  const renderEmptyWithStyles: () => ReactNode = renderEmpty || ((): ReactNode => defaultRenderEmpty(t, styles));\n  const renderLoadMoreWithStyles: (onLoadMore: () => Promise<void>, loadingMore: boolean) => ReactNode =\n    renderLoadMore ||\n    ((onLoadMore: () => Promise<void>, loadingMore: boolean): ReactNode =>\n      defaultRenderLoadMore(onLoadMore, loadingMore, t, styles));\n  const renderOrganizationWithStyles: (org: OrganizationWithSwitchAccess, index: number) => ReactNode =\n    renderOrganization ||\n    ((org: OrganizationWithSwitchAccess): ReactNode =>\n      defaultRenderOrganization(org, styles, t, onOrganizationSelect, showStatus));\n\n  if (isLoading && organizationsWithSwitchAccess?.length === 0) {\n    const loadingContent: ReactElement = (\n      <div className={cx(styles['root'], className)} style={style}>\n        {renderLoadingWithStyles()}\n      </div>\n    );\n\n    if (mode === 'popup') {\n      return (\n        <DialogPrimitive open={open} onOpenChange={onOpenChange}>\n          <DialogPrimitive.Content>\n            <DialogPrimitive.Heading>{title}</DialogPrimitive.Heading>\n            <div className={cx(styles['popupContent'])}>{loadingContent}</div>\n          </DialogPrimitive.Content>\n        </DialogPrimitive>\n      );\n    }\n\n    return loadingContent;\n  }\n\n  if (error && organizationsWithSwitchAccess?.length === 0) {\n    const errorContent: ReactElement = (\n      <div className={cx(styles['root'], className)} style={style}>\n        {renderErrorWithStyles(error)}\n      </div>\n    );\n\n    if (mode === 'popup') {\n      return (\n        <DialogPrimitive open={open} onOpenChange={onOpenChange}>\n          <DialogPrimitive.Content>\n            <DialogPrimitive.Heading>{title}</DialogPrimitive.Heading>\n            <div className={cx(styles['popupContent'])}>{errorContent}</div>\n          </DialogPrimitive.Content>\n        </DialogPrimitive>\n      );\n    }\n\n    return errorContent;\n  }\n\n  if (!isLoading && organizationsWithSwitchAccess?.length === 0) {\n    const emptyContent: ReactElement = (\n      <div className={cx(styles['root'], className)} style={style}>\n        {renderEmptyWithStyles()}\n      </div>\n    );\n\n    if (mode === 'popup') {\n      return (\n        <DialogPrimitive open={open} onOpenChange={onOpenChange}>\n          <DialogPrimitive.Content>\n            <DialogPrimitive.Heading>{title}</DialogPrimitive.Heading>\n            <div className={cx(styles['popupContent'])}>{emptyContent}</div>\n          </DialogPrimitive.Content>\n        </DialogPrimitive>\n      );\n    }\n\n    return emptyContent;\n  }\n\n  const organizationListContent: ReactElement = (\n    <div className={cx(styles['root'], className)} style={style}>\n      {/* Header with total count and refresh button */}\n      <div className={cx(styles['header'])}>\n        <div className={cx(styles['headerInfo'])}>\n          <Typography variant=\"body2\" color=\"textSecondary\" className={cx(styles['subtitle'])}>\n            {t('organization.switcher.showing.count', {\n              showing: organizationsWithSwitchAccess?.length,\n              total: allOrganizations?.organizations?.length || 0,\n            })}\n          </Typography>\n        </div>\n        {onRefresh && (\n          <Button\n            onClick={onRefresh}\n            className={cx(styles['refreshButton'])}\n            type=\"button\"\n            variant=\"outline\"\n            size=\"small\"\n          >\n            {t('organization.switcher.buttons.refresh.text')}\n          </Button>\n        )}\n      </div>\n\n      {/* Organizations list */}\n      <div className={cx(styles['listContainer'])}>\n        {organizationsWithSwitchAccess?.map((organization: OrganizationWithSwitchAccess, index: number) =>\n          renderOrganizationWithStyles(organization, index),\n        )}\n      </div>\n\n      {/* Error message for additional data */}\n      {error && organizationsWithSwitchAccess?.length > 0 && (\n        <div className={cx(styles['errorMargin'])}>{renderErrorWithStyles(error)}</div>\n      )}\n\n      {/* Load more button */}\n      {hasMore && fetchMore && (\n        <div className={cx(styles['loadMoreMargin'])}>{renderLoadMoreWithStyles(fetchMore, isLoadingMore)}</div>\n      )}\n    </div>\n  );\n\n  if (mode === 'popup') {\n    return (\n      <DialogPrimitive open={open} onOpenChange={onOpenChange}>\n        <DialogPrimitive.Content>\n          <DialogPrimitive.Heading>{title}</DialogPrimitive.Heading>\n          <div className={cx(styles['popupContent'])}>{organizationListContent}</div>\n        </DialogPrimitive.Content>\n      </DialogPrimitive>\n    );\n  }\n\n  return organizationListContent;\n};\n\nexport default BaseOrganizationList;\n"],"mappings":"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"}