feat(dropdown): first implementation

Author: gabrielraposo-kunaico

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

@@ -0,0 +1,55 @@
+import { $, QRL, Signal, Slot, component$, useSignal, useTask$ } from '@builder.io/qwik';
+import { DropdownItemProps, HDropdownItem } from './dropdown-item';
+
+type DropdownCheckboxItemProps = {
+  /** A signal that controls the current checked state (controlled). */
+  'bind:checked'?: Signal<boolean>;
+
+  /**
+   * QRL handler that runs when the user selects an item.
+   */
+  onChange$?: QRL<(checked: boolean) => void>;
+} & DropdownItemProps;
+
+export const HDropdownCheckboxItem = component$((props: DropdownCheckboxItemProps) => {
+  const { disabled = false, closeOnSelect = false, onChange$, ...rest } = props;
+
+  const checkedSig = useSignal<boolean>(false);
+
+  useTask$(function reactiveUserOpen({ track }) {
+    const bindCheckedSig = props['bind:checked'];
+    if (!bindCheckedSig) return;
+    track(() => bindCheckedSig.value);
+
+    checkedSig.value = bindCheckedSig.value ?? checkedSig.value;
+  });
+
+  useTask$(function onChangeTask({ track }) {
+    track(() => checkedSig.value);
+
+    onChange$?.(checkedSig.value);
+  });
+
+  const onSelect = $(() => {
+    checkedSig.value = !checkedSig.value;
+    props.onSelect$?.();
+  });
+
+  return (
+    <HDropdownItem
+      {...rest}
+      onSelect$={onSelect}
+      role="menuitemcheckbox"
+      closeOnSelect={closeOnSelect}
+      disabled={disabled}
+      aria-checked={checkedSig.value ? 'true' : 'false'}
+      aria-disabled={disabled}
+      style={{ display: 'flex', alignItems: 'center' }}
+      data-disabled={disabled}
+      data-checked={checkedSig.value}
+    >
+      <Slot name="dropdown-item-indicator" />
+      <Slot />
+    </HDropdownItem>
+  );
+});

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

@@ -0,0 +1,74 @@
+import {
+  component$,
+  useStyles$,
+  useTask$,
+  Slot,
+  type PropsOf,
+  useContext,
+  $,
+} from '@builder.io/qwik';
+import { dropdownContextId } from './dropdown-context';
+import styles from './dropdown.css?inline';
+import { isServer } from '@builder.io/qwik/build';
+
+type DropdownContentProps = PropsOf<'div'>;
+
+export const HDropdownContent = component$<DropdownContentProps>((props) => {
+  useStyles$(styles);
+
+  const context = useContext(dropdownContextId);
+  const contentId = `${context.localId}-content`;
+
+  const isOutside = $((rect: DOMRect, x: number, y: number) => {
+    return x < rect.left || x > rect.right || y < rect.top || y > rect.bottom;
+  });
+
+  const handleDismiss$ = $(async (e: PointerEvent) => {
+    if (!context.isOpenSig.value) {
+      return;
+    }
+
+    if (!context.contentRef.value || !context.triggerRef.value) {
+      return;
+    }
+
+    const contentRect = context.contentRef.value.getBoundingClientRect();
+    const triggerRect = context.triggerRef.value.getBoundingClientRect();
+    const { clientX, clientY } = e;
+
+    const isOutsideContent = await isOutside(contentRect, clientX, clientY);
+    const isOutsideTrigger = await isOutside(triggerRect, clientX, clientY);
+
+    if (isOutsideContent && isOutsideTrigger) {
+      context.isOpenSig.value = false;
+    }
+  });
+
+  // Dismiss code should only matter when the content is open
+  useTask$(({ track, cleanup }) => {
+    track(() => context.isOpenSig.value);
+
+    if (isServer) return;
+
+    if (context.isOpenSig.value) {
+      window.addEventListener('pointerdown', handleDismiss$);
+    }
+
+    cleanup(() => {
+      window.removeEventListener('pointerdown', handleDismiss$);
+    });
+  });
+
+  return (
+    <div
+      {...props}
+      id={contentId}
+      role="content"
+      ref={context.contentRef}
+      data-open={context.isOpenSig.value ? true : undefined}
+      data-closed={!context.isOpenSig.value ? true : undefined}
+    >
+      <Slot />
+    </div>
+  );
+});

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

@@ -0,0 +1,33 @@
+import { Signal, createContextId } from '@builder.io/qwik';
+
+import { TItemsMap } from './dropdown-root';
+
+export const dropdownContextId = createContextId<DropdownContext>('qui-dropdown');
+
+export type DropdownContext = {
+  // core state
+  isOpenSig: Signal<boolean>;
+  itemsMapSig: Readonly<Signal<TItemsMap>>;
+  highlightedIndexSig: Signal<number | null>;
+  currDisplayValueSig: Signal<string | string[] | undefined>;
+  localId: string;
+
+  // refs
+  triggerRef: Signal<HTMLButtonElement | undefined>;
+  popoverRef: Signal<HTMLElement | undefined>;
+  contentRef: Signal<HTMLElement | undefined>;
+  highlightedItemRef: Signal<HTMLLIElement | undefined>;
+
+  // user configurable
+  scrollOptions?: ScrollIntoViewOptions;
+  loop: boolean;
+};
+
+export const dropdownRadioGroupContextId = createContextId<DropdownRadioGroupContext>(
+  'qui-dropdown-radio-group',
+);
+
+export type DropdownRadioGroupContext = {
+  valueSig: Signal<string>;
+  disabled: boolean;
+};

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

@@ -0,0 +1,103 @@
+import { type JSXNode, Component } from '@builder.io/qwik';
+import { HDropdownImpl, type DropdownProps } from './dropdown-root';
+import { HDropdownItem as InternalDropdownItem } from './dropdown-item';
+import { HDropdownRadioItem as InternalDropdownRadioItem } from './dropdown-radio-item';
+import { HDropdownCheckboxItem as InternalDropdownCheckboxItem } from './dropdown-checkbox-item';
+
+type InlineCompProps = {
+  dropdownRadioItemComponent?: typeof InternalDropdownRadioItem;
+  dropdownItemComponent?: typeof InternalDropdownItem;
+  dropdownCheckboxItemComponent?: typeof InternalDropdownCheckboxItem;
+};
+
+/*
+  This is an inline component. An example use case of an inline component to get the proper indexes with CSR. See issue #4757
+  for more information.
+*/
+export const HDropdownRoot: Component<DropdownProps & InlineCompProps> = (
+  props: DropdownProps & InlineCompProps,
+) => {
+  const {
+    children: myChildren,
+    dropdownRadioItemComponent: UserRadioItem,
+    dropdownItemComponent: UserItem,
+    dropdownCheckboxItemComponent: UserCheckboxItem,
+    ...rest
+  } = props;
+
+  /**
+   * When creating reusable component pieces, DropdownRoot needs to know the existence of these components. See the styled tabs for as an example.
+   **/
+  const DropdownRadioItem = UserRadioItem ?? InternalDropdownRadioItem;
+  const DropdownItem = UserItem ?? InternalDropdownItem;
+  const DropdownCheckboxItem = UserCheckboxItem ?? InternalDropdownCheckboxItem;
+
+  // source of truth
+  const itemsMap = new Map();
+  let currItemIndex = 0;
+  let isItemDisabled = false;
+
+  const childrenToProcess = (
+    Array.isArray(myChildren) ? [...myChildren] : [myChildren]
+  ) as Array<JSXNode>;
+
+  while (childrenToProcess.length) {
+    const child = childrenToProcess.shift();
+
+    if (!child) {
+      continue;
+    }
+
+    if (Array.isArray(child)) {
+      childrenToProcess.unshift(...child);
+      continue;
+    }
+
+    switch (child.type) {
+      case DropdownRadioItem:
+      case DropdownCheckboxItem:
+      case DropdownItem: {
+        // get the index of the current option
+        child.props._index = currItemIndex;
+
+        isItemDisabled = child.props.disabled === true;
+
+        // add the item to the map
+        itemsMap.set(currItemIndex, {
+          value: child.props.value,
+          disabled: isItemDisabled,
+        });
+
+        // increment after processing children
+        currItemIndex++;
+
+        // the default case isn't handled here, so we need to process the children to get to the label component
+        if (child.props.children) {
+          const childChildren = Array.isArray(child.props.children)
+            ? [...child.props.children]
+            : [child.props.children];
+          childrenToProcess.unshift(...childChildren);
+        }
+
+        break;
+      }
+
+      default: {
+        if (child) {
+          const anyChildren = Array.isArray(child.children)
+            ? [...child.children]
+            : [child.children];
+          childrenToProcess.unshift(...(anyChildren as JSXNode[]));
+        }
+
+        break;
+      }
+    }
+  }
+
+  return (
+    <HDropdownImpl {...rest} _itemsMap={itemsMap}>
+      {props.children}
+    </HDropdownImpl>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { PropsOf, Slot, component$ } from '@builder.io/qwik';
+
+type DropdownItemIndicatorProps = PropsOf<'div'>;
+
+export const HDropdownItemIndicator = component$((props: DropdownItemIndicatorProps) => {
+  return (
+    <div data-indicator {...props} q:slot="dropdown-item-indicator">
+      <Slot />
+    </div>
+  );
+});