@ultraviolet/ui 3.21.1 → 3.21.2

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

@@ -16,217 +16,219 @@ import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
 
 //#region src/compositions/Navigation/components/Item/Item.tsx
 var onDragStopTrigger, Item;
-var init_Item = __esmMin(() => {
-	init_Stack();
-	init_Tooltip();
-	init_NavigationProvider();
-	init_Menu();
-	init_MenuItem();
-	init_NestedMenu();
-	init_ItemExpanded();
-	init_ItemProvider();
-	init_styles_css();
-	onDragStopTrigger = (event) => {
-		const element = event.currentTarget;
-		element.style.opacity = "1";
-	};
-	Item = memo(({ children, categoryIcon, label, labelDescription, subLabel, badgeText, badgeSentiment, href, target, rel, onToggle, onClickPinUnpin, toggle, active, noPinButton, type = "default", as, disabled, noExpand = false, index, id, "data-testid": dataTestId, style, alwaysVisible }) => {
-		const context = useNavigation();
-		if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
-		const hasParents = !!useContext(ItemContext);
-		const { expanded, locales, pinnedFeature, pinnedItems, pinLimit, registerItem, showHide } = context;
-		const makeRegisterRef = useRef(null);
-		useEffect(() => {
-			makeRegisterRef.current = () => registerItem({ [id]: {
+function init_Item() {
+	return (init_Item = __esmMin(() => {
+		init_Stack();
+		init_Tooltip();
+		init_NavigationProvider();
+		init_Menu();
+		init_MenuItem();
+		init_NestedMenu();
+		init_ItemExpanded();
+		init_ItemProvider();
+		init_styles_css();
+		onDragStopTrigger = (event) => {
+			const element = event.currentTarget;
+			element.style.opacity = "1";
+		};
+		Item = memo(({ children, categoryIcon, label, labelDescription, subLabel, badgeText, badgeSentiment, href, target, rel, onToggle, onClickPinUnpin, toggle, active, noPinButton, type = "default", as, disabled, noExpand = false, index, id, "data-testid": dataTestId, style, alwaysVisible }) => {
+			const context = useNavigation();
+			if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
+			const hasParents = !!useContext(ItemContext);
+			const { expanded, locales, pinnedFeature, pinnedItems, pinLimit, registerItem, showHide } = context;
+			const makeRegisterRef = useRef(null);
+			useEffect(() => {
+				makeRegisterRef.current = () => registerItem({ [id]: {
+					active,
+					label,
+					onClickPinUnpin,
+					onToggle
+				} });
+			}, [
 				active,
+				id,
 				label,
 				onClickPinUnpin,
+				registerItem,
 				onToggle
-			} });
-		}, [
-			active,
-			id,
-			label,
-			onClickPinUnpin,
-			registerItem,
-			onToggle
-		]);
-		useEffect(() => {
-			if (type !== "pinnedGroup" && pinnedFeature) {
-				var _makeRegisterRef$curr;
-				(_makeRegisterRef$curr = makeRegisterRef.current) === null || _makeRegisterRef$curr === void 0 || _makeRegisterRef$curr.call(makeRegisterRef);
-			}
-		}, [
-			type,
-			pinnedFeature,
-			active,
-			id,
-			label,
-			registerItem
-		]);
-		const hasHrefAndNoChildren = href && !children;
-		const hasPinnedFeatureAndNoChildren = pinnedFeature && !children && !noPinButton;
-		const isItemPinned = pinnedItems.includes(id);
-		const shouldShowPinnedButton = useMemo(() => {
-			if (href || disabled) return false;
-			if (hasPinnedFeatureAndNoChildren && type !== "default") return true;
-			if (hasPinnedFeatureAndNoChildren) return true;
-			return false;
-		}, [
-			disabled,
-			hasPinnedFeatureAndNoChildren,
-			href,
-			type
-		]);
-		const hasActiveChildren = useMemo(() => {
-			if (!children) return false;
-			return Children.map(children, (child) => {
-				if (isValidElement(child)) {
-					if ("to" in child.props) {
-						var _child$props$children;
-						return (_child$props$children = child.props.children) === null || _child$props$children === void 0 ? void 0 : _child$props$children.props.active;
-					}
-					return child.props.active;
+			]);
+			useEffect(() => {
+				if (type !== "pinnedGroup" && pinnedFeature) {
+					var _makeRegisterRef$curr;
+					(_makeRegisterRef$curr = makeRegisterRef.current) === null || _makeRegisterRef$curr === void 0 || _makeRegisterRef$curr.call(makeRegisterRef);
 				}
-				return null;
-			}).includes(true);
-		}, [children]);
-		const isPinDisabled = pinnedItems.length >= pinLimit;
-		const containerTag = useMemo(() => {
-			if (as) return as;
-			if (hasHrefAndNoChildren) return "a";
-			if (noExpand || shouldShowPinnedButton) return "div";
-			return "button";
-		}, [
-			as,
-			hasHrefAndNoChildren,
-			noExpand,
-			shouldShowPinnedButton
-		]);
-		const pinTooltipLocale = useMemo(() => {
-			if (isPinDisabled) return locales["navigation.pin.limit"];
-			if (isItemPinned) return locales["navigation.unpin.tooltip"];
-			return locales["navigation.pin.tooltip"];
-		}, [
-			isItemPinned,
-			isPinDisabled,
-			locales
-		]);
-		if (!alwaysVisible && showHide === "hide") return null;
-		if (expanded) return /* @__PURE__ */ jsx(ItemExpanded, {
-			active,
-			badgeSentiment,
-			badgeText,
-			categoryIcon,
-			containerTag,
-			dataTestId,
-			dataFlipId: !hasParents && categoryIcon ? id : null,
-			disabled,
-			hasActiveChildren,
-			hasPinnedFeatureAndNoChildren,
-			href,
-			id,
-			index,
-			isItemPinned,
-			isPinDisabled,
-			label,
-			labelDescription,
-			noExpand,
-			onClickPinUnpin,
-			onDragStopTrigger,
-			onToggle,
-			pinTooltipLocale,
-			rel,
-			shouldShowPinnedButton,
-			style,
-			subLabel,
-			target,
-			toggle,
-			type,
-			children
-		});
-		if (categoryIcon || Children.count(children) > 0 && !hasParents) return /* @__PURE__ */ jsx(ItemMenu, {
-			active,
-			categoryIcon,
-			"data-flip-id": categoryIcon ? id : void 0,
-			hasActiveChildren,
-			label,
-			style,
-			children
-		});
-		if (Children.count(children) > 0 && hasParents) return /* @__PURE__ */ jsx(NestedMenu, {
-			active,
-			badgeSentiment,
-			badgeText,
-			disabled,
-			hasActiveChildren,
-			hasHrefAndNoChildren,
-			href,
-			id,
-			isItemPinned,
-			isPinDisabled,
-			label,
-			labelDescription,
-			noExpand,
-			onClickPinUnpin,
-			onToggle,
-			pinTooltipLocale,
-			rel,
-			shouldShowPinnedButton,
-			style,
-			target,
-			children
-		});
-		if (hasParents) return /* @__PURE__ */ jsx(ItemMenuItem, {
-			active,
-			badgeSentiment,
-			badgeText,
-			disabled,
-			hasActiveChildren,
-			hasHrefAndNoChildren,
-			href,
-			id,
-			isItemPinned,
-			isPinDisabled,
-			label,
-			labelDescription,
-			noExpand,
-			onClickPinUnpin,
-			onToggle,
-			pinTooltipLocale,
-			rel,
-			shouldShowPinnedButton,
-			style,
-			target
-		});
-		if (!hasParents && href) return /* @__PURE__ */ jsx(Tooltip, {
-			placement: "right",
-			text: label,
-			children: /* @__PURE__ */ jsx(Stack, {
-				alignItems: "center",
+			}, [
+				type,
+				pinnedFeature,
+				active,
+				id,
+				label,
+				registerItem
+			]);
+			const hasHrefAndNoChildren = href && !children;
+			const hasPinnedFeatureAndNoChildren = pinnedFeature && !children && !noPinButton;
+			const isItemPinned = pinnedItems.includes(id);
+			const shouldShowPinnedButton = useMemo(() => {
+				if (href || disabled) return false;
+				if (hasPinnedFeatureAndNoChildren && type !== "default") return true;
+				if (hasPinnedFeatureAndNoChildren) return true;
+				return false;
+			}, [
+				disabled,
+				hasPinnedFeatureAndNoChildren,
+				href,
+				type
+			]);
+			const hasActiveChildren = useMemo(() => {
+				if (!children) return false;
+				return Children.map(children, (child) => {
+					if (isValidElement(child)) {
+						if ("to" in child.props) {
+							var _child$props$children;
+							return (_child$props$children = child.props.children) === null || _child$props$children === void 0 ? void 0 : _child$props$children.props.active;
+						}
+						return child.props.active;
+					}
+					return null;
+				}).includes(true);
+			}, [children]);
+			const isPinDisabled = pinnedItems.length >= pinLimit;
+			const containerTag = useMemo(() => {
+				if (as) return as;
+				if (hasHrefAndNoChildren) return "a";
+				if (noExpand || shouldShowPinnedButton) return "div";
+				return "button";
+			}, [
+				as,
+				hasHrefAndNoChildren,
+				noExpand,
+				shouldShowPinnedButton
+			]);
+			const pinTooltipLocale = useMemo(() => {
+				if (isPinDisabled) return locales["navigation.pin.limit"];
+				if (isItemPinned) return locales["navigation.unpin.tooltip"];
+				return locales["navigation.pin.tooltip"];
+			}, [
+				isItemPinned,
+				isPinDisabled,
+				locales
+			]);
+			if (!alwaysVisible && showHide === "hide") return null;
+			if (expanded) return /* @__PURE__ */ jsx(ItemExpanded, {
+				active,
+				badgeSentiment,
+				badgeText,
+				categoryIcon,
+				containerTag,
+				dataTestId,
+				dataFlipId: !hasParents && categoryIcon ? id : null,
+				disabled,
+				hasActiveChildren,
+				hasPinnedFeatureAndNoChildren,
+				href,
+				id,
+				index,
+				isItemPinned,
+				isPinDisabled,
+				label,
+				labelDescription,
+				noExpand,
+				onClickPinUnpin,
+				onDragStopTrigger,
+				onToggle,
+				pinTooltipLocale,
+				rel,
+				shouldShowPinnedButton,
+				style,
+				subLabel,
+				target,
+				toggle,
+				type,
+				children
+			});
+			if (categoryIcon || Children.count(children) > 0 && !hasParents) return /* @__PURE__ */ jsx(ItemMenu, {
+				active,
+				categoryIcon,
 				"data-flip-id": categoryIcon ? id : void 0,
-				gap: 1,
-				justifyContent: "flex-start",
+				hasActiveChildren,
+				label,
+				style,
+				children
+			});
+			if (Children.count(children) > 0 && hasParents) return /* @__PURE__ */ jsx(NestedMenu, {
+				active,
+				badgeSentiment,
+				badgeText,
+				disabled,
+				hasActiveChildren,
+				hasHrefAndNoChildren,
+				href,
+				id,
+				isItemPinned,
+				isPinDisabled,
+				label,
+				labelDescription,
+				noExpand,
+				onClickPinUnpin,
+				onToggle,
+				pinTooltipLocale,
+				rel,
+				shouldShowPinnedButton,
+				style,
+				target,
+				children
+			});
+			if (hasParents) return /* @__PURE__ */ jsx(ItemMenuItem, {
+				active,
+				badgeSentiment,
+				badgeText,
+				disabled,
+				hasActiveChildren,
+				hasHrefAndNoChildren,
+				href,
+				id,
+				isItemPinned,
+				isPinDisabled,
+				label,
+				labelDescription,
+				noExpand,
+				onClickPinUnpin,
+				onToggle,
+				pinTooltipLocale,
+				rel,
+				shouldShowPinnedButton,
+				style,
+				target
+			});
+			if (!hasParents && href) return /* @__PURE__ */ jsx(Tooltip, {
+				placement: "right",
+				text: label,
 				children: /* @__PURE__ */ jsx(Stack, {
 					alignItems: "center",
-					as: containerTag,
-					className: cn(navigationStyle.itemContainer({ disabled })),
+					"data-flip-id": categoryIcon ? id : void 0,
 					gap: 1,
-					href,
-					justifyContent: "center",
-					rel,
-					target,
-					children: /* @__PURE__ */ jsx(OpenInNewIcon, {
-						prominence: "weak",
-						sentiment: "neutral"
+					justifyContent: "flex-start",
+					children: /* @__PURE__ */ jsx(Stack, {
+						alignItems: "center",
+						as: containerTag,
+						className: cn(navigationStyle.itemContainer({ disabled })),
+						gap: 1,
+						href,
+						justifyContent: "center",
+						rel,
+						target,
+						children: /* @__PURE__ */ jsx(OpenInNewIcon, {
+							prominence: "weak",
+							sentiment: "neutral"
+						})
 					})
 				})
-			})
+			});
+			return null;
 		});
-		return null;
-	});
-	Item.displayName = "Navigation.Item";
-});
+		Item.displayName = "Navigation.Item";
+	}))();
+}
 
 //#endregion
 init_Item();

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

@@ -15,125 +15,127 @@ import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
 
 //#region src/compositions/Navigation/components/Item/ItemExpanded.tsx
 var ItemExpanded;
-var init_ItemExpanded = __esmMin(() => {
-	init_Stack();
-	init_NavigationProvider();
-	init_Badge();
-	init_Children();
-	init_Content();
-	init_PinnedButton();
-	init_styles_css();
-	ItemExpanded = ({ categoryIcon, containerTag, disabled, active, noExpand, subLabel, shouldShowPinnedButton, children, dataTestId, dataFlipId, 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, 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]);
-		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Stack, {
-			alignItems: children && !noExpand ? "flex-start" : "center",
-			"aria-expanded": ariaExpanded,
-			as: containerTag,
-			className: cn(navigationStyle.itemContainer({
-				disabled,
-				hasActive: hasActiveChildren,
-				isActive: !!active,
-				noExpand,
-				expanding: animation === "expand"
-			}), navigationStyle.itemVariants({
-				shouldHaveWeakText,
-				showDraggableIcon,
-				showPinIcon
-			})),
-			"data-testid": dataTestId,
-			"data-flip-id": dataFlipId,
-			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
-			}), animation === "collapse" ? null : /* @__PURE__ */ jsxs(Stack, {
-				alignItems: "center",
+function init_ItemExpanded() {
+	return (init_ItemExpanded = __esmMin(() => {
+		init_Stack();
+		init_NavigationProvider();
+		init_Badge();
+		init_Children();
+		init_Content();
+		init_PinnedButton();
+		init_styles_css();
+		ItemExpanded = ({ categoryIcon, containerTag, disabled, active, noExpand, subLabel, shouldShowPinnedButton, children, dataTestId, dataFlipId, 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, 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]);
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Stack, {
+				alignItems: children && !noExpand ? "flex-start" : "center",
+				"aria-expanded": ariaExpanded,
+				as: containerTag,
+				className: cn(navigationStyle.itemContainer({
+					disabled,
+					hasActive: hasActiveChildren,
+					isActive: !!active,
+					noExpand,
+					expanding: animation === "expand"
+				}), navigationStyle.itemVariants({
+					shouldHaveWeakText,
+					showDraggableIcon,
+					showPinIcon
+				})),
+				"data-testid": dataTestId,
+				"data-flip-id": dataFlipId,
 				direction: "row",
-				gap: href ? 1 : void 0,
-				children: [
-					badgeText || hasPinnedFeatureAndNoChildren ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ItemBadge, {
-						badgeSentiment,
-						badgeText,
-						disabled
-					}), /* @__PURE__ */ jsx(ItemPinnedButton, {
-						active,
-						id,
-						isItemPinned,
-						isPinDisabled,
-						onClickPinUnpin,
-						pinTooltipLocale,
-						shouldShowPinnedButton
-					})] }) : null,
-					hasHrefAndNoChildren && target === "_blank" ? /* @__PURE__ */ jsx(OpenInNewIcon, {
-						disabled,
-						prominence: "default",
-						sentiment: "neutral"
-					}) : null,
-					children && !noExpand ? /* @__PURE__ */ jsx(ArrowIcon, {
-						className: navigationStyle.itemArrowIcon,
-						prominence: "weak",
-						sentiment: "neutral"
-					}) : null
-				]
-			})]
-		}), children && expanded ? /* @__PURE__ */ jsx(ItemChildren, {
-			internalExpanded,
-			noExpand,
-			type,
-			children
-		}) : null] });
-	};
-});
+				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
+				}), animation === "collapse" ? null : /* @__PURE__ */ jsxs(Stack, {
+					alignItems: "center",
+					direction: "row",
+					gap: href ? 1 : void 0,
+					children: [
+						badgeText || hasPinnedFeatureAndNoChildren ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ItemBadge, {
+							badgeSentiment,
+							badgeText,
+							disabled
+						}), /* @__PURE__ */ jsx(ItemPinnedButton, {
+							active,
+							id,
+							isItemPinned,
+							isPinDisabled,
+							onClickPinUnpin,
+							pinTooltipLocale,
+							shouldShowPinnedButton
+						})] }) : null,
+						hasHrefAndNoChildren && target === "_blank" ? /* @__PURE__ */ jsx(OpenInNewIcon, {
+							disabled,
+							prominence: "default",
+							sentiment: "neutral"
+						}) : null,
+						children && !noExpand ? /* @__PURE__ */ jsx(ArrowIcon, {
+							className: navigationStyle.itemArrowIcon,
+							prominence: "weak",
+							sentiment: "neutral"
+						}) : null
+					]
+				})]
+			}), children && expanded ? /* @__PURE__ */ jsx(ItemChildren, {
+				internalExpanded,
+				noExpand,
+				type,
+				children
+			}) : null] });
+		};
+	}))();
+}
 
 //#endregion
 init_ItemExpanded();