@reuters-graphics/graphics-components 3.8.0 → 3.9.0

package/dist/components/Geocoder/Geocoder.svelte

@@ -2,6 +2,7 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
   import { geocode, type GeocodeFeature, type GeocodeOptions } from './geocode';
+  import { normalizeMinLength, normalizeDebounceMs } from './normalize';
   import MagnifyingGlass from '../SearchInput/components/MagnifyingGlass.svelte';
   import X from '../SearchInput/components/X.svelte';
 
@@ -12,12 +13,25 @@
     searchPlaceholder?: string;
     /** Callback fired when a location is selected from the results. */
     onselect?: (location: { lng: number; lat: number; name: string }) => void;
+    /**
+     * Minimum number of characters before a request is made. Raising this
+     * cuts the number of paid geocoding requests per search. Defaults to 2.
+     */
+    minLength?: number;
+    /**
+     * Debounce window in milliseconds between the last keystroke and the
+     * request. Raising this fires fewer requests while the user is still
+     * typing (each request is billed). Defaults to 300.
+     */
+    debounceMs?: number;
   }
 
   let {
     accessToken,
     searchPlaceholder = 'Search for a location',
     onselect,
+    minLength = 2,
+    debounceMs = 300,
     autocomplete = true,
     bbox,
     country,
@@ -44,12 +58,22 @@
   let debounceTimer: ReturnType<typeof setTimeout>;
   let abortController: AbortController | null = null;
 
+  // Normalize the throttling props so a non-numeric value passed via markup
+  // (e.g. `minLength="two"`) can't coerce to NaN and disable the gate — which
+  // would bill a request on every keystroke. Fall back to the documented
+  // defaults, clamped to sane floors.
+  let effectiveMinLength = $derived(normalizeMinLength(minLength));
+  let effectiveDebounceMs = $derived(normalizeDebounceMs(debounceMs));
+
   function handleInput() {
     selectedIndex = -1;
     clearTimeout(debounceTimer);
     abortController?.abort();
 
-    if (query.length < 2) {
+    // Trim first so whitespace-only input (e.g. "  ") doesn't clear the gate
+    // and bill a request for an empty search.
+    const trimmed = query.trim();
+    if (trimmed.length < effectiveMinLength) {
       suggestions = [];
       return;
     }
@@ -58,7 +82,7 @@
       abortController = new AbortController();
       try {
         suggestions = await geocode(
-          query,
+          trimmed,
           {
             accessToken,
             autocomplete,
@@ -78,7 +102,7 @@
         if (e instanceof DOMException && e.name === 'AbortError') return;
         console.error('Geocoder error:', e);
       }
-    }, 300);
+    }, effectiveDebounceMs);
   }
 
   onDestroy(() => {

package/dist/components/Geocoder/Geocoder.svelte.d.ts

@@ -10,6 +10,17 @@ interface Props extends Omit<GeocodeOptions, 'accessToken'> {
         lat: number;
         name: string;
     }) => void;
+    /**
+     * Minimum number of characters before a request is made. Raising this
+     * cuts the number of paid geocoding requests per search. Defaults to 2.
+     */
+    minLength?: number;
+    /**
+     * Debounce window in milliseconds between the last keystroke and the
+     * request. Raising this fires fewer requests while the user is still
+     * typing (each request is billed). Defaults to 300.
+     */
+    debounceMs?: number;
 }
 /** `Geocoder` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-controls-geocoder--docs) */
 declare const Geocoder: import("svelte").Component<Props, {}, "">;

package/dist/components/Geocoder/normalize.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Coercion helpers for the Geocoder's request-throttling props.
+ *
+ * These props can arrive as strings when set via markup (e.g.
+ * `minLength="two"`), so a non-numeric value must not be trusted directly: a
+ * `NaN` would disable the length gate or the debounce and bill a Mapbox request
+ * on every keystroke. Both helpers fall back to the documented defaults and
+ * clamp to sane floors.
+ */
+/**
+ * Coerce a consumer-supplied `minLength` to a safe integer of at least 1.
+ * Invalid or sub-1 values fall back to `fallback` (default 2).
+ */
+export declare function normalizeMinLength(value: unknown, fallback?: number): number;
+/**
+ * Coerce a consumer-supplied `debounceMs` to a finite, non-negative number.
+ * Invalid or negative values fall back to `fallback` (default 300).
+ */
+export declare function normalizeDebounceMs(value: unknown, fallback?: number): number;

package/dist/components/Geocoder/normalize.js

@@ -0,0 +1,25 @@
+/**
+ * Coercion helpers for the Geocoder's request-throttling props.
+ *
+ * These props can arrive as strings when set via markup (e.g.
+ * `minLength="two"`), so a non-numeric value must not be trusted directly: a
+ * `NaN` would disable the length gate or the debounce and bill a Mapbox request
+ * on every keystroke. Both helpers fall back to the documented defaults and
+ * clamp to sane floors.
+ */
+/**
+ * Coerce a consumer-supplied `minLength` to a safe integer of at least 1.
+ * Invalid or sub-1 values fall back to `fallback` (default 2).
+ */
+export function normalizeMinLength(value, fallback = 2) {
+    const n = Number(value);
+    return Number.isFinite(n) && n >= 1 ? Math.floor(n) : fallback;
+}
+/**
+ * Coerce a consumer-supplied `debounceMs` to a finite, non-negative number.
+ * Invalid or negative values fall back to `fallback` (default 300).
+ */
+export function normalizeDebounceMs(value, fallback = 300) {
+    const n = Number(value);
+    return Number.isFinite(n) && n >= 0 ? n : fallback;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",