@getmicdrop/svelte-components 5.10.3 → 5.13.0

package/dist/recipes/inputs/MultiSelect.svelte

@@ -1,283 +1,283 @@
-<script>
-  import { CloseOutline, ChevronDownOutline } from "../../primitives/Icons";
-  import { typography } from '../../tokens/typography';
-  import { bloom } from "../../utils/transitions.js";
-
-
-  /**
-   * @typedef {Object} SelectItem
-   * @property {string} name - Display name for the item
-   * @property {string | number} value - Value of the item
-   */
-
-  /** @type {{
-    value?: (string | number)[],
-    items?: SelectItem[],
-    placeholder?: string,
-    label?: string,
-    required?: boolean,
-    disabled?: boolean,
-    error?: string,
-    hideClear?: boolean,
-    hideCheckboxes?: boolean,
-    singleSelect?: boolean,
-    name?: string,
-    id?: string,
-    size?: 'sm' | 'md' | 'lg',
-    animateFocus?: boolean,
-    onchange?: (detail: { value: (string | number)[], items: SelectItem[] }) => void
-  }} */
-  let {
-    value = $bindable([]),
-    items = [],
-    placeholder = "Select options",
-    label = "",
-    required = false,
-    disabled = false,
-    error = "",
-    hideClear = false,
-    hideCheckboxes = false,
-    singleSelect = false,
-    name = "",
-    id = "",
-    size = "md",
-    animateFocus = true,
-    onchange,
-  } = $props();
-
-  let isOpen = $state(false);
-  let triggerElement = $state();
-  let dropdownElement = $state();
-  let focusedIndex = $state(-1);
-
-  // Ensure value is always an array (initialize immediately)
-  if (!Array.isArray(value)) {
-    value = [];
-  }
-
-  // Keep value as array
-  $effect(() => {
-    if (!Array.isArray(value)) {
-      value = [];
-    }
-  });
-
-  let selectedItems = $derived(items.filter((item) => value.includes(item.value)));
-  let hasSelection = $derived(selectedItems.length > 0);
-
-  // Size classes matching Input component
-  const sizeClasses = {
-    sm: "min-h-9 py-2 px-2.5 text-sm",
-    md: "min-h-10 py-2.5 px-3 text-sm",
-    lg: "min-h-12 py-3 px-3.5 text-base"
-  };
-
-  let sizeClass = $derived(sizeClasses[size] || sizeClasses.md);
-
-  function toggle() {
-    if (disabled) return;
-    isOpen = !isOpen;
-    if (isOpen) {
-      focusedIndex = 0;
-    }
-  }
-
-  function close() {
-    isOpen = false;
-    focusedIndex = -1;
-  }
-
-  function toggleItem(item) {
-    const index = value.indexOf(item.value);
-    if (index === -1) {
-      value = [...value, item.value];
-    } else {
-      value = value.filter((v) => v !== item.value);
-    }
-    onchange?.({ value, items: selectedItems });
-    // Close dropdown after selection in single-select mode
-    if (singleSelect) {
-      close();
-    }
-  }
-
-  function removeItem(item, event) {
-    event.stopPropagation();
-    value = value.filter((v) => v !== item.value);
-    onchange?.({ value, items: selectedItems });
-  }
-
-  function clearAll(event) {
-    event.stopPropagation();
-    value = [];
-    onchange?.({ value: [], items: [] });
-  }
-
-  function handleKeydown(event) {
-    if (disabled) return;
-
-    switch (event.key) {
-      case "Enter":
-      case " ":
-        event.preventDefault();
-        if (isOpen && focusedIndex >= 0) {
-          toggleItem(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) {
-    if (
-      triggerElement &&
-      !triggerElement.contains(event.target) &&
-      dropdownElement &&
-      !dropdownElement.contains(event.target)
-    ) {
-      close();
-    }
-  }
-
-  $effect(() => {
-    document.addEventListener("click", handleClickOutside);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  });
-</script>
-
-<div class="flex flex-col gap-2 w-full">
-  {#if label}
-    <div class="flex justify-start items-center gap-1">
-      <label for={id || name} class={`${typography.label} leading-tight`}>
-        {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">
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      bind:this={triggerElement}
-      {id}
-      class="flex items-center justify-between gap-2 w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg cursor-pointer text-left transition-all 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 focus:border-blue-500 dark:focus:border-blue-500'}
-        {disabled ? 'opacity-50 cursor-not-allowed' : ''}
-        {animateFocus ? 'multiselect-animate-focus' : ''}"
-      role="combobox"
-      tabindex={disabled ? -1 : 0}
-      aria-haspopup="listbox"
-      aria-expanded={isOpen}
-      aria-controls={isOpen ? `${id || name}-listbox` : undefined}
-      aria-labelledby={label ? `${id || name}-label` : undefined}
-      aria-disabled={disabled}
-      onclick={toggle}
-      onkeydown={handleKeydown}
-    >
-      <input type="hidden" {name} value={value.join(',')} />
-      <div class="flex-1 min-w-0">
-        {#if hasSelection}
-          <div class="flex flex-wrap gap-1.5">
-            {#each selectedItems as item}
-              <span class="inline-flex items-center px-2 py-1 bg-blue-100 rounded dark:bg-blue-900">
-                <span class={`${typography.sm} overflow-hidden text-ellipsis whitespace-nowrap`} style="color-scheme: light dark;">{item.name}</span>
-                <button
-                  type="button"
-                  class="inline-flex items-center p-0.5 ms-1.5 text-sm text-blue-400 bg-transparent rounded-xs hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300"
-                  onclick={(e) => removeItem(item, e)}
-                  aria-label="Remove {item.name}"
-                >
-                  <CloseOutline class="w-3 h-3" />
-                </button>
-              </span>
-            {/each}
-          </div>
-        {:else}
-          <span class={typography.smMuted}>{placeholder}</span>
-        {/if}
-      </div>
-
-      <div class="flex items-center gap-1 shrink-0">
-        {#if hasSelection && !hideClear}
-          <button
-            type="button"
-            class="flex items-center justify-center w-5 h-5 p-0 bg-transparent border-none cursor-pointer text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 rounded"
-            onclick={clearAll}
-            aria-label="Clear all"
-          >
-            <CloseOutline class="w-3.5 h-3.5" />
-          </button>
-        {/if}
-        <ChevronDownOutline class={`w-4 h-4 shrink-0 ${typography.iconMuted} transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
-      </div>
-    </div>
-
-    {#if isOpen}
-      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-      <ul
-        bind:this={dropdownElement}
-        id="{id || name}-listbox"
-        class="absolute top-full left-0 right-0 z-50 mt-1 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto list-none m-0 py-1"
-        role="listbox"
-        tabindex="-1"
-        aria-multiselectable="true"
-        transition:bloom={{ origin: "top left" }}
-        aria-activedescendant={focusedIndex >= 0
-          ? `${id || name}-option-${focusedIndex}`
-          : undefined}
-      >
-        {#each items as item, index}
-          <!-- svelte-ignore a11y_click_events_have_key_events -->
-          <li
-            id="{id || name}-option-{index}"
-            class="flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors {typography.sm}
-              {index === focusedIndex || value.includes(item.value) ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}"
-            role="option"
-            aria-selected={value.includes(item.value)}
-            onclick={() => toggleItem(item)}
-            onmouseenter={() => (focusedIndex = index)}
-          >
-            {#if !hideCheckboxes}
-              <input
-                type="checkbox"
-                checked={value.includes(item.value)}
-                class="multiselect-checkbox w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500 {value.includes(item.value) ? 'multiselect-checkbox-checked' : ''}"
-                tabindex="-1"
-                onclick={(e) => { e.stopPropagation(); toggleItem(item); }}
-              />
-            {/if}
-            <span class="flex-1">{item.name}</span>
-          </li>
-        {/each}
-      </ul>
-    {/if}
-  </div>
-
-  {#if error}
-    <p class={`${typography.sm} text-red-500 dark:text-red-400`}>{error}</p>
-  {/if}
-</div>
+<script>
+  import { CloseOutline, ChevronDownOutline } from "../../primitives/Icons";
+  import { typography } from '../../tokens/typography';
+  import { bloom } from "../../utils/transitions.js";
+
+
+  /**
+   * @typedef {Object} SelectItem
+   * @property {string} name - Display name for the item
+   * @property {string | number} value - Value of the item
+   */
+
+  /** @type {{
+    value?: (string | number)[],
+    items?: SelectItem[],
+    placeholder?: string,
+    label?: string,
+    required?: boolean,
+    disabled?: boolean,
+    error?: string,
+    hideClear?: boolean,
+    hideCheckboxes?: boolean,
+    singleSelect?: boolean,
+    name?: string,
+    id?: string,
+    size?: 'sm' | 'md' | 'lg',
+    animateFocus?: boolean,
+    onchange?: (detail: { value: (string | number)[], items: SelectItem[] }) => void
+  }} */
+  let {
+    value = $bindable([]),
+    items = [],
+    placeholder = "Select options",
+    label = "",
+    required = false,
+    disabled = false,
+    error = "",
+    hideClear = false,
+    hideCheckboxes = false,
+    singleSelect = false,
+    name = "",
+    id = "",
+    size = "md",
+    animateFocus = true,
+    onchange,
+  } = $props();
+
+  let isOpen = $state(false);
+  let triggerElement = $state();
+  let dropdownElement = $state();
+  let focusedIndex = $state(-1);
+
+  // Ensure value is always an array (initialize immediately)
+  if (!Array.isArray(value)) {
+    value = [];
+  }
+
+  // Keep value as array
+  $effect(() => {
+    if (!Array.isArray(value)) {
+      value = [];
+    }
+  });
+
+  let selectedItems = $derived(items.filter((item) => value.includes(item.value)));
+  let hasSelection = $derived(selectedItems.length > 0);
+
+  // Size classes matching Input component
+  const sizeClasses = {
+    sm: "min-h-9 py-2 px-2.5 text-sm",
+    md: "min-h-10 py-2.5 px-3 text-sm",
+    lg: "min-h-12 py-3 px-3.5 text-base"
+  };
+
+  let sizeClass = $derived(sizeClasses[size] || sizeClasses.md);
+
+  function toggle() {
+    if (disabled) return;
+    isOpen = !isOpen;
+    if (isOpen) {
+      focusedIndex = 0;
+    }
+  }
+
+  function close() {
+    isOpen = false;
+    focusedIndex = -1;
+  }
+
+  function toggleItem(item) {
+    const index = value.indexOf(item.value);
+    if (index === -1) {
+      value = [...value, item.value];
+    } else {
+      value = value.filter((v) => v !== item.value);
+    }
+    onchange?.({ value, items: selectedItems });
+    // Close dropdown after selection in single-select mode
+    if (singleSelect) {
+      close();
+    }
+  }
+
+  function removeItem(item, event) {
+    event.stopPropagation();
+    value = value.filter((v) => v !== item.value);
+    onchange?.({ value, items: selectedItems });
+  }
+
+  function clearAll(event) {
+    event.stopPropagation();
+    value = [];
+    onchange?.({ value: [], items: [] });
+  }
+
+  function handleKeydown(event) {
+    if (disabled) return;
+
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (isOpen && focusedIndex >= 0) {
+          toggleItem(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) {
+    if (
+      triggerElement &&
+      !triggerElement.contains(event.target) &&
+      dropdownElement &&
+      !dropdownElement.contains(event.target)
+    ) {
+      close();
+    }
+  }
+
+  $effect(() => {
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  });
+</script>
+
+<div class="flex flex-col gap-2 w-full">
+  {#if label}
+    <div class="flex justify-start items-center gap-1">
+      <label for={id || name} class={`${typography.label} leading-tight`}>
+        {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">
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      bind:this={triggerElement}
+      {id}
+      class="flex items-center justify-between gap-2 w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg cursor-pointer text-left transition-all 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 focus:border-blue-500 dark:focus:border-blue-500'}
+        {disabled ? 'opacity-50 cursor-not-allowed' : ''}
+        {animateFocus ? 'multiselect-animate-focus' : ''}"
+      role="combobox"
+      tabindex={disabled ? -1 : 0}
+      aria-haspopup="listbox"
+      aria-expanded={isOpen}
+      aria-controls={isOpen ? `${id || name}-listbox` : undefined}
+      aria-labelledby={label ? `${id || name}-label` : undefined}
+      aria-disabled={disabled}
+      onclick={toggle}
+      onkeydown={handleKeydown}
+    >
+      <input type="hidden" {name} value={value.join(',')} />
+      <div class="flex-1 min-w-0">
+        {#if hasSelection}
+          <div class="flex flex-wrap gap-1.5">
+            {#each selectedItems as item}
+              <span class="inline-flex items-center px-2 py-1 bg-blue-100 rounded dark:bg-blue-900">
+                <span class={`${typography.sm} overflow-hidden text-ellipsis whitespace-nowrap`} style="color-scheme: light dark;">{item.name}</span>
+                <button
+                  type="button"
+                  class="inline-flex items-center p-0.5 ms-1.5 text-sm text-blue-400 bg-transparent rounded-xs hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300"
+                  onclick={(e) => removeItem(item, e)}
+                  aria-label="Remove {item.name}"
+                >
+                  <CloseOutline class="w-3 h-3" />
+                </button>
+              </span>
+            {/each}
+          </div>
+        {:else}
+          <span class={typography.smMuted}>{placeholder}</span>
+        {/if}
+      </div>
+
+      <div class="flex items-center gap-1 shrink-0">
+        {#if hasSelection && !hideClear}
+          <button
+            type="button"
+            class="flex items-center justify-center w-5 h-5 p-0 bg-transparent border-none cursor-pointer text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 rounded"
+            onclick={clearAll}
+            aria-label="Clear all"
+          >
+            <CloseOutline class="w-3.5 h-3.5" />
+          </button>
+        {/if}
+        <ChevronDownOutline class={`w-4 h-4 shrink-0 ${typography.iconMuted} transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`} />
+      </div>
+    </div>
+
+    {#if isOpen}
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+      <ul
+        bind:this={dropdownElement}
+        id="{id || name}-listbox"
+        class="absolute top-full left-0 right-0 z-50 mt-1 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto list-none m-0 py-1"
+        role="listbox"
+        tabindex="-1"
+        aria-multiselectable="true"
+        transition:bloom={{ origin: "top left" }}
+        aria-activedescendant={focusedIndex >= 0
+          ? `${id || name}-option-${focusedIndex}`
+          : undefined}
+      >
+        {#each items as item, index}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <li
+            id="{id || name}-option-{index}"
+            class="flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors {typography.sm}
+              {index === focusedIndex || value.includes(item.value) ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}"
+            role="option"
+            aria-selected={value.includes(item.value)}
+            onclick={() => toggleItem(item)}
+            onmouseenter={() => (focusedIndex = index)}
+          >
+            {#if !hideCheckboxes}
+              <input
+                type="checkbox"
+                checked={value.includes(item.value)}
+                class="multiselect-checkbox w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500 {value.includes(item.value) ? 'multiselect-checkbox-checked' : ''}"
+                tabindex="-1"
+                onclick={(e) => { e.stopPropagation(); toggleItem(item); }}
+              />
+            {/if}
+            <span class="flex-1">{item.name}</span>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+
+  {#if error}
+    <p class={`${typography.sm} text-red-500 dark:text-red-400`}>{error}</p>
+  {/if}
+</div>