@sit-onyx/headless 0.9.0 → 0.10.0-dev-20260505160733

package/dist/composables/comboBox/SelectOnlyCombobox.d.vue.ts

@@ -12,7 +12,7 @@ declare const _default: import('@vue/runtime-core').DefineComponent<{}, {
             readonly "aria-disabled": boolean | undefined;
             readonly "aria-checked": boolean | undefined;
             readonly "aria-selected": boolean | undefined;
-            readonly onClick: () => false | void | undefined;
+            readonly onClick: (event: PointerEvent) => false | void | undefined;
         }>;
         group: import('@vue/reactivity').ComputedRef<(options: {
             label: string;
@@ -228,6 +228,7 @@ declare const _default: import('@vue/runtime-core').DefineComponent<{}, {
     }, undefined, {
         getOptionId: (value: string) => string;
         getOptionValueById: (id: string) => string | undefined;
+        getOption: (value: string) => HTMLElement | null;
     }>;
 }, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {
     combobox: HTMLDivElement;

package/dist/composables/comboBox/TestCombobox.d.vue.ts

@@ -12,7 +12,7 @@ declare const _default: import('@vue/runtime-core').DefineComponent<{}, {
             readonly "aria-disabled": boolean | undefined;
             readonly "aria-checked": boolean | undefined;
             readonly "aria-selected": boolean | undefined;
-            readonly onClick: () => false | void | undefined;
+            readonly onClick: (event: PointerEvent) => false | void | undefined;
         }>;
         group: import('@vue/reactivity').ComputedRef<(options: {
             label: string;
@@ -228,6 +228,7 @@ declare const _default: import('@vue/runtime-core').DefineComponent<{}, {
     }, undefined, {
         getOptionId: (value: string) => string;
         getOptionValueById: (id: string) => string | undefined;
+        getOption: (value: string) => HTMLElement | null;
     }>;
 }, {}, {}, {}, import('@vue/runtime-core').ComponentOptionsMixin, import('@vue/runtime-core').ComponentOptionsMixin, {}, string, import('@vue/runtime-core').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('@vue/runtime-core').ComponentProvideOptions, true, {
     combobox: HTMLDivElement;

package/dist/composables/comboBox/createComboBox.d.ts

@@ -38,7 +38,7 @@ export type CreateComboboxOptions<TValue extends ListboxValue, TAutoComplete ext
     /**
      * Hook when an option is (un-)selected.
      */
-    onSelect?: (value: TValue) => void;
+    onSelect?: (value: TValue, event?: Event) => void;
     /**
      * Hook when the first option should be activated.
      */
@@ -77,7 +77,7 @@ export declare const createComboBox: <TValue extends ListboxValue, TAutoComplete
         readonly "aria-disabled": boolean | undefined;
         readonly "aria-checked": boolean | undefined;
         readonly "aria-selected": boolean | undefined;
-        readonly onClick: () => false | void | undefined;
+        readonly onClick: (event: PointerEvent) => false | void | undefined;
     }>;
     group: import('vue').ComputedRef<(options: {
         label: string;
@@ -303,4 +303,5 @@ export declare const createComboBox: <TValue extends ListboxValue, TAutoComplete
 }, undefined, {
     getOptionId: (value: TValue) => string;
     getOptionValueById: (id: string) => TValue | undefined;
+    getOption: (value: TValue) => HTMLElement | null;
 }>;

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

@@ -31,7 +31,7 @@ export type CreateListboxOptions<TValue extends ListboxValue, TMultiple extends
     /**
      * Hook when an option is selected.
      */
-    onSelect?: (value: TValue) => void;
+    onSelect?: (value: TValue, event?: Event) => void;
     /**
      * Hook when the first option should be activated.
      */
@@ -93,11 +93,12 @@ export declare const createListbox: <TValue extends ListboxValue, TMultiple exte
         readonly "aria-disabled": boolean | undefined;
         readonly "aria-checked": boolean | undefined;
         readonly "aria-selected": boolean | undefined;
-        readonly onClick: () => false | void | undefined;
+        readonly onClick: (event: PointerEvent) => false | void | undefined;
     }>;
 }, {
     isFocused: Ref<boolean, boolean>;
 }, {
     getOptionId: (value: TValue) => string;
     getOptionValueById: (id: string) => TValue | undefined;
+    getOption: (value: TValue) => HTMLElement | null;
 }>;

package/dist/composables/menuButton/createMenuButton.d.ts

@@ -18,6 +18,10 @@ export declare const createMenuButton: (options: CreateMenuButtonOptions) => {
     elements: {
         listItem: {
             role: string;
+            onMouseenter: (event?: Event) => void;
+            onMouseleave: () => void;
+            onFocusin: (event?: Event) => void;
+            onFocusout: () => void;
         };
         menuItem: (data: {
             active?: boolean;
@@ -28,6 +32,22 @@ export declare const createMenuButton: (options: CreateMenuButtonOptions) => {
             role: string;
             onKeydown: (event: KeyboardEvent) => void;
         };
+        internalChildren: {
+            role: string;
+        };
+        backButton: {
+            onKeydown: (event: KeyboardEvent) => void;
+            onClick: (event: Event) => void;
+        };
+        externalChildren: {
+            role: string;
+            tabindex: number;
+            onKeydown: (event: KeyboardEvent) => void;
+            onMouseenter: (event?: Event) => void;
+            onMouseleave: () => void;
+            onFocusin: (event?: Event) => void;
+            onFocusout: () => void;
+        };
         root: import('vue').ComputedRef<{
             onMouseenter?: (() => void) | undefined;
             onMouseleave?: (() => void) | undefined;
@@ -54,26 +74,61 @@ export declare const createMenuButton: (options: CreateMenuButtonOptions) => {
     };
 };
 type CreateMenuItemOptions = {
-    /**
-     * Called when the menu item should be opened (if it has nested children).
-     */
+    /** Current expanded state of the menu item (for nested children). */
+    isExpanded?: Ref<boolean>;
+    /** Whether the menu item renders its children in an external flyout. */
+    isExternal?: MaybeRefOrGetter<boolean>;
+    /** Whether the menu item is disabled. */
+    disabled?: MaybeRefOrGetter<boolean>;
+    /** DOM element ref of the external children wrapper (used for focus checks). */
+    externalChildrenRef?: Readonly<Ref<HTMLElement | null>>;
+    /** Called when the menu item should be opened (if it has nested children). */
     onOpen?: () => void;
+    /** Called when the menu item should be closed.*/
+    onClose?: () => void;
+    /** Called when the external children should close and focus the trigger. */
+    onFocusTrigger?: () => void;
+    /** Called to notify a parent menu of a hover enter event. */
+    onHoverEnterParent?: () => void;
+    /** Called to notify a parent menu of a hover leave event. */
+    onHoverLeaveParent?: () => void;
     openingArrowDirection?: MaybeRefOrGetter<"ArrowRight" | "ArrowLeft">;
 };
-export declare const createMenuItems: (options?: CreateMenuItemOptions | undefined) => {
-    elements: {
-        listItem: {
-            role: string;
-        };
-        menuItem: (data: {
-            active?: boolean;
-            disabled?: boolean;
-        }) => {
-            "aria-current": "page" | undefined;
-            "aria-disabled": boolean | undefined;
-            role: string;
-            onKeydown: (event: KeyboardEvent) => void;
-        };
+export declare const createMenuItems: (options?: CreateMenuItemOptions | undefined) => import('../../utils/builder.js').HeadlessComposable<{
+    listItem: {
+        role: string;
+        onMouseenter: (event?: Event) => void;
+        onMouseleave: () => void;
+        onFocusin: (event?: Event) => void;
+        onFocusout: () => void;
     };
-};
+    menuItem: (data: {
+        active?: boolean;
+        disabled?: boolean;
+    }) => {
+        "aria-current": "page" | undefined;
+        "aria-disabled": boolean | undefined;
+        role: string;
+        onKeydown: (event: KeyboardEvent) => void;
+    };
+    internalChildren: {
+        role: string;
+    };
+    backButton: {
+        onKeydown: (event: KeyboardEvent) => void;
+        onClick: (event: Event) => void;
+    };
+    externalChildren: {
+        role: string;
+        tabindex: number;
+        onKeydown: (event: KeyboardEvent) => void;
+        onMouseenter: (event?: Event) => void;
+        onMouseleave: () => void;
+        onFocusin: (event?: Event) => void;
+        onFocusout: () => void;
+    };
+}, undefined, {
+    handlePopoverMouseEnter: (event?: Event) => void;
+    handlePopoverMouseLeave: () => void;
+}>;
 export {};

package/dist/index.js

@@ -564,15 +564,18 @@ var createListbox = createBuilder((options) => {
 	const getOptionValueById = (id) => {
 		return Array.from(descendantKeyIdMap.entries()).find(([_value, key]) => key === id)?.[0];
 	};
+	const getOption = (value) => {
+		const id = getOptionId(value);
+		return document.getElementById(id);
+	};
 	/**
 	* Whether the listbox element is focused.
 	*/
 	const isFocused = ref(false);
 	watchEffect(async () => {
 		if (!isExpanded.value || options.activeOption.value == void 0 || !isFocused.value && !options.controlled) return;
-		const id = getOptionId(options.activeOption.value);
 		await nextTick();
-		document.getElementById(id)?.scrollIntoView({
+		getOption(options.activeOption.value)?.scrollIntoView({
 			block: "nearest",
 			inline: "nearest"
 		});
@@ -582,7 +585,7 @@ var createListbox = createBuilder((options) => {
 		switch (event.key) {
 			case " ":
 				event.preventDefault();
-				if (options.activeOption.value != void 0) options.onSelect?.(options.activeOption.value);
+				if (options.activeOption.value != void 0) options.onSelect?.(options.activeOption.value, event);
 				break;
 			case "ArrowUp":
 				event.preventDefault();
@@ -646,7 +649,7 @@ var createListbox = createBuilder((options) => {
 						"aria-disabled": data.disabled,
 						"aria-checked": isMultiselect.value ? selected : void 0,
 						"aria-selected": !isMultiselect.value ? selected : void 0,
-						onClick: () => !data.disabled && options.onSelect?.(data.value)
+						onClick: (event) => !data.disabled && options.onSelect?.(data.value, event)
 					};
 				};
 			})
@@ -654,7 +657,8 @@ var createListbox = createBuilder((options) => {
 		state: { isFocused },
 		internals: {
 			getOptionId,
-			getOptionValueById
+			getOptionValueById,
+			getOption
 		}
 	};
 });
@@ -696,9 +700,9 @@ var createComboBox = createBuilder(({ autocomplete: autocompleteRef, onAutocompl
 		if (autocomplete.value !== "none") onAutocomplete?.(inputElement.value);
 	};
 	const typeAhead = useTypeAhead((inputString) => onTypeAhead?.(inputString));
-	const handleSelect = (value) => {
-		onSelect?.(value);
-		if (!unref(multiple)) onToggle?.();
+	const handleSelect = (value, event) => {
+		onSelect?.(value, event);
+		if (!toValue(multiple)) onToggle?.();
 	};
 	const handleNavigation = (event) => {
 		switch (event.key) {
@@ -749,7 +753,7 @@ var createComboBox = createBuilder(({ autocomplete: autocompleteRef, onAutocompl
 			type: "text"
 		};
 	});
-	const { elements: { option, group, listbox }, internals: { getOptionId, getOptionValueById } } = createListbox({
+	const { elements: { option, group, listbox }, internals: { getOptionId, getOptionValueById, getOption } } = createListbox({
 		label: listLabel,
 		description: listDescription,
 		multiple,
@@ -791,7 +795,8 @@ var createComboBox = createBuilder(({ autocomplete: autocompleteRef, onAutocompl
 		},
 		internals: {
 			getOptionId,
-			getOptionValueById
+			getOptionValueById,
+			getOption
 		}
 	};
 });
@@ -1154,7 +1159,48 @@ var createMenuButton = createBuilder((options) => {
 	} };
 });
 var createMenuItems = createBuilder((options) => {
-	const { onOpen, openingArrowDirection = "ArrowRight" } = options || {};
+	const { isExpanded, isExternal, disabled, externalChildrenRef, onOpen, onClose, onFocusTrigger, onHoverEnterParent, onHoverLeaveParent, openingArrowDirection = "ArrowRight" } = options || {};
+	const debouncedClose = debounce(() => {
+		if (isExpanded) isExpanded.value = false;
+	}, 300);
+	onBeforeUnmount(() => {
+		debouncedClose.abort();
+	});
+	const handleClose = () => {
+		debouncedClose.abort();
+		if (isExpanded) isExpanded.value = false;
+		onClose?.();
+	};
+	const handleTriggerMouseEnter = (event) => {
+		if (toValue(isExternal) && !toValue(disabled)) {
+			if (event?.type === "focusin") {
+				const focusEvent = event;
+				const relatedTarget = focusEvent.relatedTarget;
+				const target = focusEvent.target;
+				const externalNode = toValue(externalChildrenRef);
+				if (!externalNode?.contains(target) && relatedTarget && externalNode?.contains(relatedTarget)) {
+					debouncedClose.abort();
+					return;
+				}
+			}
+			debouncedClose.abort();
+			if (isExpanded) isExpanded.value = true;
+		}
+	};
+	const handleTriggerMouseLeave = () => {
+		if (toValue(isExternal)) {
+			debouncedClose.abort();
+			debouncedClose();
+		}
+	};
+	const handlePopoverMouseEnter = (event) => {
+		handleTriggerMouseEnter(event);
+		onHoverEnterParent?.();
+	};
+	const handlePopoverMouseLeave = () => {
+		handleTriggerMouseLeave();
+		onHoverLeaveParent?.();
+	};
 	const onKeydown = (event) => {
 		const resolvedKey = toValue(openingArrowDirection);
 		switch (event.key) {
@@ -1166,15 +1212,66 @@ var createMenuItems = createBuilder((options) => {
 				break;
 		}
 	};
-	return { elements: {
-		listItem: { role: "none" },
-		menuItem: (data) => ({
-			"aria-current": data.active ? "page" : void 0,
-			"aria-disabled": data.disabled,
-			role: "menuitem",
-			onKeydown
-		})
-	} };
+	const getClosingArrowDirection = () => {
+		return toValue(openingArrowDirection) === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+	};
+	const onBackButtonKeydown = (event) => {
+		if ([
+			getClosingArrowDirection(),
+			" ",
+			"Enter"
+		].includes(event.key)) {
+			event.preventDefault();
+			event.stopPropagation();
+			handleClose();
+		}
+	};
+	const onExternalChildrenKeydown = (event) => {
+		const closeKey = getClosingArrowDirection();
+		if (event.key === closeKey) {
+			event.preventDefault();
+			event.stopPropagation();
+			onFocusTrigger?.();
+		}
+	};
+	return {
+		elements: {
+			listItem: {
+				role: "none",
+				onMouseenter: handleTriggerMouseEnter,
+				onMouseleave: handleTriggerMouseLeave,
+				onFocusin: handleTriggerMouseEnter,
+				onFocusout: handleTriggerMouseLeave
+			},
+			menuItem: (data) => ({
+				"aria-current": data.active ? "page" : void 0,
+				"aria-disabled": data.disabled,
+				role: "menuitem",
+				onKeydown
+			}),
+			internalChildren: { role: "menu" },
+			backButton: {
+				onKeydown: onBackButtonKeydown,
+				onClick: (event) => {
+					event.stopPropagation();
+					handleClose();
+				}
+			},
+			externalChildren: {
+				role: "presentation",
+				tabindex: -1,
+				onKeydown: onExternalChildrenKeydown,
+				onMouseenter: handlePopoverMouseEnter,
+				onMouseleave: handlePopoverMouseLeave,
+				onFocusin: handlePopoverMouseEnter,
+				onFocusout: handlePopoverMouseLeave
+			}
+		},
+		internals: {
+			handlePopoverMouseEnter,
+			handlePopoverMouseLeave
+		}
+	};
 });
 //#endregion
 //#region src/utils/math.ts

package/package.json

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