@dbcdk/react-components 0.0.210 → 0.0.212

package/dist/components/forms/typeahead/Typeahead.js

@@ -8,6 +8,23 @@ import { Menu } from '../../../components/menu/Menu';
 import { Popover } from '../../../components/popover/Popover';
 import styles from './Typeahead.module.css';
 
+function orderByGroup(options) {
+  if (!options.some((option) => option.group)) return options;
+  const groups = /* @__PURE__ */ new Map();
+  for (const option of options) {
+    const group = option.group || void 0;
+    const entries = groups.get(group);
+    if (entries) entries.push(option);
+    else groups.set(group, [option]);
+  }
+  return Array.from(groups.values()).flat();
+}
+function findEnabledIndex(items, start, step) {
+  for (let index = start; index >= 0 && index < items.length; index += step) {
+    if (!items[index].disabled) return index;
+  }
+  return -1;
+}
 function parseLengthToPx(value, referenceFontSize = 16) {
   if (!value) return 0;
   const trimmed = value.trim();
@@ -173,16 +190,25 @@ function Typeahead({
       filteredOptions = options;
     } else {
       filteredOptions = options.filter(
-        (option) => option.label.toLocaleLowerCase().includes(normalizedQuery)
+        (option) => {
+          var _a2, _b, _c, _d;
+          return option.label.toLocaleLowerCase().includes(normalizedQuery) || ((_b = (_a2 = option.description) == null ? void 0 : _a2.toLocaleLowerCase().includes(normalizedQuery)) != null ? _b : false) || ((_d = (_c = option.group) == null ? void 0 : _c.toLocaleLowerCase().includes(normalizedQuery)) != null ? _d : false);
+        }
       );
     }
   }
+  filteredOptions = orderByGroup(filteredOptions);
   if (typeof maxVisibleOptions === "number" && Number.isFinite(maxVisibleOptions)) {
     filteredOptions = filteredOptions.slice(0, Math.max(0, maxVisibleOptions));
   }
+  const groupStarts = /* @__PURE__ */ new Map();
+  filteredOptions.forEach((option, index) => {
+    if (option.group && !groupStarts.has(option.group)) groupStarts.set(option.group, index);
+  });
   const commitSelection = React.useCallback(
     (option) => {
       var _a2, _b;
+      if (option == null ? void 0 : option.disabled) return;
       locallyClearedRef.current = false;
       setHideSelectedHighlight(false);
       if (mode === "multi") {
@@ -310,24 +336,21 @@ function Typeahead({
   }, [selectedOption, selectedSingleText, mode]);
   const getSelectedIndex = React.useCallback(
     (items) => {
-      if (items.length === 0) return -1;
-      if (locallyClearedRef.current) return 0;
-      if (mode === "multi") {
-        if (!Array.isArray(selectedValue) || selectedValue.length === 0) return 0;
-        const firstSelectedIndex = items.findIndex((option) => selectedValue.includes(option.value));
-        return firstSelectedIndex >= 0 ? firstSelectedIndex : 0;
-      }
-      const singleSelectedIndex = items.findIndex((option) => option.value === selectedValue);
-      return singleSelectedIndex >= 0 ? singleSelectedIndex : 0;
+      const firstEnabled = findEnabledIndex(items, 0, 1);
+      if (firstEnabled < 0 || locallyClearedRef.current) return firstEnabled;
+      const selectedIndex = items.findIndex(
+        (option) => !option.disabled && (mode === "multi" ? Array.isArray(selectedValue) && selectedValue.includes(option.value) : option.value === selectedValue)
+      );
+      return selectedIndex >= 0 ? selectedIndex : firstEnabled;
     },
     [mode, selectedValue]
   );
   useEffect(() => {
     setActiveIndex((current) => {
-      if (filteredOptions.length === 0) return -1;
-      if (locallyClearedRef.current) return 0;
-      if (current < 0) return getSelectedIndex(filteredOptions);
-      return Math.min(current, filteredOptions.length - 1);
+      if (locallyClearedRef.current || current < 0 || !filteredOptions[current] || filteredOptions[current].disabled) {
+        return getSelectedIndex(filteredOptions);
+      }
+      return current;
     });
   }, [filteredOptions, getSelectedIndex]);
   useEffect(() => {
@@ -428,7 +451,14 @@ function Typeahead({
     }
     const exactLabelMatch = options.find((option) => option.label === inputValue);
     if (exactLabelMatch) {
-      commitSelection(exactLabelMatch);
+      if (exactLabelMatch.disabled) {
+        setInputValue(selectedSingleText);
+        setQuery("");
+        setOpen(false);
+        setActiveIndex(-1);
+      } else {
+        commitSelection(exactLabelMatch);
+      }
       return;
     }
     if (allowCustomValue) {
@@ -460,7 +490,7 @@ function Typeahead({
     if (justClearedRef.current) return;
     setQuery("");
     setOpen(true);
-    setActiveIndex(getSelectedIndex(options));
+    setActiveIndex(getSelectedIndex(orderByGroup(options)));
   }, [getSelectedIndex, options]);
   const openWithCurrentFilter = React.useCallback(() => {
     if (justClearedRef.current) return;
@@ -502,7 +532,7 @@ function Typeahead({
       if (isAlreadyFocused && mode === "single" && selectedOption && !locallyClearedRef.current) {
         prepareSingleSearchInput();
         setOpen(true);
-        setActiveIndex(getSelectedIndex(options));
+        setActiveIndex(getSelectedIndex(orderByGroup(options)));
       } else if (isAlreadyFocused && !open) {
         setOpen(true);
         setActiveIndex(getSelectedIndex(filteredOptions));
@@ -549,7 +579,8 @@ function Typeahead({
         setActiveIndex((index) => {
           if (filteredOptions.length === 0) return -1;
           if (index < 0) return getSelectedIndex(filteredOptions);
-          return Math.min(index + 1, filteredOptions.length - 1);
+          const next = findEnabledIndex(filteredOptions, index + 1, 1);
+          return next >= 0 ? next : index;
         });
         return;
       case "ArrowUp":
@@ -559,20 +590,23 @@ function Typeahead({
           return;
         }
         setActiveIndex((index) => {
-          if (filteredOptions.length === 0) return -1;
-          if (index < 0) return filteredOptions.length - 1;
-          return Math.max(index - 1, 0);
+          const next = findEnabledIndex(
+            filteredOptions,
+            index < 0 ? filteredOptions.length - 1 : index - 1,
+            -1
+          );
+          return next >= 0 ? next : index;
         });
         return;
       case "Home":
         if (!open || filteredOptions.length === 0) return;
         e.preventDefault();
-        setActiveIndex(0);
+        setActiveIndex(findEnabledIndex(filteredOptions, 0, 1));
         return;
       case "End":
         if (!open || filteredOptions.length === 0) return;
         e.preventDefault();
-        setActiveIndex(filteredOptions.length - 1);
+        setActiveIndex(findEnabledIndex(filteredOptions, filteredOptions.length - 1, -1));
         return;
       case "Enter":
         if (!open) return;
@@ -626,7 +660,7 @@ function Typeahead({
               if (nextOpen) {
                 if (mode === "single" && selectedOption && !locallyClearedRef.current) {
                   setQuery("");
-                  setActiveIndex(getSelectedIndex(options));
+                  setActiveIndex(getSelectedIndex(orderByGroup(options)));
                 } else {
                   setActiveIndex(getSelectedIndex(filteredOptions));
                 }
@@ -744,41 +778,74 @@ function Typeahead({
               const isActive = index === activeIndex;
               const isSelected = mode === "multi" ? Array.isArray(selectedValue) && selectedValue.includes(option.value) : option.value === selectedValue && !hideSelectedHighlight;
               const optionId = `${listboxId}-option-${index}`;
-              return mode === "multi" ? /* @__PURE__ */ jsx(
+              const groupId = option.group ? `${listboxId}-group-${groupStarts.get(option.group)}` : void 0;
+              const startsGroup = !!option.group && groupStarts.get(option.group) === index;
+              const descriptionId = option.description ? `${optionId}-description` : void 0;
+              const describedBy = [groupId, descriptionId].filter(Boolean).join(" ") || void 0;
+              const labelContent = /* @__PURE__ */ jsxs("span", { className: styles.optionText, children: [
+                /* @__PURE__ */ jsx("span", { children: option.label }),
+                option.description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: styles.description, children: option.description })
+              ] });
+              const item = mode === "multi" ? /* @__PURE__ */ jsx(
                 Menu.CheckItem,
                 {
                   checked: isSelected,
+                  disabled: option.disabled,
                   active: isActive,
                   interactiveProps: {
                     id: optionId,
                     role: "option",
-                    onMouseEnter: () => setActiveIndex(index),
+                    "aria-describedby": describedBy,
+                    "aria-label": option.label,
+                    "aria-disabled": option.disabled || void 0,
+                    onMouseEnter: () => {
+                      if (!option.disabled) setActiveIndex(index);
+                    },
                     onMouseDown: (e) => {
                       interactingWithOptionsRef.current = true;
                       e.preventDefault();
                     },
                     onKeyDown: (e) => handleTabKeyDown(e)
                   },
-                  label: /* @__PURE__ */ jsx("span", { children: option.label }),
+                  label: labelContent,
                   onCheckedChange: () => commitSelection(option)
                 },
                 option.value
-              ) : /* @__PURE__ */ jsx(Menu.Item, { active: isActive, selected: isSelected, children: /* @__PURE__ */ jsx(
-                "button",
+              ) : /* @__PURE__ */ jsx(
+                Menu.Item,
                 {
-                  id: optionId,
-                  type: "button",
-                  role: "option",
-                  "aria-selected": isSelected,
-                  onMouseEnter: () => setActiveIndex(index),
-                  onMouseDown: (e) => {
-                    e.preventDefault();
-                  },
-                  onKeyDown: (e) => handleTabKeyDown(e),
-                  onClick: () => commitSelection(option),
-                  children: /* @__PURE__ */ jsx("span", { children: option.label })
-                }
-              ) }, option.value);
+                  active: isActive,
+                  selected: isSelected,
+                  disabled: option.disabled,
+                  children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      id: optionId,
+                      type: "button",
+                      role: "option",
+                      "aria-selected": isSelected,
+                      "aria-describedby": describedBy,
+                      "aria-label": option.label,
+                      "aria-disabled": option.disabled || void 0,
+                      disabled: option.disabled,
+                      onMouseEnter: () => {
+                        if (!option.disabled) setActiveIndex(index);
+                      },
+                      onMouseDown: (e) => {
+                        e.preventDefault();
+                      },
+                      onKeyDown: (e) => handleTabKeyDown(e),
+                      onClick: () => commitSelection(option),
+                      children: labelContent
+                    }
+                  )
+                },
+                option.value
+              );
+              return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                startsGroup && /* @__PURE__ */ jsx(Menu.Header, { id: groupId, children: option.group }),
+                item
+              ] }, option.value);
             }) : /* @__PURE__ */ jsx(Menu.Item, { disabled: true, children: emptyMessage }) })
           }
         ),

package/dist/components/forms/typeahead/Typeahead.module.css

@@ -36,3 +36,19 @@
 .typeaheadInput {
   cursor: pointer;
 }
+
+/* Label and description share one row; the description wraps below only when space runs out. */
+.optionText {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: var(--spacing-md);
+  min-width: 0;
+}
+
+.description {
+  margin-inline-start: auto;
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-muted);
+  text-align: end;
+}

package/dist/components/headline/CollapsibleHeadline.cjs

@@ -7,7 +7,6 @@ var react = require('react');
 var usePersistentState = require('../../hooks/usePersistentState');
 var Headline = require('./Headline');
 var styles = require('./Headline.module.css');
-var Button = require('../button/Button');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -45,7 +44,7 @@ function CollapsibleHeadline({
     onToggle == null ? void 0 : onToggle();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.collapsibleRoot, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(
       Headline.Headline,
       {
         ...headlineProps,
@@ -53,28 +52,26 @@ function CollapsibleHeadline({
         weight,
         size,
         addition,
-        children: [
-          header,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button.Button,
-            {
-              shape: "round",
-              type: "button",
-              variant: "inline",
-              style: { padding: "var(--spacing-2xs)" },
-              "aria-expanded": isExpanded,
-              "aria-controls": panelId,
-              onClick: handleToggle,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: styles__default.default.toggleButton,
+            "aria-expanded": isExpanded,
+            "aria-controls": panelId,
+            onClick: handleToggle,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: header }),
+              /* @__PURE__ */ jsxRuntime.jsx(
                 lucideReact.ChevronDown,
                 {
                   "aria-hidden": true,
                   className: [styles__default.default.toggleChevron, isExpanded ? styles__default.default.toggleChevronExpanded : ""].filter(Boolean).join(" ")
                 }
               )
-            }
-          )
-        ]
+            ]
+          }
+        )
       }
     ),
     isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { id: panelId, className: styles__default.default.collapsiblePanel, children })

package/dist/components/headline/CollapsibleHeadline.d.ts

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import type { HeadlineProps } from './Headline';
 export interface CollapsibleHeadlineProps extends Omit<HeadlineProps, 'addition' | 'children'> {
-    /** The headline text — always visible. */
+    /** The headline text — always visible. Use addition for separate interactive content. */
     header: React.ReactNode;
     /** Controlled expanded state. When omitted, the component manages its own state. */
     expanded?: boolean;
@@ -9,7 +9,7 @@ export interface CollapsibleHeadlineProps extends Omit<HeadlineProps, 'addition'
     onToggle?: () => void;
     /** id of the panel element, used for aria-controls. Generated automatically if omitted. */
     controls?: string;
-    /** Extra content rendered between the headline text and the toggle button. */
+    /** Extra content rendered beside the heading, outside the toggle button. */
     addition?: React.ReactNode;
     /**
      * When set in uncontrolled mode, the component persists its expanded

package/dist/components/headline/CollapsibleHeadline.js

@@ -5,7 +5,6 @@ import { useId } from 'react';
 import { usePersistentState } from '../../hooks/usePersistentState';
 import { Headline } from './Headline';
 import styles from './Headline.module.css';
-import { Button } from '../button/Button';
 
 function CollapsibleHeadline({
   header,
@@ -39,7 +38,7 @@ function CollapsibleHeadline({
     onToggle == null ? void 0 : onToggle();
   };
   return /* @__PURE__ */ jsxs("div", { className: styles.collapsibleRoot, children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       Headline,
       {
         ...headlineProps,
@@ -47,28 +46,26 @@ function CollapsibleHeadline({
         weight,
         size,
         addition,
-        children: [
-          header,
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              shape: "round",
-              type: "button",
-              variant: "inline",
-              style: { padding: "var(--spacing-2xs)" },
-              "aria-expanded": isExpanded,
-              "aria-controls": panelId,
-              onClick: handleToggle,
-              children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: styles.toggleButton,
+            "aria-expanded": isExpanded,
+            "aria-controls": panelId,
+            onClick: handleToggle,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: header }),
+              /* @__PURE__ */ jsx(
                 ChevronDown,
                 {
                   "aria-hidden": true,
                   className: [styles.toggleChevron, isExpanded ? styles.toggleChevronExpanded : ""].filter(Boolean).join(" ")
                 }
               )
-            }
-          )
-        ]
+            ]
+          }
+        )
       }
     ),
     isExpanded && /* @__PURE__ */ jsx("div", { id: panelId, className: styles.collapsiblePanel, children })

package/dist/components/headline/Headline.module.css

@@ -47,6 +47,27 @@
 }
 
 /* CollapsibleHeadline wrapper */
+.toggleButton {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: start;
+  cursor: pointer;
+  border-radius: var(--border-radius-sm);
+}
+
+.toggleButton:focus-visible {
+  outline: var(--border-width-medium) solid var(--color-border-selected);
+  outline-offset: var(--spacing-2xs);
+}
+
 .collapsibleRoot {
   display: flex;
   flex-direction: column;
@@ -58,6 +79,7 @@
 
 .toggleChevron {
   display: block;
+  flex-shrink: 0;
   width: 0.85em;
   height: 0.85em;
   transition: transform var(--transition-normal) var(--ease-standard);

package/dist/components/nav-bar/NavBar.d.ts

@@ -18,7 +18,8 @@ export type NavBarLinkItem = NavBarBase & {
     active?: boolean;
     external?: boolean;
 };
-/** Clickable + expandable item (has href AND children) */
+/** Expandable container. In Sidebar, href is a stable expansion key, not a destination.
+ * Legacy component/active/external props are accepted but ignored by Sidebar groups. */
 export type NavBarExpandableItem = NavBarBase & {
     type: 'expandable';
     href: string;

package/dist/components/sidebar/Sidebar.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -19,7 +20,7 @@ function Sidebar({
   minWidth,
   storageKey
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider.SidebarProvider, { items, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider.SidebarProvider, { items, initialActiveLink: activeLink, children: /* @__PURE__ */ jsxRuntime.jsx(
     SidebarContainer.SidebarContainer,
     {
       productName,

package/dist/components/sidebar/Sidebar.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { SidebarContainer } from './components/sidebar-container/SidebarContainer';
 import { SidebarProvider } from './providers/SidebarProvider';
@@ -17,7 +18,7 @@ function Sidebar({
   minWidth,
   storageKey
 }) {
-  return /* @__PURE__ */ jsx(SidebarProvider, { items, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(SidebarProvider, { items, initialActiveLink: activeLink, children: /* @__PURE__ */ jsx(
     SidebarContainer,
     {
       productName,

package/dist/components/sidebar/components/SidebarItem.cjs

@@ -1,31 +1,54 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./SidebarItem.module.css');
+var SidebarProvider = require('../providers/SidebarProvider');
 var SidebarItemContent = require('./sidebar-item-content/SidebarItemContent');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
 function SidebarItem({
-  component: Component,
+  component: Component = "a",
   label,
   icon,
   badge,
   href,
   iconWidth,
-  truncateLabel
+  depth = 0,
+  truncateLabel,
+  enabled = true,
+  external
 }) {
-  if (!Component) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    SidebarItemContent.SidebarItemContent,
+  const { activeLink, isSidebarCollapsed } = SidebarProvider.useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
     {
-      icon,
-      badge,
-      iconWidth,
-      label,
       href,
-      truncateLabel
+      className: styles__default.default.link,
+      "aria-label": isSidebarCollapsed ? label : void 0,
+      "aria-current": enabled && activeLink === href ? "page" : void 0,
+      "aria-disabled": !enabled || void 0,
+      tabIndex: enabled ? void 0 : -1,
+      onClick: enabled ? void 0 : (event) => event.preventDefault(),
+      ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarItemContent.SidebarItemContent,
+        {
+          icon,
+          badge,
+          depth,
+          iconWidth,
+          label,
+          href,
+          disableActiveStyles: !enabled,
+          truncateLabel
+        }
+      )
     }
-  ) });
+  );
 }
 
 exports.SidebarItem = SidebarItem;

package/dist/components/sidebar/components/SidebarItem.d.ts

@@ -2,11 +2,14 @@ import React from 'react';
 interface SidebarItemProps {
     component?: React.ElementType;
     label: string;
-    icon: React.ReactNode;
+    icon?: React.ReactNode;
     badge?: number | string;
     href?: string;
+    depth?: number;
     iconWidth?: string | number;
+    enabled?: boolean;
+    external?: boolean;
     truncateLabel?: boolean;
 }
-export declare function SidebarItem({ component: Component, label, icon, badge, href, iconWidth, truncateLabel, }: SidebarItemProps): React.ReactNode;
+export declare function SidebarItem({ component: Component, label, icon, badge, href, iconWidth, depth, truncateLabel, enabled, external, }: SidebarItemProps): React.ReactNode;
 export {};

package/dist/components/sidebar/components/SidebarItem.js

@@ -1,29 +1,48 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
+import styles from './SidebarItem.module.css';
+import { useSidebar } from '../providers/SidebarProvider';
 import { SidebarItemContent } from './sidebar-item-content/SidebarItemContent';
 
 function SidebarItem({
-  component: Component,
+  component: Component = "a",
   label,
   icon,
   badge,
   href,
   iconWidth,
-  truncateLabel
+  depth = 0,
+  truncateLabel,
+  enabled = true,
+  external
 }) {
-  if (!Component) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(
-    SidebarItemContent,
+  const { activeLink, isSidebarCollapsed } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    Component,
     {
-      icon,
-      badge,
-      iconWidth,
-      label,
       href,
-      truncateLabel
+      className: styles.link,
+      "aria-label": isSidebarCollapsed ? label : void 0,
+      "aria-current": enabled && activeLink === href ? "page" : void 0,
+      "aria-disabled": !enabled || void 0,
+      tabIndex: enabled ? void 0 : -1,
+      onClick: enabled ? void 0 : (event) => event.preventDefault(),
+      ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      children: /* @__PURE__ */ jsx(
+        SidebarItemContent,
+        {
+          icon,
+          badge,
+          depth,
+          iconWidth,
+          label,
+          href,
+          disableActiveStyles: !enabled,
+          truncateLabel
+        }
+      )
     }
-  ) });
+  );
 }
 
 export { SidebarItem };

package/dist/components/sidebar/components/SidebarItem.module.css

@@ -0,0 +1,16 @@
+.link {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  border-radius: var(--border-radius-md);
+}
+
+.link:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.link[aria-disabled='true'] {
+  color: var(--color-fg-subtle);
+  cursor: default;
+}