@getmicdrop/svelte-components 5.19.0 → 5.20.0

package/dist/primitives/Input/Select.svelte

@@ -1,252 +1,252 @@
-<script lang="ts">
-  import { onMount, tick } from "svelte";
-  import { ChevronDownOutline } from "../Icons";
-  import { portal as portalAction } from "../../utils/portal.js";
-  import { typography } from "../../tokens/typography";
-  import { formControlSizes } from "../../tokens/sizing";
-  import { bloom } from "../../utils/transitions.js";
-
-  interface SelectItem {
-    value: string;
-    name: string;
-  }
-
-  interface Props {
-    value?: string;
-    items?: SelectItem[];
-    placeholder?: string;
-    label?: string;
-    required?: boolean;
-    disabled?: boolean;
-    error?: string;
-    name?: string;
-    id?: string;
-    size?: "sm" | "md" | "lg";
-    portal?: boolean;
-    onchange?: (detail: { value: string; item: SelectItem }) => void;
-    [key: string]: unknown;
-  }
-
-  let {
-    value = $bindable(""),
-    items = [],
-    placeholder = "",
-    label = "",
-    required = false,
-    disabled = false,
-    error = "",
-    name = "",
-    id = "",
-    size = "md",
-    portal = false,
-    onchange,
-    ...restProps
-  }: Props = $props();
-
-  let isOpen = $state(false);
-  let triggerElement = $state<HTMLButtonElement | null>(null);
-  let dropdownElement = $state<HTMLUListElement | 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 selectedItem = $derived(items.find((item) => item.value === value));
-  let displayText = $derived(selectedItem ? selectedItem.name : placeholder);
-
-  let sizeClass = $derived(formControlSizes[size] || formControlSizes.md);
-
-  function updateDropdownPosition() {
-    if (!triggerElement || !portal) return;
-    const rect = triggerElement.getBoundingClientRect();
-    dropdownPosition = {
-      top: rect.bottom + 4,
-      left: rect.left,
-      width: rect.width
-    };
-  }
-
-  async function toggle() {
-    if (disabled) return;
-    isOpen = !isOpen;
-    if (isOpen) {
-      focusedIndex = items.findIndex((item) => item.value === value);
-      window.dispatchEvent(new CustomEvent('select-opened', { detail: { instanceId } }));
-      if (portal) {
-        await tick();
-        updateDropdownPosition();
-      }
-    }
-  }
-
-  function handleOtherSelectOpened(event: Event) {
-    const customEvent = event as CustomEvent<{ instanceId: string }>;
-    if (customEvent.detail.instanceId !== instanceId && isOpen) {
-      close();
-    }
-  }
-
-  function close() {
-    isOpen = false;
-    focusedIndex = -1;
-  }
-
-  function selectItem(item: SelectItem) {
-    value = item.value;
-    onchange?.({ value: item.value, item });
-    close();
-    triggerElement?.focus();
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (disabled) return;
-
-    switch (event.key) {
-      case "Enter":
-      case " ":
-        event.preventDefault();
-        if (isOpen && focusedIndex >= 0) {
-          selectItem(items[focusedIndex]);
-        } else {
-          toggle();
-        }
-        break;
-      case "ArrowDown":
-        event.preventDefault();
-        if (!isOpen) {
-          isOpen = true;
-          focusedIndex = 0;
-        } else {
-          focusedIndex = Math.min(focusedIndex + 1, items.length - 1);
-        }
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        if (isOpen) {
-          focusedIndex = Math.max(focusedIndex - 1, 0);
-        }
-        break;
-      case "Escape":
-        event.preventDefault();
-        close();
-        break;
-      case "Tab":
-        close();
-        break;
-    }
-  }
-
-  function handleClickOutside(event: MouseEvent) {
-    if (!isOpen) return;
-    const clickedOutsideTrigger = triggerElement && !triggerElement.contains(event.target as Node);
-    const clickedOutsideDropdown = !dropdownElement || !dropdownElement.contains(event.target as Node);
-    if (clickedOutsideTrigger && clickedOutsideDropdown) {
-      close();
-    }
-  }
-
-  onMount(() => {
-    document.addEventListener("click", handleClickOutside, true);
-    window.addEventListener("select-opened", handleOtherSelectOpened);
-
-    // Update position on scroll/resize when portal is enabled
-    if (portal) {
-      window.addEventListener("scroll", updateDropdownPosition, true);
-      window.addEventListener("resize", updateDropdownPosition);
-    }
-
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true);
-      window.removeEventListener("select-opened", handleOtherSelectOpened);
-      if (portal) {
-        window.removeEventListener("scroll", updateDropdownPosition, true);
-        window.removeEventListener("resize", updateDropdownPosition);
-      }
-    };
-  });
-</script>
-
-<div class="w-full flex flex-col gap-2" {...restProps}>
-  {#if label}
-    <div class="flex justify-start items-center gap-1">
-      <label for={id || name} class={typography.label}>
-        {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
-      </label>
-    </div>
-  {/if}
-
-  <div class="relative w-full">
-    <button
-      type="button"
-      bind:this={triggerElement}
-      {id}
-      {name}
-      class="flex items-center justify-between w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg cursor-pointer transition-colors text-left focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {error ? 'border-red-500 dark:border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {!selectedItem ? `${typography.textMuted}` : `${typography.body}`}"
-      {disabled}
-      aria-haspopup="listbox"
-      aria-expanded={isOpen}
-      onclick={toggle}
-      onkeydown={handleKeydown}
-    >
-      <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{displayText}</span>
-      <ChevronDownOutline class="w-4 h-4 shrink-0 {typography.iconMuted} transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
-    </button>
-
-    {#if isOpen && !portal}
-      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-      <ul
-        bind:this={dropdownElement}
-        class="absolute top-full left-0 right-0 z-50 mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
-        role="listbox"
-        tabindex="-1"
-        transition:bloom={{ origin: "top left" }}
-      >
-        {#each items as item, index}
-          <!-- svelte-ignore a11y_click_events_have_key_events -->
-          <li
-            id="{id || name}-option-{index}"
-            class={`px-4 py-2 cursor-pointer ${typography.sm} transition-colors ${item.value === value ? '' : `${typography.textMuted}`} ${index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
-            role="option"
-            aria-selected={item.value === value}
-            onclick={() => selectItem(item)}
-            onmouseenter={() => (focusedIndex = index)}
-          >
-            {item.name}
-          </li>
-        {/each}
-      </ul>
-    {/if}
-  </div>
-
-  {#if error}
-    <p class={typography.error}>{error}</p>
-  {/if}
-</div>
-
-{#if isOpen && portal}
-  <!-- Portal dropdown - truly moved to document.body to escape overflow containers and transforms -->
-  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-  <ul
-    bind:this={dropdownElement}
-    use:portalAction
-    class="fixed z-[9999] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
-    style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
-    role="listbox"
-    tabindex="-1"
-    transition:bloom={{ origin: "top left" }}
-  >
-    {#each items as item, index}
-      <!-- svelte-ignore a11y_click_events_have_key_events -->
-      <li
-        id="{id || name}-option-{index}"
-        class={`px-4 py-2 cursor-pointer ${typography.sm} transition-colors ${item.value === value ? '' : `${typography.textMuted}`} ${index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
-        role="option"
-        aria-selected={item.value === value}
-        onclick={() => selectItem(item)}
-        onmouseenter={() => (focusedIndex = index)}
-      >
-        {item.name}
-      </li>
-    {/each}
-  </ul>
-{/if}
+<script lang="ts">
+  import { onMount, tick } from "svelte";
+  import { ChevronDownOutline } from "../Icons";
+  import { portal as portalAction } from "../../utils/portal.js";
+  import { typography } from "../../tokens/typography";
+  import { formControlSizes } from "../../tokens/sizing";
+  import { bloom } from "../../utils/transitions.js";
+
+  interface SelectItem {
+    value: string;
+    name: string;
+  }
+
+  interface Props {
+    value?: string;
+    items?: SelectItem[];
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    name?: string;
+    id?: string;
+    size?: "sm" | "md" | "lg";
+    portal?: boolean;
+    onchange?: (detail: { value: string; item: SelectItem }) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    value = $bindable(""),
+    items = [],
+    placeholder = "",
+    label = "",
+    required = false,
+    disabled = false,
+    error = "",
+    name = "",
+    id = "",
+    size = "md",
+    portal = false,
+    onchange,
+    ...restProps
+  }: Props = $props();
+
+  let isOpen = $state(false);
+  let triggerElement = $state<HTMLButtonElement | null>(null);
+  let dropdownElement = $state<HTMLUListElement | 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 selectedItem = $derived(items.find((item) => item.value === value));
+  let displayText = $derived(selectedItem ? selectedItem.name : placeholder);
+
+  let sizeClass = $derived(formControlSizes[size] || formControlSizes.md);
+
+  function updateDropdownPosition() {
+    if (!triggerElement || !portal) return;
+    const rect = triggerElement.getBoundingClientRect();
+    dropdownPosition = {
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width
+    };
+  }
+
+  async function toggle() {
+    if (disabled) return;
+    isOpen = !isOpen;
+    if (isOpen) {
+      focusedIndex = items.findIndex((item) => item.value === value);
+      window.dispatchEvent(new CustomEvent('select-opened', { detail: { instanceId } }));
+      if (portal) {
+        await tick();
+        updateDropdownPosition();
+      }
+    }
+  }
+
+  function handleOtherSelectOpened(event: Event) {
+    const customEvent = event as CustomEvent<{ instanceId: string }>;
+    if (customEvent.detail.instanceId !== instanceId && isOpen) {
+      close();
+    }
+  }
+
+  function close() {
+    isOpen = false;
+    focusedIndex = -1;
+  }
+
+  function selectItem(item: SelectItem) {
+    value = item.value;
+    onchange?.({ value: item.value, item });
+    close();
+    triggerElement?.focus();
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (disabled) return;
+
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (isOpen && focusedIndex >= 0) {
+          selectItem(items[focusedIndex]);
+        } else {
+          toggle();
+        }
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        if (!isOpen) {
+          isOpen = true;
+          focusedIndex = 0;
+        } else {
+          focusedIndex = Math.min(focusedIndex + 1, items.length - 1);
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (isOpen) {
+          focusedIndex = Math.max(focusedIndex - 1, 0);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        close();
+        break;
+      case "Tab":
+        close();
+        break;
+    }
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (!isOpen) return;
+    const clickedOutsideTrigger = triggerElement && !triggerElement.contains(event.target as Node);
+    const clickedOutsideDropdown = !dropdownElement || !dropdownElement.contains(event.target as Node);
+    if (clickedOutsideTrigger && clickedOutsideDropdown) {
+      close();
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    window.addEventListener("select-opened", handleOtherSelectOpened);
+
+    // Update position on scroll/resize when portal is enabled
+    if (portal) {
+      window.addEventListener("scroll", updateDropdownPosition, true);
+      window.addEventListener("resize", updateDropdownPosition);
+    }
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+      window.removeEventListener("select-opened", handleOtherSelectOpened);
+      if (portal) {
+        window.removeEventListener("scroll", updateDropdownPosition, true);
+        window.removeEventListener("resize", updateDropdownPosition);
+      }
+    };
+  });
+</script>
+
+<div class="w-full flex flex-col gap-2" {...restProps}>
+  {#if label}
+    <div class="flex justify-start items-center gap-1">
+      <label for={id || name} class={typography.label}>
+        {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
+      </label>
+    </div>
+  {/if}
+
+  <div class="relative w-full">
+    <button
+      type="button"
+      bind:this={triggerElement}
+      {id}
+      {name}
+      class="flex items-center justify-between w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg cursor-pointer transition-colors text-left focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {error ? 'border-red-500 dark:border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {!selectedItem ? `${typography.textMuted}` : `${typography.body}`}"
+      {disabled}
+      aria-haspopup="listbox"
+      aria-expanded={isOpen}
+      onclick={toggle}
+      onkeydown={handleKeydown}
+    >
+      <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{displayText}</span>
+      <ChevronDownOutline class="w-4 h-4 shrink-0 {typography.iconMuted} transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+    </button>
+
+    {#if isOpen && !portal}
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+      <ul
+        bind:this={dropdownElement}
+        class="absolute top-full left-0 right-0 z-50 mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
+        role="listbox"
+        tabindex="-1"
+        transition:bloom={{ origin: "top left" }}
+      >
+        {#each items as item, index}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <li
+            id="{id || name}-option-{index}"
+            class={`px-4 py-2 cursor-pointer ${typography.sm} transition-colors ${item.value === value ? '' : `${typography.textMuted}`} ${index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
+            role="option"
+            aria-selected={item.value === value}
+            onclick={() => selectItem(item)}
+            onmouseenter={() => (focusedIndex = index)}
+          >
+            {item.name}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+
+  {#if error}
+    <p class={typography.error}>{error}</p>
+  {/if}
+</div>
+
+{#if isOpen && portal}
+  <!-- Portal dropdown - truly moved to document.body to escape overflow containers and transforms -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <ul
+    bind:this={dropdownElement}
+    use:portalAction
+    class="fixed z-[100] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
+    style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
+    role="listbox"
+    tabindex="-1"
+    transition:bloom={{ origin: "top left" }}
+  >
+    {#each items as item, index}
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <li
+        id="{id || name}-option-{index}"
+        class={`px-4 py-2 cursor-pointer ${typography.sm} transition-colors ${item.value === value ? '' : `${typography.textMuted}`} ${index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
+        role="option"
+        aria-selected={item.value === value}
+        onclick={() => selectItem(item)}
+        onmouseenter={() => (focusedIndex = index)}
+      >
+        {item.name}
+      </li>
+    {/each}
+  </ul>
+{/if}