Merge pull request #1 from chaseweaver/master

feat: Allow 'multiple' Listbox options

Author: yekeskin

src/lib/components/listbox/Listbox.svelte

@@ -3,6 +3,10 @@
     Open,
     Closed,
   }
+  export enum ValueMode {
+    Single,
+    Multi,
+  }
   export type ListboxOptionDataRef = {
     textValue: string;
     disabled: boolean;
@@ -14,6 +18,7 @@
     listboxState: ListboxStates;
     value: unknown;
     orientation: "vertical" | "horizontal";
+    mode: ValueMode;
 
     labelRef: Writable<HTMLLabelElement | null>;
     buttonRef: Writable<HTMLButtonElement | null>;
@@ -61,6 +66,8 @@
     horizontal?: boolean;
     /** The selected value */
     value?: StateDefinition["value"];
+    /** Whether the `Listbox` should allow mutliple selections */
+    multiple?: boolean;
   };
 </script>
 
@@ -89,6 +96,7 @@
   export let use: HTMLActionArray = [];
   export let disabled = false;
   export let horizontal = false;
+  export let multiple = false;
   export let value: StateDefinition["value"];
 
   /***** Events *****/
@@ -112,6 +120,9 @@
   let options: StateDefinition["options"] = [];
   let searchQuery: StateDefinition["searchQuery"] = "";
   let activeOptionIndex: StateDefinition["activeOptionIndex"] = null;
+  let mode: StateDefinition["mode"] = multiple
+    ? ValueMode.Multi
+    : ValueMode.Single;
 
   let api = writable<StateDefinition>({
     listboxState,
@@ -124,6 +135,7 @@
     activeOptionIndex,
     disabled,
     orientation,
+    mode,
     closeListbox() {
       if (disabled) return;
       if (listboxState === ListboxStates.Closed) return;
@@ -231,7 +243,25 @@
     },
     select(value: unknown) {
       if (disabled) return;
-      dispatch("change", value);
+      dispatch(
+        "change",
+        match(mode, {
+          [ValueMode.Single]: () => value,
+          [ValueMode.Multi]: () => {
+            let copy = ($api.value as unknown[]).slice();
+            let raw = value;
+
+            let idx = copy.indexOf(raw);
+            if (idx === -1) {
+              copy.push(raw);
+            } else {
+              copy.splice(idx, 1);
+            }
+
+            return copy;
+          },
+        })
+      );
     },
   });
   setContext(LISTBOX_CONTEXT_NAME, api);
@@ -256,6 +286,7 @@
       activeOptionIndex,
       disabled,
       orientation,
+      mode,
     };
   });
 

src/lib/components/listbox/ListboxOption.svelte

@@ -12,7 +12,11 @@
 
 <script lang="ts">
   import { onDestroy, onMount, tick } from "svelte";
-  import { ListboxStates, useListboxContext } from "./Listbox.svelte";
+  import {
+    ListboxStates,
+    useListboxContext,
+    ValueMode,
+  } from "./Listbox.svelte";
   import { useId } from "$lib/hooks/use-id";
   import { Focus } from "$lib/utils/calculate-active-index";
   import Render from "$lib/utils/Render.svelte";
@@ -21,6 +25,7 @@
   import { get_current_component } from "svelte/internal";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import type { TPassThroughProps } from "$lib/types";
+  import { match } from "$lib/utils/match";
 
   /***** Props *****/
   type TAsProp = $$Generic<SupportedAs>;
@@ -39,13 +44,26 @@
   let id = `headlessui-listbox-option-${useId()}`;
 
   let buttonRef = $api.buttonRef;
+  let isFirstSelected = false;
 
   $: active =
     $api.activeOptionIndex !== null
       ? $api.options[$api.activeOptionIndex].id === id
       : false;
 
-  $: selected = $api.value === value;
+  $: selected = match($api.mode, {
+    [ValueMode.Single]: () => $api.value === value,
+    [ValueMode.Multi]: () => ($api.value as unknown[]).includes(value),
+  });
+
+  $: isFirstSelected = match($api.mode, {
+    [ValueMode.Single]: () => selected,
+    [ValueMode.Multi]: () =>
+      $api.options.find((option: unknown) =>
+        ($api.value as unknown[]).includes(option)
+      )?.id === id,
+  });
+
   $: dataRef = {
     disabled,
     value,
@@ -75,7 +93,14 @@
     await tick();
     if (newState !== oldState || newSelected !== oldSelected) {
       if (newState === ListboxStates.Open && newSelected) {
-        $api.goToOption(Focus.Specific, id);
+        match($api.mode, {
+          [ValueMode.Multi]: () => {
+            if (isFirstSelected) $api.goToOption(Focus.Specific, id);
+          },
+          [ValueMode.Single]: () => {
+            $api.goToOption(Focus.Specific, id);
+          },
+        });
       }
     }
     if (newState !== oldState || newActive !== oldActive) {

src/routes/docs/listbox.svx

@@ -99,6 +99,44 @@ You can use these states to conditionally apply whatever active/focus styles you
 </Listbox>
 ```
 
+## Multiple Values
+
+To allow selecting multiple values in your listbox, use the `multiple` prop and pass an array to `value` instead of a single option.
+
+```svelte
+<script>
+  import {
+    Listbox,
+    ListboxButton,
+    ListboxLabel,
+    ListboxOptions,
+    ListboxOption,
+  } from "@rgossiaux/svelte-headlessui";
+
+  const people = [
+    { id: 1, name: "Durward Reynolds" },
+    { id: 2, name: "Kenton Towne" },
+    { id: 3, name: "Therese Wunsch" },
+    { id: 4, name: "Benedict Kessler" },
+    { id: 5, name: "Katelyn Rohan" },
+  ];
+
+  let selectedPeople = [people[0], people[1]];
+</script>
+
+<Listbox value={selectedPeople} on:change={(e) => (selectedPeople = e.detail)} multiple>
+  <ListboxLabel>Assignee:</ListboxLabel>
+  <ListboxButton>{selectedPeople.map((person) => person.name).join(', ')}</ListboxButton>
+  <ListboxOptions>
+    {#each people as person (person.id)}
+      <ListboxOption value={person}>
+        {person.name}
+      </ListboxOption>
+    {/each}
+  </ListboxOptions>
+</Listbox>
+```
+
 ## Using a custom label
 
 By default, the `Listbox` will use the `<ListboxButton>` contents as the label for screenreaders. If you'd like more control over what is announced to assistive technologies, use the `ListboxLabel` component: