@sit-onyx/headless 0.1.0-alpha.7 → 0.1.0

package/dist/index.js

@@ -0,0 +1,780 @@
+import { shallowRef, computed, reactive, onBeforeMount, watchEffect, onBeforeUnmount, toValue, unref, ref, nextTick, useId, watch, toRef } from "vue";
+const createBuilder = (builder) => builder;
+function createElRef() {
+  const elementRef = shallowRef();
+  return computed({
+    set: (element) => {
+      elementRef.value = element != null && "$el" in element ? element.$el : element;
+    },
+    get: () => elementRef.value
+  });
+}
+const isSubsetMatching = (subset, target) => Object.entries(subset).every(
+  ([key, value]) => target[key] === value
+);
+const wasKeyPressed = (event, key) => {
+  if (typeof key === "string") {
+    return event.key === key;
+  }
+  return isSubsetMatching(
+    { altKey: false, ctrlKey: false, metaKey: false, shiftKey: false, ...key },
+    event
+  );
+};
+const GRAPHEME_SEGMENTER = new Intl.Segmenter("en-US");
+const isPrintableCharacter = (key) => [...GRAPHEME_SEGMENTER.segment(key)].length === 1;
+const GLOBAL_LISTENERS = reactive(/* @__PURE__ */ new Map());
+const updateRemainingListeners = (type, remaining) => {
+  if (remaining?.size) {
+    GLOBAL_LISTENERS.set(type, remaining);
+    return;
+  }
+  GLOBAL_LISTENERS.delete(type);
+  document.removeEventListener(type, GLOBAL_HANDLER);
+};
+const removeGlobalListener = (type, listener) => {
+  const globalListener = GLOBAL_LISTENERS.get(type);
+  globalListener?.delete(listener);
+  updateRemainingListeners(type, globalListener);
+};
+const addGlobalListener = (type, listener) => {
+  const globalListener = GLOBAL_LISTENERS.get(type) ?? /* @__PURE__ */ new Set();
+  globalListener.add(listener);
+  GLOBAL_LISTENERS.set(type, globalListener);
+  document.addEventListener(type, GLOBAL_HANDLER);
+};
+const GLOBAL_HANDLER = (event) => {
+  const type = event.type;
+  GLOBAL_LISTENERS.get(type)?.forEach((cb) => cb(event));
+};
+const useGlobalEventListener = ({
+  type,
+  listener,
+  disabled
+}) => {
+  onBeforeMount(
+    () => watchEffect(
+      () => disabled?.value ? removeGlobalListener(type, listener) : addGlobalListener(type, listener)
+    )
+  );
+  onBeforeUnmount(() => removeGlobalListener(type, listener));
+};
+const useOutsideClick = ({
+  inside,
+  onOutsideClick,
+  disabled,
+  checkOnTab
+}) => {
+  const isOutsideClick = (target) => {
+    if (!target) return true;
+    const raw = toValue(inside);
+    const elements = Array.isArray(raw) ? raw : [raw];
+    return !elements.some((element) => element?.contains(target));
+  };
+  const clickListener = (event) => {
+    if (isOutsideClick(event.target)) onOutsideClick(event);
+  };
+  useGlobalEventListener({ type: "mousedown", listener: clickListener, disabled });
+  if (checkOnTab) {
+    const keydownListener = async (event) => {
+      if (event.key !== "Tab") return;
+      await new Promise((resolve) => setTimeout(resolve));
+      if (isOutsideClick(document.activeElement)) {
+        onOutsideClick(event);
+      }
+    };
+    useGlobalEventListener({ type: "keydown", listener: keydownListener, disabled });
+  }
+};
+const debounce = (handler, timeout) => {
+  let timer;
+  const func = (...lastArgs) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => handler(...lastArgs), toValue(timeout));
+  };
+  func.abort = () => clearTimeout(timer);
+  return func;
+};
+const useTypeAhead = (callback, timeout = 500) => {
+  let inputString = "";
+  const debouncedReset = debounce(() => inputString = "", timeout);
+  return (event) => {
+    if (!isPrintableCharacter(event.key)) {
+      return;
+    }
+    debouncedReset();
+    inputString = `${inputString}${event.key}`;
+    callback(inputString);
+  };
+};
+const createListbox = createBuilder(
+  (options) => {
+    const isMultiselect = computed(() => unref(options.multiple) ?? false);
+    const isExpanded = computed(() => unref(options.isExpanded) ?? false);
+    const descendantKeyIdMap = /* @__PURE__ */ new Map();
+    const getOptionId = (value) => {
+      if (!descendantKeyIdMap.has(value)) {
+        descendantKeyIdMap.set(value, useId());
+      }
+      return descendantKeyIdMap.get(value);
+    };
+    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({ block: "nearest", inline: "nearest" });
+    });
+    const typeAhead = useTypeAhead((inputString) => options.onTypeAhead?.(inputString));
+    const handleKeydown = (event) => {
+      switch (event.key) {
+        case " ":
+          event.preventDefault();
+          if (options.activeOption.value != void 0) {
+            options.onSelect?.(options.activeOption.value);
+          }
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          if (options.activeOption.value == void 0) {
+            options.onActivateLast?.();
+            return;
+          }
+          options.onActivatePrevious?.(options.activeOption.value);
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          if (options.activeOption.value == void 0) {
+            options.onActivateFirst?.();
+            return;
+          }
+          options.onActivateNext?.(options.activeOption.value);
+          break;
+        case "Home":
+          event.preventDefault();
+          options.onActivateFirst?.();
+          break;
+        case "End":
+          event.preventDefault();
+          options.onActivateLast?.();
+          break;
+        default:
+          typeAhead(event);
+      }
+    };
+    const listbox = computed(
+      () => options.controlled ? {
+        role: "listbox",
+        "aria-multiselectable": isMultiselect.value,
+        "aria-label": unref(options.label),
+        "aria-description": options.description,
+        tabindex: "-1"
+      } : {
+        role: "listbox",
+        "aria-multiselectable": isMultiselect.value,
+        "aria-label": unref(options.label),
+        "aria-description": options.description,
+        tabindex: "0",
+        "aria-activedescendant": options.activeOption.value != void 0 ? getOptionId(options.activeOption.value) : void 0,
+        onFocus: () => isFocused.value = true,
+        onBlur: () => isFocused.value = false,
+        onKeydown: handleKeydown
+      }
+    );
+    return {
+      elements: {
+        listbox,
+        group: computed(() => {
+          return (options2) => ({
+            role: "group",
+            "aria-label": options2.label
+          });
+        }),
+        option: computed(() => {
+          return (data) => {
+            const selected = data.selected ?? false;
+            return {
+              id: getOptionId(data.value),
+              role: "option",
+              "aria-label": data.label,
+              "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)
+            };
+          };
+        })
+      },
+      state: {
+        isFocused
+      },
+      internals: {
+        getOptionId
+      }
+    };
+  }
+);
+const OPENING_KEYS = ["ArrowDown", "ArrowUp", " ", "Enter", "Home", "End"];
+const CLOSING_KEYS = [
+  "Escape",
+  { key: "ArrowUp", altKey: true },
+  "Enter",
+  "Tab"
+];
+const SELECTING_KEYS = ["Enter"];
+const isSelectingKey = (event, withSpace) => {
+  const selectingKeys = withSpace ? [...SELECTING_KEYS, " "] : SELECTING_KEYS;
+  return isKeyOfGroup(event, selectingKeys);
+};
+const isKeyOfGroup = (event, group) => group.some((key) => wasKeyPressed(event, key));
+const createComboBox = createBuilder(
+  ({
+    autocomplete: autocompleteRef,
+    onAutocomplete,
+    onTypeAhead,
+    multiple: multipleRef,
+    label,
+    listLabel,
+    listDescription,
+    isExpanded: isExpandedRef,
+    activeOption,
+    onToggle,
+    onSelect,
+    onActivateFirst,
+    onActivateLast,
+    onActivateNext,
+    onActivatePrevious,
+    templateRef
+  }) => {
+    const controlsId = useId();
+    const autocomplete = computed(() => unref(autocompleteRef));
+    const isExpanded = computed(() => unref(isExpandedRef));
+    const multiple = computed(() => unref(multipleRef));
+    const handleInput = (event) => {
+      const inputElement = event.target;
+      if (autocomplete.value !== "none") {
+        onAutocomplete?.(inputElement.value);
+      }
+    };
+    const typeAhead = useTypeAhead((inputString) => onTypeAhead?.(inputString));
+    const handleSelect = (value) => {
+      onSelect?.(value);
+      if (!unref(multiple)) {
+        onToggle?.();
+      }
+    };
+    const handleNavigation = (event) => {
+      switch (event.key) {
+        case "ArrowUp":
+          event.preventDefault();
+          if (activeOption.value == void 0) {
+            return onActivateLast?.();
+          }
+          onActivatePrevious?.(activeOption.value);
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          if (activeOption.value == void 0) {
+            return onActivateFirst?.();
+          }
+          onActivateNext?.(activeOption.value);
+          break;
+        case "Home":
+          event.preventDefault();
+          onActivateFirst?.();
+          break;
+        case "End":
+          event.preventDefault();
+          onActivateLast?.();
+          break;
+      }
+    };
+    const handleKeydown = (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+      }
+      if (!isExpanded.value && isKeyOfGroup(event, OPENING_KEYS)) {
+        onToggle?.();
+        if (event.key === " ") {
+          event.preventDefault();
+        }
+        if (event.key === "End") {
+          return onActivateLast?.();
+        }
+        return onActivateFirst?.();
+      }
+      if (isSelectingKey(event, autocomplete.value === "none")) {
+        return handleSelect(activeOption.value);
+      }
+      if (isExpanded.value && isKeyOfGroup(event, CLOSING_KEYS)) {
+        return onToggle?.();
+      }
+      if (autocomplete.value === "none" && isPrintableCharacter(event.key)) {
+        !isExpanded.value && onToggle?.();
+        return typeAhead(event);
+      }
+      if (autocomplete.value !== "none" && isPrintableCharacter(event.key)) {
+        !isExpanded.value && onToggle?.();
+        return;
+      }
+      return handleNavigation(event);
+    };
+    const autocompleteInput = computed(() => {
+      if (autocomplete.value === "none") return null;
+      return {
+        "aria-autocomplete": autocomplete.value,
+        type: "text"
+      };
+    });
+    const {
+      elements: { option, group, listbox },
+      internals: { getOptionId }
+    } = createListbox({
+      label: listLabel,
+      description: listDescription,
+      multiple,
+      controlled: true,
+      activeOption,
+      isExpanded,
+      onSelect: handleSelect
+    });
+    useOutsideClick({
+      inside: templateRef,
+      onOutsideClick() {
+        if (!isExpanded.value) return;
+        onToggle?.(true);
+      }
+    });
+    return {
+      elements: {
+        option,
+        group,
+        /**
+         * The listbox associated with the combobox.
+         */
+        listbox: computed(() => ({
+          ...listbox.value,
+          id: controlsId,
+          // preventDefault to not lose focus of the combobox
+          onMousedown: (e) => e.preventDefault()
+        })),
+        /**
+         * An input that controls another element, that can dynamically pop-up to help the user set the value of the input.
+         * The input MAY be either a single-line text field that supports editing and typing or an element that only displays the current value of the combobox.
+         */
+        input: computed(() => ({
+          role: "combobox",
+          "aria-expanded": isExpanded.value,
+          "aria-controls": controlsId,
+          "aria-label": unref(label),
+          "aria-activedescendant": activeOption.value != void 0 ? getOptionId(activeOption.value) : void 0,
+          onInput: handleInput,
+          onKeydown: handleKeydown,
+          ...autocompleteInput.value
+        })),
+        /**
+         * An optional button to control the visibility of the popup.
+         */
+        button: computed(() => ({
+          tabindex: "-1",
+          onClick: () => onToggle?.()
+        }))
+      }
+    };
+  }
+);
+const createMenuButton = createBuilder((options) => {
+  const rootId = useId();
+  const menuId = useId();
+  const rootRef = createElRef();
+  const menuRef = createElRef();
+  const buttonId = useId();
+  const position = computed(() => toValue(options.position) ?? "bottom");
+  useGlobalEventListener({
+    type: "keydown",
+    listener: (e) => e.key === "Escape" && setExpanded(false),
+    disabled: computed(() => !options.isExpanded.value)
+  });
+  const updateDebouncedExpanded = debounce(() => options.onToggle(), 200);
+  watch(options.isExpanded, () => updateDebouncedExpanded.abort());
+  const setExpanded = (expanded, debounced = false) => {
+    if (options.disabled?.value) return;
+    if (expanded === options.isExpanded.value) {
+      updateDebouncedExpanded.abort();
+      return;
+    }
+    if (debounced) {
+      updateDebouncedExpanded();
+      return;
+    }
+    options.onToggle();
+  };
+  const focusRelativeItem = (next) => {
+    const currentMenuItem = document.activeElement;
+    const currentMenu = currentMenuItem?.closest('[role="menu"]') || menuRef.value;
+    if (!currentMenu) return;
+    const menuItems = Array.from(currentMenu.querySelectorAll('[role="menuitem"]')).filter((item) => item.closest('[role="menu"]') === currentMenu);
+    if (position.value === "top") menuItems.reverse();
+    let nextIndex = 0;
+    if (currentMenuItem) {
+      const currentIndex = menuItems.indexOf(currentMenuItem);
+      switch (next) {
+        case "next":
+          nextIndex = currentIndex + 1;
+          break;
+        case "prev":
+          nextIndex = currentIndex - 1;
+          break;
+        case "first":
+          nextIndex = 0;
+          break;
+        case "last":
+          nextIndex = menuItems.length - 1;
+          break;
+      }
+    }
+    const nextMenuItem = menuItems[nextIndex];
+    nextMenuItem?.focus();
+  };
+  const handleKeydown = (event) => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        focusRelativeItem(position.value === "bottom" ? "next" : "prev");
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        focusRelativeItem(position.value === "bottom" ? "prev" : "next");
+        break;
+      case "Home":
+        event.preventDefault();
+        focusRelativeItem("first");
+        break;
+      case "End":
+        event.preventDefault();
+        focusRelativeItem("last");
+        break;
+      case " ":
+      case "Enter":
+        if (event.target instanceof HTMLInputElement) break;
+        event.preventDefault();
+        event.target.click();
+        break;
+      case "Escape":
+        event.preventDefault();
+        setExpanded(false);
+        break;
+    }
+  };
+  const triggerEvents = computed(() => {
+    if (toValue(options.trigger) !== "hover") return;
+    return {
+      onMouseenter: () => setExpanded(true),
+      onMouseleave: () => setExpanded(false, true)
+    };
+  });
+  useOutsideClick({
+    inside: rootRef,
+    onOutsideClick: () => setExpanded(false),
+    disabled: computed(() => !options.isExpanded.value),
+    checkOnTab: true
+  });
+  return {
+    elements: {
+      root: computed(() => ({
+        id: rootId,
+        onKeydown: handleKeydown,
+        ref: rootRef,
+        ...triggerEvents.value
+      })),
+      button: computed(
+        () => ({
+          "aria-controls": menuId,
+          "aria-expanded": options.isExpanded.value,
+          "aria-haspopup": true,
+          onFocus: () => setExpanded(true, true),
+          onClick: () => toValue(options.trigger) == "click" ? setExpanded(!options.isExpanded.value) : void 0,
+          id: buttonId,
+          disabled: options.disabled?.value
+        })
+      ),
+      menu: {
+        id: menuId,
+        ref: menuRef,
+        role: "menu",
+        "aria-labelledby": buttonId,
+        onClick: () => setExpanded(false)
+      },
+      ...createMenuItems().elements
+    }
+  };
+});
+const createMenuItems = createBuilder((options) => {
+  const onKeydown = (event) => {
+    switch (event.key) {
+      case "ArrowRight":
+      case " ":
+      case "Enter":
+        event.preventDefault();
+        options?.onOpen?.();
+        break;
+    }
+  };
+  return {
+    elements: {
+      listItem: {
+        role: "none"
+      },
+      menuItem: (data) => ({
+        "aria-current": data.active ? "page" : void 0,
+        "aria-disabled": data.disabled,
+        role: "menuitem",
+        onKeydown
+      })
+    }
+  };
+});
+const MathUtils = {
+  /**
+   * Ensures that a given `number` is or is between a given `min` and `max`.
+   */
+  clamp: (number, min, max) => Math.max(Math.min(number, max), min)
+};
+const createNavigationMenu = createBuilder(({ navigationName }) => {
+  const navId = useId();
+  const getMenuButtons = () => {
+    const nav = navId ? document.getElementById(navId) : void 0;
+    if (!nav) return [];
+    return Array.from(nav.querySelectorAll("button[aria-expanded][aria-controls]"));
+  };
+  const focusRelative = (trigger, next) => {
+    const menuButtons = getMenuButtons();
+    const index = menuButtons.indexOf(trigger);
+    if (index === -1) return;
+    const nextIndex = MathUtils.clamp(
+      index + (next === "next" ? 1 : -1),
+      0,
+      menuButtons.length - 1
+    );
+    menuButtons[nextIndex]?.focus();
+  };
+  return {
+    elements: {
+      nav: {
+        "aria-label": unref(navigationName),
+        id: navId,
+        onKeydown: (event) => {
+          switch (event.key) {
+            case "ArrowRight":
+              focusRelative(event.target, "next");
+              break;
+            case "ArrowLeft":
+              focusRelative(event.target, "previous");
+              break;
+          }
+        }
+      }
+    }
+  };
+});
+const createTabs = createBuilder((options) => {
+  const idMap = /* @__PURE__ */ new Map();
+  const getId = (value) => {
+    if (!idMap.has(value)) {
+      idMap.set(value, { tabId: useId(), panelId: useId() });
+    }
+    return idMap.get(value);
+  };
+  const handleKeydown = (event) => {
+    const tab = event.target;
+    const enabledTabs = Array.from(
+      tab.parentElement?.querySelectorAll('[role="tab"]') ?? []
+    ).filter((tab2) => tab2.ariaDisabled !== "true");
+    const currentTabIndex = enabledTabs.indexOf(tab);
+    const focusElement = (element) => {
+      if (element instanceof HTMLElement) element.focus();
+    };
+    const focusFirstTab = () => focusElement(enabledTabs.at(0));
+    const focusLastTab = () => focusElement(enabledTabs.at(-1));
+    const focusTab = (direction) => {
+      if (currentTabIndex === -1) return;
+      const newIndex = direction === "next" ? currentTabIndex + 1 : currentTabIndex - 1;
+      if (newIndex < 0) {
+        return focusLastTab();
+      } else if (newIndex >= enabledTabs.length) {
+        return focusFirstTab();
+      }
+      return focusElement(enabledTabs.at(newIndex));
+    };
+    switch (event.key) {
+      case "ArrowRight":
+        focusTab("next");
+        break;
+      case "ArrowLeft":
+        focusTab("previous");
+        break;
+      case "Home":
+        focusFirstTab();
+        break;
+      case "End":
+        focusLastTab();
+        break;
+      case "Enter":
+      case " ":
+        {
+          const tabEntry = Array.from(idMap.entries()).find(([, { tabId }]) => tabId === tab.id);
+          if (tabEntry) options.onSelect?.(tabEntry[0]);
+        }
+        break;
+    }
+  };
+  return {
+    elements: {
+      tablist: computed(() => ({
+        role: "tablist",
+        "aria-label": unref(options.label),
+        onKeydown: handleKeydown
+      })),
+      tab: computed(() => {
+        return (data) => {
+          const { tabId: selectedTabId } = getId(unref(options.selectedTab));
+          const { tabId, panelId } = getId(data.value);
+          const isSelected = tabId === selectedTabId;
+          return {
+            id: tabId,
+            role: "tab",
+            "aria-selected": isSelected,
+            "aria-controls": panelId,
+            "aria-disabled": data.disabled ? true : void 0,
+            onClick: () => options.onSelect?.(data.value),
+            tabindex: isSelected && !data.disabled ? 0 : -1
+          };
+        };
+      }),
+      tabpanel: computed(() => {
+        return (data) => {
+          const { tabId, panelId } = getId(data.value);
+          return {
+            id: panelId,
+            role: "tabpanel",
+            "aria-labelledby": tabId
+          };
+        };
+      })
+    }
+  };
+});
+const useDismissible = ({ isExpanded }) => useGlobalEventListener({
+  type: "keydown",
+  listener: (e) => {
+    if (e.key === "Escape") {
+      isExpanded.value = false;
+    }
+  },
+  disabled: computed(() => !isExpanded.value)
+});
+const createToggletip = createBuilder(
+  ({ toggleLabel, isVisible }) => {
+    const triggerId = useId();
+    const _isVisible = toRef(isVisible ?? false);
+    useDismissible({ isExpanded: _isVisible });
+    const toggle = () => _isVisible.value = !_isVisible.value;
+    return {
+      elements: {
+        /**
+         * The element which controls the toggletip visibility:
+         * Preferably a `button` element.
+         */
+        trigger: computed(() => ({
+          id: triggerId,
+          onClick: toggle,
+          "aria-label": toValue(toggleLabel)
+        })),
+        /**
+         * The element with the relevant toggletip content.
+         * Only simple, textual content is allowed.
+         */
+        tooltip: {
+          onToggle: (e) => {
+            const tooltip = e.target;
+            _isVisible.value = tooltip.matches(":popover-open");
+          },
+          anchor: triggerId,
+          popover: "auto",
+          role: "status",
+          tabindex: "-1"
+        }
+      },
+      state: {
+        isVisible: _isVisible
+      }
+    };
+  }
+);
+const createTooltip = createBuilder(({ debounce: debounce2, isVisible }) => {
+  const tooltipId = useId();
+  const _isVisible = toRef(isVisible ?? false);
+  let timeout;
+  const debouncedVisible = computed({
+    get: () => _isVisible.value,
+    set: (newValue) => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        _isVisible.value = newValue;
+      }, toValue(debounce2));
+    }
+  });
+  const hoverEvents = {
+    onMouseover: () => debouncedVisible.value = true,
+    onMouseout: () => debouncedVisible.value = false,
+    onFocusin: () => _isVisible.value = true,
+    onFocusout: () => _isVisible.value = false
+  };
+  useDismissible({ isExpanded: _isVisible });
+  return {
+    elements: {
+      /**
+       * The element which controls the tooltip visibility on hover.
+       */
+      trigger: {
+        "aria-describedby": tooltipId,
+        ...hoverEvents
+      },
+      /**
+       * The element describing the tooltip.
+       * Only simple, textual and non-focusable content is allowed.
+       */
+      tooltip: {
+        popover: "manual",
+        role: "tooltip",
+        id: tooltipId,
+        tabindex: "-1",
+        ...hoverEvents
+      }
+    },
+    state: {
+      isVisible: _isVisible
+    }
+  };
+});
+export {
+  CLOSING_KEYS,
+  OPENING_KEYS,
+  createBuilder,
+  createComboBox,
+  createElRef,
+  createListbox,
+  createMenuButton,
+  createMenuItems,
+  createNavigationMenu,
+  createTabs,
+  createToggletip,
+  createTooltip,
+  debounce,
+  isPrintableCharacter,
+  useGlobalEventListener,
+  useOutsideClick,
+  wasKeyPressed
+};