@pro6pp/infer-react 0.0.2-beta.12 → 0.0.2-beta.14

package/dist/index.cjs

@@ -56,6 +56,7 @@ var INITIAL_STATE = {
   streets: [],
   suggestions: [],
   isValid: false,
+  value: null,
   isError: false,
   isLoading: false,
   hasMore: false,
@@ -111,6 +112,7 @@ var InferCore = class {
     this.updateState({
       query: value,
       isValid: false,
+      value: null,
       isLoading: !!value.trim(),
       selectedSuggestionIndex: -1,
       hasMore: false
@@ -228,6 +230,7 @@ var InferCore = class {
       cities: [],
       streets: [],
       isValid: true,
+      value: value || null,
       stage: "final",
       hasMore: false
     });
@@ -283,10 +286,12 @@ var InferCore = class {
     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.explicitApiUrl) {
+      params.append("country", this.country.toLowerCase());
+    }
     if (this.authKey) {
       params.set("authKey", this.authKey);
     }
@@ -352,8 +357,16 @@ var InferCore = class {
     }
   }
   updateQueryAndFetch(nextQuery) {
-    this.updateState({ query: nextQuery, suggestions: [], cities: [], streets: [] });
-    this.updateState({ isLoading: true, isValid: false, hasMore: false });
+    this.updateState({
+      query: nextQuery,
+      suggestions: [],
+      cities: [],
+      streets: [],
+      isValid: false,
+      value: null,
+      isLoading: true,
+      hasMore: false
+    });
     this.debouncedFetch(nextQuery);
   }
   replaceLastSegment(fullText, newSegment) {
@@ -444,6 +457,12 @@ var DEFAULT_STYLES = `
     appearance: none;
     transition: border-color 0.2s, box-shadow 0.2s;
   }
+
+  .pro6pp-input::placeholder {
+    font-size: 16px;
+    color: #a3a3a3;
+  }
+
   .pro6pp-input:focus {
     outline: none;
     border-color: #3b82f6;
@@ -466,8 +485,8 @@ var DEFAULT_STYLES = `
   .pro6pp-clear-button {
     background: none;
     border: none;
-    width: 40px;
-    height: 40px;
+    width: 32px;
+    height: 32px;
     cursor: pointer;
     color: #a3a3a3;
     display: flex;
@@ -512,7 +531,7 @@ var DEFAULT_STYLES = `
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     z-index: 9999;
     padding: 0;
-    max-height: 260px;
+    max-height: 280px;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
@@ -520,7 +539,7 @@ var DEFAULT_STYLES = `
 
   @media (max-height: 500px) {
     .pro6pp-dropdown {
-      max-height: 140px;
+      max-height: 180px;
     }
   }
 
@@ -536,7 +555,8 @@ var DEFAULT_STYLES = `
     cursor: pointer;
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: 15px;
+    line-height: 1.4;
     color: #374151;
     border-bottom: 1px solid #f3f4f6;
     transition: background-color 0.1s;
@@ -559,18 +579,24 @@ var DEFAULT_STYLES = `
 
   .pro6pp-item__label {
     font-weight: 500;
-    flex-shrink: 0;
+    flex-shrink: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
+
   .pro6pp-item__subtitle {
-    font-size: 14px;
+    font-size: 13px;
     color: #6b7280;
-    flex-grow: 1;
+    flex-shrink: 0;
   }
+
   .pro6pp-item__chevron {
     color: #d1d5db;
     display: flex;
     align-items: center;
     margin-left: auto;
+    padding-left: 8px;
   }
 
   .pro6pp-no-results {
@@ -594,6 +620,24 @@ var DEFAULT_STYLES = `
     touch-action: manipulation;
   }
 
+  @media (max-width: 640px) {
+    .pro6pp-input {
+      font-size: 16px;
+      padding: 10px 12px;
+    }
+    .pro6pp-item {
+      padding: 10px 12px;
+      font-size: 14px;
+    }
+    .pro6pp-item__subtitle {
+      font-size: 12px;
+    }
+    .pro6pp-load-more {
+      padding: 12px;
+      font-size: 13px;
+    }
+  }
+
   .pro6pp-load-more:active {
     background-color: #f3f4f6;
   }
@@ -611,7 +655,18 @@ var HighlightedText = ({ text, query }) => {
   ));
 };
 function useInfer(config) {
-  const [state, setState] = (0, import_react.useState)(INITIAL_STATE);
+  const [state, setState] = (0, import_react.useState)(() => {
+    if (config.initialValue) {
+      return {
+        ...INITIAL_STATE,
+        value: config.initialValue,
+        query: `${config.initialValue.street} ${config.initialValue.street_number}, ${config.initialValue.city}`,
+        isValid: true,
+        stage: "final"
+      };
+    }
+    return INITIAL_STATE;
+  });
   const callbacksRef = (0, import_react.useRef)({
     onStateChange: config.onStateChange,
     onSelect: config.onSelect
@@ -623,7 +678,7 @@ function useInfer(config) {
     };
   }, [config.onStateChange, config.onSelect]);
   const core = (0, import_react.useMemo)(() => {
-    return new InferCore({
+    const instance = new InferCore({
       ...config,
       onStateChange: (newState) => {
         setState({ ...newState });
@@ -633,6 +688,12 @@ function useInfer(config) {
         callbacksRef.current.onSelect?.(selection);
       }
     });
+    if (config.initialValue) {
+      const address = config.initialValue;
+      const label = `${address.street} ${address.street_number}, ${address.city}`;
+      instance.selectItem({ label, value: address });
+    }
+    return instance;
   }, [
     config.country,
     config.authKey,
@@ -640,10 +701,16 @@ function useInfer(config) {
     config.fetcher,
     config.limit,
     config.debounceMs,
-    config.maxRetries
+    config.maxRetries,
+    config.initialValue
   ]);
+  const setValue = (address) => {
+    if (!address) return;
+    const label = `${address.street} ${address.street_number}, ${address.city}`;
+    core.selectItem({ label, value: address });
+  };
   return {
-    /** The current UI state (suggestions, loading status, query, etc.). */
+    /** The current UI state (suggestions, loading status, query, value, etc.). */
     state,
     /** The raw InferCore instance for manual control. */
     core,
@@ -653,9 +720,11 @@ function useInfer(config) {
       onChange: (e) => core.handleInput(e.target.value),
       onKeyDown: (e) => core.handleKeyDown(e)
     },
-    /** Function to manually select a specific suggestion. */
+    /** Manually select a specific suggestion. */
     selectItem: (item) => core.selectItem(item),
-    /** Function to load more results. */
+    /** Programmatically set the address value. */
+    setValue,
+    /** Load more results. */
     loadMore: () => core.loadMore()
   };
 }

package/dist/index.d.cts

@@ -1,14 +1,23 @@
 import React from 'react';
-import { InferConfig, InferState, InferCore, InferResult } from '@pro6pp/infer-core';
+import { InferConfig, AddressValue, InferState, InferCore, InferResult } from '@pro6pp/infer-core';
 export { AddressValue, CountryCode, Fetcher, InferConfig, InferResult, InferState, Stage } from '@pro6pp/infer-core';
 
+/**
+ * Extended configuration for the React hook.
+ */
+interface UseInferConfig extends InferConfig {
+    /**
+     * Initial address value to pre-fill the state with.
+     */
+    initialValue?: AddressValue;
+}
 /**
  * A headless React hook that provides the logic for address search using the Infer API.
  * @param config The engine configuration (authKey, country, etc.).
  * @returns An object containing the current state, the core instance, and pre-bound input props.
  */
-declare function useInfer(config: InferConfig): {
-    /** The current UI state (suggestions, loading status, query, etc.). */
+declare function useInfer(config: UseInferConfig): {
+    /** The current UI state (suggestions, loading status, query, value, etc.). */
     state: InferState;
     /** The raw InferCore instance for manual control. */
     core: InferCore;
@@ -18,15 +27,17 @@ declare function useInfer(config: InferConfig): {
         onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
         onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     };
-    /** Function to manually select a specific suggestion. */
+    /** Manually select a specific suggestion. */
     selectItem: (item: InferResult | string) => boolean;
-    /** Function to load more results. */
+    /** Programmatically set the address value. */
+    setValue: (address: AddressValue) => void;
+    /** Load more results. */
     loadMore: () => void;
 };
 /**
  * Props for the Pro6PPInfer component.
  */
-interface Pro6PPInferProps extends InferConfig {
+interface Pro6PPInferProps extends UseInferConfig {
     /** Optional CSS class for the wrapper div. */
     className?: string;
     /** Optional inline styles for the wrapper div. */
@@ -65,4 +76,4 @@ interface Pro6PPInferProps extends InferConfig {
  */
 declare const Pro6PPInfer: React.ForwardRefExoticComponent<Pro6PPInferProps & React.RefAttributes<HTMLInputElement>>;
 
-export { Pro6PPInfer, type Pro6PPInferProps, useInfer };
+export { Pro6PPInfer, type Pro6PPInferProps, type UseInferConfig, useInfer };

package/dist/index.d.ts

@@ -1,14 +1,23 @@
 import React from 'react';
-import { InferConfig, InferState, InferCore, InferResult } from '@pro6pp/infer-core';
+import { InferConfig, AddressValue, InferState, InferCore, InferResult } from '@pro6pp/infer-core';
 export { AddressValue, CountryCode, Fetcher, InferConfig, InferResult, InferState, Stage } from '@pro6pp/infer-core';
 
+/**
+ * Extended configuration for the React hook.
+ */
+interface UseInferConfig extends InferConfig {
+    /**
+     * Initial address value to pre-fill the state with.
+     */
+    initialValue?: AddressValue;
+}
 /**
  * A headless React hook that provides the logic for address search using the Infer API.
  * @param config The engine configuration (authKey, country, etc.).
  * @returns An object containing the current state, the core instance, and pre-bound input props.
  */
-declare function useInfer(config: InferConfig): {
-    /** The current UI state (suggestions, loading status, query, etc.). */
+declare function useInfer(config: UseInferConfig): {
+    /** The current UI state (suggestions, loading status, query, value, etc.). */
     state: InferState;
     /** The raw InferCore instance for manual control. */
     core: InferCore;
@@ -18,15 +27,17 @@ declare function useInfer(config: InferConfig): {
         onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
         onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     };
-    /** Function to manually select a specific suggestion. */
+    /** Manually select a specific suggestion. */
     selectItem: (item: InferResult | string) => boolean;
-    /** Function to load more results. */
+    /** Programmatically set the address value. */
+    setValue: (address: AddressValue) => void;
+    /** Load more results. */
     loadMore: () => void;
 };
 /**
  * Props for the Pro6PPInfer component.
  */
-interface Pro6PPInferProps extends InferConfig {
+interface Pro6PPInferProps extends UseInferConfig {
     /** Optional CSS class for the wrapper div. */
     className?: string;
     /** Optional inline styles for the wrapper div. */
@@ -65,4 +76,4 @@ interface Pro6PPInferProps extends InferConfig {
  */
 declare const Pro6PPInfer: React.ForwardRefExoticComponent<Pro6PPInferProps & React.RefAttributes<HTMLInputElement>>;
 
-export { Pro6PPInfer, type Pro6PPInferProps, useInfer };
+export { Pro6PPInfer, type Pro6PPInferProps, type UseInferConfig, useInfer };

package/dist/index.js

@@ -30,6 +30,7 @@ var INITIAL_STATE = {
   streets: [],
   suggestions: [],
   isValid: false,
+  value: null,
   isError: false,
   isLoading: false,
   hasMore: false,
@@ -85,6 +86,7 @@ var InferCore = class {
     this.updateState({
       query: value,
       isValid: false,
+      value: null,
       isLoading: !!value.trim(),
       selectedSuggestionIndex: -1,
       hasMore: false
@@ -202,6 +204,7 @@ var InferCore = class {
       cities: [],
       streets: [],
       isValid: true,
+      value: value || null,
       stage: "final",
       hasMore: false
     });
@@ -257,10 +260,12 @@ var InferCore = class {
     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.explicitApiUrl) {
+      params.append("country", this.country.toLowerCase());
+    }
     if (this.authKey) {
       params.set("authKey", this.authKey);
     }
@@ -326,8 +331,16 @@ var InferCore = class {
     }
   }
   updateQueryAndFetch(nextQuery) {
-    this.updateState({ query: nextQuery, suggestions: [], cities: [], streets: [] });
-    this.updateState({ isLoading: true, isValid: false, hasMore: false });
+    this.updateState({
+      query: nextQuery,
+      suggestions: [],
+      cities: [],
+      streets: [],
+      isValid: false,
+      value: null,
+      isLoading: true,
+      hasMore: false
+    });
     this.debouncedFetch(nextQuery);
   }
   replaceLastSegment(fullText, newSegment) {
@@ -418,6 +431,12 @@ var DEFAULT_STYLES = `
     appearance: none;
     transition: border-color 0.2s, box-shadow 0.2s;
   }
+
+  .pro6pp-input::placeholder {
+    font-size: 16px;
+    color: #a3a3a3;
+  }
+
   .pro6pp-input:focus {
     outline: none;
     border-color: #3b82f6;
@@ -440,8 +459,8 @@ var DEFAULT_STYLES = `
   .pro6pp-clear-button {
     background: none;
     border: none;
-    width: 40px;
-    height: 40px;
+    width: 32px;
+    height: 32px;
     cursor: pointer;
     color: #a3a3a3;
     display: flex;
@@ -486,7 +505,7 @@ var DEFAULT_STYLES = `
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     z-index: 9999;
     padding: 0;
-    max-height: 260px;
+    max-height: 280px;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
@@ -494,7 +513,7 @@ var DEFAULT_STYLES = `
 
   @media (max-height: 500px) {
     .pro6pp-dropdown {
-      max-height: 140px;
+      max-height: 180px;
     }
   }
 
@@ -510,7 +529,8 @@ var DEFAULT_STYLES = `
     cursor: pointer;
     display: flex;
     align-items: center;
-    font-size: 14px;
+    font-size: 15px;
+    line-height: 1.4;
     color: #374151;
     border-bottom: 1px solid #f3f4f6;
     transition: background-color 0.1s;
@@ -533,18 +553,24 @@ var DEFAULT_STYLES = `
 
   .pro6pp-item__label {
     font-weight: 500;
-    flex-shrink: 0;
+    flex-shrink: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
+
   .pro6pp-item__subtitle {
-    font-size: 14px;
+    font-size: 13px;
     color: #6b7280;
-    flex-grow: 1;
+    flex-shrink: 0;
   }
+
   .pro6pp-item__chevron {
     color: #d1d5db;
     display: flex;
     align-items: center;
     margin-left: auto;
+    padding-left: 8px;
   }
 
   .pro6pp-no-results {
@@ -568,6 +594,24 @@ var DEFAULT_STYLES = `
     touch-action: manipulation;
   }
 
+  @media (max-width: 640px) {
+    .pro6pp-input {
+      font-size: 16px;
+      padding: 10px 12px;
+    }
+    .pro6pp-item {
+      padding: 10px 12px;
+      font-size: 14px;
+    }
+    .pro6pp-item__subtitle {
+      font-size: 12px;
+    }
+    .pro6pp-load-more {
+      padding: 12px;
+      font-size: 13px;
+    }
+  }
+
   .pro6pp-load-more:active {
     background-color: #f3f4f6;
   }
@@ -585,7 +629,18 @@ var HighlightedText = ({ text, query }) => {
   ));
 };
 function useInfer(config) {
-  const [state, setState] = useState(INITIAL_STATE);
+  const [state, setState] = useState(() => {
+    if (config.initialValue) {
+      return {
+        ...INITIAL_STATE,
+        value: config.initialValue,
+        query: `${config.initialValue.street} ${config.initialValue.street_number}, ${config.initialValue.city}`,
+        isValid: true,
+        stage: "final"
+      };
+    }
+    return INITIAL_STATE;
+  });
   const callbacksRef = useRef({
     onStateChange: config.onStateChange,
     onSelect: config.onSelect
@@ -597,7 +652,7 @@ function useInfer(config) {
     };
   }, [config.onStateChange, config.onSelect]);
   const core = useMemo(() => {
-    return new InferCore({
+    const instance = new InferCore({
       ...config,
       onStateChange: (newState) => {
         setState({ ...newState });
@@ -607,6 +662,12 @@ function useInfer(config) {
         callbacksRef.current.onSelect?.(selection);
       }
     });
+    if (config.initialValue) {
+      const address = config.initialValue;
+      const label = `${address.street} ${address.street_number}, ${address.city}`;
+      instance.selectItem({ label, value: address });
+    }
+    return instance;
   }, [
     config.country,
     config.authKey,
@@ -614,10 +675,16 @@ function useInfer(config) {
     config.fetcher,
     config.limit,
     config.debounceMs,
-    config.maxRetries
+    config.maxRetries,
+    config.initialValue
   ]);
+  const setValue = (address) => {
+    if (!address) return;
+    const label = `${address.street} ${address.street_number}, ${address.city}`;
+    core.selectItem({ label, value: address });
+  };
   return {
-    /** The current UI state (suggestions, loading status, query, etc.). */
+    /** The current UI state (suggestions, loading status, query, value, etc.). */
     state,
     /** The raw InferCore instance for manual control. */
     core,
@@ -627,9 +694,11 @@ function useInfer(config) {
       onChange: (e) => core.handleInput(e.target.value),
       onKeyDown: (e) => core.handleKeyDown(e)
     },
-    /** Function to manually select a specific suggestion. */
+    /** Manually select a specific suggestion. */
     selectItem: (item) => core.selectItem(item),
-    /** Function to load more results. */
+    /** Programmatically set the address value. */
+    setValue,
+    /** Load more results. */
     loadMore: () => core.loadMore()
   };
 }

package/package.json

@@ -20,7 +20,7 @@
     "url": "https://github.com/pro6pp/infer-sdk/issues"
   },
   "sideEffects": false,
-  "version": "0.0.2-beta.12",
+  "version": "0.0.2-beta.14",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,7 +46,7 @@
     "react": ">=16"
   },
   "dependencies": {
-    "@pro6pp/infer-core": "0.0.2-beta.10"
+    "@pro6pp/infer-core": "0.0.2-beta.12"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",