@dbcdk/react-components 0.0.9 → 0.0.10

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

@@ -10,13 +10,8 @@ interface HeadlineProps extends React.AriaAttributes {
     subHeadline?: string | JSX.Element;
     addition?: React.ReactNode;
     icon?: React.ReactNode;
-    /**
-     * Optional visual tone override:
-     * - dark: force normal foreground colours
-     * - light: force on-strong/light text
-     * If omitted, the headline simply inherits its colour from its parent.
-     */
+    allowWrap?: boolean;
     tone?: HeadlineTone;
 }
-export declare function Headline({ size, marker, disableMargin, children, severity, weight, subHeadline, addition, icon, tone, }: PropsWithChildren<HeadlineProps>): React.ReactNode;
+export declare function Headline({ size, marker, disableMargin, children, severity, weight, subHeadline, addition, icon, tone, allowWrap, }: PropsWithChildren<HeadlineProps>): React.ReactNode;
 export {};

package/dist/components/headline/Headline.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import styles from './Headline.module.css';
 import { SeverityBgColor } from '../../constants/severity';
 import { Icon } from '../icon/Icon';
-export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subHeadline, addition, icon, tone, }) {
+export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subHeadline, addition, icon, tone, allowWrap = true, }) {
     const Tag = `h${size}`;
     const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : '']
         .filter(Boolean)
@@ -15,8 +15,11 @@ export function Headline({ size = 2, marker, disableMargin, children, severity,
     ]
         .filter(Boolean)
         .join(' ');
+    const textClassName = [styles.text, allowWrap ? styles.wrap : styles.truncate]
+        .filter(Boolean)
+        .join(' ');
     return (_jsxs(_Fragment, { children: [_jsxs("div", { className: containerClassName, children: [_jsxs(Tag, { style: {
                             '--font-weight': weight,
                             '--marker-color': severity ? SeverityBgColor[severity] : undefined,
-                        }, className: headlineClassName, children: [icon || (severity && !marker) ? _jsx(Icon, { customIcon: icon, severity: severity }) : null, children] }), addition] }), subHeadline && _jsx("div", { className: styles.subHeadline, children: subHeadline })] }));
+                        }, className: headlineClassName, children: [icon || (severity && !marker) ? (_jsx("span", { className: styles.icon, children: _jsx(Icon, { customIcon: icon, severity: severity }) })) : null, _jsx("span", { className: textClassName, children: children })] }), addition] }), subHeadline && _jsx("div", { className: styles.subHeadline, children: subHeadline })] }));
 }

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

@@ -3,6 +3,7 @@
   align-items: center;
   gap: var(--spacing-lg);
   flex-wrap: wrap;
+  max-width: 100%;
 }
 
 /* Base headline: inherit colour from parent surface */
@@ -18,8 +19,6 @@
   transition: color var(--transition-fast) var(--ease-standard);
 }
 
-/* Optional tone overrides for special cases (hero sections, etc.) */
-
 .tone-dark .headline {
   color: var(--color-fg-default);
 }
@@ -58,3 +57,63 @@
   margin-block-start: calc(var(--spacing-2xs) * -1);
   line-height: var(--line-height-normal);
 }
+
+.headline {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-weight: var(--font-weight, var(--font-weight-bold));
+  letter-spacing: var(--letter-spacing-tight);
+  color: inherit;
+  line-height: var(--line-height-tight);
+  transition: color var(--transition-fast) var(--ease-standard);
+
+  /* Needed so truncation works inside flex parents */
+  min-width: 0;
+}
+
+/* Truncated variant (single line with ellipsis) */
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.headline {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-weight: var(--font-weight, var(--font-weight-bold));
+  letter-spacing: var(--letter-spacing-tight);
+  color: inherit;
+  line-height: var(--line-height-tight);
+  transition: color var(--transition-fast) var(--ease-standard);
+
+  /* helps inside flex parents */
+  min-width: 0;
+}
+
+.icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* text wrapper must be the shrinkable element */
+.text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wrap {
+  white-space: normal;
+  overflow: visible;
+}

package/dist/components/hyperlink/Hyperlink.d.ts

@@ -4,6 +4,7 @@ interface HyperlinkProps {
     className?: string;
     icon?: React.ReactNode;
     disableIcon?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
 }
 export declare function Hyperlink({ component, icon }: HyperlinkProps): React.ReactElement;
 export {};

package/dist/components/hyperlink/Hyperlink.js

@@ -6,6 +6,10 @@ export function Hyperlink({ component, icon }) {
     return React.cloneElement(component, {
         ...originalProps,
         className: styles.link,
-        onClick: (e) => e.stopPropagation(),
+        onClick: (e) => {
+            var _a;
+            e.stopPropagation();
+            (_a = originalProps === null || originalProps === void 0 ? void 0 : originalProps.onClick) === null || _a === void 0 ? void 0 : _a.call(originalProps, e);
+        },
     }, _jsxs(_Fragment, { children: [_jsx("span", { className: styles.content, children: originalProps.children }), icon && _jsx("span", { className: styles.icon, children: icon })] }));
 }

package/dist/components/icon/Icon.module.css

@@ -4,6 +4,7 @@
   vertical-align: middle;
   gap: var(--spacing-xxs);
   color: var(--color-fg-subtle);
+  font-size: var(--font-size-sm);
 }
 
 .icon {

package/dist/components/interval-select/IntervalSelect.js

@@ -10,7 +10,7 @@ import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTr
 import { Popover } from '../../components/popover/Popover';
 export function IntervalSelect({ 
 // InputContainer props
-label, error, helpText, orientation = 'vertical', labelWidth = '120px', fullWidth = true, required, 
+label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, 
 // tooltip
 tooltip, tooltipPlacement = 'right', 
 // IntervalSelect props

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

@@ -1,18 +1,36 @@
 import type { ElementType, ReactNode, JSX } from 'react';
-export type NavBarItem = {
-    component?: ElementType<any>;
+export type NavBarItem = NavBarLinkItem | NavBarExpandableItem | NavBarGroupItem;
+type NavBarBase = {
     label: string;
     icon?: ReactNode;
+    enabled?: boolean;
+    tags?: string[];
+};
+/** Simple clickable item */
+export type NavBarLinkItem = NavBarBase & {
+    type?: 'item';
+    href: string;
+    component?: ElementType<any>;
     active?: boolean;
     external?: boolean;
-    enabled?: boolean;
+};
+/** Clickable + expandable item (has href AND children) */
+export type NavBarExpandableItem = NavBarBase & {
+    type: 'expandable';
     href: string;
-    tags?: string[];
-    children?: NavBarItem[];
+    component?: ElementType<any>;
+    active?: boolean;
+    external?: boolean;
+    children: NavBarItem[];
+};
+/** Non-clickable group header */
+export type NavBarGroupItem = NavBarBase & {
+    type: 'group';
+    children: NavBarItem[];
 };
 interface NavBarProps {
     logo?: ReactNode;
-    items: NavBarItem[];
+    items: NavBarLinkItem[];
     productName?: string;
     addition?: ReactNode;
 }

package/dist/components/overlay/side-panel/SidePanel.d.ts

@@ -1,16 +1,24 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import React, { type HTMLAttributes, type ReactNode } from 'react';
 import { Severity } from '../../../constants/severity.types';
 interface SidePanelProps {
     children?: ReactNode;
     header: ReactNode;
     headerAddition?: ReactNode;
-    actions: ReactNode;
-    onClose: () => void;
+    actions?: ReactNode;
+    onClose: (event?: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLDivElement>) => void;
     isOpen: boolean;
     showBackdrop?: boolean;
     severity?: Severity;
     showHeaderMarker?: boolean;
     width?: number | string;
+    /**
+     * Optional details pane (separate column).
+     */
+    details?: ReactNode;
+    detailsHeader?: ReactNode;
+    detailsWidth?: number | string;
+    onCloseDetails?: () => void;
+    detailsHeaderAddition?: ReactNode;
 }
-export declare function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop, severity, showHeaderMarker, width, ...props }: SidePanelProps & HTMLAttributes<HTMLElement>): ReactNode;
+export declare function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop, severity, showHeaderMarker, width, details, detailsHeader, detailsWidth, onCloseDetails, detailsHeaderAddition, ...props }: SidePanelProps & HTMLAttributes<HTMLElement>): ReactNode;
 export {};

package/dist/components/overlay/side-panel/SidePanel.js

@@ -1,10 +1,66 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { X } from 'lucide-react';
+import { useEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
 import { Button } from '../../../components/button/Button';
 import { Headline } from '../../../components/headline/Headline';
 import styles from './SidePanel.module.css';
-export function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop = true, severity, showHeaderMarker = true, width = '300px', ...props }) {
-    return (_jsxs(_Fragment, { children: [isOpen && showBackdrop && (_jsx("div", { className: styles.backdrop, onClick: () => {
-                    onClose();
-                } })), _jsxs("div", { ...props, className: `${styles.sidePanel} ${isOpen ? styles.open : ''}`, style: { '--side-panel-width': width }, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: "dbc-flex dbc-justify-between", children: [_jsx(Headline, { size: 3, disableMargin: true, severity: severity, marker: showHeaderMarker, addition: headerAddition, children: header }), _jsx(Button, { type: "button", size: "sm", variant: "inline", onClick: onClose, children: _jsx(X, {}) })] }) }), _jsx("div", { className: styles.content, children: children }), _jsx("div", { className: styles.actions, children: actions })] })] }));
+export function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop = true, severity, showHeaderMarker = true, width = '400px', details, detailsHeader = 'Output', detailsWidth = '420px', onCloseDetails, detailsHeaderAddition, ...props }) {
+    const [mounted, setMounted] = useState(false);
+    const [shouldRender, setShouldRender] = useState(isOpen);
+    const [isActive, setIsActive] = useState(false);
+    const panelRef = useRef(null);
+    useEffect(() => setMounted(true), []);
+    // OPEN: ensure rendered so animation can play
+    useEffect(() => {
+        if (isOpen)
+            setShouldRender(true);
+    }, [isOpen]);
+    // Two-phase OPEN/CLOSE class toggle (lets CSS transitions kick in reliably)
+    useEffect(() => {
+        if (!shouldRender)
+            return;
+        if (!isOpen) {
+            setIsActive(false);
+            return;
+        }
+        const raf = requestAnimationFrame(() => setIsActive(true));
+        return () => cancelAnimationFrame(raf);
+    }, [isOpen, shouldRender]);
+    // When closing: wait for transform transition end to unmount.
+    useEffect(() => {
+        if (!shouldRender)
+            return;
+        const el = panelRef.current;
+        if (!el)
+            return;
+        const onTransitionEnd = (e) => {
+            if (e.target !== el)
+                return;
+            if (e.propertyName !== 'transform')
+                return;
+            if (!isOpen)
+                setShouldRender(false);
+        };
+        el.addEventListener('transitionend', onTransitionEnd);
+        return () => el.removeEventListener('transitionend', onTransitionEnd);
+    }, [isOpen, shouldRender]);
+    if (!mounted)
+        return null;
+    if (!shouldRender)
+        return null;
+    const hasDetails = Boolean(details);
+    return createPortal(_jsxs(_Fragment, { children: [showBackdrop && (_jsx("div", { className: `${styles.backdrop} ${isActive ? styles.backdropOpen : ''}`, onClick: e => {
+                    e.stopPropagation();
+                    onClose(e);
+                } })), _jsxs("div", { ref: panelRef, ...props, className: `${styles.sidePanel} ${isActive ? styles.open : ''} ${hasDetails ? styles.withDetails : styles.noDetails}`, style: {
+                    '--side-panel-width': width,
+                    '--details-width': detailsWidth,
+                }, "data-cy": "details-panel", role: "dialog", "aria-modal": "true", children: [hasDetails ? (_jsxs("aside", { className: styles.detailsCol, "data-cy": "details-panel-details", children: [_jsxs("div", { className: styles.detailsHeader, children: [_jsx("div", { className: styles.detailsTitle, children: detailsHeader }), _jsxs("div", { className: styles.detailsHeaderActions, children: [detailsHeaderAddition, onCloseDetails ? (_jsx(Button, { type: "button", size: "sm", variant: "outlined", onClick: e => {
+                                                    e.stopPropagation();
+                                                    onCloseDetails();
+                                                }, children: "Luk" })) : null] })] }), _jsx("div", { className: styles.detailsContent, children: details })] })) : null, _jsxs("section", { className: styles.mainCol, "data-cy": "details-panel-main", children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: "dbc-flex dbc-justify-between", children: [_jsx(Headline, { size: 3, disableMargin: true, severity: severity, marker: showHeaderMarker, children: header }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xs", children: [headerAddition, _jsx(Button, { type: "button", size: "sm", variant: "inline", onClick: e => {
+                                                        e.stopPropagation();
+                                                        onClose(e);
+                                                    }, "aria-label": "Close panel", children: _jsx(X, {}) })] })] }) }), _jsx("div", { className: styles.content, "data-cy": "details-panel-content", children: children }), actions && _jsx("div", { className: styles.actions, children: actions })] })] })] }), document.body);
 }

package/dist/components/overlay/side-panel/SidePanel.module.css

@@ -1,56 +1,179 @@
 .sidePanel {
-  padding: 0 var(--spacing-md);
+  --col-pad: var(--spacing-md);
+
+  /* Dial these for “feel” */
+  --panel-dur: 220ms;
+  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1); /* smooth spring-ish without overshoot */
+
+  /* Shadow + edge */
+  --shadow-opacity: 0.22;
+  --edge-opacity: 0.12;
+
+  box-sizing: border-box;
+  padding: 0;
   height: 100vh;
-  width: var(--side-panel-width, 400px);
+
   position: fixed;
   right: 0;
   top: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
+
+  background-color: var(--color-bg-surface);
+  z-index: var(--z-drawer);
+
+  transform: translate3d(100%, 0, 0);
+  transition: transform var(--panel-dur) var(--panel-ease);
+  will-change: transform;
+
+  display: grid;
+  gap: var(--spacing-md);
+  align-items: stretch;
+
+  overflow: hidden;
+  pointer-events: auto;
+
+  /* Make pseudo-elements layer properly */
+  isolation: isolate;
+}
+
+/* “Lift” layer: drop-shadow + edge highlight (both fade in) */
+.sidePanel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1; /* behind content but within isolated stacking context */
+
+  /* 1) drop-shadow = smoother than animating box-shadow
+     2) edge gradient = premium depth cue */
+  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, var(--shadow-opacity)));
+  opacity: 0;
+
+  /* Edge highlight from the left edge (panel’s leading edge) */
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, var(--edge-opacity)),
+    rgba(255, 255, 255, 0) 36%
+  );
+
+  transition: opacity var(--panel-dur) var(--panel-ease);
+
+  will-change: opacity;
+}
+
+/* Optional: super subtle “sheen” right as it settles (feels snappy) */
+.sidePanel.open::before {
+  opacity: 1;
+}
+
+.sidePanel.open {
+  transform: translate3d(0, 0, 0);
+}
+
+/* MAIN TRACK WIDTH = content + padding*2 */
+.sidePanel.noDetails {
+  grid-template-columns: calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2));
+  width: calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2));
+}
+
+/* when details show, main track stays the same; panel grows */
+.sidePanel.withDetails {
+  grid-template-columns:
+    calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2))
+    calc(var(--details-width, 420px) + (var(--col-pad) * 2));
+
+  width: calc(
+    (var(--side-panel-width, 400px) + (var(--col-pad) * 2)) +
+      (var(--details-width, 420px) + (var(--col-pad) * 2)) + var(--spacing-md)
+  );
+}
+
+/* columns get the padding */
+.mainCol,
+.detailsCol {
+  box-sizing: border-box;
+  padding: 0 var(--col-pad);
+
+  min-width: 0;
+  min-height: 0;
+
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
-  transform: translateX(100%);
-  transition: transform 0.2s ease-in-out;
-  box-shadow: var(--shadow-lg);
-  z-index: var(--z-drawer);
-  background-color: var(--color-bg-surface);
-  max-height: 100vh;
+}
+
+.header {
+  padding: var(--spacing-md) 0;
 }
 
 .content {
   flex: 1;
+  min-height: 0;
+  overflow: auto;
   font-size: var(--font-size-sm);
 }
 
-.header {
-  position: sticky;
-  top: 0;
-  padding: var(--spacing-md) 0;
-  background: inherit;
-}
-
 .actions {
-  position: sticky;
   padding: var(--spacing-md) 0;
-  background: inherit;
-  bottom: 0;
   display: flex;
   justify-content: flex-end;
   gap: var(--spacing-sm);
+  min-width: 0;
 }
 
-.sidePanel.open {
-  transform: translateX(0);
+/* details styling */
+.detailsCol {
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--color-bg-surface);
+}
+
+.detailsHeader {
+  padding: var(--spacing-sm) 0;
+  border-bottom: 1px solid var(--color-border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+}
+
+.detailsTitle {
+  font-weight: 600;
 }
 
+.detailsHeaderActions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.detailsContent {
+  padding: var(--spacing-md) 0;
+  overflow: auto;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+/* Backdrop with a nice fade */
 .backdrop {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--overlay-scrim);
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.45);
   z-index: var(--z-backdrop);
+
+  opacity: 0;
+  transition: opacity var(--panel-dur) var(--panel-ease);
+  will-change: opacity;
+}
+
+.backdropOpen {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidePanel,
+  .sidePanel::before,
+  .backdrop {
+    transition: none !important;
+  }
 }

package/dist/components/overlay/side-panel/useSidePanel.d.ts

@@ -1,4 +1,4 @@
-export declare function useSidePanel(): {
+export declare function useSidePanel(initialOpen?: boolean): {
     isOpen: boolean;
     openSidePanel: () => void;
     closeSidePanel: () => void;

package/dist/components/overlay/side-panel/useSidePanel.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-export function useSidePanel() {
-    const [isOpen, setIsOpen] = useState(false);
+export function useSidePanel(initialOpen = false) {
+    const [isOpen, setIsOpen] = useState(initialOpen);
     const openSidePanel = () => setIsOpen(true);
     const closeSidePanel = () => setIsOpen(false);
     return {

package/dist/components/page-layout/PageLayout.js

@@ -2,7 +2,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PageLayoutHero } from './components/page-layout-hero/PageLayoutHero';
 import styles from './PageLayout.module.css';
-/** Base component */
 const PageLayoutBase = ({ children, sidebar, header, containScrolling = false, orientation = 'vertical', }) => {
     if (orientation === 'vertical') {
         return (_jsx("div", { className: `${styles.container} ${styles.vertical} ${containScrolling ? styles.containScrolling : ''}`, children: _jsxs("div", { style: { flex: 1, display: 'flex', height: '100%', maxWidth: '100%' }, children: [sidebar, _jsxs("div", { style: {
@@ -17,7 +16,6 @@ const PageLayoutBase = ({ children, sidebar, header, containScrolling = false, o
                                     display: 'flex',
                                     flexDirection: 'column',
                                     padding: 'var(--spacing-md)',
-                                    gap: 'var(--spacing-md)',
                                     backgroundColor: 'var(--color-bg-surface)',
                                     overflow: 'auto',
                                 }, children: children })] })] }) }));

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import { NavBarItem } from '../../../../components/nav-bar/NavBar';
-interface ExpandableSidebarItemProps {
+import type { NavBarItem } from '../../../../components/nav-bar/NavBar';
+type ExpandableSidebarItemProps = {
     items: NavBarItem[];
     label: string;
-    component?: React.ElementType;
+    component: React.ElementType;
     icon: React.ReactNode;
-    href?: string;
-}
+    href: string;
+};
 export declare function ExpandableSidebarItem({ items, label, icon, component: Component, href, }: ExpandableSidebarItemProps): React.ReactNode;
 export {};

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

@@ -7,6 +7,9 @@ import { Button } from '../../../button/Button';
 import { useSidebar } from '../../providers/SidebarProvider';
 import { SidebarItemContent } from '../sidebar-item-content/SidebarItemContent';
 import { SidebarItem } from '../SidebarItem';
+import { ExpandableSidebarItem as ExpandableChild } from '../expandable-sidebar-item/ExpandableSidebarItem';
+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);
@@ -21,9 +24,8 @@ export function ExpandableSidebarItem({ items, label, icon, component: Component
         }
     }, [expandedItems, href]);
     useEffect(() => {
-        if (defaultExpanded === null) {
+        if (defaultExpanded === null)
             return;
-        }
         setExpanded(defaultExpanded);
     }, [defaultExpanded]);
     const handleAnimationEnd = useCallback(() => {
@@ -45,10 +47,16 @@ export function ExpandableSidebarItem({ items, label, icon, component: Component
             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))) }))] }));
+    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));
+        }
+        // Default item (type 'item' or undefined)
+        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, {}) }) })] }));
 }