@getmicdrop/svelte-components 5.5.5 → 5.6.0

package/dist/recipes/inputs/MultiSelect.svelte

@@ -1,256 +1,256 @@
-<script>
-  import { CloseOutline, ChevronDownOutline } from "../../primitives/Icons";
-  import { typography } from '../../tokens/typography';
-
-  // Props matching old Flowbite wrapper for drop-in replacement
-  let {
-    value = $bindable([]), // Array of selected values
-    items = [], // Array of { name: string, value: any }
-    placeholder = "Select options",
-    label = "",
-    required = false,
-    disabled = false,
-    error = "",
-    hideClear = false,
-    hideCheckboxes = false, // Hide checkboxes in dropdown options
-    singleSelect = false, // Close dropdown after selection (single-select behavior)
-    name = "",
-    id = "",
-    /** @type {'sm' | 'md' | 'lg'} */
-    size = "md",
-    animateFocus = true, // Show focus animation
-    // Callbacks
-    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">
-    <button
-      type="button"
-      bind:this={triggerElement}
-      {id}
-      {name}
-      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-none 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' : ''}"
-      {disabled}
-      aria-haspopup="listbox"
-      aria-expanded={isOpen}
-      aria-labelledby={label ? `${id || name}-label` : undefined}
-      onclick={toggle}
-      onkeydown={handleKeydown}
-    >
-      <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-sm 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 flex-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>
-    </button>
-
-    {#if isOpen}
-      <!-- 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-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"
-        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';
+
+  // Props matching old Flowbite wrapper for drop-in replacement
+  let {
+    value = $bindable([]), // Array of selected values
+    items = [], // Array of { name: string, value: any }
+    placeholder = "Select options",
+    label = "",
+    required = false,
+    disabled = false,
+    error = "",
+    hideClear = false,
+    hideCheckboxes = false, // Hide checkboxes in dropdown options
+    singleSelect = false, // Close dropdown after selection (single-select behavior)
+    name = "",
+    id = "",
+    /** @type {'sm' | 'md' | 'lg'} */
+    size = "md",
+    animateFocus = true, // Show focus animation
+    // Callbacks
+    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">
+    <button
+      type="button"
+      bind:this={triggerElement}
+      {id}
+      {name}
+      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-none 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' : ''}"
+      {disabled}
+      aria-haspopup="listbox"
+      aria-expanded={isOpen}
+      aria-labelledby={label ? `${id || name}-label` : undefined}
+      onclick={toggle}
+      onkeydown={handleKeydown}
+    >
+      <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-sm 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 flex-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>
+    </button>
+
+    {#if isOpen}
+      <!-- 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-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"
+        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>