@dbcdk/react-components 0.0.210 → 0.0.211

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,52 @@
+'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
+  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,
+          iconWidth,
+          label,
+          href,
+          disableActiveStyles: !enabled,
+          truncateLabel
+        }
+      )
     }
-  ) });
+  );
 }
 
 exports.SidebarItem = SidebarItem;

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

@@ -2,11 +2,13 @@ import React from 'react';
 interface SidebarItemProps {
     component?: React.ElementType;
     label: string;
-    icon: React.ReactNode;
+    icon?: React.ReactNode;
     badge?: number | string;
     href?: string;
     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, truncateLabel, enabled, external, }: SidebarItemProps): React.ReactNode;
 export {};

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

@@ -1,29 +1,46 @@
+'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
+  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,
+          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;
+}

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs

@@ -5,27 +5,22 @@ var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var react = require('react');
 var styles = require('./ExpandableSidebarItem.module.css');
-var Button = require('../../../button/Button');
 var SidebarProvider = require('../../providers/SidebarProvider');
-var ExpandableSidebarItem$1 = require('../expandable-sidebar-item/ExpandableSidebarItem');
 var SidebarItemContent = require('../sidebar-item-content/SidebarItemContent');
-var SidebarItem = require('../SidebarItem');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-const isGroup = (item) => item.type === "group";
-const isExpandable = (item) => item.type === "expandable";
 function ExpandableSidebarItem({
-  items,
+  children,
   label,
   icon,
   badge,
-  component: Component,
   href,
   iconWidth,
-  truncateLabel
+  truncateLabel,
+  enabled = true
 }) {
   const {
     defaultExpanded,
@@ -36,121 +31,51 @@ function ExpandableSidebarItem({
     collapseItem,
     isExpanded
   } = SidebarProvider.useSidebar();
-  const [closing, setClosing] = react.useState(false);
-  const expanded = react.useMemo(() => isExpanded(href), [href, isExpanded]);
+  const childrenId = react.useId();
+  const expanded = isExpanded(href);
+  const visible = expanded && !isSidebarCollapsed;
   react.useEffect(() => {
     if (defaultExpanded === null) return;
     if (defaultExpanded) expandItem(href);
     else collapseItem(href);
   }, [defaultExpanded, expandItem, collapseItem, href]);
-  const commitCollapse = react.useCallback(() => {
-    collapseItem(href);
-    setClosing(false);
-  }, [collapseItem, href]);
-  const handleAnimationEnd = react.useCallback(() => {
-    if (closing) commitCollapse();
-  }, [closing, commitCollapse]);
-  react.useEffect(() => {
-    if (!closing) return;
-    const timer = setTimeout(commitCollapse, 250);
-    return () => clearTimeout(timer);
-  }, [closing, commitCollapse]);
-  const toggleAccordion = react.useCallback(
-    (e, onlyExpand = false) => {
-      e == null ? void 0 : e.preventDefault();
-      e == null ? void 0 : e.stopPropagation();
-      resetExpandAll();
-      handleSidebarCollapseChange(false);
-      if (!expanded) {
-        expandItem(href);
-        return;
-      }
-      if (!isSidebarCollapsed && !onlyExpand) {
-        setClosing(true);
-      }
-    },
-    [expanded, expandItem, href, handleSidebarCollapseChange, isSidebarCollapsed, resetExpandAll]
-  );
-  const renderNavItem = (item, key) => {
-    var _a, _b;
-    if (isGroup(item)) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.group, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.groupLabel, children: item.label }),
-        (_a = item.children) == null ? void 0 : _a.map((child, idx) => renderNavItem(child, `${key}-${idx}`))
-      ] }, key);
-    }
-    if (isExpandable(item)) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ExpandableSidebarItem$1.ExpandableSidebarItem,
-        {
-          items: (_b = item.children) != null ? _b : [],
-          label: item.label,
-          icon: item.icon,
-          badge: item.badge,
-          href: item.href,
-          iconWidth: item.iconWidth,
-          component: item.component
-        },
-        key
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      SidebarItem.SidebarItem,
-      {
-        component: item.component,
-        label: item.label,
-        icon: item.icon,
-        badge: item.badge,
-        href: item.href,
-        iconWidth: item.iconWidth,
-        truncateLabel: item.truncateLabel
-      },
-      key
-    );
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.itemRow} ${expanded ? styles__default.default.itemRowExpanded : ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsxRuntime.jsx(
-        SidebarItemContent.SidebarItemContent,
-        {
-          headerStyle: expanded,
-          icon,
-          badge,
-          iconWidth,
-          label,
-          href,
-          disableActiveStyles: expanded,
-          suffixIcon: !isSidebarCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.ChevronDown,
-            {
-              className: `${styles__default.default.chevron} ${expanded ? styles__default.default.chevronExpanded : ""}`
-            }
-          ) : void 0,
-          truncateLabel
-        }
-      ) }),
-      !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toggleButton, children: /* @__PURE__ */ jsxRuntime.jsx(
-        Button.Button,
-        {
-          variant: "inline",
-          shape: "round",
-          className: styles__default.default.toggleButtonControl,
-          "aria-label": expanded ? `Collapse ${label}` : `Expand ${label}`,
-          "aria-expanded": expanded,
-          "aria-controls": `${href}-children`,
-          onClick: toggleAccordion
-        }
-      ) })
-    ] }),
-    expanded && !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
       {
-        id: `${href}-children`,
-        onAnimationEnd: handleAnimationEnd,
-        className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : ""}`,
-        children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
+        type: "button",
+        className: styles__default.default.toggleButton,
+        "aria-label": isSidebarCollapsed ? label : void 0,
+        "aria-expanded": visible,
+        "aria-controls": childrenId,
+        disabled: !enabled,
+        onClick: () => {
+          resetExpandAll();
+          handleSidebarCollapseChange(false);
+          if (visible) collapseItem(href);
+          else expandItem(href);
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SidebarItemContent.SidebarItemContent,
+          {
+            icon,
+            badge,
+            iconWidth,
+            label,
+            disableActiveStyles: true,
+            suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ChevronDown,
+              {
+                "aria-hidden": "true",
+                className: `${styles__default.default.chevron} ${visible ? styles__default.default.chevronExpanded : ""}`
+              }
+            ),
+            truncateLabel
+          }
+        )
       }
-    )
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { id: childrenId, hidden: !visible, className: styles__default.default.childrenContainer, children: visible ? children : null })
   ] });
 }
 

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.d.ts

@@ -1,14 +1,13 @@
 import React from 'react';
-import type { NavBarItem } from '../../../../components/nav-bar/NavBar';
 type ExpandableSidebarItemProps = {
-    items: NavBarItem[];
+    children: React.ReactNode;
     label: string;
-    component: React.ElementType;
-    icon: React.ReactNode;
+    icon?: React.ReactNode;
     badge?: number | string;
     href: string;
     iconWidth?: string | number;
     truncateLabel?: boolean;
+    enabled?: boolean;
 };
-export declare function ExpandableSidebarItem({ items, label, icon, badge, component: Component, href, iconWidth, truncateLabel, }: ExpandableSidebarItemProps): React.ReactNode;
+export declare function ExpandableSidebarItem({ children, label, icon, badge, href, iconWidth, truncateLabel, enabled, }: ExpandableSidebarItemProps): React.ReactNode;
 export {};

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -1,25 +1,20 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronDown } from 'lucide-react';
-import { useState, useMemo, useEffect, useCallback } from 'react';
+import { useId, useEffect } from 'react';
 import styles from './ExpandableSidebarItem.module.css';
-import { Button } from '../../../button/Button';
 import { useSidebar } from '../../providers/SidebarProvider';
-import { ExpandableSidebarItem as ExpandableSidebarItem$1 } from '../expandable-sidebar-item/ExpandableSidebarItem';
 import { SidebarItemContent } from '../sidebar-item-content/SidebarItemContent';
-import { SidebarItem } from '../SidebarItem';
 
-const isGroup = (item) => item.type === "group";
-const isExpandable = (item) => item.type === "expandable";
 function ExpandableSidebarItem({
-  items,
+  children,
   label,
   icon,
   badge,
-  component: Component,
   href,
   iconWidth,
-  truncateLabel
+  truncateLabel,
+  enabled = true
 }) {
   const {
     defaultExpanded,
@@ -30,121 +25,51 @@ function ExpandableSidebarItem({
     collapseItem,
     isExpanded
   } = useSidebar();
-  const [closing, setClosing] = useState(false);
-  const expanded = useMemo(() => isExpanded(href), [href, isExpanded]);
+  const childrenId = useId();
+  const expanded = isExpanded(href);
+  const visible = expanded && !isSidebarCollapsed;
   useEffect(() => {
     if (defaultExpanded === null) return;
     if (defaultExpanded) expandItem(href);
     else collapseItem(href);
   }, [defaultExpanded, expandItem, collapseItem, href]);
-  const commitCollapse = useCallback(() => {
-    collapseItem(href);
-    setClosing(false);
-  }, [collapseItem, href]);
-  const handleAnimationEnd = useCallback(() => {
-    if (closing) commitCollapse();
-  }, [closing, commitCollapse]);
-  useEffect(() => {
-    if (!closing) return;
-    const timer = setTimeout(commitCollapse, 250);
-    return () => clearTimeout(timer);
-  }, [closing, commitCollapse]);
-  const toggleAccordion = useCallback(
-    (e, onlyExpand = false) => {
-      e == null ? void 0 : e.preventDefault();
-      e == null ? void 0 : e.stopPropagation();
-      resetExpandAll();
-      handleSidebarCollapseChange(false);
-      if (!expanded) {
-        expandItem(href);
-        return;
-      }
-      if (!isSidebarCollapsed && !onlyExpand) {
-        setClosing(true);
-      }
-    },
-    [expanded, expandItem, href, handleSidebarCollapseChange, isSidebarCollapsed, resetExpandAll]
-  );
-  const renderNavItem = (item, key) => {
-    var _a, _b;
-    if (isGroup(item)) {
-      return /* @__PURE__ */ jsxs("div", { className: styles.group, children: [
-        /* @__PURE__ */ jsx("div", { className: styles.groupLabel, children: item.label }),
-        (_a = item.children) == null ? void 0 : _a.map((child, idx) => renderNavItem(child, `${key}-${idx}`))
-      ] }, key);
-    }
-    if (isExpandable(item)) {
-      return /* @__PURE__ */ jsx(
-        ExpandableSidebarItem$1,
-        {
-          items: (_b = item.children) != null ? _b : [],
-          label: item.label,
-          icon: item.icon,
-          badge: item.badge,
-          href: item.href,
-          iconWidth: item.iconWidth,
-          component: item.component
-        },
-        key
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      SidebarItem,
-      {
-        component: item.component,
-        label: item.label,
-        icon: item.icon,
-        badge: item.badge,
-        href: item.href,
-        iconWidth: item.iconWidth,
-        truncateLabel: item.truncateLabel
-      },
-      key
-    );
-  };
-  return /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: `${styles.itemRow} ${expanded ? styles.itemRowExpanded : ""}`, children: [
-      /* @__PURE__ */ jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsx(
-        SidebarItemContent,
-        {
-          headerStyle: expanded,
-          icon,
-          badge,
-          iconWidth,
-          label,
-          href,
-          disableActiveStyles: expanded,
-          suffixIcon: !isSidebarCollapsed ? /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`
-            }
-          ) : void 0,
-          truncateLabel
-        }
-      ) }),
-      !isSidebarCollapsed && /* @__PURE__ */ jsx("div", { className: styles.toggleButton, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "inline",
-          shape: "round",
-          className: styles.toggleButtonControl,
-          "aria-label": expanded ? `Collapse ${label}` : `Expand ${label}`,
-          "aria-expanded": expanded,
-          "aria-controls": `${href}-children`,
-          onClick: toggleAccordion
-        }
-      ) })
-    ] }),
-    expanded && !isSidebarCollapsed && /* @__PURE__ */ jsx(
-      "div",
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsx(
+      "button",
       {
-        id: `${href}-children`,
-        onAnimationEnd: handleAnimationEnd,
-        className: `${styles.childrenContainer} ${closing ? "animate--collapse" : ""}`,
-        children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
+        type: "button",
+        className: styles.toggleButton,
+        "aria-label": isSidebarCollapsed ? label : void 0,
+        "aria-expanded": visible,
+        "aria-controls": childrenId,
+        disabled: !enabled,
+        onClick: () => {
+          resetExpandAll();
+          handleSidebarCollapseChange(false);
+          if (visible) collapseItem(href);
+          else expandItem(href);
+        },
+        children: /* @__PURE__ */ jsx(
+          SidebarItemContent,
+          {
+            icon,
+            badge,
+            iconWidth,
+            label,
+            disableActiveStyles: true,
+            suffixIcon: /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                "aria-hidden": "true",
+                className: `${styles.chevron} ${visible ? styles.chevronExpanded : ""}`
+              }
+            ),
+            truncateLabel
+          }
+        )
       }
-    )
+    ),
+    /* @__PURE__ */ jsx("div", { id: childrenId, hidden: !visible, className: styles.childrenContainer, children: visible ? children : null })
   ] });
 }
 

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.module.css

@@ -1,45 +1,37 @@
 .container {
-  position: relative;
   display: flex;
   flex-direction: column;
-  border-radius: var(--border-radius-default);
 }
 
-.itemRow {
-  position: relative;
+.toggleButton {
   display: block;
+  inline-size: 100%;
+  padding: 0;
+  border: 0;
   border-radius: var(--border-radius-md);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
 }
 
-.toggleButton {
-  position: absolute;
-  inset-inline-end: var(--spacing-xs);
-  inset-block-start: 50%;
-  transform: translateY(-50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.container button {
-  min-block-size: 28px !important;
-  min-inline-size: 28px !important;
-  max-block-size: 28px !important;
-  max-inline-size: 28px !important;
-  border-color: transparent !important;
-  background-color: transparent !important;
+.toggleButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
 }
 
-.toggleButtonControl {
-  opacity: 0;
+.toggleButton:disabled {
+  color: var(--color-fg-subtle);
+  cursor: default;
 }
 
 .childrenContainer {
-  overflow: hidden;
+  padding-inline-start: var(--spacing-md);
 }
 
 .chevron {
-  transition: transform 0.3s ease;
+  transition: transform var(--transition-fast) var(--ease-standard);
 }
 
 .chevronExpanded {

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -164,7 +164,6 @@
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  gap: 2px;
   font-size: var(--font-size-sm);
 }
 

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.cjs

@@ -21,7 +21,6 @@ function SidebarItemContent({
   href,
   iconWidth,
   disableActiveStyles = false,
-  headerStyle,
   truncateLabel = false
 }) {
   const { activeLink, activeQuery, isSidebarCollapsed, wrapItemText } = SidebarProvider.useSidebar();
@@ -34,7 +33,7 @@ function SidebarItemContent({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
-      className: `${styles__default.default.container} ${!disableActiveStyles && activeLink === href ? styles__default.default.active : ""} ${isSidebarCollapsed ? styles__default.default.collapsed : ""} ${headerStyle ? styles__default.default.headerStyle : ""}`,
+      className: `${styles__default.default.container} ${!disableActiveStyles && href && activeLink === href ? styles__default.default.active : ""} ${isSidebarCollapsed ? styles__default.default.collapsed : ""}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.iconLabel, children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, style: iconStyle, children: icon }),

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.d.ts

@@ -8,7 +8,6 @@ export interface SidebarItemContentProps {
     href?: string;
     iconWidth?: string | number;
     disableActiveStyles?: boolean;
-    headerStyle?: boolean;
     truncateLabel?: boolean;
 }
-export declare function SidebarItemContent({ icon, label, badge, suffixIcon, href, iconWidth, disableActiveStyles, headerStyle, truncateLabel, }: SidebarItemContentProps): JSX.Element;
+export declare function SidebarItemContent({ icon, label, badge, suffixIcon, href, iconWidth, disableActiveStyles, truncateLabel, }: SidebarItemContentProps): JSX.Element;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.js

@@ -14,7 +14,6 @@ function SidebarItemContent({
   href,
   iconWidth,
   disableActiveStyles = false,
-  headerStyle,
   truncateLabel = false
 }) {
   const { activeLink, activeQuery, isSidebarCollapsed, wrapItemText } = useSidebar();
@@ -27,7 +26,7 @@ function SidebarItemContent({
   return /* @__PURE__ */ jsxs(
     "span",
     {
-      className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ""} ${isSidebarCollapsed ? styles.collapsed : ""} ${headerStyle ? styles.headerStyle : ""}`,
+      className: `${styles.container} ${!disableActiveStyles && href && activeLink === href ? styles.active : ""} ${isSidebarCollapsed ? styles.collapsed : ""}`,
       children: [
         /* @__PURE__ */ jsxs("span", { className: styles.iconLabel, children: [
           /* @__PURE__ */ jsx("span", { className: styles.icon, style: iconStyle, children: icon }),

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -4,6 +4,9 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-sm);
+  /* Transparent borders separate the backgrounds while remaining part of the hit area. */
+  border-block: calc(var(--spacing-xxs) / 4) solid transparent;
+  background-clip: padding-box;
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-xs);
   text-decoration: none;
@@ -19,12 +22,11 @@
 
 .container.collapsed {
   justify-content: center;
-  padding: var(--spacing-xs);
   border-radius: 0;
 }
 
 .active {
-  background: var(--color-bg-selected);
+  background-color: var(--color-bg-selected);
 }
 
 .active::before {
@@ -111,14 +113,6 @@
   box-shadow: var(--focus-ring);
 }
 
-.headerStyle .label {
-  font-weight: 500;
-  color: var(--color-fg-subtle);
-  font-size: var(--font-size-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
 .label {
   min-inline-size: 0;
   flex: 1 1 auto;

package/dist/components/sidebar/components/sidebar-items/SidebarItems.cjs

@@ -26,27 +26,17 @@ function SidebarItems({ activeLink }) {
       ] }, key);
     }
     if (item.type === "expandable") {
-      const {
-        component: Component2,
-        label: label2,
-        icon: icon2,
-        badge: badge2,
-        children,
-        href: href2,
-        iconWidth: iconWidth2,
-        truncateLabel: truncateLabel2
-      } = item;
       return /* @__PURE__ */ jsxRuntime.jsx(
         ExpandableSidebarItem.ExpandableSidebarItem,
         {
-          items: children,
-          label: label2,
-          icon: icon2,
-          badge: badge2,
-          href: href2,
-          iconWidth: iconWidth2,
-          truncateLabel: truncateLabel2,
-          component: Component2
+          label: item.label,
+          icon: item.icon,
+          badge: item.badge,
+          href: item.href,
+          iconWidth: item.iconWidth,
+          truncateLabel: item.truncateLabel,
+          enabled: item.enabled,
+          children: item.children.map((child, idx) => renderItem(child, `${key}-c${idx}`))
         },
         key
       );
@@ -61,7 +51,9 @@ function SidebarItems({ activeLink }) {
         badge,
         href,
         iconWidth,
-        truncateLabel
+        truncateLabel,
+        enabled: item.enabled,
+        external: item.external
       },
       key
     );

package/dist/components/sidebar/components/sidebar-items/SidebarItems.js

@@ -20,27 +20,17 @@ function SidebarItems({ activeLink }) {
       ] }, key);
     }
     if (item.type === "expandable") {
-      const {
-        component: Component2,
-        label: label2,
-        icon: icon2,
-        badge: badge2,
-        children,
-        href: href2,
-        iconWidth: iconWidth2,
-        truncateLabel: truncateLabel2
-      } = item;
       return /* @__PURE__ */ jsx(
         ExpandableSidebarItem,
         {
-          items: children,
-          label: label2,
-          icon: icon2,
-          badge: badge2,
-          href: href2,
-          iconWidth: iconWidth2,
-          truncateLabel: truncateLabel2,
-          component: Component2
+          label: item.label,
+          icon: item.icon,
+          badge: item.badge,
+          href: item.href,
+          iconWidth: item.iconWidth,
+          truncateLabel: item.truncateLabel,
+          enabled: item.enabled,
+          children: item.children.map((child, idx) => renderItem(child, `${key}-c${idx}`))
         },
         key
       );
@@ -55,7 +45,9 @@ function SidebarItems({ activeLink }) {
         badge,
         href,
         iconWidth,
-        truncateLabel
+        truncateLabel,
+        enabled: item.enabled,
+        external: item.external
       },
       key
     );

package/dist/components/sidebar/components/sidebar-items/SidebarItems.module.css

@@ -1,7 +1,6 @@
 .group {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xxs);
   margin-top: var(--spacing-xs);
 }
 

package/dist/components/sidebar/providers/SidebarProvider.cjs

@@ -17,10 +17,10 @@ const findExpandableParentChain = (targetHref, items) => {
   const dfs = (nodes, parentExpandables) => {
     for (const node of nodes) {
       const nodeHref = hasHref(node) ? normalizeHref(node.href) : null;
-      const isExpandableParent = hasChildren(node) && hasHref(node);
+      const isExpandableParent = node.type === "expandable";
       const nextParents = isExpandableParent && nodeHref ? [...parentExpandables, nodeHref] : parentExpandables;
-      if (nodeHref === target) {
-        return isExpandableParent ? nextParents : parentExpandables;
+      if (node.type !== "expandable" && nodeHref === target) {
+        return parentExpandables;
       }
       if (hasChildren(node)) {
         const found = dfs(node.children, nextParents);
@@ -66,6 +66,7 @@ function SidebarProvider({
   children,
   items,
   initialQuery,
+  initialActiveLink = "",
   initialCollapsed = false,
   initialSidebarCollapsed
 }) {
@@ -73,8 +74,10 @@ function SidebarProvider({
   const [activeQuery, setActiveQuery] = react.useState(initialQuery != null ? initialQuery : "");
   const [wrapItemText, setWrapItemText] = react.useState(false);
   const [areItemsCollapsed, setItemsCollapsed] = react.useState(initialCollapsed);
-  const [activeHref, setActiveHref] = react.useState("");
-  const [expandedItems, setExpandedItems] = react.useState(/* @__PURE__ */ new Set());
+  const [activeHref, setActiveHref] = react.useState(initialActiveLink);
+  const [expandedItems, setExpandedItems] = react.useState(
+    () => new Set(findExpandableParentChain(initialActiveLink, items))
+  );
   const itemsRef = react.useRef(items);
   react.useEffect(() => {
     itemsRef.current = items;
@@ -121,8 +124,7 @@ function SidebarProvider({
   );
   react.useEffect(() => {
     if (!activeHref) return;
-    const currentItems = itemsRef.current;
-    const parents = findExpandableParentChain(activeHref, currentItems);
+    const parents = findExpandableParentChain(activeHref, itemsRef.current);
     if (parents.length === 0) return;
     setExpandedItems((prev) => {
       let changed = false;

package/dist/components/sidebar/providers/SidebarProvider.d.ts

@@ -24,11 +24,12 @@ export type SidebarContextValue = {
 type SidebarProviderProps = {
     children: React.ReactNode;
     items: NavBarItem[];
+    initialActiveLink?: string;
     initialQuery?: string | null;
     initialCollapsed?: boolean;
     initialCollapseChildren?: boolean;
     initialSidebarCollapsed?: boolean;
 };
-export declare function SidebarProvider({ children, items, initialQuery, initialCollapsed, initialSidebarCollapsed, }: SidebarProviderProps): JSX.Element;
+export declare function SidebarProvider({ children, items, initialQuery, initialActiveLink, initialCollapsed, initialSidebarCollapsed, }: SidebarProviderProps): JSX.Element;
 export declare function useSidebar(): SidebarContextValue;
 export {};

package/dist/components/sidebar/providers/SidebarProvider.js

@@ -15,10 +15,10 @@ const findExpandableParentChain = (targetHref, items) => {
   const dfs = (nodes, parentExpandables) => {
     for (const node of nodes) {
       const nodeHref = hasHref(node) ? normalizeHref(node.href) : null;
-      const isExpandableParent = hasChildren(node) && hasHref(node);
+      const isExpandableParent = node.type === "expandable";
       const nextParents = isExpandableParent && nodeHref ? [...parentExpandables, nodeHref] : parentExpandables;
-      if (nodeHref === target) {
-        return isExpandableParent ? nextParents : parentExpandables;
+      if (node.type !== "expandable" && nodeHref === target) {
+        return parentExpandables;
       }
       if (hasChildren(node)) {
         const found = dfs(node.children, nextParents);
@@ -64,6 +64,7 @@ function SidebarProvider({
   children,
   items,
   initialQuery,
+  initialActiveLink = "",
   initialCollapsed = false,
   initialSidebarCollapsed
 }) {
@@ -71,8 +72,10 @@ function SidebarProvider({
   const [activeQuery, setActiveQuery] = useState(initialQuery != null ? initialQuery : "");
   const [wrapItemText, setWrapItemText] = useState(false);
   const [areItemsCollapsed, setItemsCollapsed] = useState(initialCollapsed);
-  const [activeHref, setActiveHref] = useState("");
-  const [expandedItems, setExpandedItems] = useState(/* @__PURE__ */ new Set());
+  const [activeHref, setActiveHref] = useState(initialActiveLink);
+  const [expandedItems, setExpandedItems] = useState(
+    () => new Set(findExpandableParentChain(initialActiveLink, items))
+  );
   const itemsRef = useRef(items);
   useEffect(() => {
     itemsRef.current = items;
@@ -119,8 +122,7 @@ function SidebarProvider({
   );
   useEffect(() => {
     if (!activeHref) return;
-    const currentItems = itemsRef.current;
-    const parents = findExpandableParentChain(activeHref, currentItems);
+    const parents = findExpandableParentChain(activeHref, itemsRef.current);
     if (parents.length === 0) return;
     setExpandedItems((prev) => {
       let changed = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.210",
+  "version": "0.0.211",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",