@wener/console/lib/floating/Drawer.js

Base console UI toolkit

import React, { cloneElement, isValidElement, useEffect, useId, useState } from "react";
import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
function useMediaQuery({ query }) {
    const [matches, setMatches] = useState(false);
    useEffect(()=>{
        const mediaQuery = window.matchMedia(query);
        const listener = ()=>setMatches(mediaQuery.matches);
        listener();
        mediaQuery.addEventListener('change', listener);
        return ()=>mediaQuery.removeEventListener('change', listener);
    }, [
        query
    ]);
    return matches;
}
export function Drawer({ children, render }) {
    const [open, setOpen] = useState(false);
    const isLargeScreen = useMediaQuery({
        query: '(min-width: 1400px)'
    });
    const { refs, context } = useFloating({
        open,
        onOpenChange: setOpen
    });
    const id = useId();
    const labelId = `${id}-label`;
    const descriptionId = `${id}-description`;
    const modal = !isLargeScreen;
    const { getReferenceProps, getFloatingProps } = useInteractions([
        useClick(context),
        useRole(context),
        useDismiss(context, {
            outsidePress: modal,
            outsidePressEvent: 'mousedown'
        })
    ]);
    const content = /*#__PURE__*/ React.createElement(FloatingFocusManager, {
        context: context,
        modal: modal,
        closeOnFocusOut: modal
    }, /*#__PURE__*/ React.createElement("div", {
        ref: refs.setFloating,
        "aria-labelledby": labelId,
        "aria-describedby": descriptionId,
        className: "absolute right-0 top-0 h-full w-48 bg-slate-100 p-4",
        ...getFloatingProps()
    }, render({
        labelId,
        descriptionId,
        close: ()=>setOpen(false)
    })));
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ isValidElement(children) && /*#__PURE__*/ cloneElement(children, getReferenceProps({
        ref: refs.setReference
    })), /*#__PURE__*/ React.createElement(FloatingPortal, {
        id: "drawer-root"
    }, open && (modal ? /*#__PURE__*/ React.createElement(FloatingOverlay, {
        lockScroll: true,
        style: {
            background: 'rgba(0, 0, 0, 0.8)',
            zIndex: 1
        }
    }, content) : content)));
}

//# sourceMappingURL=Drawer.js.map