ivt/dist/chunks/popover-CsYW0nDm.mjs

Ivt Components Library

import * as React from 'react';
import React__default from 'react';
import { c as composeEventHandlers } from './index-Bl-WJHvp.mjs';
import { u as useComposedRefs } from './index-1tQVI0Jh.mjs';
import { c as createContextScope } from './index-DT8WgpCS.mjs';
import { D as DismissableLayer } from './index-DUpRrJTH.mjs';
import { h as hideOthers, R as ReactRemoveScroll, u as useFocusGuards, F as FocusScope } from './index-DvCZGX3H.mjs';
import { u as useId } from './index-tkRL9Tft.mjs';
import { c as createPopperScope, R as Root2$1, A as Anchor, C as Content, a as Arrow } from './index-aLIsJMgt.mjs';
import { P as Portal$1 } from './index-BTe1rv5Z.mjs';
import { P as Presence } from './index-C6s8KI_8.mjs';
import { P as Primitive } from './index-DgKlJYZP.mjs';
import { createSlot } from '@radix-ui/react-slot';
import { u as useControllableState } from './index-D4FMFHi9.mjs';
import { jsx } from 'react/jsx-runtime';
import { c as cn } from './utils-05LlW3Cl.mjs';

var POPOVER_NAME = "Popover";
var [createPopoverContext] = createContextScope(POPOVER_NAME, [
    createPopperScope
]);
var usePopperScope = createPopperScope();
var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
var Popover$1 = (props)=>{
    const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
    const popperScope = usePopperScope(__scopePopover);
    const triggerRef = React.useRef(null);
    const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
    const [open, setOpen] = useControllableState({
        prop: openProp,
        defaultProp: defaultOpen ?? false,
        onChange: onOpenChange,
        caller: POPOVER_NAME
    });
    return /* @__PURE__ */ jsx(Root2$1, {
        ...popperScope,
        children: /* @__PURE__ */ jsx(PopoverProvider, {
            scope: __scopePopover,
            contentId: useId(),
            triggerRef,
            open,
            onOpenChange: setOpen,
            onOpenToggle: React.useCallback(()=>setOpen((prevOpen)=>!prevOpen), [
                setOpen
            ]),
            hasCustomAnchor,
            onCustomAnchorAdd: React.useCallback(()=>setHasCustomAnchor(true), []),
            onCustomAnchorRemove: React.useCallback(()=>setHasCustomAnchor(false), []),
            modal,
            children
        })
    });
};
Popover$1.displayName = POPOVER_NAME;
var ANCHOR_NAME = "PopoverAnchor";
var PopoverAnchor$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopePopover, ...anchorProps } = props;
    const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
    const popperScope = usePopperScope(__scopePopover);
    const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
    React.useEffect(()=>{
        onCustomAnchorAdd();
        return ()=>onCustomAnchorRemove();
    }, [
        onCustomAnchorAdd,
        onCustomAnchorRemove
    ]);
    return /* @__PURE__ */ jsx(Anchor, {
        ...popperScope,
        ...anchorProps,
        ref: forwardedRef
    });
});
PopoverAnchor$1.displayName = ANCHOR_NAME;
var TRIGGER_NAME = "PopoverTrigger";
var PopoverTrigger$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopePopover, ...triggerProps } = props;
    const context = usePopoverContext(TRIGGER_NAME, __scopePopover);
    const popperScope = usePopperScope(__scopePopover);
    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
    const trigger = /* @__PURE__ */ jsx(Primitive.button, {
        type: "button",
        "aria-haspopup": "dialog",
        "aria-expanded": context.open,
        "aria-controls": context.contentId,
        "data-state": getState(context.open),
        ...triggerProps,
        ref: composedTriggerRef,
        onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
    });
    return context.hasCustomAnchor ? trigger : /* @__PURE__ */ jsx(Anchor, {
        asChild: true,
        ...popperScope,
        children: trigger
    });
});
PopoverTrigger$1.displayName = TRIGGER_NAME;
var PORTAL_NAME = "PopoverPortal";
var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME, {
    forceMount: void 0
});
var PopoverPortal = (props)=>{
    const { __scopePopover, forceMount, children, container } = props;
    const context = usePopoverContext(PORTAL_NAME, __scopePopover);
    return /* @__PURE__ */ jsx(PortalProvider, {
        scope: __scopePopover,
        forceMount,
        children: /* @__PURE__ */ jsx(Presence, {
            present: forceMount || context.open,
            children: /* @__PURE__ */ jsx(Portal$1, {
                asChild: true,
                container,
                children
            })
        })
    });
};
PopoverPortal.displayName = PORTAL_NAME;
var CONTENT_NAME = "PopoverContent";
var PopoverContent$1 = React.forwardRef((props, forwardedRef)=>{
    const portalContext = usePortalContext(CONTENT_NAME, props.__scopePopover);
    const { forceMount = portalContext.forceMount, ...contentProps } = props;
    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
    return /* @__PURE__ */ jsx(Presence, {
        present: forceMount || context.open,
        children: context.modal ? /* @__PURE__ */ jsx(PopoverContentModal, {
            ...contentProps,
            ref: forwardedRef
        }) : /* @__PURE__ */ jsx(PopoverContentNonModal, {
            ...contentProps,
            ref: forwardedRef
        })
    });
});
PopoverContent$1.displayName = CONTENT_NAME;
var Slot = createSlot("PopoverContent.RemoveScroll");
var PopoverContentModal = React.forwardRef((props, forwardedRef)=>{
    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
    const contentRef = React.useRef(null);
    const composedRefs = useComposedRefs(forwardedRef, contentRef);
    const isRightClickOutsideRef = React.useRef(false);
    React.useEffect(()=>{
        const content = contentRef.current;
        if (content) return hideOthers(content);
    }, []);
    return /* @__PURE__ */ jsx(ReactRemoveScroll, {
        as: Slot,
        allowPinchZoom: true,
        children: /* @__PURE__ */ jsx(PopoverContentImpl, {
            ...props,
            ref: composedRefs,
            trapFocus: context.open,
            disableOutsidePointerEvents: true,
            onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event)=>{
                event.preventDefault();
                if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus();
            }),
            onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event)=>{
                const originalEvent = event.detail.originalEvent;
                const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
                const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
                isRightClickOutsideRef.current = isRightClick;
            }, {
                checkForDefaultPrevented: false
            }),
            onFocusOutside: composeEventHandlers(props.onFocusOutside, (event)=>event.preventDefault(), {
                checkForDefaultPrevented: false
            })
        })
    });
});
var PopoverContentNonModal = React.forwardRef((props, forwardedRef)=>{
    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
    const hasInteractedOutsideRef = React.useRef(false);
    const hasPointerDownOutsideRef = React.useRef(false);
    return /* @__PURE__ */ jsx(PopoverContentImpl, {
        ...props,
        ref: forwardedRef,
        trapFocus: false,
        disableOutsidePointerEvents: false,
        onCloseAutoFocus: (event)=>{
            props.onCloseAutoFocus?.(event);
            if (!event.defaultPrevented) {
                if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
                event.preventDefault();
            }
            hasInteractedOutsideRef.current = false;
            hasPointerDownOutsideRef.current = false;
        },
        onInteractOutside: (event)=>{
            props.onInteractOutside?.(event);
            if (!event.defaultPrevented) {
                hasInteractedOutsideRef.current = true;
                if (event.detail.originalEvent.type === "pointerdown") {
                    hasPointerDownOutsideRef.current = true;
                }
            }
            const target = event.target;
            const targetIsTrigger = context.triggerRef.current?.contains(target);
            if (targetIsTrigger) event.preventDefault();
            if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
                event.preventDefault();
            }
        }
    });
});
var PopoverContentImpl = React.forwardRef((props, forwardedRef)=>{
    const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, ...contentProps } = props;
    const context = usePopoverContext(CONTENT_NAME, __scopePopover);
    const popperScope = usePopperScope(__scopePopover);
    useFocusGuards();
    return /* @__PURE__ */ jsx(FocusScope, {
        asChild: true,
        loop: true,
        trapped: trapFocus,
        onMountAutoFocus: onOpenAutoFocus,
        onUnmountAutoFocus: onCloseAutoFocus,
        children: /* @__PURE__ */ jsx(DismissableLayer, {
            asChild: true,
            disableOutsidePointerEvents,
            onInteractOutside,
            onEscapeKeyDown,
            onPointerDownOutside,
            onFocusOutside,
            onDismiss: ()=>context.onOpenChange(false),
            children: /* @__PURE__ */ jsx(Content, {
                "data-state": getState(context.open),
                role: "dialog",
                id: context.contentId,
                ...popperScope,
                ...contentProps,
                ref: forwardedRef,
                style: {
                    ...contentProps.style,
                    // re-namespace exposed content custom properties
                    ...{
                        "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
                        "--radix-popover-content-available-width": "var(--radix-popper-available-width)",
                        "--radix-popover-content-available-height": "var(--radix-popper-available-height)",
                        "--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
                        "--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
                    }
                }
            })
        })
    });
});
var CLOSE_NAME = "PopoverClose";
var PopoverClose = React.forwardRef((props, forwardedRef)=>{
    const { __scopePopover, ...closeProps } = props;
    const context = usePopoverContext(CLOSE_NAME, __scopePopover);
    return /* @__PURE__ */ jsx(Primitive.button, {
        type: "button",
        ...closeProps,
        ref: forwardedRef,
        onClick: composeEventHandlers(props.onClick, ()=>context.onOpenChange(false))
    });
});
PopoverClose.displayName = CLOSE_NAME;
var ARROW_NAME = "PopoverArrow";
var PopoverArrow = React.forwardRef((props, forwardedRef)=>{
    const { __scopePopover, ...arrowProps } = props;
    const popperScope = usePopperScope(__scopePopover);
    return /* @__PURE__ */ jsx(Arrow, {
        ...popperScope,
        ...arrowProps,
        ref: forwardedRef
    });
});
PopoverArrow.displayName = ARROW_NAME;
function getState(open) {
    return open ? "open" : "closed";
}
var Root2 = Popover$1;
var Anchor2 = PopoverAnchor$1;
var Trigger = PopoverTrigger$1;
var Portal = PopoverPortal;
var Content2 = PopoverContent$1;

function Popover({ ...props }) {
    return /*#__PURE__*/ React__default.createElement(Root2, {
        "data-slot": "popover",
        ...props
    });
}
function PopoverTrigger({ ...props }) {
    return /*#__PURE__*/ React__default.createElement(Trigger, {
        "data-slot": "popover-trigger",
        ...props
    });
}
function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
    return /*#__PURE__*/ React__default.createElement(Portal, null, /*#__PURE__*/ React__default.createElement(Content2, {
        "data-slot": "popover-content",
        align: align,
        sideOffset: sideOffset,
        className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 cursor-pointer rounded-md border p-4 shadow-md outline-none", className),
        ...props
    }));
}
function PopoverAnchor({ ...props }) {
    return /*#__PURE__*/ React__default.createElement(Anchor2, {
        "data-slot": "popover-anchor",
        ...props
    });
}

export { Popover as P, PopoverTrigger as a, PopoverContent as b, PopoverAnchor as c };
//# sourceMappingURL=popover-CsYW0nDm.mjs.map