@navinc/base-react-components/dist/wayfinder/drawer/drawer.js

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Drawer as VaulDrawer } from 'vaul';
import { Button } from '../button/button.js';
import { useState } from 'react';
import { useMediaQuery } from '../../use-media-query.js';
import { mediaQueryFragments } from '../../themes/media.js';
// Export individual drawer components
export const DrawerTrigger = VaulDrawer.Trigger;
export const DrawerContent = VaulDrawer.Content;
export const DrawerOverlay = VaulDrawer.Overlay;
export const DrawerTitle = VaulDrawer.Title;
export const DrawerPortal = VaulDrawer.Portal;
export const DrawerRoot = VaulDrawer.Root;
export const Drawer = ({ direction = 'right', trigger = 'Open Drawer', title = 'Drawer Title', footer, shouldShowCloseButtonInTitle = false, children, open: controlledOpen, onOpenChange, shouldHaveGradient = false, gradientHeight = '80px', }) => {
    const isMobile = !useMediaQuery(mediaQueryFragments.largerThanPhone);
    const [defaultOpen, setDefaultOpen] = useState(false);
    const isControlled = controlledOpen !== undefined;
    const isOpen = isControlled ? controlledOpen : defaultOpen;
    const handleOpenChange = (newOpen) => {
        if (!isControlled) {
            setDefaultOpen(newOpen);
        }
        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(newOpen);
    };
    const handleClose = () => handleOpenChange(false);
    const renderTitle = () => (typeof title === 'function' ? title({ onClose: handleClose }) : title);
    const renderFooter = () => (typeof footer === 'function' ? footer({ onClose: handleClose }) : footer);
    return (_jsxs(DrawerRoot, { open: isOpen, onOpenChange: handleOpenChange, shouldScaleBackground: isMobile, setBackgroundColorOnScale: false, direction: isMobile ? 'bottom' : direction, children: [trigger && (_jsx(DrawerTrigger, { "data-testid": "drawer-trigger", className: "cursor-pointer", asChild: true, children: trigger })), _jsxs(DrawerPortal, { children: [_jsx(DrawerOverlay, { className: "fixed inset-0 backdrop-blur-[2px] bg-surfaceContainerLowest/50 z-10" }), _jsx(DrawerContent, { className: "flex flex-col rounded-t-400 tablet:w-[520px] w-full fixed h-full tablet:h-auto tablet:bottom-300 tablet:right-300 top-0 z-10 outline-none pt-300 !select-text", children: _jsxs("div", { className: "bg-surfaceContainer h-full w-full grow flex flex-col rounded-500 shadow-elevation3 relative overflow-hidden", children: [isMobile && _jsx("div", { className: "mx-auto w-500 h-50 flex-shrink-0 rounded-full bg-onSurfaceDim my-100" }), _jsx("div", { className: "sticky z-10 w-full", children: _jsxs(DrawerTitle, { className: "font-medium px-300 pt-300 pb-200 backdrop-blur-md bg-surface/60 flex items-center justify-between", children: [renderTitle(), shouldShowCloseButtonInTitle && (_jsx(Button, { "data-testid": "drawer-close-button", onClick: handleClose, children: "Close" }))] }) }), _jsxs("div", { className: "overflow-auto flex-grow min-h-0", style: { scrollbarWidth: 'none' }, children: [_jsx("div", { className: "px-300 py-200 h-full", children: children }), shouldHaveGradient && (_jsx("div", { className: "bg-gradient-to-b from-surface/0 to-surface z-10 pointer-events-none w-full absolute bottom-0", style: { height: gradientHeight } }))] }), footer && (_jsx("div", { className: "px-300 py-200 bg-surfaceContainerHighest flex justify-end gap-200 z-10 w-full", children: renderFooter() }))] }) })] })] }));
};
//# sourceMappingURL=drawer.js.map