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

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

@@ -1,93 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { ref, type Ref } from "vue";
-import { mockVueLifecycle } from "../../utils/vitest";
-import { useGlobalEventListener } from "./useGlobalListener";
-
-let unmount: () => Promise<void> | undefined;
-
-describe("useGlobalEventListener", () => {
-  let target: Ref<HTMLButtonElement>;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    unmount = mockVueLifecycle();
-    target = ref(document.createElement("button"));
-    document.body.appendChild(target.value);
-  });
-
-  it("should be defined", () => {
-    expect(useGlobalEventListener).toBeDefined();
-  });
-
-  it("should listen to global events", () => {
-    // ARRANGE
-    const listener = vi.fn();
-    useGlobalEventListener({ type: "click", listener });
-    // ACT
-    const event = new MouseEvent("click", { bubbles: true });
-    target.value.dispatchEvent(event);
-    // ASSERT
-    expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener).toBeCalledWith(event);
-  });
-
-  it("should stop to listen to global events after unmount", async () => {
-    // ARRANGE
-    const listener = vi.fn();
-    useGlobalEventListener({ type: "click", listener });
-    // ACT
-    await unmount();
-    expect(listener).toHaveBeenCalledTimes(0);
-    target.value.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-    // ASSERT
-    expect(listener).toHaveBeenCalledTimes(0);
-  });
-
-  it("should allow for multiple of the same listener types", async () => {
-    // ARRANGE
-    vi.useFakeTimers();
-    const listener = vi.fn();
-    const disabled = ref(false);
-    const listener2 = vi.fn();
-    useGlobalEventListener({ type: "click", listener, disabled });
-    useGlobalEventListener({ type: "click", listener: listener2 });
-    // ACT
-    target.value.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-    // ASSERT
-    expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener2).toHaveBeenCalledTimes(1);
-    // ACT
-    disabled.value = true;
-    await vi.runAllTimersAsync();
-    // ACT
-    target.value.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-    // ASSERT
-    expect(listener).toHaveBeenCalledTimes(1);
-    expect(listener2).toHaveBeenCalledTimes(2);
-  });
-
-  it("should not listen to events when disabled", async () => {
-    // ARRANGE
-    vi.useFakeTimers();
-    const disabled = ref(false);
-    const listener = vi.fn();
-    useGlobalEventListener({ type: "click", listener, disabled });
-    // ACT
-    await vi.runAllTimersAsync();
-    target.value.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-    // ASSERT
-    expect(listener).toHaveBeenCalledTimes(1);
-    // ACT
-    disabled.value = true;
-    await vi.runAllTimersAsync();
-    target.value.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-    // ASSERT
-    expect(listener).toHaveBeenCalledTimes(1);
-    // ACT
-    disabled.value = false;
-    await vi.runAllTimersAsync();
-    target.value.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-    // ASSERT
-    expect(listener).toHaveBeenCalledTimes(2);
-  });
-});

package/src/composables/helpers/useGlobalListener.ts

@@ -1,64 +0,0 @@
-import { onBeforeMount, onBeforeUnmount, reactive, watchEffect, type Ref } from "vue";
-
-type DocumentEventType = keyof DocumentEventMap;
-type GlobalListener<K extends DocumentEventType = DocumentEventType> = (
-  event: DocumentEventMap[K],
-) => unknown;
-
-export type UseGlobalEventListenerOptions<K extends DocumentEventType> = {
-  type: K;
-  listener: GlobalListener<K>;
-  disabled?: Ref<boolean>;
-};
-
-const GLOBAL_LISTENERS = reactive(new Map<DocumentEventType, Set<GlobalListener>>());
-
-const updateRemainingListeners = (type: DocumentEventType, remaining?: Set<GlobalListener>) => {
-  if (remaining?.size) {
-    GLOBAL_LISTENERS.set(type, remaining);
-    return;
-  }
-  GLOBAL_LISTENERS.delete(type);
-  document.removeEventListener(type, GLOBAL_HANDLER);
-};
-
-const removeGlobalListener = <K extends DocumentEventType>(
-  type: K,
-  listener: GlobalListener<K>,
-) => {
-  const globalListener = GLOBAL_LISTENERS.get(type);
-  globalListener?.delete(listener as GlobalListener);
-
-  updateRemainingListeners(type, globalListener);
-};
-
-const addGlobalListener = <K extends DocumentEventType>(type: K, listener: GlobalListener<K>) => {
-  const globalListener = GLOBAL_LISTENERS.get(type) ?? new Set();
-  globalListener.add(listener as GlobalListener);
-  GLOBAL_LISTENERS.set(type, globalListener);
-
-  document.addEventListener(type, GLOBAL_HANDLER);
-};
-
-/**
- * A single and unique function for all event types.
- * We use the fact that `addEventListener` and `removeEventListener` are idempotent when called with the same function reference.
- */
-const GLOBAL_HANDLER = (event: Event) => {
-  const type = event.type as DocumentEventType;
-  GLOBAL_LISTENERS.get(type)?.forEach((cb) => cb(event));
-};
-
-export const useGlobalEventListener = <K extends DocumentEventType>({
-  type,
-  listener,
-  disabled,
-}: UseGlobalEventListenerOptions<K>) => {
-  onBeforeMount(() =>
-    watchEffect(() =>
-      disabled?.value ? removeGlobalListener(type, listener) : addGlobalListener(type, listener),
-    ),
-  );
-
-  onBeforeUnmount(() => removeGlobalListener(type, listener));
-};

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

@@ -1,117 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { ref } from "vue";
-import { mockVueLifecycle } from "../../utils/vitest";
-import { useOutsideClick } from "./useOutsideClick";
-
-describe("useOutsideClick", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    mockVueLifecycle();
-  });
-
-  it("should be defined", () => {
-    expect(useOutsideClick).toBeDefined();
-  });
-
-  it("should detect outside clicks", async () => {
-    // ARRANGE
-    vi.useFakeTimers();
-    const inside = ref(document.createElement("button"));
-    document.body.appendChild(inside.value);
-    const outside = ref(document.createElement("button"));
-    document.body.appendChild(outside.value);
-
-    const onOutsideClick = vi.fn();
-    useOutsideClick({ inside, onOutsideClick });
-
-    // ACT
-    const event = new MouseEvent("mousedown", { bubbles: true });
-    outside.value.dispatchEvent(event);
-
-    // ASSERT
-    expect(onOutsideClick).toHaveBeenCalledTimes(1);
-    expect(onOutsideClick).toBeCalledWith(event);
-
-    // ACT
-    outside.value.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: "Tab" }));
-    await vi.runAllTimersAsync();
-
-    // ASSERT
-    expect(
-      onOutsideClick,
-      "should not trigger on Tab press when checkOnTab option is disabled",
-    ).toHaveBeenCalledTimes(1);
-  });
-
-  it("should detect outside clicks correctly for multiple inside elements", () => {
-    // ARRANGE
-    const inside = [document.createElement("button"), document.createElement("button")];
-    inside.forEach((e) => document.body.appendChild(e));
-    const outside = ref(document.createElement("button"));
-    document.body.appendChild(outside.value);
-
-    const onOutsideClick = vi.fn();
-    useOutsideClick({ inside, onOutsideClick });
-    // ACT
-    const event = new MouseEvent("mousedown", { bubbles: true });
-    inside[0].dispatchEvent(event);
-    inside[1].dispatchEvent(event);
-    // ASSERT
-    expect(onOutsideClick).not.toHaveBeenCalled();
-
-    // ACT
-    outside.value.dispatchEvent(event);
-    // ASSERT
-    expect(onOutsideClick).toHaveBeenCalledTimes(1);
-    expect(onOutsideClick).toBeCalledWith(event);
-  });
-
-  it("should ignore outside clicks when disabled", async () => {
-    // ARRANGE
-    vi.useFakeTimers();
-    const inside = ref(document.createElement("button"));
-    document.body.appendChild(inside.value);
-    const outside = ref(document.createElement("button"));
-    document.body.appendChild(outside.value);
-
-    const disabled = ref(false);
-    const onOutsideClick = vi.fn();
-    useOutsideClick({ inside, disabled, onOutsideClick });
-
-    // ACT
-    const event = new MouseEvent("mousedown", { bubbles: true });
-    outside.value.dispatchEvent(event);
-    // ASSERT
-    expect(onOutsideClick).toHaveBeenCalledTimes(1);
-    expect(onOutsideClick).toBeCalledWith(event);
-
-    // ACT
-    disabled.value = true;
-    await vi.runAllTimersAsync();
-    const event2 = new MouseEvent("mousedown", { bubbles: true });
-    outside.value.dispatchEvent(event2);
-    // ASSERT
-    expect(onOutsideClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("should detect outside tab via keyboard", async () => {
-    // ARRANGE
-    vi.useFakeTimers();
-    const inside = ref(document.createElement("button"));
-    document.body.appendChild(inside.value);
-    const outside = ref(document.createElement("button"));
-    document.body.appendChild(outside.value);
-
-    const onOutsideClick = vi.fn();
-    useOutsideClick({ inside, onOutsideClick, checkOnTab: true });
-
-    // ACT
-    const event = new KeyboardEvent("keydown", { bubbles: true, key: "Tab" });
-    outside.value.dispatchEvent(event);
-    await vi.runAllTimersAsync();
-
-    // ASSERT
-    expect(onOutsideClick).toHaveBeenCalledTimes(1);
-    expect(onOutsideClick).toBeCalledWith(event);
-  });
-});

package/src/composables/helpers/useOutsideClick.ts

@@ -1,69 +0,0 @@
-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<TCheckOnTab extends boolean | undefined = undefined> = {
-  /**
-   * HTML element of the component where clicks should be ignored
-   */
-  inside: MaybeRefOrGetter<Arrayable<Nullable<HTMLElement>>>;
-  /**
-   * Callback when an outside click occurred.
-   */
-  onOutsideClick: (
-    event: TCheckOnTab extends true ? MouseEvent | KeyboardEvent : MouseEvent,
-  ) => void;
-  /**
-   * Whether the outside focus should also be checked when pressing the Tab key.
-   */
-  checkOnTab?: TCheckOnTab;
-  /**
-   * If `true`, event listeners will be removed and no outside clicks will be captured.
-   */
-  disabled?: Ref<boolean>;
-};
-
-/**
- * Composable for listening to click events that occur outside of a component.
- * Useful to e.g. close flyouts or tooltips.
- */
-export const useOutsideClick = <TCheckOnTab extends boolean | undefined>({
-  inside,
-  onOutsideClick,
-  disabled,
-  checkOnTab,
-}: UseOutsideClickOptions<TCheckOnTab>) => {
-  const isOutsideClick = (target: EventTarget | null) => {
-    if (!target) return true;
-    const raw = toValue(inside);
-    const elements = Array.isArray(raw) ? raw : [raw];
-    return !elements.some((element) => element?.contains(target as Node | null));
-  };
-
-  /**
-   * Document click handle that closes then tooltip when clicked outside.
-   * Should only be called when trigger is "click".
-   */
-  const clickListener = (event: MouseEvent) => {
-    if (isOutsideClick(event.target)) onOutsideClick(event);
-  };
-
-  useGlobalEventListener({ type: "mousedown", listener: clickListener, disabled });
-
-  if (checkOnTab) {
-    const keydownListener = async (event: KeyboardEvent) => {
-      if (event.key !== "Tab") return;
-
-      // using setTimeout here to guarantee that side effects that might change the document.activeElement have run before checking
-      // the activeElement
-      await new Promise((resolve) => setTimeout(resolve));
-
-      if (isOutsideClick(document.activeElement)) {
-        onOutsideClick(event as Parameters<typeof onOutsideClick>[0]);
-      }
-    };
-
-    useGlobalEventListener({ type: "keydown", listener: keydownListener, disabled });
-  }
-};

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

@@ -1,29 +0,0 @@
-import { beforeAll, expect, test, vi } from "vitest";
-import { useTypeAhead } from "./useTypeAhead";
-
-beforeAll(() => {
-  vi.useFakeTimers();
-});
-
-test("useTypeAhead", () => {
-  const spy = vi.fn();
-  const typeAhead = useTypeAhead(spy);
-
-  typeAhead({ key: "a" });
-  expect(spy).toHaveBeenCalledOnce();
-  expect(spy).toHaveBeenLastCalledWith("a");
-
-  typeAhead({ key: "Alt" });
-  expect(spy).toHaveBeenCalledOnce();
-  expect(spy).toHaveBeenLastCalledWith("a");
-
-  typeAhead({ key: "b" });
-  expect(spy).toHaveBeenCalledTimes(2);
-  expect(spy).toHaveBeenLastCalledWith("ab");
-
-  vi.runAllTimers();
-
-  typeAhead({ key: "c" });
-  expect(spy).toBeCalledTimes(3);
-  expect(spy).toHaveBeenLastCalledWith("c");
-});

package/src/composables/helpers/useTypeAhead.ts

@@ -1,26 +0,0 @@
-import { isPrintableCharacter } from "../../utils/keyboard";
-import { debounce } from "../../utils/timer";
-
-/**
- * Enhances typeAhead to combine multiple inputs in quick succession and filter out non-printable characters.
- *
- * @example
- * ```ts
- * const typeAhead = useTypeAhead((inputString) => console.log("Typed string:", inputString));
- * // ...
- * addEventListener("keydown", typeAhead);
- * ```
- */
-export const useTypeAhead = (callback: (input: string) => void, timeout = 500) => {
-  let inputString = "";
-  const debouncedReset = debounce(() => (inputString = ""), timeout);
-
-  return (event: Pick<KeyboardEvent, "key">) => {
-    if (!isPrintableCharacter(event.key)) {
-      return;
-    }
-    debouncedReset();
-    inputString = `${inputString}${event.key}`;
-    callback(inputString);
-  };
-};

package/src/composables/listbox/TestListbox.ct.tsx

@@ -1,17 +0,0 @@
-import { test } from "@playwright/experimental-ct-vue";
-import TestListbox from "./TestListbox.vue";
-import { listboxTesting } from "./createListbox.testing";
-
-test("listbox", async ({ mount, page }) => {
-  await mount(<TestListbox />);
-
-  await listboxTesting({
-    page,
-    listbox: page.getByRole("listbox"),
-    options: page.getByRole("option"),
-    isOptionActive: async (locator) => {
-      const className = await locator.getAttribute("class");
-      return className?.includes("focused") ?? false;
-    },
-  });
-});

package/src/composables/listbox/TestListbox.vue

@@ -1,92 +0,0 @@
-<script lang="ts" setup>
-import { ref } from "vue";
-import { createListbox } from "./createListbox";
-
-type Options = (typeof options)[number];
-
-const selectedOption = ref<Options>();
-const activeOption = ref<Options>();
-
-const options = [
-  "Apple",
-  "Banana",
-  "Mango",
-  "Kiwi",
-  "Orange",
-  "Papaya",
-  "Apricot",
-  "Lemon",
-  "Cranberry",
-  "Avocado",
-  "Cherry",
-  "Coconut",
-  "Lychee",
-  "Melon",
-  "Raspberry",
-  "Strawberry",
-] as const;
-
-const {
-  elements: { listbox, option: headlessOption },
-} = createListbox({
-  label: "Test listbox",
-  description: "Test description",
-  activeOption,
-  isExpanded: true,
-  onSelect: (id) => {
-    selectedOption.value = selectedOption.value === id ? undefined : id;
-  },
-  onActivateFirst: () => (activeOption.value = options[0]),
-  onActivateLast: () => (activeOption.value = options.at(-1)),
-  onActivateNext: (currentValue) => {
-    const currentIndex = options.findIndex((i) => i === currentValue);
-    if (currentIndex < options.length - 1) {
-      activeOption.value = options[currentIndex + 1];
-    }
-  },
-  onActivatePrevious: (currentValue) => {
-    const currentIndex = options.findIndex((i) => i === currentValue);
-    if (currentIndex > 0) activeOption.value = options[currentIndex - 1];
-  },
-  onTypeAhead: (label) => {
-    const firstMatch = options.find((i) => {
-      return i.toLowerCase().trim().startsWith(label.toLowerCase());
-    });
-    if (!firstMatch) return;
-    activeOption.value = firstMatch;
-  },
-});
-</script>
-
-<template>
-  <ul v-bind="listbox">
-    <li
-      v-for="option in options"
-      :key="option"
-      v-bind="
-        headlessOption({
-          value: option,
-          label: option,
-          selected: option === selectedOption,
-        })
-      "
-      :class="{ focused: option === activeOption, selected: option === selectedOption }"
-    >
-      {{ option }}
-    </li>
-  </ul>
-</template>
-
-<style lang="scss" scoped>
-li {
-  height: 1.5rem;
-}
-
-.focused {
-  background-color: orange;
-}
-
-.selected {
-  background-color: red;
-}
-</style>

package/src/composables/listbox/createListbox.testing.ts

@@ -1,141 +0,0 @@
-import { expect } from "@playwright/experimental-ct-vue";
-import type { Locator, Page } from "@playwright/test";
-
-export type ListboxTestingOptions = {
-  /**
-   * Playwright page.
-   */
-  page: Page;
-  /**
-   * Locator for the listbox element.
-   */
-  listbox: Locator;
-  /**
-   * Options (at least 3).
-   */
-  options: Locator;
-  /**
-   * Function that returns whether the given option locator is visually active.
-   */
-  isOptionActive: (locator: Locator) => Promise<boolean>;
-};
-
-/**
- * Playwright utility for executing accessibility testing for a listbox.
- * Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable.
- */
-export const listboxTesting = async ({
-  page,
-  listbox,
-  options,
-  isOptionActive,
-}: ListboxTestingOptions) => {
-  const expectOptionToBeActive = async (locator: Locator, message: string) => {
-    expect(await isOptionActive(locator), message).toBeTruthy();
-    const optionId = await locator.getAttribute("id");
-    expect(optionId).toBeDefined();
-    await expect(
-      listbox,
-      "listbox should have set aria-activedescendant to the ID of the currently visually active option",
-    ).toHaveAttribute("aria-activedescendant", optionId!);
-  };
-
-  await expect(listbox).toBeVisible();
-
-  // ensure correct listbox aria attributes
-  await expect(
-    listbox,
-    'listbox must have a "aria-label" attribute with an existing id',
-  ).toHaveAttribute("aria-label");
-
-  await listbox
-    .getAttribute("aria-label")
-    .then((label) => expect(page.locator(`#${label}`)).toBeDefined());
-
-  await expect(listbox, "listbox must have role attribute with value listbox").toHaveAttribute(
-    "role",
-    "listbox",
-  );
-
-  // ensure that all options have correct aria attributes
-  for (const option of await options.all()) {
-    await expect(option, "option must have arial-label attribute").toHaveAttribute("aria-label");
-    await expect(option, "option must have role attribute with value option").toHaveAttribute(
-      "role",
-      "option",
-    );
-  }
-
-  await page.keyboard.press("Tab");
-  await expect(listbox, "Listbox should be focused when pressing tab key").toBeFocused();
-
-  await listbox.press("ArrowDown");
-
-  await expectOptionToBeActive(
-    options.first(),
-    "Pressing arrow down key when no option is active should activate the first option",
-  );
-  await expect(
-    listbox,
-    "When option is visually active, DOM focus should still be on the listbox",
-  ).toBeFocused();
-
-  await listbox.press("ArrowDown");
-  await expectOptionToBeActive(
-    options.nth(1),
-    "Pressing arrow down key should activate the next option",
-  );
-
-  await listbox.press(" ");
-  await expect(
-    options.nth(1),
-    "Pressing space key should select the currently active option",
-  ).toHaveAttribute("aria-selected", "true");
-
-  await listbox.press("ArrowUp");
-  await expectOptionToBeActive(
-    options.first(),
-    "Pressing arrow up key should activate the previous option",
-  );
-
-  await listbox.press("End");
-  await expectOptionToBeActive(options.last(), "Pressing End key should activate the last option");
-
-  const secondOptionText = await options.nth(1).textContent();
-  expect(secondOptionText).toBeDefined();
-
-  const firstCharacter = secondOptionText!.charAt(0);
-  await listbox.press(firstCharacter);
-
-  await expectOptionToBeActive(
-    listbox.getByLabel(firstCharacter).first(),
-    "Pressing any other printable character should activate the fist option starting with the pressed key",
-  );
-
-  await listbox.press("Home");
-  await expectOptionToBeActive(
-    options.first(),
-    "Pressing Home key should activate the first option",
-  );
-
-  const firstOptionHeight = await options.first().evaluate((element) => element.clientHeight);
-
-  await listbox.evaluate((element, height) => {
-    element.style.height = `${height}px`;
-    element.style.overflow = "hidden";
-  }, firstOptionHeight);
-
-  await expect(options.nth(1)).not.toBeInViewport();
-
-  await listbox.press("ArrowDown");
-  await expect(
-    options.nth(1),
-    "activating an option should scroll it into viewport if not visible",
-  ).toBeInViewport();
-
-  // reset temporary styles
-  await listbox.evaluate((element) => {
-    element.style.height = "";
-    element.style.overflow = "";
-  });
-};