@dbcdk/react-components 0.0.169 → 0.0.171

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.module.css

@@ -0,0 +1,47 @@
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--border-radius-default);
+}
+
+.itemRow {
+  position: relative;
+  display: block;
+  border-radius: var(--border-radius-md);
+}
+
+.toggleButton {
+  position: absolute;
+  inset-inline-end: var(--spacing-xs);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container button {
+  min-block-size: 28px !important;
+  min-inline-size: 28px !important;
+  max-block-size: 28px !important;
+  max-inline-size: 28px !important;
+  border-color: transparent !important;
+  background-color: transparent !important;
+}
+
+.toggleButtonControl {
+  opacity: 0;
+}
+
+.childrenContainer {
+  overflow: hidden;
+}
+
+.chevron {
+  transition: transform 0.3s ease;
+}
+
+.chevronExpanded {
+  transform: rotate(180deg);
+}

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

@@ -0,0 +1,220 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var logo = require('../../../../assets/logo');
+var Button = require('../../../../components/button/Button');
+var Headline = require('../../../../components/headline/Headline');
+var SidebarItems = require('../../../../components/sidebar/components/sidebar-items/SidebarItems');
+var SidenavFiltering = require('../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering');
+var SidebarProvider = require('../../../../components/sidebar/providers/SidebarProvider');
+var styles = require('./SidebarContainer.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var SidenavFiltering__default = /*#__PURE__*/_interopDefault(SidenavFiltering);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function readStoredWidth(key) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return null;
+    const num = Number(raw);
+    return Number.isFinite(num) ? num : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredWidth(key, value) {
+  try {
+    localStorage.setItem(key, String(Math.round(value)));
+  } catch {
+  }
+}
+function removeStoredWidth(key) {
+  try {
+    localStorage.removeItem(key);
+  } catch {
+  }
+}
+function SidebarContainer({
+  logo: logo$1,
+  productName,
+  productLogo,
+  activeLink,
+  version,
+  hideSearch,
+  searchPlaceholder = "Filtrer menu",
+  showSettings = false,
+  footer,
+  resizable,
+  defaultWidth = 240,
+  minWidth = 160,
+  storageKey
+}) {
+  const { isSidebarCollapsed, handleSidebarCollapseChange } = SidebarProvider.useSidebar();
+  const [sidebarWidth, setSidebarWidth] = react.useState(defaultWidth);
+  const [manualWidth, setManualWidth] = react.useState(null);
+  const [isResizing, setIsResizing] = react.useState(false);
+  const [ariaMaxWidth, setAriaMaxWidth] = react.useState(void 0);
+  const containerRef = react.useRef(null);
+  const draggingRef = react.useRef(false);
+  const pointerIdRef = react.useRef(null);
+  const startXRef = react.useRef(0);
+  const startWidthRef = react.useRef(0);
+  const maxWidthRef = react.useRef(Infinity);
+  const getMaxWidth = react.useCallback(() => {
+    const viewportWidth = typeof window !== "undefined" ? window.innerWidth || document.documentElement.clientWidth : Infinity;
+    return Math.max(minWidth, viewportWidth - minWidth);
+  }, [minWidth]);
+  react.useEffect(() => {
+    if (!storageKey) return;
+    const stored = readStoredWidth(storageKey);
+    if (stored === null) return;
+    setManualWidth(stored);
+    setSidebarWidth(stored);
+  }, [storageKey]);
+  react.useEffect(() => {
+    if (!storageKey) return;
+    if (manualWidth === null) {
+      removeStoredWidth(storageKey);
+      return;
+    }
+    writeStoredWidth(storageKey, manualWidth);
+  }, [manualWidth, storageKey]);
+  react.useEffect(() => {
+    setAriaMaxWidth(getMaxWidth());
+  }, [getMaxWidth]);
+  react.useEffect(() => {
+    return () => {
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, []);
+  const updateWidth = react.useCallback((nextWidth) => {
+    setManualWidth(nextWidth);
+    setSidebarWidth(nextWidth);
+  }, []);
+  const onResizePointerDown = react.useCallback(
+    (e) => {
+      const maxWidth = getMaxWidth();
+      if (maxWidth === null) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      maxWidthRef.current = maxWidth;
+      draggingRef.current = true;
+      pointerIdRef.current = e.pointerId;
+      startXRef.current = e.clientX;
+      startWidthRef.current = sidebarWidth;
+      setIsResizing(true);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "col-resize";
+    },
+    [getMaxWidth, sidebarWidth]
+  );
+  const onResizePointerMove = react.useCallback(
+    (e) => {
+      if (!draggingRef.current) return;
+      if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current) return;
+      const next = startWidthRef.current + (e.clientX - startXRef.current);
+      updateWidth(clamp(next, minWidth, maxWidthRef.current));
+    },
+    [minWidth, updateWidth]
+  );
+  const endResizeDrag = react.useCallback(() => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    pointerIdRef.current = null;
+    setIsResizing(false);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, []);
+  const resetWidth = react.useCallback(() => {
+    setManualWidth(null);
+    setSidebarWidth(clamp(defaultWidth, minWidth, getMaxWidth()));
+  }, [defaultWidth, getMaxWidth, minWidth]);
+  const onKeyDown = react.useCallback(
+    (e) => {
+      const maxWidth = getMaxWidth();
+      const step = e.shiftKey ? 32 : 8;
+      let next = null;
+      if (e.key === "ArrowLeft") next = sidebarWidth - step;
+      if (e.key === "ArrowRight") next = sidebarWidth + step;
+      if (e.key === "Home") next = minWidth;
+      if (e.key === "End") next = maxWidth;
+      if (next === null) return;
+      e.preventDefault();
+      updateWidth(clamp(next, minWidth, maxWidth));
+    },
+    [getMaxWidth, minWidth, sidebarWidth, updateWidth]
+  );
+  const containerStyle = react.useMemo(
+    () => ({
+      "--sidebar-width": `${sidebarWidth}px`
+    }),
+    [sidebarWidth]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      role: "complementary",
+      className: `${styles__default.default.container} ${isSidebarCollapsed ? styles__default.default.collapsed : ""} ${isResizing ? styles__default.default.resizing : ""}`,
+      style: containerStyle,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.productHeader, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.productGroup, children: productLogo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.productLogo, children: productLogo }) : productName && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.productNameLabel, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.productNameSquare }),
+            /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, allowWrap: false, children: productName })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button.Button,
+            {
+              size: "sm",
+              variant: "inline",
+              shape: "round",
+              "aria-label": "Collapse sidebar",
+              tooltip: isSidebarCollapsed ? "Vis sidebj\xE6lke" : "Skjul sidebj\xE6lke",
+              icon: isSidebarCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftOpen, { className: styles__default.default.sidebarIcon }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { className: styles__default.default.sidebarIcon }),
+              onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed)
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
+          !hideSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.filter, children: /* @__PURE__ */ jsxRuntime.jsx(SidenavFiltering__default.default, { placeholder: searchPlaceholder, showSettings }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.links} hideScrollBar`, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItems.SidebarItems, { activeLink }) })
+        ] }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.footerSlot, children: footer }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.footer, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.companyLogo, children: logo$1 != null ? logo$1 : /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}) }),
+          version && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.version} dbc-muted-text dbc-sm-text`, children: version })
+        ] }),
+        resizable && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles__default.default.resizeHandle,
+            role: "separator",
+            "aria-label": "Resize sidebar",
+            "aria-orientation": "vertical",
+            "aria-valuemin": Math.round(minWidth),
+            "aria-valuemax": ariaMaxWidth !== void 0 ? Math.round(ariaMaxWidth) : void 0,
+            "aria-valuenow": Math.round(sidebarWidth),
+            tabIndex: isSidebarCollapsed ? -1 : 0,
+            onPointerDown: onResizePointerDown,
+            onPointerMove: onResizePointerMove,
+            onPointerUp: endResizeDrag,
+            onPointerCancel: endResizeDrag,
+            onDoubleClick: resetWidth,
+            onKeyDown
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.SidebarContainer = SidebarContainer;

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

@@ -0,0 +1,18 @@
+import type { JSX, ReactNode } from 'react';
+interface SidebarContainerProps {
+    logo?: ReactNode;
+    productName?: string;
+    productLogo?: ReactNode;
+    activeLink?: string;
+    version?: string | number;
+    hideSearch?: boolean;
+    searchPlaceholder?: string;
+    showSettings?: boolean;
+    footer?: ReactNode;
+    resizable?: boolean;
+    defaultWidth?: number;
+    minWidth?: number;
+    storageKey?: string;
+}
+export declare function SidebarContainer({ logo, productName, productLogo, activeLink, version, hideSearch, searchPlaceholder, showSettings, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarContainerProps): JSX.Element;
+export {};

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

@@ -0,0 +1,213 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { PanelLeftOpen, PanelLeft } from 'lucide-react';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { Logo } from '../../../../assets/logo';
+import { Button } from '../../../../components/button/Button';
+import { Headline } from '../../../../components/headline/Headline';
+import { SidebarItems } from '../../../../components/sidebar/components/sidebar-items/SidebarItems';
+import SidenavFiltering from '../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering';
+import { useSidebar } from '../../../../components/sidebar/providers/SidebarProvider';
+import styles from './SidebarContainer.module.css';
+
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function readStoredWidth(key) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return null;
+    const num = Number(raw);
+    return Number.isFinite(num) ? num : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredWidth(key, value) {
+  try {
+    localStorage.setItem(key, String(Math.round(value)));
+  } catch {
+  }
+}
+function removeStoredWidth(key) {
+  try {
+    localStorage.removeItem(key);
+  } catch {
+  }
+}
+function SidebarContainer({
+  logo,
+  productName,
+  productLogo,
+  activeLink,
+  version,
+  hideSearch,
+  searchPlaceholder = "Filtrer menu",
+  showSettings = false,
+  footer,
+  resizable,
+  defaultWidth = 240,
+  minWidth = 160,
+  storageKey
+}) {
+  const { isSidebarCollapsed, handleSidebarCollapseChange } = useSidebar();
+  const [sidebarWidth, setSidebarWidth] = useState(defaultWidth);
+  const [manualWidth, setManualWidth] = useState(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const [ariaMaxWidth, setAriaMaxWidth] = useState(void 0);
+  const containerRef = useRef(null);
+  const draggingRef = useRef(false);
+  const pointerIdRef = useRef(null);
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(0);
+  const maxWidthRef = useRef(Infinity);
+  const getMaxWidth = useCallback(() => {
+    const viewportWidth = typeof window !== "undefined" ? window.innerWidth || document.documentElement.clientWidth : Infinity;
+    return Math.max(minWidth, viewportWidth - minWidth);
+  }, [minWidth]);
+  useEffect(() => {
+    if (!storageKey) return;
+    const stored = readStoredWidth(storageKey);
+    if (stored === null) return;
+    setManualWidth(stored);
+    setSidebarWidth(stored);
+  }, [storageKey]);
+  useEffect(() => {
+    if (!storageKey) return;
+    if (manualWidth === null) {
+      removeStoredWidth(storageKey);
+      return;
+    }
+    writeStoredWidth(storageKey, manualWidth);
+  }, [manualWidth, storageKey]);
+  useEffect(() => {
+    setAriaMaxWidth(getMaxWidth());
+  }, [getMaxWidth]);
+  useEffect(() => {
+    return () => {
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, []);
+  const updateWidth = useCallback((nextWidth) => {
+    setManualWidth(nextWidth);
+    setSidebarWidth(nextWidth);
+  }, []);
+  const onResizePointerDown = useCallback(
+    (e) => {
+      const maxWidth = getMaxWidth();
+      if (maxWidth === null) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      maxWidthRef.current = maxWidth;
+      draggingRef.current = true;
+      pointerIdRef.current = e.pointerId;
+      startXRef.current = e.clientX;
+      startWidthRef.current = sidebarWidth;
+      setIsResizing(true);
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "col-resize";
+    },
+    [getMaxWidth, sidebarWidth]
+  );
+  const onResizePointerMove = useCallback(
+    (e) => {
+      if (!draggingRef.current) return;
+      if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current) return;
+      const next = startWidthRef.current + (e.clientX - startXRef.current);
+      updateWidth(clamp(next, minWidth, maxWidthRef.current));
+    },
+    [minWidth, updateWidth]
+  );
+  const endResizeDrag = useCallback(() => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    pointerIdRef.current = null;
+    setIsResizing(false);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, []);
+  const resetWidth = useCallback(() => {
+    setManualWidth(null);
+    setSidebarWidth(clamp(defaultWidth, minWidth, getMaxWidth()));
+  }, [defaultWidth, getMaxWidth, minWidth]);
+  const onKeyDown = useCallback(
+    (e) => {
+      const maxWidth = getMaxWidth();
+      const step = e.shiftKey ? 32 : 8;
+      let next = null;
+      if (e.key === "ArrowLeft") next = sidebarWidth - step;
+      if (e.key === "ArrowRight") next = sidebarWidth + step;
+      if (e.key === "Home") next = minWidth;
+      if (e.key === "End") next = maxWidth;
+      if (next === null) return;
+      e.preventDefault();
+      updateWidth(clamp(next, minWidth, maxWidth));
+    },
+    [getMaxWidth, minWidth, sidebarWidth, updateWidth]
+  );
+  const containerStyle = useMemo(
+    () => ({
+      "--sidebar-width": `${sidebarWidth}px`
+    }),
+    [sidebarWidth]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      role: "complementary",
+      className: `${styles.container} ${isSidebarCollapsed ? styles.collapsed : ""} ${isResizing ? styles.resizing : ""}`,
+      style: containerStyle,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsxs("div", { className: styles.productHeader, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.productGroup, children: productLogo ? /* @__PURE__ */ jsx("div", { className: styles.productLogo, children: productLogo }) : productName && /* @__PURE__ */ jsxs("span", { className: styles.productNameLabel, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.productNameSquare }),
+            /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, allowWrap: false, children: productName })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "inline",
+              shape: "round",
+              "aria-label": "Collapse sidebar",
+              tooltip: isSidebarCollapsed ? "Vis sidebj\xE6lke" : "Skjul sidebj\xE6lke",
+              icon: isSidebarCollapsed ? /* @__PURE__ */ jsx(PanelLeftOpen, { className: styles.sidebarIcon }) : /* @__PURE__ */ jsx(PanelLeft, { className: styles.sidebarIcon }),
+              onClick: () => handleSidebarCollapseChange(!isSidebarCollapsed)
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+          !hideSearch && /* @__PURE__ */ jsx("div", { className: styles.filter, children: /* @__PURE__ */ jsx(SidenavFiltering, { placeholder: searchPlaceholder, showSettings }) }),
+          /* @__PURE__ */ jsx("div", { className: `${styles.links} hideScrollBar`, children: /* @__PURE__ */ jsx(SidebarItems, { activeLink }) })
+        ] }),
+        footer && /* @__PURE__ */ jsx("div", { className: styles.footerSlot, children: footer }),
+        /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.companyLogo, children: logo != null ? logo : /* @__PURE__ */ jsx(Logo, {}) }),
+          version && /* @__PURE__ */ jsx("div", { className: `${styles.version} dbc-muted-text dbc-sm-text`, children: version })
+        ] }),
+        resizable && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.resizeHandle,
+            role: "separator",
+            "aria-label": "Resize sidebar",
+            "aria-orientation": "vertical",
+            "aria-valuemin": Math.round(minWidth),
+            "aria-valuemax": ariaMaxWidth !== void 0 ? Math.round(ariaMaxWidth) : void 0,
+            "aria-valuenow": Math.round(sidebarWidth),
+            tabIndex: isSidebarCollapsed ? -1 : 0,
+            onPointerDown: onResizePointerDown,
+            onPointerMove: onResizePointerMove,
+            onPointerUp: endResizeDrag,
+            onPointerCancel: endResizeDrag,
+            onDoubleClick: resetWidth,
+            onKeyDown
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { SidebarContainer };