@datalayer/core 1.0.21 → 1.0.22

package/lib/components/principal/PrincipalBadge.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useMemo } from 'react';
+import { Box, Label, Text } from '@primer/react';
+import { useCache } from '../../hooks/index.js';
+import { useIAMStore } from '../../state/substates/index.js';
+import { useSelectedPrincipal } from '../../hooks/useSelectedPrincipal.js';
+import { formatFriendlyHandle } from '../../utils/Handles.js';
+import { Principal } from './Principal.js';
+function normalizeUserOrigin(originRaw) {
+    const value = (originRaw || '').trim();
+    if (!value) {
+        return undefined;
+    }
+    const lower = value.toLowerCase();
+    if (lower === 'github') {
+        return 'GitHub';
+    }
+    if (lower === 'google') {
+        return 'Google';
+    }
+    if (lower === 'linkedin') {
+        return 'LinkedIn';
+    }
+    if (lower === 'microsoft') {
+        return 'Microsoft';
+    }
+    if (lower === 'datalayer') {
+        return 'Datalayer';
+    }
+    return value;
+}
+/**
+ * PrincipalBadge — small inline pill that displays a resolved principal
+ * (user / organization / team). Falls back to the currently selected
+ * principal when no explicit `principal` prop is supplied.
+ */
+export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabel = true, showApplyingToText = true, showOriginLabel = true, principalLabel = 'Principal', isAdmin = false, sx, } = {}) => {
+    const { user } = useIAMStore();
+    const { selectedPrincipalKind, selectedPrincipalUid, selectedPrincipalHandle, selectedTeamParentOrganizationHandle, } = useSelectedPrincipal();
+    const { useUser, useOrganization } = useCache();
+    const basePrincipal = useMemo(() => {
+        if (providedPrincipal) {
+            return {
+                ...providedPrincipal,
+                displayName: providedPrincipal.displayName ||
+                    providedPrincipal.handle ||
+                    providedPrincipal.uid ||
+                    'Principal',
+            };
+        }
+        if (selectedPrincipalKind === 'organization') {
+            return {
+                kind: 'organization',
+                uid: selectedPrincipalUid,
+                handle: selectedPrincipalHandle,
+                accountHandle: selectedPrincipalHandle,
+                displayName: selectedPrincipalHandle
+                    ? `@${formatFriendlyHandle(selectedPrincipalHandle)}`
+                    : 'Organization',
+                origin: 'Datalayer',
+            };
+        }
+        if (selectedPrincipalKind === 'team') {
+            const teamHandle = selectedPrincipalHandle || 'team';
+            const orgHandle = selectedTeamParentOrganizationHandle || 'organization';
+            return {
+                kind: 'team',
+                uid: selectedPrincipalUid,
+                handle: `${orgHandle}/${teamHandle}`,
+                accountHandle: teamHandle,
+                displayName: `@${formatFriendlyHandle(orgHandle)}/${formatFriendlyHandle(teamHandle)}`,
+                origin: 'Datalayer',
+            };
+        }
+        const fullName = [user?.firstName, user?.lastName]
+            .filter(Boolean)
+            .join(' ')
+            .trim();
+        const resolvedHandle = user?.handle || selectedPrincipalHandle;
+        const fallbackHandle = resolvedHandle
+            ? `@${formatFriendlyHandle(resolvedHandle)}`
+            : '@me';
+        return {
+            kind: 'user',
+            uid: user?.id || selectedPrincipalUid,
+            displayName: fullName || fallbackHandle,
+            handle: resolvedHandle,
+            accountHandle: resolvedHandle,
+            firstName: user?.firstName,
+            lastName: user?.lastName,
+            email: user?.email,
+            avatarUrl: user?.avatarUrl,
+            origin: normalizeUserOrigin(user?.origin),
+        };
+    }, [
+        providedPrincipal,
+        selectedPrincipalKind,
+        selectedPrincipalUid,
+        selectedPrincipalHandle,
+        selectedTeamParentOrganizationHandle,
+        user?.id,
+        user?.origin,
+        user?.handle,
+        user?.firstName,
+        user?.lastName,
+        user?.email,
+        user?.avatarUrl,
+    ]);
+    const userLookupUid = basePrincipal.kind === 'user' ? String(basePrincipal.uid || '') : '';
+    const organizationLookupUid = basePrincipal.kind === 'organization'
+        ? String(basePrincipal.uid || '')
+        : '';
+    const { data: resolvedUser } = useUser(userLookupUid);
+    const { data: resolvedOrganization } = useOrganization(organizationLookupUid);
+    const principal = useMemo(() => {
+        if (basePrincipal.kind === 'organization') {
+            const resolvedHandle = resolvedOrganization?.handle ||
+                basePrincipal.handle ||
+                basePrincipal.accountHandle;
+            const normalizedHandle = resolvedHandle
+                ? formatFriendlyHandle(resolvedHandle)
+                : 'organization';
+            return {
+                kind: 'organization',
+                uid: basePrincipal.uid,
+                displayName: resolvedOrganization?.name ||
+                    basePrincipal.displayName ||
+                    `@${normalizedHandle}`,
+                handle: resolvedHandle,
+                accountHandle: resolvedHandle,
+                origin: basePrincipal.origin || 'Datalayer',
+            };
+        }
+        if (basePrincipal.kind === 'team') {
+            return {
+                kind: 'team',
+                uid: basePrincipal.uid,
+                displayName: basePrincipal.displayName ||
+                    basePrincipal.handle ||
+                    basePrincipal.uid ||
+                    'Team',
+                handle: basePrincipal.handle,
+                accountHandle: basePrincipal.accountHandle,
+                avatarUrl: basePrincipal.avatarUrl,
+                origin: basePrincipal.origin,
+            };
+        }
+        const fullName = [
+            resolvedUser?.firstName || basePrincipal.firstName,
+            resolvedUser?.lastName || basePrincipal.lastName,
+        ]
+            .filter(Boolean)
+            .join(' ')
+            .trim();
+        const resolvedHandle = resolvedUser?.handle ||
+            basePrincipal.handle ||
+            basePrincipal.accountHandle;
+        const fallbackHandle = resolvedHandle
+            ? `@${formatFriendlyHandle(resolvedHandle)}`
+            : '@me';
+        const resolvedDisplayName = resolvedUser?.displayName ||
+            basePrincipal.displayName ||
+            fullName ||
+            fallbackHandle;
+        const origin = normalizeUserOrigin(resolvedUser?.origin || basePrincipal.origin);
+        return {
+            kind: 'user',
+            uid: resolvedUser?.uid || basePrincipal.uid,
+            displayName: resolvedDisplayName,
+            handle: resolvedHandle,
+            accountHandle: resolvedHandle,
+            firstName: resolvedUser?.firstName || basePrincipal.firstName,
+            lastName: resolvedUser?.lastName || basePrincipal.lastName,
+            email: resolvedUser?.email || basePrincipal.email,
+            avatarUrl: resolvedUser?.avatarUrl || basePrincipal.avatarUrl,
+            origin,
+        };
+    }, [
+        basePrincipal,
+        resolvedOrganization?.name,
+        resolvedOrganization?.handle,
+        resolvedUser?.uid,
+        resolvedUser?.displayName,
+        resolvedUser?.handle,
+        resolvedUser?.firstName,
+        resolvedUser?.lastName,
+        resolvedUser?.email,
+        resolvedUser?.avatarUrl,
+        resolvedUser?.origin,
+    ]);
+    return (_jsxs(Box, { sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 2,
+            px: 2,
+            py: 1,
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+            bg: 'canvas.subtle',
+            ...sx,
+        }, children: [showPrincipalLabel && (_jsx(Label, { size: "small", variant: "accent", children: principalLabel })), showApplyingToText && (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Applying to" })), _jsx(Principal, { principal: principal, isAdmin: isAdmin }), showOriginLabel && principal.origin && (_jsx(Label, { size: "small", variant: "secondary", children: principal.origin }))] }));
+};
+export default PrincipalBadge;

package/lib/components/principal/PrincipalBanner.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export type PrincipalBannerProps = {
+    caption?: string;
+    rightContent?: ReactNode;
+};
+export declare const PrincipalBanner: ({ caption, rightContent, }: PrincipalBannerProps) => import("react/jsx-runtime").JSX.Element;
+export default PrincipalBanner;

package/lib/components/principal/PrincipalBanner.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * PrincipalBanner — displays the currently selected principal
+ * (user, organization, or team) with a colored visual so a user
+ * can immediately see which principal a settings page applies to.
+ */
+import { Box, Label, Text } from '@primer/react';
+import { OrganizationIcon, PeopleIcon, PersonIcon, } from '@primer/octicons-react';
+import { useSelectedPrincipal } from '../../hooks/useSelectedPrincipal.js';
+import { useIAMStore } from '../../state/substates/index.js';
+export const PrincipalBanner = ({ caption, rightContent, }) => {
+    const { user } = useIAMStore();
+    const { selectedPrincipalKind, selectedPrincipalHandle, selectedTeamParentOrganizationHandle, } = useSelectedPrincipal();
+    const isOrganization = selectedPrincipalKind === 'organization';
+    const isTeam = selectedPrincipalKind === 'team';
+    const handle = isOrganization
+        ? selectedPrincipalHandle || ''
+        : isTeam
+            ? `${selectedTeamParentOrganizationHandle || 'organization'}/${selectedPrincipalHandle || 'team'}`
+            : user?.handle || selectedPrincipalHandle || '';
+    const Icon = isOrganization
+        ? OrganizationIcon
+        : isTeam
+            ? PeopleIcon
+            : PersonIcon;
+    const accent = isOrganization ? 'done' : isTeam ? 'attention' : 'accent';
+    const bg = isOrganization
+        ? 'done.subtle'
+        : isTeam
+            ? 'attention.subtle'
+            : 'accent.subtle';
+    const borderColor = isOrganization
+        ? 'done.muted'
+        : isTeam
+            ? 'attention.muted'
+            : 'accent.muted';
+    const fg = isOrganization ? 'done.fg' : isTeam ? 'attention.fg' : 'accent.fg';
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 3,
+            p: 3,
+            border: '1px solid',
+            borderColor,
+            borderRadius: 2,
+            bg,
+        }, children: [_jsx(Box, { sx: {
+                    width: 40,
+                    height: 40,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: '50%',
+                    bg: 'canvas.default',
+                    border: '1px solid',
+                    borderColor,
+                    color: fg,
+                    flex: '0 0 auto',
+                }, children: _jsx(Icon, { size: 20 }) }), _jsxs(Box, { sx: { minWidth: 0, flex: 1 }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            flexWrap: 'wrap',
+                        }, children: [_jsx(Text, { sx: {
+                                    color: 'fg.muted',
+                                    fontSize: 0,
+                                    textTransform: 'uppercase',
+                                    letterSpacing: '0.04em',
+                                }, children: "Principal" }), _jsx(Label, { variant: accent, children: isOrganization ? 'Organization' : isTeam ? 'Team' : 'User' })] }), _jsx(Text, { as: "p", sx: { m: 0, mt: 1, fontWeight: 600, color: 'fg.default' }, children: handle
+                            ? `@${handle}`
+                            : isOrganization
+                                ? 'Organization'
+                                : isTeam
+                                    ? 'Team'
+                                    : 'User' }), caption && (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, color: 'fg.muted', fontSize: 1 }, children: caption }))] }), rightContent ? (_jsx(Box, { sx: {
+                    flex: ['1 1 100%', '0 0 auto'],
+                    width: ['100%', 'min(640px, 58%)'],
+                }, children: rightContent })) : null] }));
+};
+export default PrincipalBanner;

package/lib/components/principal/PrincipalDetailsOverlay.d.ts

@@ -0,0 +1,23 @@
+export type PrincipalKind = 'user' | 'team' | 'organization';
+export type PrincipalDetailsOverlayProps = {
+    kind: PrincipalKind;
+    uid?: string;
+    displayName: string;
+    handle?: string;
+    accountHandle?: string;
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+    origin?: string;
+    avatarUrl?: string;
+    isAdmin?: boolean;
+};
+export declare function buildPrincipalProfilePath({ kind, uid, handle, accountHandle, isAdmin, }: {
+    kind: PrincipalKind;
+    uid?: string;
+    handle?: string;
+    accountHandle?: string;
+    isAdmin?: boolean;
+}): string | null;
+export declare function PrincipalDetailsOverlay({ kind, uid, displayName, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, isAdmin, }: PrincipalDetailsOverlayProps): JSX.Element;
+export default PrincipalDetailsOverlay;

package/lib/components/principal/PrincipalDetailsOverlay.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { ActionMenu, Box, Button, Text } from '@primer/react';
+import { useNavigate } from '../../hooks/index.js';
+import { PrincipalAvatar } from './PrincipalAvatar.js';
+function normalize(value) {
+    return (value || '').trim();
+}
+export function buildPrincipalProfilePath({ kind, uid, handle, accountHandle, isAdmin, }) {
+    const normalizedUid = normalize(uid);
+    const normalizedHandle = normalize(handle);
+    const normalizedAccountHandle = normalize(accountHandle);
+    const safeHandle = normalizedHandle && normalizedHandle !== normalizedUid
+        ? normalizedHandle
+        : '';
+    if (kind === 'user') {
+        if (isAdmin && normalizedUid) {
+            return `/admin/management/iam/users/${normalizedUid}`;
+        }
+        if (safeHandle) {
+            return `/${safeHandle}`;
+        }
+        return null;
+    }
+    if (kind === 'team') {
+        if (normalizedAccountHandle && safeHandle) {
+            return `/${normalizedAccountHandle}/team/${safeHandle}`;
+        }
+        if (safeHandle.includes('/')) {
+            const [orgHandle, teamHandle] = safeHandle.split('/', 2);
+            if (orgHandle && teamHandle) {
+                return `/${orgHandle}/team/${teamHandle}`;
+            }
+        }
+        if (safeHandle) {
+            return `/datalayer/team/${safeHandle}`;
+        }
+        return null;
+    }
+    if (safeHandle) {
+        return `/${safeHandle}`;
+    }
+    return null;
+}
+export function PrincipalDetailsOverlay({ kind, uid, displayName, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, isAdmin = false, }) {
+    const navigate = useNavigate();
+    const normalizedDisplayName = normalize(displayName) ||
+        normalize(handle) ||
+        normalize(uid) ||
+        'Principal';
+    const normalizedHandle = normalize(handle);
+    const normalizedUid = normalize(uid);
+    const targetPath = buildPrincipalProfilePath({
+        kind,
+        uid: normalizedUid,
+        handle: normalizedHandle,
+        accountHandle,
+        isAdmin,
+    });
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Box, { as: "button", type: "button", sx: {
+                        fontWeight: 'semibold',
+                        color: 'accent.fg',
+                        textDecoration: 'underline',
+                        background: 'transparent',
+                        border: 0,
+                        padding: 0,
+                        margin: 0,
+                        cursor: 'pointer',
+                        ':hover': {
+                            textDecoration: 'underline',
+                        },
+                    }, children: normalizedDisplayName }) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsxs(Box, { sx: { display: 'grid', gap: 3, p: 4, minWidth: 420 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(PrincipalAvatar, { kind: kind, avatarUrl: avatarUrl, alt: normalizedDisplayName, size: 40 }), _jsxs(Box, { sx: { display: 'grid', gap: 0.5 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: normalizedDisplayName }), normalizedHandle ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["@", normalizedHandle] })) : null] })] }), _jsxs(Box, { sx: {
+                                display: 'grid',
+                                gridTemplateColumns: '110px 1fr',
+                                gap: 1,
+                                alignItems: 'baseline',
+                            }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Type" }), _jsx(Text, { sx: { fontSize: 1 }, children: kind }), normalizedHandle ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsxs(Text, { sx: { fontSize: 1 }, children: ["@", normalizedHandle] })] })) : null, normalizedUid ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedUid })] })) : null, kind === 'user' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontSize: 1 }, children: firstName || 'N/A' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontSize: 1 }, children: lastName || 'N/A' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Text, { sx: { fontSize: 1 }, children: origin || 'Datalayer' }), email ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontSize: 1 }, children: email })] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Text, { sx: { fontSize: 1 }, children: origin || 'Datalayer' })] }))] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { size: "small", onClick: () => {
+                                    if (targetPath) {
+                                        navigate(targetPath);
+                                    }
+                                }, disabled: !targetPath, children: "View profile" }) })] }) })] }));
+}
+export default PrincipalDetailsOverlay;

package/lib/components/principal/PrincipalSwitcherMenu.d.ts

@@ -0,0 +1,14 @@
+export type PrincipalSwitcherMenuProps = {
+    maxLabelChars?: number;
+    fullWidth?: boolean;
+    showClosedBorder?: boolean;
+};
+/**
+ * PrincipalSwitcherMenu — the *only* component allowed to write to the
+ * principal store and the billable account store. It keeps both stores in
+ * sync per the rule:
+ *   - selecting a user/org principal → billable account = same user/org
+ *   - selecting a team principal     → billable account = the team's parent org
+ */
+export declare function PrincipalSwitcherMenu({ maxLabelChars, fullWidth, showClosedBorder, }: PrincipalSwitcherMenuProps): JSX.Element;
+export default PrincipalSwitcherMenu;