@dbcdk/react-components 0.0.13 → 0.0.15

package/dist/hooks/useTableSelection.js

@@ -1,58 +1,79 @@
 'use client';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+function safeParseIds(raw) {
+    if (!raw)
+        return null;
+    try {
+        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');
+    }
+    catch {
+        return null;
+    }
+}
+function serializeIds(ids) {
+    return JSON.stringify(Array.from(ids));
+}
 export function useTableSelection({ storageKey, items, getId, initialSelectedIds = new Set(), totalItems, onSelectionChange, selectionMode = 'single', }) {
-    // Selected IDs are persisted and are your primary lookup structure
     const [selectedIds, setSelectedIds] = useState(initialSelectedIds);
-    // Keep the actual selected items keyed by id for O(1) access
-    const [selectedItemMap, setSelectedItemMap] = useState(() => new Map());
-    // Build a fast lookup of current items by id (for hydration + reconciliation)
+    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;
     }, [items, getId]);
-    // Hydrate selectedIds from localStorage on mount / storageKey change
+    // Hydrate from localStorage on mount / when storageKey changes
     useEffect(() => {
-        const stored = window.localStorage.getItem(storageKey);
-        if (!stored) {
-            setSelectedIds(initialSelectedIds);
+        if (typeof window === 'undefined')
             return;
-        }
-        try {
-            const parsed = JSON.parse(stored);
+        const parsed = safeParseIds(window.localStorage.getItem(storageKey));
+        if (parsed) {
             setSelectedIds(new Set(parsed));
         }
-        catch {
+        else {
             setSelectedIds(initialSelectedIds);
         }
+        // Mark hydrated after we’ve decided initial state for this key
+        setHydrated(true);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [storageKey]);
-    // Reconcile selectedItemMap whenever selectedIds or items change.
-    // This makes sure selectedItems stay up to date without scanning the full items list on every render.
+    // Keep selection in sync across tabs/windows (optional but usually desired)
     useEffect(() => {
-        setSelectedItemMap(prev => {
-            const next = new Map();
-            // Keep only ids that still exist in itemsById (if list changed)
-            for (const id of selectedIds) {
-                const item = itemsById.get(id);
-                if (item !== undefined)
-                    next.set(id, item);
-            }
-            // If nothing changed, return prev to avoid re-renders
-            if (next.size === prev.size) {
-                let same = true;
-                for (const [id, item] of next) {
-                    if (prev.get(id) !== item) {
-                        same = false;
-                        break;
-                    }
-                }
-                if (same)
-                    return prev;
-            }
-            return next;
-        });
+        if (typeof window === 'undefined')
+            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 selectedItemMap = useMemo(() => {
+        const m = new Map();
+        for (const id of selectedIds) {
+            const item = itemsById.get(id);
+            if (item !== undefined)
+                m.set(id, item);
+        }
+        return m;
     }, [selectedIds, itemsById]);
     const selectedItems = useMemo(() => Array.from(selectedItemMap.values()), [selectedItemMap]);
     const allSelected = useMemo(() => {
@@ -61,59 +82,58 @@ export function useTableSelection({ storageKey, items, getId, initialSelectedIds
         return totalItems > 0 && selectedIds.size === totalItems;
     }, [selectedIds, totalItems]);
     const anySelected = useMemo(() => selectedIds.size > 0, [selectedIds]);
+    // Persist + notify (but only after hydration so we don’t clobber stored values)
     useEffect(() => {
-        window.localStorage.setItem(storageKey, JSON.stringify(Array.from(selectedIds)));
+        if (!hydrated)
+            return;
+        if (typeof window === 'undefined')
+            return;
+        const nextStr = serializeIds(selectedIds);
+        if (lastWrittenRef.current !== nextStr) {
+            window.localStorage.setItem(storageKey, nextStr);
+            lastWrittenRef.current = nextStr;
+        }
         onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({ selectedIds, selectedItems });
-    }, [selectedIds, selectedItems, storageKey, onSelectionChange]);
-    const toggleId = useCallback((id) => {
-        setSelectedIds(prevIds => {
-            const nextIds = new Set(prevIds);
-            const isSelected = nextIds.has(id);
-            if (isSelected) {
-                nextIds.delete(id);
-            }
-            else {
-                if (selectionMode === 'single')
-                    nextIds.clear();
-                nextIds.add(id);
+    }, [hydrated, selectedIds, selectedItems, storageKey, onSelectionChange]);
+    const toggleId = useCallback((id, selected) => {
+        setSelectedIds(prev => {
+            const next = new Set(prev);
+            const isSelected = next.has(id);
+            const shouldSelect = selected === undefined ? !isSelected : selected;
+            if (selectionMode === 'single') {
+                next.clear();
+                if (shouldSelect)
+                    next.add(id);
+                return next;
             }
-            return nextIds;
-        });
-        // Update selectedItemMap in the same interaction for snappy UI
-        setSelectedItemMap(prevMap => {
-            const nextMap = new Map(prevMap);
-            const isSelected = nextMap.has(id);
-            if (isSelected) {
-                nextMap.delete(id);
-            }
-            else {
-                if (selectionMode === 'single')
-                    nextMap.clear();
-                const item = itemsById.get(id);
-                if (item !== undefined)
-                    nextMap.set(id, item);
-            }
-            return nextMap;
+            // multiple
+            if (shouldSelect)
+                next.add(id);
+            else
+                next.delete(id);
+            return next;
         });
-    }, [itemsById, selectionMode]);
-    const toggleItem = useCallback((item) => {
-        toggleId(getId(item));
-    }, [toggleId, getId]);
+    }, [selectionMode]);
+    const toggleItem = useCallback((item) => toggleId(getId(item)), [toggleId, getId]);
     const clearSelection = useCallback(() => {
         setSelectedIds(new Set());
-        setSelectedItemMap(new Map());
     }, []);
     const toggleAll = useCallback((selected) => {
         if (!selected) {
             clearSelection();
             return;
         }
-        const nextIds = new Set();
-        for (const item of items) {
-            nextIds.add(getId(item));
+        if (selectionMode === 'single') {
+            // Choose the first item (or nothing if empty)
+            const first = items[0];
+            setSelectedIds(first ? new Set([getId(first)]) : new Set());
+            return;
         }
-        setSelectedIds(nextIds);
-    }, [clearSelection, getId, items]);
+        const next = new Set();
+        for (const item of items)
+            next.add(getId(item));
+        setSelectedIds(next);
+    }, [clearSelection, getId, items, selectionMode]);
     return {
         selectedIds,
         selectedItems,

package/dist/hooks/useViewportFill.js

@@ -41,11 +41,23 @@ export function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMargi
             ro = new ResizeObserver(onFrame);
             ro.observe(ref.current);
         }
+        // MutationObserver to detect DOM changes that may affect position
+        let mo = null;
+        if ('MutationObserver' in window && ref.current) {
+            mo = new MutationObserver(onFrame);
+            // Observe parent node for subtree changes
+            const parent = ref.current.parentNode;
+            if (parent) {
+                mo.observe(parent, { childList: true, subtree: true });
+            }
+        }
         return () => {
             window.removeEventListener('scroll', onFrame);
             window.removeEventListener('resize', onFrame);
             if (ro)
                 ro.disconnect();
+            if (mo)
+                mo.disconnect();
             if (raf.current)
                 cancelAnimationFrame(raf.current);
         };

package/dist/src/styles/styles.css

@@ -118,6 +118,14 @@ body.dbc-app {
   color: var(--color-fg-subtle);
 }
 
+.dbc-small-text {
+  font-size: var(--font-size-xs);
+}
+
+.dbc-medium-text {
+  font-weight: var(--font-weight-medium);
+}
+
 .dbc-table--bordered {
   width: auto;
   border: var(--border-width-thin) solid var(--color-border-default);

package/dist/styles/styles.css

@@ -118,6 +118,14 @@ body.dbc-app {
   color: var(--color-fg-subtle);
 }
 
+.dbc-small-text {
+  font-size: var(--font-size-xs);
+}
+
+.dbc-medium-text {
+  font-weight: var(--font-weight-medium);
+}
+
 .dbc-table--bordered {
   width: auto;
   border: var(--border-width-thin) solid var(--color-border-default);

package/dist/styles/themes/dbc/base.css

@@ -38,6 +38,7 @@
   --icon-size-md: 20px;
   --icon-size-lg: 24px;
 
+  --component-size-2xs: 8px;
   --component-size-xxs: 12px;
   --component-size-xs: 20px;
   --component-size-sm: 30px;

package/package.json

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