@solid-primitives/keyboard 0.0.100 → 1.0.2

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2021 Solid Primitives Working Group
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2021 Solid Primitives Working Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,61 +1,158 @@
-<p>
-  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=keyboard" alt="Solid Primitives keyboard">
-</p>
-
-# @solid-primitives/keyboard
-
-[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg?style=for-the-badge)](https://lerna.js.org/)
-[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/keyboard?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/keyboard)
-[![version](https://img.shields.io/npm/v/@solid-primitives/keyboard?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/keyboard)
-[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
-
-A library of reactive promitives helping handling user's keyboard input.
-
-- [`makeKeyHoldListener`](#makeKeyHoldListener) - Attaches keyboard event-listeners, and triggers callback whenever user holds or stops holding specified key.
-
-## Installation
-
-```bash
-npm install @solid-primitives/keyboard
-# or
-yarn add @solid-primitives/keyboard
-```
-
-## `makeKeyHoldListener`
-
-Attaches keyboard event-listeners to `window`, and calls provided callback whenever user holds or stops holding specified key.
-
-Event listeners are automatically cleaned on root dispose.
-
-### How to use it
-
-`makeKeyHoldListener` takes three arguments:
-
-- `key` keyboard key or modifier to listen for
-- `onHoldChange` callback fired when the hold state changes
-- `options` additional configuration:
-  - `preventDefault` — call `e.preventDefault()` on the keyboard event, when the specified key is pressed. _(Defaults to `false`)_
-  - `allowOtherKeys` — Should the user be allowed to press other keys while holding the specified one _(Defaults to `false`)_
-
-```tsx
-import { makeKeyHoldListener } from "@solid-primitives/keyboard";
-
-const [pressing, setPressing] = createSignal(false);
-
-makeKeyHoldListener("altKey", setPressing, {
-  preventDefault: true
-});
-
-<p>Is pressing Alt? {pressing() ? "YES" : "NO"}</p>;
-```
-
-## Changelog
-
-<details>
-<summary><b>Expand Changelog</b></summary>
-
-0.0.100
-
-Initial release as a Stage-0 primitive.
-
-</details>
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=keyboard" alt="Solid Primitives keyboard">
+</p>
+
+# @solid-primitives/keyboard
+
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg?style=for-the-badge)](https://lerna.js.org/)
+[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/keyboard?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/keyboard)
+[![version](https://img.shields.io/npm/v/@solid-primitives/keyboard?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/keyboard)
+[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-1.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
+
+A library of reactive promitives helping handling user's keyboard input.
+
+- [`useKeyDownList`](#useKeyDownList) — Provides a signal with the list of currently held keys
+- [`useCurrentlyHeldKey`](#useCurrentlyHeldKey) — Provides a signal with the currently held single key.
+- [`useKeyDownSequence`](#useKeyDownSequence) — Provides a signal with a sequence of currently held keys, as they were pressed down and up.
+- [`createKeyHold`](#createKeyHold) — Provides a signal indicating if provided key is currently being held down.
+- [`createShortcut`](#createShortcut) — Creates a keyboard shotcut observer.
+
+## Installation
+
+```bash
+npm install @solid-primitives/keyboard
+# or
+yarn add @solid-primitives/keyboard
+```
+
+## `useKeyDownList`
+
+Provides a signal with the list of currently held keys, ordered from least recent to most recent.
+
+This is a [shared root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot) primitive that will reuse event listeners and signals across dependents.
+
+### How to use it
+
+`useKeyDownList` takes no arguments, and returns a signal with the list of currently held keys, and last keydown event.
+
+```tsx
+import { useKeyDownList } from "@solid-primitives/keyboard";
+
+const [keys, { event }] = useKeyDownList();
+
+createEffect(() => {
+  console.log(keys()); // => string[] — list of currently held keys
+  console.log(event()); // => KeyboardEvent | null — last keydown event
+});
+
+<For each={keys()}>
+  {key => <kbd>{key}</kdb>}
+</For>
+```
+
+## `useCurrentlyHeldKey`
+
+Provides a signal with the currently held single key. Pressing any other key at the same time will reset the signal to `null`.
+
+This is a [shared root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot) primitive that will reuse event listeners and signals across dependents.
+
+### How to use it
+
+`useCurrentlyHeldKey` takes no arguments, and returns a signal with the currently held single key.
+
+```tsx
+import { useCurrentlyHeldKey } from "@solid-primitives/keyboard";
+
+const key = useCurrentlyHeldKey();
+
+createEffect(() => {
+  console.log(key()); // => string | null — currently held key
+});
+```
+
+## `useKeyDownSequence`
+
+Provides a signal with a sequence of currently held keys, as they were pressed down and up.
+
+This is a [shared root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot) primitive that will reuse event listeners and signals across dependents.
+
+### How to use it
+
+`useKeyDownSequence` takes no arguments, and returns a single signal.
+
+```tsx
+import { useKeyDownSequence } from "@solid-primitives/keyboard";
+
+const sequence = useKeyDownSequence();
+
+createEffect(() => {
+  console.log(sequence()); // => string[][] — sequence of currently held keys
+});
+
+// example sequence of pressing Ctrl + Shift + A
+// [["Control"], ["Control", "Shift"], ["Control", "Shift", "A"]]
+```
+
+## `createKeyHold`
+
+Provides a `boolean` signal indicating if provided key is currently being held down.
+
+Holding multiple keys at the same time will return `false` — holding only the specified one will return `true`.
+
+### How to use it
+
+`createKeyHold` takes two arguments:
+
+- `key` keyboard key to listen for
+- `options` additional configuration:
+  - `preventDefault` — call `e.preventDefault()` on the keyboard event, when the specified key is pressed. _(Defaults to `true`)_
+
+```tsx
+import { createKeyHold } from "@solid-primitives/keyboard";
+
+const pressing = createKeyHold("Alt", { preventDefault: false });
+
+<p>Is pressing Alt? {pressing() ? "YES" : "NO"}</p>;
+```
+
+## `createShortcut`
+
+Creates a keyboard shotcut observer. The provided callback will be called when the specified keys are pressed.
+
+### How to use it
+
+`createShortcut` takes three arguments:
+
+- `keys` — list of keys to listen for
+- `callback` — callback to call when the specified keys are pressed
+- `options` — additional configuration:
+  - `preventDefault` — call `e.preventDefault()` on the keyboard event, when the specified key is pressed. _(Defaults to `true`)_
+  - `requireReset` — If `true`, the shortcut will only be triggered once until all of the keys stop being pressed. Disabled by default.
+
+```tsx
+import { createShortcut } from "@solid-primitives/keyboard";
+
+createShortcut(
+  ["Control", "Shift", "A"],
+  () => {
+    console.log("Shortcut triggered");
+  },
+  { preventDefault: false, requireReset: true }
+);
+```
+
+### Preventing default
+
+When `preventDefault` is `true`, `e.preventDefault()` will be called not only on the keydown event that have triggered the callback, but it will **optimistically** also prevend the default behavior of every previous keydown that will have the possibility to lead to the shotcut being pressed.
+
+E.g. when listening for `Control + Shift + A`, all three keydown events will be prevented.
+
+## DEMO
+
+Working demo of some of the primitives in keyboard package:
+
+https://codesandbox.io/s/solid-primitives-keyboard-demo-s2l84k?file=/index.tsx
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md)

package/dist/index.cjs

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -19,55 +20,135 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  makeKeyHoldListener: () => makeKeyHoldListener
+  createKeyHold: () => createKeyHold,
+  createShortcut: () => createShortcut,
+  useCurrentlyHeldKey: () => useCurrentlyHeldKey,
+  useKeyDownList: () => useKeyDownList,
+  useKeyDownSequence: () => useKeyDownSequence
 });
 module.exports = __toCommonJS(src_exports);
-
-// src/holdKeyListener.ts
 var import_event_listener = require("@solid-primitives/event-listener");
-var keyModifiers = ["altKey", "ctrlKey", "metaKey", "shiftKey"];
-function makeKeyHoldListener(key, onHoldChange, options = {}) {
-  const { preventDefault, allowOtherKeys } = options;
-  const modifier = keyModifiers.includes(key) ? key : void 0;
-  let state = false;
-  let actualPressed = false;
-  const updateState = (newState) => {
-    newState !== state && onHoldChange(state = newState);
-  };
-  (0, import_event_listener.makeEventListener)(window, "keydown", modifier ? (e) => {
+var import_rootless = require("@solid-primitives/rootless");
+var import_utils = require("@solid-primitives/utils");
+var import_solid_js = require("solid-js");
+function equalsKeyHoldSequence(sequence, model) {
+  for (let i = sequence.length - 1; i >= 0; i--) {
+    const _model = model.slice(0, i + 1);
+    if (!(0, import_utils.arrayEquals)(sequence[i], _model))
+      return false;
+  }
+  return true;
+}
+var useKeyDownList = /* @__PURE__ */ (0, import_rootless.createSharedRoot)(() => {
+  const [pressedKeys, setPressedKeys] = (0, import_solid_js.createSignal)([]);
+  const [event, setEvent] = (0, import_solid_js.createSignal)(null);
+  const reset = () => setPressedKeys([]);
+  (0, import_event_listener.makeEventListener)(window, "keydown", (e) => {
     if (e.repeat)
       return;
-    if (e[modifier]) {
-      if (!state && !actualPressed) {
-        preventDefault && e.preventDefault();
-        onHoldChange(state = actualPressed = true);
-      } else if (!allowOtherKeys)
-        updateState(false);
-    } else
-      updateState(actualPressed = false);
-  } : (e) => {
-    if (e.key !== key) {
-      allowOtherKeys || updateState(false);
-      return;
-    }
-    if (e.repeat)
+    const key = e.key.toUpperCase();
+    if (pressedKeys().includes(key))
       return;
-    updateState(true);
+    (0, import_solid_js.batch)(() => {
+      setEvent(e);
+      setPressedKeys((prev) => [...prev, key]);
+    });
+  });
+  (0, import_event_listener.makeEventListener)(window, "keyup", (e) => {
+    const key = e.key.toUpperCase();
+    setPressedKeys((prev) => prev.filter((_key) => _key !== key));
+  });
+  (0, import_event_listener.makeEventListener)(window, "blur", reset);
+  (0, import_event_listener.makeEventListener)(window, "contextmenu", (e) => {
+    e.defaultPrevented || reset();
   });
-  (0, import_event_listener.makeEventListener)(window, "keyup", modifier ? (e) => {
-    if (e[modifier])
-      allowOtherKeys || updateState(false);
-    else
-      updateState(actualPressed = false);
-  } : (e) => {
-    if (e.key !== key)
-      allowOtherKeys || updateState(false);
-    else
-      updateState(false);
+  return [pressedKeys, { event }];
+});
+var useCurrentlyHeldKey = /* @__PURE__ */ (0, import_rootless.createSharedRoot)(() => {
+  const [keys] = useKeyDownList();
+  let prevKeys = (0, import_solid_js.untrack)(keys);
+  return (0, import_solid_js.createMemo)(() => {
+    const _keys = keys();
+    const prev = prevKeys;
+    prevKeys = _keys;
+    if (prev.length === 0 && _keys.length === 1)
+      return _keys[0];
+    return null;
   });
-  (0, import_event_listener.makeEventListener)(document, "visibilitychange", () => document.visibilityState !== "visible" && updateState(false));
+});
+var useKeyDownSequence = /* @__PURE__ */ (0, import_rootless.createSharedRoot)(() => {
+  const [keys] = useKeyDownList();
+  return (0, import_solid_js.createMemo)((prev) => {
+    if (keys().length === 0)
+      return [];
+    return [...prev, keys()];
+  }, []);
+});
+function createKeyHold(key, options = {}) {
+  key = key.toUpperCase();
+  const { preventDefault = true } = options;
+  const [, { event }] = useKeyDownList();
+  const heldKey = useCurrentlyHeldKey();
+  return (0, import_solid_js.createMemo)(() => {
+    if (heldKey() === key) {
+      preventDefault && event().preventDefault();
+      return true;
+    }
+    return false;
+  });
+}
+function createShortcut(keys, callback, options = {}) {
+  if (!keys.length)
+    return;
+  keys = keys.map((key) => key.toUpperCase());
+  const { preventDefault = true, requireReset = false } = options;
+  const [, { event }] = useKeyDownList();
+  const sequence = useKeyDownSequence();
+  let reset = false;
+  const handleSequenceWithReset = (sequence2) => {
+    if (!sequence2.length)
+      return reset = false;
+    if (reset)
+      return;
+    if (sequence2.length < keys.length) {
+      if (equalsKeyHoldSequence(sequence2, keys.slice(0, sequence2.length))) {
+        preventDefault && event().preventDefault();
+      } else {
+        reset = true;
+      }
+    } else {
+      reset = true;
+      if (equalsKeyHoldSequence(sequence2, keys)) {
+        preventDefault && event().preventDefault();
+        callback();
+      }
+    }
+  };
+  const handleSequenceWithoutReset = (sequence2) => {
+    const last = sequence2.at(-1);
+    if (!last)
+      return;
+    if (preventDefault && last.length < keys.length) {
+      if ((0, import_utils.arrayEquals)(last, keys.slice(0, keys.length - 1))) {
+        event().preventDefault();
+      }
+      return;
+    }
+    if ((0, import_utils.arrayEquals)(last, keys)) {
+      const prev = sequence2.at(-2);
+      if (!prev || (0, import_utils.arrayEquals)(prev, keys.slice(0, keys.length - 1))) {
+        preventDefault && event().preventDefault();
+        callback();
+      }
+    }
+  };
+  (0, import_solid_js.createEffect)((0, import_solid_js.on)(sequence, requireReset ? handleSequenceWithReset : handleSequenceWithoutReset));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  makeKeyHoldListener
+  createKeyHold,
+  createShortcut,
+  useCurrentlyHeldKey,
+  useKeyDownList,
+  useKeyDownSequence
 });

package/dist/index.d.ts

@@ -1,19 +1,120 @@
-declare type KeyModifier = "altKey" | "ctrlKey" | "metaKey" | "shiftKey";
-declare type KeyToHold = KeyModifier | (string & {});
+import { Accessor } from 'solid-js';
+
+declare type ModifierKey = "Alt" | "Control" | "Meta" | "Shift";
+declare type KbdKey = ModifierKey | (string & {});
+/**
+ * Provides a signal with the list of currently held keys, ordered from least recent to most recent.
+ *
+ * This is a [shared root primitive](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot). *(signals and event-listeners are reused across dependents)*
+ *
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyboard#useKeyDownList
+ *
+ * @returns
+ * Returns a signal of a list of keys, and a signal of last keydown event.
+ * ```ts
+ * [keys: Accessor<string[]>, other: { event: Accessor<KeyboardEvent | null> }]
+ * ```
+ *
+ * @example
+ * ```ts
+ * const [keys] = useKeyDownList();
+ * createEffect(() => {
+ *    console.log(keys()) // => ["ALT", "CONTROL", "Q", "A"]
+ * })
+ * ```
+ */
+declare const useKeyDownList: () => [keys: Accessor<string[]>, other: {
+    event: Accessor<KeyboardEvent | null>;
+}];
+/**
+ * Provides a signal with the currently held single key. Pressing any other key at the same time will reset the signal to `null`.
+ *
+ * This is a [shared root primitive](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot). *(signals and event-listeners are reused across dependents)*
+ *
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyboard#useCurrentlyHeldKey
+ *
+ * @returns
+ * ```ts
+ * Accessor<string | null>
+ * ```
+ *
+ * @example
+ * ```ts
+ * const key = useCurrentlyHeldKey();
+ * createEffect(() => {
+ *    console.log(key()) // => "Q" | "ALT" | ... or null
+ * })
+ * ```
+ */
+declare const useCurrentlyHeldKey: () => Accessor<string | null>;
 /**
- * Attaches keyboard event-listeners to `window`, and calls {@link onHoldChange} callback whenever user holds or stops holding specified {@link key}.
+ * Provides a signal with a sequence of currently held keys, as they were pressed down and up.
+ *
+ * This is a [shared root primitive](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSharedRoot). *(signals and event-listeners are reused across dependents)*
+ *
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyboard#useKeyDownSequence
+ *
+ * @returns
+ * ```ts
+ * Accessor<string[][]>
+ * // [["CONTROL"], ["CONTROL", "Q"], ["CONTROL", "Q", "A"]]
+ * ```
+ *
+ * @example
+ * ```ts
+ * const sequence = useKeyDownSequence();
+ * createEffect(() => {
+ *    console.log(sequence()) // => string[][]
+ * })
+ * ```
+ */
+declare const useKeyDownSequence: () => Accessor<string[][]>;
+/**
+ * Provides a `boolean` signal indicating if provided {@link key} is currently being held down.
+ * Holding multiple keys at the same time will return `false` — holding only the specified one will return `true`.
+ *
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyboard#createKeyHold
+ *
+ * @param key The key to check for.
+ * @options The options for the key hold.
+ * - `preventDefault` — Controlls in the keydown event should have it's default action prevented. Enabled by default.
+ * @returns
+ * ```ts
+ * Accessor<boolean>
+ * ```
+ *
+ * @example
+ * ```ts
+ * const isHeld = createKeyHold("ALT");
+ * createEffect(() => {
+ *    console.log(isHeld()) // => boolean
+ * })
+ * ```
+ */
+declare function createKeyHold(key: KbdKey, options?: {
+    preventDefault?: boolean;
+}): Accessor<boolean>;
+/**
+ * Creates a keyboard shotcut observer. The provided {@link callback} will be called when the specified {@link keys} are pressed.
+ *
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyboard#createShortcut
  *
- * Event listeners are automatically cleaned on root dispose.
+ * @param keys The sequence of keys to watch for.
+ * @param callback The callback to call when the keys are pressed.
+ * @options The options for the shortcut.
+ * - `preventDefault` — Controlls in the keydown event should have it's default action prevented. Enabled by default.
+ * - `requireReset` — If `true`, the shortcut will only be triggered once until all of the keys stop being pressed. Disabled by default.
  *
- * @param key keyboard key or modifier to listen for
- * @param onHoldChange callback fired when the hold state changes
- * @param options additional configuration
- * - `options.preventDefault` — call `e.preventDefault()` on the keyboard event, when the specified {@link key} is pressed. *(Defaults to `false`)*
- * - `options.allowOtherKeys` — Should the user be allowed to press other keys while holding the specified one *(Defaults to `false`)*
+ * @example
+ * ```ts
+ * createShortcut(["CONTROL", "SHIFT", "C"], () => {
+ *    console.log("Ctrl+Shift+C was pressed");
+ * });
+ * ```
  */
-declare function makeKeyHoldListener(key: KeyToHold, onHoldChange: (isHolding: boolean) => void, options?: {
+declare function createShortcut(keys: KbdKey[], callback: VoidFunction, options?: {
     preventDefault?: boolean;
-    allowOtherKeys?: boolean;
+    requireReset?: boolean;
 }): void;
 
-export { KeyModifier, KeyToHold, makeKeyHoldListener };
+export { KbdKey, ModifierKey, createKeyHold, createShortcut, useCurrentlyHeldKey, useKeyDownList, useKeyDownSequence };

package/dist/index.js

@@ -1,47 +1,125 @@
-// src/holdKeyListener.ts
+// src/index.ts
 import { makeEventListener } from "@solid-primitives/event-listener";
-var keyModifiers = ["altKey", "ctrlKey", "metaKey", "shiftKey"];
-function makeKeyHoldListener(key, onHoldChange, options = {}) {
-  const { preventDefault, allowOtherKeys } = options;
-  const modifier = keyModifiers.includes(key) ? key : void 0;
-  let state = false;
-  let actualPressed = false;
-  const updateState = (newState) => {
-    newState !== state && onHoldChange(state = newState);
-  };
-  makeEventListener(window, "keydown", modifier ? (e) => {
+import { createSharedRoot } from "@solid-primitives/rootless";
+import { arrayEquals } from "@solid-primitives/utils";
+import { batch, createEffect, createMemo, createSignal, on, untrack } from "solid-js";
+function equalsKeyHoldSequence(sequence, model) {
+  for (let i = sequence.length - 1; i >= 0; i--) {
+    const _model = model.slice(0, i + 1);
+    if (!arrayEquals(sequence[i], _model))
+      return false;
+  }
+  return true;
+}
+var useKeyDownList = /* @__PURE__ */ createSharedRoot(() => {
+  const [pressedKeys, setPressedKeys] = createSignal([]);
+  const [event, setEvent] = createSignal(null);
+  const reset = () => setPressedKeys([]);
+  makeEventListener(window, "keydown", (e) => {
     if (e.repeat)
       return;
-    if (e[modifier]) {
-      if (!state && !actualPressed) {
-        preventDefault && e.preventDefault();
-        onHoldChange(state = actualPressed = true);
-      } else if (!allowOtherKeys)
-        updateState(false);
-    } else
-      updateState(actualPressed = false);
-  } : (e) => {
-    if (e.key !== key) {
-      allowOtherKeys || updateState(false);
-      return;
-    }
-    if (e.repeat)
+    const key = e.key.toUpperCase();
+    if (pressedKeys().includes(key))
       return;
-    updateState(true);
+    batch(() => {
+      setEvent(e);
+      setPressedKeys((prev) => [...prev, key]);
+    });
   });
-  makeEventListener(window, "keyup", modifier ? (e) => {
-    if (e[modifier])
-      allowOtherKeys || updateState(false);
-    else
-      updateState(actualPressed = false);
-  } : (e) => {
-    if (e.key !== key)
-      allowOtherKeys || updateState(false);
-    else
-      updateState(false);
+  makeEventListener(window, "keyup", (e) => {
+    const key = e.key.toUpperCase();
+    setPressedKeys((prev) => prev.filter((_key) => _key !== key));
+  });
+  makeEventListener(window, "blur", reset);
+  makeEventListener(window, "contextmenu", (e) => {
+    e.defaultPrevented || reset();
+  });
+  return [pressedKeys, { event }];
+});
+var useCurrentlyHeldKey = /* @__PURE__ */ createSharedRoot(() => {
+  const [keys] = useKeyDownList();
+  let prevKeys = untrack(keys);
+  return createMemo(() => {
+    const _keys = keys();
+    const prev = prevKeys;
+    prevKeys = _keys;
+    if (prev.length === 0 && _keys.length === 1)
+      return _keys[0];
+    return null;
+  });
+});
+var useKeyDownSequence = /* @__PURE__ */ createSharedRoot(() => {
+  const [keys] = useKeyDownList();
+  return createMemo((prev) => {
+    if (keys().length === 0)
+      return [];
+    return [...prev, keys()];
+  }, []);
+});
+function createKeyHold(key, options = {}) {
+  key = key.toUpperCase();
+  const { preventDefault = true } = options;
+  const [, { event }] = useKeyDownList();
+  const heldKey = useCurrentlyHeldKey();
+  return createMemo(() => {
+    if (heldKey() === key) {
+      preventDefault && event().preventDefault();
+      return true;
+    }
+    return false;
   });
-  makeEventListener(document, "visibilitychange", () => document.visibilityState !== "visible" && updateState(false));
+}
+function createShortcut(keys, callback, options = {}) {
+  if (!keys.length)
+    return;
+  keys = keys.map((key) => key.toUpperCase());
+  const { preventDefault = true, requireReset = false } = options;
+  const [, { event }] = useKeyDownList();
+  const sequence = useKeyDownSequence();
+  let reset = false;
+  const handleSequenceWithReset = (sequence2) => {
+    if (!sequence2.length)
+      return reset = false;
+    if (reset)
+      return;
+    if (sequence2.length < keys.length) {
+      if (equalsKeyHoldSequence(sequence2, keys.slice(0, sequence2.length))) {
+        preventDefault && event().preventDefault();
+      } else {
+        reset = true;
+      }
+    } else {
+      reset = true;
+      if (equalsKeyHoldSequence(sequence2, keys)) {
+        preventDefault && event().preventDefault();
+        callback();
+      }
+    }
+  };
+  const handleSequenceWithoutReset = (sequence2) => {
+    const last = sequence2.at(-1);
+    if (!last)
+      return;
+    if (preventDefault && last.length < keys.length) {
+      if (arrayEquals(last, keys.slice(0, keys.length - 1))) {
+        event().preventDefault();
+      }
+      return;
+    }
+    if (arrayEquals(last, keys)) {
+      const prev = sequence2.at(-2);
+      if (!prev || arrayEquals(prev, keys.slice(0, keys.length - 1))) {
+        preventDefault && event().preventDefault();
+        callback();
+      }
+    }
+  };
+  createEffect(on(sequence, requireReset ? handleSequenceWithReset : handleSequenceWithoutReset));
 }
 export {
-  makeKeyHoldListener
+  createKeyHold,
+  createShortcut,
+  useCurrentlyHeldKey,
+  useKeyDownList,
+  useKeyDownSequence
 };

package/dist/server.cjs

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -19,12 +20,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/server.ts
 var server_exports = {};
 __export(server_exports, {
-  makeKeyHoldListener: () => makeKeyHoldListener
+  createKeyHold: () => createKeyHold,
+  createShortcut: () => createShortcut,
+  useCurrentlyHeldKey: () => useCurrentlyHeldKey,
+  useKeyDownList: () => useKeyDownList,
+  useKeyDownSequence: () => useKeyDownSequence
 });
 module.exports = __toCommonJS(server_exports);
-var makeKeyHoldListener = () => {
-};
+var import_utils = require("@solid-primitives/utils");
+var useKeyDownList = () => [() => [], { event: () => null }];
+var useCurrentlyHeldKey = () => () => null;
+var useKeyDownSequence = () => () => [];
+var createKeyHold = () => () => false;
+var createShortcut = import_utils.noop;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  makeKeyHoldListener
+  createKeyHold,
+  createShortcut,
+  useCurrentlyHeldKey,
+  useKeyDownList,
+  useKeyDownSequence
 });

package/dist/server.js

@@ -1,6 +1,14 @@
 // src/server.ts
-var makeKeyHoldListener = () => {
-};
+import { noop } from "@solid-primitives/utils";
+var useKeyDownList = () => [() => [], { event: () => null }];
+var useCurrentlyHeldKey = () => () => null;
+var useKeyDownSequence = () => () => [];
+var createKeyHold = () => () => false;
+var createShortcut = noop;
 export {
-  makeKeyHoldListener
+  createKeyHold,
+  createShortcut,
+  useCurrentlyHeldKey,
+  useKeyDownList,
+  useKeyDownSequence
 };

package/package.json

@@ -1,75 +1,78 @@
-{
-  "name": "@solid-primitives/keyboard",
-  "version": "0.0.100",
-  "description": "A library of reactive promitives helping handling user's keyboard input.",
-  "author": "Damian Tarnwski <gthetarnav@gmail.com>",
-  "contributors": [],
-  "license": "MIT",
-  "homepage": "https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyboard#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/solidjs-community/solid-primitives.git"
-  },
-  "bugs": {
-    "url": "https://github.com/solidjs-community/solid-primitives/issues"
-  },
-  "primitive": {
-    "name": "keyboard",
-    "stage": 0,
-    "list": [
-      "makeKeyHoldListener"
-    ],
-    "category": "Inputs"
-  },
-  "private": false,
-  "sideEffects": false,
-  "type": "module",
-  "main": "./dist/server.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    "node": {
-      "import": "./dist/server.js",
-      "require": "./dist/server.cjs"
-    },
-    "import": "./dist/index.js",
-    "require": "./dist/index.cjs"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "start": "vite serve dev --host",
-    "dev": "npm run start",
-    "build": "tsup",
-    "test": "uvu -r solid-register",
-    "test:watch": "watchlist src test -- npm test"
-  },
-  "keywords": [
-    "solid",
-    "primitives",
-    "keyboard",
-    "keystroke",
-    "hotkey"
-  ],
-  "devDependencies": {
-    "jsdom": "^19.0.0",
-    "prettier": "^2.7.1",
-    "solid-register": "^0.2.5",
-    "tslib": "^2.4.0",
-    "tsup": "^6.1.2",
-    "typescript": "^4.7.3",
-    "unocss": "0.39.0",
-    "uvu": "^0.5.3",
-    "vite": "2.9.12",
-    "vite-plugin-solid": "2.2.6",
-    "watchlist": "^0.3.1",
-    "solid-js": "^1.4.4"
-  },
-  "peerDependencies": {
-    "solid-js": "^1.4.0"
-  },
-  "dependencies": {
-    "@solid-primitives/event-listener": "^2.2.0"
-  }
-}
+{
+  "name": "@solid-primitives/keyboard",
+  "version": "1.0.2",
+  "description": "A library of reactive promitives helping handling user's keyboard input.",
+  "author": "Damian Tarnwski <gthetarnav@gmail.com>",
+  "contributors": [],
+  "license": "MIT",
+  "homepage": "https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyboard#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/solidjs-community/solid-primitives.git"
+  },
+  "bugs": {
+    "url": "https://github.com/solidjs-community/solid-primitives/issues"
+  },
+  "primitive": {
+    "name": "keyboard",
+    "stage": 1,
+    "list": [
+      "useKeyDownList",
+      "useCurrentlyHeldKey",
+      "useKeyDownSequence",
+      "createKeyHold",
+      "createShortcut"
+    ],
+    "category": "Inputs"
+  },
+  "private": false,
+  "sideEffects": false,
+  "type": "module",
+  "main": "./dist/server.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "node": {
+      "import": "./dist/server.js",
+      "require": "./dist/server.cjs"
+    },
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "solid",
+    "primitives",
+    "keyboard",
+    "keystroke",
+    "hotkey"
+  ],
+  "devDependencies": {
+    "jsdom": "^20.0.0",
+    "prettier": "^2.7.1",
+    "solid-js": "^1.5.1",
+    "tslib": "^2.4.0",
+    "tsup": "^6.2.2",
+    "typescript": "^4.7.4",
+    "unocss": "^0.44.7",
+    "vite": "^3.0.7",
+    "vite-plugin-solid": "^2.3.0",
+    "vitest": "^0.20.3"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.4.0"
+  },
+  "dependencies": {
+    "@solid-primitives/event-listener": "^2.2.2",
+    "@solid-primitives/rootless": "^1.1.3",
+    "@solid-primitives/utils": "^3.0.2"
+  },
+  "scripts": {
+    "start": "vite serve dev --host",
+    "dev": "npm run start",
+    "build": "tsup",
+    "test": "vitest"
+  }
+}