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

<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>

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