fix(select): internal naming and destructuring improvements

Author: thejackshelton

apps/website/src/routes/docs/headless/select/examples/controlled.tsx

@@ -16,7 +16,6 @@ export default component$(() => {
     <>
       <Select
         onChange$={$((value: string) => {
-          console.log('value: ', value);
           selected.value = value;
         })}
         bind:value={selected}

apps/website/src/routes/docs/headless/select/select.spec.ts

@@ -444,7 +444,6 @@ test.describe('Keyboard Behavior', () => {
       await getTrigger().press('Enter');
 
       const value = await getValue();
-      console.log(value);
       expect(optStr).toEqual(value);
     });
 

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

@@ -25,8 +25,6 @@ export const SelectOption = component$<SelectOptionProps>((props) => {
   const localIndexSig = useSignal<number | null>(null);
   const optionId = `${context.localId}-${index}`;
 
-  console.log('value: ', props.value);
-
   const isSelectedSig = useComputed$(() => {
     return !disabled && context.selectedIndexSig.value === index;
   });

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

@@ -124,8 +124,6 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
       // select options
       if (e.key === 'Enter' || e.key === ' ') {
         context.selectedIndexSig.value = context.highlightedIndexSig.value;
-        console.log('selectedIndex', context.selectedIndexSig.value);
-        console.log('highlightedIndex', context.highlightedIndexSig.value);
       }
 
       if (e.key === 'ArrowDown') {

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

@@ -7,19 +7,21 @@ type SelectValueProps = PropsOf<'span'> & {
 };
 
 export const SelectValue = component$((props: SelectValueProps) => {
+  const { placeholder, ...rest } = props;
+
   const context = useContext(SelectContextId);
   if (!context.optionsSig.value) return;
 
   const displayStrSig = useComputed$(() => {
     if (context.selectedIndexSig.value !== null) {
       return context.optionsSig.value[context.selectedIndexSig.value].displayValue;
     } else {
-      return props.placeholder;
+      return placeholder;
     }
   });
 
   return (
-    <span data-value {...props}>
+    <span data-value {...rest}>
       {displayStrSig.value}
     </span>
   );

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

@@ -35,15 +35,23 @@ export type SelectProps = PropsOf<'div'> & {
 
 /* root component in select-inline.tsx */
 export const SelectImpl = component$<SelectProps>((props: SelectProps) => {
-  const { _options, onChange$, onOpenChange$, ...rest } = props;
+  const {
+    _options,
+    _valuePropIndex: givenValuePropIndex,
+    onChange$,
+    onOpenChange$,
+    scrollOptions: givenScrollOptions,
+    loop: givenLoop,
+    ...rest
+  } = props;
 
   // refs
   const rootRef = useSignal<HTMLDivElement>();
   const triggerRef = useSignal<HTMLButtonElement>();
   const popoverRef = useSignal<HTMLElement>();
   const listboxRef = useSignal<HTMLUListElement>();
   const groupRef = useSignal<HTMLDivElement>();
-  const loop = rest.loop ?? false;
+  const loop = givenLoop ?? false;
   const localId = useId();
   const listboxId = `${localId}-listbox`;
 
@@ -63,10 +71,10 @@ export const SelectImpl = component$<SelectProps>((props: SelectProps) => {
   );
 
   // core state
-  const selectedIndexSig = useSignal<number | null>(rest._valuePropIndex ?? null);
-  const highlightedIndexSig = useSignal<number | null>(rest._valuePropIndex ?? null);
+  const selectedIndexSig = useSignal<number | null>(givenValuePropIndex ?? null);
+  const highlightedIndexSig = useSignal<number | null>(givenValuePropIndex ?? null);
   const isListboxOpenSig = useSignal<boolean>(false);
-  const scrollOptions = rest.scrollOptions ?? {
+  const scrollOptions = givenScrollOptions ?? {
     behavior: 'instant',
     block: 'nearest',
   };
@@ -86,7 +94,7 @@ export const SelectImpl = component$<SelectProps>((props: SelectProps) => {
   useTask$(async function onChangeTask({ track }) {
     track(() => selectedIndexSig.value);
     if (isBrowser && selectedIndexSig.value !== null) {
-      await onChange$?.(optionsSig.value[selectedIndexSig.value!].value);
+      await onChange$?.(optionsSig.value[selectedIndexSig.value].value);
     }
   });