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

package/CapNavigationSPA/CapNavigationSPASidebar/index.js

@@ -1,6 +1,7 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import classNames from "classnames";
-import { useRef, useState, useCallback } from "react";
+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";
@@ -34,15 +35,83 @@ const CapNavigationSPASidebar = ({
   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) {
@@ -67,12 +136,10 @@ const CapNavigationSPASidebar = ({
     (item) => {
       var _a, _b;
       if (collapsed) {
-        if (onCollapseExpand) {
-          onCollapseExpand();
-        }
         if ((_a = item.children) == null ? void 0 : _a.length) {
+          pendingExpandKeyRef.current = item.key;
+          if (onCollapseExpand) onCollapseExpand();
           setHoverExpandedKey(null);
-          setClickExpandedKey(item.key);
         } else {
           closeFlyout();
           handleClick(item);
@@ -84,287 +151,450 @@ const CapNavigationSPASidebar = ({
       } 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(() => {
-    setHoverExpandedKey(null);
-    setHoverL1TooltipKey(null);
-  }, []);
-  return /* @__PURE__ */ jsx(
+    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;
-              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 ((_a2 = item.children) == null ? void 0 : _a2.length) {
-                      if (collapsed) {
-                        setHoverExpandedKey(item.key);
+      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);
                       }
-                      setHoverL1TooltipKey(null);
-                    } else if (collapsed) {
-                      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`
+                      )
+                    ]
                   },
-                  "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,
+                  `${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",
                         {
-                          type: expandedParentKey === item.key ? "chevron-down" : "chevron-right",
-                          size: "s",
-                          className: styles["cap-navigation-spa-sidebar__item-chevron"]
+                          className: styles["cap-navigation-spa-sidebar__l2-flyout-arrow"],
+                          "aria-hidden": true
                         }
-                      ) : 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(
+                      ),
+                      /* @__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-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"]
+                              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-item-${child.key}`,
+                            "data-testid": `cap-navigation-spa-sidebar-l2-flyout-item-${child.key}`,
+                            role: "menuitem",
                             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: () => setHoverExpandedKey(item.key),
-                  "data-testid": `cap-navigation-spa-sidebar-l2-flyout-${item.key}`,
-                  role: "menu",
-                  "aria-label": item.title,
-                  children: [
+                      ] })
+                    ]
+                  },
+                  `${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__l2-flyout-arrow"],
+                        className: styles["cap-navigation-spa-sidebar__divider"],
                         "aria-hidden": true
-                      }
+                      },
+                      `divider-${item.key}`
                     ),
-                    /* @__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: () => setHoverL1TooltipKey(item.key),
-                  "data-testid": `cap-navigation-spa-sidebar-l1-tooltip-${item.key}`,
-                  role: "tooltip",
-                  "aria-label": item.title,
-                  children: [
+                    renderedButton,
+                    ...l2Inline ? [l2Inline] : []
+                  ];
+                }
+                if (item.key === "settings") {
+                  return [
                     /* @__PURE__ */ jsx(
                       "div",
                       {
-                        className: styles["cap-navigation-spa-sidebar__l2-flyout-arrow"],
+                        className: styles["cap-navigation-spa-sidebar__divider"],
                         "aria-hidden": true
-                      }
+                      },
+                      "divider-settings"
                     ),
-                    /* @__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 wrapForCollapsedFlyout = collapsed;
-              const renderedButton = wrapForCollapsedFlyout ? /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: styles["cap-navigation-spa-sidebar__item-flyout-wrap"],
-                  onMouseLeave: closeFlyout,
-                  children: [
-                    parentButton,
-                    collapsedFlyout,
-                    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
+                    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();
                     },
-                    `divider-${item.key}`
-                  ),
-                  renderedButton,
-                  ...l2Inline ? [l2Inline] : []
-                ];
-              }
-              if (item.key === "settings") {
-                return [
-                  /* @__PURE__ */ jsx(
-                    "div",
+                    "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",
                     {
-                      className: styles["cap-navigation-spa-sidebar__divider"],
-                      "aria-hidden": true
+                      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
                     },
-                    "divider-settings"
-                  ),
-                  renderedButton,
-                  ...l2Inline ? [l2Inline] : []
-                ];
+                    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" }) })
+                ]
               }
-              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);
-                  },
-                  "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 && /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__collapse-wrap"], children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: styles["cap-navigation-spa-sidebar__collapse-btn"],
-                  onClick: onCollapseExpand,
-                  "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-                  "data-testid": "cap-navigation-spa-sidebar-collapse-toggle",
-                  children: /* @__PURE__ */ jsx(
-                    CapIcon,
-                    {
-                      type: collapsed ? "sidebar-expand" : "sidebar-collapse",
-                      size: "s",
-                      className: styles["cap-navigation-spa-sidebar__collapse-btn-icon"]
-                    }
-                  )
-                }
-              ) })
-            ] })
-          ]
-        }
-      )
+            ),
+            document.body
+          );
+        })()
+      ]
     }
   );
 };