refactor: event listener hooks to package

.changeset/moody-mails-change.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/react-use-event-listener": patch
+---
+
+Initial release

hooks/use-event-listener/README.md

@@ -0,0 +1,24 @@
+# @chakra-ui/use-event-listener
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @chakra-ui/react-use-event-listener
+# or
+npm i @chakra-ui/react-use-event-listener
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).

hooks/use-event-listener/index.ts

@@ -0,0 +1 @@
+export * from "./src"

hooks/use-event-listener/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@chakra-ui/react-use-event-listener",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [
+    "use-event-listener"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui#readme",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui.git",
+    "directory": "packages/use-event-listener"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui/issues"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "dev": "pnpm build -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build:fast": "tsup src/index.ts --format=esm,cjs"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "react": "^18.0.0"
+  },
+  "dependencies": {
+    "@chakra-ui/react-use-callback-ref": "workspace:*"
+  }
+}

hooks/use-event-listener/src/index.ts

@@ -0,0 +1,27 @@
+import { useEffect } from "react"
+import { useCallbackRef } from "@chakra-ui/react-use-callback-ref"
+
+export function useEventListener(
+  target: EventTarget | null | (() => EventTarget | null),
+  event: string,
+  handler: (event: Event) => void,
+  options?: boolean | AddEventListenerOptions,
+) {
+  const listener = useCallbackRef(handler)
+
+  useEffect(() => {
+    const node = typeof target === "function" ? target() : target ?? document
+
+    if (!handler || !node) return
+
+    node.addEventListener(event, listener, options)
+    return () => {
+      node.removeEventListener(event, listener, options)
+    }
+  }, [event, target, options, listener, handler])
+
+  return () => {
+    const node = typeof target === "function" ? target() : target ?? document
+    node?.removeEventListener(event, listener, options)
+  }
+}