feat(select): grouped options

Author: thejackshelton

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

@@ -8,7 +8,15 @@ import {
 } from '@qwik-ui/headless';
 
 export default component$(() => {
-  const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
+  const usersSig = useSignal<string[]>([
+    'Tim',
+    'Ryan',
+    'Jim',
+    'Bobbie',
+    'Joan',
+    'Jessie',
+    'Abby',
+  ]);
 
   return (
     <Select class="relative min-w-40">
@@ -21,7 +29,11 @@ export default component$(() => {
           <SelectOption
             class="border-dashed border-blue-400 data-[highlighted]:border-2 data-[disabled]:bg-slate-600 data-[disabled]:opacity-30"
             key={user}
-            disabled={index === 0 || index === usersSig.value.length - 1 ? true : false}
+            disabled={
+              index === 0 || index === 2 || index === usersSig.value.length - 1
+                ? true
+                : false
+            }
           >
             {user}
           </SelectOption>

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

@@ -0,0 +1,49 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import {
+  Select,
+  SelectListbox,
+  SelectOption,
+  SelectTrigger,
+  SelectValue,
+  SelectGroup,
+  SelectLabel,
+} from '@qwik-ui/headless';
+
+export default component$(() => {
+  const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
+  const animalsSig = useSignal<string[]>(['Dog', 'Cat', 'Bird', 'Fish', 'Snake']);
+  // const animalId = useId();
+  // const usersId = useId();
+
+  return (
+    <Select class="relative min-w-40">
+      <SelectTrigger class="w-full border-2 border-dashed border-red-400">
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectListbox class="absolute z-10 w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
+        <SelectGroup>
+          <SelectLabel class="text-sm text-slate-400">People</SelectLabel>
+          {usersSig.value.map((user) => (
+            <SelectOption
+              class="border-dashed border-blue-400 data-[highlighted]:border-2"
+              key={user}
+            >
+              {user}
+            </SelectOption>
+          ))}
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel class="text-sm text-slate-400">Animals</SelectLabel>
+          {animalsSig.value.map((animal) => (
+            <SelectOption
+              class="border-dashed border-blue-400 data-[highlighted]:border-2"
+              key={animal}
+            >
+              {animal}
+            </SelectOption>
+          ))}
+        </SelectGroup>
+      </SelectListbox>
+    </Select>
+  );
+});

apps/website/src/routes/docs/headless/select/index.mdx

@@ -64,6 +64,12 @@ This element is used to create a drop-down list, it's often used in a form, to c
   <Showcase name="typeahead" />
 </div>
 
+## Grouped Options
+
+<div data-testid="select-group-test">
+  <Showcase name="group" />
+</div>
+
 ## Building blocks
 
 <CodeSnippet name="building-blocks" />

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

@@ -555,6 +555,19 @@ test.describe('Keyboard Behavior', () => {
       const highlightedOpt = getRoot().locator('[data-highlighted]');
       await expect(highlightedOpt).toContainText('jim', { ignoreCase: true });
     });
+
+    test(`GIVEN an open select with typeahead support and grouped options
+          WHEN the user types a letter matching an option in one group
+          AND the user types a letter matching an option in another group
+          THEN the data-highlighted value should switch groups`, async ({ page }) => {
+      const { getRoot, getTrigger, openListbox } = await setup(page, 'select-group-test');
+      await openListbox('ArrowDown');
+      await getTrigger().press('j');
+      const highlightedOpt = getRoot().locator('[data-highlighted]');
+      await expect(highlightedOpt).toContainText('Jim', { ignoreCase: true });
+      await getTrigger().press('d');
+      await expect(highlightedOpt).toContainText('dog', { ignoreCase: true });
+    });
   });
 });
 
@@ -615,6 +628,42 @@ test.describe('Disabled', () => {
     const options = await getOptions();
     await expect(options[options.length - 2]).toHaveAttribute('data-highlighted');
   });
+
+  test(`GIVEN an open disabled select
+        WHEN the second option is highlighted and the down arrow key is pressed
+        AND the first and third options are disabled
+        THEN the fourth option should be highlighted`, async ({ page }) => {
+    const { getTrigger, getOptions, openListbox } = await setup(
+      page,
+      'select-disabled-test',
+    );
+
+    await openListbox('ArrowDown');
+    const options = await getOptions();
+    await expect(options[1]).toHaveAttribute('data-highlighted');
+    await getTrigger().press('ArrowDown');
+    await expect(options[3]).toHaveAttribute('data-highlighted');
+  });
+
+  test(`GIVEN an open disabled select
+        WHEN the fourth is highlighted and the up key is pressed
+        AND the first and third options are disabled
+        THEN the second option should be highlighted`, async ({ page }) => {
+    const { getTrigger, getOptions, openListbox } = await setup(
+      page,
+      'select-disabled-test',
+    );
+
+    // initially the fourh option is highlighted
+    await openListbox('ArrowDown');
+    const options = await getOptions();
+    await expect(options[1]).toHaveAttribute('data-highlighted');
+    await getTrigger().press('ArrowDown');
+    await expect(options[3]).toHaveAttribute('data-highlighted');
+
+    await getTrigger().press('ArrowUp');
+    await expect(options[1]).toHaveAttribute('data-highlighted');
+  });
 });
 
 test.describe('Props', () => {
@@ -741,3 +790,17 @@ test.describe('Props', () => {
     });
   });
 });
+
+test.describe('A11y', () => {
+  test(`GIVEN a select with a group
+        WHEN the user adds a new group
+        THEN the group should have an aria-labelledby attribute
+        AND its associated label`, async ({ page }) => {
+    const { getRoot, openListbox } = await setup(page, 'select-group-test');
+    await openListbox('ArrowDown');
+    const labelId = await getRoot().getByRole('listitem').first().getAttribute('id');
+    const group = getRoot().getByRole('group').first();
+
+    await expect(group).toHaveAttribute('aria-labelledby', labelId!);
+  });
+});

packages/kit-headless/src/components/select/index.ts

@@ -5,3 +5,5 @@ export * from './select-option';
 export * from './select-popover';
 export * from './select-trigger';
 export * from './select-value';
+export * from './select-group';
+export * from './select-label';

packages/kit-headless/src/components/select/notes.md

@@ -19,8 +19,7 @@ What do they all have in common? How do people use them? What are the most impor
         <SelectPopover>
             <SelectListbox>
                 <SelectOption />
-                <SelectGroup>
-                    <SelectLabel />
+                <SelectGroup label="">
                     <SelectOption />
                 </SelectGroup>
             </SelectListbox>
@@ -29,14 +28,15 @@ What do they all have in common? How do people use them? What are the most impor
 
 ## Features:
 
-    - Single Select
-    - Multi Select
-    - Controlled or uncontrolled
-    - Keyboard Interactions
-    - Grouped options
-    - Typeahead support (user typing / filter)
-    - RTL support
-    - Scrollable
+    - [x] Single Select
+    - [ ] Multi Select
+    - [x] Controlled or uncontrolled
+    - [ ] Keyboard Interactions
+    - [x] Grouped options
+    - [x] Typeahead support (user typing / filter)
+    - [ ] RTL support
+    - [ ] Scrollable
+    - [ ] Aria (controls, roles, etc)
 
 ## Props:
 

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

@@ -12,10 +12,17 @@ export type SelectContext = {
   triggerRef: Signal<HTMLButtonElement | undefined>;
   popoverRef: Signal<HTMLElement | undefined>;
   listboxRef: Signal<HTMLUListElement | undefined>;
+  groupRef: Signal<HTMLDivElement | undefined>;
 
   // core state
   optionsSig: Signal<Opt[]>;
   highlightedIndexSig: Signal<number | null>;
   isListboxOpenSig: Signal<boolean>;
   selectedIndexSig: Signal<number | null>;
 };
+
+export const groupContextId = createContextId<GroupContext>('Select-Group');
+
+export type GroupContext = {
+  labelId: string;
+};

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

@@ -0,0 +1,29 @@
+import {
+  PropsOf,
+  Slot,
+  component$,
+  useContext,
+  useContextProvider,
+  useId,
+} from '@builder.io/qwik';
+
+import SelectContextId, { groupContextId } from './select-context';
+
+type SelectGroupProps = PropsOf<'div'>;
+
+export const SelectGroup = component$<SelectGroupProps>((props) => {
+  const context = useContext(SelectContextId);
+  const labelId = useId();
+
+  const groupContext = {
+    labelId,
+  };
+
+  useContextProvider(groupContextId, groupContext);
+
+  return (
+    <div aria-labelledby={labelId} role="group" {...props} ref={context.groupRef}>
+      <Slot />
+    </div>
+  );
+});

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

@@ -2,6 +2,7 @@ import { type JSXNode, type FunctionComponent } from '@builder.io/qwik';
 import { SelectImpl, type SelectProps } from './select';
 import { SelectListbox } from './select-listbox';
 import { SelectOption } from './select-option';
+import { SelectGroup } from './select-group';
 
 export type Opt = {
   isDisabled: boolean;
@@ -49,6 +50,13 @@ export const Select: FunctionComponent<SelectProps> = (props) => {
         childrenToProcess.unshift(...listboxChildren);
         break;
       }
+      case SelectGroup: {
+        const listboxChildren = Array.isArray(child.props.children)
+          ? [...child.props.children]
+          : [child.props.children];
+        childrenToProcess.unshift(...listboxChildren);
+        break;
+      }
       case SelectOption: {
         const isString = typeof child.props.children === 'string';
         if (!isString) {

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

@@ -0,0 +1,14 @@
+import { PropsOf, Slot, component$, useContext } from '@builder.io/qwik';
+import { groupContextId } from './select-context';
+
+type SelectLabelProps = PropsOf<'li'>;
+
+export const SelectLabel = component$<SelectLabelProps>((props) => {
+  const groupContext = useContext(groupContextId);
+
+  return (
+    <li id={groupContext.labelId} {...props}>
+      <Slot />
+    </li>
+  );
+});