@adonis-agora/authkit-react/build/src/components/organization_switcher.js

Frontend ergonomics over AuthKit for AdonisJS + Inertia + React apps: a typed useAuth() hook, role-gating hooks and gating components.

import { jsx as _jsx } from "react/jsx-runtime";
import { createElement, useState } from 'react';
import { useAuthkitConfig } from '../config.js';
import { useOrganizations } from '../hooks/use_organizations.js';
import { useSwitchOrganization } from '../hooks/use_switch_organization.js';
import { useAuth } from '../use_auth.js';
function OrganizationSwitcherInner({ personalAccountLabel = 'Conta pessoal', className, }) {
    const { isAuthenticated } = useAuth();
    const { data: orgs, activeOrgId, supported } = useOrganizations();
    const { activate, deactivate, loading: switching } = useSwitchOrganization();
    const [open, setOpen] = useState(false);
    if (!isAuthenticated || !supported)
        return null;
    const activeOrg = orgs?.find((o) => o.id === activeOrgId) ?? null;
    const label = activeOrg ? activeOrg.name : personalAccountLabel;
    const trigger = createElement('button', {
        type: 'button',
        className: 'authkit-orgswitcher__trigger',
        'aria-haspopup': 'listbox',
        'aria-expanded': open,
        disabled: switching,
        onClick: () => setOpen((v) => !v),
    }, createElement('span', { className: 'authkit-orgswitcher__label' }, label), createElement('span', { className: 'authkit-orgswitcher__chevron', 'aria-hidden': 'true' }, '▾'));
    const menu = open
        ? createElement('div', { className: 'authkit-orgswitcher__menu', role: 'listbox' }, createElement('button', {
            type: 'button',
            className: [
                'authkit-orgswitcher__item',
                !activeOrgId ? 'authkit-orgswitcher__item--active' : '',
            ]
                .filter(Boolean)
                .join(' '),
            role: 'option',
            'aria-selected': !activeOrgId,
            onClick: async () => {
                setOpen(false);
                if (activeOrgId)
                    await deactivate();
            },
        }, createElement('span', { className: 'authkit-orgswitcher__item-name' }, personalAccountLabel)), ...(orgs ?? []).map((org) => createElement('button', {
            key: org.id,
            type: 'button',
            className: [
                'authkit-orgswitcher__item',
                org.isActive ? 'authkit-orgswitcher__item--active' : '',
            ]
                .filter(Boolean)
                .join(' '),
            role: 'option',
            'aria-selected': org.isActive,
            onClick: async () => {
                setOpen(false);
                if (!org.isActive)
                    await activate(org.id);
            },
        }, createElement('span', { className: 'authkit-orgswitcher__item-name' }, org.name), createElement('span', { className: 'authkit-orgswitcher__item-role' }, org.role))))
        : null;
    return createElement('div', { className: ['authkit-orgswitcher', className].filter(Boolean).join(' ') }, trigger, menu);
}
export function OrganizationSwitcher(props) {
    const { idp } = useAuthkitConfig();
    if (idp === 'external')
        return null;
    return _jsx(OrganizationSwitcherInner, { ...props });
}