timvir 0.2.47 → 0.2.49

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # timvir
 
+## 0.2.49
+
+### Patch Changes
+
+- **Remove dependency on react-hotkeys-hook** ([#3660](https://github.com/timvir/timvir/pull/3660)) - Timvir has only relied on a small part of the full capability of react-hotkeys-hook. It was easy enough to re-implement the necessary functionality and drop the dependency.
+
+## 0.2.48
+
 ## 0.2.47
 
 ### Patch Changes

package/blocks/Exhibit/docs/index.mdx

@@ -1,4 +1,4 @@
-import { Code, Grid } from "timvir/blocks";
+import { Grid } from "timvir/blocks";
 
 # Exhibit
 
@@ -21,9 +21,11 @@ Think of the `<Exhibit>` block as a `<figure>` + `<figcaption>` for React compon
 
 Import `Exhibit` from the `timvir/blocks` module, then use in a Timvir mdx page like so:
 
-<Code language="jsx">
-  <Sample variant="usage" as="source/markup" />
-</Code>
+```jsx
+<Exhibit caption="Here goes your caption">
+  <YourReactComponent />
+</Exhibit>
+```
 
 ## Bleed
 

package/core/index.js

@@ -5,7 +5,6 @@ export { useContext } from 'timvir/context';
 import * as React from 'react';
 import * as builtins from 'timvir/builtins';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { makeBus } from 'timvir/bus';
 import * as ReactDOM from 'react-dom';
 import { defaultSearch } from 'timvir/search';
@@ -824,27 +823,31 @@ function Page(props$1, ref) {
     blocks,
     toc
   }), [bus, mdxComponents, location, Link, blocks, toc]);
-  useHotkeys("meta+p", ev => {
+  useHotkeys({
+    modifiers: ["meta"],
+    key: "p"
+  }, ev => {
     ev.preventDefault();
     setState({
       search: {
         open: !state.search.open
       }
     });
-  }, {
-    enableOnFormTags: true
   });
-  useHotkeys("meta+k", ev => {
+  useHotkeys({
+    modifiers: ["meta"],
+    key: "k"
+  }, ev => {
     ev.preventDefault();
     setState({
       search: {
         open: !state.search.open
       }
     });
-  }, {
-    enableOnFormTags: ["INPUT"]
   });
-  useHotkeys("escape", ev => {
+  useHotkeys({
+    key: "escape"
+  }, ev => {
     if (state.search.open) {
       ev.preventDefault();
       setState({
@@ -853,8 +856,6 @@ function Page(props$1, ref) {
         }
       });
     }
-  }, {
-    enableOnFormTags: true
   });
   return /*#__PURE__*/jsxs(Provider, {
     value: context,
@@ -958,6 +959,39 @@ const styles = {
     $$css: true
   }
 };
+function useHotkeys(trigger, callback) {
+  const ref = React.useRef({
+    trigger,
+    callback
+  });
+  React.useLayoutEffect(() => {
+    ref.current = {
+      trigger,
+      callback
+    };
+  });
+  React.useEffect(() => {
+    const handleKeyDown = event => {
+      if (ref.current.trigger.key.toLowerCase() !== event.key.toLowerCase()) {
+        return;
+      }
+      {
+        const allModifiers = ["alt", "ctrl", "meta", "shift"];
+        const expectedModifiers = ref.current.trigger.modifiers ?? [];
+        for (const modifier of allModifiers) {
+          if (event[`${modifier}Key`] !== expectedModifiers.includes(modifier)) {
+            return;
+          }
+        }
+      }
+      ref.current.callback(event);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+}
 
 /**
  * A mailbox is a wonka source which receives messages for one specific block (identified by its id).

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "timvir",
-  "version": "0.2.47",
+  "version": "0.2.49",
   "license": "MIT",
   "sideEffects": false,
   "exports": {
@@ -22,8 +22,7 @@
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19",
-    "react-hotkeys-hook": "^4 || ^5"
+    "react-dom": "^17 || ^18 || ^19"
   },
   "repository": {
     "type": "git",

package/blocks/Exhibit/samples/usage.d.ts

@@ -1 +0,0 @@
-export default function Sample(): import("react/jsx-runtime").JSX.Element;