@dbcdk/react-components 0.0.9 → 0.0.12

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

@@ -1,54 +1,66 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown } from 'lucide-react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import styles from './ExpandableSidebarItem.module.css';
 import { Button } from '../../../button/Button';
 import { useSidebar } from '../../providers/SidebarProvider';
+import { ExpandableSidebarItem as ExpandableChild } 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';
 export function ExpandableSidebarItem({ items, label, icon, component: Component, href, }) {
-    const { defaultExpanded, resetExpandAll, isSidebarCollapsed, handleSidebarCollapseChange, expandedItems, } = useSidebar();
-    const [expanded, setExpanded] = useState(false);
+    const { defaultExpanded, resetExpandAll, isSidebarCollapsed, handleSidebarCollapseChange, expandItem, collapseItem, isExpanded, } = useSidebar();
+    // Local-only state for animation coordination
     const [closing, setClosing] = useState(false);
     const [ready, setReady] = useState(false);
     useEffect(() => {
         setReady(true);
     }, []);
+    // Single source of truth: expanded comes from provider state
+    const expanded = useMemo(() => isExpanded(href), [href, isExpanded]);
+    // Expand-all behavior (e.g. search)
     useEffect(() => {
-        if (expandedItems.has(href)) {
-            setExpanded(true);
-        }
-    }, [expandedItems, href]);
-    useEffect(() => {
-        if (defaultExpanded === null) {
+        if (defaultExpanded === null)
             return;
-        }
-        setExpanded(defaultExpanded);
-    }, [defaultExpanded]);
+        if (defaultExpanded)
+            expandItem(href);
+        else
+            collapseItem(href);
+    }, [defaultExpanded, expandItem, collapseItem, href]);
     const handleAnimationEnd = useCallback(() => {
-        if (ready) {
-            setExpanded(!closing);
+        if (!ready)
+            return;
+        if (closing) {
+            // After collapse animation, commit closed state
+            collapseItem(href);
             setClosing(false);
         }
-    }, [closing, ready]);
+    }, [closing, ready, collapseItem, href]);
     const toggleAccordion = useCallback((e, onlyExpand = false) => {
         e === null || e === void 0 ? void 0 : e.preventDefault();
         e === null || e === void 0 ? void 0 : e.stopPropagation();
         resetExpandAll();
-        handleSidebarCollapseChange === null || handleSidebarCollapseChange === void 0 ? void 0 : handleSidebarCollapseChange(false);
+        handleSidebarCollapseChange(false);
         if (!expanded) {
-            setExpanded(true);
+            expandItem(href);
             return;
         }
         if (!isSidebarCollapsed && !onlyExpand) {
+            // Start collapse animation; state commit happens onAnimationEnd
             setClosing(true);
         }
-    }, [expanded, handleSidebarCollapseChange, isSidebarCollapsed, resetExpandAll]);
-    if (!items)
-        return null;
-    if (!Component) {
-        return null;
-    }
-    return (_jsxs("div", { className: `${styles.container} ${expanded ? styles.expanded : ''}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { icon: icon, label: label, href: href, disableActiveStyles: expanded, suffixIcon: isSidebarCollapsed ? null : (_jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: _jsx(ChevronDown, { className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ''}` }) })) }) }), expanded && !isSidebarCollapsed && (_jsx("div", { onAnimationEnd: handleAnimationEnd, className: `${styles.childrenContainer} ${closing ? 'animate--collapse' : ''} ${expanded ? 'animate--expand' : 'visually-hidden'}`, children: items.map(({ component: Component, label, icon, href }, id) => (_jsx(SidebarItem, { component: Component, label: label, icon: icon, href: href }, id))) }))] }));
+    }, [expanded, expandItem, href, handleSidebarCollapseChange, isSidebarCollapsed, resetExpandAll]);
+    const renderNavItem = (item, key) => {
+        var _a, _b;
+        if (isGroup(item)) {
+            return (_jsxs("div", { className: styles.group, children: [_jsx("div", { className: styles.groupLabel, children: item.label }), (_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child, idx) => renderNavItem(child, `${key}-${idx}`))] }, key));
+        }
+        if (isExpandable(item)) {
+            return (_jsx(ExpandableChild, { items: (_b = item.children) !== null && _b !== void 0 ? _b : [], label: item.label, icon: item.icon, href: item.href, component: item.component }, key));
+        }
+        return (_jsx(SidebarItem, { component: item.component, label: item.label, icon: item.icon, href: item.href }, key));
+    };
+    return (_jsxs("div", { className: `${styles.container} ${expanded ? styles.expanded : ''}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { icon: icon, label: label, href: href, disableActiveStyles: expanded, suffixIcon: isSidebarCollapsed ? null : (_jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: _jsx(ChevronDown, { className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ''}` }) })) }) }), expanded && !isSidebarCollapsed && (_jsx("div", { onAnimationEnd: handleAnimationEnd, className: `${styles.childrenContainer} ${closing ? 'animate--collapse' : ''} ${expanded ? 'animate--expand' : 'visually-hidden'}`, children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`)) }))] }));
 }

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

@@ -1,6 +1,3 @@
-.button {
-}
-
 .container {
   position: relative;
   display: flex;

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.d.ts

@@ -5,5 +5,7 @@ interface SidebarContainerProps {
     productLogo?: ReactNode;
     activeLink?: string;
 }
-export declare function SidebarContainer({ logo, productName, productLogo, activeLink, }: SidebarContainerProps): JSX.Element;
+export declare function SidebarContainer({ logo, // DBC Digital (company)
+productLogo, // DataIO (product)
+activeLink, }: SidebarContainerProps): JSX.Element;
 export {};

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft } from 'lucide-react';
 import { Logo } from '../../../../assets/logo';
 import { Button } from '../../../../components/button/Button';
-import { Headline } from '../../../../components/headline/Headline';
 import { SidebarItems } from '../../../../components/sidebar/components/sidebar-items/SidebarItems';
 import SidenavFiltering from '../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering';
 import { useSidebar } from '../../../../components/sidebar/providers/SidebarProvider';
 import styles from './SidebarContainer.module.css';
-export function SidebarContainer({ logo, productName, productLogo, activeLink, }) {
+export function SidebarContainer({ logo, // DBC Digital (company)
+productLogo, // DataIO (product)
+activeLink, }) {
     const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
-    return (_jsxs("div", { className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`, children: [_jsxs("div", { className: styles.header, children: [_jsxs("span", { className: styles.logoContainer, children: [_jsx("div", { style: { textAlign: isSidebarCollapsed ? 'center' : 'right' }, children: _jsx(Button, { size: "sm", variant: "inline", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) }) }), _jsx("div", { className: styles.logo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) })] }), productName && _jsx(Headline, { disableMargin: true, children: productName }), productLogo && _jsx("div", { className: styles.productLogo, children: productLogo })] }), _jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, {}) }), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), _jsx("div", { className: styles.footer })] }));
+    return (_jsxs("div", { className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''}`, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: styles.productHeader, children: [_jsx("div", { className: styles.productLogo, children: productLogo }), _jsx(Button, { size: "md", variant: "inline", "aria-label": "Collapse sidebar", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) })] }) }), _jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, {}) }), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), _jsx("div", { className: styles.footer, children: _jsx("div", { className: styles.companyLogo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) }) })] }));
 }

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

@@ -4,152 +4,182 @@
   overflow: auto;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-lg);
+  gap: var(--spacing-md);
   width: var(--sidebar-width);
   inline-size: var(--sidebar-width);
   box-sizing: border-box;
   border-inline-end: var(--border-width-thin) solid var(--color-border-default);
-  padding-bottom: var(--spacing-lg);
+
   transition:
     width var(--transition-fast) var(--ease-standard),
     inline-size var(--transition-fast) var(--ease-standard);
 }
 
+/* Collapsed state */
 .container.collapsed {
   width: var(--component-size-lg);
   inline-size: var(--component-size-lg);
   box-sizing: content-box;
   gap: var(--spacing-sm);
-  .content {
-    gap: var(--spacing-2xs);
-  }
 }
 
-.container .logoContainer button,
-.container .filter button {
-  border-radius: 0;
-  min-height: var(--component-size-md);
-  width: 100%;
-  padding: var(--spacing-xs);
-  color: var(--color-fg-muted);
+/* Global links / focus */
+.container a {
+  text-decoration: none;
+  color: inherit;
 }
 
-.container:not(.collapsed) .links,
-.container:not(.collapsed) .filter {
-  padding-inline: var(--spacing-sm);
+.container a:focus-visible,
+.container button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
 }
 
-.container .logoContainer {
-  padding-top: var(--spacing-xs);
-  min-block-size: 60px;
+/* HEADER (product + collapse) */
+.header {
+  flex: 0 0 auto;
   border-bottom: 1px solid var(--color-border-default);
-  padding-bottom: var(--spacing-xxs);
+  padding: 0 var(--spacing-sm);
+  min-block-size: 60px;
+  display: flex;
+  justify-content: space-between;
 }
 
-.container.collapsed .logoContainer {
+.productHeader {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  flex-grow: 1;
 }
 
-.container:not(.collapsed) .logoContainer {
+/* Product logo container */
+.productLogo {
   display: flex;
   align-items: center;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-  padding-right: var(--spacing-xxs);
+  max-inline-size: 100%;
+  min-width: 0;
 }
 
-.container a {
-  text-decoration: none;
-  color: inherit;
+/* Keep product logo visible in expanded state */
+.productLogo img,
+.productLogo svg {
+  inline-size: 50px;
+  max-inline-size: 100%;
+  block-size: auto;
 }
 
-.container .links button {
-  background: none;
-  border: 0;
-  font-size: inherit;
-  color: inherit;
-  display: inline-flex;
-  padding: 0;
+/* Collapse button */
+.productHeader button {
+  border-radius: 0;
+  min-height: var(--component-size-md);
+  padding: var(--spacing-xs);
+  color: var(--color-fg-muted);
+  flex: 0 0 auto;
 }
 
-.container a:focus-visible,
-.container button:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
+/* Rotate icon when collapsed */
+.collapsedIcon {
+  transform: rotate(180deg);
+  transition: transform 0.3s ease;
 }
 
+/* CONTENT */
+.content {
+  overflow: auto;
+  flex: 1 1 auto;
+  overflow-y: visible;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  gap: 5px;
+}
+
+.container:not(.collapsed) .content {
+  gap: var(--spacing-md);
+}
+
+/* FILTER */
+.filter button {
+  border-radius: 0;
+  min-height: var(--component-size-md);
+  width: 100%;
+  padding: var(--spacing-xs);
+  color: var(--color-fg-muted);
+}
+
+.container:not(.collapsed) .filter {
+  padding-inline: var(--spacing-xs);
+}
+
+/* LINKS */
 .links {
   overflow: auto;
   display: flex;
   flex-grow: 1;
-  overflow: auto;
   flex-direction: column;
   gap: 2px;
   font-size: var(--font-size-sm);
 }
 
 .container:not(.collapsed) .links {
-  padding-inline: var(--spacing-sm);
+  padding-inline: var(--spacing-xs);
 }
 
-.header {
+.container .links button {
+  background: none;
+  border: 0;
+  font-size: inherit;
+  color: inherit;
+  display: inline-flex;
+  padding: 0;
+}
+
+/* FOOTER (company logo) */
+.footer {
   flex: 0 0 auto;
+  border-top: 1px solid var(--color-border-default);
+  padding: var(--spacing-sm);
   display: flex;
-  flex-direction: column;
+  justify-content: center;
 }
 
-.container:not(.collapsed) .header {
-  gap: var(--spacing-sm);
+.companyLogo {
+  opacity: 0.6;
 }
 
-.container:not(.collapsed) .logo {
-  padding: 0 var(--spacing-sm);
+.companyLogo svg {
+  width: 80px;
+  height: auto;
+  display: block;
 }
-.container.collapsed .logo {
+
+/* Hide company logo in collapsed state */
+.container.collapsed .companyLogo {
   display: none;
 }
 
-.logo img,
-.logo svg {
-  inline-size: 50px;
-  max-inline-size: 100%;
-  block-size: auto;
+.logo {
+  display: none;
 }
 
+/* === Collapsed header behavior ===
+   Hide product logo entirely so the collapse button can truly center. */
 .container.collapsed .productLogo {
   display: none;
 }
-.productLogo {
-  max-inline-size: 100%;
-  padding: 0 var(--spacing-sm);
-}
 
-.productLogo svg {
-  max-inline-size: 100%;
-  block-size: auto;
+/* Center the collapse button in collapsed state */
+.container.collapsed .productHeader {
+  justify-content: center;
+  gap: 0;
 }
 
-.collapsedIcon {
-  transform: rotate(180deg);
-  transition: transform 0.3s ease;
-}
-.content {
-  overflow: auto;
-  flex: 1 1 auto;
-  overflow-y: visible;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  gap: 5px;
-  &:not(.collapsed) {
-    gap: var(--spacing-md);
-  }
+.container.collapsed .header {
+  padding: 0;
 }
 
-.footer {
-  flex: 0 0 auto;
+.container.collapsed .productHeader button {
+  margin-inline: auto;
 }

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

@@ -1,13 +1,26 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
+import styles from './SidebarItems.module.css';
 import { useSidebar } from '../../providers/SidebarProvider';
 import { ExpandableSidebarItem } from '../expandable-sidebar-item/ExpandableSidebarItem';
 import { SidebarItem } from '../SidebarItem';
 export function SidebarItems({ activeLink }) {
-    const { filteredItems, setActiveLink } = useSidebar();
+    const { filteredItems, setActiveLink, isSidebarCollapsed } = useSidebar();
     useEffect(() => {
         setActiveLink(activeLink !== null && activeLink !== void 0 ? activeLink : '');
     }, [activeLink, setActiveLink]);
-    return (_jsx(_Fragment, { children: filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map(({ component: Component, label, icon, children, href }, id) => (children === null || children === void 0 ? void 0 : children.length) ? (_jsx(ExpandableSidebarItem, { items: children, label: label, icon: icon, href: href, component: Component }, label)) : (_jsx(SidebarItem, { component: Component, label: label, icon: icon, href: href }, id))) }));
+    const renderItem = (item, key) => {
+        var _a, _b;
+        if (item.type === 'group') {
+            return isSidebarCollapsed ? ((_a = item.children) === null || _a === void 0 ? void 0 : _a.map((child, idx) => renderItem(child, `${key}-c${idx}`))) : (_jsxs("div", { className: styles.group, children: [_jsx("div", { className: styles.groupLabel, children: item.label }), (_b = item.children) === null || _b === void 0 ? void 0 : _b.map((child, idx) => renderItem(child, `${key}-c${idx}`))] }, key));
+        }
+        if (item.type === 'expandable') {
+            const { component: Component, label, icon, children, href } = item;
+            return (_jsx(ExpandableSidebarItem, { items: children, label: label, icon: icon, href: href, component: Component }, key));
+        }
+        const { component: Component, label, icon, href } = item;
+        return _jsx(SidebarItem, { component: Component, label: label, icon: icon, href: href }, key);
+    };
+    return filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map((item, idx) => renderItem(item, `nav-${idx}-${item.label}`));
 }

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

@@ -0,0 +1,20 @@
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xxs);
+  margin-top: var(--spacing-xs);
+}
+
+.group:first-child {
+  margin-top: 0;
+}
+
+.groupLabel {
+  padding: 0 var(--spacing-xs);
+  margin: var(--spacing-xs) 0;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-fg-subtle);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { NavBarItem } from '../../../components/nav-bar/NavBar';
 export type SidebarContextValue = {
     defaultExpanded: boolean | null;
-    expandedItems: Set<string | undefined>;
+    expandedItems: Set<string>;
     resetExpandAll: () => void;
     activeQuery: string;
     areItemsCollapsed: boolean;
@@ -13,6 +13,9 @@ export type SidebarContextValue = {
     filteredItems?: NavBarItem[];
     activeLink?: string;
     setActiveLink: (href: string) => void;
+    expandItem: (href: string) => void;
+    collapseItem: (href: string) => void;
+    isExpanded: (href: string) => boolean;
     isSidebarCollapsed: boolean;
     handleSidebarCollapseChange: (collapsed: boolean) => void;
 };