@dbcdk/react-components 0.0.95 → 0.0.97

package/dist/hooks/useDeviceSize.js

@@ -1,32 +0,0 @@
-'use client';
-import { useEffect, useState } from 'react';
-// Aligned with --bp-sm (640px), --bp-md (768px), --bp-lg (1024px) from base.css
-const BREAKPOINTS = {
-    tablet: 640,
-    desktop: 1024,
-};
-function getDeviceSize(width) {
-    if (width < BREAKPOINTS.tablet)
-        return 'mobile';
-    if (width < BREAKPOINTS.desktop)
-        return 'tablet';
-    return 'desktop';
-}
-export function useDeviceSize() {
-    const [deviceSize, setDeviceSize] = useState(() => {
-        if (typeof window === 'undefined')
-            return 'desktop';
-        return getDeviceSize(window.innerWidth);
-    });
-    useEffect(() => {
-        const mediaQueries = [
-            window.matchMedia(`(max-width: ${BREAKPOINTS.tablet - 1}px)`),
-            window.matchMedia(`(min-width: ${BREAKPOINTS.tablet}px) and (max-width: ${BREAKPOINTS.desktop - 1}px)`),
-            window.matchMedia(`(min-width: ${BREAKPOINTS.desktop}px)`),
-        ];
-        const update = () => setDeviceSize(getDeviceSize(window.innerWidth));
-        mediaQueries.forEach(mq => mq.addEventListener('change', update));
-        return () => mediaQueries.forEach(mq => mq.removeEventListener('change', update));
-    }, []);
-    return deviceSize;
-}

package/dist/hooks/useListNavigation.js

@@ -1,234 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-export function useListNavigation({ options, getLabel, isOpen, onOpenChange, searchInputRef, searchable = false, focusActiveOptionOnOpen = true, typeaheadTimeoutMs = 500, getInitialActiveIndex, }) {
-    const optionRefs = useRef([]);
-    const typeaheadRef = useRef('');
-    const typeaheadTimeoutRef = useRef(null);
-    const normalizedLabels = useMemo(() => options.map(option => getLabel(option).trim().toLocaleLowerCase()), [options, getLabel]);
-    const getDefaultInitialIndex = useCallback((items) => {
-        if (items.length === 0)
-            return -1;
-        if (getInitialActiveIndex) {
-            const nextIndex = getInitialActiveIndex(items);
-            if (nextIndex < 0)
-                return -1;
-            return Math.min(nextIndex, items.length - 1);
-        }
-        return searchable ? -1 : 0;
-    }, [getInitialActiveIndex, searchable]);
-    const [activeIndex, setActiveIndex] = useState(() => getDefaultInitialIndex(options));
-    const clearTypeahead = useCallback(() => {
-        typeaheadRef.current = '';
-        if (typeaheadTimeoutRef.current) {
-            clearTimeout(typeaheadTimeoutRef.current);
-            typeaheadTimeoutRef.current = null;
-        }
-    }, []);
-    const focusActiveOption = useCallback(() => {
-        var _a;
-        if (activeIndex < 0 || options.length === 0)
-            return;
-        (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [activeIndex, options.length]);
-    const resetActiveIndex = useCallback(() => {
-        setActiveIndex(getDefaultInitialIndex(options));
-    }, [getDefaultInitialIndex, options]);
-    useEffect(() => {
-        return () => {
-            if (typeaheadTimeoutRef.current)
-                clearTimeout(typeaheadTimeoutRef.current);
-        };
-    }, []);
-    useEffect(() => {
-        setActiveIndex(current => {
-            if (options.length === 0)
-                return -1;
-            if (current < 0)
-                return current;
-            return Math.min(current, options.length - 1);
-        });
-    }, [options]);
-    useEffect(() => {
-        optionRefs.current = optionRefs.current.slice(0, options.length);
-    }, [options.length]);
-    useEffect(() => {
-        if (!isOpen || !focusActiveOptionOnOpen)
-            return;
-        if (searchable && document.activeElement === (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current))
-            return;
-        focusActiveOption();
-    }, [activeIndex, focusActiveOption, focusActiveOptionOnOpen, isOpen, searchable, searchInputRef]);
-    const moveNext = useCallback(() => {
-        if (options.length === 0)
-            return;
-        setActiveIndex(index => {
-            if (index < 0)
-                return 0;
-            return Math.min(index + 1, options.length - 1);
-        });
-    }, [options.length]);
-    const movePrev = useCallback(() => {
-        if (options.length === 0)
-            return;
-        setActiveIndex(index => {
-            if (index < 0)
-                return options.length - 1;
-            return Math.max(index - 1, 0);
-        });
-    }, [options.length]);
-    const moveFirst = useCallback(() => {
-        if (options.length === 0)
-            return;
-        setActiveIndex(0);
-    }, [options.length]);
-    const moveLast = useCallback(() => {
-        if (options.length === 0)
-            return;
-        setActiveIndex(options.length - 1);
-    }, [options.length]);
-    const findTypeaheadMatch = useCallback((query, startIndex) => {
-        if (!query || options.length === 0)
-            return -1;
-        const normalizedQuery = query.trim().toLocaleLowerCase();
-        if (!normalizedQuery)
-            return -1;
-        const safeStartIndex = startIndex < 0 ? -1 : startIndex;
-        for (let step = 1; step <= options.length; step += 1) {
-            const index = (safeStartIndex + step + options.length) % options.length;
-            const label = normalizedLabels[index];
-            if (label === null || label === void 0 ? void 0 : label.startsWith(normalizedQuery))
-                return index;
-        }
-        return -1;
-    }, [normalizedLabels, options.length]);
-    const handleTypeahead = useCallback((key) => {
-        const nextBuffer = `${typeaheadRef.current}${key.toLocaleLowerCase()}`;
-        const repeatedChar = new Set(nextBuffer).size === 1;
-        let nextIndex = findTypeaheadMatch(nextBuffer, activeIndex);
-        let appliedBuffer = nextBuffer;
-        if (nextIndex < 0 && repeatedChar) {
-            appliedBuffer = key.toLocaleLowerCase();
-            nextIndex = findTypeaheadMatch(appliedBuffer, activeIndex);
-        }
-        if (typeaheadTimeoutRef.current)
-            clearTimeout(typeaheadTimeoutRef.current);
-        typeaheadRef.current = appliedBuffer;
-        typeaheadTimeoutRef.current = setTimeout(() => {
-            typeaheadRef.current = '';
-            typeaheadTimeoutRef.current = null;
-        }, typeaheadTimeoutMs);
-        if (nextIndex < 0)
-            return;
-        setActiveIndex(nextIndex);
-        if (!isOpen)
-            onOpenChange(true);
-    }, [activeIndex, findTypeaheadMatch, isOpen, onOpenChange, typeaheadTimeoutMs]);
-    const handleKeyDown = useCallback((e) => {
-        var _a;
-        const isSearchInputTarget = searchable && e.target === (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current);
-        if (isSearchInputTarget) {
-            switch (e.key) {
-                case 'ArrowDown':
-                    e.preventDefault();
-                    if (!isOpen) {
-                        onOpenChange(true);
-                        return;
-                    }
-                    moveNext();
-                    return;
-                case 'ArrowUp':
-                    e.preventDefault();
-                    if (!isOpen) {
-                        onOpenChange(true);
-                        return;
-                    }
-                    movePrev();
-                    return;
-                case 'Home':
-                    if (!isOpen)
-                        return;
-                    e.preventDefault();
-                    moveFirst();
-                    return;
-                case 'End':
-                    if (!isOpen)
-                        return;
-                    e.preventDefault();
-                    moveLast();
-                    return;
-                case 'Escape':
-                    e.preventDefault();
-                    onOpenChange(false);
-                    return;
-            }
-            return;
-        }
-        if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey && !/\s/.test(e.key)) {
-            e.preventDefault();
-            handleTypeahead(e.key);
-            return;
-        }
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                if (!isOpen) {
-                    onOpenChange(true);
-                    return;
-                }
-                moveNext();
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                if (!isOpen) {
-                    onOpenChange(true);
-                    return;
-                }
-                if (searchable &&
-                    activeIndex === 0 &&
-                    optionRefs.current[activeIndex] === document.activeElement) {
-                    (_a = searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    setActiveIndex(-1);
-                    return;
-                }
-                movePrev();
-                break;
-            case 'Home':
-                if (!isOpen)
-                    return;
-                e.preventDefault();
-                moveFirst();
-                break;
-            case 'End':
-                if (!isOpen)
-                    return;
-                e.preventDefault();
-                moveLast();
-                break;
-            case 'Escape':
-                if (!isOpen)
-                    return;
-                e.preventDefault();
-                onOpenChange(false);
-                break;
-        }
-    }, [
-        activeIndex,
-        handleTypeahead,
-        isOpen,
-        moveFirst,
-        moveLast,
-        moveNext,
-        movePrev,
-        onOpenChange,
-        searchInputRef,
-        searchable,
-    ]);
-    return {
-        activeIndex,
-        setActiveIndex,
-        optionRefs,
-        resetActiveIndex,
-        clearTypeahead,
-        handleKeyDown,
-        focusActiveOption,
-    };
-}

package/dist/hooks/usePagination.js

@@ -1,140 +0,0 @@
-'use client';
-import { useCallback, useEffect, useMemo, useRef, useState } 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;
-    }
-}
-export 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 !== void 0 ? _a : initial;
-    });
-    // Hydrate from localStorage when key changes.
-    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 !== void 0 ? stored : fallback);
-        setHydrated(true);
-    }, [isControlled, storageKey, skip, take]);
-    // Keep initial props in sync ONLY for uncontrolled if props change.
-    // Do not overwrite localStorage-hydrated state when storageKey is provided.
-    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 || onStateChange === void 0 ? 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]);
-    // Optional: reset page when data reference changes (after sort/filter).
-    useEffect(() => {
-        if (!resetOnDataChange)
-            return;
-        if (!hydrated)
-            return;
-        resetPage();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [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]);
-    // If uncontrolled and data shrinks such that skip becomes invalid, clamp it once.
-    useEffect(() => {
-        if (isControlled)
-            return;
-        if (safeSkip !== paginationState.skip) {
-            setUncontrolled(prev => ({ ...prev, skip: safeSkip }));
-        }
-    }, [isControlled, safeSkip, paginationState.skip]);
-    // Persist uncontrolled state to localStorage when enabled.
-    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,
-    };
-}

package/dist/hooks/useSorting.js

@@ -1,118 +0,0 @@
-'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;
-    }
-    // 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);
-}
-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,
-    };
-}

package/dist/hooks/useTableData.js

@@ -1,45 +0,0 @@
-'use client';
-import { useEffect, useMemo } from 'react';
-import { usePagination } from './usePagination';
-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,
-        },
-    };
-}