@uniformdev/search 0.0.4 → 0.0.6

package/dist/react.mjs

@@ -104,22 +104,26 @@ var SearchProvider = ({
     }, {}),
     [filterBy, urlParams]
   );
+  const buildFilters = useCallback(
+    (excludeField) => Object.entries(selectedFilters).reduce((acc, [fieldKey, values]) => {
+      var _a2;
+      if (excludeField && fieldKey === excludeField) return acc;
+      if (!values || values.length === 0) return acc;
+      const filterType = (_a2 = filterBy.find((f) => f.fieldKey === fieldKey)) == null ? void 0 : _a2.type;
+      if (filterType === "range") {
+        const [min, max] = values;
+        return { ...acc, [`${fieldKey}[gte]`]: min, [`${fieldKey}[lte]`]: max };
+      }
+      return { ...acc, [`${fieldKey}[in]`]: values };
+    }, {}),
+    [selectedFilters, filterBy]
+  );
+  const currentFilters = useMemo(() => buildFilters(), [buildFilters]);
   useEffect(() => {
     const requestId = ++searchRequestIdRef.current;
     const doFetch = async () => {
       var _a2, _b2;
       const currentOrderByQuery = (urlParams == null ? void 0 : urlParams[UNIFORM_SEARCH_ORDER_BY_KEY]) || defaultOrderByQuery;
-      const buildFilters = (excludeField) => Object.entries(selectedFilters).reduce((acc, [fieldKey, values]) => {
-        var _a3;
-        if (excludeField && fieldKey === excludeField) return acc;
-        if (!values || values.length === 0) return acc;
-        const filterType = (_a3 = filterBy.find((f) => f.fieldKey === fieldKey)) == null ? void 0 : _a3.type;
-        if (filterType === "range") {
-          const [min, max] = values;
-          return { ...acc, [`${fieldKey}[gte]`]: min, [`${fieldKey}[lte]`]: max };
-        }
-        return { ...acc, [`${fieldKey}[in]`]: values };
-      }, {});
       const selectedFacetFields = Object.keys(selectedFilters).filter((k) => {
         var _a3;
         return ((_a3 = selectedFilters[k]) == null ? void 0 : _a3.length) > 0;
@@ -167,6 +171,7 @@ var SearchProvider = ({
     doFetch().catch((error) => console.error("Search fetch error:", error)).finally(() => setIsLoading(false));
   }, [
     baseFilterString,
+    buildFilters,
     defaultOrderByQuery,
     facetBy,
     filterBy,
@@ -307,6 +312,11 @@ var SearchProvider = ({
       setOrderBy,
       registerOrderBy,
       unregisterOrderBy,
+      performSearch,
+      queryBy,
+      locale,
+      baseFilterString,
+      currentFilters,
       filterOptions: filterBy,
       setFilterOptions,
       registerFilterOption,
@@ -317,11 +327,16 @@ var SearchProvider = ({
       formatResultsSummary
     }),
     [
+      baseFilterString,
       clearFilters,
+      currentFilters,
       defaultOrderByQuery,
       entries,
       facets,
       filterBy,
+      locale,
+      performSearch,
+      queryBy,
       setFilterOptions,
       registerFilterOption,
       unregisterFilterOption,
@@ -358,14 +373,335 @@ function useSearch() {
   return context;
 }
 
+// src/react/useAutocomplete.ts
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useId,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+var NO_ACTIVE_INDEX = -1;
+var DEFAULT_PER_PAGE = 6;
+var DEFAULT_MIN_QUERY_LENGTH = 1;
+var DEFAULT_DEBOUNCE_MS = 150;
+function useAutocomplete(options) {
+  var _a;
+  const {
+    performSearch,
+    queryBy,
+    baseFilterBy,
+    filters,
+    locale,
+    perPage = DEFAULT_PER_PAGE,
+    minQueryLength = DEFAULT_MIN_QUERY_LENGTH,
+    debounceMs = DEFAULT_DEBOUNCE_MS,
+    openOnFocus = false,
+    onSelect,
+    onSubmit,
+    maxTypos,
+    minLengthFor1Typo,
+    minLengthFor2Typos,
+    typoFallbackThreshold,
+    prioritizeExactMatch
+  } = options;
+  const baseId = useId();
+  const listboxId = `${baseId}-listbox`;
+  const labelId = `${baseId}-label`;
+  const inputId = `${baseId}-input`;
+  const optionId = useCallback2((index) => `${baseId}-option-${index}`, [baseId]);
+  const [query, setQueryState] = useState2("");
+  const [suggestions, setSuggestions] = useState2([]);
+  const [isLoading, setIsLoading] = useState2(false);
+  const [isOpen, setIsOpen] = useState2(false);
+  const [activeIndex, setActiveIndex] = useState2(NO_ACTIVE_INDEX);
+  const debounceRef = useRef2(null);
+  const requestIdRef = useRef2(0);
+  const queryByString = useMemo2(() => (queryBy == null ? void 0 : queryBy.length) ? queryBy.join(",") : void 0, [queryBy]);
+  const fetchConfigRef = useRef2({
+    performSearch,
+    queryByString,
+    baseFilterBy,
+    filters,
+    locale,
+    perPage,
+    maxTypos,
+    minLengthFor1Typo,
+    minLengthFor2Typos,
+    typoFallbackThreshold,
+    prioritizeExactMatch
+  });
+  fetchConfigRef.current = {
+    performSearch,
+    queryByString,
+    baseFilterBy,
+    filters,
+    locale,
+    perPage,
+    maxTypos,
+    minLengthFor1Typo,
+    minLengthFor2Typos,
+    typoFallbackThreshold,
+    prioritizeExactMatch
+  };
+  const runSearch = useCallback2((value) => {
+    const requestId = ++requestIdRef.current;
+    const cfg = fetchConfigRef.current;
+    setIsLoading(true);
+    cfg.performSearch({
+      page: 0,
+      perPage: cfg.perPage,
+      queryBy: cfg.queryByString,
+      baseFilterBy: cfg.baseFilterBy,
+      filters: cfg.filters,
+      search: value,
+      locale: cfg.locale,
+      maxTypos: cfg.maxTypos,
+      minLengthFor1Typo: cfg.minLengthFor1Typo,
+      minLengthFor2Typos: cfg.minLengthFor2Typos,
+      typoFallbackThreshold: cfg.typoFallbackThreshold,
+      prioritizeExactMatch: cfg.prioritizeExactMatch
+    }).then((result) => {
+      var _a2, _b;
+      if (requestId !== requestIdRef.current) return;
+      const items = (_b = (_a2 = result == null ? void 0 : result.data) == null ? void 0 : _a2.items) != null ? _b : [];
+      setSuggestions(items);
+      setActiveIndex(NO_ACTIVE_INDEX);
+      setIsOpen(items.length > 0);
+    }).catch((error) => {
+      if (requestId !== requestIdRef.current) return;
+      console.error("Autocomplete fetch error:", error);
+      setSuggestions([]);
+    }).finally(() => {
+      if (requestId !== requestIdRef.current) return;
+      setIsLoading(false);
+    });
+  }, []);
+  const setQuery = useCallback2(
+    (value) => {
+      setQueryState(value);
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      if (value.trim().length < minQueryLength) {
+        requestIdRef.current++;
+        setSuggestions([]);
+        setActiveIndex(NO_ACTIVE_INDEX);
+        setIsOpen(false);
+        setIsLoading(false);
+        return;
+      }
+      debounceRef.current = setTimeout(() => runSearch(value), debounceMs);
+    },
+    [debounceMs, minQueryLength, runSearch]
+  );
+  useEffect2(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+  const open = useCallback2(() => {
+    if (suggestions.length > 0) setIsOpen(true);
+  }, [suggestions.length]);
+  const close = useCallback2(() => {
+    setIsOpen(false);
+    setActiveIndex(NO_ACTIVE_INDEX);
+  }, []);
+  const clear = useCallback2(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    requestIdRef.current++;
+    setQueryState("");
+    setSuggestions([]);
+    setActiveIndex(NO_ACTIVE_INDEX);
+    setIsOpen(false);
+    setIsLoading(false);
+  }, []);
+  const selectItem = useCallback2(
+    (item) => {
+      close();
+      onSelect == null ? void 0 : onSelect(item);
+    },
+    [close, onSelect]
+  );
+  const activeItem = activeIndex >= 0 ? (_a = suggestions[activeIndex]) != null ? _a : null : null;
+  const handleKeyDown = useCallback2(
+    (event) => {
+      const count = suggestions.length;
+      switch (event.key) {
+        case "ArrowDown": {
+          event.preventDefault();
+          if (!isOpen) {
+            open();
+            return;
+          }
+          if (count === 0) return;
+          setActiveIndex((prev) => prev + 1 > count - 1 ? NO_ACTIVE_INDEX : prev + 1);
+          break;
+        }
+        case "ArrowUp": {
+          event.preventDefault();
+          if (!isOpen) {
+            open();
+            return;
+          }
+          if (count === 0) return;
+          setActiveIndex((prev) => prev <= NO_ACTIVE_INDEX ? count - 1 : prev - 1);
+          break;
+        }
+        case "Home": {
+          if (!isOpen || count === 0) return;
+          event.preventDefault();
+          setActiveIndex(0);
+          break;
+        }
+        case "End": {
+          if (!isOpen || count === 0) return;
+          event.preventDefault();
+          setActiveIndex(count - 1);
+          break;
+        }
+        case "Enter": {
+          if (isOpen && activeIndex >= 0 && suggestions[activeIndex]) {
+            event.preventDefault();
+            selectItem(suggestions[activeIndex]);
+          } else {
+            close();
+            onSubmit == null ? void 0 : onSubmit(query);
+          }
+          break;
+        }
+        case "Escape": {
+          if (isOpen) {
+            event.preventDefault();
+            close();
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    },
+    [activeIndex, close, isOpen, onSubmit, open, query, selectItem, suggestions]
+  );
+  const getLabelProps = useCallback2(() => ({ id: labelId, htmlFor: inputId }), [labelId, inputId]);
+  const getInputProps = useCallback2(
+    (userProps = {}) => {
+      var _a2, _b;
+      return {
+        ...userProps,
+        id: (_a2 = userProps.id) != null ? _a2 : inputId,
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": isOpen,
+        "aria-controls": listboxId,
+        "aria-activedescendant": activeIndex >= 0 ? optionId(activeIndex) : void 0,
+        "aria-labelledby": (_b = userProps["aria-labelledby"]) != null ? _b : labelId,
+        autoComplete: "off",
+        value: query,
+        onChange: (event) => {
+          var _a3;
+          setQuery(event.target.value);
+          (_a3 = userProps.onChange) == null ? void 0 : _a3.call(userProps, event);
+        },
+        onKeyDown: (event) => {
+          var _a3;
+          handleKeyDown(event);
+          (_a3 = userProps.onKeyDown) == null ? void 0 : _a3.call(userProps, event);
+        },
+        onFocus: (event) => {
+          var _a3;
+          if (openOnFocus) open();
+          (_a3 = userProps.onFocus) == null ? void 0 : _a3.call(userProps, event);
+        },
+        onBlur: (event) => {
+          var _a3;
+          close();
+          (_a3 = userProps.onBlur) == null ? void 0 : _a3.call(userProps, event);
+        }
+      };
+    },
+    [
+      activeIndex,
+      close,
+      handleKeyDown,
+      inputId,
+      isOpen,
+      labelId,
+      listboxId,
+      open,
+      openOnFocus,
+      optionId,
+      query,
+      setQuery
+    ]
+  );
+  const getListboxProps = useCallback2(
+    (userProps = {}) => {
+      var _a2;
+      return {
+        ...userProps,
+        id: listboxId,
+        role: "listbox",
+        "aria-labelledby": (_a2 = userProps["aria-labelledby"]) != null ? _a2 : labelId
+      };
+    },
+    [labelId, listboxId]
+  );
+  const getItemProps = useCallback2(
+    ({
+      item,
+      index,
+      userProps = {}
+    }) => ({
+      ...userProps,
+      id: optionId(index),
+      role: "option",
+      "aria-selected": index === activeIndex,
+      onMouseMove: (event) => {
+        var _a2;
+        if (index !== activeIndex) setActiveIndex(index);
+        (_a2 = userProps.onMouseMove) == null ? void 0 : _a2.call(userProps, event);
+      },
+      // Prevent the input from blurring (which would close the panel) before the click lands.
+      onMouseDown: (event) => {
+        var _a2;
+        event.preventDefault();
+        (_a2 = userProps.onMouseDown) == null ? void 0 : _a2.call(userProps, event);
+      },
+      onClick: (event) => {
+        var _a2;
+        selectItem(item);
+        (_a2 = userProps.onClick) == null ? void 0 : _a2.call(userProps, event);
+      }
+    }),
+    [activeIndex, optionId, selectItem]
+  );
+  return {
+    query,
+    setQuery,
+    suggestions,
+    isLoading,
+    isOpen,
+    activeIndex,
+    activeItem,
+    open,
+    close,
+    clear,
+    selectItem,
+    getLabelProps,
+    getInputProps,
+    getListboxProps,
+    getItemProps
+  };
+}
+
 // src/react/usePagination.ts
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 var DOTS = "...";
 var range = (start, end) => {
   const length = end - start + 1;
   return Array.from({ length }, (_, idx) => idx + start);
 };
-var usePagination = ({ totalCount, perPage, siblingCount = 1, currentPage }) => useMemo2(() => {
+var usePagination = ({ totalCount, perPage, siblingCount = 1, currentPage }) => useMemo3(() => {
   const totalPageCount = Math.ceil(totalCount / perPage);
   const totalPageNumbers = siblingCount + 5;
   if (totalPageNumbers >= totalPageCount) {
@@ -394,7 +730,7 @@ var usePagination = ({ totalCount, perPage, siblingCount = 1, currentPage }) =>
 }, [totalCount, perPage, siblingCount, currentPage]);
 
 // src/react/useSearchPagination.ts
-import { useMemo as useMemo3, useCallback as useCallback2 } from "react";
+import { useMemo as useMemo4, useCallback as useCallback3 } from "react";
 function useSearchPagination(siblingCount) {
   const { page, pageSize, results, setPage, isLoading } = useSearch();
   const pages = usePagination({
@@ -403,23 +739,23 @@ function useSearchPagination(siblingCount) {
     perPage: pageSize,
     siblingCount
   }) || [];
-  const lastPage = useMemo3(
+  const lastPage = useMemo4(
     () => Number(pages[pages.length - 1]) || 0,
     [pages]
   );
-  const goToPage = useCallback2(
+  const goToPage = useCallback3(
     (p) => {
       if (!isLoading) setPage(p);
     },
     [isLoading, setPage]
   );
-  const goToPrev = useCallback2(
+  const goToPrev = useCallback3(
     () => {
       if (page > 0 && !isLoading) setPage(page - 1);
     },
     [page, isLoading, setPage]
   );
-  const goToNext = useCallback2(
+  const goToNext = useCallback3(
     () => {
       if (page < lastPage && !isLoading) setPage(page + 1);
     },
@@ -500,6 +836,7 @@ export {
   SearchItemUrlResolverProvider,
   SearchProvider,
   createDefaultUrlResolver,
+  useAutocomplete,
   usePagination,
   useSearch,
   useSearchPagination,