@pro6pp/infer-react 0.0.2-beta.1 → 0.0.2-beta.10

package/dist/index.js

@@ -1,50 +1,750 @@
-"use strict";
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/index.tsx
+import React, {
+  useState,
+  useMemo,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+
+// ../core/src/core.ts
+var DEFAULTS = {
+  API_URL: "https://api.pro6pp.nl/v2",
+  LIMIT: 20,
+  DEBOUNCE_MS: 150,
+  MIN_DEBOUNCE_MS: 50,
+  MAX_RETRIES: 0
+};
+var PATTERNS = {
+  DIGITS_1_3: /^[0-9]{1,3}$/
+};
+var INITIAL_STATE = {
+  query: "",
+  stage: null,
+  cities: [],
+  streets: [],
+  suggestions: [],
+  isValid: false,
+  isError: false,
+  isLoading: false,
+  hasMore: false,
+  selectedSuggestionIndex: -1
 };
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+var InferCore = class {
+  /**
+   * Initializes a new instance of the Infer engine.
+   * @param config The configuration object including API keys and callbacks.
+   */
+  constructor(config) {
+    __publicField(this, "country");
+    __publicField(this, "authKey");
+    __publicField(this, "explicitApiUrl");
+    __publicField(this, "baseLimit");
+    __publicField(this, "currentLimit");
+    __publicField(this, "maxRetries");
+    __publicField(this, "fetcher");
+    __publicField(this, "onStateChange");
+    __publicField(this, "onSelect");
+    /**
+     * The current read-only state of the engine.
+     * Use `onStateChange` to react to updates.
+     */
+    __publicField(this, "state");
+    __publicField(this, "abortController", null);
+    __publicField(this, "debouncedFetch");
+    __publicField(this, "isSelecting", false);
+    this.country = config.country;
+    this.authKey = config.authKey;
+    this.explicitApiUrl = config.apiUrl;
+    this.baseLimit = config.limit || DEFAULTS.LIMIT;
+    this.currentLimit = this.baseLimit;
+    const configRetries = config.maxRetries !== void 0 ? config.maxRetries : DEFAULTS.MAX_RETRIES;
+    this.maxRetries = Math.max(0, Math.min(configRetries, 10));
+    this.fetcher = config.fetcher || ((url, init) => fetch(url, init));
+    this.onStateChange = config.onStateChange || (() => {
+    });
+    this.onSelect = config.onSelect || (() => {
+    });
+    this.state = { ...INITIAL_STATE };
+    const configDebounce = config.debounceMs !== void 0 ? config.debounceMs : DEFAULTS.DEBOUNCE_MS;
+    const debounceTime = Math.max(configDebounce, DEFAULTS.MIN_DEBOUNCE_MS);
+    this.debouncedFetch = this.debounce((val) => this.executeFetch(val), debounceTime);
+  }
+  /**
+   * Processes new text input from the user.
+   * Triggers a debounced API request and updates the internal state.
+   * @param value The raw string from the input field.
+   */
+  handleInput(value) {
+    if (this.isSelecting) {
+      this.isSelecting = false;
+      return;
+    }
+    this.currentLimit = this.baseLimit;
+    const isEditingFinal = this.state.stage === "final" && value !== this.state.query;
+    this.updateState({
+      query: value,
+      isValid: false,
+      isLoading: !!value.trim(),
+      selectedSuggestionIndex: -1,
+      hasMore: false
+    });
+    if (isEditingFinal) {
+      this.onSelect(null);
+    }
+    this.debouncedFetch(value);
+  }
+  /**
+   * Increases the current limit and re-fetches the query to show more results.
+   */
+  loadMore() {
+    if (this.state.isLoading) return;
+    this.currentLimit += this.baseLimit;
+    this.updateState({ isLoading: true });
+    this.executeFetch(this.state.query);
+  }
+  /**
+   * Handles keyboard events for the input field.
+   * Supports:
+   * - `ArrowUp`/`ArrowDown`: Navigate through the suggestion list.
+   * - `Enter`: Select the currently highlighted suggestion.
+   * - `Space`: Automatically inserts a comma if a numeric house number is detected.
+   * @param event The keyboard event from the input element.
+   */
+  handleKeyDown(event) {
+    const target = event.target;
+    if (!target) return;
+    const totalItems = this.state.cities.length + this.state.streets.length + this.state.suggestions.length;
+    if (totalItems > 0) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        let nextIndex = this.state.selectedSuggestionIndex + 1;
+        if (nextIndex >= totalItems) {
+          nextIndex = 0;
+        }
+        this.updateState({ selectedSuggestionIndex: nextIndex });
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        let nextIndex = this.state.selectedSuggestionIndex - 1;
+        if (nextIndex < 0) {
+          nextIndex = totalItems - 1;
+        }
+        this.updateState({ selectedSuggestionIndex: nextIndex });
+        return;
+      }
+      if (event.key === "Enter" && this.state.selectedSuggestionIndex >= 0) {
+        event.preventDefault();
+        const allItems = [...this.state.cities, ...this.state.streets, ...this.state.suggestions];
+        const item = allItems[this.state.selectedSuggestionIndex];
+        if (item) {
+          this.selectItem(item);
+          this.updateState({ selectedSuggestionIndex: -1 });
+        }
+        return;
+      }
+    }
+    const val = target.value;
+    if (event.key === " " && this.shouldAutoInsertComma(val)) {
+      event.preventDefault();
+      const next = `${val.trim()}, `;
+      this.updateQueryAndFetch(next);
+    }
+  }
+  /**
+   * Manually selects a suggestion or a string value.
+   * This is typically called when a user clicks a suggestion in the UI.
+   * @param item The suggestion object or string to select.
+   * @returns boolean True if the selection is a final address.
+   */
+  selectItem(item) {
+    this.debouncedFetch.cancel();
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+    const label = typeof item === "string" ? item : item.label;
+    let logicValue = label;
+    if (typeof item !== "string" && typeof item.value === "string") {
+      logicValue = item.value;
+    }
+    const valueObj = typeof item !== "string" && typeof item.value === "object" ? item.value : void 0;
+    const isFullResult = !!valueObj && Object.keys(valueObj).length > 0;
+    this.isSelecting = true;
+    if (this.state.stage === "final" || isFullResult) {
+      let finalQuery = label;
+      if (valueObj && Object.keys(valueObj).length > 0) {
+        const { street, street_number, house_number, city } = valueObj;
+        const number = street_number || house_number;
+        if (street && number && city) {
+          finalQuery = `${street} ${number}, ${city}`;
+        }
+      }
+      this.finishSelection(finalQuery, valueObj);
+      return true;
+    }
+    const subtitle = typeof item !== "string" ? item.subtitle : null;
+    this.processSelection(logicValue, subtitle);
+    return false;
+  }
+  shouldAutoInsertComma(currentVal) {
+    const isStartOfSegmentAndNumeric = !currentVal.includes(",") && PATTERNS.DIGITS_1_3.test(currentVal.trim());
+    if (isStartOfSegmentAndNumeric) return true;
+    if (this.state.stage === "house_number") {
+      const currentFragment = this.getCurrentFragment(currentVal);
+      return PATTERNS.DIGITS_1_3.test(currentFragment);
+    }
+    return false;
+  }
+  finishSelection(label, value) {
+    this.updateState({
+      query: label,
+      suggestions: [],
+      cities: [],
+      streets: [],
+      isValid: true,
+      stage: "final",
+      hasMore: false
+    });
+    this.onSelect(value || label);
+  }
+  processSelection(text, subtitle) {
+    const { stage, query } = this.state;
+    let nextQuery = query;
+    const isContextualSelection = subtitle && (stage === "city" || stage === "street" || stage === "mixed");
+    if (isContextualSelection) {
+      if (stage === "city") {
+        nextQuery = `${subtitle}, ${text}, `;
+      } else {
+        const prefix = this.getQueryPrefix(query);
+        nextQuery = prefix ? `${prefix} ${text}, ${subtitle}, ` : `${text}, ${subtitle}, `;
+      }
+      this.updateQueryAndFetch(nextQuery);
+      return;
+    }
+    if (stage === "direct" || stage === "addition") {
+      this.finishSelection(text);
+      return;
+    }
+    const hasComma = query.includes(",");
+    const isFirstSegment = !hasComma && (stage === "city" || stage === "street" || stage === "house_number_first");
+    if (isFirstSegment) {
+      nextQuery = `${text}, `;
+    } else {
+      nextQuery = this.replaceLastSegment(query, text);
+      if (stage !== "house_number") {
+        nextQuery += ", ";
+      }
+    }
+    this.updateQueryAndFetch(nextQuery);
+  }
+  executeFetch(val, attempt = 0) {
+    const text = (val || "").toString();
+    if (!text.trim()) {
+      this.abortController?.abort();
+      this.resetState();
+      return;
+    }
+    if (attempt === 0) {
+      this.updateState({ isError: false });
+      if (this.abortController) this.abortController.abort();
+      this.abortController = new AbortController();
+    }
+    const currentSignal = this.abortController?.signal;
+    const baseUrl = this.explicitApiUrl ? this.explicitApiUrl : `${DEFAULTS.API_URL}/infer/${this.country.toLowerCase()}`;
+    const params = new URLSearchParams({
+      country: this.country.toLowerCase(),
+      query: text,
+      limit: this.currentLimit.toString()
+    });
+    if (this.authKey) {
+      params.set("authKey", this.authKey);
+    }
+    const separator = baseUrl.includes("?") ? "&" : "?";
+    const finalUrl = `${baseUrl}${separator}${params.toString()}`;
+    this.fetcher(finalUrl, { signal: currentSignal }).then((res) => {
+      if (!res.ok) {
+        if (attempt < this.maxRetries && (res.status >= 500 || res.status === 429)) {
+          return this.retry(val, attempt, currentSignal);
+        }
+        throw new Error("Network error");
+      }
+      return res.json();
+    }).then((data) => {
+      if (data) this.mapResponseToState(data);
+    }).catch((e) => {
+      if (e.name === "AbortError") return;
+      if (attempt < this.maxRetries) {
+        return this.retry(val, attempt, currentSignal);
+      }
+      this.updateState({ isError: true, isLoading: false });
+    });
+  }
+  retry(val, attempt, signal) {
+    if (signal?.aborted) return;
+    const delay = Math.pow(2, attempt) * 200;
+    setTimeout(() => {
+      if (!signal?.aborted) {
+        this.executeFetch(val, attempt + 1);
+      }
+    }, delay);
+  }
+  mapResponseToState(data) {
+    const newState = {
+      stage: data.stage,
+      isLoading: false
+    };
+    let autoSelect = false;
+    let autoSelectItem = null;
+    const rawSuggestions = data.suggestions || [];
+    const uniqueSuggestions = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const item of rawSuggestions) {
+      const key = `${item.label}|${item.subtitle || ""}|${JSON.stringify(item.value || {})}`;
+      if (!seen.has(key)) {
+        seen.add(key);
+        uniqueSuggestions.push(item);
+      }
+    }
+    const totalCount = uniqueSuggestions.length + (data.cities?.length || 0) + (data.streets?.length || 0);
+    newState.hasMore = totalCount >= this.currentLimit;
+    if (data.stage === "mixed") {
+      newState.cities = data.cities || [];
+      newState.streets = data.streets || [];
+      newState.suggestions = [];
+    } else {
+      newState.suggestions = uniqueSuggestions;
+      newState.cities = [];
+      newState.streets = [];
+      const firstItem = uniqueSuggestions[0];
+      const hasFullValue = firstItem && typeof firstItem.value === "object" && firstItem.value !== null && Object.keys(firstItem.value).length > 0;
+      if ((data.stage === "final" || hasFullValue) && uniqueSuggestions.length === 1) {
+        autoSelect = true;
+        autoSelectItem = firstItem;
+      }
+    }
+    newState.isValid = data.stage === "final";
+    if (autoSelect && autoSelectItem) {
+      newState.query = autoSelectItem.label;
+      newState.suggestions = [];
+      newState.cities = [];
+      newState.streets = [];
+      newState.isValid = true;
+      newState.hasMore = false;
+      this.isSelecting = true;
+      this.updateState(newState);
+      const val = typeof autoSelectItem.value === "object" ? autoSelectItem.value : autoSelectItem.label;
+      this.onSelect(val);
+    } else {
+      this.updateState(newState);
+    }
+  }
+  updateQueryAndFetch(nextQuery) {
+    this.updateState({ query: nextQuery, suggestions: [], cities: [], streets: [] });
+    this.updateState({ isLoading: true, isValid: false, hasMore: false });
+    this.debouncedFetch(nextQuery);
+  }
+  replaceLastSegment(fullText, newSegment) {
+    const lastCommaIndex = fullText.lastIndexOf(",");
+    if (lastCommaIndex === -1) return newSegment;
+    return `${fullText.slice(0, lastCommaIndex + 1)} ${newSegment}`.trim();
+  }
+  getQueryPrefix(q) {
+    const lastComma = q.lastIndexOf(",");
+    return lastComma === -1 ? "" : q.slice(0, lastComma + 1).trimEnd();
+  }
+  getCurrentFragment(q) {
+    return (q.split(",").slice(-1)[0] ?? "").trim();
+  }
+  resetState() {
+    this.updateState({ ...INITIAL_STATE, query: this.state.query });
+  }
+  updateState(updates) {
+    this.state = { ...this.state, ...updates };
+    this.onStateChange(this.state);
+  }
+  debounce(func, wait) {
+    let timeout;
+    const debounced = (...args) => {
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(() => func.apply(this, args), wait);
+    };
+    debounced.cancel = () => {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = void 0;
+      }
+    };
+    return debounced;
   }
-  return to;
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  useInfer: () => useInfer
-});
-module.exports = __toCommonJS(index_exports);
-var import_react = require("react");
-var import_infer_core = require("@pro6pp/infer-core");
+
+// ../core/src/default-styles.ts
+var DEFAULT_STYLES = `
+  .pro6pp-wrapper {
+    position: relative;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    box-sizing: border-box;
+    width: 100%;
+  }
+  .pro6pp-wrapper * {
+    box-sizing: border-box;
+  }
+  .pro6pp-input {
+    width: 100%;
+    padding: 10px 12px;
+    padding-right: 48px;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    font-size: 16px;
+    line-height: 1.5;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+  .pro6pp-input:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+
+  .pro6pp-input-addons {
+    position: absolute;
+    right: 6px;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    pointer-events: none;
+  }
+  .pro6pp-input-addons > * {
+    pointer-events: auto;
+  }
+
+  .pro6pp-clear-button {
+    background: none;
+    border: none;
+    width: 28px;
+    height: 28px;
+    cursor: pointer;
+    color: #a3a3a3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: color 0.2s, background-color 0.2s, transform 0.1s;
+  }
+  .pro6pp-clear-button:hover {
+    color: #1f2937;
+    background-color: #f3f4f6;
+  }
+  .pro6pp-clear-button:active {
+    transform: scale(0.92);
+  }
+  .pro6pp-clear-button svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .pro6pp-loader {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
+    border: 2px solid #e0e0e0;
+    border-top-color: #6b7280;
+    border-radius: 50%;
+    animation: pro6pp-spin 0.6s linear infinite;
+    flex-shrink: 0;
+  }
+
+  .pro6pp-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    margin-top: 4px;
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    max-height: 300px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+  }
+  .pro6pp-list {
+    list-style: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    flex-grow: 1;
+  }
+  .pro6pp-item {
+    padding: 12px 16px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: #111827;
+    font-size: 14px;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .pro6pp-item:hover, .pro6pp-item--active {
+    background-color: #f9fafb;
+  }
+  .pro6pp-item__label {
+    font-weight: 500;
+    flex-shrink: 0;
+  }
+  .pro6pp-item__subtitle {
+    font-size: 14px;
+    color: #6b7280;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 1;
+  }
+  .pro6pp-item__chevron {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    color: #9ca3af;
+    padding-left: 8px;
+  }
+  .pro6pp-no-results {
+    padding: 16px;
+    color: #6b7280;
+    font-size: 14px;
+    text-align: center;
+  }
+  .pro6pp-load-more {
+    width: 100%;
+    padding: 10px;
+    background: #f9fafb;
+    border: none;
+    border-top: 1px solid #e0e0e0;
+    color: #3b82f6;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    flex-shrink: 0;
+  }
+  .pro6pp-load-more:hover {
+    background-color: #f3f4f6;
+  }
+
+  @keyframes pro6pp-spin {
+    to { transform: rotate(360deg); }
+  }
+`;
+
+// src/index.tsx
 function useInfer(config) {
-  const [state, setState] = (0, import_react.useState)(import_infer_core.INITIAL_STATE);
-  const core = (0, import_react.useMemo)(() => {
-    return new import_infer_core.InferCore({
+  const [state, setState] = useState(INITIAL_STATE);
+  const callbacksRef = useRef({
+    onStateChange: config.onStateChange,
+    onSelect: config.onSelect
+  });
+  useEffect(() => {
+    callbacksRef.current = {
+      onStateChange: config.onStateChange,
+      onSelect: config.onSelect
+    };
+  }, [config.onStateChange, config.onSelect]);
+  const core = useMemo(() => {
+    return new InferCore({
       ...config,
-      onStateChange: (newState) => setState({ ...newState })
+      onStateChange: (newState) => {
+        setState({ ...newState });
+        callbacksRef.current.onStateChange?.(newState);
+      },
+      onSelect: (selection) => {
+        callbacksRef.current.onSelect?.(selection);
+      }
     });
-  }, [config.country, config.authKey, config.limit]);
+  }, [
+    config.country,
+    config.authKey,
+    config.apiUrl,
+    config.fetcher,
+    config.limit,
+    config.debounceMs,
+    config.maxRetries
+  ]);
   return {
+    /** The current UI state (suggestions, loading status, query, etc.). */
     state,
+    /** The raw InferCore instance for manual control. */
     core,
+    /** Pre-configured event handlers to spread onto an <input /> element. */
     inputProps: {
       value: state.query,
       onChange: (e) => core.handleInput(e.target.value),
       onKeyDown: (e) => core.handleKeyDown(e)
     },
-    selectItem: (item) => core.selectItem(item)
+    /** Function to manually select a specific suggestion. */
+    selectItem: (item) => core.selectItem(item),
+    /** Function to load more results. */
+    loadMore: () => core.loadMore()
   };
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+var Pro6PPInfer = forwardRef(
+  ({
+    className,
+    style,
+    inputProps,
+    placeholder = "Start typing an address...",
+    renderItem,
+    disableDefaultStyles = false,
+    noResultsText = "No results found",
+    loadMoreText = "Show more results...",
+    renderNoResults,
+    showClearButton = true,
+    ...config
+  }, ref) => {
+    const { state, selectItem, loadMore, inputProps: coreInputProps, core } = useInfer(config);
+    const [isOpen, setIsOpen] = useState(false);
+    const internalInputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    useImperativeHandle(ref, () => internalInputRef.current);
+    useEffect(() => {
+      if (disableDefaultStyles) return;
+      const styleId = "pro6pp-styles";
+      if (!document.getElementById(styleId)) {
+        const styleEl = document.createElement("style");
+        styleEl.id = styleId;
+        styleEl.textContent = DEFAULT_STYLES;
+        document.head.appendChild(styleEl);
+      }
+    }, [disableDefaultStyles]);
+    useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const items = useMemo(() => {
+      return [
+        ...state.cities.map((c) => ({ ...c, type: "city" })),
+        ...state.streets.map((s) => ({ ...s, type: "street" })),
+        ...state.suggestions.map((s) => ({ ...s, type: "suggestion" }))
+      ];
+    }, [state.cities, state.streets, state.suggestions]);
+    const handleSelect = (item) => {
+      const isFinal = selectItem(item);
+      if (!isFinal) {
+        setTimeout(() => internalInputRef.current?.focus(), 0);
+      } else {
+        setIsOpen(false);
+      }
+    };
+    const handleClear = () => {
+      core.handleInput("");
+      internalInputRef.current?.focus();
+    };
+    const hasResults = items.length > 0;
+    const showNoResults = !state.isLoading && !state.isError && state.query.length > 0 && !hasResults && !state.isValid;
+    const showDropdown = isOpen && (hasResults || state.isLoading || showNoResults);
+    return /* @__PURE__ */ React.createElement("div", { ref: wrapperRef, className: `pro6pp-wrapper ${className || ""}`, style }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        ref: internalInputRef,
+        type: "text",
+        className: "pro6pp-input",
+        placeholder,
+        autoComplete: "off",
+        ...inputProps,
+        ...coreInputProps,
+        onFocus: (e) => {
+          setIsOpen(true);
+          inputProps?.onFocus?.(e);
+        }
+      }
+    ), /* @__PURE__ */ React.createElement("div", { className: "pro6pp-input-addons" }, state.isLoading && /* @__PURE__ */ React.createElement("div", { className: "pro6pp-loader" }), showClearButton && state.query.length > 0 && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "pro6pp-clear-button",
+        onClick: handleClear,
+        "aria-label": "Clear input"
+      },
+      /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        },
+        /* @__PURE__ */ React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      )
+    ))), showDropdown && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "pro6pp-dropdown",
+        onWheel: (e) => e.stopPropagation(),
+        onMouseDown: (e) => e.stopPropagation()
+      },
+      /* @__PURE__ */ React.createElement("ul", { className: "pro6pp-list", role: "listbox" }, hasResults ? items.map((item, index) => {
+        const isActive = index === state.selectedSuggestionIndex;
+        const secondaryText = item.subtitle || (item.count !== void 0 ? item.count : "");
+        const showChevron = item.value === void 0 || item.value === null;
+        return /* @__PURE__ */ React.createElement(
+          "li",
+          {
+            key: `${item.label}-${index}`,
+            role: "option",
+            "aria-selected": isActive,
+            className: `pro6pp-item ${isActive ? "pro6pp-item--active" : ""}`,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => handleSelect(item)
+          },
+          renderItem ? renderItem(item, isActive) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "pro6pp-item__label" }, item.label), secondaryText && /* @__PURE__ */ React.createElement("span", { className: "pro6pp-item__subtitle" }, ", ", secondaryText), showChevron && /* @__PURE__ */ React.createElement("div", { className: "pro6pp-item__chevron" }, /* @__PURE__ */ React.createElement(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            },
+            /* @__PURE__ */ React.createElement("polyline", { points: "9 18 15 12 9 6" })
+          )))
+        );
+      }) : state.isLoading ? /* @__PURE__ */ React.createElement("li", { className: "pro6pp-no-results" }, "Loading suggestions...") : /* @__PURE__ */ React.createElement("li", { className: "pro6pp-no-results" }, renderNoResults ? renderNoResults(state) : noResultsText)),
+      state.hasMore && /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "pro6pp-load-more",
+          onClick: (e) => {
+            e.preventDefault();
+            loadMore();
+          }
+        },
+        loadMoreText
+      )
+    ));
+  }
+);
+export {
+  Pro6PPInfer,
   useInfer
-});
+};