@capra/core 1.11.1 → 1.12.0

package/dist/index.mjs

@@ -4097,20 +4097,21 @@ const Toast = {
 //#endregion
 //#region src/components/Menu/Menu.module.css
 var Menu_module_default = {
-	"divider": "capra-Menu-module-3G4VeG-divider",
-	"header": "capra-Menu-module-3G4VeG-header",
-	"list": "capra-Menu-module-3G4VeG-list",
-	"menu": "capra-Menu-module-3G4VeG-menu",
-	"menuItem": "capra-Menu-module-3G4VeG-menuItem",
-	"menuItemDescription": "capra-Menu-module-3G4VeG-menuItemDescription",
-	"menuItemLabel": "capra-Menu-module-3G4VeG-menuItemLabel",
-	"menuItemLeadingGutter": "capra-Menu-module-3G4VeG-menuItemLeadingGutter",
-	"menuItemListItemShell": "capra-Menu-module-3G4VeG-menuItemListItemShell",
-	"menuItemShortcut": "capra-Menu-module-3G4VeG-menuItemShortcut",
-	"menuItemTrailingGroup": "capra-Menu-module-3G4VeG-menuItemTrailingGroup",
-	"menuItemTrailingGutter": "capra-Menu-module-3G4VeG-menuItemTrailingGutter",
-	"menuTriggerSlot": "capra-Menu-module-3G4VeG-menuTriggerSlot",
-	"section": "capra-Menu-module-3G4VeG-section"
+	"divider": "capra-Menu-module-HIhAFW-divider",
+	"header": "capra-Menu-module-HIhAFW-header",
+	"list": "capra-Menu-module-HIhAFW-list",
+	"menu": "capra-Menu-module-HIhAFW-menu",
+	"menuItem": "capra-Menu-module-HIhAFW-menuItem",
+	"menuItemDescription": "capra-Menu-module-HIhAFW-menuItemDescription",
+	"menuItemLabel": "capra-Menu-module-HIhAFW-menuItemLabel",
+	"menuItemLeadingGutter": "capra-Menu-module-HIhAFW-menuItemLeadingGutter",
+	"menuItemListItemShell": "capra-Menu-module-HIhAFW-menuItemListItemShell",
+	"menuItemShortcut": "capra-Menu-module-HIhAFW-menuItemShortcut",
+	"menuItemTrailingGroup": "capra-Menu-module-HIhAFW-menuItemTrailingGroup",
+	"menuItemTrailingGutter": "capra-Menu-module-HIhAFW-menuItemTrailingGutter",
+	"menuTriggerSlot": "capra-Menu-module-HIhAFW-menuTriggerSlot",
+	"section": "capra-Menu-module-HIhAFW-section",
+	"slot": "capra-Menu-module-HIhAFW-slot"
 };
 //#endregion
 //#region src/components/Menu/Menu.tsx
@@ -4200,7 +4201,7 @@ const MenuItem$1 = ({ as: Component, label, description, ariaLabel, href, disabl
 	const labelContent = children ?? label;
 	const showDescription = description != null && description !== "";
 	const textValue = ariaLabel || (typeof label === "string" ? label : void 0) || (typeof children === "string" ? children : void 0) || "";
-	const listItemContent = /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, (indent || icon) && /* @__PURE__ */ React$1.createElement(ListItem.Leading, { FORCE__className: icon ? Menu_module_default.menuItemLeadingGutter : void 0 }, icon && /* @__PURE__ */ React$1.createElement("span", { "aria-hidden": "true" }, icon)), /* @__PURE__ */ React$1.createElement(ListItem.Content, null, /* @__PURE__ */ React$1.createElement(ListItem.Label, null, /* @__PURE__ */ React$1.createElement("span", { className: Menu_module_default.menuItemLabel }, labelContent)), showDescription ? /* @__PURE__ */ React$1.createElement(ListItem.Description, null, /* @__PURE__ */ React$1.createElement("span", { className: Menu_module_default.menuItemDescription }, description)) : null), (shortcut || parent) && /* @__PURE__ */ React$1.createElement(ListItem.Trailing, { FORCE__className: Menu_module_default.menuItemTrailingGutter }, /* @__PURE__ */ React$1.createElement("span", { className: Menu_module_default.menuItemTrailingGroup }, [shortcut ? /* @__PURE__ */ React$1.createElement("span", {
+	const listItemContent = /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, (indent || icon) && /* @__PURE__ */ React$1.createElement(ListItem.Leading, { FORCE__className: icon ? Menu_module_default.menuItemLeadingGutter : void 0 }, icon), /* @__PURE__ */ React$1.createElement(ListItem.Content, null, /* @__PURE__ */ React$1.createElement(ListItem.Label, null, /* @__PURE__ */ React$1.createElement("span", { className: Menu_module_default.menuItemLabel }, labelContent)), showDescription ? /* @__PURE__ */ React$1.createElement(ListItem.Description, null, /* @__PURE__ */ React$1.createElement("span", { className: Menu_module_default.menuItemDescription }, description)) : null), (shortcut || parent) && /* @__PURE__ */ React$1.createElement(ListItem.Trailing, { FORCE__className: Menu_module_default.menuItemTrailingGutter }, /* @__PURE__ */ React$1.createElement("span", { className: Menu_module_default.menuItemTrailingGroup }, [shortcut ? /* @__PURE__ */ React$1.createElement("span", {
 		key: "shortcut",
 		className: Menu_module_default.menuItemShortcut
 	}, shortcut) : null, parent ? /* @__PURE__ */ React$1.createElement(ChevronRight, {
@@ -4228,7 +4229,8 @@ const MenuItem$1 = ({ as: Component, label, description, ariaLabel, href, disabl
 		"data-has-description": showDescription || void 0,
 		render,
 		onClick,
-		onPress
+		onPress,
+		...rest
 	}, /* @__PURE__ */ React$1.createElement(ListItem, {
 		as: "div",
 		role: "presentation",
@@ -4270,7 +4272,6 @@ const MenuSubmenu = ({ label, children, itemHoverAppearance = "default", itemAct
 	}, listItemContent)), /* @__PURE__ */ React$1.createElement(PopoverSurface, {
 		placement: "rightTop",
 		isNonModal: true,
-		shouldFlip: false,
 		offsets: [0, 0],
 		removeContentPadding: true
 	}, /* @__PURE__ */ React$1.createElement("div", menuSessionId != null ? { [MENU_SESSION_DATA_ATTR]: menuSessionId } : {}, /* @__PURE__ */ React$1.createElement(Menu$1, {
@@ -4338,7 +4339,7 @@ function MenuPanelFocusScope({ controlledOpen, children }) {
 		restoreFocus: true
 	}, children));
 }
-const Menu = ({ trigger, children, contentProps, open, onOpenChange, itemHoverAppearance = "default", itemActiveAccentBar = true, itemActiveLabelSemibold = true, panelPadding = "default", popoverOffset = 0, trapFocus = false, FORCE__className: classNameOverride }) => {
+const Menu = ({ trigger, children, contentProps, open, onOpenChange, itemHoverAppearance = "default", itemActiveAccentBar = true, itemActiveLabelSemibold = true, panelPadding = "default", popoverOffset = 2, trapFocus = false, FORCE__className: classNameOverride }) => {
 	const sessionId = React$1.useId();
 	const menuPanel = /* @__PURE__ */ React$1.createElement(Menu$1, {
 		className: clsx(Menu_module_default.menu, classNameOverride),
@@ -4405,6 +4406,17 @@ var TabNav_module_default = {
 const SUB_KEY_SEP = "::";
 /** Delay before closing a subnav on pointer leave (hover), so users can move into the menu. */
 const HOVER_CLOSE_DELAY_MS = 150;
+function getRoutedLinkProps(source) {
+	return {
+		href: source.href,
+		hrefLang: source.hrefLang,
+		target: source.target,
+		rel: source.rel,
+		download: source.download,
+		referrerPolicy: source.referrerPolicy,
+		routerOptions: source.routerOptions
+	};
+}
 function optionalAriaLabelProps(source) {
 	const v = source["aria-label"];
 	return v != null && v !== "" ? { "aria-label": v } : {};
@@ -4414,7 +4426,7 @@ function optionalAriaLabelProps(source) {
 * Tab items are links that redirect to URLs. With `subItems`, horizontal tabs open a dropdown menu; vertical tabs
 * use an inline indented list (Tab Nav | Vertical in Figma).
 */
-const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", centered = false, tabBarExtraSlot, wrap = true, FORCE__className: classNameOverride, "aria-label": ariaLabel = "Navigation", ...props }) => {
+const TabNav = ({ activeKey, onTabPress, onTabClick, items, tabPlacement = "horizontal", centered = false, tabBarExtraSlot, wrap = true, FORCE__className: classNameOverride, "aria-label": ariaLabel = "Navigation", ...props }) => {
 	const [subMenuOpen, setSubMenuOpen] = React$1.useState({});
 	const hoverCloseTimeoutRef = React$1.useRef(null);
 	const pendingKeyboardFocusKeyRef = React$1.useRef(null);
@@ -4575,15 +4587,6 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 		getEnabledMenuItems,
 		getTriggerElement
 	]);
-	const handleTabClick = (key, event) => {
-		const item = items.find((i) => i.key === key);
-		if (item?.disabled) {
-			event.preventDefault();
-			return;
-		}
-		if (item?.subItems?.length) return;
-		onTabClick?.(key, event);
-	};
 	const handleKeyDown = (event, key) => {
 		const itemIndex = items.findIndex((i) => i.key === key);
 		if (itemIndex === -1) return;
@@ -4720,37 +4723,24 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 			}, item.subItems.map((sub) => {
 				const subActive = activeMainKey === item.key && activeSubKey === sub.key;
 				const compoundKey = `${item.key}${SUB_KEY_SEP}${sub.key}`;
-				const subCommon = {
+				return /* @__PURE__ */ React$1.createElement("li", {
+					key: sub.key,
+					className: TabNav_module_default.subTabListItem
+				}, /* @__PURE__ */ React$1.createElement(Link$1, {
 					"data-tab-key": compoundKey,
 					"data-indent": true,
 					"data-variant": "default",
 					"data-active": subActive || void 0,
-					"data-disabled": sub.disabled || void 0,
 					id: `tabnav-${item.key}-${sub.key}`,
 					className: clsx(TabNav_module_default.tab, TabNav_module_default.subTab),
-					"aria-current": subActive ? "page" : void 0
-				};
-				if (sub.href && sub.disabled) return /* @__PURE__ */ React$1.createElement("li", {
-					key: sub.key,
-					className: TabNav_module_default.subTabListItem
-				}, /* @__PURE__ */ React$1.createElement("a", {
-					...subCommon,
-					...optionalAriaLabelProps(sub),
-					href: sub.href,
-					"aria-disabled": true,
-					tabIndex: -1,
-					onClick: (e) => e.preventDefault()
-				}, /* @__PURE__ */ React$1.createElement("span", {
-					className: TabNav_module_default.indentSpacer,
-					"aria-hidden": "true"
-				}), /* @__PURE__ */ React$1.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
-				if (sub.href) return /* @__PURE__ */ React$1.createElement("li", {
-					key: sub.key,
-					className: TabNav_module_default.subTabListItem
-				}, /* @__PURE__ */ React$1.createElement("a", {
-					...subCommon,
+					"aria-current": subActive ? "page" : void 0,
 					...optionalAriaLabelProps(sub),
-					href: sub.href,
+					...getRoutedLinkProps(sub),
+					isDisabled: sub.disabled,
+					onPress: () => {
+						sub.onPress?.();
+						onTabPress?.(compoundKey);
+					},
 					onClick: (e) => {
 						sub.onClick?.(e);
 						onTabClick?.(compoundKey, e);
@@ -4760,26 +4750,6 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 					className: TabNav_module_default.indentSpacer,
 					"aria-hidden": "true"
 				}), /* @__PURE__ */ React$1.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
-				return /* @__PURE__ */ React$1.createElement("li", {
-					key: sub.key,
-					className: TabNav_module_default.subTabListItem
-				}, /* @__PURE__ */ React$1.createElement("span", {
-					...subCommon,
-					...optionalAriaLabelProps(sub),
-					role: "link",
-					"aria-disabled": sub.disabled,
-					tabIndex: sub.disabled ? -1 : 0,
-					onKeyDown: (e) => {
-						if (e.key === "Enter" || e.key === " ") {
-							e.preventDefault();
-							sub.onClick?.(e);
-							onTabClick?.(compoundKey, e);
-						} else handleKeyDown(e, item.key);
-					}
-				}, /* @__PURE__ */ React$1.createElement("span", {
-					className: TabNav_module_default.indentSpacer,
-					"aria-hidden": "true"
-				}), /* @__PURE__ */ React$1.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
 			})));
 		}
 		if (hasSubItems) {
@@ -4803,7 +4773,7 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 				itemActiveLabelSemibold: false,
 				panelPadding: "none",
 				popoverOffset: 1,
-				open: subMenuOpen[item.key],
+				open: Boolean(subMenuOpen[item.key]),
 				onOpenChange: (open) => {
 					if (open) {
 						openSubMenu(item.key);
@@ -4839,36 +4809,30 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
 					ariaLabel: sub["aria-label"],
 					href: sub.href,
 					disabled: sub.disabled,
+					routerOptions: sub.routerOptions,
 					active: activeSubKey === sub.key,
+					onPress: () => {
+						sub.onPress?.();
+						onTabPress?.(`${item.key}${SUB_KEY_SEP}${sub.key}`);
+						closeMenu();
+					},
 					onClick: (e) => {
 						sub.onClick?.(e);
-						closeMenu();
+						onTabClick?.(`${item.key}${SUB_KEY_SEP}${sub.key}`, e);
 					}
 				});
 			}));
 		}
-		if (item.href && !item.disabled) return /* @__PURE__ */ React$1.createElement(Link$1, {
+		return /* @__PURE__ */ React$1.createElement(Link$1, {
 			key: item.key,
 			...commonTabProps,
-			href: item.href,
+			...getRoutedLinkProps(item),
+			isDisabled: item.disabled,
 			"aria-current": ariaCurrentPage ? "page" : void 0,
-			onClick: (e) => handleTabClick(item.key, e),
+			onPress: () => onTabPress?.(item.key),
+			onClick: (e) => onTabClick?.(item.key, e),
 			onKeyDown: (e) => handleKeyDown(e, item.key)
 		}, renderTabContent(item));
-		return /* @__PURE__ */ React$1.createElement("span", {
-			key: item.key,
-			...commonTabProps,
-			role: "link",
-			"aria-disabled": item.disabled,
-			"aria-current": ariaCurrentPage ? "page" : void 0,
-			tabIndex: item.disabled ? -1 : computedTabIndex ?? 0,
-			onKeyDown: (e) => {
-				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault();
-					handleTabClick(item.key, e);
-				} else handleKeyDown(e, item.key);
-			}
-		}, renderTabContent(item));
 	})), tabBarExtraSlot && /* @__PURE__ */ React$1.createElement("div", { className: TabNav_module_default.extraContent }, tabBarExtraSlot)));
 };
 TabNav.displayName = "TabNav";