@sit-onyx/headless 1.0.0-beta.13 → 1.0.0-beta.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.15",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -28,11 +28,12 @@
   },
   "devDependencies": {
     "@vue/compiler-dom": "3.5.13",
-    "vue": "3.5.13"
+    "vue": "3.5.13",
+    "@sit-onyx/shared": "^0.0.1-beta.0"
   },
   "scripts": {
     "build": "vue-tsc --build --force",
     "test": "vitest",
-    "test:components": "playwright install && playwright test"
+    "test:playwright": "playwright install && playwright test"
   }
 }

package/src/composables/listbox/createListbox.ts

@@ -109,13 +109,13 @@ export const createListbox = createBuilder(
         !isExpanded.value ||
         options.activeOption.value == undefined ||
         (!isFocused.value && !options.controlled)
-      )
+      ) {
         return;
-      const id = getOptionId(options.activeOption.value);
+      }
 
-      await nextTick(() => {
-        document.getElementById(id)?.scrollIntoView({ block: "end", inline: "nearest" });
-      });
+      const id = getOptionId(options.activeOption.value);
+      await nextTick();
+      document.getElementById(id)?.scrollIntoView({ block: "nearest", inline: "nearest" });
     });
 
     const typeAhead = useTypeAhead((inputString) => options.onTypeAhead?.(inputString));

package/src/composables/menuButton/TestMenuButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, type Ref } from "vue";
 import { createMenuButton } from "./createMenuButton";
 
 const items = Array.from({ length: 10 }, (_, index) => {
@@ -10,10 +10,11 @@ const items = Array.from({ length: 10 }, (_, index) => {
 const activeItem = ref<string>();
 const isExpanded = ref(false);
 const onToggle = () => (isExpanded.value = !isExpanded.value);
+const trigger: Readonly<Ref<"click" | "hover">> = ref("hover");
 
 const {
   elements: { root, button, menu, menuItem, listItem },
-} = createMenuButton({ isExpanded, onToggle });
+} = createMenuButton({ isExpanded, onToggle, trigger });
 </script>
 
 <template>

package/src/composables/menuButton/createMenuButton.ts

@@ -5,6 +5,7 @@ import { useGlobalEventListener } from "../helpers/useGlobalListener";
 
 type CreateMenuButtonOptions = {
   isExpanded: Readonly<Ref<boolean>>;
+  trigger: Readonly<Ref<"hover" | "click">>;
   onToggle: () => void;
 };
 
@@ -105,13 +106,25 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
     }
   };
 
+  const triggerEvents = () => {
+    if (options.trigger.value === "click") {
+      return {
+        onClick: () => setExpanded(true),
+      };
+    } else {
+      return {
+        onMouseenter: () => setExpanded(true),
+        onMouseleave: () => setExpanded(false, true),
+      };
+    }
+  };
+
   return {
     elements: {
       root: {
         id: rootId,
         onKeydown: handleKeydown,
-        onMouseenter: () => setExpanded(true),
-        onMouseleave: () => setExpanded(false, true),
+        ...triggerEvents(),
         onFocusout: (event) => {
           // if focus receiving element is not part of the menu button, then close
           if (