@dbcdk/react-components 0.0.69 → 0.0.70

package/dist/components/card/Card.d.ts

@@ -27,6 +27,7 @@ export interface CardProps {
      */
     link?: ReactNode;
     width?: 25 | 33 | 50 | 66 | 75 | 100;
+    headlineSize?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 type CardComponent = ((props: CardProps) => JSX.Element) & {
     Meta: typeof CardMeta;

package/dist/components/card/Card.js

@@ -24,7 +24,7 @@ function getVariantClass(variant, s) {
             return s.variantDefault;
     }
 }
-function CardImpl({ title, loading = false, variant = 'default', size = 'md', headerMarker = true, headerIcon, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, }) {
+function CardImpl({ title, loading = false, variant = 'default', size = 'md', headerMarker = true, headerIcon, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, headlineSize = 4, }) {
     const outerStyle = width ? { ['--width']: `${width}%` } : undefined;
     const mediaStyle = mediaWidth
         ? { ['--card-media-width']: `${mediaWidth}px` }
@@ -35,7 +35,7 @@ function CardImpl({ title, loading = false, variant = 'default', size = 'md', he
     const showSection = !loading && (showSectionDivider || !!sectionTitle);
     const showBody = !loading && !!children;
     const showActions = !loading && !!actions;
-    const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image ? (_jsx("div", { className: styles.media, style: mediaStyle, children: image })) : null, _jsxs("div", { className: styles.content, children: [hasHeader ? (_jsxs("header", { className: styles.header, children: [title ? (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, size: 4, weight: 500, disableMargin: true, children: title })) : null, headerMeta ? _jsx("div", { className: styles.headerMeta, children: headerMeta }) : null] })) : null, loading ? (_jsx("div", { className: styles.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })) : null, showSection ? (_jsxs("div", { className: styles.section, children: [showSectionDivider ? _jsx("div", { className: styles.sectionDivider }) : null, sectionTitle ? _jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null] })) : null, showBody ? _jsx("div", { className: styles.body, children: children }) : null, showActions ? _jsx("div", { className: styles.actions, children: actions }) : null] })] }));
+    const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image ? (_jsx("div", { className: styles.media, style: mediaStyle, children: image })) : null, _jsxs("div", { className: styles.content, children: [hasHeader ? (_jsxs("header", { className: styles.header, children: [title ? (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, size: headlineSize, weight: 500, disableMargin: true, children: title })) : null, headerMeta ? _jsx("div", { className: styles.headerMeta, children: headerMeta }) : null] })) : null, loading ? (_jsx("div", { className: styles.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })) : null, showSection ? (_jsxs("div", { className: styles.section, children: [showSectionDivider ? _jsx("div", { className: styles.sectionDivider }) : null, sectionTitle ? _jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null] })) : null, showBody ? _jsx("div", { className: styles.body, children: children }) : null, showActions ? _jsx("div", { className: styles.actions, children: actions }) : null] })] }));
     // keep existing behavior
     const cardContent = link ? _jsx(Hyperlink, { children: link }) : inner;
     return (_jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerStyle, children: _jsx("div", { className: `${styles.container} ${variantClass}`, children: cardContent }) }));

package/dist/components/forms/select/Select.js

@@ -157,7 +157,7 @@ export function Select({ label, error, helpText, orientation = 'vertical', label
             ids.push(tooltipId);
         return ids.length ? ids.join(' ') : undefined;
     })();
-    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: [_jsx(Popover, { ref: popoverRef, open: open, onOpenChange: next => {
+    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: [_jsx(Popover, { ref: popoverRef, open: open, fullWidth: fullWidth, onOpenChange: next => {
                     setOpen(next);
                     if (next)
                         resetActiveToSelected();

package/dist/components/json-viewer/JsonViewer.d.ts

@@ -3,9 +3,10 @@ export interface JsonViewerProps {
     value: unknown;
     defaultExpandedDepth?: number;
     expandAll?: boolean;
+    searchDebounceMs?: number;
     helperText?: string;
     searchPlaceholder?: string;
     emptySearchText?: string;
     className?: string;
 }
-export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, helperText, searchPlaceholder, emptySearchText, className, }: JsonViewerProps): JSX.Element;
+export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, searchDebounceMs, helperText, searchPlaceholder, emptySearchText, className, }: JsonViewerProps): JSX.Element;

package/dist/components/json-viewer/JsonViewer.js

@@ -132,12 +132,44 @@ function isJsonValue(value) {
     }
     return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean';
 }
-export function JsonViewer({ value, defaultExpandedDepth = 2, expandAll = false, helperText, searchPlaceholder = 'Søg i nøgler, stier og værdier', emptySearchText = 'Ingen matchende noder fundet.', className, }) {
+function collectExpandableNodeIds(value, path = []) {
+    if (!isJsonArray(value) && !isJsonObject(value))
+        return [];
+    const nodeId = getNodeId(path);
+    const childEntries = isJsonArray(value)
+        ? value.map((item, index) => [String(index), item])
+        : Object.entries(value);
+    return [
+        nodeId,
+        ...childEntries.flatMap(([childKey, childValue]) => collectExpandableNodeIds(childValue, [...path, childKey])),
+    ];
+}
+function collectInitiallyExpandedNodeIds(value, defaultExpandedDepth, expandAll, depth = 0, path = []) {
+    if (!isJsonArray(value) && !isJsonObject(value))
+        return [];
+    const nodeId = getNodeId(path);
+    const childEntries = isJsonArray(value)
+        ? value.map((item, index) => [String(index), item])
+        : Object.entries(value);
+    const includeNode = expandAll || depth < defaultExpandedDepth;
+    const nested = childEntries.flatMap(([childKey, childValue]) => collectInitiallyExpandedNodeIds(childValue, defaultExpandedDepth, expandAll, depth + 1, [
+        ...path,
+        childKey,
+    ]));
+    return includeNode ? [nodeId, ...nested] : nested;
+}
+export function JsonViewer({ value, defaultExpandedDepth = 2, expandAll = false, searchDebounceMs = 180, helperText, searchPlaceholder = 'Søg i nøgler, stier og værdier', emptySearchText = 'Ingen matchende noder fundet.', className, }) {
+    const [queryInput, setQueryInput] = useState('');
     const [query, setQuery] = useState('');
-    const [globalExpandMode, setGlobalExpandMode] = useState(expandAll ? 'expanded' : 'default');
     const normalizedQuery = normalizeSearch(query);
     const inputId = useId();
     const { copiedId, setCopiedId } = useClipboardStatus();
+    useEffect(() => {
+        const timeoutId = window.setTimeout(() => {
+            setQuery(queryInput);
+        }, searchDebounceMs);
+        return () => window.clearTimeout(timeoutId);
+    }, [queryInput, searchDebounceMs]);
     const safeValue = useMemo(() => {
         if (isJsonValue(value))
             return value;
@@ -149,6 +181,8 @@ export function JsonViewer({ value, defaultExpandedDepth = 2, expandAll = false,
         };
     }, [value]);
     const matches = useMemo(() => (normalizedQuery ? collectSearchMatches(safeValue, normalizedQuery) : new Map()), [normalizedQuery, safeValue]);
+    const allExpandableNodeIds = useMemo(() => collectExpandableNodeIds(safeValue), [safeValue]);
+    const [expandedNodeIds, setExpandedNodeIds] = useState(() => new Set(collectInitiallyExpandedNodeIds(safeValue, defaultExpandedDepth, expandAll)));
     const hasResults = normalizedQuery ? matches.size > 0 : true;
     const handleCopy = async (nodeId, rawValue) => {
         try {
@@ -159,17 +193,35 @@ export function JsonViewer({ value, defaultExpandedDepth = 2, expandAll = false,
             setCopiedId(null);
         }
     };
-    return (_jsxs("section", { className: [styles.viewer, className].filter(Boolean).join(' '), children: [_jsxs("div", { className: styles.toolbar, children: [_jsxs("div", { className: styles.toolbarTop, children: [_jsxs("label", { htmlFor: inputId, className: styles.searchField, children: [_jsx(Search, { className: styles.searchIcon, "aria-hidden": "true" }), _jsx("input", { id: inputId, type: "search", value: query, onChange: event => setQuery(event.target.value), placeholder: searchPlaceholder, className: styles.searchInput }), query ? (_jsx("button", { type: "button", className: styles.clearButton, "aria-label": "Ryd s\u00F8gning", onClick: () => setQuery(''), children: _jsx(X, { "aria-hidden": "true" }) })) : null] }), _jsxs("div", { className: styles.actions, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => setGlobalExpandMode('expanded'), disabled: Boolean(normalizedQuery), children: "Fold alle ud" }), _jsx("button", { type: "button", className: styles.toolbarButton, onClick: () => setGlobalExpandMode('collapsed'), disabled: Boolean(normalizedQuery), children: "Fold alle sammen" })] })] }), _jsxs("div", { className: styles.metaRow, children: [helperText ? _jsx("span", { className: styles.helperText, children: helperText }) : _jsx("span", {}), _jsx("span", { className: styles.statusText, children: normalizedQuery
+    const handleExpandAll = () => {
+        setExpandedNodeIds(new Set(allExpandableNodeIds));
+    };
+    const handleCollapseAll = () => {
+        setExpandedNodeIds(new Set());
+    };
+    const handleToggleNode = (nodeId) => {
+        setExpandedNodeIds(current => {
+            const next = new Set(current);
+            if (next.has(nodeId))
+                next.delete(nodeId);
+            else
+                next.add(nodeId);
+            return next;
+        });
+    };
+    return (_jsxs("section", { className: [styles.viewer, className].filter(Boolean).join(' '), children: [_jsxs("div", { className: styles.toolbar, children: [_jsxs("div", { className: styles.toolbarTop, children: [_jsxs("label", { htmlFor: inputId, className: styles.searchField, children: [_jsx(Search, { className: styles.searchIcon, "aria-hidden": "true" }), _jsx("input", { id: inputId, type: "search", value: queryInput, onChange: event => setQueryInput(event.target.value), placeholder: searchPlaceholder, className: styles.searchInput }), queryInput ? (_jsx("button", { type: "button", className: styles.clearButton, "aria-label": "Ryd s\u00F8gning", onClick: () => {
+                                            setQueryInput('');
+                                            setQuery('');
+                                        }, children: _jsx(X, { "aria-hidden": "true" }) })) : null] }), _jsxs("div", { className: styles.actions, children: [_jsx("button", { type: "button", className: styles.toolbarButton, onClick: handleExpandAll, disabled: Boolean(normalizedQuery), children: "Fold alle ud" }), _jsx("button", { type: "button", className: styles.toolbarButton, onClick: handleCollapseAll, disabled: Boolean(normalizedQuery), children: "Fold alle sammen" })] })] }), _jsxs("div", { className: styles.metaRow, children: [helperText ? _jsx("span", { className: styles.helperText, children: helperText }) : _jsx("span", {}), _jsx("span", { className: styles.statusText, children: normalizedQuery
                                     ? `${matches.size} matchende node${matches.size === 1 ? '' : 'r'}`
-                                    : '' })] })] }), _jsx("div", { className: styles.treePane, role: "tree", "aria-label": "JSON-visning", children: hasResults ? (_jsx(JsonNode, { keyName: undefined, path: [], value: safeValue, depth: 0, defaultExpandedDepth: defaultExpandedDepth, query: normalizedQuery, matches: matches, globalExpandMode: globalExpandMode, copiedId: copiedId, onCopy: handleCopy })) : (_jsx("div", { className: styles.emptyState, children: emptySearchText })) })] }));
+                                    : '' })] })] }), _jsx("div", { className: styles.treePane, role: "tree", "aria-label": "JSON-visning", children: hasResults ? (_jsx(JsonNode, { keyName: undefined, path: [], value: safeValue, depth: 0, defaultExpandedDepth: defaultExpandedDepth, query: normalizedQuery, matches: matches, expandedNodeIds: expandedNodeIds, onToggleNode: handleToggleNode, copiedId: copiedId, onCopy: handleCopy })) : (_jsx("div", { className: styles.emptyState, children: emptySearchText })) })] }));
 }
-function JsonNode({ keyName, path, value, depth, defaultExpandedDepth, query, matches, globalExpandMode, copiedId, onCopy, }) {
+function JsonNode({ keyName, path, value, depth, defaultExpandedDepth, query, matches, expandedNodeIds, onToggleNode, copiedId, onCopy, }) {
     const nodeId = getNodeId(path);
     const nodeType = getValueType(value);
     const match = matches.get(nodeId);
     const shouldRender = query ? Boolean(match) : true;
     const forceOpen = query ? Boolean(match === null || match === void 0 ? void 0 : match.descendant) : false;
-    const [isExpanded, setIsExpanded] = useState(() => depth < defaultExpandedDepth);
     if (!shouldRender)
         return null;
     if (nodeType !== 'array' && nodeType !== 'object') {
@@ -185,14 +237,8 @@ function JsonNode({ keyName, path, value, depth, defaultExpandedDepth, query, ma
             ? Object.entries(value)
             : [];
     const summary = getSummary(value);
-    const expanded = query || forceOpen
-        ? true
-        : globalExpandMode === 'expanded'
-            ? true
-            : globalExpandMode === 'collapsed'
-                ? false
-                : isExpanded;
-    return (_jsxs("div", { className: styles.node, style: { ['--json-indent']: depth }, children: [_jsx("div", { className: styles.row, "data-match": (match === null || match === void 0 ? void 0 : match.self) || undefined, children: _jsxs("button", { type: "button", className: styles.toggle, onClick: () => setIsExpanded(current => !current), "aria-expanded": expanded, children: [expanded ? _jsx(ChevronDown, { "aria-hidden": "true" }) : _jsx(ChevronRight, { "aria-hidden": "true" }), _jsxs("span", { className: styles.rowLabel, children: [keyName !== undefined ? (_jsxs("span", { className: styles.keyChunk, children: [_jsx("span", { className: styles.key, children: _jsx(HighlightText, { text: keyName, query: query }) }), _jsx("span", { className: styles.punctuation, children: ":" })] })) : (_jsx("span", { className: styles.rootLabel, children: "$" })), _jsx("span", { className: styles.bracket, children: isJsonArray(value) ? '[' : '{' }), _jsx("span", { className: styles.summary, children: _jsx(HighlightText, { text: summary, query: query }) }), _jsx("span", { className: styles.bracket, children: isJsonArray(value) ? ']' : '}' })] })] }) }), query && !(match === null || match === void 0 ? void 0 : match.self) ? (_jsx("div", { className: styles.pathHint, children: _jsx(HighlightText, { text: getPathLabel(path), query: query }) })) : null, expanded ? (_jsx("div", { className: styles.children, role: depth === 0 ? 'group' : undefined, children: entries.map(([childKey, childValue]) => (_jsx(JsonNode, { keyName: isJsonArray(value) ? `[${childKey}]` : childKey, path: [...path, childKey], value: childValue, depth: depth + 1, defaultExpandedDepth: defaultExpandedDepth, query: query, matches: matches, globalExpandMode: globalExpandMode, copiedId: copiedId, onCopy: onCopy }, `${nodeId}-${childKey}`))) })) : null] }));
+    const expanded = query || forceOpen ? true : expandedNodeIds.has(nodeId);
+    return (_jsxs("div", { className: styles.node, style: { ['--json-indent']: depth }, children: [_jsx("div", { className: styles.row, "data-match": (match === null || match === void 0 ? void 0 : match.self) || undefined, children: _jsxs("button", { type: "button", className: styles.toggle, onClick: () => onToggleNode(nodeId), "aria-expanded": expanded, children: [expanded ? _jsx(ChevronDown, { "aria-hidden": "true" }) : _jsx(ChevronRight, { "aria-hidden": "true" }), _jsxs("span", { className: styles.rowLabel, children: [keyName !== undefined ? (_jsxs("span", { className: styles.keyChunk, children: [_jsx("span", { className: styles.key, children: _jsx(HighlightText, { text: keyName, query: query }) }), _jsx("span", { className: styles.punctuation, children: ":" })] })) : (_jsx("span", { className: styles.rootLabel, children: "$" })), _jsx("span", { className: styles.bracket, children: isJsonArray(value) ? '[' : '{' }), _jsx("span", { className: styles.summary, children: _jsx(HighlightText, { text: summary, query: query }) }), _jsx("span", { className: styles.bracket, children: isJsonArray(value) ? ']' : '}' })] })] }) }), query && !(match === null || match === void 0 ? void 0 : match.self) ? (_jsx("div", { className: styles.pathHint, children: _jsx(HighlightText, { text: getPathLabel(path), query: query }) })) : null, expanded ? (_jsx("div", { className: styles.children, role: depth === 0 ? 'group' : undefined, children: entries.map(([childKey, childValue]) => (_jsx(JsonNode, { keyName: isJsonArray(value) ? `[${childKey}]` : childKey, path: [...path, childKey], value: childValue, depth: depth + 1, defaultExpandedDepth: defaultExpandedDepth, query: query, matches: matches, expandedNodeIds: expandedNodeIds, onToggleNode: onToggleNode, copiedId: copiedId, onCopy: onCopy }, `${nodeId}-${childKey}`))) })) : null] }));
 }
 function capitalize(value) {
     return value.charAt(0).toUpperCase() + value.slice(1);

package/dist/components/json-viewer/JsonViewer.module.css

@@ -1,12 +1,7 @@
 .viewer {
-  --json-pane-bg:
-    linear-gradient(
-      180deg,
-      color-mix(in oklab, var(--color-bg-inverse) 96%, white 4%),
-      color-mix(in oklab, var(--color-bg-inverse) 92%, black 8%)
-    );
-  --json-pane-border: color-mix(in oklab, var(--color-fg-inverse) 14%, transparent);
-  --json-pane-border-strong: color-mix(in oklab, var(--color-fg-inverse) 24%, transparent);
+  --json-pane-bg: var(--color-bg-inverse);
+  --json-pane-border: color-mix(in oklab, var(--color-fg-inverse) 12%, transparent);
+  --json-pane-border-strong: color-mix(in oklab, var(--color-fg-inverse) 18%, transparent);
   --json-pane-text: var(--color-fg-inverse);
   --json-pane-muted: color-mix(in oklab, var(--color-fg-inverse) 64%, transparent);
   --json-pane-subtle: color-mix(in oklab, var(--color-fg-inverse) 44%, transparent);
@@ -26,7 +21,7 @@
   color: var(--json-pane-text);
   border: var(--border-width-thin) solid var(--json-pane-border);
   border-radius: var(--border-radius-xl);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-md);
   padding: var(--spacing-sm);
   font-family: var(--font-family-mono);
 }
@@ -52,7 +47,7 @@
   padding-inline: var(--spacing-sm);
   border: var(--border-width-thin) solid var(--json-pane-border);
   border-radius: var(--border-radius-lg);
-  background: color-mix(in oklab, var(--color-bg-inverse) 85%, var(--color-bg-surface) 15%);
+  background: transparent;
 }
 
 .searchField:focus-within {
@@ -118,7 +113,7 @@
   padding-inline: var(--spacing-sm);
   border: var(--border-width-thin) solid var(--json-pane-border);
   border-radius: var(--border-radius-md);
-  background: color-mix(in oklab, var(--color-bg-inverse) 82%, var(--color-bg-surface) 18%);
+  background: transparent;
   color: var(--json-pane-text);
   font: inherit;
   cursor: pointer;
@@ -147,15 +142,8 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2xs);
-  border: var(--border-width-thin) solid var(--json-pane-border);
-  border-radius: var(--border-radius-lg);
-  background:
-    linear-gradient(
-      180deg,
-      color-mix(in oklab, var(--color-bg-inverse) 89%, white 11%),
-      color-mix(in oklab, var(--color-bg-inverse) 94%, black 6%)
-    );
-  padding: var(--spacing-sm);
+  background: transparent;
+  padding: 0;
   overflow: auto;
 }
 
@@ -178,7 +166,7 @@
 }
 
 .row[data-match='true'] {
-  background: linear-gradient(90deg, var(--json-pane-selected), transparent 70%);
+  background: var(--json-pane-selected);
 }
 
 .toggle,
@@ -272,7 +260,7 @@
   top: 0;
   bottom: 0;
   width: 1px;
-  background: color-mix(in oklab, var(--color-fg-inverse) 10%, transparent);
+  background: color-mix(in oklab, var(--color-fg-inverse) 8%, transparent);
   pointer-events: none;
 }
 
@@ -328,7 +316,7 @@
 
 .highlight {
   color: var(--color-fg-inverse);
-  background: color-mix(in oklab, var(--json-pane-highlight) 78%, transparent);
+  background: color-mix(in oklab, var(--json-pane-highlight) 58%, transparent);
   border-radius: var(--border-radius-sm);
   padding-inline: 0.1em;
 }

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

@@ -4,6 +4,7 @@ export type NavBarItem = NavBarLinkItem | NavBarExpandableItem | NavBarGroupItem
 type NavBarBase = {
     label: string;
     icon?: ReactNode;
+    iconWidth?: string | number;
     enabled?: boolean;
     tags?: string[];
     truncateLabel?: boolean;

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

@@ -11,11 +11,12 @@ interface SidebarProps {
     activeLink?: string;
     version?: string | number;
     hideSearch?: boolean;
+    searchPlaceholder?: string;
     footer?: React.ReactNode;
     resizable?: boolean;
     defaultWidth?: number;
     minWidth?: number;
     storageKey?: string;
 }
-export declare function Sidebar({ items, productLogo, activeLink, version, hideSearch, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarProps): JSX.Element;
+export declare function Sidebar({ items, productLogo, activeLink, version, hideSearch, searchPlaceholder, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarProps): JSX.Element;
 export {};

package/dist/components/sidebar/Sidebar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SidebarContainer } from './components/sidebar-container/SidebarContainer';
 import { SidebarProvider } from './providers/SidebarProvider';
-export function Sidebar({ items, productLogo, activeLink, version, hideSearch, footer, resizable, defaultWidth, minWidth, storageKey, }) {
-    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink, version: version, hideSearch: hideSearch, footer: footer, resizable: resizable, defaultWidth: defaultWidth, minWidth: minWidth, storageKey: storageKey }) }));
+export function Sidebar({ items, productLogo, activeLink, version, hideSearch, searchPlaceholder, footer, resizable, defaultWidth, minWidth, storageKey, }) {
+    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink, version: version, hideSearch: hideSearch, searchPlaceholder: searchPlaceholder, footer: footer, resizable: resizable, defaultWidth: defaultWidth, minWidth: minWidth, storageKey: storageKey }) }));
 }

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

@@ -4,7 +4,8 @@ interface SidebarItemProps {
     label: string;
     icon: React.ReactNode;
     href?: string;
+    iconWidth?: string | number;
     truncateLabel?: boolean;
 }
-export declare function SidebarItem({ component: Component, label, icon, href, truncateLabel, }: SidebarItemProps): React.ReactNode;
+export declare function SidebarItem({ component: Component, label, icon, href, iconWidth, truncateLabel, }: SidebarItemProps): React.ReactNode;
 export {};

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SidebarItemContent } from './sidebar-item-content/SidebarItemContent';
-export function SidebarItem({ component: Component, label, icon, href, truncateLabel, }) {
+export function SidebarItem({ component: Component, label, icon, href, iconWidth, truncateLabel, }) {
     if (!Component) {
         return null;
     }
-    return (_jsx(Component, { children: _jsx(SidebarItemContent, { icon: icon, label: label, href: href, truncateLabel: truncateLabel }) }));
+    return (_jsx(Component, { children: _jsx(SidebarItemContent, { icon: icon, iconWidth: iconWidth, label: label, href: href, truncateLabel: truncateLabel }) }));
 }

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

@@ -6,7 +6,8 @@ type ExpandableSidebarItemProps = {
     component: React.ElementType;
     icon: React.ReactNode;
     href: string;
+    iconWidth?: string | number;
     truncateLabel?: boolean;
 };
-export declare function ExpandableSidebarItem({ items, label, icon, component: Component, href, truncateLabel, }: ExpandableSidebarItemProps): React.ReactNode;
+export declare function ExpandableSidebarItem({ items, label, icon, component: Component, href, iconWidth, truncateLabel, }: ExpandableSidebarItemProps): React.ReactNode;
 export {};

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

@@ -10,14 +10,11 @@ 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, truncateLabel, }) {
+export function ExpandableSidebarItem({ items, label, icon, component: Component, href, iconWidth, truncateLabel, }) {
     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);
-    }, []);
+    const ready = true;
     // Single source of truth: expanded comes from provider state
     const expanded = useMemo(() => isExpanded(href), [href, isExpanded]);
     // Expand-all behavior (e.g. search)
@@ -58,9 +55,9 @@ export function ExpandableSidebarItem({ items, label, icon, component: Component
             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(ExpandableChild, { items: (_b = item.children) !== null && _b !== void 0 ? _b : [], label: item.label, icon: item.icon, href: item.href, iconWidth: item.iconWidth, component: item.component }, key));
         }
-        return (_jsx(SidebarItem, { component: item.component, label: item.label, icon: item.icon, href: item.href, truncateLabel: item.truncateLabel }, key));
+        return (_jsx(SidebarItem, { component: item.component, label: item.label, icon: item.icon, href: item.href, iconWidth: item.iconWidth, truncateLabel: item.truncateLabel }, key));
     };
-    return (_jsxs("div", { className: `${styles.container}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { headerStyle: expanded, icon: icon, label: label, href: href, disableActiveStyles: expanded, truncateLabel: truncateLabel, 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}`)) }))] }));
+    return (_jsxs("div", { className: `${styles.container}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { headerStyle: expanded, icon: icon, iconWidth: iconWidth, label: label, href: href, disableActiveStyles: expanded, truncateLabel: truncateLabel, 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/sidebar-container/SidebarContainer.d.ts

@@ -6,11 +6,12 @@ interface SidebarContainerProps {
     activeLink?: string;
     version?: string | number;
     hideSearch?: boolean;
+    searchPlaceholder?: string;
     footer?: ReactNode;
     resizable?: boolean;
     defaultWidth?: number;
     minWidth?: number;
     storageKey?: string;
 }
-export declare function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarContainerProps): JSX.Element;
+export declare function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, searchPlaceholder, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarContainerProps): JSX.Element;
 export {};

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

@@ -39,7 +39,7 @@ function removeStoredWidth(key) {
         // ignore
     }
 }
-export function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, footer, resizable, defaultWidth = 240, minWidth = 160, storageKey, }) {
+export function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, searchPlaceholder = 'Filtrer menu', footer, resizable, defaultWidth = 240, minWidth = 160, storageKey, }) {
     const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
     // Always start from defaultWidth so server and client render identical HTML.
     // localStorage is read in a useEffect after hydration to avoid SSR mismatch.
@@ -149,5 +149,5 @@ export function SidebarContainer({ logo, productLogo, activeLink, version, hideS
     const containerStyle = useMemo(() => ({
         '--sidebar-width': `${sidebarWidth}px`,
     }), [sidebarWidth]);
-    return (_jsxs("div", { ref: containerRef, role: "complementary", className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''} ${isResizing ? styles.resizing : ''}`, style: containerStyle, 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", shape: "round", "aria-label": "Collapse sidebar", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) })] }) }), _jsxs("div", { className: styles.content, children: [!hideSearch && (_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, {}) })), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), footer && _jsx("div", { className: styles.footerSlot, children: footer }), _jsxs("div", { className: styles.footer, children: [_jsx("div", { className: styles.companyLogo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) }), version && _jsx("div", { className: `${styles.version} dbc-muted-text dbc-sm-text`, children: version })] }), resizable && (_jsx("div", { className: styles.resizeHandle, role: "separator", "aria-label": "Resize sidebar", "aria-orientation": "vertical", "aria-valuemin": Math.round(minWidth), "aria-valuemax": ariaMaxWidth !== undefined ? Math.round(ariaMaxWidth) : undefined, "aria-valuenow": Math.round(sidebarWidth), tabIndex: isSidebarCollapsed ? -1 : 0, onPointerDown: onResizePointerDown, onPointerMove: onResizePointerMove, onPointerUp: endResizeDrag, onPointerCancel: endResizeDrag, onDoubleClick: resetWidth, onKeyDown: onKeyDown }))] }));
+    return (_jsxs("div", { ref: containerRef, role: "complementary", className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ''} ${isResizing ? styles.resizing : ''}`, style: containerStyle, 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", shape: "round", "aria-label": "Collapse sidebar", icon: _jsx(ChevronLeft, { className: isSidebarCollapsed ? styles.collapsedIcon : '' }), onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed) })] }) }), _jsxs("div", { className: styles.content, children: [!hideSearch && (_jsx("div", { className: styles.filter, children: _jsx(SidenavFiltering, { placeholder: searchPlaceholder }) })), _jsx("div", { className: `${styles.links} hideScrollBar`, children: _jsx(SidebarItems, { activeLink: activeLink }) })] }), footer && _jsx("div", { className: styles.footerSlot, children: footer }), _jsxs("div", { className: styles.footer, children: [_jsx("div", { className: styles.companyLogo, children: logo !== null && logo !== void 0 ? logo : _jsx(Logo, {}) }), version && _jsx("div", { className: `${styles.version} dbc-muted-text dbc-sm-text`, children: version })] }), resizable && (_jsx("div", { className: styles.resizeHandle, role: "separator", "aria-label": "Resize sidebar", "aria-orientation": "vertical", "aria-valuemin": Math.round(minWidth), "aria-valuemax": ariaMaxWidth !== undefined ? Math.round(ariaMaxWidth) : undefined, "aria-valuenow": Math.round(sidebarWidth), tabIndex: isSidebarCollapsed ? -1 : 0, onPointerDown: onResizePointerDown, onPointerMove: onResizePointerMove, onPointerUp: endResizeDrag, onPointerCancel: endResizeDrag, onDoubleClick: resetWidth, onKeyDown: onKeyDown }))] }));
 }

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

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

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

@@ -2,7 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './SidebarItemContent.module.css';
 import { useSidebar } from '../../providers/SidebarProvider';
-export function SidebarItemContent({ icon, label, suffixIcon, href, disableActiveStyles = false, headerStyle, truncateLabel = false, }) {
+export function SidebarItemContent({ icon, label, suffixIcon, href, iconWidth, disableActiveStyles = false, headerStyle, truncateLabel = false, }) {
     const { activeLink, isSidebarCollapsed } = useSidebar();
-    return (_jsxs("span", { className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ''} ${isSidebarCollapsed ? styles.collapsed : ''} ${headerStyle ? styles.headerStyle : ''}`, children: [_jsxs("span", { children: [_jsx("span", { className: styles.icon, children: icon }), !isSidebarCollapsed && (_jsx("span", { className: `${styles.label} ${truncateLabel ? styles.truncate : ''}`, title: truncateLabel && typeof label === 'string' ? label : undefined, children: label }))] }), suffixIcon && !isSidebarCollapsed && _jsx("span", { className: styles.suffixIcon, children: suffixIcon })] }));
+    const iconStyle = iconWidth !== undefined
+        ? { ['--sidebar-item-icon-width']: iconWidth }
+        : undefined;
+    return (_jsxs("span", { className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ''} ${isSidebarCollapsed ? styles.collapsed : ''} ${headerStyle ? styles.headerStyle : ''}`, children: [_jsxs("span", { className: styles.iconLabel, children: [_jsx("span", { className: styles.icon, style: iconStyle, children: icon }), !isSidebarCollapsed && (_jsx("span", { className: `${styles.label} ${truncateLabel ? styles.truncate : ''}`, title: truncateLabel && typeof label === 'string' ? label : undefined, children: label }))] }), suffixIcon && !isSidebarCollapsed && _jsx("span", { className: styles.suffixIcon, children: suffixIcon })] }));
 }

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

@@ -37,11 +37,13 @@
   border-radius: 0;
 }
 
-.container > span {
+.iconLabel {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   min-inline-size: 0;
+  flex: 1 1 0;
+  overflow: hidden;
 }
 
 .container:not(.active):hover {
@@ -52,13 +54,19 @@
 
 .icon,
 .suffixIcon {
+  inline-size: var(--sidebar-item-icon-width, auto);
   min-inline-size: var(--icon-size-sm);
+  flex: 0 0 var(--sidebar-item-icon-width, auto);
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   color: var(--color-fg-subtle);
 }
 
+.icon {
+  min-inline-size: var(--sidebar-item-icon-width, var(--icon-size-sm));
+}
+
 .icon svg,
 .suffixIcon svg {
   inline-size: var(--icon-size-sm);
@@ -87,6 +95,7 @@
 
 .label {
   min-inline-size: 0;
+  flex: 1 1 auto;
 }
 
 .truncate {

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

@@ -16,11 +16,11 @@ export function SidebarItems({ activeLink }) {
             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, truncateLabel } = item;
-            return (_jsx(ExpandableSidebarItem, { items: children, label: label, icon: icon, href: href, truncateLabel: truncateLabel, component: Component }, key));
+            const { component: Component, label, icon, children, href, iconWidth, truncateLabel } = item;
+            return (_jsx(ExpandableSidebarItem, { items: children, label: label, icon: icon, href: href, iconWidth: iconWidth, truncateLabel: truncateLabel, component: Component }, key));
         }
-        const { component: Component, label, icon, href, truncateLabel } = item;
-        return (_jsx(SidebarItem, { component: Component, label: label, icon: icon, href: href, truncateLabel: truncateLabel }, key));
+        const { component: Component, label, icon, href, iconWidth, truncateLabel } = item;
+        return (_jsx(SidebarItem, { component: Component, label: label, icon: icon, href: href, iconWidth: iconWidth, truncateLabel: truncateLabel }, key));
     };
     return filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map((item, idx) => renderItem(item, `nav-${idx}-${item.label}`));
 }

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-declare const SidenavFiltering: React.FC;
+interface SidenavFilteringProps {
+    placeholder?: string;
+}
+declare const SidenavFiltering: React.FC<SidenavFilteringProps>;
 export default SidenavFiltering;

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.js

@@ -5,7 +5,7 @@ import React from 'react';
 import { Button } from '../../../button/Button';
 import { SearchBox } from '../../../search-box/SearchBox';
 import { useSidebar } from '../../providers/SidebarProvider';
-const SidenavFiltering = () => {
+const SidenavFiltering = ({ placeholder = 'Filtrer menu' }) => {
     const { activeQuery, setActiveQuery, isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
     const searchBoxRef = React.useRef(null);
     const handleSearch = (value) => {
@@ -20,6 +20,6 @@ const SidenavFiltering = () => {
                 }, 50);
             } }));
     }
-    return (_jsx(SearchBox, { ref: searchBoxRef, inputWidth: "100%", inputSize: "sm", value: activeQuery !== null && activeQuery !== void 0 ? activeQuery : '', onSearch: handleSearch, placeholder: "Filtrer menu" }));
+    return (_jsx(SearchBox, { ref: searchBoxRef, inputWidth: "100%", inputSize: "sm", value: activeQuery !== null && activeQuery !== void 0 ? activeQuery : '', onSearch: handleSearch, placeholder: placeholder }));
 };
 export default SidenavFiltering;

package/package.json

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