From d271923fede22b808ae33c7075ad94427405039a Mon Sep 17 00:00:00 2001
From: Quang Phan <vnphanquang@gmail.com>
Date: Fri, 14 Oct 2022 14:55:18 +0700
Subject: [PATCH] chore: even better typing for multiple & selected/value props
 (thanks to Hofer Ivan)

ref: https://github.com/sveltejs/language-tools/issues/442#issuecomment-1278507804
---
 .../svelte-kit/src/routes/select/+page.svelte |  6 +++--
 .../src/routes/select/Select.svelte           |  3 ++-
 .../src/routes/select/Select.types.ts         | 26 +++++++------------
 3 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/apps/svelte-kit/src/routes/select/+page.svelte b/apps/svelte-kit/src/routes/select/+page.svelte
index a1d674f7..93ae601f 100644
--- a/apps/svelte-kit/src/routes/select/+page.svelte
+++ b/apps/svelte-kit/src/routes/select/+page.svelte
@@ -129,7 +129,8 @@
           <Select {options} placeholder="Please select" selected={options[2]} />
 
           <!-- this should cause ts error (selected must be array) -->
-          <!-- <Select {options} placeholder="Please select" multiple selected={options[2]} /> -->
+          <!-- <Select {options} placeholder="Please select" multiple selected={options[2]} />
+          <Select {options} placeholder="Please select" multiple={true} selected={options[2]} /> -->
         </div>
 
         <div>
@@ -137,7 +138,8 @@
           <Select {options} placeholder="Please select" multiple selected={options.slice(2, 5)} />
 
           <!-- this should cause ts error (selected must be single value) -->
-          <!-- <Select {options} placeholder="Please select" selected={options.slice(2, 5)} /> -->
+          <!-- <Select {options} placeholder="Please select" selected={options.slice(2, 5)} />
+          <Select {options} placeholder="Please select" multiple={false} selected={options.slice(2, 5)} /> -->
         </div>
 
       </article>
diff --git a/apps/svelte-kit/src/routes/select/Select.svelte b/apps/svelte-kit/src/routes/select/Select.svelte
index cb2a9551..5bfd5451 100644
--- a/apps/svelte-kit/src/routes/select/Select.svelte
+++ b/apps/svelte-kit/src/routes/select/Select.svelte
@@ -8,8 +8,9 @@
 
   type Value = $$Generic;
   type Option = $$Generic<BaseOption<Value>>;
+  type Multiple = $$Generic<true | false | undefined>;
 
-  type $$Props = SelectProps<Option>;
+  type $$Props = SelectProps<Option, Multiple>;
   type SelectedOption = $$Props['selected'];
   type SelectedValue = $$Props['value'];
 
diff --git a/apps/svelte-kit/src/routes/select/Select.types.ts b/apps/svelte-kit/src/routes/select/Select.types.ts
index 3075af48..58f0533f 100644
--- a/apps/svelte-kit/src/routes/select/Select.types.ts
+++ b/apps/svelte-kit/src/routes/select/Select.types.ts
@@ -32,7 +32,11 @@ export interface GroupConfig<Option> {
 
 export type GroupProp<Option> = boolean | Grouper<Option> | Partial<GroupConfig<Option>>;
 
-export interface SelectBaseProps<O extends BaseOption<V>, V = O['value']> {
+export interface SelectProps<
+  O extends BaseOption<V>,
+  M extends true | false | undefined,
+  V = O['value'],
+> {
   id?: string;
   placeholder?: string;
   open?: boolean;
@@ -48,20 +52,8 @@ export interface SelectBaseProps<O extends BaseOption<V>, V = O['value']> {
   clearable?: boolean;
   hideExpansionIndicator?: boolean;
   options: O[];
+  multiple?: M;
+  selected?: undefined extends M ? O : true extends M ? O[] : O;
+  // selected?: M extends undefined ? O : M extends true ? O[] : O;
+  value?: undefined extends M ? V : true extends M ? V[] : V;
 }
-
-export interface SingleSelectProps<O extends BaseOption<V>, V = O['value']> extends SelectBaseProps<O, V> {
-  multiple?: false;
-  selected?: O;
-  value?: V;
-}
-
-export interface MultipleSelectProps<O extends BaseOption<V>, V = O['value']> extends SelectBaseProps<O, V> {
-  multiple: true;
-  selected?: O[];
-  value?: V[];
-}
-
-export type SelectProps<O extends BaseOption<V>, V = O['value']> =
-  | SingleSelectProps<O, V>
-  | MultipleSelectProps<O, V>;