@dbcdk/react-components 0.0.190 → 0.0.192

package/dist/components/search-box/SearchBox.cjs

@@ -27,6 +27,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   resultKeys,
   resultTemplate,
   initialTemplate,
+  initialTemplateOnly = false,
   popoverMinWidth = "500px",
   noResultText = "Ingen resultater",
   loading,
@@ -99,34 +100,36 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   }, [enableHotkey]);
   const hasInitialTemplate = initialTemplate !== void 0 && initialTemplate !== null;
   const hasQuery = draft.trim().length > 0;
-  const canShowPopover = hasQuery || hasInitialTemplate;
+  const canShowPopover = initialTemplateOnly ? !hasQuery && hasInitialTemplate : hasQuery || hasInitialTemplate;
   const handleChange = react.useCallback(
     (e) => {
       var _a2, _b, _c;
       const nextDraft = e.target.value;
       const nextHasQuery = nextDraft.trim().length > 0;
       setDraft(nextDraft);
-      if (nextHasQuery || hasInitialTemplate) {
+      const nextCanShow = initialTemplateOnly ? !nextHasQuery && hasInitialTemplate : nextHasQuery || hasInitialTemplate;
+      if (nextCanShow) {
         if (!((_a2 = popoverRef.current) == null ? void 0 : _a2.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
       } else {
         (_c = popoverRef.current) == null ? void 0 : _c.close();
       }
       onChange == null ? void 0 : onChange(e);
     },
-    [hasInitialTemplate, onChange]
+    [hasInitialTemplate, initialTemplateOnly, onChange]
   );
   const handleSelect = react.useCallback(
     (item) => {
       onSelect == null ? void 0 : onSelect(item);
-      reset();
+      reset({ returnFocus: false });
+      onSearch == null ? void 0 : onSearch("");
     },
-    [onSelect]
+    [onSelect, onSearch]
   );
-  function reset() {
+  function reset(opts) {
     var _a2;
     setDraft("");
     setActiveIndex(null);
-    (_a2 = popoverRef.current) == null ? void 0 : _a2.close();
+    (_a2 = popoverRef.current) == null ? void 0 : _a2.close(opts);
   }
   const handleClear = react.useCallback(() => {
     var _a2;

package/dist/components/search-box/SearchBox.d.ts

@@ -15,6 +15,13 @@ export type SearchBoxProps<T extends Record<string, unknown>> = Omit<InputProps,
     onSelect?: (item: T) => void;
     displayPopover?: boolean;
     initialTemplate?: React.ReactNode;
+    /**
+     * When true, the popover only ever shows `initialTemplate` (on an empty
+     * field) and never opens once there's a query - for a box with no live
+     * results/resultTemplate of its own (e.g. one that just navigates via a
+     * URL param), so it doesn't pop open an empty dropdown while typing.
+     */
+    initialTemplateOnly?: boolean;
     noResultText?: string;
     popoverMinWidth?: string;
     loading?: boolean;

package/dist/components/search-box/SearchBox.js

@@ -21,6 +21,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
   resultKeys,
   resultTemplate,
   initialTemplate,
+  initialTemplateOnly = false,
   popoverMinWidth = "500px",
   noResultText = "Ingen resultater",
   loading,
@@ -93,34 +94,36 @@ const SearchBox = forwardRef(function SearchBoxInner({
   }, [enableHotkey]);
   const hasInitialTemplate = initialTemplate !== void 0 && initialTemplate !== null;
   const hasQuery = draft.trim().length > 0;
-  const canShowPopover = hasQuery || hasInitialTemplate;
+  const canShowPopover = initialTemplateOnly ? !hasQuery && hasInitialTemplate : hasQuery || hasInitialTemplate;
   const handleChange = useCallback(
     (e) => {
       var _a2, _b, _c;
       const nextDraft = e.target.value;
       const nextHasQuery = nextDraft.trim().length > 0;
       setDraft(nextDraft);
-      if (nextHasQuery || hasInitialTemplate) {
+      const nextCanShow = initialTemplateOnly ? !nextHasQuery && hasInitialTemplate : nextHasQuery || hasInitialTemplate;
+      if (nextCanShow) {
         if (!((_a2 = popoverRef.current) == null ? void 0 : _a2.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
       } else {
         (_c = popoverRef.current) == null ? void 0 : _c.close();
       }
       onChange == null ? void 0 : onChange(e);
     },
-    [hasInitialTemplate, onChange]
+    [hasInitialTemplate, initialTemplateOnly, onChange]
   );
   const handleSelect = useCallback(
     (item) => {
       onSelect == null ? void 0 : onSelect(item);
-      reset();
+      reset({ returnFocus: false });
+      onSearch == null ? void 0 : onSearch("");
     },
-    [onSelect]
+    [onSelect, onSearch]
   );
-  function reset() {
+  function reset(opts) {
     var _a2;
     setDraft("");
     setActiveIndex(null);
-    (_a2 = popoverRef.current) == null ? void 0 : _a2.close();
+    (_a2 = popoverRef.current) == null ? void 0 : _a2.close(opts);
   }
   const handleClear = useCallback(() => {
     var _a2;

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.cjs

@@ -4,6 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var React = require('react');
+var Icon = require('../../../../components/icon/Icon');
 var Button = require('../../../button/Button');
 var Menu = require('../../../menu/Menu');
 var Popover = require('../../../popover/Popover');
@@ -73,7 +74,7 @@ const SidenavFiltering = ({
             variant: "outlined",
             "aria-label": "\xC5bn indstillinger for sidemenu",
             onClick: toggle,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, {})
+            icon: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { "aria-hidden": "true" }) })
           }
         ),
         children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: wrapItemText, children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Search, Settings2 } from 'lucide-react';
 import React from 'react';
+import { Icon } from '../../../../components/icon/Icon';
 import { Button } from '../../../button/Button';
 import { Menu } from '../../../menu/Menu';
 import { Popover } from '../../../popover/Popover';
@@ -67,7 +68,7 @@ const SidenavFiltering = ({
             variant: "outlined",
             "aria-label": "\xC5bn indstillinger for sidemenu",
             onClick: toggle,
-            icon: /* @__PURE__ */ jsx(Settings2, {})
+            icon: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }) })
           }
         ),
         children: (close) => /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx(Menu.Item, { active: wrapItemText, children: /* @__PURE__ */ jsx(

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