import type { Component, ComponentProps } from 'solid-js' import { onCleanup, onMount } from 'solid-js' interface OutSideEventHandlerProps extends ComponentProps<'div'> { onOutsideClick: () => void } export const OutSideEventHandler: Component = (props) => { let ref: HTMLDivElement | undefined const handleClickOutside = (event: MouseEvent | KeyboardEvent): void => { const currentEvent = event as KeyboardEvent if (ref == null) return if (ref.contains(event.target as Node) || currentEvent.key !== 'Escape') return return props.onOutsideClick() } onMount(() => { window.addEventListener('keydown', handleClickOutside) return window.addEventListener('click', handleClickOutside) }) onCleanup(() => { window.removeEventListener('keydown', handleClickOutside) return window.removeEventListener('click', handleClickOutside) }) return (
{props.children}
) }