@helpwave/hightide 0.12.4 → 0.12.5

package/dist/index.mjs

@@ -14557,7 +14557,7 @@ function VerticalNavigationItem({
       tabIndex: -1,
       children: [
         label,
-        /* @__PURE__ */ jsx41(ExternalLink2, { className: "size-force-5 text-description" })
+        /* @__PURE__ */ jsx41(ExternalLink2, { className: "vertical-navigation-item-link-external-icon" })
       ]
     }
   ) : /* @__PURE__ */ jsx41(
@@ -14577,11 +14577,12 @@ function VerticalNavigationItem({
         role: "treeitem",
         "data-name": "vertical-navigation-item",
         "data-depth": depth,
-        "data-active": isFocused ? "" : void 0,
+        "data-focused": isFocused ? "" : void 0,
         "aria-selected": isFocused ? true : void 0,
         tabIndex: isFocused ? 0 : -1,
         onKeyDown: handleKeyDown,
         onClick: handleLeafActivate,
+        className: "group/tree-leaf",
         children: labelContent
       }
     );
@@ -14593,7 +14594,7 @@ function VerticalNavigationItem({
       role: "treeitem",
       "data-name": "vertical-navigation-node",
       "data-depth": depth,
-      "data-active": isFocused ? "" : void 0,
+      "data-focused": isFocused ? "" : void 0,
       "data-expanded": expanded ? "" : void 0,
       "aria-expanded": expanded,
       tabIndex: isFocused ? 0 : -1,
@@ -14605,7 +14606,7 @@ function VerticalNavigationItem({
           {
             ref: headerRef,
             "data-name": "vertical-navigation-node-header",
-            "data-active": isFocused ? "" : void 0,
+            "data-focused": isFocused ? "" : void 0,
             onClick: handleHeaderActivate,
             children: [
               label,
@@ -14705,11 +14706,12 @@ var AppPageSidebarWithNavigation = ({
   footer,
   navigationItems,
   contentOverwrite,
+  initialActiveId,
   ...props
 }) => {
   return /* @__PURE__ */ jsx43(AppSidebar, { ...props, children: /* @__PURE__ */ jsxs24("div", { className: "app-page-sidebar-with-navigation", children: [
     header && /* @__PURE__ */ jsx43("div", { className: "app-page-sidebar-with-navigation-header", children: header }),
-    navigationItems && !contentOverwrite && /* @__PURE__ */ jsx43("div", { className: "app-page-sidebar-with-navigation-scroll", children: /* @__PURE__ */ jsx43(VerticalNavigationTree, { items: navigationItems }) }),
+    navigationItems && !contentOverwrite && /* @__PURE__ */ jsx43("div", { className: "app-page-sidebar-with-navigation-scroll", children: /* @__PURE__ */ jsx43(VerticalNavigationTree, { items: navigationItems, initialActiveId }) }),
     contentOverwrite && /* @__PURE__ */ jsx43("div", { className: "app-page-sidebar-with-navigation-scroll", children: contentOverwrite }),
     footer && /* @__PURE__ */ jsx43("div", { className: "app-page-sidebar-with-navigation-footer", children: footer })
   ] }) });
@@ -14718,20 +14720,38 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
   const translation = useHightideTranslation();
   const [isSidebarOpen, setIsSidebarOpen] = useState22(false);
   const toNavigationItems = useCallback28((items) => {
-    return items?.map((item) => ({
-      id: item.id,
-      label: /* @__PURE__ */ jsxs24("span", { className: "app-page-navigation-item-label", "data-acitve": item.isActive ? "" : void 0, children: [
-        item.icon && /* @__PURE__ */ jsx43("span", { className: "size-5", children: item.icon }),
-        item.label
-      ] }),
-      url: item.url,
-      external: item.external,
-      items: toNavigationItems(item.items)
-    })) ?? void 0;
-  }, []);
+    return items?.map((item) => {
+      const isActive = sidebarProps.activeUrl === item.url && !!sidebarProps.activeUrl || item.id === sidebarProps.initialActiveId;
+      return {
+        id: item.id,
+        label: /* @__PURE__ */ jsxs24("span", { className: "app-page-navigation-item-label", "data-active-page": isActive ? "" : void 0, children: [
+          item.icon && /* @__PURE__ */ jsx43("span", { className: "size-5", children: item.icon }),
+          item.label
+        ] }),
+        url: item.url,
+        external: item.external,
+        items: toNavigationItems(item.items)
+      };
+    }) ?? void 0;
+  }, [sidebarProps.activeUrl, sidebarProps.initialActiveId]);
   const navigationItems = useMemo22(() => toNavigationItems(
     sidebarProps.items
   ), [sidebarProps.items, toNavigationItems]);
+  const initialActiveId = useMemo22(() => {
+    if (sidebarProps.initialActiveId) return sidebarProps.initialActiveId;
+    if (!navigationItems) return void 0;
+    const findActiveId = (items) => {
+      for (const item of items) {
+        if (item.url === sidebarProps.activeUrl) return item.id;
+        if (item.items) {
+          const found = findActiveId(item.items);
+          if (found) return found;
+        }
+      }
+      return void 0;
+    };
+    return findActiveId(navigationItems);
+  }, [navigationItems, sidebarProps.activeUrl, sidebarProps.initialActiveId]);
   return /* @__PURE__ */ jsxs24(
     "div",
     {
@@ -14747,7 +14767,8 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
             header: sidebarProps.header,
             footer: sidebarProps.footer,
             navigationItems,
-            contentOverwrite: sidebarProps.contentOverwrite
+            contentOverwrite: sidebarProps.contentOverwrite,
+            initialActiveId
           }
         ),
         /* @__PURE__ */ jsxs24("div", { "data-name": "app-page-content", children: [