selection-popover/dist/index.js

Easy-to-use, composable react selection popover.

"use strict";var Ae=Object.create;var x=Object.defineProperty;var De=Object.getOwnPropertyDescriptor;var Ie=Object.getOwnPropertyNames;var Me=Object.getPrototypeOf,Le=Object.prototype.hasOwnProperty;var Ne=(e,o)=>{for(var n in o)x(e,n,{get:o[n],enumerable:!0})},Q=(e,o,n,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of Ie(o))!Le.call(e,i)&&i!==n&&x(e,i,{get:()=>o[i],enumerable:!(r=De(o,i))||r.enumerable});return e};var ee=(e,o,n)=>(n=e!=null?Ae(Me(e)):{},Q(o||!e||!e.__esModule?x(n,"default",{value:e,enumerable:!0}):n,e)),He=e=>Q(x({},"__esModule",{value:!0}),e);var Ze={};Ne(Ze,{Arrow:()=>ue,Content:()=>ce,Portal:()=>ae,Root:()=>Be,Trigger:()=>le});module.exports=He(Ze);var t=ee(require("react")),A=require("@radix-ui/react-context"),D=require("@radix-ui/react-compose-refs"),B=require("@radix-ui/react-presence"),te=require("@radix-ui/react-use-controllable-state"),V=require("@radix-ui/react-primitive"),ne=require("@radix-ui/react-use-size"),oe=require("@radix-ui/react-portal"),re=require("@radix-ui/react-dismissable-layer"),W=require("@radix-ui/react-use-layout-effect"),ie=ee(require("@radix-ui/react-arrow")),f=require("@floating-ui/react-dom");var[We,E]=(0,A.createContext)("Selection"),Be=e=>{let{children:o,open:n,defaultOpen:r,onOpenChange:i,whileSelect:u=!1,disabled:l=!1,openDelay:s,closeDelay:a}=e,p=t.useRef(0),g=t.useRef(0),[S,h]=t.useState(null),[d,c]=t.useState({getBoundingClientRect:()=>DOMRect.fromRect(),getClientRects:()=>new DOMRectList}),[m=!1,P]=(0,te.useControllableState)({prop:n,defaultProp:r,onChange:i}),R=t.useCallback(y=>{clearTimeout(g.current),p.current=window.setTimeout(y,s)},[s]),w=t.useCallback(()=>{clearTimeout(p.current),g.current=window.setTimeout(()=>P(!1),a)},[a,P]);return t.createElement(We,{open:m,onOpenChange:P,onOpen:R,onClose:w,whileSelect:u,virtualRef:d,onVirtualRefChange:c,content:S,onContentChange:h,disabled:l},o)},I="SelectionTrigger",le=t.forwardRef((e,o)=>{let n=E(I),r=t.useRef(null),i=(0,D.useComposedRefs)(o,r);return n.whileSelect?t.createElement(Ve,{...e,ref:o}):t.createElement(se,{...e,ref:i,onPointerUp:u=>{var l;(l=e.onPointerUp)==null||l.call(e,u),u.pointerType==="mouse"&&n.onOpen(()=>{let s=document.getSelection();if(!s)return;let a=r.current;if(!(a==null?void 0:a.contains(s.anchorNode))||s.toString().trim()===""||s.isCollapsed)return;let g=s.getRangeAt(0);n.onOpenChange(!0),n.onVirtualRefChange({getBoundingClientRect:()=>g.getBoundingClientRect(),getClientRects:()=>g.getClientRects()})})}})});le.displayName=I;var H,Ve=t.forwardRef((e,o)=>{let n=E(I),[r,i]=t.useState(!1),u=t.useRef(null),l=t.useRef(""),s=t.useRef(!1),a=(0,D.useComposedRefs)(o,u),p=t.useCallback(()=>{i(!1)},[]),{onOpen:g,onOpenChange:S,onVirtualRefChange:h}=n;return t.useEffect(()=>{if(!n.disabled){let d=()=>{if(l.current!=="mouse")return;let c=document.getSelection();if(!c)return;let m=u.current;if(!(m==null?void 0:m.contains(c.anchorNode))){s.current=!1;return}if(c.isCollapsed){s.current=!1;return}if(c.toString().trim()!==""){let w=c==null?void 0:c.getRangeAt(0);s.current||g(()=>S(!0)),s.current=!0,h({getBoundingClientRect:()=>w.getBoundingClientRect(),getClientRects:()=>w.getClientRects()})}};return document.addEventListener("selectionchange",d),()=>document.removeEventListener("selectionchange",d)}},[n.disabled,S,g,h]),t.useEffect(()=>{if(r){let d=document.body;return H=d.style.userSelect||d.style.webkitUserSelect,d.style.userSelect="none",d.style.webkitUserSelect="none",()=>{d.style.userSelect=H,d.style.webkitUserSelect=H}}},[r]),t.useEffect(()=>()=>document.removeEventListener("pointerup",p),[p]),t.createElement(se,{...e,ref:a,onPointerDown:d=>{var c;(c=e.onPointerDown)==null||c.call(e,d),l.current=d.pointerType,i(!0),document.addEventListener("pointerup",p,{once:!0})},style:{userSelect:r?"text":void 0,WebkitUserSelect:r?"text":void 0,...e.style}})}),se=t.forwardRef((e,o)=>{let n=E(I),[r,i]=t.useState(!1),u=t.useCallback(()=>{i(!1)},[]);return t.useEffect(()=>{if(n.content&&r){let l=n.content,s=l.style.pointerEvents;return l.style.pointerEvents="none",()=>{l.style.pointerEvents=s}}},[n.content,r]),t.useEffect(()=>()=>document.removeEventListener("pointerup",u),[u]),t.createElement(V.Primitive.div,{...e,ref:o,onPointerDown:l=>{var s;(s=e.onPointerDown)==null||s.call(e,l),i(!0),document.addEventListener("pointerup",u,{once:!0})}})}),k="SelectionPortal",[ke,$e]=(0,A.createContext)(k,{forceMount:void 0}),ae=e=>{let{forceMount:o,container:n,children:r}=e,i=E(k);return t.createElement(ke,{forceMount:o},t.createElement(B.Presence,{present:o||i.open},t.createElement(oe.Portal,{asChild:!0,container:n},r)))};ae.displayName=k;var O="SelectionContent",ce=t.forwardRef((e,o)=>{let n=$e(O),{forceMount:r=n.forceMount,...i}=e,u=E(O);return t.createElement(B.Presence,{present:r||u.open},t.createElement(Ye,{...i,ref:o}))}),[Ue,_e]=(0,A.createContext)(O),Ye=t.forwardRef((e,o)=>{var X,G,K,Z,j,q,z,J;let{side:n="top",sideOffset:r=0,align:i="center",alignOffset:u=0,arrowPadding:l=0,sticky:s="partial",collisionBoundary:a=[],collisionPadding:p=0,hideWhenDetached:g=!1,avoidCollisions:S=!0,onEscapeKeyDown:h,onPointerDownOutside:d,onFocusOutside:c,onInteractOutside:m,...P}=e,R=E(O),{onClose:w,onContentChange:y}=R,[C,pe]=t.useState(null),me=(0,D.useComposedRefs)(o,xe=>pe(xe)),[M,ge]=t.useState(null),v=(0,ne.useSize)(M),Se=(X=v==null?void 0:v.width)!=null?X:0,$=(G=v==null?void 0:v.height)!=null?G:0,Pe=n+(i!=="center"?"-"+i:""),Re=typeof p=="number"?p:{top:0,right:0,bottom:0,left:0,...p},U=Array.isArray(a)?a:[a],he=U.length>0,_={padding:Re,boundary:U.filter(Xe),altBoundary:he},{x:L,y:N,strategy:we,placement:ye,refs:T,middlewareData:b,isPositioned:Y}=(0,f.useFloating)({strategy:"fixed",placement:Pe,whileElementsMounted:f.autoUpdate,middleware:[(0,f.inline)(),Ge(),(0,f.offset)({mainAxis:r+$,alignmentAxis:u}),S?(0,f.flip)(_):void 0,S?(0,f.shift)({mainAxis:!0,crossAxis:!1,limiter:s==="partial"?(0,f.limitShift)():void 0,..._}):void 0,M?(0,f.arrow)({element:M,padding:l}):void 0,Ke({arrowWidth:Se,arrowHeight:$}),g?(0,f.hide)({strategy:"referenceHidden"}):void 0]});(0,W.useLayoutEffect)(()=>{T.setReference(R.virtualRef),y(T.floating.current)},[R.virtualRef,y,T]);let[F,Ce]=fe(ye),ve=(K=b.arrow)==null?void 0:K.x,be=(Z=b.arrow)==null?void 0:Z.y,Ee=((j=b.arrow)==null?void 0:j.centerOffset)!==0,[Oe,Te]=t.useState();return(0,W.useLayoutEffect)(()=>{C&&Te(window.getComputedStyle(C).zIndex)},[C]),t.createElement("div",{ref:T.setFloating,style:{position:we,top:0,left:0,transform:Y?`translate3d(${Math.round(L!=null?L:0)}px, ${Math.round(N!=null?N:0)}px, 0)`:"translate3d(0, -200%, 0)",minWidth:"max-content",zIndex:Oe}},t.createElement(Ue,{placedSide:F,onArrowChange:ge,arrowX:ve,arrowY:be,shouldHideArrow:Ee},t.createElement(re.DismissableLayer,{asChild:!0,onEscapeKeyDown:h,onPointerDownOutside:d,onFocusOutside:c,onInteractOutside:m,onDismiss:w},t.createElement(V.Primitive.div,{"data-side":F,"data-align":Ce,"data-state":R.open?"open":"closed",...P,ref:me,style:{userSelect:"none",...P.style,animation:Y?void 0:"none",opacity:(q=b.hide)!=null&&q.referenceHidden?0:void 0,["--selection-popover-content-transform-origin"]:[(z=b.transformOrigin)==null?void 0:z.x,(J=b.transformOrigin)==null?void 0:J.y].join(" ")}}))))});ce.displayName=O;var de="SelectionArrow",Fe={top:"bottom",right:"left",bottom:"top",left:"right"},ue=t.forwardRef((e,o)=>{let n=_e(de),r=Fe[n.placedSide];return t.createElement("span",{ref:n.onArrowChange,style:{position:"absolute",left:n.arrowX,top:n.arrowY,[r]:0,transformOrigin:{top:"",right:"0 0",bottom:"center 0",left:"100% 0"}[n.placedSide],transform:{top:"translateY(100%)",right:"translateY(50%) rotate(90deg) translateX(-50%)",bottom:"rotate(180deg)",left:"translateY(50%) rotate(-90deg) translateX(50%)"}[n.placedSide],visibility:n.shouldHideArrow?"hidden":void 0}},t.createElement(ie.Root,{...e,ref:o,style:{...e.style,display:"block"}}))});ue.displayName=de;function Xe(e){return e!==null}function fe(e){let[o,n="center"]=e.split("-");return[o,n]}var Ge=()=>({name:"anchorCssProperties",async fn(e){let{rects:o,elements:n,platform:r}=e,{width:i,height:u}=o.reference,{width:l,height:s}=o.floating;n.floating.style.setProperty("--selection-popover-select-width",`${i}px`),n.floating.style.setProperty("--selection-popover-select-height",`${u}px`);let a=await r.getDimensions(n.floating);return l!==a.width||s!==a.height?{reset:{rects:!0}}:{}}}),Ke=e=>({name:"transformOrigin",options:e,fn(o){var P,R,w,y,C;let{placement:n,rects:r,middlewareData:i}=o,l=((P=i.arrow)==null?void 0:P.centerOffset)!==0,s=l?0:e.arrowWidth,a=l?0:e.arrowHeight,[p,g]=fe(n),S={start:"0%",center:"50%",end:"100%"}[g],h=((w=(R=i.arrow)==null?void 0:R.x)!=null?w:0)+s/2,d=((C=(y=i.arrow)==null?void 0:y.y)!=null?C:0)+a/2,c="",m="";return p==="bottom"?(c=l?S:`${h}px`,m=`${-a}px`):p==="top"?(c=l?S:`${h}px`,m=`${r.floating.height+a}px`):p==="right"?(c=`${-a}px`,m=l?S:`${d}px`):p==="left"&&(c=`${r.floating.width+a}px`,m=l?S:`${d}px`),{data:{x:c,y:m}}}});0&&(module.exports={Arrow,Content,Portal,Root,Trigger});
//# sourceMappingURL=index.js.map