@helpwave/hightide 0.12.3 → 0.12.5

package/dist/index.mjs

@@ -10300,11 +10300,11 @@ var SelectButton = forwardRef4(
 );
 
 // src/components/user-interaction/Select/SelectContent.tsx
-import { forwardRef as forwardRef9, useCallback as useCallback15, useEffect as useEffect19, useImperativeHandle as useImperativeHandle6, useRef as useRef13 } from "react";
+import { forwardRef as forwardRef9, useCallback as useCallback15, useEffect as useEffect19, useImperativeHandle as useImperativeHandle5, useRef as useRef13 } from "react";
 import clsx8 from "clsx";
 
 // src/components/layout/popup/PopUp.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback13, useContext as useContext6, useImperativeHandle as useImperativeHandle4, useMemo as useMemo13 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback13, useContext as useContext6, useImperativeHandle as useImperativeHandle3, useMemo as useMemo13 } from "react";
 
 // src/components/utils/Portal.tsx
 import { createPortal } from "react-dom";
@@ -10662,7 +10662,6 @@ var AnchoredFloatingContainer = forwardRef5(function FloatingContainer({
 
 // src/components/utils/FocusTrap.tsx
 import { useRef as useRef10 } from "react";
-import { useImperativeHandle as useImperativeHandle3 } from "react";
 import { forwardRef as forwardRef6 } from "react";
 
 // src/hooks/focus/useFocusTrap.ts
@@ -10683,7 +10682,7 @@ var createFocusGuard = () => {
   return div;
 };
 function getContainedFocusableElements(element) {
-  return element?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+  return [...element?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])') ?? []];
 }
 var FocusTrapService = class {
   constructor() {
@@ -10693,7 +10692,7 @@ var FocusTrapService = class {
       const active = this.getActive();
       if (!active || !active.container.current) return;
       const { container } = active;
-      if (!container.current.contains(event.target)) {
+      if (container.current && !container.current.contains(event.target)) {
         this.focusElement();
       }
     };
@@ -10709,10 +10708,10 @@ var FocusTrapService = class {
     const containerElement = container.current;
     if (initialFocusElement?.current) {
       initialFocusElement.current.focus();
-    } else {
+    } else if (containerElement) {
       const elements = getContainedFocusableElements(containerElement);
       if (elements && elements.length > 0) {
-        const first = elements.item(0);
+        const first = elements[0];
         first.focus();
       } else {
         containerElement.focus();
@@ -10789,10 +10788,10 @@ var useFocusTrap = ({
     const containerElement = container.current;
     if (initialFocus?.current) {
       initialFocus.current.focus();
-    } else {
+    } else if (containerElement) {
       const elements = getContainedFocusableElements(containerElement);
       if (elements && elements.length > 0) {
-        const first = elements.item(0);
+        const first = elements[0];
         first.focus();
       } else {
         console.warn("No focusable elements found in the focus trap. Affected element: ", containerElement);
@@ -10820,12 +10819,13 @@ var useFocusTrap = ({
       service.register({ id, pause, focus, focusLast, unpause, container, initialFocusElement: initialFocus });
       return () => {
         service.unregister(id);
-        lastFocusRef.current = void 0;
+        lastFocusRef.current = null;
       };
     }
   }, [active, container, focusElement, id, initialFocus]);
   useEffect14(() => {
-    if (active && !paused) {
+    const containerElement = container.current;
+    if (active && !paused && containerElement) {
       let onKeyDown = function(event) {
         const key = event.key;
         const elements = getContainedFocusableElements(containerElement);
@@ -10842,7 +10842,6 @@ var useFocusTrap = ({
           event.preventDefault();
         }
       };
-      const containerElement = container.current;
       containerElement.addEventListener("keydown", onKeyDown);
       return () => {
         containerElement.removeEventListener("keydown", onKeyDown);
@@ -10865,9 +10864,21 @@ var FocusTrapWrapper = forwardRef6(function FocusTrap2({
   ...props
 }, forwardedRef) {
   const innerRef = useRef10(null);
-  useImperativeHandle3(forwardedRef, () => innerRef.current);
   useFocusTrap({ container: innerRef, active, initialFocus });
-  return /* @__PURE__ */ jsx20("div", { ref: innerRef, ...props });
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      ref: (node) => {
+        innerRef.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...props
+    }
+  );
 });
 
 // src/hooks/useOutsideClick.ts
@@ -11041,7 +11052,7 @@ var PopUp = forwardRef7(function PopUp2({
   const anchor = anchorOverwrite ?? context?.triggerRef ?? void 0;
   const id = props.id ?? context?.popUpId;
   const { refAssignment, isPresent, ref } = usePresenceRef({ isOpen });
-  useImperativeHandle4(forwardRef36, () => ref.current, [ref]);
+  useImperativeHandle3(forwardRef36, () => ref.current, [ref]);
   const onCloseStable = useEventCallbackStabilizer(onClose);
   const onOutsideClickStable = useEventCallbackStabilizer(onOutsideClick);
   const onCloseWrapper = useCallback13(() => {
@@ -11089,7 +11100,7 @@ var PopUp = forwardRef7(function PopUp2({
 });
 
 // src/components/user-interaction/input/Input.tsx
-import { forwardRef as forwardRef8, useImperativeHandle as useImperativeHandle5, useRef as useRef12 } from "react";
+import { forwardRef as forwardRef8, useImperativeHandle as useImperativeHandle4, useRef as useRef12 } from "react";
 
 // src/hooks/useDelay.ts
 import { useEffect as useEffect18, useState as useState13 } from "react";
@@ -11221,7 +11232,7 @@ var Input = forwardRef8(function Input2({
     clearTimer
   } = useDelay({ delay, disabled: !afterDelay || props.disabled || props.readOnly });
   const innerRef = useRef12(null);
-  useImperativeHandle5(forwardedRef, () => innerRef.current);
+  useImperativeHandle4(forwardedRef, () => innerRef.current);
   const { focusNext } = useFocusManagement();
   return /* @__PURE__ */ jsx22(
     "input",
@@ -11277,7 +11288,7 @@ var SelectContent = forwardRef9(function SelectContent2({
   const translation = useHightideTranslation();
   const innerRef = useRef13(null);
   const searchInputRef = useRef13(null);
-  useImperativeHandle6(ref, () => innerRef.current);
+  useImperativeHandle5(ref, () => innerRef.current);
   const context = useSelectContext();
   const { config, handleTypeaheadKey, toggleSelection, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId } = context;
   const { setIds } = config;
@@ -12488,10 +12499,10 @@ import clsx10 from "clsx";
 import { ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
 
 // src/components/user-interaction/IconButton.tsx
-import { forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle8, useRef as useRef18 } from "react";
+import { forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle7, useRef as useRef18 } from "react";
 
 // src/components/user-interaction/Tooltip.tsx
-import { forwardRef as forwardRef12, useContext as useContext8, useEffect as useEffect23, useImperativeHandle as useImperativeHandle7 } from "react";
+import { forwardRef as forwardRef12, useContext as useContext8, useEffect as useEffect23, useImperativeHandle as useImperativeHandle6 } from "react";
 import { useId as useId8 } from "react";
 import { useCallback as useCallback20, useMemo as useMemo16, useRef as useRef17, useState as useState16 } from "react";
 
@@ -12718,7 +12729,7 @@ var TooltipDisplay = forwardRef12(function TooltipAnchoredFloatingContainer({
     [isAnimatedOverwrite, config.tooltip.isAnimated]
   );
   const container = useRef17(null);
-  useImperativeHandle7(forwardRef36, () => container.current);
+  useImperativeHandle6(forwardRef36, () => container.current);
   const isActive = !disabled && isShown;
   const { isVisible, transitionState } = useTransitionState(
     useMemo16(() => ({ isOpen: isShown, ref: container }), [isShown])
@@ -12848,8 +12859,8 @@ var IconButtonTooltipTrigger = forwardRef13(function IconButtonTooltipTrigger2({
 }, ref) {
   const { trigger: { ref: triggerRef, props: tooltipTriggerProps } } = useTooltip();
   const innerRef = useRef18(null);
-  useImperativeHandle8(ref, () => innerRef.current);
-  useImperativeHandle8(triggerRef, () => innerRef.current);
+  useImperativeHandle7(ref, () => innerRef.current);
+  useImperativeHandle7(triggerRef, () => innerRef.current);
   return /* @__PURE__ */ jsx30(
     IconButtonBase,
     {
@@ -13292,7 +13303,7 @@ var DividerInserter = ({
 };
 
 // src/components/layout/Expandable.tsx
-import { useEffect as useEffect25, useImperativeHandle as useImperativeHandle9, useRef as useRef20 } from "react";
+import { useEffect as useEffect25, useImperativeHandle as useImperativeHandle8, useRef as useRef20 } from "react";
 import { useState as useState18 } from "react";
 import { createContext as createContext9, forwardRef as forwardRef15, useCallback as useCallback22, useContext as useContext10, useId as useId10, useMemo as useMemo18 } from "react";
 import clsx11 from "clsx";
@@ -13401,7 +13412,7 @@ var ExpandableContent = forwardRef15(function ExpandableContent2({
 }, forwardedRef) {
   const { isExpanded, ids, setIds } = useExpandableContext();
   const ref = useRef20(null);
-  useImperativeHandle9(forwardedRef, () => ref.current, [ref]);
+  useImperativeHandle8(forwardedRef, () => ref.current, [ref]);
   useEffect25(() => {
     if (props.id) {
       setIds((prevState) => ({ ...prevState, content: props.id }));
@@ -14546,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(
@@ -14566,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
       }
     );
@@ -14582,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,
@@ -14594,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,
@@ -14635,7 +14647,7 @@ function VerticalNavigationTree({
 
 // src/components/layout/app/AppPage.tsx
 import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
-var AppSidebar = ({ isOpen, onClose, children, ...props }) => {
+var AppSidebar = ({ isOpen = false, onClose, children, ...props }) => {
   const translation = useHightideTranslation();
   const { zIndex } = useOverlayRegistry({ isActive: isOpen });
   const ref = useRef25(null);
@@ -14694,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 })
   ] }) });
@@ -14707,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.navigationItems
-  ), [sidebarProps.navigationItems, 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",
     {
@@ -14736,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: [
@@ -14764,7 +14796,7 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
 };
 
 // src/components/layout/dialog/Dialog.tsx
-import { forwardRef as forwardRef16, useCallback as useCallback29, useContext as useContext14, useId as useId12, useImperativeHandle as useImperativeHandle10, useMemo as useMemo23, useRef as useRef26 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback29, useContext as useContext14, useId as useId12, useImperativeHandle as useImperativeHandle9, useMemo as useMemo23, useRef as useRef26 } from "react";
 import { X as X2 } from "lucide-react";
 
 // src/components/layout/dialog/DialogContext.tsx
@@ -14808,7 +14840,7 @@ var Dialog = forwardRef16(function Dialog2({
   const { refAssignment, isPresent, ref } = usePresenceRef({
     isOpen
   });
-  useImperativeHandle10(forwardedRef, () => ref.current, [ref]);
+  useImperativeHandle9(forwardedRef, () => ref.current, [ref]);
   const onCloseStable = useEventCallbackStabilizer(onClose);
   const onCloseWrapper = useCallback29(() => {
     if (!isModal) return;
@@ -15235,7 +15267,7 @@ var ThemeDialog = ({
 import { forwardRef as forwardRef18 } from "react";
 
 // src/components/layout/drawer/DrawerContent.tsx
-import { forwardRef as forwardRef17, useId as useId13, useImperativeHandle as useImperativeHandle11, useMemo as useMemo26, useRef as useRef27 } from "react";
+import { forwardRef as forwardRef17, useId as useId13, useImperativeHandle as useImperativeHandle10, useMemo as useMemo26, useRef as useRef27 } from "react";
 
 // src/components/layout/drawer/DrawerContext.tsx
 import { createContext as createContext14, useContext as useContext16 } from "react";
@@ -15266,7 +15298,7 @@ var DrawerContent = forwardRef17(function DrawerContent2({
     content: props.id ?? `dialog-content-${generatedId}`
   }), [generatedId, props.id]);
   const ref = useRef27(null);
-  useImperativeHandle11(forwardedRef, () => ref.current, [ref]);
+  useImperativeHandle10(forwardedRef, () => ref.current, [ref]);
   const { isVisible, transitionState } = useTransitionState({ isOpen, ref });
   useFocusTrap({
     container: ref,
@@ -17501,7 +17533,7 @@ import { Check as Check3, TrashIcon } from "lucide-react";
 import { forwardRef as forwardRef25, useEffect as useEffect45, useId as useId19, useMemo as useMemo38, useState as useState36 } from "react";
 
 // src/components/user-interaction/input/DateTimeInput.tsx
-import { forwardRef as forwardRef20, useCallback as useCallback36, useEffect as useEffect39, useId as useId16, useImperativeHandle as useImperativeHandle12, useMemo as useMemo34, useRef as useRef35, useState as useState33 } from "react";
+import { forwardRef as forwardRef20, useCallback as useCallback36, useEffect as useEffect39, useId as useId16, useImperativeHandle as useImperativeHandle11, useMemo as useMemo34, useRef as useRef35, useState as useState33 } from "react";
 import { CalendarIcon, X as X4 } from "lucide-react";
 import clsx31 from "clsx";
 
@@ -18802,7 +18834,7 @@ var DateTimeInput = forwardRef20(function DateTimeInput2({
   }), [generatedId, inputId]);
   const controlRef = useRef35(null);
   const fieldRef = useRef35(null);
-  useImperativeHandle12(forwardedRef, () => controlRef.current);
+  useImperativeHandle11(forwardedRef, () => controlRef.current);
   useEffect39(() => {
     if (readOnly || disabled) {
       changeOpenWrapper(false);
@@ -19330,7 +19362,7 @@ function MultiSelectRoot({
 }
 
 // src/components/user-interaction/MultiSelect/MultiSelectButton.tsx
-import { forwardRef as forwardRef22, useEffect as useEffect43, useImperativeHandle as useImperativeHandle13, useRef as useRef37 } from "react";
+import { forwardRef as forwardRef22, useEffect as useEffect43, useImperativeHandle as useImperativeHandle12, useRef as useRef37 } from "react";
 
 // src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
 import clsx32 from "clsx";
@@ -19447,7 +19479,7 @@ var MultiSelectButton = forwardRef22(function MultiSelectButton2({
     if (id) setIds((prev) => ({ ...prev, trigger: id }));
   }, [id, setIds]);
   const innerRef = useRef37(null);
-  useImperativeHandle13(ref, () => innerRef.current);
+  useImperativeHandle12(ref, () => innerRef.current);
   useEffect43(() => {
     const unregister = registerTrigger(innerRef);
     return () => unregister();
@@ -19516,14 +19548,14 @@ var MultiSelectButton = forwardRef22(function MultiSelectButton2({
 });
 
 // src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
-import { forwardRef as forwardRef23, useCallback as useCallback40, useEffect as useEffect44, useImperativeHandle as useImperativeHandle14, useRef as useRef38 } from "react";
+import { forwardRef as forwardRef23, useCallback as useCallback40, useEffect as useEffect44, useImperativeHandle as useImperativeHandle13, useRef as useRef38 } from "react";
 import clsx33 from "clsx";
 import { jsx as jsx82, jsxs as jsxs49 } from "react/jsx-runtime";
 var MultiSelectContent = forwardRef23(function MultiSelectContent2({ id, options, showSearch: showSearchOverride, searchInputProps, ...props }, ref) {
   const translation = useHightideTranslation();
   const innerRef = useRef38(null);
   const searchInputRef = useRef38(null);
-  useImperativeHandle14(ref, () => innerRef.current);
+  useImperativeHandle13(ref, () => innerRef.current);
   const context = useMultiSelectContext();
   const { config, highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId, handleTypeaheadKey, toggleSelection } = context;
   const { setIds } = config;
@@ -21840,7 +21872,7 @@ var Menu = ({
 };
 
 // src/components/user-interaction/MultiSelect/MultiSelectChipDisplay.tsx
-import { forwardRef as forwardRef30, useEffect as useEffect52, useImperativeHandle as useImperativeHandle15, useRef as useRef45 } from "react";
+import { forwardRef as forwardRef30, useEffect as useEffect52, useImperativeHandle as useImperativeHandle14, useRef as useRef45 } from "react";
 import { XIcon as XIcon2, Plus as Plus2 } from "lucide-react";
 import { jsx as jsx103, jsxs as jsxs65 } from "react/jsx-runtime";
 var MultiSelectChipDisplayButton = forwardRef30(function MultiSelectChipDisplayButton2({ id, ...props }, ref) {
@@ -21853,7 +21885,7 @@ var MultiSelectChipDisplayButton = forwardRef30(function MultiSelectChipDisplayB
     if (id) setIds((prev) => ({ ...prev, trigger: id }));
   }, [id, setIds]);
   const innerRef = useRef45(null);
-  useImperativeHandle15(ref, () => innerRef.current);
+  useImperativeHandle14(ref, () => innerRef.current);
   useEffect52(() => {
     const unregister = registerTrigger(innerRef);
     return () => unregister();
@@ -22782,7 +22814,7 @@ var SearchBar = ({
 };
 
 // src/components/user-interaction/input/ToggleableInput.tsx
-import { forwardRef as forwardRef34, useEffect as useEffect54, useImperativeHandle as useImperativeHandle16, useRef as useRef46, useState as useState47 } from "react";
+import { forwardRef as forwardRef34, useEffect as useEffect54, useImperativeHandle as useImperativeHandle15, useRef as useRef46, useState as useState47 } from "react";
 import { Pencil } from "lucide-react";
 import clsx48 from "clsx";
 import { jsx as jsx113, jsxs as jsxs72 } from "react/jsx-runtime";
@@ -22801,7 +22833,7 @@ var ToggleableInput = forwardRef34(function ToggleableInput2({
   });
   const [isEditing, setIsEditing] = useState47(initialState !== "display");
   const innerRef = useRef46(null);
-  useImperativeHandle16(forwardedRef, () => innerRef.current);
+  useImperativeHandle15(forwardedRef, () => innerRef.current);
   useEffect54(() => {
     if (isEditing) {
       innerRef.current?.focus();