@octaviaflow/core 3.0.9 → 3.0.10

package/dist/index.js

@@ -6418,6 +6418,7 @@ function DropdownMenu({
   items,
   align = "start",
   className,
+  triggerClassName,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby
 }) {
@@ -6436,7 +6437,15 @@ function DropdownMenu({
   );
   const { onDrag, onDragStart, onDragEnd, onAnimationStart, ...safeTriggerProps } = buttonProps;
   return /* @__PURE__ */ jsxs28(Fragment6, { children: [
-    /* @__PURE__ */ jsx29("button", { ...safeTriggerProps, ref: triggerRef, className: "ods-dropdown__trigger", children: trigger }),
+    /* @__PURE__ */ jsx29(
+      "button",
+      {
+        ...safeTriggerProps,
+        ref: triggerRef,
+        className: triggerClassName ?? "ods-dropdown__trigger",
+        children: trigger
+      }
+    ),
     /* @__PURE__ */ jsx29(
       MenuPopup,
       {
@@ -11139,15 +11148,17 @@ function Sidebar({
   className
 }) {
   const allSections = sections ?? (items ? [{ items }] : []);
-  const [internalPinned, setInternalPinned] = useState21(() => {
-    if (typeof window === "undefined") return defaultPinned;
+  const [internalPinned, setInternalPinned] = useState21(defaultPinned);
+  useEffect16(() => {
+    if (pinnedProp !== void 0) return;
     try {
       const stored = window.localStorage.getItem(pinStorageKey);
-      if (stored !== null) return stored === "true";
+      if (stored !== null && stored !== String(internalPinned)) {
+        setInternalPinned(stored === "true");
+      }
     } catch {
     }
-    return defaultPinned;
-  });
+  }, []);
   const pinned = pinnedProp ?? internalPinned;
   const setPinned = useCallback16(
     (p) => {
@@ -11185,6 +11196,17 @@ function Sidebar({
   const autoMode = variant === "auto";
   const showAsRail = autoMode ? !pinned : variant === "rail";
   const overlayOpen = autoMode && !pinned && hoverOpen;
+  useEffect16(() => {
+    if (!overlayOpen) return;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        clearTimers();
+        setHoverOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [overlayOpen]);
   return /* @__PURE__ */ jsxs68(
     "nav",
     {
@@ -11290,17 +11312,34 @@ function RailLayout({
       },
       item.id
     )) }),
-    user && /* @__PURE__ */ jsx69(
-      "button",
+    user && /* @__PURE__ */ jsx69(SidebarUserRail, { user })
+  ] });
+}
+function SidebarUserRail({ user }) {
+  const labelText = typeof user.name === "string" ? user.name : "User";
+  const avatar = user.avatar ?? /* @__PURE__ */ jsx69("span", { children: user.initial ?? (typeof user.name === "string" ? user.name.charAt(0).toUpperCase() : "?") });
+  if (user.menu && user.menu.length > 0) {
+    return /* @__PURE__ */ jsx69(
+      DropdownMenu,
       {
-        type: "button",
-        className: "ods-sidebar__user-rail",
-        onClick: user.onClick,
-        "aria-label": typeof user.name === "string" ? user.name : "User",
-        children: user.avatar ?? /* @__PURE__ */ jsx69("span", { children: user.initial ?? (typeof user.name === "string" ? user.name.charAt(0).toUpperCase() : "?") })
+        trigger: avatar,
+        items: user.menu,
+        align: "end",
+        "aria-label": labelText,
+        triggerClassName: "ods-sidebar__user-rail"
       }
-    )
-  ] });
+    );
+  }
+  return /* @__PURE__ */ jsx69(
+    "button",
+    {
+      type: "button",
+      className: "ods-sidebar__user-rail",
+      onClick: user.onClick,
+      "aria-label": labelText,
+      children: avatar
+    }
+  );
 }
 function RailItem({
   item,
@@ -11419,18 +11458,7 @@ function ExpandedLayout({
     ] }, section.id ?? sIdx)) }),
     (footerItems || user) && /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__footer", children: [
       footerItems && footerItems.length > 0 && /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__footer-list", children: footerItems.map((item) => /* @__PURE__ */ jsx69(ExpandedItem, { item, level: 0 }, item.id)) }),
-      user && /* @__PURE__ */ jsxs68("button", { type: "button", className: "ods-sidebar__user-card", onClick: user.onClick, children: [
-        /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__user-avatar", children: user.avatar ?? /* @__PURE__ */ jsx69("span", { children: user.initial ?? (typeof user.name === "string" ? user.name.charAt(0).toUpperCase() : "?") }) }),
-        /* @__PURE__ */ jsxs68("span", { className: "ods-sidebar__user-info", children: [
-          /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__user-name", children: user.name }),
-          user.email && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__user-email", children: user.email })
-        ] }),
-        /* @__PURE__ */ jsxs68("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx69("circle", { cx: "8", cy: "3", r: "1.3", fill: "currentColor" }),
-          /* @__PURE__ */ jsx69("circle", { cx: "8", cy: "8", r: "1.3", fill: "currentColor" }),
-          /* @__PURE__ */ jsx69("circle", { cx: "8", cy: "13", r: "1.3", fill: "currentColor" })
-        ] })
-      ] })
+      user && /* @__PURE__ */ jsx69(SidebarUserCard, { user })
     ] })
   ] });
 }
@@ -11520,6 +11548,34 @@ function ExpandedItem({ item, level }) {
     }
   );
 }
+function SidebarUserCard({ user }) {
+  const labelText = typeof user.name === "string" ? user.name : "User";
+  const body = /* @__PURE__ */ jsxs68(Fragment15, { children: [
+    /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__user-avatar", children: user.avatar ?? /* @__PURE__ */ jsx69("span", { children: user.initial ?? (typeof user.name === "string" ? user.name.charAt(0).toUpperCase() : "?") }) }),
+    /* @__PURE__ */ jsxs68("span", { className: "ods-sidebar__user-info", children: [
+      /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__user-name", children: user.name }),
+      user.email && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__user-email", children: user.email })
+    ] }),
+    /* @__PURE__ */ jsxs68("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx69("circle", { cx: "8", cy: "3", r: "1.3", fill: "currentColor" }),
+      /* @__PURE__ */ jsx69("circle", { cx: "8", cy: "8", r: "1.3", fill: "currentColor" }),
+      /* @__PURE__ */ jsx69("circle", { cx: "8", cy: "13", r: "1.3", fill: "currentColor" })
+    ] })
+  ] });
+  if (user.menu && user.menu.length > 0) {
+    return /* @__PURE__ */ jsx69(
+      DropdownMenu,
+      {
+        trigger: body,
+        items: user.menu,
+        align: "end",
+        "aria-label": labelText,
+        triggerClassName: "ods-sidebar__user-card"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx69("button", { type: "button", className: "ods-sidebar__user-card", onClick: user.onClick, children: body });
+}
 function hasActiveDescendant(item) {
   if (!item.children) return false;
   for (const c of item.children) {