@dbcdk/react-components 0.0.96 → 0.0.97

package/dist/components/datetime-picker/dateTimeHelpers.js

@@ -1,248 +0,0 @@
-/* ---------- Range separator helpers ---------- */
-/**
- * IMPORTANT:
- * "-" is only treated as a range separator when surrounded by whitespace: " - "
- * so we don't split inside "DD-MM-YYYY".
- *
- * Supported separators:
- *   - En dash: "–" (with optional surrounding spaces)
- *   - Hyphen as range sep: " - " (spaces required)
- *   - Words: "to", "til" (with optional surrounding spaces)
- *
- * COMPAT:
- *   - Also supports digit-only ranges like "01022026-02022026" (no spaces),
- *     because that cannot be confused with "DD-MM-YYYY".
- */
-const RANGE_SEP_RE = /\s*(?:–|\bto\b|\btil\b|\s-\s)\s*/i;
-function normalizeSpaces(s) {
-    return s.trim().replace(/\s+/g, ' ');
-}
-/**
- * Special-case for digit-only ranges: 8 digits + '-' + 8 digits (optional spaces).
- * This keeps legacy UX working without reintroducing the DD-MM-YYYY split bug.
- */
-function splitDigitOnlyRangeParts(input) {
-    const m = /^\s*(\d{8})\s*-\s*(\d{8})\s*$/.exec(input);
-    if (!m)
-        return null;
-    return [m[1], m[2]];
-}
-function splitRangeParts(input) {
-    var _a;
-    // 1) digit-only fast path: 01022026-02022026
-    const digitOnly = splitDigitOnlyRangeParts(input);
-    if (digitOnly)
-        return digitOnly;
-    // 2) normal path: use safe separators (–, to, til, " - ")
-    const txt = normalizeSpaces(input);
-    const parts = txt.split(RANGE_SEP_RE);
-    if (parts.length < 2)
-        return null;
-    const left = ((_a = parts[0]) !== null && _a !== void 0 ? _a : '').trim();
-    const right = parts.slice(1).join(' ').trim();
-    if (!left || !right)
-        return null;
-    return [left, right];
-}
-/* ---------- Mask helpers (no deps) ---------- */
-// Pull only 0-9
-export const digits = (s) => (s.match(/\d/g) || []).join('');
-// DD-MM-YYYY
-export function maskDateEU(text) {
-    const d = digits(text).slice(0, 8);
-    const dd = d.slice(0, 2);
-    const mm = d.slice(2, 4);
-    const yyyy = d.slice(4, 8);
-    let out = dd;
-    if (mm.length)
-        out += (out ? '-' : '') + mm;
-    if (yyyy.length)
-        out += (out ? '-' : '') + yyyy;
-    return out;
-}
-// HH:mm (24h)
-export function maskTimeHM(text) {
-    const d = digits(text).slice(0, 4);
-    const hh = d.slice(0, 2);
-    const mm = d.slice(2, 4);
-    return mm.length ? `${hh}:${mm}` : hh;
-}
-// Single: "DD-MM-YYYY" or "DD-MM-YYYY HH:mm"
-export function maskSingle(text, enableTime) {
-    const t = normalizeSpaces(text);
-    if (!enableTime)
-        return maskDateEU(t);
-    // split date + time by first space or 'T'
-    const m = /^(.*?)[ T](.*)$/.exec(t);
-    if (!m)
-        return maskDateEU(t);
-    const datePart = maskDateEU(m[1]);
-    const timePart = maskTimeHM(m[2]);
-    return timePart ? `${datePart} ${timePart}` : datePart;
-}
-// Range: mask both sides around common separators (–, " - ", to, til, or digit-only "01022026-02022026")
-export function maskRange(text, _enableTime) {
-    // NOTE: range is date-only in the UI
-    const parts = splitRangeParts(text);
-    if (!parts)
-        return maskSingle(text, false);
-    const [left, right] = parts;
-    const a = maskSingle(left, false);
-    const b = maskSingle(right, false);
-    return `${a} – ${b}`.trim();
-}
-// Pad helper
-export const pad2 = (n) => String(n).padStart(2, '0');
-export function isUtcIsoString(v) {
-    return typeof v === 'string' && /Z$/.test(v) && !Number.isNaN(Date.parse(v));
-}
-export function isDateOnlyString(v) {
-    if (typeof v !== 'string')
-        return false;
-    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(v);
-    if (!m)
-        return false;
-    const y = +m[1];
-    const mo = +m[2];
-    const d = +m[3];
-    if (mo < 1 || mo > 12)
-        return false;
-    if (d < 1 || d > 31)
-        return false;
-    // Validate exact date (guard against 2026-02-31 etc.)
-    const local = new Date(y, mo - 1, d, 0, 0, 0, 0);
-    return local.getFullYear() === y && local.getMonth() === mo - 1 && local.getDate() === d;
-}
-export function utcMillisFromIso(iso) {
-    return Date.parse(iso);
-}
-/** Convert a local DateTime to a UTC ISO string (Z). */
-export function isoFromLocalDate(dLocal) {
-    return dLocal.toISOString();
-}
-/**
- * Build a *local* Date from y/m/d/hh/mm and return UTC ISO string (Z).
- * This keeps the UI meaning "local wall time", while emitting a stable UTC instant.
- *
- * DST NOTE:
- * If the requested local wall time does not exist (spring-forward), JS will auto-correct.
- * We detect that and return null so caller can handle it (e.g., show validation error).
- */
-export function isoFromLocalParts(y, m0, // 0-based
-d, hh = 0, mm = 0) {
-    const local = new Date(y, m0, d, hh, mm, 0, 0);
-    if (Number.isNaN(local.getTime()))
-        return null;
-    // Guard: JS autocorrects invalid dates/times; re-validate exact parts
-    if (local.getFullYear() !== y ||
-        local.getMonth() !== m0 ||
-        local.getDate() !== d ||
-        local.getHours() !== hh ||
-        local.getMinutes() !== mm) {
-        return null;
-    }
-    return local.toISOString();
-}
-/** For anchoring the calendar safely from a UTC ISO string. */
-export function localDateFromIso(iso) {
-    const ms = Date.parse(iso);
-    if (Number.isNaN(ms))
-        return null;
-    return new Date(ms); // local rendering
-}
-/** Date-only: build 'YYYY-MM-DD' from local parts */
-export function dateOnlyFromLocalParts(y, m0, d) {
-    return `${String(y).padStart(4, '0')}-${pad2(m0 + 1)}-${pad2(d)}`;
-}
-/** Parse 'YYYY-MM-DD' into a local Date at midnight */
-export function localDateFromDateOnly(s) {
-    if (!isDateOnlyString(s))
-        return null;
-    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
-    if (!m)
-        return null;
-    const y = +m[1];
-    const mo0 = +m[2] - 1;
-    const d = +m[3];
-    const local = new Date(y, mo0, d, 0, 0, 0, 0);
-    if (Number.isNaN(local.getTime()))
-        return null;
-    if (local.getFullYear() !== y || local.getMonth() !== mo0 || local.getDate() !== d)
-        return null;
-    return local;
-}
-/** Compare date-only strings by UTC date-only time (stable ordering) */
-export function compareDateOnly(a, b) {
-    const da = localDateFromDateOnly(a);
-    const db = localDateFromDateOnly(b);
-    if (!da || !db)
-        return 0;
-    const ta = Date.UTC(da.getFullYear(), da.getMonth(), da.getDate());
-    const tb = Date.UTC(db.getFullYear(), db.getMonth(), db.getDate());
-    return ta - tb;
-}
-/* ---------- Formatting (UI shows local) ---------- */
-// From Date → "DD-MM-YYYY" or "DD-MM-YYYY HH:mm" (local time)
-export function toMaskedFromDate(d, enableTime) {
-    const dd = pad2(d.getDate());
-    const mm = pad2(d.getMonth() + 1);
-    const yyyy = String(d.getFullYear());
-    let out = `${dd}-${mm}-${yyyy}`;
-    if (enableTime)
-        out += ` ${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
-    return out;
-}
-/* ---------- Parsing helpers (no deps) ---------- */
-// Accepts: YYYY-MM-DD, DD-MM-YYYY, DD/MM/YYYY, DD.MM.YYYY (+ optional HH:mm)
-export function parseLooseDateOrDateTime(input) {
-    const txt = normalizeSpaces(input);
-    const dateTimeMatch = /^(?<date>[\d./-]{8,10})(?:[ T](?<hh>\d{1,2}):(?<mm>\d{2}))?$/i.exec(txt);
-    if (!(dateTimeMatch === null || dateTimeMatch === void 0 ? void 0 : dateTimeMatch.groups))
-        return null;
-    const raw = dateTimeMatch.groups.date;
-    const hh = dateTimeMatch.groups.hh ? parseInt(dateTimeMatch.groups.hh, 10) : 0;
-    const mm = dateTimeMatch.groups.mm ? parseInt(dateTimeMatch.groups.mm, 10) : 0;
-    if (hh < 0 || hh > 23 || mm < 0 || mm > 59)
-        return null;
-    // Try YYYY-MM-DD first (still accepts 1-2 digits for month/day in ISO form)
-    let y, m, d;
-    const mIso = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(raw);
-    if (mIso) {
-        y = +mIso[1];
-        m = +mIso[2] - 1;
-        d = +mIso[3];
-    }
-    else {
-        // EU formats must be strict DD-MM-YYYY / DD/MM/YYYY / DD.MM.YYYY
-        const mEu = /^(\d{2})[./-](\d{2})[./-](\d{4})$/.exec(raw);
-        if (!mEu)
-            return null;
-        d = +mEu[1];
-        m = +mEu[2] - 1;
-        y = +mEu[3];
-    }
-    const local = new Date(y, m, d, hh, mm, 0, 0);
-    if (Number.isNaN(local.getTime()))
-        return null;
-    // Guard: JS autocorrects invalid dates; re-validate exact Y/M/D/H/M
-    if (local.getFullYear() !== y ||
-        local.getMonth() !== m ||
-        local.getDate() !== d ||
-        local.getHours() !== hh ||
-        local.getMinutes() !== mm) {
-        return null;
-    }
-    return local;
-}
-// Parse a range string with separators: "–", " - ", "to", "til", or digit-only "01022026-02022026"
-export function parseLooseRange(input) {
-    const parts = splitRangeParts(input);
-    if (!parts)
-        return null;
-    const [a, b] = parts;
-    const s = parseLooseDateOrDateTime(a);
-    const e = parseLooseDateOrDateTime(b);
-    if (!s || !e)
-        return null;
-    return s <= e ? { start: s, end: e } : { start: e, end: s };
-}

package/dist/components/divider/Divider.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const spacingMap = {
-    sm: 'var(--spacing-sm)',
-    md: 'var(--spacing-md)',
-    lg: 'var(--spacing-lg)',
-};
-export const Divider = ({ spacing = 'md' }) => {
-    return (_jsx("div", { style: {
-            borderTop: '1px solid var(--color-border-subtle)',
-            marginBlock: spacingMap[spacing],
-        } }));
-};

package/dist/components/filter-field/FilterField.js

@@ -1,191 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from 'lucide-react';
-import { useMemo, useRef, useState, useEffect } from 'react';
-import { Input } from '../../components/forms/input/Input';
-import { Typeahead } from '../../components/forms/typeahead/Typeahead';
-import styles from './FilterField.module.css';
-import { Menu } from '../menu/Menu';
-import { Popover } from '../popover/Popover';
-const LABELS = {
-    is: 'is',
-    isNot: 'not',
-    contains: 'contains',
-    notContains: 'not contain',
-    startsWith: 'starts with',
-    endsWith: 'ends with',
-    gt: '>',
-    lt: '<',
-    gte: '≥',
-    lte: '≤',
-    in: '',
-    notIn: 'not in',
-    isEmpty: 'empty',
-    isNotEmpty: 'not empty',
-};
-const DEFAULT_TEXT_OPERATORS = [
-    'is',
-    'isNot',
-    'contains',
-    'notContains',
-    'startsWith',
-    'endsWith',
-    'isEmpty',
-    'isNotEmpty',
-];
-export const NUMBER_OPERATORS = [
-    'is',
-    'isNot',
-    'gt',
-    'lt',
-    'gte',
-    'lte',
-    'isEmpty',
-    'isNotEmpty',
-];
-const VALUELESS_OPERATORS = ['isEmpty', 'isNotEmpty'];
-const INPUT_DEBOUNCE_MS = 500;
-function OperatorDropdown({ value, onChange, operators, size = 'sm', disabled, }) {
-    const popRef = useRef(null);
-    const [activeIndex, setActiveIndex] = useState(() => Math.max(0, operators.indexOf(value)));
-    useEffect(() => {
-        setActiveIndex(Math.max(0, operators.indexOf(value)));
-    }, [operators, value]);
-    const handleSelect = (op) => {
-        var _a;
-        onChange(op);
-        setActiveIndex(operators.indexOf(op));
-        (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
-    };
-    return (_jsx(Popover, { ref: popRef, minWidth: "160px", trigger: (toggle, icon) => (_jsxs("button", { type: "button", onClick: toggle, disabled: disabled, "aria-label": "Skift operator", className: `${styles.operatorTrigger} ${styles[size]}`, children: [_jsx("span", { className: styles.operatorText, children: LABELS[value] }), icon] })), children: _jsx(Menu, { children: operators.map(op => {
-                const selected = op === value;
-                return (_jsx(Menu.Item, { active: selected, children: _jsxs("button", { type: "button", onClick: () => handleSelect(op), disabled: disabled, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: selected ? _jsx(Check, { size: 16 }) : null }), LABELS[op]] }) }, op));
-            }) }) }));
-}
-function isFilterActive(value) {
-    if (Array.isArray(value))
-        return value.length > 0;
-    if (typeof value === 'string')
-        return value.trim().length > 0;
-    return value != null;
-}
-export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', variant = 'surface', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, minWidth, width, maxWidth, popoverWidth, debounceTime = INPUT_DEBOUNCE_MS, ...inputProps }) {
-    var _a, _b, _c, _d, _e, _f;
-    const filterFieldRef = useRef(null);
-    const ops = useMemo(() => operators !== null && operators !== void 0 ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
-    const shouldAutoFitTypeahead = control === 'select' && single && !width;
-    const [selectedOperator, setSelectedOperator] = useState(operator);
-    const active = isFilterActive(value);
-    useEffect(() => {
-        if (ops.includes(operator)) {
-            // Keep the dropdown responsive to local selection immediately, but let the
-            // controlled `operator` prop take back over once parent state catches up.
-            // eslint-disable-next-line react-hooks/set-state-in-effect
-            setSelectedOperator(operator);
-        }
-    }, [operator, ops]);
-    const [localValue, setLocalValue] = useState((_a = value) !== null && _a !== void 0 ? _a : '');
-    const debounceRef = useRef(null);
-    /**
-     * Holds the exact text value we most recently sent upward.
-     * While waiting for that value to round-trip back through URL/provider state,
-     * we ignore intermediate external churn so the input does not visually flicker.
-     */
-    const pendingValueRef = useRef(null);
-    const emit = (next) => {
-        var _a, _b;
-        const nextOperator = (_a = next.operator) !== null && _a !== void 0 ? _a : selectedOperator;
-        const nextValue = (_b = next.value) !== null && _b !== void 0 ? _b : value;
-        if (next.operator) {
-            setSelectedOperator(nextOperator);
-        }
-        onChange({
-            field,
-            operator: nextOperator,
-            value: nextValue,
-        });
-    };
-    const clearDebounce = () => {
-        if (debounceRef.current) {
-            clearTimeout(debounceRef.current);
-            debounceRef.current = null;
-        }
-    };
-    const scheduleEmitValue = (nextVal) => {
-        clearDebounce();
-        pendingValueRef.current = nextVal;
-        debounceRef.current = setTimeout(() => {
-            emit({ value: nextVal });
-        }, debounceTime);
-    };
-    const flushPendingValue = () => {
-        if (control !== 'input')
-            return;
-        clearDebounce();
-        pendingValueRef.current = localValue;
-        emit({ value: localValue });
-    };
-    const handleOperatorChange = (op) => {
-        setSelectedOperator(op);
-        if (!active && !VALUELESS_OPERATORS.includes(op))
-            return;
-        if (VALUELESS_OPERATORS.includes(op)) {
-            clearDebounce();
-            pendingValueRef.current = null;
-            emit({ operator: op, value: null });
-            return;
-        }
-        clearDebounce();
-        pendingValueRef.current =
-            control === 'input' ? localValue : typeof value === 'string' ? value : null;
-        emit({ operator: op });
-    };
-    useEffect(() => {
-        var _a;
-        if (control !== 'input')
-            return;
-        const incoming = (_a = value) !== null && _a !== void 0 ? _a : '';
-        const pending = pendingValueRef.current;
-        if (pending !== null) {
-            if (incoming === pending) {
-                pendingValueRef.current = null;
-            }
-            return;
-        }
-        if (incoming !== localValue) {
-            // Keep the embedded input responsive while debounced updates are in flight,
-            // then resync to the controlled value once external state has settled.
-            // eslint-disable-next-line react-hooks/set-state-in-effect
-            setLocalValue(incoming);
-        }
-    }, [value, control, localValue]);
-    useEffect(() => {
-        return () => {
-            clearDebounce();
-        };
-    }, []);
-    return (_jsxs("div", { ref: filterFieldRef, ...(dataCy ? { 'data-cy': dataCy } : {}), className: [styles.filterField, styles[size], styles[variant], active ? styles.active : '']
-            .filter(Boolean)
-            .join(' '), children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx("div", { className: styles.operatorWrapper, children: _jsx(OperatorDropdown, { value: selectedOperator, onChange: handleOperatorChange, operators: ops, size: size, disabled: disabled }) }), _jsx("div", { className: [
-                    styles.valueWrapper,
-                    control === 'input' ? 'dbc-flex dbc-flex-grow' : '',
-                    shouldAutoFitTypeahead ? styles.autoWidth : '',
-                ]
-                    .filter(Boolean)
-                    .join(' '), style: shouldAutoFitTypeahead ? (maxWidth ? { maxWidth } : undefined) : { width, maxWidth }, children: control === 'input' ? (_jsx(Input, { variant: "embedded", ...inputProps, fieldClassName: styles.embeddedInputField, inputClassName: styles.embeddedInputElement, value: localValue, onChange: e => {
-                        const next = e.currentTarget.value;
-                        setLocalValue(next);
-                        scheduleEmitValue(next);
-                    }, onBlur: () => {
-                        flushPendingValue();
-                    }, fullWidth: true, inputSize: size, placeholder: placeholder, disabled: disabled, autoComplete: (_b = inputProps.autoComplete) !== null && _b !== void 0 ? _b : 'off', autoCorrect: (_c = inputProps.autoCorrect) !== null && _c !== void 0 ? _c : 'off', autoCapitalize: (_d = inputProps.autoCapitalize) !== null && _d !== void 0 ? _d : 'none', spellCheck: (_e = inputProps.spellCheck) !== null && _e !== void 0 ? _e : false, onClear: () => {
-                        clearDebounce();
-                        pendingValueRef.current = '';
-                        setLocalValue('');
-                        emit({ value: '' });
-                    } })) : (_jsx(Typeahead, { options: options, mode: single ? 'single' : 'multi', selectedValue: single ? ((_f = value) !== null && _f !== void 0 ? _f : null) : Array.isArray(value) ? value : [], onChange: v => emit({ value: v }), minWidth: minWidth, popoverWidth: popoverWidth, popoverAnchorRef: filterFieldRef, placeholder: placeholder, variant: "embedded", inputProps: {
-                        inputSize: size,
-                        fieldClassName: styles.embeddedInputField,
-                        inputClassName: styles.embeddedInputElement,
-                    }, onClear: () => emit({ value: single ? '' : [] }), disabled: disabled, fullWidth: !shouldAutoFitTypeahead, fitContent: shouldAutoFitTypeahead })) })] }));
-}