@sit-onyx/headless 1.0.0-beta.19 → 1.0.0-beta.20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "1.0.0-beta.19",
+  "version": "1.0.0-beta.20",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

package/src/composables/helpers/useOutsideClick.spec.ts

@@ -25,7 +25,7 @@ describe("useOutsideClick", () => {
     useOutsideClick({ inside, onOutsideClick });
 
     // ACT
-    const event = new MouseEvent("click", { bubbles: true });
+    const event = new MouseEvent("mousedown", { bubbles: true });
     outside.value.dispatchEvent(event);
 
     // ASSERT
@@ -53,7 +53,7 @@ describe("useOutsideClick", () => {
     const onOutsideClick = vi.fn();
     useOutsideClick({ inside, onOutsideClick });
     // ACT
-    const event = new MouseEvent("click", { bubbles: true });
+    const event = new MouseEvent("mousedown", { bubbles: true });
     inside[0].dispatchEvent(event);
     inside[1].dispatchEvent(event);
     // ASSERT
@@ -79,7 +79,7 @@ describe("useOutsideClick", () => {
     useOutsideClick({ inside, disabled, onOutsideClick });
 
     // ACT
-    const event = new MouseEvent("click", { bubbles: true });
+    const event = new MouseEvent("mousedown", { bubbles: true });
     outside.value.dispatchEvent(event);
     // ASSERT
     expect(onOutsideClick).toHaveBeenCalledTimes(1);
@@ -88,7 +88,7 @@ describe("useOutsideClick", () => {
     // ACT
     disabled.value = true;
     await vi.runAllTimersAsync();
-    const event2 = new MouseEvent("click", { bubbles: true });
+    const event2 = new MouseEvent("mousedown", { bubbles: true });
     outside.value.dispatchEvent(event2);
     // ASSERT
     expect(onOutsideClick).toHaveBeenCalledTimes(1);

package/src/composables/helpers/useOutsideClick.ts

@@ -49,7 +49,7 @@ export const useOutsideClick = <TCheckOnTab extends boolean | undefined>({
     if (isOutsideClick(event.target)) onOutsideClick(event);
   };
 
-  useGlobalEventListener({ type: "click", listener: clickListener, disabled });
+  useGlobalEventListener({ type: "mousedown", listener: clickListener, disabled });
 
   if (checkOnTab) {
     const keydownListener = async (event: KeyboardEvent) => {

package/src/composables/menuButton/createMenuButton.ts

@@ -1,4 +1,4 @@
-import { computed, useId, watch, type Ref } from "vue";
+import { computed, toValue, useId, watch, type MaybeRef, type Ref } from "vue";
 import { createBuilder, createElRef } from "../../utils/builder";
 import { debounce } from "../../utils/timer";
 import { useGlobalEventListener } from "../helpers/useGlobalListener";
@@ -6,9 +6,15 @@ import { useOutsideClick } from "../helpers/useOutsideClick";
 
 type CreateMenuButtonOptions = {
   isExpanded: Readonly<Ref<boolean>>;
-  trigger: Readonly<Ref<"hover" | "click">>;
+  trigger: Readonly<MaybeRef<"hover" | "click">>;
   onToggle: () => void;
   disabled?: Readonly<Ref<boolean>>;
+  /**
+   * Whether the menu button opens to the top or bottom. Defines the keyboard navigation behavior (e.g. Arrow up and down).
+   *
+   * @default "bottom"
+   */
+  position?: MaybeRef<"top" | "bottom">;
 };
 
 /**
@@ -21,6 +27,8 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
   const menuRef = createElRef<HTMLElement>();
   const buttonId = useId();
 
+  const position = computed(() => toValue(options.position) ?? "bottom");
+
   useGlobalEventListener({
     type: "keydown",
     listener: (e) => e.key === "Escape" && setExpanded(false),
@@ -57,6 +65,7 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
     const menuItems = Array.from(currentMenu.querySelectorAll<HTMLElement>('[role="menuitem"]'))
       // filter out nested children
       .filter((item) => item.closest('[role="menu"]') === currentMenu);
+    if (position.value === "top") menuItems.reverse();
     let nextIndex = 0;
 
     if (currentMenuItem) {
@@ -85,11 +94,11 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
-        focusRelativeItem("next");
+        focusRelativeItem(position.value === "bottom" ? "next" : "prev");
         break;
       case "ArrowUp":
         event.preventDefault();
-        focusRelativeItem("prev");
+        focusRelativeItem(position.value === "bottom" ? "prev" : "next");
         break;
       case "Home":
         event.preventDefault();
@@ -113,7 +122,7 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
   };
 
   const triggerEvents = computed(() => {
-    if (options.trigger.value !== "hover") return;
+    if (toValue(options.trigger) !== "hover") return;
     return {
       onMouseenter: () => setExpanded(true),
       onMouseleave: () => setExpanded(false, true),
@@ -143,7 +152,9 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
             "aria-haspopup": true,
             onFocus: () => setExpanded(true, true),
             onClick: () =>
-              options.trigger.value == "click" ? setExpanded(!options.isExpanded.value) : undefined,
+              toValue(options.trigger) == "click"
+                ? setExpanded(!options.isExpanded.value)
+                : undefined,
             id: buttonId,
             disabled: options.disabled?.value,
           }) as const,