@octaviaflow/core 3.0.18-beta.2 → 3.0.18-beta.4

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

@@ -39,6 +39,13 @@ export interface DropdownMenuProps {
     "aria-label"?: string;
     /** id of an element that labels the trigger; alternative to aria-label. */
     "aria-labelledby"?: string;
+    /**
+     * Pin the popup's width to the trigger's rendered width. Useful when the
+     * trigger is wide (a full Sidebar user card, an Input combobox, etc.) and
+     * a narrow `min-width: 180px` popup would look detached. Default `false`
+     * — the popup sizes to its content.
+     */
+    matchTriggerWidth?: boolean;
 }
-export declare function DropdownMenu({ trigger, items, align, className, triggerClassName, closeOnOutsideClick, closeOnEscape, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu({ trigger, items, align, className, triggerClassName, closeOnOutsideClick, closeOnEscape, matchTriggerWidth, "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,EAAqB,MAAM,OAAO,CAAC;AAQ1D,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;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AA8KD,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,KAAe,EACf,SAAS,EACT,gBAAgB,EAChB,mBAA0B,EAC1B,aAAoB,EACpB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,GAClC,EAAE,iBAAiB,2CAyCnB"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA8B,MAAM,OAAO,CAAC;AAQnE,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;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AA8ND,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EACL,KAAe,EACf,SAAS,EACT,gBAAgB,EAChB,mBAA0B,EAC1B,aAAoB,EACpB,iBAAyB,EACzB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,GAClC,EAAE,iBAAiB,2CA0CnB"}

package/dist/index.cjs

@@ -11960,7 +11960,8 @@ function MenuPopup({
   align,
   className,
   closeOnOutsideClick,
-  closeOnEscape
+  closeOnEscape,
+  matchTriggerWidth
 }) {
   const menuRef = (0, import_react58.useRef)(null);
   (0, import_react58.useEffect)(() => {
@@ -12002,19 +12003,45 @@ function MenuPopup({
     nonSepItems[idx]?.onClick?.();
     state.close();
   };
+  const ESTIMATED_ITEM_H = 34;
+  const ESTIMATED_SEPARATOR_H = 9;
+  const POPUP_PADDING_V = 8;
+  const VIEWPORT_MARGIN = 8;
+  const estimatedHeight = (0, import_react58.useMemo)(() => {
+    const itemsTotal = menuItems.reduce(
+      (acc, item) => acc + (item.separator ? ESTIMATED_SEPARATOR_H : ESTIMATED_ITEM_H),
+      0
+    );
+    return itemsTotal + POPUP_PADDING_V * 2;
+  }, [menuItems]);
   const getStyle = () => {
     if (!triggerRef.current) return {};
     const rect = triggerRef.current.getBoundingClientRect();
+    const viewportH = window.innerHeight;
+    const spaceBelow = viewportH - rect.bottom;
+    const spaceAbove = rect.top;
+    const openUp = spaceBelow < estimatedHeight && spaceAbove > spaceBelow;
     const style = {
       position: "fixed",
       zIndex: 1200,
-      top: rect.bottom + 4
+      // Cap the menu so it never spills beyond the viewport — pairs
+      // with overflow-y:auto on the popup itself (set in CSS).
+      maxHeight: Math.max(120, (openUp ? spaceAbove : spaceBelow) - VIEWPORT_MARGIN)
     };
+    if (openUp) {
+      style.bottom = viewportH - rect.top + 4;
+    } else {
+      style.top = rect.bottom + 4;
+    }
     if (align === "end") {
       style.right = window.innerWidth - rect.right;
     } else {
       style.left = rect.left;
     }
+    if (matchTriggerWidth) {
+      style.width = rect.width;
+      style.minWidth = rect.width;
+    }
     return style;
   };
   let nonSepIdx = 0;
@@ -12070,6 +12097,7 @@ function DropdownMenu({
   triggerClassName,
   closeOnOutsideClick = true,
   closeOnEscape = true,
+  matchTriggerWidth = false,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby
 }) {
@@ -12103,7 +12131,8 @@ function DropdownMenu({
         align,
         className,
         closeOnOutsideClick,
-        closeOnEscape
+        closeOnEscape,
+        matchTriggerWidth
       }
     )
   ] });
@@ -22516,7 +22545,8 @@ function SidebarUserCard({ user }) {
       {
         trigger: body,
         items: user.menu,
-        align: "end",
+        align: "start",
+        matchTriggerWidth: true,
         "aria-label": labelText,
         triggerClassName: "ods-sidebar__user-card"
       }