@gsa-tts/graymatter-ui 0.3.16 → 0.3.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.3.16",
+  "version": "0.3.18",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -67,7 +67,7 @@
     "@fontsource/space-mono": "^5.2.8",
     "@uswds/uswds": "3.12.0",
     "slugify": "^1.6.6",
-    "@gsa-tts/graymatter-style-tokens": "0.3.0"
+    "@gsa-tts/graymatter-style-tokens": "0.3.17"
   },
   "scripts": {
     "build": "gulp update && vite build",

package/src/components/ApiDocSubNavMenu.svelte

@@ -148,9 +148,9 @@
       parent: SubNavItem | null
     ): SubNavItem | null {
       for (const it of items) {
-        if (it.id === item.id) return parent ?? it;
-        if (it.children) {
-          const found = search(it.children, parent ?? it);
+        if (it.id === item.id) return parent || it;
+        if (it.children && it.children.length > 0) {
+          const found = search(it.children, it);
           if (found) return found;
         }
       }
@@ -179,6 +179,7 @@
 
   let currentSelectedId = $state<string | null>(null);
   let hydrated = $state(false);
+  let pageLoadComplete = $state(false);
 
   const effectiveSelectedId = $derived(() => {
     if (!hydrated || !data) return null;
@@ -195,28 +196,28 @@
       }
     }
 
-    // Second priority: sessionStorage
+    // Second priority: Check if we have a persisted selectedId from sessionStorage
     if (typeof window !== 'undefined') {
       const storedId = sessionStorage.getItem('subNav-selectedId');
       if (storedId) {
         try {
           const parsedId = JSON.parse(storedId);
-          if (parsedId && parsedId !== 'null' && parsedId !== '') {
-            const targetItem = findItemById(data, parsedId);
-            if (targetItem) {
-              return targetItem.id;
-            }
+          const targetItem = findItemById(data, parsedId);
+          if (targetItem) {
+            return parsedId;
           }
-        } catch (e) {
-          console.log('[SubNavMenu] Error parsing stored ID:', e);
+        } catch {
+          // Invalid JSON, ignore
         }
       }
     }
 
-    // Third priority: first item
-    const firstItem = findFirstItem(data);
-    if (firstItem && firstItem.title) {
-      return firstItem.id;
+    // Fallback: use first item when no other selection method works
+    if (pageLoadComplete) {
+      const firstItem = findFirstItem(data);
+      if (firstItem && firstItem.title) {
+        return firstItem.id;
+      }
     }
 
     return null;
@@ -226,6 +227,27 @@
   $effect(() => {
     if (effectiveSelectedId() && effectiveSelectedId() !== currentSelectedId) {
       currentSelectedId = effectiveSelectedId();
+
+      // When restoring from sessionStorage, also restore the correct header
+      // Only do this if we're on the API documentation page (where this component exists)
+      if (data && effectiveSelectedId() && typeof window !== 'undefined') {
+        const currentPath = window.location.pathname;
+        const isApiDocumentationPage =
+          currentPath.includes('/api/documentation');
+
+        if (isApiDocumentationPage) {
+          const restoredItem = findItemById(data, effectiveSelectedId()!);
+          if (restoredItem) {
+            const topLevel =
+              findTopLevelParent(restoredItem, data) || restoredItem;
+            import('@gsa-tts/graymatter-ui/stores/navigationStore')
+              .then(({ selectedSubNavItemTitle }) => {
+                selectedSubNavItemTitle.set(topLevel.title || '');
+              })
+              .catch();
+          }
+        }
+      }
     }
   });
 
@@ -234,53 +256,46 @@
 
     if (!data) return;
 
-    // Handle header updates and scrolling
-    const targetItem = currentSelectedId
-      ? findItemById(data, currentSelectedId)
-      : null;
-    if (targetItem) {
-      // Always resolve top-level parent from data
-      const topLevel = findTopLevelParent(targetItem, data) || targetItem;
-      import('@gsa-tts/graymatter-ui/stores/navigationStore')
-        .then(({ selectedSubNavItemTitle }) => {
-          selectedSubNavItemTitle.set(topLevel.title || '');
-          if (typeof window !== 'undefined') {
-            sessionStorage.setItem(
-              'subNav-selectedId',
-              JSON.stringify(targetItem.id)
-            );
-            sessionStorage.setItem(
-              'subNav-topLevelId',
-              JSON.stringify(topLevel.id)
-            );
-            sessionStorage.setItem(
-              'subNav-topLevelTitle',
-              JSON.stringify(topLevel.title || '')
-            );
-          }
-        })
-        .catch();
-
-      // Handle scrolling if we have a URL hash
-      if (targetItem.href && targetItem.href.includes('#')) {
-        const hash = targetItem.href.split('#')[1];
-        if (hash) {
-          setTimeout(() => scrollToAnchorWithOffset(hash), 100);
+    // Check if we're navigating TO the documentation page (vs refreshing while on it)
+    if (typeof window !== 'undefined') {
+      const currentPath = window.location.pathname;
+      const isDocumentationPage = currentPath.includes('/api/documentation');
+
+      // If we're on the documentation page, check if we came from a different page
+      if (isDocumentationPage) {
+        const referrer = document.referrer;
+        const isFromDifferentPage =
+          referrer && !referrer.includes('/api/documentation');
+
+        // If we came from a different page, clear sessionStorage to reset to initial values
+        if (isFromDifferentPage) {
+          sessionStorage.removeItem('subNav-selectedId');
+          sessionStorage.removeItem('subNav-selectedTitle');
+          sessionStorage.removeItem('subNav-topLevelId');
+          sessionStorage.removeItem('subNav-topLevelTitle');
         }
       }
 
-      // Always dispatch sectionVisible with top-level parent
-      if (topLevel.title && typeof window !== 'undefined') {
-        window.dispatchEvent(
-          new CustomEvent('sectionVisible', {
-            detail: {
-              title: topLevel.title,
-              id: topLevel.id,
-            },
-          })
-        );
+      // Clean up any leftover sessionStorage items
+      sessionStorage.removeItem('__subNavPageLoaded');
+    }
+
+    // Reset currentSelectedId to ensure clean state
+    currentSelectedId = null;
+
+    // Handle scrolling if we have a URL hash
+    const targetItem = currentSelectedId
+      ? findItemById(data, currentSelectedId)
+      : null;
+    if (targetItem && targetItem.href && targetItem.href.includes('#')) {
+      const hash = targetItem.href.split('#')[1];
+      if (hash) {
+        setTimeout(() => scrollToAnchorWithOffset(hash), 100);
       }
     }
+
+    // Mark page load as complete
+    pageLoadComplete = true;
     subNavReady.set(true);
   });
 
@@ -293,22 +308,17 @@
     }
     currentSelectedId = item.id;
     const topLevel = findTopLevelParent(item, data) || item;
+
     import('@gsa-tts/graymatter-ui/stores/navigationStore')
       .then(({ selectedSubNavItemTitle }) => {
         selectedSubNavItemTitle.set(topLevel.title || '');
-        if (typeof window !== 'undefined') {
-          sessionStorage.setItem('subNav-selectedId', JSON.stringify(item.id));
-          sessionStorage.setItem(
-            'subNav-topLevelId',
-            JSON.stringify(topLevel.id)
-          );
-          sessionStorage.setItem(
-            'subNav-topLevelTitle',
-            JSON.stringify(topLevel.title || '')
-          );
-        }
       })
       .catch();
+
+    // Save selectedId to sessionStorage for persistence
+    if (typeof window !== 'undefined') {
+      sessionStorage.setItem('subNav-selectedId', JSON.stringify(item.id));
+    }
     if (typeof window !== 'undefined') {
       if (item.href && item.href.includes('#')) {
         const hash = item.href.split('#')[1];