orcs-design-system 3.3.48 → 3.3.54

package/README.md

@@ -36,15 +36,7 @@ A new browser window will open with a random localhost port. ORCS runs [Storyboo
 
 All library components and files are located in `/lib`. Static files are located in `/assets`.
 
-### Viewing changes in PM / TD.
-
-As an alternative to `npm link` you can run `npm run dist` and then copy the `es` folder directly into TD or PM:
-
-`cp -R es/ ../../../team-directory/node_modules/orcs-design-system/`
-
-**_This has now been been made easier with using Nodemon and a custom script. Read on for how to set this up._**
-
-### Working with orcs locally (hot reloading).
+### Viewing local orcs changes in other projects (with hot reloading)
 
 1. `cp .env.example .env`
 2. OPTIONAL: Update `WORKING_DIR` in `.env` if orcs resides in a different working directory to your project. Else-wise Orcs will assume the project is one level up from itself.
@@ -63,39 +55,6 @@ snapshot: {
 
 Now you can make any changes in orcs and it will build and then copy the es from the build into your project's node_modules. Run `npm install` in your project dir if you want to revert to the npm installation.
 
-### Symlinking with `npm link`
-
-##### We haven't had much success with this recently
-
-If you need to do `npm link` in your local environment you might encounter the following issues:
-
-- https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react
-- https://github.com/styled-components/styled-components/issues/2379
-
-Both react and styled-components cause duplicate instance issue after npm link, to fix that we need to ensure both app project and lib project are sharing the same instance of them.
-
-In `orcs-design-system` folder:
-
-```
-npm link {PATH_APP_REPO}/node_modules/react
-npm link {PATH_APP_REPO}/node_modules/styled-components
-npm link
-```
-
-In `{PATH_APP_REPO}`:
-
-```
-npm i orcs-design-system
-npm link orcs-design-system
-npm start
-```
-
-### Testing
-
-```
-npm run test
-```
-
 ### Publishing changes
 
 In order to publish a new version, you will have to patch and push your changes.
@@ -105,11 +64,11 @@ After your changes have been merged to master, from your master branch:
 npm version patch
 ```
 
-Then create a new pull request to master with the version update.
+This will bump version patch number and make a commit to current branch.
 
 ### Deploying to GitHub Pages
 
-ORCS automatically deploys to GitHub Pages when a new version is published. To manually deploy:
+ORCS automatically deploys to GitHub Pages when a new version is published and merged to master. To manually deploy:
 
 ```
 npm run deploy-storybook
@@ -138,17 +97,11 @@ import { Box } from "orcs-design-system"
 
 The [ORCS Storybook](https://orchestrated-io.github.io/orcs-design-system) contains documentation for each component, including code examples and props tables.
 
-For components with subcomponents, each subcomponent must be imported. For example, to use `Tabs`:
-
-```
-import { TabsContainer, Tab } from "orcs-design-system"
-```
-
 ### Using Styled System props
 
-The design system components are built with [Styled System](https://styled-system.com/) props. Generally, components can access the `space` and `layout` prop categories, with additional prop categories on a per-component basis. Check the _Properties_ section in a component's documentation to see what props it can use. Custom props will be listed in the props table.
+The design system components are built with [Styled System](https://github.com/styled-system/styled-system) props. Generally, components can access the `space` and `layout` prop categories, with additional prop categories on a per-component basis. Check the _Properties_ section in a component's documentation to see what props it can use. Custom props will be listed in the props table.
 
-As a guide to using these props, see the [Styled System reference table](https://styled-system.com/table).
+As a guide to using these props, see the [Styled System reference table](https://github.com/styled-system/styled-system/blob/master/docs/table.md).
 
 The design system's theme scales are contained in [systemtheme](https://github.com/orchestrated-io/orcs-design-system/blob/master/packages/orcs-design-system/lib/systemtheme.js).
 

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/es/components/Tag/index.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TagWrapper = styled.div.withConfig({
   displayName: "Tag__TagWrapper",
   componentId: "sc-1dh2aa8-0"
-})(["", " ", " display:flex;align-items:stretch;height:100%;min-height:", ";justify-content:center;> button{margin:0;}"], space, layout, props => props.small ? themeGet("tagScale.tagHeightSmall") : themeGet("tagScale.tagHeightDefault"));
+})(["", " ", " display:flex;align-items:stretch;height:auto;max-height:max-content;min-height:", ";justify-content:center;> button{margin:0;}"], space, layout, props => props.small ? themeGet("tagScale.tagHeightSmall") : themeGet("tagScale.tagHeightDefault"));
 const TagValue = styled.button.attrs(props => ({
   "aria-pressed": props.selected
 })).withConfig({

package/package.json

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