@dbcdk/react-components 0.0.190 → 0.0.192

package/dist/components/tree-view/TreeNodeRow.js

@@ -7,6 +7,7 @@ import styles from './TreeView.module.css';
 function TreeNodeRow({
   node,
   depth,
+  wrapLabels,
   isExpanded,
   toggle,
   resolvedChildren,
@@ -60,7 +61,13 @@ function TreeNodeRow({
           ),
           /* @__PURE__ */ jsxs("button", { type: "button", className: styles.labelButton, onClick: () => onSelectNode == null ? void 0 : onSelectNode(node), children: [
             node.icon ? /* @__PURE__ */ jsx("span", { className: styles.icon, "aria-hidden": "true", children: node.icon }) : null,
-            /* @__PURE__ */ jsx("span", { className: styles.label, children: renderLabel ? renderLabel(node) : node.label })
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: [styles.label, wrapLabels ? styles.labelWrap : styles.labelTruncate].filter(Boolean).join(" "),
+                children: renderLabel ? renderLabel(node) : node.label
+              }
+            )
           ] })
         ] }),
         error ? /* @__PURE__ */ jsxs("div", { className: styles.errorRow, children: [
@@ -72,6 +79,7 @@ function TreeNodeRow({
           {
             node: child,
             depth: depth + 1,
+            wrapLabels,
             isExpanded,
             toggle,
             resolvedChildren,

package/dist/components/tree-view/TreeView.cjs

@@ -21,6 +21,7 @@ function TreeView({
   selectedId,
   onSelectNode,
   renderLabel,
+  wrapLabels = true,
   emptyMessage = "Intet at vise.",
   loadErrorMessage = () => "Der skete en fejl under indl\xE6sning.",
   className,
@@ -67,6 +68,7 @@ function TreeView({
     {
       node,
       depth: 0,
+      wrapLabels,
       isExpanded,
       toggle,
       resolvedChildren,

package/dist/components/tree-view/TreeView.d.ts

@@ -17,4 +17,4 @@ export { collectExpandableIds, findAncestorIds } from './utils';
  * useTreeExpansion), and it can be left uncontrolled or owned by the
  * caller via `expandedIds`/`onExpandedIdsChange`.
  */
-export declare function TreeView<T = unknown>({ data, loadChildren, defaultExpandedIds, expandedIds, onExpandedIdsChange, selectedId, onSelectNode, renderLabel, emptyMessage, loadErrorMessage, className, ...rest }: TreeViewProps<T>): JSX.Element;
+export declare function TreeView<T = unknown>({ data, loadChildren, defaultExpandedIds, expandedIds, onExpandedIdsChange, selectedId, onSelectNode, renderLabel, wrapLabels, emptyMessage, loadErrorMessage, className, ...rest }: TreeViewProps<T>): JSX.Element;

package/dist/components/tree-view/TreeView.js

@@ -15,6 +15,7 @@ function TreeView({
   selectedId,
   onSelectNode,
   renderLabel,
+  wrapLabels = true,
   emptyMessage = "Intet at vise.",
   loadErrorMessage = () => "Der skete en fejl under indl\xE6sning.",
   className,
@@ -61,6 +62,7 @@ function TreeView({
     {
       node,
       depth: 0,
+      wrapLabels,
       isExpanded,
       toggle,
       resolvedChildren,

package/dist/components/tree-view/TreeView.module.css

@@ -108,6 +108,14 @@
 
 .label {
   min-inline-size: 0;
+}
+
+.labelWrap {
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.labelTruncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/components/tree-view/types.d.ts

@@ -36,6 +36,8 @@ export type TreeViewProps<T = unknown> = {
     onSelectNode?: (node: TreeNode<T>) => void;
     /** Customize how a node's row content renders; defaults to `node.icon` + `node.label`. */
     renderLabel?: (node: TreeNode<T>) => ReactNode;
+    /** Allows node labels to wrap onto multiple lines. Set to false to truncate them to one line. */
+    wrapLabels?: boolean;
     emptyMessage?: ReactNode;
     /** Formats the error shown under a node whose `loadChildren` call rejected. */
     loadErrorMessage?: (error: unknown, node: TreeNode<T>) => ReactNode;

package/dist/components/tree-view/useTreeExpansion.cjs

@@ -38,10 +38,20 @@ function useTreeExpansion(defaultExpandedIds = [], controlledIds, onChange) {
     (id) => expandedIds.has(id) ? collapse(id) : expand(id),
     [expandedIds, expand, collapse]
   );
-  const expandAll = react.useCallback((ids) => commit(new Set(ids)), [commit]);
+  const setExpandedIds = react.useCallback((ids) => commit(new Set(ids)), [commit]);
+  const expandAll = react.useCallback((ids) => setExpandedIds(ids), [setExpandedIds]);
   const collapseAll = react.useCallback(() => commit(/* @__PURE__ */ new Set()), [commit]);
   const isExpanded = react.useCallback((id) => expandedIds.has(id), [expandedIds]);
-  return { expandedIds, expand, collapse, toggle, expandAll, collapseAll, isExpanded };
+  return {
+    expandedIds,
+    setExpandedIds,
+    expand,
+    collapse,
+    toggle,
+    expandAll,
+    collapseAll,
+    isExpanded
+  };
 }
 
 exports.useTreeExpansion = useTreeExpansion;

package/dist/components/tree-view/useTreeExpansion.d.ts

@@ -8,6 +8,7 @@
  */
 export declare function useTreeExpansion(defaultExpandedIds?: string[], controlledIds?: string[], onChange?: (ids: string[]) => void): {
     expandedIds: Set<string>;
+    setExpandedIds: (ids: string[]) => void;
     expand: (id: string) => void;
     collapse: (id: string) => void;
     toggle: (id: string) => void;

package/dist/components/tree-view/useTreeExpansion.js

@@ -36,10 +36,20 @@ function useTreeExpansion(defaultExpandedIds = [], controlledIds, onChange) {
     (id) => expandedIds.has(id) ? collapse(id) : expand(id),
     [expandedIds, expand, collapse]
   );
-  const expandAll = useCallback((ids) => commit(new Set(ids)), [commit]);
+  const setExpandedIds = useCallback((ids) => commit(new Set(ids)), [commit]);
+  const expandAll = useCallback((ids) => setExpandedIds(ids), [setExpandedIds]);
   const collapseAll = useCallback(() => commit(/* @__PURE__ */ new Set()), [commit]);
   const isExpanded = useCallback((id) => expandedIds.has(id), [expandedIds]);
-  return { expandedIds, expand, collapse, toggle, expandAll, collapseAll, isExpanded };
+  return {
+    expandedIds,
+    setExpandedIds,
+    expand,
+    collapse,
+    toggle,
+    expandAll,
+    collapseAll,
+    isExpanded
+  };
 }
 
 export { useTreeExpansion };

package/dist/components/xml-viewer/XmlViewer.cjs

@@ -10,6 +10,7 @@ var usePersistentState = require('../../hooks/usePersistentState');
 var tokenizeXml = require('./tokenizeXml');
 var styles = require('./XmlViewer.module.css');
 var Button = require('../button/Button');
+var Icon = require('../icon/Icon');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -88,7 +89,7 @@ function XmlViewer({
                     "aria-haspopup": "menu",
                     "aria-expanded": isOpen ? true : false,
                     onClick: toggle,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { "aria-hidden": "true" }) })
                   }
                 ),
                 children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [

package/dist/components/xml-viewer/XmlViewer.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, MoreVertical } from 'lucide-react';
+import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, Settings2 } from 'lucide-react';
 import { useMemo, useRef } from 'react';
 import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
@@ -8,6 +8,7 @@ import { usePersistentState } from '../../hooks/usePersistentState';
 import { tokenizeXml } from './tokenizeXml';
 import styles from './XmlViewer.module.css';
 import { Button } from '../button/Button';
+import { Icon } from '../icon/Icon';
 
 const TOKEN_CLASS = {
   tagName: styles.tagName,
@@ -82,7 +83,7 @@ function XmlViewer({
                     "aria-haspopup": "menu",
                     "aria-expanded": isOpen ? true : false,
                     onClick: toggle,
-                    children: /* @__PURE__ */ jsx(MoreVertical, { "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }) })
                   }
                 ),
                 children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [

package/dist/hooks/useStickyLayout.cjs

@@ -0,0 +1,99 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+const getScrollport = (element) => {
+  for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+    if (parent === document.body || parent === document.documentElement) return null;
+    const { overflowY } = window.getComputedStyle(parent);
+    if (/^(auto|scroll|hidden|overlay)$/.test(overflowY)) return parent;
+  }
+  return null;
+};
+function useStickyLayout(ref, {
+  mediaQuery,
+  offset = 0,
+  min = 0,
+  includeMarginTop = false,
+  boundaryRef,
+  watchRef,
+  bottomOffset = 0
+} = {}) {
+  const [layout, setLayout] = react.useState(
+    () => ({
+      active: !mediaQuery,
+      top: Math.max(0, min, offset)
+    })
+  );
+  const raf = react.useRef(null);
+  const measure = react.useCallback(() => {
+    const element = ref.current;
+    if (typeof window === "undefined" || !element) return;
+    if (mediaQuery && !window.matchMedia(mediaQuery).matches) {
+      setLayout((prev) => prev.active ? { top: 0, active: false } : prev);
+      return;
+    }
+    const scrollport = getScrollport(element);
+    const scrollportTop = scrollport ? scrollport.getBoundingClientRect().top + scrollport.clientTop : 0;
+    const scrollportBottom = scrollport ? Math.min(window.innerHeight, scrollportTop + scrollport.clientHeight) : window.innerHeight;
+    const boundary = boundaryRef == null ? void 0 : boundaryRef.current;
+    const boundaryBottom = boundary && boundary !== element ? boundary.getBoundingClientRect().bottom : scrollportTop;
+    const marginTop = includeMarginTop ? parseFloat(window.getComputedStyle(element).marginTop) || 0 : 0;
+    const top = Math.max(0, min, boundaryBottom - scrollportTop + offset - marginTop);
+    const visibleTop = Math.max(element.getBoundingClientRect().top, scrollportTop + top);
+    const maxHeight = Math.max(0, Math.floor(scrollportBottom - visibleTop - bottomOffset));
+    setLayout(
+      (prev) => prev.active && prev.top === top && prev.maxHeight === maxHeight ? prev : { top, maxHeight, active: true }
+    );
+  }, [ref, boundaryRef, offset, min, includeMarginTop, bottomOffset, mediaQuery]);
+  const scheduleMeasure = react.useCallback(() => {
+    if (raf.current !== null) return;
+    raf.current = window.requestAnimationFrame(() => {
+      raf.current = null;
+      measure();
+    });
+  }, [measure]);
+  useIsomorphicLayoutEffect(() => {
+    measure();
+  }, [measure]);
+  react.useEffect(() => {
+    if (!ref.current) return;
+    const element = ref.current;
+    const media = mediaQuery ? window.matchMedia(mediaQuery) : null;
+    media == null ? void 0 : media.addEventListener("change", scheduleMeasure);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(scheduleMeasure);
+    const targets = /* @__PURE__ */ new Set([element]);
+    for (let parent = element.parentElement; parent; parent = parent.parentElement)
+      targets.add(parent);
+    if (boundaryRef == null ? void 0 : boundaryRef.current) targets.add(boundaryRef.current);
+    if (watchRef == null ? void 0 : watchRef.current) targets.add(watchRef.current);
+    targets.forEach((target) => observer == null ? void 0 : observer.observe(target));
+    window.addEventListener("resize", scheduleMeasure);
+    document.addEventListener("scroll", scheduleMeasure, true);
+    document.addEventListener("transitionend", scheduleMeasure, true);
+    document.addEventListener("animationend", scheduleMeasure, true);
+    return () => {
+      observer == null ? void 0 : observer.disconnect();
+      media == null ? void 0 : media.removeEventListener("change", scheduleMeasure);
+      window.removeEventListener("resize", scheduleMeasure);
+      document.removeEventListener("scroll", scheduleMeasure, true);
+      document.removeEventListener("transitionend", scheduleMeasure, true);
+      document.removeEventListener("animationend", scheduleMeasure, true);
+      if (raf.current !== null) cancelAnimationFrame(raf.current);
+      raf.current = null;
+    };
+  }, [ref, boundaryRef, watchRef, scheduleMeasure, mediaQuery]);
+  const style = react.useMemo(
+    () => layout.active ? { position: "sticky", top: `${layout.top}px` } : {},
+    [layout.top, layout.active]
+  );
+  const viewportStyle = react.useMemo(
+    () => layout.active ? { maxHeight: layout.maxHeight, overflowY: "auto", overscrollBehavior: "contain" } : {},
+    [layout.maxHeight, layout.active]
+  );
+  return { top: layout.top, style, viewportStyle, recompute: measure };
+}
+
+exports.useStickyLayout = useStickyLayout;

package/dist/hooks/useStickyLayout.d.ts

@@ -0,0 +1,22 @@
+import { type CSSProperties, type RefObject } from 'react';
+type Options = {
+    /** Enable sticky behavior only while this media query matches. */
+    mediaQuery?: string;
+    /** Extra inset below the scrollport edge or boundary, in pixels. */
+    offset?: number;
+    min?: number;
+    includeMarginTop?: boolean;
+    /** Header whose bottom edge the sticky element must stay below. */
+    boundaryRef?: RefObject<HTMLElement | null>;
+    /** Optional additional element whose resizing affects the layout. */
+    watchRef?: RefObject<HTMLElement | null>;
+    /** Breathing room below the inner scrollable content, in pixels. */
+    bottomOffset?: number;
+};
+export declare function useStickyLayout<T extends HTMLElement>(ref: RefObject<T | null>, { mediaQuery, offset, min, includeMarginTop, boundaryRef, watchRef, bottomOffset, }?: Options): {
+    top: number;
+    style: CSSProperties;
+    viewportStyle: CSSProperties;
+    recompute: () => void;
+};
+export {};

package/dist/hooks/useStickyLayout.js

@@ -0,0 +1,97 @@
+'use client';
+import { useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+const getScrollport = (element) => {
+  for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+    if (parent === document.body || parent === document.documentElement) return null;
+    const { overflowY } = window.getComputedStyle(parent);
+    if (/^(auto|scroll|hidden|overlay)$/.test(overflowY)) return parent;
+  }
+  return null;
+};
+function useStickyLayout(ref, {
+  mediaQuery,
+  offset = 0,
+  min = 0,
+  includeMarginTop = false,
+  boundaryRef,
+  watchRef,
+  bottomOffset = 0
+} = {}) {
+  const [layout, setLayout] = useState(
+    () => ({
+      active: !mediaQuery,
+      top: Math.max(0, min, offset)
+    })
+  );
+  const raf = useRef(null);
+  const measure = useCallback(() => {
+    const element = ref.current;
+    if (typeof window === "undefined" || !element) return;
+    if (mediaQuery && !window.matchMedia(mediaQuery).matches) {
+      setLayout((prev) => prev.active ? { top: 0, active: false } : prev);
+      return;
+    }
+    const scrollport = getScrollport(element);
+    const scrollportTop = scrollport ? scrollport.getBoundingClientRect().top + scrollport.clientTop : 0;
+    const scrollportBottom = scrollport ? Math.min(window.innerHeight, scrollportTop + scrollport.clientHeight) : window.innerHeight;
+    const boundary = boundaryRef == null ? void 0 : boundaryRef.current;
+    const boundaryBottom = boundary && boundary !== element ? boundary.getBoundingClientRect().bottom : scrollportTop;
+    const marginTop = includeMarginTop ? parseFloat(window.getComputedStyle(element).marginTop) || 0 : 0;
+    const top = Math.max(0, min, boundaryBottom - scrollportTop + offset - marginTop);
+    const visibleTop = Math.max(element.getBoundingClientRect().top, scrollportTop + top);
+    const maxHeight = Math.max(0, Math.floor(scrollportBottom - visibleTop - bottomOffset));
+    setLayout(
+      (prev) => prev.active && prev.top === top && prev.maxHeight === maxHeight ? prev : { top, maxHeight, active: true }
+    );
+  }, [ref, boundaryRef, offset, min, includeMarginTop, bottomOffset, mediaQuery]);
+  const scheduleMeasure = useCallback(() => {
+    if (raf.current !== null) return;
+    raf.current = window.requestAnimationFrame(() => {
+      raf.current = null;
+      measure();
+    });
+  }, [measure]);
+  useIsomorphicLayoutEffect(() => {
+    measure();
+  }, [measure]);
+  useEffect(() => {
+    if (!ref.current) return;
+    const element = ref.current;
+    const media = mediaQuery ? window.matchMedia(mediaQuery) : null;
+    media == null ? void 0 : media.addEventListener("change", scheduleMeasure);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(scheduleMeasure);
+    const targets = /* @__PURE__ */ new Set([element]);
+    for (let parent = element.parentElement; parent; parent = parent.parentElement)
+      targets.add(parent);
+    if (boundaryRef == null ? void 0 : boundaryRef.current) targets.add(boundaryRef.current);
+    if (watchRef == null ? void 0 : watchRef.current) targets.add(watchRef.current);
+    targets.forEach((target) => observer == null ? void 0 : observer.observe(target));
+    window.addEventListener("resize", scheduleMeasure);
+    document.addEventListener("scroll", scheduleMeasure, true);
+    document.addEventListener("transitionend", scheduleMeasure, true);
+    document.addEventListener("animationend", scheduleMeasure, true);
+    return () => {
+      observer == null ? void 0 : observer.disconnect();
+      media == null ? void 0 : media.removeEventListener("change", scheduleMeasure);
+      window.removeEventListener("resize", scheduleMeasure);
+      document.removeEventListener("scroll", scheduleMeasure, true);
+      document.removeEventListener("transitionend", scheduleMeasure, true);
+      document.removeEventListener("animationend", scheduleMeasure, true);
+      if (raf.current !== null) cancelAnimationFrame(raf.current);
+      raf.current = null;
+    };
+  }, [ref, boundaryRef, watchRef, scheduleMeasure, mediaQuery]);
+  const style = useMemo(
+    () => layout.active ? { position: "sticky", top: `${layout.top}px` } : {},
+    [layout.top, layout.active]
+  );
+  const viewportStyle = useMemo(
+    () => layout.active ? { maxHeight: layout.maxHeight, overflowY: "auto", overscrollBehavior: "contain" } : {},
+    [layout.maxHeight, layout.active]
+  );
+  return { top: layout.top, style, viewportStyle, recompute: measure };
+}
+
+export { useStickyLayout };

package/dist/hooks/useTreeViewSettings.cjs

@@ -0,0 +1,87 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var useTreeExpansion = require('../components/tree-view/useTreeExpansion');
+var utils = require('../components/tree-view/utils');
+var localStorage_utils = require('../utils/localStorage.utils');
+
+function isTreeViewSettingsState(value) {
+  return typeof value === "object" && value !== null && typeof value.wrapLabels === "boolean";
+}
+const localStorageTreeViewSettingsStorage = {
+  get: (key) => {
+    const stored = localStorage_utils.readLocalStorage(key);
+    return isTreeViewSettingsState(stored) ? stored : void 0;
+  },
+  set: (key, next) => {
+    localStorage_utils.writeLocalStorage(key, next);
+  }
+};
+function useTreeViewSettings({
+  data = [],
+  defaultExpandedIds = [],
+  expandedIds: controlledExpandedIds,
+  onExpandedIdsChange,
+  defaultWrapLabels = true,
+  wrapLabels: controlledWrapLabels,
+  onWrapLabelsChange,
+  storageKey,
+  storage = localStorageTreeViewSettingsStorage
+}) {
+  const [uncontrolledWrapLabels, setUncontrolledWrapLabels] = react.useState(defaultWrapLabels);
+  const isWrapControlled = controlledWrapLabels !== void 0;
+  const wrapLabels = isWrapControlled ? controlledWrapLabels : uncontrolledWrapLabels;
+  react.useEffect(() => {
+    if (!storageKey || isWrapControlled) return;
+    const stored = storage.get(storageKey);
+    if (stored) {
+      setUncontrolledWrapLabels(stored.wrapLabels);
+    }
+  }, [isWrapControlled, storage, storageKey]);
+  const setWrapLabels = react.useCallback(
+    (value) => {
+      if (wrapLabels === value) return;
+      if (!isWrapControlled) {
+        setUncontrolledWrapLabels(value);
+        if (storageKey) {
+          storage.set(storageKey, { wrapLabels: value });
+        }
+      }
+      onWrapLabelsChange == null ? void 0 : onWrapLabelsChange(value);
+    },
+    [isWrapControlled, onWrapLabelsChange, storage, storageKey, wrapLabels]
+  );
+  const toggleWrapLabels = react.useCallback(() => {
+    setWrapLabels(!wrapLabels);
+  }, [setWrapLabels, wrapLabels]);
+  const expansion = useTreeExpansion.useTreeExpansion(defaultExpandedIds, controlledExpandedIds, onExpandedIdsChange);
+  const expandedIds = react.useMemo(() => Array.from(expansion.expandedIds), [expansion.expandedIds]);
+  const expandAll = react.useCallback(() => {
+    expansion.setExpandedIds(utils.collectExpandableIds(data));
+  }, [data, expansion]);
+  const treeViewProps = react.useMemo(
+    () => ({
+      expandedIds,
+      onExpandedIdsChange: expansion.setExpandedIds,
+      wrapLabels
+    }),
+    [expandedIds, expansion.setExpandedIds, wrapLabels]
+  );
+  return {
+    wrapLabels,
+    setWrapLabels,
+    toggleWrapLabels,
+    expandedIds,
+    setExpandedIds: expansion.setExpandedIds,
+    expand: expansion.expand,
+    collapse: expansion.collapse,
+    toggle: expansion.toggle,
+    expandAll,
+    collapseAll: expansion.collapseAll,
+    treeViewProps
+  };
+}
+
+exports.localStorageTreeViewSettingsStorage = localStorageTreeViewSettingsStorage;
+exports.useTreeViewSettings = useTreeViewSettings;

package/dist/hooks/useTreeViewSettings.d.ts

@@ -0,0 +1,35 @@
+import type { TreeNode, TreeViewProps } from '../components/tree-view/types';
+type TreeViewSettingsState = {
+    wrapLabels: boolean;
+};
+export type TreeViewSettingsStorage = {
+    get: (key: string) => TreeViewSettingsState | undefined;
+    set: (key: string, next: TreeViewSettingsState) => void;
+};
+export declare const localStorageTreeViewSettingsStorage: TreeViewSettingsStorage;
+export interface UseTreeViewSettingsOptions<T = unknown> {
+    data?: TreeNode<T>[];
+    defaultExpandedIds?: string[];
+    expandedIds?: string[];
+    onExpandedIdsChange?: (ids: string[]) => void;
+    defaultWrapLabels?: boolean;
+    wrapLabels?: boolean;
+    onWrapLabelsChange?: (value: boolean) => void;
+    storageKey?: string;
+    storage?: TreeViewSettingsStorage;
+}
+export interface UseTreeViewSettingsResult<T = unknown> {
+    wrapLabels: boolean;
+    setWrapLabels: (value: boolean) => void;
+    toggleWrapLabels: () => void;
+    expandedIds: string[];
+    setExpandedIds: (ids: string[]) => void;
+    expand: (id: string) => void;
+    collapse: (id: string) => void;
+    toggle: (id: string) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    treeViewProps: Pick<TreeViewProps<T>, 'expandedIds' | 'onExpandedIdsChange' | 'wrapLabels'>;
+}
+export declare function useTreeViewSettings<T = unknown>({ data, defaultExpandedIds, expandedIds: controlledExpandedIds, onExpandedIdsChange, defaultWrapLabels, wrapLabels: controlledWrapLabels, onWrapLabelsChange, storageKey, storage, }: UseTreeViewSettingsOptions<T>): UseTreeViewSettingsResult<T>;
+export {};

package/dist/hooks/useTreeViewSettings.js

@@ -0,0 +1,84 @@
+'use client';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useTreeExpansion } from '../components/tree-view/useTreeExpansion';
+import { collectExpandableIds } from '../components/tree-view/utils';
+import { writeLocalStorage, readLocalStorage } from '../utils/localStorage.utils';
+
+function isTreeViewSettingsState(value) {
+  return typeof value === "object" && value !== null && typeof value.wrapLabels === "boolean";
+}
+const localStorageTreeViewSettingsStorage = {
+  get: (key) => {
+    const stored = readLocalStorage(key);
+    return isTreeViewSettingsState(stored) ? stored : void 0;
+  },
+  set: (key, next) => {
+    writeLocalStorage(key, next);
+  }
+};
+function useTreeViewSettings({
+  data = [],
+  defaultExpandedIds = [],
+  expandedIds: controlledExpandedIds,
+  onExpandedIdsChange,
+  defaultWrapLabels = true,
+  wrapLabels: controlledWrapLabels,
+  onWrapLabelsChange,
+  storageKey,
+  storage = localStorageTreeViewSettingsStorage
+}) {
+  const [uncontrolledWrapLabels, setUncontrolledWrapLabels] = useState(defaultWrapLabels);
+  const isWrapControlled = controlledWrapLabels !== void 0;
+  const wrapLabels = isWrapControlled ? controlledWrapLabels : uncontrolledWrapLabels;
+  useEffect(() => {
+    if (!storageKey || isWrapControlled) return;
+    const stored = storage.get(storageKey);
+    if (stored) {
+      setUncontrolledWrapLabels(stored.wrapLabels);
+    }
+  }, [isWrapControlled, storage, storageKey]);
+  const setWrapLabels = useCallback(
+    (value) => {
+      if (wrapLabels === value) return;
+      if (!isWrapControlled) {
+        setUncontrolledWrapLabels(value);
+        if (storageKey) {
+          storage.set(storageKey, { wrapLabels: value });
+        }
+      }
+      onWrapLabelsChange == null ? void 0 : onWrapLabelsChange(value);
+    },
+    [isWrapControlled, onWrapLabelsChange, storage, storageKey, wrapLabels]
+  );
+  const toggleWrapLabels = useCallback(() => {
+    setWrapLabels(!wrapLabels);
+  }, [setWrapLabels, wrapLabels]);
+  const expansion = useTreeExpansion(defaultExpandedIds, controlledExpandedIds, onExpandedIdsChange);
+  const expandedIds = useMemo(() => Array.from(expansion.expandedIds), [expansion.expandedIds]);
+  const expandAll = useCallback(() => {
+    expansion.setExpandedIds(collectExpandableIds(data));
+  }, [data, expansion]);
+  const treeViewProps = useMemo(
+    () => ({
+      expandedIds,
+      onExpandedIdsChange: expansion.setExpandedIds,
+      wrapLabels
+    }),
+    [expandedIds, expansion.setExpandedIds, wrapLabels]
+  );
+  return {
+    wrapLabels,
+    setWrapLabels,
+    toggleWrapLabels,
+    expandedIds,
+    setExpandedIds: expansion.setExpandedIds,
+    expand: expansion.expand,
+    collapse: expansion.collapse,
+    toggle: expansion.toggle,
+    expandAll,
+    collapseAll: expansion.collapseAll,
+    treeViewProps
+  };
+}
+
+export { localStorageTreeViewSettingsStorage, useTreeViewSettings };

package/dist/index.cjs

@@ -8,6 +8,7 @@ var Icon = require('./components/icon/Icon');
 var UserDisplay = require('./components/user-display/UserDisplay');
 var Headline = require('./components/headline/Headline');
 var SectionLabel = require('./components/section-label/SectionLabel');
+var useStickyLayout = require('./hooks/useStickyLayout');
 var PageLayout = require('./components/page-layout/PageLayout');
 var Footer = require('./components/page-layout/components/footer/Footer');
 var Card = require('./components/card/Card');
@@ -100,6 +101,12 @@ Object.keys(SectionLabel).forEach(function (k) {
 		get: function () { return SectionLabel[k]; }
 	});
 });
+Object.keys(useStickyLayout).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useStickyLayout[k]; }
+	});
+});
 Object.keys(PageLayout).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './components/icon/Icon';
 export * from './components/user-display/UserDisplay';
 export * from './components/headline/Headline';
 export * from './components/section-label/SectionLabel';
+export * from './hooks/useStickyLayout';
 export * from './components/page-layout/PageLayout';
 export * from './components/page-layout/components/footer/Footer';
 export * from './components/card/Card';

package/dist/index.js

@@ -6,6 +6,7 @@ export * from './components/icon/Icon';
 export * from './components/user-display/UserDisplay';
 export * from './components/headline/Headline';
 export * from './components/section-label/SectionLabel';
+export * from './hooks/useStickyLayout';
 export * from './components/page-layout/PageLayout';
 export * from './components/page-layout/components/footer/Footer';
 export * from './components/card/Card';