@stanfordspezi/spezi-web-design-system/dist/ScrollArea-DJFi7AN0.js

Stanford Biodesign Digital Health Spezi Web Design System

"use strict";const h=require("react/jsx-runtime"),q=require("./index-DwV9MiDB.js"),ce=require("react");require("react-dom");const R=require("./index-CajSSBH7.js"),z=require("./index-B4SDXrpf.js"),ae=require("./index-DO-atGp-.js"),P=require("./index-CzY-WZXL.js"),ie=require("./index-Cje7xxa1.js"),x=require("./index-DMAkK3b-.js");function de(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const s=de(ce);function ue(e,[o,r]){return Math.min(r,Math.max(o,e))}var fe=["a","button","div","form","h2","h3","img","input","label","li","nav","ol","p","select","span","svg","ul"],_=fe.reduce((e,o)=>{const r=R.createSlot(`Primitive.${o}`),n=s.forwardRef((t,l)=>{const{asChild:c,...a}=t,i=c?r:o;return typeof window<"u"&&(window[Symbol.for("radix-ui")]=!0),h.jsx(i,{...a,ref:l})});return n.displayName=`Primitive.${o}`,{...e,[o]:n}},{});function he(e,o){return s.useReducer((r,n)=>o[r][n]??r,e)}var Y="ScrollArea",[F]=ae.createContextScope(Y),[be,m]=F(Y),$=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,type:n="hover",dir:t,scrollHideDelay:l=600,...c}=e,[a,i]=s.useState(null),[f,d]=s.useState(null),[b,u]=s.useState(null),[v,w]=s.useState(null),[y,I]=s.useState(null),[C,L]=s.useState(0),[X,j]=s.useState(0),[D,A]=s.useState(!1),[H,N]=s.useState(!1),S=R.useComposedRefs(o,E=>i(E)),p=ie.useDirection(t);return h.jsx(be,{scope:r,type:n,dir:p,scrollHideDelay:l,scrollArea:a,viewport:f,onViewportChange:d,content:b,onContentChange:u,scrollbarX:v,onScrollbarXChange:w,scrollbarXEnabled:D,onScrollbarXEnabledChange:A,scrollbarY:y,onScrollbarYChange:I,scrollbarYEnabled:H,onScrollbarYEnabledChange:N,onCornerWidthChange:L,onCornerHeightChange:j,children:h.jsx(_.div,{dir:p,...c,ref:S,style:{position:"relative","--radix-scroll-area-corner-width":C+"px","--radix-scroll-area-corner-height":X+"px",...e.style}})})});$.displayName=Y;var G="ScrollAreaViewport",J=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,children:n,nonce:t,...l}=e,c=m(G,r),a=s.useRef(null),i=R.useComposedRefs(o,a,c.onViewportChange);return h.jsxs(h.Fragment,{children:[h.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:t}),h.jsx(_.div,{"data-radix-scroll-area-viewport":"",...l,ref:i,style:{overflowX:c.scrollbarXEnabled?"scroll":"hidden",overflowY:c.scrollbarYEnabled?"scroll":"hidden",...e.style},children:h.jsx("div",{ref:c.onContentChange,style:{minWidth:"100%",display:"table"},children:n})})]})});J.displayName=G;var g="ScrollAreaScrollbar",K=s.forwardRef((e,o)=>{const{forceMount:r,...n}=e,t=m(g,e.__scopeScrollArea),{onScrollbarXEnabledChange:l,onScrollbarYEnabledChange:c}=t,a=e.orientation==="horizontal";return s.useEffect(()=>(a?l(!0):c(!0),()=>{a?l(!1):c(!1)}),[a,l,c]),t.type==="hover"?h.jsx(ve,{...n,ref:o,forceMount:r}):t.type==="scroll"?h.jsx(Se,{...n,ref:o,forceMount:r}):t.type==="auto"?h.jsx(Q,{...n,ref:o,forceMount:r}):t.type==="always"?h.jsx(U,{...n,ref:o}):null});K.displayName=g;var ve=s.forwardRef((e,o)=>{const{forceMount:r,...n}=e,t=m(g,e.__scopeScrollArea),[l,c]=s.useState(!1);return s.useEffect(()=>{const a=t.scrollArea;let i=0;if(a){const f=()=>{window.clearTimeout(i),c(!0)},d=()=>{i=window.setTimeout(()=>c(!1),t.scrollHideDelay)};return a.addEventListener("pointerenter",f),a.addEventListener("pointerleave",d),()=>{window.clearTimeout(i),a.removeEventListener("pointerenter",f),a.removeEventListener("pointerleave",d)}}},[t.scrollArea,t.scrollHideDelay]),h.jsx(z.Presence,{present:r||l,children:h.jsx(Q,{"data-state":l?"visible":"hidden",...n,ref:o})})}),Se=s.forwardRef((e,o)=>{const{forceMount:r,...n}=e,t=m(g,e.__scopeScrollArea),l=e.orientation==="horizontal",c=k(()=>i("SCROLL_END"),100),[a,i]=he("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 s.useEffect(()=>{if(a==="idle"){const f=window.setTimeout(()=>i("HIDE"),t.scrollHideDelay);return()=>window.clearTimeout(f)}},[a,t.scrollHideDelay,i]),s.useEffect(()=>{const f=t.viewport,d=l?"scrollLeft":"scrollTop";if(f){let b=f[d];const u=()=>{const v=f[d];b!==v&&(i("SCROLL"),c()),b=v};return f.addEventListener("scroll",u),()=>f.removeEventListener("scroll",u)}},[t.viewport,l,i,c]),h.jsx(z.Presence,{present:r||a!=="hidden",children:h.jsx(U,{"data-state":a==="hidden"?"hidden":"visible",...n,ref:o,onPointerEnter:x.composeEventHandlers(e.onPointerEnter,()=>i("POINTER_ENTER")),onPointerLeave:x.composeEventHandlers(e.onPointerLeave,()=>i("POINTER_LEAVE"))})})}),Q=s.forwardRef((e,o)=>{const r=m(g,e.__scopeScrollArea),{forceMount:n,...t}=e,[l,c]=s.useState(!1),a=e.orientation==="horizontal",i=k(()=>{if(r.viewport){const f=r.viewport.offsetWidth<r.viewport.scrollWidth,d=r.viewport.offsetHeight<r.viewport.scrollHeight;c(a?f:d)}},10);return T(r.viewport,i),T(r.content,i),h.jsx(z.Presence,{present:n||l,children:h.jsx(U,{"data-state":l?"visible":"hidden",...t,ref:o})})}),U=s.forwardRef((e,o)=>{const{orientation:r="vertical",...n}=e,t=m(g,e.__scopeScrollArea),l=s.useRef(null),c=s.useRef(0),[a,i]=s.useState({content:0,viewport:0,scrollbar:{size:0,paddingStart:0,paddingEnd:0}}),f=te(a.viewport,a.content),d={...n,sizes:a,onSizesChange:i,hasThumb:f>0&&f<1,onThumbChange:u=>l.current=u,onThumbPointerUp:()=>c.current=0,onThumbPointerDown:u=>c.current=u};function b(u,v){return Ce(u,c.current,a,v)}return r==="horizontal"?h.jsx(me,{...d,ref:o,onThumbPositionChange:()=>{if(t.viewport&&l.current){const u=t.viewport.scrollLeft,v=V(u,a,t.dir);l.current.style.transform=`translate3d(${v}px, 0, 0)`}},onWheelScroll:u=>{t.viewport&&(t.viewport.scrollLeft=u)},onDragScroll:u=>{t.viewport&&(t.viewport.scrollLeft=b(u,t.dir))}}):r==="vertical"?h.jsx(pe,{...d,ref:o,onThumbPositionChange:()=>{if(t.viewport&&l.current){const u=t.viewport.scrollTop,v=V(u,a);l.current.style.transform=`translate3d(0, ${v}px, 0)`}},onWheelScroll:u=>{t.viewport&&(t.viewport.scrollTop=u)},onDragScroll:u=>{t.viewport&&(t.viewport.scrollTop=b(u))}}):null}),me=s.forwardRef((e,o)=>{const{sizes:r,onSizesChange:n,...t}=e,l=m(g,e.__scopeScrollArea),[c,a]=s.useState(),i=s.useRef(null),f=R.useComposedRefs(o,i,l.onScrollbarXChange);return s.useEffect(()=>{i.current&&a(getComputedStyle(i.current))},[i]),h.jsx(ee,{"data-orientation":"horizontal",...t,ref:f,sizes:r,style:{bottom:0,left:l.dir==="rtl"?"var(--radix-scroll-area-corner-width)":0,right:l.dir==="ltr"?"var(--radix-scroll-area-corner-width)":0,"--radix-scroll-area-thumb-width":M(r)+"px",...e.style},onThumbPointerDown:d=>e.onThumbPointerDown(d.x),onDragScroll:d=>e.onDragScroll(d.x),onWheelScroll:(d,b)=>{if(l.viewport){const u=l.viewport.scrollLeft+d.deltaX;e.onWheelScroll(u),le(u,b)&&d.preventDefault()}},onResize:()=>{i.current&&l.viewport&&c&&n({content:l.viewport.scrollWidth,viewport:l.viewport.offsetWidth,scrollbar:{size:i.current.clientWidth,paddingStart:W(c.paddingLeft),paddingEnd:W(c.paddingRight)}})}})}),pe=s.forwardRef((e,o)=>{const{sizes:r,onSizesChange:n,...t}=e,l=m(g,e.__scopeScrollArea),[c,a]=s.useState(),i=s.useRef(null),f=R.useComposedRefs(o,i,l.onScrollbarYChange);return s.useEffect(()=>{i.current&&a(getComputedStyle(i.current))},[i]),h.jsx(ee,{"data-orientation":"vertical",...t,ref:f,sizes:r,style:{top:0,right:l.dir==="ltr"?0:void 0,left:l.dir==="rtl"?0:void 0,bottom:"var(--radix-scroll-area-corner-height)","--radix-scroll-area-thumb-height":M(r)+"px",...e.style},onThumbPointerDown:d=>e.onThumbPointerDown(d.y),onDragScroll:d=>e.onDragScroll(d.y),onWheelScroll:(d,b)=>{if(l.viewport){const u=l.viewport.scrollTop+d.deltaY;e.onWheelScroll(u),le(u,b)&&d.preventDefault()}},onResize:()=>{i.current&&l.viewport&&c&&n({content:l.viewport.scrollHeight,viewport:l.viewport.offsetHeight,scrollbar:{size:i.current.clientHeight,paddingStart:W(c.paddingTop),paddingEnd:W(c.paddingBottom)}})}})}),[we,Z]=F(g),ee=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,sizes:n,hasThumb:t,onThumbChange:l,onThumbPointerUp:c,onThumbPointerDown:a,onThumbPositionChange:i,onDragScroll:f,onWheelScroll:d,onResize:b,...u}=e,v=m(g,r),[w,y]=s.useState(null),I=R.useComposedRefs(o,S=>y(S)),C=s.useRef(null),L=s.useRef(""),X=v.viewport,j=n.content-n.viewport,D=P.useCallbackRef(d),A=P.useCallbackRef(i),H=k(b,10);function N(S){if(C.current){const p=S.clientX-C.current.left,E=S.clientY-C.current.top;f({x:p,y:E})}}return s.useEffect(()=>{const S=p=>{const E=p.target;w?.contains(E)&&D(p,j)};return document.addEventListener("wheel",S,{passive:!1}),()=>document.removeEventListener("wheel",S,{passive:!1})},[X,w,j,D]),s.useEffect(A,[n,A]),T(w,H),T(v.content,H),h.jsx(we,{scope:r,scrollbar:w,hasThumb:t,onThumbChange:P.useCallbackRef(l),onThumbPointerUp:P.useCallbackRef(c),onThumbPositionChange:A,onThumbPointerDown:P.useCallbackRef(a),children:h.jsx(_.div,{...u,ref:I,style:{position:"absolute",...u.style},onPointerDown:x.composeEventHandlers(e.onPointerDown,S=>{S.button===0&&(S.target.setPointerCapture(S.pointerId),C.current=w.getBoundingClientRect(),L.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",v.viewport&&(v.viewport.style.scrollBehavior="auto"),N(S))}),onPointerMove:x.composeEventHandlers(e.onPointerMove,N),onPointerUp:x.composeEventHandlers(e.onPointerUp,S=>{const p=S.target;p.hasPointerCapture(S.pointerId)&&p.releasePointerCapture(S.pointerId),document.body.style.webkitUserSelect=L.current,v.viewport&&(v.viewport.style.scrollBehavior=""),C.current=null})})})}),O="ScrollAreaThumb",re=s.forwardRef((e,o)=>{const{forceMount:r,...n}=e,t=Z(O,e.__scopeScrollArea);return h.jsx(z.Presence,{present:r||t.hasThumb,children:h.jsx(ge,{ref:o,...n})})}),ge=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,style:n,...t}=e,l=m(O,r),c=Z(O,r),{onThumbPositionChange:a}=c,i=R.useComposedRefs(o,b=>c.onThumbChange(b)),f=s.useRef(void 0),d=k(()=>{f.current&&(f.current(),f.current=void 0)},100);return s.useEffect(()=>{const b=l.viewport;if(b){const u=()=>{if(d(),!f.current){const v=Pe(b,a);f.current=v,a()}};return a(),b.addEventListener("scroll",u),()=>b.removeEventListener("scroll",u)}},[l.viewport,d,a]),h.jsx(_.div,{"data-state":c.hasThumb?"visible":"hidden",...t,ref:i,style:{width:"var(--radix-scroll-area-thumb-width)",height:"var(--radix-scroll-area-thumb-height)",...n},onPointerDownCapture:x.composeEventHandlers(e.onPointerDownCapture,b=>{const v=b.target.getBoundingClientRect(),w=b.clientX-v.left,y=b.clientY-v.top;c.onThumbPointerDown({x:w,y})}),onPointerUp:x.composeEventHandlers(e.onPointerUp,c.onThumbPointerUp)})});re.displayName=O;var B="ScrollAreaCorner",oe=s.forwardRef((e,o)=>{const r=m(B,e.__scopeScrollArea),n=!!(r.scrollbarX&&r.scrollbarY);return r.type!=="scroll"&&n?h.jsx(xe,{...e,ref:o}):null});oe.displayName=B;var xe=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,...n}=e,t=m(B,r),[l,c]=s.useState(0),[a,i]=s.useState(0),f=!!(l&&a);return T(t.scrollbarX,()=>{const d=t.scrollbarX?.offsetHeight||0;t.onCornerHeightChange(d),i(d)}),T(t.scrollbarY,()=>{const d=t.scrollbarY?.offsetWidth||0;t.onCornerWidthChange(d),c(d)}),f?h.jsx(_.div,{...n,ref:o,style:{width:l,height:a,position:"absolute",right:t.dir==="ltr"?0:void 0,left:t.dir==="rtl"?0:void 0,bottom:0,...e.style}}):null});function W(e){return e?parseInt(e,10):0}function te(e,o){const r=e/o;return isNaN(r)?0:r}function M(e){const o=te(e.viewport,e.content),r=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,n=(e.scrollbar.size-r)*o;return Math.max(n,18)}function Ce(e,o,r,n="ltr"){const t=M(r),l=t/2,c=o||l,a=t-c,i=r.scrollbar.paddingStart+c,f=r.scrollbar.size-r.scrollbar.paddingEnd-a,d=r.content-r.viewport,b=n==="ltr"?[0,d]:[d*-1,0];return ne([i,f],b)(e)}function V(e,o,r="ltr"){const n=M(o),t=o.scrollbar.paddingStart+o.scrollbar.paddingEnd,l=o.scrollbar.size-t,c=o.content-o.viewport,a=l-n,i=r==="ltr"?[0,c]:[c*-1,0],f=ue(e,i);return ne([0,c],[0,a])(f)}function ne(e,o){return r=>{if(e[0]===e[1]||o[0]===o[1])return o[0];const n=(o[1]-o[0])/(e[1]-e[0]);return o[0]+n*(r-e[0])}}function le(e,o){return e>0&&e<o}var Pe=(e,o=()=>{})=>{let r={left:e.scrollLeft,top:e.scrollTop},n=0;return(function t(){const l={left:e.scrollLeft,top:e.scrollTop},c=r.left!==l.left,a=r.top!==l.top;(c||a)&&o(),r=l,n=window.requestAnimationFrame(t)})(),()=>window.cancelAnimationFrame(n)};function k(e,o){const r=P.useCallbackRef(e),n=s.useRef(0);return s.useEffect(()=>()=>window.clearTimeout(n.current),[]),s.useCallback(()=>{window.clearTimeout(n.current),n.current=window.setTimeout(r,o)},[r,o])}function T(e,o){const r=P.useCallbackRef(o);x.useLayoutEffect2(()=>{let n=0;if(e){const t=new ResizeObserver(()=>{cancelAnimationFrame(n),n=window.requestAnimationFrame(r)});return t.observe(e),()=>{window.cancelAnimationFrame(n),t.unobserve(e)}}},[e,r])}var Re=$,Ee=J,Te=oe;const ye=({scrollViewRef:e,className:o,children:r,onScroll:n,...t})=>h.jsxs(Re,{"data-testid":"scroll-area","data-slot":"scroll-area",className:q.cn("relative",o),...t,children:[h.jsx(Ee,{ref:e,"data-testid":"scroll-area-viewport","data-slot":"scroll-area-viewport",className:"focus-ring size-full rounded-[inherit] transition focus-visible:ring-2",onScroll:n,children:r}),h.jsx(se,{}),h.jsx(Te,{})]}),se=({className:e,orientation:o="vertical",...r})=>h.jsx(K,{"data-testid":"scroll-area-scrollbar","data-slot":"scroll-area-scrollbar",orientation:o,className:q.cn("flex touch-none p-px transition select-none",o==="vertical"?"h-full w-2.5 border-l border-l-transparent":"h-2.5 flex-col border-t border-t-transparent",e),...r,children:h.jsx(re,{"data-slot":"scroll-area-thumb",className:"bg-border relative flex-1 rounded-full"})});exports.ScrollArea=ye;exports.ScrollBar=se;