supabase/apps/studio/hooks/ui/useHotKey.ts

import { useEffect } from 'react'
import { useLatest } from 'react-use'

// [Joshen] Refactor: Remove dependencies, and just make this into a single definition
function useHotKey(
  callback: (e: KeyboardEvent) => void,
  key: string,
  options?: { enabled?: boolean; shift?: boolean }
): void
/**
 * @deprecated The `dependencies` parameter is deprecated. Use the overload without dependencies instead.
 */
function useHotKey(
  callback: (e: KeyboardEvent) => void,
  key: string,
  dependencies: unknown[],
  options?: { enabled?: boolean; shift?: boolean }
): void
function useHotKey(
  callback: (e: KeyboardEvent) => void,
  key: string,
  dependenciesOrOptions?: unknown[] | { enabled?: boolean; shift?: boolean },
  options?: { enabled?: boolean; shift?: boolean }
): void {
  // Determine which overload was called
  const isDepsArray = Array.isArray(dependenciesOrOptions)
  const resolvedOptions = isDepsArray ? options : dependenciesOrOptions
  const enabled = resolvedOptions?.enabled ?? true
  const shift = resolvedOptions?.shift ?? false

  const enabledRef = useLatest(enabled)
  const callbackRef = useLatest(callback)
  const keyRef = useLatest(key)
  const shiftRef = useLatest(shift)

  useEffect(() => {
    function handler(e: KeyboardEvent) {
      if (!enabledRef.current) return
      if (
        (e.metaKey || e.ctrlKey) &&
        e.key.toLowerCase() === keyRef.current.toLowerCase() &&
        !e.altKey &&
        (shiftRef.current ? e.shiftKey : !e.shiftKey)
      ) {
        callbackRef.current(e)
      }
    }

    window.addEventListener('keydown', handler, true)
    return () => {
      window.removeEventListener('keydown', handler, true)
    }
  }, [callbackRef, enabledRef, keyRef, shiftRef])
}

export { useHotKey }