@thunderid/react 0.1.0 → 0.2.0

package/dist/cjs/components/presentation/OrganizationProfile/OrganizationProfile.cjs

@@ -0,0 +1,126 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useThunderID = require('../../../contexts/ThunderID/useThunderID.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_BaseOrganizationProfile = require('./BaseOrganizationProfile.cjs');
+const require_getOrganization = require('../../../api/getOrganization.cjs');
+const require_updateOrganization = require('../../../api/updateOrganization.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+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);
+
+//#region src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
+const logger = (0, __thunderid_browser.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 } = require_useThunderID.default();
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const [organization, setOrganization] = (0, react.useState)(null);
+	const fetchOrganization = async () => {
+		if (!baseUrl || !organizationId) return;
+		try {
+			setOrganization(await require_getOrganization.default({
+				baseUrl,
+				instanceId,
+				organizationId
+			}));
+		} catch (err) {
+			logger.error("Failed to fetch organization:");
+			setOrganization(null);
+		}
+	};
+	(0, react.useEffect)(() => {
+		fetchOrganization();
+	}, [baseUrl, organizationId]);
+	const handleOrganizationUpdate = async (payload) => {
+		if (!baseUrl || !organizationId) return;
+		try {
+			await require_updateOrganization.default({
+				baseUrl,
+				instanceId,
+				operations: (0, __thunderid_browser.createPatchOperations)(payload),
+				organizationId
+			});
+			await fetchOrganization();
+			if (onUpdate) await onUpdate(payload);
+		} catch (err) {
+			logger.error("Failed to update organization:");
+			throw err;
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_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
+exports.default = OrganizationProfile_default;
+//# sourceMappingURL=OrganizationProfile.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationProfile.cjs","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,+DACJ,oBACA,sBACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4GD,MAAMC,uBAAqD,EACzD,gBACA,OAAO,WACP,OAAO,OACP,cACA,UACA,YACA,iBACA,eACA,YACA,GAAG,WACyC;CAC5C,MAAM,EAAC,SAAS,eAAcC,8BAAc;CAC5C,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAC7C,MAAM,CAAC,cAAc,uCAAwD,KAAK;CAElF,MAAM,oBAAoB,YAA2B;AACnD,MAAI,CAAC,WAAW,CAAC,eACf;AAGF,MAAI;AAMF,mBALqB,MAAMC,gCAAgB;IACzC;IACA;IACA;IACD,CAAC,CACsB;WACjB,KAAK;AACZ,UAAO,MAAM,gCAAgC;AAC7C,mBAAgB,KAAK;;;AAIzB,4BAAgB;AACd,qBAAmB;IAClB,CAAC,SAAS,eAAe,CAAC;CAE7B,MAAM,2BAA2B,OAAO,YAAgC;AACtE,MAAI,CAAC,WAAW,CAAC,eAAgB;AAEjC,MAAI;AAIF,SAAMC,mCAAmB;IACvB;IACA;IACA,2DAL4C,QAAQ;IAMpD;IACD,CAAC;AAEF,SAAM,mBAAmB;AAGzB,OAAI,SACF,OAAM,SAAS,QAAQ;WAElB,KAAK;AACZ,UAAO,MAAM,iCAAiC;AAC9C,SAAM;;;AAIV,QACE,2CAACC;EACe;EACd,UAAU;EACV,MAAM,SAAS,UAAU,UAAU;EAC7B;EACQ;EACd,OAAO,cAAc,EAAE,+BAA+B;EACzC;EACb,GAAI;GACJ;;AAIN,kCAAe"}

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

@@ -0,0 +1,288 @@
+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_Button = require('../../primitives/Button/Button.cjs');
+const require_Typography = require('../../primitives/Typography/Typography.cjs');
+const require_Avatar = require('../../primitives/Avatar/Avatar.cjs');
+const require_BaseOrganizationSwitcher_styles = require('./BaseOrganizationSwitcher.styles.cjs');
+const require_Building = require('../../primitives/Icons/Building.cjs');
+const require_Check = require('../../primitives/Icons/Check.cjs');
+const require_ChevronDown = require('../../primitives/Icons/ChevronDown.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);
+let __floating_ui_react = require("@floating-ui/react");
+__floating_ui_react = require_rolldown_runtime.__toESM(__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 } = require_useTheme.default();
+	const styles = require_BaseOrganizationSwitcher_styles.default(theme, colorScheme);
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const [hoveredItemIndex, setHoveredItemIndex] = (0, react.useState)(null);
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const isRTL = direction === "rtl";
+	const { refs, floatingStyles, context } = (0, __floating_ui_react.useFloating)({
+		middleware: [
+			(0, __floating_ui_react.offset)(5),
+			(0, __floating_ui_react.flip)({ fallbackAxisSideDirection: "end" }),
+			(0, __floating_ui_react.shift)({ padding: 5 })
+		],
+		onOpenChange: setIsOpen,
+		open: isOpen,
+		placement: "bottom-end",
+		whileElementsMounted: __floating_ui_react.autoUpdate
+	});
+	const { getReferenceProps, getFloatingProps } = (0, __floating_ui_react.useInteractions)([
+		(0, __floating_ui_react.useClick)(context),
+		(0, __floating_ui_react.useDismiss)(context),
+		(0, __floating_ui_react.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Avatar.Avatar, {
+			variant: "square",
+			imageUrl: organization.avatar,
+			name: organization.name,
+			size: avatarSize * 1.25,
+			alt: `${organization.name} avatar`
+		}),
+		/* @__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: "body2",
+				fontWeight: "medium",
+				className: (0, __emotion_css.cx)(styles["organizationName"]),
+				children: organization.name
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, __emotion_css.cx)(styles["organizationMeta"]),
+				children: [
+					showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", { children: " • " }),
+					showRole && organization.role && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: (0, __emotion_css.cx)(styles["roleCapitalized"]),
+						children: organization.role
+					})
+				]
+			})]
+		}),
+		isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Check.default, {
+			width: "16",
+			height: "16",
+			color: theme.vars.colors.text.primary
+		})
+	] });
+	const defaultRenderLoading = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, __emotion_css.cx)(styles["loadingContainer"]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+			variant: "caption",
+			className: (0, __emotion_css.cx)(styles["loadingText"]),
+			children: t("organization.switcher.loading.placeholder.organizations")
+		})
+	});
+	const defaultRenderError = (errorMessage) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, __emotion_css.cx)(styles["errorContainer"]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+			variant: "caption",
+			className: (0, __emotion_css.cx)(styles["errorText"]),
+			children: errorMessage
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, __emotion_css.cx)(styles["root"], className),
+		style,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Button.default, {
+			ref: refs.setReference,
+			className: (0, __emotion_css.cx)(styles["trigger"]),
+			color: "tertiary",
+			variant: "outline",
+			size: "medium",
+			...getReferenceProps(),
+			children: [currentOrganization ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Avatar.Avatar, {
+				variant: "square",
+				imageUrl: currentOrganization.avatar,
+				name: currentOrganization.name,
+				size: avatarSize,
+				alt: `${currentOrganization.name} avatar`
+			}), showTriggerLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+				variant: "body2",
+				className: (0, __emotion_css.cx)(styles["triggerLabel"]),
+				children: currentOrganization.name
+			})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Building.default, {
+				width: avatarSize,
+				height: avatarSize
+			}), showTriggerLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+				variant: "body2",
+				className: (0, __emotion_css.cx)(styles["triggerLabel"]),
+				children: t("elements.fields.organization.select.label")
+			})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: {
+					display: "inline-flex",
+					transform: isRTL ? "scaleX(-1)" : "none"
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChevronDown.default, {
+					width: "16",
+					height: "16"
+				})
+			})]
+		}), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingPortal, {
+			id: portalId,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingFocusManager, {
+				context,
+				modal: false,
+				initialFocus: -1,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: refs.setFloating,
+					className: (0, __emotion_css.cx)(styles["content"]),
+					style: floatingStyles,
+					...getFloatingProps(),
+					children: [
+						currentOrganization && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: (0, __emotion_css.cx)(styles["header"]),
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Avatar.Avatar, {
+									variant: "square",
+									imageUrl: currentOrganization.avatar,
+									name: currentOrganization.name,
+									size: avatarSize * 1.5,
+									alt: `${currentOrganization.name} avatar`
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: (0, __emotion_css.cx)(styles["headerInfo"]),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+										noWrap: true,
+										className: (0, __emotion_css.cx)(styles["headerName"]),
+										variant: "body1",
+										fontWeight: "medium",
+										children: currentOrganization.name
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: (0, __emotion_css.cx)(styles["headerMeta"]),
+										children: [showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_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__ */ (0, react_jsx_runtime.jsxs)("span", { children: [" • ", currentOrganization.role] })
+											]
+										}), showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+											noWrap: true,
+											className: (0, __emotion_css.cx)(styles["headerRole"]),
+											variant: "caption",
+											color: "secondary",
+											children: currentOrganization.role
+										})]
+									})]
+								}),
+								onManageProfile && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+									onClick: onManageProfile,
+									color: "tertiary",
+									variant: "outline",
+									size: "small",
+									"aria-label": "Manage Organization Profile",
+									className: (0, __emotion_css.cx)(styles["manageButton"]),
+									endIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+										width: "16",
+										height: "16",
+										viewBox: "0 0 24 24",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "2",
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+											cx: "12",
+											cy: "12",
+											r: "3"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, __emotion_css.cx)(styles["header"], styles["sectionHeaderContainer"]),
+							style: { borderTop: currentOrganization ? `1px solid ${theme.vars.colors.border}` : "none" },
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
+								variant: "caption",
+								fontWeight: 600,
+								className: (0, __emotion_css.cx)(styles["sectionHeader"]),
+								children: t("organization.switcher.switch.organization")
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, __emotion_css.cx)(styles["menu"]),
+							children: (() => {
+								if (loading) return renderLoading ? renderLoading() : defaultRenderLoading();
+								if (error) return renderError ? renderError(error) : defaultRenderError(error);
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [switchableOrganizations.map((organization) => {
+									const isSelected = false;
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+										onClick: () => handleOrganizationSwitch(organization),
+										className: (0, __emotion_css.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, __emotion_css.cx)(styles["menuDivider"]) }), menuItems.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: item.href ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+									href: item.href,
+									style: { backgroundColor: hoveredItemIndex === switchableOrganizations.length + index ? theme.vars.colors.action?.hover : "transparent" },
+									className: (0, __emotion_css.cx)(styles["menuItem"]),
+									onMouseEnter: () => setHoveredItemIndex(switchableOrganizations.length + index),
+									onMouseLeave: () => setHoveredItemIndex(null),
+									onFocus: () => setHoveredItemIndex(switchableOrganizations.length + index),
+									onBlur: () => setHoveredItemIndex(null),
+									children: [item.icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: item.label })]
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+									onClick: () => handleMenuItemClick(item),
+									style: { backgroundColor: hoveredItemIndex === switchableOrganizations.length + index ? theme.vars.colors.action?.hover : "transparent" },
+									className: (0, __emotion_css.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
+exports.BaseOrganizationSwitcher = BaseOrganizationSwitcher;
+exports.default = BaseOrganizationSwitcher_default;
+//# sourceMappingURL=BaseOrganizationSwitcher.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationSwitcher.cjs","names":["BaseOrganizationSwitcher: FC<BaseOrganizationSwitcherProps>","useTheme","styles: Record<string, string>","useStyles","useTranslation","isRTL: boolean","autoUpdate","switchableOrganizations: Organization[]","Avatar","Typography","Check","Button","Building","ChevronDown","FloatingPortal","FloatingFocusManager"],"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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"}