refactor(combobox): refactoring types / deriving types

Author: thejackshelton

apps/website/src/routes/docs/headless/(components)/combobox/examples.tsx

@@ -26,17 +26,17 @@ const trainers = [
 ];
 
 interface Trainer {
-  value: string;
-  label: string;
+  testValue: string;
+  testLabel: string;
   disabled: boolean;
 }
 
 const ALL_OPTIONS: Array<Trainer> = [
-  { value: 'alice', label: 'Alice', disabled: false },
-  { value: 'joana', label: 'Joana', disabled: false },
-  { value: 'malcolm', label: 'Malcolm', disabled: false },
-  { value: 'zack', label: 'Zack', disabled: true },
-  { value: 'brian', label: 'Brian', disabled: false }
+  { testValue: 'alice', testLabel: 'Alice', disabled: false },
+  { testValue: 'joana', testLabel: 'Joana', disabled: false },
+  { testValue: 'malcolm', testLabel: 'Malcolm', disabled: false },
+  { testValue: 'zack', testLabel: 'Zack', disabled: true },
+  { testValue: 'brian', testLabel: 'Brian', disabled: false }
 ];
 
 export const Example01 = component$(() => {
@@ -46,7 +46,7 @@ export const Example01 = component$(() => {
 
   const onInputChange$ = $((value: string) => {
     optionsSig.value = ALL_OPTIONS.filter((option) => {
-      return option.label.toLowerCase().includes(value.toLowerCase());
+      return option.testLabel.toLowerCase().includes(value.toLowerCase());
     });
 
     console.log(optionsSig.value);
@@ -66,13 +66,15 @@ export const Example01 = component$(() => {
           <Combobox
             options={optionsSig}
             onInputChange$={onInputChange$}
+            optionValueKey="testValue"
+            optionLabelKey="testLabel"
             optionComponent$={$((option: string | Trainer, index: number) => (
               <ComboboxOption
                 index={index}
                 option={option}
                 class="rounded-sm px-2 hover:bg-[#496080] focus:bg-[#496080]"
               >
-                {typeof option === 'string' ? option : option.label}
+                {typeof option === 'string' ? option : option.testLabel}
               </ComboboxOption>
             ))}
             class="relative"

packages/kit-headless/src/components/combobox/combobox-context.type.ts

@@ -10,6 +10,11 @@ export interface ComboboxContext {
   triggerRef: Signal<HTMLButtonElement | undefined>;
   optionComponent$?: QRL<(option: any, index: number) => JSXNode>;
   onInputChange$?: QRL<(value: string) => void>;
+  optionValueKey?: string;
+  optionLabelKey?: string;
+  optionDisabledKey?: string;
   options: Signal<Array<string | Record<string, any>>>;
   highlightedIndexSig: Signal<number>;
 }
+
+export type Option = ComboboxContext['options']['value'][number];

packages/kit-headless/src/components/combobox/combobox-control.tsx

@@ -31,7 +31,7 @@ export const ComboboxControl = component$((props: ComboboxControlProps) => {
 
   useOnWindow('click', closeULOnOutsideClick$);
 
-  useVisibleTask$(({ cleanup }) => {
+  useVisibleTask$(function preventFocusChangeTask({ cleanup }) {
     if (controlRef.value) {
       const handleMousedown = (e: MouseEvent): void => {
         const isTrigger = e.target === context.triggerRef.value;

packages/kit-headless/src/components/combobox/combobox-input.tsx

@@ -8,6 +8,7 @@ import {
 } from '@builder.io/qwik';
 import { KeyCode } from '../../utils';
 import ComboboxContextId from './combobox-context-id';
+import { getOptionLabel } from './utils';
 
 const preventedKeys = [KeyCode.Home, KeyCode.End, KeyCode.PageDown, KeyCode.ArrowUp];
 
@@ -18,10 +19,10 @@ export const ComboboxInput = component$((props: ComboboxInputProps) => {
   const context = useContext(ComboboxContextId);
 
   const onKeydownBehavior$ = $((e: QwikKeyboardEvent) => {
-    const highlightedOption = context.options.value[context.highlightedIndexSig.value];
-    const highlightedOptionLabel = highlightedOption
-      ? (highlightedOption as any).label
-      : undefined;
+    const highlightedOptionLabel = getOptionLabel(
+      context.options.value[context.highlightedIndexSig.value],
+      context
+    );
 
     if (e.key === 'ArrowDown') {
       // If the listbox is already open, move down

packages/kit-headless/src/components/combobox/combobox-option.tsx

@@ -8,17 +8,25 @@ import {
   useVisibleTask$,
 } from '@builder.io/qwik';
 import ComboboxContextId from './combobox-context-id';
+import { getOptionLabel } from './utils';
+
+import { Option } from './combobox-context.type';
 
 export type ComboboxOptionProps = {
   index: number;
-  option: string | Record<string, any>;
+  option: Option;
 } & QwikIntrinsicElements['li'];
 
 export const ComboboxOption = component$(
   ({ index, option, ...props }: ComboboxOptionProps) => {
     // const index = (props as ComboboxOptionProps & { _index: number })._index;
+    option;
     const context = useContext(ComboboxContextId);
-    const isHighlightedSig = useSignal(false);
+    const isHighlightedSig = useComputed$(
+      () => context.highlightedIndexSig.value === index
+    );
+
+    useSignal(false);
     const optionRef = useSignal<HTMLLIElement>();
     // const selectedOptionIndexSig = context.selectedOptionIndexSig;
 
@@ -55,23 +63,32 @@ export const ComboboxOption = component$(
       }
     });
 
-    useVisibleTask$(function setHighlightedOptionTask({ track }) {
-      track(() => context.highlightedIndexSig.value);
-
-      const highlightedOption = context.options.value[context.highlightedIndexSig.value];
-
-      // NOT a signal. The value property on the options array of objects.
-      const optionValue = (option as any).value;
-      const highlightedOptionValue = highlightedOption
-        ? (highlightedOption as any).value
-        : undefined;
-
-      if (highlightedOption && highlightedOptionValue === optionValue) {
-        isHighlightedSig.value = true;
-      } else {
-        isHighlightedSig.value = false;
-      }
-    });
+    //   // NOT a signal. The value property on the options array of objects.
+    //   let optionValue, optionLabel, isOptionDisabled;
+    //   if (typeof option === 'string') {
+    //     optionValue = option;
+    //     optionLabel = option;
+    //     isOptionDisabled = false;
+    //   } else {
+    //     const valueKey = context.optionValueKey ?? 'value';
+    //     const labelKey = context.optionLabelKey ?? 'label';
+    //     const disabledKey = context.optionDisabledKey ?? 'disabled';
+    //     if (option[valueKey] === undefined) {
+    //       throw new Error(
+    //         'Qwik UI: Combobox optionValueKey was not provided, and the option was not a string. Please provide a value for optionValueKey, or ensure that the option is a string.'
+    //       );
+    //     }
+
+    //     if (option[labelKey] === undefined) {
+    //       throw new Error(
+    //         'Qwik UI: Combobox optionLabelKey was not provided, and the option was not a string. Please provide a value for optionLabelKey, or ensure that the option is a string.'
+    //       );
+    //     }
+
+    //     optionValue = option[valueKey];
+    //     optionLabel = option[labelKey];
+    //     isOptionDisabled = option[disabledKey];
+    //   }
 
     return (
       <li
@@ -85,12 +102,10 @@ export const ComboboxOption = component$(
             return;
           }
 
-          context.inputRef.value.value = (
-            context.options.value[context.highlightedIndexSig.value] as Record<
-              string,
-              any
-            >
-          ).label;
+          context.inputRef.value.value = getOptionLabel(
+            context.options.value[context.highlightedIndexSig.value],
+            context
+          );
 
           context.isListboxOpenSig.value = false;
           // context.inputRef.value.focus();

packages/kit-headless/src/components/combobox/combobox-portal.tsx

@@ -12,11 +12,10 @@ import {
   useVisibleTask$,
 } from '@builder.io/qwik';
 
+import { isServer } from '@builder.io/qwik/build';
 import { ContextPair, openPortalContextId } from '../qwik-ui-provider';
 import ComboboxContextId from './combobox-context-id';
 
-import { isServer } from '@builder.io/qwik/build';
-
 export const ComboboxPortal: FunctionComponent = ({ children }) => {
   return <ComboboxPortalImpl elementToTeleport={children} />;
 };

packages/kit-headless/src/components/combobox/combobox.tsx

@@ -9,16 +9,21 @@ import {
   useSignal,
 } from '@builder.io/qwik';
 
-export type ComboboxImplProps = {
+import { Option } from './combobox-context.type';
+
+export type ComboboxProps = {
   defaultValue?: string;
   placeholder?: string;
   // filter: boolean | ((value: string) => boolean);
-  optionComponent$?: QRL<(option: any, index: number) => JSXNode>;
+  optionComponent$?: QRL<(option: Option, index: number) => JSXNode>;
   onInputChange$?: QRL<(value: string) => void>;
   optionValue?: string;
   optionTextValue?: string;
   optionLabel?: string;
-  options: Signal<Array<string | Record<string, any>>>;
+  optionValueKey?: string;
+  optionLabelKey?: string;
+  optionDisabledKey?: string;
+  options: Signal<Array<Option>>;
   'bind:isListboxOpenSig'?: Signal<boolean | undefined>;
   'bind:isInputFocusedSig'?: Signal<boolean | undefined>;
   'bind:isTriggerFocusedSig'?: Signal<boolean | undefined>;
@@ -29,6 +34,7 @@ export type OptionInfo = {
   index: number;
 };
 
+// DO NOT REMOVE THIS: IT'S HOW YOU GET INDEXES WITHOUT MAPPING
 // export const Combobox: FunctionComponent<ComboboxImplProps> = (props) => {
 //   const { children: myChildren, ...rest } = props;
 
@@ -60,7 +66,6 @@ export type OptionInfo = {
 //         childrenToProcess.unshift(...portalChildren);
 //         break;
 //       }
-
 //       case ComboboxListbox: {
 //         const listboxChildren = Array.isArray(child.props.children)
 //           ? [...child.props.children]
@@ -80,14 +85,17 @@ export type OptionInfo = {
 import ComboboxContextId from './combobox-context-id';
 import { ComboboxContext } from './combobox-context.type';
 
-export const Combobox = component$((props: ComboboxImplProps) => {
+export const Combobox = component$((props: ComboboxProps) => {
   const {
     'bind:isListboxOpenSig': givenListboxOpenSig,
     'bind:isInputFocusedSig': givenInputFocusedSig,
     'bind:isTriggerFocusedSig': givenTriggerFocusedSig,
     optionComponent$,
     onInputChange$,
     options,
+    optionValueKey,
+    optionLabelKey,
+    optionDisabledKey,
     ...rest
   } = props;
   const listboxRef = useSignal<HTMLUListElement>();
@@ -119,6 +127,9 @@ export const Combobox = component$((props: ComboboxImplProps) => {
     listboxRef,
     optionComponent$,
     onInputChange$,
+    optionValueKey,
+    optionLabelKey,
+    optionDisabledKey,
     options,
     highlightedIndexSig,
   };

packages/kit-headless/src/components/combobox/utils.ts

@@ -0,0 +1,18 @@
+import { ComboboxContext, Option } from './combobox-context.type';
+
+export function getOptionLabel(option: undefined | Option, context: ComboboxContext) {
+  if (option === undefined) {
+    return undefined;
+  }
+  if (typeof option === 'string') {
+    return option;
+  }
+
+  const labelKey = context.optionLabelKey ?? 'label';
+  if (option[labelKey] === undefined) {
+    throw new Error(
+      'Qwik UI: Combobox optionLabelKey was not provided, and the option was not a string. Please provide a value for optionLabelKey, use the property name "label", or ensure that the option is a string.'
+    );
+  }
+  return option[labelKey];
+}