@tsproxy/react 0.0.2 → 0.0.3

package/dist/index.d.ts

@@ -174,4 +174,27 @@ interface HitsSkeletonProps {
 }
 declare function HitsSkeleton({ count, overrides }: HitsSkeletonProps): react_jsx_runtime.JSX.Element;
 
-export { Hits, type HitsElements, type HitsProps, HitsSkeleton, type HitsSkeletonElements, type HitsSkeletonProps, LocaleContext, type LocaleOption, LocaleProvider, LocaleSelector, type LocaleSelectorElements, type LocaleSelectorProps, NoResults, type NoResultsElements, type NoResultsProps, type Override, type Overrides, Pagination, type PaginationElements, type PaginationProps, RefinementList, type RefinementListElements, type RefinementListProps, SearchBox, type SearchBoxElements, type SearchBoxProps, SearchProvider, SortBy, type SortByElements, type SortByItem, type SortByProps, Stats, type StatsElements, type StatsProps, getOverride, useLocale };
+type AutocompleteElements = {
+    Root: "div";
+    Input: "input";
+    List: "ul";
+    Item: "li";
+    Highlight: "span";
+};
+interface Suggestion {
+    objectID: string;
+    query: string;
+    highlight: string;
+}
+interface AutocompleteProps {
+    serverUrl: string;
+    collection?: string;
+    limit?: number;
+    placeholder?: string;
+    debounce?: number;
+    onSelect?: (suggestion: Suggestion) => void;
+    overrides?: Overrides<AutocompleteElements>;
+}
+declare function Autocomplete({ serverUrl, collection, limit, placeholder, debounce, onSelect, overrides, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
+
+export { Autocomplete, type AutocompleteElements, type AutocompleteProps, Hits, type HitsElements, type HitsProps, HitsSkeleton, type HitsSkeletonElements, type HitsSkeletonProps, LocaleContext, type LocaleOption, LocaleProvider, LocaleSelector, type LocaleSelectorElements, type LocaleSelectorProps, NoResults, type NoResultsElements, type NoResultsProps, type Override, type Overrides, Pagination, type PaginationElements, type PaginationProps, RefinementList, type RefinementListElements, type RefinementListProps, SearchBox, type SearchBoxElements, type SearchBoxProps, SearchProvider, SortBy, type SortByElements, type SortByItem, type SortByProps, Stats, type StatsElements, type StatsProps, type Suggestion, getOverride, useLocale };

package/dist/index.js

@@ -376,7 +376,151 @@ function HitsSkeleton({ count = 8, overrides }) {
     ] })
   ] }) }, i)) }) });
 }
+
+// src/components/Autocomplete.tsx
+import { useState as useState3, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+function Autocomplete({
+  serverUrl,
+  collection = "products",
+  limit = 5,
+  placeholder = "Search...",
+  debounce = 200,
+  onSelect,
+  overrides
+}) {
+  const [query, setQuery] = useState3("");
+  const [suggestions, setSuggestions] = useState3([]);
+  const [open, setOpen] = useState3(false);
+  const [activeIndex, setActiveIndex] = useState3(-1);
+  const timerRef = useRef2(void 0);
+  const inputRef = useRef2(null);
+  const root = getOverride("div", overrides?.Root);
+  const input = getOverride("input", overrides?.Input);
+  const list = getOverride("ul", overrides?.List);
+  const item = getOverride("li", overrides?.Item);
+  const highlight = getOverride("span", overrides?.Highlight);
+  const fetchSuggestions = useCallback2(
+    async (q) => {
+      if (!q.trim()) {
+        setSuggestions([]);
+        setOpen(false);
+        return;
+      }
+      try {
+        const res = await fetch(
+          `${serverUrl}/api/suggestions?q=${encodeURIComponent(q)}&collection=${collection}&limit=${limit}`
+        );
+        const data = await res.json();
+        setSuggestions(data.suggestions || []);
+        setOpen((data.suggestions || []).length > 0);
+        setActiveIndex(-1);
+      } catch {
+        setSuggestions([]);
+      }
+    },
+    [serverUrl, collection, limit]
+  );
+  const handleChange = (e) => {
+    const value = e.target.value;
+    setQuery(value);
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => fetchSuggestions(value), debounce);
+  };
+  const handleSelect = (suggestion) => {
+    setQuery(suggestion.query);
+    setOpen(false);
+    onSelect?.(suggestion);
+  };
+  const handleKeyDown = (e) => {
+    if (!open) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter" && activeIndex >= 0) {
+      e.preventDefault();
+      const s = suggestions[activeIndex];
+      if (s) handleSelect(s);
+    } else if (e.key === "Escape") {
+      setOpen(false);
+    }
+  };
+  useEffect2(() => {
+    const handleClickOutside = () => setOpen(false);
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ jsxs6(
+    root.Component,
+    {
+      ...root.resolveProps({
+        style: { position: "relative" },
+        onClick: (e) => e.stopPropagation()
+      }),
+      children: [
+        /* @__PURE__ */ jsx12(
+          input.Component,
+          {
+            ...input.resolveProps({
+              ref: inputRef,
+              type: "search",
+              value: query,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown,
+              onFocus: () => suggestions.length > 0 && setOpen(true),
+              placeholder,
+              autoComplete: "off",
+              role: "combobox",
+              "aria-expanded": open,
+              "aria-autocomplete": "list"
+            })
+          }
+        ),
+        open && suggestions.length > 0 && /* @__PURE__ */ jsx12(
+          list.Component,
+          {
+            ...list.resolveProps({
+              role: "listbox",
+              style: {
+                position: "absolute",
+                top: "100%",
+                left: 0,
+                right: 0,
+                zIndex: 50
+              }
+            }),
+            children: suggestions.map((s, i) => /* @__PURE__ */ jsx12(
+              item.Component,
+              {
+                ...item.resolveProps({
+                  role: "option",
+                  "aria-selected": i === activeIndex,
+                  "data-active": i === activeIndex || void 0,
+                  onClick: () => handleSelect(s),
+                  onMouseEnter: () => setActiveIndex(i)
+                }),
+                children: /* @__PURE__ */ jsx12(
+                  highlight.Component,
+                  {
+                    ...highlight.resolveProps({
+                      dangerouslySetInnerHTML: { __html: s.highlight }
+                    })
+                  }
+                )
+              },
+              s.objectID
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
 export {
+  Autocomplete,
   Hits,
   HitsSkeleton,
   LocaleContext,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsproxy/react",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Headless React components for tsproxy with BaseUI-style overrides",
   "type": "module",
   "main": "./dist/index.js",
@@ -36,7 +36,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@tsproxy/js": "^0.0.2"
+    "@tsproxy/js": "^0.0.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",