@tanstack/octane-hotkeys 0.7.1 → 0.9.0

package/dist/HotkeysProvider.d.ts

@@ -29,8 +29,10 @@ export interface HotkeysProviderProps extends HotkeysProviderScopeProps {
    */
   appHotkeys?: AppHotkeys;
   /**
-   * Starting custom hotkeys, such as saved data. Read once; the provider owns
-   * the state afterwards. Invalid entries are ignored with a warning.
+   * The user's saved custom hotkeys. When the value changes, such as after
+   * saved data loads or the user signs in, it replaces the current custom
+   * hotkeys. `undefined` leaves them unchanged; `null` clears them. Invalid
+   * entries are ignored with a warning.
    */
   customHotkeys?: CustomHotkeys | null;
   /** Called with the custom hotkeys after every change, ready to save. */

package/dist/HotkeysProvider.js

@@ -1,7 +1,7 @@
 import { subSlot } from "./internal.js";
-import { AppHotkeysStore, publishAppHotkeysStore } from "@tanstack/hotkeys";
+import { publishAppHotkeysStore } from "@tanstack/hotkeys";
 import { createContext, createElement, useContext, useLayoutEffect, useRef } from "octane";
-import { activateHotkeysProviderScope, getHotkeysProviderScopeKey, mergeHotkeysProviderDefaults } from "@tanstack/hotkeys/adapter";
+import { activateHotkeysProviderScope, createAppHotkeysStore, getHotkeysProviderScopeKey, mergeHotkeysProviderDefaults } from "@tanstack/hotkeys/adapter";
 
 //#region src/HotkeysProvider.ts
 const HotkeysContext = createContext(null);
@@ -25,7 +25,7 @@ function HotkeysProvider({ children, defaultOptions, appHotkeys, customHotkeys,
 	const callbackRef = useRef(onCustomHotkeysChange, subSlot(void 0, "provider-callback"));
 	callbackRef.current = onCustomHotkeysChange;
 	const storeRef = useRef(void 0, subSlot(void 0, "provider-store"));
-	storeRef.current ??= appHotkeys ? new AppHotkeysStore(appHotkeys, {
+	storeRef.current ??= appHotkeys ? createAppHotkeysStore(appHotkeys, {
 		customHotkeys,
 		onCustomHotkeysChange: (custom) => callbackRef.current?.(custom)
 	}) : null;
@@ -33,6 +33,9 @@ function HotkeysProvider({ children, defaultOptions, appHotkeys, customHotkeys,
 	useLayoutEffect(() => {
 		if (appHotkeys) store?.setAppHotkeys(appHotkeys);
 	}, [store, appHotkeys], subSlot(void 0, "provider-declarations"));
+	useLayoutEffect(() => {
+		store?.setOptions({ customHotkeys });
+	}, [store, customHotkeys], subSlot(void 0, "provider-custom-hotkeys"));
 	useLayoutEffect(() => store ? publishAppHotkeysStore(store) : void 0, [store], subSlot(void 0, "provider-publish"));
 	const active = (parent?.enabled ?? true) && enabled;
 	const scopeKey = getHotkeysProviderScopeKey({

package/dist/internal.js

@@ -1,4 +1,5 @@
-import { Store, useSelector } from "@tanstack/octane-store";
+import { useCallback, useRef, useSyncExternalStore } from "octane";
+import { createStore } from "@tanstack/hotkeys/adapter";
 
 //#region src/internal.ts
 const subSlotCache = /* @__PURE__ */ new Map();
@@ -29,14 +30,34 @@ function splitSlot(args) {
 	const slot = typeof tail === "symbol" ? tail : void 0;
 	return [slot === void 0 ? args : args.slice(0, -1), slot];
 }
-const select = useSelector;
-const NO_APP_HOTKEYS = new Store(null);
+/**
+* Subscribes to a store and returns the selected value, re-rendering when it
+* changes (by `Object.is`). The selector runs again only when the store's
+* state or the selector itself changes.
+*/
+function select(store, selector, slot) {
+	const subscribe = useCallback((onChange) => store.subscribe(onChange).unsubscribe, [store], subSlot(slot, "select:subscribe"));
+	const memo = useRef(null, subSlot(slot, "select:memo"));
+	const getSelection = () => {
+		const state = store.get();
+		const last = memo.current;
+		if (last && last.selector === selector && Object.is(last.state, state)) return last.selected;
+		memo.current = {
+			state,
+			selector,
+			selected: selector(state)
+		};
+		return memo.current.selected;
+	};
+	return useSyncExternalStore(subscribe, getSelection, getSelection, subSlot(slot, "select:store"));
+}
+const NO_APP_HOTKEYS = createStore(null);
 /**
 * Re-renders when the provider's app hotkeys or custom hotkeys change and
 * returns the provider's store.
 */
 function useAppHotkeysStore(store, slot) {
-	select(store?.store ?? NO_APP_HOTKEYS, (value) => value, void 0, slot);
+	select(store?.store ?? NO_APP_HOTKEYS, (value) => value, slot);
 	return store;
 }
 

package/dist/useHeldKeyCodes.js

@@ -3,7 +3,7 @@ import { getKeyStateTracker } from "@tanstack/hotkeys";
 
 //#region src/useHeldKeyCodes.ts
 function useHeldKeyCodes(slot) {
-	return select(getKeyStateTracker().store, (state) => state.heldCodes, void 0, subSlot(slot, "held-codes"));
+	return select(getKeyStateTracker().store, (state) => state.heldCodes, subSlot(slot, "held-codes"));
 }
 
 //#endregion

package/dist/useHeldKeys.js

@@ -3,7 +3,7 @@ import { getKeyStateTracker } from "@tanstack/hotkeys";
 
 //#region src/useHeldKeys.ts
 function useHeldKeys(slot) {
-	return select(getKeyStateTracker().store, (state) => state.heldKeys, void 0, subSlot(slot, "held-keys"));
+	return select(getKeyStateTracker().store, (state) => state.heldKeys, subSlot(slot, "held-keys"));
 }
 
 //#endregion

package/dist/useHotkey.d.ts

@@ -18,8 +18,9 @@ export type UseAppHotkeyOptions<T extends AppHotkey = AppHotkey> = AdapterAppHot
 /**
  * Registers one hotkey: a chord such as `'Mod+S'`, a sequence such as
  * `['G', 'G']`, or an app hotkey from `defineAppHotkeys`. The callback and
- * options are refreshed after every commit.
+ * options are refreshed after every commit. `undefined`, `null`, or `''`
+ * registers nothing, for an optional shortcut.
  */
-export declare function useHotkey<T extends AppHotkey>(hotkey: T, callback: HotkeyCallback, options?: UseAppHotkeyOptions<T>): void;
-export declare function useHotkey<const T extends RegisterableHotkey>(hotkey: T, callback: HotkeyCallback<HotkeyCallbackContextFor<T>>, options?: UseHotkeyOptionsFor<T>): void;
+export declare function useHotkey<T extends AppHotkey>(hotkey: T | null | undefined, callback: HotkeyCallback, options?: UseAppHotkeyOptions<T>): void;
+export declare function useHotkey<const T extends RegisterableHotkey>(hotkey: T | null | undefined, callback: HotkeyCallback<HotkeyCallbackContextFor<T>>, options?: UseHotkeyOptionsFor<T>): void;
 //#endregion

package/dist/useHotkeyHint.d.ts

@@ -5,7 +5,8 @@ import { AppHotkey, HeldModifierOptions, RegisterableHotkey } from "@tanstack/ho
  * while the hotkey can fire: some registration of it is enabled and in an
  * active scope. A sequence reveals its hint from its first step, and an app
  * hotkey matches its registrations by id and uses its effective hotkey (false
- * while unbound). A hotkey on an element counts only while focus is inside it.
+ * while unbound). No hotkey (`undefined`, `null`, or `''`) returns false. A
+ * hotkey on an element counts only while focus is inside it.
  */
-export declare function useHotkeyHint(hotkey: RegisterableHotkey | AppHotkey, options?: HeldModifierOptions): boolean;
+export declare function useHotkeyHint(hotkey: RegisterableHotkey | AppHotkey | null | undefined, options?: HeldModifierOptions): boolean;
 //#endregion

package/dist/useHotkeyHint.js

@@ -8,8 +8,8 @@ function useHotkeyHint(hotkey, ...rest) {
 	const store = useAppHotkeysStore(useHotkeysContext()?.appHotkeysStore ?? null, subSlot(slot, "app-hotkeys"));
 	const resolved = isAppHotkey(hotkey) ? resolveAppHotkey(hotkey, store).hotkey : hotkey;
 	const manager = getHotkeyManager();
-	const active = select(manager.registrations, () => resolved !== null && manager.hasActiveRegistration(hotkey), void 0, subSlot(slot, "hint-active"));
-	const held = select(getKeyStateTracker().store, (state) => resolved !== null && matchesHeldModifiers(resolved, state.heldKeys, args[0]), void 0, subSlot(slot, "hint"));
+	const active = select(manager.registrations, () => resolved !== null && manager.hasActiveRegistration(hotkey), subSlot(slot, "hint-active"));
+	const held = select(getKeyStateTracker().store, (state) => resolved !== null && matchesHeldModifiers(resolved, state.heldKeys, args[0]), subSlot(slot, "hint"));
 	return active && held;
 }
 

package/dist/useHotkeyRecorder.js

@@ -2,13 +2,12 @@ import { select, subSlot } from "./internal.js";
 import { useDefaultHotkeysOptions } from "./HotkeysProvider.js";
 import { HotkeyRecorder } from "@tanstack/hotkeys";
 import { useLayoutEffect, useRef } from "octane";
+import { withDefaults } from "@tanstack/hotkeys/adapter";
 
 //#region src/useHotkeyRecorder.ts
 function useHotkeyRecorder(options, slot) {
-	const merged = {
-		...useDefaultHotkeysOptions().hotkeyRecorder,
-		...options
-	};
+	const defaults = useDefaultHotkeysOptions();
+	const merged = withDefaults(defaults.hotkeyRecorder, options);
 	const ref = useRef(null, subSlot(slot, "recorder"));
 	ref.current ??= new HotkeyRecorder(merged);
 	const recorder = ref.current;
@@ -17,7 +16,7 @@ function useHotkeyRecorder(options, slot) {
 	}, null, subSlot(slot, "options"));
 	useLayoutEffect(() => () => recorder.destroy(), [], subSlot(slot, "cleanup"));
 	return {
-		...select(recorder.store, (value) => value, void 0, subSlot(slot, "state")),
+		...select(recorder.store, (value) => value, subSlot(slot, "state")),
 		startRecording: () => recorder.start(),
 		stopRecording: () => recorder.stop(),
 		cancelRecording: () => recorder.cancel(),

package/dist/useHotkeyRegistrations.js

@@ -3,7 +3,7 @@ import { getHotkeyManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
 
 //#region src/useHotkeyRegistrations.ts
 function useHotkeyRegistrations(slot) {
-	return { hotkeys: select(getHotkeyManager().registrations, (state) => Array.from(state.values()).map(toHotkeyRegistrationView), void 0, subSlot(slot, "hotkeys")) };
+	return { hotkeys: select(getHotkeyManager().registrations, (state) => Array.from(state.values()).map(toHotkeyRegistrationView), subSlot(slot, "hotkeys")) };
 }
 
 //#endregion

package/dist/useHotkeyScopesState.js

@@ -3,7 +3,7 @@ import { getHotkeyManager } from "@tanstack/hotkeys";
 
 //#region src/useHotkeyScopesState.ts
 function useHotkeyScopesState(slot) {
-	return select(getHotkeyManager().scopes, (state) => state, void 0, subSlot(slot, "hotkey-scopes-state"));
+	return select(getHotkeyManager().scopes, (state) => state, subSlot(slot, "hotkey-scopes-state"));
 }
 
 //#endregion

package/dist/useKeyHold.js

@@ -3,7 +3,7 @@ import { getKeyStateTracker } from "@tanstack/hotkeys";
 
 //#region src/useKeyHold.ts
 function useKeyHold(key, slot) {
-	return select(getKeyStateTracker().store, (state) => state.heldKeys.includes(key), void 0, subSlot(slot, "key-hold"));
+	return select(getKeyStateTracker().store, (state) => state.heldKeys.includes(key), subSlot(slot, "key-hold"));
 }
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/octane-hotkeys",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "Octane adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -35,8 +35,7 @@
     "skills"
   ],
   "dependencies": {
-    "@tanstack/hotkeys": "0.19.0",
-    "@tanstack/octane-store": "^0.13.0"
+    "@tanstack/hotkeys": "0.21.0"
   },
   "devDependencies": {
     "@tsrx/oxc": "0.20.0",