@dbcdk/react-components 0.0.103 → 0.0.104

package/dist/hooks/usePagination.js

@@ -0,0 +1,142 @@
+'use client';
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function normalizePaginationState(next) {
+  return {
+    skip: Math.max(0, next.skip),
+    take: Math.max(1, next.take)
+  };
+}
+function safeParsePaginationState(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (typeof parsed !== "object" || parsed == null || typeof parsed.skip !== "number" || typeof parsed.take !== "number") {
+      return null;
+    }
+    return normalizePaginationState({
+      skip: parsed.skip,
+      take: parsed.take
+    });
+  } catch {
+    return null;
+  }
+}
+function usePagination({
+  data = [],
+  skip = 0,
+  take = 10,
+  state,
+  onStateChange,
+  resetOnDataChange = false,
+  storageKey
+}) {
+  const isControlled = state != null;
+  const [hydrated, setHydrated] = useState(() => !storageKey || isControlled);
+  const [uncontrolled, setUncontrolled] = useState(() => {
+    var _a;
+    const initial = normalizePaginationState({
+      skip,
+      take
+    });
+    if (typeof window === "undefined" || !storageKey || isControlled) {
+      return initial;
+    }
+    return (_a = safeParsePaginationState(window.localStorage.getItem(storageKey))) != null ? _a : initial;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (isControlled || !storageKey) {
+      setHydrated(true);
+      return;
+    }
+    const fallback = normalizePaginationState({ skip, take });
+    const stored = safeParsePaginationState(window.localStorage.getItem(storageKey));
+    setUncontrolled(stored != null ? stored : fallback);
+    setHydrated(true);
+  }, [isControlled, storageKey, skip, take]);
+  const didInitRef = useRef(false);
+  useEffect(() => {
+    if (isControlled) return;
+    if (storageKey) return;
+    if (!didInitRef.current) {
+      didInitRef.current = true;
+      return;
+    }
+    setUncontrolled((prev) => ({
+      skip: prev.skip,
+      take: Math.max(1, take)
+    }));
+  }, [isControlled, storageKey, take]);
+  const paginationState = isControlled ? state : uncontrolled;
+  const totalCount = data.length;
+  const safeTake = Math.max(1, paginationState.take);
+  const maxSkip = Math.max(
+    0,
+    totalCount === 0 ? 0 : Math.floor((totalCount - 1) / safeTake) * safeTake
+  );
+  const safeSkip = clamp(Math.max(0, paginationState.skip), 0, maxSkip);
+  const setPagination = useCallback(
+    (next) => {
+      const normalized = normalizePaginationState(next);
+      if (isControlled) {
+        onStateChange == null ? void 0 : onStateChange(normalized);
+        return;
+      }
+      setUncontrolled(normalized);
+    },
+    [isControlled, onStateChange]
+  );
+  const onPageChange = useCallback(
+    (pageEvent) => {
+      const nextTake = Math.max(1, pageEvent.take);
+      const nextSkip = Math.max(0, (pageEvent.page - 1) * nextTake);
+      setPagination({ skip: nextSkip, take: nextTake });
+    },
+    [setPagination]
+  );
+  const resetPage = useCallback(() => {
+    setPagination({ skip: 0, take: safeTake });
+  }, [setPagination, safeTake]);
+  useEffect(() => {
+    if (!resetOnDataChange) return;
+    if (!hydrated) return;
+    resetPage();
+  }, [resetOnDataChange, data, hydrated]);
+  const paginatedData = useMemo(() => {
+    return data.slice(safeSkip, safeSkip + safeTake);
+  }, [data, safeSkip, safeTake]);
+  const page = useMemo(() => Math.floor(safeSkip / safeTake) + 1, [safeSkip, safeTake]);
+  useEffect(() => {
+    if (isControlled) return;
+    if (safeSkip !== paginationState.skip) {
+      setUncontrolled((prev) => ({ ...prev, skip: safeSkip }));
+    }
+  }, [isControlled, safeSkip, paginationState.skip]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (isControlled || !storageKey) return;
+    if (!hydrated) return;
+    window.localStorage.setItem(
+      storageKey,
+      JSON.stringify({
+        skip: paginationState.skip,
+        take: paginationState.take
+      })
+    );
+  }, [hydrated, isControlled, paginationState.skip, paginationState.take, storageKey]);
+  return {
+    paginatedData,
+    paginationState: { skip: safeSkip, take: safeTake },
+    onPageChange,
+    setPagination,
+    resetPage,
+    page,
+    totalCount
+  };
+}
+
+export { usePagination };

package/dist/hooks/useSorting.cjs

@@ -0,0 +1,119 @@
+'use client';
+'use strict';
+
+var react = require('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;
+}
+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);
+}
+function useSorting({
+  data = [],
+  sortBy = null,
+  sortDirection = "asc",
+  state,
+  onStateChange,
+  columnComparators = {},
+  nulls = "last",
+  allowUnsort = true,
+  resetOnDataChange = false
+}) {
+  const isControlled = state != null;
+  const [uncontrolled, setUncontrolled] = react.useState(() => ({
+    sortBy,
+    sortDirection
+  }));
+  const sortState = isControlled ? state : uncontrolled;
+  const setSort = react.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 = react.useCallback(() => setSort({ sortBy: null, sortDirection: null }), [setSort]);
+  const onSortChange = react.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 = react.useRef(false);
+  react.useEffect(() => {
+    if (!resetOnDataChange) return;
+    if (!didInitRef.current) {
+      didInitRef.current = true;
+      return;
+    }
+    clearSort();
+  }, [resetOnDataChange, data]);
+  const sortedData = react.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);
+    };
+    return stableSort(data, cmp);
+  }, [data, sortState, columnComparators, nulls]);
+  const setSortRef = react.useRef(setSort);
+  setSortRef.current = setSort;
+  return {
+    sortedData,
+    sortState,
+    onSortChange,
+    setSort,
+    clearSort
+  };
+}
+
+exports.useSorting = useSorting;

package/dist/hooks/useSorting.js

@@ -0,0 +1,117 @@
+'use client';
+import { useState, useCallback, useRef, useEffect, useMemo } 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;
+}
+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);
+}
+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);
+    };
+    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.cjs

@@ -0,0 +1,53 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var usePagination = require('./usePagination');
+var useSorting = require('./useSorting');
+
+function useTableData({
+  data = [],
+  pagination,
+  sorting,
+  resetPageOnSortChange = true
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const s = useSorting.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.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
+  });
+  react.useEffect(() => {
+    if (!resetPageOnSortChange) return;
+    p.resetPage();
+  }, [resetPageOnSortChange, s.sortState.sortBy, s.sortState.sortDirection]);
+  const rows = react.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
+    }
+  };
+}
+
+exports.useTableData = useTableData;

package/dist/hooks/useTableData.js

@@ -0,0 +1,51 @@
+'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
+    }
+  };
+}
+
+export { useTableData };

package/dist/hooks/useTableSelection.cjs

@@ -0,0 +1,172 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+const EMPTY_IDS = /* @__PURE__ */ new Set();
+function safeParseIds(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return null;
+    return parsed.filter((v) => typeof v === "string" || typeof v === "number");
+  } catch {
+    return null;
+  }
+}
+function serializeIds(ids) {
+  return JSON.stringify(Array.from(ids));
+}
+function areSetsEqual(a, b) {
+  if (a.size !== b.size) return false;
+  for (const value of a) {
+    if (!b.has(value)) return false;
+  }
+  return true;
+}
+function useTableSelection({
+  storageKey,
+  items,
+  getId,
+  initialSelectedIds,
+  onSelectionChange,
+  selectionMode = "single",
+  pruneToItems = false,
+  storage = "session"
+}) {
+  const resolvedInitialSelectedIds = initialSelectedIds != null ? initialSelectedIds : EMPTY_IDS;
+  const [selectedIds, setSelectedIds] = react.useState(resolvedInitialSelectedIds);
+  const [hydrated, setHydrated] = react.useState(false);
+  const lastWrittenRef = react.useRef(null);
+  const itemsById = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      map.set(getId(item), item);
+    }
+    return map;
+  }, [items, getId]);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    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;
+    }
+    const parsed = safeParseIds(storageApi.getItem(storageKey));
+    const next = new Set(parsed != null ? parsed : Array.from(resolvedInitialSelectedIds));
+    setSelectedIds((prev) => areSetsEqual(prev, next) ? prev : next);
+    lastWrittenRef.current = serializeIds(next);
+    setHydrated(true);
+  }, [storage, storageKey, resolvedInitialSelectedIds]);
+  react.useEffect(() => {
+    if (!pruneToItems) return;
+    const visibleIds = new Set(Array.from(itemsById.keys()));
+    setSelectedIds((prev) => {
+      if (prev.size === 0) return prev;
+      if (visibleIds.size === 0) return prev;
+      const next = /* @__PURE__ */ new Set();
+      for (const id of prev) {
+        if (visibleIds.has(id)) next.add(id);
+      }
+      return areSetsEqual(prev, next) ? prev : next;
+    });
+  }, [pruneToItems, itemsById]);
+  const selectedItemMap = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const id of selectedIds) {
+      const item = itemsById.get(id);
+      if (item !== void 0) map.set(id, item);
+    }
+    return map;
+  }, [selectedIds, itemsById]);
+  const selectedItems = react.useMemo(() => Array.from(selectedItemMap.values()), [selectedItemMap]);
+  const allSelected = react.useMemo(() => {
+    if (items.length === 0) return false;
+    return items.every((item) => selectedIds.has(getId(item)));
+  }, [items, selectedIds, getId]);
+  const anySelected = react.useMemo(() => selectedIds.size > 0, [selectedIds]);
+  react.useEffect(() => {
+    if (!hydrated) return;
+    if (typeof window === "undefined") return;
+    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 ? void 0 : onSelectionChange({ selectedIds, selectedItems });
+  }, [hydrated, onSelectionChange, selectedIds, selectedItems, storage, storageKey]);
+  const toggleId = react.useCallback(
+    (id, selected) => {
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        const isSelected = next.has(id);
+        const shouldSelect = selected === void 0 ? !isSelected : selected;
+        if (selectionMode === "single") {
+          next.clear();
+          if (shouldSelect) next.add(id);
+          return areSetsEqual(prev, next) ? prev : next;
+        }
+        if (shouldSelect) next.add(id);
+        else next.delete(id);
+        return areSetsEqual(prev, next) ? prev : next;
+      });
+    },
+    [selectionMode]
+  );
+  const toggleItem = react.useCallback(
+    (item) => {
+      toggleId(getId(item));
+    },
+    [toggleId, getId]
+  );
+  const selectOnly = react.useCallback((id) => {
+    setSelectedIds((prev) => {
+      const next = /* @__PURE__ */ new Set([id]);
+      return areSetsEqual(prev, next) ? prev : next;
+    });
+  }, []);
+  const clearSelection = react.useCallback(() => {
+    setSelectedIds((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Set());
+  }, []);
+  const toggleAll = react.useCallback(
+    (selected) => {
+      if (!selected) {
+        clearSelection();
+        return;
+      }
+      if (selectionMode === "single") {
+        const first = items[0];
+        const next2 = first ? /* @__PURE__ */ new Set([getId(first)]) : /* @__PURE__ */ new Set();
+        setSelectedIds((prev) => areSetsEqual(prev, next2) ? prev : next2);
+        return;
+      }
+      const next = /* @__PURE__ */ new Set();
+      for (const item of items) {
+        next.add(getId(item));
+      }
+      setSelectedIds((prev) => areSetsEqual(prev, next) ? prev : next);
+    },
+    [clearSelection, getId, items, selectionMode]
+  );
+  return {
+    selectedIds,
+    selectedItems,
+    selectedItemMap,
+    toggleItem,
+    toggleId,
+    selectOnly,
+    clearSelection,
+    allSelected,
+    anySelected,
+    toggleAll
+  };
+}
+
+exports.useTableSelection = useTableSelection;