@dbcdk/react-components 0.0.96 → 0.0.97

package/dist/components/forms/radio-buttons/RadioButtonGroup.js

@@ -1,19 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useId } from 'react';
-import { RadioButton } from './RadioButton';
-import { InputContainer } from '../input-container/InputContainer';
-export function RadioButtonGroup({ name, value, onChange, options, disabled = false, label, error, helpText, required = false, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, modified = false, direction = 'column', 'data-cy': dataCy, }) {
-    const generated = useId();
-    const groupName = name !== null && name !== void 0 ? name : `radio-group-${generated}`;
-    const content = (_jsx("div", { role: "radiogroup", "aria-invalid": Boolean(error) || undefined, "data-cy": dataCy, style: {
-            display: 'flex',
-            flexDirection: direction,
-            gap: '8px',
-        }, children: options.map(opt => (_jsx(RadioButton, { noContainer: true, name: groupName, value: String(opt.value), selectedValue: value !== null && value !== void 0 ? value : undefined, disabled: disabled || opt.disabled, label: opt.label, required: required, onChange: v => onChange(v), "data-cy": dataCy ? `${dataCy}-option-${String(opt.value)}` : undefined }, String(opt.value)))) }));
-    // If no InputContainer props were provided, just return group content
-    if (!label && !error)
-        return content;
-    // Wrap once as a proper field
-    return (_jsx(InputContainer, { label: label, htmlFor: undefined, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, modified: modified, children: content }));
-}

package/dist/components/forms/radio-buttons/RadioButtons.module.css

@@ -1,118 +0,0 @@
-.container {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.controlWrap {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-/* Real input stays for a11y, but visually hidden */
-.input {
-  position: absolute;
-  inset: 0;
-  width: var(--component-size-xs);
-  height: var(--component-size-xs);
-  margin: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-
-/* The visible radio */
-.radio {
-  width: var(--component-size-xs);
-  height: var(--component-size-xs);
-  border-radius: 999px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  background: var(--color-bg-surface);
-  border: 2px solid var(--color-border-default);
-
-  transition:
-    border-color 120ms ease,
-    box-shadow 120ms ease,
-    background-color 120ms ease;
-}
-
-.dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 999px;
-  transform: scale(0);
-  transition: transform 120ms ease;
-  background: var(--color-brand);
-}
-
-/* checked state */
-.checked {
-  border-color: var(--color-brand);
-}
-.checked .dot {
-  transform: scale(1);
-}
-
-/* hover (only when not disabled) */
-.input:not(:disabled):hover + .radio {
-  border-color: var(--color-brand-hover);
-}
-
-/* focus ring */
-.input:focus-visible + .radio {
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 30%, transparent);
-  border-color: var(--color-brand-strong);
-}
-
-/* disabled */
-.disabled {
-  opacity: 0.5;
-}
-.input:disabled {
-  cursor: not-allowed;
-}
-
-.label {
-  cursor: pointer;
-  user-select: none;
-  flex: 1;
-}
-
-.primary.checked {
-  background: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
-}
-
-.default {
-  border-color: var(--color-border-strong);
-}
-
-/* Sizes */
-.sm {
-  width: 16px;
-  height: 16px;
-}
-.sm .dot {
-  width: 8px;
-  height: 8px;
-}
-
-.md {
-  width: 20px;
-  height: 20px;
-}
-.md .dot {
-  width: 10px;
-  height: 10px;
-}
-
-.lg {
-  width: 24px;
-  height: 24px;
-}
-.lg .dot {
-  width: 12px;
-  height: 12px;
-}

package/dist/components/forms/select/Select.js

@@ -1,185 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from 'lucide-react';
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
-import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
-import styles from './Select.module.css';
-import { Button } from '../../button/Button';
-import { ClearButton } from '../../clear-button/ClearButton';
-import { Menu } from '../../menu/Menu';
-import { Popover } from '../../popover/Popover';
-import { InputContainer } from '../input-container/InputContainer';
-export function Select({ label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, tooltip, tooltipPlacement = 'right', modified = false, id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'outlined', onClear, datakey, dataCy, disabled, minWidth, }) {
-    const generatedId = useId();
-    const controlId = id !== null && id !== void 0 ? id : `select-${generatedId}`;
-    const describedById = `${controlId}-desc`;
-    const listboxId = `${controlId}-listbox`;
-    const popoverRef = useRef(null);
-    const optionRefs = useRef([]);
-    const typeaheadRef = useRef('');
-    const typeaheadTimeoutRef = useRef(null);
-    const selectedIndex = useMemo(() => options.findIndex(o => o.value === selectedValue), [options, selectedValue]);
-    const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
-    const [open, setOpen] = useState(false);
-    useEffect(() => {
-        return () => {
-            if (typeaheadTimeoutRef.current)
-                clearTimeout(typeaheadTimeoutRef.current);
-        };
-    }, []);
-    // Only move focus when open
-    useEffect(() => {
-        var _a;
-        if (!open)
-            return;
-        (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [activeIndex, open]);
-    // keep activeIndex aligned when opening
-    const resetActiveToSelected = () => setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
-    const findTypeaheadMatch = (query, startIndex) => {
-        var _a, _b;
-        if (!query || options.length === 0)
-            return -1;
-        const normalizedQuery = query.trim().toLocaleLowerCase();
-        if (!normalizedQuery)
-            return -1;
-        for (let step = 1; step <= options.length; step += 1) {
-            const index = (startIndex + step + options.length) % options.length;
-            const label = (_b = (_a = options[index]) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.trim().toLocaleLowerCase();
-            if (label === null || label === void 0 ? void 0 : label.startsWith(normalizedQuery))
-                return index;
-        }
-        return -1;
-    };
-    const handleTypeahead = (key) => {
-        const startIndex = open ? activeIndex : selectedIndex;
-        const nextBuffer = `${typeaheadRef.current}${key.toLocaleLowerCase()}`;
-        const repeatedChar = new Set(nextBuffer).size === 1;
-        let nextIndex = findTypeaheadMatch(nextBuffer, startIndex);
-        let appliedBuffer = nextBuffer;
-        if (nextIndex < 0 && repeatedChar) {
-            appliedBuffer = key.toLocaleLowerCase();
-            nextIndex = findTypeaheadMatch(appliedBuffer, startIndex);
-        }
-        if (typeaheadTimeoutRef.current)
-            clearTimeout(typeaheadTimeoutRef.current);
-        typeaheadRef.current = appliedBuffer;
-        typeaheadTimeoutRef.current = setTimeout(() => {
-            typeaheadRef.current = '';
-            typeaheadTimeoutRef.current = null;
-        }, 500);
-        if (nextIndex < 0)
-            return;
-        setActiveIndex(nextIndex);
-        if (!open)
-            setOpen(true);
-    };
-    const handleKeyDown = (e) => {
-        var _a, _b;
-        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 (!open) {
-                    setOpen(true);
-                    return;
-                }
-                setActiveIndex(i => Math.min(i + 1, options.length - 1));
-                break;
-            }
-            case 'ArrowUp': {
-                e.preventDefault();
-                if (!open) {
-                    setOpen(true);
-                    return;
-                }
-                setActiveIndex(i => Math.max(i - 1, 0));
-                break;
-            }
-            case 'Enter':
-            case ' ': {
-                // Space on a button should open/select depending on state
-                e.preventDefault();
-                typeaheadRef.current = '';
-                if (typeaheadTimeoutRef.current) {
-                    clearTimeout(typeaheadTimeoutRef.current);
-                    typeaheadTimeoutRef.current = null;
-                }
-                if (!open) {
-                    setOpen(true);
-                    return;
-                }
-                const opt = options[activeIndex];
-                if (opt) {
-                    onChange(opt.value);
-                    (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
-                }
-                break;
-            }
-            case 'Escape': {
-                if (!open)
-                    return;
-                e.preventDefault();
-                (_b = popoverRef.current) === null || _b === void 0 ? void 0 : _b.close();
-                break;
-            }
-            case 'Home': {
-                if (!open)
-                    return;
-                e.preventDefault();
-                setActiveIndex(0);
-                break;
-            }
-            case 'End': {
-                if (!open)
-                    return;
-                e.preventDefault();
-                setActiveIndex(options.length - 1);
-                break;
-            }
-        }
-    };
-    const selected = options.find(o => o.value === selectedValue);
-    const tooltipEnabled = Boolean(tooltip);
-    const { triggerProps, id: tooltipId } = useTooltipTrigger({
-        content: tooltipEnabled ? tooltip : null,
-        placement: tooltipPlacement,
-        offset: 8,
-    });
-    const describedBy = (() => {
-        const ids = [];
-        if (error || helpText)
-            ids.push(describedById);
-        if (tooltipEnabled)
-            ids.push(tooltipId);
-        return ids.length ? ids.join(' ') : undefined;
-    })();
-    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: [_jsx(Popover, { ref: popoverRef, open: open, fullWidth: fullWidth, onOpenChange: next => {
-                    setOpen(next);
-                    if (next)
-                        resetActiveToSelected();
-                }, contentId: listboxId, 
-                // Select manages roving focus; don't auto-focus content wrapper
-                autoFocusContent: false, 
-                // keep focus on trigger until you move it yourself (your ArrowDown opens then focuses option)
-                returnFocus: true, trigger: (toggle, icon, isOpen) => (_jsx(Button, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
-                        resetActiveToSelected();
-                        toggle(e);
-                    }, size: size, style: minWidth != null ? { minWidth } : undefined, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, className: modified ? styles.triggerModified : undefined, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : _jsx("span", { className: "dbc-muted-text", children: placeholder }) }), _jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [onClear && selected && _jsx(ClearButton, { onClick: onClear }), _jsx("span", { style: { color: 'var(--color-fg-subtle)', display: 'inline-flex' }, children: icon })] })] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
-                        const isSelected = typeof opt.value === 'object' && typeof selectedValue === 'object' && datakey
-                            ? (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[datakey]) === opt.value[datakey]
-                            : opt.value === selectedValue;
-                        const isActive = index === activeIndex;
-                        return (_jsx(Menu.Item, { active: isActive, itemRole: "option", "aria-selected": isSelected, children: _jsxs("button", { ref: el => {
-                                    optionRefs.current[index] = el;
-                                }, type: "button", tabIndex: isActive ? 0 : -1, onClick: () => {
-                                    var _a;
-                                    onChange(opt.value);
-                                    (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
-                                }, onFocus: () => setActiveIndex(index), style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: isSelected ? _jsx(Check, {}) : null }), opt.label] }) }, String(opt.value)));
-                    }) }) }), (error || helpText) && (_jsx("span", { id: describedById, style: { display: 'none' }, children: error !== null && error !== void 0 ? error : helpText }))] }));
-}

package/dist/components/forms/select/Select.module.css

@@ -1,32 +0,0 @@
-.triggerModified {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 45%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  border-left-width: 4px;
-}
-
-.triggerModified:hover:not([disabled]) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 60%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-}
-
-.triggerModified:focus-visible {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 75%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}

package/dist/components/forms/text-area/Textarea.js

@@ -1,47 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useId, useLayoutEffect, useMemo, useRef } from 'react';
-import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
-import styles from './Textarea.module.css';
-import { InputContainer } from '../input-container/InputContainer';
-export const Textarea = function Textarea({ value, inputChanged, disabled, rows = 3, showCount, tooltip, tooltipPlacement = 'right', showTooltip, placeholder, adjustHeight, id, modified = false, 
-// InputContainer props
-label, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required, 
-// Native textarea props
-className, ...rest }) {
-    const HEIGHT_BUFFER_PX = 2;
-    const generatedId = useId();
-    const textareaId = id !== null && id !== void 0 ? id : `textarea-${generatedId}`;
-    const textareaRef = useRef(null);
-    const syncHeight = useCallback((textarea) => {
-        if (!adjustHeight)
-            return;
-        textarea.style.height = 'auto';
-        textarea.style.height = `${textarea.scrollHeight + HEIGHT_BUFFER_PX}px`;
-    }, [adjustHeight]);
-    useLayoutEffect(() => {
-        const textarea = textareaRef.current;
-        if (!textarea)
-            return;
-        syncHeight(textarea);
-    }, [syncHeight, value, rows]);
-    const onInput = useCallback((e) => {
-        const textarea = e.currentTarget;
-        syncHeight(textarea);
-        inputChanged(e);
-    }, [inputChanged, syncHeight]);
-    const inputField = useMemo(() => (_jsx("textarea", { ...rest, ref: textareaRef, id: textareaId, className: [styles.textarea, className].filter(Boolean).join(' '), placeholder: placeholder, rows: rows, value: value, onChange: onInput, disabled: disabled, "aria-invalid": Boolean(error) || undefined })), [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error]);
-    // Enable tooltip if tooltip exists, and if showTooltip is either true or undefined.
-    // (So you can deprecate showTooltip later without breaking callers.)
-    const tooltipEnabled = Boolean(tooltip) && (showTooltip !== null && showTooltip !== void 0 ? showTooltip : true);
-    const { triggerProps } = useTooltipTrigger({
-        content: tooltipEnabled ? tooltip : null,
-        placement: tooltipPlacement,
-        offset: 8,
-        delayOpenMs: 0,
-        focusOpenMode: 'any',
-        closeOnPointerDown: false,
-    });
-    return (_jsx(InputContainer, { modified: modified, label: label, htmlFor: textareaId, error: error, helpText: helpText, helpTextAddition: showCount ? `${value === null || value === void 0 ? void 0 : value.length} tegn i denne boks` : undefined, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: _jsx("div", { className: [styles.container, modified ? styles.modified : ''].filter(Boolean).join(' '), children: _jsx("div", { ...(tooltipEnabled ? triggerProps : {}), children: inputField }) }) }));
-};
-Textarea.displayName = 'Textarea';

package/dist/components/forms/text-area/Textarea.module.css

@@ -1,70 +0,0 @@
-.container {
-  flex-grow: 1;
-}
-
-.container.modified textarea {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 45%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  border-left-width: 4px;
-}
-
-.container.modified textarea:hover {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 60%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-}
-
-.container.modified textarea:focus-visible {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(
-    in srgb,
-    var(--color-status-warning-border) 75%,
-    var(--color-border-default)
-  );
-  border-left-color: var(--color-status-warning-border);
-  box-shadow: inset 0 0 0 1px
-    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
-}
-.container textarea {
-  width: 100%;
-  padding: var(--spacing-xs);
-  border: var(--border-width-thin) solid var(--color-border-default);
-  border-radius: var(--border-radius-default);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-  background-color: var(--color-bg-surface);
-  color: var(--color-fg-default);
-}
-
-.container textarea:disabled {
-  background-color: var(--color-disabled-bg);
-  border: 0;
-  color: var(--color-disabled-fg);
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.internalCount {
-  text-align: right;
-  font-size: var(--font-size-sm);
-  color: var(--color-fg-subtle);
-}
-
-.container textarea:hover {
-  border-color: var(--color-border-strong);
-}
-
-.container textarea:focus-visible {
-  outline: none;
-  border-color: var(--color-border-selected);
-}