@sesionario/blocks 1.16.0 → 1.17.1

package/dist/index.cjs

@@ -1746,7 +1746,7 @@ function PlatformNavbar({
             innerClassName
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: logo }),
+            logo != null && logo !== false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: logo }) : null,
             leading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: leading }) : null,
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
@@ -1831,11 +1831,9 @@ var defaultLabels3 = {
   personalProfile: "Personal profile",
   activity: "Activity",
   professionalProfile: "Professional profile",
-  mainApp: "Main app",
-  orgManagement: "Organization management",
-  backoffice: "Backoffice",
-  memberOrgs: "My organizations",
-  managementOrgs: "Management team",
+  showMoreOrgs: "Show more",
+  showLessOrgs: "Show less",
+  manageOrg: "Manage organization",
   language: "Language",
   theme: "Theme",
   themeLight: "Light",
@@ -1846,6 +1844,30 @@ var defaultLabels3 = {
   signingOut: "Signing out\u2026",
   accountSettings: "Account settings"
 };
+var PLATFORM_ACCOUNT_ORG_COLLAPSE_AT = 4;
+function mergePlatformAccountOrgs(memberOrgs, manageableOrgs) {
+  const manageableIds = new Set(manageableOrgs.map((org) => org.id));
+  const byId = /* @__PURE__ */ new Map();
+  for (const org of memberOrgs) {
+    byId.set(org.id, {
+      ...org,
+      canManage: manageableIds.has(org.id)
+    });
+  }
+  for (const org of manageableOrgs) {
+    const existing = byId.get(org.id);
+    if (existing) {
+      byId.set(org.id, {
+        ...existing,
+        canManage: true,
+        logo: existing.logo ?? org.logo
+      });
+    } else {
+      byId.set(org.id, { ...org, canManage: true });
+    }
+  }
+  return Array.from(byId.values());
+}
 function MenuAvatar({
   name,
   image,
@@ -1887,9 +1909,9 @@ function LanguageThemeSubs({
   const themeValue = theme ?? "system";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSub, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Languages, { className: "size-4" }),
-        labels.language
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2 [&>svg:last-child]:ml-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.language }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Languages, { className: "size-4" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { className: "min-w-40", children: /* @__PURE__ */ jsxRuntime.jsx(
         DropdownMenuRadioGroup,
@@ -1901,9 +1923,9 @@ function LanguageThemeSubs({
       ) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSub, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
-        themeValue === "light" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "size-4" }) : themeValue === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, { className: "size-4" }),
-        labels.theme
+      /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2 [&>svg:last-child]:ml-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.theme }),
+        themeValue === "light" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "size-4" }) : themeValue === "dark" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Monitor, { className: "size-4" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { className: "min-w-40", children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuRadioGroup, { value: themeValue, onValueChange: setTheme, children: [
         /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuRadioItem, { value: "system", children: labels.themeSystem }),
@@ -1913,11 +1935,86 @@ function LanguageThemeSubs({
     ] })
   ] });
 }
+function OrgMenuRows({
+  orgs,
+  appUrl,
+  adminUrl,
+  labels
+}) {
+  const [expanded, setExpanded] = React7.useState(false);
+  const collapsible = orgs.length > PLATFORM_ACCOUNT_ORG_COLLAPSE_AT;
+  const visibleOrgs = collapsible && !expanded ? orgs.slice(0, PLATFORM_ACCOUNT_ORG_COLLAPSE_AT) : orgs;
+  if (orgs.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        expanded && orgs.length > PLATFORM_ACCOUNT_ORG_COLLAPSE_AT ? "max-h-64 overflow-y-auto scroll-fade-b" : void 0
+      ),
+      "data-testid": "platform-account-orgs",
+      children: [
+        visibleOrgs.map((org) => {
+          const orgHomeHref = `${appUrl}/o/${org.slug}`;
+          const manageHref = `${adminUrl}/api/auth/org/select?id=${encodeURIComponent(org.id)}`;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "relative",
+              "data-testid": `platform-account-org-${org.id}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DropdownMenuItem,
+                  {
+                    asChild: true,
+                    className: cn("gap-2", org.canManage && "pr-9"),
+                    children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: orgHomeHref, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        MenuAvatar,
+                        {
+                          name: org.name,
+                          image: org.logo,
+                          sizeClass: "size-6"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: org.name })
+                    ] })
+                  }
+                ),
+                org.canManage ? /* @__PURE__ */ jsxRuntime.jsx(
+                  DropdownMenuItem,
+                  {
+                    asChild: true,
+                    className: "absolute right-0.5 top-1/2 size-7 -translate-y-1/2 p-0",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: manageHref, "aria-label": labels.manageOrg, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" }) })
+                  }
+                ) : null
+              ]
+            },
+            org.id
+          );
+        }),
+        collapsible ? /* @__PURE__ */ jsxRuntime.jsxs(
+          DropdownMenuItem,
+          {
+            className: "gap-2",
+            onSelect: (event) => {
+              event.preventDefault();
+              setExpanded((value) => !value);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: expanded ? labels.showLessOrgs : labels.showMoreOrgs }),
+              expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "size-4" })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
 function PlatformAccountMenu({
   variant = "platform",
   isPending = false,
   user = null,
-  isAdmin = false,
   verificationStatus = "unverified",
   urls,
   memberOrgs = [],
@@ -1937,6 +2034,11 @@ function PlatformAccountMenu({
 }) {
   const labels = { ...defaultLabels3, ...labelsProp };
   const [signingOut, setSigningOut] = React7.useState(false);
+  const mergedOrgs = React7.useMemo(
+    () => mergePlatformAccountOrgs(memberOrgs, manageableOrgs),
+    [memberOrgs, manageableOrgs]
+  );
+  const hasOrgs = mergedOrgs.length > 0;
   const loginHref = `${urls.authAppUrl}${urls.loginPath ?? "/login"}`;
   const accountHref = `${urls.authAppUrl}${urls.accountPath ?? "/account"}`;
   const activityHref = `${urls.authAppUrl}${urls.activityPath ?? "/account/activity"}`;
@@ -2016,48 +2118,36 @@ function PlatformAccountMenu({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
           variant === "platform" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            hasOrgs ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                OrgMenuRows,
+                {
+                  orgs: mergedOrgs,
+                  appUrl: urls.appUrl,
+                  adminUrl: urls.adminUrl,
+                  labels
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
+            ] }) : null,
             /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: accountHref, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" }),
-              labels.personalProfile
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.personalProfile }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" })
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: activityHref, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "size-4" }),
-              labels.activity
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.activity }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "size-4" })
             ] }) }),
             /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: profileHref, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" }),
-              labels.professionalProfile
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.professionalProfile }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "size-4" })
             ] }) }),
-            memberOrgs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSub, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "size-4" }),
-                labels.memberOrgs
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { className: "min-w-48 max-h-64 overflow-y-auto scroll-fade-b", children: memberOrgs.map((org) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: `${urls.appUrl}/o/${org.slug}`, children: org.name }) }, org.id)) })
-            ] }) : null,
-            manageableOrgs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSub, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, { className: "size-4" }),
-                labels.managementOrgs
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubContent, { className: "min-w-48 max-h-64 overflow-y-auto scroll-fade-b", children: manageableOrgs.map((org) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                "a",
-                {
-                  href: `${urls.adminUrl}/api/auth/org/select?id=${encodeURIComponent(org.id)}`,
-                  children: org.name
-                }
-              ) }, org.id)) })
-            ] }) : null,
             extraItems,
-            isAdmin && urls.backofficeUrl ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: urls.backofficeUrl, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutDashboard, { className: "size-4" }),
-              labels.backoffice
-            ] }) }) : null,
             /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
           ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: accountHref, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" }),
-              labels.accountSettings
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.accountSettings }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "size-4" })
             ] }) }),
             extraItems,
             /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
@@ -2082,8 +2172,8 @@ function PlatformAccountMenu({
                 void handleSignOut();
               },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "size-4" }),
-                signingOut ? labels.signingOut : labels.signOut
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: signingOut ? labels.signingOut : labels.signOut }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "size-4" })
               ]
             }
           )
@@ -2099,8 +2189,8 @@ function PlatformAccountMenu({
           ),
           /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
           /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, className: "gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: loginHref, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogIn, { className: "size-4" }),
-            labels.signIn
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: labels.signIn }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogIn, { className: "size-4" })
           ] }) })
         ] })
       }
@@ -7173,6 +7263,7 @@ function SupportMessengerProvider({
   className
 }) {
   const isMobile = useMediaQuery2("(max-width: 767px)");
+  const dockRef = React7.useRef(null);
   const [listOpen, setListOpen] = React7.useState(false);
   const [threads, setThreads] = React7.useState([]);
   const [mobileThreadKey, setMobileThreadKey] = React7.useState(null);
@@ -7180,6 +7271,7 @@ function SupportMessengerProvider({
     () => items.reduce((sum, item) => sum + (item.unreadCount ?? 0), 0),
     [items]
   );
+  const isDesktopOpen = !isMobile && (listOpen || threads.length > 0);
   React7.useEffect(() => {
     if (!forceMinimized) return;
     setListOpen(false);
@@ -7222,6 +7314,20 @@ function SupportMessengerProvider({
     setThreads([]);
     setMobileThreadKey(null);
   }, []);
+  React7.useEffect(() => {
+    if (!isDesktopOpen) return;
+    function onPointerDown(event) {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (dockRef.current?.contains(target)) return;
+      if (target instanceof Element && target.closest('[data-slot="popover-content"]')) {
+        return;
+      }
+      closeAll();
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [isDesktopOpen, closeAll]);
   const ctx = React7.useMemo(
     () => ({
       listOpen,
@@ -7265,6 +7371,7 @@ function SupportMessengerProvider({
     enabled ? /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
+        ref: dockRef,
         className: cn(
           "pointer-events-none fixed right-4 bottom-4 z-50 flex flex-col items-end gap-3",
           className
@@ -7686,6 +7793,7 @@ exports.MessageScrollerProvider = MessageScrollerProvider;
 exports.MessageScrollerViewport = MessageScrollerViewport;
 exports.MexicoMap = MexicoMap;
 exports.OrgSwitcher = OrgSwitcher;
+exports.PLATFORM_ACCOUNT_ORG_COLLAPSE_AT = PLATFORM_ACCOUNT_ORG_COLLAPSE_AT;
 exports.PhoneInput = PhoneInput;
 exports.PlatformAccountMenu = PlatformAccountMenu;
 exports.PlatformNavbar = PlatformNavbar;
@@ -7709,6 +7817,7 @@ exports.getAvatarColors = getAvatarColors;
 exports.getInitials = getInitials;
 exports.insertAtCaret = insertAtCaret;
 exports.markerVariants = markerVariants;
+exports.mergePlatformAccountOrgs = mergePlatformAccountOrgs;
 exports.normalizeEmojiQuery = normalizeEmojiQuery;
 exports.shouldRetryLiveEdge404 = shouldRetryLiveEdge404;
 exports.useDebouncedValue = useDebouncedValue;