@start-base/start-ui/ContextMenu/index.mjs

<p align="center"> <a href="https://startbase.dev" target="_blank"> <img src="https://startbase.dev/apple-touch-icon.png" width="60px" style="padding-top: 60px" /> </a> </p>

import e,{createContext as t,forwardRef as n,useState as o,useRef as l,useContext as r,useEffect as i,useMemo as a,cloneElement as c}from"react";import{useFloatingTree as s,useFloatingNodeId as u,useFloatingParentNodeId as d,useListItem as m,useFloating as v,offset as p,flip as f,shift as g,autoUpdate as h,useHover as x,safePolygon as w,useClick as I,useRole as b,useDismiss as E,useListNavigation as y,useTypeahead as C,useInteractions as P,FloatingNode as k,useMergeRefs as F,FloatingList as O,FloatingPortal as N,FloatingFocusManager as M,FloatingTree as R}from"@floating-ui/react";import j from"clsx";var L=Object.defineProperty,X=Object.defineProperties,Y=Object.getOwnPropertyDescriptors,T=Object.getOwnPropertySymbols,A=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable,D=(e,t,n)=>t in e?L(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,S=(e,t)=>{for(var n in t||(t={}))A.call(t,n)&&D(e,n,t[n]);if(T)for(var n of T(t))B.call(t,n)&&D(e,n,t[n]);return e},H=(e,t)=>X(e,Y(t));var U=function(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",className:"lucide lucide-chevron-down",viewBox:"0 0 24 24"},e.createElement("path",{d:"M6 9l6 6 6-6"}))};var W=function(){return e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",className:"lucide lucide-chevron-right",viewBox:"0 0 24 24"},e.createElement("path",{d:"M9 18l6-6-6-6"}))},K=t({getItemProps:()=>({}),activeIndex:null,setActiveIndex:()=>({}),setHasFocusInside:()=>({}),isOpen:!1});K.displayName="FloatingMenuContext";var q=K,z="SUI-FloatingContextMenu-module-menu-DeemE",G="SUI-FloatingContextMenu-module-menuItem-4hKfp",J=n(((t,n)=>{var R=t,{children:L,component:X,label:Y,className:D,menuClassName:K}=R,J=((e,t)=>{var n={};for(var o in e)A.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&T)for(var o of T(e))t.indexOf(o)<0&&B.call(e,o)&&(n[o]=e[o]);return n})(R,["children","component","label","className","menuClassName"]);const[Q,V]=o(!1),[Z,$]=o(!1),[_,ee]=o(null),te=l([]),ne=l([]),oe=l(!1),le=r(q),re=s(),ie=u(),ae=d(),ce=m(),se=null!=ae,ue=l(null),{floatingStyles:de,refs:me,context:ve}=v({nodeId:ie,open:Q,onOpenChange:V,placement:se?"right-start":"bottom-end",middleware:[p({mainAxis:se?0:4,alignmentAxis:se?-4:0}),f(),g()],whileElementsMounted:h}),pe=x(ve,{enabled:se,delay:{open:75},handleClose:w({blockPointerEvents:!0})}),fe=I(ve,{event:"mousedown",toggle:!se,ignoreMouse:se}),ge=b(ve,{role:"menu"}),he=E(ve,{bubbles:!0}),xe=y(ve,{listRef:te,activeIndex:_,nested:se,onNavigate:ee}),we=C(ve,{listRef:ne,onMatch:Q?ee:void 0,activeIndex:_}),{getReferenceProps:Ie,getFloatingProps:be,getItemProps:Ee}=P([pe,fe,ge,he,xe,we]);i((()=>{let e;const t=t=>{(null==ue?void 0:ue.current)?(t.target===ue.current||(null==ue?void 0:ue.current.contains(null==t?void 0:t.target)))&&(t.preventDefault(),me.setPositionReference({getBoundingClientRect:()=>({width:0,height:0,x:t.clientX,y:t.clientY,top:t.clientY,right:t.clientX,bottom:t.clientY,left:t.clientX})}),V(!0),clearTimeout(e),oe.current=!1,e=window.setTimeout((()=>{oe.current=!0}),300)):(t.preventDefault(),me.setPositionReference({getBoundingClientRect:()=>({width:0,height:0,x:t.clientX,y:t.clientY,top:t.clientY,right:t.clientX,bottom:t.clientY,left:t.clientX})}),V(!0),clearTimeout(e),oe.current=!1,e=window.setTimeout((()=>{oe.current=!0}),300))};return document.addEventListener("contextmenu",t),()=>{document.removeEventListener("contextmenu",t),clearTimeout(e)}}),[me,X]),i((()=>{if(re)return re.events.on("click",e),re.events.on("menuopen",t),()=>{re.events.off("click",e),re.events.off("menuopen",t)};function e(){V(!1)}function t(e){e.nodeId!==ie&&e.parentId===ae&&V(!1)}}),[re,ie,ae]),i((()=>{Q&&re&&re.events.emit("menuopen",{parentId:ae,nodeId:ie})}),[re,Q,ie,ae]);const ye=a((()=>({activeIndex:_,setActiveIndex:ee,getItemProps:Ee,setHasFocusInside:$,isOpen:Q})),[]);return e.createElement(e.Fragment,null,X?c(X,{ref:ue}):null,e.createElement(k,{id:ie},e.createElement("div",S({ref:F([me.setReference,ce.ref,n]),tabIndex:se?le.activeIndex===ce.index?0:-1:void 0,role:se?"menuitem":void 0,"data-open":Q?"":void 0,"data-nested":se?"":void 0,"data-focus-inside":Z?"":void 0,className:j({[G]:se},D&&{[D]:!0})},Ie(le.getItemProps(H(S({},J),{onFocus(e){var t;null==(t=J.onFocus)||t.call(J,e),$(!1),le.setHasFocusInside(!0)}})))),Y,se&&(Q?e.createElement(W,null):e.createElement(U,null))),e.createElement(q.Provider,{value:ye},e.createElement(O,{elementsRef:te,labelsRef:ne},Q&&e.createElement(N,null,e.createElement(M,{context:ve,modal:!1,initialFocus:se?-1:0,returnFocus:!se},e.createElement("div",S({ref:me.setFloating,className:j(z,K&&{[K]:!0}),style:de},be()),e.Children.map(L,((e,t)=>c(e,{key:t,onClick:t=>{var n,o;null==(o=(n=e.props).onClick)||o.call(n,t),V(!1)}}))))))))))}));J.displayName="FloatingContextMenu";var Q=J,V=n(((t,n)=>null===d()?e.createElement(R,null,e.createElement(Q,H(S({},t),{ref:n}))):e.createElement(Q,H(S({},t),{ref:n}))));V.displayName="ContextMenu";var Z=V;export{Z as default};