chore(use-composable): add new useEscapeKeydown (#248)

* feat: add useEscapeKeydown

* add a cleanup callback

* add test

* cleanup

packages/core/use-composable/src/index.ts

@@ -7,6 +7,7 @@ export { usePrevious } from './usePrevious'
 export { useRef } from './useRef'
 export { unrefElement } from './unrefElement'
 export { useId } from './useId'
+export { useEscapeKeydown } from './useEscapeKeydown'
 export type { MaybeComputedElementRef } from './unrefElement'
 
 export { computedEager, syncRef }

packages/core/use-composable/src/useEscapeKeydown.test.ts

@@ -0,0 +1,34 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useEscapeKeydown } from './useEscapeKeydown'
+
+describe('useEscapeKeydown', () => {
+  let onEscapeKeyDown: any
+  let ownerDocument: Document
+
+  beforeEach(() => {
+    onEscapeKeyDown = vi.fn()
+    ownerDocument = globalThis.document
+  })
+
+  it('should call onEscapeKeyDown when the escape key is pressed', () => {
+    onEscapeKeyDown = vi.fn()
+    ownerDocument = globalThis.document
+
+    useEscapeKeydown(onEscapeKeyDown, ownerDocument)
+
+    const escapeKeyEvent = new KeyboardEvent('keydown', { key: 'Escape' })
+    ownerDocument.dispatchEvent(escapeKeyEvent)
+
+    expect(onEscapeKeyDown).toHaveBeenCalledTimes(1)
+    expect(onEscapeKeyDown).toHaveBeenCalledWith(escapeKeyEvent)
+  })
+
+  it('should not call onEscapeKeyDown for other key presses', () => {
+    useEscapeKeydown(onEscapeKeyDown, ownerDocument)
+
+    const otherKeyEvent = new KeyboardEvent('keydown', { key: 'Enter' })
+    ownerDocument.dispatchEvent(otherKeyEvent)
+
+    expect(onEscapeKeyDown).not.toHaveBeenCalled()
+  })
+})

packages/core/use-composable/src/useEscapeKeydown.ts

@@ -0,0 +1,23 @@
+import { watchEffect } from 'vue'
+import { useCallbackRef } from './useCallbackRef'
+
+/**
+ * Listens for when the escape key is down
+ */
+function useEscapeKeydown(
+  onEscapeKeyDownProp?: (event: KeyboardEvent) => void,
+  ownerDocument: Document = globalThis?.document,
+) {
+  const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp)
+
+  watchEffect((onInvalidate) => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape')
+        onEscapeKeyDown(event)
+    }
+    ownerDocument.addEventListener('keydown', handleKeyDown)
+    onInvalidate(() => ownerDocument.removeEventListener('keydown', handleKeyDown))
+  })
+}
+
+export { useEscapeKeydown }