@dbcdk/react-components 0.0.6 → 0.0.7

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

@@ -6,125 +6,7 @@ import { Button } from '../../components/button/Button';
 import { Input } from '../../components/forms/input/Input';
 import { Popover } from '../../components/popover/Popover';
 import styles from './DateTimePicker.module.css';
-/* ---------- Mask helpers (no deps) ---------- */
-// Pull only 0-9
-const digits = (s) => (s.match(/\d/g) || []).join('');
-// DD-MM-YYYY
-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)
-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"
-function maskSingle(text, enableTime) {
-    let t = text.trim().replace(/\s+/g, ' ');
-    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)
-function maskRange(text, enableTime) {
-    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
-    return `${a} – ${b}`.trim();
-}
-// Pad helper
-const pad2 = (n) => String(n).padStart(2, '0');
-// From Date → "DD-MM-YYYY" or "DD-MM-YYYY HH:mm" (local time)
-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;
-}
-// From start/end → "DD-MM-YYYY – DD-MM-YYYY" (+ optional time)
-function toMaskedRange(start, end, enableTime) {
-    if (start && end)
-        return `${toMaskedFromDate(start, enableTime)} – ${toMaskedFromDate(end, enableTime)}`;
-    if (start)
-        return `${toMaskedFromDate(start, enableTime)} –`;
-    if (end)
-        return `– ${toMaskedFromDate(end, enableTime)}`;
-    return '';
-}
-/* ---------- Parsing helpers (no deps) ---------- */
-// Accepts: YYYY-MM-DD, DD-MM-YYYY, DD/MM/YYYY, DD.MM.YYYY (+ optional HH:mm)
-function parseLooseDateOrDateTime(input) {
-    const txt = input.trim().replace(/\s+/g, ' ');
-    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
-    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 {
-        // Try DD-MM-YYYY or DD/MM/YYYY or DD.MM.YYYY
-        const mEu = /^(\d{1,2})[./-](\d{1,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
-    if (local.getFullYear() !== y || local.getMonth() !== m || local.getDate() !== d)
-        return null;
-    return local;
-}
-// Parse a range string with separators: "–", "-", "to", "til"
-function parseLooseRange(input) {
-    const sep = /\s*(?:–|-|to|til)\s*/i;
-    const [a, b] = input.split(sep);
-    if (!a || !b)
-        return null;
-    const s = parseLooseDateOrDateTime(a);
-    const e = parseLooseDateOrDateTime(b);
-    if (!s || !e)
-        return null;
-    return s <= e ? { start: s, end: e } : { start: e, end: s };
-}
+import { maskRange, maskSingle, parseLooseDateOrDateTime, parseLooseRange, toMaskedFromDate, toMaskedRange, } from './dateTimeHelpers';
 /* ---------- Date grid helpers (UTC) ---------- */
 const dUTC = (y, m, day) => new Date(Date.UTC(y, m, day));
 const addDaysUTC = (utcDate, n) => dUTC(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate() + n);

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

@@ -0,0 +1,13 @@
+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 const pad2: (n: number) => string;
+export declare function toMaskedFromDate(d: Date, enableTime: boolean): string;
+export declare function toMaskedRange(start: Date | null, end: Date | null, enableTime: boolean): string;
+export declare function parseLooseDateOrDateTime(input: string): Date | null;
+export declare function parseLooseRange(input: string): {
+    start: Date;
+    end: Date;
+} | null;

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

@@ -0,0 +1,119 @@
+/* ---------- 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) {
+    let t = text.trim().replace(/\s+/g, ' ');
+    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)
+export function maskRange(text, enableTime) {
+    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
+    return `${a} – ${b}`.trim();
+}
+// Pad helper
+export const pad2 = (n) => String(n).padStart(2, '0');
+// 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;
+}
+// From start/end → "DD-MM-YYYY – DD-MM-YYYY" (+ optional time)
+export function toMaskedRange(start, end, enableTime) {
+    if (start && end)
+        return `${toMaskedFromDate(start, enableTime)} – ${toMaskedFromDate(end, enableTime)}`;
+    if (start)
+        return `${toMaskedFromDate(start, enableTime)} –`;
+    if (end)
+        return `– ${toMaskedFromDate(end, enableTime)}`;
+    return '';
+}
+/* ---------- 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 = input.trim().replace(/\s+/g, ' ');
+    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
+    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 {
+        // Try DD-MM-YYYY or DD/MM/YYYY or DD.MM.YYYY
+        const mEu = /^(\d{1,2})[./-](\d{1,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
+    if (local.getFullYear() !== y || local.getMonth() !== m || local.getDate() !== d)
+        return null;
+    return local;
+}
+// Parse a range string with separators: "–", "-", "to", "til"
+export function parseLooseRange(input) {
+    const sep = /\s*(?:–|-|to|til)\s*/i;
+    const [a, b] = input.split(sep);
+    if (!a || !b)
+        return null;
+    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/interval-select/IntervalSelect.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ButtonVariant } from '../../components/button/Button';
+import { InputContainer } from '../../components/forms/input-container/InputContainer';
+type InputContainerProps = React.ComponentProps<typeof InputContainer>;
+export type IntervalOption = {
+    label: string;
+    /** How many minutes back from baseDate (default: now). */
+    minutesAgo: number;
+};
+export type IntervalSelectValue = number | null;
+export type IntervalSelectProps = Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
+    id?: string;
+    options: IntervalOption[];
+    selectedValue: IntervalSelectValue;
+    onChange: (date: Date, meta: {
+        minutesAgo: number;
+        option: IntervalOption;
+    }) => void;
+    /** Base date for the calculation; defaults to "now". */
+    baseDate?: Date;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: ButtonVariant;
+    onClear?: () => void;
+    dataCy?: string;
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+};
+export declare function IntervalSelect({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, id, options, selectedValue, onChange, baseDate, placeholder, size, variant, onClear, dataCy, }: IntervalSelectProps): React.ReactNode;
+export {};

package/dist/components/interval-select/IntervalSelect.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Clock } from 'lucide-react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { Button } from '../../components/button/Button';
+import { ClearButton } from '../../components/clear-button/ClearButton';
+import { InputContainer } from '../../components/forms/input-container/InputContainer';
+import { Menu } from '../../components/menu/Menu';
+import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
+import { Popover } from '../../components/popover/Popover';
+export function IntervalSelect({ 
+// InputContainer props
+label, error, helpText, orientation = 'vertical', labelWidth = '120px', fullWidth = true, required, 
+// tooltip
+tooltip, tooltipPlacement = 'right', 
+// IntervalSelect props
+id, options, selectedValue, onChange, baseDate, placeholder = 'Vælg interval', size, variant = 'outlined', onClear, dataCy, }) {
+    const generatedId = useId();
+    const controlId = id !== null && id !== void 0 ? id : `interval-select-${generatedId}`;
+    const describedById = `${controlId}-desc`;
+    const popoverRef = useRef(null);
+    const optionRefs = useRef([]);
+    const selectedIndex = useMemo(() => options.findIndex(o => o.minutesAgo === selectedValue), [options, selectedValue]);
+    const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
+    useEffect(() => {
+        var _a;
+        (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [activeIndex]);
+    const selected = useMemo(() => { var _a; return (_a = options.find(o => o.minutesAgo === selectedValue)) !== null && _a !== void 0 ? _a : null; }, [options, 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;
+    })();
+    const handleCommit = (opt) => {
+        var _a;
+        const base = baseDate !== null && baseDate !== void 0 ? baseDate : new Date();
+        const dt = new Date(base.getTime() - opt.minutesAgo * 60000);
+        onChange(dt, { minutesAgo: opt.minutesAgo, option: opt });
+        (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    };
+    const handleKeyDown = (e) => {
+        var _a;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setActiveIndex(i => Math.min(i + 1, options.length - 1));
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setActiveIndex(i => Math.max(i - 1, 0));
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (options[activeIndex])
+                    handleCommit(options[activeIndex]);
+                break;
+            case 'Escape':
+                e.preventDefault();
+                (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                break;
+        }
+    };
+    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, children: [_jsx(Popover, { ref: popoverRef, trigger: (onClick, icon) => (_jsx(Button, { ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'interval-select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
+                        setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+                        onClick(e);
+                    }, size: size, type: "button", "aria-haspopup": "listbox", "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xxs", children: [_jsx(Clock, { size: 14 }), selected ? selected.label : placeholder] }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                        const isSelected = opt.minutesAgo === selectedValue;
+                        const isActive = index === activeIndex;
+                        return (_jsx(Menu.Item, { active: isActive, "aria-selected": isSelected, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", tabIndex: isActive ? 0 : -1, onClick: () => handleCommit(opt), 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] }) }, opt.minutesAgo));
+                    }) }) }), (error || helpText) && (_jsx("span", { id: describedById, style: { display: 'none' }, children: error !== null && error !== void 0 ? error : helpText }))] }));
+}

package/package.json

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