npm - @dbcdk/react-components - Versions diffs - 0.0.7 → 0.0.9 - Mend

@dbcdk/react-components 0.0.7 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/README.md +167 -0
package/dist/components/__stories__/_data/tabs.d.ts +9 -0
package/dist/components/__stories__/_data/tabs.js +31 -0
package/dist/components/code-block/CodeBlock.module.css +1 -1
package/dist/components/datetime-picker/DateTimePicker.d.ts +4 -3
package/dist/components/datetime-picker/DateTimePicker.js +123 -50
package/dist/components/datetime-picker/dateTimeHelpers.d.ts +11 -1
package/dist/components/datetime-picker/dateTimeHelpers.js +44 -9
package/dist/components/forms/select/Select.d.ts +2 -1
package/dist/components/forms/select/Select.js +3 -8
package/dist/components/overlay/modal/provider/ModalProvider.d.ts +2 -2
package/dist/components/overlay/modal/provider/ModalProvider.js +24 -25
package/dist/components/popover/Popover.js +33 -14
package/dist/components/popover/Popover.module.css +0 -4
package/dist/components/table/tanstack.js +1 -1
package/package.json +1 -1

package/README.md ADDED Viewed

@@ -0,0 +1,167 @@
+# DBC React Components
+Reusable React components for DBC projects.
+This library provides a shared, themeable component system used across DBC’s internal (and selected external) applications. It is designed to promote consistency, speed up development, and improve overall quality and accessibility.
+---
+## Purpose of the library
+The goals of this component library are:
+- **Consistency**
+  Provide a unified look and feel across DBC’s digital products, especially internal tools.
+- **Development speed**
+  Reduce development and maintenance time by reusing well-tested components instead of rebuilding UI from scratch.
+- **Quality & accessibility**
+  Components are reviewed and built according to best practices, with accessibility and robustness in mind, ensuring a strong baseline quality.
+- **Reduced third-party dependency**
+  Increase digital independence by building and sharing our own components across the organisation, reducing reliance on external NPM packages.
+---
+## Getting started
+### 1) Install the package
+```bash
+npm install @dbcdk/react-components
+```
+---
+### 2) Import global styles
+> **Important:** The component library requires global styles to be imported once in your application.
+```ts
+import '@dbcdk/react-components/styles.css'
+```
+---
+### 3) Add the theme `<link>` in your root layout (Next.js example)
+The library uses theme CSS files that are dynamically loaded via a `<link>` tag in `<head>`.
+You **must** use the exported `LINK_ID` so the `useTheme()` hook can update the active theme at runtime.
+```tsx
+import { ReactNode } from 'react'
+import { cookies } from 'next/headers'
+import { LINK_ID } from '@dbcdk/react-components'
+import '@dbcdk/react-components/styles.css'
+export default async function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
+  const cookieStore = await cookies()
+  const themeId = cookieStore.get('dbc_theme')?.value || 'light'
+  return (
+    <html lang="da">
+      <head>
+        <link id={LINK_ID} rel="stylesheet" href={`/themes/${themeId}.css`} />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+> Theme files are expected to be served from `/themes/<theme>.css`.
+---
+### 4) Switching theme in your application
+Example using `useTheme()`:
+```tsx
+'use client'
+import { AppHeader, Button, useTheme } from '@dbcdk/react-components'
+import { Moon, Sun } from 'lucide-react'
+export default function Header() {
+  const { theme, switchTheme } = useTheme()
+  return (
+    <AppHeader>
+      <Button variant="outlined" onClick={() => switchTheme(theme === 'light' ? 'dark' : 'light')}>
+        {theme === 'light' ? <Moon /> : <Sun />}
+      </Button>
+    </AppHeader>
+  )
+}
+```
+The hook updates the `<link>` tag automatically and persists the selected theme.
+---
+## Using Storybook
+Storybook is the primary documentation and exploration tool for this library.
+### Local Storybook
+```bash
+npm run storybook
+```
+Storybook runs on `http://localhost:6006`.
+### In Storybook you can:
+1. Browse components in the left-hand navigation
+2. Open a story to see variants and states
+3. Adjust props via **Controls**
+4. Read guidelines and usage notes in the **Docs** tab
+---
+## Themes
+Use the 🎨 **theme selector** in the Storybook toolbar to switch between available themes (e.g. light and dark).
+All components are styled using CSS variables defined in the theme files.
+---
+## Accessibility (a11y)
+Accessibility is a first-class concern in this library.
+We aim to ensure that components:
+- Are usable with keyboard navigation
+- Have visible and consistent focus states
+- Work with screen readers
+- Follow common ARIA and semantic HTML best practices
+Storybook includes the a11y addon to help identify issues during development.
+---
+## Contributing
+See [`CONTRIBUTING.md`](./CONTRIBUTING.md) for detailed guidelines on:
+- Folder structure
+- Styling and theming rules
+- Storybook requirements
+- TypeScript conventions
+- Versioning and changesets
+---
+## License
+ISC
+```
+```

package/dist/components/__stories__/_data/tabs.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { TabItem } from '../../../components/tabs/Tabs';
+export declare const tabItems: TabItem[];
+export declare const tabArgs: {
+    tabs: TabItem[];
+    variant: 'filled' | 'outlined';
+    header: string;
+    addition: ReactNode;
+};

package/dist/components/__stories__/_data/tabs.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Hourglass, Undo2 } from 'lucide-react';
+import { Button } from '../../../components/button/Button';
+import { Icon } from '../../../components/icon/Icon';
+import { SampleTable } from './table';
+export const tabItems = [
+    {
+        header: 'Afvist af anmelder',
+        id: 1,
+        headerIcon: _jsx(Icon, { severity: "error" }),
+        content: _jsx(SampleTable, {}),
+    },
+    {
+        header: 'Afventer godkendelse',
+        id: 2,
+        headerIcon: _jsx(Hourglass, {}),
+        content: _jsx(SampleTable, {}),
+    },
+    {
+        header: 'Retur til redigering',
+        id: 3,
+        headerIcon: _jsx(Undo2, {}),
+        content: _jsx(SampleTable, {}),
+    },
+];
+export const tabArgs = {
+    tabs: tabItems,
+    variant: 'filled',
+    header: 'Sagsoversigt',
+    addition: _jsx(Button, { children: "Se historik" }),
+};

package/dist/components/code-block/CodeBlock.module.css CHANGED Viewed

@@ -13,7 +13,7 @@
 }
 .container.sm {
-  padding: var(--spacing-xxs);
+  padding: var(--spacing-xs);
   padding-inline-end: calc(var(--spacing-xxs) + 40px);
   min-height: 0;
 }

package/dist/components/datetime-picker/DateTimePicker.d.ts CHANGED Viewed

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Input } from '../../components/forms/input/Input';
+import { DateOnly } from './dateTimeHelpers';
 type Mode = 'single' | 'range';
 type WeekStart = 0 | 1;
-export type DateValue = Date | null | {
-    start: Date | null;
-    end: Date | null;
+export type DateValue = number | DateOnly | null | {
+    start: DateOnly | null;
+    end: DateOnly | null;
 };
 type InputProps = React.ComponentProps<typeof Input>;
 export interface DateTimePickerProps {

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

@@ -5,8 +5,8 @@ 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 styles from './DateTimePicker.module.css';
-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);
@@ -33,13 +33,6 @@ const isBetweenUTC = (d, a, b) => {
     const t = +d, s = +a, e = +b;
     return t >= Math.min(s, e) && t <= Math.max(s, e);
 };
-function composeLocalDateTimeISO(utcDateOnly, hh, mm) {
-    const y = utcDateOnly.getUTCFullYear();
-    const m = utcDateOnly.getUTCMonth();
-    const d = utcDateOnly.getUTCDate();
-    const local = new Date(y, m, d, hh, mm, 0, 0);
-    return local.toISOString();
-}
 /* ---------- Formatting (exposed but input uses mask) ---------- */
 function defaultFormatDate(d, { locale, enableTime }) {
     const opts = enableTime
@@ -57,37 +50,79 @@ function defaultFormatRange(s, e, opts) {
     return '';
 }
 const cx = (...classes) => classes.filter(Boolean).join(' ');
-export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'single', value, onChange, enableTime = false, timeStep = 15, min, max, locale = typeof navigator !== 'undefined' ? navigator.language : 'da-DK', weekStartsOn = 1, presets, inputProps, formatDate = defaultFormatDate, // still exposed, not used for input text
-formatRange = defaultFormatRange, // still exposed, not used for input text
- }, _ref) {
+export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'single', value, onChange, enableTime = false, timeStep = 15, min, max, locale = typeof navigator !== 'undefined' ? navigator.language : 'da-DK', weekStartsOn = 1, presets, inputProps, formatDate = defaultFormatDate, formatRange = defaultFormatRange, }, _ref) {
     void formatDate;
     void formatRange;
     const popRef = useRef(null);
     const todayLocal = useMemo(() => new Date(), []);
+    // ---- Derive a local anchor from the controlled value ----
     const initialAnchor = useMemo(() => {
-        if (mode === 'single' && value instanceof Date && value)
-            return value;
-        if (mode === 'range' && value && typeof value === 'object' && 'start' in value && value.start)
-            return value.start;
+        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;
+            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 todayLocal;
-    }, [mode, value, todayLocal]);
+    }, [mode, value, enableTime, 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]);
     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
+    useEffect(() => {
+        if (mode === 'single' && enableTime && typeof value === 'number') {
+            const d = new Date(value);
+            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 weekdayFmt = useMemo(() => new Intl.DateTimeFormat(locale, { weekday: 'short' }), [locale]);
     const monthFmt = useMemo(() => new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }), [locale]);
-    const selectedUTC_single = mode === 'single' && value instanceof Date && value ? toUTCDateOnly(value) : null;
-    const selectedUTC_start = mode === 'range' && value && typeof value === 'object' && 'start' in value && value.start
-        ? toUTCDateOnly(value.start)
-        : null;
-    const selectedUTC_end = mode === 'range' && value && typeof value === 'object' && 'end' in value && value.end
-        ? toUTCDateOnly(value.end)
-        : null;
+    // ---- Selection state for the grid (always compared in UTC date-only space) ----
+    const selectedUTC_single = useMemo(() => {
+        if (mode !== 'single' || !value)
+            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 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;
+    }, [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;
+    }, [mode, value]);
     const isDisabledUTC = useCallback((utcDay) => {
+        // min/max are Dates (instants). Treat them as local-day constraints for UI.
         if (min && utcDay < toUTCDateOnly(min))
             return true;
         if (max && utcDay > toUTCDateOnly(max))
@@ -100,27 +135,35 @@ formatRange = defaultFormatRange, // still exposed, not used for input text
             return;
         if (mode === 'single') {
             if (enableTime) {
-                const iso = composeLocalDateTimeISO(utcDay, timeHH, timeMM);
-                onChange(new Date(iso));
+                // 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 {
-                onChange(new Date(utcDay.getTime()));
+                // Date-only: emit timezone-free day label
+                onChange(ymdFromUTCDateOnly(utcDay));
             }
             (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
             return;
         }
-        const curr = value && typeof value === 'object' && 'start' in value ? value : { start: null, end: null };
+        // RANGE: date-only
+        const curr = value && typeof value === 'object' && 'start' in value
+            ? value
+            : { start: null, end: null };
+        const picked = ymdFromUTCDateOnly(utcDay);
         if (!curr.start || (curr.start && curr.end)) {
-            onChange({ start: new Date(utcDay.getTime()), end: null });
-        }
-        else {
-            const startUTC = toUTCDateOnly(curr.start);
-            const endUTC = utcDay;
-            const s = new Date(Math.min(+startUTC, +endUTC));
-            const e = new Date(Math.max(+startUTC, +endUTC));
-            onChange({ start: s, end: e });
-            (_b = popRef.current) === null || _b === void 0 ? void 0 : _b.close();
+            onChange({ start: picked, end: null });
+            return;
         }
+        const a = utcMillisFromYMD(curr.start);
+        const b = utcMillisFromYMD(picked);
+        const start = a <= b ? curr.start : picked;
+        const end = a <= b ? picked : curr.start;
+        onChange({ start, end });
+        (_b = popRef.current) === null || _b === void 0 ? void 0 : _b.close();
     };
     const gridRef = useRef(null);
     useEffect(() => {
@@ -177,20 +220,37 @@ formatRange = defaultFormatRange, // still exposed, not used for input text
     }, [monthAnchor]);
     const hours = useMemo(() => Array.from({ length: 24 }, (_, i) => i), []);
     const minutes = useMemo(() => Array.from({ length: Math.floor(60 / (timeStep || 1)) }, (_, i) => i * (timeStep || 1)), [timeStep]);
-    // ---- Input display: follow mask format (not Intl) ----
+    // ---- Input display: always local ----
     const formatted = useMemo(() => {
-        var _a, _b;
         if (mode === 'single') {
-            return value instanceof Date && value ? toMaskedFromDate(value, enableTime) : '';
+            if (!value)
+                return '';
+            if (enableTime) {
+                if (typeof value !== 'number')
+                    return '';
+                return toMaskedFromDate(new Date(value), true);
+            }
+            if (typeof value !== 'string')
+                return '';
+            return toMaskedFromYMD(value);
         }
+        // range (date-only)
         const v = value;
-        return toMaskedRange((_a = v === null || v === void 0 ? void 0 : v.start) !== null && _a !== void 0 ? _a : null, (_b = v === null || v === void 0 ? void 0 : v.end) !== null && _b !== void 0 ? _b : null, enableTime);
+        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}`;
+        return '';
     }, [mode, value, enableTime]);
     const [text, setText] = useState(formatted);
     const [dirty, setDirty] = useState(false); // while user is typing
     useEffect(() => {
         if (!dirty)
-            setText(formatted); // keep in sync when external value changes
+            setText(formatted);
     }, [formatted, dirty]);
     const commitTypedValue = useCallback(() => {
         if (!text.trim()) {
@@ -203,20 +263,30 @@ formatRange = defaultFormatRange, // still exposed, not used for input text
         }
         if (mode === 'single') {
             const dLocal = parseLooseDateOrDateTime(text);
-            if (dLocal) {
-                onChange(dLocal);
-                setMonthAnchor(dLocal);
-                setDirty(false);
+            if (!dLocal)
+                return;
+            if (enableTime) {
+                // Emit UTC instant millis
+                onChange(dLocal.getTime());
             }
+            else {
+                // Emit date-only string (local calendar day)
+                onChange(ymdFromLocalDate(dLocal));
+            }
+            setMonthAnchor(dLocal);
+            setDirty(false);
             return;
         }
         const r = parseLooseRange(text);
         if (r) {
-            onChange({ start: r.start, end: r.end });
+            // 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 });
             setMonthAnchor(r.start);
             setDirty(false);
         }
-    }, [text, mode, onChange]);
+    }, [text, mode, onChange, enableTime]);
     const clear = useCallback(() => {
         if (mode === 'single')
             onChange(null);
@@ -241,7 +311,7 @@ formatRange = defaultFormatRange, // still exposed, not used for input text
             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 => {
                         setDirty(true);
                         const raw = e.target.value;
-                        const masked = mode === 'single' ? maskSingle(raw, enableTime) : maskRange(raw, enableTime);
+                        const masked = mode === 'single' ? maskSingle(raw, enableTime) : maskRange(raw, false);
                         setText(masked);
                     }, onBlur: commitTypedValue, onKeyDown: e => {
                         var _a;
@@ -256,9 +326,12 @@ formatRange = defaultFormatRange, // still exposed, not used for input text
         }, 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();
-                                        onChange({ start: r.start, end: r.end });
+                                        // 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 });
                                         setDirty(false);
-                                        setText(toMaskedRange(r.start, r.end, enableTime));
+                                        setText(`${toMaskedFromYMD(start)} – ${toMaskedFromYMD(end)}`);
                                         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) => {

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

@@ -4,8 +4,18 @@ 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 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 declare function toMaskedFromDate(d: Date, enableTime: boolean): string;
-export declare function toMaskedRange(start: Date | null, end: Date | null, 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 CHANGED Viewed

@@ -48,6 +48,45 @@ export function maskRange(text, enableTime) {
 }
 // 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 ymdFromLocalDate(dLocal) {
+    const y = dLocal.getFullYear();
+    const m = dLocal.getMonth() + 1;
+    const d = dLocal.getDate();
+    return `${y}-${pad2(m)}-${pad2(d)}`;
+}
+export function ymdFromUTCDateOnly(utcDay) {
+    const y = utcDay.getUTCFullYear();
+    const m = utcDay.getUTCMonth() + 1;
+    const d = utcDay.getUTCDate();
+    return `${y}-${pad2(m)}-${pad2(d)}`;
+}
+// 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);
+}
+// For anchoring the calendar grid safely from a date-only value.
+export function localDateFromYMD(ymd) {
+    const p = parseYMD(ymd);
+    if (!p)
+        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);
+}
+/* ---------- 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());
@@ -58,15 +97,11 @@ export function toMaskedFromDate(d, 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 '';
+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)

package/dist/components/forms/select/Select.d.ts CHANGED Viewed

@@ -14,8 +14,9 @@ export type SelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' |
     onClear?: () => void;
     datakey?: string;
     dataCy?: string;
+    disabled?: boolean;
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
 };
-export declare function Select<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, }: SelectProps<T>): React.ReactNode;
+export declare function Select<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, }: SelectProps<T>): React.ReactNode;
 export {};

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

@@ -10,11 +10,9 @@ import { Popover } from '../../popover/Popover';
 import { InputContainer } from '../input-container/InputContainer';
 export function Select({
 // InputContainer props
-label, error, helpText, orientation = 'vertical', labelWidth = '120px', fullWidth = true, required,
-// ✅ tooltip props
-tooltip, tooltipPlacement = 'right',
+label, error, helpText, orientation = 'vertical', labelWidth = '120px', fullWidth = true, required, tooltip, tooltipPlacement = 'right',
 // Select props
-id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'outlined', onClear, datakey, dataCy, }) {
+id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'outlined', onClear, datakey, dataCy, disabled, }) {
     const generatedId = useId();
     const controlId = id !== null && id !== void 0 ? id : `select-${generatedId}`;
     const describedById = `${controlId}-desc`;
@@ -74,10 +72,7 @@ id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'ou
             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, children: [_jsx(Popover, { ref: popoverRef, trigger: (onClick, icon) => (_jsx(Button
-                // IMPORTANT: keep triggerProps last for events, but let our aria-describedby win
-                // We'll spread triggerProps and then override aria-describedby to include both.
-                , { ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
+    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, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : '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: [_jsx("span", { children: selected ? selected.label : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {

package/dist/components/overlay/modal/provider/ModalProvider.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { ModalProps } from '../Modal';
+import React, { type ReactNode } from 'react';
+import { type ModalProps } from '../Modal';
 type ModalConfig = Omit<ModalProps, 'isOpen' | 'onRequestClose'> & {
     onRequestClose?: () => void;
 };

package/dist/components/overlay/modal/provider/ModalProvider.js CHANGED Viewed

@@ -1,11 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useState, useRef } from 'react';
+import { createContext, useCallback, useContext, useEffect, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
 import { Modal } from '../Modal';
 const ModalContext = createContext(undefined);
 export function ModalProvider({ children }) {
     const [isOpen, setIsOpen] = useState(false);
     const [config, setConfig] = useState(null);
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
     // Holds the resolver for the current "confirm" call, if any
     const pendingResolverRef = useRef(null);
     const resolvePending = useCallback((value) => {
@@ -24,47 +27,43 @@ export function ModalProvider({ children }) {
         setIsOpen(true);
     }, [resolvePending]);
     const handleRequestClose = useCallback(() => {
-        if (config === null || config === void 0 ? void 0 : config.onRequestClose) {
-            config.onRequestClose();
-        }
-        // Any non-explicit confirm click counts as "false"
+        var _a;
+        (_a = config === null || config === void 0 ? void 0 : config.onRequestClose) === null || _a === void 0 ? void 0 : _a.call(config);
         resolvePending(false);
         closeModal();
     }, [config, closeModal, resolvePending]);
     const confirm = useCallback((confirmConfig) => {
         return new Promise(resolve => {
-            // cancel any previous pending confirm
             resolvePending(false);
             pendingResolverRef.current = resolve;
             const { confirmLabel = 'Ok', cancelLabel = 'Annuller', ...rest } = confirmConfig;
-            const primaryAction = {
-                label: confirmLabel,
-                onClick: () => {
-                    resolvePending(true);
-                    closeModal();
-                },
-            };
-            const secondaryAction = {
-                label: cancelLabel,
-                onClick: () => {
-                    resolvePending(false);
-                    closeModal();
-                },
-            };
             setConfig({
                 ...rest,
-                primaryAction,
-                secondaryAction,
+                primaryAction: {
+                    label: confirmLabel,
+                    onClick: () => {
+                        resolvePending(true);
+                        closeModal();
+                    },
+                },
+                secondaryAction: {
+                    label: cancelLabel,
+                    onClick: () => {
+                        resolvePending(false);
+                        closeModal();
+                    },
+                },
             });
             setIsOpen(true);
         });
     }, [closeModal, resolvePending]);
-    return (_jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm }, children: [children, _jsx(Modal, { ...(config !== null && config !== void 0 ? config : {}), isOpen: isOpen, onRequestClose: handleRequestClose, children: config === null || config === void 0 ? void 0 : config.children })] }));
+    const modalNode = (_jsxs(ModalContext.Provider, { value: { openModal, closeModal, confirm }, children: [children, mounted &&
+                createPortal(_jsx(Modal, { ...(config !== null && config !== void 0 ? config : {}), isOpen: isOpen, onRequestClose: handleRequestClose, children: config === null || config === void 0 ? void 0 : config.children }), document.body)] }));
+    return modalNode;
 }
 export function useModal() {
     const ctx = useContext(ModalContext);
-    if (!ctx) {
+    if (!ctx)
         throw new Error('useModal must be used within a ModalProvider');
-    }
     return ctx;
 }

package/dist/components/popover/Popover.js CHANGED Viewed

@@ -1,37 +1,49 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
 import styles from './Popover.module.css';
 export const Popover = forwardRef(function Popover({ trigger: Trigger, children, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, }, ref) {
     const [pos, setPos] = useState({ top: 0, left: 0, width: 0, visible: false });
     const containerRef = useRef(null);
     const contentRef = useRef(null);
+    // avoid SSR/hydration mismatch
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
     const computeAndSetPosition = useCallback((show) => {
         const container = containerRef.current;
         const content = contentRef.current;
         if (!container || !content)
             return;
         const triggerRect = container.getBoundingClientRect();
+        // Temporarily measure content size by forcing it into the layout.
         const prevVis = content.style.visibility;
         const prevDisp = content.style.display;
         const prevMinWidth = content.style.minWidth;
         const prevWidth = content.style.width;
+        const prevTop = content.style.top;
+        const prevLeft = content.style.left;
         content.style.visibility = 'hidden';
         content.style.display = 'block';
+        content.style.top = '0px';
+        content.style.left = '0px';
         content.style.minWidth = minWidth;
         content.style.width = 'auto';
         const minWidthPx = content.offsetWidth;
         const desiredWidthPx = Math.max(matchTriggerWidth ? triggerRect.width : 0, minWidthPx);
-        // Now apply desired width and re-measure final size (height may depend on width).
+        // Apply desired width and re-measure final size (height may depend on width).
         content.style.minWidth = `${desiredWidthPx}px`;
         content.style.width = `${desiredWidthPx}px`;
         const contentWidth = content.offsetWidth;
         const contentHeight = content.offsetHeight;
+        // Restore previous inline styles
         content.style.visibility = prevVis;
         content.style.display = prevDisp;
         content.style.minWidth = prevMinWidth;
         content.style.width = prevWidth;
+        content.style.top = prevTop;
+        content.style.left = prevLeft;
         const vw = window.innerWidth;
         const vh = window.innerHeight;
         const spaceAbove = Math.max(0, triggerRect.top);
@@ -75,6 +87,12 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
         open: () => computeAndSetPosition(true),
         isOpen: () => !!pos.visible,
     }), [closePopover, computeAndSetPosition, pos.visible]);
+    // Recompute position after open to account for content becoming visible / measured.
+    useLayoutEffect(() => {
+        if (pos.visible)
+            computeAndSetPosition(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pos.visible]);
     useEffect(() => {
         if (!pos.visible)
             return;
@@ -102,17 +120,18 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
             window.removeEventListener('scroll', handleReposition, true);
         };
     }, [pos.visible, closePopover, computeAndSetPosition]);
-    return (_jsxs("div", { className: styles.container, ref: containerRef, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: [Trigger(openPopover, pos.visible ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 })), _jsx("div", { ref: contentRef, className: styles.content, style: {
-                    top: pos.top,
-                    left: pos.left,
-                    visibility: pos.visible ? 'visible' : 'hidden',
-                    minWidth: pos.width ? `${pos.width}px` : minWidth,
-                    width: pos.width ? `${pos.width}px` : undefined,
-                    maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
-                    maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), 400px)`,
-                    overflow: 'auto',
-                }, role: "dialog", "aria-hidden": !pos.visible, children: typeof children === 'function'
-                    ? children(closePopover)
-                    : children })] }));
+    return (_jsxs("div", { className: styles.container, ref: containerRef, children: [Trigger(openPopover, pos.visible ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 })), mounted &&
+                createPortal(_jsx("div", { ref: contentRef, className: styles.content, style: {
+                        top: pos.top,
+                        left: pos.left,
+                        visibility: pos.visible ? 'visible' : 'hidden',
+                        minWidth: pos.width ? `${pos.width}px` : minWidth,
+                        width: pos.width ? `${pos.width}px` : undefined,
+                        maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
+                        maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), 400px)`,
+                        overflow: 'auto',
+                    }, role: "dialog", "aria-hidden": !pos.visible, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: typeof children === 'function'
+                        ? children(closePopover)
+                        : children }), document.body)] }));
 });
 Popover.displayName = 'Popover';

package/dist/components/popover/Popover.module.css CHANGED Viewed

@@ -4,15 +4,11 @@
 .content {
   position: fixed;
-  top: 100%;
-  left: 0;
   border: 1px solid var(--color-border-default);
   background-color: var(--color-bg-surface);
   border-radius: var(--border-radius-default);
   padding: var(--spacing-sm) 0;
   z-index: var(--z-popover);
-  max-width: 80vw;
-  max-height: 80vh;
   overflow: auto;
   box-shadow: var(--shadow-md);
 }

package/dist/components/table/tanstack.js CHANGED Viewed

@@ -82,7 +82,7 @@ export function TanstackTable(props) {
         },
     });
     const columnItems = React.useMemo(() => mapDefsToColumnItems(columns), [columns]);
-    const visibleData = React.useMemo(() => table.getRowModel().rows.map(r => r.original), [table]);
+    const visibleData = table.getRowModel().rows.map(r => r.original);
     const s = (_a = table.getState().sorting) === null || _a === void 0 ? void 0 : _a[0];
     const sortById = (_b = s === null || s === void 0 ? void 0 : s.id) !== null && _b !== void 0 ? _b : undefined;
     const sortDirection = s ? (s.desc ? 'desc' : 'asc') : null;

package/package.json CHANGED Viewed

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