https://resume.thefullstack.engineer/assets/scroll-area-Dtc1Yz69.js

1import{s as e,t}from"./react-BBFR36sd.js";import{t as n}from"./jsx-runtime-BVfipe_Y.js";import{t as r}from"./compiler-runtime-CpPblHQP.js";import{g as i,h as a,p as o,r as s}from"./button-CqtzPTpc.js";import{t as c}from"./style-B6KiDbIe.js";import{C as l,E as u,u as d}from"./useOpenChangeComplete-Djf8f82-.js";import{St as f}from"./usePositioner-D2DEprhe.js";import{n as ee,r as p}from"./shadowDom-C2nMz6Hj.js";import{t as m}from"./useBaseUiId-DlCfk3IR.js";var h=n(),g=e(t()),_=g.createContext(void 0),v={disableStyleElements:!1};function y(){return g.useContext(_)??v}function b(e,t=-(2**53-1),n=2**53-1){return Math.max(t,Math.min(e,n))}var x=g.createContext(void 0);function S(){let e=g.useContext(x);if(e===void 0)throw Error(o(53));return e}var C=function(e){return e.scrollAreaCornerHeight=`--scroll-area-corner-height`,e.scrollAreaCornerWidth=`--scroll-area-corner-width`,e}({});function w(e,t,n){if(!e)return 0;let r=getComputedStyle(e),i=n===`x`?`Inline`:`Block`;return n===`x`&&t===`margin`?parseFloat(r[`${t}InlineStart`])*2:parseFloat(r[`${t}${i}Start`])+parseFloat(r[`${t}${i}End`])}var T=function(e){return e.orientation=`data-orientation`,e.hovering=`data-hovering`,e.scrolling=`data-scrolling`,e.hasOverflowX=`data-has-overflow-x`,e.hasOverflowY=`data-has-overflow-y`,e.overflowXStart=`data-overflow-x-start`,e.overflowXEnd=`data-overflow-x-end`,e.overflowYStart=`data-overflow-y-start`,e.overflowYEnd=`data-overflow-y-end`,e}({}),E=`base-ui-disable-scrollbar`,D={className:E,getElement(e){return(0,h.jsx)(`style`,{nonce:e,href:E,precedence:`base-ui:low`,children:`.${E}{scrollbar-width:none}.${E}::-webkit-scrollbar{display:none}`})}},O=function(e){return e.scrolling=`data-scrolling`,e.hasOverflowX=`data-has-overflow-x`,e.hasOverflowY=`data-has-overflow-y`,e.overflowXStart=`data-overflow-x-start`,e.overflowXEnd=`data-overflow-x-end`,e.overflowYStart=`data-overflow-y-start`,e.overflowYEnd=`data-overflow-y-end`,e}({}),te={hasOverflowX:e=>e?{[O.hasOverflowX]:``}:null,hasOverflowY:e=>e?{[O.hasOverflowY]:``}:null,overflowXStart:e=>e?{[O.overflowXStart]:``}:null,overflowXEnd:e=>e?{[O.overflowXEnd]:``}:null,overflowYStart:e=>e?{[O.overflowYStart]:``}:null,overflowYEnd:e=>e?{[O.overflowYEnd]:``}:null,cornerHidden:()=>null},k={x:0,y:0},A={width:0,height:0},ne={xStart:!1,xEnd:!1,yStart:!1,yEnd:!1},j={x:!0,y:!0,corner:!0},M=g.forwardRef(function(e,t){let{render:n,className:r,overflowEdgeThreshold:a,style:o,...c}=e,l=N(a),u=m(),d=f(),p=f(),{nonce:_,disableStyleElements:v}=y(),[b,S]=g.useState(!1),[E,O]=g.useState(!1),[M,P]=g.useState(!1),[F,re]=g.useState(!1),[I,L]=g.useState(!1),[R,ie]=g.useState(A),[ae,z]=g.useState(A),[B,V]=g.useState(ne),[H,U]=g.useState(j),W=g.useRef(null),G=g.useRef(null),K=g.useRef(null),q=g.useRef(null),J=g.useRef(null),Y=g.useRef(null),oe=g.useRef(null),X=g.useRef(!1),se=g.useRef(0),ce=g.useRef(0),le=g.useRef(0),ue=g.useRef(0),Z=g.useRef(`vertical`),Q=g.useRef(k),de=i(e=>{let t=e.x-Q.current.x,n=e.y-Q.current.y;Q.current=e,n!==0&&(P(!0),d.start(500,()=>{P(!1)})),t!==0&&(O(!0),p.start(500,()=>{O(!1)}))}),$=i(e=>{e.button===0&&(X.current=!0,se.current=e.clientY,ce.current=e.clientX,Z.current=e.currentTarget.getAttribute(T.orientation),G.current&&(le.current=G.current.scrollTop,ue.current=G.current.scrollLeft),J.current&&Z.current===`vertical`&&J.current.setPointerCapture(e.pointerId),Y.current&&Z.current===`horizontal`&&Y.current.setPointerCapture(e.pointerId))}),fe=i(e=>{if(!X.current)return;let t=e.clientY-se.current,n=e.clientX-ce.current;if(G.current){let r=G.current.scrollHeight,i=G.current.clientHeight,a=G.current.scrollWidth,o=G.current.clientWidth;if(J.current&&K.current&&Z.current===`vertical`){let n=w(K.current,`padding`,`y`),a=w(J.current,`margin`,`y`),o=J.current.offsetHeight,s=t/(K.current.offsetHeight-o-n-a);G.current.scrollTop=le.current+s*(r-i),e.preventDefault(),P(!0),d.start(500,()=>{P(!1)})}if(Y.current&&q.current&&Z.current===`horizontal`){let t=w(q.current,`padding`,`x`),r=w(Y.current,`margin`,`x`),i=Y.current.offsetWidth,s=n/(q.current.offsetWidth-i-t-r);G.current.scrollLeft=ue.current+s*(a-o),e.preventDefault(),O(!0),p.start(500,()=>{O(!1)})}}}),pe=i(e=>{X.current=!1,J.current&&Z.current===`vertical`&&J.current.releasePointerCapture(e.pointerId),Y.current&&Z.current===`horizontal`&&Y.current.releasePointerCapture(e.pointerId)});function me(e){re(e.pointerType===`touch`)}function he(e){me(e),e.pointerType!==`touch`&&S(ee(W.current,e.target))}let ge=g.useMemo(()=>({scrolling:E||M,hasOverflowX:!H.x,hasOverflowY:!H.y,overflowXStart:B.xStart,overflowXEnd:B.xEnd,overflowYStart:B.yStart,overflowYEnd:B.yEnd,cornerHidden:H.corner}),[E,M,H.x,H.y,H.corner,B]),_e={role:`presentation`,onPointerEnter:he,onPointerMove:he,onPointerDown:me,onPointerLeave(){S(!1)},style:{position:`relative`,[C.scrollAreaCornerHeight]:`${R.height}px`,[C.scrollAreaCornerWidth]:`${R.width}px`}},ve=s(`div`,e,{state:ge,ref:[t,W],props:[_e,c],stateAttributesMapping:te}),ye=g.useMemo(()=>({handlePointerDown:$,handlePointerMove:fe,handlePointerUp:pe,handleScroll:de,cornerSize:R,setCornerSize:ie,thumbSize:ae,setThumbSize:z,hasMeasuredScrollbar:I,setHasMeasuredScrollbar:L,touchModality:F,cornerRef:oe,scrollingX:E,setScrollingX:O,scrollingY:M,setScrollingY:P,hovering:b,setHovering:S,viewportRef:G,rootRef:W,scrollbarYRef:K,scrollbarXRef:q,thumbYRef:J,thumbXRef:Y,rootId:u,hiddenState:H,setHiddenState:U,overflowEdges:B,setOverflowEdges:V,viewportState:ge,overflowEdgeThreshold:l}),[$,fe,pe,de,R,ae,I,F,E,O,M,P,b,S,u,H,B,ge,l]);return(0,h.jsxs)(x.Provider,{value:ye,children:[!v&&D.getElement(_),ve]})});function N(e){if(typeof e==`number`){let t=Math.max(0,e);return{xStart:t,xEnd:t,yStart:t,yEnd:t}}return{xStart:Math.max(0,e?.xStart||0),xEnd:Math.max(0,e?.xEnd||0),yStart:Math.max(0,e?.yStart||0),yEnd:Math.max(0,e?.yEnd||0)}}var P=g.createContext(void 0),F=function(e){return e.scrollAreaOverflowXStart=`--scroll-area-overflow-x-start`,e.scrollAreaOverflowXEnd=`--scroll-area-overflow-x-end`,e.scrollAreaOverflowYStart=`--scroll-area-overflow-y-start`,e.scrollAreaOverflowYEnd=`--scroll-area-overflow-y-end`,e}({});function re(e,t){if(t<=0)return 0;let n=b(e,0,t),r=n,i=t-n,a=r<=1,o=i<=1;return a&&o?r<=i?0:t:a?0:o?t:n}var I=!1;function L(){I||l||(typeof CSS<`u`&&`registerProperty`in CSS&&[F.scrollAreaOverflowXStart,F.scrollAreaOverflowXEnd,F.scrollAreaOverflowYStart,F.scrollAreaOverflowYEnd].forEac

1h(e=>{try{CSS.registerProperty({name:e,syntax:`<length>`,inherits:!1,initialValue:`0px`})}catch{}}),I=!0)}var R=g.forwardRef(function(e,t){let{render:n,className:r,style:o,...c}=e,{viewportRef:l,scrollbarYRef:d,scrollbarXRef:ee,thumbYRef:p,thumbXRef:m,cornerRef:_,cornerSize:v,setCornerSize:y,setThumbSize:x,rootId:C,setHiddenState:T,hiddenState:E,setHasMeasuredScrollbar:O,handleScroll:k,setHovering:A,setOverflowEdges:ne,overflowEdges:j,overflowEdgeThreshold:M,scrollingX:N,scrollingY:I}=S(),R=u(),z=g.useRef(!0),B=g.useRef([NaN,NaN,NaN,NaN]),V=f(),H=f(),U=i(()=>{let e=l.current,t=d.current,n=ee.current,r=p.current,i=m.current,a=_.current;if(!e)return;let o=e.scrollHeight,s=e.scrollWidth,c=e.clientHeight,u=e.clientWidth,f=e.scrollTop,h=e.scrollLeft,g=B.current,S=Number.isNaN(g[0]);if(g[0]=c,g[1]=o,g[2]=u,g[3]=s,S&&O(!0),o===0||s===0)return;let C=ie(e),E=C.y,D=C.x,te=u/s,k=c/o,A=Math.max(0,s-u),j=Math.max(0,o-c),N=0,P=0;if(!D){let e=0;e=b(R===`rtl`?-h:h,0,A),N=re(e,A),P=A-N}let I=E?0:b(f,0,j),L=E?0:re(I,j),z=E?0:j-L,V=D?0:u,H=E?0:c,U=0,W=0;!D&&!E&&(U=t?.offsetWidth||0,W=n?.offsetHeight||0);let G=v.width===0&&v.height===0,K=G?U:0,q=G?W:0,J=w(n,`padding`,`x`),Y=w(t,`padding`,`y`),oe=w(i,`margin`,`x`),X=w(r,`margin`,`y`),se=V-J-oe,ce=H-Y-X,le=n?Math.min(n.offsetWidth-K,se):se,ue=t?Math.min(t.offsetHeight-q,ce):ce,Z=Math.max(16,le*te),Q=Math.max(16,ue*k);if(x(e=>e.height===Q&&e.width===Z?e:{width:Z,height:Q}),t&&r){let e=t.offsetHeight-Q-Y-X,n=o-c,i=n===0?0:f/n,a=Math.min(e,Math.max(0,i*e));r.style.transform=`translate3d(0,${a}px,0)`}if(n&&i){let e=n.offsetWidth-Z-J-oe,t=s-u,r=t===0?0:h/t,a=R===`rtl`?b(r*e,-e,0):b(r*e,0,e);i.style.transform=`translate3d(${a}px,0,0)`}let de=[[F.scrollAreaOverflowXStart,N],[F.scrollAreaOverflowXEnd,P],[F.scrollAreaOverflowYStart,L],[F.scrollAreaOverflowYEnd,z]];for(let[t,n]of de)e.style.setProperty(t,`${n}px`);a&&(D||E?y({width:0,height:0}):!D&&!E&&y({width:U,height:W})),T(e=>ae(e,C));let $={xStart:!D&&N>M.xStart,xEnd:!D&&P>M.xEnd,yStart:!E&&L>M.yStart,yEnd:!E&&z>M.yEnd};ne(e=>e.xStart===$.xStart&&e.xEnd===$.xEnd&&e.yStart===$.yStart&&e.yEnd===$.yEnd?e:$)});a(()=>{l.current&&L()},[l]),a(()=>{queueMicrotask(U)},[U,E,R]),a(()=>{l.current?.matches(`:hover`)&&A(!0)},[l,A]),g.useEffect(()=>{let e=l.current;if(typeof ResizeObserver>`u`||!e)return;let t=!1,n=new ResizeObserver(()=>{if(!t){t=!0;let n=B.current;if(n[0]===e.clientHeight&&n[1]===e.scrollHeight&&n[2]===e.clientWidth&&n[3]===e.scrollWidth)return}U()});return n.observe(e),H.start(0,()=>{let t=e.getAnimations({subtree:!0});t.length!==0&&Promise.allSettled(t.map(e=>e.finished)).then(U).catch(()=>{})}),()=>{n.disconnect(),H.clear()}},[U,l,H]);function W(){z.current=!1}let G={role:`presentation`,...C&&{"data-id":`${C}-viewport`},tabIndex:E.x&&E.y?-1:0,className:D.className,style:{overflow:`scroll`},onScroll(){l.current&&(U(),z.current||k({x:l.current.scrollLeft,y:l.current.scrollTop}),V.start(100,()=>{z.current=!0}))},onWheel:W,onTouchMove:W,onPointerMove:W,onPointerEnter:W,onKeyDown:W},K=g.useMemo(()=>({scrolling:N||I,hasOverflowX:!E.x,hasOverflowY:!E.y,overflowXStart:j.xStart,overflowXEnd:j.xEnd,overflowYStart:j.yStart,overflowYEnd:j.yEnd,cornerHidden:E.corner}),[N,I,E.x,E.y,E.corner,j]),q=s(`div`,e,{ref:[t,l],state:K,props:[G,c],stateAttributesMapping:te}),J=g.useMemo(()=>({computeThumbPosition:U}),[U]);return(0,h.jsx)(P.Provider,{value:J,children:q})});function ie(e){let t=e.clientHeight>=e.scrollHeight,n=e.clientWidth>=e.scrollWidth;return{y:t,x:n,corner:t||n}}function ae(e,t){return e.y===t.y&&e.x===t.x&&e.corner===t.corner?e:t}var z=g.createContext(void 0);function B(){let e=g.useContext(z);if(e===void 0)throw Error(o(54));return e}var V=function(e){return e.scrollAreaThumbHeight=`--scroll-area-thumb-height`,e.scrollAreaThumbWidth=`--scroll-area-thumb-width`,e}({}),H=g.forwardRef(function(e,t){let{render:n,className:r,orientation:i=`vertical`,keepMounted:a=!1,style:o,...c}=e,{hovering:l,scrollingX:f,scrollingY:m,hiddenState:_,overflowEdges:v,scrollbarYRef:y,scrollbarXRef:b,viewportRef:x,thumbYRef:T,thumbXRef:E,handlePointerDown:D,handlePointerUp:O,rootId:k,thumbSize:A,hasMeasuredScrollbar:ne}=S(),j={hovering:l,scrolling:{horizontal:f,vertical:m}[i],orientation:i,hasOverflowX:!_.x,hasOverflowY:!_.y,overflowXStart:v.xStart,overflowXEnd:v.xEnd,overflowYStart:v.yStart,overflowYEnd:v.yEnd,cornerHidden:_.corner},M=u(),N=!ne&&!a,P=i===`vertical`?_.y:_.x,F=a||!P;g.useEffect(()=>{if(!F)return;let e=x.current,t=i===`vertical`?y.current:b.current;if(!t)return;

1function n(n){if(!e||!t||n.ctrlKey)return;n.preventDefault();let r=i===`horizontal`,a=r?`scrollLeft`:`scrollTop`,o=r?n.deltaX:n.deltaY,s=r?e.scrollWidth-e.clientWidth:e.scrollHeight-e.clientHeight,c=r&&M===`rtl`?-s:0,l=r&&M===`rtl`?0:s,u=e[a];u<=c&&o<0||u>=l&&o>0||(e[a]=Math.min(l,Math.max(c,u+o)))}return d(t,`wheel`,n,{passive:!1})},[M,i,b,y,F,x]);let re={...k&&{"data-id":`${k}-scrollbar`},onPointerDown(e){if(e.button!==0)return;let t=p(e.nativeEvent),n=i===`vertical`?T.current:E.current;if(!(n&&ee(n,t))&&x.current){if(T.current&&y.current&&i===`vertical`){let t=w(T.current,`margin`,`y`),n=w(y.current,`padding`,`y`),r=T.current.offsetHeight,i=y.current.getBoundingClientRect(),a=e.clientY-i.top-r/2-n+t/2,o=x.current.scrollHeight,s=x.current.clientHeight,c=a/(y.current.offsetHeight-r-n-t)*(o-s);x.current.scrollTop=c}if(E.current&&b.current&&i===`horizontal`){let t=w(E.current,`margin`,`x`),n=w(b.current,`padding`,`x`),r=E.current.offsetWidth,i=b.current.getBoundingClientRect(),a=e.clientX-i.left-r/2-n+t/2,o=x.current.scrollWidth,s=x.current.clientWidth,c=a/(b.current.offsetWidth-r-n-t),l;M===`rtl`?(l=(1-c)*(o-s),x.current.scrollLeft<=0&&(l=-l)):l=c*(o-s),x.current.scrollLeft=l}D(e)}},onPointerUp:O,style:{position:`absolute`,touchAction:`none`,WebkitUserSelect:`none`,userSelect:`none`,visibility:N?`hidden`:void 0,...i===`vertical`&&{top:0,bottom:`var(${C.scrollAreaCornerHeight})`,insetInlineEnd:0,[V.scrollAreaThumbHeight]:`${A.height}px`},...i===`horizontal`&&{insetInlineStart:0,insetInlineEnd:`var(${C.scrollAreaCornerWidth})`,bottom:0,[V.scrollAreaThumbWidth]:`${A.width}px`}}},I=s(`div`,e,{ref:[t,i===`vertical`?y:b],state:j,props:[re,c],stateAttributesMapping:te}),L=g.useMemo(()=>({orientation:i}),[i]);return F?(0,h.jsx)(z.Provider,{value:L,children:I}):null}),U=g.forwardRef(function(e,t){let{render:n,className:r,style:i,...a}=e,{thumbYRef:o,thumbXRef:c,handlePointerDown:l,handlePointerMove:u,handlePointerUp:d,setScrollingX:f,setScrollingY:ee,hasMeasuredScrollbar:p}=S(),{orientation:m}=B();return s(`div`,e,{ref:[t,m===`vertical`?o:c],state:{orientation:m},props:[{onPointerDown:l,onPointerMove:u,onPointerUp(e){m===`vertical`&&ee(!1),m===`horizontal`&&f(!1),d(e)},style:{visibility:p?void 0:`hidden`,...m===`vertical`&&{height:`var(${V.scrollAreaThumbHeight})`},...m===`horizontal`&&{width:`var(${V.scrollAreaThumbWidth})`}}},a]})}),W=g.forwardRef(function(e,t){let{render:n,className:r,style:i,...a}=e,{cornerRef:o,cornerSize:c,hiddenState:l}=S(),u=s(`div`,e,{ref:[t,o],props:[{style:{position:`absolute`,bottom:0,insetInlineEnd:0,width:c.width,height:c.height}},a]});return l.corner?null:u}),G=r();function K(e){let t=(0,G.c)(14),n,r,i;t[0]===e?(n=t[1],r=t[2],i=t[3]):({className:r,children:n,...i}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i);let a;t[4]===r?a=t[5]:(a=c(`relative`,r),t[4]=r,t[5]=a);let o;t[6]===n?o=t[7]:(o=(0,h.jsx)(R,{"data-slot":`scroll-area-viewport`,className:`size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50`,children:n}),t[6]=n,t[7]=o);let s,l;t[8]===Symbol.for(`react.memo_cache_sentinel`)?(s=(0,h.jsx)(q,{}),l=(0,h.jsx)(W,{}),t[8]=s,t[9]=l):(s=t[8],l=t[9]);let u;return t[10]!==i||t[11]!==a||t[12]!==o?(u=(0,h.jsxs)(M,{"data-slot":`scroll-area`,className:a,...i,children:[o,s,l]}),t[10]=i,t[11]=a,t[12]=o,t[13]=u):u=t[13],u}function q(e){let t=(0,G.c)(11),n,r,i;t[0]===e?(n=t[1],r=t[2],i=t[3]):({className:n,orientation:i,...r}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i);let a=i===void 0?`vertical`:i,o;t[4]===n?o=t[5]:(o=c(`flex touch-none select-none p-px transition-colors data-horizontal:h-2.5 data-vertical:h-full data-vertical:w-2.5 data-horizontal:flex-col data-vertical:border-s data-vertical:border-s-transparent data-horizontal:border-t data-horizontal:border-t-transparent`,n),t[4]=n,t[5]=o);let s;t[6]===Symbol.for(`react.memo_cache_sentinel`)?(s=(0,h.jsx)(U,{"data-slot":`scroll-area-thumb`,className:`relative flex-1 rounded-full bg-border`}),t[6]=s):s=t[6];let l;return t[7]!==a||t[8]!==r||t[9]!==o?(l=(0,h.jsx)(H,{"data-slot":`scroll-area-scrollbar`,"data-orientation":a,orientation:a,className:o,...r,children:s}),t[7]=a,t[8]=r,t[9]=o,t[10]=l):l=t[10],l}export{b as n,y as r,K as t};