@tanstack/react-hotkeys 0.17.0 → 0.19.0

package/dist/HotkeysProvider.d.ts

@@ -1,6 +1,6 @@
 import { UseHotkeyCommonOptions } from "./useHotkey.js";
 import { AppHotkeys, AppHotkeysStore, CustomHotkeys, HotkeyChordRecorderOptions, HotkeySequenceRecorderOptions } from "@tanstack/hotkeys";
-import React, { ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { HotkeysProviderScopeProps } from "@tanstack/hotkeys/adapter";
 //#region src/HotkeysProvider.d.ts
 export interface HotkeysProviderOptions {
@@ -67,7 +67,7 @@ export interface HotkeysProviderProps<T extends AppHotkeys = AppHotkeys> extends
  * }
  * ```
  */
-export declare function HotkeysProvider<T extends AppHotkeys = AppHotkeys>({ children, appHotkeys, customHotkeys, onCustomHotkeysChange, defaultOptions, scope, exclusive, enabled }: HotkeysProviderProps<T>): React.JSX.Element;
+export declare function HotkeysProvider<T extends AppHotkeys = AppHotkeys>({ children, appHotkeys, customHotkeys, onCustomHotkeysChange, defaultOptions, scope, exclusive, enabled }: HotkeysProviderProps<T>): ReactElement;
 export declare function useHotkeysContext(): HotkeysContextValue | null;
 export declare function useDefaultHotkeysOptions(): HotkeysProviderOptions;
 //#endregion

package/dist/HotkeysProvider.js

@@ -1,6 +1,8 @@
-import { AppHotkeysStore, publishAppHotkeysStore } from "@tanstack/hotkeys";
+'use client';
+
+import { publishAppHotkeysStore } from "@tanstack/hotkeys";
 import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
-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);
@@ -43,7 +45,7 @@ const NO_PARENT = {
 */
 function HotkeysProvider({ children, appHotkeys, customHotkeys, onCustomHotkeysChange, defaultOptions = DEFAULT_OPTIONS, scope, exclusive = false, enabled = true }) {
 	const parent = useContext(HotkeysContext) ?? NO_PARENT;
-	const [store] = useState(() => appHotkeys ? new AppHotkeysStore(appHotkeys, {
+	const [store] = useState(() => appHotkeys ? createAppHotkeysStore(appHotkeys, {
 		customHotkeys,
 		onCustomHotkeysChange
 	}) : null);

package/dist/_appHotkeysStore.js

@@ -1,8 +1,11 @@
+'use client';
+
 import { useHotkeysContext } from "./HotkeysProvider.js";
-import { Store, useSelector } from "@tanstack/react-store";
+import { useSelector } from "./_useSelector.js";
+import { createStore } from "@tanstack/hotkeys/adapter";
 
 //#region src/_appHotkeysStore.ts
-const NO_APP_HOTKEYS = new Store(null);
+const NO_APP_HOTKEYS = createStore(null);
 /**
 * The provider's app hotkeys store, re-rendering when app hotkeys or custom
 * hotkeys change. Null outside a provider with `appHotkeys`.

package/dist/_useSelector.js

@@ -0,0 +1,29 @@
+'use client';
+
+import { useCallback, useRef, useSyncExternalStore } from "react";
+
+//#region src/_useSelector.ts
+/**
+* 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 useSelector(store, selector) {
+	const subscribe = useCallback((onChange) => store.subscribe(onChange).unsubscribe, [store]);
+	const memo = useRef(null);
+	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);
+}
+
+//#endregion
+export { useSelector };

package/dist/useAppHotkeys.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useAppHotkeysStoreState } from "./_appHotkeysStore.js";
 import { useHotkeyRegistrations } from "./useHotkeyRegistrations.js";
 

package/dist/useHeldKeyCodes.js

@@ -1,5 +1,7 @@
+'use client';
+
+import { useSelector } from "./_useSelector.js";
 import { getKeyStateTracker } from "@tanstack/hotkeys";
-import { useSelector } from "@tanstack/react-store";
 
 //#region src/useHeldKeyCodes.ts
 /**

package/dist/useHeldKeys.d.ts

@@ -2,8 +2,7 @@
 /**
  * React hook that returns an array of currently held keyboard keys.
  *
- * This hook uses `useSelector` from `@tanstack/react-store` to subscribe
- * to the global KeyStateTracker and updates whenever keys are pressed
+ * This hook subscribes to the global KeyStateTracker and updates whenever keys are pressed
  * or released.
  *
  * @returns Array of currently held key names

package/dist/useHeldKeys.js

@@ -1,12 +1,13 @@
+'use client';
+
+import { useSelector } from "./_useSelector.js";
 import { getKeyStateTracker } from "@tanstack/hotkeys";
-import { useSelector } from "@tanstack/react-store";
 
 //#region src/useHeldKeys.ts
 /**
 * React hook that returns an array of currently held keyboard keys.
 *
-* This hook uses `useSelector` from `@tanstack/react-store` to subscribe
-* to the global KeyStateTracker and updates whenever keys are pressed
+* This hook subscribes to the global KeyStateTracker and updates whenever keys are pressed
 * or released.
 *
 * @returns Array of currently held key names

package/dist/useHotkey.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useHotkeys } from "./useHotkeys.js";
 
 //#region src/useHotkey.ts

package/dist/useHotkeyHint.js

@@ -1,6 +1,8 @@
+'use client';
+
+import { useSelector } from "./_useSelector.js";
 import { useAppHotkeysStoreState } from "./_appHotkeysStore.js";
 import { getHotkeyManager, getKeyStateTracker, isAppHotkey, matchesHeldModifiers, resolveAppHotkey } from "@tanstack/hotkeys";
-import { useSelector } from "@tanstack/react-store";
 
 //#region src/useHotkeyHint.ts
 /**

package/dist/useHotkeyRecorder.js

@@ -1,7 +1,9 @@
+'use client';
+
 import { useDefaultHotkeysOptions } from "./HotkeysProvider.js";
+import { useSelector } from "./_useSelector.js";
 import { HotkeyRecorder } from "@tanstack/hotkeys";
 import { useEffect, useRef } from "react";
-import { useSelector } from "@tanstack/react-store";
 
 //#region src/useHotkeyRecorder.ts
 function useHotkeyRecorder(options) {

package/dist/useHotkeyRegistrations.js

@@ -1,5 +1,7 @@
+'use client';
+
+import { useSelector } from "./_useSelector.js";
 import { getHotkeyManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
-import { useSelector } from "@tanstack/react-store";
 
 //#region src/useHotkeyRegistrations.ts
 /**

package/dist/useHotkeyScopesState.js

@@ -1,5 +1,7 @@
+'use client';
+
+import { useSelector } from "./_useSelector.js";
 import { getHotkeyManager } from "@tanstack/hotkeys";
-import { useSelector } from "@tanstack/react-store";
 
 //#region src/useHotkeyScopesState.ts
 /**

package/dist/useHotkeys.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { useHotkeysContext } from "./HotkeysProvider.js";
 import { useAppHotkeysStoreState } from "./_appHotkeysStore.js";
 import { resolveTarget } from "./utils.js";

package/dist/useKeyHold.d.ts

@@ -3,8 +3,7 @@ import { IndividualKey } from "@tanstack/hotkeys";
 /**
  * React hook that returns whether a specific key is currently being held.
  *
- * This hook uses `useSelector` from `@tanstack/react-store` to subscribe
- * to the global KeyStateTracker and uses a selector to determine if
+ * This hook 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')

package/dist/useKeyHold.js

@@ -1,12 +1,13 @@
+'use client';
+
+import { useSelector } from "./_useSelector.js";
 import { getKeyStateTracker } from "@tanstack/hotkeys";
-import { useSelector } from "@tanstack/react-store";
 
 //#region src/useKeyHold.ts
 /**
 * React hook that returns whether a specific key is currently being held.
 *
-* This hook uses `useSelector` from `@tanstack/react-store` to subscribe
-* to the global KeyStateTracker and uses a selector to determine if
+* This hook 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')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-hotkeys",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "React adapter for TanStack Hotkeys",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -35,11 +35,11 @@
     "skills"
   ],
   "dependencies": {
-    "@tanstack/hotkeys": "0.18.0",
-    "@tanstack/react-store": "^0.11.2"
+    "@tanstack/hotkeys": "0.20.0"
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^4.2.3",
+    "@tanstack/react-store": "^0.11.2",
     "@testing-library/react": "^16.3.3",
     "@types/react": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
@@ -49,8 +49,8 @@
     "react-dom": "^19.3.0"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/skills/react-hotkeys/SKILL.md

@@ -68,7 +68,7 @@ export function SaveButton({ onSave }: { onSave: () => void }) {
 
 The package also re-exports `@tanstack/hotkeys`, such as `formatForDisplay`, `matchesKeyboardEvent`, and `defineAppHotkeys`.
 
-No provider is required. In React Server Components frameworks, use the hooks and `HotkeysProvider` in client components.
+No provider is required. In React Server Components frameworks, call the hooks from client components. The package marks `HotkeysProvider` as a client component, so a server layout can render it without a `'use client'` wrapper.
 
 ## A dialog that owns the keyboard