Spaces:
Runtime error
Runtime error
| "use client"; | |
| // src/dropdown-menu.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, setOpen] = useControllableState({ | |
| prop: openProp, | |
| defaultProp: defaultOpen ?? false, | |
| onChange: onOpenChange, | |
| caller: DROPDOWN_MENU_NAME | |
| }); | |
| 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, setOpen] = useControllableState({ | |
| prop: openProp, | |
| defaultProp: defaultOpen ?? false, | |
| onChange: onOpenChange, | |
| caller: "DropdownMenuSub" | |
| }); | |
| 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 | |