@datalayer/core 1.0.25 → 1.1.41

package/lib/components/principal/PrincipalSwitcherMenu.js

@@ -4,8 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { useEffect, useMemo, useState } from 'react';
-import { ActionList, ActionMenu, Box, Text } from '@primer/react';
-import { OrganizationIcon, PeopleIcon, PersonIcon, } from '@primer/octicons-react';
+import { ActionList, ActionMenu, Box, Button, Label, Text } from '@primer/react';
+import { OrganizationIcon, PeopleIcon, PersonIcon, TriangleDownIcon, } from '@primer/octicons-react';
 import { useCache, useAuthorization } from '../../hooks/index.js';
 import { useCoreStore } from '../../state/index.js';
 import { useIAMStore } from '../../state/substates/index.js';
@@ -13,7 +13,7 @@ import { memberships as fetchMemberships } from '../../api/iam/profile.js';
 import { usePrincipalStore } from '../../hooks/usePrincipalStore.js';
 import { useBillableAccountStore } from '../../hooks/useBillableAccountStore.js';
 import { useSelectedPrincipal } from '../../hooks/useSelectedPrincipal.js';
-import { formatFriendlyHandle } from '../../utils/Handles.js';
+import { DisplayHandle, displayHandleText } from '../display/DisplayHandle.js';
 function truncatePrincipalLabel(label, maxChars) {
     const trimmed = (label || '').trim();
     if (!trimmed) {
@@ -42,7 +42,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
     const isPlatformAdmin = user ? checkIsPlatformAdmin(user) : false;
     const [teams, setTeams] = useState([]);
     const [teamsLoading, setTeamsLoading] = useState(false);
-    const selectUserPrincipal = usePrincipalStore(state => state.selectUserPrincipal);
+    const selectPersonalPrincipal = usePrincipalStore(state => state.selectPersonalPrincipal);
     const selectOrganizationPrincipal = usePrincipalStore(state => state.selectOrganizationPrincipal);
     const selectTeamPrincipal = usePrincipalStore(state => state.selectTeamPrincipal);
     const setBillableAccount = useBillableAccountStore(state => state.setBillableAccount);
@@ -50,7 +50,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
     const personalUid = user?.uid || user?.id || '';
     const personalHandle = user?.handle || '';
     const selectUser = (uid, handle) => {
-        selectUserPrincipal(uid, handle);
+        selectPersonalPrincipal(uid, handle);
         setBillableAccount({ kind: 'user', uid, handle });
     };
     const selectOrganization = (uid, handle) => {
@@ -129,21 +129,13 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
             selectUser(personalUid, personalHandle);
             return;
         }
-        if (selectedPrincipalKind === 'organization' && isOrganizationsLoading) {
+        // Keep explicit organization/team selections stable across route transitions,
+        // even while memberships/organizations are still loading or temporarily
+        // unavailable for a given view.
+        if (selectedPrincipalKind === 'organization' || selectedPrincipalKind === 'team') {
             return;
         }
-        if (selectedPrincipalKind === 'organization' && !selectedOrganization) {
-            selectUser(personalUid, personalHandle);
-            return;
-        }
-        if (selectedPrincipalKind === 'team' && teamsLoading) {
-            return;
-        }
-        if (selectedPrincipalKind === 'team' && !selectedTeam) {
-            selectUser(personalUid, personalHandle);
-            return;
-        }
-        if (selectedPrincipalKind === 'user' &&
+        if (selectedPrincipalKind === 'personal' &&
             selectedPrincipalUid !== personalUid) {
             selectUser(personalUid, personalHandle);
         }
@@ -195,10 +187,10 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
             ''
         : '';
     const selectedPrincipalLabel = selectedPrincipalKind === 'team'
-        ? `@${formatFriendlyHandle(effectiveOrganizationHandle || personalHandle || 'organization')}/${formatFriendlyHandle(effectiveHandle)}`
-        : `@${formatFriendlyHandle(effectiveHandle)}`;
+        ? `${displayHandleText(effectiveOrganizationHandle || personalHandle || 'organization')}/${displayHandleText(effectiveHandle, { withAt: false })}`
+        : displayHandleText(effectiveHandle);
     const selectedPrincipalLabelClosed = truncatePrincipalLabel(selectedPrincipalLabel, maxLabelChars);
-    const isCurrentUserPrincipal = selectedPrincipalKind === 'user';
+    const isCurrentUserPrincipal = selectedPrincipalKind === 'personal';
     const selectedItemSx = {
         bg: 'accent.subtle',
         borderColor: 'accent.muted',
@@ -206,30 +198,37 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
         fontWeight: 'semibold',
     };
     const adminBadgeSx = {
-        ml: 'auto',
-        px: 1,
-        py: '2px',
-        borderRadius: 999,
         bg: 'attention.subtle',
         color: 'attention.fg',
-        fontSize: 0,
-        fontWeight: 'semibold',
-        lineHeight: 1.2,
         textTransform: 'lowercase',
+        lineHeight: 1.2,
     };
-    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsxs(Box, { as: "button", type: "button", "aria-label": "Switch principal", sx: {
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: showClosedBorder ? (_jsxs(Box, { as: "button", type: "button", "aria-label": "Switch principal", sx: {
                         width: fullWidth ? '100%' : 'auto',
-                        p: 2,
+                        boxSizing: 'border-box',
+                        px: 2,
+                        py: 2,
+                        fontSize: 0,
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'space-between',
                         gap: 2,
-                        bg: showClosedBorder ? 'canvas.subtle' : 'transparent',
-                        border: showClosedBorder ? '1px solid' : 'none',
-                        borderColor: showClosedBorder ? 'border.default' : 'transparent',
+                        bg: 'canvas.subtle',
+                        border: '1px solid',
+                        borderColor: 'border.default',
                         borderRadius: 2,
                         cursor: 'pointer',
                         textAlign: 'left',
+                        transition: 'background-color 120ms ease',
+                        ':hover': {
+                            bg: 'canvas.subtle',
+                        },
+                        ':focus-visible': {
+                            bg: 'canvas.subtle',
+                            outline: '2px solid',
+                            outlineColor: 'accent.emphasis',
+                            outlineOffset: '2px',
+                        },
                     }, children: [_jsx(Box, { sx: {
                                 display: 'inline-flex',
                                 alignItems: 'center',
@@ -239,24 +238,50 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                     display: 'block',
                                     color: 'accent.fg',
                                     fontWeight: 'semibold',
-                                    fontSize: 1,
+                                    fontSize: 'inherit',
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis',
                                     maxWidth: '100%',
                                 }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Box, { sx: {
-                                ml: 'auto',
                                 flexShrink: 0,
                                 display: 'inline-flex',
                                 alignItems: 'center',
-                            }, children: _jsx(Box, { as: "span", sx: adminBadgeSx, children: "admin" }) })) : null] }) }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "User" }), _jsxs(ActionList.Item, { disabled: isCurrentUserPrincipal, selected: isCurrentUserPrincipal, sx: isCurrentUserPrincipal ? selectedItemSx : undefined, onSelect: () => {
+                            }, children: _jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" }) })) : null, _jsx(Box, { sx: {
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                color: 'fg.muted',
+                                flexShrink: 0,
+                                ml: isPlatformAdmin && isCurrentUserPrincipal ? 1 : 0,
+                            }, children: _jsx(TriangleDownIcon, { size: 12 }) })] })) : (_jsx(Button, { variant: "invisible", size: "small", "aria-label": "Switch principal", trailingVisual: TriangleDownIcon, sx: {
+                        maxWidth: fullWidth ? '100%' : ['200px', '260px', '360px'],
+                        width: fullWidth ? '100%' : 'auto',
+                    }, children: _jsxs(Box, { sx: {
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: 1,
+                            minWidth: 0,
+                        }, children: [_jsx(Box, { sx: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    color: 'fg.muted',
+                                    flexShrink: 0,
+                                }, children: selectedPrincipalKind === 'organization' ? (_jsx(OrganizationIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(PeopleIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { sx: {
+                                    minWidth: 0,
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                }, children: _jsx(Text, { sx: {
+                                        color: 'accent.fg',
+                                        fontWeight: 'semibold',
+                                    }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" })) : null] }) })) }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Personal" }), _jsxs(ActionList.Item, { disabled: isCurrentUserPrincipal, selected: isCurrentUserPrincipal, sx: isCurrentUserPrincipal ? selectedItemSx : undefined, onSelect: () => {
                                         if (isCurrentUserPrincipal) {
                                             return;
                                         }
                                         if (personalUid && personalHandle) {
                                             selectUser(personalUid, personalHandle);
                                         }
-                                    }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PersonIcon, {}) }), "@", formatFriendlyHandle(personalHandle || 'me'), isPlatformAdmin ? (_jsx(ActionList.TrailingVisual, { children: _jsx(Box, { as: "span", sx: adminBadgeSx, children: "admin" }) })) : null] })] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Organizations" }), organizations.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No organizations" })) : (organizations.map((organization) => {
+                                    }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PersonIcon, {}) }), _jsx(DisplayHandle, { handle: personalHandle || 'me' }), isPlatformAdmin ? (_jsx(ActionList.TrailingVisual, { children: _jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" }) })) : null] })] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Organizations" }), organizations.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No organizations" })) : (organizations.map((organization) => {
                                     const organizationUid = getOrganizationUid(organization);
                                     const isCurrentOrganizationPrincipal = selectedPrincipalKind === 'organization' &&
                                         selectedPrincipalUid === organizationUid;
@@ -269,7 +294,13 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                             if (organizationUid && organization.handle) {
                                                 selectOrganization(organizationUid, organization.handle);
                                             }
-                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(OrganizationIcon, {}) }), "@", organization.handle] }, organizationUid));
+                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(OrganizationIcon, {}) }), _jsx(Box, { as: "span", title: displayHandleText(organization.handle), sx: {
+                                                    display: 'block',
+                                                    minWidth: 0,
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    whiteSpace: 'nowrap',
+                                                }, children: _jsx(DisplayHandle, { handle: organization.handle }) })] }, organizationUid));
                                 }))] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Teams" }), teams.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No teams" })) : (teams.map(team => {
                                     const isCurrentTeamPrincipal = selectedPrincipalKind === 'team' &&
                                         selectedPrincipalUid === team.uid;
@@ -281,7 +312,13 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                                 return;
                                             }
                                             selectTeam(team, orgHandle);
-                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PeopleIcon, {}) }), "@", formatFriendlyHandle(orgHandle), "/", formatFriendlyHandle(team.handle)] }, team.uid));
+                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PeopleIcon, {}) }), _jsxs(Box, { as: "span", title: `${displayHandleText(orgHandle)}/${displayHandleText(team.handle, { withAt: false })}`, sx: {
+                                                    display: 'block',
+                                                    minWidth: 0,
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    whiteSpace: 'nowrap',
+                                                }, children: [_jsx(DisplayHandle, { handle: orgHandle }), "/", _jsx(DisplayHandle, { handle: team.handle, withAt: false })] })] }, team.uid));
                                 }))] })] }) })] }));
 }
 export default PrincipalSwitcherMenu;

package/lib/components/progress/index.d.ts

@@ -1,5 +1,4 @@
 export * from './ConsumptionBar';
-export * from './CreditsIndicator';
 export * from './ProgressBar';
 export * from './ProgressRing';
 export * from './Timer';

package/lib/components/progress/index.js

@@ -3,7 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './ConsumptionBar.js';
-export * from './CreditsIndicator.js';
 export * from './ProgressBar.js';
 export * from './ProgressRing.js';
 export * from './Timer.js';

package/lib/components/sharing/ShareAccessComponent.d.ts

@@ -1,18 +1,19 @@
 export type ItemAccessLevel = 'view' | 'update' | 'execute';
-type PrincipalKind = 'user' | 'team' | 'organization';
+type PrincipalKind = 'personal' | 'team' | 'organization';
 export type ShareAccessComponentProps = {
     isOpen: boolean;
     requestUrl?: string;
     resourceLabel: string;
     resourceName?: string;
     resourceDescription?: string;
+    expanded?: boolean;
     onSharingAccessRestrictedChange?: (restricted: boolean, message?: string) => void;
     defaultAccessLevel?: ItemAccessLevel;
     principalKinds?: readonly PrincipalKind[];
     displayMode?: 'dialog' | 'inline';
     onClose: () => void;
 };
-export declare function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resourceName, resourceDescription: _resourceDescription, onSharingAccessRestrictedChange, defaultAccessLevel, principalKinds, displayMode, onClose, }: ShareAccessComponentProps): JSX.Element | null;
+export declare function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resourceName, resourceDescription: _resourceDescription, expanded, onSharingAccessRestrictedChange, defaultAccessLevel, principalKinds, displayMode, onClose, }: ShareAccessComponentProps): JSX.Element | null;
 export default ShareAccessComponent;
 export declare const ShareAccessDialog: typeof ShareAccessComponent;
 export type ShareAccessDialogProps = ShareAccessComponentProps;