@dbcdk/react-components 0.0.210 → 0.0.212

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

@@ -5,27 +5,23 @@ 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
+  depth = 0,
+  truncateLabel,
+  enabled = true
 }) {
   const {
     defaultExpanded,
@@ -36,121 +32,52 @@ 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,
+            depth,
+            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,14 @@
 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;
+    depth?: number;
     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, depth, truncateLabel, enabled, }: ExpandableSidebarItemProps): React.ReactNode;
 export {};

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

@@ -1,25 +1,21 @@
 '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
+  depth = 0,
+  truncateLabel,
+  enabled = true
 }) {
   const {
     defaultExpanded,
@@ -30,121 +26,52 @@ 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,
+            depth,
+            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;
+  --sidebar-empty-icon-display: none;
 }
 
 .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

@@ -15,6 +15,46 @@
     inline-size var(--transition-fast) var(--ease-standard);
 }
 
+/* Keep native scrolling visible without competing with navigation content. */
+:is(.container, .content, .links) {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-subtle) transparent;
+}
+
+:is(.container, .content, .links):is(:hover, :focus-within) {
+  scrollbar-color: var(--color-border-default) transparent;
+}
+
+/* Non-auto standard properties override WebKit thumb styling in Chromium. */
+@supports selector(::-webkit-scrollbar) {
+  :is(.container, .content, .links),
+  :is(.container, .content, .links):is(:hover, :focus-within) {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+}
+
+:is(.container, .content, .links)::-webkit-scrollbar {
+  width: calc(var(--spacing-xxs) + 2 * var(--border-width-thin));
+  height: calc(var(--spacing-xxs) + 2 * var(--border-width-thin));
+}
+
+:is(.container, .content, .links)::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+:is(.container, .content, .links)::-webkit-scrollbar-thumb {
+  background-color: var(--color-border-subtle);
+  background-clip: padding-box;
+  border: var(--border-width-thin) solid transparent;
+  border-radius: var(--border-radius-default);
+}
+
+:is(.container, .content, .links)::-webkit-scrollbar-thumb:hover,
+:is(.container, .content, .links):focus-within::-webkit-scrollbar-thumb {
+  background-color: var(--color-border-default);
+}
+
 .sidebarIcon {
   inline-size: var(--icon-size-sm);
   block-size: var(--icon-size-sm);
@@ -164,7 +204,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

@@ -20,8 +20,8 @@ function SidebarItemContent({
   suffixIcon,
   href,
   iconWidth,
+  depth = 0,
   disableActiveStyles = false,
-  headerStyle,
   truncateLabel = false
 }) {
   const { activeLink, activeQuery, isSidebarCollapsed, wrapItemText } = SidebarProvider.useSidebar();
@@ -34,7 +34,8 @@ 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 : ""}`,
+      style: { "--sidebar-item-depth": isSidebarCollapsed ? 0 : depth },
+      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

@@ -6,9 +6,9 @@ export interface SidebarItemContentProps {
     badge?: number | string;
     suffixIcon?: React.ReactNode;
     href?: string;
+    depth?: number;
     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, depth, disableActiveStyles, truncateLabel, }: SidebarItemContentProps): JSX.Element;

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

@@ -13,8 +13,8 @@ function SidebarItemContent({
   suffixIcon,
   href,
   iconWidth,
+  depth = 0,
   disableActiveStyles = false,
-  headerStyle,
   truncateLabel = false
 }) {
   const { activeLink, activeQuery, isSidebarCollapsed, wrapItemText } = useSidebar();
@@ -27,7 +27,8 @@ function SidebarItemContent({
   return /* @__PURE__ */ jsxs(
     "span",
     {
-      className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ""} ${isSidebarCollapsed ? styles.collapsed : ""} ${headerStyle ? styles.headerStyle : ""}`,
+      style: { "--sidebar-item-depth": isSidebarCollapsed ? 0 : depth },
+      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,8 +4,15 @@
   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);
+  /* Indent content, keeping every row's background and hit area at full width. */
+  padding-inline-start: calc(
+    var(--spacing-xs) + var(--sidebar-item-depth, 0) * (var(--icon-size-sm) + var(--spacing-sm))
+  );
   text-decoration: none;
   color: var(--color-fg-muted);
   cursor: pointer;
@@ -19,12 +26,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 {
@@ -80,6 +86,11 @@
   min-inline-size: var(--sidebar-item-icon-width, var(--icon-size-sm));
 }
 
+/* Nested rows do not reserve a second icon gutter when they have no icon. */
+.icon:empty {
+  display: var(--sidebar-empty-icon-display, flex);
+}
+
 .icon svg,
 .suffixIcon svg {
   inline-size: var(--icon-size-sm);
@@ -111,14 +122,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;