@dbcdk/react-components 0.0.44 → 0.0.46

package/dist/components/menu/Menu.js

@@ -10,8 +10,10 @@ const isInteractiveEl = (el) => React.isValidElement(el) &&
     (typeof el.type === 'string' ? el.type === 'a' || el.type === 'button' : true);
 function applyMenuItemPropsToElement(child, opts) {
     var _a, _b, _c, _d;
-    const { active, disabled, role, tabIndex = -1, className } = opts;
-    const childClass = [styles.item, active ? styles.active : ''].filter(Boolean).join(' ');
+    const { active, selected, disabled, role, tabIndex = -1, className } = opts;
+    const childClass = [styles.item, active ? styles.active : '', selected ? styles.selected : '']
+        .filter(Boolean)
+        .join(' ');
     const nextImmediate = React.cloneElement(child, {
         className: [child.props.className, styles.interactiveChild, className]
             .filter(Boolean)
@@ -22,7 +24,7 @@ function applyMenuItemPropsToElement(child, opts) {
         return React.cloneElement(child, {
             role: (_a = child.props.role) !== null && _a !== void 0 ? _a : role,
             tabIndex: (_b = child.props.tabIndex) !== null && _b !== void 0 ? _b : tabIndex,
-            'aria-selected': active || undefined,
+            'aria-selected': selected || undefined,
             'aria-disabled': disabled || undefined,
             className: [child.props.className, styles.interactive, childClass, className]
                 .filter(Boolean)
@@ -34,7 +36,7 @@ function applyMenuItemPropsToElement(child, opts) {
     return React.cloneElement(nextImmediate, {
         role: (_c = nextImmediate.props.role) !== null && _c !== void 0 ? _c : role,
         tabIndex: (_d = nextImmediate.props.tabIndex) !== null && _d !== void 0 ? _d : tabIndex,
-        'aria-selected': active || undefined,
+        'aria-selected': selected || undefined,
         'aria-disabled': disabled || undefined,
         className: [nextImmediate.props.className, styles.interactive, childClass]
             .filter(Boolean)
@@ -42,16 +44,21 @@ function applyMenuItemPropsToElement(child, opts) {
         disabled,
     });
 }
-const MenuItem = React.forwardRef(({ children, active, disabled, className, itemRole, ...liProps }, ref) => {
+const MenuItem = React.forwardRef(({ children, active, selected, disabled, className, itemRole, ...liProps }, ref) => {
     // If caller sets itemRole prop, use it; otherwise attempt to inherit from parent Menu via data attr.
     // (We can’t reliably read parent props here without context; simplest is: caller passes itemRole on Menu.Item when needed.)
     const resolvedRole = itemRole !== null && itemRole !== void 0 ? itemRole : 'menuitem';
     if (isInteractiveEl(children)) {
         const child = children;
-        return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: applyMenuItemPropsToElement(child, { active, disabled, role: resolvedRole }) }));
+        return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: applyMenuItemPropsToElement(child, { active, selected, disabled, role: resolvedRole }) }));
     }
     // Fallback: wrap non-interactive children in a <button>
-    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("button", { role: resolvedRole, tabIndex: -1, "aria-selected": active || undefined, "aria-disabled": disabled || undefined, className: [styles.interactive, styles.item, active ? styles.active : '']
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("button", { role: resolvedRole, tabIndex: -1, "aria-selected": selected || undefined, "aria-disabled": disabled || undefined, className: [
+                styles.interactive,
+                styles.item,
+                active ? styles.active : '',
+                selected ? styles.selected : '',
+            ]
                 .filter(Boolean)
                 .join(' '), type: "button", disabled: disabled, children: children }) }));
 });

package/dist/components/menu/Menu.module.css

@@ -1,4 +1,3 @@
-/* Menu.module.css */
 .container {
   list-style: none;
   margin: 0;
@@ -11,11 +10,11 @@
 }
 
 .container > li + li {
-  margin-block-start: var(--spacing-2xs);
+  margin-block-start: var(--spacing-xxs);
 }
 
 .row {
-  display: contents;
+  display: block;
 }
 
 /* Applied to actual interactive elements (button/a/custom that forwards className) */
@@ -29,7 +28,7 @@
   text-decoration: none;
 
   /* choose your density */
-  padding-block: var(--spacing-xs);
+  padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-md);
 
   background: transparent;
@@ -70,7 +69,7 @@
   display: flex;
   align-items: flex-start;
   inline-size: 100%;
-  padding-block: var(--spacing-xxs);
+  padding-block: 2px;
   padding-inline: var(--spacing-md);
   border-radius: var(--border-radius-sm);
 }
@@ -90,8 +89,8 @@
 }
 
 /* Hover: support both cases (interactive element, or wrapper child) */
-.interactive:hover,
-.row:hover > .interactiveChild {
+.interactive:hover:not(.selected),
+.row:hover > .interactiveChild:not(.selected) {
   background-color: var(--color-bg-hover-subtle);
 }
 
@@ -107,10 +106,17 @@
   box-shadow: var(--focus-ring);
 }
 
-/* Selected/active (legacy + item variant) */
+/* Keyboard active/current item */
 .active,
+.interactive.active,
+.row > .interactiveChild.active {
+  background-color: var(--color-bg-hover-subtle);
+}
+
+/* Selected item */
+.selected,
 .interactive[aria-selected='true'],
-.row > .interactiveChild.active,
+.row > .interactiveChild.selected,
 .row > .interactiveChild[aria-selected='true'] {
   background-color: var(--color-bg-selected);
   color: var(--color-fg-default);

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

@@ -1,7 +1,8 @@
 '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 { useEffect, useId, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Button } from '../../../components/button/Button';
 import { Headline } from '../../../components/headline/Headline';
 import styles from './Modal.module.css';
@@ -9,11 +10,15 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
     const titleId = useId();
     const dialogRef = useRef(null);
     const lastActiveElementRef = useRef(null);
+    const [mounted, setMounted] = useState(false);
     // Always call the latest onRequestClose without re-running effects
     const onRequestCloseRef = useRef(onRequestClose);
     useEffect(() => {
         onRequestCloseRef.current = onRequestClose;
     }, [onRequestClose]);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
     // Track open transition so we only autofocus once per open
     const wasOpenRef = useRef(false);
     useEffect(() => {
@@ -72,7 +77,7 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
             }
         };
     }, [isOpen]);
-    if (!isOpen)
+    if (!isOpen || !mounted)
         return null;
     const handleOverlayClick = () => {
         if (closeOnOverlayClick) {
@@ -86,7 +91,7 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
     const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
     const body = children !== null && children !== void 0 ? children : content;
     const resolvedWidth = typeof width === 'number' ? `${width}px` : typeof width === 'string' ? width : undefined;
-    return (_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, style: resolvedWidth
+    return createPortal(_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, style: resolvedWidth
                 ? { ['--modal-width']: resolvedWidth }
-                : undefined, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, tabIndex: -1, 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", shape: "round", icon: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", 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: primaryAction.severity || '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 })] }))] }))] }) }));
+                : undefined, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, tabIndex: -1, 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", shape: "round", icon: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", 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: primaryAction.severity || '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 })] }))] }))] }) }), document.body);
 }

package/dist/hooks/useListNavigation.d.ts

@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction } from 'react';
+import type { KeyboardEvent, RefObject } from 'react';
+interface UseListNavigationProps<T> {
+    options: T[];
+    getLabel: (option: T) => string;
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    searchInputRef?: RefObject<HTMLInputElement | null>;
+    searchable?: boolean;
+    focusActiveOptionOnOpen?: boolean;
+    typeaheadTimeoutMs?: number;
+    getInitialActiveIndex?: (options: T[]) => number;
+}
+interface UseListNavigationResult {
+    activeIndex: number;
+    setActiveIndex: Dispatch<SetStateAction<number>>;
+    optionRefs: RefObject<(HTMLButtonElement | null)[]>;
+    resetActiveIndex: () => void;
+    clearTypeahead: () => void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    focusActiveOption: () => void;
+}
+export declare function useListNavigation<T>({ options, getLabel, isOpen, onOpenChange, searchInputRef, searchable, focusActiveOptionOnOpen, typeaheadTimeoutMs, getInitialActiveIndex, }: UseListNavigationProps<T>): UseListNavigationResult;
+export {};

package/dist/hooks/useListNavigation.js

@@ -0,0 +1,234 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+export function useListNavigation({ options, getLabel, isOpen, onOpenChange, searchInputRef, searchable = false, focusActiveOptionOnOpen = true, typeaheadTimeoutMs = 500, getInitialActiveIndex, }) {
+    const optionRefs = useRef([]);
+    const typeaheadRef = useRef('');
+    const typeaheadTimeoutRef = useRef(null);
+    const normalizedLabels = useMemo(() => options.map(option => getLabel(option).trim().toLocaleLowerCase()), [options, getLabel]);
+    const getDefaultInitialIndex = useCallback((items) => {
+        if (items.length === 0)
+            return -1;
+        if (getInitialActiveIndex) {
+            const nextIndex = getInitialActiveIndex(items);
+            if (nextIndex < 0)
+                return -1;
+            return Math.min(nextIndex, items.length - 1);
+        }
+        return searchable ? -1 : 0;
+    }, [getInitialActiveIndex, searchable]);
+    const [activeIndex, setActiveIndex] = useState(() => getDefaultInitialIndex(options));
+    const clearTypeahead = useCallback(() => {
+        typeaheadRef.current = '';
+        if (typeaheadTimeoutRef.current) {
+            clearTimeout(typeaheadTimeoutRef.current);
+            typeaheadTimeoutRef.current = null;
+        }
+    }, []);
+    const focusActiveOption = useCallback(() => {
+        var _a;
+        if (activeIndex < 0 || options.length === 0)
+            return;
+        (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [activeIndex, options.length]);
+    const resetActiveIndex = useCallback(() => {
+        setActiveIndex(getDefaultInitialIndex(options));
+    }, [getDefaultInitialIndex, options]);
+    useEffect(() => {
+        return () => {
+            if (typeaheadTimeoutRef.current)
+                clearTimeout(typeaheadTimeoutRef.current);
+        };
+    }, []);
+    useEffect(() => {
+        setActiveIndex(current => {
+            if (options.length === 0)
+                return -1;
+            if (current < 0)
+                return current;
+            return Math.min(current, options.length - 1);
+        });
+    }, [options]);
+    useEffect(() => {
+        optionRefs.current = optionRefs.current.slice(0, options.length);
+    }, [options.length]);
+    useEffect(() => {
+        if (!isOpen || !focusActiveOptionOnOpen)
+            return;
+        if (searchable && document.activeElement === (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current))
+            return;
+        focusActiveOption();
+    }, [activeIndex, focusActiveOption, focusActiveOptionOnOpen, isOpen, searchable, searchInputRef]);
+    const moveNext = useCallback(() => {
+        if (options.length === 0)
+            return;
+        setActiveIndex(index => {
+            if (index < 0)
+                return 0;
+            return Math.min(index + 1, options.length - 1);
+        });
+    }, [options.length]);
+    const movePrev = useCallback(() => {
+        if (options.length === 0)
+            return;
+        setActiveIndex(index => {
+            if (index < 0)
+                return options.length - 1;
+            return Math.max(index - 1, 0);
+        });
+    }, [options.length]);
+    const moveFirst = useCallback(() => {
+        if (options.length === 0)
+            return;
+        setActiveIndex(0);
+    }, [options.length]);
+    const moveLast = useCallback(() => {
+        if (options.length === 0)
+            return;
+        setActiveIndex(options.length - 1);
+    }, [options.length]);
+    const findTypeaheadMatch = useCallback((query, startIndex) => {
+        if (!query || options.length === 0)
+            return -1;
+        const normalizedQuery = query.trim().toLocaleLowerCase();
+        if (!normalizedQuery)
+            return -1;
+        const safeStartIndex = startIndex < 0 ? -1 : startIndex;
+        for (let step = 1; step <= options.length; step += 1) {
+            const index = (safeStartIndex + step + options.length) % options.length;
+            const label = normalizedLabels[index];
+            if (label === null || label === void 0 ? void 0 : label.startsWith(normalizedQuery))
+                return index;
+        }
+        return -1;
+    }, [normalizedLabels, options.length]);
+    const handleTypeahead = useCallback((key) => {
+        const nextBuffer = `${typeaheadRef.current}${key.toLocaleLowerCase()}`;
+        const repeatedChar = new Set(nextBuffer).size === 1;
+        let nextIndex = findTypeaheadMatch(nextBuffer, activeIndex);
+        let appliedBuffer = nextBuffer;
+        if (nextIndex < 0 && repeatedChar) {
+            appliedBuffer = key.toLocaleLowerCase();
+            nextIndex = findTypeaheadMatch(appliedBuffer, activeIndex);
+        }
+        if (typeaheadTimeoutRef.current)
+            clearTimeout(typeaheadTimeoutRef.current);
+        typeaheadRef.current = appliedBuffer;
+        typeaheadTimeoutRef.current = setTimeout(() => {
+            typeaheadRef.current = '';
+            typeaheadTimeoutRef.current = null;
+        }, typeaheadTimeoutMs);
+        if (nextIndex < 0)
+            return;
+        setActiveIndex(nextIndex);
+        if (!isOpen)
+            onOpenChange(true);
+    }, [activeIndex, findTypeaheadMatch, isOpen, onOpenChange, typeaheadTimeoutMs]);
+    const handleKeyDown = useCallback((e) => {
+        var _a;
+        const isSearchInputTarget = searchable && e.target === (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current);
+        if (isSearchInputTarget) {
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!isOpen) {
+                        onOpenChange(true);
+                        return;
+                    }
+                    moveNext();
+                    return;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (!isOpen) {
+                        onOpenChange(true);
+                        return;
+                    }
+                    movePrev();
+                    return;
+                case 'Home':
+                    if (!isOpen)
+                        return;
+                    e.preventDefault();
+                    moveFirst();
+                    return;
+                case 'End':
+                    if (!isOpen)
+                        return;
+                    e.preventDefault();
+                    moveLast();
+                    return;
+                case 'Escape':
+                    e.preventDefault();
+                    onOpenChange(false);
+                    return;
+            }
+            return;
+        }
+        if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && !/\s/.test(e.key)) {
+            e.preventDefault();
+            handleTypeahead(e.key);
+            return;
+        }
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!isOpen) {
+                    onOpenChange(true);
+                    return;
+                }
+                moveNext();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (!isOpen) {
+                    onOpenChange(true);
+                    return;
+                }
+                if (searchable &&
+                    activeIndex === 0 &&
+                    optionRefs.current[activeIndex] === document.activeElement) {
+                    (_a = searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    setActiveIndex(-1);
+                    return;
+                }
+                movePrev();
+                break;
+            case 'Home':
+                if (!isOpen)
+                    return;
+                e.preventDefault();
+                moveFirst();
+                break;
+            case 'End':
+                if (!isOpen)
+                    return;
+                e.preventDefault();
+                moveLast();
+                break;
+            case 'Escape':
+                if (!isOpen)
+                    return;
+                e.preventDefault();
+                onOpenChange(false);
+                break;
+        }
+    }, [
+        activeIndex,
+        handleTypeahead,
+        isOpen,
+        moveFirst,
+        moveLast,
+        moveNext,
+        movePrev,
+        onOpenChange,
+        searchInputRef,
+        searchable,
+    ]);
+    return {
+        activeIndex,
+        setActiveIndex,
+        optionRefs,
+        resetActiveIndex,
+        clearTypeahead,
+        handleKeyDown,
+        focusActiveOption,
+    };
+}

package/dist/index.d.ts

@@ -67,3 +67,4 @@ export * from './components/interval-select/IntervalSelect';
 export * from './components/accordion/Accordion';
 export * from './components/state-page/StatePage';
 export * from './components/sticky-footer-layout/StickyFooterLayout';
+export * from './components/forms/typeahead/Typeahead';

package/dist/index.js

@@ -67,3 +67,4 @@ export * from './components/interval-select/IntervalSelect';
 export * from './components/accordion/Accordion';
 export * from './components/state-page/StatePage';
 export * from './components/sticky-footer-layout/StickyFooterLayout';
+export * from './components/forms/typeahead/Typeahead';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.44",
+  "version": "0.0.46",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",