@dbcdk/react-components 0.0.9 → 0.0.12

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

@@ -5,9 +5,9 @@ import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'r
 import { Button } from '../../components/button/Button';
 import { Input } from '../../components/forms/input/Input';
 import { Popover } from '../../components/popover/Popover';
-import { localDateFromYMD, maskRange, maskSingle, pad2, parseLooseDateOrDateTime, parseLooseRange, toMaskedFromDate, toMaskedFromYMD, utcMillisFromYMD, ymdFromLocalDate, ymdFromUTCDateOnly, } from './dateTimeHelpers';
+import { isoFromLocalDate, isoFromLocalParts, localDateFromIso, maskRange, maskSingle, parseLooseDateOrDateTime, parseLooseRange, utcMillisFromIso, toMaskedFromDate, } from './dateTimeHelpers';
 import styles from './DateTimePicker.module.css';
-/* ---------- Date grid helpers (UTC) ---------- */
+/* ---------- Date grid helpers (UTC date-only cells) ---------- */
 const dUTC = (y, m, day) => new Date(Date.UTC(y, m, day));
 const addDaysUTC = (utcDate, n) => dUTC(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate() + n);
 const startOfMonthUTC = (utcDate) => dUTC(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), 1);
@@ -15,14 +15,16 @@ const endOfMonthUTC = (utcDate) => dUTC(utcDate.getUTCFullYear(), utcDate.getUTC
 const sameDayUTC = (a, b) => a.getUTCFullYear() === b.getUTCFullYear() &&
     a.getUTCMonth() === b.getUTCMonth() &&
     a.getUTCDate() === b.getUTCDate();
-const toUTCDateOnly = (local) => dUTC(local.getFullYear(), local.getMonth(), local.getDate());
+// IMPORTANT: treat local calendar date as the source of truth for the grid.
+// Build an equivalent "UTC date-only" for comparisons.
+const toUTCDateOnlyFromLocal = (local) => dUTC(local.getFullYear(), local.getMonth(), local.getDate());
 const startOfWeekUTC = (utcDate, weekStartsOn) => {
     const dow = utcDate.getUTCDay();
     const diff = (dow - weekStartsOn + 7) % 7;
     return addDaysUTC(utcDate, -diff);
 };
 function buildMonthGrid(anchorLocalDate, weekStartsOn) {
-    const anchorUTC = toUTCDateOnly(anchorLocalDate);
+    const anchorUTC = toUTCDateOnlyFromLocal(anchorLocalDate);
     const firstUTC = startOfWeekUTC(startOfMonthUTC(anchorUTC), weekStartsOn);
     const cells = [];
     for (let i = 0; i < 42; i++)
@@ -55,77 +57,72 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
     void formatRange;
     const popRef = useRef(null);
     const todayLocal = useMemo(() => new Date(), []);
-    // ---- Derive a local anchor from the controlled value ----
+    // ---- local anchor from controlled value ----
     const initialAnchor = useMemo(() => {
         var _a, _b;
         if (mode === 'single') {
-            if (enableTime && typeof value === 'number')
-                return new Date(value); // local rendering
-            if (!enableTime && typeof value === 'string')
-                return (_a = localDateFromYMD(value)) !== null && _a !== void 0 ? _a : todayLocal;
+            if (typeof value === 'string')
+                return (_a = localDateFromIso(value)) !== null && _a !== void 0 ? _a : todayLocal;
             return todayLocal;
         }
         if (mode === 'range' && value && typeof value === 'object' && 'start' in value && value.start) {
-            return (_b = localDateFromYMD(value.start)) !== null && _b !== void 0 ? _b : todayLocal;
+            return (_b = localDateFromIso(value.start)) !== null && _b !== void 0 ? _b : todayLocal;
         }
         return todayLocal;
-    }, [mode, value, enableTime, todayLocal]);
+    }, [mode, value, todayLocal]);
     const [monthAnchor, setMonthAnchor] = useState(initialAnchor);
-    // Keep month anchor in sync when external value changes (but don’t fight while typing)
-    useEffect(() => {
-        setMonthAnchor(initialAnchor);
-    }, [initialAnchor]);
+    useEffect(() => setMonthAnchor(initialAnchor), [initialAnchor]);
+    // time defaults (local)
     const [timeHH, setTimeHH] = useState(todayLocal.getHours());
     const [timeMM, setTimeMM] = useState(Math.floor(todayLocal.getMinutes() / timeStep) * timeStep);
-    // If value is a datetime and changes externally, keep dropdowns in sync
+    // If datetime value changes externally, keep HH/MM in sync
     useEffect(() => {
-        if (mode === 'single' && enableTime && typeof value === 'number') {
-            const d = new Date(value);
+        if (mode === 'single' && enableTime && typeof value === 'string') {
+            const d = localDateFromIso(value);
+            if (!d)
+                return;
             setTimeHH(d.getHours());
             setTimeMM(Math.floor(d.getMinutes() / timeStep) * timeStep);
         }
     }, [mode, enableTime, value, timeStep]);
     const [hoverUTC, setHoverUTC] = useState(null);
     const cellsUTC = useMemo(() => buildMonthGrid(monthAnchor, weekStartsOn), [monthAnchor, weekStartsOn]);
-    const monthStartUTC = useMemo(() => startOfMonthUTC(toUTCDateOnly(monthAnchor)), [monthAnchor]);
-    const monthEndUTC = useMemo(() => endOfMonthUTC(toUTCDateOnly(monthAnchor)), [monthAnchor]);
+    const monthStartUTC = useMemo(() => startOfMonthUTC(toUTCDateOnlyFromLocal(monthAnchor)), [monthAnchor]);
+    const monthEndUTC = useMemo(() => endOfMonthUTC(toUTCDateOnlyFromLocal(monthAnchor)), [monthAnchor]);
     const weekdayFmt = useMemo(() => new Intl.DateTimeFormat(locale, { weekday: 'short' }), [locale]);
     const monthFmt = useMemo(() => new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }), [locale]);
-    // ---- Selection state for the grid (always compared in UTC date-only space) ----
+    // ---- selection state for grid (compare in UTC date-only) ----
     const selectedUTC_single = useMemo(() => {
-        if (mode !== 'single' || !value)
+        if (mode !== 'single')
             return null;
-        if (enableTime) {
-            if (typeof value !== 'number')
-                return null;
-            return toUTCDateOnly(new Date(value));
-        }
         if (typeof value !== 'string')
             return null;
-        const local = localDateFromYMD(value);
-        return local ? toUTCDateOnly(local) : null;
-    }, [mode, value, enableTime]);
+        const d = localDateFromIso(value);
+        if (!d)
+            return null;
+        return toUTCDateOnlyFromLocal(d);
+    }, [mode, value]);
     const selectedUTC_start = useMemo(() => {
         if (mode !== 'range' || !value || typeof value !== 'object' || !('start' in value))
             return null;
         if (!value.start)
             return null;
-        const local = localDateFromYMD(value.start);
-        return local ? toUTCDateOnly(local) : null;
+        const d = localDateFromIso(value.start);
+        return d ? toUTCDateOnlyFromLocal(d) : null;
     }, [mode, value]);
     const selectedUTC_end = useMemo(() => {
         if (mode !== 'range' || !value || typeof value !== 'object' || !('end' in value))
             return null;
         if (!value.end)
             return null;
-        const local = localDateFromYMD(value.end);
-        return local ? toUTCDateOnly(local) : null;
+        const d = localDateFromIso(value.end);
+        return d ? toUTCDateOnlyFromLocal(d) : null;
     }, [mode, value]);
     const isDisabledUTC = useCallback((utcDay) => {
-        // min/max are Dates (instants). Treat them as local-day constraints for UI.
-        if (min && utcDay < toUTCDateOnly(min))
+        // Interpret min/max as local-day constraints for UI
+        if (min && utcDay < toUTCDateOnlyFromLocal(min))
             return true;
-        if (max && utcDay > toUTCDateOnly(max))
+        if (max && utcDay > toUTCDateOnlyFromLocal(max))
             return true;
         return false;
     }, [min, max]);
@@ -133,33 +130,29 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
         var _a, _b;
         if (isDisabledUTC(utcDay))
             return;
+        // utcDay's UTC Y/M/D corresponds to the *local calendar day* shown in UI.
+        const y = utcDay.getUTCFullYear();
+        const m0 = utcDay.getUTCMonth();
+        const d = utcDay.getUTCDate();
         if (mode === 'single') {
-            if (enableTime) {
-                // User picked a local wall time; emit UTC instant as millis
-                const y = utcDay.getUTCFullYear();
-                const m = utcDay.getUTCMonth();
-                const d = utcDay.getUTCDate();
-                const local = new Date(y, m, d, timeHH, timeMM, 0, 0);
-                onChange(local.getTime());
-            }
-            else {
-                // Date-only: emit timezone-free day label
-                onChange(ymdFromUTCDateOnly(utcDay));
-            }
+            const iso = enableTime
+                ? isoFromLocalParts(y, m0, d, timeHH, timeMM)
+                : isoFromLocalParts(y, m0, d, 0, 0);
+            onChange(iso);
             (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
             return;
         }
-        // RANGE: date-only
+        // range (date-only in UI, but emitted as ISO instants at local midnight)
         const curr = value && typeof value === 'object' && 'start' in value
             ? value
             : { start: null, end: null };
-        const picked = ymdFromUTCDateOnly(utcDay);
+        const picked = isoFromLocalParts(y, m0, d, 0, 0);
         if (!curr.start || (curr.start && curr.end)) {
             onChange({ start: picked, end: null });
             return;
         }
-        const a = utcMillisFromYMD(curr.start);
-        const b = utcMillisFromYMD(picked);
+        const a = utcMillisFromIso(curr.start);
+        const b = utcMillisFromIso(picked);
         const start = a <= b ? curr.start : picked;
         const end = a <= b ? picked : curr.start;
         onChange({ start, end });
@@ -186,7 +179,7 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
             ].includes(e.key)) {
                 e.preventDefault();
             }
-            const anchor = toUTCDateOnly(monthAnchor);
+            const anchor = toUTCDateOnlyFromLocal(monthAnchor);
             const move = (days) => setMonthAnchor(prev => addDaysLocal(prev, days));
             switch (e.key) {
                 case 'ArrowLeft':
@@ -223,31 +216,26 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
     // ---- Input display: always local ----
     const formatted = useMemo(() => {
         if (mode === 'single') {
-            if (!value)
-                return '';
-            if (enableTime) {
-                if (typeof value !== 'number')
-                    return '';
-                return toMaskedFromDate(new Date(value), true);
-            }
             if (typeof value !== 'string')
                 return '';
-            return toMaskedFromYMD(value);
+            const d = localDateFromIso(value);
+            return d ? toMaskedFromDate(d, enableTime) : '';
         }
-        // range (date-only)
         const v = value;
-        const s = typeof (v === null || v === void 0 ? void 0 : v.start) === 'string' ? toMaskedFromYMD(v.start) : '';
-        const e = typeof (v === null || v === void 0 ? void 0 : v.end) === 'string' ? toMaskedFromYMD(v.end) : '';
-        if (s && e)
-            return `${s} – ${e}`;
-        if (s)
-            return `${s} –`;
-        if (e)
-            return `– ${e}`;
+        const s = typeof (v === null || v === void 0 ? void 0 : v.start) === 'string' ? localDateFromIso(v.start) : null;
+        const e = typeof (v === null || v === void 0 ? void 0 : v.end) === 'string' ? localDateFromIso(v.end) : null;
+        const ss = s ? toMaskedFromDate(s, false) : '';
+        const ee = e ? toMaskedFromDate(e, false) : '';
+        if (ss && ee)
+            return `${ss} – ${ee}`;
+        if (ss)
+            return `${ss} –`;
+        if (ee)
+            return `– ${ee}`;
         return '';
     }, [mode, value, enableTime]);
     const [text, setText] = useState(formatted);
-    const [dirty, setDirty] = useState(false); // while user is typing
+    const [dirty, setDirty] = useState(false);
     useEffect(() => {
         if (!dirty)
             setText(formatted);
@@ -265,28 +253,21 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
             const dLocal = parseLooseDateOrDateTime(text);
             if (!dLocal)
                 return;
-            if (enableTime) {
-                // Emit UTC instant millis
-                onChange(dLocal.getTime());
-            }
-            else {
-                // Emit date-only string (local calendar day)
-                onChange(ymdFromLocalDate(dLocal));
-            }
+            // If enableTime=false, parseLooseDateOrDateTime returns 00:00 local -> still OK.
+            onChange(isoFromLocalDate(dLocal));
             setMonthAnchor(dLocal);
             setDirty(false);
             return;
         }
         const r = parseLooseRange(text);
         if (r) {
-            // Range is date-only, based on local calendar parts
-            const start = `${r.start.getFullYear()}-${pad2(r.start.getMonth() + 1)}-${pad2(r.start.getDate())}`;
-            const end = `${r.end.getFullYear()}-${pad2(r.end.getMonth() + 1)}-${pad2(r.end.getDate())}`;
-            onChange({ start, end });
+            const startIso = isoFromLocalParts(r.start.getFullYear(), r.start.getMonth(), r.start.getDate(), 0, 0);
+            const endIso = isoFromLocalParts(r.end.getFullYear(), r.end.getMonth(), r.end.getDate(), 0, 0);
+            onChange({ start: startIso, end: endIso });
             setMonthAnchor(r.start);
             setDirty(false);
         }
-    }, [text, mode, onChange, enableTime]);
+    }, [text, mode, onChange]);
     const clear = useCallback(() => {
         if (mode === 'single')
             onChange(null);
@@ -308,7 +289,7 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
     const fallbackPlaceholder = mode === 'single' ? 'Vælg dato' : 'Vælg interval';
     return (_jsx(Popover, { ref: popRef, trigger: toggle => {
             var _a, _b;
-            return (_jsx("div", { onClick: toggle, className: styles.triggerWrap, children: _jsx(Input, { ...inputProps, placeholder: (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder) !== null && _a !== void 0 ? _a : fallbackPlaceholder, value: dirty ? text : formatted, onInput: e => {
+            return (_jsx("div", { onClick: toggle, className: styles.triggerWrap, children: _jsx(Input, { ...inputProps, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: "false", placeholder: (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder) !== null && _a !== void 0 ? _a : fallbackPlaceholder, value: dirty ? text : formatted, onInput: e => {
                         setDirty(true);
                         const raw = e.target.value;
                         const masked = mode === 'single' ? maskSingle(raw, enableTime) : maskRange(raw, false);
@@ -326,17 +307,16 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
         }, viewportPadding: 8, children: _jsxs("div", { className: cx(styles.panel, !!(presets === null || presets === void 0 ? void 0 : presets.length) && styles.panelWithPresets), children: [(presets === null || presets === void 0 ? void 0 : presets.length) ? (_jsxs("div", { className: styles.presetsCol, children: [_jsx("div", { className: styles.presetsLabel, children: "Forvalg" }), _jsxs("div", { className: styles.presetsList, children: [presets.map(p => (_jsx(Button, { variant: "outlined", size: "sm", onClick: () => {
                                         var _a;
                                         const r = p.getRange();
-                                        // Presets -> date-only range
-                                        const start = `${r.start.getFullYear()}-${pad2(r.start.getMonth() + 1)}-${pad2(r.start.getDate())}`;
-                                        const end = `${r.end.getFullYear()}-${pad2(r.end.getMonth() + 1)}-${pad2(r.end.getDate())}`;
-                                        onChange({ start, end });
+                                        const startIso = isoFromLocalParts(r.start.getFullYear(), r.start.getMonth(), r.start.getDate(), 0, 0);
+                                        const endIso = isoFromLocalParts(r.end.getFullYear(), r.end.getMonth(), r.end.getDate(), 0, 0);
+                                        onChange({ start: startIso, end: endIso });
                                         setDirty(false);
-                                        setText(`${toMaskedFromYMD(start)} – ${toMaskedFromYMD(end)}`);
+                                        setText(`${toMaskedFromDate(r.start, false)} – ${toMaskedFromDate(r.end, false)}`);
                                         setMonthAnchor(r.start);
                                         (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
                                     }, children: p.label }, p.label))), mode === 'range' && (_jsx(Button, { variant: "danger", size: "sm", onClick: clear, icon: _jsx(X, { size: 14 }), children: "Ryd" }))] })] })) : null, _jsxs("div", { className: styles.calendarArea, children: [_jsxs("div", { className: styles.header, children: [_jsx(Button, { variant: "outlined", size: "sm", "aria-label": "Forrige m\u00E5ned", icon: _jsx(ChevronLeft, { size: 16 }), onClick: () => setMonthAnchor(addMonthsLocal(monthAnchor, -1)) }), _jsx("div", { "aria-live": "polite", className: styles.headerTitle, children: monthFmt.format(monthAnchor) }), _jsx(Button, { variant: "outlined", size: "sm", "aria-label": "N\u00E6ste m\u00E5ned", icon: _jsx(ChevronRight, { size: 16 }), onClick: () => setMonthAnchor(addMonthsLocal(monthAnchor, 1)) })] }), _jsx("div", { className: styles.weekRow, "aria-hidden": true, children: Array.from({ length: 7 }, (_, i) => (i + weekStartsOn) % 7).map(dow => (_jsx("div", { className: styles.weekCell, children: weekdayFmt.format(dUTC(2024, 8, dow + 1)).slice(0, 2) }, dow))) }), _jsx("div", { ref: gridRef, role: "grid", "aria-label": "Kalender", tabIndex: 0, className: styles.grid, onMouseLeave: () => setHoverUTC(null), children: cellsUTC.map((utcDay, idx) => {
                                 const inThisMonth = utcDay >= monthStartUTC && utcDay <= monthEndUTC;
-                                const isToday = sameDayUTC(utcDay, toUTCDateOnly(todayLocal));
+                                const isToday = sameDayUTC(utcDay, toUTCDateOnlyFromLocal(todayLocal));
                                 const disabledDay = isDisabledUTC(utcDay);
                                 let selected = false;
                                 let inRange = false;

package/dist/components/datetime-picker/dateTimeHelpers.d.ts

@@ -2,20 +2,22 @@ export declare const digits: (s: string) => string;
 export declare function maskDateEU(text: string): string;
 export declare function maskTimeHM(text: string): string;
 export declare function maskSingle(text: string, enableTime: boolean): string;
-export declare function maskRange(text: string, enableTime: boolean): string;
+export declare function maskRange(text: string, _enableTime: boolean): string;
 export declare const pad2: (n: number) => string;
-export type DateOnly = string;
-export declare function parseYMD(ymd: string): {
-    y: number;
-    m: number;
-    d: number;
-} | null;
-export declare function ymdFromLocalDate(dLocal: Date): DateOnly;
-export declare function ymdFromUTCDateOnly(utcDay: Date): DateOnly;
-export declare function utcMillisFromYMD(ymd: DateOnly): number;
-export declare function localDateFromYMD(ymd: DateOnly): Date | null;
+export type UtcIsoString = string;
+export declare function isUtcIsoString(v: unknown): v is UtcIsoString;
+export declare function utcMillisFromIso(iso: UtcIsoString): number;
+/**
+ * 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.
+ */
+export declare function isoFromLocalParts(y: number, m0: number, // 0-based
+d: number, hh?: number, mm?: number): UtcIsoString;
+/** Convert a local Date to a UTC ISO string (Z). */
+export declare function isoFromLocalDate(dLocal: Date): UtcIsoString;
+/** For anchoring the calendar safely from a UTC ISO string. */
+export declare function localDateFromIso(iso: UtcIsoString): Date | null;
 export declare function toMaskedFromDate(d: Date, enableTime: boolean): string;
-export declare function toMaskedFromYMD(ymd: DateOnly): string;
 export declare function parseLooseDateOrDateTime(input: string): Date | null;
 export declare function parseLooseRange(input: string): {
     start: Date;

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

@@ -35,56 +35,42 @@ export function maskSingle(text, enableTime) {
     return timePart ? `${datePart} ${timePart}` : datePart;
 }
 // Range: mask both sides around common separators (–, -, to, til)
-export function maskRange(text, enableTime) {
+export function maskRange(text, _enableTime) {
+    // NOTE: range is date-only in the UI
     const sepRe = /\s*(?:–|-|to|til)\s*/i;
     const parts = text.split(sepRe);
-    if (parts.length === 1) {
-        // user typing first side
-        return maskSingle(parts[0], enableTime);
-    }
-    const a = maskSingle(parts[0], enableTime);
-    const b = maskSingle(parts.slice(1).join(' '), enableTime); // everything after first sep
+    if (parts.length === 1)
+        return maskSingle(parts[0], false);
+    const a = maskSingle(parts[0], false);
+    const b = maskSingle(parts.slice(1).join(' '), false);
     return `${a} – ${b}`.trim();
 }
 // Pad helper
 export const pad2 = (n) => String(n).padStart(2, '0');
-export function parseYMD(ymd) {
-    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(ymd);
-    if (!m)
-        return null;
-    const y = +m[1];
-    const mo = +m[2];
-    const d = +m[3];
-    if (mo < 1 || mo > 12 || d < 1 || d > 31)
-        return null;
-    return { y, m: mo, d };
+export function isUtcIsoString(v) {
+    return typeof v === 'string' && /Z$/.test(v) && !Number.isNaN(Date.parse(v));
 }
-export function ymdFromLocalDate(dLocal) {
-    const y = dLocal.getFullYear();
-    const m = dLocal.getMonth() + 1;
-    const d = dLocal.getDate();
-    return `${y}-${pad2(m)}-${pad2(d)}`;
+export function utcMillisFromIso(iso) {
+    return Date.parse(iso);
 }
-export function ymdFromUTCDateOnly(utcDay) {
-    const y = utcDay.getUTCFullYear();
-    const m = utcDay.getUTCMonth() + 1;
-    const d = utcDay.getUTCDate();
-    return `${y}-${pad2(m)}-${pad2(d)}`;
+/**
+ * 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.
+ */
+export function isoFromLocalParts(y, m0, // 0-based
+d, hh = 0, mm = 0) {
+    return new Date(y, m0, d, hh, mm, 0, 0).toISOString();
 }
-// Used only for ordering/comparing date-only values.
-export function utcMillisFromYMD(ymd) {
-    const p = parseYMD(ymd);
-    if (!p)
-        return NaN;
-    return Date.UTC(p.y, p.m - 1, p.d);
+/** Convert a local Date to a UTC ISO string (Z). */
+export function isoFromLocalDate(dLocal) {
+    return dLocal.toISOString();
 }
-// For anchoring the calendar grid safely from a date-only value.
-export function localDateFromYMD(ymd) {
-    const p = parseYMD(ymd);
-    if (!p)
+/** 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;
-    // local noon avoids DST edge cases for date-only anchors
-    return new Date(p.y, p.m - 1, p.d, 12, 0, 0, 0);
+    return new Date(ms); // local rendering
 }
 /* ---------- Formatting (UI shows local) ---------- */
 // From Date → "DD-MM-YYYY" or "DD-MM-YYYY HH:mm" (local time)
@@ -97,12 +83,6 @@ export function toMaskedFromDate(d, enableTime) {
         out += ` ${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
     return out;
 }
-export function toMaskedFromYMD(ymd) {
-    const p = parseYMD(ymd);
-    if (!p)
-        return '';
-    return `${pad2(p.d)}-${pad2(p.m)}-${p.y}`;
-}
 /* ---------- Parsing helpers (no deps) ---------- */
 // Accepts: YYYY-MM-DD, DD-MM-YYYY, DD/MM/YYYY, DD.MM.YYYY (+ optional HH:mm)
 export function parseLooseDateOrDateTime(input) {

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

@@ -61,10 +61,18 @@ function OperatorDropdown({ value, onChange, operators, size = 'sm', disabled, }
                 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', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, ...inputProps }) {
     var _a, _b;
     const [selectedOperator, setSelectedOperator] = useState(operator);
     const ops = useMemo(() => operators !== null && operators !== void 0 ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
+    const active = isFilterActive(value);
     // Local state ONLY for input control (to avoid URL->props lag)
     const [localValue, setLocalValue] = useState((_a = value) !== null && _a !== void 0 ? _a : '');
     const debounceRef = useRef(null);
@@ -92,7 +100,7 @@ export function FilterField({ field, control, operator, value, onChange, operato
         debounceRef.current = setTimeout(() => {
             isTypingRef.current = false;
             emit({ value: nextVal });
-        }, 250); // tweak debounce as needed
+        }, 250);
     };
     // Sync internal value when parent value changes (e.g. URL updates)
     useEffect(() => {
@@ -100,7 +108,6 @@ export function FilterField({ field, control, operator, value, onChange, operato
         if (control !== 'input')
             return;
         const incoming = (_a = value) !== null && _a !== void 0 ? _a : '';
-        // don't fight the user mid-typing; once parent catches up, we allow sync again
         if (!isTypingRef.current && incoming !== localValue) {
             setLocalValue(incoming);
         }
@@ -115,25 +122,23 @@ export function FilterField({ field, control, operator, value, onChange, operato
                 clearTimeout(debounceRef.current);
         };
     }, []);
-    return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: ` ${styles.filterField} ${styles[size]} ${value ? styles.active : ''}`, children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: op => emit({ operator: op }), operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex' : styles.valueWrapper}`, children: control === 'input' ? (_jsx(Input, { ...inputProps, value: localValue, onChange: e => {
+    return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: `${styles.filterField} ${styles[size]} ${active ? styles.active : ''}`, children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: op => emit({ operator: op }), operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex dbc-flex-grow' : styles.valueWrapper}`, children: control === 'input' ? (_jsx(Input, { ...inputProps, value: localValue, onChange: e => {
                         const next = e.currentTarget.value;
                         isTypingRef.current = true;
-                        setLocalValue(next); // immediate UI update
-                        scheduleEmitValue(next); // debounced parent update
-                    }, inputSize: size, placeholder: placeholder, width: "160px", minWidth: "120px", disabled: disabled, onClear: () => {
+                        setLocalValue(next);
+                        scheduleEmitValue(next);
+                    }, fullWidth: true, inputSize: size, placeholder: placeholder, width: "160px", minWidth: "120px", disabled: disabled, onClear: () => {
                         isTypingRef.current = false;
                         if (debounceRef.current)
                             clearTimeout(debounceRef.current);
                         setLocalValue('');
-                        emit({ value: '' }); // clear should be immediate
+                        emit({ value: '' });
                     } })) : single ? (_jsx(Select, { options: options, selectedValue: (_b = value) !== null && _b !== void 0 ? _b : null, onChange: v => emit({ value: v }), placeholder: placeholder, size: size, variant: "inline", onClear: () => emit({ value: '' }) })) : (_jsx(MultiSelect, { options: options, size: size, variant: "inline", selectedValues: (Array.isArray(value) ? value : []), onChange: v => {
                         const current = new Set((Array.isArray(value) ? value : []));
-                        if (current.has(v)) {
+                        if (current.has(v))
                             current.delete(v);
-                        }
-                        else {
+                        else
                             current.add(v);
-                        }
                         emit({ value: Array.from(current) });
                     }, onClear: () => emit({ value: [] }), children: placeholder })) })] }));
 }