Fix setter type compatibility with kobalte select and add tests (#2318)

* fix kobalte select type error and add test * format * better naming * add more tests * format * add changeset --------- Co-authored-by: Ryan Carniato <[email protected]>
solidjs · Oct 7, 2024 · e2e2a03 · e2e2a03
1 parent 22aff14
commit e2e2a03
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/.changeset/shaggy-walls-count.md b/.changeset/shaggy-walls-count.md
@@ -0,0 +1,5 @@
+---
+"solid-js": patch
+---
+
+Fix setter type compatibility with kobalte select and add tests
diff --git a/packages/solid/src/reactive/signal.ts b/packages/solid/src/reactive/signal.ts
@@ -180,11 +180,11 @@ export type Accessor<T> = () => T;
 
 export type Setter<in out T> = {
   <U extends T>(value: Exclude<U, Function> | ((prev: T) => U)): U;
-  <U extends T>(...args: undefined extends T ? [] : [value: (prev: T) => U]): undefined extends T
-    ? undefined
-    : U;
-  <U extends T>(value: Exclude<U, Function>): U;
+  <U extends T>(
+    ...args: undefined extends T ? [] : [value: Exclude<U, Function> | ((prev: T) => U)]
+  ): undefined extends T ? undefined : U;
   <U extends T>(value: (prev: T) => U): U;
+  <U extends T>(value: Exclude<U, Function>): U;
 };
 
 export type Signal<T> = [get: Accessor<T>, set: Setter<T>];

diff --git a/packages/solid/test/signals.type-tests.ts b/packages/solid/test/signals.type-tests.ts
@@ -880,6 +880,41 @@ function createInitializedSignal<T>(init: T): Signal<T> {
   return [generic, (v?) => setGeneric(v!)];
 }
 
+interface KobalteBaseSelectProps<Option, OptGroup = never> {
+  options: Array<Option | OptGroup>;
+}
+
+interface KobaltSingleSelectProps<T> {
+  value?: T | null;
+  onChange?: (value: T) => void;
+  multiple?: false;
+}
+
+interface KobaltMultiSelectProps<T> {
+  value?: T[];
+  onChange?: (value: T[]) => void;
+  multiple?: true;
+}
+
+type KobaltSelectProps<Option, OptGroup = never> = (
+  | KobaltSingleSelectProps<Option>
+  | KobaltMultiSelectProps<Option>
+) &
+  KobalteBaseSelectProps<Option, OptGroup>;
+
+type fruits = "apple" | "banana" | "orange";
+const fruits: fruits[] = ["apple", "banana", "orange"];
+const [fruit, setFruit] = createSignal<fruits>("apple");
+const [fruitArr, setFruitArr] = createSignal<fruits[]>(["apple"]);
+function kobalteSelect<T>(props: KobaltSelectProps<T>) {}
+kobalteSelect({ value: fruit(), onChange: setFruit, options: fruits });
+kobalteSelect<fruits>({
+  value: fruitArr(),
+  onChange: setFruitArr,
+  options: fruits,
+  multiple: true
+});
+
 //////////////////////////////////////////////////////////////////////////
 // test explicit generic args ////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////