@dbcdk/react-components 0.0.5 → 0.0.7

package/dist/components/nav-bar/NavBar.js

@@ -1,49 +1,19 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './NavBar.module.css';
 import { Logo } from '../../assets/logo';
-import { Headline } from '../headline/Headline';
 import { AppHeader } from '../app-header/AppHeader';
-
-function NavBar({ logo, items, productName, addition }) {
-  return /* @__PURE__ */ jsx(AppHeader, { children: /* @__PURE__ */ jsxs(
-    "nav",
-    {
-      className: styles.container,
-      "aria-label": productName ? `${productName} navigation` : "Main navigation",
-      children: [
-        logo,
-        productName && /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: styles.productName,
-            style: { display: "flex", alignItems: "center", gap: 16 },
-            children: [
-              /* @__PURE__ */ jsx(Logo, {}),
-              /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, children: productName })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("ul", { className: styles.navItems, role: "list", children: items == null ? void 0 : items.filter((i) => i.enabled !== false).map((item, id) => {
-          const { component: Component, label, icon, href, active, external } = item;
-          const linkClass = [styles.link, active ? styles.active : ""].filter(Boolean).join(" ");
-          const commonProps = {
-            className: linkClass,
-            href,
-            ...active ? { "aria-current": "page" } : {},
-            ...external ? { target: "_blank", rel: "noopener noreferrer" } : {}
-          };
-          return /* @__PURE__ */ jsx("li", { className: styles.navItem, role: "listitem", children: Component ? /* @__PURE__ */ jsxs(Component, { ...commonProps, children: [
-            icon,
-            /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
-          ] }) : /* @__PURE__ */ jsxs("a", { ...commonProps, children: [
-            icon,
-            /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
-          ] }) }, id);
-        }) }),
-        addition
-      ]
-    }
-  ) });
+import { Headline } from '../headline/Headline';
+export function NavBar({ logo, items, productName, addition }) {
+    return (_jsx(AppHeader, { children: _jsxs("nav", { className: styles.container, "aria-label": productName ? `${productName} navigation` : 'Main navigation', children: [logo, productName && (_jsxs("span", { className: styles.productName, style: { display: 'flex', alignItems: 'center', gap: 16 }, children: [_jsx(Logo, {}), _jsx(Headline, { disableMargin: true, size: 1, children: productName })] })), _jsx("ul", { className: styles.navItems, role: "list", children: items === null || items === void 0 ? void 0 : items.filter(i => i.enabled !== false).map((item, id) => {
+                        const { component: Component, label, icon, href, active, external } = item;
+                        const linkClass = [styles.link, active ? styles.active : ''].filter(Boolean).join(' ');
+                        const commonProps = {
+                            className: linkClass,
+                            href,
+                            ...(active ? { 'aria-current': 'page' } : {}),
+                            ...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {}),
+                        };
+                        return (_jsx("li", { className: styles.navItem, role: "listitem", children: Component ? (_jsxs(Component, { ...commonProps, children: [icon, _jsx("span", { className: styles.label, children: label })] })) : (_jsxs("a", { ...commonProps, children: [icon, _jsx("span", { className: styles.label, children: label })] })) }, id));
+                    }) }), addition] }) }));
 }
-
-export { NavBar };

package/dist/components/{modal → overlay/modal}/Modal.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Severity } from '@/constants/severity.types';
+import { Severity } from '../../../constants/severity.types';
 export type ModalActionConfig = {
     label: string;
     onClick?: () => void;
@@ -12,10 +12,12 @@ export type ModalProps = {
     onRequestClose: () => void;
     header?: ReactNode;
     content?: ReactNode;
+    children?: ReactNode;
     primaryAction?: ModalActionConfig;
     secondaryAction?: ModalActionConfig;
     closeOnOverlayClick?: boolean;
     severity?: Severity;
     disableContentSpacing?: boolean;
+    dataCy?: string;
 };
-export declare function Modal({ isOpen, onRequestClose, header, content, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, }: ModalProps): React.ReactNode;
+export declare function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick, severity, disableContentSpacing, isLoading, dataCy, }: ModalProps): React.ReactNode;

package/dist/components/overlay/modal/Modal.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { useEffect, useId, useRef } from 'react';
+import { Button } from '../../../components/button/Button';
+import { Headline } from '../../../components/headline/Headline';
+import styles from './Modal.module.css';
+export function Modal({ isOpen, onRequestClose, header, content, children, primaryAction, secondaryAction, closeOnOverlayClick = true, severity, disableContentSpacing = false, isLoading, dataCy, }) {
+    const titleId = useId();
+    const dialogRef = useRef(null);
+    const lastActiveElementRef = useRef(null);
+    // Always call the latest onRequestClose without re-running effects
+    const onRequestCloseRef = useRef(onRequestClose);
+    useEffect(() => {
+        onRequestCloseRef.current = onRequestClose;
+    }, [onRequestClose]);
+    // Track open transition so we only autofocus once per open
+    const wasOpenRef = useRef(false);
+    useEffect(() => {
+        var _a;
+        const wasOpen = wasOpenRef.current;
+        wasOpenRef.current = isOpen;
+        if (!isOpen)
+            return;
+        // Only do focus setup when opening (false -> true)
+        if (!wasOpen) {
+            lastActiveElementRef.current = document.activeElement;
+            const dialog = dialogRef.current;
+            if (dialog) {
+                const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+                const focusable = dialog.querySelectorAll(focusableSelectors);
+                if (focusable.length > 0) {
+                    // Prefer focusing the first input/select/textarea if present
+                    const preferred = (_a = dialog.querySelector('input, select, textarea')) !== null && _a !== void 0 ? _a : focusable[0];
+                    preferred.focus();
+                }
+                else {
+                    dialog.focus();
+                }
+            }
+        }
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onRequestCloseRef.current();
+                return;
+            }
+            if (event.key === 'Tab' && dialogRef.current) {
+                const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+                const focusable = dialogRef.current.querySelectorAll(focusableSelectors);
+                if (focusable.length === 0)
+                    return;
+                const first = focusable[0];
+                const last = focusable[focusable.length - 1];
+                if (event.shiftKey) {
+                    if (document.activeElement === first) {
+                        event.preventDefault();
+                        last.focus();
+                    }
+                }
+                else {
+                    if (document.activeElement === last) {
+                        event.preventDefault();
+                        first.focus();
+                    }
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            // Restore focus only when closing (true -> false) happens elsewhere
+            // so we do it when modal unmounts while open.
+            if (lastActiveElementRef.current) {
+                lastActiveElementRef.current.focus();
+            }
+        };
+    }, [isOpen]); // <-- IMPORTANT: only depend on isOpen
+    if (!isOpen)
+        return null;
+    const handleOverlayClick = () => {
+        if (closeOnOverlayClick) {
+            onRequestCloseRef.current();
+        }
+    };
+    const stopPropagation = e => {
+        e.stopPropagation();
+    };
+    const resolvedSecondaryAction = secondaryAction !== null && secondaryAction !== void 0 ? secondaryAction : (primaryAction ? { label: 'Luk', onClick: onRequestCloseRef.current } : undefined);
+    const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
+    const body = children !== null && children !== void 0 ? children : content;
+    return (_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, children: header })), _jsx(Button, { type: "button", variant: "inline", onClick: () => onRequestCloseRef.current(), "aria-label": "Luk", children: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", variant: "outlined", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [resolvedSecondaryAction.icon && (_jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon })), _jsx("span", { children: resolvedSecondaryAction.label })] })), primaryAction && (_jsxs(Button, { type: "button", variant: "primary", onClick: primaryAction.onClick, disabled: primaryAction.disabled || isLoading, loading: isLoading, children: [primaryAction.icon && _jsx("span", { className: styles.icon, children: primaryAction.icon }), _jsx("span", { children: primaryAction.label })] }))] }))] }) }));
+}

package/dist/components/{modal → overlay/modal}/provider/ModalProvider.d.ts

@@ -4,7 +4,6 @@ type ModalConfig = Omit<ModalProps, 'isOpen' | 'onRequestClose'> & {
     onRequestClose?: () => void;
 };
 type ConfirmModalConfig = Omit<ModalConfig, 'primaryAction' | 'secondaryAction' | 'onRequestClose'> & {
-    /** Optional labels for confirm/cancel buttons */
     confirmLabel?: string;
     cancelLabel?: string;
 };

package/dist/components/overlay/modal/provider/ModalProvider.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useState, useRef } from 'react';
+import { Modal } from '../Modal';
+const ModalContext = createContext(undefined);
+export function ModalProvider({ children }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [config, setConfig] = useState(null);
+    // Holds the resolver for the current "confirm" call, if any
+    const pendingResolverRef = useRef(null);
+    const resolvePending = useCallback((value) => {
+        if (pendingResolverRef.current) {
+            pendingResolverRef.current(value);
+            pendingResolverRef.current = null;
+        }
+    }, []);
+    const closeModal = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    const openModal = useCallback((newConfig) => {
+        // if a confirm was in progress, resolve it as "false" (cancelled/overridden)
+        resolvePending(false);
+        setConfig(newConfig);
+        setIsOpen(true);
+    }, [resolvePending]);
+    const handleRequestClose = useCallback(() => {
+        if (config === null || config === void 0 ? void 0 : config.onRequestClose) {
+            config.onRequestClose();
+        }
+        // Any non-explicit confirm click counts as "false"
+        resolvePending(false);
+        closeModal();
+    }, [config, closeModal, resolvePending]);
+    const confirm = useCallback((confirmConfig) => {
+        return new Promise(resolve => {
+            // cancel any previous pending confirm
+            resolvePending(false);
+            pendingResolverRef.current = resolve;
+            const { confirmLabel = 'Ok', cancelLabel = 'Annuller', ...rest } = confirmConfig;
+            const primaryAction = {
+                label: confirmLabel,
+                onClick: () => {
+                    resolvePending(true);
+                    closeModal();
+                },
+            };
+            const secondaryAction = {
+                label: cancelLabel,
+                onClick: () => {
+                    resolvePending(false);
+                    closeModal();
+                },
+            };
+            setConfig({
+                ...rest,
+                primaryAction,
+                secondaryAction,
+            });
+            setIsOpen(true);
+        });
+    }, [closeModal, resolvePending]);
+    return (_jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm }, children: [children, _jsx(Modal, { ...(config !== null && config !== void 0 ? config : {}), isOpen: isOpen, onRequestClose: handleRequestClose, children: config === null || config === void 0 ? void 0 : config.children })] }));
+}
+export function useModal() {
+    const ctx = useContext(ModalContext);
+    if (!ctx) {
+        throw new Error('useModal must be used within a ModalProvider');
+    }
+    return ctx;
+}

package/dist/components/overlay/side-panel/SidePanel.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { Severity } from '../../../constants/severity.types';
+interface SidePanelProps {
+    children?: ReactNode;
+    header: ReactNode;
+    headerAddition?: ReactNode;
+    actions: ReactNode;
+    onClose: () => void;
+    isOpen: boolean;
+    showBackdrop?: boolean;
+    severity?: Severity;
+    showHeaderMarker?: boolean;
+    width?: number | string;
+}
+export declare function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop, severity, showHeaderMarker, width, ...props }: SidePanelProps & HTMLAttributes<HTMLElement>): ReactNode;
+export {};

package/dist/components/overlay/side-panel/SidePanel.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { Button } from '../../../components/button/Button';
+import { Headline } from '../../../components/headline/Headline';
+import styles from './SidePanel.module.css';
+export function SidePanel({ isOpen, onClose, children, header, headerAddition, actions, showBackdrop = true, severity, showHeaderMarker = true, width = '300px', ...props }) {
+    return (_jsxs(_Fragment, { children: [isOpen && showBackdrop && (_jsx("div", { className: styles.backdrop, onClick: () => {
+                    onClose();
+                } })), _jsxs("div", { ...props, className: `${styles.sidePanel} ${isOpen ? styles.open : ''}`, style: { '--side-panel-width': width }, children: [_jsx("div", { className: styles.header, children: _jsxs("div", { className: "dbc-flex dbc-justify-between", children: [_jsx(Headline, { size: 3, disableMargin: true, severity: severity, marker: showHeaderMarker, addition: headerAddition, children: header }), _jsx(Button, { type: "button", size: "sm", variant: "inline", onClick: onClose, children: _jsx(X, {}) })] }) }), _jsx("div", { className: styles.content, children: children }), _jsx("div", { className: styles.actions, children: actions })] })] }));
+}

package/dist/components/overlay/side-panel/SidePanel.module.css

@@ -0,0 +1,56 @@
+.sidePanel {
+  padding: 0 var(--spacing-md);
+  height: 100vh;
+  width: var(--side-panel-width, 400px);
+  position: fixed;
+  right: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  transform: translateX(100%);
+  transition: transform 0.2s ease-in-out;
+  box-shadow: var(--shadow-lg);
+  z-index: var(--z-drawer);
+  background-color: var(--color-bg-surface);
+  max-height: 100vh;
+}
+
+.content {
+  flex: 1;
+  font-size: var(--font-size-sm);
+}
+
+.header {
+  position: sticky;
+  top: 0;
+  padding: var(--spacing-md) 0;
+  background: inherit;
+}
+
+.actions {
+  position: sticky;
+  padding: var(--spacing-md) 0;
+  background: inherit;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-sm);
+}
+
+.sidePanel.open {
+  transform: translateX(0);
+}
+
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--overlay-scrim);
+  z-index: var(--z-backdrop);
+}

package/dist/components/overlay/side-panel/useSidePanel.d.ts

@@ -0,0 +1,5 @@
+export declare function useSidePanel(): {
+    isOpen: boolean;
+    openSidePanel: () => void;
+    closeSidePanel: () => void;
+};

package/dist/components/overlay/side-panel/useSidePanel.js

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+export function useSidePanel() {
+    const [isOpen, setIsOpen] = useState(false);
+    const openSidePanel = () => setIsOpen(true);
+    const closeSidePanel = () => setIsOpen(false);
+    return {
+        isOpen,
+        openSidePanel,
+        closeSidePanel,
+    };
+}

package/dist/components/overlay/tooltip/Tooltip.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode, type HTMLAttributes, type ReactElement } from 'react';
+import { TooltipPlacement } from './TooltipProvider';
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
+    children: ReactNode;
+    content: ReactNode;
+    placement?: TooltipPlacement;
+    open?: boolean;
+    offset?: number;
+    delayOpenMs?: number;
+    delayCloseMs?: number;
+    className?: string;
+}
+export declare function Tooltip({ children, content, placement, open, offset, delayOpenMs, delayCloseMs, className, ...rest }: TooltipProps): ReactElement;

package/dist/components/overlay/tooltip/Tooltip.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTooltipTrigger } from './useTooltipTrigger';
+export function Tooltip({ children, content, placement = 'top', open, offset = 8, delayOpenMs, delayCloseMs, className, ...rest }) {
+    const { triggerProps } = useTooltipTrigger({
+        content,
+        placement,
+        offset,
+        open,
+        delayOpenMs,
+        delayCloseMs,
+    });
+    const rootClass = useMemo(() => ['TooltipContainer', className].filter(Boolean).join(' '), [className]);
+    if (!content)
+        return _jsx(_Fragment, { children: children });
+    return (_jsx("span", { className: rootClass, ...rest, children: _jsx("span", { className: "TooltipTrigger", tabIndex: 0, ...triggerProps, children: children }) }));
+}

package/dist/components/overlay/tooltip/Tooltip.module.css

@@ -0,0 +1,106 @@
+/* Layout neutral wrapper */
+.container {
+  display: contents;
+}
+
+/* Measurable trigger box without forcing full width */
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+}
+
+.trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--border-radius-default);
+}
+
+/* Bubble */
+.bubble {
+  position: fixed;
+  z-index: var(--z-tooltip);
+  pointer-events: none;
+
+  background: var(--color-fg-default);
+  color: var(--color-fg-on-strong);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-tight);
+  padding: var(--spacing-xxs) var(--spacing-sm);
+  border-radius: var(--border-radius-default);
+
+  /*
+    ✅ Width behavior:
+    - Don't let it run wild horizontally
+    - But don't clip: allow wrap
+    - Keep some relation to viewport
+  */
+  max-width: min(360px, calc(100vw - 16px));
+  white-space: normal;
+  overflow-wrap: break-word; /* wrap long words nicely */
+  word-break: normal;
+
+  /*
+    If your tooltips often include URLs/IDs, consider 'anywhere' instead:
+    overflow-wrap: anywhere;
+  */
+
+  /* Optional: nicer shadow than box-shadow for rounded bubble */
+  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.22));
+
+  /* Hidden by default */
+  opacity: 0;
+  visibility: hidden;
+
+  /* Base transform gets overridden by placement rules below */
+  transform: translate3d(0, 0, 0);
+
+  transition:
+    opacity var(--transition-fast),
+    transform var(--transition-fast),
+    visibility 0s linear var(--transition-fast);
+}
+
+.bubble[data-open='true'] {
+  opacity: 1;
+  visibility: visible;
+  transition:
+    opacity var(--transition-fast),
+    transform var(--transition-fast),
+    visibility 0s;
+}
+
+/* Placement-based motion (so it “comes from” the trigger) */
+.bubble[data-placement='top'] {
+  transform: translate3d(0, -6px, 0);
+}
+.bubble[data-placement='bottom'] {
+  transform: translate3d(0, 6px, 0);
+}
+.bubble[data-placement='left'] {
+  transform: translate3d(-6px, 0, 0);
+}
+.bubble[data-placement='right'] {
+  transform: translate3d(6px, 0, 0);
+}
+
+/* Open state resets transform to 0 for all placements */
+.bubble[data-open='true'][data-placement='top'],
+.bubble[data-open='true'][data-placement='bottom'],
+.bubble[data-open='true'][data-placement='left'],
+.bubble[data-open='true'][data-placement='right'] {
+  transform: translate3d(0, 0, 0);
+}
+
+.bubble svg {
+  height: 20px;
+  width: 20px;
+  flex: 0 0 auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bubble {
+    transition: none;
+    transform: none;
+  }
+}

package/dist/components/overlay/tooltip/TooltipProvider.d.ts

@@ -0,0 +1,20 @@
+import React, { type ReactNode } from 'react';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipState = {
+    id: string;
+    open: boolean;
+    content: ReactNode;
+    placement: TooltipPlacement;
+    offset: number;
+    triggerEl: HTMLElement | null;
+};
+export type TooltipContextValue = {
+    show: (next: Omit<TooltipState, 'open'>) => void;
+    hide: (id: string) => void;
+    update: (id: string, patch: Partial<Omit<TooltipState, 'id'>>) => void;
+    active: TooltipState | null;
+};
+export declare const TooltipContext: React.Context<TooltipContextValue | null>;
+export declare function TooltipProvider({ children }: {
+    children: ReactNode;
+}): React.ReactElement;