@tanstack/vue-hotkeys 0.19.0 → 0.20.0

package/dist/HotkeysProvider.d.ts

@@ -11,7 +11,8 @@ import { HotkeysProviderScopeProps } from "@tanstack/hotkeys/adapter";
  *
  * Nest providers to create hotkey scopes. A nested provider inherits app
  * hotkeys and merges default options. With `scope`, its hotkeys fire only
- * while it is mounted and enabled; with `exclusive`, only its hotkeys fire.
+ * while it is mounted, enabled, and not hidden by `<KeepAlive>`; with
+ * `exclusive`, only its hotkeys fire.
  *
  * @example
  * ```vue

package/dist/HotkeysProvider.js

@@ -10,7 +10,8 @@ import { defineComponent } from "vue";
 *
 * Nest providers to create hotkey scopes. A nested provider inherits app
 * hotkeys and merges default options. With `scope`, its hotkeys fire only
-* while it is mounted and enabled; with `exclusive`, only its hotkeys fire.
+* while it is mounted, enabled, and not hidden by `<KeepAlive>`; with
+* `exclusive`, only its hotkeys fire.
 *
 * @example
 * ```vue

package/dist/HotkeysProviderContext.d.ts

@@ -51,8 +51,8 @@ export interface ProvideHotkeysContextOptions {
  *
  * Nest contexts to create hotkey scopes. A nested context inherits app
  * hotkeys and merges default options. With `scope`, its hotkeys fire only
- * while the component is mounted and enabled; with `exclusive`, only its
- * hotkeys fire.
+ * while the component is mounted, enabled, and not hidden by `<KeepAlive>`;
+ * with `exclusive`, only its hotkeys fire.
  *
  * @example
  * ```ts

package/dist/HotkeysProviderContext.js

@@ -1,3 +1,4 @@
+import { useLive } from "./_useLive.js";
 import { publishAppHotkeysStore } from "@tanstack/hotkeys";
 import { computed, hasInjectionContext, inject, onMounted, onScopeDispose, provide, toValue, watch } from "vue";
 import { activateHotkeysProviderScope, createAppHotkeysStore, getHotkeysProviderScopeKey, mergeHotkeysProviderDefaults } from "@tanstack/hotkeys/adapter";
@@ -12,8 +13,8 @@ const DEFAULT_OPTIONS = {};
 *
 * Nest contexts to create hotkey scopes. A nested context inherits app
 * hotkeys and merges default options. With `scope`, its hotkeys fire only
-* while the component is mounted and enabled; with `exclusive`, only its
-* hotkeys fire.
+* while the component is mounted, enabled, and not hidden by `<KeepAlive>`;
+* with `exclusive`, only its hotkeys fire.
 *
 * @example
 * ```ts
@@ -39,7 +40,8 @@ function provideHotkeysContext(options = {}) {
 		watch(() => toValue(options.customHotkeys), (customHotkeys) => store.setOptions({ customHotkeys }), { deep: true });
 		if (typeof document !== "undefined") onScopeDispose(publishAppHotkeysStore(store));
 	}
-	const active = computed(() => (parent?.enabled ?? true) && toValue(options.enabled) !== false);
+	const live = useLive();
+	const active = computed(() => live.value && (parent?.enabled ?? true) && toValue(options.enabled) !== false);
 	const defaultOptions = computed(() => mergeHotkeysProviderDefaults(parent?.defaultOptions, toValue(options.defaultOptions), toValue(options.scope)));
 	const scopeKey = computed(() => getHotkeysProviderScopeKey({
 		scope: toValue(options.scope),

package/dist/_useLive.js

@@ -0,0 +1,19 @@
+import { getCurrentInstance, onActivated, onDeactivated, ref } from "vue";
+
+//#region src/_useLive.ts
+/**
+* Whether the component is shown. A component in a page cached by
+* `<KeepAlive>` is not live while the page is hidden. Always true outside a
+* component, where the hooks would warn.
+*/
+function useLive() {
+	const live = ref(true);
+	if (getCurrentInstance()) {
+		onActivated(() => live.value = true);
+		onDeactivated(() => live.value = false);
+	}
+	return live;
+}
+
+//#endregion
+export { useLive };

package/dist/useHotkeyRecorder.js

@@ -1,7 +1,8 @@
+import { useLive } from "./_useLive.js";
 import { useStoreSelector } from "./useStoreSelector.js";
 import { useDefaultHotkeysOptionsSource } from "./defaultOptions.js";
 import { HotkeyRecorder } from "@tanstack/hotkeys";
-import { onScopeDispose, toValue, watch } from "vue";
+import { getCurrentInstance, onScopeDispose, toValue, watch } from "vue";
 import { withDefaults } from "@tanstack/hotkeys/adapter";
 
 //#region src/useHotkeyRecorder.ts
@@ -13,6 +14,12 @@ function useHotkeyRecorder(options) {
 	const steps = useStoreSelector(recorder.store, (state) => state.steps);
 	const recordedHotkey = useStoreSelector(recorder.store, (state) => state.recordedHotkey);
 	const stopWatcher = watch(resolve, (resolved) => recorder.setOptions(resolved));
+	const instance = getCurrentInstance();
+	const hidden = () => {
+		for (let i = instance; i; i = i.parent) if (i.isDeactivated) return true;
+		return false;
+	};
+	watch(useLive(), (live) => live || recorder.store.state.isRecording && recorder.stop());
 	onScopeDispose(() => {
 		stopWatcher();
 		recorder.destroy();
@@ -21,7 +28,9 @@ function useHotkeyRecorder(options) {
 		isRecording,
 		steps,
 		recordedHotkey,
-		startRecording: () => recorder.start(),
+		startRecording: () => {
+			if (!hidden()) recorder.start();
+		},
 		stopRecording: () => recorder.stop(),
 		cancelRecording: () => recorder.cancel(),
 		commitRecording: () => recorder.commit()

package/dist/useHotkeys.js

@@ -1,3 +1,4 @@
+import { useLive } from "./_useLive.js";
 import { useAppHotkeysStoreSource, useDefaultHotkeysOptionsSource } from "./defaultOptions.js";
 import { onScopeDispose, toValue, watch } from "vue";
 import { createHotkeyBindings, prepareHotkeyDefinitions } from "@tanstack/hotkeys/adapter";
@@ -34,7 +35,9 @@ function useHotkeys(hotkeys, commonOptions = {}) {
 	const defaultOptions = useDefaultHotkeysOptionsSource();
 	const appHotkeys = useAppHotkeysStoreSource();
 	const bindings = createHotkeyBindings();
+	const live = useLive();
 	const stopWatcher = watch(() => {
+		if (!live.value) return [];
 		appHotkeys.state.value;
 		const definitions = toValue(hotkeys).map((definition) => ({
 			hotkey: toValue(definition.hotkey),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-hotkeys",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "Vue adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "skills"
   ],
   "dependencies": {
-    "@tanstack/hotkeys": "0.21.0"
+    "@tanstack/hotkeys": "0.22.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.9",