@getmicdrop/svelte-components 5.20.0 → 5.20.2

package/dist/recipes/inputs/phoneInput/CountrySelector.svelte

@@ -1,240 +1,240 @@
-<script lang="ts">
-  import { onMount, tick } from "svelte";
-  import { ChevronDownOutline } from "../../../primitives/Icons";
-  import { typography } from "../../../tokens/typography";
-  import { bloom } from "../../../utils/transitions.js";
-  import { COUNTRIES, type Country } from "./countryData";
-
-  interface Props {
-    country?: Country;
-    disabled?: boolean;
-    size?: "sm" | "md" | "lg";
-    labels?: {
-      searchPlaceholder?: string;
-      noResults?: string;
-      countrySelector?: string;
-    };
-  }
-
-  const defaultLabels = {
-    searchPlaceholder: 'Search...',
-    noResults: 'No countries found',
-    countrySelector: 'Select country',
-  };
-
-  let {
-    country = $bindable(COUNTRIES.find((c) => c.code === 'US')!),
-    disabled = false,
-    size = "md",
-    labels: userLabels = {},
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let isOpen = $state(false);
-  let searchQuery = $state('');
-  let triggerElement = $state<HTMLButtonElement | null>(null);
-  let dropdownElement = $state<HTMLDivElement | null>(null);
-  let searchInputElement = $state<HTMLInputElement | null>(null);
-  let focusedIndex = $state(-1);
-  let dropdownPosition = $state({ top: 0, left: 0, width: 0 });
-
-  const instanceId = Math.random().toString(36).substring(2, 9);
-
-  let filteredCountries = $derived.by(() => {
-    if (!searchQuery) return COUNTRIES;
-    const q = searchQuery.toLowerCase();
-    return COUNTRIES.filter(
-      (c) =>
-        c.name.toLowerCase().includes(q) ||
-        c.dialCode.includes(q) ||
-        c.code.toLowerCase().includes(q)
-    );
-  });
-
-  const sizeMap = {
-    sm: 'h-9 px-2 text-sm gap-1',
-    md: 'h-10 px-2.5 text-sm gap-1.5',
-    lg: 'h-12 px-3 text-base gap-2',
-  } as const;
-
-  let sizeClass = $derived(sizeMap[size] || sizeMap.md);
-
-  function updateDropdownPosition() {
-    if (!triggerElement) return;
-    const rect = triggerElement.getBoundingClientRect();
-    dropdownPosition = {
-      top: rect.bottom + 4,
-      left: rect.left,
-      width: Math.max(280, rect.width),
-    };
-  }
-
-  async function toggle() {
-    if (disabled) return;
-    isOpen = !isOpen;
-    if (isOpen) {
-      searchQuery = '';
-      focusedIndex = -1;
-      window.dispatchEvent(new CustomEvent('select-opened', { detail: { instanceId } }));
-      await tick();
-      updateDropdownPosition();
-      searchInputElement?.focus();
-    }
-  }
-
-  function handleOtherSelectOpened(event: Event) {
-    const customEvent = event as CustomEvent<{ instanceId: string }>;
-    if (customEvent.detail.instanceId !== instanceId && isOpen) {
-      close();
-    }
-  }
-
-  function close() {
-    isOpen = false;
-    searchQuery = '';
-    focusedIndex = -1;
-  }
-
-  function selectCountry(c: Country) {
-    country = c;
-    close();
-    triggerElement?.focus();
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (disabled) return;
-
-    switch (event.key) {
-      case "Enter":
-        event.preventDefault();
-        if (isOpen && focusedIndex >= 0 && focusedIndex < filteredCountries.length) {
-          selectCountry(filteredCountries[focusedIndex]);
-        } else if (!isOpen) {
-          toggle();
-        }
-        break;
-      case "ArrowDown":
-        event.preventDefault();
-        if (!isOpen) {
-          toggle();
-        } else {
-          focusedIndex = Math.min(focusedIndex + 1, filteredCountries.length - 1);
-          scrollToFocused();
-        }
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        if (isOpen) {
-          focusedIndex = Math.max(focusedIndex - 1, 0);
-          scrollToFocused();
-        }
-        break;
-      case "Escape":
-        event.preventDefault();
-        close();
-        triggerElement?.focus();
-        break;
-      case "Tab":
-        close();
-        break;
-    }
-  }
-
-  function scrollToFocused() {
-    tick().then(() => {
-      const el = dropdownElement?.querySelector(`[data-index="${focusedIndex}"]`);
-      el?.scrollIntoView({ block: 'nearest' });
-    });
-  }
-
-  function handleClickOutside(event: MouseEvent) {
-    if (!isOpen) return;
-    const target = event.target as Node;
-    const clickedOutsideTrigger = triggerElement && !triggerElement.contains(target);
-    const clickedOutsideDropdown = !dropdownElement || !dropdownElement.contains(target);
-    if (clickedOutsideTrigger && clickedOutsideDropdown) {
-      close();
-    }
-  }
-
-  onMount(() => {
-    document.addEventListener("click", handleClickOutside, true);
-    window.addEventListener("select-opened", handleOtherSelectOpened);
-    window.addEventListener("scroll", updateDropdownPosition, true);
-    window.addEventListener("resize", updateDropdownPosition);
-
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true);
-      window.removeEventListener("select-opened", handleOtherSelectOpened);
-      window.removeEventListener("scroll", updateDropdownPosition, true);
-      window.removeEventListener("resize", updateDropdownPosition);
-    };
-  });
-</script>
-
-<div class="relative shrink-0">
-  <button
-    type="button"
-    bind:this={triggerElement}
-    class="flex items-center {sizeClass} bg-gray-50 dark:bg-gray-800 border border-r-0 rounded-l-lg cursor-pointer transition-colors text-left focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
-    {disabled}
-    aria-haspopup="listbox"
-    aria-expanded={isOpen}
-    aria-label={labels.countrySelector}
-    onclick={toggle}
-    onkeydown={handleKeydown}
-  >
-    <span class="text-lg leading-none">{country.flag}</span>
-    <span class={`${typography.sm} whitespace-nowrap`}>{country.dialCode}</span>
-    <ChevronDownOutline class="w-3 h-3 shrink-0 {typography.iconMuted} transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
-  </button>
-
-  {#if isOpen}
-    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-    <div
-      bind:this={dropdownElement}
-      class="fixed z-[100] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg overflow-hidden"
-      style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
-      role="listbox"
-      tabindex="-1"
-      aria-label={labels.countrySelector}
-      transition:bloom={{ origin: "top left" }}
-    >
-      <!-- Search -->
-      <div class="p-2 border-b border-gray-200 dark:border-gray-600">
-        <input
-          bind:this={searchInputElement}
-          type="text"
-          class="w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white focus:outline-hidden focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-400 dark:placeholder-gray-500"
-          placeholder={labels.searchPlaceholder}
-          bind:value={searchQuery}
-          onkeydown={handleKeydown}
-        />
-      </div>
-
-      <!-- List -->
-      <div class="max-h-60 overflow-y-auto py-1">
-        {#each filteredCountries as c, idx}
-          <!-- svelte-ignore a11y_click_events_have_key_events -->
-          <li
-            class={`flex items-center gap-3 px-3 py-2 cursor-pointer ${typography.sm} transition-colors ${c.code === country.code ? '' : typography.textMuted} ${idx === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
-            role="option"
-            aria-selected={c.code === country.code}
-            data-index={idx}
-            onclick={() => selectCountry(c)}
-            onmouseenter={() => (focusedIndex = idx)}
-          >
-            <span class="text-lg leading-none">{c.flag}</span>
-            <span class="flex-1">{c.name}</span>
-            <span class={typography.textMuted}>{c.dialCode}</span>
-          </li>
-        {:else}
-          <div class={`px-3 py-4 text-center ${typography.textMuted}`}>
-            {labels.noResults}
-          </div>
-        {/each}
-      </div>
-    </div>
-  {/if}
-</div>
+<script lang="ts">
+  import { onMount, tick } from "svelte";
+  import { ChevronDownOutline } from "../../../primitives/Icons";
+  import { typography } from "../../../tokens/typography";
+  import { bloom } from "../../../utils/transitions.js";
+  import { COUNTRIES, type Country } from "./countryData";
+
+  interface Props {
+    country?: Country;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    labels?: {
+      searchPlaceholder?: string;
+      noResults?: string;
+      countrySelector?: string;
+    };
+  }
+
+  const defaultLabels = {
+    searchPlaceholder: 'Search...',
+    noResults: 'No countries found',
+    countrySelector: 'Select country',
+  };
+
+  let {
+    country = $bindable(COUNTRIES.find((c) => c.code === 'US')!),
+    disabled = false,
+    size = "md",
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let isOpen = $state(false);
+  let searchQuery = $state('');
+  let triggerElement = $state<HTMLButtonElement | null>(null);
+  let dropdownElement = $state<HTMLDivElement | null>(null);
+  let searchInputElement = $state<HTMLInputElement | null>(null);
+  let focusedIndex = $state(-1);
+  let dropdownPosition = $state({ top: 0, left: 0, width: 0 });
+
+  const instanceId = Math.random().toString(36).substring(2, 9);
+
+  let filteredCountries = $derived.by(() => {
+    if (!searchQuery) return COUNTRIES;
+    const q = searchQuery.toLowerCase();
+    return COUNTRIES.filter(
+      (c) =>
+        c.name.toLowerCase().includes(q) ||
+        c.dialCode.includes(q) ||
+        c.code.toLowerCase().includes(q)
+    );
+  });
+
+  const sizeMap = {
+    sm: 'h-9 px-2 text-sm gap-1',
+    md: 'h-10 px-2.5 text-sm gap-1.5',
+    lg: 'h-12 px-3 text-base gap-2',
+  } as const;
+
+  let sizeClass = $derived(sizeMap[size] || sizeMap.md);
+
+  function updateDropdownPosition() {
+    if (!triggerElement) return;
+    const rect = triggerElement.getBoundingClientRect();
+    dropdownPosition = {
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: Math.max(280, rect.width),
+    };
+  }
+
+  async function toggle() {
+    if (disabled) return;
+    isOpen = !isOpen;
+    if (isOpen) {
+      searchQuery = '';
+      focusedIndex = -1;
+      window.dispatchEvent(new CustomEvent('select-opened', { detail: { instanceId } }));
+      await tick();
+      updateDropdownPosition();
+      searchInputElement?.focus();
+    }
+  }
+
+  function handleOtherSelectOpened(event: Event) {
+    const customEvent = event as CustomEvent<{ instanceId: string }>;
+    if (customEvent.detail.instanceId !== instanceId && isOpen) {
+      close();
+    }
+  }
+
+  function close() {
+    isOpen = false;
+    searchQuery = '';
+    focusedIndex = -1;
+  }
+
+  function selectCountry(c: Country) {
+    country = c;
+    close();
+    triggerElement?.focus();
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (disabled) return;
+
+    switch (event.key) {
+      case "Enter":
+        event.preventDefault();
+        if (isOpen && focusedIndex >= 0 && focusedIndex < filteredCountries.length) {
+          selectCountry(filteredCountries[focusedIndex]);
+        } else if (!isOpen) {
+          toggle();
+        }
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        if (!isOpen) {
+          toggle();
+        } else {
+          focusedIndex = Math.min(focusedIndex + 1, filteredCountries.length - 1);
+          scrollToFocused();
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (isOpen) {
+          focusedIndex = Math.max(focusedIndex - 1, 0);
+          scrollToFocused();
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        close();
+        triggerElement?.focus();
+        break;
+      case "Tab":
+        close();
+        break;
+    }
+  }
+
+  function scrollToFocused() {
+    tick().then(() => {
+      const el = dropdownElement?.querySelector(`[data-index="${focusedIndex}"]`);
+      el?.scrollIntoView({ block: 'nearest' });
+    });
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (!isOpen) return;
+    const target = event.target as Node;
+    const clickedOutsideTrigger = triggerElement && !triggerElement.contains(target);
+    const clickedOutsideDropdown = !dropdownElement || !dropdownElement.contains(target);
+    if (clickedOutsideTrigger && clickedOutsideDropdown) {
+      close();
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    window.addEventListener("select-opened", handleOtherSelectOpened);
+    window.addEventListener("scroll", updateDropdownPosition, true);
+    window.addEventListener("resize", updateDropdownPosition);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+      window.removeEventListener("select-opened", handleOtherSelectOpened);
+      window.removeEventListener("scroll", updateDropdownPosition, true);
+      window.removeEventListener("resize", updateDropdownPosition);
+    };
+  });
+</script>
+
+<div class="relative shrink-0">
+  <button
+    type="button"
+    bind:this={triggerElement}
+    class="flex items-center {sizeClass} bg-gray-50 dark:bg-gray-800 border border-r-0 rounded-l-lg cursor-pointer transition-colors text-left focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    {disabled}
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    aria-label={labels.countrySelector}
+    onclick={toggle}
+    onkeydown={handleKeydown}
+  >
+    <span class="text-lg leading-none">{country.flag}</span>
+    <span class={`${typography.sm} whitespace-nowrap`}>{country.dialCode}</span>
+    <ChevronDownOutline class="w-3 h-3 shrink-0 {typography.iconMuted} transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+  </button>
+
+  {#if isOpen}
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <div
+      bind:this={dropdownElement}
+      class="fixed z-[100] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg overflow-hidden"
+      style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
+      role="listbox"
+      tabindex="-1"
+      aria-label={labels.countrySelector}
+      transition:bloom={{ origin: "top left" }}
+    >
+      <!-- Search -->
+      <div class="p-2 border-b border-gray-200 dark:border-gray-600">
+        <input
+          bind:this={searchInputElement}
+          type="text"
+          class="w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white focus:outline-hidden focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-400 dark:placeholder-gray-500"
+          placeholder={labels.searchPlaceholder}
+          bind:value={searchQuery}
+          onkeydown={handleKeydown}
+        />
+      </div>
+
+      <!-- List -->
+      <div class="max-h-60 overflow-y-auto py-1">
+        {#each filteredCountries as c, idx}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <li
+            class={`flex items-center gap-3 px-3 py-2 cursor-pointer ${typography.sm} transition-colors ${c.code === country.code ? '' : typography.textMuted} ${idx === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
+            role="option"
+            aria-selected={c.code === country.code}
+            data-index={idx}
+            onclick={() => selectCountry(c)}
+            onmouseenter={() => (focusedIndex = idx)}
+          >
+            <span class="text-lg leading-none">{c.flag}</span>
+            <span class="flex-1">{c.name}</span>
+            <span class={typography.textMuted}>{c.dialCode}</span>
+          </li>
+        {:else}
+          <div class={`px-3 py-4 text-center ${typography.textMuted}`}>
+            {labels.noResults}
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>