@sit-onyx/headless 0.4.0-dev-20251110091137 → 0.4.0-dev-20251111095201

package/dist/composables/helpers/useOutsideClick.d.ts

@@ -9,7 +9,7 @@ export type UseOutsideClickOptions<TCheckOnTab extends boolean | undefined = und
     /**
      * Callback when an outside click occurred.
      */
-    onOutsideClick: (event: TCheckOnTab extends true ? MouseEvent | KeyboardEvent : MouseEvent) => void;
+    onOutsideClick: (event: TCheckOnTab extends true ? MouseEvent | KeyboardEvent | FocusEvent : MouseEvent) => void;
     /**
      * Whether the outside focus should also be checked when pressing the Tab key.
      */

package/dist/composables/listbox/createListbox.d.ts

@@ -99,4 +99,5 @@ export declare const createListbox: <TValue extends ListboxValue, TMultiple exte
     isFocused: Ref<boolean, boolean>;
 }, {
     getOptionId: (value: TValue) => string;
+    getOptionValueById: (id: string) => TValue | undefined;
 }>;

package/dist/index.js

@@ -392,12 +392,42 @@ const useOutsideClick = ({
   };
   useGlobalEventListener({ type: "mousedown", listener: clickListener, disabled });
   if (checkOnTab) {
-    const keydownListener = async (event) => {
+    const keydownListener = (event) => {
       if (event.key !== "Tab") return;
-      await new Promise((resolve) => setTimeout(resolve));
       if (isOutsideClick(document.activeElement)) {
         onOutsideClick(event);
       }
+      const controller = new AbortController();
+      const { signal } = controller;
+      const onFocusIn = (event2) => {
+        const target = event2.target;
+        if (isOutsideClick(target)) {
+          onOutsideClick(event2);
+        }
+        controller.abort();
+      };
+      const onWindowBlur = (event2) => {
+        if (isOutsideClick(document.activeElement)) {
+          onOutsideClick(event2);
+        }
+        controller.abort();
+      };
+      const onKeyUp = (e) => {
+        if (e.key === "Tab") controller.abort();
+      };
+      document.addEventListener("focusin", onFocusIn, {
+        once: true,
+        capture: true,
+        // Capture phase to handle before component focus handlers
+        signal
+      });
+      window.addEventListener("blur", onWindowBlur, { once: true, signal });
+      document.addEventListener("keyup", onKeyUp, {
+        once: true,
+        capture: true,
+        // Capture phase to prevent conflicts with prevented keydown
+        signal
+      });
     };
     useGlobalEventListener({ type: "keydown", listener: keydownListener, disabled });
   }
@@ -434,6 +464,10 @@ const createListbox = createBuilder(
       }
       return descendantKeyIdMap.get(value);
     };
+    const getOptionValueById = (id) => {
+      const entries = Array.from(descendantKeyIdMap.entries());
+      return entries.find(([_value, key]) => key === id)?.[0];
+    };
     const isFocused = ref(false);
     watchEffect(async () => {
       if (!isExpanded.value || options.activeOption.value == void 0 || !isFocused.value && !options.controlled) {
@@ -527,7 +561,8 @@ const createListbox = createBuilder(
         isFocused
       },
       internals: {
-        getOptionId
+        getOptionId,
+        getOptionValueById
       }
     };
   }
@@ -646,7 +681,7 @@ const createComboBox = createBuilder(
     });
     const {
       elements: { option, group, listbox },
-      internals: { getOptionId }
+      internals: { getOptionId, getOptionValueById }
     } = createListbox({
       label: listLabel,
       description: listDescription,
@@ -697,7 +732,8 @@ const createComboBox = createBuilder(
           tabindex: "-1",
           onClick: () => onToggle?.()
         }))
-      }
+      },
+      internals: { getOptionId, getOptionValueById }
     };
   }
 );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "0.4.0-dev-20251110091137",
+  "version": "0.4.0-dev-20251111095201",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",