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

Nav's Pattern Library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as PopoverPrimitive from '@radix-ui/react-popover';
import { CopyOnSurface } from '../copy/index.js';
import { NoStyleButton } from '../../no-style-button.js';
import { Icon } from '../icon/icon.js';
import { cn } from '../../cn.js';
const PopoverRoot = PopoverPrimitive.Root;
const PopoverTrigger = PopoverPrimitive.Trigger;
const PopoverPortal = PopoverPrimitive.Portal;
export const PopoverClose = PopoverPrimitive.Close;
const PopoverContent = (_a) => {
    var { children } = _a, props = __rest(_a, ["children"]);
    return (_jsx(PopoverPortal, { children: _jsx(PopoverPrimitive.Content, Object.assign({}, props, { children: children })) }));
};
const Content = ({ title, description, buttons, className, }) => (_jsxs("div", { className: cn(`flex flex-col rounded-300 p-200 bg-surfaceContainer shadow-elevation3 w-[260px] gap-100 ${className}`), children: [_jsxs("div", { className: "flex justify-between", children: [_jsx(CopyOnSurface, { size: "headline", variant: "emphasized", children: title }), _jsx(PopoverClose, { asChild: true, children: _jsx(NoStyleButton, { "aria-label": "Close", children: _jsx(Icon, { name: "actions/close", size: "small", className: "onSurfaceVariant" }) }) })] }), _jsx("div", { className: "body2 text-onSurfaceVariant", children: description }), buttons && (_jsx("div", { className: "self-end mt-100", children: _jsx(PopoverClose, { asChild: true, children: buttons }) }))] }));
export const Popover = (_a) => {
    var { title, description, buttons, open, defaultOpen, onOpenChange, trigger, modal = false, hasArrow = false, align = 'start', sideOffset = 5, children, className } = _a, props = __rest(_a, ["title", "description", "buttons", "open", "defaultOpen", "onOpenChange", "trigger", "modal", "hasArrow", "align", "sideOffset", "children", "className"]);
    return (_jsxs(PopoverRoot, { open, defaultOpen, onOpenChange, modal, children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsxs(PopoverContent, Object.assign({ align, sideOffset }, props, { children: [hasArrow && _jsx(PopoverPrimitive.Arrow, {}), children || _jsx(Content, { title, description, buttons, className })] }))] }));
};
//# sourceMappingURL=popover.js.map