@helpwave/hightide 0.12.4 → 0.12.5

package/dist/index.d.mts

@@ -899,18 +899,20 @@ interface AppPageSidebarWithNavigationProps extends AppSidebarProps {
     footer?: ReactNode;
     navigationItems?: NavigationItemData[];
     contentOverwrite?: ReactNode;
+    initialActiveId?: string;
 }
-declare const AppPageSidebarWithNavigation: ({ header, footer, navigationItems, contentOverwrite, ...props }: AppPageSidebarWithNavigationProps) => react_jsx_runtime.JSX.Element;
+declare const AppPageSidebarWithNavigation: ({ header, footer, navigationItems, contentOverwrite, initialActiveId, ...props }: AppPageSidebarWithNavigationProps) => react_jsx_runtime.JSX.Element;
 interface AppPageNavigationItem {
     id: string;
     label: ReactNode;
     icon?: ReactNode;
-    isActive?: boolean;
     url?: string;
     external?: boolean;
     items?: AppPageNavigationItem[];
 }
 interface AppPageSidebarProps {
+    activeUrl?: string;
+    initialActiveId?: string;
     header?: ReactNode;
     items?: AppPageNavigationItem[];
     contentOverwrite?: ReactNode;

package/dist/index.d.ts

@@ -899,18 +899,20 @@ interface AppPageSidebarWithNavigationProps extends AppSidebarProps {
     footer?: ReactNode;
     navigationItems?: NavigationItemData[];
     contentOverwrite?: ReactNode;
+    initialActiveId?: string;
 }
-declare const AppPageSidebarWithNavigation: ({ header, footer, navigationItems, contentOverwrite, ...props }: AppPageSidebarWithNavigationProps) => react_jsx_runtime.JSX.Element;
+declare const AppPageSidebarWithNavigation: ({ header, footer, navigationItems, contentOverwrite, initialActiveId, ...props }: AppPageSidebarWithNavigationProps) => react_jsx_runtime.JSX.Element;
 interface AppPageNavigationItem {
     id: string;
     label: ReactNode;
     icon?: ReactNode;
-    isActive?: boolean;
     url?: string;
     external?: boolean;
     items?: AppPageNavigationItem[];
 }
 interface AppPageSidebarProps {
+    activeUrl?: string;
+    initialActiveId?: string;
     header?: ReactNode;
     items?: AppPageNavigationItem[];
     contentOverwrite?: ReactNode;

package/dist/index.js

@@ -14853,7 +14853,7 @@ function VerticalNavigationItem({
       tabIndex: -1,
       children: [
         label,
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react9.ExternalLink, { className: "size-force-5 text-description" })
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react9.ExternalLink, { className: "vertical-navigation-item-link-external-icon" })
       ]
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -14873,11 +14873,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
       }
     );
@@ -14889,7 +14890,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,
@@ -14901,7 +14902,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,
@@ -15001,11 +15002,12 @@ var AppPageSidebarWithNavigation = ({
   footer,
   navigationItems,
   contentOverwrite,
+  initialActiveId,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AppSidebar, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "app-page-sidebar-with-navigation", children: [
     header && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "app-page-sidebar-with-navigation-header", children: header }),
-    navigationItems && !contentOverwrite && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "app-page-sidebar-with-navigation-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(VerticalNavigationTree, { items: navigationItems }) }),
+    navigationItems && !contentOverwrite && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "app-page-sidebar-with-navigation-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(VerticalNavigationTree, { items: navigationItems, initialActiveId }) }),
     contentOverwrite && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "app-page-sidebar-with-navigation-scroll", children: contentOverwrite }),
     footer && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "app-page-sidebar-with-navigation-footer", children: footer })
   ] }) });
@@ -15014,20 +15016,38 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
   const translation = useHightideTranslation();
   const [isSidebarOpen, setIsSidebarOpen] = (0, import_react60.useState)(false);
   const toNavigationItems = (0, import_react60.useCallback)((items) => {
-    return items?.map((item) => ({
-      id: item.id,
-      label: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "app-page-navigation-item-label", "data-acitve": item.isActive ? "" : void 0, children: [
-        item.icon && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("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__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "app-page-navigation-item-label", "data-active-page": isActive ? "" : void 0, children: [
+          item.icon && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("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 = (0, import_react60.useMemo)(() => toNavigationItems(
     sidebarProps.items
   ), [sidebarProps.items, toNavigationItems]);
+  const initialActiveId = (0, import_react60.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
@@ -15043,7 +15063,8 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
             header: sidebarProps.header,
             footer: sidebarProps.footer,
             navigationItems,
-            contentOverwrite: sidebarProps.contentOverwrite
+            contentOverwrite: sidebarProps.contentOverwrite,
+            initialActiveId
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { "data-name": "app-page-content", children: [