@pro6pp/infer-react 0.0.2-beta.4 → 0.0.2-beta.6

package/dist/index.cjs

@@ -3,6 +3,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/index.ts
 var index_exports = {};
@@ -24,11 +26,240 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
-var import_infer_core = require("@pro6pp/infer-core");
+
+// ../core/src/core.ts
+var DEFAULTS = {
+  API_URL: "https://api.pro6pp.nl/v2",
+  LIMIT: 1e3,
+  DEBOUNCE_MS: 300
+};
+var PATTERNS = {
+  DIGITS_1_3: /^[0-9]{1,3}$/
+};
+var INITIAL_STATE = {
+  query: "",
+  stage: null,
+  cities: [],
+  streets: [],
+  suggestions: [],
+  isValid: false,
+  isError: false,
+  isLoading: false,
+  selectedSuggestionIndex: -1
+};
+var InferCore = class {
+  constructor(config) {
+    __publicField(this, "country");
+    __publicField(this, "authKey");
+    __publicField(this, "apiUrl");
+    __publicField(this, "limit");
+    __publicField(this, "fetcher");
+    __publicField(this, "onStateChange");
+    __publicField(this, "onSelect");
+    __publicField(this, "state");
+    __publicField(this, "abortController", null);
+    __publicField(this, "debouncedFetch");
+    this.country = config.country;
+    this.authKey = config.authKey;
+    this.apiUrl = config.apiUrl || DEFAULTS.API_URL;
+    this.limit = config.limit || DEFAULTS.LIMIT;
+    this.fetcher = config.fetcher || ((url, init) => fetch(url, init));
+    this.onStateChange = config.onStateChange || (() => {
+    });
+    this.onSelect = config.onSelect || (() => {
+    });
+    this.state = { ...INITIAL_STATE };
+    this.debouncedFetch = this.debounce(
+      (val) => this.executeFetch(val),
+      DEFAULTS.DEBOUNCE_MS
+    );
+  }
+  handleInput(value) {
+    this.updateState({
+      query: value,
+      isValid: false,
+      isLoading: !!value.trim(),
+      selectedSuggestionIndex: -1
+    });
+    if (this.state.stage === "final") {
+      this.onSelect(null);
+    }
+    this.debouncedFetch(value);
+  }
+  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);
+    }
+  }
+  selectItem(item) {
+    const label = typeof item === "string" ? item : item.label;
+    const value = typeof item !== "string" ? item.value : void 0;
+    const subtitle = typeof item !== "string" ? item.subtitle : null;
+    if (this.state.stage === "final") {
+      this.finishSelection(label, value);
+      return;
+    }
+    this.processSelection(label, subtitle);
+  }
+  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 });
+    this.onSelect(value || label);
+  }
+  processSelection(label, 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}, ${label}, `;
+      } else {
+        const prefix = this.getQueryPrefix(query);
+        nextQuery = prefix ? `${prefix} ${label}, ${subtitle}, ` : `${label}, ${subtitle}, `;
+      }
+      this.updateQueryAndFetch(nextQuery);
+      return;
+    }
+    if (stage === "direct" || stage === "addition") {
+      this.finishSelection(label);
+      return;
+    }
+    const hasComma = query.includes(",");
+    const isFirstSegment = !hasComma && (stage === "city" || stage === "street" || stage === "house_number_first");
+    if (isFirstSegment) {
+      nextQuery = `${label}, `;
+    } else {
+      nextQuery = this.replaceLastSegment(query, label);
+      if (stage !== "house_number") {
+        nextQuery += ", ";
+      }
+    }
+    this.updateQueryAndFetch(nextQuery);
+  }
+  executeFetch(val) {
+    const text = (val || "").toString();
+    if (!text.trim()) {
+      this.abortController?.abort();
+      this.resetState();
+      return;
+    }
+    this.updateState({ isError: false });
+    if (this.abortController) this.abortController.abort();
+    this.abortController = new AbortController();
+    const url = new URL(`${this.apiUrl}/infer/${this.country.toLowerCase()}`);
+    const params = {
+      authKey: this.authKey,
+      query: text,
+      limit: this.limit.toString()
+    };
+    url.search = new URLSearchParams(params).toString();
+    this.fetcher(url.toString(), { signal: this.abortController.signal }).then((res) => {
+      if (!res.ok) throw new Error("Network error");
+      return res.json();
+    }).then((data) => this.mapResponseToState(data)).catch((e) => {
+      if (e.name !== "AbortError") {
+        this.updateState({ isError: true, isLoading: false });
+      }
+    });
+  }
+  mapResponseToState(data) {
+    const newState = {
+      stage: data.stage,
+      isLoading: false
+    };
+    if (data.stage === "mixed") {
+      newState.cities = data.cities || [];
+      newState.streets = data.streets || [];
+      newState.suggestions = [];
+    } else {
+      newState.suggestions = data.suggestions || [];
+      newState.cities = [];
+      newState.streets = [];
+    }
+    newState.isValid = data.stage === "final";
+    this.updateState(newState);
+  }
+  updateQueryAndFetch(nextQuery) {
+    this.updateState({ query: nextQuery, suggestions: [], cities: [], streets: [] });
+    this.handleInput(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;
+    return (...args) => {
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(() => func.apply(this, args), wait);
+    };
+  }
+};
+
+// src/index.ts
 function useInfer(config) {
-  const [state, setState] = (0, import_react.useState)(import_infer_core.INITIAL_STATE);
+  const [state, setState] = (0, import_react.useState)(INITIAL_STATE);
   const core = (0, import_react.useMemo)(() => {
-    return new import_infer_core.InferCore({
+    return new InferCore({
       ...config,
       onStateChange: (newState) => setState({ ...newState })
     });

package/dist/index.js

@@ -1,6 +1,239 @@
+var __defProp = Object.defineProperty;
+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.ts
 import { useState, useMemo } from "react";
-import { InferCore, INITIAL_STATE } from "@pro6pp/infer-core";
+
+// ../core/src/core.ts
+var DEFAULTS = {
+  API_URL: "https://api.pro6pp.nl/v2",
+  LIMIT: 1e3,
+  DEBOUNCE_MS: 300
+};
+var PATTERNS = {
+  DIGITS_1_3: /^[0-9]{1,3}$/
+};
+var INITIAL_STATE = {
+  query: "",
+  stage: null,
+  cities: [],
+  streets: [],
+  suggestions: [],
+  isValid: false,
+  isError: false,
+  isLoading: false,
+  selectedSuggestionIndex: -1
+};
+var InferCore = class {
+  constructor(config) {
+    __publicField(this, "country");
+    __publicField(this, "authKey");
+    __publicField(this, "apiUrl");
+    __publicField(this, "limit");
+    __publicField(this, "fetcher");
+    __publicField(this, "onStateChange");
+    __publicField(this, "onSelect");
+    __publicField(this, "state");
+    __publicField(this, "abortController", null);
+    __publicField(this, "debouncedFetch");
+    this.country = config.country;
+    this.authKey = config.authKey;
+    this.apiUrl = config.apiUrl || DEFAULTS.API_URL;
+    this.limit = config.limit || DEFAULTS.LIMIT;
+    this.fetcher = config.fetcher || ((url, init) => fetch(url, init));
+    this.onStateChange = config.onStateChange || (() => {
+    });
+    this.onSelect = config.onSelect || (() => {
+    });
+    this.state = { ...INITIAL_STATE };
+    this.debouncedFetch = this.debounce(
+      (val) => this.executeFetch(val),
+      DEFAULTS.DEBOUNCE_MS
+    );
+  }
+  handleInput(value) {
+    this.updateState({
+      query: value,
+      isValid: false,
+      isLoading: !!value.trim(),
+      selectedSuggestionIndex: -1
+    });
+    if (this.state.stage === "final") {
+      this.onSelect(null);
+    }
+    this.debouncedFetch(value);
+  }
+  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);
+    }
+  }
+  selectItem(item) {
+    const label = typeof item === "string" ? item : item.label;
+    const value = typeof item !== "string" ? item.value : void 0;
+    const subtitle = typeof item !== "string" ? item.subtitle : null;
+    if (this.state.stage === "final") {
+      this.finishSelection(label, value);
+      return;
+    }
+    this.processSelection(label, subtitle);
+  }
+  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 });
+    this.onSelect(value || label);
+  }
+  processSelection(label, 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}, ${label}, `;
+      } else {
+        const prefix = this.getQueryPrefix(query);
+        nextQuery = prefix ? `${prefix} ${label}, ${subtitle}, ` : `${label}, ${subtitle}, `;
+      }
+      this.updateQueryAndFetch(nextQuery);
+      return;
+    }
+    if (stage === "direct" || stage === "addition") {
+      this.finishSelection(label);
+      return;
+    }
+    const hasComma = query.includes(",");
+    const isFirstSegment = !hasComma && (stage === "city" || stage === "street" || stage === "house_number_first");
+    if (isFirstSegment) {
+      nextQuery = `${label}, `;
+    } else {
+      nextQuery = this.replaceLastSegment(query, label);
+      if (stage !== "house_number") {
+        nextQuery += ", ";
+      }
+    }
+    this.updateQueryAndFetch(nextQuery);
+  }
+  executeFetch(val) {
+    const text = (val || "").toString();
+    if (!text.trim()) {
+      this.abortController?.abort();
+      this.resetState();
+      return;
+    }
+    this.updateState({ isError: false });
+    if (this.abortController) this.abortController.abort();
+    this.abortController = new AbortController();
+    const url = new URL(`${this.apiUrl}/infer/${this.country.toLowerCase()}`);
+    const params = {
+      authKey: this.authKey,
+      query: text,
+      limit: this.limit.toString()
+    };
+    url.search = new URLSearchParams(params).toString();
+    this.fetcher(url.toString(), { signal: this.abortController.signal }).then((res) => {
+      if (!res.ok) throw new Error("Network error");
+      return res.json();
+    }).then((data) => this.mapResponseToState(data)).catch((e) => {
+      if (e.name !== "AbortError") {
+        this.updateState({ isError: true, isLoading: false });
+      }
+    });
+  }
+  mapResponseToState(data) {
+    const newState = {
+      stage: data.stage,
+      isLoading: false
+    };
+    if (data.stage === "mixed") {
+      newState.cities = data.cities || [];
+      newState.streets = data.streets || [];
+      newState.suggestions = [];
+    } else {
+      newState.suggestions = data.suggestions || [];
+      newState.cities = [];
+      newState.streets = [];
+    }
+    newState.isValid = data.stage === "final";
+    this.updateState(newState);
+  }
+  updateQueryAndFetch(nextQuery) {
+    this.updateState({ query: nextQuery, suggestions: [], cities: [], streets: [] });
+    this.handleInput(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;
+    return (...args) => {
+      if (timeout) clearTimeout(timeout);
+      timeout = setTimeout(() => func.apply(this, args), wait);
+    };
+  }
+};
+
+// src/index.ts
 function useInfer(config) {
   const [state, setState] = useState(INITIAL_STATE);
   const core = useMemo(() => {

package/package.json

@@ -20,15 +20,15 @@
     "url": "https://github.com/pro6pp/infer-sdk/issues"
   },
   "sideEffects": false,
-  "version": "0.0.2-beta.4",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "version": "0.0.2-beta.6",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
   "files": [
@@ -46,7 +46,7 @@
     "react": ">=16"
   },
   "dependencies": {
-    "@pro6pp/infer-core": "0.0.2-beta.3"
+    "@pro6pp/infer-core": "0.0.2-beta.4"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",