@dbcdk/react-components 0.0.191 → 0.0.193

package/dist/components/tabs/Tabs.cjs

@@ -150,62 +150,64 @@ function Tabs({
     ) : null,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tabs} ${styles__default.default[variant]} ${panelStyle ? styles__default.default.panelStyle : ""}`, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.tabList, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: onAddTab ? styles__default.default.tabButtons : `${styles__default.default.tabButtons} ${styles__default.default.tabButtonsEnd}`,
-            role: "tablist",
-            "aria-label": header != null ? header : "Tabs",
-            children: visibleTabs.map((tab, index) => {
-              const selected = index === activeIndex;
-              const tabDomId = `${uid}-tab-${String(tab.id)}`;
-              const panelDomId = `${uid}-panel-${String(tab.id)}`;
-              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tab} ${selected ? styles__default.default.active : ""}`, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
-                  {
-                    id: tabDomId,
-                    type: "button",
-                    className: styles__default.default.tabButton,
-                    role: "tab",
-                    "aria-selected": selected,
-                    "aria-controls": panelDomId,
-                    tabIndex: selected ? 0 : -1,
-                    disabled: tab.disabled,
-                    onClick: () => setValue(tab.id),
-                    onKeyDown: (e) => onKeyDownTab(e, index),
-                    children: [
-                      tab.headerIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: tab.headerIcon }) : null,
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: tab.header }),
-                      tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badge, children: /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
-                    ]
-                  }
-                ),
-                tab.removable && onRemoveTab ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: styles__default.default.removeTabButton,
-                    "aria-label": `Fjern fane ${tab.header}`,
-                    disabled: tab.disabled,
-                    onClick: () => onRemoveTab(tab.id, tab, index),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
-                  }
-                ) : null
-              ] }, tab.id);
-            })
-          }
-        ),
-        onAddTab ? /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: styles__default.default.addTabButton,
-            onClick: onAddTab,
-            "aria-label": "Tilf\xF8j fane",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { "aria-hidden": "true" })
-          }
-        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.tabStrip, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: onAddTab ? styles__default.default.tabButtons : `${styles__default.default.tabButtons} ${styles__default.default.tabButtonsEnd}`,
+              role: "tablist",
+              "aria-label": header != null ? header : "Tabs",
+              children: visibleTabs.map((tab, index) => {
+                const selected = index === activeIndex;
+                const tabDomId = `${uid}-tab-${String(tab.id)}`;
+                const panelDomId = `${uid}-panel-${String(tab.id)}`;
+                return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tab} ${selected ? styles__default.default.active : ""}`, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      id: tabDomId,
+                      type: "button",
+                      className: styles__default.default.tabButton,
+                      role: "tab",
+                      "aria-selected": selected,
+                      "aria-controls": panelDomId,
+                      tabIndex: selected ? 0 : -1,
+                      disabled: tab.disabled,
+                      onClick: () => setValue(tab.id),
+                      onKeyDown: (e) => onKeyDownTab(e, index),
+                      children: [
+                        tab.headerIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: tab.headerIcon }) : null,
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: tab.header }),
+                        tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badge, children: /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
+                      ]
+                    }
+                  ),
+                  tab.removable && onRemoveTab ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: styles__default.default.removeTabButton,
+                      "aria-label": `Fjern fane ${tab.header}`,
+                      disabled: tab.disabled,
+                      onClick: () => onRemoveTab(tab.id, tab, index),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
+                    }
+                  ) : null
+                ] }, tab.id);
+              })
+            }
+          ),
+          onAddTab ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: styles__default.default.addTabButton,
+              onClick: onAddTab,
+              "aria-label": "Tilf\xF8j fane",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { "aria-hidden": "true" })
+            }
+          ) : null
+        ] }),
         tabListAddition ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tabListAddition, children: tabListAddition }) : null
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/tabs/Tabs.js

@@ -144,62 +144,64 @@ function Tabs({
     ) : null,
     /* @__PURE__ */ jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ""}`, children: [
       /* @__PURE__ */ jsxs("div", { className: styles.tabList, children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: onAddTab ? styles.tabButtons : `${styles.tabButtons} ${styles.tabButtonsEnd}`,
-            role: "tablist",
-            "aria-label": header != null ? header : "Tabs",
-            children: visibleTabs.map((tab, index) => {
-              const selected = index === activeIndex;
-              const tabDomId = `${uid}-tab-${String(tab.id)}`;
-              const panelDomId = `${uid}-panel-${String(tab.id)}`;
-              return /* @__PURE__ */ jsxs("div", { className: `${styles.tab} ${selected ? styles.active : ""}`, children: [
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    id: tabDomId,
-                    type: "button",
-                    className: styles.tabButton,
-                    role: "tab",
-                    "aria-selected": selected,
-                    "aria-controls": panelDomId,
-                    tabIndex: selected ? 0 : -1,
-                    disabled: tab.disabled,
-                    onClick: () => setValue(tab.id),
-                    onKeyDown: (e) => onKeyDownTab(e, index),
-                    children: [
-                      tab.headerIcon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: tab.headerIcon }) : null,
-                      /* @__PURE__ */ jsx("span", { className: styles.label, children: tab.header }),
-                      tab.badge ? /* @__PURE__ */ jsx("span", { className: styles.badge, children: /* @__PURE__ */ jsx(Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
-                    ]
-                  }
-                ),
-                tab.removable && onRemoveTab ? /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: styles.removeTabButton,
-                    "aria-label": `Fjern fane ${tab.header}`,
-                    disabled: tab.disabled,
-                    onClick: () => onRemoveTab(tab.id, tab, index),
-                    children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-                  }
-                ) : null
-              ] }, tab.id);
-            })
-          }
-        ),
-        onAddTab ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: styles.addTabButton,
-            onClick: onAddTab,
-            "aria-label": "Tilf\xF8j fane",
-            children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" })
-          }
-        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: styles.tabStrip, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: onAddTab ? styles.tabButtons : `${styles.tabButtons} ${styles.tabButtonsEnd}`,
+              role: "tablist",
+              "aria-label": header != null ? header : "Tabs",
+              children: visibleTabs.map((tab, index) => {
+                const selected = index === activeIndex;
+                const tabDomId = `${uid}-tab-${String(tab.id)}`;
+                const panelDomId = `${uid}-panel-${String(tab.id)}`;
+                return /* @__PURE__ */ jsxs("div", { className: `${styles.tab} ${selected ? styles.active : ""}`, children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      id: tabDomId,
+                      type: "button",
+                      className: styles.tabButton,
+                      role: "tab",
+                      "aria-selected": selected,
+                      "aria-controls": panelDomId,
+                      tabIndex: selected ? 0 : -1,
+                      disabled: tab.disabled,
+                      onClick: () => setValue(tab.id),
+                      onKeyDown: (e) => onKeyDownTab(e, index),
+                      children: [
+                        tab.headerIcon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: tab.headerIcon }) : null,
+                        /* @__PURE__ */ jsx("span", { className: styles.label, children: tab.header }),
+                        tab.badge ? /* @__PURE__ */ jsx("span", { className: styles.badge, children: /* @__PURE__ */ jsx(Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
+                      ]
+                    }
+                  ),
+                  tab.removable && onRemoveTab ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: styles.removeTabButton,
+                      "aria-label": `Fjern fane ${tab.header}`,
+                      disabled: tab.disabled,
+                      onClick: () => onRemoveTab(tab.id, tab, index),
+                      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                    }
+                  ) : null
+                ] }, tab.id);
+              })
+            }
+          ),
+          onAddTab ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles.addTabButton,
+              onClick: onAddTab,
+              "aria-label": "Tilf\xF8j fane",
+              children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" })
+            }
+          ) : null
+        ] }),
         tabListAddition ? /* @__PURE__ */ jsx("div", { className: styles.tabListAddition, children: tabListAddition }) : null
       ] }),
       /* @__PURE__ */ jsx(

package/dist/components/tabs/Tabs.module.css

@@ -26,8 +26,18 @@
 
 /* Tablist */
 .tabList {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto var(--spacing-sm);
+  min-width: 0;
+}
+
+.tabStrip {
   display: flex;
+  grid-column: 1;
+  grid-row: 1 / span 2;
   min-width: 0;
+  align-self: end;
 }
 
 .tabButtons {
@@ -40,6 +50,12 @@
      here. */
   overflow-y: hidden;
   min-width: 0;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.tabButtons::-webkit-scrollbar {
+  display: none;
 }
 
 /* Extra content next to the tab buttons, pushed into the free space on the
@@ -48,6 +64,8 @@
 .tabListAddition {
   display: flex;
   align-items: start;
+  grid-column: 2;
+  grid-row: 1;
   flex-shrink: 0;
   gap: var(--spacing-sm);
   margin-inline-start: auto;
@@ -94,8 +112,6 @@
     border-color var(--transition-fast) var(--ease-standard);
 }
 
-.active .tabButton {
-}
 .tabButton:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
@@ -236,37 +252,37 @@
 /* One continuous backdrop behind the whole button row, so the curved gap
    next to the active tab's rounded corners shows toolbar gray, not the
    surface color behind the row. */
-.filled > .tabList > .tabButtons {
+.filled > .tabList > .tabStrip > .tabButtons {
   display: flex;
   background: var(--color-bg-toolbar);
   border-start-start-radius: var(--border-radius-md);
 }
 
-.filled > .tabList > .tabButtons > .tab > .tabButton {
+.filled > .tabList > .tabStrip > .tabButtons > .tab > .tabButton {
   padding-block: var(--spacing-xs);
 }
 
-.filled > .tabList > .tabButtons > .tab > .tabButton .icon svg {
+.filled > .tabList > .tabStrip > .tabButtons > .tab > .tabButton .icon svg {
   inline-size: var(--icon-size-sm);
   block-size: var(--icon-size-sm);
 }
 
-.filled > .tabList > .tabButtons.tabButtonsEnd {
+.filled > .tabList > .tabStrip > .tabButtons.tabButtonsEnd {
   border-start-end-radius: var(--border-radius-md);
 }
 
-.filled > .tabList > .addTabButton {
+.filled > .tabList > .tabStrip > .addTabButton {
   background: var(--color-bg-toolbar);
   border: 1px solid transparent;
   border-block-end: 0;
   border-start-end-radius: var(--border-radius-md);
 }
 
-.filled > .tabList > .addTabButton:hover {
+.filled > .tabList > .tabStrip > .addTabButton:hover {
   background: var(--color-bg-toolbar-hover);
 }
 
-.filled > .tabList > .tabButtons > .tab {
+.filled > .tabList > .tabStrip > .tabButtons > .tab {
   border: 1px solid transparent;
   border-block-end-width: 1px;
   margin-block-end: -1px;
@@ -278,14 +294,14 @@
     border-color var(--transition-fast) var(--ease-standard);
 }
 
-.filled > .tabList > .tabButtons > .tab:not(.active):hover {
+.filled > .tabList > .tabStrip > .tabButtons > .tab:not(.active):hover {
   background: var(--color-bg-toolbar-hover);
   color: var(--color-fg-default);
 }
 
 /* Active tab physically overlaps the tabList separator by 1px so its
    erased bottom border seamlessly merges with the panel below. */
-.filled > .tabList > .tabButtons > .tab.active {
+.filled > .tabList > .tabStrip > .tabButtons > .tab.active {
   background: var(--color-bg-surface);
   border-color: var(--color-border-subtle);
   border-block-end-color: var(--color-bg-surface);
@@ -295,7 +311,7 @@
   color: var(--color-fg-default);
 }
 
-.filled > .tabList > .tabButtons > .tab.active::after {
+.filled > .tabList > .tabStrip > .tabButtons > .tab.active::after {
   content: '';
   position: absolute;
   inset-inline: -1px;
@@ -325,17 +341,17 @@
   padding-block-end: var(--spacing-xs);
 }
 
-.outlined > .tabList > .tabButtons > .tab {
+.outlined > .tabList > .tabStrip > .tabButtons > .tab {
   color: var(--color-fg-muted);
   border-block-end: 2px solid var(--color-border-default);
   transition: color var(--transition-fast) var(--ease-standard);
 }
 
-.outlined > .tabList > .tabButtons > .tab:not(.active):hover {
+.outlined > .tabList > .tabStrip > .tabButtons > .tab:not(.active):hover {
   color: var(--color-brand);
 }
 
-.outlined > .tabList > .tabButtons > .tab.active {
+.outlined > .tabList > .tabStrip > .tabButtons > .tab.active {
   color: var(--color-brand);
   border-block-end-color: var(--color-brand);
 }
@@ -355,7 +371,7 @@
 }
 
 /* When panelStyle is on, tabs look “embedded” (no bottom border indicators) */
-.panelStyle > .tabList > .tabButtons > .tab {
+.panelStyle > .tabList > .tabStrip > .tabButtons > .tab {
   border-block-end: 0;
 }
 

package/dist/components/timeline/Timeline.d.ts

@@ -20,6 +20,7 @@ export interface TimelineItem {
     id?: string;
     label: ReactNode;
     content: ReactNode;
+    active?: boolean;
     collapsible?: boolean;
     severity?: Severity;
     icon?: ReactNode;

package/dist/components/timeline/components/TimelineRow.cjs

@@ -58,7 +58,7 @@ function TimelineRow({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.body, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.headerRow} ${hasContextMenu ? styles__default.default.headerRowWithActions : ""}`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.label, children: item.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.label} ${item.active ? styles__default.default.labelActive : ""}`.trim(), children: item.label }),
             item.date !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.date, children: formatDate.formatDate(item.date, { userFriendlyLabel: true, ...item.dateOptions }) }) : null,
             isCollapsible ? /* @__PURE__ */ jsxRuntime.jsx(
               "button",

package/dist/components/timeline/components/TimelineRow.js

@@ -52,7 +52,7 @@ function TimelineRow({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
           /* @__PURE__ */ jsxs("div", { className: `${styles.headerRow} ${hasContextMenu ? styles.headerRowWithActions : ""}`, children: [
-            /* @__PURE__ */ jsx("div", { className: styles.label, children: item.label }),
+            /* @__PURE__ */ jsx("div", { className: `${styles.label} ${item.active ? styles.labelActive : ""}`.trim(), children: item.label }),
             item.date !== void 0 ? /* @__PURE__ */ jsx("span", { className: styles.date, children: formatDate(item.date, { userFriendlyLabel: true, ...item.dateOptions }) }) : null,
             isCollapsible ? /* @__PURE__ */ jsx(
               "button",

package/dist/components/timeline/components/TimelineRow.module.css

@@ -73,6 +73,10 @@
   min-width: 0;
 }
 
+.labelActive {
+  color: var(--color-fg-default);
+}
+
 .date {
   font-size: var(--font-size-xs);
   font-weight: 400;

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

@@ -13,6 +13,7 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function TreeNodeRow({
   node,
   depth,
+  wrapLabels,
   isExpanded,
   toggle,
   resolvedChildren,
@@ -66,7 +67,13 @@ function TreeNodeRow({
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: styles__default.default.labelButton, onClick: () => onSelectNode == null ? void 0 : onSelectNode(node), children: [
             node.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, "aria-hidden": "true", children: node.icon }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: renderLabel ? renderLabel(node) : node.label })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: [styles__default.default.label, wrapLabels ? styles__default.default.labelWrap : styles__default.default.labelTruncate].filter(Boolean).join(" "),
+                children: renderLabel ? renderLabel(node) : node.label
+              }
+            )
           ] })
         ] }),
         error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.errorRow, children: [
@@ -78,6 +85,7 @@ function TreeNodeRow({
           {
             node: child,
             depth: depth + 1,
+            wrapLabels,
             isExpanded,
             toggle,
             resolvedChildren,

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

@@ -3,6 +3,7 @@ import type { LoadTreeChildren, TreeNode } from './types';
 type TreeNodeRowProps<T> = {
     node: TreeNode<T>;
     depth: number;
+    wrapLabels: boolean;
     isExpanded: (id: string) => boolean;
     toggle: (id: string) => void;
     resolvedChildren: Record<string, TreeNode<T>[]>;
@@ -14,5 +15,5 @@ type TreeNodeRowProps<T> = {
     onSelectNode?: (node: TreeNode<T>) => void;
     renderLabel?: (node: TreeNode<T>) => ReactNode;
 };
-export declare function TreeNodeRow<T>({ node, depth, isExpanded, toggle, resolvedChildren, loadingIds, errorIds, requestLoad, loadChildren, selectedId, onSelectNode, renderLabel, }: TreeNodeRowProps<T>): JSX.Element;
+export declare function TreeNodeRow<T>({ node, depth, wrapLabels, isExpanded, toggle, resolvedChildren, loadingIds, errorIds, requestLoad, loadChildren, selectedId, onSelectNode, renderLabel, }: TreeNodeRowProps<T>): JSX.Element;
 export {};

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 };