fix(select): types for multiple yes/no (#1021)

* fix(select): types for multiple yes/no

* added missing changesets

---------

Co-authored-by: Shai Reznik <[email protected]>

Author: wmertens

.changeset/shy-bottles-agree.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/styled': patch
+---
+
+FIX: onChange not accepting regular functions

.changeset/tender-pens-run.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+FIX: types for multiple values

packages/kit-headless/src/components/select/select-inline.tsx

@@ -1,4 +1,4 @@
-import { type JSXNode, Component } from '@builder.io/qwik';
+import { type JSXNode, type PublicProps } from '@builder.io/qwik';
 import { HSelectImpl, type SelectProps } from './select-root';
 import { HSelectItem as InternalSelectItem } from './select-item';
 import { HSelectItemLabel as InternalSelectItemLabel } from './select-item-label';
@@ -14,8 +14,8 @@ type InlineCompProps = {
   This is an inline component. An example use case of an inline component to get the proper indexes with CSR. See issue #4757
   for more information.
 */
-export const HSelectRoot: Component<SelectProps & InlineCompProps> = (
-  props: SelectProps & InlineCompProps,
+export const HSelectRoot = <M extends true>(
+  props: PublicProps<SelectProps<M> & InlineCompProps>,
 ) => {
   const {
     children: myChildren,

packages/kit-headless/src/components/select/select-root.tsx

@@ -32,44 +32,24 @@ export type InternalSelectProps = {
   _itemsMap: TItemsMap;
 };
 
-export type TMultiple<M> = M extends true ? string[] : string;
-
-/**
- *  Value sets an initial value for the select. If multiple is true, value is disabled
- *
- */
-type TMultiValue =
-  | { multiple: true; value?: never }
-  | { multiple?: false; value?: string };
-
-type TStringOrArray =
-  | {
-    multiple?: true;
-    onChange$?: QRL<(value: string[]) => void>;
-  }
-  | {
-    multiple?: false;
-    onChange$?: QRL<(value: string) => void>;
-  };
-
-export type SelectProps<M extends boolean = boolean> = Omit<
-  PropsOf<'div'>,
-  'onChange$'
-> & {
+export type SelectProps<
+  M extends true,
+  T = boolean extends M ? string : M extends true ? string[] : string,
+> = Omit<PropsOf<'div'>, 'onChange$'> & {
   /** A signal that controls the current selected value (controlled). */
-  'bind:value'?: Signal<TMultiple<M>>;
+  'bind:value'?: T extends string ? Signal<T> : never;
 
   /** A signal that controls the current open state (controlled). */
   'bind:open'?: Signal<boolean>;
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  'bind:displayValue'?: Signal<TMultiple<M>>;
+  'bind:displayValue'?: T extends string ? Signal<T> : never;
 
   /**
    * QRL handler that runs when a select value changes.
    * @param value The new value as a string.
    */
-  onChange$?: QRL<(value: TMultiple<M>) => void>;
+  onChange$?: QRL<(value: T) => void>;
   /**
    * QRL handler that runs when the listbox opens or closes.
    * @param open The new state of the listbox.
@@ -107,13 +87,18 @@ export type SelectProps<M extends boolean = boolean> = Omit<
    */
   multiple?: M;
 
+  /**
+   *  Value sets an initial value for the select. If multiple is true, value is disabled
+   *
+   */
+  value?: M extends false ? string : never;
+
   invalid?: boolean;
-} & TMultiValue &
-  TStringOrArray;
+};
 
 /* root component in select-inline.tsx */
-export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps>(
-  (props: SelectProps<boolean> & InternalSelectProps) => {
+export const HSelectImpl = component$(
+  <M extends true, T>(props: SelectProps<M, T> & InternalSelectProps) => {
     const {
       _itemsMap,
       _valuePropIndex: givenValuePropIndex,
@@ -259,7 +244,7 @@ export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps
       }
 
       if (onChange$ && selectedIndexSetSig.value.size > 0) {
-        await onChange$(context.multiple ? values : values[0]);
+        await onChange$(context.multiple ? (values as T) : (values[0] as T));
       }
 
       // sync the user's given signal when an option is selected
@@ -269,9 +254,9 @@ export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps
 
         if (currUserSigValues !== newUserSigValues) {
           if (context.multiple) {
-            bindValueSig.value = values;
+            bindValueSig.value = values as T;
           } else {
-            bindValueSig.value = values[0];
+            bindValueSig.value = values[0] as T;
           }
         }
       }
@@ -281,8 +266,8 @@ export const HSelectImpl = component$<SelectProps<boolean> & InternalSelectProps
       // sync the user's given signal for the display value
       if (bindDisplayTextSig && context.currDisplayValueSig.value) {
         bindDisplayTextSig.value = context.multiple
-          ? context.currDisplayValueSig.value
-          : context.currDisplayValueSig.value[0];
+          ? (context.currDisplayValueSig.value as T)
+          : (context.currDisplayValueSig.value[0] as T);
       }
     });
 

packages/kit-styled/src/components/select/select.tsx

@@ -1,9 +1,11 @@
-import { type PropsOf, Slot, component$ } from '@builder.io/qwik';
+import { type PropsOf, type PublicProps, Slot, component$ } from '@builder.io/qwik';
 import { Select as HeadlessSelect } from '@qwik-ui/headless';
 import { cn } from '@qwik-ui/utils';
 import { LuCheck, LuChevronDown } from '@qwikest/icons/lucide';
 
-const Root = (props: PropsOf<typeof HeadlessSelect.Root>) => (
+const Root = <M extends true>(
+  props: PublicProps<PropsOf<typeof HeadlessSelect.Root<M>>>,
+) => (
   <HeadlessSelect.Root
     {...props}
     selectItemComponent={Item}