@thunderid/react 1.14.0 → 1.15.1

package/dist/cjs/components/management/GroupMembers/BaseGroupMembers.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseGroupMembers.cjs","names":["BaseGroupMembers: FC<BaseGroupMembersProps>","useTranslation","columns: DataTableColumn<GroupMember>[]","Button","AdminSection","IdentityPicker","DataTable"],"sources":["../../../../../src/components/management/GroupMembers/BaseGroupMembers.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {GroupMember, GroupMemberType, Preferences} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode} from 'react';\nimport useTranslation from '../../../hooks/useTranslation';\nimport Button from '../../primitives/Button/Button';\nimport DataTable, {DataTableColumn} from '../../primitives/DataTable/DataTable';\nimport AdminSection from '../shared/AdminSection';\nimport IdentityPicker, {IdentityCandidate} from '../shared/IdentityPicker';\n\n/**\n * What {@link BaseGroupMembers} hands its `children` render function, so the members can be shown\n * with any UI, such as a third-party data grid.\n */\nexport interface BaseGroupMembersRenderProps {\n  /**\n   * The identities that can be added, keyed by member type. Undefined when adding is not allowed.\n   */\n  candidates?: Partial<Record<GroupMemberType, IdentityCandidate[]>>;\n  /**\n   * The columns the default table shows, including the remove action when removing is allowed.\n   */\n  columns: DataTableColumn<GroupMember>[];\n  error: string | null;\n  isLoading: boolean;\n  isMutating: boolean;\n  members: GroupMember[];\n  /**\n   * Adds a member. Undefined when adding is not allowed.\n   */\n  onAdd?: (member: Pick<GroupMember, 'id' | 'type'>) => void;\n  /**\n   * Removes a member. Undefined when removing is not allowed.\n   */\n  onRemove?: (member: GroupMember) => void;\n}\n\nexport interface BaseGroupMembersProps {\n  /**\n   * The identities that can be added, keyed by member type. Adding is hidden when omitted.\n   */\n  candidates?: Partial<Record<GroupMemberType, IdentityCandidate[]>>;\n  /**\n   * Renders custom UI in place of the default table and picker. Receives the members, the default\n   * columns, the candidates, the loading and error state, and the add and remove handlers.\n   */\n  children?: (props: BaseGroupMembersRenderProps) => ReactNode;\n  className?: string;\n  description?: string;\n  error?: string | null;\n  isLoading?: boolean;\n  isMutating?: boolean;\n  members: GroupMember[];\n  onAdd?: (member: Pick<GroupMember, 'id' | 'type'>) => void;\n  /**\n   * Removes a member. The remove action is hidden when omitted.\n   */\n  onRemove?: (member: GroupMember) => void;\n  preferences?: Preferences;\n  title?: string;\n}\n\n/**\n * Lists the members of a group and lets the caller add and remove them. Holds no data of its own.\n */\nconst BaseGroupMembers: FC<BaseGroupMembersProps> = ({\n  candidates,\n  children,\n  className,\n  description,\n  error = null,\n  isLoading = false,\n  isMutating = false,\n  members,\n  onAdd,\n  onRemove,\n  preferences,\n  title,\n}: BaseGroupMembersProps): ReactElement => {\n  const {t} = useTranslation(preferences?.i18n);\n\n  const columns: DataTableColumn<GroupMember>[] = [\n    {\n      header: t('admin.groups.members.columns.member'),\n      id: 'member',\n      render: (member: GroupMember): ReactNode => member.display ?? member.id,\n    },\n    {\n      header: t('admin.groups.members.columns.type'),\n      id: 'type',\n      render: (member: GroupMember): ReactNode => t(`admin.common.identity_types.${member.type}`),\n    },\n  ];\n\n  if (onRemove) {\n    columns.push({\n      header: t('admin.common.columns.actions'),\n      id: 'actions',\n      render: (member: GroupMember): ReactNode => (\n        <Button\n          variant=\"text\"\n          color=\"error\"\n          size=\"small\"\n          disabled={isMutating}\n          aria-label={t('admin.groups.members.remove_label', {name: member.display ?? member.id})}\n          onClick={(): void => onRemove(member)}\n        >\n          {t('admin.common.actions.remove')}\n        </Button>\n      ),\n    });\n  }\n\n  if (children) {\n    return (\n      <div className={className}>\n        {children({\n          candidates: onAdd ? candidates : undefined,\n          columns,\n          error,\n          isLoading,\n          isMutating,\n          members,\n          onAdd: candidates ? onAdd : undefined,\n          onRemove,\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <AdminSection\n      block=\"group-members\"\n      className={className}\n      title={title ?? t('admin.groups.members.title')}\n      description={description}\n      headingLevel={3}\n      preferences={preferences}\n    >\n      {onAdd && candidates && (\n        <IdentityPicker<GroupMemberType>\n          addLabel={t('admin.groups.members.add')}\n          candidates={candidates}\n          excludedIds={members.map((member: GroupMember) => member.id)}\n          isSubmitting={isMutating}\n          onAdd={onAdd}\n          types={(['user', 'agent', 'group'] as GroupMemberType[])\n            .filter((type: GroupMemberType) => candidates[type] !== undefined)\n            .map((type: GroupMemberType) => ({label: t(`admin.common.identity_types.${type}`), value: type}))}\n        />\n      )}\n      <DataTable\n        caption={title?.length ? title : t('admin.groups.members.title')}\n        columns={columns}\n        rows={members}\n        getRowId={(member: GroupMember): string => `${member.type}:${member.id}`}\n        isLoading={isLoading}\n        error={error}\n        emptyText={t('admin.groups.members.empty')}\n      />\n    </AdminSection>\n  );\n};\n\nexport default BaseGroupMembers;\n"],"mappings":";;;;;;;;;;;;;AAkEA,MAAMA,oBAA+C,EACnD,YACA,UACA,WACA,aACA,QAAQ,MACR,YAAY,OACZ,aAAa,OACb,SACA,OACA,UACA,aACA,YACyC;CACzC,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAE7C,MAAMC,UAA0C,CAC9C;EACE,QAAQ,EAAE,sCAAsC;EAChD,IAAI;EACJ,SAAS,WAAmC,OAAO,WAAW,OAAO;EACtE,EACD;EACE,QAAQ,EAAE,oCAAoC;EAC9C,IAAI;EACJ,SAAS,WAAmC,EAAE,+BAA+B,OAAO,OAAO;EAC5F,CACF;AAED,KAAI,SACF,SAAQ,KAAK;EACX,QAAQ,EAAE,+BAA+B;EACzC,IAAI;EACJ,SAAS,WACP,2CAACC;GACC,SAAQ;GACR,OAAM;GACN,MAAK;GACL,UAAU;GACV,cAAY,EAAE,qCAAqC,EAAC,MAAM,OAAO,WAAW,OAAO,IAAG,CAAC;GACvF,eAAqB,SAAS,OAAO;aAEpC,EAAE,8BAA8B;IAC1B;EAEZ,CAAC;AAGJ,KAAI,SACF,QACE,2CAAC;EAAe;YACb,SAAS;GACR,YAAY,QAAQ,aAAa;GACjC;GACA;GACA;GACA;GACA;GACA,OAAO,aAAa,QAAQ;GAC5B;GACD,CAAC;GACE;AAIV,QACE,4CAACC;EACC,OAAM;EACK;EACX,OAAO,SAAS,EAAE,6BAA6B;EAClC;EACb,cAAc;EACD;aAEZ,SAAS,cACR,2CAACC;GACC,UAAU,EAAE,2BAA2B;GAC3B;GACZ,aAAa,QAAQ,KAAK,WAAwB,OAAO,GAAG;GAC5D,cAAc;GACP;GACP,OAAQ;IAAC;IAAQ;IAAS;IAAQ,CAC/B,QAAQ,SAA0B,WAAW,UAAU,OAAU,CACjE,KAAK,UAA2B;IAAC,OAAO,EAAE,+BAA+B,OAAO;IAAE,OAAO;IAAK,EAAE;IACnG,EAEJ,2CAACC;GACC,SAAS,OAAO,SAAS,QAAQ,EAAE,6BAA6B;GACvD;GACT,MAAM;GACN,WAAW,WAAgC,GAAG,OAAO,KAAK,GAAG,OAAO;GACzD;GACJ;GACP,WAAW,EAAE,6BAA6B;IAC1C;GACW;;AAInB,+BAAe"}

package/dist/cjs/components/{admin → management}/GroupMembers/GroupMembers.cjs

@@ -11,7 +11,7 @@ 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/admin/GroupMembers/GroupMembers.tsx
+//#region src/components/management/GroupMembers/GroupMembers.tsx
 /**
 * Query keys to refetch after a group's membership changes.
 */

package/dist/cjs/components/management/GroupMembers/GroupMembers.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupMembers.cjs","names":["GroupQueryKeys","RoleQueryKeys","GroupMembers: FC<GroupMembersProps>","useTranslation","groupsEndpoint: ManagementEndpoint","useManagementEndpoint","usersEndpoint: ManagementEndpoint","agentsEndpoint: ManagementEndpoint","filter: string | undefined","members: ResourceQueryResult<GroupMemberListResponse>","useResourceQuery","users: ResourceQueryResult<FilteredPage<ManagedUserListResponse>>","UserQueryKeys","agents: ResourceQueryResult<FilteredPage<AgentListResponse>>","AgentQueryKeys","add: ResourceMutationResult<Group, GroupMembersVariables>","useResourceMutation","remove: ResourceMutationResult<Group, GroupMembersVariables>","candidates: Partial<Record<'user' | 'agent', IdentityCandidate[]>>","BaseGroupMembers"],"sources":["../../../../../src/components/management/GroupMembers/GroupMembers.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  AdministrationMode,\n  AgentListResponse,\n  AgentQueryKeys,\n  BasicAgent,\n  Group,\n  GroupMember,\n  GroupMemberListResponse,\n  GroupQueryKeys,\n  ManagedUser,\n  ManagedUserListResponse,\n  ResourceQueryKey,\n  RoleQueryKeys,\n  UserQueryKeys,\n  addGroupMembers,\n  getAgentName,\n  getAgents,\n  getGroupMembers,\n  getUsers,\n  removeGroupMembers,\n  resolveManagedIdentityName,\n  toEqualityFilter,\n  toManagementErrorMessage,\n} from '@thunderid/browser';\nimport {FC, ReactElement, useMemo} from 'react';\nimport BaseGroupMembers, {BaseGroupMembersProps} from './BaseGroupMembers';\nimport useManagementEndpoint, {ManagementEndpoint} from '../../../hooks/management/useManagementEndpoint';\nimport useResourceMutation, {ResourceMutationResult} from '../../../hooks/management/useResourceMutation';\nimport useResourceQuery, {ResourceQueryResult} from '../../../hooks/management/useResourceQuery';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {IdentityCandidate} from '../shared/IdentityPicker';\n\ninterface GroupMembersVariables {\n  groupId: string;\n  members: Pick<GroupMember, 'id' | 'type'>[];\n}\n\n/**\n * A candidate page with the filter it was listed with.\n */\ninterface FilteredPage<T> {\n  filter: string | undefined;\n  page: T;\n}\n\n/**\n * Query keys to refetch after a group's membership changes.\n */\nconst getMembershipInvalidatedKeys = ({groupId}: GroupMembersVariables): ResourceQueryKey[] => [\n  [GroupQueryKeys.GROUP, groupId],\n  [GroupQueryKeys.GROUP_MEMBERS, groupId],\n  [GroupQueryKeys.MEMBERSHIPS],\n  [RoleQueryKeys.ROLE_ASSIGNMENTS],\n];\n\nexport type GroupMembersProps = Omit<\n  BaseGroupMembersProps,\n  'candidates' | 'error' | 'isLoading' | 'isMutating' | 'members' | 'onAdd' | 'onRemove'\n> & {\n  /**\n   * How a member is removed. `flow` runs the administration flow the server configures for it, which can revoke\n   * grants and end sessions first. It needs `baseUrl`.\n   * @default 'native'\n   */\n  administrationMode?: AdministrationMode;\n  /**\n   * Whether members can be added and removed from this view.\n   * @default false\n   */\n  editable?: boolean;\n  groupId: string;\n  /**\n   * Organization unit the users and agents offered for adding are listed from.\n   */\n  ouId?: string;\n};\n\n/**\n * Lists the users and agents in a group, and lets the signed-in user add and remove them.\n *\n * @example\n * ```tsx\n * <GroupMembers groupId={groupId} />\n * ```\n */\nconst GroupMembers: FC<GroupMembersProps> = ({\n  administrationMode,\n  editable = false,\n  groupId,\n  ouId,\n  preferences,\n  ...rest\n}: GroupMembersProps): ReactElement => {\n  const {t} = useTranslation(preferences?.i18n);\n  const groupsEndpoint: ManagementEndpoint = useManagementEndpoint('groups');\n  const usersEndpoint: ManagementEndpoint = useManagementEndpoint('users');\n  const agentsEndpoint: ManagementEndpoint = useManagementEndpoint('agents');\n  const filter: string | undefined = toEqualityFilter('ouId', ouId);\n  const members: ResourceQueryResult<GroupMemberListResponse> = useResourceQuery(\n    [GroupQueryKeys.GROUP_MEMBERS, groupId, {limit: 100}],\n    (fetcher) => getGroupMembers({...groupsEndpoint, fetcher, groupId, limit: 100}),\n    {enabled: Boolean(groupId)},\n  );\n  const users: ResourceQueryResult<FilteredPage<ManagedUserListResponse>> = useResourceQuery(\n    [UserQueryKeys.USERS, {filter, limit: 100}],\n    async (fetcher) => ({filter, page: await getUsers({...usersEndpoint, fetcher, filter, limit: 100})}),\n    {enabled: editable},\n  );\n  const agents: ResourceQueryResult<FilteredPage<AgentListResponse>> = useResourceQuery(\n    [AgentQueryKeys.AGENTS, {filter, limit: 100}],\n    async (fetcher) => ({filter, page: await getAgents({...agentsEndpoint, fetcher, filter, limit: 100})}),\n    {enabled: editable},\n  );\n  const add: ResourceMutationResult<Group, GroupMembersVariables> = useResourceMutation(\n    ({groupId: id, members: changes}: GroupMembersVariables, fetcher) =>\n      addGroupMembers({...groupsEndpoint, fetcher, groupId: id, members: changes}),\n    getMembershipInvalidatedKeys,\n  );\n  const remove: ResourceMutationResult<Group, GroupMembersVariables> = useResourceMutation(\n    ({groupId: id, members: changes}: GroupMembersVariables, fetcher) =>\n      removeGroupMembers({...groupsEndpoint, administrationMode, fetcher, groupId: id, members: changes}),\n    getMembershipInvalidatedKeys,\n  );\n\n  const candidates: Partial<Record<'user' | 'agent', IdentityCandidate[]>> = useMemo(() => {\n    // A page listed for an earlier ouId stays in a query until the next one succeeds, so it is not offered.\n    const current = <T,>(data: FilteredPage<T> | undefined): T | undefined =>\n      data && data.filter === filter ? data.page : undefined;\n\n    return {\n      agent: (current(agents.data)?.agents ?? []).map((agent: BasicAgent) => ({\n        id: agent.id,\n        label: getAgentName(agent),\n      })),\n      user: (current(users.data)?.users ?? []).map((user: ManagedUser) => ({\n        id: user.id,\n        label: resolveManagedIdentityName(user),\n      })),\n    };\n  }, [agents.data, filter, users.data]);\n\n  return (\n    <BaseGroupMembers\n      members={members.data?.members ?? []}\n      isLoading={members.isLoading}\n      isMutating={add.isLoading || remove.isLoading}\n      error={\n        toManagementErrorMessage(t, members.error, 'admin.groups.members.error') ??\n        toManagementErrorMessage(t, add.error ?? remove.error, 'admin.groups.members.update_error')\n      }\n      candidates={editable ? candidates : undefined}\n      onAdd={\n        editable\n          ? (member: Pick<GroupMember, 'id' | 'type'>): void => void add.mutate({groupId, members: [member]})\n          : undefined\n      }\n      onRemove={\n        editable\n          ? (member: GroupMember): void => void remove.mutate({groupId, members: [{id: member.id, type: member.type}]})\n          : undefined\n      }\n      preferences={preferences}\n      {...rest}\n    />\n  );\n};\n\nexport default GroupMembers;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmDA,MAAM,gCAAgC,EAAC,cAAwD;CAC7F,CAACA,mCAAe,OAAO,QAAQ;CAC/B,CAACA,mCAAe,eAAe,QAAQ;CACvC,CAACA,mCAAe,YAAY;CAC5B,CAACC,kCAAc,iBAAiB;CACjC;;;;;;;;;AAgCD,MAAMC,gBAAuC,EAC3C,oBACA,WAAW,OACX,SACA,MACA,YACA,GAAG,WACkC;CACrC,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAC7C,MAAMC,iBAAqCC,sCAAsB,SAAS;CAC1E,MAAMC,gBAAoCD,sCAAsB,QAAQ;CACxE,MAAME,iBAAqCF,sCAAsB,SAAS;CAC1E,MAAMG,mDAA8C,QAAQ,KAAK;CACjE,MAAMC,UAAwDC,iCAC5D;EAACV,mCAAe;EAAe;EAAS,EAAC,OAAO,KAAI;EAAC,GACpD,qDAA4B;EAAC,GAAG;EAAgB;EAAS;EAAS,OAAO;EAAI,CAAC,EAC/E,EAAC,SAAS,QAAQ,QAAQ,EAAC,CAC5B;CACD,MAAMW,QAAoED,iCACxE,CAACE,kCAAc,OAAO;EAAC;EAAQ,OAAO;EAAI,CAAC,EAC3C,OAAO,aAAa;EAAC;EAAQ,MAAM,wCAAe;GAAC,GAAG;GAAe;GAAS;GAAQ,OAAO;GAAI,CAAC;EAAC,GACnG,EAAC,SAAS,UAAS,CACpB;CACD,MAAMC,SAA+DH,iCACnE,CAACI,mCAAe,QAAQ;EAAC;EAAQ,OAAO;EAAI,CAAC,EAC7C,OAAO,aAAa;EAAC;EAAQ,MAAM,yCAAgB;GAAC,GAAG;GAAgB;GAAS;GAAQ,OAAO;GAAI,CAAC;EAAC,GACrG,EAAC,SAAS,UAAS,CACpB;CACD,MAAMC,MAA4DC,qCAC/D,EAAC,SAAS,IAAI,SAAS,WAAiC,qDACvC;EAAC,GAAG;EAAgB;EAAS,SAAS;EAAI,SAAS;EAAQ,CAAC,EAC9E,6BACD;CACD,MAAMC,SAA+DD,qCAClE,EAAC,SAAS,IAAI,SAAS,WAAiC,wDACpC;EAAC,GAAG;EAAgB;EAAoB;EAAS,SAAS;EAAI,SAAS;EAAQ,CAAC,EACrG,6BACD;CAED,MAAME,sCAAmF;EAEvF,MAAM,WAAe,SACnB,QAAQ,KAAK,WAAW,SAAS,KAAK,OAAO;AAE/C,SAAO;GACL,QAAQ,QAAQ,OAAO,KAAK,EAAE,UAAU,EAAE,EAAE,KAAK,WAAuB;IACtE,IAAI,MAAM;IACV,6CAAoB,MAAM;IAC3B,EAAE;GACH,OAAO,QAAQ,MAAM,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,UAAuB;IACnE,IAAI,KAAK;IACT,2DAAkC,KAAK;IACxC,EAAE;GACJ;IACA;EAAC,OAAO;EAAM;EAAQ,MAAM;EAAK,CAAC;AAErC,QACE,2CAACC;EACC,SAAS,QAAQ,MAAM,WAAW,EAAE;EACpC,WAAW,QAAQ;EACnB,YAAY,IAAI,aAAa,OAAO;EACpC,yDAC2B,GAAG,QAAQ,OAAO,6BAA6B,sDAC/C,GAAG,IAAI,SAAS,OAAO,OAAO,oCAAoC;EAE7F,YAAY,WAAW,aAAa;EACpC,OACE,YACK,WAAmD,KAAK,IAAI,OAAO;GAAC;GAAS,SAAS,CAAC,OAAO;GAAC,CAAC,GACjG;EAEN,UACE,YACK,WAA8B,KAAK,OAAO,OAAO;GAAC;GAAS,SAAS,CAAC;IAAC,IAAI,OAAO;IAAI,MAAM,OAAO;IAAK,CAAC;GAAC,CAAC,GAC3G;EAEO;EACb,GAAI;GACJ;;AAIN,2BAAe"}

package/dist/cjs/components/management/OrganizationUnitCreate/BaseOrganizationUnitCreate.cjs

@@ -0,0 +1,140 @@
+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_Alert = require('../../primitives/Alert/Alert.cjs');
+const require_TextField = require('../../primitives/TextField/TextField.cjs');
+const require_Select = require('../../primitives/Select/Select.cjs');
+const require_AdminSection_styles = require('../shared/AdminSection.styles.cjs');
+const require_AdminSection = require('../shared/AdminSection.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);
+
+//#region src/components/management/OrganizationUnitCreate/BaseOrganizationUnitCreate.tsx
+/**
+* A form that collects a new organization unit's name, handle, description and parent. Holds no data
+* of its own: pass the parent or the parents to choose from, and handle the submission.
+*/
+const BaseOrganizationUnitCreate = ({ children, className, defaultParentId, description, error = null, isLoadingParents = false, isSubmitting = false, onCancel, onLoadMoreParents, onSubmit, parentId, parentOptions, preferences, title }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const styles = require_AdminSection_styles.default(theme, colorScheme);
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const [fields, setFields] = (0, react.useState)({
+		description: "",
+		handle: "",
+		name: ""
+	});
+	const [chosenParentId, setChosenParentId] = (0, react.useState)(void 0);
+	const resolvedParentId = parentId ?? chosenParentId ?? defaultParentId ?? "";
+	const values = {
+		...fields,
+		parentId: resolvedParentId
+	};
+	const isValid = fields.name.trim().length > 0 && fields.handle.trim().length > 0;
+	const showsPicker = parentId === void 0 && parentOptions !== void 0;
+	const setField = (field, value) => {
+		if (field === "parentId") setChosenParentId(value);
+		else setFields((previous) => ({
+			...previous,
+			[field]: value
+		}));
+	};
+	const submit = () => {
+		if (isValid && !isSubmitting) onSubmit({
+			description: fields.description.trim() || void 0,
+			handle: fields.handle.trim(),
+			name: fields.name.trim(),
+			parentId: resolvedParentId || null
+		});
+	};
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		submit();
+	};
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		children: children({
+			error,
+			handleInputChange: setField,
+			handleSubmit: submit,
+			isLoadingParents,
+			isSubmitting,
+			isValid,
+			onCancel,
+			onLoadMoreParents: showsPicker ? onLoadMoreParents : void 0,
+			parentOptions: parentId === void 0 ? parentOptions ?? [] : [],
+			values
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminSection.default, {
+		block: "organization-unit-create",
+		className,
+		title: title ?? t("admin.organization_units.create.title"),
+		description,
+		preferences,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+			className: styles["form"],
+			onSubmit: handleSubmit,
+			noValidate: true,
+			children: [
+				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+					variant: "error",
+					role: "alert",
+					children: error
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+					name: "name",
+					label: t("admin.organization_units.fields.name"),
+					required: true,
+					value: fields.name,
+					onChange: (event) => setField("name", event.target.value)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+					name: "handle",
+					label: t("admin.organization_units.fields.handle"),
+					required: true,
+					value: fields.handle,
+					onChange: (event) => setField("handle", event.target.value)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+					name: "description",
+					label: t("admin.organization_units.fields.description"),
+					value: fields.description,
+					onChange: (event) => setField("description", event.target.value)
+				}),
+				showsPicker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Select.default, {
+					name: "parentId",
+					label: t("admin.organization_units.fields.parent"),
+					placeholder: t("admin.organization_units.fields.parent_none"),
+					loading: isLoadingParents,
+					onLoadMore: onLoadMoreParents,
+					options: parentOptions,
+					value: resolvedParentId,
+					onChange: (event) => setField("parentId", event.target.value)
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: styles["formActions"],
+					children: [onCancel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+						type: "button",
+						variant: "text",
+						onClick: onCancel,
+						disabled: isSubmitting,
+						children: t("admin.common.actions.cancel")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+						type: "submit",
+						loading: isSubmitting,
+						disabled: !isValid || isSubmitting,
+						children: t("admin.organization_units.create.submit")
+					})]
+				})
+			]
+		})
+	});
+};
+var BaseOrganizationUnitCreate_default = BaseOrganizationUnitCreate;
+
+//#endregion
+exports.default = BaseOrganizationUnitCreate_default;
+//# sourceMappingURL=BaseOrganizationUnitCreate.cjs.map

package/dist/cjs/components/management/OrganizationUnitCreate/BaseOrganizationUnitCreate.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationUnitCreate.cjs","names":["BaseOrganizationUnitCreate: FC<BaseOrganizationUnitCreateProps>","useTheme","styles: Record<string, string>","useStyles","useTranslation","resolvedParentId: string","values: Record<OrganizationUnitCreateField, string>","isValid: boolean","showsPicker: boolean","AdminSection","Alert","TextField","Select","Button"],"sources":["../../../../../src/components/management/OrganizationUnitCreate/BaseOrganizationUnitCreate.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Preferences, SelectOption} from '@thunderid/browser';\nimport {ChangeEvent, FC, FormEvent, ReactElement, ReactNode, useState} from 'react';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport Alert from '../../primitives/Alert/Alert';\nimport Button from '../../primitives/Button/Button';\nimport Select from '../../primitives/Select/Select';\nimport TextField from '../../primitives/TextField/TextField';\nimport AdminSection from '../shared/AdminSection';\nimport useStyles from '../shared/AdminSection.styles';\n\n/**\n * The organization unit {@link BaseOrganizationUnitCreate} submits.\n */\nexport interface OrganizationUnitCreateSubmission {\n  description?: string;\n  handle: string;\n  name: string;\n  /**\n   * Identifier of the parent organization unit, or `null` for a unit at the top level.\n   */\n  parentId: string | null;\n}\n\n/**\n * The fields of {@link BaseOrganizationUnitCreate}. `parentId` is the parent's identifier, or an empty string for\n * the top level.\n */\nexport type OrganizationUnitCreateField = 'description' | 'handle' | 'name' | 'parentId';\n\n/**\n * What {@link BaseOrganizationUnitCreate} hands its `children` render function, so the form can be built with any UI.\n */\nexport interface BaseOrganizationUnitCreateRenderProps {\n  error: string | null;\n  /**\n   * Sets one field of the form.\n   */\n  handleInputChange: (field: OrganizationUnitCreateField, value: string) => void;\n  /**\n   * Submits the current values. Does nothing while they are not valid.\n   */\n  handleSubmit: () => void;\n  isLoadingParents: boolean;\n  isSubmitting: boolean;\n  /**\n   * Whether the values can be submitted.\n   */\n  isValid: boolean;\n  onCancel?: () => void;\n  /**\n   * Loads more parent options. Undefined when every option is loaded or the parent is fixed.\n   */\n  onLoadMoreParents?: () => void;\n  /**\n   * The parents to choose from. Empty when the parent is fixed by `parentId`.\n   */\n  parentOptions: SelectOption[];\n  values: Record<OrganizationUnitCreateField, string>;\n}\n\nexport interface BaseOrganizationUnitCreateProps {\n  /**\n   * Renders custom UI in place of the default form. Receives the values, their setters, the parent\n   * options, the submit handler and the submission state.\n   */\n  children?: (props: BaseOrganizationUnitCreateRenderProps) => ReactNode;\n  className?: string;\n  /**\n   * The parent preselected in the picker.\n   */\n  defaultParentId?: string;\n  description?: string;\n  error?: string | null;\n  isLoadingParents?: boolean;\n  isSubmitting?: boolean;\n  onCancel?: () => void;\n  onLoadMoreParents?: () => void;\n  onSubmit: (organizationUnit: OrganizationUnitCreateSubmission) => void;\n  /**\n   * The parent of the new unit. When set, the parent picker is hidden.\n   */\n  parentId?: string;\n  /**\n   * The parents the picker offers. The picker shows when `parentId` is not set and this is.\n   */\n  parentOptions?: SelectOption[];\n  preferences?: Preferences;\n  title?: string;\n}\n\n/**\n * A form that collects a new organization unit's name, handle, description and parent. Holds no data\n * of its own: pass the parent or the parents to choose from, and handle the submission.\n */\nconst BaseOrganizationUnitCreate: FC<BaseOrganizationUnitCreateProps> = ({\n  children,\n  className,\n  defaultParentId,\n  description,\n  error = null,\n  isLoadingParents = false,\n  isSubmitting = false,\n  onCancel,\n  onLoadMoreParents,\n  onSubmit,\n  parentId,\n  parentOptions,\n  preferences,\n  title,\n}: BaseOrganizationUnitCreateProps): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const {t} = useTranslation(preferences?.i18n);\n  const [fields, setFields] = useState<Record<'description' | 'handle' | 'name', string>>({\n    description: '',\n    handle: '',\n    name: '',\n  });\n  // Undefined until the user picks, so a default that arrives later still applies.\n  const [chosenParentId, setChosenParentId] = useState<string | undefined>(undefined);\n\n  const resolvedParentId: string = parentId ?? chosenParentId ?? defaultParentId ?? '';\n  const values: Record<OrganizationUnitCreateField, string> = {...fields, parentId: resolvedParentId};\n  const isValid: boolean = fields.name.trim().length > 0 && fields.handle.trim().length > 0;\n  const showsPicker: boolean = parentId === undefined && parentOptions !== undefined;\n\n  const setField = (field: OrganizationUnitCreateField, value: string): void => {\n    if (field === 'parentId') {\n      setChosenParentId(value);\n    } else {\n      setFields((previous: Record<'description' | 'handle' | 'name', string>) => ({...previous, [field]: value}));\n    }\n  };\n\n  const submit = (): void => {\n    if (isValid && !isSubmitting) {\n      onSubmit({\n        description: fields.description.trim() || undefined,\n        handle: fields.handle.trim(),\n        name: fields.name.trim(),\n        parentId: resolvedParentId || null,\n      });\n    }\n  };\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {\n    event.preventDefault();\n    submit();\n  };\n\n  if (children) {\n    return (\n      <div className={className}>\n        {children({\n          error,\n          handleInputChange: setField,\n          handleSubmit: submit,\n          isLoadingParents,\n          isSubmitting,\n          isValid,\n          onCancel,\n          onLoadMoreParents: showsPicker ? onLoadMoreParents : undefined,\n          parentOptions: parentId === undefined ? (parentOptions ?? []) : [],\n          values,\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <AdminSection\n      block=\"organization-unit-create\"\n      className={className}\n      title={title ?? t('admin.organization_units.create.title')}\n      description={description}\n      preferences={preferences}\n    >\n      <form className={styles['form']} onSubmit={handleSubmit} noValidate>\n        {error && (\n          <Alert variant=\"error\" role=\"alert\">\n            {error}\n          </Alert>\n        )}\n        <TextField\n          name=\"name\"\n          label={t('admin.organization_units.fields.name')}\n          required\n          value={fields.name}\n          onChange={(event: ChangeEvent<HTMLInputElement>): void => setField('name', event.target.value)}\n        />\n        <TextField\n          name=\"handle\"\n          label={t('admin.organization_units.fields.handle')}\n          required\n          value={fields.handle}\n          onChange={(event: ChangeEvent<HTMLInputElement>): void => setField('handle', event.target.value)}\n        />\n        <TextField\n          name=\"description\"\n          label={t('admin.organization_units.fields.description')}\n          value={fields.description}\n          onChange={(event: ChangeEvent<HTMLInputElement>): void => setField('description', event.target.value)}\n        />\n        {showsPicker && (\n          <Select\n            name=\"parentId\"\n            label={t('admin.organization_units.fields.parent')}\n            placeholder={t('admin.organization_units.fields.parent_none')}\n            loading={isLoadingParents}\n            onLoadMore={onLoadMoreParents}\n            options={parentOptions}\n            value={resolvedParentId}\n            onChange={(event: ChangeEvent<HTMLSelectElement>): void => setField('parentId', event.target.value)}\n          />\n        )}\n        <div className={styles['formActions']}>\n          {onCancel && (\n            <Button type=\"button\" variant=\"text\" onClick={onCancel} disabled={isSubmitting}>\n              {t('admin.common.actions.cancel')}\n            </Button>\n          )}\n          <Button type=\"submit\" loading={isSubmitting} disabled={!isValid || isSubmitting}>\n            {t('admin.organization_units.create.submit')}\n          </Button>\n        </div>\n      </form>\n    </AdminSection>\n  );\n};\n\nexport default BaseOrganizationUnitCreate;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkGA,MAAMA,8BAAmE,EACvE,UACA,WACA,iBACA,aACA,QAAQ,MACR,mBAAmB,OACnB,eAAe,OACf,UACA,mBACA,UACA,UACA,eACA,aACA,YACmD;CACnD,MAAM,EAAC,OAAO,gBAAeC,0BAAU;CACvC,MAAMC,SAAiCC,oCAAU,OAAO,YAAY;CACpE,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAC7C,MAAM,CAAC,QAAQ,iCAAyE;EACtF,aAAa;EACb,QAAQ;EACR,MAAM;EACP,CAAC;CAEF,MAAM,CAAC,gBAAgB,yCAAkD,OAAU;CAEnF,MAAMC,mBAA2B,YAAY,kBAAkB,mBAAmB;CAClF,MAAMC,SAAsD;EAAC,GAAG;EAAQ,UAAU;EAAiB;CACnG,MAAMC,UAAmB,OAAO,KAAK,MAAM,CAAC,SAAS,KAAK,OAAO,OAAO,MAAM,CAAC,SAAS;CACxF,MAAMC,cAAuB,aAAa,UAAa,kBAAkB;CAEzE,MAAM,YAAY,OAAoC,UAAwB;AAC5E,MAAI,UAAU,WACZ,mBAAkB,MAAM;MAExB,YAAW,cAAiE;GAAC,GAAG;IAAW,QAAQ;GAAM,EAAE;;CAI/G,MAAM,eAAqB;AACzB,MAAI,WAAW,CAAC,aACd,UAAS;GACP,aAAa,OAAO,YAAY,MAAM,IAAI;GAC1C,QAAQ,OAAO,OAAO,MAAM;GAC5B,MAAM,OAAO,KAAK,MAAM;GACxB,UAAU,oBAAoB;GAC/B,CAAC;;CAIN,MAAM,gBAAgB,UAA4C;AAChE,QAAM,gBAAgB;AACtB,UAAQ;;AAGV,KAAI,SACF,QACE,2CAAC;EAAe;YACb,SAAS;GACR;GACA,mBAAmB;GACnB,cAAc;GACd;GACA;GACA;GACA;GACA,mBAAmB,cAAc,oBAAoB;GACrD,eAAe,aAAa,SAAa,iBAAiB,EAAE,GAAI,EAAE;GAClE;GACD,CAAC;GACE;AAIV,QACE,2CAACC;EACC,OAAM;EACK;EACX,OAAO,SAAS,EAAE,wCAAwC;EAC7C;EACA;YAEb,4CAAC;GAAK,WAAW,OAAO;GAAS,UAAU;GAAc;;IACtD,SACC,2CAACC;KAAM,SAAQ;KAAQ,MAAK;eACzB;MACK;IAEV,2CAACC;KACC,MAAK;KACL,OAAO,EAAE,uCAAuC;KAChD;KACA,OAAO,OAAO;KACd,WAAW,UAA+C,SAAS,QAAQ,MAAM,OAAO,MAAM;MAC9F;IACF,2CAACA;KACC,MAAK;KACL,OAAO,EAAE,yCAAyC;KAClD;KACA,OAAO,OAAO;KACd,WAAW,UAA+C,SAAS,UAAU,MAAM,OAAO,MAAM;MAChG;IACF,2CAACA;KACC,MAAK;KACL,OAAO,EAAE,8CAA8C;KACvD,OAAO,OAAO;KACd,WAAW,UAA+C,SAAS,eAAe,MAAM,OAAO,MAAM;MACrG;IACD,eACC,2CAACC;KACC,MAAK;KACL,OAAO,EAAE,yCAAyC;KAClD,aAAa,EAAE,8CAA8C;KAC7D,SAAS;KACT,YAAY;KACZ,SAAS;KACT,OAAO;KACP,WAAW,UAAgD,SAAS,YAAY,MAAM,OAAO,MAAM;MACnG;IAEJ,4CAAC;KAAI,WAAW,OAAO;gBACpB,YACC,2CAACC;MAAO,MAAK;MAAS,SAAQ;MAAO,SAAS;MAAU,UAAU;gBAC/D,EAAE,8BAA8B;OAC1B,EAEX,2CAACA;MAAO,MAAK;MAAS,SAAS;MAAc,UAAU,CAAC,WAAW;gBAChE,EAAE,yCAAyC;OACrC;MACL;;IACD;GACM;;AAInB,yCAAe"}

package/dist/cjs/components/management/OrganizationUnitCreate/OrganizationUnitCreate.cjs

@@ -0,0 +1,83 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTranslation = require('../../../hooks/useTranslation.cjs');
+const require_useManagementEndpoint = require('../../../hooks/management/useManagementEndpoint.cjs');
+const require_useResourceQuery = require('../../../hooks/management/useResourceQuery.cjs');
+const require_useResourceMutation = require('../../../hooks/management/useResourceMutation.cjs');
+const require_BaseOrganizationUnitCreate = require('./BaseOrganizationUnitCreate.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/management/OrganizationUnitCreate/OrganizationUnitCreate.tsx
+const PARENT_PAGE_SIZE = 100;
+/**
+* Creates an organization unit through the management API. Without `parentId`, it offers the root
+* units as parents; pass `parentId` to create a unit deeper in the tree.
+*
+* @example
+* ```tsx
+* <OrganizationUnitCreate parentId={unitId} onCreated={(unit) => navigate(`/units/${unit.id}`)} />
+* ```
+*/
+const OrganizationUnitCreate = ({ onCreated, parentId, preferences,...rest }) => {
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const endpoint = require_useManagementEndpoint.default("organizationUnits");
+	const [parentOffset, setParentOffset] = (0, react.useState)(0);
+	const [parentPages, setParentPages] = (0, react.useState)({});
+	const parents = require_useResourceQuery.default([__thunderid_browser.OrganizationUnitQueryKeys.ORGANIZATION_UNITS, {
+		limit: PARENT_PAGE_SIZE,
+		offset: parentOffset
+	}], (fetcher) => (0, __thunderid_browser.getOrganizationUnits)({
+		...endpoint,
+		fetcher,
+		limit: PARENT_PAGE_SIZE,
+		offset: parentOffset
+	}), { enabled: parentId === void 0 });
+	const creation = require_useResourceMutation.default((payload, fetcher) => (0, __thunderid_browser.createOrganizationUnit)({
+		...endpoint,
+		fetcher,
+		payload
+	}), () => [[__thunderid_browser.OrganizationUnitQueryKeys.ORGANIZATION_UNITS], [__thunderid_browser.OrganizationUnitQueryKeys.ORGANIZATION_UNIT_CHILDREN]], { onSuccess: onCreated });
+	const [mergedParents, setMergedParents] = (0, react.useState)(void 0);
+	if (parents.data && parents.data !== mergedParents) {
+		const page = parents.data;
+		setMergedParents(page);
+		setParentPages((previous) => ({
+			...previous,
+			[parentOffset]: page.organizationUnits ?? []
+		}));
+	}
+	const loadedParents = (0, react.useMemo)(() => Object.keys(parentPages).map(Number).sort((a, b) => a - b).flatMap((offset) => parentPages[offset] ?? []), [parentPages]);
+	const parentOptions = loadedParents.map((unit) => ({
+		label: unit.name,
+		value: unit.id
+	}));
+	const totalParents = parents.data?.totalResults ?? loadedParents.length;
+	const handleSubmit = ({ description, handle, name, parentId: parent }) => {
+		creation.mutate({
+			description,
+			handle,
+			name,
+			parent
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseOrganizationUnitCreate.default, {
+		onSubmit: handleSubmit,
+		isSubmitting: creation.isLoading,
+		error: (0, __thunderid_browser.toManagementErrorMessage)(t, creation.error, "admin.organization_units.create.error", __thunderid_browser.ORGANIZATION_UNIT_ERROR_KEYS) ?? (0, __thunderid_browser.toManagementErrorMessage)(t, parents.error, "admin.organization_units.list.error"),
+		parentId,
+		parentOptions: parentId === void 0 ? parentOptions : void 0,
+		isLoadingParents: parents.isLoading,
+		onLoadMoreParents: !parents.isLoading && loadedParents.length < totalParents ? () => setParentOffset(loadedParents.length) : void 0,
+		preferences,
+		...rest
+	});
+};
+var OrganizationUnitCreate_default = OrganizationUnitCreate;
+
+//#endregion
+exports.default = OrganizationUnitCreate_default;
+//# sourceMappingURL=OrganizationUnitCreate.cjs.map

package/dist/cjs/components/management/OrganizationUnitCreate/OrganizationUnitCreate.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationUnitCreate.cjs","names":["OrganizationUnitCreate: FC<OrganizationUnitCreateProps>","useTranslation","endpoint: ManagementEndpoint","useManagementEndpoint","parents: ResourceQueryResult<OrganizationUnitListResponse>","useResourceQuery","OrganizationUnitQueryKeys","creation: ResourceMutationResult<OrganizationUnit, CreateOrganizationUnitRequest>","useResourceMutation","page: OrganizationUnitListResponse","loadedParents: OrganizationUnitBasic[]","parentOptions: SelectOption[]","totalParents: number","BaseOrganizationUnitCreate","ORGANIZATION_UNIT_ERROR_KEYS"],"sources":["../../../../../src/components/management/OrganizationUnitCreate/OrganizationUnitCreate.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  CreateOrganizationUnitRequest,\n  ORGANIZATION_UNIT_ERROR_KEYS,\n  OrganizationUnit,\n  OrganizationUnitBasic,\n  OrganizationUnitListResponse,\n  OrganizationUnitQueryKeys,\n  SelectOption,\n  createOrganizationUnit,\n  getOrganizationUnits,\n  toManagementErrorMessage,\n} from '@thunderid/browser';\nimport {FC, ReactElement, useMemo, useState} from 'react';\nimport BaseOrganizationUnitCreate, {\n  BaseOrganizationUnitCreateProps,\n  OrganizationUnitCreateSubmission,\n} from './BaseOrganizationUnitCreate';\nimport useManagementEndpoint, {ManagementEndpoint} from '../../../hooks/management/useManagementEndpoint';\nimport useResourceMutation, {ResourceMutationResult} from '../../../hooks/management/useResourceMutation';\nimport useResourceQuery, {ResourceQueryResult} from '../../../hooks/management/useResourceQuery';\nimport useTranslation from '../../../hooks/useTranslation';\n\nconst PARENT_PAGE_SIZE = 100;\n\nexport type OrganizationUnitCreateProps = Omit<\n  BaseOrganizationUnitCreateProps,\n  'error' | 'isLoadingParents' | 'isSubmitting' | 'onLoadMoreParents' | 'onSubmit' | 'parentOptions'\n> & {\n  /**\n   * Called with the created organization unit.\n   */\n  onCreated?: (organizationUnit: OrganizationUnit) => void;\n};\n\n/**\n * Creates an organization unit through the management API. Without `parentId`, it offers the root\n * units as parents; pass `parentId` to create a unit deeper in the tree.\n *\n * @example\n * ```tsx\n * <OrganizationUnitCreate parentId={unitId} onCreated={(unit) => navigate(`/units/${unit.id}`)} />\n * ```\n */\nconst OrganizationUnitCreate: FC<OrganizationUnitCreateProps> = ({\n  onCreated,\n  parentId,\n  preferences,\n  ...rest\n}: OrganizationUnitCreateProps): ReactElement => {\n  const {t} = useTranslation(preferences?.i18n);\n  const endpoint: ManagementEndpoint = useManagementEndpoint('organizationUnits');\n  const [parentOffset, setParentOffset] = useState<number>(0);\n  const [parentPages, setParentPages] = useState<Record<number, OrganizationUnitBasic[]>>({});\n  const parents: ResourceQueryResult<OrganizationUnitListResponse> = useResourceQuery(\n    [OrganizationUnitQueryKeys.ORGANIZATION_UNITS, {limit: PARENT_PAGE_SIZE, offset: parentOffset}],\n    (fetcher) => getOrganizationUnits({...endpoint, fetcher, limit: PARENT_PAGE_SIZE, offset: parentOffset}),\n    {enabled: parentId === undefined},\n  );\n  const creation: ResourceMutationResult<OrganizationUnit, CreateOrganizationUnitRequest> = useResourceMutation(\n    (payload: CreateOrganizationUnitRequest, fetcher) => createOrganizationUnit({...endpoint, fetcher, payload}),\n    () => [[OrganizationUnitQueryKeys.ORGANIZATION_UNITS], [OrganizationUnitQueryKeys.ORGANIZATION_UNIT_CHILDREN]],\n    {onSuccess: onCreated},\n  );\n\n  const [mergedParents, setMergedParents] = useState<OrganizationUnitListResponse | undefined>(undefined);\n\n  // Each page of parents is kept as it arrives, so loading more appends to the options already listed.\n  if (parents.data && parents.data !== mergedParents) {\n    const page: OrganizationUnitListResponse = parents.data;\n\n    setMergedParents(page);\n    setParentPages((previous: Record<number, OrganizationUnitBasic[]>) => ({\n      ...previous,\n      [parentOffset]: page.organizationUnits ?? [],\n    }));\n  }\n\n  const loadedParents: OrganizationUnitBasic[] = useMemo(\n    () =>\n      Object.keys(parentPages)\n        .map(Number)\n        .sort((a: number, b: number) => a - b)\n        .flatMap((offset: number) => parentPages[offset] ?? []),\n    [parentPages],\n  );\n  const parentOptions: SelectOption[] = loadedParents.map((unit: OrganizationUnitBasic) => ({\n    label: unit.name,\n    value: unit.id,\n  }));\n  const totalParents: number = parents.data?.totalResults ?? loadedParents.length;\n\n  const handleSubmit = ({description, handle, name, parentId: parent}: OrganizationUnitCreateSubmission): void => {\n    void creation.mutate({description, handle, name, parent});\n  };\n\n  return (\n    <BaseOrganizationUnitCreate\n      onSubmit={handleSubmit}\n      isSubmitting={creation.isLoading}\n      error={\n        toManagementErrorMessage(\n          t,\n          creation.error,\n          'admin.organization_units.create.error',\n          ORGANIZATION_UNIT_ERROR_KEYS,\n        ) ?? toManagementErrorMessage(t, parents.error, 'admin.organization_units.list.error')\n      }\n      parentId={parentId}\n      parentOptions={parentId === undefined ? parentOptions : undefined}\n      isLoadingParents={parents.isLoading}\n      onLoadMoreParents={\n        !parents.isLoading && loadedParents.length < totalParents\n          ? (): void => setParentOffset(loadedParents.length)\n          : undefined\n      }\n      preferences={preferences}\n      {...rest}\n    />\n  );\n};\n\nexport default OrganizationUnitCreate;\n"],"mappings":";;;;;;;;;;;;;;AAyBA,MAAM,mBAAmB;;;;;;;;;;AAqBzB,MAAMA,0BAA2D,EAC/D,WACA,UACA,YACA,GAAG,WAC4C;CAC/C,MAAM,EAAC,MAAKC,+BAAe,aAAa,KAAK;CAC7C,MAAMC,WAA+BC,sCAAsB,oBAAoB;CAC/E,MAAM,CAAC,cAAc,uCAAoC,EAAE;CAC3D,MAAM,CAAC,aAAa,sCAAoE,EAAE,CAAC;CAC3F,MAAMC,UAA6DC,iCACjE,CAACC,8CAA0B,oBAAoB;EAAC,OAAO;EAAkB,QAAQ;EAAa,CAAC,GAC9F,0DAAiC;EAAC,GAAG;EAAU;EAAS,OAAO;EAAkB,QAAQ;EAAa,CAAC,EACxG,EAAC,SAAS,aAAa,QAAU,CAClC;CACD,MAAMC,WAAoFC,qCACvF,SAAwC,4DAAmC;EAAC,GAAG;EAAU;EAAS;EAAQ,CAAC,QACtG,CAAC,CAACF,8CAA0B,mBAAmB,EAAE,CAACA,8CAA0B,2BAA2B,CAAC,EAC9G,EAAC,WAAW,WAAU,CACvB;CAED,MAAM,CAAC,eAAe,wCAAuE,OAAU;AAGvG,KAAI,QAAQ,QAAQ,QAAQ,SAAS,eAAe;EAClD,MAAMG,OAAqC,QAAQ;AAEnD,mBAAiB,KAAK;AACtB,kBAAgB,cAAuD;GACrE,GAAG;IACF,eAAe,KAAK,qBAAqB,EAAE;GAC7C,EAAE;;CAGL,MAAMC,yCAEF,OAAO,KAAK,YAAY,CACrB,IAAI,OAAO,CACX,MAAM,GAAW,MAAc,IAAI,EAAE,CACrC,SAAS,WAAmB,YAAY,WAAW,EAAE,CAAC,EAC3D,CAAC,YAAY,CACd;CACD,MAAMC,gBAAgC,cAAc,KAAK,UAAiC;EACxF,OAAO,KAAK;EACZ,OAAO,KAAK;EACb,EAAE;CACH,MAAMC,eAAuB,QAAQ,MAAM,gBAAgB,cAAc;CAEzE,MAAM,gBAAgB,EAAC,aAAa,QAAQ,MAAM,UAAU,aAAoD;AAC9G,EAAK,SAAS,OAAO;GAAC;GAAa;GAAQ;GAAM;GAAO,CAAC;;AAG3D,QACE,2CAACC;EACC,UAAU;EACV,cAAc,SAAS;EACvB,yDAEI,GACA,SAAS,OACT,yCACAC,iDACD,sDAA6B,GAAG,QAAQ,OAAO,sCAAsC;EAE9E;EACV,eAAe,aAAa,SAAY,gBAAgB;EACxD,kBAAkB,QAAQ;EAC1B,mBACE,CAAC,QAAQ,aAAa,cAAc,SAAS,qBAC7B,gBAAgB,cAAc,OAAO,GACjD;EAEO;EACb,GAAI;GACJ;;AAIN,qCAAe"}

package/dist/cjs/components/management/OrganizationUnitDetails/BaseOrganizationUnitDetails.cjs

@@ -0,0 +1,276 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.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_Alert = require('../../primitives/Alert/Alert.cjs');
+const require_TextField = require('../../primitives/TextField/TextField.cjs');
+const require_useAdminPartStyles = require('../shared/useAdminPartStyles.cjs');
+const require_AdminSection = require('../shared/AdminSection.cjs');
+const require_AdminParts = require('../shared/AdminParts.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);
+
+//#region src/components/management/OrganizationUnitDetails/BaseOrganizationUnitDetails.tsx
+/**
+* Shows an organization unit's name, handle, description and parent, with its child units and the
+* users, groups and roles in it, and lets the caller edit and delete it. Holds no data of its own:
+* pass the unit and what it holds, and handle the changes.
+*/
+const BaseOrganizationUnitDetails = ({ actions, children, className, contents, contentsError = null, error = null, isDeleting = false, isLoading = false, isLoadingContents = false, isUpdating = false, onDelete, onSelectChild, onUpdate, organizationUnit, parent, preferences }) => {
+	const { t } = require_useTranslation.default(preferences?.i18n);
+	const styles = require_useAdminPartStyles.default();
+	const [draft, setDraft] = (0, react.useState)(null);
+	const resolvedContents = {
+		childUnits: contents?.childUnits ?? [],
+		groups: contents?.groups ?? [],
+		roles: contents?.roles ?? [],
+		totals: contents?.totals ?? {},
+		users: contents?.users ?? []
+	};
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		children: children({
+			contents: resolvedContents,
+			contentsError,
+			error,
+			isDeleting,
+			isLoading,
+			isLoadingContents,
+			isUpdating,
+			onDelete: organizationUnit ? onDelete : void 0,
+			onSelectChild,
+			onUpdate: organizationUnit ? onUpdate : void 0,
+			organizationUnit,
+			parent
+		})
+	});
+	if (isLoading && !organizationUnit) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminSection.default, {
+		block: "organization-unit-details",
+		className,
+		preferences,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: styles["muted"],
+			role: "status",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.default, { size: "small" }),
+				" ",
+				t("admin.common.loading")
+			]
+		})
+	});
+	if (!organizationUnit) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminSection.default, {
+		block: "organization-unit-details",
+		className,
+		preferences,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+			variant: "error",
+			role: "alert",
+			children: error ?? t("admin.common.errors.not_found")
+		})
+	});
+	const notSet = t("admin.organization_units.details.not_set");
+	const isDraftValid = Boolean(draft?.name.trim() && draft?.handle.trim());
+	const handleSave = (event) => {
+		event.preventDefault();
+		if (draft && isDraftValid) {
+			onUpdate?.({
+				description: draft.description.trim() || void 0,
+				handle: draft.handle.trim(),
+				name: draft.name.trim()
+			});
+			setDraft(null);
+		}
+	};
+	const titled = (key, items, total) => `${t(key)} (${total ?? items.length})`;
+	const renderContents = () => {
+		if (isLoadingContents) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: styles["muted"],
+			role: "status",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.default, { size: "small" }),
+				" ",
+				t("admin.common.loading")
+			]
+		});
+		if (contentsError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+			variant: "error",
+			role: "alert",
+			children: contentsError
+		});
+		const { childUnits, groups, roles, totals, users } = resolvedContents;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.Panel, {
+				title: titled("admin.organization_units.details.children", childUnits, totals?.childUnits),
+				children: onSelectChild && childUnits.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+					className: styles["chipList"],
+					"aria-label": t("admin.organization_units.details.children"),
+					children: childUnits.map((unit) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+						variant: "outline",
+						size: "small",
+						onClick: () => onSelectChild(unit),
+						children: unit.name
+					}) }, unit.id))
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.ChipList, {
+					label: t("admin.organization_units.details.children"),
+					emptyText: t("admin.organization_units.details.children_empty"),
+					items: childUnits.map((unit) => ({
+						id: unit.id,
+						label: unit.name
+					}))
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.Panel, {
+				title: titled("admin.organization_units.details.users", users, totals?.users),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.ChipList, {
+					label: t("admin.organization_units.details.users"),
+					emptyText: t("admin.organization_units.details.users_empty"),
+					items: users.map((user) => ({
+						id: user.id,
+						label: user.display ?? user.id
+					}))
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.Panel, {
+				title: titled("admin.organization_units.details.groups", groups, totals?.groups),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.ChipList, {
+					label: t("admin.organization_units.details.groups"),
+					emptyText: t("admin.organization_units.details.groups_empty"),
+					items: groups.map((group) => ({
+						id: group.id,
+						label: group.name
+					}))
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.Panel, {
+				title: titled("admin.organization_units.details.roles", roles, totals?.roles),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.ChipList, {
+					label: t("admin.organization_units.details.roles"),
+					emptyText: t("admin.organization_units.details.roles_empty"),
+					items: roles.map((role) => ({
+						id: role.id,
+						label: role.name
+					}))
+				})
+			})
+		] });
+	};
+	let parentLabel = t("admin.organization_units.fields.parent_none");
+	if (organizationUnit.parent) parentLabel = parent?.name ?? organizationUnit.parent;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_AdminSection.default, {
+		block: "organization-unit-details",
+		className,
+		title: organizationUnit.name,
+		description: organizationUnit.description,
+		preferences,
+		actions: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [actions, onDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.ConfirmButton, {
+			confirmText: t("admin.organization_units.details.delete.confirm", { name: organizationUnit.name }),
+			isLoading: isDeleting,
+			onConfirm: onDelete,
+			children: t("admin.organization_units.details.delete.action")
+		})] }),
+		children: [
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.default, {
+				variant: "error",
+				role: "alert",
+				children: error
+			}),
+			draft ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.Panel, {
+				title: t("admin.organization_units.details.edit.action"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+					className: styles["row"],
+					style: {
+						alignItems: "stretch",
+						flexDirection: "column"
+					},
+					onSubmit: handleSave,
+					noValidate: true,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+							name: "name",
+							label: t("admin.organization_units.fields.name"),
+							required: true,
+							value: draft.name,
+							onChange: (event) => setDraft({
+								...draft,
+								name: event.target.value
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+							name: "handle",
+							label: t("admin.organization_units.fields.handle"),
+							required: true,
+							value: draft.handle,
+							onChange: (event) => setDraft({
+								...draft,
+								handle: event.target.value
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+							name: "description",
+							label: t("admin.organization_units.fields.description"),
+							value: draft.description,
+							onChange: (event) => setDraft({
+								...draft,
+								description: event.target.value
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: styles["row"],
+							style: { justifyContent: "flex-end" },
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+								type: "button",
+								variant: "text",
+								disabled: isUpdating,
+								onClick: () => setDraft(null),
+								children: t("admin.common.actions.cancel")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+								type: "submit",
+								loading: isUpdating,
+								disabled: isUpdating || !isDraftValid,
+								children: t("admin.organization_units.details.edit.save")
+							})]
+						})
+					]
+				})
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.Panel, {
+				title: t("admin.organization_units.details.overview"),
+				actions: onUpdate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+					variant: "outline",
+					size: "small",
+					onClick: () => setDraft({
+						description: organizationUnit.description ?? "",
+						handle: organizationUnit.handle,
+						name: organizationUnit.name
+					}),
+					children: t("admin.organization_units.details.edit.action")
+				}) : void 0,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AdminParts.DetailList, { items: [
+					{
+						label: t("admin.organization_units.fields.name"),
+						value: organizationUnit.name
+					},
+					{
+						label: t("admin.organization_units.fields.handle"),
+						value: organizationUnit.handle
+					},
+					{
+						label: t("admin.organization_units.fields.description"),
+						value: organizationUnit.description?.length ? organizationUnit.description : notSet
+					},
+					{
+						label: t("admin.organization_units.fields.parent"),
+						value: parentLabel
+					}
+				] })
+			}),
+			renderContents()
+		]
+	});
+};
+var BaseOrganizationUnitDetails_default = BaseOrganizationUnitDetails;
+
+//#endregion
+exports.default = BaseOrganizationUnitDetails_default;
+//# sourceMappingURL=BaseOrganizationUnitDetails.cjs.map

package/dist/cjs/components/management/OrganizationUnitDetails/BaseOrganizationUnitDetails.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationUnitDetails.cjs","names":["BaseOrganizationUnitDetails: FC<BaseOrganizationUnitDetailsProps>","useTranslation","styles: Record<string, string>","useAdminPartStyles","resolvedContents: OrganizationUnitContents","AdminSection","Spinner","Alert","notSet: string","Panel","Button","ChipList","parentLabel: string","ConfirmButton","TextField","DetailList"],"sources":["../../../../../src/components/management/OrganizationUnitDetails/BaseOrganizationUnitDetails.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  OrganizationUnit,\n  OrganizationUnitBasic,\n  OrganizationUnitGroup,\n  OrganizationUnitRole,\n  OrganizationUnitUser,\n  Preferences,\n} from '@thunderid/browser';\nimport {ChangeEvent, FC, FormEvent, ReactElement, ReactNode, useState} from 'react';\nimport useTranslation from '../../../hooks/useTranslation';\nimport Alert from '../../primitives/Alert/Alert';\nimport Button from '../../primitives/Button/Button';\nimport Spinner from '../../primitives/Spinner/Spinner';\nimport TextField from '../../primitives/TextField/TextField';\nimport {ChipList, ConfirmButton, DetailList, Panel} from '../shared/AdminParts';\nimport AdminSection from '../shared/AdminSection';\nimport useAdminPartStyles from '../shared/useAdminPartStyles';\n\n/**\n * The changes {@link BaseOrganizationUnitDetails} submits.\n */\nexport interface OrganizationUnitUpdateSubmission {\n  description?: string;\n  handle: string;\n  name: string;\n}\n\n/**\n * What an organization unit holds, as {@link BaseOrganizationUnitDetails} shows it: the first page of each list\n * and, when known, how many there are in all.\n */\nexport interface OrganizationUnitContents {\n  childUnits: OrganizationUnitBasic[];\n  groups: OrganizationUnitGroup[];\n  roles: OrganizationUnitRole[];\n  /**\n   * How many of each the unit holds in all, when the server said.\n   */\n  totals?: Partial<Record<'childUnits' | 'groups' | 'roles' | 'users', number>>;\n  users: OrganizationUnitUser[];\n}\n\n/**\n * What {@link BaseOrganizationUnitDetails} hands its `children` render function, so the unit can be shown with any\n * UI.\n */\nexport interface BaseOrganizationUnitDetailsRenderProps {\n  /**\n   * The unit's child units, users, groups and roles. Read only.\n   */\n  contents: OrganizationUnitContents;\n  /**\n   * A translated message when the contents could not be loaded, or `null`.\n   */\n  contentsError: string | null;\n  error: string | null;\n  isDeleting: boolean;\n  isLoading: boolean;\n  isLoadingContents: boolean;\n  isUpdating: boolean;\n  /**\n   * Deletes the unit. Undefined when deletion is not allowed.\n   */\n  onDelete?: () => void;\n  /**\n   * Chooses a child unit. Undefined when child units are not selectable.\n   */\n  onSelectChild?: (organizationUnit: OrganizationUnitBasic) => void;\n  /**\n   * Saves a new name, handle and description. Undefined when editing is not allowed.\n   */\n  onUpdate?: (changes: OrganizationUnitUpdateSubmission) => void;\n  organizationUnit?: OrganizationUnit;\n  /**\n   * The parent unit, when it is known.\n   */\n  parent?: OrganizationUnit | OrganizationUnitBasic;\n}\n\nexport interface BaseOrganizationUnitDetailsProps {\n  /**\n   * Controls rendered next to the unit's name.\n   */\n  actions?: ReactNode;\n  /**\n   * Renders custom UI in place of the default view. Receives the unit, what it holds, the loading and\n   * error state, and the update and delete handlers.\n   */\n  children?: (props: BaseOrganizationUnitDetailsRenderProps) => ReactNode;\n  className?: string;\n  contents?: Partial<OrganizationUnitContents>;\n  contentsError?: string | null;\n  error?: string | null;\n  isDeleting?: boolean;\n  isLoading?: boolean;\n  isLoadingContents?: boolean;\n  isUpdating?: boolean;\n  /**\n   * Deletes the unit. The delete action is hidden when omitted.\n   */\n  onDelete?: () => void;\n  /**\n   * Called when a child unit is chosen. Child units are selectable only when set.\n   */\n  onSelectChild?: (organizationUnit: OrganizationUnitBasic) => void;\n  /**\n   * Saves a new name, handle and description. The edit action is hidden when omitted.\n   */\n  onUpdate?: (changes: OrganizationUnitUpdateSubmission) => void;\n  organizationUnit?: OrganizationUnit;\n  /**\n   * The parent unit, shown by name when given.\n   */\n  parent?: OrganizationUnit | OrganizationUnitBasic;\n  preferences?: Preferences;\n}\n\n/**\n * Shows an organization unit's name, handle, description and parent, with its child units and the\n * users, groups and roles in it, and lets the caller edit and delete it. Holds no data of its own:\n * pass the unit and what it holds, and handle the changes.\n */\nconst BaseOrganizationUnitDetails: FC<BaseOrganizationUnitDetailsProps> = ({\n  actions,\n  children,\n  className,\n  contents,\n  contentsError = null,\n  error = null,\n  isDeleting = false,\n  isLoading = false,\n  isLoadingContents = false,\n  isUpdating = false,\n  onDelete,\n  onSelectChild,\n  onUpdate,\n  organizationUnit,\n  parent,\n  preferences,\n}: BaseOrganizationUnitDetailsProps): ReactElement => {\n  const {t} = useTranslation(preferences?.i18n);\n  const styles: Record<string, string> = useAdminPartStyles();\n  const [draft, setDraft] = useState<{description: string; handle: string; name: string} | null>(null);\n\n  const resolvedContents: OrganizationUnitContents = {\n    childUnits: contents?.childUnits ?? [],\n    groups: contents?.groups ?? [],\n    roles: contents?.roles ?? [],\n    totals: contents?.totals ?? {},\n    users: contents?.users ?? [],\n  };\n\n  if (children) {\n    return (\n      <div className={className}>\n        {children({\n          contents: resolvedContents,\n          contentsError,\n          error,\n          isDeleting,\n          isLoading,\n          isLoadingContents,\n          isUpdating,\n          onDelete: organizationUnit ? onDelete : undefined,\n          onSelectChild,\n          onUpdate: organizationUnit ? onUpdate : undefined,\n          organizationUnit,\n          parent,\n        })}\n      </div>\n    );\n  }\n\n  if (isLoading && !organizationUnit) {\n    return (\n      <AdminSection block=\"organization-unit-details\" className={className} preferences={preferences}>\n        <span className={styles['muted']} role=\"status\">\n          <Spinner size=\"small\" /> {t('admin.common.loading')}\n        </span>\n      </AdminSection>\n    );\n  }\n\n  if (!organizationUnit) {\n    return (\n      <AdminSection block=\"organization-unit-details\" className={className} preferences={preferences}>\n        <Alert variant=\"error\" role=\"alert\">\n          {error ?? t('admin.common.errors.not_found')}\n        </Alert>\n      </AdminSection>\n    );\n  }\n\n  const notSet: string = t('admin.organization_units.details.not_set');\n  const isDraftValid = Boolean(draft?.name.trim() && draft?.handle.trim());\n\n  const handleSave = (event: FormEvent<HTMLFormElement>): void => {\n    event.preventDefault();\n\n    if (draft && isDraftValid) {\n      onUpdate?.({\n        description: draft.description.trim() || undefined,\n        handle: draft.handle.trim(),\n        name: draft.name.trim(),\n      });\n      setDraft(null);\n    }\n  };\n\n  const titled = (key: string, items: unknown[], total?: number): string => `${t(key)} (${total ?? items.length})`;\n\n  const renderContents = (): ReactNode => {\n    if (isLoadingContents) {\n      return (\n        <span className={styles['muted']} role=\"status\">\n          <Spinner size=\"small\" /> {t('admin.common.loading')}\n        </span>\n      );\n    }\n\n    if (contentsError) {\n      return (\n        <Alert variant=\"error\" role=\"alert\">\n          {contentsError}\n        </Alert>\n      );\n    }\n\n    const {childUnits, groups, roles, totals, users} = resolvedContents;\n\n    return (\n      <>\n        <Panel title={titled('admin.organization_units.details.children', childUnits, totals?.childUnits)}>\n          {onSelectChild && childUnits.length > 0 ? (\n            <ul className={styles['chipList']} aria-label={t('admin.organization_units.details.children')}>\n              {childUnits.map((unit: OrganizationUnitBasic) => (\n                <li key={unit.id}>\n                  <Button variant=\"outline\" size=\"small\" onClick={(): void => onSelectChild(unit)}>\n                    {unit.name}\n                  </Button>\n                </li>\n              ))}\n            </ul>\n          ) : (\n            <ChipList\n              label={t('admin.organization_units.details.children')}\n              emptyText={t('admin.organization_units.details.children_empty')}\n              items={childUnits.map((unit: OrganizationUnitBasic) => ({id: unit.id, label: unit.name}))}\n            />\n          )}\n        </Panel>\n        <Panel title={titled('admin.organization_units.details.users', users, totals?.users)}>\n          <ChipList\n            label={t('admin.organization_units.details.users')}\n            emptyText={t('admin.organization_units.details.users_empty')}\n            items={users.map((user: OrganizationUnitUser) => ({id: user.id, label: user.display ?? user.id}))}\n          />\n        </Panel>\n        <Panel title={titled('admin.organization_units.details.groups', groups, totals?.groups)}>\n          <ChipList\n            label={t('admin.organization_units.details.groups')}\n            emptyText={t('admin.organization_units.details.groups_empty')}\n            items={groups.map((group: OrganizationUnitGroup) => ({id: group.id, label: group.name}))}\n          />\n        </Panel>\n        <Panel title={titled('admin.organization_units.details.roles', roles, totals?.roles)}>\n          <ChipList\n            label={t('admin.organization_units.details.roles')}\n            emptyText={t('admin.organization_units.details.roles_empty')}\n            items={roles.map((role: OrganizationUnitRole) => ({id: role.id, label: role.name}))}\n          />\n        </Panel>\n      </>\n    );\n  };\n\n  let parentLabel: string = t('admin.organization_units.fields.parent_none');\n\n  if (organizationUnit.parent) {\n    parentLabel = parent?.name ?? organizationUnit.parent;\n  }\n\n  return (\n    <AdminSection\n      block=\"organization-unit-details\"\n      className={className}\n      title={organizationUnit.name}\n      description={organizationUnit.description}\n      preferences={preferences}\n      actions={\n        <>\n          {actions}\n          {onDelete && (\n            <ConfirmButton\n              confirmText={t('admin.organization_units.details.delete.confirm', {name: organizationUnit.name})}\n              isLoading={isDeleting}\n              onConfirm={onDelete}\n            >\n              {t('admin.organization_units.details.delete.action')}\n            </ConfirmButton>\n          )}\n        </>\n      }\n    >\n      {error && (\n        <Alert variant=\"error\" role=\"alert\">\n          {error}\n        </Alert>\n      )}\n      {draft ? (\n        <Panel title={t('admin.organization_units.details.edit.action')}>\n          <form\n            className={styles['row']}\n            style={{alignItems: 'stretch', flexDirection: 'column'}}\n            onSubmit={handleSave}\n            noValidate\n          >\n            <TextField\n              name=\"name\"\n              label={t('admin.organization_units.fields.name')}\n              required\n              value={draft.name}\n              onChange={(event: ChangeEvent<HTMLInputElement>): void => setDraft({...draft, name: event.target.value})}\n            />\n            <TextField\n              name=\"handle\"\n              label={t('admin.organization_units.fields.handle')}\n              required\n              value={draft.handle}\n              onChange={(event: ChangeEvent<HTMLInputElement>): void =>\n                setDraft({...draft, handle: event.target.value})\n              }\n            />\n            <TextField\n              name=\"description\"\n              label={t('admin.organization_units.fields.description')}\n              value={draft.description}\n              onChange={(event: ChangeEvent<HTMLInputElement>): void =>\n                setDraft({...draft, description: event.target.value})\n              }\n            />\n            <div className={styles['row']} style={{justifyContent: 'flex-end'}}>\n              <Button type=\"button\" variant=\"text\" disabled={isUpdating} onClick={(): void => setDraft(null)}>\n                {t('admin.common.actions.cancel')}\n              </Button>\n              <Button type=\"submit\" loading={isUpdating} disabled={isUpdating || !isDraftValid}>\n                {t('admin.organization_units.details.edit.save')}\n              </Button>\n            </div>\n          </form>\n        </Panel>\n      ) : (\n        <Panel\n          title={t('admin.organization_units.details.overview')}\n          actions={\n            onUpdate ? (\n              <Button\n                variant=\"outline\"\n                size=\"small\"\n                onClick={(): void =>\n                  setDraft({\n                    description: organizationUnit.description ?? '',\n                    handle: organizationUnit.handle,\n                    name: organizationUnit.name,\n                  })\n                }\n              >\n                {t('admin.organization_units.details.edit.action')}\n              </Button>\n            ) : undefined\n          }\n        >\n          <DetailList\n            items={[\n              {label: t('admin.organization_units.fields.name'), value: organizationUnit.name},\n              {label: t('admin.organization_units.fields.handle'), value: organizationUnit.handle},\n              {\n                label: t('admin.organization_units.fields.description'),\n                value: organizationUnit.description?.length ? organizationUnit.description : notSet,\n              },\n              {label: t('admin.organization_units.fields.parent'), value: parentLabel},\n            ]}\n          />\n        </Panel>\n      )}\n      {renderContents()}\n    </AdminSection>\n  );\n};\n\nexport default BaseOrganizationUnitDetails;\n"],"mappings":"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"}