@dbcdk/react-components 0.0.5 → 0.0.7

package/dist/components/pagination/Pagination.js

@@ -1,127 +1,44 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight, ChevronDown, ChevronsLeft, ChevronsRight } from 'lucide-react';
 import { useMemo, useCallback } from 'react';
 import styles from './Pagination.module.css';
 import { Button } from '../button/Button';
-import { ChevronsLeft, ArrowLeft, ArrowRight, ChevronsRight, ChevronDown } from 'lucide-react';
-import { Popover } from '../popover/Popover';
 import { Menu } from '../menu/Menu';
-
+import { Popover } from '../popover/Popover';
 const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
-function Pagination({
-  itemsCount = 0,
-  skip = 0,
-  take = DEFAULT_PAGE_SIZE_OPTIONS[1],
-  onPageChange,
-  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
-  showFirstLast = true,
-  showGoToPage = true
-}) {
-  const totalPages = useMemo(
-    () => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))),
-    [itemsCount, take]
-  );
-  const currentPage = useMemo(() => {
-    const p = Math.floor(skip / Math.max(1, take)) + 1;
-    return Math.min(Math.max(1, p), totalPages);
-  }, [skip, take, totalPages]);
-  const emit = useCallback(
-    (page, nextTake = take) => {
-      const nextTotalPages = Math.max(1, Math.ceil(itemsCount / Math.max(1, nextTake)));
-      const clampedPage = Math.min(Math.max(1, page), nextTotalPages);
-      const nextSkip = (clampedPage - 1) * nextTake;
-      onPageChange == null ? void 0 : onPageChange({
-        page: clampedPage,
-        take: nextTake,
-        skip: nextSkip,
-        totalPages: nextTotalPages
-      });
-    },
-    [onPageChange, take, itemsCount]
-  );
-  const firstPage = useCallback(() => emit(1), [emit]);
-  const lastPage = useCallback(() => emit(totalPages), [emit, totalPages]);
-  const prevPage = useCallback(() => emit(currentPage - 1), [emit, currentPage]);
-  const nextPage = useCallback(() => emit(currentPage + 1), [emit, currentPage]);
-  const goToPage = useCallback((page) => emit(page), [emit]);
-  const canPrev = currentPage > 1;
-  const canNext = currentPage < totalPages;
-  const rangeLabel = useMemo(() => {
-    if (itemsCount <= 0) return "0 af 0";
-    const first = skip + 1;
-    const last = Math.min(skip + take, itemsCount);
-    return `${first.toLocaleString("da-DK")}\u2013${last.toLocaleString("da-DK")} af ${itemsCount.toLocaleString("da-DK")}`;
-  }, [itemsCount, skip, take]);
-  const pages = useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
-  const handlePageSizeChange = useCallback((size) => emit(1, size), [emit]);
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    showFirstLast && /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "sm",
-        icon: /* @__PURE__ */ jsx(ChevronsLeft, {}),
-        disabled: !canPrev,
-        onClick: firstPage,
-        "aria-label": "First page"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "sm",
-        icon: /* @__PURE__ */ jsx(ArrowLeft, {}),
-        disabled: !canPrev,
-        onClick: prevPage,
-        "aria-label": "Previous page"
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: styles.range, "aria-live": "polite", children: rangeLabel }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "sm",
-        icon: /* @__PURE__ */ jsx(ArrowRight, {}),
-        disabled: !canNext,
-        onClick: nextPage,
-        "aria-label": "Next page"
-      }
-    ),
-    showFirstLast && /* @__PURE__ */ jsx(
-      Button,
-      {
-        size: "sm",
-        icon: /* @__PURE__ */ jsx(ChevronsRight, {}),
-        disabled: !canNext,
-        onClick: lastPage,
-        "aria-label": "Last page"
-      }
-    ),
-    showGoToPage && /* @__PURE__ */ jsx(
-      Popover,
-      {
-        trigger: (open) => /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: [
-          "Side ",
-          currentPage,
-          "/",
-          totalPages,
-          " ",
-          /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
-        ] }),
-        children: /* @__PURE__ */ jsx(Menu, { children: pages.map((page) => /* @__PURE__ */ jsx(Menu.Item, { active: page === currentPage, children: /* @__PURE__ */ jsx("button", { onClick: () => goToPage(page), children: page }) }, page)) })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Popover,
-      {
-        trigger: (open) => /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: [
-          "Vis ",
-          take,
-          " ",
-          /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
-        ] }),
-        children: /* @__PURE__ */ jsx(Menu, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(Menu.Item, { active: size === take, children: /* @__PURE__ */ jsx("button", { onClick: () => handlePageSizeChange(size), children: size }) }, size)) })
-      }
-    )
-  ] });
+export function Pagination({ itemsCount = 0, skip = 0, take = DEFAULT_PAGE_SIZE_OPTIONS[1], onPageChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, showFirstLast = true, showGoToPage = true, }) {
+    const totalPages = useMemo(() => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))), [itemsCount, take]);
+    const currentPage = useMemo(() => {
+        const p = Math.floor(skip / Math.max(1, take)) + 1;
+        return Math.min(Math.max(1, p), totalPages);
+    }, [skip, take, totalPages]);
+    const emit = useCallback((page, nextTake = take) => {
+        const nextTotalPages = Math.max(1, Math.ceil(itemsCount / Math.max(1, nextTake)));
+        const clampedPage = Math.min(Math.max(1, page), nextTotalPages);
+        const nextSkip = (clampedPage - 1) * nextTake;
+        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange({
+            page: clampedPage,
+            take: nextTake,
+            skip: nextSkip,
+            totalPages: nextTotalPages,
+        });
+    }, [onPageChange, take, itemsCount]);
+    const firstPage = useCallback(() => emit(1), [emit]);
+    const lastPage = useCallback(() => emit(totalPages), [emit, totalPages]);
+    const prevPage = useCallback(() => emit(currentPage - 1), [emit, currentPage]);
+    const nextPage = useCallback(() => emit(currentPage + 1), [emit, currentPage]);
+    const goToPage = useCallback((page) => emit(page), [emit]);
+    const canPrev = currentPage > 1;
+    const canNext = currentPage < totalPages;
+    const rangeLabel = useMemo(() => {
+        if (itemsCount <= 0)
+            return '0 af 0';
+        const first = skip + 1;
+        const last = Math.min(skip + take, itemsCount);
+        return `${first.toLocaleString('da-DK')}\u2013${last.toLocaleString('da-DK')} af ${itemsCount.toLocaleString('da-DK')}`;
+    }, [itemsCount, skip, take]);
+    const pages = useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
+    const handlePageSizeChange = useCallback((size) => emit(1, size), [emit]);
+    return (_jsxs("div", { className: styles.container, children: [showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsLeft, {}), disabled: !canPrev, onClick: firstPage, "aria-label": "First page" })), _jsx(Button, { size: "sm", icon: _jsx(ArrowLeft, {}), disabled: !canPrev, onClick: prevPage, "aria-label": "Previous page" }), _jsx("div", { className: styles.range, "aria-live": "polite", children: rangeLabel }), _jsx(Button, { size: "sm", icon: _jsx(ArrowRight, {}), disabled: !canNext, onClick: nextPage, "aria-label": "Next page" }), showFirstLast && (_jsx(Button, { size: "sm", icon: _jsx(ChevronsRight, {}), disabled: !canNext, onClick: lastPage, "aria-label": "Last page" })), showGoToPage && (_jsx(Popover, { trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Side ", currentPage, "/", totalPages, " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pages.map(page => (_jsx(Menu.Item, { active: page === currentPage, children: _jsx("button", { onClick: () => goToPage(page), children: page }) }, page))) }) })), _jsx(Popover, { trigger: open => (_jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: ["Vis ", take, " ", _jsx(ChevronDown, { size: 16 })] })), children: _jsx(Menu, { children: pageSizeOptions.map(size => (_jsx(Menu.Item, { active: size === take, children: _jsx("button", { onClick: () => handlePageSizeChange(size), children: size }) }, size))) }) })] }));
 }
-
-export { Pagination };

package/dist/components/panel/Panel.d.ts

@@ -1,10 +1,11 @@
+import type { ReactNode, JSX } from 'react';
 interface PanelProps {
     header: string;
-    headerIcon?: React.ReactNode;
+    headerIcon?: ReactNode;
     severity?: Severity;
-    children: React.ReactNode;
+    children: ReactNode;
     size?: 'sm' | 'md' | 'lg';
 }
-import { Severity } from '@/constants/severity.types';
+import { Severity } from '../../constants/severity.types';
 export declare function Panel({ header, headerIcon, children, severity, size }: PanelProps): JSX.Element;
 export {};

package/dist/components/panel/Panel.js

@@ -1,12 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Headline } from '../headline/Headline';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Panel.module.css';
-
-function Panel({ header, headerIcon, children, severity, size }) {
-  return /* @__PURE__ */ jsxs("section", { className: `${styles.container} ${size ? styles[size] : ""}`, children: [
-    /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 3, icon: headerIcon, severity, children: header }) }),
-    /* @__PURE__ */ jsx("div", { className: styles.content, children })
-  ] });
+import { Headline } from '../headline/Headline';
+export function Panel({ header, headerIcon, children, severity, size }) {
+    return (_jsxs("section", { className: `${styles.container} ${size ? styles[size] : ''}`, children: [_jsx("div", { className: styles.header, children: _jsx(Headline, { disableMargin: true, size: 3, icon: headerIcon, severity: severity, children: header }) }), _jsx("div", { className: styles.content, children: children })] }));
 }
-
-export { Panel };

package/dist/components/popover/Popover.d.ts

@@ -6,6 +6,7 @@ interface PopoverProps {
     matchTriggerWidth?: boolean;
     viewportPadding?: number;
     edgeBuffer?: number;
+    dataCy?: string;
 }
 export interface PopoverHandle {
     close: () => void;

package/dist/components/popover/Popover.js

@@ -1,143 +1,118 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import styles from './Popover.module.css';
-import { ChevronUp, ChevronDown } from 'lucide-react';
-
-const Popover = forwardRef(function Popover2({
-  trigger: Trigger,
-  children,
-  minWidth = "200px",
-  matchTriggerWidth = true,
-  viewportPadding = 8,
-  edgeBuffer = 100
-}, ref) {
-  const [pos, setPos] = useState({ top: 0, left: 0, width: 0, visible: false });
-  const containerRef = useRef(null);
-  const contentRef = useRef(null);
-  const computeAndSetPosition = useCallback(
-    (show) => {
-      const container = containerRef.current;
-      const content = contentRef.current;
-      if (!container || !content) return;
-      const triggerRect = container.getBoundingClientRect();
-      const prevVis = content.style.visibility;
-      const prevDisp = content.style.display;
-      const prevMinWidth = content.style.minWidth;
-      const prevWidth = content.style.width;
-      content.style.visibility = "hidden";
-      content.style.display = "block";
-      content.style.minWidth = minWidth;
-      content.style.width = "auto";
-      const minWidthPx = content.offsetWidth;
-      const desiredWidthPx = Math.max(matchTriggerWidth ? triggerRect.width : 0, minWidthPx);
-      content.style.minWidth = `${desiredWidthPx}px`;
-      content.style.width = `${desiredWidthPx}px`;
-      const contentWidth = content.offsetWidth;
-      const contentHeight = content.offsetHeight;
-      content.style.visibility = prevVis;
-      content.style.display = prevDisp;
-      content.style.minWidth = prevMinWidth;
-      content.style.width = prevWidth;
-      const vw = window.innerWidth;
-      const vh = window.innerHeight;
-      const spaceAbove = Math.max(0, triggerRect.top);
-      const spaceBelow = Math.max(0, vh - triggerRect.bottom);
-      const spaceLeft = Math.max(0, triggerRect.left);
-      const spaceRight = Math.max(0, vw - triggerRect.right);
-      const preferBelow = spaceBelow >= contentHeight + edgeBuffer || spaceBelow >= spaceAbove;
-      const spacing = viewportPadding;
-      const rawTop = preferBelow ? triggerRect.bottom + spacing : triggerRect.top - contentHeight - spacing;
-      const placeRightOfLeftEdge = spaceRight >= contentWidth + edgeBuffer;
-      const placeLeftOfRightEdge = spaceLeft >= contentWidth + edgeBuffer;
-      let rawLeft;
-      if (placeRightOfLeftEdge) {
-        rawLeft = triggerRect.left;
-      } else if (placeLeftOfRightEdge) {
-        rawLeft = triggerRect.right - contentWidth;
-      } else {
-        rawLeft = triggerRect.left + (triggerRect.width - contentWidth) / 2;
-      }
-      const clampedLeft = Math.max(
-        viewportPadding,
-        Math.min(rawLeft, vw - contentWidth - viewportPadding)
-      );
-      const clampedTop = Math.max(
-        viewportPadding,
-        Math.min(rawTop, vh - contentHeight - viewportPadding)
-      );
-      setPos({ top: clampedTop, left: clampedLeft, width: desiredWidthPx, visible: show });
-    },
-    [edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]
-  );
-  const openPopover = useCallback(
-    (e) => {
-      if (pos.visible) {
-        setPos((p) => ({ ...p, visible: false }));
-        return;
-      }
-      computeAndSetPosition(true);
-      e == null ? void 0 : e.stopPropagation();
-    },
-    [pos.visible, computeAndSetPosition]
-  );
-  const closePopover = useCallback(() => {
-    setPos((p) => ({ ...p, visible: false }));
-  }, []);
-  useImperativeHandle(
-    ref,
-    () => ({
-      close: closePopover,
-      open: () => computeAndSetPosition(true),
-      isOpen: () => !!pos.visible
-    }),
-    [closePopover, computeAndSetPosition, pos.visible]
-  );
-  useEffect(() => {
-    if (!pos.visible) return;
-    const handleClickOutside = (e) => {
-      if (containerRef.current && contentRef.current && !containerRef.current.contains(e.target) && !contentRef.current.contains(e.target)) {
-        closePopover();
-      }
-    };
-    const handleEscape = (e) => {
-      if (e.key === "Escape") closePopover();
-    };
-    const handleReposition = () => computeAndSetPosition(true);
-    document.addEventListener("click", handleClickOutside);
-    document.addEventListener("keydown", handleEscape, true);
-    window.addEventListener("resize", handleReposition);
-    window.addEventListener("scroll", handleReposition, true);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape, true);
-      window.removeEventListener("resize", handleReposition);
-      window.removeEventListener("scroll", handleReposition, true);
-    };
-  }, [pos.visible, closePopover, computeAndSetPosition]);
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, ref: containerRef, children: [
-    Trigger(openPopover, pos.visible ? /* @__PURE__ */ jsx(ChevronUp, { size: 20 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 20 })),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: contentRef,
-        className: styles.content,
-        style: {
-          top: pos.top,
-          left: pos.left,
-          visibility: pos.visible ? "visible" : "hidden",
-          minWidth: pos.width ? `${pos.width}px` : minWidth,
-          width: pos.width ? `${pos.width}px` : void 0,
-          maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
-          maxHeight: `calc(100vh - ${viewportPadding * 2}px)`,
-          overflow: "auto"
-        },
-        role: "dialog",
-        "aria-hidden": !pos.visible,
-        children: typeof children === "function" ? children(closePopover) : children
-      }
-    )
-  ] });
+export const Popover = forwardRef(function Popover({ trigger: Trigger, children, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, }, ref) {
+    const [pos, setPos] = useState({ top: 0, left: 0, width: 0, visible: false });
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    const computeAndSetPosition = useCallback((show) => {
+        const container = containerRef.current;
+        const content = contentRef.current;
+        if (!container || !content)
+            return;
+        const triggerRect = container.getBoundingClientRect();
+        const prevVis = content.style.visibility;
+        const prevDisp = content.style.display;
+        const prevMinWidth = content.style.minWidth;
+        const prevWidth = content.style.width;
+        content.style.visibility = 'hidden';
+        content.style.display = 'block';
+        content.style.minWidth = minWidth;
+        content.style.width = 'auto';
+        const minWidthPx = content.offsetWidth;
+        const desiredWidthPx = Math.max(matchTriggerWidth ? triggerRect.width : 0, minWidthPx);
+        // Now apply desired width and re-measure final size (height may depend on width).
+        content.style.minWidth = `${desiredWidthPx}px`;
+        content.style.width = `${desiredWidthPx}px`;
+        const contentWidth = content.offsetWidth;
+        const contentHeight = content.offsetHeight;
+        content.style.visibility = prevVis;
+        content.style.display = prevDisp;
+        content.style.minWidth = prevMinWidth;
+        content.style.width = prevWidth;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const spaceAbove = Math.max(0, triggerRect.top);
+        const spaceBelow = Math.max(0, vh - triggerRect.bottom);
+        const spaceLeft = Math.max(0, triggerRect.left);
+        const spaceRight = Math.max(0, vw - triggerRect.right);
+        const preferBelow = spaceBelow >= contentHeight + edgeBuffer || spaceBelow >= spaceAbove;
+        const spacing = viewportPadding;
+        const rawTop = preferBelow
+            ? triggerRect.bottom + spacing
+            : triggerRect.top - contentHeight - spacing;
+        const placeRightOfLeftEdge = spaceRight >= contentWidth + edgeBuffer;
+        const placeLeftOfRightEdge = spaceLeft >= contentWidth + edgeBuffer;
+        let rawLeft;
+        if (placeRightOfLeftEdge) {
+            rawLeft = triggerRect.left; // align left edges
+        }
+        else if (placeLeftOfRightEdge) {
+            rawLeft = triggerRect.right - contentWidth; // align right edges
+        }
+        else {
+            rawLeft = triggerRect.left + (triggerRect.width - contentWidth) / 2;
+        }
+        const clampedLeft = Math.max(viewportPadding, Math.min(rawLeft, vw - contentWidth - viewportPadding));
+        const clampedTop = Math.max(viewportPadding, Math.min(rawTop, vh - contentHeight - viewportPadding));
+        setPos({ top: clampedTop, left: clampedLeft, width: desiredWidthPx, visible: show });
+    }, [edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]);
+    const openPopover = useCallback((e) => {
+        if (pos.visible) {
+            setPos(p => ({ ...p, visible: false }));
+            return;
+        }
+        computeAndSetPosition(true);
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+    }, [pos.visible, computeAndSetPosition]);
+    const closePopover = useCallback(() => {
+        setPos(p => ({ ...p, visible: false }));
+    }, []);
+    useImperativeHandle(ref, () => ({
+        close: closePopover,
+        open: () => computeAndSetPosition(true),
+        isOpen: () => !!pos.visible,
+    }), [closePopover, computeAndSetPosition, pos.visible]);
+    useEffect(() => {
+        if (!pos.visible)
+            return;
+        const handleClickOutside = (e) => {
+            if (containerRef.current &&
+                contentRef.current &&
+                !containerRef.current.contains(e.target) &&
+                !contentRef.current.contains(e.target)) {
+                closePopover();
+            }
+        };
+        const handleEscape = (e) => {
+            if (e.key === 'Escape')
+                closePopover();
+        };
+        const handleReposition = () => computeAndSetPosition(true);
+        document.addEventListener('click', handleClickOutside);
+        document.addEventListener('keydown', handleEscape, true);
+        window.addEventListener('resize', handleReposition);
+        window.addEventListener('scroll', handleReposition, true);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+            document.removeEventListener('keydown', handleEscape, true);
+            window.removeEventListener('resize', handleReposition);
+            window.removeEventListener('scroll', handleReposition, true);
+        };
+    }, [pos.visible, closePopover, computeAndSetPosition]);
+    return (_jsxs("div", { className: styles.container, ref: containerRef, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: [Trigger(openPopover, pos.visible ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 })), _jsx("div", { ref: contentRef, className: styles.content, style: {
+                    top: pos.top,
+                    left: pos.left,
+                    visibility: pos.visible ? 'visible' : 'hidden',
+                    minWidth: pos.width ? `${pos.width}px` : minWidth,
+                    width: pos.width ? `${pos.width}px` : undefined,
+                    maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
+                    maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), 400px)`,
+                    overflow: 'auto',
+                }, role: "dialog", "aria-hidden": !pos.visible, children: typeof children === 'function'
+                    ? children(closePopover)
+                    : children })] }));
 });
-Popover.displayName = "Popover";
-
-export { Popover };
+Popover.displayName = 'Popover';

package/dist/components/search-box/SearchBox.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { InputVariant } from '@/components/input/Input';
-import { Size } from '@/types/sizes.types';
+import { InputVariant } from '../../components/forms/input/Input';
+import { Size } from '../../types/sizes.types';
 type SearchBoxProps<T extends Record<string, unknown>> = {
     inputWidth?: string | number;
     inputSize?: Size;