@reuters-graphics/graphics-components 3.3.4 → 3.4.0

package/dist/components/Geocoder/Geocoder.svelte

@@ -0,0 +1,303 @@
+<!-- @component `Geocoder` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-controls-geocoder--docs) -->
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { geocode, type GeocodeFeature, type GeocodeOptions } from './geocode';
+  import MagnifyingGlass from '../SearchInput/components/MagnifyingGlass.svelte';
+  import X from '../SearchInput/components/X.svelte';
+
+  interface Props extends Omit<GeocodeOptions, 'accessToken'> {
+    /** Mapbox public access token. */
+    accessToken: string;
+    /** Placeholder text shown in the search input. */
+    searchPlaceholder?: string;
+    /** Callback fired when a location is selected from the results. */
+    onselect?: (location: { lng: number; lat: number; name: string }) => void;
+  }
+
+  let {
+    accessToken,
+    searchPlaceholder = 'Search for a location',
+    onselect,
+    autocomplete = true,
+    bbox,
+    country,
+    language = ['en'],
+    limit = 5,
+    proximity,
+    types,
+    worldview,
+    permanent,
+    entrances,
+  }: Props = $props();
+
+  let query = $state('');
+  let suggestions: GeocodeFeature[] = $state([]);
+  let selectedIndex = $state(-1);
+  let focused = $state(false);
+
+  let showDropdown = $derived(suggestions.length > 0 && focused);
+
+  const instanceId = Math.random().toString(36).slice(2, 9);
+  const listboxId = `geocoder-listbox-${instanceId}`;
+
+  let inputEl: HTMLInputElement;
+  let debounceTimer: ReturnType<typeof setTimeout>;
+  let abortController: AbortController | null = null;
+
+  function handleInput() {
+    selectedIndex = -1;
+    clearTimeout(debounceTimer);
+    abortController?.abort();
+
+    if (query.length < 2) {
+      suggestions = [];
+      return;
+    }
+
+    debounceTimer = setTimeout(async () => {
+      abortController = new AbortController();
+      try {
+        suggestions = await geocode(
+          query,
+          {
+            accessToken,
+            autocomplete,
+            bbox,
+            country,
+            language,
+            limit,
+            proximity,
+            types,
+            worldview,
+            permanent,
+            entrances,
+          },
+          abortController.signal
+        );
+      } catch (e) {
+        if (e instanceof DOMException && e.name === 'AbortError') return;
+        console.error('Geocoder error:', e);
+      }
+    }, 300);
+  }
+
+  onDestroy(() => {
+    clearTimeout(debounceTimer);
+    abortController?.abort();
+  });
+
+  let active = $derived(query !== '');
+  let statusMessage = $derived(
+    showDropdown ?
+      `${suggestions.length} result${suggestions.length === 1 ? '' : 's'} available`
+    : ''
+  );
+
+  function selectSuggestion(feature: GeocodeFeature) {
+    const { longitude: lng, latitude: lat } = feature.properties.coordinates;
+    query = feature.properties.name;
+    suggestions = [];
+    onselect?.({ lng, lat, name: feature.properties.name });
+  }
+
+  function clear() {
+    query = '';
+    suggestions = [];
+    inputEl?.focus();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!showDropdown) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      selectedIndex = (selectedIndex + 1) % suggestions.length;
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      selectedIndex =
+        selectedIndex <= 0 ? suggestions.length - 1 : selectedIndex - 1;
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (selectedIndex >= 0) selectSuggestion(suggestions[selectedIndex]);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      suggestions = [];
+      selectedIndex = -1;
+    }
+  }
+</script>
+
+<div class="geocoder-input-wrapper">
+  <div class="geocoder-icon">
+    <MagnifyingGlass />
+  </div>
+  <input
+    bind:this={inputEl}
+    bind:value={query}
+    oninput={handleInput}
+    onkeydown={handleKeydown}
+    onfocus={() => (focused = true)}
+    onblur={() => (focused = false)}
+    type="text"
+    autocapitalize="words"
+    autocomplete="off"
+    enterkeyhint="search"
+    spellcheck="false"
+    role="combobox"
+    aria-expanded={showDropdown}
+    aria-label={searchPlaceholder}
+    aria-controls={showDropdown ? listboxId : undefined}
+    aria-activedescendant={selectedIndex >= 0 ?
+      `${listboxId}-option-${selectedIndex}`
+    : undefined}
+    aria-autocomplete="list"
+    placeholder={searchPlaceholder}
+    class="geocoder-input"
+  />
+  {#if active}
+    <button
+      class="geocoder-clear"
+      type="button"
+      aria-label="Clear search"
+      onmousedown={(e) => {
+        e.preventDefault();
+        clear();
+      }}
+    >
+      <X />
+    </button>
+  {/if}
+  <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+    {statusMessage}
+  </div>
+  {#if showDropdown}
+    <ul class="geocoder-results" role="listbox" id={listboxId}>
+      {#each suggestions as suggestion, i}
+        <li
+          id="{listboxId}-option-{i}"
+          role="option"
+          aria-selected={i === selectedIndex}
+          class:active={i === selectedIndex}
+          onmousedown={(e) => {
+            e.preventDefault();
+            selectSuggestion(suggestion);
+          }}
+          onmouseenter={() => (selectedIndex = i)}
+        >
+          {suggestion.properties.full_address || suggestion.properties.name}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+.geocoder-input-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.geocoder-icon {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  transform: translateY(-50%);
+  width: 22px;
+  height: 22px;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.geocoder-clear {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.geocoder-input {
+  font-family: var(--theme-font-family-sans-serif);
+  font-size: var(--theme-font-size-sm);
+  width: 100%;
+  height: 46px;
+  line-height: 22px;
+  padding: 12px 36px 12px 42px;
+  border: 1px solid var(--theme-colour-brand-rules);
+  border-radius: 0.25rem;
+  background: var(--theme-colour-background);
+  box-sizing: border-box;
+}
+.geocoder-input::placeholder {
+  color: var(--theme-colour-text-secondary);
+}
+
+.geocoder-results {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin: 4px 0 0;
+  padding: 0;
+  list-style: none;
+  background: var(--theme-colour-background);
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 6px var(--theme-colour-brand-shadow);
+  z-index: 10000;
+  overflow: hidden;
+}
+
+.geocoder-results li {
+  padding: 10px 14px;
+  cursor: pointer;
+  font-family: var(--theme-font-family-sans-serif);
+  font-size: var(--theme-font-size-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.geocoder-results li.active {
+  background-color: var(--tr-hover-background-grey);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (max-width: 767px) {
+  .geocoder-icon {
+    left: 10px;
+    width: 20px;
+    height: 20px;
+  }
+  .geocoder-input {
+    height: 42px;
+    font-size: var(--theme-font-size-xs);
+    padding: 10px 12px 10px 38px;
+    border-radius: 0.25rem;
+  }
+}</style>

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

@@ -0,0 +1,17 @@
+import { type GeocodeOptions } from './geocode';
+interface Props extends Omit<GeocodeOptions, 'accessToken'> {
+    /** Mapbox public access token. */
+    accessToken: string;
+    /** Placeholder text shown in the search input. */
+    searchPlaceholder?: string;
+    /** Callback fired when a location is selected from the results. */
+    onselect?: (location: {
+        lng: number;
+        lat: number;
+        name: string;
+    }) => void;
+}
+/** `Geocoder` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-controls-geocoder--docs) */
+declare const Geocoder: import("svelte").Component<Props, {}, "">;
+type Geocoder = ReturnType<typeof Geocoder>;
+export default Geocoder;

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

@@ -0,0 +1,50 @@
+export type GeocodeFeatureType = 'country' | 'region' | 'postcode' | 'district' | 'place' | 'locality' | 'neighborhood' | 'street' | 'address';
+export interface GeocodeOptions {
+    /** Mapbox public access token. */
+    accessToken: string;
+    /** Return partial prefix matches (true) or exact matches only (false). Defaults to true. */
+    autocomplete?: boolean;
+    /** Limit results to a bounding box: [minLon, minLat, maxLon, maxLat]. Cannot cross the 180th meridian. */
+    bbox?: [number, number, number, number];
+    /** Filter results to one or more countries using ISO 3166-1 alpha-2 codes. */
+    country?: string[];
+    /** IETF language tags for the response. Also influences result scoring. Max 20. */
+    language?: string[];
+    /** Maximum number of results to return (1–10). Defaults to 5. */
+    limit?: number;
+    /** Bias results toward a location: [lon, lat] coordinates or 'ip' to use the request IP. */
+    proximity?: [number, number] | 'ip';
+    /** Filter results by feature type. */
+    types?: GeocodeFeatureType[];
+    /** Geopolitical worldview for boundary representation (e.g. 'us', 'cn', 'in'). Defaults to 'us'. */
+    worldview?: string;
+    /** Set to true if results will be stored/cached permanently. Defaults to false. */
+    permanent?: boolean;
+    /** Return building entrance data when available (public preview). Defaults to false. */
+    entrances?: boolean;
+}
+export interface GeocodeFeature {
+    type: 'Feature';
+    properties: {
+        mapbox_id: string;
+        feature_type: GeocodeFeatureType;
+        name: string;
+        name_preferred?: string;
+        place_formatted?: string;
+        full_address?: string;
+        coordinates: {
+            longitude: number;
+            latitude: number;
+        };
+        context: Record<string, {
+            mapbox_id: string;
+            name: string;
+            [key: string]: unknown;
+        }>;
+    };
+    geometry: {
+        type: 'Point';
+        coordinates: [number, number];
+    };
+}
+export declare function geocode(query: string, options: GeocodeOptions, signal?: AbortSignal): Promise<GeocodeFeature[]>;

package/dist/components/Geocoder/geocode.js

@@ -0,0 +1,34 @@
+const BASE_URL = 'https://api.mapbox.com/search/geocode/v6/forward';
+export async function geocode(query, options, signal) {
+    const params = new URLSearchParams({
+        q: query,
+        access_token: options.accessToken,
+    });
+    if (options.autocomplete !== undefined)
+        params.set('autocomplete', String(options.autocomplete));
+    if (options.bbox)
+        params.set('bbox', options.bbox.join(','));
+    if (options.country)
+        params.set('country', options.country.join(','));
+    if (options.language)
+        params.set('language', options.language.join(','));
+    if (options.limit !== undefined)
+        params.set('limit', String(options.limit));
+    if (options.proximity)
+        params.set('proximity', Array.isArray(options.proximity) ?
+            options.proximity.join(',')
+            : options.proximity);
+    if (options.types)
+        params.set('types', options.types.join(','));
+    if (options.worldview)
+        params.set('worldview', options.worldview);
+    if (options.permanent !== undefined)
+        params.set('permanent', String(options.permanent));
+    if (options.entrances !== undefined)
+        params.set('entrances', String(options.entrances));
+    const res = await fetch(`${BASE_URL}?${params}`, { signal });
+    if (!res.ok)
+        throw new Error(`Geocode request failed: ${res.status}`);
+    const data = await res.json();
+    return data.features ?? [];
+}

package/dist/index.d.ts

@@ -16,6 +16,8 @@ export { default as DocumentCloud } from './components/DocumentCloud/DocumentClo
 export { default as EmbedPreviewerLink } from './components/EmbedPreviewerLink/EmbedPreviewerLink.svelte';
 export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
 export { default as Framer } from './components/Framer/Framer.svelte';
+export { default as Geocoder } from './components/Geocoder/Geocoder.svelte';
+export { geocode } from './components/Geocoder/geocode';
 export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
 export { default as Headline } from './components/Headline/Headline.svelte';
 export { default as Headpile } from './components/Headpile/Headpile.svelte';
@@ -56,3 +58,4 @@ export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.sve
 export { default as Video } from './components/Video/Video.svelte';
 export { default as Visible } from './components/Visible/Visible.svelte';
 export type { ContainerWidth, HeadlineSize, ScrollerVideoInstance, } from './components/@types/global';
+export type { GeocodeOptions, GeocodeFeature, GeocodeFeatureType, } from './components/Geocoder/geocode';

package/dist/index.js

@@ -19,6 +19,8 @@ export { default as DocumentCloud } from './components/DocumentCloud/DocumentClo
 export { default as EmbedPreviewerLink } from './components/EmbedPreviewerLink/EmbedPreviewerLink.svelte';
 export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
 export { default as Framer } from './components/Framer/Framer.svelte';
+export { default as Geocoder } from './components/Geocoder/Geocoder.svelte';
+export { geocode } from './components/Geocoder/geocode';
 export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
 export { default as Headline } from './components/Headline/Headline.svelte';
 export { default as Headpile } from './components/Headpile/Headpile.svelte';

package/package.json

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