@dbcdk/react-components 0.0.24 → 0.0.26

package/dist/components/filter-field/FilterField.module.css

@@ -15,7 +15,6 @@
     border-color var(--transition-fast) var(--ease-standard),
     box-shadow var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard);
-  line-height: 20px;
 }
 
 /* =========================
@@ -311,6 +310,10 @@
   font-size: var(--font-size-xs);
 }
 
+.filterField input {
+  height: 100%;
+}
+
 .filterField input::placeholder {
   color: var(--color-fg-subtle);
 }

package/dist/components/forms/checkbox/Checkbox.js

@@ -4,7 +4,7 @@ import { Check } from 'lucide-react';
 import { useId, useState } from 'react';
 import styles from './Checkbox.module.css';
 import { InputContainer } from '../input-container/InputContainer';
-export function Checkbox({ checked: controlled, onChange, variant = 'outlined', disabled, label, size = 'md', modified, containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
+export function Checkbox({ checked: controlled, onChange, variant = 'default', disabled, label, size = 'md', modified, containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
     const [internal, setInternal] = useState(false);
     const isChecked = controlled !== null && controlled !== void 0 ? controlled : internal;
     const generatedId = useId();

package/dist/components/forms/checkbox/Checkbox.module.css

@@ -50,10 +50,11 @@
   pointer-events: none;
 }
 
-.outlined.checked {
-  background-color: var(--opac-bg-default);
+.default {
+  background-color: var(--color-bg-toolbar);
+  border-color: var(--color-bg-toolbar);
   &:not(:hover) {
-    border-color: transparent;
+    border-color: var(--color-bg-toolbar);
   }
 
   .icon {
@@ -61,6 +62,18 @@
   }
 }
 
+.outlined.checked {
+  background-color: transparent;
+  border-color: var(--color-border-default);
+  &:not(:hover) {
+    border-color: var(--color-brand);
+  }
+
+  .icon {
+    color: var(--color-brand);
+  }
+}
+
 .success.checked {
   background-color: var(--color-status-success);
   &:not(:hover) {

package/dist/components/forms/input/Input.module.css

@@ -139,6 +139,7 @@
   box-shadow: none;
   padding-inline: var(--spacing-xs);
   padding-block: 0;
+  block-size: 100%;
 }
 
 .embedded:hover:not(:disabled),

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

@@ -112,7 +112,7 @@ export function Select({ label, error, helpText, orientation = 'vertical', label
                 returnFocus: true, trigger: (toggle, icon, isOpen) => (_jsx(Button, { disabled: disabled, ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
                         resetActiveToSelected();
                         toggle(e);
-                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "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) => {
+                    }, size: size, type: "button", "data-forminput": true, "aria-haspopup": "listbox", "aria-expanded": !!isOpen, "aria-controls": listboxId, "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 : _jsx("span", { className: "dbc-muted-text", children: placeholder }) }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
                         const isSelected = typeof opt.value === 'object' && typeof selectedValue === 'object' && datakey
                             ? (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[datakey]) === opt.value[datakey]
                             : opt.value === selectedValue;

package/dist/components/menu/Menu.js

@@ -57,7 +57,7 @@ const MenuItem = React.forwardRef(({ children, active, disabled, className, item
 });
 MenuItem.displayName = 'Menu.Item';
 const MenuCheckItem = React.forwardRef(({ label, checked, disabled, onCheckedChange, className, ...liProps }, ref) => {
-    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(Checkbox, { noContainer: true, checked: checked, disabled: disabled, label: label, onChange: (next, _e) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(next) }) }) }));
+    return (_jsx("li", { ref: ref, role: "none", className: [styles.row, className].filter(Boolean).join(' '), ...liProps, children: _jsx("div", { className: styles.interactiveChild, children: _jsx(Checkbox, { variant: "default", size: "md", noContainer: true, checked: checked, disabled: disabled, label: label, onChange: (next, _e) => onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(next) }) }) }));
 });
 MenuCheckItem.displayName = 'Menu.CheckItem';
 const MenuRadioItem = React.forwardRef(({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {

package/dist/components/overlay/modal/Modal.d.ts

@@ -1,7 +1,9 @@
 import React, { ReactNode } from 'react';
+import { ButtonVariant } from '../../../components/button/Button';
 import { Severity } from '../../../constants/severity.types';
 export type ModalActionConfig = {
     label: string;
+    severity?: ButtonVariant;
     onClick?: () => void;
     icon?: ReactNode;
     disabled?: boolean;

package/dist/components/overlay/modal/Modal.js

@@ -88,5 +88,5 @@ export function Modal({ isOpen, onRequestClose, header, content, children, prima
     const resolvedWidth = typeof width === 'number' ? `${width}px` : typeof width === 'string' ? width : undefined;
     return (_jsx("div", { className: styles.overlay, onClick: handleOverlayClick, children: _jsxs("div", { "data-cy": dataCy, ref: dialogRef, className: `${styles.modal} ${disableContentSpacing ? '' : styles.contentSpacing}`, style: resolvedWidth
                 ? { ['--modal-width']: resolvedWidth }
-                : undefined, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, tabIndex: -1, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, children: header })), _jsx(Button, { type: "button", variant: "inline", onClick: () => onRequestCloseRef.current(), "aria-label": "Luk", shape: "round", icon: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", variant: "outlined", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [resolvedSecondaryAction.icon && (_jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon })), _jsx("span", { children: resolvedSecondaryAction.label })] })), primaryAction && (_jsxs(Button, { type: "button", variant: "primary", onClick: primaryAction.onClick, disabled: primaryAction.disabled || isLoading, loading: isLoading, children: [primaryAction.icon && _jsx("span", { className: styles.icon, children: primaryAction.icon }), _jsx("span", { children: primaryAction.label })] }))] }))] }) }));
+                : undefined, onClick: stopPropagation, role: "dialog", "aria-modal": "true", "aria-labelledby": header ? titleId : undefined, tabIndex: -1, children: [_jsxs("div", { className: styles.header, children: [header && (_jsx(Headline, { severity: severity, size: 3, disableMargin: true, children: header })), _jsx(Button, { type: "button", variant: "inline", onClick: () => onRequestCloseRef.current(), "aria-label": "Luk", shape: "round", icon: _jsx(X, {}) })] }), _jsx("div", { className: styles.body, children: body }), shouldRenderFooter && (_jsxs("div", { className: styles.footer, children: [resolvedSecondaryAction && (_jsxs(Button, { type: "button", onClick: resolvedSecondaryAction.onClick, disabled: isLoading, children: [resolvedSecondaryAction.icon && (_jsx("span", { className: styles.icon, children: resolvedSecondaryAction.icon })), _jsx("span", { children: resolvedSecondaryAction.label })] })), primaryAction && (_jsxs(Button, { type: "button", variant: primaryAction.severity || 'primary', onClick: primaryAction.onClick, disabled: primaryAction.disabled || isLoading, loading: isLoading, children: [primaryAction.icon && _jsx("span", { className: styles.icon, children: primaryAction.icon }), _jsx("span", { children: primaryAction.label })] }))] }))] }) }));
 }

package/dist/components/overlay/modal/Modal.module.css

@@ -15,7 +15,7 @@
 
 /* Default width can be overridden by --modal-width from props */
 .modal {
-  --modal-width: 700px;
+  --modal-width: 500px;
 
   background: var(--color-bg-surface);
   border-radius: var(--border-radius-lg);

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

@@ -1,10 +1,12 @@
 import React, { type ReactNode } from 'react';
+import { ButtonVariant } from '../../../../components/button/Button';
 import { type ModalProps } from '../Modal';
 type ModalConfig = Omit<ModalProps, 'isOpen' | 'onRequestClose'> & {
     onRequestClose?: () => void;
 };
 type ConfirmModalConfig = Omit<ModalConfig, 'primaryAction' | 'secondaryAction' | 'onRequestClose'> & {
     confirmLabel?: string;
+    confirmButtonSeverity?: ButtonVariant;
     cancelLabel?: string;
 };
 type ModalContextValue = {

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

@@ -9,7 +9,6 @@ export function ModalProvider({ children }) {
     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) => {
         if (pendingResolverRef.current) {
@@ -21,7 +20,6 @@ export function ModalProvider({ children }) {
         setIsOpen(false);
     }, []);
     const openModal = useCallback((newConfig) => {
-        // if a confirm was in progress, resolve it as "false" (cancelled/overridden)
         resolvePending(false);
         setConfig(newConfig);
         setIsOpen(true);
@@ -41,6 +39,7 @@ export function ModalProvider({ children }) {
                 ...rest,
                 primaryAction: {
                     label: confirmLabel,
+                    severity: confirmConfig.confirmButtonSeverity || 'primary',
                     onClick: () => {
                         resolvePending(true);
                     },

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -9,7 +9,6 @@
   inline-size: var(--sidebar-width);
   box-sizing: border-box;
   border-inline-end: var(--border-width-thin) solid var(--color-border-default);
-
   transition:
     width var(--transition-fast) var(--ease-standard),
     inline-size var(--transition-fast) var(--ease-standard);

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -11,6 +11,7 @@
   cursor: pointer;
   position: relative;
   border-radius: var(--border-radius-default);
+  user-select: none;
   transition:
     background-color var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard);

package/dist/components/table/Table.js

@@ -143,7 +143,7 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                             ]
                                 .filter(Boolean)
                                 .join(' '), role: "cell", "data-align": (_a = column.align) !== null && _a !== void 0 ? _a : 'left', "data-divider": column.divider, children: _jsx("div", { className: styles.cellContent, children: allowWrap ? (cellValue) : (_jsx("div", { className: styles.cellValueEllipsis, children: cellValue })) }) }, column.id));
-                    })] }, `gridRow-${String(rowId)}`));
+                    })] }, `gridRow-${rowId}`));
         }) }));
     const bodyContent = loading && !data.length ? loadingBodyEl : dataBodyEl;
     const tableClassName = [

package/dist/components/table/Table.module.css

@@ -165,7 +165,6 @@
   vertical-align: top;
   min-width: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .sm .cell {
@@ -188,15 +187,16 @@
 }
 
 .selectionCell {
-  padding-block: inherit !important;
-  padding-inline: 0 !important;
   overflow: visible !important;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: flex-start;
   min-width: 0;
 }
 
+.headerCell.selectionCell {
+  align-items: center;
+}
 .clickableRow {
   cursor: pointer;
 }
@@ -346,8 +346,8 @@
   min-width: 0;
   max-inline-size: 100%;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  /* overflow: hidden; */
+  /* text-overflow: ellipsis; */
 }
 
 .allowWrap .cellContent {
@@ -467,3 +467,20 @@
   width: 1px;
   background: var(--table-divider);
 }
+
+.newRow {
+  animation: tableRowFadeIn 1000ms ease-out;
+}
+
+.newRow {
+  animation: tableRowFadeIn 600ms ease-out;
+}
+
+@keyframes tableRowFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/components/tabs/Tabs.js

@@ -117,7 +117,7 @@ export function Tabs({ header, variant, panelStyle = false, tabs, value, default
                             const selected = index === activeIndex;
                             const tabDomId = `${uid}-tab-${String(tab.id)}`;
                             const panelDomId = `${uid}-panel-${String(tab.id)}`;
-                            return (_jsx("div", { className: `${styles.tab} ${selected ? styles.active : ''}`, children: _jsxs("button", { id: tabDomId, type: "button", className: styles.tabButton, role: "tab", "aria-selected": selected, "aria-controls": panelDomId, tabIndex: selected ? 0 : -1, disabled: tab.disabled, onClick: () => setValue(tab.id), onKeyDown: e => onKeyDownTab(e, index), children: [tab.headerIcon ? _jsx("span", { className: styles.icon, children: tab.headerIcon }) : null, _jsx("span", { className: styles.label, children: tab.header }), tab.badge !== undefined && tab.badge > 0 ? (_jsx("span", { className: styles.badge, children: _jsx(Chip, { severity: "neutral", size: "sm", children: tab.badge.toLocaleString('da-DK') }) })) : null] }) }, tab.id));
+                            return (_jsx("div", { className: `${styles.tab} ${selected ? styles.active : ''}`, children: _jsxs("button", { id: tabDomId, type: "button", className: styles.tabButton, role: "tab", "aria-selected": selected, "aria-controls": panelDomId, tabIndex: selected ? 0 : -1, disabled: tab.disabled, onClick: () => setValue(tab.id), onKeyDown: e => onKeyDownTab(e, index), children: [tab.headerIcon ? _jsx("span", { className: styles.icon, children: tab.headerIcon }) : null, _jsx("span", { className: styles.label, children: tab.header }), tab.badge !== undefined && tab.badge > 0 ? (_jsx("span", { className: styles.badge, children: _jsx(Chip, { type: "subtle", severity: null, size: "sm", children: tab.badge.toLocaleString('da-DK') }) })) : null] }) }, tab.id));
                         }) }), _jsx("div", { id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : undefined, role: "tabpanel", "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : undefined, className: styles.tabContent, children: activeTab === null || activeTab === void 0 ? void 0 : activeTab.content })] })] }));
 }
 Tabs.Item = TabsItem;

package/dist/utils/date/formatDate.d.ts

@@ -1,12 +1,20 @@
 /**
- * Formats a Date as "dd:mm:yyyy" or "dd:mm:yyyy hh:mm:ss".
- * All parts are zero-padded numbers.
+ * Formats a Date as "dd/mm/yyyy" or "dd/mm/yyyy hh:mm:ss".
+ * Optionally returns user-friendly Danish labels like "I dag" or "I går".
+ *
+ * Examples:
+ * - formatDate(new Date(), { userFriendlyLabel: true }) => "I dag"
+ * - formatDate(new Date(), { userFriendlyLabel: true, showTime: true }) => "I dag, kl. 14:30"
+ * - formatDate(date, { showTime: true }) => "10/03/2026 14:30"
  *
  * @param date - The Date or date-parsable value to format
- * @param options.showSeconds - If true, append time "hh:mm:ss"
+ * @param options.showTime - If true, append time "hh:mm" or "hh:mm:ss"
+ * @param options.showSeconds - If true, append seconds when showTime is enabled
+ * @param options.userFriendlyLabel - If true, use "I dag" / "I går" when applicable
  * @returns A formatted string
  */
 export declare function formatDate(date: Date | string | number, options?: {
     showTime?: boolean;
     showSeconds?: boolean;
+    userFriendlyLabel?: boolean;
 }): string;

package/dist/utils/date/formatDate.js

@@ -1,26 +1,51 @@
 /**
- * Formats a Date as "dd:mm:yyyy" or "dd:mm:yyyy hh:mm:ss".
- * All parts are zero-padded numbers.
+ * Formats a Date as "dd/mm/yyyy" or "dd/mm/yyyy hh:mm:ss".
+ * Optionally returns user-friendly Danish labels like "I dag" or "I går".
+ *
+ * Examples:
+ * - formatDate(new Date(), { userFriendlyLabel: true }) => "I dag"
+ * - formatDate(new Date(), { userFriendlyLabel: true, showTime: true }) => "I dag, kl. 14:30"
+ * - formatDate(date, { showTime: true }) => "10/03/2026 14:30"
  *
  * @param date - The Date or date-parsable value to format
- * @param options.showSeconds - If true, append time "hh:mm:ss"
+ * @param options.showTime - If true, append time "hh:mm" or "hh:mm:ss"
+ * @param options.showSeconds - If true, append seconds when showTime is enabled
+ * @param options.userFriendlyLabel - If true, use "I dag" / "I går" when applicable
  * @returns A formatted string
  */
 export function formatDate(date, options = {}) {
     const d = date instanceof Date ? date : new Date(date);
     if (isNaN(d.getTime()))
         return '';
+    const { showTime = false, showSeconds = false, userFriendlyLabel = false } = options;
     const pad = (n) => n.toString().padStart(2, '0');
+    const formatTime = () => {
+        const hours = pad(d.getHours());
+        const minutes = pad(d.getMinutes());
+        if (!showSeconds)
+            return `${hours}:${minutes}`;
+        const seconds = pad(d.getSeconds());
+        return `${hours}:${minutes}:${seconds}`;
+    };
+    const isSameCalendarDay = (a, b) => a.getDate() === b.getDate() &&
+        a.getMonth() === b.getMonth() &&
+        a.getFullYear() === b.getFullYear();
+    if (userFriendlyLabel) {
+        const now = new Date();
+        const yesterday = new Date(now);
+        yesterday.setDate(now.getDate() - 1);
+        if (isSameCalendarDay(d, now)) {
+            return showTime ? `I dag, kl. ${formatTime()}` : 'I dag';
+        }
+        if (isSameCalendarDay(d, yesterday)) {
+            return showTime ? `I går, kl. ${formatTime()}` : 'I går';
+        }
+    }
     const day = pad(d.getDate());
     const month = pad(d.getMonth() + 1);
     const year = d.getFullYear();
     const base = `${day}/${month}/${year}`;
-    if (!options.showTime)
+    if (!showTime)
         return base;
-    const hours = pad(d.getHours());
-    const minutes = pad(d.getMinutes());
-    if (!options.showSeconds)
-        return `${base} ${hours}:${minutes}`;
-    const seconds = pad(d.getSeconds());
-    return `${base} ${hours}:${minutes}:${seconds}`;
+    return `${base} ${formatTime()}`;
 }

package/package.json

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