Merge branch 'jjagielka-select'

Author: shinokada

src/lib/forms/select/MultiSelect.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" generics="T">
   import clsx from "clsx";
-  import type { MultiSelectProps, SelectOptionType } from "$lib";
+  import type { MultiSelectProps, SelectOptionType, SizeType } from "$lib";
   import Badge from "$lib/badge/Badge.svelte";
   import CloseButton from "$lib/utils/CloseButton.svelte";
   import { multiSelect } from "./theme";
   import { getTheme, warnThemeDeprecation } from "$lib/theme/themeUtils";
-  import { onMount } from "svelte";
+  import { getContext, onMount } from "svelte";
   import { createDismissableContext } from "$lib/utils/dismissable";
 
   // Consider reusing that component - https://svelecte.vercel.app/
@@ -37,6 +37,7 @@
 
   let selectItems = $derived(items.filter((x) => value.includes(x.value)));
   let show: boolean = $state(false);
+  let group: { size: SizeType } = getContext("group");
 
   // Active item
   let activeIndex: number | null = $state(null);
@@ -193,7 +194,7 @@
     };
   });
 
-  const { base, dropdown, item: dropdownItem, close, select, placeholder: placeholderSpan, svg } = multiSelect({ disabled });
+  const { base, dropdown, item: dropdownItem, close, select, placeholder: placeholderSpan, svg } = multiSelect({ disabled, grouped: !!group });
 </script>
 
 <select {name} {form} {required} {autocomplete} {value} hidden multiple {onchange}>
@@ -212,7 +213,7 @@
         {#if children}
           {@render children({ item, clear: () => clearThisOption(item) })}
         {:else}
-          <Badge color="gray" large={size === "lg"} dismissable params={{ duration: 100 }} onclose={() => clearThisOption(item)} class={[disabled && "pointer-events-none"]}>
+          <Badge color="gray" large={size === "lg"} dismissable params={{ duration: 100 }} onclose={() => clearThisOption(item)} class={["py-0 px-2 mx-0.5", disabled && "pointer-events-none"]}>
             {item.name}
           </Badge>
         {/if}

src/lib/forms/select/Select.svelte

@@ -1,10 +1,11 @@
 <script lang="ts" generics="T">
   import { select as selectCls } from "./theme";
   import clsx from "clsx";
-  import type { SelectProps } from "$lib";
+  import type { SelectProps, SizeType } from "$lib";
   import CloseButton from "$lib/utils/CloseButton.svelte";
   import { getTheme, warnThemeDeprecation } from "$lib/theme/themeUtils";
   import { createDismissableContext } from "$lib/utils/dismissable";
+  import { getContext } from "svelte";
 
   let { children, items, value = $bindable(), elementRef = $bindable(), underline, size = "md", disabled, placeholder = "Choose option ...", clearable, clearableColor = "none", clearableOnClick, onClear, clearableSvgClass, clearableClass, selectClass, class: className, classes, ...restProps }: SelectProps<T> = $props();
 
@@ -14,7 +15,8 @@
 
   const theme = getTheme("select");
 
-  const { base, select, close } = $derived(selectCls({ underline, size, disabled }));
+  let group: { size: SizeType } = getContext("group");
+  const { base, select, close } = $derived(selectCls({ underline, size, disabled, grouped: !!group }));
 
   const clearAll = () => {
     if (elementRef) {

src/lib/forms/select/theme.ts

@@ -7,18 +7,18 @@ export type MultiSelectVariants = VariantProps<typeof multiSelect> & Classes<typ
 
 export const select = tv({
   slots: {
-    base: "relative",
+    base: "relative w-full",
     select: "block w-full rtl:text-right",
     close: "absolute right-8 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black",
     svg: ""
   },
   variants: {
     underline: {
       true: {
-        select: "text-gray-500 bg-transparent border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-hidden focus:ring-0 focus:border-gray-200 peer px-0!"
+        select: "text-gray-500 bg-transparent rounded-none! border-0 border-b-2 border-gray-200 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-hidden focus:ring-0 focus:border-gray-200 peer px-0!"
       },
       false: {
-        select: "text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:outline-hidden focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
+        select: "text-gray-900 bg-gray-50 border border-gray-300 focus:outline-hidden focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
       }
     },
     size: {
@@ -31,6 +31,13 @@ export const select = tv({
         select: "cursor-not-allowed opacity-50"
       },
       false: {}
+    },
+    grouped: {
+      false: { base: "rounded-lg", select: "rounded-lg" },
+      true: {
+        base: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px group",
+        select: "group-first:rounded-s-lg group-last:rounded-e-lg group-not-first:-ms-px h-full"
+      }
     }
   },
   defaultVariants: {
@@ -41,8 +48,8 @@ export const select = 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",
+    base: "relative border border-gray-300 w-full flex items-center gap-2 dark:border-gray-600 ring-primary-500 dark:ring-primary-500 focus-visible:outline-hidden",
+    select: "",
     dropdown: "absolute z-50 p-3 flex flex-col gap-1 max-h-64 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 start-0 top-[calc(100%+1rem)] rounded-lg cursor-pointer overflow-y-scroll w-full",
     item: "py-2 px-3 rounded-lg text-gray-600 hover:text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-600",
     close: "p-0 focus:ring-gray-400 dark:text-white",
@@ -73,6 +80,13 @@ export const multiSelect = tv({
       true: {
         item: "bg-gray-100 text-black font-semibold hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white"
       }
+    },
+    grouped: {
+      false: { base: "rounded-lg", select: "rounded-lg" },
+      true: {
+        base: "first:rounded-s-lg last:rounded-e-lg not-first:-ms-px group",
+        select: "group-first:rounded-s-lg group-last:rounded-e-lg group-not-first:-ms-px h-full"
+      }
     }
   },
   // Add compoundVariants here

src/routes/docs-examples/forms/select/Dropdown.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Select, Dropdown, DropdownItem } from "flowbite-svelte";
+  import { Select, Button, ButtonGroup, Dropdown, DropdownItem } from "flowbite-svelte";
   import { ChevronDownOutline } from "flowbite-svelte-icons";
   import Usa from "$icons/Usa.svelte";
   import Germany from "$icons/Germany.svelte";
@@ -21,13 +21,13 @@
   ];
 </script>
 
-<div class="flex">
-  <button id="states-button" class="z-10 inline-flex shrink-0 items-center rounded-s-lg border border-gray-300 bg-gray-100 px-4 py-1.5 text-center text-sm font-medium text-gray-500 hover:bg-gray-200 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-700" type="button">
+<ButtonGroup class="w-full">
+  <Button class="bg-gray-100 text-gray-500 hover:bg-gray-200 hover:text-gray-500 focus:ring-gray-100 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-700">
     <Usa />
     USA
     <ChevronDownOutline class="ms-2 h-6 w-6" />
-  </button>
-  <Dropdown simple triggeredBy="#states-button">
+  </Button>
+  <Dropdown simple>
     <DropdownItem class="flex items-center">
       <Usa />
       United States
@@ -45,5 +45,5 @@
       China
     </DropdownItem>
   </Dropdown>
-  <Select items={states} placeholder="Choose the state" selectClass="rounded-s-none!" class="w-full" />
-</div>
+  <Select items={states} placeholder="Choose the state" />
+</ButtonGroup>