selection-popover - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/index.d.ts

 import * as React from 'react';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Portal } from '@radix-ui/react-portal';
+import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import * as ArrowPrimitive from '@radix-ui/react-arrow';
@@ -41,2 +42,3 @@
 type Boundary = Element | null;
+type DismissableLayerProps = React.ComponentPropsWithoutRef<typeof DismissableLayer>;
 interface SelectionContentImplProps extends PrimitiveDivProps {
@@ -53,2 +55,6 @@ side?: Side;
     avoidCollisions?: boolean;
+    onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];
+    onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'];
+    onFocusOutside?: DismissableLayerProps['onFocusOutside'];
+    onInteractOutside?: DismissableLayerProps['onInteractOutside'];
 }
@@ -55,0 +61,0 @@ type ArrowProps = React.ComponentPropsWithoutRef<typeof ArrowPrimitive.Root>;

dist/index.js

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

package.json

 {
   "name": "selection-popover",
   "description": "Easy-to-use, composable react selection popover.",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
@@ -34,2 +34,3 @@ "main": "./dist/index.js",
     "@radix-ui/react-context": "1.0.0",
+    "@radix-ui/react-dismissable-layer": "1.0.4",
     "@radix-ui/react-portal": "1.0.1",
@@ -36,0 +37,0 @@ "@radix-ui/react-presence": "1.0.0",

README.md

@@ -96,16 +96,20 @@ <p align="center">
 
-| Prop                | Type                                        | Default   | Description                                                                                                                                                                                                               |
-| ------------------- | ------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `asChild`           | `boolean`                                   | false     | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.             |
-| `forceMount`        | `boolean`                                   | -         | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from `Selection.Portal`.                                                                |
-| `side`              | `"top" \| "right" \| "bottom" \| "left"`    | `top`     | The preferred side of the selection to render against when open. Will be reversed when collisions occur and `avoidCollisions` is enabled.                                                                                 |
-| `sideOffset`        | `number`                                    | `0`       | The distance in pixels from the selection.                                                                                                                                                                                |
-| `align`             | `"start" \| "center" \| "end"`              | `center`  | The preferred alignment against the selection. May change when collisions occur.                                                                                                                                          |
-| `alignOffset`       | `number`                                    | `0`       | An offset in pixels from the `"start"` or `"end"` alignment options.                                                                                                                                                      |
-| `avoidCollisions`   | `boolean`                                   | `true`    | When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges.                                                                                                                      |
-| `collisionBoundary` | `Element \| null \| Array<Element \| null>` | `[]`      | The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.                                                                   |
-| `collisionPadding`  | `number \| Partial<Record<Side, number>>`   | `0`       | The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: `{ top: 20, left: 20 }`.                          |
-| `arrowPadding`      | `number`                                    | `0`       | The padding between the arrow and the edges of the content. If your content has `border-radius`, this will prevent it from overflowing the corners.                                                                       |
-| `sticky`            | `"partial" \| "always"`                     | `partial` | The sticky behavior on the align axis. `"partial"` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst `"always"` will keep the content in the boundary regardless. |
-| `hideWhenDetached`  | `boolean`                                   | `false`   | Whether to hide the content when the text becomes fully occluded.                                                                                                                                                         |
+| Prop                   | Type                                                            | Default   | Description                                                                                                                                                                                                               |
+| ---------------------- | --------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `asChild`              | `boolean`                                                       | false     | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.             |
+| `forceMount`           | `boolean`                                                       | -         | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from `Selection.Portal`.                                                                |
+| `side`                 | `"top" \| "right" \| "bottom" \| "left"`                        | `top`     | The preferred side of the selection to render against when open. Will be reversed when collisions occur and `avoidCollisions` is enabled.                                                                                 |
+| `sideOffset`           | `number`                                                        | `0`       | The distance in pixels from the selection.                                                                                                                                                                                |
+| `align`                | `"start" \| "center" \| "end"`                                  | `center`  | The preferred alignment against the selection. May change when collisions occur.                                                                                                                                          |
+| `alignOffset`          | `number`                                                        | `0`       | An offset in pixels from the `"start"` or `"end"` alignment options.                                                                                                                                                      |
+| `avoidCollisions`      | `boolean`                                                       | `true`    | When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges.                                                                                                                      |
+| `collisionBoundary`    | `Element \| null \| Array<Element \| null>`                     | `[]`      | The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.                                                                   |
+| `collisionPadding`     | `number \| Partial<Record<Side, number>>`                       | `0`       | The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: `{ top: 20, left: 20 }`.                          |
+| `arrowPadding`         | `number`                                                        | `0`       | The padding between the arrow and the edges of the content. If your content has `border-radius`, this will prevent it from overflowing the corners.                                                                       |
+| `sticky`               | `"partial" \| "always"`                                         | `partial` | The sticky behavior on the align axis. `"partial"` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst `"always"` will keep the content in the boundary regardless. |
+| `hideWhenDetached`     | `boolean`                                                       | `false`   | Whether to hide the content when the text becomes fully occluded.                                                                                                                                                         |
+| `onEscapeKeyDown`      | `(event: KeyboardEvent) => void`                                | -         | Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.                                                                                                                  |
+| `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void`                      | -         | Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling `event.preventDefault`.                                                                              |
+| `onFocusOutside`       | `(event: FocusOutsideEvent) => void`                            | -         | Event handler called when focus moves outside the bounds of the component. It can be prevented by calling `event.preventDefault`.                                                                                         |
+| `onInteractOutside`    | `(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void` | -         | Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. It can be prevented by calling `event.preventDefault`.                                                     |
 
@@ -112,0 +116,0 @@ | Data Attribute | Values                                   |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108200

increased by2.38%

Lines of code

129

increased by4.88%

Number of lines in readme file

304

increased by1.33%

Worsened metrics

Dependency count

13

increased by8.33%

Dependency changes

• + Added@radix-ui/react-dismissable-layer@1.0.4

• + Added@radix-ui/primitive@1.0.1(transitive)

• + Added@radix-ui/react-compose-refs@1.0.1(transitive)

• + Added@radix-ui/react-dismissable-layer@1.0.4(transitive)

• + Added@radix-ui/react-primitive@1.0.3(transitive)

• + Added@radix-ui/react-slot@1.0.2(transitive)

• + Added@radix-ui/react-use-callback-ref@1.0.1(transitive)

• + Added@radix-ui/react-use-escape-keydown@1.0.3(transitive)