feat(dropdown): adds test cases to dropdown menu

Author: gabrielraposo-kunaico

apps/website/src/routes/docs/headless/dropdown/examples/hero.tsx

@@ -0,0 +1,67 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+
+import { Dropdown } from '@qwik-ui/headless';
+import { LuCheck } from '@qwikest/icons/lucide';
+import styles from '../snippets/dropdown.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  const actions = [
+    { label: 'Commit ⌘+K', disabled: false },
+    { label: 'Push ⇧+⌘+K', disabled: false },
+    { label: 'Update Project ⌘+T', disabled: true },
+  ];
+
+  const checkboxItems = ['Show Git Log', 'Show History'];
+
+  const radioItems = ['main', 'develop'];
+
+  return (
+    <Dropdown.Root data-testid="dropdown">
+      <Dropdown.Trigger class="dropdown-trigger">Git Settings</Dropdown.Trigger>
+      <Dropdown.Popover>
+        <Dropdown.Content class="dropdown-content">
+          <Dropdown.Group class="dropdown-group">
+            <Dropdown.GroupLabel class="dropdown-group-label">
+              Actions
+            </Dropdown.GroupLabel>
+            {actions.map((action) => (
+              <Dropdown.Item
+                key={action.label}
+                class="dropdown-item"
+                disabled={action.disabled}
+              >
+                {action.label}
+              </Dropdown.Item>
+            ))}
+          </Dropdown.Group>
+          <Dropdown.Separator />
+          {checkboxItems.map((item) => {
+            return (
+              <Dropdown.CheckboxItem key={item} class="dropdown-item">
+                <Dropdown.ItemIndicator>
+                  <LuCheck />
+                </Dropdown.ItemIndicator>
+                {item}
+              </Dropdown.CheckboxItem>
+            );
+          })}
+          <Dropdown.Separator />
+          <Dropdown.RadioGroup class="dropdown-group" defaultValue="main">
+            {radioItems.map((item) => {
+              return (
+                <Dropdown.RadioItem key={item} class="dropdown-item" value={item}>
+                  <Dropdown.ItemIndicator>
+                    <LuCheck />
+                  </Dropdown.ItemIndicator>
+                  {item}
+                </Dropdown.RadioItem>
+              );
+            })}
+          </Dropdown.RadioGroup>
+        </Dropdown.Content>
+      </Dropdown.Popover>
+    </Dropdown.Root>
+  );
+});

apps/website/src/routes/docs/headless/dropdown/snippets/dropdown.css

@@ -0,0 +1,74 @@
+:root {
+  --dropdown-width: 14rem;
+}
+
+.dropdown {
+  min-width: var(--dropdown-width);
+}
+
+.dropdown-trigger {
+  width: 100%;
+  height: 100%;
+  border: 2px dotted black;
+  min-height: 44px;
+  max-width: var(--dropdown-width);
+  padding-block: 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.25rem;
+  padding: 0.5rem 1rem;
+}
+
+.dropdown-trigger:hover {
+  background: rgba(54, 25, 25, 0.08);
+}
+
+.dropdown-trigger:focus-visible {
+  outline: 2px solid black;
+  outline-offset: 2px;
+}
+
+.dropdown-content {
+  min-width: var(--dropdown-width);
+  border: 2px dotted black;
+  margin-top: 0.5rem;
+  flex-direction: column;
+  display: flex;
+  row-gap: 0.25rem;
+  padding: 1rem 1rem 1rem 1.5rem;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.dropdown-item [data-indicator] {
+  position: absolute;
+  right: 0.5rem;
+}
+
+.dropdown-group {
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.25rem;
+}
+
+.dropdown-group-label {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: rgba(54, 25, 25, 0.9);
+  padding-top: 0.5rem;
+}
+
+[data-highlighted] {
+  background-color: rgba(54, 25, 25, 0.08);
+  outline: 2px dotted black;
+}
+
+[data-disabled] {
+  opacity: 0.6;
+  background: hsl(var(--foreground) / 0.05);
+}

packages/kit-headless/src/components/dropdown/dropdown-checkbox-item.tsx

@@ -77,8 +77,10 @@ export const HDropdownCheckboxItem = component$((props: DropdownCheckboxItemProp
       ref={itemRef}
       aria-disabled={disabled === true ? 'true' : 'false'}
       data-disabled={disabled}
+      aria-checked={checkedSig.value ? 'true' : 'false'}
       data-highlighted={isHighlightedSig.value}
       data-checked={checkedSig.value}
+      data-close-on-select={props.closeOnSelect}
       data-menu-item
     >
       <CheckboxRoot

packages/kit-headless/src/components/dropdown/dropdown-content.tsx

@@ -61,6 +61,7 @@ export const HDropdownContent = component$<DropdownContentProps>((props) => {
 
   return (
     <div
+      data-content
       {...props}
       id={contentId}
       role="content"

packages/kit-headless/src/components/dropdown/dropdown-item.tsx

@@ -21,7 +21,7 @@ export type DropdownItemProps = {
 
 export const HDropdownItem = component$((props: DropdownItemProps) => {
   /* look at dropdown-inline on how we get the index. */
-  const { _index, disabled, ...rest } = props;
+  const { _index, disabled, closeOnSelect = true, ...rest } = props;
 
   const {
     handleClick$,
@@ -30,7 +30,7 @@ export const HDropdownItem = component$((props: DropdownItemProps) => {
     itemId,
     itemRef,
     isHighlightedSig,
-  } = useDropdownItem(props);
+  } = useDropdownItem({ closeOnSelect, ...props });
 
   // Prevent default behavior for certain keys. This needs to be sync to prevent default behavior and can't be implemented in useDropdownItem.
   const handleKeyDownSync$ = sync$((e: KeyboardEvent) => {
@@ -54,6 +54,7 @@ export const HDropdownItem = component$((props: DropdownItemProps) => {
       data-disabled={disabled}
       data-highlighted={isHighlightedSig.value}
       data-menu-item
+      data-close-on-select={closeOnSelect}
     >
       <Slot />
     </div>

packages/kit-headless/src/components/dropdown/dropdown-radio-group.tsx

@@ -57,7 +57,7 @@ export const HDropdownRadioGroup = component$((props: DropdownRadioGroupProps) =
   useContextProvider(dropdownRadioGroupContextId, radioGroupContext);
 
   return (
-    <div role="group" {...rest} data-disabled={disabled}>
+    <div role="radiogroup" {...rest} data-disabled={disabled}>
       <Slot />
     </div>
   );

packages/kit-headless/src/components/dropdown/dropdown-radio-item.tsx

@@ -1,45 +1,86 @@
-import { Slot, component$, useContext, useSignal, useTask$ } from '@builder.io/qwik';
+import {
+  $,
+  Slot,
+  component$,
+  sync$,
+  useContext,
+  useSignal,
+  useTask$,
+} from '@builder.io/qwik';
 
+import { CheckboxRoot } from '../checkbox/checkbox';
 import { DropdownCheckboxItemProps } from './dropdown-checkbox-item';
-import { HDropdownCheckboxItem } from './dropdown-checkbox-item';
 import { dropdownRadioGroupContextId } from './dropdown-context';
+import { useDropdownItem } from './use-dropdown-item';
 
 type DropdownRadioItemProps = {
   /** Value of the item. */
   value: string;
 } & DropdownCheckboxItemProps;
 
 export const HDropdownRadioItem = component$((props: DropdownRadioItemProps) => {
-  const { disabled = false, value, closeOnSelect = false, ...rest } = props;
+  const { disabled = false, value, closeOnSelect = false, onChange$, ...rest } = props;
 
   const groupContext = useContext(dropdownRadioGroupContextId);
 
   const checkedSig = useSignal<boolean>(value === groupContext.valueSig.value);
+  const checkboxRef = useSignal<HTMLDivElement>();
 
   useTask$(function trackGroupValue({ track }) {
     track(() => groupContext.valueSig.value);
 
     checkedSig.value = value === groupContext.valueSig.value;
+
+    onChange$?.(checkedSig.value);
+  });
+
+  //Prevent default behavior for certain keys. This needs to be sync to prevent default behavior and can't be implemented in useDropdownItem.
+  const handleKeyDownSync$ = sync$((e: KeyboardEvent) => {
+    const keys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'Home', 'End', 'Enter', ' '];
+    if (keys.includes(e.key)) {
+      e.preventDefault();
+    }
   });
 
+  const onItemSelect$ = $(() => {
+    groupContext.valueSig.value = value;
+  });
+
+  const {
+    handleClick$,
+    handleKeyDown$,
+    handlePointerOver$,
+    itemId,
+    itemRef,
+    isHighlightedSig,
+  } = useDropdownItem({ ...props, onItemSelect: onItemSelect$, closeOnSelect });
+
   return (
-    <HDropdownCheckboxItem
-      bind:checked={checkedSig}
-      onChange$={(checked) => {
-        if (checked) {
-          groupContext.valueSig.value = value;
-        }
-      }}
-      {...rest}
+    <div
+      onClick$={[handleClick$, props.onClick$]}
+      tabIndex={-1}
+      id={itemId}
+      onKeyDown$={[handleKeyDownSync$, handleKeyDown$, props.onKeyDown$]}
+      onPointerOver$={[handlePointerOver$, props.onPointerOver$]}
+      ref={itemRef}
       role="menuitemradio"
-      closeOnSelect={closeOnSelect}
-      disabled={disabled || groupContext.disabled}
       aria-checked={checkedSig.value ? 'true' : 'false'}
       aria-disabled={disabled || groupContext.disabled}
       data-disabled={disabled || groupContext.disabled}
+      data-highlighted={isHighlightedSig.value}
       data-checked={checkedSig.value}
+      data-close-on-select={props.closeOnSelect}
+      data-menu-item
     >
-      <Slot />
-    </HDropdownCheckboxItem>
+      <CheckboxRoot
+        bind:checked={checkedSig}
+        preventdefault:click
+        ref={checkboxRef}
+        style={{ pointerEvents: 'none' }}
+        {...rest}
+      >
+        <Slot />
+      </CheckboxRoot>
+    </div>
   );
 });

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

@@ -135,6 +135,7 @@ export const HDropdownImpl = component$<DropdownProps & InternalDropdownProps>(
     return (
       <div
         role="dropdown"
+        data-dropdown
         ref={rootRef}
         data-open={context.isOpenSig.value ? true : undefined}
         data-closed={!context.isOpenSig.value ? true : undefined}

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

@@ -79,6 +79,7 @@ export const HDropdownTrigger = component$<DropdownTriggerProps>((props) => {
 
   return (
     <button
+      data-trigger
       {...props}
       id={triggerId}
       ref={context.triggerRef}