@dbcdk/react-components 0.0.38 → 0.0.39

package/dist/components/table/components/TableRow.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox } from '../../../components/forms/checkbox/Checkbox';
 import { RadioButton } from '../../../components/forms/radio-buttons/RadioButton';
-import { SeverityBgColor } from '../../../constants/severity';
+import { SeverityBorderColor } from '../../../constants/severity';
 import { useTableRowInteractions } from '../hooks/useTableRowInteractions';
 import { cx } from '../table.classes';
 import styles from '../Table.module.css';
@@ -21,7 +21,7 @@ export function TableRow({ row, rowId, columns, selectedRows, hasSelection, sele
     });
     return (_jsxs("tr", { className: cx(styles.row, onRowClick && styles.clickableRow, isSelected && styles.selectedRow, rowSeverity && styles.severity), style: {
             ['--row-severity-color']: rowSeverity
-                ? SeverityBgColor[rowSeverity]
+                ? SeverityBorderColor[rowSeverity]
                 : undefined,
         }, tabIndex: onRowClick ? 0 : -1, onKeyDown: handleRowKeyDown, onMouseEnter: () => onRowMouseEnter === null || onRowMouseEnter === void 0 ? void 0 : onRowMouseEnter(row), onClick: handleRowClick, children: [hasSelection ? (_jsx("td", { className: cx(styles.cell, styles.selectionCell), "data-selection-control": "true", children: _jsx("div", { className: styles.selectionHitArea, "data-selection-control": "true", onClick: e => {
                         if (e.target !== e.currentTarget)

package/dist/constants/severity.d.ts

@@ -1,3 +1,4 @@
 import type { Severity } from '../constants/severity.types';
 export declare const SeverityBgColor: Record<Severity, string>;
+export declare const SeverityBorderColor: Record<Severity, string>;
 export declare const SeverityTextColor: Record<Severity, string>;

package/dist/constants/severity.js

@@ -6,6 +6,14 @@ export const SeverityBgColor = {
     info: 'var(--color-status-info)',
     warning: 'var(--color-status-warning)',
 };
+export const SeverityBorderColor = {
+    neutral: 'var(--color-neutral-strong)',
+    brand: 'var(--color-brand)',
+    success: 'var(--color-status-success-border)',
+    error: 'var(--color-status-error-border)',
+    info: 'var(--color-status-info-border)',
+    warning: 'var(--color-status-warning-border)',
+};
 export const SeverityTextColor = {
     neutral: 'var(--color-neutral-strong-fg)',
     brand: 'var(--color-fg-on-brand)',

package/dist/hooks/useTableSelection.d.ts

@@ -1,6 +1,6 @@
 type Id = string | number;
 interface Props<T> {
-    storageKey: string;
+    storageKey?: string;
     items: T[];
     getId: (item: T) => Id;
     initialSelectedIds?: Set<Id>;
@@ -8,15 +8,17 @@ interface Props<T> {
         selectedIds: Set<Id>;
         selectedItems: T[];
     }) => void;
-    totalItems?: number;
     selectionMode?: 'single' | 'multiple';
+    pruneToItems?: boolean;
+    storage?: 'local' | 'session';
 }
-export declare function useTableSelection<T>({ storageKey, items, getId, initialSelectedIds, totalItems, onSelectionChange, selectionMode, }: Props<T>): {
+export declare function useTableSelection<T>({ storageKey, items, getId, initialSelectedIds, onSelectionChange, selectionMode, pruneToItems, storage, }: Props<T>): {
     selectedIds: Set<Id>;
     selectedItems: T[];
     selectedItemMap: Map<Id, T>;
     toggleItem: (item: T) => void;
     toggleId: (id: Id, selected?: boolean) => void;
+    selectOnly: (id: Id) => void;
     clearSelection: () => void;
     allSelected: boolean;
     anySelected: boolean;

package/dist/hooks/useTableSelection.js

@@ -1,5 +1,6 @@
 'use client';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+const EMPTY_IDS = new Set();
 function safeParseIds(raw) {
     if (!raw)
         return null;
@@ -7,8 +8,7 @@ function safeParseIds(raw) {
         const parsed = JSON.parse(raw);
         if (!Array.isArray(parsed))
             return null;
-        // Allow strings/numbers only; drop anything else
-        return parsed.filter(v => typeof v === 'string' || typeof v === 'number');
+        return parsed.filter((v) => typeof v === 'string' || typeof v === 'number');
     }
     catch {
         return null;
@@ -17,84 +17,91 @@ function safeParseIds(raw) {
 function serializeIds(ids) {
     return JSON.stringify(Array.from(ids));
 }
-export function useTableSelection({ storageKey, items, getId, initialSelectedIds = new Set(), totalItems, onSelectionChange, selectionMode = 'single', }) {
-    const [selectedIds, setSelectedIds] = useState(initialSelectedIds);
+function areSetsEqual(a, b) {
+    if (a.size !== b.size)
+        return false;
+    for (const value of a) {
+        if (!b.has(value))
+            return false;
+    }
+    return true;
+}
+export function useTableSelection({ storageKey, items, getId, initialSelectedIds, onSelectionChange, selectionMode = 'single', pruneToItems = false, storage = 'session', }) {
+    const resolvedInitialSelectedIds = initialSelectedIds !== null && initialSelectedIds !== void 0 ? initialSelectedIds : EMPTY_IDS;
+    const [selectedIds, setSelectedIds] = useState(resolvedInitialSelectedIds);
     const [hydrated, setHydrated] = useState(false);
-    // Used to avoid unnecessary writes / loops (and helps with storage-event sync)
     const lastWrittenRef = useRef(null);
-    // Fast lookup of current items by id
     const itemsById = useMemo(() => {
-        const m = new Map();
-        for (const item of items)
-            m.set(getId(item), item);
-        return m;
+        const map = new Map();
+        for (const item of items) {
+            map.set(getId(item), item);
+        }
+        return map;
     }, [items, getId]);
-    // Hydrate from localStorage on mount / when storageKey changes
     useEffect(() => {
         if (typeof window === 'undefined')
             return;
-        const parsed = safeParseIds(window.localStorage.getItem(storageKey));
-        if (parsed) {
-            setSelectedIds(new Set(parsed));
-        }
-        else {
-            setSelectedIds(initialSelectedIds);
+        const storageApi = storage === 'local' ? window.localStorage : window.sessionStorage;
+        if (!storageKey) {
+            setSelectedIds(prev => areSetsEqual(prev, resolvedInitialSelectedIds) ? prev : new Set(resolvedInitialSelectedIds));
+            setHydrated(true);
+            lastWrittenRef.current = null;
+            return;
         }
-        // Mark hydrated after we’ve decided initial state for this key
+        const parsed = safeParseIds(storageApi.getItem(storageKey));
+        const next = new Set(parsed !== null && parsed !== void 0 ? parsed : Array.from(resolvedInitialSelectedIds));
+        setSelectedIds(prev => (areSetsEqual(prev, next) ? prev : next));
+        lastWrittenRef.current = serializeIds(next);
         setHydrated(true);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [storageKey]);
-    // Keep selection in sync across tabs/windows (optional but usually desired)
+    }, [storage, storageKey, resolvedInitialSelectedIds]);
     useEffect(() => {
-        if (typeof window === 'undefined')
+        if (!pruneToItems)
             return;
-        const onStorage = (e) => {
-            if (e.storageArea !== window.localStorage)
-                return;
-            if (e.key !== storageKey)
-                return;
-            const parsed = safeParseIds(e.newValue);
-            const next = new Set(parsed !== null && parsed !== void 0 ? parsed : Array.from(initialSelectedIds));
-            // Avoid setting state if nothing actually changed
-            const nextStr = serializeIds(next);
-            const curStr = serializeIds(selectedIds);
-            if (nextStr !== curStr)
-                setSelectedIds(next);
-        };
-        window.addEventListener('storage', onStorage);
-        return () => window.removeEventListener('storage', onStorage);
-        // Note: selectedIds is intentionally included to compare current vs next
-    }, [storageKey, initialSelectedIds, selectedIds]);
-    // Derive selectedItemMap from selectedIds + itemsById (never out of sync)
+        const visibleIds = new Set(Array.from(itemsById.keys()));
+        setSelectedIds(prev => {
+            if (prev.size === 0)
+                return prev;
+            if (visibleIds.size === 0)
+                return prev;
+            const next = new Set();
+            for (const id of prev) {
+                if (visibleIds.has(id))
+                    next.add(id);
+            }
+            return areSetsEqual(prev, next) ? prev : next;
+        });
+    }, [pruneToItems, itemsById]);
     const selectedItemMap = useMemo(() => {
-        const m = new Map();
+        const map = new Map();
         for (const id of selectedIds) {
             const item = itemsById.get(id);
             if (item !== undefined)
-                m.set(id, item);
+                map.set(id, item);
         }
-        return m;
+        return map;
     }, [selectedIds, itemsById]);
     const selectedItems = useMemo(() => Array.from(selectedItemMap.values()), [selectedItemMap]);
     const allSelected = useMemo(() => {
-        if (typeof totalItems !== 'number')
+        if (items.length === 0)
             return false;
-        return totalItems > 0 && selectedIds.size === totalItems;
-    }, [selectedIds, totalItems]);
+        return items.every(item => selectedIds.has(getId(item)));
+    }, [items, selectedIds, getId]);
     const anySelected = useMemo(() => selectedIds.size > 0, [selectedIds]);
-    // Persist + notify (but only after hydration so we don’t clobber stored values)
     useEffect(() => {
         if (!hydrated)
             return;
         if (typeof window === 'undefined')
             return;
-        const nextStr = serializeIds(selectedIds);
-        if (lastWrittenRef.current !== nextStr) {
-            window.localStorage.setItem(storageKey, nextStr);
-            lastWrittenRef.current = nextStr;
+        if (storageKey) {
+            const storageApi = storage === 'local' ? window.localStorage : window.sessionStorage;
+            const nextStr = serializeIds(selectedIds);
+            if (lastWrittenRef.current !== nextStr) {
+                storageApi.setItem(storageKey, nextStr);
+                lastWrittenRef.current = nextStr;
+            }
         }
         onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({ selectedIds, selectedItems });
-    }, [hydrated, selectedIds, selectedItems, storageKey, onSelectionChange]);
+    }, [hydrated, onSelectionChange, selectedIds, selectedItems, storage, storageKey]);
     const toggleId = useCallback((id, selected) => {
         setSelectedIds(prev => {
             const next = new Set(prev);
@@ -104,19 +111,26 @@ export function useTableSelection({ storageKey, items, getId, initialSelectedIds
                 next.clear();
                 if (shouldSelect)
                     next.add(id);
-                return next;
+                return areSetsEqual(prev, next) ? prev : next;
             }
-            // multiple
             if (shouldSelect)
                 next.add(id);
             else
                 next.delete(id);
-            return next;
+            return areSetsEqual(prev, next) ? prev : next;
         });
     }, [selectionMode]);
-    const toggleItem = useCallback((item) => toggleId(getId(item)), [toggleId, getId]);
+    const toggleItem = useCallback((item) => {
+        toggleId(getId(item));
+    }, [toggleId, getId]);
+    const selectOnly = useCallback((id) => {
+        setSelectedIds(prev => {
+            const next = new Set([id]);
+            return areSetsEqual(prev, next) ? prev : next;
+        });
+    }, []);
     const clearSelection = useCallback(() => {
-        setSelectedIds(new Set());
+        setSelectedIds(prev => (prev.size === 0 ? prev : new Set()));
     }, []);
     const toggleAll = useCallback((selected) => {
         if (!selected) {
@@ -124,15 +138,16 @@ export function useTableSelection({ storageKey, items, getId, initialSelectedIds
             return;
         }
         if (selectionMode === 'single') {
-            // Choose the first item (or nothing if empty)
             const first = items[0];
-            setSelectedIds(first ? new Set([getId(first)]) : new Set());
+            const next = first ? new Set([getId(first)]) : new Set();
+            setSelectedIds(prev => (areSetsEqual(prev, next) ? prev : next));
             return;
         }
         const next = new Set();
-        for (const item of items)
+        for (const item of items) {
             next.add(getId(item));
-        setSelectedIds(next);
+        }
+        setSelectedIds(prev => (areSetsEqual(prev, next) ? prev : next));
     }, [clearSelection, getId, items, selectionMode]);
     return {
         selectedIds,
@@ -140,6 +155,7 @@ export function useTableSelection({ storageKey, items, getId, initialSelectedIds
         selectedItemMap,
         toggleItem,
         toggleId,
+        selectOnly,
         clearSelection,
         allSelected,
         anySelected,

package/package.json

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