@dbcdk/react-components 0.0.3 → 0.0.5

package/dist/constants/sizes.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const sizes = {
+  xs: "var(--component-size-xs)",
   sm: "var(--component-size-sm)",
   md: "var(--component-size-md)",
   lg: "var(--component-size-lg)",

package/dist/constants/sizes.d.ts

@@ -1,2 +1,2 @@
-import type { Size, SizeVariable } from "../types/sizes.types";
+import type { Size, SizeVariable } from '../types/sizes.types';
 export declare const sizes: Record<Size, SizeVariable>;

package/dist/constants/sizes.js

@@ -1,4 +1,5 @@
 const sizes = {
+  xs: "var(--component-size-xs)",
   sm: "var(--component-size-sm)",
   md: "var(--component-size-md)",
   lg: "var(--component-size-lg)",

package/dist/hooks/usePagination.cjs

@@ -0,0 +1,88 @@
+'use strict';
+
+var react = require('react');
+
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function usePagination({
+  data = [],
+  skip = 0,
+  take = 10,
+  state,
+  onStateChange,
+  resetOnDataChange = false
+}) {
+  const isControlled = state != null;
+  const [uncontrolled, setUncontrolled] = react.useState(() => ({
+    skip: Math.max(0, skip),
+    take: Math.max(1, take)
+  }));
+  const didInitRef = react.useRef(false);
+  react.useEffect(() => {
+    if (isControlled) return;
+    if (!didInitRef.current) {
+      didInitRef.current = true;
+      return;
+    }
+    setUncontrolled((prev) => ({
+      skip: prev.skip,
+      take: Math.max(1, take)
+    }));
+  }, [isControlled, 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 = react.useCallback(
+    (next) => {
+      const normalized = {
+        take: Math.max(1, next.take),
+        skip: Math.max(0, next.skip)
+      };
+      if (isControlled) onStateChange == null ? void 0 : onStateChange(normalized);
+      else setUncontrolled(normalized);
+    },
+    [isControlled, onStateChange]
+  );
+  const onPageChange = react.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 = react.useCallback(() => {
+    setPagination({ skip: 0, take: safeTake });
+  }, [setPagination, safeTake]);
+  react.useEffect(() => {
+    if (!resetOnDataChange) return;
+    resetPage();
+  }, [resetOnDataChange, data]);
+  const paginatedData = react.useMemo(() => {
+    return data.slice(safeSkip, safeSkip + safeTake);
+  }, [data, safeSkip, safeTake]);
+  const page = react.useMemo(() => Math.floor(safeSkip / safeTake) + 1, [safeSkip, safeTake]);
+  react.useEffect(() => {
+    if (isControlled) return;
+    if (safeSkip !== paginationState.skip) {
+      setUncontrolled((prev) => ({ ...prev, skip: safeSkip }));
+    }
+  }, [isControlled, safeSkip, paginationState.skip]);
+  return {
+    paginatedData,
+    paginationState: { skip: safeSkip, take: safeTake },
+    onPageChange,
+    setPagination,
+    resetPage,
+    page,
+    totalCount
+  };
+}
+
+exports.usePagination = usePagination;

package/dist/hooks/usePagination.d.ts

@@ -0,0 +1,33 @@
+import type { PageChangeEvent } from '@/components/pagination/Pagination';
+export type PaginationState = {
+    skip: number;
+    take: number;
+};
+export interface UsePaginationProps<T> {
+    data?: readonly T[];
+    /**
+     * Default/initial state. If you pass `state`, these are ignored.
+     */
+    skip?: number;
+    take?: number;
+    /**
+     * Controlled mode: if provided, the hook will not keep its own state.
+     */
+    state?: PaginationState;
+    onStateChange?: (next: PaginationState) => void;
+    /**
+     * When true, page index resets to 0 whenever `data` reference changes.
+     * Useful after filtering/sorting changes upstream.
+     */
+    resetOnDataChange?: boolean;
+}
+export interface UsePaginationResult<T> {
+    paginatedData: T[];
+    paginationState: PaginationState;
+    onPageChange: (pageEvent: PageChangeEvent) => void;
+    setPagination: (next: PaginationState) => void;
+    resetPage: () => void;
+    page: number;
+    totalCount: number;
+}
+export declare function usePagination<T>({ data, skip, take, state, onStateChange, resetOnDataChange, }: UsePaginationProps<T>): UsePaginationResult<T>;

package/dist/hooks/usePagination.js

@@ -0,0 +1,86 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function usePagination({
+  data = [],
+  skip = 0,
+  take = 10,
+  state,
+  onStateChange,
+  resetOnDataChange = false
+}) {
+  const isControlled = state != null;
+  const [uncontrolled, setUncontrolled] = useState(() => ({
+    skip: Math.max(0, skip),
+    take: Math.max(1, take)
+  }));
+  const didInitRef = useRef(false);
+  useEffect(() => {
+    if (isControlled) return;
+    if (!didInitRef.current) {
+      didInitRef.current = true;
+      return;
+    }
+    setUncontrolled((prev) => ({
+      skip: prev.skip,
+      take: Math.max(1, take)
+    }));
+  }, [isControlled, 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 = {
+        take: Math.max(1, next.take),
+        skip: Math.max(0, next.skip)
+      };
+      if (isControlled) onStateChange == null ? void 0 : onStateChange(normalized);
+      else 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;
+    resetPage();
+  }, [resetOnDataChange, data]);
+  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]);
+  return {
+    paginatedData,
+    paginationState: { skip: safeSkip, take: safeTake },
+    onPageChange,
+    setPagination,
+    resetPage,
+    page,
+    totalCount
+  };
+}
+
+export { usePagination };

package/dist/hooks/useSorting.cjs

@@ -0,0 +1,118 @@
+'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.d.ts

@@ -0,0 +1,49 @@
+export type SortDirection = 'asc' | 'desc' | null;
+export type SortState<T> = {
+    sortBy: keyof T | null;
+    sortDirection: SortDirection;
+};
+export type SortEvent<T> = Partial<SortState<T>>;
+export type ColumnComparators<T> = Partial<Record<keyof T, (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?: keyof T | 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 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,116 @@
+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,52 @@
+'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.d.ts

@@ -0,0 +1,40 @@
+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> {
+    data?: readonly T[];
+    pagination?: {
+        skip?: number;
+        take?: number;
+        state?: PaginationState;
+        onStateChange?: (next: PaginationState) => void;
+    };
+    sorting?: {
+        sortBy?: keyof T | null;
+        direction?: SortDirection;
+        state?: SortState<T>;
+        onStateChange?: (next: SortState<T>) => void;
+        columnComparators?: ColumnComparators<T>;
+        nulls?: 'first' | 'last';
+        allowUnsort?: boolean;
+    };
+    /**
+     * Resets to page 1 whenever sorting changes (typical UX).
+     */
+    resetPageOnSortChange?: boolean;
+}
+export interface UseTableDataResult<T> {
+    rows: T[];
+    totalCount: number;
+    pagination: {
+        state: PaginationState;
+        onPageChange: (e: PageChangeEvent) => void;
+        resetPage: () => void;
+    };
+    sorting: {
+        state: SortState<T>;
+        onSortChange: (next: Partial<SortState<T>>) => void;
+        clearSort: () => void;
+    };
+}
+export declare function useTableData<T extends Record<string, any>>({ data, pagination, sorting, resetPageOnSortChange, }: UseTableDataProps<T>): UseTableDataResult<T>;

package/dist/hooks/useTableData.js

@@ -0,0 +1,50 @@
+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 };