@ultraviolet/ui 3.11.1 → 3.12.0

package/dist/components/compositions/Navigation/components/ItemExpanded.js

@@ -1,214 +1,225 @@
-import { __name } from "../../../../_virtual/_rolldown/runtime.js";
-import { Stack } from "../../../Stack/index.js";
-import { Text } from "../../../Text/index.js";
-import { useNavigation } from "../NavigationProvider.js";
-import { Expandable } from "../../../Expandable/index.js";
-import { navigationItemCategoryIcon, navigationItemContainer, navigationItemContainerAnimated, navigationItemDragIcon, navigationItemPadded, navigationItemPaddingStack, navigationItemStackIcon, navigationItemVariants, navigationItemWrapText } from "./items.css.js";
-import { ItemBadge, ItemPinnedButton } from "./ItemFragments.js";
-import { ItemContext, ItemProvider } from "./ItemProvider.js";
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../Stack/index.js";
+import { Text, init_Text } from "../../../Text/index.js";
+import { init_NavigationProvider, useNavigation } from "../NavigationProvider.js";
+import { init_styles_css, navigationStyle } from "../styles.css.js";
+import { Expandable, init_Expandable } from "../../../Expandable/index.js";
+import { ItemBadge, ItemPinnedButton, init_ItemFragments } from "./ItemFragments.js";
+import { ItemContext, ItemProvider, init_ItemProvider } from "./ItemProvider.js";
 import { useCallback, useContext, useMemo, useReducer } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@ultraviolet/utils";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
 import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
 import { ArrowRightIcon } from "@ultraviolet/icons/ArrowRightIcon";
 import { DragIcon } from "@ultraviolet/icons/DragIcon";
 
 //#region src/components/compositions/Navigation/components/ItemExpanded.tsx
-const ItemChildren = ({ noExpand, type, children, internalExpanded }) => {
-	const context = useNavigation();
-	if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
-	const { animation, animationType, shouldAnimate } = context;
-	return /* @__PURE__ */ jsx(Fragment$1, { children: noExpand ? /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(Stack, {
-		className: noExpand || type === "pinnedGroup" ? "" : navigationItemPaddingStack({ hide: shouldAnimate && animationType === "complex" && animation === "expand" }),
-		width: animation ? "100%" : void 0,
-		children
-	}) }) : /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(Expandable, {
-		animationDuration: 0,
-		opened: internalExpanded,
-		children: /* @__PURE__ */ jsx(Stack, {
-			className: noExpand || type === "pinnedGroup" ? "" : navigationItemPaddingStack({ hide: shouldAnimate && animationType === "complex" && animation === "expand" }),
+var ItemChildren, ItemContent, ItemExpanded;
+var init_ItemExpanded = __esmMin(() => {
+	init_Expandable();
+	init_Stack();
+	init_Text();
+	init_NavigationProvider();
+	init_styles_css();
+	init_ItemFragments();
+	init_ItemProvider();
+	ItemChildren = ({ noExpand, type, children, internalExpanded }) => {
+		const context = useNavigation();
+		if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
+		const { animation, animationType, shouldAnimate } = context;
+		return /* @__PURE__ */ jsx(Fragment$1, { children: noExpand ? /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(Stack, {
+			className: noExpand || type === "pinnedGroup" ? "" : navigationStyle.itemPaddingStack({ hide: shouldAnimate && animationType === "complex" && animation === "expand" }),
 			width: animation ? "100%" : void 0,
 			children
-		})
-	}) }) });
-};
-const ItemContent = ({ disabled, active, categoryIcon, type, label, hasActiveChildren, labelDescription, noExpand, subLabel }) => {
-	const context = useNavigation();
-	if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
-	const { expanded, animation } = context;
-	const hasParents = !!useContext(ItemContext);
-	return /* @__PURE__ */ jsxs(Stack, {
-		alignItems: categoryIcon ? "flex-start" : "center",
-		direction: "row",
-		gap: 1,
-		justifyContent: "center",
-		children: [
-			categoryIcon ? /* @__PURE__ */ jsx(Stack, {
-				alignItems: "center",
-				className: navigationItemCategoryIcon,
-				justifyContent: "center",
-				children: categoryIcon
-			}) : null,
-			type === "pinned" && expanded ? /* @__PURE__ */ jsx(DragIcon, {
-				className: navigationItemDragIcon,
-				disabled,
-				prominence: "default",
-				sentiment: "neutral",
-				size: "small"
-			}) : null,
-			/* @__PURE__ */ jsxs(Stack, { children: [animation ? null : /* @__PURE__ */ jsxs(Text, {
-				as: "span",
-				className: navigationItemWrapText({
-					disabled,
-					weak: hasActiveChildren && !noExpand && !disabled && !!active
-				}),
-				"data-animation": animation,
-				disabled,
-				prominence: (categoryIcon || !hasParents) && !active ? "strong" : "default",
-				sentiment: active ? "primary" : "neutral",
-				variant: "bodySmallStrong",
-				whiteSpace: "pre-wrap",
-				children: [label, labelDescription ? /* @__PURE__ */ jsx("span", {
-					className: navigationItemPadded,
-					children: labelDescription
-				}) : null]
-			}), subLabel && !animation ? /* @__PURE__ */ jsx(Text, {
-				as: "span",
-				className: navigationItemWrapText({
-					disabled,
-					weak: hasActiveChildren && !noExpand && !disabled && !!active
-				}),
-				"data-animation": animation,
-				disabled,
-				prominence: "weak",
-				sentiment: "neutral",
-				variant: "caption",
-				whiteSpace: "pre-wrap",
-				children: subLabel
-			}) : null] })
-		]
-	});
-};
-const ItemExpanded = ({ categoryIcon, containerTag, disabled, active, noExpand, subLabel, shouldShowPinnedButton, children, dataTestId, type, href, rel, id, style, target, label, labelDescription, hasPinnedFeatureAndNoChildren, badgeText, badgeSentiment, isItemPinned, pinTooltipLocale, onClickPinUnpin, isPinDisabled, onToggle, index, onDragStopTrigger, toggle, hasActiveChildren }) => {
-	const context = useNavigation();
-	const [internalExpanded, onToggleExpand] = useReducer((prevState) => !prevState, Boolean(toggle));
-	if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
-	const { expanded, animation, shouldAnimate, animationType, pinnedFeature } = context;
-	const showDraggableIcon = !noExpand && pinnedFeature && shouldShowPinnedButton && !disabled;
-	const showPinIcon = !(noExpand || disabled) && shouldShowPinnedButton && pinnedFeature;
-	const shouldHaveWeakText = !!children && !active && shouldShowPinnedButton && !disabled;
-	const hasHrefAndNoChildren = href && !children;
-	const triggerToggle = useCallback(() => {
-		onToggleExpand();
-		onToggle === null || onToggle === void 0 || onToggle(internalExpanded);
-	}, [internalExpanded, onToggle]);
-	const ArrowIcon = useMemo(() => internalExpanded ? ArrowDownIcon : ArrowRightIcon, [internalExpanded]);
-	const onDragStart = useCallback((event) => {
-		if (expanded) {
-			event.dataTransfer.setData("text/plain", JSON.stringify({
-				index,
-				label
-			}));
-			const element = event.currentTarget;
-			element.style.opacity = "0.5";
-		}
-	}, [
-		expanded,
-		index,
-		label
-	]);
-	const onDragEnd = useCallback((event) => expanded ? onDragStopTrigger(event) : void 0, [expanded, onDragStopTrigger]);
-	const ariaExpanded = useMemo(() => {
-		if (hasHrefAndNoChildren && internalExpanded) return true;
-		if (hasHrefAndNoChildren && !internalExpanded) return false;
-	}, [hasHrefAndNoChildren, internalExpanded]);
-	const computedAnimation = animation === "collapse" ? "collapse" : "expand";
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Stack, {
-		alignItems: categoryIcon ? "flex-start" : "center",
-		"aria-expanded": ariaExpanded,
-		as: containerTag,
-		className: cn(navigationItemContainer({
-			disabled,
-			hasActive: hasActiveChildren,
-			isActive: !!active,
-			noExpand,
-			subLabel: !!subLabel
-		}), navigationItemContainerAnimated({
-			animated: shouldAnimate && animationType === "complex",
-			animation: computedAnimation
-		}), navigationItemVariants({
-			shouldHaveWeakText,
-			showDraggableIcon,
-			showPinIcon
-		})),
-		"data-testid": dataTestId,
-		direction: "row",
-		disabled: containerTag === "button" ? disabled : void 0,
-		draggable: type === "pinned" && expanded,
-		gap: 1,
-		href,
-		id,
-		justifyContent: "space-between",
-		onClick: triggerToggle,
-		onDragEnd,
-		onDragStart,
-		rel,
-		style,
-		target,
-		children: [/* @__PURE__ */ jsx(ItemContent, {
-			active,
-			categoryIcon,
-			disabled,
-			hasActiveChildren,
-			label,
-			labelDescription,
-			noExpand,
-			subLabel,
-			type
-		}), /* @__PURE__ */ jsxs(Stack, {
-			alignItems: "center",
+		}) }) : /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(Expandable, {
+			animationDuration: 0,
+			opened: internalExpanded,
+			children: /* @__PURE__ */ jsx(Stack, {
+				className: noExpand || type === "pinnedGroup" ? "" : navigationStyle.itemPaddingStack({ hide: shouldAnimate && animationType === "complex" && animation === "expand" }),
+				width: animation ? "100%" : void 0,
+				children
+			})
+		}) }) });
+	};
+	ItemContent = ({ disabled, active, categoryIcon, type, label, hasActiveChildren, labelDescription, noExpand, subLabel }) => {
+		const context = useNavigation();
+		if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
+		const { expanded, animation } = context;
+		const hasParents = !!useContext(ItemContext);
+		return /* @__PURE__ */ jsxs(Stack, {
+			alignItems: categoryIcon ? "flex-start" : "center",
 			direction: "row",
-			gap: href ? 1 : void 0,
+			gap: 1,
+			justifyContent: "center",
 			children: [
-				badgeText || hasPinnedFeatureAndNoChildren ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ItemBadge, {
-					animation: !!animation,
-					badgeSentiment,
-					badgeText,
-					disabled
-				}), /* @__PURE__ */ jsx(ItemPinnedButton, {
-					active,
-					id,
-					isItemPinned,
-					isPinDisabled,
-					onClickPinUnpin,
-					pinTooltipLocale,
-					shouldShowPinnedButton
-				})] }) : null,
-				hasHrefAndNoChildren && target === "_blank" && !animation ? /* @__PURE__ */ jsx(OpenInNewIcon, {
+				categoryIcon ? /* @__PURE__ */ jsx(Stack, {
+					alignItems: "center",
+					className: navigationStyle.itemCategoryIcon,
+					justifyContent: "center",
+					children: categoryIcon
+				}) : null,
+				type === "pinned" && expanded ? /* @__PURE__ */ jsx(DragIcon, {
+					className: navigationStyle.itemDragIcon,
 					disabled,
 					prominence: "default",
-					sentiment: "neutral"
+					sentiment: "neutral",
+					size: "small"
 				}) : null,
-				children && !animation && !noExpand ? /* @__PURE__ */ jsx(Stack, {
-					alignItems: "center",
-					className: navigationItemStackIcon,
-					direction: "row",
-					gap: 1,
-					children: /* @__PURE__ */ jsx(ArrowIcon, {
-						prominence: "weak",
-						sentiment: "neutral"
-					})
-				}) : null
+				/* @__PURE__ */ jsxs(Stack, { children: [animation ? null : /* @__PURE__ */ jsxs(Text, {
+					as: "span",
+					className: navigationStyle.itemWrapText({
+						disabled,
+						weak: hasActiveChildren && !noExpand && !disabled && !!active
+					}),
+					"data-animation": animation,
+					disabled,
+					prominence: (categoryIcon || !hasParents) && !active ? "strong" : "default",
+					sentiment: active ? "primary" : "neutral",
+					variant: "bodySmallStrong",
+					whiteSpace: "pre-wrap",
+					children: [label, labelDescription ? /* @__PURE__ */ jsx("span", {
+						className: navigationStyle.itemPadded,
+						children: labelDescription
+					}) : null]
+				}), subLabel && !animation ? /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					className: navigationStyle.itemWrapText({
+						disabled,
+						weak: hasActiveChildren && !noExpand && !disabled && !!active
+					}),
+					"data-animation": animation,
+					disabled,
+					prominence: "weak",
+					sentiment: "neutral",
+					variant: "caption",
+					whiteSpace: "pre-wrap",
+					children: subLabel
+				}) : null] })
 			]
-		})]
-	}), children ? /* @__PURE__ */ jsx(ItemChildren, {
-		internalExpanded,
-		noExpand,
-		type,
-		children
-	}) : null] });
-};
+		});
+	};
+	ItemExpanded = ({ categoryIcon, containerTag, disabled, active, noExpand, subLabel, shouldShowPinnedButton, children, dataTestId, type, href, rel, id, style, target, label, labelDescription, hasPinnedFeatureAndNoChildren, badgeText, badgeSentiment, isItemPinned, pinTooltipLocale, onClickPinUnpin, isPinDisabled, onToggle, index, onDragStopTrigger, toggle, hasActiveChildren }) => {
+		const context = useNavigation();
+		const [internalExpanded, onToggleExpand] = useReducer((prevState) => !prevState, Boolean(toggle));
+		if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
+		const { expanded, animation, shouldAnimate, animationType, pinnedFeature } = context;
+		const showDraggableIcon = !noExpand && pinnedFeature && shouldShowPinnedButton && !disabled;
+		const showPinIcon = !(noExpand || disabled) && shouldShowPinnedButton && pinnedFeature;
+		const shouldHaveWeakText = !!children && !active && shouldShowPinnedButton && !disabled;
+		const hasHrefAndNoChildren = href && !children;
+		const triggerToggle = useCallback(() => {
+			onToggleExpand();
+			onToggle === null || onToggle === void 0 || onToggle(internalExpanded);
+		}, [internalExpanded, onToggle]);
+		const ArrowIcon = useMemo(() => internalExpanded ? ArrowDownIcon : ArrowRightIcon, [internalExpanded]);
+		const onDragStart = useCallback((event) => {
+			if (expanded) {
+				event.dataTransfer.setData("text/plain", JSON.stringify({
+					index,
+					label
+				}));
+				const element = event.currentTarget;
+				element.style.opacity = "0.5";
+			}
+		}, [
+			expanded,
+			index,
+			label
+		]);
+		const onDragEnd = useCallback((event) => expanded ? onDragStopTrigger(event) : void 0, [expanded, onDragStopTrigger]);
+		const ariaExpanded = useMemo(() => {
+			if (hasHrefAndNoChildren && internalExpanded) return true;
+			if (hasHrefAndNoChildren && !internalExpanded) return false;
+		}, [hasHrefAndNoChildren, internalExpanded]);
+		const computedAnimation = animation === "collapse" ? "collapse" : "expand";
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Stack, {
+			alignItems: categoryIcon ? "flex-start" : "center",
+			"aria-expanded": ariaExpanded,
+			as: containerTag,
+			className: cn(navigationStyle.itemContainer({
+				disabled,
+				hasActive: hasActiveChildren,
+				isActive: !!active,
+				noExpand,
+				subLabel: !!subLabel
+			}), navigationStyle.itemContainerAnimated({
+				animated: shouldAnimate && animationType === "complex",
+				animation: computedAnimation
+			}), navigationStyle.itemVariants({
+				shouldHaveWeakText,
+				showDraggableIcon,
+				showPinIcon
+			})),
+			"data-testid": dataTestId,
+			direction: "row",
+			disabled: containerTag === "button" ? disabled : void 0,
+			draggable: type === "pinned" && expanded,
+			gap: 1,
+			href,
+			id,
+			justifyContent: "space-between",
+			onClick: triggerToggle,
+			onDragEnd,
+			onDragStart,
+			rel,
+			style,
+			target,
+			children: [/* @__PURE__ */ jsx(ItemContent, {
+				active,
+				categoryIcon,
+				disabled,
+				hasActiveChildren,
+				label,
+				labelDescription,
+				noExpand,
+				subLabel,
+				type
+			}), /* @__PURE__ */ jsxs(Stack, {
+				alignItems: "center",
+				direction: "row",
+				gap: href ? 1 : void 0,
+				children: [
+					badgeText || hasPinnedFeatureAndNoChildren ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ItemBadge, {
+						animation: !!animation,
+						badgeSentiment,
+						badgeText,
+						disabled
+					}), /* @__PURE__ */ jsx(ItemPinnedButton, {
+						active,
+						id,
+						isItemPinned,
+						isPinDisabled,
+						onClickPinUnpin,
+						pinTooltipLocale,
+						shouldShowPinnedButton
+					})] }) : null,
+					hasHrefAndNoChildren && target === "_blank" && !animation ? /* @__PURE__ */ jsx(OpenInNewIcon, {
+						disabled,
+						prominence: "default",
+						sentiment: "neutral"
+					}) : null,
+					children && !animation && !noExpand ? /* @__PURE__ */ jsx(Stack, {
+						alignItems: "center",
+						className: navigationStyle.itemStackIcon,
+						direction: "row",
+						gap: 1,
+						children: /* @__PURE__ */ jsx(ArrowIcon, {
+							prominence: "weak",
+							sentiment: "neutral"
+						})
+					}) : null
+				]
+			})]
+		}), children ? /* @__PURE__ */ jsx(ItemChildren, {
+			internalExpanded,
+			noExpand,
+			type,
+			children
+		}) : null] });
+	};
+});
 
 //#endregion
-export { ItemExpanded };
+init_ItemExpanded();
+export { ItemExpanded, init_ItemExpanded };

package/dist/components/compositions/Navigation/components/ItemFragments.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemFragments.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/ItemFragments.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAQzD,eAAO,MAAM,SAAS;;oDAkBZ,CAAA;AAEV,eAAO,MAAM,gBAAgB,6SA4E5B,CAAA"}
+{"version":3,"file":"ItemFragments.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/ItemFragments.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAEzD,eAAO,MAAM,SAAS;;oDAkBZ,CAAA;AAEV,eAAO,MAAM,gBAAgB,6SA8E5B,CAAA"}

package/dist/components/compositions/Navigation/components/ItemFragments.js

@@ -1,63 +1,71 @@
-import { __name } from "../../../../_virtual/_rolldown/runtime.js";
-import { Tooltip } from "../../../Tooltip/index.js";
-import { useNavigation } from "../NavigationProvider.js";
-import { Badge } from "../../../Badge/index.js";
-import { navigationItemBadge, navigationItemPinIcon, navigationItemPinnedButton, navigationItemRelative } from "./items.css.js";
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Tooltip, init_Tooltip } from "../../../Tooltip/index.js";
+import { init_NavigationProvider, useNavigation } from "../NavigationProvider.js";
+import { init_styles_css, navigationStyle } from "../styles.css.js";
+import { Badge, init_Badge } from "../../../Badge/index.js";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { PinOutlineIcon } from "@ultraviolet/icons/PinOutlineIcon";
 import { UnpinIcon } from "@ultraviolet/icons/UnpinIcon";
 
 //#region src/components/compositions/Navigation/components/ItemFragments.tsx
-const ItemBadge = ({ badgeText, animation, disabled, badgeSentiment }) => badgeText && !animation ? /* @__PURE__ */ jsx(Badge, {
-	className: navigationItemBadge,
-	disabled,
-	prominence: "strong",
-	sentiment: badgeSentiment,
-	size: "small",
-	children: badgeText
-}) : null;
-const ItemPinnedButton = ({ shouldShowPinnedButton, isItemPinned, pinTooltipLocale, isPinDisabled, id, active, onClickPinUnpin }) => {
-	const context = useNavigation();
-	if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
-	const { locales, pinItem, unpinItem, pinnedItems, pinLimit } = context;
-	const PinUnpinIcon = useMemo(() => isItemPinned ? UnpinIcon : PinOutlineIcon, [isItemPinned]);
-	return shouldShowPinnedButton ? /* @__PURE__ */ jsx(Tooltip, {
-		placement: "right",
-		tabIndex: -1,
-		text: isItemPinned ? locales["navigation.unpin.tooltip"] : pinTooltipLocale,
-		children: /* @__PURE__ */ jsx("div", {
-			className: navigationItemRelative,
-			children: /* @__PURE__ */ jsx("button", {
-				"aria-disabled": isItemPinned ? false : isPinDisabled,
-				"aria-label": isItemPinned ? "unpin" : "pin",
-				className: navigationItemPinnedButton,
-				onClick: (event) => {
-					if (pinnedItems.length < pinLimit || isItemPinned) {
-						event.preventDefault();
-						event.stopPropagation();
-						let newValue;
-						if (isItemPinned) newValue = unpinItem(id);
-						else newValue = pinItem(id);
-						onClickPinUnpin === null || onClickPinUnpin === void 0 || onClickPinUnpin({
-							id,
-							state: isItemPinned ? "unpin" : "pin",
-							totalPinned: newValue
-						});
-					}
-				},
-				onKeyDown: () => {},
-				type: "button",
-				children: /* @__PURE__ */ jsx(PinUnpinIcon, {
-					className: navigationItemPinIcon[active ? "active" : "inactive"],
-					disabled: isItemPinned ? false : isPinDisabled,
-					sentiment: active ? "primary" : "neutral",
-					size: "medium"
+var ItemBadge, ItemPinnedButton;
+var init_ItemFragments = __esmMin(() => {
+	init_Badge();
+	init_Tooltip();
+	init_NavigationProvider();
+	init_styles_css();
+	ItemBadge = ({ badgeText, animation, disabled, badgeSentiment }) => badgeText && !animation ? /* @__PURE__ */ jsx(Badge, {
+		className: navigationStyle.itemBadge,
+		disabled,
+		prominence: "strong",
+		sentiment: badgeSentiment,
+		size: "small",
+		children: badgeText
+	}) : null;
+	ItemPinnedButton = ({ shouldShowPinnedButton, isItemPinned, pinTooltipLocale, isPinDisabled, id, active, onClickPinUnpin }) => {
+		const context = useNavigation();
+		if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
+		const { locales, pinItem, unpinItem, pinnedItems, pinLimit } = context;
+		const PinUnpinIcon = useMemo(() => isItemPinned ? UnpinIcon : PinOutlineIcon, [isItemPinned]);
+		return shouldShowPinnedButton ? /* @__PURE__ */ jsx(Tooltip, {
+			placement: "right",
+			tabIndex: -1,
+			text: isItemPinned ? locales["navigation.unpin.tooltip"] : pinTooltipLocale,
+			children: /* @__PURE__ */ jsx("div", {
+				className: navigationStyle.itemRelative,
+				children: /* @__PURE__ */ jsx("button", {
+					"aria-disabled": isItemPinned ? false : isPinDisabled,
+					"aria-label": isItemPinned ? "unpin" : "pin",
+					className: navigationStyle.itemPinnedButton,
+					onClick: (event) => {
+						if (pinnedItems.length < pinLimit || isItemPinned) {
+							event.preventDefault();
+							event.stopPropagation();
+							let newValue;
+							if (isItemPinned) newValue = unpinItem(id);
+							else newValue = pinItem(id);
+							onClickPinUnpin === null || onClickPinUnpin === void 0 || onClickPinUnpin({
+								id,
+								state: isItemPinned ? "unpin" : "pin",
+								totalPinned: newValue
+							});
+						}
+					},
+					onKeyDown: () => {},
+					type: "button",
+					children: /* @__PURE__ */ jsx(PinUnpinIcon, {
+						className: navigationStyle.itemPinIcon[active ? "active" : "inactive"],
+						disabled: isItemPinned ? false : isPinDisabled,
+						sentiment: active ? "primary" : "neutral",
+						size: "medium"
+					})
 				})
 			})
-		})
-	}) : null;
-};
+		}) : null;
+	};
+});
 
 //#endregion
-export { ItemBadge, ItemPinnedButton };
+init_ItemFragments();
+export { ItemBadge, ItemPinnedButton, init_ItemFragments };

package/dist/components/compositions/Navigation/components/ItemMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/ItemMenu.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAavE,eAAO,MAAM,QAAQ,iIAmEpB,CAAA;AAED,eAAO,MAAM,YAAY,6TAyGxB,CAAA"}
+{"version":3,"file":"ItemMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/ItemMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIvE,eAAO,MAAM,QAAQ,iIAmEpB,CAAA;AAED,eAAO,MAAM,YAAY,6TA2GxB,CAAA"}