@tanstack/solid-hotkeys 0.17.1 → 0.19.0

package/dist/HotkeysProvider.d.ts

@@ -27,8 +27,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 { AppHotkeysStore, publishAppHotkeysStore } from "@tanstack/hotkeys";
+import { publishAppHotkeysStore } from "@tanstack/hotkeys";
 import { createComponent } from "solid-js/web";
 import { createContext, createEffect, createMemo, onCleanup, onMount, useContext } from "solid-js";
-import { activateHotkeysProviderScope, getHotkeysProviderScopeKey, mergeHotkeysProviderDefaults } from "@tanstack/hotkeys/adapter";
+import { activateHotkeysProviderScope, createAppHotkeysStore, getHotkeysProviderScopeKey, mergeHotkeysProviderDefaults } from "@tanstack/hotkeys/adapter";
 
 //#region src/HotkeysProvider.tsx
 const HotkeysContext = createContext(null);
@@ -35,13 +35,17 @@ const DEFAULT_OPTIONS = {};
 */
 const HotkeysProvider = (props) => {
 	const parent = useContext(HotkeysContext);
-	const store = props.appHotkeys ? new AppHotkeysStore(props.appHotkeys, {
+	const store = props.appHotkeys ? createAppHotkeysStore(props.appHotkeys, {
 		customHotkeys: props.customHotkeys,
 		onCustomHotkeysChange: (custom) => props.onCustomHotkeysChange?.(custom)
 	}) : null;
 	createEffect(() => {
 		if (props.appHotkeys) store?.setAppHotkeys(props.appHotkeys);
 	});
+	createEffect(() => {
+		const customHotkeys = props.customHotkeys;
+		store?.setOptions({ customHotkeys });
+	});
 	onMount(() => {
 		if (store) onCleanup(publishAppHotkeysStore(store));
 	});

package/dist/_useSelector.js

@@ -0,0 +1,18 @@
+import { createSignal, onCleanup } from "solid-js";
+
+//#region src/_useSelector.ts
+/**
+* Subscribes to a store until the owner is cleaned up and returns an accessor
+* for the selected value, which updates when it changes (by `===`).
+*/
+function useSelector(store, selector) {
+	const [selected, setSelected] = createSignal(selector(store.get()));
+	const { unsubscribe } = store.subscribe((state) => {
+		setSelected(() => selector(state));
+	});
+	onCleanup(unsubscribe);
+	return selected;
+}
+
+//#endregion
+export { useSelector };

package/dist/createHeldKeyCodes.d.ts

@@ -5,8 +5,7 @@
  * This is useful for debugging which physical key was pressed (e.g. distinguishing
  * left vs right Shift via "ShiftLeft" / "ShiftRight").
  *
- * This primitive uses `useSelector` from `@tanstack/solid-store` to subscribe
- * to the global KeyStateTracker.
+ * This primitive subscribes to the global KeyStateTracker.
  *
  * @returns Signal accessor for record mapping normalized key names to their `event.code` values
  *

package/dist/createHeldKeyCodes.js

@@ -1,5 +1,5 @@
+import { useSelector } from "./_useSelector.js";
 import { getKeyStateTracker } from "@tanstack/hotkeys";
-import { useSelector } from "@tanstack/solid-store";
 
 //#region src/createHeldKeyCodes.ts
 /**
@@ -8,8 +8,7 @@ import { useSelector } from "@tanstack/solid-store";
 * This is useful for debugging which physical key was pressed (e.g. distinguishing
 * left vs right Shift via "ShiftLeft" / "ShiftRight").
 *
-* This primitive uses `useSelector` from `@tanstack/solid-store` to subscribe
-* to the global KeyStateTracker.
+* This primitive subscribes to the global KeyStateTracker.
 *
 * @returns Signal accessor for record mapping normalized key names to their `event.code` values
 *

package/dist/createHeldKeys.d.ts

@@ -2,8 +2,7 @@
 /**
  * SolidJS primitive that returns a signal of currently held keyboard keys.
  *
- * This primitive uses `useSelector` from `@tanstack/solid-store` to subscribe
- * to the global KeyStateTracker and updates whenever keys are pressed
+ * This primitive subscribes to the global KeyStateTracker and updates whenever keys are pressed
  * or released.
  *
  * @returns Signal accessor for array of currently held key names

package/dist/createHeldKeys.js

@@ -1,12 +1,11 @@
+import { useSelector } from "./_useSelector.js";
 import { getKeyStateTracker } from "@tanstack/hotkeys";
-import { useSelector } from "@tanstack/solid-store";
 
 //#region src/createHeldKeys.ts
 /**
 * SolidJS primitive that returns a signal of currently held keyboard keys.
 *
-* This primitive uses `useSelector` from `@tanstack/solid-store` to subscribe
-* to the global KeyStateTracker and updates whenever keys are pressed
+* This primitive subscribes to the global KeyStateTracker and updates whenever keys are pressed
 * or released.
 *
 * @returns Signal accessor for array of currently held key names

package/dist/createHotkey.d.ts

@@ -29,6 +29,7 @@ type MaybeAccessor<T> = T | (() => T);
  * sequence registers as its chord. An app hotkey uses its effective hotkey
  * from `HotkeysProvider` (including the user's custom hotkey) and its
  * declared meta and options, and registers nothing while unbound.
+ * `undefined`, `null`, or `''` registers nothing, for an optional shortcut.
  *
  * @example
  * ```tsx
@@ -37,6 +38,6 @@ type MaybeAccessor<T> = T | (() => T);
  * createHotkey('Escape', () => close(), () => ({ enabled: isOpen() }))
  * ```
  */
-export declare function createHotkey<T extends AppHotkey>(hotkey: MaybeAccessor<T>, callback: HotkeyCallback, options?: MaybeAccessor<CreateAppHotkeyOptions<T>>): void;
-export declare function createHotkey<const T extends RegisterableHotkey>(hotkey: MaybeAccessor<T>, callback: HotkeyCallback<HotkeyCallbackContextFor<T>>, options?: MaybeAccessor<CreateHotkeyOptionsFor<T>>): void;
+export declare function createHotkey<T extends AppHotkey>(hotkey: MaybeAccessor<T | null | undefined>, callback: HotkeyCallback, options?: MaybeAccessor<CreateAppHotkeyOptions<T>>): void;
+export declare function createHotkey<const T extends RegisterableHotkey>(hotkey: MaybeAccessor<T | null | undefined>, callback: HotkeyCallback<HotkeyCallbackContextFor<T>>, options?: MaybeAccessor<CreateHotkeyOptionsFor<T>>): void;
 //#endregion

package/dist/createHotkeyHint.d.ts

@@ -5,7 +5,8 @@ import { AppHotkey, HeldModifierOptions, RegisterableHotkey } from "@tanstack/ho
  * The hint shows only 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). This helper does not register a shortcut. A hotkey on an element counts only while focus is inside it.
+ * effective hotkey (false while unbound). No hotkey (`undefined`, `null`, or
+ * `''`) returns false. This helper does not register a shortcut. A hotkey on an element counts only while focus is inside it.
  */
-export declare function createHotkeyHint(hotkey: RegisterableHotkey | AppHotkey | (() => RegisterableHotkey | AppHotkey), options?: HeldModifierOptions | (() => HeldModifierOptions)): () => boolean;
+export declare function createHotkeyHint(hotkey: RegisterableHotkey | AppHotkey | null | undefined | (() => RegisterableHotkey | AppHotkey | null | undefined), options?: HeldModifierOptions | (() => HeldModifierOptions)): () => boolean;
 //#endregion

package/dist/createHotkeyHint.js

@@ -1,7 +1,7 @@
+import { useSelector } from "./_useSelector.js";
 import { useAppHotkeysStoreSource } from "./defaultOptions.js";
 import { getHotkeyManager, getKeyStateTracker, isAppHotkey, matchesHeldModifiers, resolveAppHotkey } from "@tanstack/hotkeys";
 import { createMemo } from "solid-js";
-import { useSelector } from "@tanstack/solid-store";
 
 //#region src/createHotkeyHint.ts
 /**
@@ -9,7 +9,8 @@ import { useSelector } from "@tanstack/solid-store";
 * The hint shows only 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). This helper does not register a shortcut. A hotkey on an element counts only while focus is inside it.
+* effective hotkey (false while unbound). No hotkey (`undefined`, `null`, or
+* `''`) returns false. This helper does not register a shortcut. A hotkey on an element counts only while focus is inside it.
 */
 function createHotkeyHint(hotkey, options = {}) {
 	const appHotkeys = useAppHotkeysStoreSource();

package/dist/createHotkeyRecorder.js

@@ -1,15 +1,13 @@
+import { useSelector } from "./_useSelector.js";
 import { useDefaultHotkeysOptionsSource } from "./defaultOptions.js";
 import { HotkeyRecorder } from "@tanstack/hotkeys";
 import { createEffect, onCleanup } from "solid-js";
-import { useSelector } from "@tanstack/solid-store";
+import { withDefaults } from "@tanstack/hotkeys/adapter";
 
 //#region src/createHotkeyRecorder.ts
 function createHotkeyRecorder(options) {
 	const defaultOptions = useDefaultHotkeysOptionsSource();
-	const resolve = () => ({
-		...defaultOptions().hotkeyRecorder,
-		...typeof options === "function" ? options() : options
-	});
+	const resolve = () => withDefaults(defaultOptions().hotkeyRecorder, typeof options === "function" ? options() : options);
 	const recorder = new HotkeyRecorder(resolve());
 	const isRecording = useSelector(recorder.store, (state) => state.isRecording);
 	const steps = useSelector(recorder.store, (state) => state.steps);

package/dist/createHotkeyRegistrations.js

@@ -1,5 +1,5 @@
+import { useSelector } from "./_useSelector.js";
 import { getHotkeyManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
-import { useSelector } from "@tanstack/solid-store";
 
 //#region src/createHotkeyRegistrations.ts
 /**

package/dist/createHotkeyScopesState.js

@@ -1,5 +1,5 @@
+import { useSelector } from "./_useSelector.js";
 import { getHotkeyManager } from "@tanstack/hotkeys";
-import { useSelector } from "@tanstack/solid-store";
 
 //#region src/createHotkeyScopesState.ts
 /**

package/dist/createHotkeys.d.ts

@@ -12,7 +12,8 @@ export type CreateHotkeyDefinition = AdapterHotkeyDefinition<CreateHotkeyTarget>
  *
  * Options merge in this order: provider defaults, app hotkey declaration,
  * commonOptions, per-hotkey options. Each option applies only to the kinds
- * that support it. Unbound app hotkeys and empty sequences register nothing.
+ * that support it. Unbound app hotkeys, empty sequences, and `undefined`,
+ * `null`, or `''` hotkeys register nothing.
  * A `null` target skips registration until it is set.
  *
  * @example

package/dist/createHotkeys.js

@@ -9,7 +9,8 @@ import { createHotkeyBindings, prepareHotkeyDefinitions } from "@tanstack/hotkey
 *
 * Options merge in this order: provider defaults, app hotkey declaration,
 * commonOptions, per-hotkey options. Each option applies only to the kinds
-* that support it. Unbound app hotkeys and empty sequences register nothing.
+* that support it. Unbound app hotkeys, empty sequences, and `undefined`,
+* `null`, or `''` hotkeys register nothing.
 * A `null` target skips registration until it is set.
 *
 * @example

package/dist/createKeyHold.d.ts

@@ -3,8 +3,7 @@ import { IndividualKey } from "@tanstack/hotkeys";
 /**
  * SolidJS primitive that returns whether a specific key is currently being held.
  *
- * This primitive uses `useSelector` from `@tanstack/solid-store` to subscribe
- * to the global KeyStateTracker and uses a selector to determine if the
+ * This primitive subscribes to the global KeyStateTracker and uses a selector to determine if the
  * specified key is held.
  *
  * @param key - The key to check (e.g., 'Shift', 'Control', 'A') - can be an accessor function

package/dist/createKeyHold.js

@@ -1,13 +1,12 @@
+import { useSelector } from "./_useSelector.js";
 import { getKeyStateTracker } from "@tanstack/hotkeys";
 import { createMemo } from "solid-js";
-import { useSelector } from "@tanstack/solid-store";
 
 //#region src/createKeyHold.ts
 /**
 * SolidJS primitive that returns whether a specific key is currently being held.
 *
-* This primitive uses `useSelector` from `@tanstack/solid-store` to subscribe
-* to the global KeyStateTracker and uses a selector to determine if the
+* This primitive subscribes to the global KeyStateTracker and uses a selector to determine if the
 * specified key is held.
 *
 * @param key - The key to check (e.g., 'Shift', 'Control', 'A') - can be an accessor function

package/dist/defaultOptions.js

@@ -1,5 +1,6 @@
 import { useHotkeysContext } from "./HotkeysProvider.js";
-import { Store, useSelector } from "@tanstack/solid-store";
+import { useSelector } from "./_useSelector.js";
+import { createStore } from "@tanstack/hotkeys/adapter";
 
 //#region src/defaultOptions.ts
 /** Captures the context once and reads current defaults inside reactive computations. */
@@ -7,7 +8,7 @@ function useDefaultHotkeysOptionsSource() {
 	const context = useHotkeysContext();
 	return () => context?.defaultOptions ?? {};
 }
-const NO_APP_HOTKEYS = new Store(null);
+const NO_APP_HOTKEYS = createStore(null);
 /**
 * The provider's app hotkeys store and an accessor that tracks its state, so
 * computations re-run when app hotkeys or custom hotkeys change.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-hotkeys",
-  "version": "0.17.1",
+  "version": "0.19.0",
   "description": "SolidJS adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -38,8 +38,7 @@
     "skills"
   ],
   "dependencies": {
-    "@tanstack/hotkeys": "0.19.0",
-    "@tanstack/solid-store": "^0.11.2"
+    "@tanstack/hotkeys": "0.21.0"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10",