@dreamkit/solid/lib/components/ClickAwayListener.js

DreamKit tools for Solid.

import { createComponent, onCleanup, onMount } from "solid-js";
import { Dynamic } from "solid-js/web";
export function ClickAwayListener(props) {
    let element;
    const onClick = (event) => {
        if (element && !element.contains(event.target))
            props.onClick?.();
    };
    onMount(() => {
        document.addEventListener("mousedown", onClick);
    });
    onCleanup(() => {
        document.removeEventListener("mousedown", onClick);
    });
    return createComponent(Dynamic, {
        component: "div",
        style: { width: "100%", height: "100%" },
        get children() {
            return props.children;
        },
    });
}