dgz-ui/dist/chunks/scroll-area-Nj6J9MqV.cjs.js

Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript

"use strict";const h=require("react/jsx-runtime"),ce=require("react"),v=require("./index-D9zW9Tk7.cjs.js"),y=require("./index-jFOWwfD3.cjs.js"),C=require("./index-CN4RxFxN.cjs.js"),ie=require("./index-DnRKXUWD.cjs.js"),ae=require("./index-pQxT4IlV.cjs.js"),de=require("./index-C8ni3LLa.cjs.js"),q=require("./utils-C4d7Ql9-.cjs.js");function ue(e){if(e&&e.__esModule)return 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=ue(ce);function fe(e,o){return s.useReducer((r,n)=>o[r][n]??r,e)}var M="ScrollArea",[F]=v.createContextScope(M),[he,w]=F(M),$=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,type:n="hover",dir:t,scrollHideDelay:l=600,...c}=e,[i,a]=s.useState(null),[f,d]=s.useState(null),[b,u]=s.useState(null),[S,p]=s.useState(null),[T,k]=s.useState(null),[P,_]=s.useState(0),[I,L]=s.useState(0),[j,A]=s.useState(!1),[D,H]=s.useState(!1),m=y.useComposedRefs(o,R=>a(R)),g=ie.useDirection(t);return h.jsx(he,{scope:r,type:n,dir:g,scrollHideDelay:l,scrollArea:i,viewport:f,onViewportChange:d,content:b,onContentChange:u,scrollbarX:S,onScrollbarXChange:p,scrollbarXEnabled:j,onScrollbarXEnabledChange:A,scrollbarY:T,onScrollbarYChange:k,scrollbarYEnabled:D,onScrollbarYEnabledChange:H,onCornerWidthChange:_,onCornerHeightChange:L,children:h.jsx(v.Primitive.div,{dir:g,...c,ref:m,style:{position:"relative","--radix-scroll-area-corner-width":P+"px","--radix-scroll-area-corner-height":I+"px",...e.style}})})});$.displayName=M;var G="ScrollAreaViewport",J=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,children:n,nonce:t,...l}=e,c=w(G,r),i=s.useRef(null),a=y.useComposedRefs(o,i,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(v.Primitive.div,{"data-radix-scroll-area-viewport":"",...l,ref:a,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 x="ScrollAreaScrollbar",X=s.forwardRef((e,o)=>{const{forceMount:r,...n}=e,t=w(x,e.__scopeScrollArea),{onScrollbarXEnabledChange:l,onScrollbarYEnabledChange:c}=t,i=e.orientation==="horizontal";return s.useEffect(()=>(i?l(!0):c(!0),()=>{i?l(!1):c(!1)}),[i,l,c]),t.type==="hover"?h.jsx(be,{...n,ref:o,forceMount:r}):t.type==="scroll"?h.jsx(Se,{...n,ref:o,forceMount:r}):t.type==="auto"?h.jsx(K,{...n,ref:o,forceMount:r}):t.type==="always"?h.jsx(Y,{...n,ref:o}):null});X.displayName=x;var be=s.forwardRef((e,o)=>{const{forceMount:r,...n}=e,t=w(x,e.__scopeScrollArea),[l,c]=s.useState(!1);return s.useEffect(()=>{const i=t.scrollArea;let a=0;if(i){const f=()=>{window.clearTimeout(a),c(!0)},d=()=>{a=window.setTimeout(()=>c(!1),t.scrollHideDelay)};return i.addEventListener("pointerenter",f),i.addEventListener("pointerleave",d),()=>{window.clearTimeout(a),i.removeEventListener("pointerenter",f),i.removeEventListener("pointerleave",d)}}},[t.scrollArea,t.scrollHideDelay]),h.jsx(v.Presence,{present:r||l,children:h.jsx(K,{"data-state":l?"visible":"hidden",...n,ref:o})})}),Se=s.forwardRef((e,o)=>{const{forceMount:r,...n}=e,t=w(x,e.__scopeScrollArea),l=e.orientation==="horizontal",c=z(()=>a("SCROLL_END"),100),[i,a]=fe("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(i==="idle"){const f=window.setTimeout(()=>a("HIDE"),t.scrollHideDelay);return()=>window.clearTimeout(f)}},[i,t.scrollHideDelay,a]),s.useEffect(()=>{const f=t.viewport,d=l?"scrollLeft":"scrollTop";if(f){let b=f[d];const u=()=>{const S=f[d];b!==S&&(a("SCROLL"),c()),b=S};return f.addEventListener("scroll",u),()=>f.removeEventListener("scroll",u)}},[t.viewport,l,a,c]),h.jsx(v.Presence,{present:r||i!=="hidden",children:h.jsx(Y,{"data-state":i==="hidden"?"hidden":"visible",...n,ref:o,onPointerEnter:v.composeEventHandlers(e.onPointerEnter,()=>a("POINTER_ENTER")),onPointerLeave:v.composeEventHandlers(e.onPointerLeave,()=>a("POINTER_LEAVE"))})})}),K=s.forwardRef((e,o)=>{const r=w(x,e.__scopeScrollArea),{forceMount:n,...t}=e,[l,c]=s.useState(!1),i=e.orientation==="horizontal",a=z(()=>{if(r.viewport){const f=r.viewport.offsetWidth<r.viewport.scrollWidth,d=r.viewport.offsetHeight<r.viewport.scrollHeight;c(i?f:d)}},10);return E(r.viewport,a),E(r.content,a),h.jsx(v.Presence,{present:n||l,children:h.jsx(Y,{"data-state":l?"visible":"hidden",...t,ref:o})})}),Y=s.forwardRef((e,o)=>{const{orientation:r="vertical",...n}=e,t=w(x,e.__scopeScrollArea),l=s.useRef(null),c=s.useRef(0),[i,a]=s.useState({content:0,viewport:0,scrollbar:{size:0,paddingStart:0,paddingEnd:0}}),f=oe(i.viewport,i.content),d={...n,sizes:i,onSizesChange:a,hasThumb:f>0&&f<1,onThumbChange:u=>l.current=u,onThumbPointerUp:()=>c.current=0,onThumbPointerDown:u=>c.current=u};function b(u,S){return xe(u,c.current,i,S)}return r==="horizontal"?h.jsx(me,{...d,ref:o,onThumbPositionChange:()=>{if(t.viewport&&l.current){const u=t.viewport.scrollLeft,S=V(u,i,t.dir);l.current.style.transform=`translate3d(${S}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(ve,{...d,ref:o,onThumbPositionChange:()=>{if(t.viewport&&l.current){const u=t.viewport.scrollTop,S=V(u,i);l.current.style.transform=`translate3d(0, ${S}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=w(x,e.__scopeScrollArea),[c,i]=s.useState(),a=s.useRef(null),f=y.useComposedRefs(o,a,l.onScrollbarXChange);return s.useEffect(()=>{a.current&&i(getComputedStyle(a.current))},[a]),h.jsx(Z,{"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":W(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),ne(u,b)&&d.preventDefault()}},onResize:()=>{a.current&&l.viewport&&c&&n({content:l.viewport.scrollWidth,viewport:l.viewport.offsetWidth,scrollbar:{size:a.current.clientWidth,paddingStart:O(c.paddingLeft),paddingEnd:O(c.paddingRight)}})}})}),ve=s.forwardRef((e,o)=>{const{sizes:r,onSizesChange:n,...t}=e,l=w(x,e.__scopeScrollArea),[c,i]=s.useState(),a=s.useRef(null),f=y.useComposedRefs(o,a,l.onScrollbarYChange);return s.useEffect(()=>{a.current&&i(getComputedStyle(a.current))},[a]),h.jsx(Z,{"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":W(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),ne(u,b)&&d.preventDefault()}},onResize:()=>{a.current&&l.viewport&&c&&n({content:l.viewport.scrollHeight,viewport:l.viewport.offsetHeight,scrollbar:{size:a.current.clientHeight,paddingStart:O(c.paddingTop),paddingEnd:O(c.paddingBottom)}})}})}),[pe,Q]=F(x),Z=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,sizes:n,hasThumb:t,onThumbChange:l,onThumbPointerUp:c,onThumbPointerDown:i,onThumbPositionChange:a,onDragScroll:f,onWheelScroll:d,onResize:b,...u}=e,S=w(x,r),[p,T]=s.useState(null),k=y.useComposedRefs(o,m=>T(m)),P=s.useRef(null),_=s.useRef(""),I=S.viewport,L=n.content-n.viewport,j=C.useCallbackRef(d),A=C.useCallbackRef(a),D=z(b,10);function H(m){if(P.current){const g=m.clientX-P.current.left,R=m.clientY-P.current.top;f({x:g,y:R})}}return s.useEffect(()=>{const m=g=>{const R=g.target;(p==null?void 0:p.contains(R))&&j(g,L)};return document.addEventListener("wheel",m,{passive:!1}),()=>document.removeEventListener("wheel",m,{passive:!1})},[I,p,L,j]),s.useEffect(A,[n,A]),E(p,D),E(S.content,D),h.jsx(pe,{scope:r,scrollbar:p,hasThumb:t,onThumbChange:C.useCallbackRef(l),onThumbPointerUp:C.useCallbackRef(c),onThumbPositionChange:A,onThumbPointerDown:C.useCallbackRef(i),children:h.jsx(v.Primitive.div,{...u,ref:k,style:{position:"absolute",...u.style},onPointerDown:v.composeEventHandlers(e.onPointerDown,m=>{m.button===0&&(m.target.setPointerCapture(m.pointerId),P.current=p.getBoundingClientRect(),_.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",S.viewport&&(S.viewport.style.scrollBehavior="auto"),H(m))}),onPointerMove:v.composeEventHandlers(e.onPointerMove,H),onPointerUp:v.composeEventHandlers(e.onPointerUp,m=>{const g=m.target;g.hasPointerCapture(m.pointerId)&&g.releasePointerCapture(m.pointerId),document.body.style.webkitUserSelect=_.current,S.viewport&&(S.viewport.style.scrollBehavior=""),P.current=null})})})}),N="ScrollAreaThumb",ee=s.forwardRef((e,o)=>{const{forceMount:r,...n}=e,t=Q(N,e.__scopeScrollArea);return h.jsx(v.Presence,{present:r||t.hasThumb,children:h.jsx(we,{ref:o,...n})})}),we=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,style:n,...t}=e,l=w(N,r),c=Q(N,r),{onThumbPositionChange:i}=c,a=y.useComposedRefs(o,b=>c.onThumbChange(b)),f=s.useRef(void 0),d=z(()=>{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 S=Pe(b,i);f.current=S,i()}};return i(),b.addEventListener("scroll",u),()=>b.removeEventListener("scroll",u)}},[l.viewport,d,i]),h.jsx(v.Primitive.div,{"data-state":c.hasThumb?"visible":"hidden",...t,ref:a,style:{width:"var(--radix-scroll-area-thumb-width)",height:"var(--radix-scroll-area-thumb-height)",...n},onPointerDownCapture:v.composeEventHandlers(e.onPointerDownCapture,b=>{const S=b.target.getBoundingClientRect(),p=b.clientX-S.left,T=b.clientY-S.top;c.onThumbPointerDown({x:p,y:T})}),onPointerUp:v.composeEventHandlers(e.onPointerUp,c.onThumbPointerUp)})});ee.displayName=N;var U="ScrollAreaCorner",re=s.forwardRef((e,o)=>{const r=w(U,e.__scopeScrollArea),n=!!(r.scrollbarX&&r.scrollbarY);return r.type!=="scroll"&&n?h.jsx(ge,{...e,ref:o}):null});re.displayName=U;var ge=s.forwardRef((e,o)=>{const{__scopeScrollArea:r,...n}=e,t=w(U,r),[l,c]=s.useState(0),[i,a]=s.useState(0),f=!!(l&&i);return E(t.scrollbarX,()=>{var b;const d=((b=t.scrollbarX)==null?void 0:b.offsetHeight)||0;t.onCornerHeightChange(d),a(d)}),E(t.scrollbarY,()=>{var b;const d=((b=t.scrollbarY)==null?void 0:b.offsetWidth)||0;t.onCornerWidthChange(d),c(d)}),f?h.jsx(v.Primitive.div,{...n,ref:o,style:{width:l,height:i,position:"absolute",right:t.dir==="ltr"?0:void 0,left:t.dir==="rtl"?0:void 0,bottom:0,...e.style}}):null});function O(e){return e?parseInt(e,10):0}function oe(e,o){const r=e/o;return isNaN(r)?0:r}function W(e){const o=oe(e.viewport,e.content),r=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,n=(e.scrollbar.size-r)*o;return Math.max(n,18)}function xe(e,o,r,n="ltr"){const t=W(r),l=t/2,c=o||l,i=t-c,a=r.scrollbar.paddingStart+c,f=r.scrollbar.size-r.scrollbar.paddingEnd-i,d=r.content-r.viewport,b=n==="ltr"?[0,d]:[d*-1,0];return te([a,f],b)(e)}function V(e,o,r="ltr"){const n=W(o),t=o.scrollbar.paddingStart+o.scrollbar.paddingEnd,l=o.scrollbar.size-t,c=o.content-o.viewport,i=l-n,a=r==="ltr"?[0,c]:[c*-1,0],f=de.clamp(e,a);return te([0,c],[0,i])(f)}function te(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 ne(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,i=r.top!==l.top;(c||i)&&o(),r=l,n=window.requestAnimationFrame(t)})(),()=>window.cancelAnimationFrame(n)};function z(e,o){const r=C.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 E(e,o){const r=C.useCallbackRef(o);ae.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 le=$,Ce=J,Re=re;const se=s.forwardRef(({className:e,children:o,...r},n)=>h.jsxs(le,{ref:n,className:q.cn("relative overflow-auto",e),...r,children:[h.jsx(Ce,{className:"h-full w-full rounded-[inherit]",children:o}),h.jsx(B,{}),h.jsx(Re,{})]}));se.displayName=le.displayName;const B=s.forwardRef(({className:e,orientation:o="vertical",...r},n)=>h.jsx(X,{ref:n,orientation:o,className:q.cn("flex touch-none transition-colors select-none",o==="vertical"&&"h-full w-2.5 border-l border-l-transparent p-[1px]",o==="horizontal"&&"h-2.5 flex-col border-t border-t-transparent p-[1px]",e),...r,children:h.jsx(ee,{className:"bg-border relative flex-1 rounded-full"})}));B.displayName=X.displayName;exports.ScrollArea=se;exports.ScrollBar=B;
//# sourceMappingURL=scroll-area-Nj6J9MqV.cjs.js.map