style(select): update variable names to be more explicit

Author: shiroinegai

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

@@ -1,9 +1,9 @@
-import { QRL, Signal } from '@builder.io/qwik';
+import { Signal } from '@builder.io/qwik';
 
 export type SelectContext = {
-  options: HTMLElement[];
-  selection: Signal<string | undefined>;
-  isExpanded: Signal<boolean>;
-  triggerRef: Signal<HTMLElement | undefined>;
-  listBoxRef: Signal<HTMLElement | undefined>;
+  optionsStore: HTMLElement[];
+  selectedOptionSig: Signal<string | undefined>;
+  isOpenSig: Signal<boolean>;
+  triggerRefSig: Signal<HTMLElement | undefined>;
+  listBoxRefSig: Signal<HTMLElement | undefined>;
 };

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

@@ -1,15 +1,13 @@
-import { QwikIntrinsicElements, Slot, component$ } from '@builder.io/qwik';
+import { component$, QwikIntrinsicElements, Slot } from '@builder.io/qwik';
 
 export type SelectGroupProps = {
   disabled?: boolean;
 } & QwikIntrinsicElements['div'];
 
-export const SelectGroup = component$(
-  ({ disabled, ...props }: SelectGroupProps) => {
-    return (
-      <div role="group" aria-disabled={disabled} {...props}>
-        <Slot />
-      </div>
-    );
-  }
-);
+export const SelectGroup = component$(({ disabled, ...props }: SelectGroupProps) => {
+  return (
+    <div role="group" aria-disabled={disabled} {...props}>
+      <Slot />
+    </div>
+  );
+});

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

@@ -13,11 +13,11 @@ export type SelectListBoxProps = QwikIntrinsicElements['ul'];
 export const SelectListBox = component$((props: SelectListBoxProps) => {
   const listBoxRef = useSignal<HTMLElement>();
   const selectContext = useContext(SelectContextId);
-  selectContext.listBoxRef = listBoxRef;
+  selectContext.listBoxRefSig = listBoxRef;
 
   useVisibleTask$(function setKeyHandler({ cleanup }) {
     function keyHandler(e: KeyboardEvent) {
-      const availableOptions = selectContext.options.filter(
+      const availableOptions = selectContext.optionsStore.filter(
         (option) => !(option?.getAttribute('aria-disabled') === 'true')
       );
       const target = e.target as HTMLElement;
@@ -61,7 +61,7 @@ export const SelectListBox = component$((props: SelectListBoxProps) => {
       role="listbox"
       tabIndex={0}
       style={`
-      display: ${selectContext.isExpanded.value ? 'block' : 'none'};
+      display: ${selectContext.isOpenSig.value ? 'block' : 'none'};
       position: absolute;
       z-index: 1;
       ${props.style}

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

@@ -1,4 +1,4 @@
-import { QwikIntrinsicElements, Slot, component$ } from '@builder.io/qwik';
+import { component$, QwikIntrinsicElements, Slot } from '@builder.io/qwik';
 
 export type SelectMarkerProps = QwikIntrinsicElements['span'];
 

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

@@ -10,7 +10,7 @@ export const NativeSelect = component$(
     const ref = useSignal<HTMLElement>();
 
     useVisibleTask$(function populateNativeSelect({ track }) {
-      const options = track(() => selectContext.options);
+      const options = track(() => selectContext.optionsStore);
 
       options.length > 0 &&
         options.map((option) => {
@@ -25,7 +25,7 @@ export const NativeSelect = component$(
       'change',
       $((e) => {
         const target = e.target as HTMLSelectElement;
-        target.value = selectContext.selection.value!;
+        target.value = selectContext.selectedOptionSig.value!;
       })
     );
 
@@ -35,7 +35,7 @@ export const NativeSelect = component$(
         required
         aria-hidden
         tabIndex={-1}
-        bind:value={selectContext.selection}
+        bind:value={selectContext.selectedOptionSig}
         {...props}
       >
         <option value="" />

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

@@ -31,17 +31,17 @@ export const SelectOption = component$(
         }
 
         if (!disabled && e.key === 'Tab' && target.dataset.optionValue === optionValue) {
-          selectContext.selection.value = optionValue;
-          selectContext.isExpanded.value = false;
+          selectContext.selectedOptionSig.value = optionValue;
+          selectContext.isOpenSig.value = false;
         }
 
         if (
           !disabled &&
           (e.key === 'Enter' || e.key === ' ') &&
           target.dataset.optionValue === optionValue
         ) {
-          selectContext.selection.value = optionValue;
-          selectContext.isExpanded.value = false;
+          selectContext.selectedOptionSig.value = optionValue;
+          selectContext.isOpenSig.value = false;
         }
       }
       optionRef.value?.addEventListener('keydown', keyHandler);
@@ -56,12 +56,12 @@ export const SelectOption = component$(
         role="option"
         tabIndex={disabled ? -1 : 0}
         aria-disabled={disabled}
-        aria-selected={optionValue === selectContext.selection.value}
+        aria-selected={optionValue === selectContext.selectedOptionSig.value}
         data-option-value={optionValue}
         onClick$={() => {
           if (!disabled) {
-            selectContext.selection.value = optionValue;
-            selectContext.isExpanded.value = false;
+            selectContext.selectedOptionSig.value = optionValue;
+            selectContext.isOpenSig.value = false;
           }
         }}
         onMouseEnter$={(e) => {

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

@@ -20,19 +20,19 @@ export type SelectRootProps = {
 } & QwikIntrinsicElements['div'];
 
 export const SelectRoot = component$((props: SelectRootProps) => {
-  const rootRef = useSignal<HTMLElement>();
-  const options = useStore([]);
-  const selection = useSignal('');
-  const isExpanded = useSignal(false);
-  const triggerRef = useSignal<HTMLElement>();
-  const listBoxRef = useSignal<HTMLElement>();
+  const rootRefSig = useSignal<HTMLElement>();
+  const optionsStore = useStore([]);
+  const selectedOptionSig = useSignal('');
+  const isOpenSig = useSignal(false);
+  const triggerRefSig = useSignal<HTMLElement>();
+  const listBoxRefSig = useSignal<HTMLElement>();
 
   const selectContext: SelectContext = {
-    options,
-    selection,
-    isExpanded,
-    triggerRef,
-    listBoxRef
+    optionsStore,
+    selectedOptionSig,
+    isOpenSig,
+    triggerRefSig,
+    listBoxRefSig
   };
 
   useContextProvider(SelectContextId, selectContext);
@@ -41,8 +41,8 @@ export const SelectRoot = component$((props: SelectRootProps) => {
     'click',
     $((e) => {
       const target = e.target as HTMLElement;
-      if (selectContext.isExpanded.value === true && !rootRef.value?.contains(target)) {
-        selectContext.isExpanded.value = false;
+      if (selectContext.isOpenSig.value === true && !rootRefSig.value?.contains(target)) {
+        selectContext.isOpenSig.value = false;
       }
     })
   );
@@ -51,12 +51,12 @@ export const SelectRoot = component$((props: SelectRootProps) => {
     function keyHandler(e: KeyboardEvent) {
       e.preventDefault();
       if (e.key === 'Escape') {
-        selectContext.isExpanded.value = false;
+        selectContext.isOpenSig.value = false;
       }
     }
-    rootRef.value?.addEventListener('keydown', keyHandler);
+    rootRefSig.value?.addEventListener('keydown', keyHandler);
     cleanup(() => {
-      rootRef.value?.removeEventListener('keydown', keyHandler);
+      rootRefSig.value?.removeEventListener('keydown', keyHandler);
     });
   });
 
@@ -73,9 +73,9 @@ export const SelectRoot = component$((props: SelectRootProps) => {
   });
 
   useVisibleTask$(async function toggleSelectListBox({ track }) {
-    const trigger = track(() => selectContext.triggerRef.value);
-    const listBox = track(() => selectContext.listBoxRef.value);
-    const expanded = track(() => selectContext.isExpanded.value);
+    const trigger = track(() => selectContext.triggerRefSig.value);
+    const listBox = track(() => selectContext.listBoxRefSig.value);
+    const expanded = track(() => selectContext.isOpenSig.value);
 
     if (!trigger || !listBox) return;
 
@@ -92,18 +92,18 @@ export const SelectRoot = component$((props: SelectRootProps) => {
   });
 
   useVisibleTask$(function collectOptions({ track }) {
-    const listBox = track(() => selectContext.listBoxRef.value);
+    const listBox = track(() => selectContext.listBoxRefSig.value);
 
     if (listBox) {
       const collectedOptions = Array.from(
         listBox.querySelectorAll('[role="option"]')
       ) as HTMLElement[];
-      selectContext.options.push(...collectedOptions);
+      selectContext.optionsStore.push(...collectedOptions);
     }
   });
 
   return (
-    <div ref={rootRef} {...props}>
+    <div ref={rootRefSig} {...props}>
       <Slot />
       {props.required ? (
         <VisuallyHidden>

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

@@ -13,12 +13,12 @@ export type SelectTriggerProps = QwikIntrinsicElements['button'];
 export const SelectTrigger = component$((props: SelectTriggerProps) => {
   const selectContext = useContext(SelectContextId);
   const triggerRef = useSignal<HTMLElement>();
-  selectContext.triggerRef = triggerRef;
+  selectContext.triggerRefSig = triggerRef;
 
   useVisibleTask$(function setClickHandler({ cleanup }) {
     function clickHandler(e: Event) {
       e.preventDefault();
-      selectContext.isExpanded.value = !selectContext.isExpanded.value;
+      selectContext.isOpenSig.value = !selectContext.isOpenSig.value;
     }
     triggerRef.value?.addEventListener('click', clickHandler);
     cleanup(() => {
@@ -37,7 +37,7 @@ export const SelectTrigger = component$((props: SelectTriggerProps) => {
         e.key === 'Enter' ||
         e.key === ' '
       ) {
-        selectContext.isExpanded.value = true;
+        selectContext.isOpenSig.value = true;
       }
     }
     triggerRef.value?.addEventListener('keydown', keyHandler);
@@ -47,7 +47,7 @@ export const SelectTrigger = component$((props: SelectTriggerProps) => {
   });
 
   return (
-    <button ref={triggerRef} aria-expanded={selectContext.isExpanded.value} {...props}>
+    <button ref={triggerRef} aria-expanded={selectContext.isOpenSig.value} {...props}>
       <Slot />
     </button>
   );

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

@@ -1,18 +1,12 @@
-import {
-  QwikIntrinsicElements,
-  component$,
-  useContext,
-} from '@builder.io/qwik';
+import { component$, QwikIntrinsicElements, useContext } from '@builder.io/qwik';
 import SelectContextId from './select-context-id';
 
 export type SelectValueProps = {
   placeholder?: string;
 } & QwikIntrinsicElements['span'];
 
-export const SelectValue = component$(
-  ({ placeholder, ...props }: SelectValueProps) => {
-    const selectContext = useContext(SelectContextId);
-    const value = selectContext.selection.value;
-    return <span {...props}>{value ? value : placeholder}</span>;
-  }
-);
+export const SelectValue = component$(({ placeholder, ...props }: SelectValueProps) => {
+  const selectContext = useContext(SelectContextId);
+  const value = selectContext.selectedOptionSig.value;
+  return <span {...props}>{value ? value : placeholder}</span>;
+});