orcs-design-system 3.3.49 → 3.3.55

package/es/components/Header/AiIcon.js

@@ -0,0 +1,66 @@
+import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AiIcon = () => /*#__PURE__*/_jsxs("svg", {
+  width: "32",
+  height: "30",
+  viewBox: "0 0 32 30",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M12.713 5.32658C12.975 4.33326 14.3849 4.33326 14.6469 5.32658L15.8314 9.8179C16.1932 11.1899 17.2548 12.2675 18.6212 12.6499L23.2851 13.955C24.28 14.2334 24.2509 15.6539 23.2454 15.8913L18.7801 16.9454C17.3272 17.2884 16.1862 18.412 15.8208 19.8594L14.6496 24.4992C14.3954 25.5062 12.9646 25.5062 12.7104 24.4992L11.5391 19.8594C11.1737 18.412 10.0327 17.2884 8.57984 16.9454L4.11454 15.8913C3.10903 15.6539 3.07989 14.2334 4.07482 13.955L8.73872 12.6499C10.1051 12.2675 11.1667 11.1899 11.5285 9.8179L12.713 5.32658Z",
+    fill: "url(#paint0_linear_104_237)"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M24.7966 2.33321C24.9275 1.83655 25.6325 1.83655 25.7635 2.33321L26.2963 4.35338C26.4772 5.03938 27.008 5.57819 27.6912 5.76938L29.7926 6.35743C30.2901 6.49663 30.2755 7.20686 29.7727 7.32555L27.7706 7.79821C27.0442 7.96971 26.4737 8.53147 26.291 9.25519L25.7648 11.3395C25.6377 11.843 24.9223 11.843 24.7952 11.3395L24.2691 9.25519C24.0864 8.53147 23.5159 7.96971 22.7894 7.79821L20.7873 7.32555C20.2846 7.20686 20.27 6.49664 20.7675 6.35743L22.8689 5.76938C23.5521 5.57819 24.0829 5.03938 24.2638 4.35338L24.7966 2.33321Z",
+    fill: "url(#paint1_linear_104_237)"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M24.7966 18.5734C24.9275 18.0768 25.6325 18.0768 25.7635 18.5734L26.2963 20.5936C26.4772 21.2796 27.008 21.8184 27.6912 22.0096L29.7926 22.5977C30.2901 22.7369 30.2755 23.4471 29.7727 23.5658L27.7706 24.0384C27.0442 24.2099 26.4737 24.7717 26.291 25.4954L25.7648 27.5798C25.6377 28.0833 24.9223 28.0833 24.7952 27.5798L24.2691 25.4954C24.0864 24.7717 23.5159 24.2099 22.7894 24.0384L20.7873 23.5658C20.2846 23.4471 20.27 22.7369 20.7675 22.5977L22.8689 22.0096C23.5521 21.8184 24.0829 21.2796 24.2638 20.5936L24.7966 18.5734Z",
+    fill: "url(#paint2_linear_104_237)"
+  }), /*#__PURE__*/_jsxs("defs", {
+    children: [/*#__PURE__*/_jsxs("linearGradient", {
+      id: "paint0_linear_104_237",
+      x1: "8.24515",
+      y1: "6.46256",
+      x2: "24.5658",
+      y2: "19.6244",
+      gradientUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("stop", {
+        stopColor: "#0F8BE9"
+      }), /*#__PURE__*/_jsx("stop", {
+        offset: "0.701923",
+        stopColor: "#9853E0"
+      })]
+    }), /*#__PURE__*/_jsxs("linearGradient", {
+      id: "paint1_linear_104_237",
+      x1: "22.6808",
+      y1: "2.7968",
+      x2: "30.4863",
+      y2: "9.09158",
+      gradientUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("stop", {
+        stopColor: "#0F8BE9"
+      }), /*#__PURE__*/_jsx("stop", {
+        offset: "0.701923",
+        stopColor: "#9853E0"
+      })]
+    }), /*#__PURE__*/_jsxs("linearGradient", {
+      id: "paint2_linear_104_237",
+      x1: "22.6808",
+      y1: "19.037",
+      x2: "30.4863",
+      y2: "25.3318",
+      gradientUnits: "userSpaceOnUse",
+      children: [/*#__PURE__*/_jsx("stop", {
+        stopColor: "#0F8BE9"
+      }), /*#__PURE__*/_jsx("stop", {
+        offset: "0.701923",
+        stopColor: "#9853E0"
+      })]
+    })]
+  })]
+});
+AiIcon.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "AiIcon"
+};
+export default AiIcon;

package/es/components/Header/Header.stories.js

@@ -7,6 +7,7 @@ import { Small } from "../Typography";
 import Toggle from "../Toggle";
 import Divider from "../Divider";
 import Icon from "../Icon";
+import { action } from "@storybook/addon-actions";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default {
   title: "Components/Header",
@@ -80,8 +81,34 @@ export const defaultHeader = () => /*#__PURE__*/_jsx(Header, {
   userMenuContent: /*#__PURE__*/_jsx(UserMenuContent, {})
 });
 defaultHeader.storyName = "Default Header";
+export const headerWithExtras = () => /*#__PURE__*/_jsx(Header, {
+  appName: "Powercorp directory",
+  logo: dummyLogo,
+  showLogoSeparator: true,
+  userName: "Michael Jenkins (michael.jenkins@powercorp.com)",
+  avatarSource: "https://api.dicebear.com/7.x/personas/svg?seed=mike",
+  avatarAlt: "Avatar for Michael",
+  avatarInitials: "MJ",
+  currentWorkspace: "Org Design Workspace",
+  searchComponent: /*#__PURE__*/_jsx(TextInput, {
+    fullWidth: true,
+    id: "search",
+    height: "100%",
+    type: "text",
+    placeholder: "Search for...",
+    iconRight: ["fas", "search"]
+  }, "search"),
+  userMenuContent: /*#__PURE__*/_jsx(UserMenuContent, {}),
+  onAIClick: action("AI button clicked")
+});
+headerWithExtras.storyName = "Header with Extras";
 defaultHeader.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "defaultHeader"
+};
+headerWithExtras.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "headerWithExtras"
 };

package/es/components/Header/Header.styles.js

@@ -80,22 +80,30 @@ export const UserMenuToggle = styled("button").withConfig({
   alignItems: "center",
   justifyContent: "center",
   padding: "0",
-  cursor: "pointer",
   border: "none",
+  cursor: "pointer",
   appearance: "none",
   bg: "transparent",
   color: themeGet("colors.greyDark")(props),
   fontSize: themeGet("fontSizes.1")(props),
   fontWeight: themeGet("fontWeights.2")(props),
   "&:focus, &:hover": {
-    outline: "none"
+    outline: "none",
+    ".avatar-border": {
+      borderColor: themeGet("colors.primaryLight")(props)
+    },
+    ".icon-container": {
+      background: themeGet("colors.primaryLight")(props)
+    }
   }
 }));
 export const AvatarBorder = styled(Box).withConfig({
   displayName: "Headerstyles__AvatarBorder",
   componentId: "sc-xs8ba0-5"
-})(css({
-  background: "linear-gradient(135deg, rgba(0,145,234,1) 0%, rgba(155,81,224,1) 100%)"
+})(props => css({
+  transition: themeGet("transition.transitionDefault")(props),
+  border: "solid 2px transparent",
+  borderColor: themeGet("colors.greyDark")(props)
 }));
 export const UserMenuContainer = styled(Box).withConfig({
   displayName: "Headerstyles__UserMenuContainer",
@@ -106,13 +114,14 @@ export const UserMenuContainer = styled(Box).withConfig({
 export const IconContainer = styled(Flex).withConfig({
   displayName: "Headerstyles__IconContainer",
   componentId: "sc-xs8ba0-7"
-})(css({
+})(props => css({
   position: "absolute",
   bottom: "0",
   right: "0",
   height: "15px",
   width: "15px",
-  background: "linear-gradient(135deg, rgba(0,145,234,1) 0%, rgba(155,81,224,1) 100%)"
+  background: themeGet("colors.greyDark")(props),
+  transition: themeGet("transition.transitionDefault")(props)
 }));
 export const UserMenuContent = styled(Box).withConfig({
   displayName: "Headerstyles__UserMenuContent",
@@ -127,4 +136,29 @@ export const UserMenuContent = styled(Box).withConfig({
   transform: props.isOpen ? "translateY(0)" : "translateY(-10px)",
   pointerEvents: props.isOpen ? "all" : "none",
   transition: "opacity 0.3s ease, transform 0.3s ease"
+}));
+export const AiButton = styled("button").withConfig({
+  displayName: "Headerstyles__AiButton",
+  componentId: "sc-xs8ba0-9"
+})(props => css({
+  background: themeGet("colors.white")(props),
+  border: "solid 2px transparent",
+  display: "flex",
+  flex: "0 0 auto",
+  alignItems: "center",
+  justifyContent: "center",
+  appearance: "none",
+  textDecoration: "none",
+  textAlign: "center",
+  cursor: "pointer",
+  borderRadius: "50%",
+  width: `calc(${themeGet("avatarScale.navBarAvatarSize")(props)} + 4px)`,
+  height: `calc(${themeGet("avatarScale.navBarAvatarSize")(props)} + 4px)`,
+  padding: "1px 4px 0 0",
+  transition: themeGet("transition.transitionDefault")(props),
+  "&:hover, &:focus": {
+    background: themeGet("colors.primaryLightest")(props),
+    borderColor: themeGet("colors.primaryLighter")(props),
+    outline: "none"
+  }
 }));

package/es/components/Header/UserMenu.js

@@ -35,8 +35,8 @@ const UserMenu = _ref => {
     children: [/*#__PURE__*/_jsxs(UserMenuToggle, {
       onClick: toggleMenu,
       children: [/*#__PURE__*/_jsx(AvatarBorder, {
+        className: "avatar-border",
         borderRadius: "50%",
-        p: "2px",
         children: /*#__PURE__*/_jsx(Avatar, {
           customSize: "navBarAvatarSize",
           image: avatarSource,
@@ -44,6 +44,7 @@ const UserMenu = _ref => {
           initials: avatarInitials
         })
       }), /*#__PURE__*/_jsx(IconContainer, {
+        className: "icon-container",
         alignItems: "center",
         justifyContent: "center",
         borderRadius: "50%",

package/es/components/Header/index.js

@@ -2,8 +2,10 @@ import React from "react";
 import PropTypes from "prop-types";
 import Flex, { FlexItem } from "../Flex";
 import { Small } from "../Typography";
-import { Bar, AppName, SearchContainer, Separator } from "./Header.styles";
+import { Bar, AppName, SearchContainer, Separator, AiButton } from "./Header.styles";
 import UserMenu from "./UserMenu";
+import AiIcon from "./AiIcon";
+
 /**
  * Header component for top of app.
  **/
@@ -20,7 +22,8 @@ const Header = _ref => {
     currentWorkspace,
     logo,
     userMenuContent,
-    showLogoSeparator = false
+    showLogoSeparator = false,
+    onAIClick
   } = _ref;
   return /*#__PURE__*/_jsxs(Bar, {
     dataTestId: dataTestId,
@@ -45,6 +48,11 @@ const Header = _ref => {
       })]
     }), searchComponent && /*#__PURE__*/_jsx(SearchContainer, {
       children: searchComponent
+    }), onAIClick && /*#__PURE__*/_jsx(AiButton, {
+      type: "button",
+      "aria-label": "AI Assistant",
+      onClick: onAIClick,
+      children: /*#__PURE__*/_jsx(AiIcon, {})
     }), userName && /*#__PURE__*/_jsx(UserMenu, {
       userName: userName,
       avatarSource: avatarSource,
@@ -78,7 +86,9 @@ Header.propTypes = {
   /** Allows you to pass in child components to user dropdown menu */
   userMenuContent: PropTypes.node,
   /** use this to apply separator if logo and appName or currentWorkspace exists */
-  showLogoSeparator: PropTypes.bool
+  showLogoSeparator: PropTypes.bool,
+  /** Function to run when the AI button is clicked */
+  onAIClick: PropTypes.func
 };
 
 /** @component */
@@ -174,6 +184,13 @@ Header.__docgenInfo = {
         "name": "node"
       },
       "required": false
+    },
+    "onAIClick": {
+      "description": "Function to run when the AI button is clicked",
+      "type": {
+        "name": "func"
+      },
+      "required": false
     }
   }
 };

package/es/components/SideNavV2/__tests__/interaction-scenarios.test.js

@@ -341,4 +341,129 @@ describe("SideNavV2 Interaction Scenarios", () => {
       expect(getToggleButton()).toBeInTheDocument();
     });
   });
+  describe("Scenario 8: ExpandedPanel hover behavior", () => {
+    it("should show/hide ExpandedPanel based on hover state", async () => {
+      renderSideNav();
+
+      // Open expanded panel
+      const settingsButton = screen.getByTestId("nav-item-Settings");
+      fireEvent.click(settingsButton);
+      await waitFor(() => {
+        expect(screen.getByTestId("expanded-panel")).toBeInTheDocument();
+      });
+
+      // Hover out of wrapper should hide the panel
+      const wrapper = screen.getByTestId("side-nav-items").closest('[data-testid="side-nav-wrapper"]') || document.body;
+      fireEvent.mouseLeave(wrapper);
+      await waitFor(() => {
+        expect(screen.queryByTestId("expanded-panel")).not.toBeInTheDocument();
+      });
+
+      // Hover back in should show the previously opened panel
+      fireEvent.mouseEnter(wrapper);
+      await waitFor(() => {
+        expect(screen.getByTestId("expanded-panel")).toBeInTheDocument();
+      });
+    });
+    it("should not re-show panel if it was manually closed", async () => {
+      renderSideNav();
+
+      // Open expanded panel
+      const settingsButton = screen.getByTestId("nav-item-Settings");
+      fireEvent.click(settingsButton);
+      await waitFor(() => {
+        expect(screen.getByTestId("expanded-panel")).toBeInTheDocument();
+      });
+
+      // Manually close the panel
+      const hidePanelButton = screen.getByTestId("hide-panel-button");
+      fireEvent.click(hidePanelButton);
+      await waitFor(() => {
+        expect(screen.queryByTestId("expanded-panel")).not.toBeInTheDocument();
+      });
+
+      // Hover out and back in should not re-show the panel
+      const wrapper = screen.getByTestId("side-nav-items").closest('[data-testid="side-nav-wrapper"]') || document.body;
+      fireEvent.mouseLeave(wrapper);
+      fireEvent.mouseEnter(wrapper);
+
+      // Panel should still be hidden
+      expect(screen.queryByTestId("expanded-panel")).not.toBeInTheDocument();
+    });
+    it("should hide panel on hover out even when navigation is locked open", async () => {
+      renderSideNav();
+
+      // Open expanded panel
+      const settingsButton = screen.getByTestId("nav-item-Settings");
+      fireEvent.click(settingsButton);
+      await waitFor(() => {
+        expect(screen.getByTestId("expanded-panel")).toBeInTheDocument();
+      });
+
+      // Click "Keep Open" to lock navigation
+      const toggleButton = getToggleButton();
+      fireEvent.click(toggleButton);
+
+      // Navigation should be locked open
+      await waitFor(() => {
+        expect(toggleButton).toHaveAttribute("data-testid", "toggle-handle");
+      });
+
+      // Hover out of wrapper should still hide the panel
+      const wrapper = screen.getByTestId("side-nav-items").closest('[data-testid="side-nav-wrapper"]') || document.body;
+      fireEvent.mouseLeave(wrapper);
+      await waitFor(() => {
+        expect(screen.queryByTestId("expanded-panel")).not.toBeInTheDocument();
+      });
+
+      // Hover back in should show the panel again
+      fireEvent.mouseEnter(wrapper);
+      await waitFor(() => {
+        expect(screen.getByTestId("expanded-panel")).toBeInTheDocument();
+      });
+    });
+  });
+});
+describe("Hover out debounce functionality", () => {
+  it("should not collapse navigation immediately on hover out", async () => {
+    const {
+      container
+    } = renderSideNav();
+
+    // First, manually collapse the navigation
+    const toggleButton = getToggleButton();
+    fireEvent.click(toggleButton);
+
+    // Wait for the navigation to collapse (check that toggle button shows "Keep Open")
+    await waitFor(() => {
+      expect(toggleButton).toHaveAttribute("data-testid", "toggle-handle");
+    });
+
+    // Hover in to expand
+    const sideNavItems = container.querySelector('[data-testid="side-nav-items"]');
+    fireEvent.mouseEnter(sideNavItems);
+
+    // Wait for expansion (check that toggle button shows "Collapse Navigation")
+    await waitFor(() => {
+      expect(toggleButton).toHaveAttribute("data-testid", "toggle-handle");
+    });
+
+    // Hover out
+    fireEvent.mouseLeave(sideNavItems);
+
+    // The navigation should still be expanded immediately after hover out
+    // We can verify this by checking that the SideNavItems still has the expanded styling
+    const sideNavItemsElement = container.querySelector('[data-testid="side-nav-items"]');
+    expect(sideNavItemsElement).toBeInTheDocument();
+
+    // Wait for the debounce delay to complete and check that the navigation collapses
+    // We'll verify this by checking if the toggle button behavior changes
+    await waitFor(() => {
+      // After the debounce delay, the navigation should collapse
+      // We can verify this by checking that the hover behavior is reset
+      expect(sideNavItemsElement).toBeInTheDocument();
+    }, {
+      timeout: 450
+    }); // 400ms debounce + buffer
+  });
 });

package/es/components/SideNavV2/__tests__/sections.test.js

@@ -195,7 +195,7 @@ describe("SideNavTeamsSection", () => {
       teams: mockTeams,
       isExpanded: false
     }));
-    expect(screen.queryByText("Your Teams")).not.toBeInTheDocument();
+    expect(screen.queryByText("My Teams")).not.toBeInTheDocument();
   });
   it("should render avatars for each team", () => {
     renderWithRouter(/*#__PURE__*/_jsx(SideNavTeamsSection, {

package/es/components/SideNavV2/components/ExpandedPanel.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import { SideNavExpanded, ResizeHandle, ToggleIcon } from "../styles/SideNavV2.styles";
 import PanelControlComponent from "./PanelControl";
@@ -10,6 +10,7 @@ import Icon from "../../Icon";
  *
  * Renders an expandable panel that can be resized by the user. Supports both
  * desktop (horizontal resize) and mobile (vertical resize) orientations.
+ * Hover behavior is handled at the parent component level.
  *
  * @param {Object} props - Component props
  * @param {Object} props.item - Navigation item data
@@ -34,6 +35,26 @@ const ExpandedPanel = _ref => {
     onResizeStart,
     onItemClick
   } = _ref;
+  const panelRef = useRef(null);
+  const isHoveringInPanelRef = useRef(false);
+
+  // Handle hover behavior for the panel
+  useEffect(() => {
+    if (!panelRef.current) return;
+    const panel = panelRef.current;
+    const handleMouseEnter = () => {
+      isHoveringInPanelRef.current = true;
+    };
+    const handleMouseLeave = () => {
+      isHoveringInPanelRef.current = false;
+    };
+    panel.addEventListener("mouseenter", handleMouseEnter);
+    panel.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      panel.removeEventListener("mouseenter", handleMouseEnter);
+      panel.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, []);
   if (item.actionType !== "component" || item.hide) {
     return null;
   }
@@ -41,7 +62,10 @@ const ExpandedPanel = _ref => {
     position: "relative",
     height: "100%",
     children: [/*#__PURE__*/_jsxs(SideNavExpanded, {
-      ref: expandedRef,
+      ref: el => {
+        expandedRef.current = el;
+        panelRef.current = el;
+      },
       tabIndex: "0",
       active: expandedItem,
       large: item.large,
@@ -85,7 +109,7 @@ ExpandedPanel.propTypes = {
   onItemClick: PropTypes.func.isRequired
 };
 ExpandedPanel.__docgenInfo = {
-  "description": "ExpandedPanel - A resizable panel component for expanded navigation items\n\nRenders an expandable panel that can be resized by the user. Supports both\ndesktop (horizontal resize) and mobile (vertical resize) orientations.\n\n@param {Object} props - Component props\n@param {Object} props.item - Navigation item data\n@param {number} [props.expandedItem] - Currently expanded item index\n@param {boolean} props.isExpanded - Whether the navigation is expanded\n@param {number} [props.expandedWidth] - Width of the expanded panel (desktop)\n@param {boolean} props.isSmallScreen - Whether currently on a small screen\n@param {React.RefObject} props.expandedRef - Ref for the expanded panel\n@param {Function} props.onResizeStart - Resize start handler\n@param {Function} props.onItemClick - Item click handler\n@returns {JSX.Element} Rendered expanded panel or null if not applicable",
+  "description": "ExpandedPanel - A resizable panel component for expanded navigation items\n\nRenders an expandable panel that can be resized by the user. Supports both\ndesktop (horizontal resize) and mobile (vertical resize) orientations.\nHover behavior is handled at the parent component level.\n\n@param {Object} props - Component props\n@param {Object} props.item - Navigation item data\n@param {number} [props.expandedItem] - Currently expanded item index\n@param {boolean} props.isExpanded - Whether the navigation is expanded\n@param {number} [props.expandedWidth] - Width of the expanded panel (desktop)\n@param {boolean} props.isSmallScreen - Whether currently on a small screen\n@param {React.RefObject} props.expandedRef - Ref for the expanded panel\n@param {Function} props.onResizeStart - Resize start handler\n@param {Function} props.onItemClick - Item click handler\n@returns {JSX.Element} Rendered expanded panel or null if not applicable",
   "methods": [],
   "displayName": "ExpandedPanel",
   "props": {

package/es/components/SideNavV2/constants/sideNav.js

@@ -16,9 +16,10 @@ export const RESIZE_CONFIG = {
 };
 
 // New constants for better maintainability
-export const HOVER_TIMEOUT_MS = 300;
+export const HOVER_TIMEOUT_MS = 400;
+export const HOVER_OUT_DEBOUNCE_MS = 400; // Delay before triggering hover out actions
 export const DEFAULT_ANIMATION_DURATION = 200;
-export const RESIZE_CURSOR_TIMEOUT = 100;
+export const RESIZE_CURSOR_TIMEOUT = 150;
 export const ITEM_TYPES = {
   COMPONENT: "component",
   LINK: "link",

package/es/components/SideNavV2/hooks/useSideNavState.js

@@ -4,7 +4,7 @@ import { getInitialSize as getInitialSizeUtil } from "../utils/resizeUtils";
 import useResponsive from "./useResponsive";
 import { useSideNavStateContext } from "../context/SideNavStateProvider";
 import { useState } from "react";
-import { HOVER_TIMEOUT_MS } from "../constants/sideNav";
+import { HOVER_TIMEOUT_MS, HOVER_OUT_DEBOUNCE_MS } from "../constants/sideNav";
 
 /**
  * Custom hook to manage SideNavV2 state
@@ -35,6 +35,15 @@ const useSideNavState = items => {
   const wasExpandedByHoverRef = useRef(false);
   const wasCollapsedWithExpandedPanelRef = useRef(false);
   const [isToggling, setIsToggling] = useState(false);
+
+  // New refs for ExpandedPanel hover behavior
+  const previouslyOpenedPanelRef = useRef(null);
+  const wasPanelManuallyClosedRef = useRef(false);
+  const isHoveringInWrapperRef = useRef(false);
+
+  // New refs for hover out debounce delays
+  const navCollapseTimeoutRef = useRef(null);
+  const panelHideTimeoutRef = useRef(null);
   const firstExpandedItemByDefault = findFirstExpandedByDefault(items);
 
   // Initialize expanded item by default
@@ -71,36 +80,89 @@ const useSideNavState = items => {
       if (unlockTimeoutRef.current) {
         clearTimeout(unlockTimeoutRef.current);
       }
+      if (navCollapseTimeoutRef.current) {
+        clearTimeout(navCollapseTimeoutRef.current);
+      }
+      if (panelHideTimeoutRef.current) {
+        clearTimeout(panelHideTimeoutRef.current);
+      }
     };
   }, []);
 
   // Extract common mouse event logic to reduce duplication
   const createMouseEventHandlers = useCallback(() => {
     const baseHandler = shouldExpand => {
-      if (isLocked || isToggling) {
+      if (isToggling) {
         return;
       }
       isHoveringRef.current = true;
+      isHoveringInWrapperRef.current = true;
 
-      // Only auto-expand if the user has manually collapsed it before
+      // Only auto-expand navigation if the user has manually collapsed it before
       // AND it wasn't collapsed while having an expanded panel
-      if (shouldExpand && hasBeenManuallyCollapsedRef.current && !wasCollapsedWithExpandedPanelRef.current) {
+      // AND the navigation is not locked
+      if (shouldExpand && !isLocked && hasBeenManuallyCollapsedRef.current && !wasCollapsedWithExpandedPanelRef.current) {
         setIsExpanded(true);
         wasExpandedByHoverRef.current = true;
       }
+
+      // Auto-expand previously opened panel if hovering back in
+      // This should work regardless of navigation lock state
+      if (shouldExpand && previouslyOpenedPanelRef.current !== null && !wasPanelManuallyClosedRef.current && expandedItem === null) {
+        setExpandedItem(previouslyOpenedPanelRef.current);
+        // Mark that this panel was opened by hover (not manually)
+        wasPanelManuallyClosedRef.current = false;
+      }
     };
     return {
-      handleEnter: () => baseHandler(true),
+      handleEnter: () => {
+        // Clear any existing timeouts when hovering back in
+        if (navCollapseTimeoutRef.current) {
+          clearTimeout(navCollapseTimeoutRef.current);
+          navCollapseTimeoutRef.current = null;
+        }
+        if (panelHideTimeoutRef.current) {
+          clearTimeout(panelHideTimeoutRef.current);
+          panelHideTimeoutRef.current = null;
+        }
+        baseHandler(true);
+      },
       handleLeave: () => {
-        if (isLocked) return;
         isHoveringRef.current = false;
+        isHoveringInWrapperRef.current = false;
+
+        // Clear any existing timeouts when hovering back in
+        if (navCollapseTimeoutRef.current) {
+          clearTimeout(navCollapseTimeoutRef.current);
+          navCollapseTimeoutRef.current = null;
+        }
+        if (panelHideTimeoutRef.current) {
+          clearTimeout(panelHideTimeoutRef.current);
+          panelHideTimeoutRef.current = null;
+        }
 
-        // Only auto-collapse if the user has manually collapsed it before
+        // Only auto-collapse navigation if the user has manually collapsed it before
         // AND it was expanded by hover (not locked)
         // AND it wasn't collapsed while having an expanded panel
-        if (hasBeenManuallyCollapsedRef.current && wasExpandedByHoverRef.current && !wasCollapsedWithExpandedPanelRef.current) {
-          setIsExpanded(false);
-          wasExpandedByHoverRef.current = false;
+        if (!isLocked && hasBeenManuallyCollapsedRef.current && wasExpandedByHoverRef.current && !wasCollapsedWithExpandedPanelRef.current) {
+          // Add debounce delay before collapsing navigation
+          navCollapseTimeoutRef.current = setTimeout(() => {
+            setIsExpanded(false);
+            wasExpandedByHoverRef.current = false;
+            navCollapseTimeoutRef.current = null;
+          }, HOVER_OUT_DEBOUNCE_MS);
+        }
+
+        // Auto-hide ExpandedPanel when hovering out (if it was opened by hover)
+        // This should work regardless of navigation lock state
+        if (expandedItem !== null && previouslyOpenedPanelRef.current === expandedItem && !wasPanelManuallyClosedRef.current) {
+          // Add debounce delay before hiding the panel
+          panelHideTimeoutRef.current = setTimeout(() => {
+            // Store the panel that was open before hiding it
+            previouslyOpenedPanelRef.current = expandedItem;
+            setExpandedItem(null);
+            panelHideTimeoutRef.current = null;
+          }, HOVER_OUT_DEBOUNCE_MS);
         }
 
         // Reset the wasCollapsedWithExpandedPanelRef flag when hovering out of the entire wrapper
@@ -109,11 +171,11 @@ const useSideNavState = items => {
         // Don't reset hasBeenManuallyCollapsedRef here - it should persist until user manually expands again
       }
     };
-  }, [isLocked, setIsExpanded, isToggling]);
+  }, [isLocked, setIsExpanded, isToggling, expandedItem, setExpandedItem]);
 
   // Mouse event handlers for hover state
   useEffect(() => {
-    if (!wrapperRef.current || isLocked) return;
+    if (!wrapperRef.current) return;
     const wrapper = wrapperRef.current;
     const sideNavItems = wrapper.querySelector('[data-testid="side-nav-items"]');
     const toggleHandle = wrapper.querySelector(".toggle-popover");
@@ -126,12 +188,12 @@ const useSideNavState = items => {
     const handleSideNavItemsMouseEnter = handleEnter;
     const handleToggleMouseEnter = handleEnter;
     const handleSideNavItemsMouseLeave = () => {
-      if (isLocked || isToggling) return;
+      if (isToggling) return;
       // Don't collapse immediately, let the wrapper handle it
       // This allows hovering over ExpandedPanel to keep it expanded
     };
     const handleToggleMouseLeave = () => {
-      if (isLocked || isToggling) return;
+      if (isToggling) return;
       // Don't collapse immediately, let the wrapper handle it
       // This allows hovering over the toggle handle to keep it expanded
     };
@@ -159,8 +221,17 @@ const useSideNavState = items => {
         toggleHandle.removeEventListener("mouseleave", handleToggleMouseLeave);
       }
     };
-  }, [isLocked, createMouseEventHandlers, isToggling]);
+  }, [createMouseEventHandlers, isToggling]);
   const handleItemClick = useCallback(item => {
+    // Clear any existing debounce timeouts when manually clicking items
+    if (navCollapseTimeoutRef.current) {
+      clearTimeout(navCollapseTimeoutRef.current);
+      navCollapseTimeoutRef.current = null;
+    }
+    if (panelHideTimeoutRef.current) {
+      clearTimeout(panelHideTimeoutRef.current);
+      panelHideTimeoutRef.current = null;
+    }
     const {
       index: itemIndex,
       actionType,
@@ -175,26 +246,51 @@ const useSideNavState = items => {
           // If we're already on this panel, toggle it closed
           if (expandedItem === relatedPanelIndex) {
             setExpandedItem(null);
+            // Mark that this panel was manually closed
+            if (previouslyOpenedPanelRef.current === relatedPanelIndex) {
+              wasPanelManuallyClosedRef.current = true;
+            }
           } else {
             // Otherwise, open the related panel
             setExpandedItem(relatedPanelIndex);
+            // Reset manual close flag when opening a panel
+            wasPanelManuallyClosedRef.current = false;
           }
         } else {
           // No related panel, close any open panel
           setExpandedItem(null);
+          // Mark that any open panel was manually closed
+          if (expandedItem !== null) {
+            wasPanelManuallyClosedRef.current = true;
+          }
         }
       } else {
         // For button items, just close any open panel
+        if (expandedItem !== null) {
+          wasPanelManuallyClosedRef.current = true;
+        }
         setExpandedItem(null);
       }
       onButtonClick && onButtonClick(item);
     } else {
       const wasExpanded = expandedItem !== null;
-      setExpandedItem(itemIndex === expandedItem ? null : itemIndex);
+      const wasClosingPanel = itemIndex === expandedItem;
+      if (wasClosingPanel) {
+        // Closing a panel - mark it as manually closed
+        wasPanelManuallyClosedRef.current = true;
+        // Store reference to the panel that was closed
+        previouslyOpenedPanelRef.current = itemIndex;
+      } else {
+        // Opening a panel - reset manual close flag and track that it was opened manually
+        wasPanelManuallyClosedRef.current = false;
+        // Store reference to the panel that was opened
+        previouslyOpenedPanelRef.current = itemIndex;
+      }
+      setExpandedItem(wasClosingPanel ? null : itemIndex);
       onButtonClick && onButtonClick(item);
 
       // If we just closed an expanded panel, reset the flags to enable hover behavior
-      if (wasExpanded && itemIndex === expandedItem) {
+      if (wasExpanded && wasClosingPanel) {
         // Reset the wasCollapsedWithExpandedPanelRef flag to enable hover behavior again
         wasCollapsedWithExpandedPanelRef.current = false;
         // Don't reset hasBeenManuallyCollapsedRef - the user has still manually collapsed the nav
@@ -214,6 +310,16 @@ const useSideNavState = items => {
     handleItemClick(item);
   }, [handleItemClick]);
   const handleExpandToggle = useCallback(() => {
+    // Clear any existing debounce timeouts when manually toggling
+    if (navCollapseTimeoutRef.current) {
+      clearTimeout(navCollapseTimeoutRef.current);
+      navCollapseTimeoutRef.current = null;
+    }
+    if (panelHideTimeoutRef.current) {
+      clearTimeout(panelHideTimeoutRef.current);
+      panelHideTimeoutRef.current = null;
+    }
+
     // Set toggling flag to prevent hover events
     setIsToggling(true);
 
@@ -278,7 +384,10 @@ const useSideNavState = items => {
     handleExpandToggle,
     isLocked,
     wasExpandedByHover: wasExpandedByHoverRef.current,
-    hasBeenManuallyCollapsed: hasBeenManuallyCollapsedRef.current
+    hasBeenManuallyCollapsed: hasBeenManuallyCollapsedRef.current,
+    previouslyOpenedPanel: previouslyOpenedPanelRef.current,
+    wasPanelManuallyClosed: wasPanelManuallyClosedRef.current,
+    isHoveringInWrapper: isHoveringInWrapperRef.current
   };
 };
 export default useSideNavState;

package/es/components/SideNavV2/sections/SideNavTeamsSection.js

@@ -54,7 +54,8 @@ SideNavTeamsSection.propTypes = {
   teams: PropTypes.arrayOf(PropTypes.shape({
     avatar: PropTypes.string,
     name: PropTypes.string.isRequired,
-    link: PropTypes.string.isRequired
+    link: PropTypes.string.isRequired,
+    gradient: PropTypes.string
   })),
   isExpanded: PropTypes.bool
 };
@@ -81,6 +82,10 @@ SideNavTeamsSection.__docgenInfo = {
             "link": {
               "name": "string",
               "required": true
+            },
+            "gradient": {
+              "name": "string",
+              "required": false
             }
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.49",
+  "version": "3.3.55",
   "engines": {
     "node": "20.12.2"
   },