@sit-onyx/headless 1.0.0-beta.6 → 1.0.0-beta.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.8",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -24,7 +24,11 @@
   },
   "peerDependencies": {
     "typescript": ">= 5",
-    "vue": ">= 3"
+    "vue": ">= 3.5.0"
+  },
+  "devDependencies": {
+    "@vue/compiler-dom": "^3.5.0",
+    "vue": "^3.5.0"
   },
   "scripts": {
     "build": "vue-tsc --build --force",

package/src/composables/comboBox/createComboBox.ts

@@ -1,6 +1,5 @@
-import { computed, unref, type MaybeRef, type Ref } from "vue";
+import { computed, unref, useId, type MaybeRef, type Ref } from "vue";
 import { createBuilder } from "../../utils/builder";
-import { createId } from "../../utils/id";
 import { isPrintableCharacter, wasKeyPressed, type PressedKey } from "../../utils/keyboard";
 import { useOutsideClick } from "../helpers/useOutsideClick";
 import { useTypeAhead } from "../helpers/useTypeAhead";
@@ -127,7 +126,7 @@ export const createComboBox = createBuilder(
     onActivatePrevious,
     templateRef,
   }: CreateComboboxOptions<TValue, TAutoComplete, TMultiple>) => {
-    const controlsId = createId("comboBox-control");
+    const controlsId = useId();
 
     const autocomplete = computed(() => unref(autocompleteRef));
     const isExpanded = computed(() => unref(isExpandedRef));

package/src/composables/listbox/createListbox.ts

@@ -1,5 +1,4 @@
-import { computed, ref, unref, watchEffect, type MaybeRef, type Ref } from "vue";
-import { createId } from "../..";
+import { computed, nextTick, ref, unref, useId, watchEffect, type MaybeRef, type Ref } from "vue";
 import { createBuilder, type VBindAttributes } from "../../utils/builder";
 import { useTypeAhead } from "../helpers/useTypeAhead";
 
@@ -94,7 +93,7 @@ export const createListbox = createBuilder(
 
     const getOptionId = (value: TValue) => {
       if (!descendantKeyIdMap.has(value)) {
-        descendantKeyIdMap.set(value, createId("listbox-option"));
+        descendantKeyIdMap.set(value, useId() ?? value.toString());
       }
       return descendantKeyIdMap.get(value)!;
     };
@@ -105,7 +104,7 @@ export const createListbox = createBuilder(
     const isFocused = ref(false);
 
     // scroll currently active option into view if needed
-    watchEffect(() => {
+    watchEffect(async () => {
       if (
         !isExpanded.value ||
         options.activeOption.value == undefined ||
@@ -113,7 +112,10 @@ export const createListbox = createBuilder(
       )
         return;
       const id = getOptionId(options.activeOption.value);
-      document.getElementById(id)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+
+      await nextTick(() => {
+        document.getElementById(id)?.scrollIntoView({ block: "end", inline: "nearest" });
+      });
     });
 
     const typeAhead = useTypeAhead((inputString) => options.onTypeAhead?.(inputString));

package/src/composables/menuButton/createMenuButton.ts

@@ -1,6 +1,5 @@
-import { computed, type Ref } from "vue";
+import { computed, useId, type Ref } from "vue";
 import { createBuilder, createElRef } from "../../utils/builder";
-import { createId } from "../../utils/id";
 import { debounce } from "../../utils/timer";
 import { useGlobalEventListener } from "../helpers/useGlobalListener";
 
@@ -14,10 +13,10 @@ type CreateMenuButtonOptions = {
  */
 export const createMenuButton = createBuilder(
   ({ isExpanded, onToggle }: CreateMenuButtonOptions) => {
-    const rootId = createId("menu-button-root");
-    const menuId = createId("menu-button-list");
+    const rootId = useId();
+    const menuId = useId();
     const menuRef = createElRef<HTMLElement>();
-    const buttonId = createId("menu-button-button");
+    const buttonId = useId();
 
     useGlobalEventListener({
       type: "keydown",
@@ -106,7 +105,10 @@ export const createMenuButton = createBuilder(
           onMouseout: () => updateDebouncedExpanded(false),
           onFocusout: (event) => {
             // if focus receiving element is not part of the menu button, then close
-            if (document.getElementById(rootId)?.contains(event.relatedTarget as HTMLElement)) {
+            if (
+              rootId &&
+              document.getElementById(rootId)?.contains(event.relatedTarget as HTMLElement)
+            ) {
               return;
             }
             isExpanded.value && onToggle();

package/src/composables/navigationMenu/createMenu.ts

@@ -1,5 +1,4 @@
-import { unref, type MaybeRef } from "vue";
-import { createId } from "../..";
+import { unref, useId, type MaybeRef } from "vue";
 import { createBuilder } from "../../utils/builder";
 import { MathUtils } from "../../utils/math";
 
@@ -15,10 +14,10 @@ type CreateNavigationMenu = {
  * Based on https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
  */
 export const createNavigationMenu = createBuilder(({ navigationName }: CreateNavigationMenu) => {
-  const navId = createId("nav");
+  const navId = useId();
 
   const getMenuButtons = () => {
-    const nav = document.getElementById(navId);
+    const nav = navId ? document.getElementById(navId) : undefined;
     if (!nav) return [];
     return [...nav.querySelectorAll<HTMLElement>("button[aria-expanded][aria-controls]")];
   };

package/src/composables/tooltip/createTooltip.ts

@@ -1,5 +1,4 @@
-import { computed, toRef, toValue, type MaybeRefOrGetter, type Ref } from "vue";
-import { createId } from "../..";
+import { computed, toRef, toValue, useId, type MaybeRefOrGetter, type Ref } from "vue";
 import { createBuilder } from "../../utils/builder";
 import { useDismissible } from "../helpers/useDismissible";
 
@@ -18,7 +17,7 @@ export type CreateTooltipOptions = {
  * To provide contextual information use the `createToggletip`.
  */
 export const createTooltip = createBuilder(({ debounce, isVisible }: CreateTooltipOptions) => {
-  const tooltipId = createId("tooltip");
+  const tooltipId = useId();
   const _isVisible = toRef(isVisible ?? false);
   let timeout: ReturnType<typeof setTimeout> | undefined;
 

package/src/index.ts

@@ -5,6 +5,5 @@ export * from "./composables/navigationMenu/createMenu";
 export * from "./composables/tooltip/createToggletip";
 export * from "./composables/tooltip/createTooltip";
 export * from "./utils/builder";
-export { createId } from "./utils/id";
 export { isPrintableCharacter, wasKeyPressed } from "./utils/keyboard";
 export { debounce } from "./utils/timer";

package/src/utils/builder.ts

@@ -50,7 +50,7 @@ export type HeadlessComposable<
  * @example
  * ```ts
  * export const createTooltip = createBuilder(({ initialVisible }: CreateTooltipOptions) => {
- *   const tooltipId = createId("tooltip");
+ *   const tooltipId = useId();
  *   const isVisible = ref(initialVisible);
  *
  *   const hoverEvents = {

package/src/utils/id.ts

@@ -1,14 +0,0 @@
-/**
- * Returns a unique global id string
- */
-// ⚠️ we make use of an IIFE to encapsulate the globalCounter so it can never accidentally be used somewhere else.
-const nextId = (() => {
-  let globalCounter = 1;
-  return () => globalCounter++;
-})();
-
-/**
- * Creates a globally unique string using a counter.
- * The given name is the prefix.
- */
-export const createId = (name: string) => `${name}-${nextId()}`;