@helpwave/hightide 0.12.4 → 0.12.6

package/dist/index.js

@@ -7129,6 +7129,7 @@ __export(index_exports, {
   processModelLibrary: () => processModelLibrary,
   range: () => range,
   resolveSetState: () => resolveSetState,
+  resolveTreeNodePath: () => resolveTreeNodePath,
   segmentBounds: () => segmentBounds,
   segmentPlaceholder: () => segmentPlaceholder,
   setDayPeriod: () => setDayPeriod,
@@ -14435,6 +14436,22 @@ function buildTreeIndex(nodes) {
     roots: [...nodes]
   };
 }
+function resolveTreeNodePath(nodes, id) {
+  if (id == null) return null;
+  const entry = buildTreeIndex(nodes).byId.get(id);
+  return entry?.path ?? null;
+}
+function flattenAllItems(nodes, expandedIds, path = []) {
+  const result = [];
+  for (const node of nodes) {
+    const currentPath = [...path, node.id];
+    const hasChildren = node.items.length > 0;
+    const expanded = hasChildren && expandedIds.has(node.id);
+    result.push({ id: node.id, path: currentPath, expanded });
+    result.push(...flattenAllItems(node.items, expandedIds, currentPath));
+  }
+  return result;
+}
 function flattenVisibleItems(nodes, expandedIds, path = []) {
   const result = [];
   for (const node of nodes) {
@@ -14471,11 +14488,11 @@ function isAncestorOf(ancestorId, descendantPath) {
   const index = descendantPath.indexOf(ancestorId);
   return index >= 0 && index < descendantPath.length - 1;
 }
-function pruneExpandedIds(expandedIds, activePath, onlyOneExpandedTree, index) {
-  if (!onlyOneExpandedTree || activePath == null) {
+function pruneExpandedIds(expandedIds, focusedPath, onlyOneExpandedTree, index) {
+  if (!onlyOneExpandedTree || focusedPath == null) {
     return new Set(expandedIds);
   }
-  const pathSet = new Set(activePath);
+  const pathSet = new Set(focusedPath);
   const pruned = /* @__PURE__ */ new Set();
   for (const id of expandedIds) {
     if (!pathSet.has(id)) continue;
@@ -14486,77 +14503,80 @@ function pruneExpandedIds(expandedIds, activePath, onlyOneExpandedTree, index) {
   }
   return pruned;
 }
-function syncExpansionForActive(expandedIds, activePath, onlyOneExpandedTree, index) {
+function syncExpansionForFocused(expandedIds, focusedPath, onlyOneExpandedTree, index) {
   const next = new Set(expandedIds);
-  for (const id of getExpandableAncestorIds(activePath, index)) {
+  for (const id of getExpandableAncestorIds(focusedPath, index)) {
     next.add(id);
   }
-  return pruneExpandedIds(next, activePath, onlyOneExpandedTree, index);
+  return pruneExpandedIds(next, focusedPath, onlyOneExpandedTree, index);
 }
 function useTreeNavigation({
   nodes,
-  activeId: controlledActiveId,
-  onActiveIdChange,
-  initialActiveId,
+  focusedId: controlledFocusedId,
+  onFocusedIdChange,
+  initialFocusedId,
   onlyOneExpandedTree = false
 }) {
   const index = (0, import_react57.useMemo)(() => buildTreeIndex(nodes), [nodes]);
-  const [activeId, setActiveId] = useControlledState({
-    value: controlledActiveId,
-    onValueChange: onActiveIdChange,
-    defaultValue: initialActiveId ?? null
+  const [focusedId, setFocusedId] = useControlledState({
+    value: controlledFocusedId,
+    onValueChange: onFocusedIdChange,
+    defaultValue: initialFocusedId ?? null
   });
-  const resolvedActiveId = (0, import_react57.useMemo)(() => {
-    if (activeId == null) return null;
-    if (index.byId.has(activeId)) return activeId;
+  const resolvedFocusedId = (0, import_react57.useMemo)(() => {
+    if (focusedId == null) return null;
+    if (index.byId.has(focusedId)) return focusedId;
     return null;
-  }, [activeId, index]);
+  }, [focusedId, index]);
   const [expandedIds, setExpandedIds] = (0, import_react57.useState)(() => /* @__PURE__ */ new Set());
   (0, import_react57.useEffect)(() => {
-    if (resolvedActiveId == null) return;
-    const entry = index.byId.get(resolvedActiveId);
+    if (resolvedFocusedId == null) return;
+    const entry = index.byId.get(resolvedFocusedId);
     if (entry == null) return;
-    setExpandedIds((prev) => syncExpansionForActive(prev, entry.path, onlyOneExpandedTree, index));
-  }, [resolvedActiveId, onlyOneExpandedTree, index]);
-  const items = (0, import_react57.useMemo)(() => {
+    setExpandedIds((prev) => syncExpansionForFocused(prev, entry.path, onlyOneExpandedTree, index));
+  }, [resolvedFocusedId, onlyOneExpandedTree, index]);
+  const visibleItems = (0, import_react57.useMemo)(() => {
     return flattenVisibleItems(nodes, expandedIds);
   }, [nodes, expandedIds]);
-  const activeItem = (0, import_react57.useMemo)(() => {
-    if (resolvedActiveId == null) return null;
-    return items.find((item) => item.id === resolvedActiveId) ?? null;
-  }, [items, resolvedActiveId]);
+  const allItems = (0, import_react57.useMemo)(() => {
+    return flattenAllItems(nodes, expandedIds);
+  }, [nodes, expandedIds]);
+  const focusedItem = (0, import_react57.useMemo)(() => {
+    if (resolvedFocusedId == null) return null;
+    return allItems.find((item) => item.id === resolvedFocusedId) ?? null;
+  }, [allItems, resolvedFocusedId]);
   const navigateTo = (0, import_react57.useCallback)((id) => {
     const entry = index.byId.get(id);
     if (entry == null) {
       console.warn(`Attempted to navigate to node ${id} that does not exist`);
       return;
     }
-    setActiveId(id);
+    setFocusedId(id);
     setExpandedIds((prev) => {
-      const next2 = syncExpansionForActive(prev, entry.path, onlyOneExpandedTree, index);
+      const next2 = syncExpansionForFocused(prev, entry.path, onlyOneExpandedTree, index);
       return next2;
     });
-  }, [index, onlyOneExpandedTree, setActiveId]);
+  }, [index, onlyOneExpandedTree, setFocusedId]);
   const expand = (0, import_react57.useCallback)((id, options) => {
     const entry = index.byId.get(id);
     if (entry == null || entry.node.items.length === 0) return;
     if (options?.isFocusing) {
-      setActiveId(id);
+      setFocusedId(id);
     }
     setExpandedIds((prev) => {
       const next2 = new Set(prev);
       next2.add(id);
-      const activePath = options?.isFocusing ? entry.path : resolvedActiveId != null ? index.byId.get(resolvedActiveId)?.path ?? null : null;
-      return pruneExpandedIds(next2, activePath, onlyOneExpandedTree, index);
+      const focusedPath = options?.isFocusing ? entry.path : resolvedFocusedId != null ? index.byId.get(resolvedFocusedId)?.path ?? null : null;
+      return pruneExpandedIds(next2, focusedPath, onlyOneExpandedTree, index);
     });
-  }, [index, onlyOneExpandedTree, resolvedActiveId, setActiveId]);
+  }, [index, onlyOneExpandedTree, resolvedFocusedId, setFocusedId]);
   const collapse = (0, import_react57.useCallback)((id, options) => {
-    if (!options?.isFocusing && resolvedActiveId != null) {
-      const activeEntry = index.byId.get(resolvedActiveId);
-      if (activeEntry != null && isAncestorOf(id, activeEntry.path)) return;
+    if (!options?.isFocusing && resolvedFocusedId != null) {
+      const focusedEntry = index.byId.get(resolvedFocusedId);
+      if (focusedEntry != null && isAncestorOf(id, focusedEntry.path)) return;
     }
     if (options?.isFocusing) {
-      setActiveId(id);
+      setFocusedId(id);
     }
     const descendantIds = getDescendantIds(index, id);
     setExpandedIds((prev) => {
@@ -14567,12 +14587,12 @@ function useTreeNavigation({
       }
       return next2;
     });
-  }, [index, resolvedActiveId, setActiveId]);
+  }, [index, resolvedFocusedId, setFocusedId]);
   const toggleExpansion = (0, import_react57.useCallback)((id, options) => {
     const entry = index.byId.get(id);
     if (entry == null || entry.node.items.length === 0) return;
     if (options?.isFocusing) {
-      setActiveId(id);
+      setFocusedId(id);
       setExpandedIds((prev) => {
         if (prev.has(id)) {
           const next3 = new Set(prev);
@@ -14597,44 +14617,45 @@ function useTreeNavigation({
     } else {
       expand(id);
     }
-  }, [index, expandedIds, expand, collapse, onlyOneExpandedTree, setActiveId]);
+  }, [index, expandedIds, expand, collapse, onlyOneExpandedTree, setFocusedId]);
   const next = (0, import_react57.useCallback)(() => {
-    if (items.length === 0) return;
-    if (resolvedActiveId == null) {
-      navigateTo(items[0].id);
+    if (visibleItems.length === 0) return;
+    if (resolvedFocusedId == null) {
+      navigateTo(visibleItems[0].id);
       return;
     }
-    const currentIndex = items.findIndex((item) => item.id === resolvedActiveId);
+    const currentIndex = visibleItems.findIndex((item) => item.id === resolvedFocusedId);
     const startIndex = currentIndex < 0 ? 0 : currentIndex;
-    if (startIndex < items.length - 1) {
-      navigateTo(items[startIndex + 1].id);
+    if (startIndex < visibleItems.length - 1) {
+      navigateTo(visibleItems[startIndex + 1].id);
       return;
     }
-  }, [items, resolvedActiveId, navigateTo]);
+  }, [visibleItems, resolvedFocusedId, navigateTo]);
   const previous = (0, import_react57.useCallback)(() => {
-    if (items.length === 0) return;
-    if (resolvedActiveId == null) {
-      navigateTo(items[items.length - 1].id);
+    if (visibleItems.length === 0) return;
+    if (resolvedFocusedId == null) {
+      navigateTo(visibleItems[visibleItems.length - 1].id);
       return;
     }
-    const currentIndex = items.findIndex((item) => item.id === resolvedActiveId);
-    const startIndex = currentIndex < 0 ? items.length - 1 : currentIndex;
+    const currentIndex = visibleItems.findIndex((item) => item.id === resolvedFocusedId);
+    const startIndex = currentIndex < 0 ? visibleItems.length - 1 : currentIndex;
     if (startIndex > 0) {
-      navigateTo(items[startIndex - 1].id);
+      navigateTo(visibleItems[startIndex - 1].id);
       return;
     }
-  }, [items, resolvedActiveId, navigateTo]);
+  }, [visibleItems, resolvedFocusedId, navigateTo]);
   const first = (0, import_react57.useCallback)(() => {
-    if (items.length === 0) return;
-    navigateTo(items[0].id);
-  }, [items, navigateTo]);
+    if (visibleItems.length === 0) return;
+    navigateTo(visibleItems[0].id);
+  }, [visibleItems, navigateTo]);
   const last = (0, import_react57.useCallback)(() => {
-    if (items.length === 0) return;
-    navigateTo(items[items.length - 1].id);
-  }, [items, navigateTo]);
+    if (visibleItems.length === 0) return;
+    navigateTo(visibleItems[visibleItems.length - 1].id);
+  }, [visibleItems, navigateTo]);
   return (0, import_react57.useMemo)(() => ({
-    items,
-    activeItem,
+    visibleItems,
+    allItems,
+    focusedItem,
     navigateTo,
     expand,
     collapse,
@@ -14643,7 +14664,7 @@ function useTreeNavigation({
     previous,
     first,
     last
-  }), [items, activeItem, navigateTo, expand, collapse, toggleExpansion, next, previous, first, last]);
+  }), [visibleItems, allItems, focusedItem, navigateTo, expand, collapse, toggleExpansion, next, previous, first, last]);
 }
 
 // src/components/layout/navigation/navigation-menus/NavigationContext.tsx
@@ -14651,22 +14672,41 @@ var import_jsx_runtime40 = require("react/jsx-runtime");
 var NavigationContext = (0, import_react58.createContext)(null);
 function NavigationProvider({
   children,
-  ...options
+  activeId = null,
+  ...treeOptions
 }) {
-  const navigation = useTreeNavigation(options);
+  const navigation = useTreeNavigation({
+    ...treeOptions,
+    initialFocusedId: treeOptions.initialFocusedId ?? activeId ?? treeOptions.nodes[0]?.id ?? null
+  });
   const itemRefs = (0, import_react58.useRef)(/* @__PURE__ */ new Map());
-  const focusedId = navigation.activeItem?.id ?? navigation.items[0]?.id ?? null;
+  const [hasNavigatedToActiveId, setHasNavigatedToActiveId] = (0, import_react58.useState)(false);
+  (0, import_react58.useEffect)(() => {
+    if (activeId == null || hasNavigatedToActiveId) return;
+    const navigationItem = navigation.allItems.find((item) => item.id === activeId);
+    if (navigationItem == null) return;
+    navigation.navigateTo(activeId);
+    setHasNavigatedToActiveId(true);
+  }, [activeId, navigation, navigation.navigateTo, navigation.allItems, hasNavigatedToActiveId]);
+  const focusedId = (0, import_react58.useMemo)(() => {
+    return navigation.focusedItem?.id ?? navigation.visibleItems[0]?.id ?? null;
+  }, [navigation.focusedItem, navigation.visibleItems]);
+  const activePath = (0, import_react58.useMemo)(() => {
+    return resolveTreeNodePath(treeOptions.nodes, activeId);
+  }, [treeOptions.nodes, activeId]);
   const itemStateById = (0, import_react58.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
-    for (const item of navigation.items) {
+    for (const item of navigation.allItems) {
       map.set(item.id, {
         expanded: item.expanded,
         isFocused: focusedId === item.id,
+        isActive: activeId === item.id,
+        isOnActivePath: activePath?.includes(item.id) ?? false,
         path: item.path
       });
     }
     return map;
-  }, [navigation.items, focusedId]);
+  }, [navigation.allItems, focusedId, activeId, activePath]);
   const getItemState = (0, import_react58.useCallback)((id) => {
     return itemStateById.get(id) ?? null;
   }, [itemStateById]);
@@ -14682,9 +14722,12 @@ function NavigationProvider({
     itemRefs.current.get(focusedId)?.focus();
   }, [focusedId]);
   const value = (0, import_react58.useMemo)(() => ({
-    activeItem: navigation.activeItem,
+    focusedItem: navigation.focusedItem,
     focusedId,
-    items: navigation.items,
+    activeId,
+    activePath,
+    visibleItems: navigation.visibleItems,
+    allItems: navigation.allItems,
     getItemState,
     navigateTo: navigation.navigateTo,
     expand: navigation.expand,
@@ -14696,8 +14739,9 @@ function NavigationProvider({
     toggleExpansion: navigation.toggleExpansion,
     registerItemRef
   }), [
-    navigation.activeItem,
-    navigation.items,
+    navigation.focusedItem,
+    navigation.visibleItems,
+    navigation.allItems,
     navigation.navigateTo,
     navigation.expand,
     navigation.collapse,
@@ -14707,6 +14751,8 @@ function NavigationProvider({
     navigation.last,
     navigation.toggleExpansion,
     focusedId,
+    activeId,
+    activePath,
     getItemState,
     registerItemRef
   ]);
@@ -14853,7 +14899,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 +14919,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 +14936,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 +14948,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,30 +15048,61 @@ var AppPageSidebarWithNavigation = ({
   footer,
   navigationItems,
   contentOverwrite,
+  initialFocusedId,
+  focusedId,
+  onFocusedIdChange,
+  activeId,
   ...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,
+        initialFocusedId,
+        focusedId,
+        onFocusedIdChange,
+        activeId
+      }
+    ) }),
     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 })
   ] }) });
 };
+function findActiveIdByUrl(items, activeUrl) {
+  for (const item of items) {
+    if (item.url === activeUrl) return item.id;
+    if (item.items != null) {
+      const found = findActiveIdByUrl(item.items, activeUrl);
+      if (found != null) return found;
+    }
+  }
+  return null;
+}
 var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
   const translation = useHightideTranslation();
   const [isSidebarOpen, setIsSidebarOpen] = (0, import_react60.useState)(false);
+  const resolvedActiveId = (0, import_react60.useMemo)(() => {
+    if (sidebarProps.activeId !== void 0) return sidebarProps.activeId;
+    if (sidebarProps.activeUrl == null || sidebarProps.items == null) return null;
+    return findActiveIdByUrl(sidebarProps.items, sidebarProps.activeUrl);
+  }, [sidebarProps.activeId, sidebarProps.activeUrl, sidebarProps.items]);
   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 = item.id === resolvedActiveId;
+      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;
+  }, [resolvedActiveId]);
   const navigationItems = (0, import_react60.useMemo)(() => toNavigationItems(
     sidebarProps.items
   ), [sidebarProps.items, toNavigationItems]);
@@ -15043,7 +15121,11 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
             header: sidebarProps.header,
             footer: sidebarProps.footer,
             navigationItems,
-            contentOverwrite: sidebarProps.contentOverwrite
+            contentOverwrite: sidebarProps.contentOverwrite,
+            initialFocusedId: sidebarProps.initialFocusedId,
+            focusedId: sidebarProps.focusedId,
+            onFocusedIdChange: sidebarProps.onFocusedIdChange,
+            activeId: resolvedActiveId
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { "data-name": "app-page-content", children: [
@@ -15488,7 +15570,6 @@ var ThemeSelect = ({ ...props }) => {
     {
       value: theme,
       onEditComplete: (value) => {
-        console.log("onEditComplete", value);
         props.onEditComplete?.(value);
         setTheme(value);
       },
@@ -23798,7 +23879,6 @@ var useSwipeGesture = ({
     const listenTouch = inputMode === "touch" || inputMode === "both";
     const listenMouse = inputMode === "mouse" || inputMode === "both";
     const onGestureStart = (x, y, eventTarget) => {
-      console.log("onGestureStart", x, y);
       if (!isWithinStartRegion(x, y)) return;
       const scrollableParent = findScrollableParent(eventTarget);
       gestureEndRef.current = null;
@@ -23811,7 +23891,6 @@ var useSwipeGesture = ({
       isScrollingRef.current = !!scrollableParent;
     };
     const onGestureMove = (x, y, eventTarget) => {
-      console.log("onGestureMove", x, y);
       const scrollableParent = findScrollableParent(eventTarget);
       const currentScrollY = scrollableParent?.scrollTop ?? window.scrollY;
       gestureEndRef.current = {
@@ -24532,6 +24611,7 @@ var PromiseUtils = {
   processModelLibrary,
   range,
   resolveSetState,
+  resolveTreeNodePath,
   segmentBounds,
   segmentPlaceholder,
   setDayPeriod,