@thunderid/react 0.1.0 → 0.2.0

package/dist/components/presentation/OrganizationProfile/OrganizationProfile.js

@@ -0,0 +1,122 @@
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import BaseOrganizationProfile_default from "./BaseOrganizationProfile.js";
+import getOrganization_default from "../../../api/getOrganization.js";
+import updateOrganization_default, { createPatchOperations } from "../../../api/updateOrganization.js";
+import { createPackageComponentLogger } from "@thunderid/browser";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
+const logger$1 = createPackageComponentLogger("@thunderid/react", "OrganizationProfile");
+/**
+* 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 ThunderID 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"
+* />
+* ```
+*/
+const OrganizationProfile = ({ organizationId, mode = "default", open = false, onOpenChange, onUpdate, popupTitle, loadingFallback, errorFallback, preferences,...rest }) => {
+	const { baseUrl, instanceId } = useThunderID_default();
+	const { t } = useTranslation_default(preferences?.i18n);
+	const [organization, setOrganization] = useState(null);
+	const fetchOrganization = async () => {
+		if (!baseUrl || !organizationId) return;
+		try {
+			setOrganization(await getOrganization_default({
+				baseUrl,
+				instanceId,
+				organizationId
+			}));
+		} catch (err) {
+			logger$1.error("Failed to fetch organization:");
+			setOrganization(null);
+		}
+	};
+	useEffect(() => {
+		fetchOrganization();
+	}, [baseUrl, organizationId]);
+	const handleOrganizationUpdate = async (payload) => {
+		if (!baseUrl || !organizationId) return;
+		try {
+			await updateOrganization_default({
+				baseUrl,
+				instanceId,
+				operations: createPatchOperations(payload),
+				organizationId
+			});
+			await fetchOrganization();
+			if (onUpdate) await onUpdate(payload);
+		} catch (err) {
+			logger$1.error("Failed to update organization:");
+			throw err;
+		}
+	};
+	return /* @__PURE__ */ jsx(BaseOrganizationProfile_default, {
+		organization,
+		onUpdate: handleOrganizationUpdate,
+		mode: mode === "popup" ? "popup" : "inline",
+		open,
+		onOpenChange,
+		title: popupTitle || t("organization.profile.heading"),
+		preferences,
+		...rest
+	});
+};
+var OrganizationProfile_default = OrganizationProfile;
+
+//#endregion
+export { OrganizationProfile_default as default };
+//# sourceMappingURL=OrganizationProfile.js.map

package/dist/components/presentation/OrganizationProfile/OrganizationProfile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationProfile.js","names":["logger: ReturnType<typeof createPackageComponentLogger>","OrganizationProfile: FC<OrganizationProfileProps>","useThunderID","useTranslation","getOrganization","updateOrganization","BaseOrganizationProfile"],"sources":["../../../../src/components/presentation/OrganizationProfile/OrganizationProfile.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 {OrganizationDetails, createPackageComponentLogger} from '@thunderid/browser';\nimport {FC, ReactElement, useEffect, useState} from 'react';\nimport BaseOrganizationProfile, {BaseOrganizationProfileProps} from './BaseOrganizationProfile';\nimport getOrganization from '../../../api/getOrganization';\nimport updateOrganization, {createPatchOperations} from '../../../api/updateOrganization';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useTranslation from '../../../hooks/useTranslation';\n\nconst logger: ReturnType<typeof createPackageComponentLogger> = createPackageComponentLogger(\n  '@thunderid/react',\n  'OrganizationProfile',\n);\n\n/**\n * Props for the OrganizationProfile component.\n * Extends BaseOrganizationProfileProps but makes the organization prop optional\n * since it will be fetched using the organizationId\n */\nexport type OrganizationProfileProps = Omit<BaseOrganizationProfileProps, 'organization' | 'mode'> & {\n  /**\n   * Component to show when there's an error loading organization data.\n   */\n  errorFallback?: ReactElement;\n\n  /**\n   * Component to show while loading organization data.\n   */\n  loadingFallback?: ReactElement;\n\n  /**\n   * Display mode for the component.\n   */\n  mode?: 'default' | 'popup';\n\n  /**\n   * Callback fired when the popup should be closed (only used in popup mode).\n   */\n  onOpenChange?: (open: boolean) => void;\n\n  /**\n   * Callback fired when the organization should be updated.\n   */\n  onUpdate?: (payload: any) => Promise<void>;\n\n  /**\n   * Whether the popup is open (only used in popup mode).\n   */\n  open?: boolean;\n\n  /**\n   * The ID of the organization to fetch and display.\n   */\n  organizationId: string;\n\n  /**\n   * Custom title for the popup dialog (only used in popup mode).\n   */\n  popupTitle?: string;\n};\n\n/**\n * OrganizationProfile component displays organization information in a\n * structured and styled format. It automatically fetches organization details\n * using the provided organization ID and displays them using BaseOrganizationProfile.\n *\n * The component supports editing functionality, allowing users to modify organization\n * fields inline. Updates are automatically synced with the backend via the SCIM2 API.\n *\n * This component is the React-specific implementation that automatically\n * retrieves the organization data from ThunderID API.\n *\n * @example\n * ```tsx\n * // Basic usage with editing enabled (default)\n * <OrganizationProfile organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\" />\n *\n * // Read-only mode\n * <OrganizationProfile\n *   organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\"\n *   editable={false}\n * />\n *\n * // With card layout and custom fallbacks\n * <OrganizationProfile\n *   organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\"\n *   cardLayout={true}\n *   loadingFallback={<div>Loading organization...</div>}\n *   errorFallback={<div>Failed to load organization</div>}\n *   fallback={<div>No organization data available</div>}\n * />\n *\n * // With custom fields configuration and update callback\n * <OrganizationProfile\n *   organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\"\n *   fields={[\n *     { key: 'id', label: 'Organization ID', editable: false },\n *     { key: 'name', label: 'Organization Name', editable: true },\n *     { key: 'description', label: 'Description', editable: true, render: (value) => value || 'No description' },\n *     { key: 'created', label: 'Created Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },\n *     { key: 'lastModified', label: 'Last Modified Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },\n *     { key: 'attributes', label: 'Custom Attributes', editable: true }\n *   ]}\n *   onUpdate={async (payload) => {\n *     console.log('Organization updated:', payload);\n *     // payload contains the updated field values\n *     // The component automatically converts these to patch operations\n *   }}\n * />\n *\n * // In popup mode\n * <OrganizationProfile\n *   organizationId=\"0d5e071b-d3d3-475d-b3c6-1a20ee2fa9b1\"\n *   mode=\"popup\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n *   popupTitle=\"Edit Organization Profile\"\n * />\n * ```\n */\nconst OrganizationProfile: FC<OrganizationProfileProps> = ({\n  organizationId,\n  mode = 'default',\n  open = false,\n  onOpenChange,\n  onUpdate,\n  popupTitle,\n  loadingFallback,\n  errorFallback,\n  preferences,\n  ...rest\n}: OrganizationProfileProps): ReactElement => {\n  const {baseUrl, instanceId} = useThunderID();\n  const {t} = useTranslation(preferences?.i18n);\n  const [organization, setOrganization] = useState<OrganizationDetails | null>(null);\n\n  const fetchOrganization = async (): Promise<void> => {\n    if (!baseUrl || !organizationId) {\n      return;\n    }\n\n    try {\n      const orgData: any = await getOrganization({\n        baseUrl,\n        instanceId,\n        organizationId,\n      });\n      setOrganization(orgData);\n    } catch (err) {\n      logger.error('Failed to fetch organization:');\n      setOrganization(null);\n    }\n  };\n\n  useEffect(() => {\n    fetchOrganization();\n  }, [baseUrl, organizationId]);\n\n  const handleOrganizationUpdate = async (payload: any): Promise<void> => {\n    if (!baseUrl || !organizationId) return;\n\n    try {\n      // Convert payload to patch operations format\n      const operations: any = createPatchOperations(payload);\n\n      await updateOrganization({\n        baseUrl,\n        instanceId,\n        operations,\n        organizationId,\n      });\n      // Refetch organization data after update\n      await fetchOrganization();\n\n      // Call the optional onUpdate callback\n      if (onUpdate) {\n        await onUpdate(payload);\n      }\n    } catch (err) {\n      logger.error('Failed to update organization:');\n      throw err;\n    }\n  };\n\n  return (\n    <BaseOrganizationProfile\n      organization={organization}\n      onUpdate={handleOrganizationUpdate}\n      mode={mode === 'popup' ? 'popup' : 'inline'}\n      open={open}\n      onOpenChange={onOpenChange}\n      title={popupTitle || t('organization.profile.heading')}\n      preferences={preferences}\n      {...rest}\n    />\n  );\n};\n\nexport default OrganizationProfile;\n"],"mappings":";;;;;;;;;;AA0BA,MAAMA,WAA0D,6BAC9D,oBACA,sBACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4GD,MAAMC,uBAAqD,EACzD,gBACA,OAAO,WACP,OAAO,OACP,cACA,UACA,YACA,iBACA,eACA,YACA,GAAG,WACyC;CAC5C,MAAM,EAAC,SAAS,eAAcC,sBAAc;CAC5C,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAC7C,MAAM,CAAC,cAAc,mBAAmB,SAAqC,KAAK;CAElF,MAAM,oBAAoB,YAA2B;AACnD,MAAI,CAAC,WAAW,CAAC,eACf;AAGF,MAAI;AAMF,mBALqB,MAAMC,wBAAgB;IACzC;IACA;IACA;IACD,CAAC,CACsB;WACjB,KAAK;AACZ,YAAO,MAAM,gCAAgC;AAC7C,mBAAgB,KAAK;;;AAIzB,iBAAgB;AACd,qBAAmB;IAClB,CAAC,SAAS,eAAe,CAAC;CAE7B,MAAM,2BAA2B,OAAO,YAAgC;AACtE,MAAI,CAAC,WAAW,CAAC,eAAgB;AAEjC,MAAI;AAIF,SAAMC,2BAAmB;IACvB;IACA;IACA,YALsB,sBAAsB,QAAQ;IAMpD;IACD,CAAC;AAEF,SAAM,mBAAmB;AAGzB,OAAI,SACF,OAAM,SAAS,QAAQ;WAElB,KAAK;AACZ,YAAO,MAAM,iCAAiC;AAC9C,SAAM;;;AAIV,QACE,oBAACC;EACe;EACd,UAAU;EACV,MAAM,SAAS,UAAU,UAAU;EAC7B;EACQ;EACd,OAAO,cAAc,EAAE,+BAA+B;EACzC;EACb,GAAI;GACJ;;AAIN,kCAAe"}

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

@@ -79,7 +79,7 @@ export interface BaseOrganizationSwitcherProps {
     /**
      * Optional element to render when no organization is selected.
      */
-    fallback?: ReactElement;
+    fallback?: ReactElement | null;
     /**
      * Whether the component is in a loading state.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"BaseOrganizationSwitcher.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAiBH,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAC,aAAa,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAW3E,UAAU,QAAQ;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,YAAY,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,oBAAoB,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3D;;OAEG;IACH,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,YAAY,CAAC;IAC9C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,YAAY,CAAC;IACnC;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,KAAK,YAAY,CAAC;IACvF;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CAuVtE,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"BaseOrganizationSwitcher.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAiBH,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAC,aAAa,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAW3E,UAAU,QAAQ;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,YAAY,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,oBAAoB,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3D;;OAEG;IACH,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,YAAY,CAAC;IAC9C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,YAAY,CAAC;IACnC;;OAEG;IACH,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,KAAK,YAAY,CAAC;IACvF;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CAuVtE,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.js

@@ -0,0 +1,282 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Button_default from "../../primitives/Button/Button.js";
+import Typography_default from "../../primitives/Typography/Typography.js";
+import { Avatar } from "../../primitives/Avatar/Avatar.js";
+import BaseOrganizationSwitcher_styles_default from "./BaseOrganizationSwitcher.styles.js";
+import Building_default from "../../primitives/Icons/Building.js";
+import Check_default from "../../primitives/Icons/Check.js";
+import ChevronDown_default from "../../primitives/Icons/ChevronDown.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+
+//#region src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
+/**
+* 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.
+*/
+const BaseOrganizationSwitcher = ({ organizations, currentOrganization, loading = false, error, onOrganizationSwitch, onManageProfile, className = "", style, renderOrganization, renderLoading, renderError, showRole = false, showMemberCount = true, menuItems = [], portalId = "thunderid-organization-switcher", showTriggerLabel = true, avatarSize = 24, fallback = null, preferences }) => {
+	const { theme, colorScheme, direction } = useTheme_default();
+	const styles = BaseOrganizationSwitcher_styles_default(theme, colorScheme);
+	const [isOpen, setIsOpen] = useState(false);
+	const [hoveredItemIndex, setHoveredItemIndex] = useState(null);
+	const { t } = useTranslation_default(preferences?.i18n);
+	const isRTL = direction === "rtl";
+	const { refs, floatingStyles, context } = useFloating({
+		middleware: [
+			offset(5),
+			flip({ fallbackAxisSideDirection: "end" }),
+			shift({ padding: 5 })
+		],
+		onOpenChange: setIsOpen,
+		open: isOpen,
+		placement: "bottom-end",
+		whileElementsMounted: autoUpdate
+	});
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		useClick(context),
+		useDismiss(context),
+		useRole(context)
+	]);
+	if (fallback && !currentOrganization && !loading && organizations.length === 0) return fallback;
+	const handleOrganizationSwitch = (organization) => {
+		onOrganizationSwitch(organization);
+		setIsOpen(false);
+	};
+	const handleMenuItemClick = (item) => {
+		if (item.onClick) item.onClick();
+		setIsOpen(false);
+	};
+	const switchableOrganizations = organizations.filter((org) => org.id !== currentOrganization?.id);
+	const defaultRenderOrganization = (organization, isSelected) => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Avatar, {
+			variant: "square",
+			imageUrl: organization.avatar,
+			name: organization.name,
+			size: avatarSize * 1.25,
+			alt: `${organization.name} avatar`
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: cx(styles["organizationInfo"]),
+			children: [/* @__PURE__ */ jsx(Typography_default, {
+				variant: "body2",
+				fontWeight: "medium",
+				className: cx(styles["organizationName"]),
+				children: organization.name
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cx(styles["organizationMeta"]),
+				children: [
+					showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
+						organization.memberCount,
+						" ",
+						organization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members")
+					] }),
+					showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsx("span", { children: " • " }),
+					showRole && organization.role && /* @__PURE__ */ jsx("span", {
+						className: cx(styles["roleCapitalized"]),
+						children: organization.role
+					})
+				]
+			})]
+		}),
+		isSelected && /* @__PURE__ */ jsx(Check_default, {
+			width: "16",
+			height: "16",
+			color: theme.vars.colors.text.primary
+		})
+	] });
+	const defaultRenderLoading = () => /* @__PURE__ */ jsx("div", {
+		className: cx(styles["loadingContainer"]),
+		children: /* @__PURE__ */ jsx(Typography_default, {
+			variant: "caption",
+			className: cx(styles["loadingText"]),
+			children: t("organization.switcher.loading.placeholder.organizations")
+		})
+	});
+	const defaultRenderError = (errorMessage) => /* @__PURE__ */ jsx("div", {
+		className: cx(styles["errorContainer"]),
+		children: /* @__PURE__ */ jsx(Typography_default, {
+			variant: "caption",
+			className: cx(styles["errorText"]),
+			children: errorMessage
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles["root"], className),
+		style,
+		children: [/* @__PURE__ */ jsxs(Button_default, {
+			ref: refs.setReference,
+			className: cx(styles["trigger"]),
+			color: "tertiary",
+			variant: "outline",
+			size: "medium",
+			...getReferenceProps(),
+			children: [currentOrganization ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Avatar, {
+				variant: "square",
+				imageUrl: currentOrganization.avatar,
+				name: currentOrganization.name,
+				size: avatarSize,
+				alt: `${currentOrganization.name} avatar`
+			}), showTriggerLabel && /* @__PURE__ */ jsx(Typography_default, {
+				variant: "body2",
+				className: cx(styles["triggerLabel"]),
+				children: currentOrganization.name
+			})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Building_default, {
+				width: avatarSize,
+				height: avatarSize
+			}), showTriggerLabel && /* @__PURE__ */ jsx(Typography_default, {
+				variant: "body2",
+				className: cx(styles["triggerLabel"]),
+				children: t("elements.fields.organization.select.label")
+			})] }), /* @__PURE__ */ jsx("span", {
+				style: {
+					display: "inline-flex",
+					transform: isRTL ? "scaleX(-1)" : "none"
+				},
+				children: /* @__PURE__ */ jsx(ChevronDown_default, {
+					width: "16",
+					height: "16"
+				})
+			})]
+		}), isOpen && /* @__PURE__ */ jsx(FloatingPortal, {
+			id: portalId,
+			children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+				context,
+				modal: false,
+				initialFocus: -1,
+				children: /* @__PURE__ */ jsxs("div", {
+					ref: refs.setFloating,
+					className: cx(styles["content"]),
+					style: floatingStyles,
+					...getFloatingProps(),
+					children: [
+						currentOrganization && /* @__PURE__ */ jsxs("div", {
+							className: cx(styles["header"]),
+							children: [
+								/* @__PURE__ */ jsx(Avatar, {
+									variant: "square",
+									imageUrl: currentOrganization.avatar,
+									name: currentOrganization.name,
+									size: avatarSize * 1.5,
+									alt: `${currentOrganization.name} avatar`
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: cx(styles["headerInfo"]),
+									children: [/* @__PURE__ */ jsx(Typography_default, {
+										noWrap: true,
+										className: cx(styles["headerName"]),
+										variant: "body1",
+										fontWeight: "medium",
+										children: currentOrganization.name
+									}), /* @__PURE__ */ jsxs("div", {
+										className: cx(styles["headerMeta"]),
+										children: [showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ jsxs(Typography_default, {
+											noWrap: true,
+											variant: "caption",
+											color: "secondary",
+											children: [
+												currentOrganization.memberCount,
+												" ",
+												currentOrganization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members"),
+												showRole && currentOrganization.role && /* @__PURE__ */ jsxs("span", { children: [" • ", currentOrganization.role] })
+											]
+										}), showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ jsx(Typography_default, {
+											noWrap: true,
+											className: cx(styles["headerRole"]),
+											variant: "caption",
+											color: "secondary",
+											children: currentOrganization.role
+										})]
+									})]
+								}),
+								onManageProfile && /* @__PURE__ */ jsx(Button_default, {
+									onClick: onManageProfile,
+									color: "tertiary",
+									variant: "outline",
+									size: "small",
+									"aria-label": "Manage Organization Profile",
+									className: cx(styles["manageButton"]),
+									endIcon: /* @__PURE__ */ jsxs("svg", {
+										width: "16",
+										height: "16",
+										viewBox: "0 0 24 24",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "2",
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										children: [/* @__PURE__ */ jsx("circle", {
+											cx: "12",
+											cy: "12",
+											r: "3"
+										}), /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })]
+									}),
+									children: t("organization.switcher.buttons.manage.text")
+								})
+							]
+						}),
+						organizations.length > 1 && /* @__PURE__ */ jsx("div", {
+							className: cx(styles["header"], styles["sectionHeaderContainer"]),
+							style: { borderTop: currentOrganization ? `1px solid ${theme.vars.colors.border}` : "none" },
+							children: /* @__PURE__ */ jsx(Typography_default, {
+								variant: "caption",
+								fontWeight: 600,
+								className: cx(styles["sectionHeader"]),
+								children: t("organization.switcher.switch.organization")
+							})
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: cx(styles["menu"]),
+							children: (() => {
+								if (loading) return renderLoading ? renderLoading() : defaultRenderLoading();
+								if (error) return renderError ? renderError(error) : defaultRenderError(error);
+								return /* @__PURE__ */ jsxs(Fragment, { children: [switchableOrganizations.map((organization) => {
+									const isSelected = false;
+									return /* @__PURE__ */ jsx(Button_default, {
+										onClick: () => handleOrganizationSwitch(organization),
+										className: cx(styles["menuItem"]),
+										color: "tertiary",
+										variant: "text",
+										size: "small",
+										style: { backgroundColor: hoveredItemIndex === switchableOrganizations.indexOf(organization) ? theme.vars.colors.action?.hover : "transparent" },
+										onMouseEnter: () => setHoveredItemIndex(switchableOrganizations.indexOf(organization)),
+										onMouseLeave: () => setHoveredItemIndex(null),
+										children: renderOrganization ? renderOrganization(organization, isSelected) : defaultRenderOrganization(organization, isSelected)
+									}, organization.id);
+								}), menuItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: cx(styles["menuDivider"]) }), menuItems.map((item, index) => /* @__PURE__ */ jsx("div", { children: item.href ? /* @__PURE__ */ jsxs("a", {
+									href: item.href,
+									style: { backgroundColor: hoveredItemIndex === switchableOrganizations.length + index ? theme.vars.colors.action?.hover : "transparent" },
+									className: cx(styles["menuItem"]),
+									onMouseEnter: () => setHoveredItemIndex(switchableOrganizations.length + index),
+									onMouseLeave: () => setHoveredItemIndex(null),
+									onFocus: () => setHoveredItemIndex(switchableOrganizations.length + index),
+									onBlur: () => setHoveredItemIndex(null),
+									children: [item.icon, /* @__PURE__ */ jsx("span", { children: item.label })]
+								}) : /* @__PURE__ */ jsx(Button_default, {
+									onClick: () => handleMenuItemClick(item),
+									style: { backgroundColor: hoveredItemIndex === switchableOrganizations.length + index ? theme.vars.colors.action?.hover : "transparent" },
+									className: cx(styles["menuItem"]),
+									color: "tertiary",
+									variant: "text",
+									size: "small",
+									startIcon: item.icon,
+									onMouseEnter: () => setHoveredItemIndex(switchableOrganizations.length + index),
+									onMouseLeave: () => setHoveredItemIndex(null),
+									children: item.label
+								}) }, index))] })] });
+							})()
+						})
+					]
+				})
+			})
+		})]
+	});
+};
+var BaseOrganizationSwitcher_default = BaseOrganizationSwitcher;
+
+//#endregion
+export { BaseOrganizationSwitcher, BaseOrganizationSwitcher_default as default };
+//# sourceMappingURL=BaseOrganizationSwitcher.js.map

package/dist/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationSwitcher.js","names":["BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps>","useTheme","styles: Record<string, string>","useStyles","useTranslation","isRTL: boolean","switchableOrganizations: Organization[]","Typography","Check","Button","Building","ChevronDown"],"sources":["../../../../src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.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\n// Removed BEM and vendor prefix utilities\nimport {cx} from '@emotion/css';\nimport {\n  useFloating,\n  autoUpdate,\n  offset,\n  flip,\n  shift,\n  useClick,\n  useDismiss,\n  useRole,\n  useInteractions,\n  FloatingFocusManager,\n  FloatingPortal,\n} from '@floating-ui/react';\nimport {Preferences} from '@thunderid/browser';\nimport {CSSProperties, FC, ReactElement, ReactNode, useState} from 'react';\nimport useStyles from './BaseOrganizationSwitcher.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\nimport Button from '../../primitives/Button/Button';\nimport Building from '../../primitives/Icons/Building';\nimport Check from '../../primitives/Icons/Check';\nimport ChevronDown from '../../primitives/Icons/ChevronDown';\nimport Typography from '../../primitives/Typography/Typography';\n\ninterface MenuItem {\n  href?: string;\n  icon?: ReactNode;\n  label: ReactNode;\n  onClick?: () => void;\n}\n\n/**\n * Interface for organization data.\n */\nexport interface Organization {\n  /**\n   * Avatar URL for the organization.\n   */\n  avatar?: string;\n  /**\n   * Unique identifier for the organization.\n   */\n  id: string;\n  /**\n   * Number of members in the organization.\n   */\n  memberCount?: number;\n  /**\n   * Additional metadata for the organization.\n   */\n  metadata?: Record<string, any>;\n  /**\n   * Display name of the organization.\n   */\n  name: string;\n  /**\n   * User's role in the organization.\n   */\n  role?: 'owner' | 'admin' | 'member';\n  /**\n   * URL slug for the organization.\n   */\n  slug?: string;\n}\n\n/**\n * Props interface for the BaseOrganizationSwitcher component.\n */\nexport interface BaseOrganizationSwitcherProps {\n  /**\n   * Optional size for the avatar\n   */\n  avatarSize?: number;\n  /**\n   * Custom class name for styling.\n   */\n  className?: string;\n  /**\n   * Currently selected organization.\n   */\n  currentOrganization?: Organization;\n  /**\n   * Error message to display.\n   */\n  error?: string;\n  /**\n   * Optional element to render when no organization is selected.\n   */\n  fallback?: ReactElement | null;\n  /**\n   * Whether the component is in a loading state.\n   */\n  loading?: boolean;\n  /**\n   * Additional menu items to display at the bottom of the dropdown.\n   */\n  menuItems?: MenuItem[];\n  /**\n   * Handler for when the manage profile button is clicked.\n   */\n  onManageProfile?: () => void;\n  /**\n   * Handler for when an organization is selected.\n   */\n  onOrganizationSwitch: (organization: Organization) => void;\n  /**\n   * List of available organizations.\n   */\n  organizations: Organization[];\n  /**\n   * The HTML element ID where the portal should be mounted\n   */\n  portalId?: string;\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 render function for the error state.\n   */\n  renderError?: (error: string) => ReactElement;\n  /**\n   * Custom render function for the loading state.\n   */\n  renderLoading?: () => ReactElement;\n  /**\n   * Custom render function for the organization item.\n   */\n  renderOrganization?: (organization: Organization, isSelected: boolean) => ReactElement;\n  /**\n   * Whether to show the member count.\n   */\n  showMemberCount?: boolean;\n  /**\n   * Whether to show the role badge.\n   */\n  showRole?: boolean;\n  /**\n   * Show organization name next to avatar in the trigger button\n   */\n  showTriggerLabel?: boolean;\n\n  /**\n   * Custom styles for the component.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * BaseOrganizationSwitcher component displays an organization selector with a dropdown menu.\n * When clicked, it shows a popover with available organizations to switch between.\n * This component serves as the base for framework-specific implementations.\n */\nexport const BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps> = ({\n  organizations,\n  currentOrganization,\n  loading = false,\n  error,\n  onOrganizationSwitch,\n  onManageProfile,\n  className = '',\n  style,\n  renderOrganization,\n  renderLoading,\n  renderError,\n  showRole = false,\n  showMemberCount = true,\n  menuItems = [],\n  portalId = 'thunderid-organization-switcher',\n  showTriggerLabel = true,\n  avatarSize = 24,\n  fallback = null,\n  preferences,\n}: BaseOrganizationSwitcherProps): ReactElement | null => {\n  const {theme, colorScheme, direction} = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const [isOpen, setIsOpen] = useState(false);\n  const [hoveredItemIndex, setHoveredItemIndex] = useState<number | null>(null);\n  const {t} = useTranslation(preferences?.i18n);\n  const isRTL: boolean = direction === 'rtl';\n\n  const {refs, floatingStyles, context} = useFloating({\n    middleware: [offset(5), flip({fallbackAxisSideDirection: 'end'}), shift({padding: 5})],\n    onOpenChange: setIsOpen,\n    open: isOpen,\n    placement: 'bottom-end',\n    whileElementsMounted: autoUpdate,\n  });\n\n  const click: any = useClick(context);\n  const dismiss: any = useDismiss(context);\n  const role: any = useRole(context);\n\n  const {getReferenceProps, getFloatingProps} = useInteractions([click, dismiss, role]);\n\n  if (fallback && !currentOrganization && !loading && organizations.length === 0) {\n    return fallback;\n  }\n\n  const handleOrganizationSwitch = (organization: Organization): void => {\n    onOrganizationSwitch(organization);\n    setIsOpen(false);\n  };\n\n  const handleMenuItemClick = (item: MenuItem): void => {\n    if (item.onClick) {\n      item.onClick();\n    }\n    setIsOpen(false);\n  };\n\n  // Filter out current organization from switchable list\n  const switchableOrganizations: Organization[] = organizations.filter(\n    (org: Organization): boolean => org.id !== currentOrganization?.id,\n  );\n\n  const defaultRenderOrganization = (organization: Organization, isSelected: boolean): ReactElement => (\n    <>\n      <Avatar\n        variant=\"square\"\n        imageUrl={organization.avatar}\n        name={organization.name}\n        size={avatarSize * 1.25}\n        alt={`${organization.name} avatar`}\n      />\n      <div className={cx(styles['organizationInfo'])}>\n        <Typography variant=\"body2\" fontWeight=\"medium\" className={cx(styles['organizationName'])}>\n          {organization.name}\n        </Typography>\n        <div className={cx(styles['organizationMeta'])}>\n          {showMemberCount && organization.memberCount !== undefined && (\n            <span>\n              {organization.memberCount}{' '}\n              {organization.memberCount === 1 ? t('organization.switcher.member') : t('organization.switcher.members')}\n            </span>\n          )}\n          {showRole && organization.role && showMemberCount && organization.memberCount !== undefined && (\n            <span> • </span>\n          )}\n          {showRole && organization.role && <span className={cx(styles['roleCapitalized'])}>{organization.role}</span>}\n        </div>\n      </div>\n      {isSelected && <Check width=\"16\" height=\"16\" color={theme.vars.colors.text.primary} />}\n    </>\n  );\n\n  const defaultRenderLoading = (): ReactElement => (\n    <div className={cx(styles['loadingContainer'])}>\n      <Typography variant=\"caption\" className={cx(styles['loadingText'])}>\n        {t('organization.switcher.loading.placeholder.organizations')}\n      </Typography>\n    </div>\n  );\n\n  const defaultRenderError = (errorMessage: string): ReactElement => (\n    <div className={cx(styles['errorContainer'])}>\n      <Typography variant=\"caption\" className={cx(styles['errorText'])}>\n        {errorMessage}\n      </Typography>\n    </div>\n  );\n\n  return (\n    <div className={cx(styles['root'], className)} style={style}>\n      <Button\n        ref={refs.setReference}\n        className={cx(styles['trigger'])}\n        color=\"tertiary\"\n        variant=\"outline\"\n        size=\"medium\"\n        {...getReferenceProps()}\n      >\n        {currentOrganization ? (\n          <>\n            <Avatar\n              variant=\"square\"\n              imageUrl={currentOrganization.avatar}\n              name={currentOrganization.name}\n              size={avatarSize}\n              alt={`${currentOrganization.name} avatar`}\n            />\n            {showTriggerLabel && (\n              <Typography variant=\"body2\" className={cx(styles['triggerLabel'])}>\n                {currentOrganization.name}\n              </Typography>\n            )}\n          </>\n        ) : (\n          <>\n            <Building width={avatarSize} height={avatarSize} />\n            {showTriggerLabel && (\n              <Typography variant=\"body2\" className={cx(styles['triggerLabel'])}>\n                {t('elements.fields.organization.select.label')}\n              </Typography>\n            )}\n          </>\n        )}\n        <span style={{display: 'inline-flex', transform: isRTL ? 'scaleX(-1)' : 'none'}}>\n          <ChevronDown width=\"16\" height=\"16\" />\n        </span>\n      </Button>\n\n      {isOpen && (\n        <FloatingPortal id={portalId}>\n          <FloatingFocusManager context={context} modal={false} initialFocus={-1}>\n            <div\n              ref={refs.setFloating}\n              className={cx(styles['content'])}\n              style={floatingStyles}\n              {...getFloatingProps()}\n            >\n              {/* Header - Current Organization */}\n              {currentOrganization && (\n                <div className={cx(styles['header'])}>\n                  <Avatar\n                    variant=\"square\"\n                    imageUrl={currentOrganization.avatar}\n                    name={currentOrganization.name}\n                    size={avatarSize * 1.5}\n                    alt={`${currentOrganization.name} avatar`}\n                  />\n                  <div className={cx(styles['headerInfo'])}>\n                    <Typography noWrap className={cx(styles['headerName'])} variant=\"body1\" fontWeight=\"medium\">\n                      {currentOrganization.name}\n                    </Typography>\n                    <div className={cx(styles['headerMeta'])}>\n                      {showMemberCount && currentOrganization.memberCount !== undefined && (\n                        <Typography\n                          noWrap\n                          // ...existing code...\n                          variant=\"caption\"\n                          color=\"secondary\"\n                        >\n                          {currentOrganization.memberCount}{' '}\n                          {currentOrganization.memberCount === 1\n                            ? t('organization.switcher.member')\n                            : t('organization.switcher.members')}\n                          {showRole && currentOrganization.role && <span> • {currentOrganization.role}</span>}\n                        </Typography>\n                      )}\n                      {showRole &&\n                        currentOrganization.role &&\n                        (!showMemberCount || currentOrganization.memberCount === undefined) && (\n                          <Typography noWrap className={cx(styles['headerRole'])} variant=\"caption\" color=\"secondary\">\n                            {currentOrganization.role}\n                          </Typography>\n                        )}\n                    </div>\n                  </div>\n                  {onManageProfile && (\n                    <Button\n                      onClick={onManageProfile}\n                      color=\"tertiary\"\n                      variant=\"outline\"\n                      size=\"small\"\n                      aria-label=\"Manage Organization Profile\"\n                      className={cx(styles['manageButton'])}\n                      endIcon={\n                        <svg\n                          width=\"16\"\n                          height=\"16\"\n                          viewBox=\"0 0 24 24\"\n                          fill=\"none\"\n                          stroke=\"currentColor\"\n                          strokeWidth=\"2\"\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                        >\n                          <circle cx=\"12\" cy=\"12\" r=\"3\" />\n                          <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\" />\n                        </svg>\n                      }\n                    >\n                      {t('organization.switcher.buttons.manage.text')}\n                    </Button>\n                  )}\n                </div>\n              )}\n\n              {/* Section Header for Other Organizations */}\n              {organizations.length > 1 && (\n                <div\n                  className={cx(styles['header'], styles['sectionHeaderContainer'])}\n                  style={{\n                    borderTop: currentOrganization ? `1px solid ${theme.vars.colors.border}` : 'none',\n                  }}\n                >\n                  <Typography variant=\"caption\" fontWeight={600} className={cx(styles['sectionHeader'])}>\n                    {t('organization.switcher.switch.organization')}\n                  </Typography>\n                </div>\n              )}\n\n              {/* Content */}\n              <div className={cx(styles['menu'])}>\n                {((): ReactElement => {\n                  if (loading) {\n                    return renderLoading ? renderLoading() : defaultRenderLoading();\n                  }\n                  if (error) {\n                    return renderError ? renderError(error) : defaultRenderError(error);\n                  }\n                  return (\n                    <>\n                      {switchableOrganizations.map((organization: Organization): ReactElement => {\n                        const isSelected = false; // Never selected since we exclude current org\n                        return (\n                          <Button\n                            key={organization.id}\n                            onClick={(): void => handleOrganizationSwitch(organization)}\n                            className={cx(styles['menuItem'])}\n                            color=\"tertiary\"\n                            variant=\"text\"\n                            size=\"small\"\n                            style={{\n                              backgroundColor:\n                                hoveredItemIndex === switchableOrganizations.indexOf(organization)\n                                  ? theme.vars.colors.action?.hover\n                                  : 'transparent',\n                            }}\n                            onMouseEnter={(): void =>\n                              setHoveredItemIndex(switchableOrganizations.indexOf(organization))\n                            }\n                            onMouseLeave={(): void => setHoveredItemIndex(null)}\n                          >\n                            {renderOrganization\n                              ? renderOrganization(organization, isSelected)\n                              : defaultRenderOrganization(organization, isSelected)}\n                          </Button>\n                        );\n                      })}\n\n                      {/* Menu Items */}\n                      {menuItems.length > 0 && (\n                        <>\n                          <div className={cx(styles['menuDivider'])} />\n                          {menuItems.map(\n                            (item: any, index: number): ReactElement => (\n                              <div key={index}>\n                                {item.href ? (\n                                  <a\n                                    href={item.href}\n                                    style={{\n                                      backgroundColor:\n                                        hoveredItemIndex === switchableOrganizations.length + index\n                                          ? theme.vars.colors.action?.hover\n                                          : 'transparent',\n                                    }}\n                                    className={cx(styles['menuItem'])}\n                                    onMouseEnter={(): void =>\n                                      setHoveredItemIndex(switchableOrganizations.length + index)\n                                    }\n                                    onMouseLeave={(): void => setHoveredItemIndex(null)}\n                                    onFocus={(): void => setHoveredItemIndex(switchableOrganizations.length + index)}\n                                    onBlur={(): void => setHoveredItemIndex(null)}\n                                  >\n                                    {item.icon}\n                                    <span>{item.label}</span>\n                                  </a>\n                                ) : (\n                                  <Button\n                                    onClick={(): void => handleMenuItemClick(item)}\n                                    style={{\n                                      backgroundColor:\n                                        hoveredItemIndex === switchableOrganizations.length + index\n                                          ? theme.vars.colors.action?.hover\n                                          : 'transparent',\n                                    }}\n                                    className={cx(styles['menuItem'])}\n                                    color=\"tertiary\"\n                                    variant=\"text\"\n                                    size=\"small\"\n                                    startIcon={item.icon}\n                                    onMouseEnter={(): void =>\n                                      setHoveredItemIndex(switchableOrganizations.length + index)\n                                    }\n                                    onMouseLeave={(): void => setHoveredItemIndex(null)}\n                                  >\n                                    {item.label}\n                                  </Button>\n                                )}\n                              </div>\n                            ),\n                          )}\n                        </>\n                      )}\n                    </>\n                  );\n                })()}\n              </div>\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n};\n\nexport default BaseOrganizationSwitcher;\n"],"mappings":"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"}