@uniformdev/search 0.0.4 → 0.0.6

package/dist/react.js

@@ -26,6 +26,7 @@ __export(react_exports, {
   SearchItemUrlResolverProvider: () => SearchItemUrlResolverProvider,
   SearchProvider: () => SearchProvider,
   createDefaultUrlResolver: () => createDefaultUrlResolver,
+  useAutocomplete: () => useAutocomplete,
   usePagination: () => usePagination,
   useSearch: () => useSearch,
   useSearchPagination: () => useSearchPagination,
@@ -190,22 +191,26 @@ var SearchProvider = ({
     }, {}),
     [filterBy, urlParams]
   );
+  const buildFilters = (0, import_react.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 = (0, import_react.useMemo)(() => buildFilters(), [buildFilters]);
   (0, import_react.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;
@@ -253,6 +258,7 @@ var SearchProvider = ({
     doFetch().catch((error) => console.error("Search fetch error:", error)).finally(() => setIsLoading(false));
   }, [
     baseFilterString,
+    buildFilters,
     defaultOrderByQuery,
     facetBy,
     filterBy,
@@ -393,6 +399,11 @@ var SearchProvider = ({
       setOrderBy,
       registerOrderBy,
       unregisterOrderBy,
+      performSearch,
+      queryBy,
+      locale,
+      baseFilterString,
+      currentFilters,
       filterOptions: filterBy,
       setFilterOptions,
       registerFilterOption,
@@ -403,11 +414,16 @@ var SearchProvider = ({
       formatResultsSummary
     }),
     [
+      baseFilterString,
       clearFilters,
+      currentFilters,
       defaultOrderByQuery,
       entries,
       facets,
       filterBy,
+      locale,
+      performSearch,
+      queryBy,
       setFilterOptions,
       registerFilterOption,
       unregisterFilterOption,
@@ -444,14 +460,328 @@ function useSearch() {
   return context;
 }
 
-// src/react/usePagination.ts
+// src/react/useAutocomplete.ts
 var import_react3 = require("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 = (0, import_react3.useId)();
+  const listboxId = `${baseId}-listbox`;
+  const labelId = `${baseId}-label`;
+  const inputId = `${baseId}-input`;
+  const optionId = (0, import_react3.useCallback)((index) => `${baseId}-option-${index}`, [baseId]);
+  const [query, setQueryState] = (0, import_react3.useState)("");
+  const [suggestions, setSuggestions] = (0, import_react3.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react3.useState)(NO_ACTIVE_INDEX);
+  const debounceRef = (0, import_react3.useRef)(null);
+  const requestIdRef = (0, import_react3.useRef)(0);
+  const queryByString = (0, import_react3.useMemo)(() => (queryBy == null ? void 0 : queryBy.length) ? queryBy.join(",") : void 0, [queryBy]);
+  const fetchConfigRef = (0, import_react3.useRef)({
+    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 = (0, import_react3.useCallback)((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 = (0, import_react3.useCallback)(
+    (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]
+  );
+  (0, import_react3.useEffect)(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+  const open = (0, import_react3.useCallback)(() => {
+    if (suggestions.length > 0) setIsOpen(true);
+  }, [suggestions.length]);
+  const close = (0, import_react3.useCallback)(() => {
+    setIsOpen(false);
+    setActiveIndex(NO_ACTIVE_INDEX);
+  }, []);
+  const clear = (0, import_react3.useCallback)(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    requestIdRef.current++;
+    setQueryState("");
+    setSuggestions([]);
+    setActiveIndex(NO_ACTIVE_INDEX);
+    setIsOpen(false);
+    setIsLoading(false);
+  }, []);
+  const selectItem = (0, import_react3.useCallback)(
+    (item) => {
+      close();
+      onSelect == null ? void 0 : onSelect(item);
+    },
+    [close, onSelect]
+  );
+  const activeItem = activeIndex >= 0 ? (_a = suggestions[activeIndex]) != null ? _a : null : null;
+  const handleKeyDown = (0, import_react3.useCallback)(
+    (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 = (0, import_react3.useCallback)(() => ({ id: labelId, htmlFor: inputId }), [labelId, inputId]);
+  const getInputProps = (0, import_react3.useCallback)(
+    (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 = (0, import_react3.useCallback)(
+    (userProps = {}) => {
+      var _a2;
+      return {
+        ...userProps,
+        id: listboxId,
+        role: "listbox",
+        "aria-labelledby": (_a2 = userProps["aria-labelledby"]) != null ? _a2 : labelId
+      };
+    },
+    [labelId, listboxId]
+  );
+  const getItemProps = (0, import_react3.useCallback)(
+    ({
+      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
+var import_react4 = require("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 }) => (0, import_react3.useMemo)(() => {
+var usePagination = ({ totalCount, perPage, siblingCount = 1, currentPage }) => (0, import_react4.useMemo)(() => {
   const totalPageCount = Math.ceil(totalCount / perPage);
   const totalPageNumbers = siblingCount + 5;
   if (totalPageNumbers >= totalPageCount) {
@@ -480,7 +810,7 @@ var usePagination = ({ totalCount, perPage, siblingCount = 1, currentPage }) =>
 }, [totalCount, perPage, siblingCount, currentPage]);
 
 // src/react/useSearchPagination.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useSearchPagination(siblingCount) {
   const { page, pageSize, results, setPage, isLoading } = useSearch();
   const pages = usePagination({
@@ -489,23 +819,23 @@ function useSearchPagination(siblingCount) {
     perPage: pageSize,
     siblingCount
   }) || [];
-  const lastPage = (0, import_react4.useMemo)(
+  const lastPage = (0, import_react5.useMemo)(
     () => Number(pages[pages.length - 1]) || 0,
     [pages]
   );
-  const goToPage = (0, import_react4.useCallback)(
+  const goToPage = (0, import_react5.useCallback)(
     (p) => {
       if (!isLoading) setPage(p);
     },
     [isLoading, setPage]
   );
-  const goToPrev = (0, import_react4.useCallback)(
+  const goToPrev = (0, import_react5.useCallback)(
     () => {
       if (page > 0 && !isLoading) setPage(page - 1);
     },
     [page, isLoading, setPage]
   );
-  const goToNext = (0, import_react4.useCallback)(
+  const goToNext = (0, import_react5.useCallback)(
     () => {
       if (page < lastPage && !isLoading) setPage(page + 1);
     },
@@ -524,11 +854,11 @@ function useSearchPagination(siblingCount) {
 }
 
 // src/react/SearchItemUrlResolver.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var NOOP_RESOLVER = () => void 0;
-var UserUrlResolverContext = (0, import_react5.createContext)(null);
-var DefaultUrlResolverContext = (0, import_react5.createContext)(NOOP_RESOLVER);
+var UserUrlResolverContext = (0, import_react6.createContext)(null);
+var DefaultUrlResolverContext = (0, import_react6.createContext)(NOOP_RESOLVER);
 var SearchItemUrlResolverProvider = ({
   resolver,
   children
@@ -538,8 +868,8 @@ var SearchItemDefaultUrlResolverProvider = ({
   children
 }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultUrlResolverContext.Provider, { value: resolver, children });
 function useUrlResolver() {
-  const user = (0, import_react5.useContext)(UserUrlResolverContext);
-  const def = (0, import_react5.useContext)(DefaultUrlResolverContext);
+  const user = (0, import_react6.useContext)(UserUrlResolverContext);
+  const def = (0, import_react6.useContext)(DefaultUrlResolverContext);
   return user != null ? user : def;
 }
 function resolveField(obj, path) {
@@ -587,6 +917,7 @@ function createDefaultUrlResolver(configs, options = {}) {
   SearchItemUrlResolverProvider,
   SearchProvider,
   createDefaultUrlResolver,
+  useAutocomplete,
   usePagination,
   useSearch,
   useSearchPagination,