Merge branch 'main' into dependabot/npm_and_yarn/npm_and_yarn-3fb24e0890

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.0.10](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v4.0.9...v4.0.10) (2024-09-11)
+
+
+### Bug Fixes
+
+* prevent nav from collapsing during local development ([#1510](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1510)) ([b907d88](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/b907d887db00ecff8a34f9ea1f36dc103cf6881c))
+
 ## [4.0.9](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v4.0.8...v4.0.9) (2024-09-11)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-theme-carbon-workspace",
   "private": true,
-  "version": "4.0.9",
+  "version": "4.0.10",
   "packageManager": "[email protected]",
   "repository": {
     "url": "[email protected]:carbon-design-system/gatsby-theme-carbon.git",

packages/example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example",
   "private": true,
-  "version": "4.0.9",
+  "version": "4.0.10",
   "license": "Apache 2.0",
   "scripts": {
     "dev": "gatsby develop -H 0.0.0.0",
@@ -14,7 +14,7 @@
   "dependencies": {
     "@carbon/icons-react": "^11.43.0",
     "gatsby": "^5.13.6",
-    "gatsby-theme-carbon": "^4.0.9",
+    "gatsby-theme-carbon": "^4.0.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }

packages/gatsby-theme-carbon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "4.0.9",
+  "version": "4.0.10",
   "main": "index.js",
   "author": "vpicone <[email protected]> (@vpicone)",
   "repository": {

packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js

@@ -23,6 +23,7 @@ const LeftNav = (props) => {
     leftNavScrollTop,
     setLeftNavScrollTop,
     toggleNavState,
+    pathPrefix,
   } = useContext(NavContext);
 
   const [isTreeView, setIsTreeView] = useState();
@@ -97,7 +98,11 @@ const LeftNav = (props) => {
       onClick={closeSwitcher}
       onKeyPress={closeSwitcher}>
       {isTreeView ? (
-        <LeftNavTree items={navItems} theme={props.theme} />
+        <LeftNavTree
+          items={navItems}
+          theme={props.theme}
+          pathPrefix={pathPrefix}
+        />
       ) : (
         <SideNav
           ref={sideNavRef}

packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavTree.js

@@ -10,14 +10,12 @@ import * as styles from './LeftNavTree.module.scss';
 import { dfs } from '../../util/NavTree';
 
 import LeftNavResourceLinks from './ResourceLinks';
-import usePathprefix from '../../util/hooks/usePathprefix';
 
-const LeftNavTree = ({ items, theme }) => {
+const LeftNavTree = ({ items, theme, pathPrefix }) => {
   const [itemNodes, setItemNodes] = useState([]);
   const [treeActiveItem, setTreeActiveItem] = useState({});
   const [activePath, setActivePath] = useState('');
   const location = useLocation();
-  const pathPrefix = usePathprefix();
 
   const themeValue = theme === 'dark' ? 'g100' : theme;
 
@@ -68,12 +66,11 @@ const LeftNavTree = ({ items, theme }) => {
   useEffect(() => {
     const stripTrailingSlash = (str) =>
       str.endsWith('/') ? str.slice(0, -1) : str;
-
     const base = pathPrefix
       ? location.pathname.replace(pathPrefix, '')
       : location.pathname;
     setActivePath(stripTrailingSlash(base));
-  }, [location.pathname]);
+  }, [location.pathname, pathPrefix]);
 
   const getItemPath = (item) =>
     item.path || slugify(item.title, { lower: true, strict: true });
@@ -103,7 +100,7 @@ const LeftNavTree = ({ items, theme }) => {
       activeNode = dfs(itemNodes, isTabActive);
     }
     setTreeActiveItem(activeNode);
-  }, [isTreeNodeActive, itemNodes]);
+  }, [isTreeNodeActive, itemNodes, isTabActive]);
 
   const isTreeNodeExpanded = (node) =>
     !!dfs([node], (evalNode) =>

packages/gatsby-theme-carbon/src/util/context/NavContext.js

@@ -1,4 +1,5 @@
 import React, { useMemo, useReducer, useState } from 'react';
+import usePathprefix from '../hooks/usePathprefix';
 
 const NavContext = React.createContext({
   leftNavIsOpen: false,
@@ -19,6 +20,7 @@ const reducer = (state, action) => {
   }
 };
 export const NavContextProvider = ({ children }) => {
+  const pathPrefix = usePathprefix();
   const [
     { leftNavIsOpen, searchIsOpen, switcherIsOpen, leftNavScrollOffset },
     dispatch,
@@ -47,6 +49,7 @@ export const NavContextProvider = ({ children }) => {
       leftNavScrollOffset,
       leftNavScrollTop,
       setLeftNavScrollTop,
+      pathPrefix,
     }),
     [
       leftNavIsOpen,
@@ -58,6 +61,7 @@ export const NavContextProvider = ({ children }) => {
       leftNavScrollOffset,
       leftNavScrollTop,
       setLeftNavScrollTop,
+      pathPrefix,
     ]
   );