@dbcdk/react-components 0.0.103 → 0.0.105

package/dist/hooks/useListNavigation.cjs

@@ -0,0 +1,237 @@
+'use strict';
+
+var react = require('react');
+
+function useListNavigation({
+  options,
+  getLabel,
+  isOpen,
+  onOpenChange,
+  searchInputRef,
+  searchable = false,
+  focusActiveOptionOnOpen = true,
+  typeaheadTimeoutMs = 500,
+  getInitialActiveIndex
+}) {
+  const optionRefs = react.useRef([]);
+  const typeaheadRef = react.useRef("");
+  const typeaheadTimeoutRef = react.useRef(null);
+  const normalizedLabels = react.useMemo(
+    () => options.map((option) => getLabel(option).trim().toLocaleLowerCase()),
+    [options, getLabel]
+  );
+  const getDefaultInitialIndex = react.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] = react.useState(() => getDefaultInitialIndex(options));
+  const clearTypeahead = react.useCallback(() => {
+    typeaheadRef.current = "";
+    if (typeaheadTimeoutRef.current) {
+      clearTimeout(typeaheadTimeoutRef.current);
+      typeaheadTimeoutRef.current = null;
+    }
+  }, []);
+  const focusActiveOption = react.useCallback(() => {
+    var _a;
+    if (activeIndex < 0 || options.length === 0) return;
+    (_a = optionRefs.current[activeIndex]) == null ? void 0 : _a.focus();
+  }, [activeIndex, options.length]);
+  const resetActiveIndex = react.useCallback(() => {
+    setActiveIndex(getDefaultInitialIndex(options));
+  }, [getDefaultInitialIndex, options]);
+  react.useEffect(() => {
+    return () => {
+      if (typeaheadTimeoutRef.current) clearTimeout(typeaheadTimeoutRef.current);
+    };
+  }, []);
+  react.useEffect(() => {
+    setActiveIndex((current) => {
+      if (options.length === 0) return -1;
+      if (current < 0) return current;
+      return Math.min(current, options.length - 1);
+    });
+  }, [options]);
+  react.useEffect(() => {
+    optionRefs.current = optionRefs.current.slice(0, options.length);
+  }, [options.length]);
+  react.useEffect(() => {
+    if (!isOpen || !focusActiveOptionOnOpen) return;
+    if (searchable && document.activeElement === (searchInputRef == null ? void 0 : searchInputRef.current)) return;
+    focusActiveOption();
+  }, [activeIndex, focusActiveOption, focusActiveOptionOnOpen, isOpen, searchable, searchInputRef]);
+  const moveNext = react.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 = react.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 = react.useCallback(() => {
+    if (options.length === 0) return;
+    setActiveIndex(0);
+  }, [options.length]);
+  const moveLast = react.useCallback(() => {
+    if (options.length === 0) return;
+    setActiveIndex(options.length - 1);
+  }, [options.length]);
+  const findTypeaheadMatch = react.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 ? void 0 : label.startsWith(normalizedQuery)) return index;
+      }
+      return -1;
+    },
+    [normalizedLabels, options.length]
+  );
+  const handleTypeahead = react.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 = react.useCallback(
+    (e) => {
+      var _a;
+      const isSearchInputTarget = searchable && e.target === (searchInputRef == null ? 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 ? void 0 : searchInputRef.current) == null ? 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
+  };
+}
+
+exports.useListNavigation = useListNavigation;

package/dist/hooks/useListNavigation.js

@@ -0,0 +1,235 @@
+import { useRef, useMemo, useCallback, useState, useEffect } from 'react';
+
+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 ? 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 ? 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 ? 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 ? 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 ? void 0 : searchInputRef.current) == null ? 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
+  };
+}
+
+export { useListNavigation };

package/dist/hooks/usePagination.cjs

@@ -0,0 +1,144 @@
+'use client';
+'use strict';
+
+var react = require('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] = react.useState(() => !storageKey || isControlled);
+  const [uncontrolled, setUncontrolled] = react.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;
+  });
+  react.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 = react.useRef(false);
+  react.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 = react.useCallback(
+    (next) => {
+      const normalized = normalizePaginationState(next);
+      if (isControlled) {
+        onStateChange == null ? void 0 : onStateChange(normalized);
+        return;
+      }
+      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;
+    if (!hydrated) return;
+    resetPage();
+  }, [resetOnDataChange, data, hydrated]);
+  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]);
+  react.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
+  };
+}
+
+exports.usePagination = usePagination;