@thunderid/react 1.13.0 → 1.15.0

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

@@ -0,0 +1,184 @@
+import { css } from "../../../styles/emotion.js";
+
+//#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 = 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 = 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 = css`
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  `;
+	const label = css`
+    display: block;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: ${theme.vars.colors.text.secondary};
+  `;
+	const value = css`
+    display: block;
+    overflow: hidden;
+    font-size: 1rem;
+    line-height: 1.375rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `;
+	const chevron = css`
+    display: flex;
+    flex-shrink: 0;
+    color: ${theme.vars.colors.text.secondary};
+    transition: transform 0.12s ease-in-out;
+  `;
+	const chevronOpen = css`
+    transform: rotate(180deg);
+  `;
+	const error = css`
+    font-size: 0.75rem;
+    color: ${theme.vars.colors.error.main};
+  `;
+	const menu = 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 = css`
+    display: flex;
+    flex-direction: column;
+  `;
+	const option = 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 = css`
+    font-weight: 600;
+  `;
+	const optionText = css`
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  `;
+	const optionName = css`
+    font-size: 0.875rem;
+  `;
+	const optionHandle = css`
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: ${theme.vars.colors.text.secondary};
+  `;
+	const check = css`
+    display: flex;
+    flex-shrink: 0;
+    color: ${theme.vars.colors.primary.main};
+  `;
+	const status = 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: 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
+export { BaseOrganizationUnitSwitcher_styles_default as default };
+//# sourceMappingURL=BaseOrganizationUnitSwitcher.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationUnitSwitcher.styles.js","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,GAAG;;;gBAGV,MAAM,KAAK,QAAQ,KAAK;;;mBAGrB,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,QAAgB,GAAG;;;;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,GAAG;;;;;CAM7B,MAAMC,QAAgB,GAAG;;;;aAId,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,QAAgB,GAAG;;;;;;;;CASzB,MAAMC,UAAkB,GAAG;;;aAGhB,MAAM,KAAK,OAAO,KAAK,UAAU;;;CAI5C,MAAMC,cAAsB,GAAG;;;CAI/B,MAAMC,QAAgB,GAAG;;aAEd,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,OAAe,GAAG;;;;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,GAAG;;;;CAKxB,MAAMC,SAAiB,GAAG;;;;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,GAAG;;;CAIjC,MAAMC,aAAqB,GAAG;;;;;CAM9B,MAAMC,aAAqB,GAAG;;;CAI9B,MAAMC,eAAuB,GAAG;;;aAGrB,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,QAAgB,GAAG;;;aAGd,MAAM,KAAK,OAAO,QAAQ,KAAK;;CAG1C,MAAMC,SAAiB,GAAG;;;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,GAAG;;;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/components/account/OrganizationUnitSwitcher/OrganizationUnitSwitcher.d.ts

@@ -0,0 +1,54 @@
+import { AccessibleOrganizationUnit, AccessibleOrganizationUnitScope, SwitchOrganizationUnitOptions, User } from '@thunderid/browser';
+import { FC } from 'react';
+import { BaseOrganizationUnitSwitcherProps } from './BaseOrganizationUnitSwitcher';
+export interface OrganizationUnitSwitcherProps extends Omit<BaseOrganizationUnitSwitcherProps, 'current' | 'currentName' | 'error' | 'isLoading' | 'offset' | 'onPageChange' | 'onSwitch' | 'organizationUnits' | 'switchingId' | 'totalResults'> {
+    /**
+     * Called when a switch or a load fails, with the SDK error. The message is shown either way.
+     */
+    onError?: (error: unknown) => void;
+    /**
+     * Takes over a pick: called with the unit instead of switching to it, so the app decides what
+     * happens (for example navigating to a unit-specific entry point).
+     */
+    onSelect?: (unit: AccessibleOrganizationUnit) => void;
+    /**
+     * Called after a switch completed in place, with the refreshed user. A switch that leaves the page
+     * completes on the callback instead.
+     */
+    onSwitch?: (unit: AccessibleOrganizationUnit, user: User) => void;
+    /**
+     * Narrows the list relative to the current unit. `siblings` lists the current unit and the units that
+     * share its parent. Omit to list every accessible unit.
+     */
+    scope?: AccessibleOrganizationUnitScope;
+    /**
+     * Options passed to `switchOrganizationUnit`, such as `redirect: false`.
+     */
+    switchOptions?: SwitchOrganizationUnitOptions;
+}
+/**
+ * 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>
+ * ```
+ */
+declare const OrganizationUnitSwitcher: FC<OrganizationUnitSwitcherProps>;
+export default OrganizationUnitSwitcher;
+//# sourceMappingURL=OrganizationUnitSwitcher.d.ts.map

package/dist/components/account/OrganizationUnitSwitcher/OrganizationUnitSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationUnitSwitcher.d.ts","sourceRoot":"","sources":["../../../../src/components/account/OrganizationUnitSwitcher/OrganizationUnitSwitcher.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,0BAA0B,EAE1B,+BAA+B,EAC/B,6BAA6B,EAC7B,IAAI,EAEL,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,EAAE,EAAkE,MAAM,OAAO,CAAC;AAC1F,OAAqC,EAAC,iCAAiC,EAAC,MAAM,gCAAgC,CAAC;AAM/G,MAAM,WAAW,6BACf,SAAQ,IAAI,CACV,iCAAiC,EAC/B,SAAS,GACT,aAAa,GACb,OAAO,GACP,WAAW,GACX,QAAQ,GACR,cAAc,GACd,UAAU,GACV,mBAAmB,GACnB,aAAa,GACb,cAAc,CACjB;IACD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,IAAI,CAAC;IACtD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAClE;;;OAGG;IACH,KAAK,CAAC,EAAE,+BAA+B,CAAC;IACxC;;OAEG;IACH,aAAa,CAAC,EAAE,6BAA6B,CAAC;CAC/C;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CA4H/D,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/components/account/OrganizationUnitSwitcher/OrganizationUnitSwitcher.js

@@ -0,0 +1,135 @@
+import useThunderID_default from "../../../contexts/ThunderID/useThunderID.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import BaseOrganizationUnitSwitcher_default from "./BaseOrganizationUnitSwitcher.js";
+import getAccessibleOrganizationUnits_default from "../../../api/account/getAccessibleOrganizationUnits.js";
+import getOrganizationUnitSwitchErrorKey_default from "../../../utils/getOrganizationUnitSwitchErrorKey.js";
+import { resolveResourceEndpoint } from "@thunderid/browser";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "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 } = useThunderID_default();
+	const resolvedPreferences = useMemo(() => ({
+		...contextPreferences,
+		...preferences
+	}), [contextPreferences, preferences]);
+	const { t } = useTranslation_default(resolvedPreferences?.i18n);
+	const [list, setList] = useState(null);
+	const [offset, setOffset] = useState(0);
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const [switchingId, setSwitchingId] = useState(null);
+	const requestRef = useRef(0);
+	const latestRef = useRef({
+		onError,
+		t
+	});
+	latestRef.current = {
+		onError,
+		t
+	};
+	const load = useCallback(async (pageOffset) => {
+		const request = requestRef.current + 1;
+		requestRef.current = request;
+		setIsLoading(true);
+		setError(null);
+		try {
+			const page = await getAccessibleOrganizationUnits_default({
+				baseUrl,
+				instanceId,
+				limit,
+				offset: pageOffset,
+				scope,
+				url: 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
+	]);
+	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(getOrganizationUnitSwitchErrorKey_default(caught), { name: unit.name }));
+			onError?.(caught);
+		} finally {
+			setSwitchingId(null);
+		}
+	};
+	const current = (list?.current === "" ? void 0 : list?.current) ?? currentOrganizationUnit?.id ?? null;
+	return /* @__PURE__ */ jsx(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
+export { OrganizationUnitSwitcher_default as default };
+//# sourceMappingURL=OrganizationUnitSwitcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationUnitSwitcher.js","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,sBAAc;CAElB,MAAM,sBAAsB,eACnB;EAAC,GAAG;EAAoB,GAAG;EAAY,GAC9C,CAAC,oBAAoB,YAAY,CAClC;CACD,MAAM,EAAC,MAAKC,uBAAe,qBAAqB,KAAK;CAErD,MAAM,CAAC,MAAM,WAAW,SAAgD,KAAK;CAC7E,MAAM,CAAC,QAAQ,aAAa,SAAiB,EAAE;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAAkB,MAAM;CAC1D,MAAM,CAAC,OAAO,YAAY,SAAwB,KAAK;CACvD,MAAM,CAAC,aAAa,kBAAkB,SAAwB,KAAK;CACnE,MAAM,aAAa,OAAe,EAAE;CAEpC,MAAM,YAAY,OAA0D;EAAC;EAAS;EAAE,CAAC;AACzF,WAAU,UAAU;EAAC;EAAS;EAAE;CAEhC,MAAM,OAAO,YACX,OAAO,eAAsC;EAC3C,MAAMC,UAAkB,WAAW,UAAU;AAC7C,aAAW,UAAU;AACrB,eAAa,KAAK;AAClB,WAAS,KAAK;AAEd,MAAI;GACF,MAAMC,OAAuC,MAAMC,uCAA+B;IAChF;IACA;IACA;IACA,QAAQ;IACR;IACA,KAAK,wBAAwB,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,iBAAgB;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,0CAAkC,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,oBAACC;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"}

package/dist/components/account/UserProfile/BaseUserProfile.d.ts

@@ -1,5 +1,5 @@
 import { User, Preferences, AttributeSchema } from '@thunderid/browser';
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, ReactNode } from 'react';
 export interface BaseUserProfileProps {
     attributeMapping?: {
         [key: string]: string | string[] | undefined;
@@ -28,10 +28,36 @@ export interface BaseUserProfileProps {
      */
     preferences?: Preferences;
     profile?: User;
+    /**
+     * Renders the verification panel for an attribute. When omitted, or when the profile is not
+     * editable, verification statuses are shown without a Verify action.
+     */
+    renderVerification?: (props: BaseUserProfileVerificationRenderProps) => ReactNode;
     showFields?: string[];
     title?: string;
     userSchema?: Record<string, AttributeSchema> | null;
 }
+/**
+ * Props passed to `renderVerification`.
+ */
+export interface BaseUserProfileVerificationRenderProps {
+    /**
+     * Name of the attribute to verify.
+     */
+    attribute: string;
+    /**
+     * Label of the attribute.
+     */
+    attributeDisplayName: string;
+    /**
+     * Closes the panel.
+     */
+    onCancel: () => void;
+    /**
+     * Closes the panel and confirms the recorded verification.
+     */
+    onComplete: () => void;
+}
 declare const BaseUserProfile: FC<BaseUserProfileProps>;
 export default BaseUserProfile;
 //# sourceMappingURL=BaseUserProfile.d.ts.map

package/dist/components/account/UserProfile/BaseUserProfile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseUserProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/account/UserProfile/BaseUserProfile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,IAAI,EAAiC,WAAW,EAAa,eAAe,EAAC,MAAM,oBAAoB,CAAC;AAChH,OAAO,EAAC,EAAE,EAAE,YAAY,EAAmC,MAAM,OAAO,CAAC;AAyCzE,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,CAAC,EAAE;QACjB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;QAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;KAC9B,CAAC;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,IAAI,CAAC;CACrD;AA+BD,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAopB7C,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"BaseUserProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/account/UserProfile/BaseUserProfile.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,IAAI,EAGJ,WAAW,EAEX,eAAe,EAKhB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AA0C7F,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,CAAC,EAAE;QACjB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;QAC7C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;KAC9B,CAAC;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,sCAAsC,KAAK,SAAS,CAAC;IAClF,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,IAAI,CAAC;CACrD;AAED;;GAEG;AACH,MAAM,WAAW,sCAAsC;IACrD;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,oBAAoB,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAsCD,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAo3B7C,CAAC;AAEF,eAAe,eAAe,CAAC"}