@dbcdk/react-components 0.0.167 → 0.0.169

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

@@ -1,47 +0,0 @@
-.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

@@ -1,220 +0,0 @@
-'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

@@ -1,18 +0,0 @@
-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

@@ -1,213 +0,0 @@
-'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 };