reshaped 3.2.5 → 3.2.7

package/dist/hooks/_private/useSingletonHotkeys.js

@@ -4,7 +4,7 @@ import React from "react";
  * Utilities
  */
 const COMBINATION_DELIMETER = "+";
-const pressedMap = {};
+const pressedMap = new Map();
 let modifiedKeys = [];
 const formatHotkey = (hotkey) => {
     if (hotkey === " ")
@@ -62,9 +62,9 @@ export class HotkeyStore {
         });
     };
     handleKeyDown = (pressedMap, e) => {
-        const pressedKeys = Object.keys(pressedMap);
-        if (!pressedKeys.length)
+        if (!pressedMap.size)
             return;
+        const pressedKeys = [...pressedMap.keys()];
         const pressedId = getHotkeyId(pressedKeys.join(COMBINATION_DELIMETER));
         const pressedFormattedKeys = pressedId.split(COMBINATION_DELIMETER);
         const hotkeyData = this.hotkeyMap[pressedId];
@@ -86,12 +86,12 @@ export class HotkeyStore {
                         !(eventTarget === data.ref.current || data.ref.current.contains(eventTarget))) {
                         return;
                     }
-                    const resolvedEvent = pressedMap[pressedId];
+                    const resolvedEvent = pressedMap.get(pressedId);
                     if (data.options.preventDefault) {
                         resolvedEvent?.preventDefault();
                         e.preventDefault();
                     }
-                    data.callback(resolvedEvent);
+                    data.callback(e);
                 });
             }
         });
@@ -114,13 +114,13 @@ export const SingletonHotkeysProvider = (props) => {
         const eventKey = getEventKey(e);
         if (!eventKey)
             return;
-        pressedMap[eventKey] = e;
-        setTriggerCount(Object.keys(pressedMap).length);
+        pressedMap.set(eventKey, e);
+        setTriggerCount(pressedMap.size);
         // Key up won't trigger for other keys while Meta is pressed so we need to cache them
         // and remove on Meta keyup
         if (e.metaKey)
-            modifiedKeys.push(...Object.keys(pressedMap));
-        if (pressedMap.Meta)
+            modifiedKeys.push(...pressedMap.keys());
+        if (pressedMap.has("Meta"))
             modifiedKeys.push(eventKey);
     }, [hooksCount]);
     const removePressedKey = React.useCallback((e) => {
@@ -129,23 +129,23 @@ export const SingletonHotkeysProvider = (props) => {
         const eventKey = getEventKey(e);
         if (!eventKey)
             return;
-        delete pressedMap[eventKey];
+        pressedMap.delete(eventKey);
         if (eventKey === "meta" || eventKey === "control") {
-            delete pressedMap.mod;
+            pressedMap.delete("mod");
         }
         if (eventKey === "meta") {
             modifiedKeys.forEach((key) => {
-                if (!pressedMap[key])
+                if (!pressedMap.has(key))
                     return;
-                delete pressedMap[key];
+                pressedMap.delete(key);
             });
             modifiedKeys = [];
         }
-        setTriggerCount(Object.keys(pressedMap).length);
+        setTriggerCount(pressedMap.size);
     }, [hooksCount]);
     const isPressed = (hotkey) => {
         const keys = formatHotkey(hotkey).split(COMBINATION_DELIMETER);
-        if (keys.some((key) => !pressedMap[key]))
+        if (keys.some((key) => !pressedMap.has(key)))
             return false;
         return true;
     };
@@ -161,6 +161,10 @@ export const SingletonHotkeysProvider = (props) => {
             return;
         removePressedKey(e);
     }, [removePressedKey]);
+    const handleWindowBlur = React.useCallback(() => {
+        pressedMap.clear();
+        modifiedKeys = [];
+    }, []);
     const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
         setHooksCount((prev) => prev + 1);
         globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
@@ -172,11 +176,13 @@ export const SingletonHotkeysProvider = (props) => {
     React.useEffect(() => {
         window.addEventListener("keydown", handleWindowKeyDown);
         window.addEventListener("keyup", handleWindowKeyUp);
+        window.addEventListener("blur", handleWindowBlur);
         return () => {
             window.removeEventListener("keydown", handleWindowKeyDown);
             window.removeEventListener("keyup", handleWindowKeyUp);
+            window.removeEventListener("blur", handleWindowBlur);
         };
-    }, [handleWindowKeyDown, handleWindowKeyUp]);
+    }, [handleWindowKeyDown, handleWindowKeyUp, handleWindowBlur]);
     return (_jsx(HotkeyContext.Provider, { value: { addHotkeys, isPressed }, children: children }));
 };
 const useSingletonHotkeys = () => React.useContext(HotkeyContext);

package/dist/hooks/tests/useHotkeys.stories.js

@@ -4,8 +4,11 @@ export default { title: "Hooks/useHotkeys" };
 function Example() {
     const { checkHotkeyState } = useHotkeys({
         "shift + b + n": () => console.log("pressed"),
-        "c + v": () => console.log(111),
-        "Meta + v": () => console.log(222),
+        "c + v": () => console.log("c + v"),
+        "Meta + k": () => console.log("meta + k"),
+        "Meta + f": () => console.log("meta + f"),
+        "Meta + v": () => console.log("meta + v"),
+        "Meta + b": () => console.log("meta + b"),
         "control + enter": () => console.log("control + enter"),
         "meta + enter": () => console.log("meta + enter"),
         "mod + enter": () => console.log("mod + enter"),

package/dist/hooks/useHotkeys.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-declare const useHotkeys: <Element extends HTMLElement>(hotkeys: Record<string, ((e: KeyboardEvent) => void) | null>, deps?: unknown[], options?: {
+import { type Hotkeys } from "./_private/useSingletonHotkeys";
+declare const useHotkeys: <Element extends HTMLElement>(hotkeys: Hotkeys, deps?: unknown[], options?: {
     ref?: React.RefObject<Element>;
     disabled?: boolean;
     preventDefault?: boolean;

package/dist/utilities/dom/find.d.ts

@@ -0,0 +1 @@
+export declare const findParent: (element: HTMLElement, condition: (el: HTMLElement) => boolean) => HTMLElement | null;

package/dist/utilities/dom/find.js

@@ -0,0 +1,9 @@
+export const findParent = (element, condition) => {
+    let currentElement = element.parentElement;
+    while (currentElement) {
+        if (condition(currentElement))
+            return currentElement;
+        currentElement = currentElement.parentElement;
+    }
+    return null;
+};

package/dist/utilities/dom/index.d.ts

@@ -1,3 +1,4 @@
 export { getClosestFlyoutTarget } from "./flyout";
 export { getShadowRoot } from "./shadowDom";
 export { enableUserSelect, disableUserSelect } from "./userSelect";
+export { findParent } from "./find";

package/dist/utilities/dom/index.js

@@ -1,3 +1,4 @@
 export { getClosestFlyoutTarget } from "./flyout.js";
 export { getShadowRoot } from "./shadowDom.js";
 export { enableUserSelect, disableUserSelect } from "./userSelect.js";
+export { findParent } from "./find.js";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.2.5",
+	"version": "3.2.7",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",