selection-popover - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/index.js

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

package.json

 {
   "name": "selection-popover",
-  "version": "0.1.2",
+  "description": "Easy-to-use, composable react selection popover.",
+  "version": "0.1.3",
   "license": "MIT",
@@ -20,3 +21,4 @@ "main": "./dist/index.js",
     "selection",
-    "popover"
+    "popover",
+    "text-selection"
   ],
@@ -23,0 +25,0 @@ "author": "João Pedro Magalhães <[e-mail]>",

README.md

 <p align="center">
-  <img src="./website/public/og.png" />
+  <a align='center' href="https://selection-popover.vercel.app">
+    <img src="./website/public/og.png" />
+  </a>
 </p>
 
-## Table of Contents
+<p align="center">
+  Easy-to-use, composable react selection popover
+</p>
 
-- [Install](#install)
+<div align="center">
+
+  <a href="https://www.npmjs.com/package/selection-popover">![npm version](https://img.shields.io/npm/v/selection-popover.svg)</a>
+  <a href="https://www.npmjs.com/package/selection-popover">![npm downloads](https://img.shields.io/npm/dm/selection-popover.svg)</a>
+  
+</div>
+
+## Install
+
+```bash
+npm install selection-popover
+```
+
+## Content
+
 - [Anatomy](#anatomy)
@@ -16,14 +34,8 @@ - [API Reference](#api-reference)
 - [Examples](#examples)
-  - [Unmount animations](#unmount-animations)
   - [Origin-aware animations](#origin-aware-animations)
   - [Collision-aware animations](#collision-aware-animations)
+  - [Unmount animations](#unmount-animations)
   - [Use with Radix Toolbar](#use-with-radix-toolbar)
 - [Acknowledge](#acknowledge)
 
-## Install
-
-```bash
-npm install selection-popover
-```
-
 ## Anatomy
@@ -34,3 +46,3 @@
 ```jsx
-import * as Selection from 'selection-popover';
+import * as Selection from 'selection-popover'
 
@@ -46,3 +58,3 @@ export default () => (
   </Selection.Root>
-);
+)
 ```
@@ -62,3 +74,3 @@
 | `whileSelect`  | `boolean`                 | `false` | When `true`, the popover will open while the text is selected, otherwise only when the mouse up.                    |
-| `disabled`  | `boolean`                 | `false` | When true, the popover won't open when text is selected.                     |
+| `disabled`     | `boolean`                 | `false` | When true, the popover won't open when text is selected.                                                            |
 
@@ -110,4 +122,4 @@ ### Trigger
 | `--selection-popover-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets. |
-| `--selection-popover-select-width`            | The width of the select.                                                     |
-| `--selection-popover-select-height`           | The height of the select.                                                    |
+| `--selection-popover-select-width`             | The width of the select.                                                      |
+| `--selection-popover-select-height`            | The height of the select.                                                     |
 
@@ -126,8 +138,9 @@ ### Arrow
 
-### Unmount animations
 
+### Origin-aware animations
+
 ```jsx
 // index.jsx
-import * as Selection from 'selection-popover';
-import './styles.css';
+import * as Selection from 'selection-popover'
+import './styles.css'
 
@@ -141,3 +154,3 @@ export default () => (
   </Selection.Root>
-);
+)
 ```
@@ -148,41 +161,24 @@
 .SelectionContent {
-  animation-duration: 400ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: var(--selection-popover-content-transform-origin);
+  animation: scaleIn 500ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.SelectionContent[data-state='open'] {
-  animation-name: slideDownAndFade;
-}
-.SelectionContent[data-state='closed'] {
-  animation-name: slideUpAndFade;
-}
 
-@keyframes slideDownAndFade {
+@keyframes scaleIn {
   from {
     opacity: 0;
-    transform: translateY(-2px);
+    transform: scale(0);
   }
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: scale(1);
   }
 }
-
-@keyframes slideUpAndFade {
-  from {
-    opacity: 1;
-    transform: translateY(0));
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-2px);
-  }
-}
 ```
 
-### Origin-aware animations
+### Collision-aware animations
 
 ```jsx
 // index.jsx
-import * as Selection from 'selection-popover';
-import './styles.css';
+import * as Selection from 'selection-popover'
+import './styles.css'
 
@@ -196,3 +192,3 @@ export default () => (
   </Selection.Root>
-);
+)
 ```
@@ -203,24 +199,41 @@
 .SelectionContent {
-  transform-origin: var(--selection-popover-content-transform-origin);
-  animation: scaleIn 500ms cubic-bezier(0.16, 1, 0.3, 1);
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }
+.SelectionContent[data-state='open'][data-side='top'] {
+  animation-name: slideDownAndFade;
+}
+.SelectionContent[data-state='open'][data-side='bottom'] {
+  animation-name: slideUpAndFade;
+}
 
-@keyframes scaleIn {
+@keyframes slideDownAndFade {
   from {
     opacity: 0;
-    transform: scale(0);
+    transform: translateY(-2px);
   }
   to {
     opacity: 1;
-    transform: scale(1);
+    transform: translateY(0);
   }
 }
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 ```
 
-### Collision-aware animations
+### Unmount animations
 
 ```jsx
 // index.jsx
-import * as Selection from 'selection-popover';
-import './styles.css';
+import * as Selection from 'selection-popover'
+import './styles.css'
 
@@ -234,3 +247,3 @@ export default () => (
   </Selection.Root>
-);
+)
 ```
@@ -244,6 +257,6 @@
 }
-.SelectionContent[data-state='open'][data-side='top'] {
+.SelectionContent[data-state='open'] {
   animation-name: slideDownAndFade;
 }
-.SelectionContent[data-state='open'][data-side='bottom'] {
+.SelectionContent[data-state='closed'] {
   animation-name: slideUpAndFade;
@@ -265,8 +278,8 @@ }
   from {
-    opacity: 0;
-    transform: translateY(2px));
+    opacity: 1;
+    transform: translateY(0));
   }
   to {
-    opacity: 1;
-    transform: translateY(0);
+    opacity: 0;
+    transform: translateY(-2px);
   }
@@ -279,4 +292,4 @@ }
 ```jsx
-import * as Selection from 'selection-popover';
-import * as Toolbar from '@radix-ui/react-toolbar';
+import * as Selection from 'selection-popover'
+import * as Toolbar from '@radix-ui/react-toolbar'
 
@@ -293,3 +306,3 @@ export default () => (
   </Selection.Root>
-);
+)
 ```
@@ -296,0 +309,0 @@

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

34026

increased by3.14%

Lines of code

113

increased by1.8%

Number of lines in readme file

299

increased by4.55%

No dependency changes