@dbcdk/react-components 0.0.3 → 0.0.5

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

@@ -1,15 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useState, useRef, useEffect, useMemo } from 'react';
 import { Search } from 'lucide-react';
-import { Input } from '../input/Input';
-import { Menu } from '../menu/Menu';
-import { Popover } from '../popover/Popover';
-import { Button } from '../button/Button';
-import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+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 styles from './SearchBox.module.css';
 
-const SearchBox = forwardRef(function SearchBox2({
-  width,
+const SearchBox = forwardRef(function SearchBoxInner({
+  inputWidth,
   inputSize,
   variant,
   result,
@@ -26,9 +26,12 @@ const SearchBox = forwardRef(function SearchBox2({
   loading,
   enableHotkey = true,
   onButtonClick,
+  value,
+  onChange,
   ...rest
 }, ref) {
-  const [query, setQuery] = useState("");
+  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);
@@ -39,18 +42,24 @@ const SearchBox = forwardRef(function SearchBox2({
       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) {
-      const handler = setTimeout(() => {
-        setSearchQuery(query);
-        onSearch(query);
-      }, debounceMs);
-      return () => clearTimeout(handler);
-    } else {
-      onSearch(query);
+    if (!debounce) {
+      setSearchQuery(draft);
+      onSearch(draft);
+      return;
     }
-  }, [query, onSearch, debounce]);
+    const handler = setTimeout(() => {
+      setSearchQuery(draft);
+      onSearch(draft);
+    }, debounceMs);
+    return () => clearTimeout(handler);
+  }, [draft, onSearch, debounce, debounceMs]);
   useEffect(() => {
     function handleKeyDown(event) {
       var _a;
@@ -65,7 +74,8 @@ const SearchBox = forwardRef(function SearchBox2({
     }
   }, [enableHotkey]);
   const handleChange = (e) => {
-    setQuery(e.target.value);
+    setDraft(e.target.value);
+    onChange == null ? void 0 : onChange(e);
   };
   function handleSelect(item) {
     onSelect == null ? void 0 : onSelect(item);
@@ -73,12 +83,15 @@ const SearchBox = forwardRef(function SearchBox2({
   }
   function reset() {
     var _a;
-    setQuery("");
+    setDraft("");
     setSearchQuery("");
     (_a = popoverRef.current) == null ? void 0 : _a.close();
   }
-  rest.value = query;
-  rest.onChange = handleChange;
+  const inputProps = {
+    ...rest,
+    value: draft,
+    onChange: handleChange
+  };
   const inputField = useMemo(() => {
     var _a;
     if (displayPopover) {
@@ -93,30 +106,30 @@ const SearchBox = forwardRef(function SearchBox2({
               Input,
               {
                 ref: internalInputRef,
-                onInput: handleChange,
                 onFocusCapture: event,
                 onClick: event,
-                minWidth: width != null ? width : "300px",
+                minWidth: inputWidth != null ? inputWidth : "300px",
+                width: inputWidth != null ? inputWidth : "300px",
                 icon: /* @__PURE__ */ jsx(Search, {}),
                 inputSize,
-                ...rest,
+                variant,
+                ...inputProps,
                 placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
               }
             );
           },
-          children: (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 value = item[key] ? String(item[key]) : "";
+          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: String(value.length < 10 ? "nowrap" : "")
-                },
-                children: String(item[key])
+                style: { whiteSpace: cell.length < 10 ? "nowrap" : void 0 },
+                children: cell
               },
-              String(key)
+              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%" }) }, String(key))) }, index)) }) }) : /* @__PURE__ */ jsx("div", { className: styles.resultContainer, children: noResultText })
+          }) }, 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 })
         }
       );
     }
@@ -124,12 +137,11 @@ const SearchBox = forwardRef(function SearchBox2({
       Input,
       {
         ref: internalInputRef,
-        onInput: handleChange,
         icon: /* @__PURE__ */ jsx(Search, {}),
-        minWidth: width != null ? width : "300px",
+        minWidth: inputWidth != null ? inputWidth : "300px",
         inputSize,
         variant,
-        ...rest,
+        ...inputProps,
         placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
       }
     );
@@ -142,10 +154,11 @@ const SearchBox = forwardRef(function SearchBox2({
     initialTemplate,
     searchQuery,
     loading,
-    width,
+    inputWidth,
     inputSize,
     variant,
-    rest
+    inputProps,
+    rest.placeholder
   ]);
   return onButtonClick ? /* @__PURE__ */ jsxs("div", { className: styles.withButton, children: [
     inputField,

package/dist/components/search-box/SearchBox.module.css

@@ -17,4 +17,3 @@
 .withButton button {
   border-radius: 0 var(--border-radius-default) var(--border-radius-default) 0;
 }
-

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

@@ -17,12 +17,11 @@ const SegmentedProgressBar = ({
   centerLabel,
   height,
   rounded = true,
-  trackColor = "var(--color-secondary)",
+  trackColor = "var(--color-neutral)",
   tooltipPlacement = "top",
   className,
   ...aria
 }) => {
-  var _a;
   const sum = segments.reduce((acc, s) => acc + (s.value || 0), 0);
   const effectiveTotal = total != null ? total : sum;
   const safeTotal = Math.max(effectiveTotal, 1e-4);
@@ -38,6 +37,7 @@ const SegmentedProgressBar = ({
     return base.join("/");
   })();
   const rootClass = [styles__default.default.container, className].filter(Boolean).join(" ");
+  const filteredSergments = computedSegments == null ? void 0 : computedSegments.filter((x) => x.value > 0);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -57,9 +57,9 @@ const SegmentedProgressBar = ({
             background: trackColor
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.segmentsContainer, children: (_a = computedSegments == null ? void 0 : computedSegments.filter((x) => x.value > 0)) == null ? void 0 : _a.map((seg, i) => {
-              var _a2, _b, _c, _d, _e;
-              const bg = (_b = seg.color) != null ? _b : severity.SeverityBgColor[(_a2 = seg.severity) != null ? _a2 : "neutral"];
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.segmentsContainer, children: filteredSergments == null ? void 0 : filteredSergments.map((seg, i) => {
+              var _a, _b, _c, _d, _e;
+              const bg = (_b = seg.color) != null ? _b : severity.SeverityBgColor[(_a = seg.severity) != null ? _a : "neutral"];
               const fg = severity.SeverityTextColor[(_c = seg.severity) != null ? _c : "neutral"];
               const tooltipText = typeof seg.label !== "undefined" ? seg.label : String((_d = seg.value) != null ? _d : 0);
               return /* @__PURE__ */ jsxRuntime.jsx(
@@ -86,7 +86,13 @@ const SegmentedProgressBar = ({
                 `${i}`
               );
             }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.progressCenter, children: centerLabel ? typeof centerLabel === "function" ? centerLabel(pctFilled) : centerLabel : autoNumbers })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: `${styles__default.default.progressCenter} ${(filteredSergments == null ? void 0 : filteredSergments.length) === 0 ? styles__default.default.emptySegments : ""}`,
+                children: centerLabel ? typeof centerLabel === "function" ? centerLabel(pctFilled) : centerLabel : autoNumbers
+              }
+            )
           ]
         }
       )

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

@@ -11,12 +11,11 @@ const SegmentedProgressBar = ({
   centerLabel,
   height,
   rounded = true,
-  trackColor = "var(--color-secondary)",
+  trackColor = "var(--color-neutral)",
   tooltipPlacement = "top",
   className,
   ...aria
 }) => {
-  var _a;
   const sum = segments.reduce((acc, s) => acc + (s.value || 0), 0);
   const effectiveTotal = total != null ? total : sum;
   const safeTotal = Math.max(effectiveTotal, 1e-4);
@@ -32,6 +31,7 @@ const SegmentedProgressBar = ({
     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",
     {
@@ -51,9 +51,9 @@ const SegmentedProgressBar = ({
             background: trackColor
           },
           children: [
-            /* @__PURE__ */ jsx("span", { className: styles.segmentsContainer, children: (_a = computedSegments == null ? void 0 : computedSegments.filter((x) => x.value > 0)) == null ? void 0 : _a.map((seg, i) => {
-              var _a2, _b, _c, _d, _e;
-              const bg = (_b = seg.color) != null ? _b : SeverityBgColor[(_a2 = seg.severity) != null ? _a2 : "neutral"];
+            /* @__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(
@@ -80,7 +80,13 @@ const SegmentedProgressBar = ({
                 `${i}`
               );
             }) }),
-            /* @__PURE__ */ jsx("div", { className: styles.progressCenter, children: centerLabel ? typeof centerLabel === "function" ? centerLabel(pctFilled) : centerLabel : autoNumbers })
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `${styles.progressCenter} ${(filteredSergments == null ? void 0 : filteredSergments.length) === 0 ? styles.emptySegments : ""}`,
+                children: centerLabel ? typeof centerLabel === "function" ? centerLabel(pctFilled) : centerLabel : autoNumbers
+              }
+            )
           ]
         }
       )

package/dist/components/segmented-progress-bar/SegmentedProgressBar.module.css

@@ -24,11 +24,15 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-text-inverse);
+  color: var(--color-fg-on-strong);
   font-size: inherit;
   pointer-events: none;
 }
 
+.emptySegments.progressCenter {
+  color: unset;
+}
+
 .segmentWrapper,
 .segmentsContainer {
   display: flex;

package/dist/components/select/Select.cjs

@@ -15,31 +15,100 @@ function Select({
   placeholder = "V\xE6lg",
   size,
   variant = "outlined",
-  onClear
+  onClear,
+  fullWidth = false
 }) {
-  const ref = react.useRef(null);
+  const popoverRef = react.useRef(null);
+  const optionRefs = react.useRef([]);
+  const selectedIndex = options.findIndex((o) => o.value === selectedValue);
+  const [activeIndex, setActiveIndex] = react.useState(selectedIndex >= 0 ? selectedIndex : 0);
+  react.useEffect(() => {
+    var _a;
+    (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+  }, [activeIndex]);
+  const handleKeyDown = (e) => {
+    var _a, _b;
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, options.length - 1));
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+        break;
+      }
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        const opt = options[activeIndex];
+        if (opt) {
+          onChange(opt.value);
+          (_a = popoverRef.current) == null ? void 0 : _a.close();
+        }
+        break;
+      }
+      case "Escape": {
+        e.preventDefault();
+        (_b = popoverRef.current) == null ? void 0 : _b.close();
+        break;
+      }
+    }
+  };
   const selected = options.find((o) => o.value === selectedValue);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Popover.Popover,
     {
-      ref,
-      trigger: (onClick, icon) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant, onClick, size, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: selected ? selected.label : placeholder }),
-        onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear }),
-        icon
-      ] }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: options.map((opt) => {
-        const isActive = opt.value === selectedValue;
-        return /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: isActive, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      ref: popoverRef,
+      trigger: (onClick, icon) => /* @__PURE__ */ jsxRuntime.jsx(
+        Button.Button,
+        {
+          onKeyDown: handleKeyDown,
+          fullWidth,
+          variant,
+          onClick: (e) => {
+            setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+            onClick(e);
+          },
+          size,
+          type: "button",
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
+              style: { width: "100%" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: selected ? selected.label : placeholder }),
+                onClear && selected && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear }),
+                icon
+              ]
+            }
+          )
+        }
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { onKeyDown: handleKeyDown, children: options.map((opt, index) => {
+        const isSelected = opt.value === selectedValue;
+        const isActive = index === activeIndex;
+        return /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: isActive, "aria-selected": isSelected, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
+            ref: (el) => optionRefs.current[index] = el,
+            type: "button",
+            tabIndex: isActive ? 0 : -1,
             onClick: () => {
               var _a;
               onChange(opt.value);
-              (_a = ref.current) == null ? void 0 : _a.close();
+              (_a = popoverRef.current) == null ? void 0 : _a.close();
+            },
+            onFocus: () => setActiveIndex(index),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              width: "100%"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : null }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : null }),
               opt.label
             ]
           }

package/dist/components/select/Select.d.ts

@@ -1,6 +1,6 @@
 import { ButtonVariant } from '../button/Button';
 import { MultiselectOption } from '../filter-field/FilterField';
-export declare function Select({ options, selectedValue, onChange, placeholder, size, variant, onClear, }: {
+export declare function Select({ options, selectedValue, onChange, placeholder, size, variant, onClear, fullWidth, }: {
     options: MultiselectOption[];
     selectedValue: string | null;
     onChange: (value: string) => void;
@@ -8,4 +8,5 @@ export declare function Select({ options, selectedValue, onChange, placeholder,
     size?: 'sm' | 'md' | 'lg';
     variant?: ButtonVariant;
     onClear?: () => void;
+    fullWidth?: boolean;
 }): React.ReactNode;

package/dist/components/select/Select.js

@@ -4,7 +4,7 @@ import { Menu } from '../menu/Menu';
 import { Popover } from '../popover/Popover';
 import { Button } from '../button/Button';
 import { ClearButton } from '../clear-button/ClearButton';
-import { useRef } from 'react';
+import { useRef, useState, useEffect } from 'react';
 
 function Select({
   options,
@@ -13,31 +13,100 @@ function Select({
   placeholder = "V\xE6lg",
   size,
   variant = "outlined",
-  onClear
+  onClear,
+  fullWidth = false
 }) {
-  const ref = useRef(null);
+  const popoverRef = useRef(null);
+  const optionRefs = useRef([]);
+  const selectedIndex = options.findIndex((o) => o.value === selectedValue);
+  const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
+  useEffect(() => {
+    var _a;
+    (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+  }, [activeIndex]);
+  const handleKeyDown = (e) => {
+    var _a, _b;
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, options.length - 1));
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+        break;
+      }
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        const opt = options[activeIndex];
+        if (opt) {
+          onChange(opt.value);
+          (_a = popoverRef.current) == null ? void 0 : _a.close();
+        }
+        break;
+      }
+      case "Escape": {
+        e.preventDefault();
+        (_b = popoverRef.current) == null ? void 0 : _b.close();
+        break;
+      }
+    }
+  };
   const selected = options.find((o) => o.value === selectedValue);
   return /* @__PURE__ */ jsx(
     Popover,
     {
-      ref,
-      trigger: (onClick, icon) => /* @__PURE__ */ jsxs(Button, { variant, onClick, size, children: [
-        /* @__PURE__ */ jsx("span", { children: selected ? selected.label : placeholder }),
-        onClear && selected && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }),
-        icon
-      ] }),
-      children: /* @__PURE__ */ jsx(Menu, { children: options.map((opt) => {
-        const isActive = opt.value === selectedValue;
-        return /* @__PURE__ */ jsx(Menu.Item, { active: isActive, children: /* @__PURE__ */ jsxs(
+      ref: popoverRef,
+      trigger: (onClick, icon) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          onKeyDown: handleKeyDown,
+          fullWidth,
+          variant,
+          onClick: (e) => {
+            setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+            onClick(e);
+          },
+          size,
+          type: "button",
+          children: /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs",
+              style: { width: "100%" },
+              children: [
+                /* @__PURE__ */ jsx("span", { children: selected ? selected.label : placeholder }),
+                onClear && selected && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear }),
+                icon
+              ]
+            }
+          )
+        }
+      ),
+      children: /* @__PURE__ */ jsx(Menu, { onKeyDown: handleKeyDown, children: options.map((opt, index) => {
+        const isSelected = opt.value === selectedValue;
+        const isActive = index === activeIndex;
+        return /* @__PURE__ */ jsx(Menu.Item, { active: isActive, "aria-selected": isSelected, children: /* @__PURE__ */ jsxs(
           "button",
           {
+            ref: (el) => optionRefs.current[index] = el,
+            type: "button",
+            tabIndex: isActive ? 0 : -1,
             onClick: () => {
               var _a;
               onChange(opt.value);
-              (_a = ref.current) == null ? void 0 : _a.close();
+              (_a = popoverRef.current) == null ? void 0 : _a.close();
+            },
+            onFocus: () => setActiveIndex(index),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              width: "100%"
             },
             children: [
-              /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isActive ? /* @__PURE__ */ jsx(Check, {}) : null }),
+              /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: isSelected ? /* @__PURE__ */ jsx(Check, {}) : null }),
               opt.label
             ]
           }

package/dist/components/sidebar/Sidebar.cjs

@@ -1,38 +1,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./Sidebar.module.css');
-var Headline = require('../headline/Headline');
-var SidenavFiltering = require('./components/sidenav-filteirng/SidenavFiltering');
 var SidebarProvider = require('./providers/SidebarProvider');
-var SidebarItems = require('./components/sidebar-items/SidebarItems');
-var logo = require('../../assets/logo');
+var SidebarContainer = require('./components/sidebar-container/SidebarContainer');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-var SidenavFiltering__default = /*#__PURE__*/_interopDefault(SidenavFiltering);
-
-function Sidebar({
-  collapsed,
-  items,
-  logo: logo$1,
-  productName,
-  productLogo,
-  activeLink
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.header, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.logo, children: logo$1 != null ? logo$1 : /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}) }),
-      productName && /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, children: productName }),
-      productLogo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.productLogo, children: productLogo })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider.SidebarProvider, { items, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SidenavFiltering__default.default, {}),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.links, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItems.SidebarItems, { activeLink }) })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.footer })
-  ] });
+function Sidebar({ items, productLogo, activeLink }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider.SidebarProvider, { items, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarContainer.SidebarContainer, { productLogo, activeLink }) });
 }
 
 exports.Sidebar = Sidebar;

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

@@ -2,11 +2,12 @@ import React from 'react';
 import { NavBarItem } from '../nav-bar/NavBar';
 interface SidebarProps {
     collapsed?: boolean;
+    onCollapseChange?: (collapsed: boolean) => void;
     items: NavBarItem[];
     logo?: React.ReactNode;
     productName?: string;
     productLogo?: React.ReactNode;
     activeLink?: string;
 }
-export declare function Sidebar({ collapsed, items, logo, productName, productLogo, activeLink, }: SidebarProps): JSX.Element;
+export declare function Sidebar({ items, productLogo, activeLink }: SidebarProps): JSX.Element;
 export {};

package/dist/components/sidebar/Sidebar.js

@@ -1,31 +1,9 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styles from './Sidebar.module.css';
-import { Headline } from '../headline/Headline';
-import SidenavFiltering from './components/sidenav-filteirng/SidenavFiltering';
+import { jsx } from 'react/jsx-runtime';
 import { SidebarProvider } from './providers/SidebarProvider';
-import { SidebarItems } from './components/sidebar-items/SidebarItems';
-import { Logo } from '../../assets/logo';
+import { SidebarContainer } from './components/sidebar-container/SidebarContainer';
 
-function Sidebar({
-  collapsed,
-  items,
-  logo,
-  productName,
-  productLogo,
-  activeLink
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-      /* @__PURE__ */ jsx("div", { className: styles.logo, children: logo != null ? logo : /* @__PURE__ */ jsx(Logo, {}) }),
-      productName && /* @__PURE__ */ jsx(Headline, { disableMargin: true, children: productName }),
-      productLogo && /* @__PURE__ */ jsx("div", { className: styles.productLogo, children: productLogo })
-    ] }),
-    /* @__PURE__ */ jsx(SidebarProvider, { items, children: /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
-      /* @__PURE__ */ jsx(SidenavFiltering, {}),
-      /* @__PURE__ */ jsx("div", { className: styles.links, children: /* @__PURE__ */ jsx(SidebarItems, { activeLink }) })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: styles.footer })
-  ] });
+function Sidebar({ items, productLogo, activeLink }) {
+  return /* @__PURE__ */ jsx(SidebarProvider, { items, children: /* @__PURE__ */ jsx(SidebarContainer, { productLogo, activeLink }) });
 }
 
 export { Sidebar };

package/dist/components/sidebar/components/SidebarItem.cjs

@@ -9,7 +9,9 @@ function SidebarItem({
   icon,
   href
 }) {
-  if (!Component) return null;
+  if (!Component) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItemContent.SidebarItemContent, { icon, label, href }) });
 }