ivt/dist/chunks/scroll-area-v3WLDhPc.mjs

Ivt Components Library

import{c as e}from"./utils-B4HRExF_.mjs";import*as r from"react";import t from"react";import{P as o}from"./index-Bj6b6xW8.mjs";import{u as n,P as l,c as i}from"./index-BgU_7G37.mjs";import{c as a}from"./index-BXKQJZ6z.mjs";import{u as s}from"./index-DwSoQWco.mjs";import{u as c}from"./index-X2oEHtiP.mjs";import{u as d}from"./index-C99OdH8-.mjs";import{jsx as u,jsxs as p,Fragment as f}from"react/jsx-runtime";var h="ScrollArea",[v,w]=a(h),[m,b]=v(h),g=r.forwardRef(((e,t)=>{const{__scopeScrollArea:l,type:i="hover",dir:a,scrollHideDelay:s=600,...d}=e,[p,f]=r.useState(null),[h,v]=r.useState(null),[w,b]=r.useState(null),[g,S]=r.useState(null),[E,y]=r.useState(null),[T,C]=r.useState(0),[R,P]=r.useState(0),[x,_]=r.useState(!1),[L,D]=r.useState(!1),A=n(t,(e=>f(e))),z=c(a);return u(m,{scope:l,type:i,dir:z,scrollHideDelay:s,scrollArea:p,viewport:h,onViewportChange:v,content:w,onContentChange:b,scrollbarX:g,onScrollbarXChange:S,scrollbarXEnabled:x,onScrollbarXEnabledChange:_,scrollbarY:E,onScrollbarYChange:y,scrollbarYEnabled:L,onScrollbarYEnabledChange:D,onCornerWidthChange:C,onCornerHeightChange:P,children:u(o.div,{dir:z,...d,ref:A,style:{position:"relative","--radix-scroll-area-corner-width":T+"px","--radix-scroll-area-corner-height":R+"px",...e.style}})})}));g.displayName=h;var S="ScrollAreaViewport",E=r.forwardRef(((e,t)=>{const{__scopeScrollArea:l,children:i,nonce:a,...s}=e,c=b(S,l),d=r.useRef(null),h=n(t,d,c.onViewportChange);return p(f,{children:[u("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:a}),u(o.div,{"data-radix-scroll-area-viewport":"",...s,ref:h,style:{overflowX:c.scrollbarXEnabled?"scroll":"hidden",overflowY:c.scrollbarYEnabled?"scroll":"hidden",...e.style},children:u("div",{ref:c.onContentChange,style:{minWidth:"100%",display:"table"},children:i})})]})}));E.displayName=S;var y="ScrollAreaScrollbar",T=r.forwardRef(((e,t)=>{const{forceMount:o,...n}=e,l=b(y,e.__scopeScrollArea),{onScrollbarXEnabledChange:i,onScrollbarYEnabledChange:a}=l,s="horizontal"===e.orientation;return r.useEffect((()=>(s?i(!0):a(!0),()=>{s?i(!1):a(!1)})),[s,i,a]),"hover"===l.type?u(C,{...n,ref:t,forceMount:o}):"scroll"===l.type?u(R,{...n,ref:t,forceMount:o}):"auto"===l.type?u(P,{...n,ref:t,forceMount:o}):"always"===l.type?u(x,{...n,ref:t}):null}));T.displayName=y;var C=r.forwardRef(((e,t)=>{const{forceMount:o,...n}=e,i=b(y,e.__scopeScrollArea),[a,s]=r.useState(!1);return r.useEffect((()=>{const e=i.scrollArea;let r=0;if(e){const t=()=>{window.clearTimeout(r),s(!0)},o=()=>{r=window.setTimeout((()=>s(!1)),i.scrollHideDelay)};return e.addEventListener("pointerenter",t),e.addEventListener("pointerleave",o),()=>{window.clearTimeout(r),e.removeEventListener("pointerenter",t),e.removeEventListener("pointerleave",o)}}}),[i.scrollArea,i.scrollHideDelay]),u(l,{present:o||a,children:u(P,{"data-state":a?"visible":"hidden",...n,ref:t})})})),R=r.forwardRef(((e,t)=>{const{forceMount:o,...n}=e,a=b(y,e.__scopeScrollArea),s="horizontal"===e.orientation,c=V((()=>p("SCROLL_END")),100),[d,p]=(f="hidden",h={hidden:{SCROLL:"scrolling"},scrolling:{SCROLL_END:"idle",POINTER_ENTER:"interacting"},interacting:{SCROLL:"interacting",POINTER_LEAVE:"idle"},idle:{HIDE:"hidden",SCROLL:"scrolling",POINTER_ENTER:"interacting"}},r.useReducer(((e,r)=>h[e][r]??e),f));var f,h;return r.useEffect((()=>{if("idle"===d){const e=window.setTimeout((()=>p("HIDE")),a.scrollHideDelay);return()=>window.clearTimeout(e)}}),[d,a.scrollHideDelay,p]),r.useEffect((()=>{const e=a.viewport,r=s?"scrollLeft":"scrollTop";if(e){let t=e[r];const o=()=>{const o=e[r];t!==o&&(p("SCROLL"),c()),t=o};return e.addEventListener("scroll",o),()=>e.removeEventListener("scroll",o)}}),[a.viewport,s,p,c]),u(l,{present:o||"hidden"!==d,children:u(x,{"data-state":"hidden"===d?"hidden":"visible",...n,ref:t,onPointerEnter:i(e.onPointerEnter,(()=>p("POINTER_ENTER"))),onPointerLeave:i(e.onPointerLeave,(()=>p("POINTER_LEAVE")))})})})),P=r.forwardRef(((e,t)=>{const o=b(y,e.__scopeScrollArea),{forceMount:n,...i}=e,[a,s]=r.useState(!1),c="horizontal"===e.orientation,d=V((()=>{if(o.viewport){const e=o.viewport.offsetWidth<o.viewport.scrollWidth,r=o.viewport.offsetHeight<o.viewport.scrollHeight;s(c?e:r)}}),10);return q(o.viewport,d),q(o.content,d),u(l,{present:n||a,children:u(x,{"data-state":a?"visible":"hidden",...i,ref:t})})})),x=r.forwardRef(((e,t)=>{const{orientation:o="vertical",...n}=e,l=b(y,e.__scopeScrollArea),i=r.useRef(null),a=r.useRef(0),[s,c]=r.useState({content:0,viewport:0,scrollbar:{size:0,paddingStart:0,paddingEnd:0}}),d=O(s.viewport,s.content),p={...n,sizes:s,onSizesChange:c,hasThumb:Boolean(d>0&&d<1),onThumbChange:e=>i.current=e,onThumbPointerUp:()=>a.current=0,onThumbPointerDown:e=>a.current=e};function f(e,r){return function(e,r,t,o="ltr"){const n=U(t),l=n/2,i=r||l,a=n-i,s=t.scrollbar.paddingStart+i,c=t.scrollbar.size-t.scrollbar.paddingEnd-a,d=t.content-t.viewport,u="ltr"===o?[0,d]:[-1*d,0];return k([s,c],u)(e)}(e,a.current,s,r)}return"horizontal"===o?u(_,{...p,ref:t,onThumbPositionChange:()=>{if(l.viewport&&i.current){const e=j(l.viewport.scrollLeft,s,l.dir);i.current.style.transform=`translate3d(${e}px, 0, 0)`}},onWheelScroll:e=>{l.viewport&&(l.viewport.scrollLeft=e)},onDragScroll:e=>{l.viewport&&(l.viewport.scrollLeft=f(e,l.dir))}}):"vertical"===o?u(L,{...p,ref:t,onThumbPositionChange:()=>{if(l.viewport&&i.current){const e=j(l.viewport.scrollTop,s);i.current.style.transform=`translate3d(0, ${e}px, 0)`}},onWheelScroll:e=>{l.viewport&&(l.viewport.scrollTop=e)},onDragScroll:e=>{l.viewport&&(l.viewport.scrollTop=f(e))}}):null})),_=r.forwardRef(((e,t)=>{const{sizes:o,onSizesChange:l,...i}=e,a=b(y,e.__scopeScrollArea),[s,c]=r.useState(),d=r.useRef(null),p=n(t,d,a.onScrollbarXChange);return r.useEffect((()=>{d.current&&c(getComputedStyle(d.current))}),[d]),u(z,{"data-orientation":"horizontal",...i,ref:p,sizes:o,style:{bottom:0,left:"rtl"===a.dir?"var(--radix-scroll-area-corner-width)":0,right:"ltr"===a.dir?"var(--radix-scroll-area-corner-width)":0,"--radix-scroll-area-thumb-width":U(o)+"px",...e.style},onThumbPointerDown:r=>e.onThumbPointerDown(r.x),onDragScroll:r=>e.onDragScroll(r.x),onWheelScroll:(r,t)=>{if(a.viewport){const o=a.viewport.scrollLeft+r.deltaX;e.onWheelScroll(o),B(o,t)&&r.preventDefault()}},onResize:()=>{d.current&&a.viewport&&s&&l({content:a.viewport.scrollWidth,viewport:a.viewport.offsetWidth,scrollbar:{size:d.current.clientWidth,paddingStart:I(s.paddingLeft),paddingEnd:I(s.paddingRight)}})}})})),L=r.forwardRef(((e,t)=>{const{sizes:o,onSizesChange:l,...i}=e,a=b(y,e.__scopeScrollArea),[s,c]=r.useState(),d=r.useRef(null),p=n(t,d,a.onScrollbarYChange);return r.useEffect((()=>{d.current&&c(getComputedStyle(d.current))}),[d]),u(z,{"data-orientation":"vertical",...i,ref:p,sizes:o,style:{top:0,right:"ltr"===a.dir?0:void 0,left:"rtl"===a.dir?0:void 0,bottom:"var(--radix-scroll-area-corner-height)","--radix-scroll-area-thumb-height":U(o)+"px",...e.style},onThumbPointerDown:r=>e.onThumbPointerDown(r.y),onDragScroll:r=>e.onDragScroll(r.y),onWheelScroll:(r,t)=>{if(a.viewport){const o=a.viewport.scrollTop+r.deltaY;e.onWheelScroll(o),B(o,t)&&r.preventDefault()}},onResize:()=>{d.current&&a.viewport&&s&&l({content:a.viewport.scrollHeight,viewport:a.viewport.offsetHeight,scrollbar:{size:d.current.clientHeight,paddingStart:I(s.paddingTop),paddingEnd:I(s.paddingBottom)}})}})})),[D,A]=v(y),z=r.forwardRef(((e,t)=>{const{__scopeScrollArea:l,sizes:a,hasThumb:c,onThumbChange:d,onThumbPointerUp:p,onThumbPointerDown:f,onThumbPositionChange:h,onDragScroll:v,onWheelScroll:w,onResize:m,...g}=e,S=b(y,l),[E,T]=r.useState(null),C=n(t,(e=>T(e))),R=r.useRef(null),P=r.useRef(""),x=S.viewport,_=a.content-a.viewport,L=s(w),A=s(h),z=V(m,10);function N(e){if(R.current){const r=e.clientX-R.current.left,t=e.clientY-R.current.top;v({x:r,y:t})}}return r.useEffect((()=>{const e=e=>{const r=e.target,t=E?.contains(r);t&&L(e,_)};return document.addEventListener("wheel",e,{passive:!1}),()=>document.removeEventListener("wheel",e,{passive:!1})}),[x,E,_,L]),r.useEffect(A,[a,A]),q(E,z),q(S.content,z),u(D,{scope:l,scrollbar:E,hasThumb:c,onThumbChange:s(d),onThumbPointerUp:s(p),onThumbPositionChange:A,onThumbPointerDown:s(f),children:u(o.div,{...g,ref:C,style:{position:"absolute",...g.style},onPointerDown:i(e.onPointerDown,(e=>{if(0===e.button){e.target.setPointerCapture(e.pointerId),R.current=E.getBoundingClientRect(),P.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",S.viewport&&(S.viewport.style.scrollBehavior="auto"),N(e)}})),onPointerMove:i(e.onPointerMove,N),onPointerUp:i(e.onPointerUp,(e=>{const r=e.target;r.hasPointerCapture(e.pointerId)&&r.releasePointerCapture(e.pointerId),document.body.style.webkitUserSelect=P.current,S.viewport&&(S.viewport.style.scrollBehavior=""),R.current=null}))})})})),N="ScrollAreaThumb",H=r.forwardRef(((e,r)=>{const{forceMount:t,...o}=e,n=A(N,e.__scopeScrollArea);return u(l,{present:t||n.hasThumb,children:u(W,{ref:r,...o})})})),W=r.forwardRef(((e,t)=>{const{__scopeScrollArea:l,style:a,...s}=e,c=b(N,l),d=A(N,l),{onThumbPositionChange:p}=d,f=n(t,(e=>d.onThumbChange(e))),h=r.useRef(void 0),v=V((()=>{h.current&&(h.current(),h.current=void 0)}),100);return r.useEffect((()=>{const e=c.viewport;if(e){const r=()=>{if(v(),!h.current){const r=F(e,p);h.current=r,p()}};return p(),e.addEventListener("scroll",r),()=>e.removeEventListener("scroll",r)}}),[c.viewport,v,p]),u(o.div,{"data-state":d.hasThumb?"visible":"hidden",...s,ref:f,style:{width:"var(--radix-scroll-area-thumb-width)",height:"var(--radix-scroll-area-thumb-height)",...a},onPointerDownCapture:i(e.onPointerDownCapture,(e=>{const r=e.target.getBoundingClientRect(),t=e.clientX-r.left,o=e.clientY-r.top;d.onThumbPointerDown({x:t,y:o})})),onPointerUp:i(e.onPointerUp,d.onThumbPointerUp)})}));H.displayName=N;var M="ScrollAreaCorner",X=r.forwardRef(((e,r)=>{const t=b(M,e.__scopeScrollArea),o=Boolean(t.scrollbarX&&t.scrollbarY);return"scroll"!==t.type&&o?u(Y,{...e,ref:r}):null}));X.displayName=M;var Y=r.forwardRef(((e,t)=>{const{__scopeScrollArea:n,...l}=e,i=b(M,n),[a,s]=r.useState(0),[c,d]=r.useState(0),p=Boolean(a&&c);return q(i.scrollbarX,(()=>{const e=i.scrollbarX?.offsetHeight||0;i.onCornerHeightChange(e),d(e)})),q(i.scrollbarY,(()=>{const e=i.scrollbarY?.offsetWidth||0;i.onCornerWidthChange(e),s(e)})),p?u(o.div,{...l,ref:t,style:{width:a,height:c,position:"absolute",right:"ltr"===i.dir?0:void 0,left:"rtl"===i.dir?0:void 0,bottom:0,...e.style}}):null}));function I(e){return e?parseInt(e,10):0}function O(e,r){const t=e/r;return isNaN(t)?0:t}function U(e){const r=O(e.viewport,e.content),t=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,o=(e.scrollbar.size-t)*r;return Math.max(o,18)}function j(e,r,t="ltr"){const o=U(r),n=r.scrollbar.paddingStart+r.scrollbar.paddingEnd,l=r.scrollbar.size-n,i=r.content-r.viewport,a=l-o,s=function(e,[r,t]){return Math.min(t,Math.max(r,e))}(e,"ltr"===t?[0,i]:[-1*i,0]);return k([0,i],[0,a])(s)}function k(e,r){return t=>{if(e[0]===e[1]||r[0]===r[1])return r[0];const o=(r[1]-r[0])/(e[1]-e[0]);return r[0]+o*(t-e[0])}}function B(e,r){return e>0&&e<r}var F=(e,r=()=>{})=>{let t={left:e.scrollLeft,top:e.scrollTop},o=0;return function n(){const l={left:e.scrollLeft,top:e.scrollTop},i=t.left!==l.left,a=t.top!==l.top;(i||a)&&r(),t=l,o=window.requestAnimationFrame(n)}(),()=>window.cancelAnimationFrame(o)};function V(e,t){const o=s(e),n=r.useRef(0);return r.useEffect((()=>()=>window.clearTimeout(n.current)),[]),r.useCallback((()=>{window.clearTimeout(n.current),n.current=window.setTimeout(o,t)}),[o,t])}function q(e,r){const t=s(r);d((()=>{let r=0;if(e){const o=new ResizeObserver((()=>{cancelAnimationFrame(r),r=window.requestAnimationFrame(t)}));return o.observe(e),()=>{window.cancelAnimationFrame(r),o.unobserve(e)}}}),[e,t])}var $=g,G=E,J=X;function K({className:r,children:o,...n}){return t.createElement($,{"data-slot":"scroll-area",className:e("relative",r),...n},t.createElement(G,{"data-slot":"scroll-area-viewport",className:"ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"},o),t.createElement(Q,null),t.createElement(J,null))}function Q({className:r,orientation:o="vertical",...n}){return t.createElement(T,{"data-slot":"scroll-area-scrollbar",orientation:o,className:e("flex touch-none p-px transition-colors select-none","vertical"===o&&"h-full w-2.5 border-l border-l-transparent","horizontal"===o&&"h-2.5 flex-col border-t border-t-transparent",r),...n},t.createElement(H,{"data-slot":"scroll-area-thumb",className:"bg-border relative flex-1 rounded-full"}))}export{K as S,Q as a};
//# sourceMappingURL=scroll-area-v3WLDhPc.mjs.map