@dbcdk/react-components 0.0.25 → 0.0.26

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/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/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.d.ts

@@ -59,7 +59,6 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     showFirstLast?: boolean;
     viewMode?: ViewMode;
     emptyConfig?: TableEmptyConfig;
-    animateNewRows?: boolean;
 };
-export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, selectionMode, onSortChange, onRowClick, onRowMouseEnter, sortById, sortDirection, dataKey, headerExtras, gridTemplateColumns, toolbar, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement, totalItemsCount, onPageChange, loading, variant, size, getRowSeverity, showFirstLast, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, animateNewRows, ...rest }: TableProps<T>): JSX.Element;
+export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, selectionMode, onSortChange, onRowClick, onRowMouseEnter, sortById, sortDirection, dataKey, headerExtras, gridTemplateColumns, toolbar, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement, totalItemsCount, onPageChange, loading, variant, size, getRowSeverity, showFirstLast, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }: TableProps<T>): JSX.Element;
 export {};

package/dist/components/table/Table.js

@@ -7,7 +7,6 @@ import { Pagination } from '../../components/pagination/Pagination';
 import { SkeletonLoaderItem } from '../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 import { SeverityBgColor } from '../../constants/severity';
 import { TableEmptyState } from './components/empty-state/EmptyState';
-import { useAnimatedNewRowIds } from './hooks/useAnimatedRowIds';
 import styles from './Table.module.css';
 import { getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isModifierClick, shouldAllowWrap, shouldToggleOnKey, isActiveSort, } from './table.utils';
 function buildDefaultGridTemplate(args) {
@@ -19,19 +18,13 @@ function buildDefaultGridTemplate(args) {
         parts.push('minmax(120px, 1fr)');
     return parts.join(' ');
 }
-export function Table({ data, columns, selectedRows, onRowSelect, selectionMode = 'single', onSortChange, onRowClick, onRowMouseEnter, sortById, sortDirection, dataKey, headerExtras, gridTemplateColumns, toolbar, striped, fillViewport = false, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement = 'bottom', totalItemsCount, onPageChange, loading, variant = 'primary', size = 'md', getRowSeverity, showFirstLast = false, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, animateNewRows = true, ...rest }) {
+export function Table({ data, columns, selectedRows, onRowSelect, selectionMode = 'single', onSortChange, onRowClick, onRowMouseEnter, sortById, sortDirection, dataKey, headerExtras, gridTemplateColumns, toolbar, striped, fillViewport = false, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement = 'bottom', totalItemsCount, onPageChange, loading, variant = 'primary', size = 'md', getRowSeverity, showFirstLast = false, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }) {
     void viewportBottomOffset;
     void viewportMin;
     void viewportIncludeMarginTop;
     const filteredColumns = useMemo(() => getVisibleColumns(columns), [columns]);
     const handlePageChange = useCallback((e) => onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e), [onPageChange]);
     const hasSelection = Boolean(selectedRows && onRowSelect && dataKey);
-    const newRowIds = useAnimatedNewRowIds({
-        data,
-        dataKey,
-        enabled: animateNewRows,
-        animationDurationMs: 1000,
-    });
     const template = useMemo(() => {
         return (gridTemplateColumns !== null && gridTemplateColumns !== void 0 ? gridTemplateColumns : buildDefaultGridTemplate({ hasSelection, colCount: filteredColumns.length }));
     }, [gridTemplateColumns, hasSelection, filteredColumns.length]);
@@ -101,15 +94,13 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                 })] }, `loading-row-${rowIndex}`))) }));
     const dataBodyEl = (_jsx("div", { className: `${styles.body} ${striped ? styles.striped : ''}`, role: "rowgroup", children: data.map(row => {
             const rowSeverity = getRowSeverity === null || getRowSeverity === void 0 ? void 0 : getRowSeverity(row);
-            const rowId = String(row[dataKey]);
-            const isNewRow = animateNewRows && newRowIds.has(rowId);
+            const rowId = row[dataKey];
             const isSelected = Boolean(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(rowId));
             return (_jsxs("div", { className: [
                     styles.row,
                     onRowClick ? styles.clickableRow : '',
                     isSelected ? styles.selectedRow : '',
                     rowSeverity ? styles.severity : '',
-                    isNewRow ? styles.newRow : '',
                 ]
                     .filter(Boolean)
                     .join(' '), style: {

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

@@ -187,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;
 }

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.25",
+  "version": "0.0.26",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",

package/dist/components/table/hooks/useAnimatedRowIds.d.ts

@@ -1,9 +0,0 @@
-type RowId = string;
-type UseAnimatedNewRowIdsArgs<T> = {
-    data: T[];
-    dataKey: keyof T;
-    enabled?: boolean;
-    animationDurationMs?: number;
-};
-export declare function useAnimatedNewRowIds<T extends Record<string, any>>({ data, dataKey, enabled, animationDurationMs, }: UseAnimatedNewRowIdsArgs<T>): Set<RowId>;
-export {};

package/dist/components/table/hooks/useAnimatedRowIds.js

@@ -1,76 +0,0 @@
-'use client';
-import { useEffect, useRef, useState } from 'react';
-export function useAnimatedNewRowIds({ data, dataKey, enabled = true, animationDurationMs = 1000, }) {
-    const prevRowIdsRef = useRef(new Set());
-    const hasEstablishedBaselineRef = useRef(false);
-    const removeTimersRef = useRef(new Map());
-    const [newRowIds, setNewRowIds] = useState(new Set());
-    useEffect(() => {
-        const currentIds = new Set();
-        for (const row of data) {
-            currentIds.add(String(row[dataKey]));
-        }
-        if (!enabled) {
-            for (const timer of removeTimersRef.current.values()) {
-                window.clearTimeout(timer);
-            }
-            removeTimersRef.current.clear();
-            setNewRowIds(new Set());
-            prevRowIdsRef.current = currentIds;
-            hasEstablishedBaselineRef.current = currentIds.size > 0;
-            return;
-        }
-        if (currentIds.size === 0) {
-            prevRowIdsRef.current = currentIds;
-            return;
-        }
-        if (!hasEstablishedBaselineRef.current) {
-            prevRowIdsRef.current = currentIds;
-            hasEstablishedBaselineRef.current = true;
-            setNewRowIds(new Set());
-            return;
-        }
-        const addedIds = [];
-        for (const id of currentIds) {
-            if (!prevRowIdsRef.current.has(id)) {
-                addedIds.push(id);
-            }
-        }
-        if (addedIds.length > 0) {
-            setNewRowIds(prev => {
-                const next = new Set(prev);
-                for (const id of addedIds)
-                    next.add(id);
-                return next;
-            });
-            for (const id of addedIds) {
-                const existingTimer = removeTimersRef.current.get(id);
-                if (existingTimer) {
-                    window.clearTimeout(existingTimer);
-                }
-                const timer = window.setTimeout(() => {
-                    setNewRowIds(prev => {
-                        if (!prev.has(id))
-                            return prev;
-                        const next = new Set(prev);
-                        next.delete(id);
-                        return next;
-                    });
-                    removeTimersRef.current.delete(id);
-                }, animationDurationMs);
-                removeTimersRef.current.set(id, timer);
-            }
-        }
-        prevRowIdsRef.current = currentIds;
-    }, [data, dataKey, enabled, animationDurationMs]);
-    useEffect(() => {
-        const timers = removeTimersRef.current;
-        return () => {
-            for (const timer of timers.values()) {
-                window.clearTimeout(timer);
-            }
-            timers.clear();
-        };
-    }, []);
-    return newRowIds;
-}