@sit-onyx/headless 1.0.0-beta.16 → 1.0.0-beta.18

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "1.0.0-beta.16",
+  "version": "1.0.0-beta.18",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@vue/compiler-dom": "3.5.13",
     "vue": "3.5.13",
-    "@sit-onyx/shared": "^1.0.0-beta.1"
+    "@sit-onyx/shared": "^1.0.0-beta.3"
   },
   "scripts": {
     "build": "vue-tsc --build --force",

package/src/composables/comboBox/SelectOnlyCombobox.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, useTemplateRef } from "vue";
 import { createComboBox } from "./createComboBox";
 
 const options = ["a", "b", "c", "d"];
 const isExpanded = ref(false);
-const comboboxRef = ref<HTMLElement>();
+const comboboxRef = useTemplateRef("combobox");
 const activeOption = ref("");
 const selectedOption = ref("");
 const selectedIndex = computed<number | undefined>(() => {
@@ -49,7 +49,7 @@ defineExpose({ comboBox });
 </script>
 
 <template>
-  <div ref="comboboxRef">
+  <div ref="combobox">
     <input
       v-bind="input"
       v-model="selectedOption"

package/src/composables/comboBox/TestCombobox.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, useTemplateRef } from "vue";
 import { createComboBox } from "./createComboBox";
 
 const options = ["a", "b", "c", "d"];
 const isExpanded = ref(false);
 const searchTerm = ref("");
-const comboboxRef = ref<HTMLElement>();
+const comboboxRef = useTemplateRef("combobox");
 const activeOption = ref("");
 const filteredOptions = computed(() => options.filter((v) => v.includes(searchTerm.value)));
 const selectedIndex = computed<number | undefined>(() => {
@@ -53,7 +53,7 @@ defineExpose({ comboBox });
 </script>
 
 <template>
-  <div ref="comboboxRef">
+  <div ref="combobox">
     <input v-bind="input" v-model="searchTerm" @keydown.arrow-down="isExpanded = true" />
 
     <button v-bind="button" type="button">

package/src/composables/comboBox/createComboBox.ts

@@ -1,6 +1,7 @@
 import { computed, unref, useId, type MaybeRef, type Ref } from "vue";
 import { createBuilder } from "../../utils/builder";
 import { isPrintableCharacter, wasKeyPressed, type PressedKey } from "../../utils/keyboard";
+import type { Nullable } from "../../utils/types";
 import { useOutsideClick } from "../helpers/useOutsideClick";
 import { useTypeAhead } from "../helpers/useTypeAhead";
 import {
@@ -48,7 +49,7 @@ export type CreateComboboxOptions<
   /**
    * Provides additional description for the listbox which displays the available options.
    */
-  listDescription?: MaybeRef<string | undefined>;
+  listDescription?: MaybeRef<Nullable<string>>;
   /**
    * Controls the opened/visible state of the associated pop-up. When expanded the activeOption can be controlled via the keyboard.
    */
@@ -56,11 +57,11 @@ export type CreateComboboxOptions<
   /**
    * If expanded, the active option is the currently highlighted option of the controlled listbox.
    */
-  activeOption: Ref<TValue | undefined>;
+  activeOption: Ref<Nullable<TValue>>;
   /**
    * Template ref to the component root (required to close combobox on outside click).
    */
-  templateRef: Ref<HTMLElement | undefined>;
+  templateRef: Ref<Nullable<HTMLElement>>;
   /**
    * Hook when the popover should toggle.
    *

package/src/composables/helpers/useOutsideClick.ts

@@ -1,13 +1,13 @@
-import type { Arrayable } from "vitest";
-import { toValue, type Ref } from "vue";
-import type { MaybeReactiveSource } from "../../utils/types";
+import type { Arrayable } from "vitest"; // For an unknown reason removing this import will break the build of "demo-app" and "playground"
+import { toValue, type MaybeRefOrGetter, type Ref } from "vue";
+import type { Nullable } from "../../utils/types";
 import { useGlobalEventListener } from "./useGlobalListener";
 
 export type UseOutsideClickOptions = {
   /**
    * HTML element of the component where clicks should be ignored
    */
-  inside: MaybeReactiveSource<Arrayable<HTMLElement | undefined>>;
+  inside: MaybeRefOrGetter<Arrayable<Nullable<HTMLElement>>>;
   /**
    * Callback when an outside click occurred.
    */

package/src/composables/listbox/createListbox.ts

@@ -1,5 +1,6 @@
 import { computed, nextTick, ref, unref, useId, watchEffect, type MaybeRef, type Ref } from "vue";
 import { createBuilder, type VBindAttributes } from "../../utils/builder";
+import type { Nullable } from "../../utils/types";
 import { useTypeAhead } from "../helpers/useTypeAhead";
 
 export type ListboxValue = string | number | boolean;
@@ -12,11 +13,11 @@ export type CreateListboxOptions<TValue extends ListboxValue, TMultiple extends
   /**
    * Aria description for the listbox.
    */
-  description?: MaybeRef<string | undefined>;
+  description?: MaybeRef<Nullable<string>>;
   /**
    * Value of currently (visually) active option.
    */
-  activeOption: Ref<TValue | undefined>;
+  activeOption: Ref<Nullable<TValue>>;
   /**
    * Wether the listbox is controlled from the outside, e.g. by a combobox.
    * This disables keyboard events and makes the listbox not focusable.
@@ -29,7 +30,7 @@ export type CreateListboxOptions<TValue extends ListboxValue, TMultiple extends
   /**
    * Whether the listbox is multiselect.
    */
-  multiple?: MaybeRef<TMultiple | undefined>;
+  multiple?: MaybeRef<Nullable<TMultiple>>;
   /**
    * Hook when an option is selected.
    */

package/src/composables/menuButton/createMenuButton.testing.ts

@@ -30,13 +30,6 @@ export const menuButtonTesting = async ({
   menu,
   menuItems,
 }: MenuButtonTestingOptions) => {
-  const menuId = await menu.getAttribute("id");
-  expect(menuId).toBeDefined();
-  await expect(
-    button,
-    "navigation menu should have set the list ID to the aria-controls",
-  ).toHaveAttribute("aria-controls", menuId!);
-
   await expect(
     button,
     'navigation menu should have an "aria-haspopup" attribute set to true',

package/src/composables/menuButton/createMenuButton.ts

@@ -7,6 +7,7 @@ type CreateMenuButtonOptions = {
   isExpanded: Readonly<Ref<boolean>>;
   trigger: Readonly<Ref<"hover" | "click">>;
   onToggle: () => void;
+  disabled?: Readonly<Ref<boolean>>;
 };
 
 /**
@@ -31,6 +32,7 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
   watch(options.isExpanded, () => updateDebouncedExpanded.abort()); // manually changing `isExpanded` should abort debounced action
 
   const setExpanded = (expanded: boolean, debounced = false) => {
+    if (options.disabled?.value) return;
     if (expanded === options.isExpanded.value) {
       updateDebouncedExpanded.abort();
       return;
@@ -50,7 +52,7 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
     const currentMenu = currentMenuItem?.closest('[role="menu"]') || menuRef.value;
     if (!currentMenu) return;
 
-    const menuItems = [...currentMenu.querySelectorAll<HTMLElement>('[role="menuitem"]')];
+    const menuItems = Array.from(currentMenu.querySelectorAll<HTMLElement>('[role="menuitem"]'));
     let nextIndex = 0;
 
     if (currentMenuItem) {
@@ -96,6 +98,7 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
         focusRelativeItem("last");
         break;
       case " ":
+        if (event.target instanceof HTMLInputElement) break;
         event.preventDefault();
         (event.target as HTMLElement).click();
         break;
@@ -142,6 +145,7 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
             onClick: () =>
               options.trigger.value == "click" ? setExpanded(!options.isExpanded.value) : undefined,
             id: buttonId,
+            disabled: options.disabled?.value,
           }) as const,
       ),
       menu: {

package/src/composables/navigationMenu/createMenu.ts

@@ -19,7 +19,7 @@ export const createNavigationMenu = createBuilder(({ navigationName }: CreateNav
   const getMenuButtons = () => {
     const nav = navId ? document.getElementById(navId) : undefined;
     if (!nav) return [];
-    return [...nav.querySelectorAll<HTMLElement>("button[aria-expanded][aria-controls]")];
+    return Array.from(nav.querySelectorAll<HTMLElement>("button[aria-expanded][aria-controls]"));
   };
 
   const focusRelative = (trigger: HTMLElement, next: "next" | "previous") => {

package/src/composables/tabs/TestTabs.ct.tsx

@@ -2,7 +2,6 @@ import { test } from "@playwright/experimental-ct-vue";
 import TestTabs from "./TestTabs.vue";
 import { tabsTesting } from "./createTabs.testing";
 
-// eslint-disable-next-line playwright/expect-expect
 test("tabs", async ({ mount, page }) => {
   const component = await mount(<TestTabs />);
 

package/src/composables/tooltip/createToggletip.ts

@@ -1,7 +1,6 @@
-import { computed, toRef, toValue, type MaybeRefOrGetter, type Ref } from "vue";
-import { createBuilder, createElRef } from "../../utils/builder";
+import { computed, toRef, toValue, useId, type MaybeRefOrGetter, type Ref } from "vue";
+import { createBuilder } from "../../utils/builder";
 import { useDismissible } from "../helpers/useDismissible";
-import { useOutsideClick } from "../helpers/useOutsideClick";
 
 export type CreateToggletipOptions = {
   toggleLabel: MaybeRefOrGetter<string>;
@@ -17,16 +16,9 @@ export type CreateToggletipOptions = {
  */
 export const createToggletip = createBuilder(
   ({ toggleLabel, isVisible }: CreateToggletipOptions) => {
-    const triggerRef = createElRef<HTMLButtonElement>();
-    const tooltipRef = createElRef<HTMLElement>();
-    const _isVisible = toRef(isVisible ?? false);
+    const triggerId = useId();
 
-    // close tooltip on outside click
-    useOutsideClick({
-      inside: computed(() => [triggerRef.value, tooltipRef.value]),
-      onOutsideClick: () => (_isVisible.value = false),
-      disabled: computed(() => !_isVisible.value),
-    });
+    const _isVisible = toRef(isVisible ?? false);
 
     useDismissible({ isExpanded: _isVisible });
 
@@ -39,7 +31,7 @@ export const createToggletip = createBuilder(
          * Preferably a `button` element.
          */
         trigger: computed(() => ({
-          ref: triggerRef,
+          id: triggerId,
           onClick: toggle,
           "aria-label": toValue(toggleLabel),
         })),
@@ -48,7 +40,12 @@ export const createToggletip = createBuilder(
          * Only simple, textual content is allowed.
          */
         tooltip: {
-          ref: tooltipRef,
+          onToggle: (e: Event) => {
+            const tooltip = e.target as HTMLDialogElement;
+            _isVisible.value = tooltip.matches(":popover-open");
+          },
+          anchor: triggerId,
+          popover: "auto",
           role: "status",
           tabindex: "-1",
         },

package/src/composables/tooltip/createTooltip.ts

@@ -57,6 +57,7 @@ export const createTooltip = createBuilder(({ debounce, isVisible }: CreateToolt
        * Only simple, textual and non-focusable content is allowed.
        */
       tooltip: {
+        popover: "manual",
         role: "tooltip",
         id: tooltipId,
         tabindex: "-1",

package/src/utils/builder.ts

@@ -29,7 +29,7 @@ export type IteratedHeadlessElementFunc<
 
 export type HeadlessElementAttributes<A extends HTMLAttributes> =
   | VBindAttributes<A>
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- the specific type doesn't matter here
   | IteratedHeadlessElementFunc<A, any>;
 
 export type HeadlessElements = Record<string, MaybeRef<HeadlessElementAttributes<HTMLAttributes>>>;

package/src/utils/types.ts

@@ -1,5 +1,3 @@
-import type { ComputedRef, MaybeRefOrGetter } from "vue";
-
 /**
  * Adds the entry with the key `Key` and the value of type `TValue` to a record when it is defined.
  * Then the entry is either undefined or exists without being optional.
@@ -25,6 +23,11 @@ export type IsArray<TValue, TMultiple extends boolean = false> = TMultiple exten
   : TValue;
 
 /**
- * Type for any kind of ref source. Preferably used in combination with vue's `toValue` method
+ * A type that can be wrapped in an array.
+ */
+export type Arrayable<T> = T | Array<T>;
+
+/**
+ * Either the actual value or a nullish one.
  */
-export type MaybeReactiveSource<T> = MaybeRefOrGetter<T> | ComputedRef<T>;
+export type Nullable<T> = T | null | undefined;