@getmicdrop/svelte-components 5.5.5 → 5.6.0

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte

@@ -1,49 +1,49 @@
-<script lang="ts">
-  import { SearchOutline } from "../../../primitives/Icons";
-  import * as GMaps from '@googlemaps/js-api-loader';
-  import { PUBLIC_GOOGLE_MAPS_API_KEY } from '../../../config.js';
-  import { typography } from '../../../tokens/typography';
-  const { Loader } = GMaps;
-
-  interface Props {
-    fetchFields?: string[];
-    placeholder?: string;
-    language?: string;
-    region?: string;
-    autocomplete?: string;
-    initialValue?: string;
-    onResponse?: (data: any) => void;
-    onError?: (error: string) => void;
-    mode?: 'full' | 'cityState';
-    animateFocus?: boolean;
-    disabled?: boolean;
-  }
-
-  let {
-    fetchFields = ['formattedAddress', 'addressComponents'],
-    placeholder = $bindable('Search for location...'),
-    language = 'en-US',
-    region = 'US',
-    autocomplete = 'off',
-    initialValue = '',
-    onResponse = () => {},
-    onError = () => {},
-    mode = 'full',
-    animateFocus = true,
-    disabled = false,
-  }: Props = $props();
-
-  let shouldAnimate = $derived(animateFocus && !disabled);
-
-  let inputRef: HTMLInputElement;
-  let containerRef: HTMLDivElement;
-  let currentSuggestion = $state(-1);
-  let title = $state('');
-  let results = $state<any[]>([]);
-  let token: any;
-  let loader: GMaps.Loader;
-  let placesApi: { [key: string]: any } = {};
-
+<script lang="ts">
+  import { SearchOutline } from "../../../primitives/Icons";
+  import * as GMaps from '@googlemaps/js-api-loader';
+  import { PUBLIC_GOOGLE_MAPS_API_KEY } from '../../../config.js';
+  import { typography } from '../../../tokens/typography';
+  const { Loader } = GMaps;
+
+  interface Props {
+    fetchFields?: string[];
+    placeholder?: string;
+    language?: string;
+    region?: string;
+    autocomplete?: string;
+    initialValue?: string;
+    onResponse?: (data: any) => void;
+    onError?: (error: string) => void;
+    mode?: 'full' | 'cityState';
+    animateFocus?: boolean;
+    disabled?: boolean;
+  }
+
+  let {
+    fetchFields = ['formattedAddress', 'addressComponents'],
+    placeholder = $bindable('Search for location...'),
+    language = 'en-US',
+    region = 'US',
+    autocomplete = 'off',
+    initialValue = '',
+    onResponse = () => {},
+    onError = () => {},
+    mode = 'full',
+    animateFocus = true,
+    disabled = false,
+  }: Props = $props();
+
+  let shouldAnimate = $derived(animateFocus && !disabled);
+
+  let inputRef: HTMLInputElement;
+  let containerRef: HTMLDivElement;
+  let currentSuggestion = $state(-1);
+  let title = $state('');
+  let results = $state<any[]>([]);
+  let token: any;
+  let loader: GMaps.Loader;
+  let placesApi: { [key: string]: any } = {};
+
   let request = $state<{
     input: string;
     language: string;
@@ -55,283 +55,283 @@
     region: (() => region)(),
     sessionToken: '',
   });
-
-  let isInitialized = $state(false);
-
-  $effect(() => {
-    if (initialValue && !isInitialized) {
-      request.input = initialValue;
-      title = initialValue;
-      isInitialized = true;
-    }
-  });
-
-  $effect(() => {
-    if (mode === 'cityState' && placeholder === 'Search for location...') {
-      placeholder = 'Search for city, state...';
-    }
-  });
-
-  const reset = () => {
-    currentSuggestion = -1;
-    results = [];
-    refreshToken(request).catch(() => {});
-  };
-
-  const makeAcRequest = async (
-    event: Event & { currentTarget: HTMLInputElement }
-  ): Promise<void> => {
-    const target = event.currentTarget as HTMLInputElement;
-    if (target?.value === '') {
-      title = '';
-      request.input = '';
-      results = [];
-      return;
-    }
-
-    title = target.value;
-    request.input = target.value;
-
-    try {
-      const { suggestions } =
-        await placesApi.AutocompleteSuggestion.fetchAutocompleteSuggestions(
-          request
-        );
-
-      if (mode === 'cityState') {
-        results = suggestions
-          .filter((s: any) => {
-            const types = s.placePrediction.types || [];
-
-            // Accept cities (locality) and city-level neighborhoods (sublocality)
-            // like Van Nuys, North Hollywood - but not states or counties
-            return types.some(
-              (type: string) =>
-                type === 'locality' ||
-                type === 'sublocality' ||
-                type === 'sublocality_level_1'
-            );
-          })
-          .map((s: any) => {
-            let displayText = s.placePrediction.text.toString();
-
-            // Format as "City, State" (first two parts)
-            const parts = displayText.split(', ');
-            if (parts.length >= 2) {
-              displayText = parts.slice(0, 2).join(', ');
-            }
-
-            return {
-              to_place: s.placePrediction.toPlace(),
-              text: displayText,
-              originalText: s.placePrediction.text.toString(),
-            };
-          });
-      } else {
-        results = suggestions.map((s: any) => ({
-          to_place: s.placePrediction.toPlace(),
-          text: s.placePrediction.text.toString(),
-        }));
-      }
-    } catch (e: any) {
-      onError(
-        (e.name || 'An error occurred') +
-          ' - ' +
-          (e.message || 'see console for details.')
-      );
-    }
-  };
-
-  const onPlaceSelected = async (
-    place: any,
-    originalText?: string
-  ): Promise<void> => {
-    results = [];
-    currentSuggestion = -1;
-
-    try {
-      await place.fetchFields({
-        fields: fetchFields,
-      });
-      let placeData = place.toJSON();
-      request.input = originalText || placeData.text || '';
-      title = originalText || placeData.text || '';
-      onResponse(placeData);
-    } catch (e: any) {
-      onError(
-        (e.name || 'An error occurred') +
-          ' - ' +
-          (e.message || 'error fetching place details')
-      );
-    }
-
-    setTimeout(() => {
-      refreshToken(request).catch(() => {});
-    }, 100);
-  };
-
-  const refreshToken = async (req: any) => {
-    try {
-      token = new placesApi.AutocompleteSessionToken();
-      req.sessionToken = token;
-      return req;
-    } catch (e: any) {
-      onError(
-        (e.name || 'An error occurred') +
-          ' - ' +
-          (e.message || 'error fetch token')
-      );
-      return req;
-    }
-  };
-
-  function onKeyDown(e: KeyboardEvent) {
-    if (results.length === 0) {
-      return;
-    }
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      if (currentSuggestion === -1) {
-        currentSuggestion = 0;
-      } else {
-        currentSuggestion =
-          currentSuggestion < results.length - 1 ? currentSuggestion + 1 : 0;
-      }
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      if (currentSuggestion === -1) {
-        currentSuggestion = results.length - 1;
-      } else {
-        currentSuggestion =
-          currentSuggestion > 0 ? currentSuggestion - 1 : results.length - 1;
-      }
-    } else if (e.key === 'Enter') {
-      e.preventDefault();
-      if (currentSuggestion >= 0 && currentSuggestion < results.length) {
-        onPlaceSelected(
-          results[currentSuggestion].to_place,
-          results[currentSuggestion].text
-        );
-      }
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      reset();
-    }
-  }
-
-  function handleClickOutside(event: MouseEvent) {
-    if (containerRef && !containerRef.contains(event.target as Node)) {
-      reset();
-    }
-  }
-
-  $effect(() => {
-    if (initialValue) {
-      request.input = initialValue;
-      title = initialValue;
-    }
-
-    // Add click outside listener
-    document.addEventListener('click', handleClickOutside);
-
-    // Initialize Google Maps API
-    const initGoogleMaps = async () => {
-      if (!PUBLIC_GOOGLE_MAPS_API_KEY) {
-        onError('Google Maps API key is required');
-        return;
-      }
-
-      try {
-        loader = new Loader({
-          apiKey: PUBLIC_GOOGLE_MAPS_API_KEY,
-          version: 'weekly',
-          libraries: ['places'],
-        });
-
-        const { AutocompleteSessionToken, AutocompleteSuggestion } =
-          await loader.importLibrary('places');
-        placesApi.AutocompleteSessionToken = AutocompleteSessionToken;
-        placesApi.AutocompleteSuggestion = AutocompleteSuggestion;
-        token = new placesApi.AutocompleteSessionToken();
-        request.sessionToken = token;
-      } catch (e: any) {
-        onError(
-          (e.name || 'An error occurred') +
-            ' - ' +
-            (e.message || 'Error loading Google Maps API')
-        );
-      }
-    };
-
-    initGoogleMaps();
-
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  });
-</script>
-
-<div class="w-full">
-  <div
-    bind:this={containerRef}
-    class="relative rounded-lg {shouldAnimate ? 'transition-transform duration-200 focus-within:scale-[1.01]' : ''}"
-  >
-    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 z-10">
-      <SearchOutline class={`w-5 h-5 ${typography.iconMuted}`} />
-    </div>
-
-    <input
-      bind:this={inputRef}
-      type="text"
-      name="location"
-      class="block w-full h-10 pl-10 pr-2.5 py-2.5 bg-gray-50 border border-gray-300 rounded-lg {typography.label}
-             focus:ring-blue-500 focus:border-blue-500 focus:outline-none
-             hover:border-blue-500
-             disabled:opacity-50 disabled:cursor-not-allowed
-             placeholder:text-gray-500
-             dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
-             dark:focus:ring-blue-500 dark:focus:border-blue-500
-             dark:hover:border-blue-500"
-      {placeholder}
-      autocomplete={autocomplete as 'off' | 'on'}
-      {disabled}
-      aria-controls="options"
-      bind:value={title}
-      oninput={makeAcRequest}
-      onkeydown={onKeyDown}
-    />
-
-    {#if results.length > 0}
-      <div class="absolute inset-y-0 right-0 hidden md:flex items-center p-1.5 gap-1">
-        <kbd class="inline-flex items-center justify-center px-1 border border-gray-300 rounded {typography.xsMuted} bg-white dark:bg-gray-800 dark:border-gray-600">Esc</kbd>
-        <kbd class="inline-flex items-center justify-center w-6 border border-gray-300 rounded {typography.xsMuted} bg-white dark:bg-gray-800 dark:border-gray-600">&uArr;</kbd>
-        <kbd class="inline-flex items-center justify-center w-6 border border-gray-300 rounded {typography.xsMuted} bg-white dark:bg-gray-800 dark:border-gray-600">&dArr;</kbd>
-      </div>
-
-      <ul
-        class="absolute top-full left-0 right-0 z-50 mt-1 py-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto
-               dark:bg-gray-800 dark:border-gray-600"
-        id="options"
-      >
-        {#each results as place, i}
-          <li
-            class="cursor-pointer transition-colors duration-100 {typography.body}
-                   {i === currentSuggestion ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-100 dark:hover:bg-gray-700'}"
-            id="option-{i + 1}"
-          >
-            <button
-              type="button"
-              class="block w-full text-left px-4 py-3 bg-transparent border-none cursor-pointer {typography.sm}
-                     focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700"
-              tabindex={i + 1}
-              onclick={() => onPlaceSelected(place.to_place, place.text)}
-            >
-              <span class="font-medium">{place.text}</span>
-            </button>
-          </li>
-        {/each}
-      </ul>
-    {/if}
-  </div>
-</div>
+
+  let isInitialized = $state(false);
+
+  $effect(() => {
+    if (initialValue && !isInitialized) {
+      request.input = initialValue;
+      title = initialValue;
+      isInitialized = true;
+    }
+  });
+
+  $effect(() => {
+    if (mode === 'cityState' && placeholder === 'Search for location...') {
+      placeholder = 'Search for city, state...';
+    }
+  });
+
+  const reset = () => {
+    currentSuggestion = -1;
+    results = [];
+    refreshToken(request).catch(() => {});
+  };
+
+  const makeAcRequest = async (
+    event: Event & { currentTarget: HTMLInputElement }
+  ): Promise<void> => {
+    const target = event.currentTarget as HTMLInputElement;
+    if (target?.value === '') {
+      title = '';
+      request.input = '';
+      results = [];
+      return;
+    }
+
+    title = target.value;
+    request.input = target.value;
+
+    try {
+      const { suggestions } =
+        await placesApi.AutocompleteSuggestion.fetchAutocompleteSuggestions(
+          request
+        );
+
+      if (mode === 'cityState') {
+        results = suggestions
+          .filter((s: any) => {
+            const types = s.placePrediction.types || [];
+
+            // Accept cities (locality) and city-level neighborhoods (sublocality)
+            // like Van Nuys, North Hollywood - but not states or counties
+            return types.some(
+              (type: string) =>
+                type === 'locality' ||
+                type === 'sublocality' ||
+                type === 'sublocality_level_1'
+            );
+          })
+          .map((s: any) => {
+            let displayText = s.placePrediction.text.toString();
+
+            // Format as "City, State" (first two parts)
+            const parts = displayText.split(', ');
+            if (parts.length >= 2) {
+              displayText = parts.slice(0, 2).join(', ');
+            }
+
+            return {
+              to_place: s.placePrediction.toPlace(),
+              text: displayText,
+              originalText: s.placePrediction.text.toString(),
+            };
+          });
+      } else {
+        results = suggestions.map((s: any) => ({
+          to_place: s.placePrediction.toPlace(),
+          text: s.placePrediction.text.toString(),
+        }));
+      }
+    } catch (e: any) {
+      onError(
+        (e.name || 'An error occurred') +
+          ' - ' +
+          (e.message || 'see console for details.')
+      );
+    }
+  };
+
+  const onPlaceSelected = async (
+    place: any,
+    originalText?: string
+  ): Promise<void> => {
+    results = [];
+    currentSuggestion = -1;
+
+    try {
+      await place.fetchFields({
+        fields: fetchFields,
+      });
+      let placeData = place.toJSON();
+      request.input = originalText || placeData.text || '';
+      title = originalText || placeData.text || '';
+      onResponse(placeData);
+    } catch (e: any) {
+      onError(
+        (e.name || 'An error occurred') +
+          ' - ' +
+          (e.message || 'error fetching place details')
+      );
+    }
+
+    setTimeout(() => {
+      refreshToken(request).catch(() => {});
+    }, 100);
+  };
+
+  const refreshToken = async (req: any) => {
+    try {
+      token = new placesApi.AutocompleteSessionToken();
+      req.sessionToken = token;
+      return req;
+    } catch (e: any) {
+      onError(
+        (e.name || 'An error occurred') +
+          ' - ' +
+          (e.message || 'error fetch token')
+      );
+      return req;
+    }
+  };
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (results.length === 0) {
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (currentSuggestion === -1) {
+        currentSuggestion = 0;
+      } else {
+        currentSuggestion =
+          currentSuggestion < results.length - 1 ? currentSuggestion + 1 : 0;
+      }
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (currentSuggestion === -1) {
+        currentSuggestion = results.length - 1;
+      } else {
+        currentSuggestion =
+          currentSuggestion > 0 ? currentSuggestion - 1 : results.length - 1;
+      }
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (currentSuggestion >= 0 && currentSuggestion < results.length) {
+        onPlaceSelected(
+          results[currentSuggestion].to_place,
+          results[currentSuggestion].text
+        );
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      reset();
+    }
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (containerRef && !containerRef.contains(event.target as Node)) {
+      reset();
+    }
+  }
+
+  $effect(() => {
+    if (initialValue) {
+      request.input = initialValue;
+      title = initialValue;
+    }
+
+    // Add click outside listener
+    document.addEventListener('click', handleClickOutside);
+
+    // Initialize Google Maps API
+    const initGoogleMaps = async () => {
+      if (!PUBLIC_GOOGLE_MAPS_API_KEY) {
+        onError('Google Maps API key is required');
+        return;
+      }
+
+      try {
+        loader = new Loader({
+          apiKey: PUBLIC_GOOGLE_MAPS_API_KEY,
+          version: 'weekly',
+          libraries: ['places'],
+        });
+
+        const { AutocompleteSessionToken, AutocompleteSuggestion } =
+          await loader.importLibrary('places');
+        placesApi.AutocompleteSessionToken = AutocompleteSessionToken;
+        placesApi.AutocompleteSuggestion = AutocompleteSuggestion;
+        token = new placesApi.AutocompleteSessionToken();
+        request.sessionToken = token;
+      } catch (e: any) {
+        onError(
+          (e.name || 'An error occurred') +
+            ' - ' +
+            (e.message || 'Error loading Google Maps API')
+        );
+      }
+    };
+
+    initGoogleMaps();
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+</script>
+
+<div class="w-full">
+  <div
+    bind:this={containerRef}
+    class="relative rounded-lg {shouldAnimate ? 'transition-transform duration-200 focus-within:scale-[1.01]' : ''}"
+  >
+    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 z-10">
+      <SearchOutline class={`w-5 h-5 ${typography.iconMuted}`} />
+    </div>
+
+    <input
+      bind:this={inputRef}
+      type="text"
+      name="location"
+      class="block w-full h-10 pl-10 pr-2.5 py-2.5 bg-gray-50 border border-gray-300 rounded-lg {typography.label}
+             focus:ring-blue-500 focus:border-blue-500 focus:outline-none
+             hover:border-blue-500
+             disabled:opacity-50 disabled:cursor-not-allowed
+             placeholder:text-gray-500
+             dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
+             dark:focus:ring-blue-500 dark:focus:border-blue-500
+             dark:hover:border-blue-500"
+      {placeholder}
+      autocomplete={autocomplete as 'off' | 'on'}
+      {disabled}
+      aria-controls="options"
+      bind:value={title}
+      oninput={makeAcRequest}
+      onkeydown={onKeyDown}
+    />
+
+    {#if results.length > 0}
+      <div class="absolute inset-y-0 right-0 hidden md:flex items-center p-1.5 gap-1">
+        <kbd class="inline-flex items-center justify-center px-1 border border-gray-300 rounded {typography.xsMuted} bg-white dark:bg-gray-800 dark:border-gray-600">Esc</kbd>
+        <kbd class="inline-flex items-center justify-center w-6 border border-gray-300 rounded {typography.xsMuted} bg-white dark:bg-gray-800 dark:border-gray-600">&uArr;</kbd>
+        <kbd class="inline-flex items-center justify-center w-6 border border-gray-300 rounded {typography.xsMuted} bg-white dark:bg-gray-800 dark:border-gray-600">&dArr;</kbd>
+      </div>
+
+      <ul
+        class="absolute top-full left-0 right-0 z-50 mt-1 py-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto
+               dark:bg-gray-800 dark:border-gray-600"
+        id="options"
+      >
+        {#each results as place, i}
+          <li
+            class="cursor-pointer transition-colors duration-100 {typography.body}
+                   {i === currentSuggestion ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-100 dark:hover:bg-gray-700'}"
+            id="option-{i + 1}"
+          >
+            <button
+              type="button"
+              class="block w-full text-left px-4 py-3 bg-transparent border-none cursor-pointer {typography.sm}
+                     focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700"
+              tabindex={i + 1}
+              onclick={() => onPlaceSelected(place.to_place, place.text)}
+            >
+              <span class="font-medium">{place.text}</span>
+            </button>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+</div>