docs(docs changes & few bug fixes): docs changes & few bug fixes

thejackshelton · thejackshelton · commit 308e5bccce77 · 2023-06-18T02:04:16.000-05:00
diff --git a/apps/website/src/routes/docs/headless/(components)/autocomplete/examples.tsx b/apps/website/src/routes/docs/headless/(components)/autocomplete/examples.tsx
@@ -27,28 +27,33 @@ export const Example01 = component$(() => {
   return (
     <PreviewCodeExample>
       <div q:slot="actualComponent">
-        <AutocompleteRoot class="relative">
-          <AutocompleteLabel>Personal Trainers ⚡</AutocompleteLabel>
-          <AutocompleteTrigger>
-            <AutocompleteInput />
-            <AutocompleteButton>
+        <AutocompleteRoot class="relative text-white">
+          <AutocompleteLabel class="text-inherit font-semibold">
+            Personal Trainers ⚡
+          </AutocompleteLabel>
+          <AutocompleteTrigger class="bg-[#1f2532] flex items-center rounded-sm border-[#7d95b3] border-[1px] relative">
+            <AutocompleteInput class="w-44 bg-inherit px-2 pr-6" />
+            <AutocompleteButton class="w-6 h-6 group absolute right-0">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 fill="none"
-                stroke="currentColor"
                 stroke-width="2"
+                class="stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
                 stroke-linecap="round"
                 stroke-linejoin="round"
-                style="width: 20px; height: 20px;"
               >
                 <polyline points="6 9 12 15 18 9"></polyline>
               </svg>
             </AutocompleteButton>
           </AutocompleteTrigger>
-          <AutocompleteListbox class="w-full bg-black">
+          <AutocompleteListbox class="w-full bg-[#1f2532] px-4 py-2 mt-2 rounded-sm border-[#7d95b3] border-[1px]">
             {trainers.map((trainer, index) => (
-              <AutocompleteOption optionValue={trainer} key={index}>
+              <AutocompleteOption
+                optionValue={trainer}
+                key={index}
+                class="rounded-sm px-2 hover:bg-[#496080] focus:bg-[#496080]"
+              >
                 {trainer}
               </AutocompleteOption>
             ))}
diff --git a/apps/website/src/routes/docs/headless/(components)/autocomplete/index.mdx b/apps/website/src/routes/docs/headless/(components)/autocomplete/index.mdx
@@ -25,28 +25,33 @@ import { APITable } from '../../../../../components/api-table/api-table';
 
 <Example01>
   ```tsx
-  <AutocompleteRoot class="relative">
-    <AutocompleteLabel>Personal Trainers ⚡</AutocompleteLabel>
-    <AutocompleteTrigger>
-      <AutocompleteInput />
-      <AutocompleteButton>
+  <AutocompleteRoot class="relative text-white">
+    <AutocompleteLabel class="text-inherit font-semibold">
+      Personal Trainers ⚡
+    </AutocompleteLabel>
+    <AutocompleteTrigger class="bg-[#1f2532] flex items-center rounded-sm border-[#7d95b3] border-[1px] relative">
+      <AutocompleteInput class="w-44 bg-inherit px-2 pr-6" />
+      <AutocompleteButton class="w-6 h-6 group absolute right-0">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
           fill="none"
-          stroke="currentColor"
           stroke-width="2"
+          class="stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
           stroke-linecap="round"
           stroke-linejoin="round"
-          style="width: 20px; height: 20px;"
         >
           <polyline points="6 9 12 15 18 9"></polyline>
         </svg>
       </AutocompleteButton>
     </AutocompleteTrigger>
-    <AutocompleteListbox class="w-full bg-black">
+    <AutocompleteListbox class="w-full bg-[#1f2532] px-4 py-2 mt-2 rounded-sm border-[#7d95b3] border-[1px]">
       {trainers.map((trainer, index) => (
-        <AutocompleteOption optionValue={trainer} key={index}>
+        <AutocompleteOption
+          optionValue={trainer}
+          key={index}
+          class="rounded-sm px-2 hover:bg-[#496080] focus:bg-[#496080]"
+        >
           {trainer}
         </AutocompleteOption>
       ))}
@@ -93,48 +98,64 @@ import { APITable } from '../../../../../components/api-table/api-table';
 <KeyboardInteractionTable keyDescriptors={
   [
     {
-      keyTitle: 'Space',
-      description: 'Expand or collapse the `AccordionItem`.',
+      keyTitle: 'Tab',
+      description: 'Moves focus to the next focusable element or option.',
     },
     {
-      keyTitle: 'Enter',
-      description: 'Expand or collapse the `AccordionItem`.',
+      keyTitle: 'Shift + Tab',
+      description: 'Moves focus to the previous focusable element or option.',
     },
     {
-      keyTitle: 'Tab',
-      description: 'Moves focus to the next focusable element.',
+      keyTitle: 'DownArrow',
+      description: "Opens the listbox and moves focus to the first option. When focus is on an option, moves focus to the next option.  If there isn't one, it will go back to the first option.",
     },
     {
-      keyTitle: 'Shift + Tab',
-      description: 'Moves focus to the previous focusable element.',
+      keyTitle: 'UpArrow',
+      description: "When focus is on an option, moves focus to the previous option. If there isn't one, it will go back to the last option.",
+    },
+    {
+      keyTitle: 'Enter / Space',
+      description: `Selects the option when focused. The listbox will close and the selected option becomes the input's value.`,
+    },
+    {
+      keyTitle: 'Escape',
+      description: 'Closes the listbox.',
     },
     {
       keyTitle: 'Home',
-      description: 'When on `AccordionItem`, Moves focus to the first `AccordionItem`.',
+      description: 'When the input is focused, the cursor moves to the start of the input value. When focused on any listbox option, focus is moved to the first option.',
     },
     {
       keyTitle: 'End',
-      description: 'When on `AccordionItem`, Moves focus to the last `AccordionItem`.',
+      description: 'When the input is focused, the cursor moves to the end of the input value. When focused on any listbox option, focus is moved to the last option.',
+    },
+    {
+      keyTitle: 'Delete',
+      description: 'When text is selected in the input, deletes the selected text.',
     },
 
 ]
 }/>
 
+Adheres to the [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) WAI-ARIA design pattern. See the W3C Editable Combobox With List Autocomplete Example for more information.
+
 ## API
 
-### AccordionItem
+By default, the API holds available attributes of both native DOM elements and custom Qwik elements. This is thanks to **QwikIntrinsicElements**. Here are some of the notable API's for this component.
+
+### AutocompleteRoot
 
 <APITable
   propDescriptors={[
     {
       name: 'class',
       type: 'string',
-      description: 'CSS classes to apply to the accordion container.',
+      description: 'CSS classes to apply to the autocomplete container.',
     },
     {
       name: 'style',
       type: 'string',
-      description: 'CSS styles to apply to the accordion container.',
+      description: 'inline CSS styles to apply to the autocomplete container.',
     },
     {
       name: 'label',
diff --git a/apps/website/src/routes/docs/headless/(components)/select/examples.tsx b/apps/website/src/routes/docs/headless/(components)/select/examples.tsx
@@ -19,28 +19,28 @@ export const Example01 = component$(() => {
           <SelectLabel class="text-white font-semibold ml-2">
             Qwik Fruits
           </SelectLabel>
-          <SelectTrigger class="flex justify-between items-center px-8 bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 border-[1px] rounded-md p-4 group peer">
-            <SelectValue
-              placeholder="Select a fruit! 🍹"
-              class="text-gray-700 dark:text-white"
-            />
+          <SelectTrigger class="flex justify-between items-center px-8 bg-[#1f2532] border-[#7d95b3] border-[1px] rounded-md p-4 group peer">
+            <SelectValue placeholder="Select a fruit! 🍹" class="text-white" />
             <SelectMarker class="w-6 h-6">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke-width="2"
-                class="stroke-gray-700 dark:stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
+                class="stroke-white group-aria-expanded:-rotate-180 transition-transform duration-[450ms]"
                 stroke-linecap="round"
                 stroke-linejoin="round"
               >
                 <polyline points="6 9 12 15 18 9"></polyline>
               </svg>
             </SelectMarker>
           </SelectTrigger>
-          <SelectListBox class="bg-slate-100 dark:bg-gray-700 border-slate-200 dark:border-gray-600 mt-2 border-[1px] rounded-md">
-            <SelectOption value="🚀 Qwik" class="p-4" />
-            <SelectGroup class="p-4 ">
+          <SelectListBox class="bg-[#1f2532] border-[#7d95b3] mt-2 border-[1px] rounded-md text-white">
+            <SelectOption
+              value="🚀 Qwik"
+              class="p-4 hover:bg-[#496080] focus:bg-[#496080]"
+            />
+            <SelectGroup class="p-4">
               <SelectLabel class="p-4">Fruits</SelectLabel>
               {[
                 { value: '🍎 Apple', disabled: false },
@@ -53,7 +53,7 @@ export const Example01 = component$(() => {
                     key={option.value}
                     value={option.value}
                     disabled={option.disabled}
-                    class="aria-disabled:text-red-500 aria-disabled:cursor-not-allowed hover:bg-slate-200 rounded-sm dark:hover:bg-gray-600 p-4"
+                    class="hover:bg-[#496080] focus:bg-[#496080] aria-disabled:text-red-500 aria-disabled:cursor-not-allowed rounded-sm p-4"
                   />
                 );
               })}
diff --git a/packages/kit-headless/src/components/Autocomplete/autocomplete.tsx b/packages/kit-headless/src/components/Autocomplete/autocomplete.tsx
@@ -15,14 +15,18 @@ import {
   useTask$,
 } from '@builder.io/qwik';
 
+import { KeyCode } from '../../utils/key-code.type';
+
+// import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+
 import { computePosition, flip } from '@floating-ui/dom';
 
 /*
     
     Input Textbox - Role Combobox
     Listbox - Role Listbox
 
-    Notes:
+    Notes: 
 
     https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/
 
@@ -126,6 +130,7 @@ interface AutocompleteContext {
   isExpanded: Signal<boolean>;
   triggerRef: Signal<HTMLElement | undefined>;
   listBoxRef: Signal<HTMLElement | undefined>;
+  labelRef: Signal<HTMLElement | undefined>;
   listBoxId: string;
   inputId: string;
   activeOptionId: Signal<string | null>;
@@ -147,6 +152,7 @@ export const AutocompleteRoot = component$(
     const isExpanded = useSignal(false);
     const triggerRef = useSignal<HTMLElement>();
     const listBoxRef = useSignal<HTMLElement>();
+    const labelRef = useSignal<HTMLElement>();
     const inputValue = useSignal(defaultValue ? defaultValue : '');
     const listBoxId = useId();
     const inputId = useId();
@@ -159,6 +165,7 @@ export const AutocompleteRoot = component$(
       isExpanded,
       triggerRef,
       listBoxRef,
+      labelRef,
       inputValue,
       listBoxId,
       inputId,
@@ -203,18 +210,19 @@ export const AutocompleteRoot = component$(
       }
     });
 
-    // useOnWindow(
-    //   'click',
-    //   $((e) => {
-    //     const target = e.target as HTMLElement;
-    //     if (
-    //       contextService.isExpanded.value === true &&
-    //       !target.contains(contextService.triggerRef.value as Node)
-    //     ) {
-    //       contextService.isExpanded.value = false;
-    //     }
-    //   })
-    // );
+    useOnWindow(
+      'click',
+      $((e) => {
+        const target = e.target as HTMLElement;
+        if (
+          contextService.isExpanded.value === true &&
+          !contextService.listBoxRef.value?.contains(target) &&
+          !contextService.triggerRef.value?.contains(target)
+        ) {
+          contextService.isExpanded.value = false;
+        }
+      })
+    );
 
     return (
       <div
@@ -237,7 +245,10 @@ export const AutocompleteRoot = component$(
 export type AutocompleteLabelProps = QwikIntrinsicElements['label'];
 
 export const AutocompleteLabel = component$((props: AutocompleteLabelProps) => {
+  const ref = useSignal<HTMLElement>();
   const contextService = useContext(AutocompleteContextId);
+  contextService.labelRef = ref;
+
   return (
     <label {...props} for={contextService.inputId}>
       <Slot />
@@ -268,17 +279,6 @@ export const AutocompleteInput = component$((props: InputProps) => {
   const ref = useSignal<HTMLElement>();
   const contextService = useContext(AutocompleteContextId);
 
-  /*
-
-    If we save the file, and then type the exact option value, 
-    then click the down arrow key to focus the first item in the array
-
-    it will focus the 2nd thing in the entire array, not the first thing.
-
-    works fine when we remount the component in storybook
-
-  */
-
   useTask$(({ track }) => {
     track(() => contextService.inputValue.value);
 
@@ -304,8 +304,6 @@ export const AutocompleteInput = component$((props: InputProps) => {
       }
     );
 
-    console.log(contextService.filteredOptions);
-
     // Probably better to refactor Signal type later
     contextService.options.map((option: Signal) => {
       if (
@@ -356,6 +354,7 @@ export const AutocompleteButton = component$((props: ButtonProps) => {
         ),
         props.onClick$,
       ]}
+      tabIndex={-1}
     >
       <Slot />
     </button>
@@ -371,25 +370,18 @@ export const AutocompleteListbox = component$((props: ListboxProps) => {
   const contextService = useContext(AutocompleteContextId);
   contextService.listBoxRef = ref;
 
-  // useStylesScoped$(`
-  //   ul {
-  //     width: 100%;
-  //     padding-left: 0;
-  //     margin-top: 0px;
-  //   }
-  // `);
-
   return (
     <ul
       id={contextService.listBoxId}
       ref={ref}
       style={`
-      display: ${
-        contextService.isExpanded.value ? 'block' : 'none'
-      }; position: absolute; ${props.style}
-  `}
+        display: ${
+          contextService.isExpanded.value ? 'block' : 'none'
+        }; position: absolute; z-index: 1; ${props.style}
+    `}
       role="listbox"
       {...props}
+      // aria-label={!contextService.labelRef.value ? contextService.inputValue.value : undefined}
       onKeyDown$={(e) => {
         const availableOptions = contextService.filteredOptions.map(
           (option) => option.value
@@ -447,7 +439,6 @@ export const AutocompleteOption = component$((props: OptionProps) => {
         if (e.key === 'Enter' || e.key === ' ') {
           contextService.inputValue.value = props.optionValue;
           contextService.isExpanded.value = false;
-          console.log('inside option!');
           const inputElement = contextService.triggerRef.value
             ?.firstElementChild as HTMLElement;
           inputElement?.focus();
diff --git a/packages/kit-headless/src/components/select/select.tsx b/packages/kit-headless/src/components/select/select.tsx
