@ultraviolet/plus 3.4.5 → 3.5.0

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

@@ -1,615 +1,448 @@
-"use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { useNavigation } from "../NavigationProvider.js";
+import { ItemContext, ItemProvider } from "./ItemProvider.js";
+import { navigationItemAnimatedIcon, navigationItemBadge, navigationItemCategoryIcon, navigationItemContainer, navigationItemContainerAnimated, navigationItemDragIcon, navigationItemMenu, navigationItemMenuContainer, navigationItemMenuPinned, navigationItemMenuStack, navigationItemPadded, navigationItemPaddingStack, navigationItemPinIcon, navigationItemPinnedButton, navigationItemRelative, navigationItemShowDraggable, navigationItemShowPinButton, navigationItemStackIcon, navigationItemWeakText, navigationItemWrapText } from "./items.css.js";
 import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
+import { Badge, Button, Expandable, Menu, Stack, Text, Tooltip } from "@ultraviolet/ui";
+import { cn } from "@ultraviolet/utils";
+import { Children, isValidElement, memo, useCallback, useContext, useEffect, useMemo, useReducer, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
 import { ArrowRightIcon } from "@ultraviolet/icons/ArrowRightIcon";
 import { OrganizationDashboardCategoryIcon } from "@ultraviolet/icons/category";
 import { DragIcon } from "@ultraviolet/icons/DragIcon";
-import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
 import { PinOutlineIcon } from "@ultraviolet/icons/PinOutlineIcon";
 import { UnpinIcon } from "@ultraviolet/icons/UnpinIcon";
-import { Stack, Text, Badge, Tooltip, Expandable, Menu, Button } from "@ultraviolet/ui";
-import { cn } from "@ultraviolet/utils";
-import { memo, useContext, useRef, useEffect, useReducer, useCallback, useMemo, Children, isValidElement } from "react";
-import { useNavigation } from "../NavigationProvider.js";
-import { ItemContext, ItemProvider } from "./ItemProvider.js";
-import { navigationItemCategoryIcon, navigationItemDragIcon, navigationItemWrapText, navigationItemPadded, navigationItemBadge, navigationItemRelative, navigationItemPinnedButton, navigationItemPinIcon, navigationItemStackIcon, navigationItemContainer, navigationItemContainerAnimated, navigationItemShowDraggable, navigationItemShowPinButton, navigationItemWeakText, navigationItemPaddingStack, navigationItemMenuStack, navigationItemMenuContainer, navigationItemAnimatedIcon, navigationItemMenu, navigationItemMenuPinned } from "./items.css.js";
+
+//#region src/components/Navigation/components/Item.tsx
 const onDragStopTrigger = (event) => {
-  const element = event.currentTarget;
-  element.style.opacity = "1";
-};
-const 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 itemProvider = useContext(ItemContext);
-    const hasParents = !!itemProvider;
-    const {
-      expanded,
-      locales,
-      pinnedFeature,
-      pinItem,
-      unpinItem,
-      pinnedItems,
-      pinLimit,
-      animation,
-      registerItem,
-      shouldAnimate,
-      animationType,
-      showHide
-    } = context;
-    const makeRegisterRef = useRef(null);
-    useEffect(() => {
-      makeRegisterRef.current = () => registerItem({
-        [id]: { active, label, onClickPinUnpin, onToggle }
-      });
-    }, [active, id, label, onClickPinUnpin, registerItem, onToggle]);
-    useEffect(() => {
-      if (type !== "pinnedGroup" && pinnedFeature) {
-        makeRegisterRef.current?.();
-      }
-    }, [type, pinnedFeature, active, id, label, registerItem]);
-    const [internalExpanded, onToggleExpand] = useReducer(
-      (prevState) => !prevState,
-      Boolean(toggle)
-    );
-    const triggerToggle = useCallback(() => {
-      onToggleExpand();
-      onToggle?.(internalExpanded);
-    }, [internalExpanded, onToggle]);
-    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) {
-            return child.props.children?.props.active;
-          }
-          return child.props.active;
-        }
-        return null;
-      }).includes(true);
-    }, [children]);
-    const containerTag = useMemo(() => {
-      if (as) {
-        return as;
-      }
-      if (hasHrefAndNoChildren) {
-        return "a";
-      }
-      if (noExpand) {
-        return "div";
-      }
-      return "button";
-    }, [as, hasHrefAndNoChildren, noExpand]);
-    const ArrowIcon = useMemo(
-      () => internalExpanded ? ArrowDownIcon : ArrowRightIcon,
-      [internalExpanded]
-    );
-    const PinUnpinIcon = useMemo(
-      () => isItemPinned ? UnpinIcon : PinOutlineIcon,
-      [isItemPinned]
-    );
-    const ariaExpanded = useMemo(() => {
-      if (hasHrefAndNoChildren && internalExpanded) {
-        return true;
-      }
-      if (hasHrefAndNoChildren && !internalExpanded) {
-        return false;
-      }
-      return void 0;
-    }, [hasHrefAndNoChildren, internalExpanded]);
-    const isPinDisabled = pinnedItems.length >= pinLimit;
-    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]);
-    const onDragStart = useCallback(
-      (event) => {
-        if (expanded) {
-          event.dataTransfer.setData(
-            "text/plain",
-            JSON.stringify({ index, label })
-          );
-          const element = event.currentTarget;
-          element.style.opacity = "0.5";
-        }
-        return void 0;
-      },
-      [expanded, index, label]
-    );
-    const onDragEnd = useCallback(
-      (event) => expanded ? onDragStopTrigger(event) : void 0,
-      [expanded]
-    );
-    const showDraggableIcon = !noExpand && pinnedFeature && shouldShowPinnedButton && !disabled;
-    const showPinIcon = !(noExpand || disabled) && shouldShowPinnedButton && pinnedFeature;
-    const shouldHaveWeakText = !!children && !active && shouldShowPinnedButton && !disabled;
-    if (!alwaysVisible && showHide === "hide") {
-      return null;
-    }
-    if (expanded || !expanded && animation === "expand") {
-      return /* @__PURE__ */ jsxs(Fragment, { 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
-              }),
-              shouldAnimate && animationType === "complex" ? navigationItemContainerAnimated[animation === "collapse" ? "collapse" : "expand"] : "",
-              showDraggableIcon ? navigationItemShowDraggable : "",
-              showPinIcon ? navigationItemShowPinButton : "",
-              shouldHaveWeakText ? navigationItemWeakText : ""
-            ),
-            "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__ */ 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: "weak",
-                        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
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                Stack,
-                {
-                  alignItems: "center",
-                  direction: "row",
-                  gap: href ? 1 : void 0,
-                  children: [
-                    badgeText || hasPinnedFeatureAndNoChildren ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                      badgeText && !animation ? /* @__PURE__ */ jsx(
-                        Badge,
-                        {
-                          className: navigationItemBadge,
-                          disabled,
-                          prominence: "strong",
-                          sentiment: badgeSentiment,
-                          size: "small",
-                          children: badgeText
-                        }
-                      ) : null,
-                      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?.({
-                                    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"
-                                }
-                              )
-                            }
-                          ) })
-                        }
-                      ) : null
-                    ] }) : null,
-                    hasHrefAndNoChildren && target === "_blank" && !animation ? /* @__PURE__ */ jsx(
-                      OpenInNewIcon,
-                      {
-                        disabled,
-                        prominence: "default",
-                        sentiment: "neutral"
-                      }
-                    ) : null,
-                    children ? /* @__PURE__ */ jsx(
-                      Stack,
-                      {
-                        alignItems: "center",
-                        className: navigationItemStackIcon,
-                        direction: "row",
-                        gap: 1,
-                        children: animation || noExpand ? null : /* @__PURE__ */ jsx(ArrowIcon, { prominence: "weak", sentiment: "neutral" })
-                      }
-                    ) : null
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        children ? (
-          // biome-ignore lint/complexity/noUselessFragments: allow multiple ternary
-          /* @__PURE__ */ jsx(Fragment, { 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"
-              }),
-              width: animation ? "100%" : void 0,
-              children
-            }
-          ) }) }) })
-        ) : null
-      ] });
-    }
-    if (categoryIcon || Children.count(children) > 0 && !hasParents) {
-      return /* @__PURE__ */ jsx(
-        Stack,
-        {
-          alignItems: "flex-start",
-          className: navigationItemMenuStack,
-          gap: 1,
-          justifyContent: "flex-start",
-          style,
-          children: Children.count(children) > 0 ? /* @__PURE__ */ jsx(
-            Menu,
-            {
-              className: navigationItemMenuContainer,
-              disclosure: /* @__PURE__ */ jsx(
-                Button,
-                {
-                  "aria-label": label,
-                  sentiment: "neutral",
-                  size: "small",
-                  variant: hasActiveChildren ? "filled" : "ghost",
-                  children: categoryIcon ? /* @__PURE__ */ jsx(
-                    Stack,
-                    {
-                      alignItems: "center",
-                      direction: "row",
-                      gap: 1,
-                      justifyContent: "center",
-                      children: categoryIcon
-                    }
-                  ) : null
-                }
-              ),
-              dynamicDomRendering: false,
-              placement: "right",
-              triggerMethod: "hover",
-              children: /* @__PURE__ */ jsx(ItemProvider, { children })
-            }
-          ) : /* @__PURE__ */ jsx(Tooltip, { placement: "right", tabIndex: -1, text: label, children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              "aria-label": label,
-              sentiment: "neutral",
-              size: "small",
-              variant: active ? "filled" : "ghost",
-              children: /* @__PURE__ */ jsx(
-                Stack,
-                {
-                  alignItems: "center",
-                  direction: "row",
-                  gap: 1,
-                  justifyContent: "center",
-                  children: categoryIcon ?? /* @__PURE__ */ jsx(
-                    OrganizationDashboardCategoryIcon,
-                    {
-                      variant: active ? "primary" : "neutral"
-                    }
-                  )
-                }
-              )
-            }
-          ) })
-        }
-      );
-    }
-    if (hasParents) {
-      return /* @__PURE__ */ jsx(
-        Menu.Item,
-        {
-          active,
-          borderless: true,
-          className: cn(
-            navigationItemMenu,
-            pinnedFeature && shouldShowPinnedButton ? navigationItemMenuPinned : ""
-          ),
-          disabled,
-          href,
-          onClick: () => onToggle?.(!!active),
-          rel,
-          sentiment: active ? "primary" : "neutral",
-          style,
-          target,
-          children: /* @__PURE__ */ jsxs(
-            Stack,
-            {
-              alignItems: "center",
-              direction: "row",
-              flex: 1,
-              gap: 1,
-              justifyContent: "space-between",
-              width: "100%",
-              children: [
-                animation ? null : /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    as: "span",
-                    className: navigationItemWrapText({
-                      disabled,
-                      weak: hasActiveChildren && !noExpand && !disabled && !!active
-                    }),
-                    variant: "bodySmall",
-                    whiteSpace: "pre-wrap",
-                    children: label
-                  }
-                ),
-                labelDescription ? /* @__PURE__ */ jsx("span", { className: navigationItemPadded, children: labelDescription }) : null,
-                /* @__PURE__ */ jsxs(Stack, { direction: "row", children: [
-                  badgeText && !animation ? /* @__PURE__ */ jsx(
-                    Badge,
-                    {
-                      className: navigationItemBadge,
-                      disabled,
-                      prominence: "strong",
-                      sentiment: badgeSentiment,
-                      size: "small",
-                      children: badgeText
-                    }
-                  ) : null,
-                  hasHrefAndNoChildren && target === "_blank" ? /* @__PURE__ */ jsx(
-                    OpenInNewIcon,
-                    {
-                      className: shouldAnimate && animationType === "complex" ? navigationItemAnimatedIcon[animation === "expand" ? "expand" : "collapse"] : "",
-                      disabled,
-                      prominence: "weak",
-                      sentiment: "neutral"
-                    }
-                  ) : null,
-                  shouldShowPinnedButton ? /* @__PURE__ */ jsx(
-                    Tooltip,
-                    {
-                      placement: "right",
-                      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?.({
-                                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"
-                            }
-                          )
-                        }
-                      ) })
-                    }
-                  ) : null
-                ] })
-              ]
-            }
-          )
-        }
-      );
-    }
-    if (!hasParents && href) {
-      return /* @__PURE__ */ jsx(Tooltip, { placement: "right", text: label, children: /* @__PURE__ */ jsx(
-        Stack,
-        {
-          alignItems: "flex-start",
-          className: navigationItemMenuStack,
-          gap: 1,
-          justifyContent: "flex-start",
-          children: /* @__PURE__ */ jsx(
-            Stack,
-            {
-              alignItems: "center",
-              as: containerTag,
-              className: cn(
-                navigationItemContainer({ disabled }),
-                shouldAnimate && animationType === "complex" ? navigationItemContainerAnimated[animation === "collapse" ? "collapse" : "expand"] : ""
-              ),
-              gap: 1,
-              href,
-              justifyContent: "center",
-              rel,
-              target,
-              children: /* @__PURE__ */ jsx(
-                OpenInNewIcon,
-                {
-                  className: shouldAnimate && animationType === "complex" ? navigationItemAnimatedIcon[animation === "expand" ? "expand" : "collapse"] : "",
-                  prominence: "weak",
-                  sentiment: "neutral"
-                }
-              )
-            }
-          )
-        }
-      ) });
-    }
-    return null;
-  }
-);
-export {
-  Item
+	const element = event.currentTarget;
+	element.style.opacity = "1";
 };
+const 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, pinItem, unpinItem, pinnedItems, pinLimit, animation, registerItem, shouldAnimate, animationType, showHide } = context;
+	const makeRegisterRef = useRef(null);
+	useEffect(() => {
+		makeRegisterRef.current = () => registerItem({ [id]: {
+			active,
+			label,
+			onClickPinUnpin,
+			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 [internalExpanded, onToggleExpand] = useReducer((prevState) => !prevState, Boolean(toggle));
+	const triggerToggle = useCallback(() => {
+		onToggleExpand();
+		onToggle === null || onToggle === void 0 || onToggle(internalExpanded);
+	}, [internalExpanded, onToggle]);
+	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 containerTag = useMemo(() => {
+		if (as) return as;
+		if (hasHrefAndNoChildren) return "a";
+		if (noExpand) return "div";
+		return "button";
+	}, [
+		as,
+		hasHrefAndNoChildren,
+		noExpand
+	]);
+	const ArrowIcon = useMemo(() => internalExpanded ? ArrowDownIcon : ArrowRightIcon, [internalExpanded]);
+	const PinUnpinIcon = useMemo(() => isItemPinned ? UnpinIcon : PinOutlineIcon, [isItemPinned]);
+	const ariaExpanded = useMemo(() => {
+		if (hasHrefAndNoChildren && internalExpanded) return true;
+		if (hasHrefAndNoChildren && !internalExpanded) return false;
+	}, [hasHrefAndNoChildren, internalExpanded]);
+	const isPinDisabled = pinnedItems.length >= pinLimit;
+	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
+	]);
+	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]);
+	const showDraggableIcon = !noExpand && pinnedFeature && shouldShowPinnedButton && !disabled;
+	const showPinIcon = !(noExpand || disabled) && shouldShowPinnedButton && pinnedFeature;
+	const shouldHaveWeakText = !!children && !active && shouldShowPinnedButton && !disabled;
+	if (!alwaysVisible && showHide === "hide") return null;
+	if (expanded || !expanded && animation === "expand") return /* @__PURE__ */ jsxs(Fragment, { 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
+		}), shouldAnimate && animationType === "complex" ? navigationItemContainerAnimated[animation === "collapse" ? "collapse" : "expand"] : "", showDraggableIcon ? navigationItemShowDraggable : "", showPinIcon ? navigationItemShowPinButton : "", shouldHaveWeakText ? navigationItemWeakText : ""),
+		"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__ */ 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: "weak",
+					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] })
+			]
+		}), /* @__PURE__ */ jsxs(Stack, {
+			alignItems: "center",
+			direction: "row",
+			gap: href ? 1 : void 0,
+			children: [
+				badgeText || hasPinnedFeatureAndNoChildren ? /* @__PURE__ */ jsxs(Fragment, { children: [badgeText && !animation ? /* @__PURE__ */ jsx(Badge, {
+					className: navigationItemBadge,
+					disabled,
+					prominence: "strong",
+					sentiment: badgeSentiment,
+					size: "small",
+					children: badgeText
+				}) : null, 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"
+							})
+						})
+					})
+				}) : null] }) : null,
+				hasHrefAndNoChildren && target === "_blank" && !animation ? /* @__PURE__ */ jsx(OpenInNewIcon, {
+					disabled,
+					prominence: "default",
+					sentiment: "neutral"
+				}) : null,
+				children ? /* @__PURE__ */ jsx(Stack, {
+					alignItems: "center",
+					className: navigationItemStackIcon,
+					direction: "row",
+					gap: 1,
+					children: animation || noExpand ? null : /* @__PURE__ */ jsx(ArrowIcon, {
+						prominence: "weak",
+						sentiment: "neutral"
+					})
+				}) : null
+			]
+		})]
+	}), children ? /* @__PURE__ */ jsx(Fragment, { 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" }),
+			width: animation ? "100%" : void 0,
+			children
+		})
+	}) }) }) : null] });
+	if (categoryIcon || Children.count(children) > 0 && !hasParents) return /* @__PURE__ */ jsx(Stack, {
+		alignItems: "flex-start",
+		className: navigationItemMenuStack,
+		gap: 1,
+		justifyContent: "flex-start",
+		style,
+		children: Children.count(children) > 0 ? /* @__PURE__ */ jsx(Menu, {
+			className: navigationItemMenuContainer,
+			disclosure: /* @__PURE__ */ jsx(Button, {
+				"aria-label": label,
+				sentiment: "neutral",
+				size: "small",
+				variant: hasActiveChildren ? "filled" : "ghost",
+				children: categoryIcon ? /* @__PURE__ */ jsx(Stack, {
+					alignItems: "center",
+					direction: "row",
+					gap: 1,
+					justifyContent: "center",
+					children: categoryIcon
+				}) : null
+			}),
+			dynamicDomRendering: false,
+			placement: "right",
+			triggerMethod: "hover",
+			children: /* @__PURE__ */ jsx(ItemProvider, { children })
+		}) : /* @__PURE__ */ jsx(Tooltip, {
+			placement: "right",
+			tabIndex: -1,
+			text: label,
+			children: /* @__PURE__ */ jsx(Button, {
+				"aria-label": label,
+				sentiment: "neutral",
+				size: "small",
+				variant: active ? "filled" : "ghost",
+				children: /* @__PURE__ */ jsx(Stack, {
+					alignItems: "center",
+					direction: "row",
+					gap: 1,
+					justifyContent: "center",
+					children: categoryIcon !== null && categoryIcon !== void 0 ? categoryIcon : /* @__PURE__ */ jsx(OrganizationDashboardCategoryIcon, { variant: active ? "primary" : "neutral" })
+				})
+			})
+		})
+	});
+	if (hasParents) return /* @__PURE__ */ jsx(Menu.Item, {
+		active,
+		borderless: true,
+		className: cn(navigationItemMenu, pinnedFeature && shouldShowPinnedButton ? navigationItemMenuPinned : ""),
+		disabled,
+		href,
+		onClick: () => onToggle === null || onToggle === void 0 ? void 0 : onToggle(!!active),
+		rel,
+		sentiment: active ? "primary" : "neutral",
+		style,
+		target,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			alignItems: "center",
+			direction: "row",
+			flex: 1,
+			gap: 1,
+			justifyContent: "space-between",
+			width: "100%",
+			children: [
+				animation ? null : /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					className: navigationItemWrapText({
+						disabled,
+						weak: hasActiveChildren && !noExpand && !disabled && !!active
+					}),
+					variant: "bodySmall",
+					whiteSpace: "pre-wrap",
+					children: label
+				}),
+				labelDescription ? /* @__PURE__ */ jsx("span", {
+					className: navigationItemPadded,
+					children: labelDescription
+				}) : null,
+				/* @__PURE__ */ jsxs(Stack, {
+					direction: "row",
+					children: [
+						badgeText && !animation ? /* @__PURE__ */ jsx(Badge, {
+							className: navigationItemBadge,
+							disabled,
+							prominence: "strong",
+							sentiment: badgeSentiment,
+							size: "small",
+							children: badgeText
+						}) : null,
+						hasHrefAndNoChildren && target === "_blank" ? /* @__PURE__ */ jsx(OpenInNewIcon, {
+							className: shouldAnimate && animationType === "complex" ? navigationItemAnimatedIcon[animation === "expand" ? "expand" : "collapse"] : "",
+							disabled,
+							prominence: "weak",
+							sentiment: "neutral"
+						}) : null,
+						shouldShowPinnedButton ? /* @__PURE__ */ jsx(Tooltip, {
+							placement: "right",
+							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"
+									})
+								})
+							})
+						}) : null
+					]
+				})
+			]
+		})
+	});
+	if (!hasParents && href) return /* @__PURE__ */ jsx(Tooltip, {
+		placement: "right",
+		text: label,
+		children: /* @__PURE__ */ jsx(Stack, {
+			alignItems: "flex-start",
+			className: navigationItemMenuStack,
+			gap: 1,
+			justifyContent: "flex-start",
+			children: /* @__PURE__ */ jsx(Stack, {
+				alignItems: "center",
+				as: containerTag,
+				className: cn(navigationItemContainer({ disabled }), shouldAnimate && animationType === "complex" ? navigationItemContainerAnimated[animation === "collapse" ? "collapse" : "expand"] : ""),
+				gap: 1,
+				href,
+				justifyContent: "center",
+				rel,
+				target,
+				children: /* @__PURE__ */ jsx(OpenInNewIcon, {
+					className: shouldAnimate && animationType === "complex" ? navigationItemAnimatedIcon[animation === "expand" ? "expand" : "collapse"] : "",
+					prominence: "weak",
+					sentiment: "neutral"
+				})
+			})
+		})
+	});
+	return null;
+});
+
+//#endregion
+export { Item };