@dbcdk/react-components 0.0.5 → 0.0.7

package/dist/hooks/useSorting.js

@@ -1,116 +1,118 @@
-import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
-
+'use client';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 function defaultCompare(a, b, dir, nulls) {
-  const aNull = a == null;
-  const bNull = b == null;
-  if (aNull || bNull) {
-    if (aNull && bNull) return 0;
-    const order = nulls === "first" ? -1 : 1;
-    return aNull ? order : -order;
-  }
-  if (a instanceof Date && b instanceof Date) {
-    const diff2 = a.getTime() - b.getTime();
-    return dir === "asc" ? diff2 : -diff2;
-  }
-  if (typeof a === "number" && typeof b === "number") {
-    const diff2 = a - b;
-    return dir === "asc" ? diff2 : -diff2;
-  }
-  if (typeof a === "boolean" && typeof b === "boolean") {
-    const diff2 = Number(a) - Number(b);
-    return dir === "asc" ? diff2 : -diff2;
-  }
-  const aStr = String(a);
-  const bStr = String(b);
-  const diff = aStr.localeCompare(bStr, void 0, { numeric: true, sensitivity: "base" });
-  return dir === "asc" ? diff : -diff;
+    const aNull = a == null;
+    const bNull = b == null;
+    if (aNull || bNull) {
+        if (aNull && bNull)
+            return 0;
+        const order = nulls === 'first' ? -1 : 1;
+        return aNull ? order : -order;
+    }
+    // Dates
+    if (a instanceof Date && b instanceof Date) {
+        const diff = a.getTime() - b.getTime();
+        return dir === 'asc' ? diff : -diff;
+    }
+    // Numbers
+    if (typeof a === 'number' && typeof b === 'number') {
+        const diff = a - b;
+        return dir === 'asc' ? diff : -diff;
+    }
+    // Booleans
+    if (typeof a === 'boolean' && typeof b === 'boolean') {
+        const diff = Number(a) - Number(b);
+        return dir === 'asc' ? diff : -diff;
+    }
+    // Strings (locale-aware-ish)
+    const aStr = String(a);
+    const bStr = String(b);
+    const diff = aStr.localeCompare(bStr, undefined, { numeric: true, sensitivity: 'base' });
+    return dir === 'asc' ? diff : -diff;
 }
+// Stable sort (decorate-sort-undecorate)
 function stableSort(arr, cmp) {
-  return arr.map((item, idx) => ({ item, idx })).sort((x, y) => {
-    const c = cmp(x.item, y.item);
-    return c !== 0 ? c : x.idx - y.idx;
-  }).map((x) => x.item);
+    return arr
+        .map((item, idx) => ({ item, idx }))
+        .sort((x, y) => {
+        const c = cmp(x.item, y.item);
+        return c !== 0 ? c : x.idx - y.idx;
+    })
+        .map(x => x.item);
 }
-function useSorting({
-  data = [],
-  sortBy = null,
-  sortDirection = "asc",
-  state,
-  onStateChange,
-  columnComparators = {},
-  nulls = "last",
-  allowUnsort = true,
-  resetOnDataChange = false
-}) {
-  const isControlled = state != null;
-  const [uncontrolled, setUncontrolled] = useState(() => ({
-    sortBy,
-    sortDirection
-  }));
-  const sortState = isControlled ? state : uncontrolled;
-  const setSort = useCallback(
-    (next) => {
-      var _a, _b;
-      const normalized = {
-        sortBy: (_a = next.sortBy) != null ? _a : null,
-        sortDirection: (_b = next.sortDirection) != null ? _b : null
-      };
-      if (isControlled) onStateChange == null ? void 0 : onStateChange(normalized);
-      else setUncontrolled(normalized);
-    },
-    [isControlled, onStateChange]
-  );
-  const clearSort = useCallback(() => setSort({ sortBy: null, sortDirection: null }), [setSort]);
-  const onSortChange = useCallback(
-    (e) => {
-      var _a, _b;
-      const nextSortBy = (_a = e.sortBy) != null ? _a : null;
-      setSort(sortState);
-      const current = sortState;
-      if (nextSortBy == null) {
-        return clearSort();
-      }
-      if (current.sortBy === nextSortBy) {
-        const nextDir = current.sortDirection === "asc" ? "desc" : allowUnsort ? null : "asc";
-        return setSort({ sortBy: nextSortBy, sortDirection: nextDir });
-      }
-      return setSort({
-        sortBy: nextSortBy,
-        sortDirection: (_b = e.sortDirection) != null ? _b : "asc"
-      });
-    },
-    [allowUnsort, clearSort, setSort, sortState]
-  );
-  const didInitRef = useRef(false);
-  useEffect(() => {
-    if (!resetOnDataChange) return;
-    if (!didInitRef.current) {
-      didInitRef.current = true;
-      return;
-    }
-    clearSort();
-  }, [resetOnDataChange, data]);
-  const sortedData = useMemo(() => {
-    const { sortBy: sb, sortDirection: dir } = sortState;
-    if (!sb || !dir) return data;
-    const custom = columnComparators[sb];
-    const cmp = (a, b) => {
-      if (custom) return custom(a, b, dir);
-      const av = a[sb];
-      const bv = b[sb];
-      return defaultCompare(av, bv, dir, nulls);
+export function useSorting({ data = [], sortBy = null, sortDirection = 'asc', state, onStateChange, columnComparators = {}, nulls = 'last', allowUnsort = true, resetOnDataChange = false, }) {
+    const isControlled = state != null;
+    const [uncontrolled, setUncontrolled] = useState(() => ({
+        sortBy,
+        sortDirection,
+    }));
+    const sortState = (isControlled ? state : uncontrolled);
+    const setSort = useCallback((next) => {
+        var _a, _b;
+        const normalized = {
+            sortBy: (_a = next.sortBy) !== null && _a !== void 0 ? _a : null,
+            sortDirection: (_b = next.sortDirection) !== null && _b !== void 0 ? _b : null,
+        };
+        if (isControlled)
+            onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(normalized);
+        else
+            setUncontrolled(normalized);
+    }, [isControlled, onStateChange]);
+    const clearSort = useCallback(() => setSort({ sortBy: null, sortDirection: null }), [setSort]);
+    const onSortChange = useCallback((e) => {
+        var _a, _b;
+        const nextSortBy = ((_a = e.sortBy) !== null && _a !== void 0 ? _a : null);
+        setSort(sortState);
+        const current = sortState;
+        if (nextSortBy == null) {
+            return clearSort();
+        }
+        // Same column toggling
+        if (current.sortBy === nextSortBy) {
+            const nextDir = current.sortDirection === 'asc' ? 'desc' : allowUnsort ? null : 'asc';
+            return setSort({ sortBy: nextSortBy, sortDirection: nextDir });
+        }
+        // New column: default to provided direction or asc
+        return setSort({
+            sortBy: nextSortBy,
+            sortDirection: (_b = e.sortDirection) !== null && _b !== void 0 ? _b : 'asc',
+        });
+    }, [allowUnsort, clearSort, setSort, sortState]);
+    // Optional reset on data ref change
+    const didInitRef = useRef(false);
+    useEffect(() => {
+        if (!resetOnDataChange)
+            return;
+        if (!didInitRef.current) {
+            didInitRef.current = true;
+            return;
+        }
+        clearSort();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [resetOnDataChange, data]);
+    const sortedData = useMemo(() => {
+        const { sortBy: sb, sortDirection: dir } = sortState;
+        if (!sb || !dir)
+            return data;
+        const custom = columnComparators[sb];
+        const cmp = (a, b) => {
+            if (custom)
+                return custom(a, b, dir);
+            const av = a[sb];
+            const bv = b[sb];
+            return defaultCompare(av, bv, dir, nulls);
+        };
+        // Don’t mutate input
+        return stableSort(data, cmp);
+    }, [data, sortState, columnComparators, nulls]);
+    // Helper: support functional updates in uncontrolled mode (optional nicety)
+    const setSortRef = useRef(setSort);
+    setSortRef.current = setSort;
+    return {
+        sortedData,
+        sortState,
+        onSortChange,
+        setSort,
+        clearSort,
     };
-    return stableSort(data, cmp);
-  }, [data, sortState, columnComparators, nulls]);
-  const setSortRef = useRef(setSort);
-  setSortRef.current = setSort;
-  return {
-    sortedData,
-    sortState,
-    onSortChange,
-    setSort,
-    clearSort
-  };
 }
-
-export { useSorting };

package/dist/hooks/useTableData.d.ts

@@ -1,4 +1,4 @@
-import type { PageChangeEvent } from '@/components/pagination/Pagination';
+import type { PageChangeEvent } from '../components/pagination/Pagination';
 import { type PaginationState } from './usePagination';
 import { type SortDirection, type SortState, type ColumnComparators } from './useSorting';
 export interface UseTableDataProps<T> {

package/dist/hooks/useTableData.js

@@ -1,50 +1,45 @@
+'use client';
 import { useEffect, useMemo } from 'react';
 import { usePagination } from './usePagination';
-import { useSorting } from './useSorting';
-
-function useTableData({
-  data = [],
-  pagination,
-  sorting,
-  resetPageOnSortChange = true
-}) {
-  var _a, _b, _c, _d, _e, _f;
-  const s = useSorting({
-    data,
-    sortBy: (_a = sorting == null ? void 0 : sorting.sortBy) != null ? _a : null,
-    sortDirection: (_b = sorting == null ? void 0 : sorting.direction) != null ? _b : null,
-    state: sorting == null ? void 0 : sorting.state,
-    onStateChange: sorting == null ? void 0 : sorting.onStateChange,
-    columnComparators: sorting == null ? void 0 : sorting.columnComparators,
-    nulls: (_c = sorting == null ? void 0 : sorting.nulls) != null ? _c : "last",
-    allowUnsort: (_d = sorting == null ? void 0 : sorting.allowUnsort) != null ? _d : true
-  });
-  const p = usePagination({
-    data: s.sortedData,
-    skip: (_e = pagination == null ? void 0 : pagination.skip) != null ? _e : 0,
-    take: (_f = pagination == null ? void 0 : pagination.take) != null ? _f : 10,
-    state: pagination == null ? void 0 : pagination.state,
-    onStateChange: pagination == null ? void 0 : pagination.onStateChange
-  });
-  useEffect(() => {
-    if (!resetPageOnSortChange) return;
-    p.resetPage();
-  }, [resetPageOnSortChange, s.sortState.sortBy, s.sortState.sortDirection]);
-  const rows = useMemo(() => p.paginatedData, [p.paginatedData]);
-  return {
-    rows,
-    totalCount: s.sortedData.length,
-    pagination: {
-      state: p.paginationState,
-      onPageChange: p.onPageChange,
-      resetPage: p.resetPage
-    },
-    sorting: {
-      state: s.sortState,
-      onSortChange: s.onSortChange,
-      clearSort: s.clearSort
-    }
-  };
+import { useSorting, } from './useSorting';
+export function useTableData({ data = [], pagination, sorting, resetPageOnSortChange = true, }) {
+    var _a, _b, _c, _d, _e, _f;
+    const s = useSorting({
+        data,
+        sortBy: (_a = sorting === null || sorting === void 0 ? void 0 : sorting.sortBy) !== null && _a !== void 0 ? _a : null,
+        sortDirection: (_b = sorting === null || sorting === void 0 ? void 0 : sorting.direction) !== null && _b !== void 0 ? _b : null,
+        state: sorting === null || sorting === void 0 ? void 0 : sorting.state,
+        onStateChange: sorting === null || sorting === void 0 ? void 0 : sorting.onStateChange,
+        columnComparators: sorting === null || sorting === void 0 ? void 0 : sorting.columnComparators,
+        nulls: (_c = sorting === null || sorting === void 0 ? void 0 : sorting.nulls) !== null && _c !== void 0 ? _c : 'last',
+        allowUnsort: (_d = sorting === null || sorting === void 0 ? void 0 : sorting.allowUnsort) !== null && _d !== void 0 ? _d : true,
+    });
+    const p = usePagination({
+        data: s.sortedData,
+        skip: (_e = pagination === null || pagination === void 0 ? void 0 : pagination.skip) !== null && _e !== void 0 ? _e : 0,
+        take: (_f = pagination === null || pagination === void 0 ? void 0 : pagination.take) !== null && _f !== void 0 ? _f : 10,
+        state: pagination === null || pagination === void 0 ? void 0 : pagination.state,
+        onStateChange: pagination === null || pagination === void 0 ? void 0 : pagination.onStateChange,
+    });
+    useEffect(() => {
+        if (!resetPageOnSortChange)
+            return;
+        p.resetPage();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [resetPageOnSortChange, s.sortState.sortBy, s.sortState.sortDirection]);
+    const rows = useMemo(() => p.paginatedData, [p.paginatedData]);
+    return {
+        rows,
+        totalCount: s.sortedData.length,
+        pagination: {
+            state: p.paginationState,
+            onPageChange: p.onPageChange,
+            resetPage: p.resetPage,
+        },
+        sorting: {
+            state: s.sortState,
+            onSortChange: s.onSortChange,
+            clearSort: s.clearSort,
+        },
+    };
 }
-
-export { useTableData };

package/dist/hooks/useTableSelection.js

@@ -1,128 +1,128 @@
-import { useState, useMemo, useEffect, useCallback } from 'react';
-
-function useTableSelection({
-  storageKey,
-  items,
-  getId,
-  initialSelectedIds = /* @__PURE__ */ new Set(),
-  totalItems,
-  onSelectionChange,
-  selectionMode = "single"
-}) {
-  const [selectedIds, setSelectedIds] = useState(initialSelectedIds);
-  const [selectedItemMap, setSelectedItemMap] = useState(() => /* @__PURE__ */ new Map());
-  const itemsById = useMemo(() => {
-    const m = /* @__PURE__ */ new Map();
-    for (const item of items) m.set(getId(item), item);
-    return m;
-  }, [items, getId]);
-  useEffect(() => {
-    const stored = window.localStorage.getItem(storageKey);
-    if (!stored) {
-      setSelectedIds(initialSelectedIds);
-      return;
-    }
-    try {
-      const parsed = JSON.parse(stored);
-      setSelectedIds(new Set(parsed));
-    } catch {
-      setSelectedIds(initialSelectedIds);
-    }
-  }, [storageKey]);
-  useEffect(() => {
-    setSelectedItemMap((prev) => {
-      const next = /* @__PURE__ */ new Map();
-      for (const id of selectedIds) {
-        const item = itemsById.get(id);
-        if (item !== void 0) next.set(id, item);
-      }
-      if (next.size === prev.size) {
-        let same = true;
-        for (const [id, item] of next) {
-          if (prev.get(id) !== item) {
-            same = false;
-            break;
-          }
+'use client';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+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 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
+    useEffect(() => {
+        const stored = window.localStorage.getItem(storageKey);
+        if (!stored) {
+            setSelectedIds(initialSelectedIds);
+            return;
         }
-        if (same) return prev;
-      }
-      return next;
-    });
-  }, [selectedIds, itemsById]);
-  const selectedItems = useMemo(() => Array.from(selectedItemMap.values()), [selectedItemMap]);
-  const allSelected = useMemo(() => {
-    if (typeof totalItems !== "number") return false;
-    return totalItems > 0 && selectedIds.size === totalItems;
-  }, [selectedIds, totalItems]);
-  const anySelected = useMemo(() => selectedIds.size > 0, [selectedIds]);
-  useEffect(() => {
-    window.localStorage.setItem(storageKey, JSON.stringify(Array.from(selectedIds)));
-    onSelectionChange == null ? 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);
+        try {
+            const parsed = JSON.parse(stored);
+            setSelectedIds(new Set(parsed));
         }
-        return nextIds;
-      });
-      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 !== void 0) nextMap.set(id, item);
+        catch {
+            setSelectedIds(initialSelectedIds);
         }
-        return nextMap;
-      });
-    },
-    [itemsById, selectionMode]
-  );
-  const toggleItem = useCallback(
-    (item) => {
-      toggleId(getId(item));
-    },
-    [toggleId, getId]
-  );
-  const toggleAll = useCallback(
-    (selected) => {
-      if (!selected) {
-        clearSelection();
-      } else {
-        const nextIds = /* @__PURE__ */ new Set();
+        // 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.
+    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;
+        });
+    }, [selectedIds, itemsById]);
+    const selectedItems = useMemo(() => Array.from(selectedItemMap.values()), [selectedItemMap]);
+    const allSelected = useMemo(() => {
+        if (typeof totalItems !== 'number')
+            return false;
+        return totalItems > 0 && selectedIds.size === totalItems;
+    }, [selectedIds, totalItems]);
+    const anySelected = useMemo(() => selectedIds.size > 0, [selectedIds]);
+    useEffect(() => {
+        window.localStorage.setItem(storageKey, JSON.stringify(Array.from(selectedIds)));
+        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);
+            }
+            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;
+        });
+    }, [itemsById, 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));
+            nextIds.add(getId(item));
         }
         setSelectedIds(nextIds);
-        return nextIds;
-      }
-    },
-    [allSelected, getId, items]
-  );
-  const clearSelection = useCallback(() => {
-    setSelectedIds(/* @__PURE__ */ new Set());
-    setSelectedItemMap(/* @__PURE__ */ new Map());
-  }, []);
-  return {
-    selectedIds,
-    selectedItems,
-    selectedItemMap,
-    toggleItem,
-    toggleId,
-    clearSelection,
-    allSelected,
-    anySelected,
-    toggleAll
-  };
+    }, [clearSelection, getId, items]);
+    return {
+        selectedIds,
+        selectedItems,
+        selectedItemMap,
+        toggleItem,
+        toggleId,
+        clearSelection,
+        allSelected,
+        anySelected,
+        toggleAll,
+    };
 }
-
-export { useTableSelection };

package/dist/hooks/useTableSettings.js

@@ -1,26 +1,24 @@
-import { useState, useEffect, useCallback } from 'react';
-
-function useTableSettings(storageKey) {
-  const [viewMode, setViewMode] = useState("compact");
-  useEffect(() => {
-    if (typeof window !== "undefined" && storageKey) {
-      const storedMode = window.localStorage.getItem(`dbc-table-settings:${storageKey}`);
-      if (storedMode === "compact" || storedMode === "comfortable") {
-        setViewMode(storedMode);
-      }
-    }
-  }, [storageKey]);
-  const toggleViewMode = useCallback(() => {
-    if (typeof window !== "undefined" && storageKey) {
-      const newMode = viewMode === "comfortable" ? "compact" : "comfortable";
-      window.localStorage.setItem(`dbc-table-settings:${storageKey}`, newMode);
-    }
-    setViewMode((prevMode) => prevMode === "comfortable" ? "compact" : "comfortable");
-  }, [storageKey, viewMode]);
-  return {
-    viewMode,
-    toggleViewMode
-  };
+'use client';
+import { useCallback, useEffect, useState } from 'react';
+export function useTableSettings(storageKey) {
+    const [viewMode, setViewMode] = useState('compact');
+    useEffect(() => {
+        if (typeof window !== 'undefined' && storageKey) {
+            const storedMode = window.localStorage.getItem(`dbc-table-settings:${storageKey}`);
+            if (storedMode === 'compact' || storedMode === 'comfortable') {
+                setViewMode(storedMode);
+            }
+        }
+    }, [storageKey]);
+    const toggleViewMode = useCallback(() => {
+        if (typeof window !== 'undefined' && storageKey) {
+            const newMode = viewMode === 'comfortable' ? 'compact' : 'comfortable';
+            window.localStorage.setItem(`dbc-table-settings:${storageKey}`, newMode);
+        }
+        setViewMode(prevMode => (prevMode === 'comfortable' ? 'compact' : 'comfortable'));
+    }, [storageKey, viewMode]);
+    return {
+        viewMode,
+        toggleViewMode,
+    };
 }
-
-export { useTableSettings };

package/dist/hooks/useTheme.d.ts

@@ -1,9 +1,5 @@
-export type ThemeId = string;
-export type ThemeUrls = Record<ThemeId, string>;
-export declare const LINK_ID = "dbc-theme-link";
-export type ThemeVariant = "light" | "dark";
+export type ThemeVariant = 'light' | 'dark';
 export declare function useTheme(initialTheme?: ThemeVariant): {
-    theme: ThemeId | null;
-    switchTheme: (id: ThemeId) => string;
-    linkId: string;
+    theme: ThemeVariant | null;
+    switchTheme: (id: ThemeVariant) => ThemeVariant;
 };