orcs-design-system 3.3.49 → 3.3.54

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

@@ -341,4 +341,86 @@ 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();
+      });
+    });
+  });
 });

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/hooks/useSideNavState.js

@@ -35,6 +35,11 @@ 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);
   const firstExpandedItemByDefault = findFirstExpandedByDefault(items);
 
   // Initialize expanded item by default
@@ -77,43 +82,61 @@ const useSideNavState = items => {
   // 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),
       handleLeave: () => {
-        if (isLocked) return;
         isHoveringRef.current = false;
+        isHoveringInWrapperRef.current = false;
 
-        // 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) {
+        if (!isLocked && hasBeenManuallyCollapsedRef.current && wasExpandedByHoverRef.current && !wasCollapsedWithExpandedPanelRef.current) {
           setIsExpanded(false);
           wasExpandedByHoverRef.current = false;
         }
 
+        // 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) {
+          // Store the panel that was open before hiding it
+          previouslyOpenedPanelRef.current = expandedItem;
+          setExpandedItem(null);
+        }
+
         // Reset the wasCollapsedWithExpandedPanelRef flag when hovering out of the entire wrapper
         // This allows hover behavior to work again after hovering out and back in
         wasCollapsedWithExpandedPanelRef.current = false;
         // 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 +149,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,7 +182,7 @@ const useSideNavState = items => {
         toggleHandle.removeEventListener("mouseleave", handleToggleMouseLeave);
       }
     };
-  }, [isLocked, createMouseEventHandlers, isToggling]);
+  }, [createMouseEventHandlers, isToggling]);
   const handleItemClick = useCallback(item => {
     const {
       index: itemIndex,
@@ -175,26 +198,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
@@ -278,7 +326,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.54",
   "engines": {
     "node": "20.12.2"
   },