@dbcdk/react-components 0.0.10 → 0.0.12

package/dist/components/hyperlink/Hyperlink.js

@@ -1,15 +1,39 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import styles from './Hyperlink.module.css';
-export function Hyperlink({ component, icon }) {
-    const originalProps = component.props;
-    return React.cloneElement(component, {
-        ...originalProps,
-        className: styles.link,
-        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 })] }));
+function cx(...parts) {
+    return parts.filter(Boolean).join(' ');
+}
+function renderInner(children, icon) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.content, children: children }), icon && _jsx("span", { className: styles.icon, children: icon })] }));
+}
+export function Hyperlink(props) {
+    var _a;
+    const { children, icon, className, asChild, as = 'a', variant = 'primary', inline = true, ...rest } = props;
+    const linkClassName = cx(styles.link, className, variant === 'secondary' ? styles.secondary : styles.primary, inline ? '' : styles.block);
+    if (asChild) {
+        const child = React.Children.only(children);
+        if (!React.isValidElement(child)) {
+            throw new Error('Hyperlink with asChild expects a single valid React element as its child.');
+        }
+        const childProps = (_a = child.props) !== null && _a !== void 0 ? _a : {};
+        return React.cloneElement(child, {
+            ...childProps,
+            ...rest,
+            className: cx(childProps.className, linkClassName),
+            children: renderInner(childProps.children, icon),
+            onClick: (e) => {
+                e.stopPropagation();
+                if (childProps.onClick) {
+                    childProps.onClick(e);
+                }
+            },
+        });
+    }
+    if (as === 'button') {
+        // (Optional) guardrail: avoid accidentally passing href to a button
+        // const { href, ...buttonRest } = rest as any
+        return (_jsx("button", { type: "button", className: linkClassName, ...rest, children: renderInner(children, icon) }));
+    }
+    return (_jsx("a", { onClick: e => e.stopPropagation(), className: linkClassName, ...rest, children: renderInner(children, icon) }));
 }

package/dist/components/hyperlink/Hyperlink.module.css

@@ -2,13 +2,61 @@
   display: inline-flex;
   gap: var(--spacing-xs);
   position: relative;
+  font-weight: normal;
+  background: none;
+  border: none;
+  padding: 0;
   text-decoration: none;
-  color: var(--color-brand);
   font-size: inherit;
+  font-family: inherit;
+  cursor: pointer;
+  color: var(--color-brand);
+  line-height: inherit;
+}
+
+.link.secondary {
+  color: var(--color-fg-default);
 }
 
 .link:hover {
-  text-decoration: underline;
+  color: var(--color-brand);
+}
+
+.link.primary {
+  position: relative;
+  color: var(--color-brand);
+  text-decoration: none;
+}
+
+.link.block {
+  background: var(--color-bg-contextual-subtle);
+  display: inline-block;
+  padding: var(--spacing-xs);
+  &:hover {
+    background-color: var(--color-bg-contextual);
+  }
+}
+
+.link::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 100%;
+  height: 1px;
+  background-color: currentColor;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 100ms ease;
+}
+
+.link:hover::after {
+  transform: scaleX(1);
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--color-brand);
+  outline-offset: 2px;
 }
 
 .icon {

package/dist/components/menu/Menu.d.ts

@@ -2,11 +2,43 @@ import * as React from 'react';
 export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
     children: React.ReactNode;
 }
+/**
+ * Use when you need a visual divider inside a Menu.
+ * Renders a non-interactive <li role="separator" />
+ */
+export type MenuSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
 export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
     active?: boolean;
     disabled?: boolean;
 }
+export interface MenuCheckItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
+    label: React.ReactNode;
+    checked: boolean;
+    disabled?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+export interface MenuRadioItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onChange'> {
+    /**
+     * Shared group name for the radio items in this menu section.
+     * (Required by your RadioButton component)
+     */
+    name: string;
+    /**
+     * This option's value.
+     */
+    value: string;
+    /**
+     * Whether this radio option is selected.
+     */
+    checked: boolean;
+    disabled?: boolean;
+    label: string;
+    onValueChange?: (value: string) => void;
+}
 export declare const Menu: React.FC<MenuProps> & {
     Item: React.FC<MenuItemProps>;
+    CheckItem: React.FC<MenuCheckItemProps>;
+    RadioItem: React.FC<MenuRadioItemProps>;
+    Separator: React.FC<MenuSeparatorProps>;
 };

package/dist/components/menu/Menu.js

@@ -2,28 +2,88 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import styles from './Menu.module.css';
+import { Checkbox } from '../forms/checkbox/Checkbox';
+import { RadioButton } from '../forms/radio-buttons/RadioButton';
 const MenuBase = React.forwardRef(({ children, className, ...props }, ref) => (_jsx("ul", { ref: ref, role: "menu", className: [styles.container, className].filter(Boolean).join(' '), ...props, children: children })));
 MenuBase.displayName = 'Menu';
 const isInteractiveEl = (el) => React.isValidElement(el) &&
-    (typeof el.type === 'string' ? el.type === 'a' || el.type === 'button' : true); // allow custom/Next Link components
+    (typeof el.type === 'string' ? el.type === 'a' || el.type === 'button' : true);
+/**
+ * Apply menu styles not only to the interactive element itself,
+ * but also to immediate children (covers cases where the direct child is a <div>
+ * wrapping a button-like thing, or components that render a wrapper).
+ */
+function applyMenuItemPropsToElement(child, opts) {
+    const { active, disabled, role = 'menuitem', tabIndex = -1, className } = opts;
+    const childClass = [styles.item, active ? styles.active : ''].filter(Boolean).join(' ');
+    // Always apply styling to the immediate child
+    const nextImmediate = React.cloneElement(child, {
+        className: [child.props.className, styles.interactiveChild, className]
+            .filter(Boolean)
+            .join(' '),
+    });
+    // If the immediate child is already interactive, we can apply full a11y+styles there
+    if (typeof child.type === 'string' && (child.type === 'a' || child.type === 'button')) {
+        return React.cloneElement(child, {
+            role,
+            tabIndex,
+            'aria-selected': active || undefined,
+            'aria-disabled': disabled || undefined,
+            className: [child.props.className, styles.interactive, childClass, className]
+                .filter(Boolean)
+                .join(' '),
+            ...(child.type === 'button' ? { disabled } : {}),
+        });
+    }
+    // For custom components, we *assume* they forward props.
+    return React.cloneElement(nextImmediate, {
+        role,
+        tabIndex,
+        'aria-selected': active || undefined,
+        'aria-disabled': disabled || undefined,
+        className: [nextImmediate.props.className, styles.interactive, childClass]
+            .filter(Boolean)
+            .join(' '),
+        disabled,
+    });
+}
 const MenuItem = React.forwardRef(({ children, active, disabled, className, ...liProps }, ref) => {
-    // If child is interactive (a/button/NextLink), clone it and style it.
     if (isInteractiveEl(children)) {
         const child = children;
-        const childClass = [styles.item, active ? styles.active : ''].filter(Boolean).join(' ');
-        return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: React.cloneElement(child, {
-                role: 'menuitem',
-                tabIndex: -1,
-                'aria-selected': active || undefined,
-                'aria-disabled': disabled || undefined,
-                className: [child.props.className, styles.interactive, childClass]
-                    .filter(Boolean)
-                    .join(' '),
-            }) }));
+        return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: applyMenuItemPropsToElement(child, { active, disabled }) }));
     }
+    // Fallback: we wrap non-interactive children in a <button>
     return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("button", { role: "menuitem", tabIndex: -1, "aria-selected": active || undefined, "aria-disabled": disabled || undefined, className: [styles.interactive, styles.item, active ? styles.active : '']
                 .filter(Boolean)
                 .join(' '), type: "button", disabled: disabled, children: children }) }));
 });
 MenuItem.displayName = 'Menu.Item';
-export const Menu = Object.assign(MenuBase, { Item: MenuItem });
+/**
+ * Menu checkbox row that uses your Checkbox component.
+ * Note: this is a *control inside a menu*, so we lean on your Checkbox a11y (`role="checkbox"`)
+ * rather than forcing `menuitemcheckbox` roles.
+ */
+const MenuCheckItem = React.forwardRef(({ label, checked, disabled, onCheckedChange, className, ...liProps }, ref) => {
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(Checkbox, { noContainer: true, checked: checked, disabled: disabled, label: label, 
+                // Your Checkbox emits (checked, mouseEvent)
+                onChange: (next, _e) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(next) }) }) }));
+});
+MenuCheckItem.displayName = 'Menu.CheckItem';
+/**
+ * Menu radio row that uses your RadioButton component.
+ * Same note as above: we keep your native radio semantics.
+ */
+const MenuRadioItem = React.forwardRef(({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(RadioButton, { noContainer: true, name: name, value: value, checked: checked, disabled: disabled, label: label, 
+                // Your RadioButton emits (value, changeEvent)
+                onChange: (v, _e) => onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(v) }) }) }));
+});
+MenuRadioItem.displayName = 'Menu.RadioItem';
+const MenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, role: "separator", className: [styles.separator, className].filter(Boolean).join(' '), ...props })));
+MenuSeparator.displayName = 'Menu.Separator';
+export const Menu = Object.assign(MenuBase, {
+    Item: MenuItem,
+    CheckItem: MenuCheckItem,
+    RadioItem: MenuRadioItem,
+    Separator: MenuSeparator,
+});

package/dist/components/menu/Menu.module.css

@@ -1,3 +1,4 @@
+/* Menu.module.css */
 .container {
   list-style: none;
   margin: 0;
@@ -17,6 +18,7 @@
   display: contents;
 }
 
+/* Applied to actual interactive elements (button/a/custom that forwards className) */
 .interactive {
   display: flex;
   align-items: center;
@@ -45,29 +47,95 @@
     color var(--transition-fast) var(--ease-standard);
 }
 
-.interactive:hover {
+/*
+  Applied to the immediate child of <li> even if it's NOT an interactive element (e.g. a <div>)
+  so that menu row styling still works for components that render a wrapper.
+*/
+.interactiveChild {
+  display: block;
+  inline-size: 100%;
+  border-radius: var(--border-radius-sm);
+}
+
+/* NEW: make wrapper-children (Checkbox/Radio) look/space like menu rows */
+.row > .interactiveChild {
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  padding-block: calc(var(--spacing-xxs) + var(--density-comfortable));
+  padding-inline: var(--spacing-md);
+  border-radius: var(--border-radius-sm);
+}
+
+/* NEW: let Checkbox/Radio consume full width so the hover area feels right */
+.row > .interactiveChild > * {
+  inline-size: 100%;
+}
+
+/* NEW: add consistent gap between control and label inside Checkbox/Radio
+   Both components use a root element with className={styles.container}.
+   Because they're CSS modules, we must target it with :global(.container). */
+.row :global(.container) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+/* Hover: support both cases (interactive element, or wrapper child) */
+.interactive:hover,
+.row:hover > .interactiveChild {
   background-color: var(--color-bg-hover-subtle);
 }
 
+/* Focus ring: support both cases */
 .interactive:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
 
+/* If wrapper contains a focusable element, show ring when any child is focused */
+.row:focus-within > .interactiveChild {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* Selected/active (legacy + item variant) */
 .active,
-.interactive[aria-selected='true'] {
+.interactive[aria-selected='true'],
+.row > .interactiveChild.active,
+.row > .interactiveChild[aria-selected='true'] {
   background-color: var(--color-bg-selected);
   color: var(--color-fg-default);
 }
 
+/* Checked (legacy support; kept in case any interactive element still uses aria-checked) */
+.interactive[aria-checked='true'],
+.row > .interactiveChild[aria-checked='true'] {
+  background-color: var(--color-bg-selected);
+  color: var(--color-fg-default);
+}
+
+/* Disabled: support both cases */
 .interactive[aria-disabled='true'],
-.interactive:disabled {
+.interactive:disabled,
+.row > .interactiveChild[aria-disabled='true'] {
   color: var(--color-disabled-fg);
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.interactive svg {
+/* Icons inside either interactive element or wrapper */
+.interactive svg,
+.interactiveChild svg {
   inline-size: var(--icon-size-md);
   block-size: var(--icon-size-md);
 }
+
+/* Visual separator row (used by <Menu.Separator />) */
+.separator {
+  block-size: 1px;
+  margin-block: var(--spacing-2xs);
+  background: var(--color-border-subtle);
+  opacity: 0.8;
+  border-radius: 999px;
+}

package/dist/components/overlay/modal/Modal.module.css

@@ -15,13 +15,13 @@
   background: var(--color-bg-surface);
   border-radius: var(--border-radius-lg);
   min-width: 320px;
-  max-width: 540px;
+  max-width: 700px;
   max-height: calc(100vh - (2 * var(--spacing-md)));
   display: flex;
   flex-direction: column;
   box-shadow: var(--shadow-lg);
   font-family: var(--font-family);
-  min-width: 400px;
+  min-width: 500px;
   color: var(--color-fg-default);
 }
 

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

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import { Button } from '../../../components/button/Button';
 import { Headline } from '../../../components/headline/Headline';
+import { MOTION_MS } from '../../../styles/animation';
 import styles from './SidePanel.module.css';
 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);
@@ -16,6 +17,21 @@ export function SidePanel({ isOpen, onClose, children, header, headerAddition, a
         if (isOpen)
             setShouldRender(true);
     }, [isOpen]);
+    // Close on ESC key
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, onClose]);
     // Two-phase OPEN/CLOSE class toggle (lets CSS transitions kick in reliably)
     useEffect(() => {
         if (!shouldRender)
@@ -56,6 +72,7 @@ export function SidePanel({ isOpen, onClose, children, header, headerAddition, a
                 } })), _jsxs("div", { ref: panelRef, ...props, className: `${styles.sidePanel} ${isActive ? styles.open : ''} ${hasDetails ? styles.withDetails : styles.noDetails}`, style: {
                     '--side-panel-width': width,
                     '--details-width': detailsWidth,
+                    '--panel-dur': MOTION_MS.panelSlide + 'ms',
                 }, "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();

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

@@ -1,8 +1,6 @@
 .sidePanel {
   --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 */

package/dist/components/overlay/tooltip/useTooltipTrigger.js

@@ -1,4 +1,5 @@
 import { useCallback, useContext, useEffect, useId, useRef, useState } from 'react';
+import { MOTION_MS } from '../../../styles/animation';
 import { TooltipContext } from './TooltipProvider';
 export function useTooltipTrigger(options) {
     const ctx = useContext(TooltipContext);
@@ -45,7 +46,6 @@ export function useTooltipTrigger(options) {
         }
         show();
     }, [isOpen, show, hide]);
-    // ✅ Only call update if THIS tooltip is the active one AND something changed
     useEffect(() => {
         var _a;
         if (!isOpen)
@@ -84,7 +84,9 @@ export function useTooltipTrigger(options) {
     const onFocus = () => {
         clearTimers();
         if (!isControlled)
-            setOpen(true);
+            setTimeout(() => {
+                setOpen(true);
+            }, MOTION_MS.tooltipOpen);
     };
     const onBlur = () => {
         clearTimers();

package/dist/components/popover/Popover.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { createPortal } from 'react-dom';
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
 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 });

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;
 };