@ultraviolet/plus 3.0.0-beta.16 → 3.0.0-beta.18

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { ArrowDownIcon, ArrowRightIcon, UnpinIcon, PinOutlineIcon, DragIcon, OpenInNewIcon } from "@ultraviolet/icons";
 import { OrganizationDashboardCategoryIcon } from "@ultraviolet/icons/category";
 import { Stack, Text, Badge, Tooltip, Expandable, Menu, Button } from "@ultraviolet/ui";
@@ -10,268 +10,565 @@ import { navigationItemContainer, navigationItemContainerAnimated, navigationIte
 const onDragStopTrigger = (event) => {
   event.currentTarget.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
-}) => {
-  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
-  } = context;
-  useEffect(() => {
-    if (type !== "pinnedGroup" && pinnedFeature) {
-      registerItem({
-        [id]: {
-          active,
-          label,
-          onClickPinUnpin,
-          onToggle
-        }
-      });
-    }
-  }, [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;
+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
+  }) => {
+    const context = useNavigation();
+    if (!context) {
+      throw new Error(
+        "Navigation.Item can only be used inside a NavigationProvider."
+      );
     }
-    if (hasPinnedFeatureAndNoChildren) {
-      return true;
-    }
-    return false;
-  }, [disabled, hasPinnedFeatureAndNoChildren, href, type]);
-  const hasActiveChildren = useMemo(() => {
-    if (!children) {
+    const itemProvider = useContext(ItemContext);
+    const hasParents = !!itemProvider;
+    const {
+      expanded,
+      locales,
+      pinnedFeature,
+      pinItem,
+      unpinItem,
+      pinnedItems,
+      pinLimit,
+      animation,
+      registerItem,
+      shouldAnimate,
+      animationType
+    } = context;
+    useEffect(() => {
+      if (type !== "pinnedGroup" && pinnedFeature) {
+        registerItem({ [id]: { active, label, onClickPinUnpin, onToggle } });
+      }
+    }, [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;
-    }
-    return Children.map(children, (child) => {
-      if (isValidElement(child)) {
-        if ("to" in child.props) {
-          return child.props.children?.props.active;
+    }, [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 child.props.active;
+        return null;
+      }).includes(true);
+    }, [children]);
+    const containerTag = useMemo(() => {
+      if (as) {
+        return as;
       }
-      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 (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 })
+          );
+          event.currentTarget.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 (expanded || !expanded && animation === "expand") {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            alignItems: categoryIcon ? "flex-start" : "center",
+            "aria-expanded": ariaExpanded,
+            as: containerTag,
+            className: `${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 ? /* @__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
+                          ]
+                        }
+                      ) : 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",
+                          text: isItemPinned ? locales["navigation.unpin.tooltip"] : pinTooltipLocale,
+                          children: /* @__PURE__ */ jsx("div", { className: navigationItemRelative, children: /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              "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: () => {
+                              },
+                              role: "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 ? /* @__PURE__ */ jsx(ArrowIcon, { prominence: "weak", sentiment: "neutral" }) : null
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        children ? /* @__PURE__ */ jsx(Fragment, { children: !noExpand ? /* @__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
+          }
+        ) }) }) : /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(
+          Stack,
+          {
+            className: noExpand || type === "pinnedGroup" ? "" : navigationItemPaddingStack({
+              hide: shouldAnimate && animationType === "complex" && animation === "expand"
+            }),
+            width: animation ? "100%" : void 0,
+            children
+          }
+        ) }) }) : null
+      ] });
     }
-    if (isItemPinned) {
-      return locales["navigation.unpin.tooltip"];
+    if (categoryIcon || Children.count(children) > 0 && !hasParents) {
+      return /* @__PURE__ */ jsx(
+        Stack,
+        {
+          alignItems: "start",
+          className: navigationItemMenuStack,
+          gap: 1,
+          justifyContent: "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"
+                    }
+                  )
+                }
+              )
+            }
+          ) })
+        }
+      );
     }
-    return locales["navigation.pin.tooltip"];
-  }, [isItemPinned, isPinDisabled, locales]);
-  const onDragStart = useCallback((event) => {
-    if (expanded) {
-      event.dataTransfer.setData("text/plain", JSON.stringify({
-        index,
-        label
-      }));
-      event.currentTarget.style.opacity = "0.5";
+    if (hasParents) {
+      return /* @__PURE__ */ jsx(
+        Menu.Item,
+        {
+          active,
+          borderless: true,
+          className: `${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 ? /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "span",
+                    className: navigationItemWrapText({
+                      disabled,
+                      weak: hasActiveChildren && !noExpand && !disabled && !!active
+                    }),
+                    variant: "bodySmall",
+                    whiteSpace: "pre-wrap",
+                    children: label
+                  }
+                ) : null,
+                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(
+                        "div",
+                        {
+                          "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: () => {
+                          },
+                          role: "button",
+                          children: /* @__PURE__ */ jsx(
+                            PinUnpinIcon,
+                            {
+                              className: navigationItemPinIcon[active ? "active" : "inactive"],
+                              disabled: isItemPinned ? false : isPinDisabled,
+                              sentiment: active ? "primary" : "neutral",
+                              size: "medium"
+                            }
+                          )
+                        }
+                      ) })
+                    }
+                  ) : null
+                ] })
+              ]
+            }
+          )
+        }
+      );
     }
-    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 (expanded || !expanded && animation === "expand") {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Stack, { alignItems: categoryIcon ? "flex-start" : "center", "aria-expanded": ariaExpanded, as: containerTag, className: `${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 ? /* @__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
-            ] }) : 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", text: isItemPinned ? locales["navigation.unpin.tooltip"] : pinTooltipLocale, children: /* @__PURE__ */ jsx("div", { className: navigationItemRelative, children: /* @__PURE__ */ jsx("div", { "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: () => {
-            }, role: "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 ? /* @__PURE__ */ jsx(ArrowIcon, { prominence: "weak", sentiment: "neutral" }) : null }) : null
-        ] })
-      ] }),
-      children ? /* @__PURE__ */ jsx(Fragment, { children: !noExpand ? /* @__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 }) }) }) : /* @__PURE__ */ jsx(ItemProvider, { 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: "start", className: navigationItemMenuStack, gap: 1, justifyContent: "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: `${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 ? /* @__PURE__ */ jsx(Text, { as: "span", className: navigationItemWrapText({
-            disabled,
-            weak: hasActiveChildren && !noExpand && !disabled && !!active
-          }), variant: "bodySmall", whiteSpace: "pre-wrap", children: label }) : null,
-          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("div", { "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);
+    if (!hasParents && href) {
+      return /* @__PURE__ */ jsx(Tooltip, { placement: "right", text: label, children: /* @__PURE__ */ jsx(
+        Stack,
+        {
+          alignItems: "start",
+          className: navigationItemMenuStack,
+          gap: 1,
+          justifyContent: "start",
+          children: /* @__PURE__ */ jsx(
+            Stack,
+            {
+              alignItems: "center",
+              as: containerTag,
+              className: `${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"
                 }
-                onClickPinUnpin?.({
-                  id,
-                  state: isItemPinned ? "unpin" : "pin",
-                  totalPinned: newValue
-                });
-              }
-            }, onKeyDown: () => {
-            }, role: "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: "start", className: navigationItemMenuStack, gap: 1, justifyContent: "start", children: /* @__PURE__ */ jsx(Stack, { alignItems: "center", as: containerTag, className: `${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;
   }
-  return null;
-});
+);
 export {
   Item
 };