feat(combobox): more feature parity with floating UI

Author: thejackshelton

apps/website/src/routes/docs/headless/(components)/combobox/examples.tsx

@@ -97,8 +97,8 @@ export const HeroExample = component$(() => {
             </ComboboxControl>
             <ComboboxPortal>
               <ComboboxListbox
-                position="bottom"
-                gap={8}
+                placement="bottom"
+                setOffset={8}
                 class="text-white w-44 bg-[#1f2532] px-4 py-2 rounded-sm border-[#7d95b3] border-[1px]"
               />
             </ComboboxPortal>

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

@@ -6,32 +6,39 @@ import {
 } from '@builder.io/qwik';
 import {
   ReferenceElement,
+  arrow,
   autoUpdate,
   computePosition,
   flip,
   offset,
+  shift,
 } from '@floating-ui/dom';
 import ComboboxContextId from './combobox-context-id';
 import type { ComboboxContext, Option } from './combobox-context.type';
 
+// type ArrowData = { element: HTMLElement; padding?: number | undefined };
+
 export type ComboboxListboxProps = {
-  shift?: {
+  // come back to shift later
+  arrowData?: { element: HTMLElement; padding?: number | undefined };
+  setArrow?: boolean;
+  setShift?: {
     mainAxis?: boolean;
     crossAxis?: boolean;
     limiter?: {
       fn: (state: unknown) => unknown;
       options?: unknown;
     };
   };
-  gap?:
+  setOffset?:
     | number
     | {
         mainAxis?: number;
         crossAxis?: number;
         alignmentAxis?: number | null;
       };
-  toggleFlip?: boolean;
-  position?:
+  setFlip?: boolean;
+  placement?:
     | 'top'
     | 'top-start'
     | 'top-end'
@@ -53,9 +60,12 @@ export type ComboboxListboxProps = {
 
 export const ComboboxListbox = component$(
   <O extends Option = Option>({
-    gap,
-    toggleFlip = true,
-    position = 'bottom',
+    setOffset,
+    setFlip = true,
+    placement = 'bottom',
+    setShift,
+    setArrow,
+    arrowData,
     ancestorScroll = true,
     ancestorResize = true,
     elementResize = true,
@@ -68,12 +78,18 @@ export const ComboboxListbox = component$(
     useVisibleTask$(function setListboxPosition({ cleanup }) {
       // Our settings from Floating UI
       function updatePosition() {
+        const middleware = [offset(setOffset), setFlip && flip(), setShift && shift()];
+
+        if (setArrow && arrowData) {
+          middleware.push(arrow(arrowData));
+        }
+
         computePosition(
           context.inputRef.value as ReferenceElement,
           context.listboxRef.value as HTMLElement,
           {
-            placement: position,
-            middleware: [offset(gap), toggleFlip && flip()],
+            placement: placement,
+            middleware: middleware,
           },
         ).then(({ x, y }) => {
           if (context.listboxRef.value) {