@stonecrop/utilities 0.30.0 → 0.32.0

package/dist/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.58.11"
+      "packageVersion": "7.59.0"
     }
   ]
 }

package/dist/utilities.js

@@ -1,271 +1,404 @@
-import { ref as D, watch as P, onMounted as v, onBeforeUnmount as K } from "vue";
-import { unrefElement as y, defaultWindow as I, useEventListener as U, useFocusWithin as B } from "@vueuse/core";
-function F(e, { window: t = I, scrollTarget: n } = {}) {
-  const l = D(!1), s = () => {
-    if (!t) return;
-    const o = t.document, i = y(e);
-    if (!i)
-      l.value = !1;
-    else {
-      const r = i.getBoundingClientRect();
-      l.value = r.top <= (t.innerHeight || o.documentElement.clientHeight) && r.left <= (t.innerWidth || o.documentElement.clientWidth) && r.bottom >= 0 && r.right >= 0;
-    }
-  };
-  return P(
-    () => y(e),
-    () => s(),
-    { immediate: !0, flush: "post" }
-  ), t && U(n || t, "scroll", s, {
-    capture: !1,
-    passive: !0
-  }), l;
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { defaultWindow, unrefElement, useEventListener, useFocusWithin } from "@vueuse/core";
+//#region src/composables/visibility/index.ts
+/**
+* Tracks the visibility of an element within the viewport.
+*
+* Compatibility version to get Stonecrop keyboard navigation to work. This function is a copy of the
+* `useElementVisibility` function from VueUse v9.13.0, with the `IntersectionObserver` API removed.
+*
+* This version uses the `getBoundingClientRect` method to determine if an element is visible
+* in the viewport. This is less performant than the `IntersectionObserver` API, but it is
+* more compatible.
+*
+* Note: the newer versions of the VueUse dependencies imported here are sufficient for this composable.
+* (Last verified: v10.9.0 on May 2, 2024)
+*
+* @see https://v9-13-0.vueuse.org/core/useElementVisibility
+* @param element - Element to track visibility for
+* @param options - Configuration options (window, scrollTarget)
+*/
+function useElementVisibility(element, { window = defaultWindow, scrollTarget } = {}) {
+	const elementIsVisible = ref(false);
+	const testBounding = () => {
+		if (!window) return;
+		const document = window.document;
+		const el = unrefElement(element);
+		if (!el) elementIsVisible.value = false;
+		else {
+			const rect = el.getBoundingClientRect();
+			elementIsVisible.value = rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0;
+		}
+	};
+	watch(() => unrefElement(element), () => testBounding(), {
+		immediate: true,
+		flush: "post"
+	});
+	if (window) useEventListener(scrollTarget || window, "scroll", testBounding, {
+		capture: false,
+		passive: true
+	});
+	return elementIsVisible;
 }
-const f = (e) => {
-  let t = F(e).value;
-  return t = t && e.offsetHeight > 0, t;
-}, u = (e) => e.tabIndex >= 0, b = (e) => {
-  if (e.target instanceof HTMLElement)
-    return H(e.target);
-}, H = (e) => {
-  let t;
-  if (e instanceof HTMLTableCellElement) {
-    const n = e.parentElement?.previousElementSibling;
-    if (n instanceof HTMLTableRowElement) {
-      const s = Array.from(n.children)[e.cellIndex];
-      s instanceof HTMLElement && (t = s);
-    }
-  } else if (e instanceof HTMLTableRowElement) {
-    const n = e.previousElementSibling;
-    n instanceof HTMLTableRowElement && (t = n);
-  }
-  return t && (!u(t) || !f(t)) ? H(t) : t;
-}, W = (e) => {
-  if (!(e.target instanceof HTMLElement)) return;
-  const t = e.target;
-  let n;
-  if (t instanceof HTMLTableCellElement) {
-    const l = t.parentElement?.parentElement;
-    if (l) {
-      const o = l.firstElementChild?.children[t.cellIndex];
-      o instanceof HTMLElement && (n = o);
-    }
-  } else if (t instanceof HTMLTableRowElement) {
-    const l = t.parentElement;
-    if (l) {
-      const s = l.firstElementChild;
-      s instanceof HTMLTableRowElement && (n = s);
-    }
-  }
-  return n && (!u(n) || !f(n)) ? L(n) : n;
-}, R = (e) => {
-  if (e.target instanceof HTMLElement)
-    return L(e.target);
-}, L = (e) => {
-  let t;
-  if (e instanceof HTMLTableCellElement) {
-    const n = e.parentElement?.nextElementSibling;
-    if (n) {
-      const s = Array.from(n.children)[e.cellIndex];
-      s instanceof HTMLElement && (t = s);
-    }
-  } else if (e instanceof HTMLTableRowElement) {
-    const n = e.nextElementSibling;
-    n instanceof HTMLTableRowElement && (t = n);
-  }
-  return t && (!u(t) || !f(t)) ? L(t) : t;
-}, q = (e) => {
-  if (!(e.target instanceof HTMLElement)) return;
-  const t = e.target;
-  let n;
-  if (t instanceof HTMLTableCellElement) {
-    const l = t.parentElement?.parentElement;
-    if (l) {
-      const o = l.lastElementChild?.children[t.cellIndex];
-      o instanceof HTMLElement && (n = o);
-    }
-  } else if (t instanceof HTMLTableRowElement) {
-    const l = t.parentElement;
-    if (l) {
-      const s = l.lastElementChild;
-      s instanceof HTMLTableRowElement && (n = s);
-    }
-  }
-  return n && (!u(n) || !f(n)) ? H(n) : n;
-}, x = (e) => {
-  if (e.target instanceof HTMLElement)
-    return h(e.target);
-}, h = (e) => {
-  let t;
-  const n = e.previousElementSibling;
-  if (n instanceof HTMLElement)
-    t = n;
-  else {
-    const s = e.parentElement?.previousElementSibling?.lastElementChild;
-    s instanceof HTMLElement && (t = s);
-  }
-  return t && (!u(t) || !f(t)) ? h(t) : t;
-}, S = (e) => {
-  if (e.target instanceof HTMLElement)
-    return M(e.target);
-}, M = (e) => {
-  let t;
-  const n = e.nextElementSibling;
-  if (n instanceof HTMLElement)
-    t = n;
-  else {
-    const s = e.parentElement?.nextElementSibling?.firstElementChild;
-    s instanceof HTMLElement && (t = s);
-  }
-  return t && (!u(t) || !f(t)) ? M(t) : t;
-}, k = (e) => {
-  if (!(e.target instanceof HTMLElement)) return;
-  const n = e.target.parentElement?.firstElementChild, l = n instanceof HTMLElement ? n : null;
-  return l && (!u(l) || !f(l)) ? M(l) : l;
-}, A = (e) => {
-  if (!(e.target instanceof HTMLElement)) return;
-  const n = e.target.parentElement?.lastElementChild, l = n instanceof HTMLElement ? n : null;
-  return l && (!u(l) || !f(l)) ? h(l) : l;
-}, d = ["alt", "control", "shift", "meta"], N = {
-  ArrowUp: "up",
-  ArrowDown: "down",
-  ArrowLeft: "left",
-  ArrowRight: "right"
-}, V = {
-  "keydown.up": (e) => {
-    const t = b(e);
-    t && (e.preventDefault(), e.stopPropagation(), t.focus());
-  },
-  "keydown.down": (e) => {
-    const t = R(e);
-    t && (e.preventDefault(), e.stopPropagation(), t.focus());
-  },
-  "keydown.left": (e) => {
-    const t = x(e);
-    e.preventDefault(), e.stopPropagation(), t && t.focus();
-  },
-  "keydown.right": (e) => {
-    const t = S(e);
-    e.preventDefault(), e.stopPropagation(), t && t.focus();
-  },
-  "keydown.control.up": (e) => {
-    const t = W(e);
-    t && (e.preventDefault(), e.stopPropagation(), t.focus());
-  },
-  "keydown.control.down": (e) => {
-    const t = q(e);
-    t && (e.preventDefault(), e.stopPropagation(), t.focus());
-  },
-  "keydown.control.left": (e) => {
-    const t = k(e);
-    t && (e.preventDefault(), e.stopPropagation(), t.focus());
-  },
-  "keydown.control.right": (e) => {
-    const t = A(e);
-    t && (e.preventDefault(), e.stopPropagation(), t.focus());
-  },
-  "keydown.end": (e) => {
-    const t = A(e);
-    t && (e.preventDefault(), e.stopPropagation(), t.focus());
-  },
-  "keydown.enter": (e) => {
-    if (!(e.target instanceof HTMLElement)) return;
-    if (e.target instanceof HTMLTableCellElement) {
-      e.preventDefault(), e.stopPropagation();
-      const n = R(e);
-      n && n.focus();
-    }
-  },
-  "keydown.shift.enter": (e) => {
-    if (!(e.target instanceof HTMLElement)) return;
-    if (e.target instanceof HTMLTableCellElement) {
-      e.preventDefault(), e.stopPropagation();
-      const n = b(e);
-      n && n.focus();
-    }
-  },
-  "keydown.home": (e) => {
-    const t = k(e);
-    t && (e.preventDefault(), e.stopPropagation(), t.focus());
-  },
-  "keydown.tab": (e) => {
-    const t = S(e);
-    t && (e.preventDefault(), e.stopPropagation(), t.focus());
-  },
-  "keydown.shift.tab": (e) => {
-    const t = x(e);
-    t && (e.preventDefault(), e.stopPropagation(), t.focus());
-  }
+//#endregion
+//#region src/composables/keyboard.ts
+var isVisible = (element) => {
+	let visible = useElementVisibility(element).value;
+	visible = visible && element.offsetHeight > 0;
+	return visible;
 };
-function C(e) {
-  let t = null;
-  return e.parent && (typeof e.parent == "string" ? t = document.querySelector(e.parent) : e.parent instanceof HTMLElement ? t = e.parent : t = e.parent.value), t;
-}
-function _(e) {
-  const t = (o) => {
-    const i = C(o);
-    let r = [];
-    if (typeof o.selectors == "string")
-      r = Array.from(i ? i.querySelectorAll(o.selectors) : document.querySelectorAll(o.selectors));
-    else if (Array.isArray(o.selectors))
-      for (const a of o.selectors)
-        a instanceof HTMLElement ? r.push(a) : r.push(a.$el);
-    else if (o.selectors instanceof HTMLElement)
-      r.push(o.selectors);
-    else if (o.selectors?.value)
-      if (Array.isArray(o.selectors.value))
-        for (const a of o.selectors.value)
-          a instanceof HTMLElement ? r.push(a) : r.push(a.$el);
-      else
-        r.push(o.selectors.value);
-    return r;
-  }, n = (o) => {
-    const i = C(o);
-    let r = [];
-    return o.selectors ? r = t(o) : i && (r = Array.from(i.children).filter((c) => c instanceof HTMLElement).filter((c) => u(c) && f(c))), r;
-  }, l = (o) => (i) => {
-    const r = N[i.key] || i.key.toLowerCase();
-    if (d.includes(r)) return;
-    const a = o.handlers || V;
-    for (const c of Object.keys(a)) {
-      const [m, ...E] = c.split(".");
-      if (m === "keydown" && E.includes(r)) {
-        const g = a[c], $ = E.filter((p) => d.includes(p)), w = d.some((p) => {
-          const T = p.charAt(0).toUpperCase() + p.slice(1);
-          return i.getModifierState(T);
-        });
-        if ($.length > 0) {
-          if (w) {
-            for (const p of d)
-              if (E.includes(p)) {
-                const T = p.charAt(0).toUpperCase() + p.slice(1);
-                i.getModifierState(T) && g(i);
-              }
-          }
-        } else
-          w || g(i);
-      }
-    }
-  }, s = [];
-  v(() => {
-    for (const o of e) {
-      const i = C(o), r = n(o), a = l(o), c = i ? [i] : r;
-      for (const m of c) {
-        const { focused: E } = B(D(m)), g = P(E, ($) => {
-          $ ? m.addEventListener("keydown", a) : m.removeEventListener("keydown", a);
-        });
-        s.push(g);
-      }
-    }
-  }), K(() => {
-    for (const o of s)
-      o();
-  });
+var isFocusable = (element) => {
+	return element.tabIndex >= 0;
+};
+var getUpCell = (event) => {
+	if (!(event.target instanceof HTMLElement)) return void 0;
+	return getUpCellEl(event.target);
+};
+var getUpCellEl = (element) => {
+	let $upCell;
+	if (element instanceof HTMLTableCellElement) {
+		const $prevSibling = element.parentElement?.previousElementSibling;
+		if ($prevSibling instanceof HTMLTableRowElement) {
+			const $cellEl = Array.from($prevSibling.children)[element.cellIndex];
+			if ($cellEl instanceof HTMLElement) $upCell = $cellEl;
+		}
+	} else if (element instanceof HTMLTableRowElement) {
+		const $prevSibling = element.previousElementSibling;
+		if ($prevSibling instanceof HTMLTableRowElement) $upCell = $prevSibling;
+	}
+	if ($upCell && (!isFocusable($upCell) || !isVisible($upCell))) return getUpCellEl($upCell);
+	return $upCell;
+};
+var getTopCell = (event) => {
+	if (!(event.target instanceof HTMLElement)) return void 0;
+	const $target = event.target;
+	let $topCell;
+	if ($target instanceof HTMLTableCellElement) {
+		const $table = $target.parentElement?.parentElement;
+		if ($table) {
+			const $navEl = $table.firstElementChild?.children[$target.cellIndex];
+			if ($navEl instanceof HTMLElement) $topCell = $navEl;
+		}
+	} else if ($target instanceof HTMLTableRowElement) {
+		const $parent = $target.parentElement;
+		if ($parent) {
+			const $firstEl = $parent.firstElementChild;
+			if ($firstEl instanceof HTMLTableRowElement) $topCell = $firstEl;
+		}
+	}
+	if ($topCell && (!isFocusable($topCell) || !isVisible($topCell))) return getDownCellEl($topCell);
+	return $topCell;
+};
+var getDownCell = (event) => {
+	if (!(event.target instanceof HTMLElement)) return void 0;
+	return getDownCellEl(event.target);
+};
+var getDownCellEl = (element) => {
+	let $downCell;
+	if (element instanceof HTMLTableCellElement) {
+		const $nextSibling = element.parentElement?.nextElementSibling;
+		if ($nextSibling) {
+			const $cellEl = Array.from($nextSibling.children)[element.cellIndex];
+			if ($cellEl instanceof HTMLElement) $downCell = $cellEl;
+		}
+	} else if (element instanceof HTMLTableRowElement) {
+		const $nextSibling = element.nextElementSibling;
+		if ($nextSibling instanceof HTMLTableRowElement) $downCell = $nextSibling;
+	}
+	if ($downCell && (!isFocusable($downCell) || !isVisible($downCell))) return getDownCellEl($downCell);
+	return $downCell;
+};
+var getBottomCell = (event) => {
+	if (!(event.target instanceof HTMLElement)) return void 0;
+	const $target = event.target;
+	let $bottomCell;
+	if ($target instanceof HTMLTableCellElement) {
+		const $table = $target.parentElement?.parentElement;
+		if ($table) {
+			const $navEl = $table.lastElementChild?.children[$target.cellIndex];
+			if ($navEl instanceof HTMLElement) $bottomCell = $navEl;
+		}
+	} else if ($target instanceof HTMLTableRowElement) {
+		const $parent = $target.parentElement;
+		if ($parent) {
+			const $lastEl = $parent.lastElementChild;
+			if ($lastEl instanceof HTMLTableRowElement) $bottomCell = $lastEl;
+		}
+	}
+	if ($bottomCell && (!isFocusable($bottomCell) || !isVisible($bottomCell))) return getUpCellEl($bottomCell);
+	return $bottomCell;
+};
+var getPrevCell = (event) => {
+	if (!(event.target instanceof HTMLElement)) return void 0;
+	return getPrevCellEl(event.target);
+};
+var getPrevCellEl = (element) => {
+	let $prevCell;
+	const $prevSibling = element.previousElementSibling;
+	if ($prevSibling instanceof HTMLElement) $prevCell = $prevSibling;
+	else {
+		const $lastEl = (element.parentElement?.previousElementSibling)?.lastElementChild;
+		if ($lastEl instanceof HTMLElement) $prevCell = $lastEl;
+	}
+	if ($prevCell && (!isFocusable($prevCell) || !isVisible($prevCell))) return getPrevCellEl($prevCell);
+	return $prevCell;
+};
+var getNextCell = (event) => {
+	if (!(event.target instanceof HTMLElement)) return void 0;
+	return getNextCellEl(event.target);
+};
+var getNextCellEl = (element) => {
+	let $nextCell;
+	const $nextSibling = element.nextElementSibling;
+	if ($nextSibling instanceof HTMLElement) $nextCell = $nextSibling;
+	else {
+		const $firstEl = (element.parentElement?.nextElementSibling)?.firstElementChild;
+		if ($firstEl instanceof HTMLElement) $nextCell = $firstEl;
+	}
+	if ($nextCell && (!isFocusable($nextCell) || !isVisible($nextCell))) return getNextCellEl($nextCell);
+	return $nextCell;
+};
+var getFirstCell = (event) => {
+	if (!(event.target instanceof HTMLElement)) return void 0;
+	const $firstEl = event.target.parentElement?.firstElementChild;
+	const $firstCell = $firstEl instanceof HTMLElement ? $firstEl : null;
+	if ($firstCell && (!isFocusable($firstCell) || !isVisible($firstCell))) return getNextCellEl($firstCell);
+	return $firstCell;
+};
+var getLastCell = (event) => {
+	if (!(event.target instanceof HTMLElement)) return void 0;
+	const $lastEl = event.target.parentElement?.lastElementChild;
+	const $lastCell = $lastEl instanceof HTMLElement ? $lastEl : null;
+	if ($lastCell && (!isFocusable($lastCell) || !isVisible($lastCell))) return getPrevCellEl($lastCell);
+	return $lastCell;
+};
+var modifierKeys = [
+	"alt",
+	"control",
+	"shift",
+	"meta"
+];
+var eventKeyMap = {
+	ArrowUp: "up",
+	ArrowDown: "down",
+	ArrowLeft: "left",
+	ArrowRight: "right"
+};
+/**
+* Default keypress handlers for keyboard navigation
+* @public
+*/
+var defaultKeypressHandlers = {
+	"keydown.up": (event) => {
+		const $upCell = getUpCell(event);
+		if ($upCell) {
+			event.preventDefault();
+			event.stopPropagation();
+			$upCell.focus();
+		}
+	},
+	"keydown.down": (event) => {
+		const $downCell = getDownCell(event);
+		if ($downCell) {
+			event.preventDefault();
+			event.stopPropagation();
+			$downCell.focus();
+		}
+	},
+	"keydown.left": (event) => {
+		const $prevCell = getPrevCell(event);
+		event.preventDefault();
+		event.stopPropagation();
+		if ($prevCell) $prevCell.focus();
+	},
+	"keydown.right": (event) => {
+		const $nextCell = getNextCell(event);
+		event.preventDefault();
+		event.stopPropagation();
+		if ($nextCell) $nextCell.focus();
+	},
+	"keydown.control.up": (event) => {
+		const $topCell = getTopCell(event);
+		if ($topCell) {
+			event.preventDefault();
+			event.stopPropagation();
+			$topCell.focus();
+		}
+	},
+	"keydown.control.down": (event) => {
+		const $bottomCell = getBottomCell(event);
+		if ($bottomCell) {
+			event.preventDefault();
+			event.stopPropagation();
+			$bottomCell.focus();
+		}
+	},
+	"keydown.control.left": (event) => {
+		const $firstCell = getFirstCell(event);
+		if ($firstCell) {
+			event.preventDefault();
+			event.stopPropagation();
+			$firstCell.focus();
+		}
+	},
+	"keydown.control.right": (event) => {
+		const $lastCell = getLastCell(event);
+		if ($lastCell) {
+			event.preventDefault();
+			event.stopPropagation();
+			$lastCell.focus();
+		}
+	},
+	"keydown.end": (event) => {
+		const $lastCell = getLastCell(event);
+		if ($lastCell) {
+			event.preventDefault();
+			event.stopPropagation();
+			$lastCell.focus();
+		}
+	},
+	"keydown.enter": (event) => {
+		if (!(event.target instanceof HTMLElement)) return;
+		if (event.target instanceof HTMLTableCellElement) {
+			event.preventDefault();
+			event.stopPropagation();
+			const $downCell = getDownCell(event);
+			if ($downCell) $downCell.focus();
+		}
+	},
+	"keydown.shift.enter": (event) => {
+		if (!(event.target instanceof HTMLElement)) return;
+		if (event.target instanceof HTMLTableCellElement) {
+			event.preventDefault();
+			event.stopPropagation();
+			const $upCell = getUpCell(event);
+			if ($upCell) $upCell.focus();
+		}
+	},
+	"keydown.home": (event) => {
+		const $firstCell = getFirstCell(event);
+		if ($firstCell) {
+			event.preventDefault();
+			event.stopPropagation();
+			$firstCell.focus();
+		}
+	},
+	"keydown.tab": (event) => {
+		const $nextCell = getNextCell(event);
+		if ($nextCell) {
+			event.preventDefault();
+			event.stopPropagation();
+			$nextCell.focus();
+		}
+	},
+	"keydown.shift.tab": (event) => {
+		const $prevCell = getPrevCell(event);
+		if ($prevCell) {
+			event.preventDefault();
+			event.stopPropagation();
+			$prevCell.focus();
+		}
+	}
+};
+/**
+* Gets the parent element from a keyboard navigation option.
+* @internal
+*/
+function getParentElement(option) {
+	let $parent = null;
+	if (option.parent) {
+		if (typeof option.parent === "string") $parent = document.querySelector(option.parent);
+		else if (option.parent instanceof HTMLElement) $parent = option.parent;
+		else $parent = option.parent.value;
+	}
+	return $parent;
 }
-function z(e) {
+/**
+* Keyboard navigation composable
+* @param options - Keyboard navigation options
+* @public
+*/
+function useKeyboardNav(options) {
+	const getSelectorsFromOption = (option) => {
+		const $parent = getParentElement(option);
+		let selectors = [];
+		if (typeof option.selectors === "string") selectors = $parent ? Array.from($parent.querySelectorAll(option.selectors)) : Array.from(document.querySelectorAll(option.selectors));
+		else if (Array.isArray(option.selectors)) for (const element of option.selectors) if (element instanceof HTMLElement) selectors.push(element);
+		else selectors.push(element.$el);
+		else if (option.selectors instanceof HTMLElement) selectors.push(option.selectors);
+		else if (option.selectors?.value) {
+			if (Array.isArray(option.selectors.value)) for (const element of option.selectors.value) if (element instanceof HTMLElement) selectors.push(element);
+			else selectors.push(element.$el);
+			else selectors.push(option.selectors.value);
+		}
+		return selectors;
+	};
+	const getSelectors = (option) => {
+		const $parent = getParentElement(option);
+		let selectors = [];
+		if (option.selectors) selectors = getSelectorsFromOption(option);
+		else if ($parent) selectors = Array.from($parent.children).filter((el) => el instanceof HTMLElement).filter((selector) => {
+			return isFocusable(selector) && isVisible(selector);
+		});
+		return selectors;
+	};
+	const getEventListener = (option) => {
+		return (event) => {
+			const activeKey = eventKeyMap[event.key] || event.key.toLowerCase();
+			if (modifierKeys.includes(activeKey)) return;
+			const handlers = option.handlers || defaultKeypressHandlers;
+			for (const key of Object.keys(handlers)) {
+				const [eventType, ...keys] = key.split(".");
+				if (eventType !== "keydown") continue;
+				if (keys.includes(activeKey)) {
+					const listener = handlers[key];
+					const hasModifier = keys.filter((k) => modifierKeys.includes(k));
+					const isModifierActive = modifierKeys.some((mk) => {
+						const modifierKey = mk.charAt(0).toUpperCase() + mk.slice(1);
+						return event.getModifierState(modifierKey);
+					});
+					if (hasModifier.length > 0) {
+						if (isModifierActive) {
+							for (const modifier of modifierKeys) if (keys.includes(modifier)) {
+								const modifierKey = modifier.charAt(0).toUpperCase() + modifier.slice(1);
+								if (event.getModifierState(modifierKey)) listener(event);
+							}
+						}
+					} else if (!isModifierActive) listener(event);
+				}
+			}
+		};
+	};
+	const watchStopHandlers = [];
+	onMounted(() => {
+		for (const option of options) {
+			const $parent = getParentElement(option);
+			const selectors = getSelectors(option);
+			const listener = getEventListener(option);
+			const listenerElements = $parent ? [$parent] : selectors;
+			for (const element of listenerElements) {
+				const { focused } = useFocusWithin(ref(element));
+				const stopHandler = watch(focused, (value) => {
+					if (value) element.addEventListener("keydown", listener);
+					else element.removeEventListener("keydown", listener);
+				});
+				watchStopHandlers.push(stopHandler);
+			}
+		}
+	});
+	onBeforeUnmount(() => {
+		for (const stopHandler of watchStopHandlers) stopHandler();
+	});
 }
-export {
-  V as defaultKeypressHandlers,
-  z as install,
-  _ as useKeyboardNav
-};
-//# sourceMappingURL=utilities.js.map
+//#endregion
+//#region src/index.ts
+/**
+* Install all utility components
+* @param _app - Vue app instance
+* @public
+*/
+function install(_app) {}
+//#endregion
+export { defaultKeypressHandlers, install, useKeyboardNav };
+
+//# sourceMappingURL=utilities.js.map