@thunderid/react 1.13.0 → 1.15.0

package/dist/cjs/components/account/OrganizationUnitSwitcher/BaseOrganizationUnitSwitcher.cjs

@@ -0,0 +1,214 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_Spinner = require('../../primitives/Spinner/Spinner.cjs');
+const require_Button = require('../../primitives/Button/Button.cjs');
+const require_Check = require('../../primitives/Icons/Check.cjs');
+const require_BaseOrganizationUnitSwitcher_styles = require('./BaseOrganizationUnitSwitcher.styles.cjs');
+const require_ChevronDown = require('../../primitives/Icons/ChevronDown.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);
+let __floating_ui_react = require("@floating-ui/react");
+__floating_ui_react = require_rolldown_runtime.__toESM(__floating_ui_react);
+
+//#region src/components/account/OrganizationUnitSwitcher/BaseOrganizationUnitSwitcher.tsx
+const BLOCK = "organization-unit-switcher";
+/**
+* Presentational organization unit picker: a field showing the current unit under a small label, which
+* opens a menu of the units the signed-in user can access. Holds no SDK state and makes no request: pass
+* the units and the callbacks. Use {@link OrganizationUnitSwitcher} for the variant wired to the SDK.
+*
+* @example
+* ```tsx
+* <BaseOrganizationUnitSwitcher
+*   organizationUnits={units}
+*   current={currentId}
+*   totalResults={units.length}
+*   onSwitch={(unit) => switchTo(unit.id)}
+* />
+* ```
+*/
+const BaseOrganizationUnitSwitcher = ({ children = void 0, className = "", current = null, currentName = null, error = null, isLoading = false, limit = 10, offset = 0, onPageChange = () => void 0, onSwitch = () => void 0, organizationUnits = [], preferences = void 0, switchingId = null, title = void 0, totalResults = void 0 }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const styles = require_BaseOrganizationUnitSwitcher_styles.default(theme, colorScheme);
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const [activeIndex, setActiveIndex] = (0, react.useState)(null);
+	const listRef = (0, react.useRef)([]);
+	const listId = (0, react.useId)();
+	const isSwitching = switchingId !== null;
+	const open = isOpen && !isSwitching;
+	const currentIndex = organizationUnits.findIndex((unit) => unit.id === current);
+	const resolvedCurrentName = organizationUnits[currentIndex]?.name ?? currentName;
+	const resolvedTotal = totalResults ?? organizationUnits.length;
+	const { context, floatingStyles, refs } = (0, __floating_ui_react.useFloating)({
+		middleware: [
+			(0, __floating_ui_react.offset)(4),
+			(0, __floating_ui_react.flip)(),
+			(0, __floating_ui_react.shift)({ padding: 8 }),
+			(0, __floating_ui_react.size)({ apply({ elements, rects }) {
+				elements.floating.style.minWidth = `${rects.reference.width}px`;
+			} })
+		],
+		onOpenChange: setIsOpen,
+		open,
+		placement: "bottom-start",
+		whileElementsMounted: __floating_ui_react.autoUpdate
+	});
+	const { getFloatingProps, getItemProps, getReferenceProps } = (0, __floating_ui_react.useInteractions)([
+		(0, __floating_ui_react.useClick)(context, { enabled: !isSwitching }),
+		(0, __floating_ui_react.useDismiss)(context),
+		(0, __floating_ui_react.useListNavigation)(context, {
+			activeIndex,
+			listRef,
+			loop: true,
+			onNavigate: setActiveIndex,
+			selectedIndex: currentIndex >= 0 ? currentIndex : null
+		})
+	]);
+	const renderProps = {
+		current,
+		currentName: resolvedCurrentName,
+		error,
+		isLoading,
+		limit,
+		offset,
+		onPageChange,
+		onSwitch,
+		organizationUnits,
+		switchingId,
+		totalResults: resolvedTotal
+	};
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: children(renderProps) });
+	const label = title ?? t("organization_unit.switcher.label");
+	const hasPrevious = offset > 0;
+	const hasNext = offset + organizationUnits.length < resolvedTotal;
+	const fieldValue = () => {
+		if (isSwitching) return t("organization_unit.switcher.switching", { name: organizationUnits.find((unit) => unit.id === switchingId)?.name ?? switchingId ?? "" });
+		if (resolvedCurrentName) return resolvedCurrentName;
+		return isLoading ? t("organization_unit.switcher.loading") : t("organization_unit.switcher.placeholder");
+	};
+	const pick = (unit) => {
+		setIsOpen(false);
+		if (unit.id !== current) onSwitch(unit);
+	};
+	const menuContent = () => {
+		if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			role: "status",
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)(BLOCK, "loading")), styles["status"]),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.default, { size: "small" })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("organization_unit.switcher.loading") })]
+		});
+		if (organizationUnits.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)(BLOCK, "empty")), styles["status"]),
+			children: error ?? t("organization_unit.switcher.empty")
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: listId,
+			role: "listbox",
+			"aria-label": label || t("organization_unit.switcher.label"),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)(BLOCK, "list")), styles["list"]),
+			children: organizationUnits.map((unit, index) => {
+				const isCurrent = unit.id === current;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					ref: (node) => {
+						listRef.current[index] = node;
+					},
+					type: "button",
+					role: "option",
+					"aria-selected": isCurrent,
+					tabIndex: index === activeIndex ? 0 : -1,
+					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)(BLOCK, "option", isCurrent ? "current" : void 0)), styles["option"], isCurrent ? styles["optionCurrent"] : ""),
+					...getItemProps({ onClick: () => pick(unit) }),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: styles["optionText"],
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: styles["optionName"],
+							children: unit.name
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: styles["optionHandle"],
+							children: unit.handle
+						})]
+					}), isCurrent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": "true",
+						className: styles["check"],
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Check.default, {})
+					})]
+				}, unit.id);
+			})
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)(BLOCK), styles["root"], className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				ref: refs.setReference,
+				type: "button",
+				"aria-controls": open ? listId : void 0,
+				"aria-expanded": open,
+				"aria-haspopup": "listbox",
+				disabled: isSwitching,
+				...getReferenceProps(),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)(BLOCK, "field")), styles["field"]),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: styles["fieldText"],
+					children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)(BLOCK, "label")), styles["label"]),
+						children: label
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)(BLOCK, "value")), styles["value"]),
+						children: fieldValue()
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": "true",
+					className: require_emotion.cx(styles["chevron"], open ? styles["chevronOpen"] : ""),
+					children: isSwitching ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.default, { size: "small" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ChevronDown.default, {})
+				})]
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				role: "alert",
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)(BLOCK, "error")), styles["error"]),
+				children: error
+			}),
+			open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingFocusManager, {
+				context,
+				initialFocus: -1,
+				modal: false,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: refs.setFloating,
+					style: floatingStyles,
+					...getFloatingProps(),
+					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)(BLOCK, "menu")), styles["menu"]),
+					children: [menuContent(), (hasPrevious || hasNext) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)(BLOCK, "pagination")), styles["pagination"]),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+							size: "small",
+							variant: "text",
+							disabled: !hasPrevious || isLoading,
+							onClick: () => onPageChange(Math.max(0, offset - limit)),
+							children: t("organization_unit.switcher.previous")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+							size: "small",
+							variant: "text",
+							disabled: !hasNext || isLoading,
+							onClick: () => onPageChange(offset + limit),
+							children: t("organization_unit.switcher.next")
+						})]
+					})]
+				})
+			}) })
+		]
+	});
+};
+var BaseOrganizationUnitSwitcher_default = BaseOrganizationUnitSwitcher;
+
+//#endregion
+exports.default = BaseOrganizationUnitSwitcher_default;
+//# sourceMappingURL=BaseOrganizationUnitSwitcher.cjs.map

package/dist/cjs/components/account/OrganizationUnitSwitcher/BaseOrganizationUnitSwitcher.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationUnitSwitcher.cjs","names":["BaseOrganizationUnitSwitcher: FC<BaseOrganizationUnitSwitcherProps>","useTheme","styles: Record<string, string>","useStyles","useTranslation","listId: string","isSwitching: boolean","open: boolean","currentIndex: number","resolvedCurrentName: string | null","resolvedTotal: number","autoUpdate","renderProps: OrganizationUnitSwitcherRenderProps","label: string","hasPrevious: boolean","hasNext: boolean","cx","Spinner","isCurrent: boolean","Check","ChevronDown","FloatingPortal","FloatingFocusManager","Button"],"sources":["../../../../../src/components/account/OrganizationUnitSwitcher/BaseOrganizationUnitSwitcher.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  type MiddlewareState,\n  offset as floatingOffset,\n  shift,\n  size,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n} from '@floating-ui/react';\nimport {AccessibleOrganizationUnit, Preferences, bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useId, useRef, useState} from 'react';\nimport useStyles from './BaseOrganizationUnitSwitcher.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\nimport Button from '../../primitives/Button/Button';\nimport Check from '../../primitives/Icons/Check';\nimport ChevronDown from '../../primitives/Icons/ChevronDown';\nimport Spinner from '../../primitives/Spinner/Spinner';\n\nconst BLOCK = 'organization-unit-switcher';\n\nexport interface OrganizationUnitSwitcherRenderProps {\n  /**\n   * Identifier of the unit the session is in, or `null` when it is not known.\n   */\n  current: string | null;\n  /**\n   * Name of the unit the session is in, from the page or the session, or `null` when it is not known.\n   */\n  currentName: string | null;\n  /**\n   * A translated message for the last failure, or `null`.\n   */\n  error: string | null;\n  /**\n   * Whether the units are loading.\n   */\n  isLoading: boolean;\n  /**\n   * The page size.\n   */\n  limit: number;\n  /**\n   * The zero-based offset of the page.\n   */\n  offset: number;\n  /**\n   * Moves to the page that starts at `offset`.\n   */\n  onPageChange: (offset: number) => void;\n  /**\n   * Switches to `unit` (or hands it to the app's `onSelect`).\n   */\n  onSwitch: (unit: AccessibleOrganizationUnit) => void;\n  /**\n   * The units of the page.\n   */\n  organizationUnits: AccessibleOrganizationUnit[];\n  /**\n   * Identifier of the unit a switch is in progress to, or `null`.\n   */\n  switchingId: string | null;\n  /**\n   * Number of units the listing matches.\n   */\n  totalResults: number;\n}\n\nexport interface BaseOrganizationUnitSwitcherProps extends Partial<OrganizationUnitSwitcherRenderProps> {\n  /**\n   * Custom render. Replaces the built-in UI and receives the units, the current one, the loading and\n   * error state, the paging and `onSwitch`.\n   */\n  children?: (props: OrganizationUnitSwitcherRenderProps) => ReactNode;\n  /**\n   * Additional CSS class names.\n   */\n  className?: string;\n  /**\n   * Component-level preference overrides, including i18n.\n   */\n  preferences?: Preferences;\n  /**\n   * Overrides the small label above the current unit. Pass an empty string to omit it.\n   */\n  title?: string;\n}\n\n/**\n * Presentational organization unit picker: a field showing the current unit under a small label, which\n * opens a menu of the units the signed-in user can access. Holds no SDK state and makes no request: pass\n * the units and the callbacks. Use {@link OrganizationUnitSwitcher} for the variant wired to the SDK.\n *\n * @example\n * ```tsx\n * <BaseOrganizationUnitSwitcher\n *   organizationUnits={units}\n *   current={currentId}\n *   totalResults={units.length}\n *   onSwitch={(unit) => switchTo(unit.id)}\n * />\n * ```\n */\nconst BaseOrganizationUnitSwitcher: FC<BaseOrganizationUnitSwitcherProps> = ({\n  children = undefined,\n  className = '',\n  current = null,\n  currentName = null,\n  error = null,\n  isLoading = false,\n  limit = 10,\n  offset = 0,\n  onPageChange = (): void => undefined,\n  onSwitch = (): void => undefined,\n  organizationUnits = [],\n  preferences = undefined,\n  switchingId = null,\n  title = undefined,\n  totalResults = undefined,\n}: BaseOrganizationUnitSwitcherProps): ReactElement => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const {t} = useTranslation(preferences?.i18n);\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n  const listId: string = useId();\n\n  const isSwitching: boolean = switchingId !== null;\n  const open: boolean = isOpen && !isSwitching;\n  const currentIndex: number = organizationUnits.findIndex((unit: AccessibleOrganizationUnit) => unit.id === current);\n  const resolvedCurrentName: string | null = organizationUnits[currentIndex]?.name ?? currentName;\n  const resolvedTotal: number = totalResults ?? organizationUnits.length;\n\n  const {context, floatingStyles, refs} = useFloating({\n    middleware: [\n      floatingOffset(4),\n      flip(),\n      shift({padding: 8}),\n      size({\n        apply({elements, rects}: MiddlewareState): void {\n          elements.floating.style.minWidth = `${rects.reference.width}px`;\n        },\n      }),\n    ],\n    onOpenChange: setIsOpen,\n    open,\n    placement: 'bottom-start',\n    whileElementsMounted: autoUpdate,\n  });\n  const click: ReturnType<typeof useClick> = useClick(context, {enabled: !isSwitching});\n  const dismiss: ReturnType<typeof useDismiss> = useDismiss(context);\n  const listNavigation: ReturnType<typeof useListNavigation> = useListNavigation(context, {\n    activeIndex,\n    listRef,\n    loop: true,\n    onNavigate: setActiveIndex,\n    selectedIndex: currentIndex >= 0 ? currentIndex : null,\n  });\n  const {getFloatingProps, getItemProps, getReferenceProps} = useInteractions([click, dismiss, listNavigation]);\n\n  const renderProps: OrganizationUnitSwitcherRenderProps = {\n    current,\n    currentName: resolvedCurrentName,\n    error,\n    isLoading,\n    limit,\n    offset,\n    onPageChange,\n    onSwitch,\n    organizationUnits,\n    switchingId,\n    totalResults: resolvedTotal,\n  };\n\n  if (children) {\n    return <>{children(renderProps)}</>;\n  }\n\n  const label: string = title ?? t('organization_unit.switcher.label');\n  const hasPrevious: boolean = offset > 0;\n  const hasNext: boolean = offset + organizationUnits.length < resolvedTotal;\n\n  const fieldValue = (): string => {\n    if (isSwitching) {\n      const target: AccessibleOrganizationUnit | undefined = organizationUnits.find(\n        (unit: AccessibleOrganizationUnit) => unit.id === switchingId,\n      );\n\n      return t('organization_unit.switcher.switching', {name: target?.name ?? switchingId ?? ''});\n    }\n\n    if (resolvedCurrentName) {\n      return resolvedCurrentName;\n    }\n\n    return isLoading ? t('organization_unit.switcher.loading') : t('organization_unit.switcher.placeholder');\n  };\n\n  const pick = (unit: AccessibleOrganizationUnit): void => {\n    setIsOpen(false);\n\n    if (unit.id !== current) {\n      onSwitch(unit);\n    }\n  };\n\n  const menuContent = (): ReactNode => {\n    if (isLoading) {\n      return (\n        <div role=\"status\" className={cx(withVendorCSSClassPrefix(bem(BLOCK, 'loading')), styles['status'])}>\n          <span aria-hidden=\"true\">\n            <Spinner size=\"small\" />\n          </span>\n          <span>{t('organization_unit.switcher.loading')}</span>\n        </div>\n      );\n    }\n\n    if (organizationUnits.length === 0) {\n      return (\n        <p className={cx(withVendorCSSClassPrefix(bem(BLOCK, 'empty')), styles['status'])}>\n          {error ?? t('organization_unit.switcher.empty')}\n        </p>\n      );\n    }\n\n    return (\n      <div\n        id={listId}\n        role=\"listbox\"\n        aria-label={label || t('organization_unit.switcher.label')}\n        className={cx(withVendorCSSClassPrefix(bem(BLOCK, 'list')), styles['list'])}\n      >\n        {organizationUnits.map((unit: AccessibleOrganizationUnit, index: number) => {\n          const isCurrent: boolean = unit.id === current;\n\n          return (\n            <button\n              key={unit.id}\n              ref={(node: HTMLButtonElement | null): void => {\n                listRef.current[index] = node;\n              }}\n              type=\"button\"\n              role=\"option\"\n              aria-selected={isCurrent}\n              tabIndex={index === activeIndex ? 0 : -1}\n              className={cx(\n                withVendorCSSClassPrefix(bem(BLOCK, 'option', isCurrent ? 'current' : undefined)),\n                styles['option'],\n                isCurrent ? styles['optionCurrent'] : '',\n              )}\n              {...getItemProps({onClick: (): void => pick(unit)})}\n            >\n              <span className={styles['optionText']}>\n                <span className={styles['optionName']}>{unit.name}</span>\n                <span className={styles['optionHandle']}>{unit.handle}</span>\n              </span>\n              {isCurrent && (\n                <span aria-hidden=\"true\" className={styles['check']}>\n                  <Check />\n                </span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <div className={cx(withVendorCSSClassPrefix(BLOCK), styles['root'], className)}>\n      <button\n        ref={refs.setReference}\n        type=\"button\"\n        aria-controls={open ? listId : undefined}\n        aria-expanded={open}\n        aria-haspopup=\"listbox\"\n        disabled={isSwitching}\n        {...getReferenceProps()}\n        className={cx(withVendorCSSClassPrefix(bem(BLOCK, 'field')), styles['field'])}\n      >\n        <span className={styles['fieldText']}>\n          {label && <span className={cx(withVendorCSSClassPrefix(bem(BLOCK, 'label')), styles['label'])}>{label}</span>}\n          <span className={cx(withVendorCSSClassPrefix(bem(BLOCK, 'value')), styles['value'])}>{fieldValue()}</span>\n        </span>\n        <span aria-hidden=\"true\" className={cx(styles['chevron'], open ? styles['chevronOpen'] : '')}>\n          {isSwitching ? <Spinner size=\"small\" /> : <ChevronDown />}\n        </span>\n      </button>\n\n      {error && (\n        <div role=\"alert\" className={cx(withVendorCSSClassPrefix(bem(BLOCK, 'error')), styles['error'])}>\n          {error}\n        </div>\n      )}\n\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} initialFocus={-1} modal={false}>\n            <div\n              ref={refs.setFloating}\n              style={floatingStyles}\n              {...getFloatingProps()}\n              className={cx(withVendorCSSClassPrefix(bem(BLOCK, 'menu')), styles['menu'])}\n            >\n              {menuContent()}\n              {(hasPrevious || hasNext) && (\n                <div className={cx(withVendorCSSClassPrefix(bem(BLOCK, 'pagination')), styles['pagination'])}>\n                  <Button\n                    size=\"small\"\n                    variant=\"text\"\n                    disabled={!hasPrevious || isLoading}\n                    onClick={(): void => onPageChange(Math.max(0, offset - limit))}\n                  >\n                    {t('organization_unit.switcher.previous')}\n                  </Button>\n                  <Button\n                    size=\"small\"\n                    variant=\"text\"\n                    disabled={!hasNext || isLoading}\n                    onClick={(): void => onPageChange(offset + limit)}\n                  >\n                    {t('organization_unit.switcher.next')}\n                  </Button>\n                </div>\n              )}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n};\n\nexport default BaseOrganizationUnitSwitcher;\n"],"mappings":"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"}

package/dist/cjs/components/account/OrganizationUnitSwitcher/BaseOrganizationUnitSwitcher.styles.cjs

@@ -0,0 +1,184 @@
+const require_emotion = require('../../../styles/emotion.cjs');
+
+//#region src/components/account/OrganizationUnitSwitcher/BaseOrganizationUnitSwitcher.styles.ts
+/**
+* Creates styles for the BaseOrganizationUnitSwitcher component.
+*
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme) => {
+	const hover = theme.vars.colors.action?.hover || "rgba(0, 0, 0, 0.04)";
+	const root = require_emotion.css`
+    display: inline-flex;
+    flex-direction: column;
+    gap: calc(${theme.vars.spacing.unit} * 0.5);
+    min-width: 240px;
+    max-width: 100%;
+    font-family: ${theme.vars.typography.fontFamily};
+  `;
+	const field = require_emotion.css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(${theme.vars.spacing.unit} * 1.5);
+    width: 100%;
+    box-sizing: border-box;
+    padding: calc(${theme.vars.spacing.unit} * 0.75) calc(${theme.vars.spacing.unit} * 1.5);
+    border: 1px solid ${theme.vars.colors.border};
+    border-radius: ${theme.vars.borderRadius.medium};
+    background: ${theme.vars.colors.background.surface};
+    color: ${theme.vars.colors.text.primary};
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      background-color: ${hover};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${theme.vars.colors.primary.main};
+      outline-offset: 1px;
+    }
+
+    &:disabled {
+      cursor: default;
+      opacity: 0.7;
+    }
+  `;
+	const fieldText = require_emotion.css`
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  `;
+	const label = require_emotion.css`
+    display: block;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: ${theme.vars.colors.text.secondary};
+  `;
+	const value = require_emotion.css`
+    display: block;
+    overflow: hidden;
+    font-size: 1rem;
+    line-height: 1.375rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `;
+	const chevron = require_emotion.css`
+    display: flex;
+    flex-shrink: 0;
+    color: ${theme.vars.colors.text.secondary};
+    transition: transform 0.12s ease-in-out;
+  `;
+	const chevronOpen = require_emotion.css`
+    transform: rotate(180deg);
+  `;
+	const error = require_emotion.css`
+    font-size: 0.75rem;
+    color: ${theme.vars.colors.error.main};
+  `;
+	const menu = require_emotion.css`
+    box-sizing: border-box;
+    max-height: 320px;
+    overflow-y: auto;
+    padding: calc(${theme.vars.spacing.unit} * 0.5);
+    border: 1px solid ${theme.vars.colors.border};
+    border-radius: ${theme.vars.borderRadius.medium};
+    background-color: ${theme.vars.colors.background.surface};
+    box-shadow: ${theme.vars.shadows.medium};
+    font-family: ${theme.vars.typography.fontFamily};
+    outline: none;
+    z-index: 1000;
+  `;
+	const list = require_emotion.css`
+    display: flex;
+    flex-direction: column;
+  `;
+	const option = require_emotion.css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: ${theme.vars.spacing.unit};
+    width: 100%;
+    padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.25);
+    border: none;
+    border-radius: ${theme.vars.borderRadius.small};
+    background-color: transparent;
+    color: ${theme.vars.colors.text.primary};
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    outline: none;
+
+    &:hover,
+    &:focus-visible {
+      background-color: ${hover};
+    }
+  `;
+	const optionCurrent = require_emotion.css`
+    font-weight: 600;
+  `;
+	const optionText = require_emotion.css`
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  `;
+	const optionName = require_emotion.css`
+    font-size: 0.875rem;
+  `;
+	const optionHandle = require_emotion.css`
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: ${theme.vars.colors.text.secondary};
+  `;
+	const check = require_emotion.css`
+    display: flex;
+    flex-shrink: 0;
+    color: ${theme.vars.colors.primary.main};
+  `;
+	const status = require_emotion.css`
+    display: flex;
+    align-items: center;
+    gap: ${theme.vars.spacing.unit};
+    margin: 0;
+    padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.25);
+    font-size: 0.875rem;
+    color: ${theme.vars.colors.text.secondary};
+  `;
+	return {
+		check,
+		chevron,
+		chevronOpen,
+		colorScheme,
+		error,
+		field,
+		fieldText,
+		label,
+		list,
+		menu,
+		option,
+		optionCurrent,
+		optionHandle,
+		optionName,
+		optionText,
+		pagination: require_emotion.css`
+    display: flex;
+    justify-content: flex-end;
+    gap: ${theme.vars.spacing.unit};
+    margin-top: calc(${theme.vars.spacing.unit} * 0.5);
+    padding-top: calc(${theme.vars.spacing.unit} * 0.5);
+    border-top: 1px solid ${theme.vars.colors.border};
+  `,
+		root,
+		status,
+		value
+	};
+};
+var BaseOrganizationUnitSwitcher_styles_default = useStyles;
+
+//#endregion
+exports.default = BaseOrganizationUnitSwitcher_styles_default;
+//# sourceMappingURL=BaseOrganizationUnitSwitcher.styles.cjs.map

package/dist/cjs/components/account/OrganizationUnitSwitcher/BaseOrganizationUnitSwitcher.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationUnitSwitcher.styles.cjs","names":["hover: string","root: string","field: string","fieldText: string","label: string","value: string","chevron: string","chevronOpen: string","error: string","menu: string","list: string","option: string","optionCurrent: string","optionText: string","optionName: string","optionHandle: string","check: string","status: string"],"sources":["../../../../../src/components/account/OrganizationUnitSwitcher/BaseOrganizationUnitSwitcher.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the BaseOrganizationUnitSwitcher component.\n *\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> => {\n  const hover: string = theme.vars.colors.action?.hover || 'rgba(0, 0, 0, 0.04)';\n\n  const root: string = css`\n    display: inline-flex;\n    flex-direction: column;\n    gap: calc(${theme.vars.spacing.unit} * 0.5);\n    min-width: 240px;\n    max-width: 100%;\n    font-family: ${theme.vars.typography.fontFamily};\n  `;\n\n  const field: string = css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: calc(${theme.vars.spacing.unit} * 1.5);\n    width: 100%;\n    box-sizing: border-box;\n    padding: calc(${theme.vars.spacing.unit} * 0.75) calc(${theme.vars.spacing.unit} * 1.5);\n    border: 1px solid ${theme.vars.colors.border};\n    border-radius: ${theme.vars.borderRadius.medium};\n    background: ${theme.vars.colors.background.surface};\n    color: ${theme.vars.colors.text.primary};\n    font: inherit;\n    text-align: start;\n    cursor: pointer;\n\n    &:hover:not(:disabled) {\n      background-color: ${hover};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${theme.vars.colors.primary.main};\n      outline-offset: 1px;\n    }\n\n    &:disabled {\n      cursor: default;\n      opacity: 0.7;\n    }\n  `;\n\n  const fieldText: string = css`\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n  `;\n\n  const label: string = css`\n    display: block;\n    font-size: 0.75rem;\n    line-height: 1rem;\n    color: ${theme.vars.colors.text.secondary};\n  `;\n\n  const value: string = css`\n    display: block;\n    overflow: hidden;\n    font-size: 1rem;\n    line-height: 1.375rem;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `;\n\n  const chevron: string = css`\n    display: flex;\n    flex-shrink: 0;\n    color: ${theme.vars.colors.text.secondary};\n    transition: transform 0.12s ease-in-out;\n  `;\n\n  const chevronOpen: string = css`\n    transform: rotate(180deg);\n  `;\n\n  const error: string = css`\n    font-size: 0.75rem;\n    color: ${theme.vars.colors.error.main};\n  `;\n\n  const menu: string = css`\n    box-sizing: border-box;\n    max-height: 320px;\n    overflow-y: auto;\n    padding: calc(${theme.vars.spacing.unit} * 0.5);\n    border: 1px solid ${theme.vars.colors.border};\n    border-radius: ${theme.vars.borderRadius.medium};\n    background-color: ${theme.vars.colors.background.surface};\n    box-shadow: ${theme.vars.shadows.medium};\n    font-family: ${theme.vars.typography.fontFamily};\n    outline: none;\n    z-index: 1000;\n  `;\n\n  const list: string = css`\n    display: flex;\n    flex-direction: column;\n  `;\n\n  const option: string = css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: ${theme.vars.spacing.unit};\n    width: 100%;\n    padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.25);\n    border: none;\n    border-radius: ${theme.vars.borderRadius.small};\n    background-color: transparent;\n    color: ${theme.vars.colors.text.primary};\n    font: inherit;\n    text-align: start;\n    cursor: pointer;\n    outline: none;\n\n    &:hover,\n    &:focus-visible {\n      background-color: ${hover};\n    }\n  `;\n\n  const optionCurrent: string = css`\n    font-weight: 600;\n  `;\n\n  const optionText: string = css`\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n  `;\n\n  const optionName: string = css`\n    font-size: 0.875rem;\n  `;\n\n  const optionHandle: string = css`\n    font-size: 0.75rem;\n    font-weight: 400;\n    color: ${theme.vars.colors.text.secondary};\n  `;\n\n  const check: string = css`\n    display: flex;\n    flex-shrink: 0;\n    color: ${theme.vars.colors.primary.main};\n  `;\n\n  const status: string = css`\n    display: flex;\n    align-items: center;\n    gap: ${theme.vars.spacing.unit};\n    margin: 0;\n    padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.25);\n    font-size: 0.875rem;\n    color: ${theme.vars.colors.text.secondary};\n  `;\n\n  const pagination: string = css`\n    display: flex;\n    justify-content: flex-end;\n    gap: ${theme.vars.spacing.unit};\n    margin-top: calc(${theme.vars.spacing.unit} * 0.5);\n    padding-top: calc(${theme.vars.spacing.unit} * 0.5);\n    border-top: 1px solid ${theme.vars.colors.border};\n  `;\n\n  return {\n    check,\n    chevron,\n    chevronOpen,\n    colorScheme,\n    error,\n    field,\n    fieldText,\n    label,\n    list,\n    menu,\n    option,\n    optionCurrent,\n    optionHandle,\n    optionName,\n    optionText,\n    pagination,\n    root,\n    status,\n    value,\n  };\n};\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,aAAa,OAAc,gBAAgD;CAC/E,MAAMA,QAAgB,MAAM,KAAK,OAAO,QAAQ,SAAS;CAEzD,MAAMC,OAAe,mBAAG;;;gBAGV,MAAM,KAAK,QAAQ,KAAK;;;mBAGrB,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,QAAgB,mBAAG;;;;gBAIX,MAAM,KAAK,QAAQ,KAAK;;;oBAGpB,MAAM,KAAK,QAAQ,KAAK,gBAAgB,MAAM,KAAK,QAAQ,KAAK;wBAC5D,MAAM,KAAK,OAAO,OAAO;qBAC5B,MAAM,KAAK,aAAa,OAAO;kBAClC,MAAM,KAAK,OAAO,WAAW,QAAQ;aAC1C,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;0BAMlB,MAAM;;;;2BAIL,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;;CAUxD,MAAMC,YAAoB,mBAAG;;;;;CAM7B,MAAMC,QAAgB,mBAAG;;;;aAId,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,QAAgB,mBAAG;;;;;;;;CASzB,MAAMC,UAAkB,mBAAG;;;aAGhB,MAAM,KAAK,OAAO,KAAK,UAAU;;;CAI5C,MAAMC,cAAsB,mBAAG;;;CAI/B,MAAMC,QAAgB,mBAAG;;aAEd,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,OAAe,mBAAG;;;;oBAIN,MAAM,KAAK,QAAQ,KAAK;wBACpB,MAAM,KAAK,OAAO,OAAO;qBAC5B,MAAM,KAAK,aAAa,OAAO;wBAC5B,MAAM,KAAK,OAAO,WAAW,QAAQ;kBAC3C,MAAM,KAAK,QAAQ,OAAO;mBACzB,MAAM,KAAK,WAAW,WAAW;;;;CAKlD,MAAMC,OAAe,mBAAG;;;;CAKxB,MAAMC,SAAiB,mBAAG;;;;WAIjB,MAAM,KAAK,QAAQ,KAAK;;eAEpB,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;;qBAElD,MAAM,KAAK,aAAa,MAAM;;aAEtC,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;0BAQlB,MAAM;;;CAI9B,MAAMC,gBAAwB,mBAAG;;;CAIjC,MAAMC,aAAqB,mBAAG;;;;;CAM9B,MAAMC,aAAqB,mBAAG;;;CAI9B,MAAMC,eAAuB,mBAAG;;;aAGrB,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,QAAgB,mBAAG;;;aAGd,MAAM,KAAK,OAAO,QAAQ,KAAK;;CAG1C,MAAMC,SAAiB,mBAAG;;;WAGjB,MAAM,KAAK,QAAQ,KAAK;;eAEpB,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;;aAE1D,MAAM,KAAK,OAAO,KAAK,UAAU;;AAY5C,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YAzByB,mBAAG;;;WAGrB,MAAM,KAAK,QAAQ,KAAK;uBACZ,MAAM,KAAK,QAAQ,KAAK;wBACvB,MAAM,KAAK,QAAQ,KAAK;4BACpB,MAAM,KAAK,OAAO,OAAO;;EAoBjD;EACA;EACA;EACD;;AAGH,kDAAe"}

package/dist/cjs/components/account/OrganizationUnitSwitcher/OrganizationUnitSwitcher.cjs

@@ -0,0 +1,139 @@
+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_BaseOrganizationUnitSwitcher = require('./BaseOrganizationUnitSwitcher.cjs');
+const require_getAccessibleOrganizationUnits = require('../../../api/account/getAccessibleOrganizationUnits.cjs');
+const require_getOrganizationUnitSwitchErrorKey = require('../../../utils/getOrganizationUnitSwitchErrorKey.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/account/OrganizationUnitSwitcher/OrganizationUnitSwitcher.tsx
+/**
+* Shows the current organization unit in a field that opens a menu of the units the signed-in user can
+* access (`/users/me/ous`), and switches the session to the one picked: it signs in again bounded to that unit through
+* `switchOrganizationUnit`, which reuses the SSO session so normally no credentials are asked. A failed
+* switch keeps the session as it was and shows a translated message.
+*
+* @example
+* ```tsx
+* <OrganizationUnitSwitcher scope="siblings" />
+*
+* // Let the app take over the pick
+* <OrganizationUnitSwitcher onSelect={(unit) => navigate(`/orgs/${unit.handle}`)} />
+*
+* // Custom rendering
+* <OrganizationUnitSwitcher>
+*   {({organizationUnits, current, onSwitch}) => (
+*     <select value={current ?? ''} onChange={(e) => onSwitch(organizationUnits.find((u) => u.id === e.target.value)!)}>
+*       {organizationUnits.map((u) => <option key={u.id} value={u.id}>{u.name}</option>)}
+*     </select>
+*   )}
+* </OrganizationUnitSwitcher>
+* ```
+*/
+const OrganizationUnitSwitcher = ({ limit = 10, onError = void 0, onSelect = void 0, onSwitch = void 0, preferences = void 0, scope = void 0, switchOptions = void 0,...rest }) => {
+	const { baseUrl, currentOrganizationUnit, endpoints, instanceId, isSignedIn, preferences: contextPreferences, switchOrganizationUnit } = require_useThunderID.default();
+	const resolvedPreferences = (0, react.useMemo)(() => ({
+		...contextPreferences,
+		...preferences
+	}), [contextPreferences, preferences]);
+	const { t } = require_useTranslation.default(resolvedPreferences?.i18n);
+	const [list, setList] = (0, react.useState)(null);
+	const [offset, setOffset] = (0, react.useState)(0);
+	const [isLoading, setIsLoading] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)(null);
+	const [switchingId, setSwitchingId] = (0, react.useState)(null);
+	const requestRef = (0, react.useRef)(0);
+	const latestRef = (0, react.useRef)({
+		onError,
+		t
+	});
+	latestRef.current = {
+		onError,
+		t
+	};
+	const load = (0, react.useCallback)(async (pageOffset) => {
+		const request = requestRef.current + 1;
+		requestRef.current = request;
+		setIsLoading(true);
+		setError(null);
+		try {
+			const page = await require_getAccessibleOrganizationUnits.default({
+				baseUrl,
+				instanceId,
+				limit,
+				offset: pageOffset,
+				scope,
+				url: (0, __thunderid_browser.resolveResourceEndpoint)("usersMeOrganizationUnits", { endpoints })
+			});
+			if (requestRef.current === request) setList(page);
+		} catch (caught) {
+			if (requestRef.current === request) {
+				setError(latestRef.current.t("organization_unit.switcher.error.load"));
+				latestRef.current.onError?.(caught);
+			}
+		} finally {
+			if (requestRef.current === request) setIsLoading(false);
+		}
+	}, [
+		baseUrl,
+		endpoints,
+		instanceId,
+		limit,
+		scope
+	]);
+	(0, react.useEffect)(() => {
+		if (isSignedIn) load(offset);
+	}, [
+		isSignedIn,
+		load,
+		offset
+	]);
+	const handleSwitch = async (unit) => {
+		if (onSelect) {
+			onSelect(unit);
+			return;
+		}
+		setError(null);
+		setSwitchingId(unit.id);
+		try {
+			const user = await switchOrganizationUnit(unit.id, switchOptions);
+			if (user) {
+				onSwitch?.(unit, user);
+				await load(offset);
+			}
+		} catch (caught) {
+			setError(t(require_getOrganizationUnitSwitchErrorKey.default(caught), { name: unit.name }));
+			onError?.(caught);
+		} finally {
+			setSwitchingId(null);
+		}
+	};
+	const current = (list?.current === "" ? void 0 : list?.current) ?? currentOrganizationUnit?.id ?? null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseOrganizationUnitSwitcher.default, {
+		...rest,
+		current,
+		currentName: currentOrganizationUnit?.id === current ? currentOrganizationUnit?.name ?? null : null,
+		error,
+		isLoading,
+		limit,
+		offset,
+		organizationUnits: list?.organizationUnits ?? [],
+		preferences: resolvedPreferences,
+		switchingId,
+		totalResults: list?.totalResults ?? 0,
+		onPageChange: setOffset,
+		onSwitch: (unit) => {
+			handleSwitch(unit);
+		}
+	});
+};
+var OrganizationUnitSwitcher_default = OrganizationUnitSwitcher;
+
+//#endregion
+exports.default = OrganizationUnitSwitcher_default;
+//# sourceMappingURL=OrganizationUnitSwitcher.cjs.map

package/dist/cjs/components/account/OrganizationUnitSwitcher/OrganizationUnitSwitcher.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationUnitSwitcher.cjs","names":["OrganizationUnitSwitcher: FC<OrganizationUnitSwitcherProps>","useThunderID","useTranslation","request: number","page: AccessibleOrganizationUnitList","getAccessibleOrganizationUnits","caught: unknown","user: User | undefined","getOrganizationUnitSwitchErrorKey","current: string | null","BaseOrganizationUnitSwitcher"],"sources":["../../../../../src/components/account/OrganizationUnitSwitcher/OrganizationUnitSwitcher.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  AccessibleOrganizationUnit,\n  AccessibleOrganizationUnitList,\n  AccessibleOrganizationUnitScope,\n  SwitchOrganizationUnitOptions,\n  User,\n  resolveResourceEndpoint,\n} from '@thunderid/browser';\nimport {FC, ReactElement, useCallback, useEffect, useMemo, useRef, useState} from 'react';\nimport BaseOrganizationUnitSwitcher, {BaseOrganizationUnitSwitcherProps} from './BaseOrganizationUnitSwitcher';\nimport getAccessibleOrganizationUnits from '../../../api/account/getAccessibleOrganizationUnits';\nimport useThunderID from '../../../contexts/ThunderID/useThunderID';\nimport useTranslation from '../../../hooks/useTranslation';\nimport getOrganizationUnitSwitchErrorKey from '../../../utils/getOrganizationUnitSwitchErrorKey';\n\nexport interface OrganizationUnitSwitcherProps\n  extends Omit<\n    BaseOrganizationUnitSwitcherProps,\n    | 'current'\n    | 'currentName'\n    | 'error'\n    | 'isLoading'\n    | 'offset'\n    | 'onPageChange'\n    | 'onSwitch'\n    | 'organizationUnits'\n    | 'switchingId'\n    | 'totalResults'\n  > {\n  /**\n   * Called when a switch or a load fails, with the SDK error. The message is shown either way.\n   */\n  onError?: (error: unknown) => void;\n  /**\n   * Takes over a pick: called with the unit instead of switching to it, so the app decides what\n   * happens (for example navigating to a unit-specific entry point).\n   */\n  onSelect?: (unit: AccessibleOrganizationUnit) => void;\n  /**\n   * Called after a switch completed in place, with the refreshed user. A switch that leaves the page\n   * completes on the callback instead.\n   */\n  onSwitch?: (unit: AccessibleOrganizationUnit, user: User) => void;\n  /**\n   * Narrows the list relative to the current unit. `siblings` lists the current unit and the units that\n   * share its parent. Omit to list every accessible unit.\n   */\n  scope?: AccessibleOrganizationUnitScope;\n  /**\n   * Options passed to `switchOrganizationUnit`, such as `redirect: false`.\n   */\n  switchOptions?: SwitchOrganizationUnitOptions;\n}\n\n/**\n * Shows the current organization unit in a field that opens a menu of the units the signed-in user can\n * access (`/users/me/ous`), and switches the session to the one picked: it signs in again bounded to that unit through\n * `switchOrganizationUnit`, which reuses the SSO session so normally no credentials are asked. A failed\n * switch keeps the session as it was and shows a translated message.\n *\n * @example\n * ```tsx\n * <OrganizationUnitSwitcher scope=\"siblings\" />\n *\n * // Let the app take over the pick\n * <OrganizationUnitSwitcher onSelect={(unit) => navigate(`/orgs/${unit.handle}`)} />\n *\n * // Custom rendering\n * <OrganizationUnitSwitcher>\n *   {({organizationUnits, current, onSwitch}) => (\n *     <select value={current ?? ''} onChange={(e) => onSwitch(organizationUnits.find((u) => u.id === e.target.value)!)}>\n *       {organizationUnits.map((u) => <option key={u.id} value={u.id}>{u.name}</option>)}\n *     </select>\n *   )}\n * </OrganizationUnitSwitcher>\n * ```\n */\nconst OrganizationUnitSwitcher: FC<OrganizationUnitSwitcherProps> = ({\n  limit = 10,\n  onError = undefined,\n  onSelect = undefined,\n  onSwitch = undefined,\n  preferences = undefined,\n  scope = undefined,\n  switchOptions = undefined,\n  ...rest\n}: OrganizationUnitSwitcherProps): ReactElement => {\n  const {\n    baseUrl,\n    currentOrganizationUnit,\n    endpoints,\n    instanceId,\n    isSignedIn,\n    preferences: contextPreferences,\n    switchOrganizationUnit,\n  } = useThunderID();\n\n  const resolvedPreferences = useMemo(\n    () => ({...contextPreferences, ...preferences}),\n    [contextPreferences, preferences],\n  );\n  const {t} = useTranslation(resolvedPreferences?.i18n);\n\n  const [list, setList] = useState<AccessibleOrganizationUnitList | null>(null);\n  const [offset, setOffset] = useState<number>(0);\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n  const [error, setError] = useState<string | null>(null);\n  const [switchingId, setSwitchingId] = useState<string | null>(null);\n  const requestRef = useRef<number>(0);\n  // The latest callbacks, read when a load settles, so a new `onError` on each render does not reload.\n  const latestRef = useRef<{onError?: (error: unknown) => void; t: typeof t}>({onError, t});\n  latestRef.current = {onError, t};\n\n  const load = useCallback(\n    async (pageOffset: number): Promise<void> => {\n      const request: number = requestRef.current + 1;\n      requestRef.current = request;\n      setIsLoading(true);\n      setError(null);\n\n      try {\n        const page: AccessibleOrganizationUnitList = await getAccessibleOrganizationUnits({\n          baseUrl,\n          instanceId,\n          limit,\n          offset: pageOffset,\n          scope,\n          url: resolveResourceEndpoint('usersMeOrganizationUnits', {endpoints}),\n        });\n\n        if (requestRef.current === request) {\n          setList(page);\n        }\n      } catch (caught: unknown) {\n        if (requestRef.current === request) {\n          setError(latestRef.current.t('organization_unit.switcher.error.load'));\n          latestRef.current.onError?.(caught);\n        }\n      } finally {\n        if (requestRef.current === request) {\n          setIsLoading(false);\n        }\n      }\n    },\n    [baseUrl, endpoints, instanceId, limit, scope],\n  );\n\n  useEffect(() => {\n    if (isSignedIn) {\n      void load(offset);\n    }\n  }, [isSignedIn, load, offset]);\n\n  const handleSwitch = async (unit: AccessibleOrganizationUnit): Promise<void> => {\n    if (onSelect) {\n      onSelect(unit);\n\n      return;\n    }\n\n    setError(null);\n    setSwitchingId(unit.id);\n\n    try {\n      const user: User | undefined = await switchOrganizationUnit(unit.id, switchOptions);\n\n      if (user) {\n        onSwitch?.(unit, user);\n        await load(offset);\n      }\n    } catch (caught: unknown) {\n      setError(t(getOrganizationUnitSwitchErrorKey(caught), {name: unit.name}));\n      onError?.(caught);\n    } finally {\n      setSwitchingId(null);\n    }\n  };\n\n  const current: string | null =\n    (list?.current === '' ? undefined : list?.current) ?? currentOrganizationUnit?.id ?? null;\n\n  return (\n    <BaseOrganizationUnitSwitcher\n      {...rest}\n      current={current}\n      // The session's unit names the field when the page does not list the current unit.\n      currentName={currentOrganizationUnit?.id === current ? (currentOrganizationUnit?.name ?? null) : null}\n      error={error}\n      isLoading={isLoading}\n      limit={limit}\n      offset={offset}\n      organizationUnits={list?.organizationUnits ?? []}\n      preferences={resolvedPreferences}\n      switchingId={switchingId}\n      totalResults={list?.totalResults ?? 0}\n      onPageChange={setOffset}\n      onSwitch={(unit: AccessibleOrganizationUnit): void => {\n        void handleSwitch(unit);\n      }}\n    />\n  );\n};\n\nexport default OrganizationUnitSwitcher;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,MAAMA,4BAA+D,EACnE,QAAQ,IACR,UAAU,QACV,WAAW,QACX,WAAW,QACX,cAAc,QACd,QAAQ,QACR,gBAAgB,OAChB,GAAG,WAC8C;CACjD,MAAM,EACJ,SACA,yBACA,WACA,YACA,YACA,aAAa,oBACb,2BACEC,8BAAc;CAElB,MAAM,gDACG;EAAC,GAAG;EAAoB,GAAG;EAAY,GAC9C,CAAC,oBAAoB,YAAY,CAClC;CACD,MAAM,EAAC,MAAKC,+BAAe,qBAAqB,KAAK;CAErD,MAAM,CAAC,MAAM,+BAA2D,KAAK;CAC7E,MAAM,CAAC,QAAQ,iCAA8B,EAAE;CAC/C,MAAM,CAAC,WAAW,oCAAkC,MAAM;CAC1D,MAAM,CAAC,OAAO,gCAAoC,KAAK;CACvD,MAAM,CAAC,aAAa,sCAA0C,KAAK;CACnE,MAAM,+BAA4B,EAAE;CAEpC,MAAM,8BAAsE;EAAC;EAAS;EAAE,CAAC;AACzF,WAAU,UAAU;EAAC;EAAS;EAAE;CAEhC,MAAM,8BACJ,OAAO,eAAsC;EAC3C,MAAMC,UAAkB,WAAW,UAAU;AAC7C,aAAW,UAAU;AACrB,eAAa,KAAK;AAClB,WAAS,KAAK;AAEd,MAAI;GACF,MAAMC,OAAuC,MAAMC,+CAA+B;IAChF;IACA;IACA;IACA,QAAQ;IACR;IACA,sDAA6B,4BAA4B,EAAC,WAAU,CAAC;IACtE,CAAC;AAEF,OAAI,WAAW,YAAY,QACzB,SAAQ,KAAK;WAERC,QAAiB;AACxB,OAAI,WAAW,YAAY,SAAS;AAClC,aAAS,UAAU,QAAQ,EAAE,wCAAwC,CAAC;AACtE,cAAU,QAAQ,UAAU,OAAO;;YAE7B;AACR,OAAI,WAAW,YAAY,QACzB,cAAa,MAAM;;IAIzB;EAAC;EAAS;EAAW;EAAY;EAAO;EAAM,CAC/C;AAED,4BAAgB;AACd,MAAI,WACF,CAAK,KAAK,OAAO;IAElB;EAAC;EAAY;EAAM;EAAO,CAAC;CAE9B,MAAM,eAAe,OAAO,SAAoD;AAC9E,MAAI,UAAU;AACZ,YAAS,KAAK;AAEd;;AAGF,WAAS,KAAK;AACd,iBAAe,KAAK,GAAG;AAEvB,MAAI;GACF,MAAMC,OAAyB,MAAM,uBAAuB,KAAK,IAAI,cAAc;AAEnF,OAAI,MAAM;AACR,eAAW,MAAM,KAAK;AACtB,UAAM,KAAK,OAAO;;WAEbD,QAAiB;AACxB,YAAS,EAAEE,kDAAkC,OAAO,EAAE,EAAC,MAAM,KAAK,MAAK,CAAC,CAAC;AACzE,aAAU,OAAO;YACT;AACR,kBAAe,KAAK;;;CAIxB,MAAMC,WACH,MAAM,YAAY,KAAK,SAAY,MAAM,YAAY,yBAAyB,MAAM;AAEvF,QACE,2CAACC;EACC,GAAI;EACK;EAET,aAAa,yBAAyB,OAAO,UAAW,yBAAyB,QAAQ,OAAQ;EAC1F;EACI;EACJ;EACC;EACR,mBAAmB,MAAM,qBAAqB,EAAE;EAChD,aAAa;EACA;EACb,cAAc,MAAM,gBAAgB;EACpC,cAAc;EACd,WAAW,SAA2C;AACpD,GAAK,aAAa,KAAK;;GAEzB;;AAIN,uCAAe"}