Merge pull request #418 from thejackshelton/feat-combobox

fix(combobox): fix race condition issue with disabled options

Author: thejackshelton

apps/website/src/global.css

@@ -145,4 +145,51 @@ ol {
   .accordion-animation-1[data-state='closed'] {
     animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
   }
+
+  .text-outline-lg {
+    text-shadow: 1.6px 0.6px 0 var(--qwikui-blue-800),
+      -0.6px -0.6px 0 var(--qwikui-blue-800), 0.6px -0.6px 0 var(--qwikui-blue-800),
+      -0.6px 0.6px 0 var(--qwikui-blue-800), 0.6px 0.6px 0 var(--qwikui-blue-800);
+  }
+
+  .dark .text-outline-lg {
+    text-shadow: 1.2px 1.2px 0 var(--qwikui-purple-800),
+      -0.6px -0.6px 0 var(--qwikui-purple-800), 0.6px -0.6px 0 var(--qwikui-purple-800),
+      -0.6px 0.6px 0 var(--qwikui-purple-800), 0.6px 0.6px 0 var(--qwikui-purple-800);
+  }
+
+  .text-outline-beta {
+    text-shadow: 1.5px 0.5px 0 var(--qwikui-blue-800),
+      -0.5px -0.5px 0 var(--qwikui-blue-800), 0.5px -0.5px 0 var(--qwikui-blue-800),
+      -0.5px 0.5px 0 var(--qwikui-blue-800), 0.5px 0.5px 0 var(--qwikui-blue-800);
+  }
+
+  .dark .text-outline-beta {
+    text-shadow: 1.5px 0.5px 0 var(--qwikui-slate-800),
+      -0.5px -0.5px 0 var(--qwikui-slate-800), 0.5px -0.5px 0 var(--qwikui-slate-800),
+      -0.5px 0.5px 0 var(--qwikui-slate-800), 0.5px 0.5px 0 var(--qwikui-slate-800);
+  }
+
+  .text-outline-draft {
+    text-shadow: 1.5px 0.5px 0 var(--qwikui-slate-900),
+      -0.5px -0.5px 0 var(--qwikui-slate-900), 0.5px -0.5px 0 var(--qwikui-slate-900),
+      -0.5px 0.5px 0 var(--qwikui-slate-900), 0.5px 0.5px 0 var(--qwikui-slate-900);
+  }
+  .dark .text-outline-draft {
+    text-shadow: 1.5px 0.5px 0 var(--qwikui-slate-950),
+      -0.5px -0.5px 0 var(--qwikui-slate-950), 0.5px -0.5px 0 var(--qwikui-slate-950),
+      -0.5px 0.5px 0 var(--qwikui-slate-950), 0.5px 0.5px 0 var(--qwikui-slate-950);
+  }
+
+  .text-outline-planned {
+    text-shadow: 1.5px 0.5px 0 var(--qwikui-slate-500),
+      -0.5px -0.5px 0 var(--qwikui-slate-500), 0.5px -0.5px 0 var(--qwikui-slate-500),
+      -0.5px 0.5px 0 var(--qwikui-slate-500), 0.5px 0.5px 0 var(--qwikui-slate-500);
+  }
+
+  .dark .text-outline-planned {
+    text-shadow: 1.5px 0.5px 0 var(--qwikui-slate-500),
+      -0.4px -0.4px 0 var(--qwikui-slate-500), 0.4px -0.4px 0 var(--qwikui-slate-500),
+      -0.4px 0.4px 0 var(--qwikui-slate-500), 0.4px 0.4px 0 var(--qwikui-slate-500);
+  }
 }

apps/website/src/routes/docs/_components/component-status-badge/component-status-badge.tsx

@@ -12,11 +12,11 @@ export function getClassByStatus(status: ComponentStatus) {
     case ComponentStatus.Ready:
       return 'text-green-900 bg-green-300 tracking-wide';
     case ComponentStatus.Beta:
-      return 'dark:text-slate-100 dark:bg-qwikui-purple-500 bg-qwikui-blue-500 text-white dark:border-qwikui-purple-600 border-[1px] border-qwikui-blue-700 tracking-wide shadow-dark-low dark:shadow-dark-low';
+      return 'dark:text-slate-100 dark:bg-qwikui-purple-500 bg-qwikui-blue-500 text-white dark:border-qwikui-purple-600 border-[1px] border-qwikui-blue-700 tracking-wide shadow-dark-low dark:shadow-dark-low text-outline-beta';
     case ComponentStatus.Draft:
-      return 'text-slate-200 bg-slate-700 dark:bg-slate-800 border-[1px] border-slate-400 shadow-dark-low tracking-wide dark:shadow-dark-low';
+      return 'text-slate-200 bg-slate-700 dark:bg-slate-800 border-[1px] border-slate-400 shadow-dark-low tracking-wide dark:shadow-dark-low text-outline-draft';
     case ComponentStatus.Planned:
-      return 'text-slate-900 bg-slate-300 border-[1px] border-slate-500 dark:border-slate-400 tracking-wide shadow-dark-low dark:shadow-dark-low';
+      return 'text-slate-50 bg-slate-300 border-[1px] border-slate-500 dark:border-slate-400 tracking-wide shadow-dark-low dark:shadow-dark-low text-outline-planned';
     default:
       return null;
   }

apps/website/src/routes/docs/_components/navigation-docs/navigation-docs.tsx

@@ -60,7 +60,7 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
         return (
           <>
             <div class="px-6 pt-6">
-              <h2 class="mb-4 font-bold text-white text-3xl lg:text-lg bg-qwikui-blue-400 px-4 py-1 rounded-lg dark:bg-qwikui-purple-500 shadow-dark-low dark:shadow-dark-high border-qwikui-blue-100 dark:border-qwikui-purple-100 border-2">
+              <h2 class="mb-4 font-bold text-white text-3xl lg:text-lg bg-qwikui-blue-400 px-4 py-1 rounded-lg dark:bg-qwikui-purple-500 shadow-dark-low dark:shadow-dark-high border-qwikui-blue-100 dark:border-qwikui-purple-100 border-2 text-outline-lg tracking-widest">
                 {group.name}
               </h2>
               <ul class="flex flex-col gap-2">

apps/website/src/routes/layout.tsx

@@ -29,7 +29,7 @@ export default component$(() => {
       <QwikUIProvider>
         <div class="flex mt-20">
           <DocsNavigation linksGroups={menuItemsGroups} />
-          <main class="docs mx-auto">
+          <main class="docs">
             <Slot />
           </main>
         </div>

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

@@ -463,7 +463,7 @@ describe('Disabled & Object Combobox', () => {
       THEN the listbox should remain open`, () => {
     cy.mount(<DisabledCombobox />);
 
-    cy.findByTestId('trigger').click();
+    cy.get('button').click();
 
     cy.findByRole('option', { name: `David` }).click();
 

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

@@ -15,6 +15,11 @@ export const getNextEnabledOptionIndex = <O extends Option = Option>(
       currentIndex = 0;
       offset = 0;
     }
+
+    // no enabled opt found
+    if (offset >= len) {
+      return -1;
+    }
   }
   return (currentIndex + offset) % len;
 };