UNPKG

@loke/ui

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