Merge pull request #637 from thejackshelton/feat/select

thejackshelton · web-flow · commit 84c44ae050de · 2024-03-06T17:13:09.000-06:00
docs(select): select docs
diff --git a/.changeset/tidy-coats-admire.md b/.changeset/tidy-coats-admire.md
@@ -0,0 +1,28 @@
+---
+'@qwik-ui/headless': patch
+---
+
+## Select component hits beta!
+
+## Features
+
+- Accessible as a button that shows a list, following web a11y standards.
+- Support for single selection.
+- Controlled or uncontrolled.
+- Disabled option support.
+- Stop focus management via the Tab key.
+- Grouped options support.
+- Looping support.
+- Support for custom scroll behavior.
+- Listbox UI is placed above everything else. (SelectPopover)
+- Custom Positioning (SelectPopover)
+- Option selection and focus management by typing (typeahead).
+- Keyboard support for option navigation via arrow keys and focus management.
+- Automatic focus management for first and last options.
+- Supports a custom placeholder.
+
+## Roadmap
+
+- Opt-in native form support via a visually hidden select.
+- RTL support.
+- Multiple Selection and its respective keyboard interactions.
diff --git a/apps/website/src/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts
@@ -37,7 +37,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Modal: ComponentStatus.Beta,
     Pagination: ComponentStatus.Draft,
     Popover: ComponentStatus.Beta,
-    Select: ComponentStatus.Draft,
+    Select: ComponentStatus.Beta,
     Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
     Tooltip: ComponentStatus.Draft,
diff --git a/apps/website/src/components/feature-list/feature-list.tsx b/apps/website/src/components/feature-list/feature-list.tsx
@@ -1,8 +1,10 @@
 import { component$ } from '@builder.io/qwik';
 import { CheckIcon } from '../icons/Check';
+import { Roadmap } from '../icons/Roadmap';
 
 type FeatureListProps = {
   features: string[];
+  roadmap?: string[];
 };
 
 export const FeatureList = component$((props: FeatureListProps) => {
@@ -19,6 +21,24 @@ export const FeatureList = component$((props: FeatureListProps) => {
           </li>
         );
       })}
+      {props.roadmap && (
+        <>
+          <h3 class="mb-6 mt-8 scroll-mt-20 text-xl font-semibold">Roadmap</h3>
+          {props.roadmap.map((descriptor) => {
+            return (
+              <>
+                <li
+                  key={descriptor}
+                  class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800"
+                >
+                  <Roadmap class="min-w-[21px]" />
+                  {descriptor}
+                </li>
+              </>
+            );
+          })}
+        </>
+      )}
     </ul>
   );
 });
diff --git a/apps/website/src/components/icons/Roadmap.tsx b/apps/website/src/components/icons/Roadmap.tsx
@@ -0,0 +1,20 @@
+import type { QwikIntrinsicElements } from '@builder.io/qwik';
+
+export function Roadmap(props: QwikIntrinsicElements['svg'], key: string) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.35em"
+      height="1.35em"
+      viewBox="0 0 256 256"
+      {...props}
+      key={key}
+    >
+      <g fill="#F9C23C">
+        <path d="M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96" opacity=".2"></path>
+        <path d="M96.26 37a8 8 0 0 1 5.74-9.71a104.11 104.11 0 0 1 52 0a8 8 0 0 1-2 15.75a8.15 8.15 0 0 1-2-.26a88.09 88.09 0 0 0-44 0A8 8 0 0 1 96.26 37M53.79 55.14a104 104 0 0 0-26 45a8 8 0 1 0 15.42 4.26a87.91 87.91 0 0 1 22-38.08a8 8 0 0 0-11.42-11.18m-10.58 96.41a8 8 0 1 0-15.42 4.28a104 104 0 0 0 26 45a8 8 0 1 0 11.41-11.21a88.14 88.14 0 0 1-21.99-38.07M150 213.22a88 88 0 0 1-44 0a8 8 0 1 0-4 15.49a104.11 104.11 0 0 0 52 0a8 8 0 0 0-4-15.49M222.65 146a8 8 0 0 0-9.85 5.57a87.88 87.88 0 0 1-22 38.09a8 8 0 1 0 11.42 11.21a104.05 104.05 0 0 0 26-45a8 8 0 0 0-5.57-9.87m-9.86-41.54a8 8 0 0 0 15.42-4.28a104 104 0 0 0-26-45a8 8 0 1 0-11.41 11.21a88.14 88.14 0 0 1 21.99 38.06Z"></path>
+      </g>
+    </svg>
+  );
+}
+export default Roadmap;
diff --git a/apps/website/src/routes/docs/headless/select/examples/add-users.tsx b/apps/website/src/routes/docs/headless/select/examples/add-users.tsx
@@ -11,8 +11,8 @@ import styles from './select.css?inline';
 
 export default component$(() => {
   useStyles$(styles);
-  const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
-  const hasAddedUsersSig = useSignal<boolean>(false);
+  const users = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
+  const hasAddededUsers = useSignal<boolean>(false);
 
   return (
     <>
@@ -22,19 +22,17 @@ export default component$(() => {
         </SelectTrigger>
         <SelectPopover class="select-popover">
           <SelectListbox class="select-listbox">
-            {usersSig.value.map((user) => (
-              <SelectOption class="select-option" key={user}>
-                {user}
-              </SelectOption>
+            {users.value.map((user) => (
+              <SelectOption key={user}>{user}</SelectOption>
             ))}
           </SelectListbox>
         </SelectPopover>
       </Select>
       <button
         onClick$={$(() => {
-          if (!hasAddedUsersSig.value) {
-            usersSig.value = [...usersSig.value, 'John', 'Jane', 'Bob'];
-            hasAddedUsersSig.value = true;
+          if (!hasAddededUsers.value) {
+            users.value = [...users.value, 'John', 'Jane', 'Bob'];
+            hasAddededUsers.value = true;
           }
         })}
       >
diff --git a/apps/website/src/routes/docs/headless/select/examples/change-value.tsx b/apps/website/src/routes/docs/headless/select/examples/change-value.tsx
@@ -26,9 +26,7 @@ export default component$(() => {
         <SelectPopover class="select-popover">
           <SelectListbox class="select-listbox">
             {users.map((user) => (
-              <SelectOption class="select-option" key={user}>
-                {user}
-              </SelectOption>
+              <SelectOption key={user}>{user}</SelectOption>
             ))}
           </SelectListbox>
         </SelectPopover>
diff --git a/apps/website/src/routes/docs/headless/select/examples/controlled-value.tsx b/apps/website/src/routes/docs/headless/select/examples/controlled-value.tsx
@@ -28,7 +28,7 @@ export default component$(() => {
         <SelectPopover class="select-popover">
           <SelectListbox class="select-listbox">
             {users.map((user, index) => (
-              <SelectOption value={index.toString()} class="select-option" key={user}>
+              <SelectOption value={index.toString()} key={user}>
                 {user}
               </SelectOption>
             ))}
diff --git a/apps/website/src/routes/docs/headless/select/examples/controlled.tsx b/apps/website/src/routes/docs/headless/select/examples/controlled.tsx
@@ -28,9 +28,7 @@ export default component$(() => {
         <SelectPopover class="select-popover">
           <SelectListbox class="select-listbox">
             {users.map((user) => (
-              <SelectOption class="select-option" key={user}>
-                {user}
-              </SelectOption>
+              <SelectOption key={user}>{user}</SelectOption>
             ))}
           </SelectListbox>
         </SelectPopover>
diff --git a/apps/website/src/routes/docs/headless/select/examples/disabled.tsx b/apps/website/src/routes/docs/headless/select/examples/disabled.tsx
@@ -23,7 +23,6 @@ export default component$(() => {
         <SelectListbox class="select-listbox">
           {users.map((user, index) => (
             <SelectOption
-              class="select-option"
               key={user}
               disabled={
                 index === 0 || index === 2 || index === users.length - 1 ? true : false
diff --git a/apps/website/src/routes/docs/headless/select/examples/group.tsx b/apps/website/src/routes/docs/headless/select/examples/group.tsx
@@ -26,9 +26,7 @@ export default component$(() => {
           <SelectGroup>
             <SelectLabel class="select-label">People</SelectLabel>
             {users.map((user) => (
-              <SelectOption class="select-option" key={user}>
-                {user}
-              </SelectOption>
+              <SelectOption key={user}>{user}</SelectOption>
             ))}
           </SelectGroup>
           <SelectGroup>
diff --git a/apps/website/src/routes/docs/headless/select/examples/hero.tsx b/apps/website/src/routes/docs/headless/select/examples/hero.tsx
@@ -21,9 +21,7 @@ export default component$(() => {
       <SelectPopover class="select-popover">
         <SelectListbox class="select-listbox">
           {users.map((user) => (
-            <SelectOption class="select-option" key={user}>
-              {user}
-            </SelectOption>
+            <SelectOption key={user}>{user}</SelectOption>
           ))}
         </SelectListbox>
       </SelectPopover>
diff --git a/apps/website/src/routes/docs/headless/select/examples/loop.tsx b/apps/website/src/routes/docs/headless/select/examples/loop.tsx
@@ -21,9 +21,7 @@ export default component$(() => {
       <SelectPopover class="select-popover">
         <SelectListbox class="select-listbox">
           {users.map((user) => (
-            <SelectOption class="select-option" key={user}>
-              {user}
-            </SelectOption>
+            <SelectOption key={user}>{user}</SelectOption>
           ))}
         </SelectListbox>
       </SelectPopover>
diff --git a/apps/website/src/routes/docs/headless/select/examples/normal-select.tsx b/apps/website/src/routes/docs/headless/select/examples/normal-select.tsx
diff --git a/apps/website/src/routes/docs/headless/select/examples/object.tsx b/apps/website/src/routes/docs/headless/select/examples/object.tsx
@@ -0,0 +1,38 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import {
+  Select,
+  SelectPopover,
+  SelectListbox,
+  SelectOption,
+  SelectTrigger,
+  SelectValue,
+} from '@qwik-ui/headless';
+import styles from './select.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+  const users = [
+    { name: 'Tim', status: '🟢' },
+    { name: 'Ryan', status: '🔴' },
+    { name: 'Jim', status: '🟡' },
+    { name: 'Jessie', status: '🟢' },
+    { name: 'Abby', status: '🟡' },
+  ];
+
+  return (
+    <Select class="select">
+      <SelectTrigger class="select-trigger">
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectPopover class="select-popover">
+        <SelectListbox class="select-listbox">
+          {users.map((user) => {
+            return (
+              <SelectOption key={user.name}>{`${user.status} ${user.name}`}</SelectOption>
+            );
+          })}
+        </SelectListbox>
+      </SelectPopover>
+    </Select>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/select/examples/open-change.tsx b/apps/website/src/routes/docs/headless/select/examples/open-change.tsx
@@ -29,9 +29,7 @@ export default component$(() => {
         <SelectPopover class="select-popover">
           <SelectListbox class="select-listbox">
             {users.map((user) => (
-              <SelectOption class="select-option" key={user}>
-                {user}
-              </SelectOption>
+              <SelectOption key={user}>{user}</SelectOption>
             ))}
           </SelectListbox>
         </SelectPopover>
diff --git a/apps/website/src/routes/docs/headless/select/examples/option-value.tsx b/apps/website/src/routes/docs/headless/select/examples/option-value.tsx
@@ -33,7 +33,7 @@ export default component$(() => {
         <SelectPopover class="select-popover">
           <SelectListbox class="select-listbox">
             {users.map((user) => (
-              <SelectOption value={user.id} class="select-option" key={user.id}>
+              <SelectOption value={user.id} key={user.id}>
                 {user.label}
               </SelectOption>
             ))}
diff --git a/apps/website/src/routes/docs/headless/select/examples/scrollable.tsx b/apps/website/src/routes/docs/headless/select/examples/scrollable.tsx
@@ -34,9 +34,7 @@ export default component$(() => {
           <SelectGroup>
             <SelectLabel class="select-label">Animals</SelectLabel>
             {animals.map((animal) => (
-              <SelectOption class="select-option" key={animal}>
-                {animal}
-              </SelectOption>
+              <SelectOption key={animal}>{animal}</SelectOption>
             ))}
           </SelectGroup>
         </SelectListbox>
diff --git a/apps/website/src/routes/docs/headless/select/examples/select.css b/apps/website/src/routes/docs/headless/select/examples/select.css
@@ -24,7 +24,6 @@
   padding: 0.5rem;
   border: 2px dashed hsla(var(--foreground) / 0.6);
   border-radius: calc(var(--border-radius) / 2);
-  z-index: 9999;
   max-width: var(--select-width);
   color: hsl(var(--foreground));
 }
diff --git a/apps/website/src/routes/docs/headless/select/examples/string.tsx b/apps/website/src/routes/docs/headless/select/examples/string.tsx
@@ -0,0 +1,28 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import {
+  Select,
+  SelectPopover,
+  SelectListbox,
+  SelectOption,
+  SelectTrigger,
+  SelectValue,
+} from '@qwik-ui/headless';
+import styles from './select.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return (
+    <Select class="select">
+      <SelectTrigger class="select-trigger">
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectPopover class="select-popover">
+        <SelectListbox class="select-listbox">
+          <SelectOption>Option 1</SelectOption>
+          <SelectOption>Option 2</SelectOption>
+        </SelectListbox>
+      </SelectPopover>
+    </Select>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/select/examples/typeahead.tsx b/apps/website/src/routes/docs/headless/select/examples/typeahead.tsx
@@ -21,9 +21,7 @@ export default component$(() => {
       <SelectPopover class="select-popover">
         <SelectListbox class="select-listbox">
           {users.map((user) => (
-            <SelectOption class="select-option" key={user}>
-              {user}
-            </SelectOption>
+            <SelectOption key={user}>{user}</SelectOption>
           ))}
         </SelectListbox>
       </SelectPopover>
diff --git a/apps/website/src/routes/docs/headless/select/examples/uncontrolled.tsx b/apps/website/src/routes/docs/headless/select/examples/uncontrolled.tsx
@@ -21,9 +21,7 @@ export default component$(() => {
       <SelectPopover class="select-popover">
         <SelectListbox class="select-listbox">
           {users.map((user) => (
-            <SelectOption class="select-option" key={user}>
-              {user}
-            </SelectOption>
+            <SelectOption key={user}>{user}</SelectOption>
           ))}
         </SelectListbox>
       </SelectPopover>
diff --git a/apps/website/src/routes/docs/headless/select/examples/wrong-value.tsx b/apps/website/src/routes/docs/headless/select/examples/wrong-value.tsx
@@ -14,21 +14,17 @@ export default component$(() => {
   const users = ['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby'];
 
   return (
-    <>
-      <Select value="Jessi" class="select">
-        <SelectTrigger class="select-trigger">
-          <SelectValue placeholder="wrong value placeholder" />
-        </SelectTrigger>
-        <SelectPopover class="select-popover">
-          <SelectListbox class="select-listbox">
-            {users.map((user) => (
-              <SelectOption class="select-option" key={user}>
-                {user}
-              </SelectOption>
-            ))}
-          </SelectListbox>
-        </SelectPopover>
-      </Select>
-    </>
+    <Select value="Jessi" class="select">
+      <SelectTrigger class="select-trigger">
+        <SelectValue placeholder="wrong value placeholder" />
+      </SelectTrigger>
+      <SelectPopover class="select-popover">
+        <SelectListbox class="select-listbox">
+          {users.map((user) => (
+            <SelectOption key={user}>{user}</SelectOption>
+          ))}
+        </SelectListbox>
+      </SelectPopover>
+    </Select>
   );
 });
diff --git a/apps/website/src/routes/docs/headless/select/index.mdx b/apps/website/src/routes/docs/headless/select/index.mdx
diff --git a/apps/website/src/routes/docs/headless/select/snippets/building-blocks.tsx b/apps/website/src/routes/docs/headless/select/snippets/building-blocks.tsx
diff --git a/packages/kit-headless/src/components/select/hidden-select.tsx b/packages/kit-headless/src/components/select/hidden-select.tsx
