@octaviaflow/core 3.0.9 → 3.0.10

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -12,6 +12,13 @@ export interface DropdownMenuProps {
     items: DropdownMenuItem[];
     align?: "start" | "end";
     className?: string;
+    /**
+     * Override the className applied to the auto-generated trigger <button>.
+     * Defaults to "ods-dropdown__trigger". Useful when composing the
+     * DropdownMenu inside a host component (e.g. Sidebar user card) that
+     * supplies its own button styling.
+     */
+    triggerClassName?: string;
     /**
      * Accessible name for the trigger button. Required when `trigger` is not
      * a plain string (e.g. an icon-only trigger). When omitted and `trigger`
@@ -21,5 +28,5 @@ export interface DropdownMenuProps {
     /** id of an element that labels the trigger; alternative to aria-label. */
     "aria-labelledby"?: string;
 }
-export declare function DropdownMenu({ trigger, items, align, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu({ trigger, items, align, className, triggerClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DropdownMenu.d.ts.map

package/dist/components/DropdownMenu/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAQ/C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAsID,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,KAAe,EACf,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,GAClC,EAAE,iBAAiB,2CAsCnB"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAQ/C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAsID,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,KAAe,EACf,SAAS,EACT,gBAAgB,EAChB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,GAClC,EAAE,iBAAiB,2CA0CnB"}

package/dist/components/Sidebar/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEnF,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,2EAA2E;IAC3E,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IACvC,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC;IAClD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAGtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAoB,EACpB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,MAAM,EAAE,UAAU,EAClB,aAAqB,EACrB,cAAc,EACd,aAAoC,EACpC,cAAoB,EACpB,eAAqB,EACrB,YAAkB,EAClB,MAAe,EACf,SAAS,GACV,EAAE,YAAY,2CA6Gd"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEnF,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,2EAA2E;IAC3E,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IACvC,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE,CAAC;IAClD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAGtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAoB,EACpB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,MAAM,EAAE,UAAU,EAClB,aAAqB,EACrB,cAAc,EACd,aAAoC,EACpC,cAAoB,EACpB,eAAqB,EACrB,YAAkB,EAClB,MAAe,EACf,SAAS,GACV,EAAE,YAAY,2CAuId"}

package/dist/index.cjs

@@ -6569,6 +6569,7 @@ function DropdownMenu({
   items,
   align = "start",
   className,
+  triggerClassName,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby
 }) {
@@ -6587,7 +6588,15 @@ function DropdownMenu({
   );
   const { onDrag, onDragStart, onDragEnd, onAnimationStart, ...safeTriggerProps } = buttonProps;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { ...safeTriggerProps, ref: triggerRef, className: "ods-dropdown__trigger", children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "button",
+      {
+        ...safeTriggerProps,
+        ref: triggerRef,
+        className: triggerClassName ?? "ods-dropdown__trigger",
+        children: trigger
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       MenuPopup,
       {
@@ -11253,15 +11262,17 @@ function Sidebar({
   className
 }) {
   const allSections = sections ?? (items ? [{ items }] : []);
-  const [internalPinned, setInternalPinned] = (0, import_react53.useState)(() => {
-    if (typeof window === "undefined") return defaultPinned;
+  const [internalPinned, setInternalPinned] = (0, import_react53.useState)(defaultPinned);
+  (0, import_react53.useEffect)(() => {
+    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 = (0, import_react53.useCallback)(
     (p) => {
@@ -11299,6 +11310,17 @@ function Sidebar({
   const autoMode = variant === "auto";
   const showAsRail = autoMode ? !pinned : variant === "rail";
   const overlayOpen = autoMode && !pinned && hoverOpen;
+  (0, import_react53.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime69.jsxs)(
     "nav",
     {
@@ -11404,17 +11426,34 @@ function RailLayout({
       },
       item.id
     )) }),
-    user && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-      "button",
+    user && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SidebarUserRail, { user })
+  ] });
+}
+function SidebarUserRail({ user }) {
+  const labelText = typeof user.name === "string" ? user.name : "User";
+  const avatar = user.avatar ?? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: user.initial ?? (typeof user.name === "string" ? user.name.charAt(0).toUpperCase() : "?") });
+  if (user.menu && user.menu.length > 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      DropdownMenu,
       {
-        type: "button",
-        className: "ods-sidebar__user-rail",
-        onClick: user.onClick,
-        "aria-label": typeof user.name === "string" ? user.name : "User",
-        children: user.avatar ?? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("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__ */ (0, import_jsx_runtime69.jsx)(
+    "button",
+    {
+      type: "button",
+      className: "ods-sidebar__user-rail",
+      onClick: user.onClick,
+      "aria-label": labelText,
+      children: avatar
+    }
+  );
 }
 function RailItem({
   item,
@@ -11533,18 +11572,7 @@ function ExpandedLayout({
     ] }, section.id ?? sIdx)) }),
     (footerItems || user) && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ods-sidebar__footer", children: [
       footerItems && footerItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ods-sidebar__footer-list", children: footerItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ExpandedItem, { item, level: 0 }, item.id)) }),
-      user && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("button", { type: "button", className: "ods-sidebar__user-card", onClick: user.onClick, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ods-sidebar__user-avatar", children: user.avatar ?? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: user.initial ?? (typeof user.name === "string" ? user.name.charAt(0).toUpperCase() : "?") }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "ods-sidebar__user-info", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ods-sidebar__user-name", children: user.name }),
-          user.email && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ods-sidebar__user-email", children: user.email })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("circle", { cx: "8", cy: "3", r: "1.3", fill: "currentColor" }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("circle", { cx: "8", cy: "8", r: "1.3", fill: "currentColor" }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("circle", { cx: "8", cy: "13", r: "1.3", fill: "currentColor" })
-        ] })
-      ] })
+      user && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SidebarUserCard, { user })
     ] })
   ] });
 }
@@ -11634,6 +11662,34 @@ function ExpandedItem({ item, level }) {
     }
   );
 }
+function SidebarUserCard({ user }) {
+  const labelText = typeof user.name === "string" ? user.name : "User";
+  const body = /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ods-sidebar__user-avatar", children: user.avatar ?? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { children: user.initial ?? (typeof user.name === "string" ? user.name.charAt(0).toUpperCase() : "?") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "ods-sidebar__user-info", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ods-sidebar__user-name", children: user.name }),
+      user.email && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ods-sidebar__user-email", children: user.email })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("circle", { cx: "8", cy: "3", r: "1.3", fill: "currentColor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("circle", { cx: "8", cy: "8", r: "1.3", fill: "currentColor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("circle", { cx: "8", cy: "13", r: "1.3", fill: "currentColor" })
+    ] })
+  ] });
+  if (user.menu && user.menu.length > 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      DropdownMenu,
+      {
+        trigger: body,
+        items: user.menu,
+        align: "end",
+        "aria-label": labelText,
+        triggerClassName: "ods-sidebar__user-card"
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("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) {