304 lines
12 KiB
JavaScript
304 lines
12 KiB
JavaScript
"use client";
|
|
|
|
// packages/react/dropdown-menu/src/DropdownMenu.tsx
|
|
import * as React from "react";
|
|
import { composeEventHandlers } from "@radix-ui/primitive";
|
|
import { composeRefs } from "@radix-ui/react-compose-refs";
|
|
import { createContextScope } from "@radix-ui/react-context";
|
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
import { Primitive } from "@radix-ui/react-primitive";
|
|
import * as MenuPrimitive from "@radix-ui/react-menu";
|
|
import { createMenuScope } from "@radix-ui/react-menu";
|
|
import { useId } from "@radix-ui/react-id";
|
|
import { jsx } from "react/jsx-runtime";
|
|
var DROPDOWN_MENU_NAME = "DropdownMenu";
|
|
var [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(
|
|
DROPDOWN_MENU_NAME,
|
|
[createMenuScope]
|
|
);
|
|
var useMenuScope = createMenuScope();
|
|
var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
|
|
var DropdownMenu = (props) => {
|
|
const {
|
|
__scopeDropdownMenu,
|
|
children,
|
|
dir,
|
|
open: openProp,
|
|
defaultOpen,
|
|
onOpenChange,
|
|
modal = true
|
|
} = props;
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
const triggerRef = React.useRef(null);
|
|
const [open = false, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen,
|
|
onChange: onOpenChange
|
|
});
|
|
return /* @__PURE__ */ jsx(
|
|
DropdownMenuProvider,
|
|
{
|
|
scope: __scopeDropdownMenu,
|
|
triggerId: useId(),
|
|
triggerRef,
|
|
contentId: useId(),
|
|
open,
|
|
onOpenChange: setOpen,
|
|
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
modal,
|
|
children: /* @__PURE__ */ jsx(MenuPrimitive.Root, { ...menuScope, open, onOpenChange: setOpen, dir, modal, children })
|
|
}
|
|
);
|
|
};
|
|
DropdownMenu.displayName = DROPDOWN_MENU_NAME;
|
|
var TRIGGER_NAME = "DropdownMenuTrigger";
|
|
var DropdownMenuTrigger = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
|
|
const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Anchor, { asChild: true, ...menuScope, children: /* @__PURE__ */ jsx(
|
|
Primitive.button,
|
|
{
|
|
type: "button",
|
|
id: context.triggerId,
|
|
"aria-haspopup": "menu",
|
|
"aria-expanded": context.open,
|
|
"aria-controls": context.open ? context.contentId : void 0,
|
|
"data-state": context.open ? "open" : "closed",
|
|
"data-disabled": disabled ? "" : void 0,
|
|
disabled,
|
|
...triggerProps,
|
|
ref: composeRefs(forwardedRef, context.triggerRef),
|
|
onPointerDown: composeEventHandlers(props.onPointerDown, (event) => {
|
|
if (!disabled && event.button === 0 && event.ctrlKey === false) {
|
|
context.onOpenToggle();
|
|
if (!context.open) event.preventDefault();
|
|
}
|
|
}),
|
|
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
if (disabled) return;
|
|
if (["Enter", " "].includes(event.key)) context.onOpenToggle();
|
|
if (event.key === "ArrowDown") context.onOpenChange(true);
|
|
if (["Enter", " ", "ArrowDown"].includes(event.key)) event.preventDefault();
|
|
})
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
DropdownMenuTrigger.displayName = TRIGGER_NAME;
|
|
var PORTAL_NAME = "DropdownMenuPortal";
|
|
var DropdownMenuPortal = (props) => {
|
|
const { __scopeDropdownMenu, ...portalProps } = props;
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Portal, { ...menuScope, ...portalProps });
|
|
};
|
|
DropdownMenuPortal.displayName = PORTAL_NAME;
|
|
var CONTENT_NAME = "DropdownMenuContent";
|
|
var DropdownMenuContent = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...contentProps } = props;
|
|
const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
const hasInteractedOutsideRef = React.useRef(false);
|
|
return /* @__PURE__ */ jsx(
|
|
MenuPrimitive.Content,
|
|
{
|
|
id: context.contentId,
|
|
"aria-labelledby": context.triggerId,
|
|
...menuScope,
|
|
...contentProps,
|
|
ref: forwardedRef,
|
|
onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
|
|
hasInteractedOutsideRef.current = false;
|
|
event.preventDefault();
|
|
}),
|
|
onInteractOutside: composeEventHandlers(props.onInteractOutside, (event) => {
|
|
const originalEvent = event.detail.originalEvent;
|
|
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true;
|
|
}),
|
|
style: {
|
|
...props.style,
|
|
// re-namespace exposed content custom properties
|
|
...{
|
|
"--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
"--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
|
|
"--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
|
|
"--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
|
|
"--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
|
|
}
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
DropdownMenuContent.displayName = CONTENT_NAME;
|
|
var GROUP_NAME = "DropdownMenuGroup";
|
|
var DropdownMenuGroup = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...groupProps } = props;
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Group, { ...menuScope, ...groupProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
DropdownMenuGroup.displayName = GROUP_NAME;
|
|
var LABEL_NAME = "DropdownMenuLabel";
|
|
var DropdownMenuLabel = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...labelProps } = props;
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Label, { ...menuScope, ...labelProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
DropdownMenuLabel.displayName = LABEL_NAME;
|
|
var ITEM_NAME = "DropdownMenuItem";
|
|
var DropdownMenuItem = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...itemProps } = props;
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Item, { ...menuScope, ...itemProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
DropdownMenuItem.displayName = ITEM_NAME;
|
|
var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
|
|
var DropdownMenuCheckboxItem = React.forwardRef((props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...checkboxItemProps } = props;
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.CheckboxItem, { ...menuScope, ...checkboxItemProps, ref: forwardedRef });
|
|
});
|
|
DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
|
|
var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
|
|
var DropdownMenuRadioGroup = React.forwardRef((props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...radioGroupProps } = props;
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.RadioGroup, { ...menuScope, ...radioGroupProps, ref: forwardedRef });
|
|
});
|
|
DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
|
|
var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
|
|
var DropdownMenuRadioItem = React.forwardRef((props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...radioItemProps } = props;
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.RadioItem, { ...menuScope, ...radioItemProps, ref: forwardedRef });
|
|
});
|
|
DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
|
|
var INDICATOR_NAME = "DropdownMenuItemIndicator";
|
|
var DropdownMenuItemIndicator = React.forwardRef((props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.ItemIndicator, { ...menuScope, ...itemIndicatorProps, ref: forwardedRef });
|
|
});
|
|
DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
|
|
var SEPARATOR_NAME = "DropdownMenuSeparator";
|
|
var DropdownMenuSeparator = React.forwardRef((props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...separatorProps } = props;
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Separator, { ...menuScope, ...separatorProps, ref: forwardedRef });
|
|
});
|
|
DropdownMenuSeparator.displayName = SEPARATOR_NAME;
|
|
var ARROW_NAME = "DropdownMenuArrow";
|
|
var DropdownMenuArrow = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...arrowProps } = props;
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Arrow, { ...menuScope, ...arrowProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
DropdownMenuArrow.displayName = ARROW_NAME;
|
|
var DropdownMenuSub = (props) => {
|
|
const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
const [open = false, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen,
|
|
onChange: onOpenChange
|
|
});
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.Sub, { ...menuScope, open, onOpenChange: setOpen, children });
|
|
};
|
|
var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
|
|
var DropdownMenuSubTrigger = React.forwardRef((props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...subTriggerProps } = props;
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
return /* @__PURE__ */ jsx(MenuPrimitive.SubTrigger, { ...menuScope, ...subTriggerProps, ref: forwardedRef });
|
|
});
|
|
DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
|
|
var SUB_CONTENT_NAME = "DropdownMenuSubContent";
|
|
var DropdownMenuSubContent = React.forwardRef((props, forwardedRef) => {
|
|
const { __scopeDropdownMenu, ...subContentProps } = props;
|
|
const menuScope = useMenuScope(__scopeDropdownMenu);
|
|
return /* @__PURE__ */ jsx(
|
|
MenuPrimitive.SubContent,
|
|
{
|
|
...menuScope,
|
|
...subContentProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
...props.style,
|
|
// re-namespace exposed content custom properties
|
|
...{
|
|
"--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
"--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
|
|
"--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
|
|
"--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
|
|
"--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
|
|
}
|
|
}
|
|
}
|
|
);
|
|
});
|
|
DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
|
|
var Root2 = DropdownMenu;
|
|
var Trigger = DropdownMenuTrigger;
|
|
var Portal2 = DropdownMenuPortal;
|
|
var Content2 = DropdownMenuContent;
|
|
var Group2 = DropdownMenuGroup;
|
|
var Label2 = DropdownMenuLabel;
|
|
var Item2 = DropdownMenuItem;
|
|
var CheckboxItem2 = DropdownMenuCheckboxItem;
|
|
var RadioGroup2 = DropdownMenuRadioGroup;
|
|
var RadioItem2 = DropdownMenuRadioItem;
|
|
var ItemIndicator2 = DropdownMenuItemIndicator;
|
|
var Separator2 = DropdownMenuSeparator;
|
|
var Arrow2 = DropdownMenuArrow;
|
|
var Sub2 = DropdownMenuSub;
|
|
var SubTrigger2 = DropdownMenuSubTrigger;
|
|
var SubContent2 = DropdownMenuSubContent;
|
|
export {
|
|
Arrow2 as Arrow,
|
|
CheckboxItem2 as CheckboxItem,
|
|
Content2 as Content,
|
|
DropdownMenu,
|
|
DropdownMenuArrow,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuItemIndicator,
|
|
DropdownMenuLabel,
|
|
DropdownMenuPortal,
|
|
DropdownMenuRadioGroup,
|
|
DropdownMenuRadioItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuTrigger,
|
|
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,
|
|
createDropdownMenuScope
|
|
};
|
|
//# sourceMappingURL=index.mjs.map
|