**Feature:** TopbarSelect hooks

src/TopbarSelect/TopbarSelect.tsx

@@ -1,9 +1,7 @@
-import React, { useRef, useState } from "react"
+import React, { useLayoutEffect, useRef, useState } from "react"
 
 import ContextMenu, { ContextMenuProps } from "../ContextMenu/ContextMenu"
 import Icon from "../Icon/Icon"
-import useDebouncedCallback from "../useDebouncedCallback"
-import useWindowEventListener from "../useWindowEventListener"
 import styled from "../utils/styled"
 
 export interface TopbarSelectProps {
@@ -66,19 +64,11 @@ const TopbarSelect = ({ label, selected, items, onChange, ...props }: TopbarSele
 
   const containerRef = useRef<HTMLDivElement>(null)
 
-  const updateContainerWidth = () => {
-    if (!containerRef.current) {
-      return
-    }
-
-    if (containerRef.current.clientWidth !== containerWidth) {
+  useLayoutEffect(() => {
+    if (containerRef.current) {
       setContainerWidth(containerRef.current.clientWidth)
     }
-  }
-
-  const debouncedUpdateRenderedWidth = useDebouncedCallback(updateContainerWidth, 100, [])
-
-  useWindowEventListener("resize", debouncedUpdateRenderedWidth)
+  })
 
   return (
     <ContextMenu

src/useWindowEventListener/README.md

@@ -1,11 +1,21 @@
 ## Usage
 
-TODO
+This hook is used to attach a callback to a window event.
 
 ```jsx
-const MyComponent = () => {
-  return <>TODO</>
+const Example = () => {
+  const [pressedKeys, setKeys] = useState([])
+  useWindowEventListener("keypress", ev => {
+    setKeys([...keys, ev.key])
+  })
+
+  return (
+    <div>
+      <strong>Press any keys: </strong>
+      <output>{pressedKeys.join(" > ")}</output>
+    </div>
+  )
 }
 
-;<MyComponent />
+;<Example />
 ```

src/useWindowEventListener/index.ts

@@ -3,11 +3,12 @@ import { useEffect } from "react"
 /**
  * Hook version of window.addEventListener.
  */
-function useWindowEventListener<K extends keyof GlobalEventHandlersEventMap>(
+
+function useWindowEventListener<K extends keyof WindowEventMap>(
   type: K,
-  listener: EventListenerOrEventListenerObject,
-  addOptions?: AddEventListenerOptions,
-  removeOptions?: EventListenerOptions,
+  listener: (ev: WindowEventMap[K]) => any,
+  addOptions?: boolean | AddEventListenerOptions,
+  removeOptions?: boolean | EventListenerOptions,
 ) {
   useEffect(() => {
     window.addEventListener(type, listener, addOptions)