@dbcdk/react-components 0.0.57 → 0.0.58

package/dist/components/forms/typeahead/Typeahead.js

@@ -9,8 +9,10 @@ import { Popover } from '../../../components/popover/Popover';
 import styles from './Typeahead.module.css';
 export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'chips', multiSelectedValuesDisplayMode = 'hidden', multiSelectedValueChipContent = 'label', selectedValue = null, onChange, placeholder, variant = 'outlined', disabled = false, fullWidth = false, onClear, emptyMessage = 'Ingen resultater', filterOptions, inputProps, inputSize, width, minWidth, autoComplete, autoCorrect, autoCapitalize, spellCheck, popoverAnchorRef, }) {
     var _a;
+    const rootRef = useRef(null);
     const inputRef = useRef(null);
     const listboxRef = useRef(null);
+    const popoverContentRef = useRef(null);
     const optionRefs = useRef([]);
     const interactingWithOptionsRef = useRef(false);
     const listboxId = useId();
@@ -105,6 +107,75 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
         const activeEl = optionRefs.current[activeIndex];
         (_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.scrollIntoView) === null || _a === void 0 ? void 0 : _a.call(activeEl, { block: 'nearest' });
     }, [open, activeIndex, filteredOptions]);
+    const getFocusableElements = React.useCallback(() => {
+        const selector = [
+            'a[href]',
+            'button:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            'textarea:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])',
+        ].join(',');
+        const seen = new Set();
+        const focusables = [];
+        for (const container of [rootRef.current, popoverContentRef.current]) {
+            if (!container)
+                continue;
+            const elements = container.matches(selector)
+                ? [container]
+                : Array.from(container.querySelectorAll(selector));
+            for (const element of elements) {
+                if (seen.has(element) ||
+                    element.getAttribute('aria-hidden') === 'true' ||
+                    element.tabIndex < 0) {
+                    continue;
+                }
+                seen.add(element);
+                focusables.push(element);
+            }
+        }
+        return focusables;
+    }, []);
+    const isFocusWithinTypeahead = React.useCallback((target) => {
+        var _a, _b;
+        if (!(target instanceof Node))
+            return false;
+        return Boolean(((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) || ((_b = popoverContentRef.current) === null || _b === void 0 ? void 0 : _b.contains(target)));
+    }, []);
+    const handleTabKeyDown = React.useCallback((event) => {
+        var _a, _b, _c;
+        if (event.key !== 'Tab' || !open)
+            return;
+        const focusables = getFocusableElements();
+        if (focusables.length === 0)
+            return;
+        const eventTarget = event.target instanceof HTMLElement
+            ? event.target
+            : document.activeElement;
+        const activeElement = eventTarget && focusables.includes(eventTarget)
+            ? eventTarget
+            : ((_a = document.activeElement) !== null && _a !== void 0 ? _a : null);
+        const activeIndexInScope = activeElement ? focusables.indexOf(activeElement) : -1;
+        const boundaryIndex = event.shiftKey ? 0 : focusables.length - 1;
+        const boundaryElement = focusables[boundaryIndex];
+        if (mode === 'multi') {
+            if (activeIndexInScope === -1) {
+                event.preventDefault();
+                (_b = focusables[0]) === null || _b === void 0 ? void 0 : _b.focus();
+                return;
+            }
+            event.preventDefault();
+            const nextIndex = event.shiftKey
+                ? (activeIndexInScope - 1 + focusables.length) % focusables.length
+                : (activeIndexInScope + 1) % focusables.length;
+            (_c = focusables[nextIndex]) === null || _c === void 0 ? void 0 : _c.focus();
+            return;
+        }
+        if (activeIndexInScope !== -1 && activeElement === boundaryElement) {
+            setOpen(false);
+            setActiveIndex(-1);
+        }
+    }, [open, getFocusableElements, mode]);
     const commitSelection = (option) => {
         var _a, _b;
         if (mode === 'multi') {
@@ -144,7 +215,9 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
             onChange(null);
         }
     };
-    const handleBlur = () => {
+    const handleBlur = (nextFocusedTarget) => {
+        if (isFocusWithinTypeahead(nextFocusedTarget))
+            return;
         if (mode === 'multi') {
             if (interactingWithOptionsRef.current) {
                 interactingWithOptionsRef.current = false;
@@ -261,7 +334,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                 return;
         }
     };
-    return (_jsxs("div", { style: {
+    return (_jsxs("div", { ref: rootRef, style: {
             display: 'flex',
             flexDirection: 'column',
             gap: mode === 'multi' &&
@@ -284,7 +357,7 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                     else {
                         setActiveIndex(-1);
                     }
-                }, fullWidth: fullWidth, autoFocusContent: false, returnFocus: false, trigger: (openPopover, icon) => {
+                }, fullWidth: fullWidth, autoFocusContent: false, returnFocus: false, overlayRef: popoverContentRef, trigger: (openPopover, icon) => {
                     var _a, _b, _c, _d, _e;
                     return (_jsx(Input, { ...passthroughInputProps, ref: inputRef, value: inputValue, startAdornment: multiSelectionAdornment || inputPropsStartAdornment ? (_jsxs(_Fragment, { children: [multiSelectionAdornment, inputPropsStartAdornment] })) : undefined, endAdornment: inputPropsEndAdornment || icon ? (_jsxs(_Fragment, { children: [inputPropsEndAdornment, icon] })) : undefined, onFocus: e => {
                             inputPropsOnFocus === null || inputPropsOnFocus === void 0 ? void 0 : inputPropsOnFocus(e);
@@ -325,9 +398,12 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                             inputPropsOnBlur === null || inputPropsOnBlur === void 0 ? void 0 : inputPropsOnBlur(e);
                             if (e.defaultPrevented)
                                 return;
-                            handleBlur();
+                            handleBlur(e.relatedTarget);
                         }, onKeyDown: e => {
                             inputPropsOnKeyDown === null || inputPropsOnKeyDown === void 0 ? void 0 : inputPropsOnKeyDown(e);
+                            if (e.defaultPrevented)
+                                return;
+                            handleTabKeyDown(e);
                             if (e.defaultPrevented)
                                 return;
                             handleKeyDown(e);
@@ -363,11 +439,12 @@ export function Typeahead({ options, mode = 'single', multiValueDisplayMode = 'c
                                     interactingWithOptionsRef.current = true;
                                     e.preventDefault();
                                 },
+                                onKeyDown: e => handleTabKeyDown(e),
                             }, label: _jsx("span", { children: option.label }), onCheckedChange: () => commitSelection(option) }, option.value)) : (_jsx(Menu.Item, { active: isActive, selected: isSelected, children: _jsx("button", { ref: node => {
                                     optionRefs.current[index] = node;
                                 }, id: optionId, type: "button", role: "option", "aria-selected": isSelected, onMouseEnter: () => setActiveIndex(index), onMouseDown: e => {
                                     e.preventDefault();
-                                }, onClick: () => commitSelection(option), children: _jsx("span", { children: option.label }) }) }, option.value));
+                                }, onKeyDown: e => handleTabKeyDown(e), onClick: () => commitSelection(option), children: _jsx("span", { children: option.label }) }) }, option.value));
                     })) : (_jsx(Menu.Item, { disabled: true, children: emptyMessage })) }) }), mode === 'multi' &&
                 multiSelectedValuesDisplayMode === 'below-input' &&
                 selectedOptions.length > 0 && (_jsx("div", { style: {

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

@@ -23,6 +23,7 @@ export interface PopoverProps {
     autoFocusContent?: boolean;
     returnFocus?: boolean;
     anchorRef?: React.RefObject<HTMLElement | null>;
+    overlayRef?: React.Ref<HTMLDivElement>;
 }
 export interface PopoverHandle {
     close: () => void;

package/dist/components/popover/Popover.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp } from 'lucide-react';
+import * as React from 'react';
 import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 import styles from './Popover.module.css';
@@ -37,7 +38,7 @@ function parseMinWidthPx(minWidth, elForEm) {
     }
     return 0;
 }
-export const Popover = forwardRef(function Popover({ trigger: Trigger, children, open, defaultOpen = false, onOpenChange, contentId, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, fullWidth = false, autoFocusContent = false, returnFocus = true, anchorRef, }, ref) {
+export const Popover = forwardRef(function Popover({ trigger: Trigger, children, open, defaultOpen = false, onOpenChange, contentId, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, fullWidth = false, autoFocusContent = false, returnFocus = true, anchorRef, overlayRef, }, ref) {
     const internalId = useId();
     const resolvedContentId = contentId !== null && contentId !== void 0 ? contentId : `popover-${internalId}`;
     const isControlled = open !== undefined;
@@ -216,9 +217,23 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         (_b = (_a = triggerElRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
     }, [isOpen, returnFocus]);
     const icon = isOpen ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 });
+    const setOverlayRef = React.useCallback((node) => {
+        if (!overlayRef)
+            return;
+        if (typeof overlayRef === 'function') {
+            overlayRef(node);
+            return;
+        }
+        const mutableRef = overlayRef;
+        mutableRef.current = node;
+    }, [overlayRef]);
     return (_jsxs("div", { className: [styles.container, fullWidth ? styles.fullWidth : ''].filter(Boolean).join(' '), ref: containerRef, children: [Trigger(togglePopover, icon, isOpen), mounted &&
                 isOpen &&
-                createPortal(_jsx("div", { id: resolvedContentId, ref: contentRef, className: styles.content, style: {
+                createPortal(_jsx("div", { id: resolvedContentId, ref: node => {
+                        const mutableContentRef = contentRef;
+                        mutableContentRef.current = node;
+                        setOverlayRef(node);
+                    }, className: styles.content, style: {
                         top: pos.top,
                         left: pos.left,
                         // Content-driven sizing by default.

package/package.json

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