@dbcdk/react-components 0.0.169 → 0.0.171

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/usePersistentState.cjs

@@ -0,0 +1,60 @@
+'use client';
+'use strict';
+
+var react = require('react');
+var cookie_utils = require('../utils/cookie.utils');
+var localStorage_utils = require('../utils/localStorage.utils');
+
+function readStorage(storage, key) {
+  return storage === "cookie" ? cookie_utils.readCookie(key) : localStorage_utils.readLocalStorage(key);
+}
+function writeStorage(storage, key, value, maxAgeSeconds) {
+  if (storage === "cookie") {
+    cookie_utils.writeCookie(key, value, maxAgeSeconds);
+  } else {
+    localStorage_utils.writeLocalStorage(key, value);
+  }
+}
+function usePersistentState({
+  initialValue,
+  storageKey,
+  isControlled = false,
+  validate,
+  storage = "localStorage",
+  hydration = "effect",
+  maxAgeSeconds
+}) {
+  const shouldHydrate = !isControlled && Boolean(storageKey);
+  const sync = hydration === "sync";
+  const validateRef = react.useRef(validate);
+  const [didHydrate, setDidHydrate] = react.useState(() => !shouldHydrate || sync);
+  const [value, setValue] = react.useState(() => {
+    if (!shouldHydrate || !sync) return initialValue;
+    const stored = readStorage(storage, storageKey);
+    return validate == null || validate(stored) ? stored : initialValue;
+  });
+  const hydrated = !shouldHydrate || didHydrate;
+  react.useEffect(() => {
+    validateRef.current = validate;
+  }, [validate]);
+  react.useEffect(() => {
+    if (!storageKey || !shouldHydrate || sync) return;
+    const stored = readStorage(storage, storageKey);
+    const currentValidate = validateRef.current;
+    const nextValue = currentValidate == null || currentValidate(stored) ? stored : initialValue;
+    setValue(nextValue);
+    setDidHydrate(true);
+  }, [initialValue, shouldHydrate, storageKey, storage, sync]);
+  react.useEffect(() => {
+    if (isControlled || !storageKey) return;
+    if (!hydrated) return;
+    writeStorage(storage, storageKey, value, maxAgeSeconds);
+  }, [hydrated, isControlled, storageKey, storage, maxAgeSeconds, value]);
+  return {
+    value,
+    setValue,
+    hydrated
+  };
+}
+
+exports.usePersistentState = usePersistentState;

package/dist/hooks/usePersistentState.d.ts

@@ -0,0 +1,33 @@
+import { Dispatch, SetStateAction } from 'react';
+export type PersistentStateStorage = 'localStorage' | 'cookie';
+/**
+ * 'effect' (default): the stored value is read in a useEffect after mount,
+ * so `value` starts as `initialValue` on every render — including the
+ * first client render of a component that was server-rendered — and only
+ * updates once the effect runs. This is what makes it hydration-safe.
+ *
+ * 'sync': the stored value is read synchronously during the initial
+ * render, so there's no post-mount update and no flash of `initialValue`.
+ * Only use this for components that are never part of an SSR/hydration
+ * pass (e.g. mounted purely client-side, behind a data-loading gate) —
+ * otherwise the server and the first client render will disagree and
+ * React will emit a hydration mismatch and force a visible patch-up,
+ * which is the exact flash this mode is meant to avoid.
+ */
+export type PersistentStateHydration = 'effect' | 'sync';
+export interface UsePersistentStateOptions<T> {
+    initialValue: T;
+    storageKey?: string;
+    isControlled?: boolean;
+    validate?: (value: unknown) => value is T;
+    storage?: PersistentStateStorage;
+    hydration?: PersistentStateHydration;
+    /** Only used when storage is 'cookie'. Defaults to one year. */
+    maxAgeSeconds?: number;
+}
+export interface UsePersistentStateResult<T> {
+    value: T;
+    setValue: Dispatch<SetStateAction<T>>;
+    hydrated: boolean;
+}
+export declare function usePersistentState<T>({ initialValue, storageKey, isControlled, validate, storage, hydration, maxAgeSeconds, }: UsePersistentStateOptions<T>): UsePersistentStateResult<T>;

package/dist/hooks/usePersistentState.js

@@ -0,0 +1,58 @@
+'use client';
+import { useRef, useState, useEffect } from 'react';
+import { readCookie, writeCookie } from '../utils/cookie.utils';
+import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
+
+function readStorage(storage, key) {
+  return storage === "cookie" ? readCookie(key) : readLocalStorage(key);
+}
+function writeStorage(storage, key, value, maxAgeSeconds) {
+  if (storage === "cookie") {
+    writeCookie(key, value, maxAgeSeconds);
+  } else {
+    writeLocalStorage(key, value);
+  }
+}
+function usePersistentState({
+  initialValue,
+  storageKey,
+  isControlled = false,
+  validate,
+  storage = "localStorage",
+  hydration = "effect",
+  maxAgeSeconds
+}) {
+  const shouldHydrate = !isControlled && Boolean(storageKey);
+  const sync = hydration === "sync";
+  const validateRef = useRef(validate);
+  const [didHydrate, setDidHydrate] = useState(() => !shouldHydrate || sync);
+  const [value, setValue] = useState(() => {
+    if (!shouldHydrate || !sync) return initialValue;
+    const stored = readStorage(storage, storageKey);
+    return validate == null || validate(stored) ? stored : initialValue;
+  });
+  const hydrated = !shouldHydrate || didHydrate;
+  useEffect(() => {
+    validateRef.current = validate;
+  }, [validate]);
+  useEffect(() => {
+    if (!storageKey || !shouldHydrate || sync) return;
+    const stored = readStorage(storage, storageKey);
+    const currentValidate = validateRef.current;
+    const nextValue = currentValidate == null || currentValidate(stored) ? stored : initialValue;
+    setValue(nextValue);
+    setDidHydrate(true);
+  }, [initialValue, shouldHydrate, storageKey, storage, sync]);
+  useEffect(() => {
+    if (isControlled || !storageKey) return;
+    if (!hydrated) return;
+    writeStorage(storage, storageKey, value, maxAgeSeconds);
+  }, [hydrated, isControlled, storageKey, storage, maxAgeSeconds, value]);
+  return {
+    value,
+    setValue,
+    hydrated
+  };
+}
+
+export { usePersistentState };

package/dist/hooks/useSorting.cjs

@@ -0,0 +1,120 @@
+'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.defaultCompare = defaultCompare;
+exports.useSorting = useSorting;

package/dist/hooks/useSorting.d.ts

@@ -0,0 +1,50 @@
+export type SortDirection = 'asc' | 'desc' | null;
+export type SortState<_T = unknown> = {
+    sortBy: string | null;
+    sortDirection: SortDirection;
+};
+export type SortEvent<T = unknown> = Partial<SortState<T>>;
+export type ColumnComparators<T> = Partial<Record<string, (a: T, b: T, direction: Exclude<SortDirection, null>) => number>>;
+export interface UseSortingProps<T> {
+    data?: readonly T[];
+    /**
+     * Default/initial state. If you pass `state`, these are ignored.
+     */
+    sortBy?: string | null;
+    sortDirection?: SortDirection;
+    /**
+     * Controlled mode: if provided, hook will not keep its own state.
+     */
+    state?: SortState<T>;
+    onStateChange?: (next: SortState<T>) => void;
+    /**
+     * Optional per-column comparator.
+     * If absent, falls back to default compare on the field value.
+     */
+    columnComparators?: ColumnComparators<T>;
+    /**
+     * How to handle null/undefined values when using the default comparator:
+     * - "first": nulls come first
+     * - "last": nulls come last
+     */
+    nulls?: 'first' | 'last';
+    /**
+     * If true, toggling a column cycles: asc -> desc -> null
+     * If false, cycles: asc -> desc -> asc ...
+     */
+    allowUnsort?: boolean;
+    /**
+     * When true, resets sorting when data reference changes.
+     * (Most people want to keep sort; default false.)
+     */
+    resetOnDataChange?: boolean;
+}
+export interface UseSortingResult<T> {
+    sortedData: T[];
+    sortState: SortState<T>;
+    onSortChange: (e: SortEvent<T>) => void;
+    setSort: (next: SortState<T>) => void;
+    clearSort: () => void;
+}
+export declare function defaultCompare(a: unknown, b: unknown, dir: 'asc' | 'desc', nulls: 'first' | 'last'): number;
+export declare function useSorting<T extends Record<string, any>>({ data, sortBy, sortDirection, state, onStateChange, columnComparators, nulls, allowUnsort, resetOnDataChange, }: UseSortingProps<T>): UseSortingResult<T>;

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 { defaultCompare, useSorting };

package/dist/hooks/useTableData.cjs

@@ -0,0 +1,75 @@
+'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 hasPagination = pagination != null;
+  const nullsMode = (_a = sorting == null ? void 0 : sorting.nulls) != null ? _a : "last";
+  const mergedComparators = react.useMemo(() => {
+    var _a2, _b2;
+    const derived = {};
+    for (const col of (_a2 = sorting == null ? void 0 : sorting.columns) != null ? _a2 : []) {
+      const colId = (_b2 = col.id) != null ? _b2 : col.accessorKey;
+      if (!colId) continue;
+      const accessorFn = col.accessorFn;
+      const accessorKey = col.accessorKey;
+      if (accessorFn) {
+        derived[colId] = (a, b, dir) => useSorting.defaultCompare(accessorFn(a, 0), accessorFn(b, 0), dir, nullsMode);
+      } else if (accessorKey) {
+        derived[colId] = (a, b, dir) => useSorting.defaultCompare(a[accessorKey], b[accessorKey], dir, nullsMode);
+      }
+    }
+    return { ...derived, ...sorting == null ? void 0 : sorting.columnComparators };
+  }, [sorting == null ? void 0 : sorting.columns, sorting == null ? void 0 : sorting.columnComparators, nullsMode]);
+  const s = useSorting.useSorting({
+    data,
+    sortBy: (_b = sorting == null ? void 0 : sorting.sortBy) != null ? _b : null,
+    sortDirection: (_c = sorting == null ? void 0 : sorting.direction) != null ? _c : null,
+    state: sorting == null ? void 0 : sorting.state,
+    onStateChange: sorting == null ? void 0 : sorting.onStateChange,
+    columnComparators: mergedComparators,
+    nulls: nullsMode,
+    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 : Math.max(s.sortedData.length, 1),
+    state: pagination == null ? void 0 : pagination.state,
+    onStateChange: pagination == null ? void 0 : pagination.onStateChange
+  });
+  react.useEffect(() => {
+    if (!hasPagination) return;
+    if (!resetPageOnSortChange) return;
+    p.resetPage();
+  }, [hasPagination, resetPageOnSortChange, s.sortState.sortBy, s.sortState.sortDirection]);
+  const rows = react.useMemo(
+    () => hasPagination ? p.paginatedData : s.sortedData,
+    [hasPagination, p.paginatedData, s.sortedData]
+  );
+  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;