ivt/dist/context-menu/index.mjs

Ivt Components Library

import * as React from 'react';
import { c as composeEventHandlers } from '../chunks/index-Bl-WJHvp.mjs';
import { c as createContextScope } from '../chunks/index-DT8WgpCS.mjs';
import { P as Primitive } from '../chunks/index-DgKlJYZP.mjs';
import { c as createMenuScope, R as Root3, A as Anchor2, P as Portal, C as Content2$1, I as Item2$1, a as CheckboxItem, b as ItemIndicator, d as RadioItem, L as Label, S as Separator, G as Group, e as Sub, f as SubContent, g as SubTrigger, h as RadioGroup, i as Arrow2, j as Circle } from '../chunks/index-DWmrjIYv.mjs';
import { u as useCallbackRef } from '../chunks/index-Cbm3--wc.mjs';
import { u as useControllableState } from '../chunks/index-D4FMFHi9.mjs';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { c as cn } from '../chunks/utils-05LlW3Cl.mjs';
import { C as Check } from '../chunks/check-BBGTedl-.mjs';
import { C as ChevronRight } from '../chunks/chevron-right-mC6NR8jW.mjs';
import 'react-dom';
import '@radix-ui/react-slot';
import '../chunks/createLucideIcon-DLrNgMqk.mjs';
import '@radix-ui/react-collection';
import '../chunks/index-1tQVI0Jh.mjs';
import '../chunks/index-CGLjQEjG.mjs';
import '../chunks/index-DUpRrJTH.mjs';
import '../chunks/index-DvCZGX3H.mjs';
import '../chunks/tslib.es6-DXUeYCTx.mjs';
import '../chunks/index-tkRL9Tft.mjs';
import '../chunks/index-DKOlG3mh.mjs';
import '../chunks/index-aLIsJMgt.mjs';
import '../chunks/index-DmY774z-.mjs';
import '../chunks/index-BTe1rv5Z.mjs';
import '../chunks/index-C6s8KI_8.mjs';
import '../chunks/index-BsG_UW8k.mjs';
import '../chunks/bundle-mjs-BYcyWisL.mjs';

var CONTEXT_MENU_NAME = "ContextMenu";
var [createContextMenuContext] = createContextScope(CONTEXT_MENU_NAME, [
    createMenuScope
]);
var useMenuScope = createMenuScope();
var [ContextMenuProvider, useContextMenuContext] = createContextMenuContext(CONTEXT_MENU_NAME);
var ContextMenu$1 = (props)=>{
    const { __scopeContextMenu, children, onOpenChange, dir, modal = true } = props;
    const [open, setOpen] = React.useState(false);
    const menuScope = useMenuScope(__scopeContextMenu);
    const handleOpenChangeProp = useCallbackRef(onOpenChange);
    const handleOpenChange = React.useCallback((open2)=>{
        setOpen(open2);
        handleOpenChangeProp(open2);
    }, [
        handleOpenChangeProp
    ]);
    return /* @__PURE__ */ jsx(ContextMenuProvider, {
        scope: __scopeContextMenu,
        open,
        onOpenChange: handleOpenChange,
        modal,
        children: /* @__PURE__ */ jsx(Root3, {
            ...menuScope,
            dir,
            open,
            onOpenChange: handleOpenChange,
            modal,
            children
        })
    });
};
ContextMenu$1.displayName = CONTEXT_MENU_NAME;
var TRIGGER_NAME = "ContextMenuTrigger";
var ContextMenuTrigger$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeContextMenu, disabled = false, ...triggerProps } = props;
    const context = useContextMenuContext(TRIGGER_NAME, __scopeContextMenu);
    const menuScope = useMenuScope(__scopeContextMenu);
    const pointRef = React.useRef({
        x: 0,
        y: 0
    });
    const virtualRef = React.useRef({
        getBoundingClientRect: ()=>DOMRect.fromRect({
                width: 0,
                height: 0,
                ...pointRef.current
            })
    });
    const longPressTimerRef = React.useRef(0);
    const clearLongPress = React.useCallback(()=>window.clearTimeout(longPressTimerRef.current), []);
    const handleOpen = (event)=>{
        pointRef.current = {
            x: event.clientX,
            y: event.clientY
        };
        context.onOpenChange(true);
    };
    React.useEffect(()=>clearLongPress, [
        clearLongPress
    ]);
    React.useEffect(()=>void (disabled && clearLongPress()), [
        disabled,
        clearLongPress
    ]);
    return /* @__PURE__ */ jsxs(Fragment, {
        children: [
            /* @__PURE__ */ jsx(Anchor2, {
                ...menuScope,
                virtualRef
            }),
            /* @__PURE__ */ jsx(Primitive.span, {
                "data-state": context.open ? "open" : "closed",
                "data-disabled": disabled ? "" : void 0,
                ...triggerProps,
                ref: forwardedRef,
                style: {
                    WebkitTouchCallout: "none",
                    ...props.style
                },
                onContextMenu: disabled ? props.onContextMenu : composeEventHandlers(props.onContextMenu, (event)=>{
                    clearLongPress();
                    handleOpen(event);
                    event.preventDefault();
                }),
                onPointerDown: disabled ? props.onPointerDown : composeEventHandlers(props.onPointerDown, whenTouchOrPen((event)=>{
                    clearLongPress();
                    longPressTimerRef.current = window.setTimeout(()=>handleOpen(event), 700);
                })),
                onPointerMove: disabled ? props.onPointerMove : composeEventHandlers(props.onPointerMove, whenTouchOrPen(clearLongPress)),
                onPointerCancel: disabled ? props.onPointerCancel : composeEventHandlers(props.onPointerCancel, whenTouchOrPen(clearLongPress)),
                onPointerUp: disabled ? props.onPointerUp : composeEventHandlers(props.onPointerUp, whenTouchOrPen(clearLongPress))
            })
        ]
    });
});
ContextMenuTrigger$1.displayName = TRIGGER_NAME;
var PORTAL_NAME = "ContextMenuPortal";
var ContextMenuPortal$1 = (props)=>{
    const { __scopeContextMenu, ...portalProps } = props;
    const menuScope = useMenuScope(__scopeContextMenu);
    return /* @__PURE__ */ jsx(Portal, {
        ...menuScope,
        ...portalProps
    });
};
ContextMenuPortal$1.displayName = PORTAL_NAME;
var CONTENT_NAME = "ContextMenuContent";
var ContextMenuContent$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeContextMenu, ...contentProps } = props;
    const context = useContextMenuContext(CONTENT_NAME, __scopeContextMenu);
    const menuScope = useMenuScope(__scopeContextMenu);
    const hasInteractedOutsideRef = React.useRef(false);
    return /* @__PURE__ */ jsx(Content2$1, {
        ...menuScope,
        ...contentProps,
        ref: forwardedRef,
        side: "right",
        sideOffset: 2,
        align: "start",
        onCloseAutoFocus: (event)=>{
            props.onCloseAutoFocus?.(event);
            if (!event.defaultPrevented && hasInteractedOutsideRef.current) {
                event.preventDefault();
            }
            hasInteractedOutsideRef.current = false;
        },
        onInteractOutside: (event)=>{
            props.onInteractOutside?.(event);
            if (!event.defaultPrevented && !context.modal) hasInteractedOutsideRef.current = true;
        },
        style: {
            ...props.style,
            // re-namespace exposed content custom properties
            ...{
                "--radix-context-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
                "--radix-context-menu-content-available-width": "var(--radix-popper-available-width)",
                "--radix-context-menu-content-available-height": "var(--radix-popper-available-height)",
                "--radix-context-menu-trigger-width": "var(--radix-popper-anchor-width)",
                "--radix-context-menu-trigger-height": "var(--radix-popper-anchor-height)"
            }
        }
    });
});
ContextMenuContent$1.displayName = CONTENT_NAME;
var GROUP_NAME = "ContextMenuGroup";
var ContextMenuGroup$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeContextMenu, ...groupProps } = props;
    const menuScope = useMenuScope(__scopeContextMenu);
    return /* @__PURE__ */ jsx(Group, {
        ...menuScope,
        ...groupProps,
        ref: forwardedRef
    });
});
ContextMenuGroup$1.displayName = GROUP_NAME;
var LABEL_NAME = "ContextMenuLabel";
var ContextMenuLabel$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeContextMenu, ...labelProps } = props;
    const menuScope = useMenuScope(__scopeContextMenu);
    return /* @__PURE__ */ jsx(Label, {
        ...menuScope,
        ...labelProps,
        ref: forwardedRef
    });
});
ContextMenuLabel$1.displayName = LABEL_NAME;
var ITEM_NAME = "ContextMenuItem";
var ContextMenuItem$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeContextMenu, ...itemProps } = props;
    const menuScope = useMenuScope(__scopeContextMenu);
    return /* @__PURE__ */ jsx(Item2$1, {
        ...menuScope,
        ...itemProps,
        ref: forwardedRef
    });
});
ContextMenuItem$1.displayName = ITEM_NAME;
var CHECKBOX_ITEM_NAME = "ContextMenuCheckboxItem";
var ContextMenuCheckboxItem$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeContextMenu, ...checkboxItemProps } = props;
    const menuScope = useMenuScope(__scopeContextMenu);
    return /* @__PURE__ */ jsx(CheckboxItem, {
        ...menuScope,
        ...checkboxItemProps,
        ref: forwardedRef
    });
});
ContextMenuCheckboxItem$1.displayName = CHECKBOX_ITEM_NAME;
var RADIO_GROUP_NAME = "ContextMenuRadioGroup";
var ContextMenuRadioGroup$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeContextMenu, ...radioGroupProps } = props;
    const menuScope = useMenuScope(__scopeContextMenu);
    return /* @__PURE__ */ jsx(RadioGroup, {
        ...menuScope,
        ...radioGroupProps,
        ref: forwardedRef
    });
});
ContextMenuRadioGroup$1.displayName = RADIO_GROUP_NAME;
var RADIO_ITEM_NAME = "ContextMenuRadioItem";
var ContextMenuRadioItem$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeContextMenu, ...radioItemProps } = props;
    const menuScope = useMenuScope(__scopeContextMenu);
    return /* @__PURE__ */ jsx(RadioItem, {
        ...menuScope,
        ...radioItemProps,
        ref: forwardedRef
    });
});
ContextMenuRadioItem$1.displayName = RADIO_ITEM_NAME;
var INDICATOR_NAME = "ContextMenuItemIndicator";
var ContextMenuItemIndicator = React.forwardRef((props, forwardedRef)=>{
    const { __scopeContextMenu, ...itemIndicatorProps } = props;
    const menuScope = useMenuScope(__scopeContextMenu);
    return /* @__PURE__ */ jsx(ItemIndicator, {
        ...menuScope,
        ...itemIndicatorProps,
        ref: forwardedRef
    });
});
ContextMenuItemIndicator.displayName = INDICATOR_NAME;
var SEPARATOR_NAME = "ContextMenuSeparator";
var ContextMenuSeparator$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeContextMenu, ...separatorProps } = props;
    const menuScope = useMenuScope(__scopeContextMenu);
    return /* @__PURE__ */ jsx(Separator, {
        ...menuScope,
        ...separatorProps,
        ref: forwardedRef
    });
});
ContextMenuSeparator$1.displayName = SEPARATOR_NAME;
var ARROW_NAME = "ContextMenuArrow";
var ContextMenuArrow = React.forwardRef((props, forwardedRef)=>{
    const { __scopeContextMenu, ...arrowProps } = props;
    const menuScope = useMenuScope(__scopeContextMenu);
    return /* @__PURE__ */ jsx(Arrow2, {
        ...menuScope,
        ...arrowProps,
        ref: forwardedRef
    });
});
ContextMenuArrow.displayName = ARROW_NAME;
var SUB_NAME = "ContextMenuSub";
var ContextMenuSub$1 = (props)=>{
    const { __scopeContextMenu, children, onOpenChange, open: openProp, defaultOpen } = props;
    const menuScope = useMenuScope(__scopeContextMenu);
    const [open, setOpen] = useControllableState({
        prop: openProp,
        defaultProp: defaultOpen ?? false,
        onChange: onOpenChange,
        caller: SUB_NAME
    });
    return /* @__PURE__ */ jsx(Sub, {
        ...menuScope,
        open,
        onOpenChange: setOpen,
        children
    });
};
ContextMenuSub$1.displayName = SUB_NAME;
var SUB_TRIGGER_NAME = "ContextMenuSubTrigger";
var ContextMenuSubTrigger$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeContextMenu, ...triggerItemProps } = props;
    const menuScope = useMenuScope(__scopeContextMenu);
    return /* @__PURE__ */ jsx(SubTrigger, {
        ...menuScope,
        ...triggerItemProps,
        ref: forwardedRef
    });
});
ContextMenuSubTrigger$1.displayName = SUB_TRIGGER_NAME;
var SUB_CONTENT_NAME = "ContextMenuSubContent";
var ContextMenuSubContent$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeContextMenu, ...subContentProps } = props;
    const menuScope = useMenuScope(__scopeContextMenu);
    return /* @__PURE__ */ jsx(SubContent, {
        ...menuScope,
        ...subContentProps,
        ref: forwardedRef,
        style: {
            ...props.style,
            // re-namespace exposed content custom properties
            ...{
                "--radix-context-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
                "--radix-context-menu-content-available-width": "var(--radix-popper-available-width)",
                "--radix-context-menu-content-available-height": "var(--radix-popper-available-height)",
                "--radix-context-menu-trigger-width": "var(--radix-popper-anchor-width)",
                "--radix-context-menu-trigger-height": "var(--radix-popper-anchor-height)"
            }
        }
    });
});
ContextMenuSubContent$1.displayName = SUB_CONTENT_NAME;
function whenTouchOrPen(handler) {
    return (event)=>event.pointerType !== "mouse" ? handler(event) : void 0;
}
var Root2 = ContextMenu$1;
var Trigger = ContextMenuTrigger$1;
var Portal2 = ContextMenuPortal$1;
var Content2 = ContextMenuContent$1;
var Group2 = ContextMenuGroup$1;
var Label2 = ContextMenuLabel$1;
var Item2 = ContextMenuItem$1;
var CheckboxItem2 = ContextMenuCheckboxItem$1;
var RadioGroup2 = ContextMenuRadioGroup$1;
var RadioItem2 = ContextMenuRadioItem$1;
var ItemIndicator2 = ContextMenuItemIndicator;
var Separator2 = ContextMenuSeparator$1;
var Sub2 = ContextMenuSub$1;
var SubTrigger2 = ContextMenuSubTrigger$1;
var SubContent2 = ContextMenuSubContent$1;

function ContextMenu({ ...props }) {
    return /*#__PURE__*/ React.createElement(Root2, {
        "data-slot": "context-menu",
        ...props
    });
}
function ContextMenuTrigger({ ...props }) {
    return /*#__PURE__*/ React.createElement(Trigger, {
        "data-slot": "context-menu-trigger",
        ...props
    });
}
function ContextMenuGroup({ ...props }) {
    return /*#__PURE__*/ React.createElement(Group2, {
        "data-slot": "context-menu-group",
        ...props
    });
}
function ContextMenuPortal({ ...props }) {
    return /*#__PURE__*/ React.createElement(Portal2, {
        "data-slot": "context-menu-portal",
        ...props
    });
}
function ContextMenuSub({ ...props }) {
    return /*#__PURE__*/ React.createElement(Sub2, {
        "data-slot": "context-menu-sub",
        ...props
    });
}
function ContextMenuRadioGroup({ ...props }) {
    return /*#__PURE__*/ React.createElement(RadioGroup2, {
        "data-slot": "context-menu-radio-group",
        ...props
    });
}
function ContextMenuSubTrigger({ className, inset, children, ...props }) {
    return /*#__PURE__*/ React.createElement(SubTrigger2, {
        "data-slot": "context-menu-sub-trigger",
        "data-inset": inset,
        className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
        ...props
    }, children, /*#__PURE__*/ React.createElement(ChevronRight, {
        className: "ml-auto"
    }));
}
function ContextMenuSubContent({ className, ...props }) {
    return /*#__PURE__*/ React.createElement(SubContent2, {
        "data-slot": "context-menu-sub-content",
        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 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", className),
        ...props
    });
}
function ContextMenuContent({ className, ...props }) {
    return /*#__PURE__*/ React.createElement(Portal2, null, /*#__PURE__*/ React.createElement(Content2, {
        "data-slot": "context-menu-content",
        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 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", className),
        ...props
    }));
}
function ContextMenuItem({ className, inset, variant = "default", ...props }) {
    return /*#__PURE__*/ React.createElement(Item2, {
        "data-slot": "context-menu-item",
        "data-inset": inset,
        "data-variant": variant,
        className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
        ...props
    });
}
function ContextMenuCheckboxItem({ className, children, checked, ...props }) {
    return /*#__PURE__*/ React.createElement(CheckboxItem2, {
        "data-slot": "context-menu-checkbox-item",
        className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
        checked: checked,
        ...props
    }, /*#__PURE__*/ React.createElement("span", {
        className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
    }, /*#__PURE__*/ React.createElement(ItemIndicator2, null, /*#__PURE__*/ React.createElement(Check, {
        className: "size-4"
    }))), children);
}
function ContextMenuRadioItem({ className, children, ...props }) {
    return /*#__PURE__*/ React.createElement(RadioItem2, {
        "data-slot": "context-menu-radio-item",
        className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
        ...props
    }, /*#__PURE__*/ React.createElement("span", {
        className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
    }, /*#__PURE__*/ React.createElement(ItemIndicator2, null, /*#__PURE__*/ React.createElement(Circle, {
        className: "size-2 fill-current"
    }))), children);
}
function ContextMenuLabel({ className, inset, ...props }) {
    return /*#__PURE__*/ React.createElement(Label2, {
        "data-slot": "context-menu-label",
        "data-inset": inset,
        className: cn("text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
        ...props
    });
}
function ContextMenuSeparator({ className, ...props }) {
    return /*#__PURE__*/ React.createElement(Separator2, {
        "data-slot": "context-menu-separator",
        className: cn("bg-border -mx-1 my-1 h-px", className),
        ...props
    });
}
function ContextMenuShortcut({ className, ...props }) {
    return /*#__PURE__*/ React.createElement("span", {
        "data-slot": "context-menu-shortcut",
        className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
        ...props
    });
}

export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
//# sourceMappingURL=index.mjs.map