fix: peer deps and async computed (#988)

* peer deps are more variable

* remove async computed in preparation for v2

* changeset

Author: thejackshelton

.changeset/cuddly-readers-invent.md

@@ -0,0 +1,7 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: packages now have a variable range of peer dependencies
+
+fix: async computed signals are now sync in preparation for v2

packages/kit-headless/package.json

@@ -30,7 +30,7 @@
   },
   "private": false,
   "peerDependencies": {
-    "@builder.io/qwik": "^1.9"
+    "@builder.io/qwik": ">=1.9"
   },
   "dependencies": {
     "@floating-ui/core": "^1.6.2",

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

@@ -36,7 +36,7 @@ export const HComboboxInput = component$(
       getActiveDescendant$,
     } = useCombobox();
 
-    const activeDescendantSig = useComputed$(async () => {
+    const activeDescendantSig = useComputed$(() => {
       if (context.isListboxOpenSig.value) {
         return getActiveDescendant$(context.highlightedIndexSig.value ?? -1);
       } else {

packages/kit-headless/src/components/select/select-display-value.tsx

@@ -20,7 +20,7 @@ export const HSelectDisplayValue = component$((props: SelectValueProps) => {
   const context = useContext(SelectContextId);
   const valueId = `${context.localId}-value`;
 
-  const displayStrSig = useComputed$(async () => {
+  const displayStrSig = useComputed$(() => {
     if (context.multiple) {
       // for more customization when multiple is true
       return <Slot />;

packages/kit-headless/src/hooks/combined-refs.tsx

@@ -1,4 +1,4 @@
-import { Signal, useSignal, useTask$, $, useComputed$ } from '@builder.io/qwik';
+import { Signal, useSignal, useTask$, useComputed$ } from '@builder.io/qwik';
 
 /* This hook merges a consumer passed ref with our internal ref. It allows consumers to pass a reference to the component and get access to the underlying element. */
 
@@ -13,26 +13,18 @@ export function useCombinedRef(externalRef: any, ctxOpts?: CtxOpts) {
   // we create a ref in case the consumer does not pass a ref
   const internalRef = useSignal<HTMLElement>();
 
-  /** Grab the key name so it updates context Ex: context.triggerRef => triggerRef */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const getContextKey = $((context: any, ref: Signal): string | undefined => {
-    for (const key in context) {
-      if (context[key] === ref) {
+  // we get the ref from the context if it exists
+  const ctxRefNameSig = useComputed$(() => {
+    if (!ctxOpts?.context || !ctxOpts?.givenContextRef) return;
+
+    for (const key in ctxOpts.context) {
+      if (ctxOpts.context[key] === ctxOpts.givenContextRef) {
         return key;
       }
     }
     return undefined;
   });
 
-  // we get the ref from the context if it exists
-  const ctxRefNameSig = useComputed$(async () => {
-    if (!ctxOpts?.context) return;
-
-    return (
-      ctxOpts?.givenContextRef &&
-      (await getContextKey(ctxOpts.context, ctxOpts.givenContextRef))
-    );
-  });
   const contextRefExists = ctxRefNameSig.value !== undefined;
   const contextRef = contextRefExists && ctxOpts?.context?.[ctxRefNameSig.value!];
 

packages/kit-styled/package.json

@@ -20,7 +20,7 @@
   "private": false,
   "scripts": {},
   "peerDependencies": {
-    "@builder.io/qwik": "^1.9"
+    "@builder.io/qwik": ">=1.9"
   },
   "devDependencies": {
     "@qwik-ui/headless": "^0.6.0",