@dbcdk/react-components 0.0.10 → 0.0.13

package/dist/components/popover/Popover.js

@@ -1,43 +1,121 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp } from 'lucide-react';
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
 import styles from './Popover.module.css';
-export const Popover = forwardRef(function Popover({ trigger: Trigger, children, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, }, ref) {
-    const [pos, setPos] = useState({ top: 0, left: 0, width: 0, visible: false });
+function getFocusable(container) {
+    const els = container.querySelectorAll([
+        'a[href]',
+        'button:not([disabled])',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])',
+    ].join(','));
+    return Array.from(els).filter(el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
+}
+function parseMinWidthPx(minWidth, elForEm) {
+    const v = minWidth.trim();
+    if (v.endsWith('px')) {
+        const n = Number.parseFloat(v);
+        return Number.isFinite(n) ? n : 0;
+    }
+    if (typeof window !== 'undefined' && v.endsWith('rem')) {
+        const n = Number.parseFloat(v);
+        if (!Number.isFinite(n))
+            return 0;
+        const rootFont = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || '16');
+        return n * (Number.isFinite(rootFont) ? rootFont : 16);
+    }
+    if (typeof window !== 'undefined' && v.endsWith('em')) {
+        const n = Number.parseFloat(v);
+        if (!Number.isFinite(n))
+            return 0;
+        const font = elForEm ? Number.parseFloat(getComputedStyle(elForEm).fontSize || '16') : 16;
+        return n * (Number.isFinite(font) ? font : 16);
+    }
+    return 0;
+}
+export const Popover = forwardRef(function Popover({ trigger: Trigger, children, open, defaultOpen = false, onOpenChange, contentId, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, autoFocusContent = false, returnFocus = true, }, ref) {
+    const internalId = useId();
+    const resolvedContentId = contentId !== null && contentId !== void 0 ? contentId : `popover-${internalId}`;
+    const isControlled = open !== undefined;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isOpen = isControlled ? !!open : uncontrolledOpen;
+    const [pos, setPos] = useState({ top: 0, left: 0 });
+    const [positioned, setPositioned] = useState(false);
+    const [triggerWidth, setTriggerWidth] = useState(null);
     const containerRef = useRef(null);
     const contentRef = useRef(null);
-    // avoid SSR/hydration mismatch
+    const triggerElRef = useRef(null);
+    const lastCloseReasonRef = useRef('unknown');
     const [mounted, setMounted] = useState(false);
     useEffect(() => setMounted(true), []);
-    const computeAndSetPosition = useCallback((show) => {
-        const container = containerRef.current;
+    const setOpen = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [isControlled, onOpenChange]);
+    const openPopover = useCallback(() => {
+        setPositioned(false);
+        setOpen(true);
+    }, [setOpen]);
+    const closePopover = useCallback((reason = 'api') => {
+        lastCloseReasonRef.current = reason;
+        setOpen(false);
+    }, [setOpen]);
+    const togglePopover = useCallback((e) => {
+        triggerElRef.current = e.currentTarget;
+        if (isOpen)
+            closePopover('trigger');
+        else
+            openPopover();
+    }, [isOpen, closePopover, openPopover]);
+    useImperativeHandle(ref, () => ({
+        close: () => closePopover('api'),
+        open: openPopover,
+        isOpen: () => isOpen,
+    }), [closePopover, openPopover, isOpen]);
+    const computeAndSetPosition = useCallback(() => {
+        var _a;
         const content = contentRef.current;
-        if (!container || !content)
+        if (!content)
+            return;
+        const triggerEl = (_a = triggerElRef.current) !== null && _a !== void 0 ? _a : containerRef.current;
+        if (!triggerEl)
             return;
-        const triggerRect = container.getBoundingClientRect();
-        // Temporarily measure content size by forcing it into the layout.
+        const triggerRect = triggerEl.getBoundingClientRect();
+        // Only compute a forced width when requested.
+        let forcedWidthPx = null;
+        if (matchTriggerWidth) {
+            const minWidthPx = parseMinWidthPx(minWidth, triggerEl);
+            forcedWidthPx = Math.max(triggerRect.width, minWidthPx || 0);
+            setTriggerWidth(forcedWidthPx);
+        }
+        else {
+            setTriggerWidth(null);
+        }
+        // Measure height/width for collision using a temporary sizing that reflects our final sizing:
+        const prevHidden = content.hidden;
         const prevVis = content.style.visibility;
         const prevDisp = content.style.display;
         const prevMinWidth = content.style.minWidth;
         const prevWidth = content.style.width;
         const prevTop = content.style.top;
         const prevLeft = content.style.left;
+        content.hidden = false;
         content.style.visibility = 'hidden';
         content.style.display = 'block';
         content.style.top = '0px';
         content.style.left = '0px';
+        // Apply minWidth always; apply width only if matchTriggerWidth.
         content.style.minWidth = minWidth;
-        content.style.width = 'auto';
-        const minWidthPx = content.offsetWidth;
-        const desiredWidthPx = Math.max(matchTriggerWidth ? triggerRect.width : 0, minWidthPx);
-        // Apply desired width and re-measure final size (height may depend on width).
-        content.style.minWidth = `${desiredWidthPx}px`;
-        content.style.width = `${desiredWidthPx}px`;
+        content.style.width = forcedWidthPx != null ? `${forcedWidthPx}px` : 'auto';
         const contentWidth = content.offsetWidth;
         const contentHeight = content.offsetHeight;
-        // Restore previous inline styles
+        // Restore
+        content.hidden = prevHidden;
         content.style.visibility = prevVis;
         content.style.display = prevDisp;
         content.style.minWidth = prevMinWidth;
@@ -58,80 +136,84 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         const placeRightOfLeftEdge = spaceRight >= contentWidth + edgeBuffer;
         const placeLeftOfRightEdge = spaceLeft >= contentWidth + edgeBuffer;
         let rawLeft;
-        if (placeRightOfLeftEdge) {
-            rawLeft = triggerRect.left; // align left edges
-        }
-        else if (placeLeftOfRightEdge) {
-            rawLeft = triggerRect.right - contentWidth; // align right edges
-        }
-        else {
+        if (placeRightOfLeftEdge)
+            rawLeft = triggerRect.left;
+        else if (placeLeftOfRightEdge)
+            rawLeft = triggerRect.right - contentWidth;
+        else
             rawLeft = triggerRect.left + (triggerRect.width - contentWidth) / 2;
-        }
         const clampedLeft = Math.max(viewportPadding, Math.min(rawLeft, vw - contentWidth - viewportPadding));
         const clampedTop = Math.max(viewportPadding, Math.min(rawTop, vh - contentHeight - viewportPadding));
-        setPos({ top: clampedTop, left: clampedLeft, width: desiredWidthPx, visible: show });
+        setPos({ top: clampedTop, left: clampedLeft });
+        setPositioned(true);
     }, [edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]);
-    const openPopover = useCallback((e) => {
-        if (pos.visible) {
-            setPos(p => ({ ...p, visible: false }));
-            return;
-        }
-        computeAndSetPosition(true);
-        e === null || e === void 0 ? void 0 : e.stopPropagation();
-    }, [pos.visible, computeAndSetPosition]);
-    const closePopover = useCallback(() => {
-        setPos(p => ({ ...p, visible: false }));
-    }, []);
-    useImperativeHandle(ref, () => ({
-        close: closePopover,
-        open: () => computeAndSetPosition(true),
-        isOpen: () => !!pos.visible,
-    }), [closePopover, computeAndSetPosition, pos.visible]);
-    // Recompute position after open to account for content becoming visible / measured.
     useLayoutEffect(() => {
-        if (pos.visible)
-            computeAndSetPosition(true);
+        if (!isOpen)
+            return;
+        computeAndSetPosition();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [pos.visible]);
+    }, [isOpen]);
     useEffect(() => {
-        if (!pos.visible)
+        var _a;
+        if (!isOpen)
+            return;
+        const content = contentRef.current;
+        if (!content)
             return;
-        const handleClickOutside = (e) => {
-            if (containerRef.current &&
-                contentRef.current &&
-                !containerRef.current.contains(e.target) &&
-                !contentRef.current.contains(e.target)) {
-                closePopover();
+        if (autoFocusContent) {
+            const focusables = getFocusable(content);
+            (_a = focusables[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        const handlePointerDownCapture = (e) => {
+            const container = containerRef.current;
+            const contentEl = contentRef.current;
+            if (!container || !contentEl)
+                return;
+            const target = e.target;
+            if (!container.contains(target) && !contentEl.contains(target)) {
+                closePopover('outside');
             }
         };
         const handleEscape = (e) => {
             if (e.key === 'Escape')
-                closePopover();
+                closePopover('escape');
         };
-        const handleReposition = () => computeAndSetPosition(true);
-        document.addEventListener('click', handleClickOutside);
+        const handleReposition = () => computeAndSetPosition();
+        document.addEventListener('pointerdown', handlePointerDownCapture, true);
         document.addEventListener('keydown', handleEscape, true);
         window.addEventListener('resize', handleReposition);
         window.addEventListener('scroll', handleReposition, true);
         return () => {
-            document.removeEventListener('click', handleClickOutside);
+            document.removeEventListener('pointerdown', handlePointerDownCapture, true);
             document.removeEventListener('keydown', handleEscape, true);
             window.removeEventListener('resize', handleReposition);
             window.removeEventListener('scroll', handleReposition, true);
         };
-    }, [pos.visible, closePopover, computeAndSetPosition]);
-    return (_jsxs("div", { className: styles.container, ref: containerRef, children: [Trigger(openPopover, pos.visible ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 })), mounted &&
-                createPortal(_jsx("div", { ref: contentRef, className: styles.content, style: {
+    }, [isOpen, closePopover, computeAndSetPosition, autoFocusContent]);
+    useEffect(() => {
+        var _a, _b;
+        if (isOpen)
+            return;
+        if (!returnFocus)
+            return;
+        if (lastCloseReasonRef.current === 'outside')
+            return;
+        (_b = (_a = triggerElRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }, [isOpen, returnFocus]);
+    const icon = isOpen ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 });
+    return (_jsxs("div", { className: styles.container, ref: containerRef, children: [Trigger(togglePopover, icon, isOpen), mounted &&
+                isOpen &&
+                createPortal(_jsx("div", { id: resolvedContentId, ref: contentRef, className: styles.content, style: {
                         top: pos.top,
                         left: pos.left,
-                        visibility: pos.visible ? 'visible' : 'hidden',
-                        minWidth: pos.width ? `${pos.width}px` : minWidth,
-                        width: pos.width ? `${pos.width}px` : undefined,
+                        // Content-driven sizing by default.
+                        minWidth,
+                        width: triggerWidth != null ? `${triggerWidth}px` : undefined,
                         maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
                         maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), 400px)`,
-                        overflow: 'auto',
-                    }, role: "dialog", "aria-hidden": !pos.visible, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: typeof children === 'function'
-                        ? children(closePopover)
+                        visibility: positioned ? undefined : 'hidden',
+                    }, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: typeof children === 'function'
+                        ? children(() => closePopover('api'))
                         : children }), document.body)] }));
 });
 Popover.displayName = 'Popover';

package/dist/components/popover/Popover.module.css

@@ -1,5 +1,6 @@
 .container {
   position: relative;
+  display: inline-block;
 }
 
 .content {
@@ -13,6 +14,10 @@
   box-shadow: var(--shadow-md);
 }
 
+.content[hidden] {
+  display: none;
+}
+
 .content svg {
   height: 20px;
   width: 20px;

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

@@ -1,52 +1,57 @@
 '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';
-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);
+    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);
     }, []);
-    useEffect(() => {
-        if (expandedItems.has(href)) {
-            setExpanded(true);
-        }
-    }, [expandedItems, href]);
+    // Single source of truth: expanded comes from provider state
+    const expanded = useMemo(() => isExpanded(href), [href, isExpanded]);
+    // Expand-all behavior (e.g. search)
     useEffect(() => {
         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]);
+    }, [expanded, expandItem, href, handleSidebarCollapseChange, isSidebarCollapsed, resetExpandAll]);
     const renderNavItem = (item, key) => {
         var _a, _b;
         if (isGroup(item)) {
@@ -55,7 +60,6 @@ export function ExpandableSidebarItem({ items, label, icon, component: Component
         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/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;
 };

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { nestedFiltering } from '../../../utils/arrays/nested-filtering';
 const hasChildren = (item) => Array.isArray(item.children) && item.children.length > 0;
 const hasHref = (item) => typeof item.href === 'string' && item.href.length > 0;
@@ -32,6 +32,9 @@ const SidebarContext = createContext({
     resetExpandAll: () => { },
     activeLink: '',
     setActiveLink: () => { },
+    expandItem: () => { },
+    collapseItem: () => { },
+    isExpanded: () => false,
     isSidebarCollapsed: false,
     handleSidebarCollapseChange: () => { },
 });
@@ -43,24 +46,60 @@ 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)
     const [expandedItems, setExpandedItems] = useState(new Set());
+    // Track items in a ref to avoid effect loops if parent recreates the items array every render
+    const itemsRef = useRef(items);
+    useEffect(() => {
+        itemsRef.current = items;
+    }, [items]);
     const [isSidebarCollapsed, setSidebarCollapsed] = useState(initialSidebarCollapsed !== null && initialSidebarCollapsed !== void 0 ? initialSidebarCollapsed : false);
     const hasExplicitInitialSidebarCollapsed = initialSidebarCollapsed !== undefined;
     const triggerExpandAll = useCallback(() => setDefaultExpanded(true), []);
     const resetExpandAll = useCallback(() => setDefaultExpanded(null), []);
     const setActiveLink = useCallback((href) => setActiveHref(href), []);
+    const expandItem = useCallback((href) => {
+        setExpandedItems(prev => {
+            if (prev.has(href))
+                return prev;
+            const next = new Set(prev);
+            next.add(href);
+            return next;
+        });
+    }, []);
+    const collapseItem = useCallback((href) => {
+        setExpandedItems(prev => {
+            if (!prev.has(href))
+                return prev;
+            const next = new Set(prev);
+            next.delete(href);
+            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.
     useEffect(() => {
         if (!activeHref)
             return;
-        const path = findParentItem(activeHref, items);
+        const currentItems = itemsRef.current;
+        const path = findParentItem(activeHref, currentItems);
         const parents = path.split('.').filter(Boolean);
+        if (parents.length === 0)
+            return;
         setExpandedItems(prev => {
+            let changed = false;
             const next = new Set(prev);
-            for (const p of parents)
-                next.add(p);
-            return next;
+            for (const p of parents) {
+                if (!next.has(p)) {
+                    next.add(p);
+                    changed = true;
+                }
+            }
+            return changed ? next : prev;
         });
-    }, [activeHref, items]);
+    }, [activeHref]);
     const filteredItems = useMemo(() => {
         return activeQuery
             ? nestedFiltering(items, {
@@ -71,11 +110,13 @@ 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.
     useEffect(() => {
-        if (activeQuery) {
+        if (activeQuery)
             triggerExpandAll();
-        }
     }, [activeQuery, triggerExpandAll]);
+    // Initial collapsed state: explicit prop > localStorage > responsive default.
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
@@ -102,9 +143,8 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
         catch {
             console.error('Failed to parse sidebar collapsed state from storage');
         }
-        // No explicit prop and nothing stored → use responsive default
-        const defaultCollapsed = currentBreakpoint === 'small';
-        setSidebarCollapsed(defaultCollapsed);
+        // Nothing stored → responsive default (but we do NOT persist this automatic choice)
+        setSidebarCollapsed(currentBreakpoint === 'small');
     }, [hasExplicitInitialSidebarCollapsed, initialSidebarCollapsed]);
     const persistCollapsed = useCallback((collapsed) => {
         if (typeof window === 'undefined')
@@ -116,26 +156,28 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
             console.error('Failed to persist sidebar collapsed state');
         }
     }, []);
+    // Only persist user-triggered changes
     const handleSidebarCollapseChange = useCallback((collapsed) => {
         setSidebarCollapsed(collapsed);
         persistCollapsed(collapsed);
     }, [persistCollapsed]);
     // Resize behavior:
-    // - Track current breakpoint.
-    // - Only when the breakpoint actually changes (small <-> large)
-    //   do we auto-apply the "responsive default" for that breakpoint.
+    // - only apply auto-collapse when breakpoint changes
+    // - do NOT persist the automatic change (only user actions persist)
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
+        let lastBreakpoint = getBreakpoint(window.innerWidth);
         const onResize = () => {
             const nextBreakpoint = getBreakpoint(window.innerWidth);
-            const autoCollapsed = nextBreakpoint === 'small';
-            setSidebarCollapsed(autoCollapsed);
-            persistCollapsed(autoCollapsed);
+            if (nextBreakpoint === lastBreakpoint)
+                return;
+            lastBreakpoint = nextBreakpoint;
+            setSidebarCollapsed(nextBreakpoint === 'small');
         };
         window.addEventListener('resize', onResize);
         return () => window.removeEventListener('resize', onResize);
-    }, [persistCollapsed]);
+    }, []);
     const value = useMemo(() => ({
         defaultExpanded,
         expandedItems,
@@ -148,6 +190,9 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
         setItemsCollapsed,
         activeLink: activeHref,
         setActiveLink,
+        expandItem,
+        collapseItem,
+        isExpanded,
         isSidebarCollapsed,
         handleSidebarCollapseChange,
     }), [
@@ -162,6 +207,9 @@ export function SidebarProvider({ children, items, initialCollapsed = false, ini
         setItemsCollapsed,
         activeHref,
         setActiveLink,
+        expandItem,
+        collapseItem,
+        isExpanded,
         isSidebarCollapsed,
         handleSidebarCollapseChange,
     ]);

package/dist/components/split-button/SplitButton.d.ts

@@ -2,7 +2,7 @@ import type { ComponentProps, ReactNode } from 'react';
 import { Button } from '../button/Button';
 interface SplitButtonItem {
     label?: string;
-    onClick: () => void;
+    onClick: (close?: () => void) => void;
     icon?: ReactNode;
     active?: boolean;
 }

package/dist/components/split-button/SplitButton.js

@@ -4,5 +4,7 @@ import { Button } from '../button/Button';
 import { Menu } from '../menu/Menu';
 import { Popover } from '../popover/Popover';
 export function SplitButton({ children, options, onClick, icon, ...rest }) {
-    return (_jsxs("div", { className: styles.container, style: { display: 'inline-flex', alignItems: 'center' }, children: [_jsxs(Button, { ...rest, onClick: onClick, children: [icon, children] }), _jsx(Popover, { trigger: (handleClick, icon) => (_jsx("span", { className: styles.triggerContainer, children: _jsx(Button, { ...rest, onClick: handleClick, children: icon }) })), children: _jsx(Menu, { children: options.map(option => (_jsx(Menu.Item, { active: option.active, children: _jsxs("button", { onClick: option.onClick, children: [option.icon, option.label] }) }, option.label))) }) })] }));
+    return (_jsxs("div", { className: styles.container, style: { display: 'inline-flex', alignItems: 'center' }, children: [_jsxs(Button, { ...rest, onClick: onClick, children: [icon, children] }), _jsx(Popover, { trigger: (handleClick, icon) => (_jsx("span", { className: styles.triggerContainer, children: _jsx(Button, { ...rest, onClick: handleClick, children: icon }) })), children: close => (_jsx(Menu, { children: options.map(option => (_jsx(Menu.Item, { active: option.active, children: _jsxs("button", { onClick: e => {
+                                option.onClick(close);
+                            }, children: [option.icon, option.label] }) }, option.label))) })) })] }));
 }

package/dist/components/split-button/SplitButton.module.css

@@ -3,15 +3,15 @@
 }
 
 .container > button:first-child {
-  border-start-start-radius: var(--border-radius-md);
-  border-end-start-radius: var(--border-radius-md);
+  border-start-start-radius: var(--border-radius-default);
+  border-end-start-radius: var(--border-radius-default);
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
 
 .triggerContainer button {
-  border-start-end-radius: var(--border-radius-md);
-  border-end-end-radius: var(--border-radius-md);
+  border-start-end-radius: var(--border-radius-default);
+  border-end-end-radius: var(--border-radius-default);
   border-start-start-radius: 0;
   border-end-start-radius: 0;
   padding-block: 0;

package/dist/components/split-pane/SplitPane.d.ts

@@ -1,34 +1,20 @@
-import React from 'react';
-import { SplitDirection } from './provider/SplitPaneContext';
-interface SplitPaneProps {
-    children: React.ReactNode;
+import type { JSX, ReactNode } from 'react';
+import type { SplitDirection } from './provider/SplitPaneContext';
+export interface SplitPaneProps {
+    children: ReactNode;
     initialPrimarySize?: number;
     minPrimarySize?: number;
     minSecondarySize?: number;
     direction?: SplitDirection;
     showDivider?: 'hover' | 'always' | 'never';
-    /**
-     * Gutter size (px). This is the space between panes and contains the resizer hit area.
-     * Example: 8 => 4px breathing room on each side if the divider line is centered.
-     */
     gutterSize?: number;
-    /**
-     * If provided, primary size is persisted per key in localStorage.
-     * Only SplitPanes sharing the same key will share size.
-     */
     storageKey?: string;
 }
-export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, }: SplitPaneProps): React.ReactNode;
-/**
- * IMPORTANT:
- * This component now renders ONLY the primary content (scrollable).
- * The resizer lives in a dedicated <SplitPaneGutter /> so it never overlaps scrollbars.
- */
+export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, }: SplitPaneProps): JSX.Element;
 export declare function SplitPanePrimary({ children }: {
-    children: React.ReactNode;
-}): React.ReactNode;
-export declare function SplitPaneGutter(): React.ReactNode;
+    children: ReactNode;
+}): JSX.Element;
 export declare function SplitPaneSecondary({ children }: {
-    children: React.ReactNode;
-}): React.ReactNode;
-export {};
+    children: ReactNode;
+}): JSX.Element;
+export declare function SplitPaneGutter(): JSX.Element;