@dbcdk/react-components 0.0.5 → 0.0.7

package/dist/components/search-box/SearchBox.js

@@ -1,169 +1,119 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useEffect, useMemo } from 'react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Search } from 'lucide-react';
-import { Input } from '@/components/input/Input';
-import { Menu } from '@/components/menu/Menu';
-import { Popover } from '@/components/popover/Popover';
-import { Button } from '@/components/button/Button';
-import { SkeletonLoaderItem } from '@/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '../../components/button/Button';
+import { Input } from '../../components/forms/input/Input';
+import { Menu } from '../../components/menu/Menu';
+import { Popover } from '../../components/popover/Popover';
+import { SkeletonLoaderItem } from '../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 import styles from './SearchBox.module.css';
-
-const SearchBox = forwardRef(function SearchBoxInner({
-  inputWidth,
-  inputSize,
-  variant,
-  result,
-  debounce = true,
-  debounceMs = 800,
-  onSearch,
-  onSelect,
-  displayPopover,
-  resultKeys,
-  resultTemplate,
-  initialTemplate,
-  popoverMinWidth = "500px",
-  noResultText = "Ingen resultater",
-  loading,
-  enableHotkey = true,
-  onButtonClick,
-  value,
-  onChange,
-  ...rest
-}, ref) {
-  const isControlled = value !== void 0;
-  const [draft, setDraft] = useState(() => isControlled ? String(value != null ? value : "") : "");
-  const [searchQuery, setSearchQuery] = useState("");
-  const popoverRef = useRef(null);
-  const internalInputRef = useRef(null);
-  useEffect(() => {
-    if (typeof ref === "function") {
-      ref(internalInputRef.current);
-    } else if (ref) {
-      ref.current = internalInputRef.current;
-    }
-  }, [ref]);
-  useEffect(() => {
-    if (!isControlled) return;
-    const next = String(value != null ? value : "");
-    if (next !== draft) setDraft(next);
-  }, [value]);
-  useEffect(() => {
-    if (!onSearch) return;
-    if (!debounce) {
-      setSearchQuery(draft);
-      onSearch(draft);
-      return;
-    }
-    const handler = setTimeout(() => {
-      setSearchQuery(draft);
-      onSearch(draft);
-    }, debounceMs);
-    return () => clearTimeout(handler);
-  }, [draft, onSearch, debounce, debounceMs]);
-  useEffect(() => {
-    function handleKeyDown(event) {
-      var _a;
-      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        (_a = internalInputRef.current) == null ? void 0 : _a.focus();
-      }
-    }
-    if (enableHotkey) {
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }
-  }, [enableHotkey]);
-  const handleChange = (e) => {
-    setDraft(e.target.value);
-    onChange == null ? void 0 : onChange(e);
-  };
-  function handleSelect(item) {
-    onSelect == null ? void 0 : onSelect(item);
-    reset();
-  }
-  function reset() {
-    var _a;
-    setDraft("");
-    setSearchQuery("");
-    (_a = popoverRef.current) == null ? void 0 : _a.close();
-  }
-  const inputProps = {
-    ...rest,
-    value: draft,
-    onChange: handleChange
-  };
-  const inputField = useMemo(() => {
-    var _a;
-    if (displayPopover) {
-      return /* @__PURE__ */ jsx(
-        Popover,
-        {
-          ref: popoverRef,
-          minWidth: popoverMinWidth,
-          trigger: (event) => {
-            var _a2;
-            return /* @__PURE__ */ jsx(
-              Input,
-              {
-                ref: internalInputRef,
-                onFocusCapture: event,
-                onClick: event,
-                minWidth: inputWidth != null ? inputWidth : "300px",
-                width: inputWidth != null ? inputWidth : "300px",
-                icon: /* @__PURE__ */ jsx(Search, {}),
-                inputSize,
-                variant,
-                ...inputProps,
-                placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
-              }
-            );
-          },
-          children: resultTemplate ? resultTemplate : (result == null ? void 0 : result.length) ? /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: result.map((item, index) => /* @__PURE__ */ jsx("tr", { onClick: () => handleSelect(item), role: "button", tabIndex: 0, children: resultKeys == null ? void 0 : resultKeys.map((key) => {
-            const raw = item[key];
-            const cell = raw != null ? String(raw) : "";
-            return /* @__PURE__ */ jsx(
-              "td",
-              {
-                style: { whiteSpace: cell.length < 10 ? "nowrap" : void 0 },
-                children: cell
-              },
-              key
-            );
-          }) }, index)) }) }) }) : !searchQuery && !loading ? initialTemplate || /* @__PURE__ */ jsx("div", { className: styles.resultContainer, children: "Indtast s\xF8geord" }) : loading ? /* @__PURE__ */ jsx("table", { style: { width: "100%" }, children: /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx("tr", { children: resultKeys == null ? void 0 : resultKeys.map((key) => /* @__PURE__ */ jsx("td", { style: { padding: "8px" }, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, key)) }, index)) }) }) : /* @__PURE__ */ jsx("div", { className: styles.resultContainer, children: noResultText })
+export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, inputSize, variant, result, debounce = true, debounceMs = 800, onSearch, onSelect, displayPopover, resultKeys, resultTemplate, initialTemplate, popoverMinWidth = '500px', noResultText = 'Ingen resultater', loading, enableHotkey = true, onButtonClick, value, onChange, ...rest }, ref) {
+    const isControlled = value !== undefined;
+    // What the user sees immediately in the textbox
+    const [draft, setDraft] = useState(() => (isControlled ? String(value !== null && value !== void 0 ? value : '') : ''));
+    // Used only for UI state ("Indtast søgeord" vs results/no results)
+    const [searchQuery, setSearchQuery] = useState('');
+    const popoverRef = useRef(null);
+    const internalInputRef = useRef(null);
+    // Forward ref to parent
+    useEffect(() => {
+        if (typeof ref === 'function') {
+            ref(internalInputRef.current);
+        }
+        else if (ref) {
+            ;
+            ref.current = internalInputRef.current;
         }
-      );
+    }, [ref]);
+    // If parent changes value (reset/select/navigation), update draft shown in the input
+    useEffect(() => {
+        if (!isControlled)
+            return;
+        const next = String(value !== null && value !== void 0 ? value : '');
+        if (next !== draft)
+            setDraft(next);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    // Debounced search side-effect (never debounce the displayed input)
+    useEffect(() => {
+        if (!onSearch)
+            return;
+        if (!debounce) {
+            setSearchQuery(draft);
+            onSearch(draft);
+            return;
+        }
+        const handler = setTimeout(() => {
+            setSearchQuery(draft);
+            onSearch(draft);
+        }, debounceMs);
+        return () => clearTimeout(handler);
+    }, [draft, onSearch, debounce, debounceMs]);
+    // Keyboard shortcut (Cmd/Ctrl + K)
+    useEffect(() => {
+        function handleKeyDown(event) {
+            var _a;
+            if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+        if (enableHotkey) {
+            window.addEventListener('keydown', handleKeyDown);
+            return () => window.removeEventListener('keydown', handleKeyDown);
+        }
+    }, [enableHotkey]);
+    const handleChange = React.useCallback((e) => {
+        setDraft(e.target.value); // immediate UI update
+        onChange === null || onChange === void 0 ? void 0 : onChange(e); // allow parent to react if it wants (optional)
+    }, [onChange]);
+    const handleSelect = React.useCallback((item) => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
+        reset();
+    }, [onSelect]);
+    function reset() {
+        var _a;
+        setDraft(''); // always clear UI immediately
+        setSearchQuery('');
+        (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
     }
-    return /* @__PURE__ */ jsx(
-      Input,
-      {
-        ref: internalInputRef,
-        icon: /* @__PURE__ */ jsx(Search, {}),
-        minWidth: inputWidth != null ? inputWidth : "300px",
+    // Props for the input are now created inside useMemo to avoid unnecessary dependency changes
+    const inputField = useMemo(() => {
+        var _a;
+        const inputProps = {
+            ...rest,
+            value: draft,
+            onChange: handleChange,
+        };
+        if (displayPopover) {
+            return (_jsx(Popover, { ref: popoverRef, minWidth: popoverMinWidth, trigger: event => {
+                    var _a;
+                    return (_jsx(Input, { ref: internalInputRef, onFocusCapture: event, onClick: event, minWidth: inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px', width: inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px', icon: _jsx(Search, {}), inputSize: inputSize, variant: variant, ...inputProps, placeholder: (_a = rest.placeholder) !== null && _a !== void 0 ? _a : 'Indtast søgeord' }));
+                }, children: resultTemplate ? (resultTemplate) : (result === null || result === void 0 ? void 0 : result.length) ? (_jsx(Menu, { children: _jsx("table", { children: _jsx("tbody", { children: result.map((item, index) => (_jsx("tr", { onClick: () => handleSelect(item), role: "button", tabIndex: 0, children: resultKeys === null || resultKeys === void 0 ? void 0 : resultKeys.map(key => {
+                                    const raw = item[key];
+                                    const cell = raw != null ? String(raw) : '';
+                                    return (_jsx("td", { style: { whiteSpace: cell.length < 10 ? 'nowrap' : undefined }, children: cell }, key));
+                                }) }, index))) }) }) })) : !searchQuery && !loading ? (initialTemplate || _jsx("div", { className: styles.resultContainer, children: "Indtast s\u00F8geord" })) : loading ? (_jsx("table", { style: { width: '100%' }, children: _jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => (_jsx("tr", { children: resultKeys === null || resultKeys === void 0 ? void 0 : resultKeys.map(key => (_jsx("td", { style: { padding: '8px' }, children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, key))) }, index))) }) })) : (_jsx("div", { className: styles.resultContainer, children: noResultText })) }));
+        }
+        return (_jsx(Input, { ref: internalInputRef, icon: _jsx(Search, {}), minWidth: inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px', inputSize: inputSize, variant: variant, ...inputProps, placeholder: (_a = rest.placeholder) !== null && _a !== void 0 ? _a : 'Indtast søgeord' }));
+    }, [
+        rest,
+        draft,
+        handleChange,
+        displayPopover,
+        inputWidth,
         inputSize,
         variant,
-        ...inputProps,
-        placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
-      }
-    );
-  }, [
-    displayPopover,
-    popoverMinWidth,
-    result,
-    resultKeys,
-    resultTemplate,
-    initialTemplate,
-    searchQuery,
-    loading,
-    inputWidth,
-    inputSize,
-    variant,
-    inputProps,
-    rest.placeholder
-  ]);
-  return onButtonClick ? /* @__PURE__ */ jsxs("div", { className: styles.withButton, children: [
-    inputField,
-    /* @__PURE__ */ jsx(Button, { variant: "outlined", icon: /* @__PURE__ */ jsx(Search, {}), onClick: onButtonClick })
-  ] }) : /* @__PURE__ */ jsx("div", { children: inputField });
+        popoverMinWidth,
+        resultTemplate,
+        result,
+        searchQuery,
+        loading,
+        initialTemplate,
+        noResultText,
+        resultKeys,
+        handleSelect,
+    ]);
+    return onButtonClick ? (_jsxs("div", { className: styles.withButton, children: [inputField, _jsx(Button, { variant: "outlined", icon: _jsx(Search, {}), onClick: onButtonClick })] })) : (_jsx("div", { children: inputField }));
 });
-
-export { SearchBox };

package/dist/components/segmented-progress-bar/SegmentedProgressBar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
+import { TooltipPlacement } from '../../components/overlay/tooltip/TooltipProvider';
 import type { Severity } from '../../constants/severity.types';
-import { type TooltipPlacement } from '../tooltip/Tooltip';
 export type Segment = {
     value: number;
     severity?: Severity;

package/dist/components/segmented-progress-bar/SegmentedProgressBar.js

@@ -1,97 +1,50 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
 import { SeverityBgColor, SeverityTextColor } from '../../constants/severity';
-import { Tooltip } from '../tooltip/Tooltip';
 import styles from './SegmentedProgressBar.module.css';
-
-const SegmentedProgressBar = ({
-  segments,
-  total,
-  showRemainder = true,
-  remainderSeverity = "neutral",
-  centerLabel,
-  height,
-  rounded = true,
-  trackColor = "var(--color-neutral)",
-  tooltipPlacement = "top",
-  className,
-  ...aria
-}) => {
-  const sum = segments.reduce((acc, s) => acc + (s.value || 0), 0);
-  const effectiveTotal = total != null ? total : sum;
-  const safeTotal = Math.max(effectiveTotal, 1e-4);
-  const remainder = Math.max(effectiveTotal - sum, 0);
-  const pctFilled = Math.min(100, Math.max(0, Math.min(sum, effectiveTotal) / safeTotal * 100));
-  const computedSegments = [
-    ...segments,
-    ...showRemainder && remainder > 0 ? [{ value: remainder, severity: remainderSeverity }] : []
-  ];
-  const autoNumbers = (() => {
-    const base = segments.map((s) => s.value || 0);
-    if (showRemainder) base.push(remainder);
-    return base.join("/");
-  })();
-  const rootClass = [styles.container, className].filter(Boolean).join(" ");
-  const filteredSergments = computedSegments == null ? void 0 : computedSegments.filter((x) => x.value > 0);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: rootClass,
-      role: "progressbar",
-      "aria-valuemin": 0,
-      "aria-valuemax": effectiveTotal,
-      "aria-valuenow": Math.min(sum, effectiveTotal),
-      ...aria,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: styles.progressBar,
-          style: {
-            height: height ? `${height}px` : `var(--component-size-xs)`,
-            borderRadius: rounded ? `var(--border-radius-rounded)` : `var(--border-radius-none)`,
-            background: trackColor
-          },
-          children: [
-            /* @__PURE__ */ jsx("span", { className: styles.segmentsContainer, children: filteredSergments == null ? void 0 : filteredSergments.map((seg, i) => {
-              var _a, _b, _c, _d, _e;
-              const bg = (_b = seg.color) != null ? _b : SeverityBgColor[(_a = seg.severity) != null ? _a : "neutral"];
-              const fg = SeverityTextColor[(_c = seg.severity) != null ? _c : "neutral"];
-              const tooltipText = typeof seg.label !== "undefined" ? seg.label : String((_d = seg.value) != null ? _d : 0);
-              return /* @__PURE__ */ jsx(
-                Tooltip,
-                {
-                  content: tooltipText,
-                  placement: tooltipPlacement,
-                  className: styles.segmentWrapper,
-                  style: {
-                    flex: `${Math.max(seg.value || 0, 0)} 0 0`,
-                    height: "100%",
-                    minWidth: "2px"
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: styles.progressSegment,
-                      "data-index": i,
-                      "data-severity": (_e = seg.severity) != null ? _e : "neutral",
-                      style: { background: bg, color: fg }
-                    }
-                  )
-                },
-                `${i}`
-              );
-            }) }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: `${styles.progressCenter} ${(filteredSergments == null ? void 0 : filteredSergments.length) === 0 ? styles.emptySegments : ""}`,
-                children: centerLabel ? typeof centerLabel === "function" ? centerLabel(pctFilled) : centerLabel : autoNumbers
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
+function SegmentWithTooltip({ seg, index, tooltipPlacement, }) {
+    var _a, _b, _c, _d, _e;
+    const bg = (_a = seg.color) !== null && _a !== void 0 ? _a : SeverityBgColor[(_b = seg.severity) !== null && _b !== void 0 ? _b : 'neutral'];
+    const fg = SeverityTextColor[(_c = seg.severity) !== null && _c !== void 0 ? _c : 'neutral'];
+    const tooltipContent = typeof seg.label !== 'undefined' ? seg.label : String((_d = seg.value) !== null && _d !== void 0 ? _d : 0);
+    const tooltipEnabled = tooltipContent !== null && tooltipContent !== undefined && tooltipContent !== '';
+    const { triggerProps } = useTooltipTrigger({
+        content: tooltipEnabled ? tooltipContent : null,
+        placement: tooltipPlacement,
+        offset: 8,
+    });
+    return (_jsx("span", { className: styles.segmentWrapper, style: {
+            flex: `${Math.max(seg.value || 0, 0)} 0 0`,
+            height: '100%',
+            minWidth: '2px',
+        }, ...(tooltipEnabled ? triggerProps : {}), children: _jsx("div", { className: styles.progressSegment, "data-index": index, "data-severity": (_e = seg.severity) !== null && _e !== void 0 ? _e : 'neutral', style: { background: bg, color: fg } }) }));
+}
+export const SegmentedProgressBar = ({ segments, total, showRemainder = true, remainderSeverity = 'neutral', centerLabel, height, rounded = true, trackColor = 'var(--color-neutral)', tooltipPlacement = 'top', className, ...aria }) => {
+    const sum = segments.reduce((acc, s) => acc + (s.value || 0), 0);
+    const effectiveTotal = total !== null && total !== void 0 ? total : sum;
+    const safeTotal = Math.max(effectiveTotal, 0.0001);
+    const remainder = Math.max(effectiveTotal - sum, 0);
+    const pctFilled = Math.min(100, Math.max(0, (Math.min(sum, effectiveTotal) / safeTotal) * 100));
+    const computedSegments = [
+        ...segments,
+        ...(showRemainder && remainder > 0 ? [{ value: remainder, severity: remainderSeverity }] : []),
+    ];
+    const autoNumbers = (() => {
+        const base = segments.map(s => s.value || 0);
+        if (showRemainder)
+            base.push(remainder);
+        return base.join('/');
+    })();
+    const rootClass = [styles.container, className].filter(Boolean).join(' ');
+    const filteredSegments = computedSegments.filter(x => x.value > 0);
+    return (_jsx("div", { className: rootClass, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": effectiveTotal, "aria-valuenow": Math.min(sum, effectiveTotal), ...aria, children: _jsxs("div", { className: styles.progressBar, style: {
+                height: height ? `${height}px` : `var(--component-size-xs)`,
+                borderRadius: rounded ? `var(--border-radius-rounded)` : `var(--border-radius-none)`,
+                background: trackColor,
+            }, children: [_jsx("span", { className: styles.segmentsContainer, children: filteredSegments.map((seg, i) => (_jsx(SegmentWithTooltip, { seg: seg, index: i, tooltipPlacement: tooltipPlacement }, `${i}`))) }), _jsx("div", { className: `${styles.progressCenter} ${filteredSegments.length === 0 ? styles.emptySegments : ''}`, children: centerLabel
+                        ? typeof centerLabel === 'function'
+                            ? centerLabel(pctFilled)
+                            : centerLabel
+                        : autoNumbers })] }) }));
 };
-
-export { SegmentedProgressBar };

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { JSX } from 'react';
 import { NavBarItem } from '../nav-bar/NavBar';
 interface SidebarProps {
     collapsed?: boolean;

package/dist/components/sidebar/Sidebar.js

@@ -1,9 +1,7 @@
-import { jsx } from 'react/jsx-runtime';
-import { SidebarProvider } from './providers/SidebarProvider';
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { SidebarContainer } from './components/sidebar-container/SidebarContainer';
-
-function Sidebar({ items, productLogo, activeLink }) {
-  return /* @__PURE__ */ jsx(SidebarProvider, { items, children: /* @__PURE__ */ jsx(SidebarContainer, { productLogo, activeLink }) });
+import { SidebarProvider } from './providers/SidebarProvider';
+export function Sidebar({ items, productLogo, activeLink }) {
+    return (_jsx(SidebarProvider, { items: items, children: _jsx(SidebarContainer, { productLogo: productLogo, activeLink: activeLink }) }));
 }
-
-export { Sidebar };

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavBarItem } from '@/components/nav-bar/NavBar';
+import { NavBarItem } from '../../../../components/nav-bar/NavBar';
 interface ExpandableSidebarItemProps {
     items: NavBarItem[];
     label: string;

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

@@ -1,94 +1,54 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useCallback } from 'react';
-import { SidebarItemContent } from '../sidebar-item-content/SidebarItemContent';
+'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 styles from './ExpandableSidebarItem.module.css';
+import { Button } from '../../../button/Button';
 import { useSidebar } from '../../providers/SidebarProvider';
+import { SidebarItemContent } from '../sidebar-item-content/SidebarItemContent';
 import { SidebarItem } from '../SidebarItem';
-import { Button } from '../../../button/Button';
-
-function ExpandableSidebarItem({
-  items,
-  label,
-  icon,
-  component: Component,
-  href
-}) {
-  const {
-    defaultExpanded,
-    resetExpandAll,
-    isSidebarCollapsed,
-    handleSidebarCollapseChange,
-    expandedItems
-  } = useSidebar();
-  const [expanded, setExpanded] = useState(false);
-  const [closing, setClosing] = useState(false);
-  const [ready, setReady] = useState(false);
-  useEffect(() => {
-    setReady(true);
-  }, []);
-  useEffect(() => {
-    if (expandedItems.has(href)) {
-      setExpanded(true);
-    }
-  }, [expandedItems]);
-  useEffect(() => {
-    if (defaultExpanded === null) {
-      return;
-    }
-    setExpanded(defaultExpanded);
-  }, [defaultExpanded]);
-  const handleAnimationEnd = useCallback(() => {
-    if (ready) {
-      setExpanded(!closing);
-      setClosing(false);
+export function ExpandableSidebarItem({ items, label, icon, component: Component, href, }) {
+    const { defaultExpanded, resetExpandAll, isSidebarCollapsed, handleSidebarCollapseChange, expandedItems, } = useSidebar();
+    const [expanded, setExpanded] = useState(false);
+    const [closing, setClosing] = useState(false);
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        setReady(true);
+    }, []);
+    useEffect(() => {
+        if (expandedItems.has(href)) {
+            setExpanded(true);
+        }
+    }, [expandedItems, href]);
+    useEffect(() => {
+        if (defaultExpanded === null) {
+            return;
+        }
+        setExpanded(defaultExpanded);
+    }, [defaultExpanded]);
+    const handleAnimationEnd = useCallback(() => {
+        if (ready) {
+            setExpanded(!closing);
+            setClosing(false);
+        }
+    }, [closing, ready]);
+    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);
+        if (!expanded) {
+            setExpanded(true);
+            return;
+        }
+        if (!isSidebarCollapsed && !onlyExpand) {
+            setClosing(true);
+        }
+    }, [expanded, handleSidebarCollapseChange, isSidebarCollapsed, resetExpandAll]);
+    if (!items)
+        return null;
+    if (!Component) {
+        return null;
     }
-  }, [closing, ready]);
-  const toggleAccordion = useCallback(
-    (e, onlyExpand = false) => {
-      e == null ? void 0 : e.preventDefault();
-      e == null ? void 0 : e.stopPropagation();
-      resetExpandAll();
-      handleSidebarCollapseChange == null ? void 0 : handleSidebarCollapseChange(false);
-      if (!expanded) {
-        setExpanded(true);
-        return;
-      }
-      if (!isSidebarCollapsed && !onlyExpand) {
-        setClosing(true);
-      }
-    },
-    [expanded]
-  );
-  if (!items) return null;
-  if (!Component) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${expanded ? styles.expanded : ""}`, children: [
-    /* @__PURE__ */ jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsx(
-      SidebarItemContent,
-      {
-        icon,
-        label,
-        href,
-        disableActiveStyles: expanded,
-        suffixIcon: isSidebarCollapsed ? null : /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: /* @__PURE__ */ jsx(
-          ChevronDown,
-          {
-            className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`
-          }
-        ) })
-      }
-    ) }),
-    expanded && !isSidebarCollapsed && /* @__PURE__ */ jsx(
-      "div",
-      {
-        onAnimationEnd: handleAnimationEnd,
-        className: `${styles.childrenContainer} ${closing ? "animate--collapse" : ""} ${expanded ? "animate--expand" : "visually-hidden"}`,
-        children: items.map(({ component: Component2, label: label2, icon: icon2, href: href2 }, id) => /* @__PURE__ */ jsx(SidebarItem, { component: Component2, label: label2, icon: icon2, href: href2 }, id))
-      }
-    )
-  ] });
+    return (_jsxs("div", { className: `${styles.container} ${expanded ? styles.expanded : ''}`, children: [_jsx(Component, { onClick: () => toggleAccordion(undefined, true), children: _jsx(SidebarItemContent, { icon: icon, label: label, href: href, disableActiveStyles: expanded, suffixIcon: isSidebarCollapsed ? null : (_jsx(Button, { variant: "outlined", onClick: toggleAccordion, children: _jsx(ChevronDown, { className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ''}` }) })) }) }), expanded && !isSidebarCollapsed && (_jsx("div", { onAnimationEnd: handleAnimationEnd, className: `${styles.childrenContainer} ${closing ? 'animate--collapse' : ''} ${expanded ? 'animate--expand' : 'visually-hidden'}`, children: items.map(({ component: Component, label, icon, href }, id) => (_jsx(SidebarItem, { component: Component, label: label, icon: icon, href: href }, id))) }))] }));
 }
-
-export { ExpandableSidebarItem };

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.d.ts

@@ -1,7 +1,8 @@
+import type { ReactNode, JSX } from 'react';
 interface SidebarContainerProps {
-    logo?: React.ReactNode;
+    logo?: ReactNode;
     productName?: string;
-    productLogo?: React.ReactNode;
+    productLogo?: ReactNode;
     activeLink?: string;
 }
 export declare function SidebarContainer({ logo, productName, productLogo, activeLink, }: SidebarContainerProps): JSX.Element;