325 lines
13 KiB
JavaScript
325 lines
13 KiB
JavaScript
"use client";
|
|
|
|
// packages/react/context-menu/src/ContextMenu.tsx
|
|
import * as React from "react";
|
|
import { composeEventHandlers } from "@radix-ui/primitive";
|
|
import { createContextScope } from "@radix-ui/react-context";
|
|
import { Primitive } from "@radix-ui/react-primitive";
|
|
import * as MenuPrimitive from "@radix-ui/react-menu";
|
|
import { createMenuScope } from "@radix-ui/react-menu";
|
|
import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
|
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
var CONTEXT_MENU_NAME = "ContextMenu";
|
|
var [createContextMenuContext, createContextMenuScope] = createContextScope(CONTEXT_MENU_NAME, [
|
|
createMenuScope
|
|
]);
|
|
var useMenuScope = createMenuScope();
|
|
var [ContextMenuProvider, useContextMenuContext] = createContextMenuContext(CONTEXT_MENU_NAME);
|
|
var ContextMenu = (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(
|
|
MenuPrimitive.Root,
|
|
{
|
|
...menuScope,
|
|
dir,
|
|
open,
|
|
onOpenChange: handleOpenChange,
|
|
modal,
|
|
children
|
|
}
|
|
)
|
|
}
|
|
);
|
|
};
|
|
ContextMenu.displayName = CONTEXT_MENU_NAME;
|
|
var TRIGGER_NAME = "ContextMenuTrigger";
|
|
var ContextMenuTrigger = 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(MenuPrimitive.Anchor, { ...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.displayName = TRIGGER_NAME;
|
|
var PORTAL_NAME = "ContextMenuPortal";
|
|
var ContextMenuPortal = (props) => {
|
|
const { __scopeContextMenu, ...portalProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Portal, { ...menuScope, ...portalProps });
|
|
};
|
|
ContextMenuPortal.displayName = PORTAL_NAME;
|
|
var CONTENT_NAME = "ContextMenuContent";
|
|
var ContextMenuContent = 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(
|
|
MenuPrimitive.Content,
|
|
{
|
|
...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.displayName = CONTENT_NAME;
|
|
var GROUP_NAME = "ContextMenuGroup";
|
|
var ContextMenuGroup = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...groupProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Group, { ...menuScope, ...groupProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
ContextMenuGroup.displayName = GROUP_NAME;
|
|
var LABEL_NAME = "ContextMenuLabel";
|
|
var ContextMenuLabel = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...labelProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Label, { ...menuScope, ...labelProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
ContextMenuLabel.displayName = LABEL_NAME;
|
|
var ITEM_NAME = "ContextMenuItem";
|
|
var ContextMenuItem = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...itemProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Item, { ...menuScope, ...itemProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
ContextMenuItem.displayName = ITEM_NAME;
|
|
var CHECKBOX_ITEM_NAME = "ContextMenuCheckboxItem";
|
|
var ContextMenuCheckboxItem = React.forwardRef((props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...checkboxItemProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
|
|
});
|
|
ContextMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
|
|
var RADIO_GROUP_NAME = "ContextMenuRadioGroup";
|
|
var ContextMenuRadioGroup = React.forwardRef((props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...radioGroupProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
|
|
});
|
|
ContextMenuRadioGroup.displayName = RADIO_GROUP_NAME;
|
|
var RADIO_ITEM_NAME = "ContextMenuRadioItem";
|
|
var ContextMenuRadioItem = React.forwardRef((props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...radioItemProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
|
|
});
|
|
ContextMenuRadioItem.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(MenuPrimitive.ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
|
|
});
|
|
ContextMenuItemIndicator.displayName = INDICATOR_NAME;
|
|
var SEPARATOR_NAME = "ContextMenuSeparator";
|
|
var ContextMenuSeparator = React.forwardRef((props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...separatorProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
|
|
});
|
|
ContextMenuSeparator.displayName = SEPARATOR_NAME;
|
|
var ARROW_NAME = "ContextMenuArrow";
|
|
var ContextMenuArrow = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...arrowProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Arrow, { ...menuScope, ...arrowProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
ContextMenuArrow.displayName = ARROW_NAME;
|
|
var SUB_NAME = "ContextMenuSub";
|
|
var ContextMenuSub = (props) => {
|
|
const { __scopeContextMenu, children, onOpenChange, open: openProp, defaultOpen } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
const [open, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen,
|
|
onChange: onOpenChange
|
|
});
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Sub, { ...menuScope, open, onOpenChange: setOpen, children });
|
|
};
|
|
ContextMenuSub.displayName = SUB_NAME;
|
|
var SUB_TRIGGER_NAME = "ContextMenuSubTrigger";
|
|
var ContextMenuSubTrigger = React.forwardRef((props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...triggerItemProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.SubTrigger, { ...menuScope, ...triggerItemProps, ref: forwardedRef });
|
|
});
|
|
ContextMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
|
|
var SUB_CONTENT_NAME = "ContextMenuSubContent";
|
|
var ContextMenuSubContent = React.forwardRef((props, forwardedRef) => {
|
|
const { __scopeContextMenu, ...subContentProps } = props;
|
|
const menuScope = useMenuScope(__scopeContextMenu);
|
|
return /* @__PURE__ */ jsx(
|
|
MenuPrimitive.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.displayName = SUB_CONTENT_NAME;
|
|
function whenTouchOrPen(handler) {
|
|
return (event) => event.pointerType !== "mouse" ? handler(event) : void 0;
|
|
}
|
|
var Root2 = ContextMenu;
|
|
var Trigger = ContextMenuTrigger;
|
|
var Portal2 = ContextMenuPortal;
|
|
var Content2 = ContextMenuContent;
|
|
var Group2 = ContextMenuGroup;
|
|
var Label2 = ContextMenuLabel;
|
|
var Item2 = ContextMenuItem;
|
|
var CheckboxItem2 = ContextMenuCheckboxItem;
|
|
var RadioGroup2 = ContextMenuRadioGroup;
|
|
var RadioItem2 = ContextMenuRadioItem;
|
|
var ItemIndicator2 = ContextMenuItemIndicator;
|
|
var Separator2 = ContextMenuSeparator;
|
|
var Arrow2 = ContextMenuArrow;
|
|
var Sub2 = ContextMenuSub;
|
|
var SubTrigger2 = ContextMenuSubTrigger;
|
|
var SubContent2 = ContextMenuSubContent;
|
|
export {
|
|
Arrow2 as Arrow,
|
|
CheckboxItem2 as CheckboxItem,
|
|
Content2 as Content,
|
|
ContextMenu,
|
|
ContextMenuArrow,
|
|
ContextMenuCheckboxItem,
|
|
ContextMenuContent,
|
|
ContextMenuGroup,
|
|
ContextMenuItem,
|
|
ContextMenuItemIndicator,
|
|
ContextMenuLabel,
|
|
ContextMenuPortal,
|
|
ContextMenuRadioGroup,
|
|
ContextMenuRadioItem,
|
|
ContextMenuSeparator,
|
|
ContextMenuSub,
|
|
ContextMenuSubContent,
|
|
ContextMenuSubTrigger,
|
|
ContextMenuTrigger,
|
|
Group2 as Group,
|
|
Item2 as Item,
|
|
ItemIndicator2 as ItemIndicator,
|
|
Label2 as Label,
|
|
Portal2 as Portal,
|
|
RadioGroup2 as RadioGroup,
|
|
RadioItem2 as RadioItem,
|
|
Root2 as Root,
|
|
Separator2 as Separator,
|
|
Sub2 as Sub,
|
|
SubContent2 as SubContent,
|
|
SubTrigger2 as SubTrigger,
|
|
Trigger,
|
|
createContextMenuScope
|
|
};
|
|
//# sourceMappingURL=index.mjs.map
|