https://thepeopleplaybook.ai/assets/@radix-ui/react-scroll-area-DezIa-U1.js

1import{r as l}from"../vendor-De3hEHyc.js";import{u as T,j as b,c as te,P as L,a as O,b as C,d as P,e as ne}from"./react-dialog-C-1z5-fj.js";var le=l.createContext(void 0);function ce(e){const t=l.useContext(le);return e||t||"ltr"}function se(e,[t,r]){return Math.min(r,Math.max(t,e))}function ae(e,t){return l.useReducer((r,c)=>t[r][c]??r,e)}var U="ScrollArea",[F,Re]=te(U),[ie,p]=F(U),q=l.forwardRef((e,t)=>{const{__scopeScrollArea:r,type:c="hover",dir:o,scrollHideDelay:n=600,...s}=e,[a,i]=l.useState(null),[h,d]=l.useState(null),[f,u]=l.useState(null),[S,m]=l.useState(null),[A,X]=l.useState(null),[x,_]=l.useState(0),[Y,D]=l.useState(0),[j,y]=l.useState(!1),[W,H]=l.useState(!1),v=T(t,R=>i(R)),w=ce(o);return b.jsx(ie,{scope:r,type:c,dir:w,scrollHideDelay:n,scrollArea:a,viewport:h,onViewportChange:d,content:f,onContentChange:u,scrollbarX:S,onScrollbarXChange:m,scrollbarXEnabled:j,onScrollbarXEnabledChange:y,scrollbarY:A,onScrollbarYChange:X,scrollbarYEnabled:W,onScrollbarYEnabledChange:H,onCornerWidthChange:_,onCornerHeight

1Change:D,children:b.jsx(L.div,{dir:w,...s,ref:v,style:{position:"relative","--radix-scroll-area-corner-width":x+"px","--radix-scroll-area-corner-height":Y+"px",...e.style}})})});q.displayName=U;var $="ScrollAreaViewport",G=l.forwardRef((e,t)=>{const{__scopeScrollArea:r,children:c,nonce:o,...n}=e,s=p($,r),a=l.useRef(null),i=T(t,a,s.onViewportChange);return b.jsxs(b.Fragment,{children:[b.jsx("style",{dangerouslySetInnerHTML:{__html:"[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}"},nonce:o}),b.jsx(L.div,{"data-radix-scroll-area-viewport":"",...n,ref:i,style:{overflowX:s.scrollbarXEnabled?"scroll":"hidden",overflowY:s.scrollbarYEnabled?"scroll":"hidden",...e.style},children:b.jsx("div",{ref:s.onContentChange,style:{minWidth:"100%",display:"table"},children:c})})]})});G.displayName=$;var g="ScrollAreaScrollbar",de=l.forwardRef((e,t)=>{const{forceMount:r,...c}=e,o=p(g,e.__scopeScrollArea),{onScrollbarXEnabledChange:n,onScrollbarYEnabledChange:s}=o,a=e.orientation==="horizontal";return l.useEffect(()=>(a?n(!0):s(!0),()=>{a?n(!1):s(!1)}),[a,n,s]),o.type==="hover"?b.jsx(ue,{...c,ref:t,forceMount:r}):o.type==="scroll"?b.jsx(he,{...c,ref:t,forceMount:r}):o.type==="auto"?b.jsx(J,{...c,ref:t,forceMount:r}):o.type==="always"?b.jsx(V,{...c,ref:t}):null});de.displayName=g;var ue=l.forwardRef((e,t)=>{const{forceMount:r,...c}=e,o=p(g,e.__scopeScrollArea),[n,s]=l.useState(!1);return l.useEffect(()=>{const a=o.scrollArea;let i=0;if(a){const h=()=>{window.clearTimeout(i),s(!0)},d=()=>{i=window.setTimeout(()=>s(!1),o.scrollHideDelay)};return a.addEventListener("pointerenter",h),a.addEventListener("pointerleave",d),()=>{window.clearTimeout(i),a.removeEventListener("pointerenter",h),a.removeEventListener("pointerleave",d)}}},[o.scrollArea,o.scrollHideDelay]),b.jsx(O,{present:r||n,children:b.jsx(J,{"data-state":n?"visible":"hidden",...c,ref:t})})}),he=l.forwardRef((e,t)=>{const{forceMount:r,...c}=e,o=p(g,e.__scopeScrollArea),n=e.orientation==="horizontal",s=M(()=>i("SCROLL_END"),100),[a,i]=ae("hidden",{hidden:{SCROLL:"scrolling"},scrolling:{SCROLL_END:"idle",POINTER_ENTER:"interacting"},interacting:{SCROLL:"interacting",POINTER_LEAVE:"idle"},idle:{HIDE:"hidden",SCROLL:"scrolling",POINTER_ENTER:"interacting"}});return l.useEffect(()=>{if(a==="idle"){const h=window.setTimeout(()=>i("HIDE"),o.scrollHideDelay);return()=>window.clearTimeout(h)}},[a,o.scrollHideDelay,i]),l.useEffect(()=>{const h=o.viewport,d=n?"scrollLeft":"scrollTop";if(h){let f=h[d];const u=()=>{const S=h[d];f!==S&&(i("SCROLL"),s()),f=S};return h.addEventListener("scroll",u),()=>h.removeEventListener("scroll",u)}},[o.viewport,n,i,s]),b.jsx(O,{present:r||a!=="hidden",children:b.jsx(V,{"data-state":a==="hidden"?"hidden":"visible",...c,ref:t,onPointerEnter:C(e.onPointerEnter,()=>i("POINTER_ENTER")),onPointerLeave:C(e.onPointerLeave,()=>i("POINTER_LEAVE"))})})}),J=l.forwardRef((e,t)=>{const r=p(g,e.__scopeScrollArea),{forceMount:c,...o}=e,[n,s]=l.useState(!1),a=e.orientation==="horizontal",i=M(()=>{if(r.viewport){const h=r.viewport.offsetWidth<r.viewport.scrollWidth,d=r.viewport.offsetHeight<r.viewport.scrollHeight;s(a?h:d)}},10);return E(r.viewport,i),E(r.content,i),b.jsx(O,{present:c||n,children:b.jsx(V,{"data-state":n?"visible":"hidden",...o,ref:t})})}),V=l.forwardRef((e,t)=>{const{orientation:r="vertical",...c}=e,o=p(g,e.__scopeScrollArea),n=l.useRef(null),s=l.useRef(0),[a,i]=l.useState({content:0,viewport:0,scrollbar:{size:0,paddingStart:0,paddingEnd:0}}),h=ee(a.viewport,a.content),d={...c,sizes:a,onSizesChange:i,hasThumb:h>0&&h<1,onThumbChange:u=>n.current=u,onThumbPointerUp:()=>s.current=0,onThumbPointerDown:u=>s.current=u};function f(u,S){return we(u,s.current,a,S)}return r==="horizontal"?b.jsx(fe,{...d,ref:t,onThumbPositionChange:()=>{if(o.viewport&&n.current){const u=o.viewport.scrollLeft,S=B(u,a,o.dir);n.current.style.transform=`translate3d(${S}px, 0, 0)`}},onWheelScroll:u=>{o.viewport&&(o.viewport.scrollLeft=u)},onDragScroll:u=>{o.viewport&&(o.viewport.scrollLeft=f(u,o.dir))}}):r==="vertical"?b.jsx(be,{...d,ref:t,onThumbPositionChange:()=>{if(o.viewport&&n.current){const u=o.viewport.scrollTop,S=B(u,a);n.current.style.transform=`translate3d(0, ${S}px, 0)`}},onWheelScroll:u=>{o.viewport&&(o.viewport.scrollTop=u)},onDragScroll:u=>{o.viewport&&(o.viewport.scrollTop=f(u))}}):null}),fe=l.forwardRef((e,t)=>{const{sizes:r,onSizesChange:c,...o}=e,n=p(g,e.__scopeScrollArea),[s,a]=l.useState(),i=l.useRef(null),h=T(t,i,n.onScrollbarXChange);return l.useEffect(()=>{i.current&&a(getComputedStyle(i.current))},[i]),b.jsx(Q,{"data-orientation":"horizontal",...o,ref:h,sizes:r,style:{bottom:0,left:n.dir==="rtl"?"var(--radix-scroll-area-corner-width)":0,right:n.dir==="ltr"?"var(--radix-scroll-area-corner-width)":0,"--radix-scroll-area-thumb-width":I(r)+"px",...e.style},onThumbPointerDown:d=>e.onThumbPointerDown(d.x),onDragScroll:d=>e.onDragScroll(d.x),onWheelScroll:(d,f)=>{if(n.viewport){const u=n.viewport.scrollLeft+d.deltaX;e.onWheelScroll(u),oe(u,f)&&d.preventDefault()}},onResize:()=>{i.current&&n.viewport&&s&&c({content:n.viewport.scrollWidth,viewport:n.viewport.offsetWidth,scrollbar:{size:i.current.clientWidth,paddingStart:N(s.paddingLeft),paddingEnd:N(s.paddingRight)}})}})}),be=l.forwardRef((e,t)=>{const{sizes:r,onSizesChange:c,...o}=e,n=p(g,e.__scopeScrollArea),[s,a]=l.useState(),i=l.useRef(null),h=T(t,i,n.onScrollbarYChange);return l.useEffect(()=>{i.current&&a(getComputedStyle(i.current))},[i]),b.jsx(Q,{"data-orientation":"vertical",...o,ref:h,sizes:r,style:{top:0,right:n.dir==="ltr"?0:void 0,left:n.dir==="rtl"?0:void 0,bottom:"var(--radix-scroll-area-corner-height)","--radix-scroll-area-thumb-height":I(r)+"px",...e.style},onThumbPointerDown:d=>e.onThumbPointerDown(d.y),onDragScroll:d=>e.onDragScroll(d.y),onWheelScroll:(d,f)=>{if(n.viewport){const u=n.viewport.scrollTop+d.deltaY;e.onWheelScroll(u),oe(u,f)&&d.preventDefault()}},onResize:()=>{i.current&&n.viewport&&s&&c({content:n.viewport.scrollHeight,viewport:n.viewport.offsetHeight,scrollbar:{size:i.current.clientHeight,paddingStart:N(s.paddingTop),paddingEnd:N(s.paddingBottom)}})}})}),[Se,K]=F(g),Q=l.forwardRef((e,t)=>{const{__scopeScrollArea:r,sizes:c,hasThumb:o,onThumbChange:n,onThumbPointerUp:s,onThumbPointerDown:a,onThumbPositionChange:i,onDragScroll:h,onWheelScroll:d,onResize:f,...u}=e,S=p(g,r),[m,A]=l.useState(null),X=T(t,v=>A(v)),x=l.useRef(null),_=l.useRef(""),Y=S.viewport,D=c.content-c.viewport,j=P(d),y=P(i),W=M(f,10);function H(v){if(x.current){const w=v.clientX-x.current.left,R=v.clientY-x.current.top;h({x:w,y:R})}}return l.useEffect(()=>{const v=w=>{const R=w.target;(m==null?void 0:m.contains(R))&&j(w,D)};return document.addEventListener("wheel",v,{passive:!1}),()=>document.removeEventListener("wheel",v,{passive:!1})},[Y,m,D,j]),l.useEffect(y,[c,y]),E(m,W),E(S.content,W),b.jsx(Se,{scope:r,scrollbar:m,hasThumb:o,onThumbChange:P(n),onThumbPointerUp:P(s),onThumbPositionChange:y,onThumbPointerDown:P(a),children:b.jsx(L.div,{...u,ref:X,style:{position:"absolute",...u.style},onPointerDown:C(e.onPointerDown,v=>{v.button===0&&(v.target.setPointerCapture(v.pointerId),x.current=m.getBoundingClientRect(),_.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",S.viewport&&(S.viewport.style.scrollBehavior="auto"),H(v))}),onPointerMove:C(e.onPointerMove,H),onPointerUp:C(e.onPointerUp,v=>{const w=v.target;w.hasPointerCapture(v.pointerId)&&w.releasePointerCapture(v.pointerId),document.body.style.webkitUserSelect=_.current,S.viewport&&(S.viewport.style.scrollBehavior=""),x.current=null})})})}),z="ScrollAreaThumb",ve=l.forwardRef((e,t)=>{const{forceMount:r,...c}=e,o=K(z,e.__scopeScrollArea);return b.jsx(O,{present:r||o.hasThumb,children:b.jsx(me,{ref:t,...c})})}),me=l.forwardRef((e,t)=>{const{__scopeScrollArea:r,style:c,...o}=e,n=p(z,r),s=K(z,r),{onThumbPositionChange:a}=s,i=T(t,f=>s.onThumbChange(f)),h=l.useRef(void 0),d=M(()=>{h.current&&(h.current(),h.current=void 0)},100);return l.useEffect(()=>{const f=n.viewport;if(f){const u=()=>{if(d(),!h.current){const S=ge(f,a);h.current=S,a()}};return a(),f.addEventListener("scroll",u),()=>f.removeEventListener("scroll",u)}},[n.viewport,d,a]),b.jsx(L.div,{"data-state":s.hasThumb?"visible":"hidden",...o,ref:i,style:{width:"var(--radix-scroll-area-thumb-width)",height:"var(--radix-scroll-area-thumb-height)",...c},onPointerDownCapture:C(e.onPointerDownCapture,f=>{const S=f.target.getBoundingClientRect(),m=f.clientX-S.left,A=f.clientY-S.top;s.onThumbPointerDown({x:m,y:A})}),onPointerUp:C(e.onPointerUp,s.onThumbPointerUp)})});ve.displayName=z;var k="ScrollAreaCorner",Z=l.forwardRef((e,t)=>{const r=p(k,e.__scopeScrollArea),c=!!(r.scrollbarX&&r.scrollbarY);return r.type!=="scroll"&&c?b.jsx(pe,{...e,ref:t}):null});Z.displayName=k;var pe=l.forwardRef((e,t)=>{const{__scopeScrollArea:r,...c}=e,o=p(k,r),[n,s]=l.useState(0),[a,i]=l.useState(0),h=!!(n&&a);return E(o.scrollbarX,()=>{var f;const d=((f=o.scrollbarX)==null?void 0:f.offsetHeight)||0;o.onCornerHeightChange(d),i(d)}),E(o.scrollbarY,()=>{var f;const d=((f=o.scrollbarY)==null?void 0:f.offsetWidth)||0;o.onCornerWidthChange(d),s(d)}),h?b.jsx(L.div,{...c,ref:t,style:{width:n,height:a,position:"absolute",right:o.dir==="ltr"?0:void 0,left:o.dir==="rtl"?0:void 0,bottom:0,...e.style}}):null});function N(e){return e?parseInt(e,10):0}function ee(e,t){const r=e/t;return isNaN(r)?0:r}function I(e){const t=ee(e.viewport,e.content),r=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,c=(e.scrollbar.size-r)*t;return Math.max(c,18)}function we(e,t,r,c="ltr"){const o=I(r),n=o/2,s=t||n,a=o-s,i=r.scrollbar.paddingStart+s,h=r.scrollbar.size-r.scrollbar.paddingEnd-a,d=r.content-r.viewport,f=c==="ltr"?[0,d]:[d*-1,0];return re([i,h],f)(e)}function B(e,t,r="ltr"){const c=I(t),o=t.scrollbar.paddingStart+t.scrollbar.paddingEnd,n=t.scrollbar.size-o,s=t.content-t.viewport,a=n-c,i=r==="ltr"?[0,s]:[s*-1,0],h=se(e,i);return re([0,s],[0,a])(h)}function re(e,t){return r=>{if(e[0]===e[1]||t[0]===t[1])return t[0];const c=(t[1]-t[0])/(e[1]-e[0]);return t[0]+c*(r-e[0])}}function oe(e,t){return e>0&&e<t}var ge=(e,t=()=>{})=>{let r={left:e.scrollLeft,top:e.scrollTop},c=0;return function o(){const n={left:e.scrollLeft,top:e.scrollTop},s=r.left!==n.left,a=r.top!==n.top;(s||a)&&t(),r=n,c=window.requestAnimationFrame(o)}(),()=>window.cancelAnimationFrame(c)};function M(e,t){const r=P(e),c=l.useRef(0);return l.useEffect(()=>()=>window.clearTimeout(c.current),[]),l.useCallback(()=>{window.clearTimeout(c.current),c.current=window.setTimeout(r,t)},[r,t])}function E(e,t){const r=P(t);ne(()=>{let c=0;if(e){const o=new ResizeObserver(()=>{cancelAnimationFrame(c),c=window.requestAnimationFrame(r)});return o.observe(e),()=>{window.cancelAnimationFrame(c),o.unobserve(e)}}},[e,r])}var Ee=q,Te=G,Ae=Z;export{Ae as C,Ee as R,de as S,Te as V,ve as a};