@dbcdk/react-components 0.0.17 → 0.0.19

package/dist/components/forms/checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { JSX, ReactNode } from 'react';
-type Variant = 'default' | 'primary' | 'outlined' | 'success';
+type Variant = 'default' | 'primary' | 'outlined' | 'success' | 'info';
 type Size = 'sm' | 'md' | 'lg';
 interface CheckboxProps {
     checked?: boolean;

package/dist/components/forms/checkbox/Checkbox.module.css

@@ -66,6 +66,13 @@
   &:not(:hover) {
     border-color: transparent;
   }
+}
+
+.info.checked {
+  background-color: var(--color-status-info);
+  &:not(:hover) {
+    border-color: transparent;
+  }
 
   .icon {
     color: var(--color-fg-on-brand);

package/dist/components/forms/input/Input.module.css

@@ -74,11 +74,6 @@
   padding-inline-end: calc(var(--spacing-md) + 28px);
 }
 
-/* Placeholder */
-.input::placeholder {
-  color: var(--color-fg-muted);
-}
-
 /* Hover & focus */
 .input:hover {
   border-color: var(--color-border-strong);

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

@@ -1,6 +1,6 @@
 import type { JSX } from 'react';
 import * as React from 'react';
-import { NavBarItem } from '../../../components/nav-bar/NavBar';
+import type { NavBarItem } from '../../../components/nav-bar/NavBar';
 export type SidebarContextValue = {
     defaultExpanded: boolean | null;
     expandedItems: Set<string>;

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

@@ -2,24 +2,54 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { nestedFiltering } from '../../../utils/arrays/nested-filtering';
+/**
+ * Production notes:
+ * - No console logging.
+ * - Auto-expands the correct expandable chain for the active link (including when the active link
+ *   points to the expandable parent itself).
+ * - Normalizes hrefs (trailing slashes) so comparisons are stable.
+ */
 const hasChildren = (item) => Array.isArray(item.children) && item.children.length > 0;
 const hasHref = (item) => typeof item.href === 'string' && item.href.length > 0;
-const findParentItem = (navItem, items, prevPath = '') => {
-    for (const currentItem of items) {
-        // Groups don't contribute to the href path; they just wrap children
-        const nextPath = hasHref(currentItem) ? `${prevPath}.${currentItem.href}` : prevPath;
-        if (hasChildren(currentItem)) {
-            // Direct child match
-            if (currentItem.children.some(child => hasHref(child) && child.href === navItem)) {
-                return nextPath;
+const normalizeHref = (href) => {
+    if (!href)
+        return href;
+    // strip trailing slashes except root
+    return href.length > 1 ? href.replace(/\/+$/, '') : href;
+};
+/**
+ * Returns the chain of "expandable parents" (hrefs) that contain `targetHref`.
+ *
+ * Behavior:
+ * - If targetHref matches an expandable parent item itself, the chain includes it.
+ * - If targetHref matches a leaf under expandables, the chain includes expandable ancestors.
+ *
+ * Expandable parent definition:
+ * - any node with children AND an href
+ * (If you want to restrict this to a specific type, update isExpandableParent.)
+ */
+const findExpandableParentChain = (targetHref, items) => {
+    var _a;
+    const target = normalizeHref(targetHref);
+    const dfs = (nodes, parentExpandables) => {
+        for (const node of nodes) {
+            const nodeHref = hasHref(node) ? normalizeHref(node.href) : null;
+            const isExpandableParent = hasChildren(node) && hasHref(node);
+            const nextParents = isExpandableParent && nodeHref ? [...parentExpandables, nodeHref] : parentExpandables;
+            // Match this node
+            if (nodeHref === target) {
+                return isExpandableParent ? nextParents : parentExpandables;
+            }
+            // Recurse into children
+            if (hasChildren(node)) {
+                const found = dfs(node.children, nextParents);
+                if (found)
+                    return found;
             }
-            // Recurse
-            const path = findParentItem(navItem, currentItem.children, nextPath);
-            if (path)
-                return path;
         }
-    }
-    return '';
+        return null;
+    };
+    return (_a = dfs(items, [])) !== null && _a !== void 0 ? _a : [];
 };
 const SidebarContext = createContext({
     defaultExpanded: null,
@@ -46,10 +76,9 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
     const [activeQuery, setActiveQuery] = useState('');
     const [areItemsCollapsed, setItemsCollapsed] = useState(initialCollapsed);
     const [activeHref, setActiveHref] = useState('');
-    // expandedItems is now the single source of truth for "open groups"
-    // (it includes both auto-expanded parents and user-expanded groups)
+    // expandedItems is the source of truth for "open groups"
     const [expandedItems, setExpandedItems] = useState(new Set());
-    // Track items in a ref to avoid effect loops if parent recreates the items array every render
+    // Keep latest items without creating effect loops if parent recreates the array
     const itemsRef = useRef(items);
     useEffect(() => {
         itemsRef.current = items;
@@ -60,40 +89,41 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
     const resetExpandAll = useCallback(() => setDefaultExpanded(null), []);
     const setActiveLink = useCallback((href) => setActiveHref(href), []);
     const expandItem = useCallback((href) => {
+        const h = normalizeHref(href);
         setExpandedItems(prev => {
-            if (prev.has(href))
+            if (prev.has(h))
                 return prev;
             const next = new Set(prev);
-            next.add(href);
+            next.add(h);
             return next;
         });
     }, []);
     const collapseItem = useCallback((href) => {
+        const h = normalizeHref(href);
         setExpandedItems(prev => {
-            if (!prev.has(href))
+            if (!prev.has(h))
                 return prev;
             const next = new Set(prev);
-            next.delete(href);
+            next.delete(h);
             return next;
         });
     }, []);
-    const isExpanded = useCallback((href) => expandedItems.has(href), [expandedItems]);
-    // Auto-expand: when active link changes, ensure its parent chain is expanded.
-    // IMPORTANT: guard so we only set state when we actually add something.
+    const isExpanded = useCallback((href) => expandedItems.has(normalizeHref(href)), [expandedItems]);
+    // Auto-expand: when active link changes, ensure its expandable parent chain is expanded.
     useEffect(() => {
         if (!activeHref)
             return;
         const currentItems = itemsRef.current;
-        const path = findParentItem(activeHref, currentItems);
-        const parents = path.split('.').filter(Boolean);
+        const parents = findExpandableParentChain(activeHref, currentItems);
         if (parents.length === 0)
             return;
         setExpandedItems(prev => {
             let changed = false;
             const next = new Set(prev);
             for (const p of parents) {
-                if (!next.has(p)) {
-                    next.add(p);
+                const norm = normalizeHref(p);
+                if (!next.has(norm)) {
+                    next.add(norm);
                     changed = true;
                 }
             }
@@ -110,8 +140,7 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
             })
             : items;
     }, [items, activeQuery]);
-    // Searching should expand all, but do not fight the user forever.
-    // We just set defaultExpanded=true, and individual components can honor it.
+    // Searching should expand all.
     useEffect(() => {
         if (activeQuery)
             triggerExpandAll();
@@ -128,7 +157,7 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
                 window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, JSON.stringify(value));
             }
             catch {
-                console.error('Failed to persist sidebar collapsed state');
+                // ignore persist failures
             }
             return;
         }
@@ -141,9 +170,9 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
             }
         }
         catch {
-            console.error('Failed to parse sidebar collapsed state from storage');
+            // ignore parse failures
         }
-        // Nothing stored → responsive default (but we do NOT persist this automatic choice)
+        // Nothing stored -> responsive default (do NOT persist automatic choice)
         setSidebarCollapsed(currentBreakpoint === 'small');
     }, [hasExplicitInitialSidebarCollapsed, initialSidebarCollapsed]);
     const persistCollapsed = useCallback((collapsed) => {
@@ -153,7 +182,7 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
             window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, JSON.stringify(collapsed));
         }
         catch {
-            console.error('Failed to persist sidebar collapsed state');
+            // ignore persist failures
         }
     }, []);
     // Only persist user-triggered changes
@@ -163,7 +192,7 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
     }, [persistCollapsed]);
     // Resize behavior:
     // - only apply auto-collapse when breakpoint changes
-    // - do NOT persist the automatic change (only user actions persist)
+    // - do NOT persist automatic changes (only user actions persist)
     useEffect(() => {
         if (typeof window === 'undefined')
             return;

package/dist/components/table/components/empty-state/EmptyState.d.ts

@@ -4,14 +4,9 @@ export type TableEmptyConfig = {
     /** Keep it short + system-like */
     title?: string;
     description?: ReactNode;
-    /**
-     * Optional custom actions (rendered after built-ins).
-     * Good for injecting extra links/buttons from the table page.
-     */
     actions?: ReactNode;
     onBack?: () => void;
     onRefresh?: () => void;
-    /** New: clear filters */
     onClearFilters?: () => void;
     showClearFilters?: boolean;
     clearFiltersLabel?: ReactNode;

package/dist/components/table/components/empty-state/EmptyState.js

@@ -1,18 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeft } from 'lucide-react';
-import { Button } from '../../../../components/button/Button';
 const defaultEmptyConfig = {
     enabled: true,
     title: 'Ingen resultater',
     description: _jsx("span", { children: "Ingen data at vise." }),
     showBack: false,
     showRefresh: false,
-    // default: show button if handler exists
     showClearFilters: true,
     backLabel: (_jsxs(_Fragment, { children: [_jsx(ArrowLeft, { size: 16 }), "Tilbage"] })),
     refreshLabel: _jsx(_Fragment, { children: "Indl\u00E6s igen" }),
     clearFiltersLabel: _jsx(_Fragment, { children: "Nulstil alle filtre" }),
-    // "system-like": less hero, less vertical drama
     className: 'dbc-flex dbc-flex-column dbc-items-start dbc-justify-start dbc-text-left dbc-gap-sm dbc-py-lg',
 };
 export function TableEmptyState({ config }) {
@@ -22,9 +19,5 @@ export function TableEmptyState({ config }) {
     };
     if (!merged.enabled)
         return null;
-    const showBack = merged.showBack && typeof merged.onBack === 'function';
-    const showRefresh = merged.showRefresh && typeof merged.onRefresh === 'function';
-    const showClearFilters = merged.showClearFilters && typeof merged.onClearFilters === 'function';
-    const hasAnyActions = Boolean(merged.actions) || showBack || showRefresh || showClearFilters;
-    return (_jsxs("div", { className: merged.className, children: [_jsx("div", { className: "dbc-text-sm", children: merged.description }), hasAnyActions && (_jsxs("div", { className: "dbc-flex dbc-gap-sm dbc-mt-xs", children: [showClearFilters && (_jsx(Button, { type: "button", variant: "secondary", onClick: merged.onClearFilters, children: merged.clearFiltersLabel })), showRefresh && (_jsx(Button, { type: "button", variant: "secondary", onClick: merged.onRefresh, children: merged.refreshLabel })), showBack && (_jsx(Button, { type: "button", variant: "secondary", onClick: merged.onBack, children: merged.backLabel })), merged.actions] }))] }));
+    return (_jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md dbc-pt-sm dbc-pb-sm", children: [_jsx("span", { className: "dbc-text-sm  dbc-muted-text", children: merged.description }), merged.actions ? _jsx("span", { className: "dbc-flex dbc-gap-sm", children: merged.actions }) : null] }));
 }

package/package.json

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