@dbcdk/react-components 0.0.24 → 0.0.25

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

@@ -59,6 +59,7 @@ 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, ...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, animateNewRows, ...rest }: TableProps<T>): JSX.Element;
 export {};

package/dist/components/table/Table.js

@@ -7,6 +7,7 @@ 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) {
@@ -18,13 +19,19 @@ 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, ...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, animateNewRows = true, ...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]);
@@ -94,13 +101,15 @@ 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 = row[dataKey];
+            const rowId = String(row[dataKey]);
+            const isNewRow = animateNewRows && newRowIds.has(rowId);
             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: {
@@ -143,7 +152,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 {
@@ -346,8 +345,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 +466,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/table/hooks/useAnimatedRowIds.d.ts

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,76 @@
+'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;
+}

package/package.json

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