@react-fabric/core 1.0.0-beta.62 → 1.0.0-beta.63

package/src/hooks/useContextMenu.tsx

@@ -0,0 +1,131 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2026 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+import {
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
+  autoUpdate,
+  flip,
+  offset,
+  useClick,
+  useDismiss,
+  useFloating,
+  useFloatingNodeId,
+  useInteractions,
+} from "@floating-ui/react";
+import { cloneElement, useEffectEvent, useRef, useState } from "react";
+import { type Menu } from "../components/menu/Menu";
+
+/**
+ * A hook that provides a context menu that appears on right-click.
+ * It uses the Floating UI library to manage the positioning and interactions of the menu.
+ * This hook is useful for creating custom context menus that can be triggered by right-clicking on elements.
+ *
+ * @param {ContextMenuProps} props - The properties for the ContextMenu hook.
+ * @returns {[React.ReactElement | null, (e: MouseEvent) => void]} An array containing the rendered ContextMenu component (or null if not open) and the function to handle right-click events.
+ */
+export const useContextMenu = (
+  menu: React.ReactElement<typeof Menu>,
+): [Overlay: React.ReactNode, onContentMenu: (e: React.MouseEvent) => void] => {
+  const [isOpen, setIsOpen] = useState(false);
+  const nodeId = useFloatingNodeId();
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    nodeId,
+    onOpenChange: (open, evt, reason) => {
+      const target = evt?.target as HTMLElement;
+      if (!target?.closest(".menu-list")) setIsOpen(open);
+    },
+    strategy: "fixed",
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(8), flip()],
+  });
+
+  const click = useClick(context, {
+    toggle: true,
+    ignoreMouse: true,
+  });
+  const dismiss = useDismiss(context, { bubbles: true });
+
+  const { getFloatingProps } = useInteractions([dismiss, click]);
+
+  const handleClick = useEffectEvent((e: React.MouseEvent) => {
+    const virtual = {
+      getBoundingClientRect() {
+        return {
+          width: 0,
+          height: 0,
+          x: e.clientX,
+          y: e.clientY,
+          top: e.clientY,
+          left: e.clientX,
+          right: e.clientX,
+          bottom: e.clientY,
+        };
+      },
+    };
+    refs.setReference(virtual);
+    setIsOpen(true);
+    e.nativeEvent.stopImmediatePropagation();
+    e.preventDefault();
+    return false;
+  });
+
+  const tryClosing = useRef((e: React.MouseEvent) => {
+    if (!(e.target as HTMLElement)?.closest("[data-dropdown-dismiss='false']")) setTimeout(() => setIsOpen(false), 50);
+  });
+
+  return [
+    isOpen && (
+      <FloatingPortal root={refs.domReference.current?.closest<HTMLElement>(".theme-base") ?? undefined}>
+        <FloatingOverlay
+          lockScroll
+          style={{
+            zIndex: "var(--z-overlay-mask)",
+            position: "absolute",
+            overflow: "hidden",
+          }}
+        >
+          <FloatingFocusManager context={context}>
+            {cloneElement(menu as AnyObject, {
+              ...getFloatingProps(),
+              style: {
+                ...floatingStyles,
+                borderRadius: "var(--rounding)",
+                zIndex: "var(--z-popover)",
+                fontSize: "0.875rem",
+              },
+              className: "bg-default outline rounded-capped shadow-lg",
+              ref: refs.setFloating,
+              onMouseUp: tryClosing.current,
+            })}
+          </FloatingFocusManager>
+        </FloatingOverlay>
+      </FloatingPortal>
+    ),
+    handleClick,
+  ];
+};

package/src/hooks/useIsDark.ts

@@ -21,7 +21,8 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useCallback, useState } from "react";
+import { debounce } from "@react-fabric/utilities";
+import { useEffectEvent, useState } from "react";
 import { useLayoutEffectDebugger } from "./useEffectDebugger";
 
 /**
@@ -34,18 +35,19 @@ import { useLayoutEffectDebugger } from "./useEffectDebugger";
  */
 export const useIsDark = () => {
   const [isDark, setDark] = useState(false);
-  const checkTheme = useCallback(() => {
+  const checkTheme = useEffectEvent(() => {
     const [r] = getComputedStyle(
       document.documentElement,
     ).backgroundColor.match(/\d?\d?\d/g) as AnyObject;
     setDark(+r < 50);
-  }, []);
+  });
   useLayoutEffectDebugger(
     () => {
       if (MutationObserver) {
-        const ob = new MutationObserver(checkTheme);
+        const cb = debounce(checkTheme, 100);
+        const ob = new MutationObserver(cb);
         ob.observe(document.documentElement, { attributes: true });
-        checkTheme();
+        cb();
         return () => {
           ob.disconnect();
         };

package/src/hooks/useNavigator.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useCallback, useMemo, useState } from "react";
+import { useEffectEvent, useMemo, useState } from "react";
 
 /**
  * Custom hook to manage navigation through a list of items.
@@ -44,20 +44,17 @@ import { useCallback, useMemo, useState } from "react";
 export const useNavigator = (totalCount = 0, defaultIndex = 0) => {
   const [currentIndex, setCurrentIndex] = useState(defaultIndex);
 
-  const onNavigate = useCallback(
-    (dir: 1 | -1) => {
-      setCurrentIndex((prevValue) => {
-        if (dir === -1) {
-          return prevValue > 0 ? prevValue - 1 : totalCount - 1;
-        }
-        if (dir === 1) {
-          return prevValue + 1 < totalCount ? prevValue + 1 : 0;
-        }
-        return prevValue;
-      });
-    },
-    [totalCount],
-  );
+  const onNavigate = useEffectEvent((dir: 1 | -1) => {
+    setCurrentIndex((prevValue) => {
+      if (dir === -1) {
+        return prevValue > 0 ? prevValue - 1 : totalCount - 1;
+      }
+      if (dir === 1) {
+        return prevValue + 1 < totalCount ? prevValue + 1 : 0;
+      }
+      return prevValue;
+    });
+  });
   const headLabel = useMemo(
     () => (
       <span className="text-muted leading-none select-none">

package/src/hooks/useOverlayService.tsx

@@ -23,9 +23,7 @@
 
 import { useRef, useState } from "react";
 import { type ModalProps } from "../types";
-
-// return the blank function since state functionality will execute if the value is function
-const EMPTY_FC = () => () => null;
+import { EMPTY_FC } from "@react-fabric/utilities";
 
 /**
  * Hook to manage overlay components like modals or flyouts.
@@ -59,8 +57,7 @@ export const useOverlayService = <T extends AnyObject = AnyObject>(
   openOverlay: (props?: Partial<T>) => Promise<AnyObject>,
   closeOverlay: ((args?: AnyObject) => void) | null,
 ] => {
-  const [Overlay, setOverlay] =
-    useState<React.FunctionComponent<Partial<T>>>(EMPTY_FC);
+  const [Overlay, setOverlay] = useState<React.FunctionComponent<Partial<T>>>(EMPTY_FC);
 
   const existingOpenPromise = useRef<AnyObject | null>(null);
   const openOverlay = async ({ onClose, ...outerProps }: AnyObject = {}) => {
@@ -74,13 +71,8 @@ export const useOverlayService = <T extends AnyObject = AnyObject>(
         onClose?.(args);
         existingOpenPromise.current = null;
       };
-      // eslint-disable-next-line react/display-name
       setOverlay(() => (overrideProps: Partial<T>) => (
-        <ModalOrFlyout
-          {...outerProps}
-          {...(overrideProps as any)}
-          onClose={existingOpenPromise.current}
-        />
+        <ModalOrFlyout {...outerProps} {...(overrideProps as any)} onClose={existingOpenPromise.current} />
       ));
     });
   };

package/src/hooks/usePropToggle.ts

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useCallback, useRef, useState, type RefObject } from "react";
+import { useEffectEvent, useRef, useState, type RefObject } from "react";
 import { useLayoutEffectDebugger } from "./useEffectDebugger";
 
 /**
@@ -61,12 +61,12 @@ export const usePropToggle = (
   );
 
   /** ***************** toggle handler *******************/
-  const doToggle = useCallback(() => {
+  const doToggle = useEffectEvent(() => {
     if (onToggle?.(!toggleOn, key) !== false) {
       toggleRef.current = !toggleOn;
       setToggleOn(!toggleOn);
     }
-  }, [toggleOn, onToggle, key]);
+  });
 
   return [toggleOn, doToggle, toggleRef];
 };

package/src/hooks/useResize.ts

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useCallback, useRef, type RefObject } from "react";
+import { useCallback, useEffectEvent, useRef, type RefObject } from "react";
 import { useIsRtl } from "./useIsRtl";
 
 interface Options {
@@ -74,14 +74,14 @@ export const useResize = <T extends HTMLElement = HTMLDivElement>(
         /** ***************** check if reverse enabled of RTL *******************/
         const reversed = ((isRtl ? 1 : 0) ^ (isReverse ? 1 : 0)) === 1;
         const box = refEl.current?.getBoundingClientRect();
-        const x =
-          (evt.clientX - (reversed ? box.left : box.right)) *
-          (reversed ? -1 : 1);
-        const y = evt.clientY - box.bottom;
+        const diffX = ((box.left + box.right) / 2) * (reversed ? -1 : 1);
+        const diffY = (box.top + box.bottom) / 2;
+        const x = evt.clientX - diffX;
+        const y = evt.clientY - diffY;
         onResize({ x, y });
       }
     },
-    [onResize, isRtl, isReverse],
+    [isRtl, isReverse, onResize],
   );
 
   /** ***************** dettach handlers on mouseup *******************/
@@ -90,19 +90,16 @@ export const useResize = <T extends HTMLElement = HTMLDivElement>(
     document.removeEventListener("mousemove", onResizing);
     document.removeEventListener("mouseup", onResizeEnd);
     onEnd?.();
-  }, [onEnd, onResizing]);
+  }, [onResizing, onEnd]);
 
   /** ***************** attach handlers on mousedown *******************/
-  const onResizeStart = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      document.body.style.cursor = isVertical ? "row-resize" : "col-resize";
-      document.addEventListener("mousemove", onResizing);
-      document.addEventListener("mouseup", onResizeEnd);
-      onStart?.();
-    },
-    [onResizing, onResizeEnd, onStart],
-  );
+  const onResizeStart = useEffectEvent((e: React.MouseEvent) => {
+    e.preventDefault();
+    document.body.style.cursor = isVertical ? "row-resize" : "col-resize";
+    document.addEventListener("mousemove", onResizing);
+    document.addEventListener("mouseup", onResizeEnd);
+    onStart?.();
+  });
 
   return { ref: refEl, onMouseDown: onResizeStart };
 };

package/src/hooks/useResizeObserver.ts

@@ -21,10 +21,10 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { useEffect, useRef, useTransition, type RefObject } from "react";
+import { useEffectEvent, useRef, useTransition, type RefObject } from "react";
 import ResizeObserver from "resize-observer-polyfill";
 import { type SizeObject } from "../types";
-import { useDebounce } from "./useDebounce";
+import { useEffectDebugger } from "./useEffectDebugger";
 
 /**
  * Custom hook to observe size changes of an element using ResizeObserver.
@@ -51,28 +51,28 @@ export const useResizeObserver = <T extends HTMLElement = HTMLDivElement>(
   const ref = useRef<T>(null);
   const [, startTransition] = useTransition();
 
-  const callbackResize = useDebounce(
+  const callbackResize = useEffectEvent(() => {
+    startTransition(() => {
+      if (onResize && ref.current != null) {
+        const { offsetWidth: width, offsetHeight: height } = ref.current;
+        onResize?.({ width, height });
+      }
+    });
+  });
+
+  useEffectDebugger(
     () => {
-      startTransition(() => {
-        if (onResize && ref.current != null) {
-          const { offsetWidth: width, offsetHeight: height } = ref.current;
-          onResize?.({ width, height });
-        }
-      });
+      if (ref.current != null) {
+        const ob = new ResizeObserver(callbackResize);
+        ob.observe(ref.current);
+        return () => {
+          ob.disconnect();
+        };
+      }
     },
-    [onResize],
-    0,
+    [],
+    "useResizeObserver",
   );
 
-  useEffect(() => {
-    if (ref.current != null) {
-      const ob = new ResizeObserver(callbackResize);
-      ob.observe(ref.current);
-      return () => {
-        ob.disconnect();
-      };
-    }
-  }, [callbackResize, ref]);
-
   return ref;
 };

package/src/hooks/useStepper.tsx

@@ -36,7 +36,7 @@ export const useStepper = ({
 
   const stepper = useMemo(() => {
     return (
-      <div className="fabric-stepper bg-base flex-1 flex justify-center py-1 px-2 overflow-x-auto">
+      <div className="fabric-stepper bg-default flex-1 flex justify-center py-1 px-2 overflow-x-auto">
         {steps.map((child: any, index) => (
           <div
             className="fabric-stepper--pill"

package/src/hotkeys/HotKey.tsx

@@ -22,8 +22,8 @@
  */
 
 import { useEffectDebugger } from "../hooks/useEffectDebugger";
-import { useHotKeys } from "./HotKeyWrapper";
 import { type HotKeyProps } from "./commons";
+import { useHotKeys } from "./context";
 
 export const HotKey = ({ keyCombo, global, handler }: HotKeyProps) => {
   const { addHotKey, removeHotKey } = useHotKeys();

package/src/hotkeys/HotKeyWrapper.tsx

@@ -21,119 +21,95 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  createContext,
-  memo,
-  useCallback,
-  useContext,
-  useRef,
-  type FC,
-  type PropsWithChildren,
-} from "react";
+import { memo, useCallback, useEffectEvent, useRef, type FC, type PropsWithChildren } from "react";
 import { useEffectDebugger } from "../hooks/useEffectDebugger";
 import { reduceHotKey } from "./commons";
+import { HotKeysContext } from "./context";
 
-/** @internal */
-export const HotKeysContext = createContext<{
-  addHotKey: (key: string, handler: () => void, global?: boolean) => void;
-  removeHotKey: (key: string) => void;
-}>({} as AnyObject);
+export const HotKeyWrapper: FC<PropsWithChildren> = memo(({ children }: PropsWithChildren) => {
+  const refEl = useRef<HTMLDivElement>(null);
+  const keyList = useRef<KeyValue[]>([]);
 
-export const useHotKeys = () => useContext(HotKeysContext);
+  const addHotKey = useEffectEvent(
+    (keyCombo: string, handler: () => void, global = false) =>
+      (keyList.current = [
+        ...keyList.current.filter(({ _key }) => _key !== keyCombo),
+        reduceHotKey({ keyCombo, handler, global }),
+      ]),
+  );
+  const removeHotKey = useEffectEvent(
+    (key: string) => (keyList.current = [...keyList.current.filter(({ _key }) => _key !== key)]),
+  );
 
-export const HotKeyWrapper: FC<PropsWithChildren> = memo(
-  ({ children }: PropsWithChildren) => {
-    const refEl = useRef<HTMLDivElement>(null);
-    const keyList = useRef<KeyValue[]>([]);
-
-    const addHotKey = useCallback(
-      (keyCombo: string, handler: () => void, global = false) =>
-        (keyList.current = [
-          ...keyList.current.filter(({ _key }) => _key !== keyCombo),
-          reduceHotKey({ keyCombo, handler, global }),
-        ]),
-      [],
-    );
-    const removeHotKey = useCallback(
-      (key: string) =>
-        (keyList.current = [
-          ...keyList.current.filter(({ _key }) => _key !== key),
-        ]),
-      [],
+  const handler = useEffectEvent((items: KeyValue[], event: KeyboardEvent) => {
+    if (items.length === 0) return;
+    const { key: keyCode, code, altKey, ctrlKey, metaKey, shiftKey } = event;
+    if (
+      keyCode !== "Enter" &&
+      keyCode !== "Esc" &&
+      ["INPUT", "TEXTAREA", "SELECT"].includes((event.target as HTMLElement).tagName)
+    )
+      return;
+    const find = items.find(
+      ({ key, alt, ctrl, meta, shift }: KeyValue) =>
+        (key.toLowerCase() === keyCode.toLowerCase() ||
+          key.toLowerCase() === code.toLowerCase() ||
+          // work around for macos alt+key issue
+          `key${key.toLowerCase()}` === code.toLowerCase()) &&
+        alt === altKey &&
+        ctrl === ctrlKey &&
+        meta === metaKey &&
+        shift === shiftKey,
     );
+    if (find?.handler) {
+      find.handler();
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  });
 
-    const handler = useCallback((items: KeyValue[], event: KeyboardEvent) => {
-      if (items.length === 0) return;
-      const { key: keyCode, code, altKey, ctrlKey, metaKey, shiftKey } = event;
-      if (
-        keyCode !== "Enter" &&
-        keyCode !== "Esc" &&
-        ["INPUT", "TEXTAREA", "SELECT"].includes(
-          (event.target as HTMLElement).tagName,
-        )
-      )
-        return;
-      const find = items.find(
-        ({ key, alt, ctrl, meta, shift }: KeyValue) =>
-          (key.toLowerCase() === keyCode.toLowerCase() ||
-            key.toLowerCase() === code.toLowerCase() ||
-            // work around for macos alt+key issue
-            `key${key.toLowerCase()}` === code.toLowerCase()) &&
-          alt === altKey &&
-          ctrl === ctrlKey &&
-          meta === metaKey &&
-          shift === shiftKey,
+  const handleGlobal = useCallback(
+    (event: KeyboardEvent) => {
+      handler(
+        keyList.current.filter((i) => i.global),
+        event,
       );
-      if (find?.handler) {
-        find.handler();
-        event.preventDefault();
-        event.stopImmediatePropagation();
-      }
-    }, []);
-
-    const handleGlobal = useCallback(
-      (event: KeyboardEvent) => {
-        handler(
-          keyList.current.filter((i) => i.global),
-          event,
-        );
-      },
-      [handler],
-    );
-    const handleHotKey = useCallback(
-      (event: KeyboardEvent) => {
-        handler(
-          keyList.current.filter((i) => !i.global),
-          event,
-        );
-      },
-      [handler],
-    );
+    },
+    [handler],
+  );
+  const handleHotKey = useCallback(
+    (event: KeyboardEvent) => {
+      handler(
+        keyList.current.filter((i) => !i.global),
+        event,
+      );
+    },
+    [handler],
+  );
 
-    useEffectDebugger(
-      () => {
-        const el: HTMLElement | null | undefined = refEl.current?.parentElement;
-        if (el) {
-          el.tabIndex = 0;
-          el.addEventListener("keydown", handleHotKey);
-          document.addEventListener("keydown", handleGlobal);
-          return () => {
-            el.removeEventListener("keydown", handleHotKey);
-            document.removeEventListener("keydown", handleGlobal);
-          };
-        }
-      },
-      [handleGlobal, handleHotKey],
-      "HotKeyWrapper attach handlers",
-    );
+  useEffectDebugger(
+    () => {
+      const el: HTMLElement | null | undefined = refEl.current?.parentElement;
+      if (el) {
+        el.tabIndex = 0;
+        el.addEventListener("keydown", handleHotKey);
+        document.addEventListener("keydown", handleGlobal);
+        return () => {
+          el.removeEventListener("keydown", handleHotKey);
+          document.removeEventListener("keydown", handleGlobal);
+        };
+      }
+    },
+    [handleGlobal, handleHotKey],
+    "HotKeyWrapper attach handlers",
+  );
 
-    return (
-      <HotKeysContext.Provider value={{ addHotKey, removeHotKey }}>
-        <div ref={refEl} style={{ display: "contents" }}>
-          {children}
-        </div>
-      </HotKeysContext.Provider>
-    );
-  },
-);
+  return (
+    <HotKeysContext.Provider value={{ addHotKey, removeHotKey }}>
+      <div ref={refEl} style={{ display: "contents" }}>
+        {children}
+      </div>
+    </HotKeysContext.Provider>
+  );
+});
 HotKeyWrapper.displayName = "HotKeyProvider";

package/src/hotkeys/commons.ts

@@ -67,6 +67,8 @@ export const reduceHotKey = ({ keyCombo, global, handler }: HotKeyProps) => {
       else if (e.trim().toLowerCase() === "down") item.key = "arrowdown";
       else if (e.trim().toLowerCase().startsWith("del")) item.key = "delete";
       else if (e.trim().toLowerCase().startsWith("esc")) item.key = "escape";
+      else if (e.trim().toLowerCase().startsWith("plus")) item.key = "+";
+      else if (e.trim().toLowerCase().startsWith("minus")) item.key = "-";
       else item.key = e.trim().toLowerCase();
     }
   });

package/src/hotkeys/context.ts

@@ -0,0 +1,32 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2026 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+import { createContext, useContext } from "react";
+
+/** @internal */
+export const HotKeysContext = createContext<{
+  addHotKey: (key: string, handler: () => void, global?: boolean) => void;
+  removeHotKey: (key: string) => void;
+}>({} as AnyObject);
+
+export const useHotKeys = () => useContext(HotKeysContext);