flowbite-svelte 1.10.1 → 1.10.2

package/dist/forms/select/MultiSelect.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" generics="T">
   import { Badge, CloseButton, type MultiSelectProps, type SelectOptionType, cn } from "../..";
-  import { multiselect, type MultiSelectTheme } from ".";
+  import { multiSelect, type MultiSelectTheme } from ".";
   import { getTheme } from "../../theme/themeUtils";
+  import { onMount, onDestroy } from "svelte"; // Import onMount and onDestroy
 
   // Consider reusing that component - https://svelecte.vercel.app/
 
@@ -33,7 +34,12 @@
   let activeIndex: number | null = $state(null);
   let activeItem = $derived(activeIndex !== null ? items[((activeIndex % items.length) + items.length) % items.length] : null);
 
-  const selectOption = (select: SelectOptionType<any>) => {
+  let multiSelectContainer: HTMLDivElement; // Reference to the main div
+
+  const selectOption = (select: SelectOptionType<any>, event: MouseEvent) => {
+    // Prevent the click from propagating to the parent div
+    event.stopPropagation();
+
     if (disabled) return;
     if (select.disabled) return;
 
@@ -49,6 +55,7 @@
     if (JSON.stringify(oldValue) !== JSON.stringify(value)) {
       triggerChange();
     }
+    // Don't close the dropdown here
   };
 
   const clearAll = (e: MouseEvent) => {
@@ -94,11 +101,23 @@
   };
 
   const closeDropdown = () => !disabled && (show = false);
-  const toggleDropdown = () => !disabled && (show = !show);
+  const toggleDropdown = (event: MouseEvent) => {
+    if (disabled) return;
+    // Prevent immediate closing if the click originated from within the component itself
+    // This is useful if the click triggers a re-render and focus is lost momentarily.
+    if (multiSelectContainer && multiSelectContainer.contains(event.target as Node)) {
+      show = !show;
+    } else {
+      show = false; // Close if clicked outside
+    }
+  };
 
   // Handle blur event for validation
   const handleBlur = (event: FocusEvent) => {
-    closeDropdown();
+    // We'll rely more on the global click listener for closing, but keep this for standard blur behavior
+    if (event.currentTarget && (event.currentTarget as HTMLElement).contains && !(event.currentTarget as HTMLElement).contains(event.relatedTarget as Node)) {
+      closeDropdown();
+    }
     if (onblur) {
       onblur(event);
     }
@@ -112,7 +131,7 @@
       show = true;
       activeIndex = 0;
     } else {
-      if (activeItem !== null) selectOption(activeItem);
+      if (activeItem !== null) selectOption(activeItem, new MouseEvent("click")); // Pass a dummy MouseEvent
     }
   }
 
@@ -133,8 +152,11 @@
 
   function handleKeyDown(event: KeyboardEvent) {
     if (disabled) return;
+    // Do not prevent default for tab key, allow it to move focus
+    if (event.key !== "Tab") {
+      event.preventDefault();
+    }
     event.stopPropagation();
-    event.preventDefault();
 
     const actions = {
       Escape: closeDropdown,
@@ -148,17 +170,30 @@
     }
   }
 
-  const { base, dropdown, dropdownitem, closebutton, select } = multiselect({ disabled });
+  // Global click listener for closing the dropdown when clicking outside
+  onMount(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (multiSelectContainer && !multiSelectContainer.contains(event.target as Node)) {
+        closeDropdown();
+      }
+    };
+    document.addEventListener("click", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  });
+
+  const { base, dropdown, dropdownitem, closebutton, select } = multiSelect({ disabled });
 </script>
 
-<!-- Hidden select for form submission -->
 <select {name} {form} {required} {autocomplete} {value} hidden multiple {onchange}>
   {#each items as item}
     <option value={item.value} disabled={item.disabled}>{item.name}</option>
   {/each}
 </select>
 
-<div {...restProps} onclick={toggleDropdown} onblur={handleBlur} onkeydown={handleKeyDown} tabindex="0" role="listbox" class={cn(base({ size }), className, (theme as MultiSelectTheme)?.base)}>
+<div bind:this={multiSelectContainer} {...restProps} onclick={toggleDropdown} onblur={handleBlur} onkeydown={handleKeyDown} tabindex="0" role="listbox" class={cn(base({ size }), className, (theme as MultiSelectTheme)?.base)}>
   {#if !selectItems.length}
     <span class="text-gray-400">{placeholder}</span>
   {/if}
@@ -189,7 +224,7 @@
     <div role="presentation" class={cn(dropdown(), dropdownClass)}>
       {#each items as item (item.name)}
         <div
-          onclick={() => selectOption(item)}
+          onclick={(e) => selectOption(item, e)}
           role="presentation"
           class={dropdownitem({
             selected: selectItems.includes(item),

package/dist/forms/select/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Select } from "./Select.svelte";
 export { default as MultiSelect } from "./MultiSelect.svelte";
-export { select, multiselect, type SelectTheme, type MultiSelectTheme } from "./theme";
+export { select, multiSelect, type SelectTheme, type MultiSelectTheme } from "./theme";

package/dist/forms/select/index.js

@@ -1,3 +1,3 @@
 export { default as Select } from "./Select.svelte";
 export { default as MultiSelect } from "./MultiSelect.svelte";
-export { select, multiselect } from "./theme";
+export { select, multiSelect } from "./theme";

package/dist/forms/select/theme.d.ts

@@ -93,8 +93,8 @@ export declare const select: import("tailwind-variants").TVReturnType<{
 }, undefined, unknown, unknown, undefined>>;
 export type SelectSlots = keyof typeof select.slots;
 export type SelectTheme = Partial<Record<SelectSlots, string>>;
-export type MultiSelectVariants = VariantProps<typeof multiselect>;
-export declare const multiselect: import("tailwind-variants").TVReturnType<{
+export type MultiSelectVariants = VariantProps<typeof multiSelect>;
+export declare const multiSelect: import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
         md: string;
@@ -191,5 +191,5 @@ export declare const multiselect: import("tailwind-variants").TVReturnType<{
     dropdownitem: string;
     closebutton: string;
 }, undefined, unknown, unknown, undefined>>;
-export type MultiSelectSlots = keyof typeof multiselect.slots;
+export type MultiSelectSlots = keyof typeof multiSelect.slots;
 export type MultiSelectTheme = Partial<Record<MultiSelectSlots, string>>;

package/dist/forms/select/theme.js

@@ -31,7 +31,7 @@ export const select = tv({
         size: "md"
     }
 });
-export const multiselect = tv({
+export const multiSelect = tv({
     slots: {
         base: "relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 ring-primary-500 dark:ring-primary-500 focus-visible:outline-hidden",
         select: "flex flex-wrap gap-2",
@@ -64,6 +64,16 @@ export const multiselect = tv({
             }
         }
     },
+    // Add compoundVariants here
+    compoundVariants: [
+        {
+            selected: true,
+            active: true,
+            class: {
+                dropdownitem: "bg-primary-200 dark:bg-primary-600 text-primary-700 dark:text-primary-100 font-semibold" // Adjust colors as needed
+            }
+        }
+    ],
     defaultVariants: {
         underline: false,
         size: "md"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.10.1",
+  "version": "1.10.2",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {