@diwauhris/ui 1.7.20 → 1.7.22

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,6 +3961,7 @@ 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 GAP = 4;
@@ -3969,21 +3976,28 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 			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 available = window.innerWidth - 16;
+			const horizontal = align === "left" ? {
+				left: Math.max(MARGIN, Math.min(rect.left, window.innerWidth - MARGIN)),
+				right: "auto"
+			} : {
+				right: Math.max(MARGIN, window.innerWidth - rect.right),
+				left: "auto"
+			};
 			setPanelStyle({
 				position: "fixed",
 				...flipUp ? { bottom: Math.max(MARGIN, window.innerHeight - rect.top + GAP) } : { top: rect.bottom + GAP },
-				left: align === "left" ? rect.left : Math.max(MARGIN, rect.right - PANEL_MIN_WIDTH),
+				...horizontal,
 				zIndex: 9999,
-				minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
+				minWidth: PANEL_MIN_WIDTH,
+				maxWidth: available
 			});
 		};
 		reposition();
 		const raf = window.requestAnimationFrame(reposition);
-		window.addEventListener("scroll", reposition, true);
 		window.addEventListener("resize", reposition);
 		return () => {
 			window.cancelAnimationFrame(raf);
-			window.removeEventListener("scroll", reposition, true);
 			window.removeEventListener("resize", reposition);
 		};
 	}, [
@@ -4007,33 +4021,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", {
@@ -4042,6 +4087,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,
@@ -4061,7 +4107,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),
@@ -4077,7 +4123,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,6 +3937,7 @@ 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 GAP = 4;
@@ -3945,21 +3952,28 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 			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 available = window.innerWidth - 16;
+			const horizontal = align === "left" ? {
+				left: Math.max(MARGIN, Math.min(rect.left, window.innerWidth - MARGIN)),
+				right: "auto"
+			} : {
+				right: Math.max(MARGIN, window.innerWidth - rect.right),
+				left: "auto"
+			};
 			setPanelStyle({
 				position: "fixed",
 				...flipUp ? { bottom: Math.max(MARGIN, window.innerHeight - rect.top + GAP) } : { top: rect.bottom + GAP },
-				left: align === "left" ? rect.left : Math.max(MARGIN, rect.right - PANEL_MIN_WIDTH),
+				...horizontal,
 				zIndex: 9999,
-				minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
+				minWidth: PANEL_MIN_WIDTH,
+				maxWidth: available
 			});
 		};
 		reposition();
 		const raf = window.requestAnimationFrame(reposition);
-		window.addEventListener("scroll", reposition, true);
 		window.addEventListener("resize", reposition);
 		return () => {
 			window.cancelAnimationFrame(raf);
-			window.removeEventListener("scroll", reposition, true);
 			window.removeEventListener("resize", reposition);
 		};
 	}, [
@@ -3983,33 +3997,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", {
@@ -4018,6 +4063,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,
@@ -4037,7 +4083,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 +4099,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.20",
+  "version": "1.7.22",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [