@capillarytech/blaze-ui 6.1.5 → 6.1.6-beta.3

package/CapNavigationSPA/CapNavigationSPASidebar/index.js

@@ -0,0 +1,603 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useRef, useState, useCallback, useEffect, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import CapIcon from "../../CapIcon/index.js";
+import styles from "./styles.module.scss.js";
+const SIDEBAR_DIVIDER_BEFORE_KEY = "data-management";
+const DEFAULT_ICON_MAP = {
+  loyalty: "loyalty-tag",
+  // Figma 583:6938 – heart inside tag
+  engage: "engage-nav",
+  // Figma 646-59790 – megaphone with settings
+  rewards: "rewards-outline",
+  insights: "insights-nav",
+  // Figma 646-59984 – bar chart in frame
+  aira: "aira-nav",
+  // Figma 646-59790 – three sparkles, stroke icon
+  members: "members",
+  audiences: "groups",
+  creatives: "creatives-nav",
+  // Figma 646-59984 – document with pen
+  "data-management": "data-management",
+  extensions: "code",
+  settings: "settings"
+};
+const CapNavigationSPASidebar = ({
+  items,
+  selectedKey = "",
+  onItemClick,
+  settingsLabel = "Settings",
+  logo,
+  className,
+  collapsed = false,
+  onCollapseExpand,
+  navigateToLink = true
+}) => {
+  const wrapperRef = useRef(null);
+  const flyoutAnchorRef = useRef(null);
+  const closeFlyoutTimeoutRef = useRef(null);
+  const [hoverExpandedKey, setHoverExpandedKey] = useState(null);
+  const [flyoutAnchorRect, setFlyoutAnchorRect] = useState(null);
+  const [clickExpandedKey, setClickExpandedKey] = useState(null);
+  const [hoverL1TooltipKey, setHoverL1TooltipKey] = useState(null);
+  const [showExpandTooltip, setShowExpandTooltip] = useState(false);
+  const expandBtnRef = useRef(null);
+  const transitioningRef = useRef(false);
+  const pendingExpandKeyRef = useRef(null);
+  const expandedParentKey = clickExpandedKey ?? hoverExpandedKey;
+  const closeFlyout = useCallback(() => {
+    if (closeFlyoutTimeoutRef.current) {
+      clearTimeout(closeFlyoutTimeoutRef.current);
+      closeFlyoutTimeoutRef.current = null;
+    }
+    setHoverExpandedKey(null);
+    setClickExpandedKey(null);
+    setHoverL1TooltipKey(null);
+  }, []);
+  const scheduleCloseFlyout = useCallback(() => {
+    if (closeFlyoutTimeoutRef.current) clearTimeout(closeFlyoutTimeoutRef.current);
+    closeFlyoutTimeoutRef.current = setTimeout(() => {
+      closeFlyoutTimeoutRef.current = null;
+      setHoverExpandedKey(null);
+      setHoverL1TooltipKey(null);
+    }, 150);
+  }, []);
+  const cancelCloseFlyout = useCallback(() => {
+    if (closeFlyoutTimeoutRef.current) {
+      clearTimeout(closeFlyoutTimeoutRef.current);
+      closeFlyoutTimeoutRef.current = null;
+    }
+  }, []);
+  useEffect(() => {
+    if (closeFlyoutTimeoutRef.current) {
+      clearTimeout(closeFlyoutTimeoutRef.current);
+      closeFlyoutTimeoutRef.current = null;
+    }
+    setHoverExpandedKey(null);
+    setHoverL1TooltipKey(null);
+    setFlyoutAnchorRect(null);
+    setShowExpandTooltip(false);
+    const pendingKey = pendingExpandKeyRef.current;
+    pendingExpandKeyRef.current = null;
+    if (!collapsed && pendingKey) {
+      setClickExpandedKey(pendingKey);
+    } else {
+      setClickExpandedKey(null);
+    }
+    transitioningRef.current = true;
+    const tid = setTimeout(() => {
+      transitioningRef.current = false;
+    }, 250);
+    return () => clearTimeout(tid);
+  }, [collapsed]);
+  useLayoutEffect(() => {
+    if (!hoverExpandedKey && !hoverL1TooltipKey) {
+      setFlyoutAnchorRect(null);
+      return;
+    }
+    const el = flyoutAnchorRef.current;
+    if (!el) return;
+    setFlyoutAnchorRect(el.getBoundingClientRect());
+  }, [hoverExpandedKey, hoverL1TooltipKey, collapsed]);
+  const getExpandTooltipPos = useCallback(() => {
+    const btnEl = expandBtnRef.current;
+    const sidebarEl = wrapperRef.current;
+    if (!btnEl || !sidebarEl) return null;
+    const btnRect = btnEl.getBoundingClientRect();
+    const sidebarRect = sidebarEl.getBoundingClientRect();
+    return {
+      top: btnRect.top,
+      height: btnRect.height,
+      right: sidebarRect.right
+    };
+  }, []);
+  const handleClick = useCallback(
+    (item) => {
+      if (navigateToLink && item.link && item.link !== window.location.pathname) {
+        window.location.pathname = item.link;
+      }
+      onItemClick == null ? void 0 : onItemClick(item);
+    },
+    [navigateToLink, onItemClick]
+  );
+  const toggleParentExpanded = useCallback(
+    (parentKey) => {
+      if (expandedParentKey === parentKey) {
+        closeFlyout();
+      } else {
+        setHoverExpandedKey(null);
+        setClickExpandedKey(parentKey);
+      }
+    },
+    [expandedParentKey, closeFlyout]
+  );
+  const handleItemClick = useCallback(
+    (item) => {
+      var _a, _b;
+      if (collapsed) {
+        if ((_a = item.children) == null ? void 0 : _a.length) {
+          pendingExpandKeyRef.current = item.key;
+          if (onCollapseExpand) onCollapseExpand();
+          setHoverExpandedKey(null);
+        } else {
+          closeFlyout();
+          handleClick(item);
+        }
+        return;
+      }
+      if ((_b = item.children) == null ? void 0 : _b.length) {
+        toggleParentExpanded(item.key);
+      } else {
+        closeFlyout();
+        handleClick(item);
+        onCollapseExpand == null ? void 0 : onCollapseExpand();
+      }
+    },
+    [collapsed, onCollapseExpand, toggleParentExpanded, closeFlyout, handleClick]
+  );
+  const getIconType = (item) => item.iconType ?? DEFAULT_ICON_MAP[item.key] ?? void 0;
+  const handleWrapperMouseLeave = useCallback(() => {
+    scheduleCloseFlyout();
+  }, [scheduleCloseFlyout]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: styles["cap-navigation-spa-sidebar__wrapper"],
+      onMouseLeave: handleWrapperMouseLeave,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            className: classNames(
+              styles["cap-navigation-spa-sidebar"],
+              collapsed && styles["cap-navigation-spa-sidebar--collapsed"],
+              className
+            ),
+            "data-testid": "cap-navigation-spa-sidebar",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__logo"], children: logo !== void 0 ? logo : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  CapIcon,
+                  {
+                    type: "capillary",
+                    size: "s",
+                    className: styles["cap-navigation-spa-sidebar__logo-icon"]
+                  }
+                ),
+                !collapsed && /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__logo-text"], children: "capillary" })
+              ] }) }),
+              /* @__PURE__ */ jsx("nav", { className: styles["cap-navigation-spa-sidebar__nav"], children: items.flatMap((item) => {
+                var _a, _b, _c, _d, _e;
+                const isExpandedWithChildren = !collapsed && ((_a = item.children) == null ? void 0 : _a.length) && expandedParentKey === item.key;
+                const parentButton = /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: classNames(
+                      styles["cap-navigation-spa-sidebar__item"],
+                      expandedParentKey === item.key && styles["cap-navigation-spa-sidebar__item--expanded"],
+                      expandedParentKey === item.key && item.key === "loyalty" && styles["cap-navigation-spa-sidebar__item--expanded-loyalty"],
+                      expandedParentKey === item.key && item.key === "engage" && styles["cap-navigation-spa-sidebar__item--expanded-engage"],
+                      expandedParentKey === item.key && item.key === "insights" && styles["cap-navigation-spa-sidebar__item--expanded-insights"],
+                      expandedParentKey === item.key && item.key === "members" && styles["cap-navigation-spa-sidebar__item--expanded-members"],
+                      expandedParentKey === item.key && item.key === "rewards" && styles["cap-navigation-spa-sidebar__item--expanded-rewards"],
+                      expandedParentKey === item.key && item.key === "audiences" && styles["cap-navigation-spa-sidebar__item--expanded-audiences"],
+                      expandedParentKey === item.key && item.key === "data-management" && styles["cap-navigation-spa-sidebar__item--expanded-data-management"],
+                      expandedParentKey === item.key && item.key === "extensions" && styles["cap-navigation-spa-sidebar__item--expanded-extensions"],
+                      expandedParentKey === item.key && item.key === "settings" && styles["cap-navigation-spa-sidebar__item--expanded-settings"]
+                    ),
+                    onClick: () => handleItemClick(item),
+                    onMouseEnter: () => {
+                      var _a2;
+                      if (transitioningRef.current) return;
+                      cancelCloseFlyout();
+                      if ((_a2 = item.children) == null ? void 0 : _a2.length) {
+                        if (collapsed) {
+                          setHoverExpandedKey(item.key);
+                        }
+                        setHoverL1TooltipKey(null);
+                      } else if (collapsed) {
+                        setHoverExpandedKey(null);
+                        setHoverL1TooltipKey(item.key);
+                      }
+                    },
+                    "data-testid": `cap-navigation-spa-sidebar-item-${item.key}`,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-icon"], children: getIconType(item) ? /* @__PURE__ */ jsx(CapIcon, { type: getIconType(item), size: "s" }) : /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-dot"] }) }),
+                      !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-label"], children: item.title }),
+                        ((_b = item.children) == null ? void 0 : _b.length) ? /* @__PURE__ */ jsx(
+                          CapIcon,
+                          {
+                            type: expandedParentKey === item.key ? "chevron-down" : "chevron-right",
+                            size: "s",
+                            className: styles["cap-navigation-spa-sidebar__item-chevron"]
+                          }
+                        ) : null
+                      ] })
+                    ]
+                  },
+                  item.key
+                );
+                const showCollapsedFlyout = collapsed && ((_c = item.children) == null ? void 0 : _c.length) && expandedParentKey === item.key;
+                const showL1TooltipFlyout = collapsed && !((_d = item.children) == null ? void 0 : _d.length) && hoverL1TooltipKey === item.key;
+                const l2Inline = isExpandedWithChildren ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: styles["cap-navigation-spa-sidebar__l2-wrapper"],
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l2-divider"], "aria-hidden": true }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: styles["cap-navigation-spa-sidebar__l2-inline"],
+                          onMouseEnter: () => setHoverExpandedKey(item.key),
+                          "data-testid": `cap-navigation-spa-sidebar-l2-${item.key}`,
+                          children: item.children.map((child) => /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              className: classNames(
+                                styles["cap-navigation-spa-sidebar__l2-inline-item"],
+                                selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected"],
+                                item.key === "loyalty" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-loyalty"],
+                                item.key === "engage" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-engage"],
+                                item.key === "insights" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-insights"],
+                                item.key === "members" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-members"],
+                                item.key === "rewards" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-rewards"],
+                                item.key === "audiences" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-audiences"],
+                                item.key === "data-management" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-data-management"],
+                                item.key === "extensions" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-extensions"],
+                                item.key === "settings" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-settings"]
+                              ),
+                              onClick: () => {
+                                closeFlyout();
+                                handleClick(child);
+                                onCollapseExpand == null ? void 0 : onCollapseExpand();
+                              },
+                              "data-testid": `cap-navigation-spa-sidebar-l2-item-${child.key}`,
+                              children: child.title
+                            },
+                            child.key
+                          ))
+                        },
+                        `${item.key}-l2`
+                      )
+                    ]
+                  },
+                  `${item.key}-l2-wrapper`
+                ) : null;
+                const collapsedFlyout = showCollapsedFlyout ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: styles["cap-navigation-spa-sidebar__l2-flyout"],
+                    onMouseEnter: () => {
+                      cancelCloseFlyout();
+                      setHoverExpandedKey(item.key);
+                    },
+                    onMouseLeave: scheduleCloseFlyout,
+                    "data-testid": `cap-navigation-spa-sidebar-l2-flyout-${item.key}`,
+                    role: "menu",
+                    "aria-label": item.title,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: styles["cap-navigation-spa-sidebar__l2-flyout-arrow"],
+                          "aria-hidden": true
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa-sidebar__l2-flyout-card"], children: [
+                        /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l2-flyout-parent"], children: item.title }),
+                        item.children.map((child) => /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: classNames(
+                              styles["cap-navigation-spa-sidebar__l2-flyout-item"],
+                              selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-flyout-item--selected"]
+                            ),
+                            onClick: () => {
+                              setClickExpandedKey(item.key);
+                              if (collapsed && onCollapseExpand) {
+                                onCollapseExpand();
+                              }
+                              handleClick(child);
+                            },
+                            "data-testid": `cap-navigation-spa-sidebar-l2-flyout-item-${child.key}`,
+                            role: "menuitem",
+                            children: child.title
+                          },
+                          child.key
+                        ))
+                      ] })
+                    ]
+                  },
+                  `${item.key}-l2-flyout`
+                ) : null;
+                const l1TooltipFlyout = showL1TooltipFlyout ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: styles["cap-navigation-spa-sidebar__l1-tooltip-flyout"],
+                    onMouseEnter: () => {
+                      cancelCloseFlyout();
+                      setHoverL1TooltipKey(item.key);
+                    },
+                    onMouseLeave: scheduleCloseFlyout,
+                    "data-testid": `cap-navigation-spa-sidebar-l1-tooltip-${item.key}`,
+                    role: "tooltip",
+                    "aria-label": item.title,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: styles["cap-navigation-spa-sidebar__l2-flyout-arrow"],
+                          "aria-hidden": true
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l1-tooltip-card"], children: /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l1-tooltip-label"], children: item.title }) })
+                    ]
+                  },
+                  `${item.key}-l1-tooltip`
+                ) : null;
+                const isActiveFlyoutAnchor = collapsed && (expandedParentKey === item.key && !!((_e = item.children) == null ? void 0 : _e.length) || hoverL1TooltipKey === item.key);
+                const wrapForCollapsedFlyout = collapsed;
+                const renderedButton = wrapForCollapsedFlyout ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ref: isActiveFlyoutAnchor ? flyoutAnchorRef : void 0,
+                    className: styles["cap-navigation-spa-sidebar__item-flyout-wrap"],
+                    onMouseLeave: scheduleCloseFlyout,
+                    children: [
+                      parentButton,
+                      !collapsed && collapsedFlyout,
+                      !collapsed && l1TooltipFlyout
+                    ]
+                  },
+                  `${item.key}-flyout-wrap`
+                ) : parentButton;
+                if (item.key === SIDEBAR_DIVIDER_BEFORE_KEY) {
+                  return [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: styles["cap-navigation-spa-sidebar__divider"],
+                        "aria-hidden": true
+                      },
+                      `divider-${item.key}`
+                    ),
+                    renderedButton,
+                    ...l2Inline ? [l2Inline] : []
+                  ];
+                }
+                if (item.key === "settings") {
+                  return [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: styles["cap-navigation-spa-sidebar__divider"],
+                        "aria-hidden": true
+                      },
+                      "divider-settings"
+                    ),
+                    renderedButton,
+                    ...l2Inline ? [l2Inline] : []
+                  ];
+                }
+                return [renderedButton, ...l2Inline ? [l2Inline] : []];
+              }) }),
+              /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa-sidebar__footer"], children: [
+                !items.some((i) => i.key === "settings") && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: styles["cap-navigation-spa-sidebar__item"],
+                    onClick: () => {
+                      closeFlyout();
+                      const settingsItem = { key: "settings", title: settingsLabel, link: "/settings" };
+                      handleClick(settingsItem);
+                      if (!collapsed) onCollapseExpand == null ? void 0 : onCollapseExpand();
+                    },
+                    "data-testid": "cap-navigation-spa-sidebar-settings",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-icon"], children: /* @__PURE__ */ jsx(CapIcon, { type: "settings", size: "s" }) }),
+                      !collapsed && /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-label"], children: settingsLabel })
+                    ]
+                  }
+                ),
+                onCollapseExpand && (collapsed ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: styles["cap-navigation-spa-sidebar__collapse-wrap"],
+                    onMouseEnter: () => {
+                      if (!transitioningRef.current) setShowExpandTooltip(true);
+                    },
+                    onMouseLeave: () => setShowExpandTooltip(false),
+                    children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        ref: expandBtnRef,
+                        type: "button",
+                        className: styles["cap-navigation-spa-sidebar__collapse-btn"],
+                        onClick: onCollapseExpand,
+                        "aria-label": "Expand sidebar",
+                        "data-testid": "cap-navigation-spa-sidebar-collapse-toggle",
+                        children: /* @__PURE__ */ jsx(
+                          CapIcon,
+                          {
+                            type: "sidebar-expand",
+                            size: "s",
+                            className: styles["cap-navigation-spa-sidebar__collapse-btn-icon"]
+                          }
+                        )
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: styles["cap-navigation-spa-sidebar__collapse-row"],
+                    "data-testid": "cap-navigation-spa-sidebar-collapse-row",
+                    children: /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa-sidebar__collapse-panel-group"], children: [
+                      /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__collapse-panel-label"], children: "Collapse panel" }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: styles["cap-navigation-spa-sidebar__collapse-btn"],
+                          onClick: onCollapseExpand,
+                          "aria-label": "Collapse sidebar",
+                          "data-testid": "cap-navigation-spa-sidebar-collapse-toggle",
+                          children: /* @__PURE__ */ jsx(
+                            CapIcon,
+                            {
+                              type: "sidebar-collapse",
+                              size: "s",
+                              className: styles["cap-navigation-spa-sidebar__collapse-btn-icon"]
+                            }
+                          )
+                        }
+                      )
+                    ] })
+                  }
+                ))
+              ] })
+            ]
+          }
+        ),
+        collapsed && flyoutAnchorRect && (() => {
+          var _a;
+          const activeItem = items.find(
+            (i) => {
+              var _a2;
+              return ((_a2 = i.children) == null ? void 0 : _a2.length) && expandedParentKey === i.key || hoverL1TooltipKey === i.key;
+            }
+          );
+          if (!activeItem) return null;
+          const isL2 = !!((_a = activeItem.children) == null ? void 0 : _a.length) && expandedParentKey === activeItem.key;
+          const portalStyle = {
+            position: "fixed",
+            left: flyoutAnchorRect.right + 4,
+            top: flyoutAnchorRect.top + flyoutAnchorRect.height / 2,
+            transform: "translateY(-50%)",
+            zIndex: 10,
+            display: "flex",
+            alignItems: "center"
+          };
+          const portalContent = isL2 ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: styles["cap-navigation-spa-sidebar__l2-flyout"],
+              style: portalStyle,
+              onMouseEnter: () => {
+                cancelCloseFlyout();
+                setHoverExpandedKey(activeItem.key);
+              },
+              onMouseLeave: scheduleCloseFlyout,
+              "data-testid": `cap-navigation-spa-sidebar-l2-flyout-${activeItem.key}`,
+              role: "menu",
+              "aria-label": activeItem.title,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l2-flyout-arrow"], "aria-hidden": true }),
+                /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa-sidebar__l2-flyout-card"], children: [
+                  /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l2-flyout-parent"], children: activeItem.title }),
+                  activeItem.children.map((child) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: classNames(
+                        styles["cap-navigation-spa-sidebar__l2-flyout-item"],
+                        selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-flyout-item--selected"]
+                      ),
+                      onClick: () => {
+                        handleClick(child);
+                      },
+                      "data-testid": `cap-navigation-spa-sidebar-l2-flyout-item-${child.key}`,
+                      role: "menuitem",
+                      children: child.title
+                    },
+                    child.key
+                  ))
+                ] })
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: styles["cap-navigation-spa-sidebar__l1-tooltip-flyout"],
+              style: portalStyle,
+              onMouseEnter: () => {
+                cancelCloseFlyout();
+                setHoverL1TooltipKey(activeItem.key);
+              },
+              onMouseLeave: scheduleCloseFlyout,
+              "data-testid": `cap-navigation-spa-sidebar-l1-tooltip-${activeItem.key}`,
+              role: "tooltip",
+              "aria-label": activeItem.title,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l2-flyout-arrow"], "aria-hidden": true }),
+                /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l1-tooltip-card"], children: /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l1-tooltip-label"], children: activeItem.title }) })
+              ]
+            }
+          );
+          return createPortal(portalContent, document.body);
+        })(),
+        collapsed && showExpandTooltip && (() => {
+          const pos = getExpandTooltipPos();
+          if (!pos) return null;
+          return createPortal(
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: styles["cap-navigation-spa-sidebar__l1-tooltip-flyout"],
+                style: {
+                  position: "fixed",
+                  left: pos.right + 4,
+                  top: pos.top + pos.height / 2,
+                  transform: "translateY(-50%)",
+                  zIndex: 10,
+                  display: "flex",
+                  alignItems: "center"
+                },
+                onMouseEnter: () => setShowExpandTooltip(true),
+                onMouseLeave: () => setShowExpandTooltip(false),
+                role: "tooltip",
+                "aria-label": "Expand panel",
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l2-flyout-arrow"], "aria-hidden": true }),
+                  /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l1-tooltip-card"], children: /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l1-tooltip-label"], children: "Expand panel" }) })
+                ]
+              }
+            ),
+            document.body
+          );
+        })()
+      ]
+    }
+  );
+};
+export {
+  CapNavigationSPASidebar as default
+};