@authowl/react 0.22.0 → 0.24.0

package/dist/OrganizationProfileContent-HJT33DMJ.js

@@ -0,0 +1,451 @@
+"use client";
+import {
+  organizationRoleLabel
+} from "./chunk-7WIBXVGK.js";
+import {
+  useOrganizationRoles
+} from "./chunk-ZYCPC5DH.js";
+import {
+  canManageOrganization,
+  hasOrganizationRole,
+  organizationRoles,
+  organizationSlugFromName,
+  useSubmitAction
+} from "./chunk-SAVEQ6RC.js";
+import {
+  Bidi,
+  Busy,
+  FormError,
+  useAuthClient,
+  usePublicConfig,
+  useServerError,
+  useSession,
+  useT,
+  useUser
+} from "./chunk-TOVDZ2ZE.js";
+
+// src/components/OrganizationProfileContent.tsx
+import * as React4 from "react";
+
+// src/components/organization/DangerSection.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DangerSection({
+  organization,
+  membership,
+  onDeleted,
+  onLeft
+}) {
+  const t = useT();
+  const api = useAuthClient().organization;
+  const session = useSession();
+  const { pending, error, run } = useSubmitAction();
+  const [confirmation, setConfirmation] = React.useState("");
+  const isOwner = hasOrganizationRole(membership, "owner");
+  const confirmed = confirmation.trim().toLowerCase() === organization.slug.toLowerCase();
+  const leave = () => {
+    if (!window.confirm(t("organization.profile.danger.leaveConfirm", { name: organization.name }))) return;
+    void run(
+      () => api.leave({ organizationId: organization.id }),
+      {
+        failure: t("organization.profile.danger.leaveError"),
+        onSuccess: async () => {
+          await session.refetch({ query: { disableCookieCache: true } });
+          onLeft?.(organization);
+        }
+      }
+    );
+  };
+  const remove = (event) => {
+    event.preventDefault();
+    if (!confirmed) return;
+    void run(
+      () => api.delete({ organizationId: organization.id }),
+      {
+        failure: t("organization.profile.danger.deleteError"),
+        onSuccess: async () => {
+          await session.refetch({ query: { disableCookieCache: true } });
+          onDeleted?.(organization);
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("section", { className: "ba-organization-section ba-organization-danger", children: [
+    /* @__PURE__ */ jsxs("header", { className: "ba-organization-section-header", children: [
+      /* @__PURE__ */ jsx("h3", { className: "ba-title", children: t("organization.profile.danger.title") }),
+      /* @__PURE__ */ jsx("p", { className: "ba-muted", children: t("organization.profile.danger.description") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ba-organization-danger-action", children: [
+      /* @__PURE__ */ jsx("strong", { children: t("organization.profile.danger.leaveTitle") }),
+      /* @__PURE__ */ jsx("p", { className: "ba-muted", children: isOwner ? t("organization.profile.danger.ownerLeaveHint") : t("organization.profile.danger.leaveHint") }),
+      /* @__PURE__ */ jsx("button", { className: "ba-button ba-button-secondary", type: "button", disabled: pending, onClick: leave, children: t("organization.profile.danger.leave") })
+    ] }),
+    isOwner && /* @__PURE__ */ jsxs("form", { method: "post", className: "ba-organization-danger-action ba-organization-delete", onSubmit: remove, children: [
+      /* @__PURE__ */ jsx("strong", { children: t("organization.profile.danger.deleteTitle") }),
+      /* @__PURE__ */ jsx("p", { className: "ba-muted", children: t("organization.profile.danger.deleteHint") }),
+      /* @__PURE__ */ jsxs("label", { className: "ba-label", children: [
+        t("organization.profile.danger.deleteConfirm"),
+        " ",
+        /* @__PURE__ */ jsx(Bidi, { children: organization.slug }),
+        /* @__PURE__ */ jsx("input", { className: "ba-input", dir: "ltr", value: confirmation, onChange: (event) => setConfirmation(event.target.value), autoComplete: "off", required: true })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "ba-button ba-danger-button",
+          type: "submit",
+          disabled: pending || !confirmed,
+          "aria-busy": pending || void 0,
+          children: /* @__PURE__ */ jsx(Busy, { busy: pending, label: t("common.working"), children: t("organization.profile.danger.delete") })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(FormError, { children: error })
+  ] });
+}
+
+// src/components/organization/GeneralSection.tsx
+import * as React2 from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function GeneralSection({
+  organization,
+  canManage,
+  onChanged
+}) {
+  const t = useT();
+  const api = useAuthClient().organization;
+  const { pending, error, run } = useSubmitAction();
+  const [name, setName] = React2.useState(organization.name);
+  const [slug, setSlug] = React2.useState(organization.slug);
+  const [logo, setLogo] = React2.useState(organization.logo ?? "");
+  React2.useEffect(() => {
+    setName(organization.name);
+    setSlug(organization.slug);
+    setLogo(organization.logo ?? "");
+  }, [organization.id, organization.logo, organization.name, organization.slug]);
+  if (!canManage) {
+    return /* @__PURE__ */ jsxs2("section", { className: "ba-organization-section", children: [
+      /* @__PURE__ */ jsx2("p", { className: "ba-muted", children: t("organization.profile.general.readOnly") }),
+      /* @__PURE__ */ jsxs2("dl", { className: "ba-organization-facts", children: [
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2("dt", { children: t("organization.create.name") }),
+          /* @__PURE__ */ jsx2("dd", { children: organization.name })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2("dt", { children: t("organization.create.slug") }),
+          /* @__PURE__ */ jsx2("dd", { children: /* @__PURE__ */ jsx2(Bidi, { children: organization.slug }) })
+        ] })
+      ] })
+    ] });
+  }
+  const submit = (event) => {
+    event.preventDefault();
+    void run(
+      () => api.update({
+        organizationId: organization.id,
+        data: { name: name.trim(), slug: slug.trim(), logo: logo.trim() || null }
+      }),
+      {
+        failure: t("organization.profile.general.error"),
+        onSuccess: onChanged
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs2("section", { className: "ba-organization-section", children: [
+    /* @__PURE__ */ jsxs2("header", { className: "ba-organization-section-header", children: [
+      /* @__PURE__ */ jsx2("h3", { className: "ba-title", children: t("organization.profile.general.title") }),
+      /* @__PURE__ */ jsx2("p", { className: "ba-muted", children: t("organization.profile.general.description") })
+    ] }),
+    /* @__PURE__ */ jsxs2("form", { method: "post", className: "ba-fields", onSubmit: submit, children: [
+      /* @__PURE__ */ jsxs2("label", { className: "ba-label", children: [
+        t("organization.create.name"),
+        /* @__PURE__ */ jsx2("input", { className: "ba-input", value: name, onChange: (event) => setName(event.target.value), required: true })
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "ba-label", children: [
+        t("organization.create.slug"),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            className: "ba-input",
+            dir: "ltr",
+            value: slug,
+            onChange: (event) => setSlug(organizationSlugFromName(event.target.value)),
+            pattern: "[a-z0-9]+(?:-[a-z0-9]+)*",
+            required: true
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("label", { className: "ba-label", children: [
+        t("organization.create.logo"),
+        /* @__PURE__ */ jsx2("input", { className: "ba-input", type: "url", dir: "ltr", value: logo, onChange: (event) => setLogo(event.target.value), placeholder: "https://" })
+      ] }),
+      /* @__PURE__ */ jsx2(FormError, { children: error }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          className: "ba-button ba-profile-submit",
+          type: "submit",
+          disabled: pending || !name.trim() || !slug.trim(),
+          "aria-busy": pending || void 0,
+          children: /* @__PURE__ */ jsx2(Busy, { busy: pending, label: t("common.working"), children: t("organization.profile.general.save") })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/organization/InvitationsSection.tsx
+import * as React3 from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function InvitationsSection({
+  organization,
+  onChanged
+}) {
+  const t = useT();
+  const api = useAuthClient().organization;
+  const { pending, error, run } = useSubmitAction();
+  const { roles } = useOrganizationRoles(organization.id);
+  const [email, setEmail] = React3.useState("");
+  const [role, setRole] = React3.useState("member");
+  const invitations = organization.invitations.filter((invitation) => invitation.status === "pending");
+  const invite = (event) => {
+    event.preventDefault();
+    void run(
+      () => api.inviteMember({ organizationId: organization.id, email: email.trim(), role }),
+      {
+        failure: t("organization.profile.invitations.inviteError"),
+        onSuccess: async () => {
+          setEmail("");
+          await onChanged();
+        }
+      }
+    );
+  };
+  const cancel = (invitation) => {
+    if (!window.confirm(t("organization.profile.invitations.cancelConfirm", { email: invitation.email }))) return;
+    void run(
+      () => api.cancelInvitation({ invitationId: invitation.id }),
+      { failure: t("organization.profile.invitations.cancelError"), onSuccess: onChanged }
+    );
+  };
+  return /* @__PURE__ */ jsxs3("section", { className: "ba-organization-section", children: [
+    /* @__PURE__ */ jsxs3("header", { className: "ba-organization-section-header", children: [
+      /* @__PURE__ */ jsx3("h3", { className: "ba-title", children: t("organization.profile.invitations.title") }),
+      /* @__PURE__ */ jsx3("p", { className: "ba-muted", children: t("organization.profile.invitations.description") })
+    ] }),
+    /* @__PURE__ */ jsxs3("form", { method: "post", className: "ba-organization-invite-form", onSubmit: invite, children: [
+      /* @__PURE__ */ jsxs3("label", { className: "ba-label", children: [
+        t("organization.profile.invitations.email"),
+        /* @__PURE__ */ jsx3("input", { className: "ba-input", type: "email", dir: "ltr", value: email, onChange: (event) => setEmail(event.target.value), required: true })
+      ] }),
+      /* @__PURE__ */ jsxs3("label", { className: "ba-label", children: [
+        t("organization.profile.members.role"),
+        /* @__PURE__ */ jsx3("select", { className: "ba-input", value: role, onChange: (event) => setRole(event.target.value), children: roles.map((option) => /* @__PURE__ */ jsx3("option", { value: option, children: organizationRoleLabel(option, t) }, option)) })
+      ] }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          className: "ba-button",
+          type: "submit",
+          disabled: pending || !email.trim(),
+          "aria-busy": pending || void 0,
+          children: /* @__PURE__ */ jsx3(Busy, { busy: pending, label: t("common.working"), children: t("organization.profile.invitations.invite") })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx3(FormError, { children: error }),
+    invitations.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "ba-muted", children: t("organization.profile.invitations.empty") }) : /* @__PURE__ */ jsx3("ul", { className: "ba-organization-list", children: invitations.map((invitation) => /* @__PURE__ */ jsxs3("li", { className: "ba-organization-invitation", children: [
+      /* @__PURE__ */ jsxs3("span", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: /* @__PURE__ */ jsx3(Bidi, { children: invitation.email }) }),
+        /* @__PURE__ */ jsx3("small", { children: organizationRoleLabel(invitation.role, t) })
+      ] }),
+      /* @__PURE__ */ jsx3("button", { className: "ba-link-button ba-danger", type: "button", disabled: pending, onClick: () => cancel(invitation), children: t("organization.profile.invitations.cancel") })
+    ] }, invitation.id)) })
+  ] });
+}
+
+// src/components/organization/MembersSection.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function MembersSection({
+  organization,
+  userId,
+  canManage,
+  onChanged
+}) {
+  const t = useT();
+  const api = useAuthClient().organization;
+  const { pending, error, run } = useSubmitAction();
+  const { roles } = useOrganizationRoles(organization.id);
+  const updateRole = (member, role) => {
+    const current = organizationRoles(member.role)[0] ?? member.role;
+    if (current === role) return;
+    if (!window.confirm(t("organization.profile.members.roleConfirm", { name: member.user.name, role: organizationRoleLabel(role, t) }))) return;
+    void run(
+      () => api.updateMemberRole({ organizationId: organization.id, memberId: member.id, role }),
+      { failure: t("organization.profile.members.roleError"), onSuccess: onChanged }
+    );
+  };
+  const remove = (member) => {
+    if (!window.confirm(t("organization.profile.members.removeConfirm", { name: member.user.name }))) return;
+    void run(
+      () => api.removeMember({ organizationId: organization.id, memberIdOrEmail: member.id }),
+      { failure: t("organization.profile.members.removeError"), onSuccess: onChanged }
+    );
+  };
+  return /* @__PURE__ */ jsxs4("section", { className: "ba-organization-section", children: [
+    /* @__PURE__ */ jsxs4("header", { className: "ba-organization-section-header", children: [
+      /* @__PURE__ */ jsx4("h3", { className: "ba-title", children: t("organization.profile.members.title") }),
+      /* @__PURE__ */ jsx4("p", { className: "ba-muted", children: t("organization.profile.members.description") })
+    ] }),
+    /* @__PURE__ */ jsx4(FormError, { children: error }),
+    /* @__PURE__ */ jsx4("ul", { className: "ba-organization-list", children: organization.members.map((member) => {
+      const primaryRole = organizationRoles(member.role)[0] ?? member.role;
+      const isCurrent = member.userId === userId;
+      return /* @__PURE__ */ jsxs4("li", { className: "ba-organization-member", children: [
+        /* @__PURE__ */ jsx4("span", { className: "ba-organization-avatar", "aria-hidden": "true", children: member.user.name.trim().charAt(0).toUpperCase() || "?" }),
+        /* @__PURE__ */ jsxs4("span", { className: "ba-organization-member-copy", children: [
+          /* @__PURE__ */ jsxs4("strong", { children: [
+            member.user.name,
+            isCurrent ? ` ${t("organization.profile.members.you")}` : ""
+          ] }),
+          /* @__PURE__ */ jsx4("small", { children: /* @__PURE__ */ jsx4(Bidi, { children: member.user.email }) })
+        ] }),
+        canManage && !isCurrent ? /* @__PURE__ */ jsxs4("span", { className: "ba-organization-member-actions", children: [
+          /* @__PURE__ */ jsx4("label", { className: "ba-sr-only", htmlFor: `organization-role-${member.id}`, children: t("organization.profile.members.role") }),
+          /* @__PURE__ */ jsx4(
+            "select",
+            {
+              id: `organization-role-${member.id}`,
+              className: "ba-input ba-organization-role",
+              value: primaryRole,
+              disabled: pending,
+              onChange: (event) => updateRole(member, event.target.value),
+              children: (roles.includes(primaryRole) ? roles : [primaryRole, ...roles]).map((role) => /* @__PURE__ */ jsx4("option", { value: role, children: organizationRoleLabel(role, t) }, role))
+            }
+          ),
+          /* @__PURE__ */ jsx4("button", { className: "ba-link-button ba-danger", type: "button", disabled: pending, onClick: () => remove(member), children: t("organization.profile.members.remove") })
+        ] }) : /* @__PURE__ */ jsx4("span", { className: "ba-organization-role-label", children: /* @__PURE__ */ jsx4(Bidi, { children: organizationRoleLabel(member.role, t) }) })
+      ] }, member.id);
+    }) })
+  ] });
+}
+
+// src/components/OrganizationProfileContent.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var SECTION_KEYS = {
+  general: "organization.profile.nav.general",
+  members: "organization.profile.nav.members",
+  teams: "organization.profile.nav.teams",
+  invitations: "organization.profile.nav.invitations",
+  danger: "organization.profile.nav.danger"
+};
+var TeamsSection = React4.lazy(() => import("./TeamsSection-VJTKS4KP.js"));
+function OrganizationProfileContent({ organizationId, defaultSection = "general", onDeleted, onLeft } = {}) {
+  const t = useT();
+  const toServerError = useServerError();
+  const { config, isLoading: configLoading } = usePublicConfig();
+  const { user, isLoaded, isSignedIn } = useUser();
+  const session = useSession();
+  const api = useAuthClient().organization;
+  const apiRef = React4.useRef(api);
+  apiRef.current = api;
+  const activeOrganizationId = session.data?.session.activeOrganizationId ?? null;
+  const requestedId = organizationId ?? activeOrganizationId;
+  const enabled = config?.organizations === true && isSignedIn;
+  const [organization, setOrganization] = React4.useState(null);
+  const [error, setError] = React4.useState(null);
+  const [wasRemoved, setWasRemoved] = React4.useState(false);
+  const [section, setSection] = React4.useState(defaultSection);
+  const requestRef = React4.useRef(0);
+  const load = React4.useCallback(async () => {
+    const token = ++requestRef.current;
+    if (!enabled || !requestedId) {
+      setOrganization(null);
+      setError(null);
+      return;
+    }
+    try {
+      const result = await apiRef.current.get({ organizationId: requestedId });
+      if (token !== requestRef.current) return;
+      if (result.error) {
+        setError(toServerError(result.error, t("organization.profile.loadError")));
+        return;
+      }
+      setError(null);
+      setOrganization(result.data ?? null);
+    } catch {
+      if (token === requestRef.current) setError(t("organization.profile.loadError"));
+    }
+  }, [enabled, requestedId, t, toServerError]);
+  React4.useEffect(() => {
+    setOrganization(null);
+    setError(null);
+    setWasRemoved(false);
+    void load();
+    return () => {
+      requestRef.current += 1;
+    };
+  }, [load]);
+  if (configLoading || !isLoaded) return /* @__PURE__ */ jsx5("div", { className: "ba-skeleton", "aria-label": t("organization.loading") });
+  if (config?.organizations !== true) return null;
+  if (!isSignedIn || !user) return /* @__PURE__ */ jsx5("p", { className: "ba-muted", children: t("organization.signedOut") });
+  if (wasRemoved) return /* @__PURE__ */ jsx5("p", { className: "ba-muted", children: t("organization.profile.noActive") });
+  if (!requestedId) return /* @__PURE__ */ jsx5("p", { className: "ba-muted", children: t("organization.profile.noActive") });
+  if (error) {
+    return /* @__PURE__ */ jsxs5("div", { className: "ba-inline-error", children: [
+      /* @__PURE__ */ jsx5(FormError, { children: error }),
+      /* @__PURE__ */ jsx5("button", { className: "ba-link-button", type: "button", onClick: () => void load(), children: t("organization.retry") })
+    ] });
+  }
+  if (!organization) return /* @__PURE__ */ jsx5("div", { className: "ba-skeleton", "aria-label": t("organization.loading") });
+  const membership = organization.members.find((member) => member.userId === user.id);
+  if (!membership) return /* @__PURE__ */ jsx5("p", { className: "ba-muted", children: t("organization.profile.notMember") });
+  const canManage = canManageOrganization(membership);
+  const visibleSections = canManage ? ["general", "members", "teams", "invitations", "danger"] : ["general", "members", "teams", "danger"];
+  const activeSection = visibleSections.includes(section) ? section : "general";
+  const handleRemoval = (callback) => (removedOrganization) => {
+    setWasRemoved(true);
+    setOrganization(null);
+    callback?.(removedOrganization);
+  };
+  return /* @__PURE__ */ jsxs5("article", { className: "ba-organization-profile", children: [
+    /* @__PURE__ */ jsxs5("header", { className: "ba-organization-profile-heading", children: [
+      /* @__PURE__ */ jsx5("span", { className: "ba-organization-avatar ba-organization-avatar-large", "aria-hidden": "true", children: organization.name.trim().charAt(0).toUpperCase() || "?" }),
+      /* @__PURE__ */ jsxs5("span", { children: [
+        /* @__PURE__ */ jsx5("h2", { className: "ba-title", children: organization.name }),
+        /* @__PURE__ */ jsx5("p", { className: "ba-muted", children: organization.slug })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "ba-organization-profile-layout", children: [
+      /* @__PURE__ */ jsx5("nav", { className: "ba-organization-profile-nav", "aria-label": t("organization.profile.nav.label"), children: visibleSections.map((item) => /* @__PURE__ */ jsx5(
+        "button",
+        {
+          className: "ba-profile-nav-item",
+          type: "button",
+          "aria-current": activeSection === item ? "page" : void 0,
+          onClick: () => setSection(item),
+          children: t(SECTION_KEYS[item])
+        },
+        item
+      )) }),
+      /* @__PURE__ */ jsxs5("div", { className: "ba-organization-profile-content", children: [
+        activeSection === "general" && /* @__PURE__ */ jsx5(GeneralSection, { organization, canManage, onChanged: load }),
+        activeSection === "members" && /* @__PURE__ */ jsx5(MembersSection, { organization, userId: user.id, canManage, onChanged: load }),
+        activeSection === "teams" && /* @__PURE__ */ jsx5(React4.Suspense, { fallback: null, children: /* @__PURE__ */ jsx5(TeamsSection, { organization, membership }) }),
+        activeSection === "invitations" && /* @__PURE__ */ jsx5(InvitationsSection, { organization, onChanged: load }),
+        activeSection === "danger" && /* @__PURE__ */ jsx5(
+          DangerSection,
+          {
+            organization,
+            membership,
+            onDeleted: handleRemoval(onDeleted),
+            onLeft: handleRemoval(onLeft)
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  OrganizationProfileContent
+};

package/dist/OrganizationSwitcherContent-2TJ76HZM.js

@@ -0,0 +1,176 @@
+"use client";
+import {
+  OrganizationModal,
+  useOrganizationsResource
+} from "./chunk-IDMSHQ6V.js";
+import {
+  CreateOrganization,
+  OrganizationProfile
+} from "./chunk-2HNQYORD.js";
+import {
+  useSubmitAction
+} from "./chunk-SAVEQ6RC.js";
+import {
+  FormError,
+  useAuthClient,
+  usePublicConfig,
+  useSession,
+  useT,
+  useUser
+} from "./chunk-TOVDZ2ZE.js";
+
+// src/components/OrganizationSwitcherContent.tsx
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function OrganizationSwitcherContent({ showPersonalWorkspace = true, onOrganizationChange } = {}) {
+  const t = useT();
+  const { config, isLoading: configLoading } = usePublicConfig();
+  const { isLoaded, isSignedIn } = useUser();
+  const session = useSession();
+  const api = useAuthClient().organization;
+  const enabled = config?.organizations === true && isSignedIn;
+  const { organizations, isLoading, error: loadError, refresh } = useOrganizationsResource(enabled);
+  const { pending, error, run } = useSubmitAction();
+  const [open, setOpen] = React.useState(false);
+  const [dialog, setDialog] = React.useState(null);
+  const rootRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+  const menuId = React.useId();
+  const activeId = session.data?.session.activeOrganizationId ?? null;
+  const active = organizations?.find((organization) => organization.id === activeId) ?? null;
+  React.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  if (configLoading || !isLoaded) return /* @__PURE__ */ jsx("div", { className: "ba-skeleton ba-organization-switcher-skeleton", "aria-label": t("organization.loading") });
+  if (config?.organizations !== true) return null;
+  if (!isSignedIn) return /* @__PURE__ */ jsx("p", { className: "ba-muted", children: t("organization.signedOut") });
+  const select = (organization) => {
+    void run(
+      () => api.setActive({ organizationId: organization?.id ?? null }),
+      {
+        failure: t("organization.switcher.error"),
+        onSuccess: async () => {
+          await session.refetch({ query: { disableCookieCache: true } });
+          setOpen(false);
+          onOrganizationChange?.(organization);
+        }
+      }
+    );
+  };
+  const afterProfileRemoval = async () => {
+    await refresh();
+    await session.refetch({ query: { disableCookieCache: true } });
+    setDialog(null);
+  };
+  const focusMenuItem = (position) => {
+    window.requestAnimationFrame(() => {
+      const items = menuRef.current?.querySelectorAll('[role="menuitem"]:not([disabled])');
+      if (!items?.length) return;
+      items[position === "first" ? 0 : items.length - 1]?.focus();
+    });
+  };
+  const onMenuKeyDown = (event) => {
+    const items = [...menuRef.current?.querySelectorAll('[role="menuitem"]:not([disabled])') ?? []];
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(false);
+      triggerRef.current?.focus();
+      return;
+    }
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key) || items.length === 0) return;
+    event.preventDefault();
+    const current = items.indexOf(document.activeElement);
+    if (event.key === "Home") items[0]?.focus();
+    else if (event.key === "End") items.at(-1)?.focus();
+    else if (event.key === "ArrowDown") items[(current + 1 + items.length) % items.length]?.focus();
+    else items[(current - 1 + items.length) % items.length]?.focus();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { ref: rootRef, className: "ba-organization-switcher", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: triggerRef,
+          className: "ba-organization-switcher-trigger",
+          type: "button",
+          "aria-haspopup": "menu",
+          "aria-expanded": open,
+          "aria-controls": open ? menuId : void 0,
+          onClick: () => setOpen((value) => !value),
+          onKeyDown: (event) => {
+            if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+            event.preventDefault();
+            setOpen(true);
+            focusMenuItem(event.key === "ArrowDown" ? "first" : "last");
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "ba-organization-avatar", "aria-hidden": "true", children: active?.name.trim().charAt(0).toUpperCase() || "P" }),
+            /* @__PURE__ */ jsx("span", { children: active?.name ?? t("organization.personal") }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2304" })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsxs("div", { ref: menuRef, id: menuId, className: "ba-organization-menu", role: "menu", "aria-label": t("organization.switcher.label"), onKeyDown: onMenuKeyDown, children: [
+        isLoading ? /* @__PURE__ */ jsx("div", { className: "ba-skeleton" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          showPersonalWorkspace && /* @__PURE__ */ jsxs("button", { className: "ba-organization-menu-item", type: "button", role: "menuitem", "aria-current": activeId === null ? "true" : void 0, disabled: pending, onClick: () => select(null), children: [
+            /* @__PURE__ */ jsx("span", { className: "ba-organization-avatar", "aria-hidden": "true", children: "P" }),
+            /* @__PURE__ */ jsx("span", { children: t("organization.personal") })
+          ] }),
+          organizations?.map((organization) => /* @__PURE__ */ jsxs("button", { className: "ba-organization-menu-item", type: "button", role: "menuitem", "aria-current": activeId === organization.id ? "true" : void 0, disabled: pending, onClick: () => select(organization), children: [
+            /* @__PURE__ */ jsx("span", { className: "ba-organization-avatar", "aria-hidden": "true", children: organization.name.trim().charAt(0).toUpperCase() || "?" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              organization.name,
+              /* @__PURE__ */ jsx("small", { children: organization.slug })
+            ] })
+          ] }, organization.id))
+        ] }),
+        (loadError || error) && /* @__PURE__ */ jsxs("div", { className: "ba-inline-error", children: [
+          /* @__PURE__ */ jsx(FormError, { children: loadError ?? error }),
+          loadError && /* @__PURE__ */ jsx("button", { className: "ba-link-button", type: "button", onClick: () => void refresh(), children: t("organization.retry") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ba-organization-menu-actions", children: [
+          active && /* @__PURE__ */ jsx("button", { className: "ba-menu-item", type: "button", role: "menuitem", onClick: () => {
+            setOpen(false);
+            setDialog("profile");
+          }, children: t("organization.switcher.manage") }),
+          /* @__PURE__ */ jsx("button", { className: "ba-menu-item", type: "button", role: "menuitem", onClick: () => {
+            setOpen(false);
+            setDialog("create");
+          }, children: t("organization.switcher.create") })
+        ] })
+      ] })
+    ] }),
+    dialog === "create" && /* @__PURE__ */ jsx(OrganizationModal, { title: t("organization.create.title"), returnFocusRef: triggerRef, onClose: () => setDialog(null), children: /* @__PURE__ */ jsx(
+      CreateOrganization,
+      {
+        title: null,
+        onCreated: (organization) => {
+          void (async () => {
+            await refresh();
+            await session.refetch({ query: { disableCookieCache: true } });
+            setDialog(null);
+            onOrganizationChange?.(organization);
+          })();
+        }
+      }
+    ) }),
+    dialog === "profile" && active && /* @__PURE__ */ jsx(OrganizationModal, { title: t("organization.profile.title"), returnFocusRef: triggerRef, onClose: () => setDialog(null), children: /* @__PURE__ */ jsx(OrganizationProfile, { organizationId: active.id, onDeleted: () => void afterProfileRemoval(), onLeft: () => void afterProfileRemoval() }) })
+  ] });
+}
+export {
+  OrganizationSwitcherContent
+};