@diwauhris/ui 1.7.19 → 1.7.21

package/lib/index.cjs

@@ -3924,9 +3924,15 @@ function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassNa
 * Menu — Design System Component
 *
 * A dropdown menu anchored to a trigger. Opens on trigger click,
-* closes on outside-click or Escape. Full keyboard navigation:
-* ArrowDown/ArrowUp to move between items, Home/End for first/last,
-* Escape to close.
+* closes on outside-click, Escape, or scroll. Full keyboard navigation:
+* ArrowDown/ArrowUp move between items (skipping disabled), Home/End jump to
+* the first/last enabled item, Escape closes. When focus is on a closed
+* trigger, Enter/Space/ArrowDown open it and focus the first item; ArrowUp
+* opens it and focuses the last item.
+*
+* The panel renders in a body portal with fixed positioning: it flips above
+* the trigger when there isn't room below, and clamps horizontally so it never
+* overflows the viewport.
 *
 * Follows WAI-ARIA Menu Button pattern:
 *   - trigger: role="button", aria-haspopup="menu", aria-expanded
@@ -3942,7 +3948,7 @@ function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassNa
 *     ]}
 *   />
 */
-function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: controlledOpen, onOpenChange, panelClassName = "" }) {
+function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: controlledOpen, onOpenChange, closeOnSelect = true, panelClassName = "" }) {
 	const [internalOpen, setInternalOpen] = (0, react.useState)(false);
 	const isControlled = controlledOpen !== void 0;
 	const open = isControlled ? controlledOpen : internalOpen;
@@ -3955,18 +3961,45 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 	const panelRef = (0, react.useRef)(null);
 	const itemRefs = (0, react.useRef)([]);
 	const [panelStyle, setPanelStyle] = (0, react.useState)({});
+	const pendingFocusRef = (0, react.useRef)("first");
 	(0, react.useEffect)(() => {
 		if (!open || !triggerRef.current) return;
-		const rect = triggerRef.current.getBoundingClientRect();
+		const GAP = 4;
+		const MARGIN = 8;
 		const PANEL_MIN_WIDTH = 176;
-		setPanelStyle({
-			position: "fixed",
-			top: rect.bottom + 4,
-			left: align === "left" ? rect.left : Math.max(0, rect.right - PANEL_MIN_WIDTH),
-			zIndex: 9999,
-			minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
-		});
-	}, [open, align]);
+		const ROW_HEIGHT = 36;
+		const HEADER_HEIGHT = 8;
+		const reposition = () => {
+			const trigger = triggerRef.current;
+			if (!trigger) return;
+			const rect = trigger.getBoundingClientRect();
+			const panelHeight = panelRef.current?.offsetHeight ?? items.length * ROW_HEIGHT + HEADER_HEIGHT;
+			const spaceBelow = window.innerHeight - rect.bottom;
+			const flipUp = spaceBelow < panelHeight + GAP + MARGIN && rect.top > spaceBelow;
+			const panelWidth = Math.max(panelRef.current?.offsetWidth ?? 0, rect.width, PANEL_MIN_WIDTH);
+			const desiredLeft = align === "left" ? rect.left : rect.right - panelWidth;
+			const maxLeft = window.innerWidth - panelWidth - MARGIN;
+			const left = Math.min(Math.max(MARGIN, desiredLeft), Math.max(MARGIN, maxLeft));
+			setPanelStyle({
+				position: "fixed",
+				...flipUp ? { bottom: Math.max(MARGIN, window.innerHeight - rect.top + GAP) } : { top: rect.bottom + GAP },
+				left,
+				zIndex: 9999,
+				minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
+			});
+		};
+		reposition();
+		const raf = window.requestAnimationFrame(reposition);
+		window.addEventListener("resize", reposition);
+		return () => {
+			window.cancelAnimationFrame(raf);
+			window.removeEventListener("resize", reposition);
+		};
+	}, [
+		open,
+		align,
+		items.length
+	]);
 	(0, react.useEffect)(() => {
 		if (!open) return;
 		const handlePointerDown = (e) => {
@@ -3983,33 +4016,64 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 				(triggerRef.current?.querySelector("button,a,[tabindex]"))?.focus();
 			}
 		};
+		const handleScroll = (e) => {
+			if (panelRef.current && e.target instanceof Node && panelRef.current.contains(e.target)) return;
+			setOpen(false);
+		};
 		document.addEventListener("mousedown", handlePointerDown);
 		document.addEventListener("keydown", handleKeyDown);
+		window.addEventListener("scroll", handleScroll, true);
 		window.setTimeout(() => {
-			itemRefs.current.find((r) => r && !r.disabled)?.focus();
+			const enabled = itemRefs.current.map((node, i) => ({
+				node,
+				i
+			})).filter((x) => x.node && !x.node.disabled);
+			(pendingFocusRef.current === "last" ? enabled[enabled.length - 1] : enabled[0])?.node?.focus();
+			pendingFocusRef.current = "first";
 		}, 0);
 		return () => {
 			document.removeEventListener("mousedown", handlePointerDown);
 			document.removeEventListener("keydown", handleKeyDown);
+			window.removeEventListener("scroll", handleScroll, true);
 		};
 	}, [open]);
-	const focusItem = (index) => {
-		const next = (index % items.length + items.length) % items.length;
-		itemRefs.current[next]?.focus();
+	const focusFrom = (index, dir) => {
+		const n = items.length;
+		if (n === 0) return;
+		for (let step = 0; step < n; step++) {
+			const next = ((index + dir * step) % n + n) % n;
+			const node = itemRefs.current[next];
+			if (node && !node.disabled) {
+				node.focus();
+				return;
+			}
+		}
 	};
 	const handleItemKeyDown = (e, index) => {
 		if (e.key === "ArrowDown") {
 			e.preventDefault();
-			focusItem(index + 1);
+			focusFrom(index + 1, 1);
 		} else if (e.key === "ArrowUp") {
 			e.preventDefault();
-			focusItem(index - 1);
+			focusFrom(index - 1, -1);
 		} else if (e.key === "Home") {
 			e.preventDefault();
-			focusItem(0);
+			focusFrom(0, 1);
 		} else if (e.key === "End") {
 			e.preventDefault();
-			focusItem(items.length - 1);
+			focusFrom(items.length - 1, -1);
+		}
+	};
+	const handleTriggerKeyDown = (e) => {
+		if (open) return;
+		if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+			e.preventDefault();
+			pendingFocusRef.current = "first";
+			setOpen(true);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			pendingFocusRef.current = "last";
+			setOpen(true);
 		}
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4018,6 +4082,7 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: triggerRef,
 			onClick: () => setOpen(!open),
+			onKeyDown: handleTriggerKeyDown,
 			className: "cursor-pointer",
 			children: (0, react.isValidElement)(trigger) ? (0, react.cloneElement)(trigger, {
 				"aria-expanded": open,
@@ -4037,7 +4102,7 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 				role: "menuitem",
 				disabled: item.disabled,
 				onClick: () => {
-					setOpen(false);
+					if (closeOnSelect) setOpen(false);
 					item.onClick();
 				},
 				onKeyDown: (e) => handleItemKeyDown(e, index),
@@ -4053,7 +4118,7 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 					"aria-hidden": "true",
 					children: item.icon
 				}), item.label]
-			}, item.label))
+			}, item.id ?? item.label ?? index))
 		}), document.body)]
 	});
 }

package/lib/index.mjs

@@ -3900,9 +3900,15 @@ function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassNa
 * Menu — Design System Component
 *
 * A dropdown menu anchored to a trigger. Opens on trigger click,
-* closes on outside-click or Escape. Full keyboard navigation:
-* ArrowDown/ArrowUp to move between items, Home/End for first/last,
-* Escape to close.
+* closes on outside-click, Escape, or scroll. Full keyboard navigation:
+* ArrowDown/ArrowUp move between items (skipping disabled), Home/End jump to
+* the first/last enabled item, Escape closes. When focus is on a closed
+* trigger, Enter/Space/ArrowDown open it and focus the first item; ArrowUp
+* opens it and focuses the last item.
+*
+* The panel renders in a body portal with fixed positioning: it flips above
+* the trigger when there isn't room below, and clamps horizontally so it never
+* overflows the viewport.
 *
 * Follows WAI-ARIA Menu Button pattern:
 *   - trigger: role="button", aria-haspopup="menu", aria-expanded
@@ -3918,7 +3924,7 @@ function Dropdown({ trigger, isOpen, onToggle, onClose, children, triggerClassNa
 *     ]}
 *   />
 */
-function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: controlledOpen, onOpenChange, panelClassName = "" }) {
+function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: controlledOpen, onOpenChange, closeOnSelect = true, panelClassName = "" }) {
 	const [internalOpen, setInternalOpen] = useState(false);
 	const isControlled = controlledOpen !== void 0;
 	const open = isControlled ? controlledOpen : internalOpen;
@@ -3931,18 +3937,45 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 	const panelRef = useRef(null);
 	const itemRefs = useRef([]);
 	const [panelStyle, setPanelStyle] = useState({});
+	const pendingFocusRef = useRef("first");
 	useEffect(() => {
 		if (!open || !triggerRef.current) return;
-		const rect = triggerRef.current.getBoundingClientRect();
+		const GAP = 4;
+		const MARGIN = 8;
 		const PANEL_MIN_WIDTH = 176;
-		setPanelStyle({
-			position: "fixed",
-			top: rect.bottom + 4,
-			left: align === "left" ? rect.left : Math.max(0, rect.right - PANEL_MIN_WIDTH),
-			zIndex: 9999,
-			minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
-		});
-	}, [open, align]);
+		const ROW_HEIGHT = 36;
+		const HEADER_HEIGHT = 8;
+		const reposition = () => {
+			const trigger = triggerRef.current;
+			if (!trigger) return;
+			const rect = trigger.getBoundingClientRect();
+			const panelHeight = panelRef.current?.offsetHeight ?? items.length * ROW_HEIGHT + HEADER_HEIGHT;
+			const spaceBelow = window.innerHeight - rect.bottom;
+			const flipUp = spaceBelow < panelHeight + GAP + MARGIN && rect.top > spaceBelow;
+			const panelWidth = Math.max(panelRef.current?.offsetWidth ?? 0, rect.width, PANEL_MIN_WIDTH);
+			const desiredLeft = align === "left" ? rect.left : rect.right - panelWidth;
+			const maxLeft = window.innerWidth - panelWidth - MARGIN;
+			const left = Math.min(Math.max(MARGIN, desiredLeft), Math.max(MARGIN, maxLeft));
+			setPanelStyle({
+				position: "fixed",
+				...flipUp ? { bottom: Math.max(MARGIN, window.innerHeight - rect.top + GAP) } : { top: rect.bottom + GAP },
+				left,
+				zIndex: 9999,
+				minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
+			});
+		};
+		reposition();
+		const raf = window.requestAnimationFrame(reposition);
+		window.addEventListener("resize", reposition);
+		return () => {
+			window.cancelAnimationFrame(raf);
+			window.removeEventListener("resize", reposition);
+		};
+	}, [
+		open,
+		align,
+		items.length
+	]);
 	useEffect(() => {
 		if (!open) return;
 		const handlePointerDown = (e) => {
@@ -3959,33 +3992,64 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 				(triggerRef.current?.querySelector("button,a,[tabindex]"))?.focus();
 			}
 		};
+		const handleScroll = (e) => {
+			if (panelRef.current && e.target instanceof Node && panelRef.current.contains(e.target)) return;
+			setOpen(false);
+		};
 		document.addEventListener("mousedown", handlePointerDown);
 		document.addEventListener("keydown", handleKeyDown);
+		window.addEventListener("scroll", handleScroll, true);
 		window.setTimeout(() => {
-			itemRefs.current.find((r) => r && !r.disabled)?.focus();
+			const enabled = itemRefs.current.map((node, i) => ({
+				node,
+				i
+			})).filter((x) => x.node && !x.node.disabled);
+			(pendingFocusRef.current === "last" ? enabled[enabled.length - 1] : enabled[0])?.node?.focus();
+			pendingFocusRef.current = "first";
 		}, 0);
 		return () => {
 			document.removeEventListener("mousedown", handlePointerDown);
 			document.removeEventListener("keydown", handleKeyDown);
+			window.removeEventListener("scroll", handleScroll, true);
 		};
 	}, [open]);
-	const focusItem = (index) => {
-		const next = (index % items.length + items.length) % items.length;
-		itemRefs.current[next]?.focus();
+	const focusFrom = (index, dir) => {
+		const n = items.length;
+		if (n === 0) return;
+		for (let step = 0; step < n; step++) {
+			const next = ((index + dir * step) % n + n) % n;
+			const node = itemRefs.current[next];
+			if (node && !node.disabled) {
+				node.focus();
+				return;
+			}
+		}
 	};
 	const handleItemKeyDown = (e, index) => {
 		if (e.key === "ArrowDown") {
 			e.preventDefault();
-			focusItem(index + 1);
+			focusFrom(index + 1, 1);
 		} else if (e.key === "ArrowUp") {
 			e.preventDefault();
-			focusItem(index - 1);
+			focusFrom(index - 1, -1);
 		} else if (e.key === "Home") {
 			e.preventDefault();
-			focusItem(0);
+			focusFrom(0, 1);
 		} else if (e.key === "End") {
 			e.preventDefault();
-			focusItem(items.length - 1);
+			focusFrom(items.length - 1, -1);
+		}
+	};
+	const handleTriggerKeyDown = (e) => {
+		if (open) return;
+		if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+			e.preventDefault();
+			pendingFocusRef.current = "first";
+			setOpen(true);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			pendingFocusRef.current = "last";
+			setOpen(true);
 		}
 	};
 	return /* @__PURE__ */ jsxs("div", {
@@ -3994,6 +4058,7 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 		children: [/* @__PURE__ */ jsx("div", {
 			ref: triggerRef,
 			onClick: () => setOpen(!open),
+			onKeyDown: handleTriggerKeyDown,
 			className: "cursor-pointer",
 			children: isValidElement(trigger) ? cloneElement(trigger, {
 				"aria-expanded": open,
@@ -4013,7 +4078,7 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 				role: "menuitem",
 				disabled: item.disabled,
 				onClick: () => {
-					setOpen(false);
+					if (closeOnSelect) setOpen(false);
 					item.onClick();
 				},
 				onKeyDown: (e) => handleItemKeyDown(e, index),
@@ -4029,7 +4094,7 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 					"aria-hidden": "true",
 					children: item.icon
 				}), item.label]
-			}, item.label))
+			}, item.id ?? item.label ?? index))
 		}), document.body)]
 	});
 }

package/lib/types/ui-library/gallery/menu/Menu.d.ts

@@ -2,9 +2,15 @@
  * Menu — Design System Component
  *
  * A dropdown menu anchored to a trigger. Opens on trigger click,
- * closes on outside-click or Escape. Full keyboard navigation:
- * ArrowDown/ArrowUp to move between items, Home/End for first/last,
- * Escape to close.
+ * closes on outside-click, Escape, or scroll. Full keyboard navigation:
+ * ArrowDown/ArrowUp move between items (skipping disabled), Home/End jump to
+ * the first/last enabled item, Escape closes. When focus is on a closed
+ * trigger, Enter/Space/ArrowDown open it and focus the first item; ArrowUp
+ * opens it and focuses the last item.
+ *
+ * The panel renders in a body portal with fixed positioning: it flips above
+ * the trigger when there isn't room below, and clamps horizontally so it never
+ * overflows the viewport.
  *
  * Follows WAI-ARIA Menu Button pattern:
  *   - trigger: role="button", aria-haspopup="menu", aria-expanded
@@ -23,6 +29,12 @@
 import { type ReactNode } from 'react';
 export type MenuItemTone = 'default' | 'danger';
 export interface MenuItem {
+    /**
+     * Stable identity for the item. Used for the React key and focus tracking.
+     * Recommended when labels can repeat or the item list is dynamic; falls back
+     * to `label` then index when omitted.
+     */
+    id?: string;
     label: string;
     icon?: ReactNode;
     onClick: () => void;
@@ -46,7 +58,12 @@ export interface MenuProps {
     open?: boolean;
     /** Called when the menu should open or close. */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Close the menu after an item is selected. Default `true`.
+     * Set `false` for menus that stay open across clicks (e.g. multi-toggle filters).
+     */
+    closeOnSelect?: boolean;
     /** Additional class on the floating panel. */
     panelClassName?: string;
 }
-export declare function Menu({ trigger, items, ariaLabel, align, open: controlledOpen, onOpenChange, panelClassName, }: MenuProps): import("react").JSX.Element;
+export declare function Menu({ trigger, items, ariaLabel, align, open: controlledOpen, onOpenChange, closeOnSelect, panelClassName, }: MenuProps): import("react").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diwauhris/ui",
   "private": false,
-  "version": "1.7.19",
+  "version": "1.7.21",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [